# منتقي التاريخ المحوّلات
> استخدام منتقي التاريخ من slotsmith مع shadcn/ui وMUI وChakra وAnt Design وRadix Themes.
## shadcn/ui
يعرض هذا المحوّل `DatePicker` بأجزاء shadcn/ui. انسخ الملف إلى تطبيقك ومرّر الخريطة إلى `components`، وكل فتحة لا تمرّرها تبقى على بديلها الافتراضي.
```tsx
/**
* DatePicker for shadcn/ui
*
* A `components` map that renders the slotsmith date picker with shadcn/ui
* primitives, written for shadcn/ui on Tailwind CSS v4. Copy the file, keep
* the parts you want, and pass the map as `components={shadcnComponents}`;
* every slot left out keeps its fallback.
*
* The `@/components/ui/*` and `@/lib/utils` imports are the app's own
* shadcn/ui files.
*/
import { useMemo, type RefObject } from "react";
import {
useDatePickerContext,
type DatePickerComponents,
} from "slotsmith/date-picker";
import { Button } from "@/components/ui/button";
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
/**
* shadcn/ui date picker parts
*
* What the `components` map looks like against shadcn/ui. Element parts are
* plain Tailwind on the DOM node the component already renders; only the
* widget parts need a body.
*
* The range band is built from stacked `data-*` variants rather than from
* class order: `[data-in-range][data-range-start]` outranks `[data-in-range]`
* on specificity, so which corners are round never depends on how Tailwind
* happens to sort its output.
*/
const Chevron = ({ flip }: { flip?: boolean }) => (
);
/**
* The caption's two dropdowns: shadcn's `NativeSelect`, as shadcn's own
* calendar uses native selects for its month and year. The browser draws the
* open list itself, and `color-scheme` makes it dark in dark mode.
*/
const captionSelect =
"h-7 border-transparent py-0 ps-2 pe-7 text-sm font-medium shadow-none scheme-light dark:scheme-dark";
/** The open list takes the popover's colours: on Windows the browser draws it from the options' own. */
const captionOption = "bg-popover text-popover-foreground";
/**
* Calendar layout
*
* The calendar's own structure, which no slot renders: the header row, the
* seven columns of the weekday and week rows, and the centred cells. Laid
* out here too, so the picker holds together without slotsmith's stylesheet.
* Tailwind reads `_` in a selector as a space, so the class names' own
* underscores are escaped, in `String.raw` so the backslash stays.
*/
const calendarLayout = cn(
String.raw`[&_.sdp\_\_header]:flex [&_.sdp\_\_header]:items-center [&_.sdp\_\_header]:justify-between [&_.sdp\_\_header]:gap-1 [&_.sdp\_\_header]:pb-2`,
String.raw`[&_.sdp\_\_weekdays]:grid [&_.sdp\_\_weekdays]:grid-cols-7 [&_.sdp\_\_week]:grid [&_.sdp\_\_week]:grid-cols-7`,
String.raw`[&_.sdp\_\_columnheader]:grid [&_.sdp\_\_columnheader]:min-w-0 [&_.sdp\_\_columnheader]:place-items-center`,
String.raw`[&_.sdp\_\_cell]:grid [&_.sdp\_\_cell]:min-w-0 [&_.sdp\_\_cell]:place-items-center`,
);
export const shadcnComponents: Partial = {
Root: ({ className, ...props }) => (
),
/**
* shadcn's `InputGroup`: the field frame, with its border, ring and
* destructive state. With the text field it holds the `InputGroupInput`
* and the buttons; as the single button trigger it is the combobox itself,
* a frame rather than a `Button` because it holds the clear button and a
* button cannot hold another.
*/
Trigger: ({ className, ...props }) => (
),
Value: ({ text, placeholder, empty }) => (
{empty ? placeholder : text}
),
/** The group's `InputGroupInput`: the frame draws the field around it. */
Input: ({ className, ...props }) => (
),
/** An icon `InputGroupButton` around the calendar glyph, in the inline-end addon. */
Toggle: ({ className, type = "button", ...props }) => (
),
Icon: ({ open }) => (
),
/** An icon `InputGroupButton`; the click stops here so it does not reach the trigger. */
Clear: ({ onClick, ...aria }) => (
{
event.stopPropagation();
onClick();
}}
{...aria}
>
),
/**
* shadcn's `Popover`, anchored to the trigger: it portals the calendar,
* places and animates it as every shadcn popover does. Focus stays with
* the picker, which moves it into the grid itself. The content keeps every
* prop the part is given, its `id` included, which is how the picker knows
* the portaled calendar is still part of it; the built-in position style is
* left out.
*/
Popup: function ShadcnPopup({ className, style: _style, ...props }) {
const { position } = useDatePickerContext();
const anchor = useMemo(
() => ({ current: position.anchor }),
[position.anchor],
);
if (!position.anchor) return null;
return (
} />
event.preventDefault()}
onCloseAutoFocus={(event) => event.preventDefault()}
// Its own stacking context, so the range band behind each day stays above the surface.
className={cn("isolate w-72 p-2", calendarLayout, className)}
{...props}
/>
);
},
Calendar: ({ className, ...props }) => (
),
Caption: ({
monthIndex,
year,
months,
years,
onMonthChange,
onYearChange,
labels,
}) => (
onMonthChange(Number(event.target.value))}
>
{months.map((name, index) => (
{name}
))}
onYearChange(Number(event.target.value))}
>
{years.map((value) => (
{value}
))}
),
/** A ghost icon `Button` with the chevron, mirrored for the next month. */
Nav: ({ direction, onClick, disabled, ...aria }) => (
),
/**
* One column header. Clipped rather than wrapped: the column is one cell
* wide, and locales whose short weekday names are full words would
* otherwise make the row two lines tall.
*/
Weekday: ({ label }) => (
{label}
),
/**
* One cell of the grid.
*
* A fixed `size-8` square, centred in its column, so the button is exactly
* as wide as it is tall rather than stretching to the column. Blocked days
* are dimmed through `data-[disabled]`: they stay focusable, so the
* `disabled:` variant never applies.
*
* The band is a `before:` layer at a negative z-index: it reaches half the
* gutter past each inline edge so neighbouring days meet across the gap,
* and it sits behind both the picked chip and the label.
*/
Day: ({ className, type = "button", ...props }) => (
),
DayContent: ({ day }) => {day.day},
/** Outline `Button` chips for the presets, and a ghost `Button` for today. */
Footer: ({ presets, onPreset, onToday, todayLabel }) => (
{presets.map((preset) => (
))}
),
};
```
## MUI
يعرض هذا المحوّل `DatePicker` بأجزاء MUI. انسخ الملف إلى تطبيقك ومرّر الخريطة إلى `components`، وكل فتحة لا تمرّرها تبقى على بديلها الافتراضي.
```tsx
/**
* DatePicker for MUI
*
* A `components` map that renders the slotsmith date picker with MUI
* primitives, tested against MUI v7. Copy the file, keep the parts you want,
* and pass the map as `components={muiComponents}`; every slot left out keeps
* its fallback.
*/
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import Select from "@mui/material/Select";
import type { SxProps, Theme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { useDatePickerContext, type DatePickerComponents } from "slotsmith/date-picker";
/**
* MUI date picker parts
*
* Built from MUI's primitives — `Paper`, `IconButton`, `Select`, `Typography`,
* `Box`, `Chip` — not from MUI's own date picker, which is a competing engine
* rather than a set of parts and ships in a separate package. The result
* wears Material and follows the theme, dark mode included.
*
* This is the reason the element parts `Omit` `color` from their DOM props:
* MUI reuses that attribute name for its own semantic palette prop, so a slot
* that forwarded the DOM `color` would collide with ``.
*/
/** The day cell, in pixels. Matches `--sdp-cell`, so the square fills its column. */
const DAY_SIZE = 32;
/** The chip's corner, shared with the two ends of the band so they line up. */
const DAY_RADIUS = 8;
const ChevronIcon = ({ flip }: { flip: boolean }) => (
);
/**
* Caption select
*
* The month and year dropdowns share their whole look.
*
* These are `native`, not `MenuItem` lists, for two reasons that both come
* from MUI rendering its menu as a `Modal`: a portalled menu is outside the
* picker's root, so choosing a month would count as an outside click and
* close the calendar; and with the portal disabled the modal marks the page
* behind it `aria-hidden` while focus is still inside it, which the browser
* reports.
*/
const captionSx: SxProps = {
"& .MuiNativeSelect-select": { py: 0.25, typography: "body2", fontWeight: 600 },
"&::before, &::after": { display: "none" },
};
/**
* Calendar style
*
* The surface, in its own stacking context so the range band behind each
* day stays above it, and the calendar's own structure, which no slot
* renders: the header row, the seven columns of the weekday and week rows,
* and the centred cells. Laid out here, so the picker holds together
* without slotsmith's stylesheet.
*/
const calendarSx: SxProps = {
width: 288,
p: 1,
isolation: "isolate",
"& .sdp__header": { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 0.5, pb: 1 },
"& :is(.sdp__weekdays, .sdp__week)": { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
"& :is(.sdp__columnheader, .sdp__cell)": { display: "grid", placeItems: "center", minWidth: 0 },
};
export const muiComponents: Partial = {
Root: ({ className, ...props }) => (
),
/**
* An outlined-input shell, so it sits beside MUI's TextFields without
* looking pasted in. An invalid value takes the theme's `error` colour and
* MUI's `Mui-error` state class, as a `TextField` with `error` does.
*/
Trigger: ({ className, ...props }) => (
)["data-invalid"] ? "Mui-error" : undefined].filter(Boolean).join(" ") || undefined}
sx={{
cursor: "pointer",
outline: 0,
width: 1,
minHeight: 40,
display: "flex",
alignItems: "center",
gap: 1,
px: 1.5,
py: 0.75,
borderRadius: 1,
border: 1,
borderColor: "divider",
typography: "body2",
color: "text.primary",
textAlign: "start",
"&:hover": { borderColor: "text.primary" },
"&[data-open], &:focus-visible": {
borderColor: "primary.main",
boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,
},
"&[data-trigger='input']": { cursor: "text", pe: 0.5 },
"&[data-trigger='input']:focus-within": {
borderColor: "primary.main",
boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,
},
"&[aria-disabled='true'], &[data-trigger='input'][data-disabled]": { opacity: 0.5, cursor: "not-allowed" },
"&.Mui-error": { borderColor: "error.main" },
"&.Mui-error[data-open], &.Mui-error:focus-visible, &.Mui-error[data-trigger='input']:focus-within": {
boxShadow: (theme) => `0 0 0 1px ${theme.palette.error.main}`,
},
}}
{...props}
/>
),
/** MUI's bare `InputBase`: the trigger frame holds the border, the field only the text. */
Input: ({ ref, value, onChange, onKeyDown, onBlur, onFocus, onClick, disabled, placeholder, className, ...inputProps }) => (
),
/** A small `IconButton` around the calendar glyph. */
Toggle: ({ children, ...props }) => (
{children}
),
Value: ({ text, placeholder, empty }) => (
{empty ? placeholder : text}
),
Icon: ({ open }) => (
),
Clear: ({ onClick, ...aria }) => (
{
event.stopPropagation();
onClick();
}}
{...aria}
>
),
/**
* MUI's `Popper`: it portals the calendar, places it against the trigger
* (flipping when there is no room) and stacks it with the theme's z-index.
* The `Paper` keeps every prop the part is given, its `id` included, which
* is how the picker knows the portaled calendar is still part of it; the
* built-in position style is left out.
*/
Popup: function MuiPopup({ className, style: _style, ...props }) {
const { position } = useDatePickerContext();
if (!position.anchor) return null;
return (
{/* Its own stacking context, so the range band behind each day stays above the surface. */}
);
},
Calendar: ({ className, ...props }) => (
),
Caption: ({ monthIndex, year, months, years, onMonthChange, onYearChange, labels }) => (
),
Nav: ({ direction, onClick, disabled, ...aria }) => (
),
/**
* One column header.
*
* `noWrap`, because the column is one cell wide and locales whose short
* weekday names are full words would otherwise make the row two lines tall.
*/
Weekday: ({ label }) => (
{label}
),
/**
* One cell of the grid.
*
* An `IconButton`, which is square by construction, pinned to the cell size
* so it neither stretches to the column nor carries the icon padding.
*
* Blocked days are styled from `data-disabled`, not `.Mui-disabled`: the
* component keeps them focusable, so it never sets `disabled` on them.
*
* The band is a `::before` at a negative z-index: it reaches half the gutter
* past each inline edge so neighbouring days meet across the gap, and it
* sits behind both the picked chip and the label. `overflow: visible` is
* asserted because that bleed is outside the button's own box.
*/
Day: ({ className, ...props }) => (
`inset 0 0 0 1px ${theme.palette.primary.main}` },
"&[data-in-range]::before, &[data-in-preview]::before": {
content: '""',
position: "absolute",
zIndex: -1,
insetBlock: 0,
insetInline: "calc(var(--sdp-gap, 0.25rem) / -2 - 0.5px)",
bgcolor: (theme) => `color-mix(in oklab, ${theme.palette.primary.main}, transparent 85%)`,
},
"&[data-in-range][data-range-start]::before": {
insetInlineStart: 0,
borderStartStartRadius: DAY_RADIUS,
borderEndStartRadius: DAY_RADIUS,
},
"&[data-in-range][data-range-end]::before": {
insetInlineEnd: 0,
borderStartEndRadius: DAY_RADIUS,
borderEndEndRadius: DAY_RADIUS,
},
"&[data-selected]": { bgcolor: "primary.main", color: "primary.contrastText", fontWeight: 600 },
"&[data-selected]:hover": { bgcolor: "primary.dark" },
}}
{...props}
/>
),
DayContent: ({ day }) => {day.day},
Footer: ({ presets, onPreset, onToday, todayLabel }) => (
{presets.map((preset) => (
onPreset(preset.value)}
/>
))}
),
};
```
## Chakra UI
يعرض هذا المحوّل `DatePicker` بأجزاء Chakra UI. انسخ الملف إلى تطبيقك ومرّر الخريطة إلى `components`، وكل فتحة لا تمرّرها تبقى على بديلها الافتراضي.
```tsx
/**
* DatePicker for Chakra UI
*
* A `components` map that renders the slotsmith date picker with Chakra UI
* primitives, tested against Chakra UI v3. Copy the file, keep the parts you
* want, and pass the map as `components={chakraComponents}`; every slot left
* out keeps its fallback.
*/
import { Box, Button, chakra, IconButton, NativeSelect, Popover, Portal, Text } from "@chakra-ui/react";
import type { ReactNode } from "react";
import { useDatePickerContext, type DatePickerComponents } from "slotsmith/date-picker";
/**
* Chakra date picker parts
*
* The `components` map against Chakra UI v3 primitives — `Box`, `Button`,
* `IconButton`, `NativeSelect`, `Text` and the `chakra` factory — written
* against Chakra's semantic tokens, so it follows the theme the way the
* table's Chakra parts do.
*
* `NativeSelect` rather than Chakra's `Select` collection on purpose: the
* collection renders its list in a portal, and the picker closes on any
* pointer-down outside its own root.
*/
/** The day cell, on Chakra's spacing scale. `8` is 2rem, which matches `--sdp-cell`. */
const DAY_SIZE = "8";
/**
* Glyph
*
* A styled `