{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "date-picker", "title": "Date Picker", "description": "A field that opens a calendar unfolding from it, with the selected day gliding to its new place.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/date-picker.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/date-picker`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours.\n\n - Unfold: the calendar pops out of the field from the point the doc gives, on a spring.\n - Inside it, as the animated calendar: the chosen day's key glides between days (style it with\n `before:` and `after:` on CalendarGrid), and a new month comes in from the side it was reached from.\n - Press: the trigger, the month buttons, the days and the presets give under the pointer. */\n\nimport {\n CalendarDay as CalendarDayPart,\n CalendarGrid as CalendarGridPart,\n CalendarHeading,\n CalendarNext as CalendarNextPart,\n CalendarPrevious as CalendarPreviousPart,\n CalendarWeekdays,\n CalendarWeeks as CalendarWeeksPart,\n DatePicker as DatePickerRoot,\n DatePickerContent as DatePickerContentPart,\n DatePickerInput,\n DatePickerPreset as DatePickerPresetPart,\n DatePickerTrigger as DatePickerTriggerPart,\n} from \"@ui-sdk/react/date-picker\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/date-picker\"\n\n/* What the popup needs from the root: which way the months last turned, and how many show. */\nconst PickerContext = React.createContext<{\n shown: React.RefObject\n direction: \"next\" | \"previous\" | \"none\"\n months: number\n} | null>(null)\n\n/* Notes which way the months turn. Opening or closing starts fresh, so a reopened calendar\n doesn't slide. */\nfunction DatePicker({\n children,\n onMonthChange,\n onOpenChange,\n ...props\n}: React.ComponentProps) {\n const shown = React.useRef(null)\n const [direction, setDirection] = React.useState<\"next\" | \"previous\" | \"none\">(\"none\")\n const months = Math.max(1, Math.floor(props.months ?? 1) || 1)\n return (\n \n {\n setDirection(shown.current && month < shown.current ? \"previous\" : \"next\")\n onMonthChange?.(month, details)\n }}\n onOpenChange={(open, details) => {\n setDirection(\"none\")\n onOpenChange?.(open, details)\n }}\n {...props}\n >\n {children ?? (\n <>\n \n {props.mode === \"range\" && }\n \n \n \n )}\n \n \n )\n}\n\nfunction DatePickerTrigger({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DatePickerPreset({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Unfold: from 0.86 and a 6px blur, 8px toward the field, growing from the point the doc gives;\n in on a spring, out quickly to 0.96. Without children it lays out a calendar. */\nfunction DatePickerContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n const picker = React.useContext(PickerContext)\n const months = picker?.months ?? 1\n return (\n \n {children ?? (\n <>\n \n \n \n {Array.from({ length: months }, (_, offset) => (\n \n ))}\n \n )}\n \n )\n}\n\n/* The calendar parts, animated as in the calendar primitive. */\n\nconst pressable =\n \"transition-[scale] duration-[calc(200ms*var(--kf-speed,1))] ease-pop active:scale-[0.92] data-disabled:active:scale-100 motion-reduce:transition-none!\"\n\nfunction CalendarPrevious({ className, ...props }: React.ComponentProps) {\n return \n}\n\nfunction CalendarNext({ className, ...props }: React.ComponentProps) {\n return \n}\n\n/* One month. Its rows are keyed by the month, so a new month arrives as new rows.\n The keys: neutral surfaces that follow the text colour until you give them your own. They glide\n on a spring, and fade in late when a month that holds the chosen day arrives, so they land\n after the weeks have slid in. In \"multiple\" mode there is no single key to glide. */\nfunction CalendarGrid({\n className,\n children,\n offset = 0,\n ...props\n}: React.ComponentProps) {\n const shown = React.useContext(PickerContext)?.shown ?? null\n return (\n \n {(grid) => {\n if (shown && offset === 0) shown.current = grid.month\n return (\n \n {typeof children === \"function\"\n ? children(grid)\n : (children ?? (\n <>\n \n \n \n ))}\n \n )\n }}\n \n )\n}\n\n/* Direction: the new weeks come 28px from the side the months turned to, blurred, on a spring. */\nfunction CalendarWeeks({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? ((cell) => )}\n \n )\n}\n\n/* Names itself as the anchor the grid's keys follow, and gives under the pointer. */\nfunction CalendarDay({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n CalendarDay,\n CalendarGrid,\n CalendarNext,\n CalendarPrevious,\n CalendarWeeks,\n DatePicker,\n DatePickerContent,\n DatePickerPreset,\n DatePickerTrigger,\n}\n", "type": "registry:component", "target": "components/keyframery/primitives/date-picker.tsx" }, { "path": "registry/components/keyframery/date-picker.tsx", "content": "\"use client\"\n\n/* Styled date picker: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n CalendarDay as CalendarDayPrimitive,\n CalendarGrid as CalendarGridPrimitive,\n CalendarHeading as CalendarHeadingPrimitive,\n CalendarMonthSelect as CalendarMonthSelectPrimitive,\n CalendarNext as CalendarNextPrimitive,\n CalendarPrevious as CalendarPreviousPrimitive,\n CalendarWeekday as CalendarWeekdayPrimitive,\n CalendarWeekdays as CalendarWeekdaysPrimitive,\n CalendarWeeks as CalendarWeeksPrimitive,\n CalendarYearSelect as CalendarYearSelectPrimitive,\n DatePicker as DatePickerPrimitive,\n DatePickerClear as DatePickerClearPrimitive,\n DatePickerContent as DatePickerContentPrimitive,\n DatePickerHint as DatePickerHintPrimitive,\n DatePickerInput as DatePickerInputPrimitive,\n DatePickerPreset as DatePickerPresetPrimitive,\n DatePickerTrigger as DatePickerTriggerPrimitive,\n createDatePickerController,\n} from \"@/components/keyframery/primitives/date-picker\"\nimport { cn } from \"@/lib/utils\"\n\n/* What the popup needs from the root: how many months show, and the field box to line up with. */\nconst PickerContext = React.createContext<{\n months: number\n field: HTMLElement | null\n setField: (element: HTMLElement | null) => void\n} | null>(null)\n\n/* The field look, as in Input: one hairline variable that hover, focus and invalid change. */\nconst fieldBox =\n \"rounded-[10px] bg-background text-[13px] \" +\n \"[--field-line:rgb(0_0_0/0.09)] dark:[--field-line:rgb(255_255_255/0.1)] \" +\n \"shadow-[0_0_0_1px_var(--field-line),0_1px_2px_rgb(0_0_0/0.05)] dark:shadow-[0_0_0_1px_var(--field-line)] \" +\n \"transition-[box-shadow,background-color] duration-[calc(150ms*var(--kf-speed,1))] ease-house motion-reduce:transition-none! \" +\n \"hover:[--field-line:rgb(0_0_0/0.16)] dark:hover:[--field-line:rgb(255_255_255/0.18)]\"\n\n/* A small key: the month buttons. The primitive springs them back after a press. */\nconst stepKey = cn(\n \"inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[9px] bg-background text-muted-foreground outline-none select-none [&_svg]:size-4\",\n \"shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_1px_1px_rgb(0_0_0/0.05),0_3px_6px_-2px_rgb(0_0_0/0.1)]\",\n \"dark:bg-accent dark:shadow-[0_0_0_1px_rgb(255_255_255/0.07),inset_0_1px_0_rgb(255_255_255/0.08),0_2px_6px_-1px_rgb(0_0_0/0.6)]\",\n \"hover:text-foreground active:shadow-[0_0_0_1px_rgb(0_0_0/0.08),0_1px_1px_rgb(0_0_0/0.04)]\",\n \"dark:active:shadow-[0_0_0_1px_rgb(255_255_255/0.07),inset_0_1px_0_rgb(255_255_255/0.05),0_1px_2px_rgb(0_0_0/0.6)]\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover\",\n \"data-disabled:pointer-events-none data-disabled:opacity-40\",\n)\n\n/* The native month and year selects, as compact fields. */\nconst selectField = cn(\n \"h-7 cursor-pointer appearance-none rounded-[8px] bg-background px-2 text-[13px] font-medium text-foreground outline-none\",\n \"shadow-[0_0_0_1px_rgb(0_0_0/0.09),0_1px_2px_rgb(0_0_0/0.05)] hover:shadow-[0_0_0_1px_rgb(0_0_0/0.16),0_1px_2px_rgb(0_0_0/0.05)]\",\n \"dark:shadow-[0_0_0_1px_rgb(255_255_255/0.1)] dark:hover:shadow-[0_0_0_1px_rgb(255_255_255/0.16)]\",\n \"transition-shadow duration-[calc(150ms*var(--kf-speed,1))] focus-visible:shadow-[0_0_0_1px_var(--ring)] focus-visible:ring-[3px] focus-visible:ring-ring/25\",\n \"dark:focus-visible:shadow-[0_0_0_1px_var(--ring)]\",\n \"data-disabled:pointer-events-none data-disabled:opacity-40 motion-reduce:transition-none!\",\n)\n\nfunction ChevronLeftIcon() {\n return (\n \n \n \n )\n}\n\nfunction ChevronRightIcon() {\n return (\n \n \n \n )\n}\n\nfunction CalendarIcon() {\n return (\n \n \n \n \n )\n}\n\nfunction XIcon() {\n return (\n \n \n \n )\n}\n\n/* The root. The popup lines up with the field box, so the root shares it with the popup. */\nfunction DatePicker({\n className,\n children,\n months = 1,\n ...props\n}: React.ComponentProps) {\n const [field, setField] = React.useState(null)\n const count = Math.max(1, Math.floor(months) || 1)\n return (\n \n \n {children ?? (\n <>\n \n \n {props.mode === \"range\" && (\n <>\n –\n \n \n )}\n \n \n \n \n )}\n \n \n )\n}\n\n/* The field: the typed date and the calendar key sit inside one box, and the ring\n follows the input's focus or the open calendar. The popup lines up with this box. */\nfunction DatePickerField({ className, ...props }: React.ComponentProps<\"div\">) {\n const picker = React.useContext(PickerContext)\n return (\n \n )\n}\n\nfunction DatePickerInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The calendar key at the end of the field. It stays lit while the calendar is open. */\nfunction DatePickerTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction DatePickerHint({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Clears the date. It shrinks away while there's nothing to clear. */\nfunction DatePickerClear({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* A shortcut like \"This weekend\". The chosen one reads as a pressed key. */\nfunction DatePickerPreset({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The sheet. The primitive unfolds it out of the field. Without children it lays out a styled calendar. */\nfunction DatePickerContent({\n className,\n children,\n sideOffset = 6,\n collisionPadding = 12,\n anchor,\n ...props\n}: React.ComponentProps) {\n const picker = React.useContext(PickerContext)\n const months = picker?.months ?? 1\n return (\n \n {children ?? (\n <>\n \n \n \n \n \n
\n {Array.from({ length: months }, (_, offset) => (\n \n ))}\n
\n \n )}\n \n )\n}\n\n/* The calendar parts, as Calendar styles them, for inside the popup. */\n\n/* The row above the grid. The heading sits first, the month keys after it. */\nfunction CalendarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CalendarHeading({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CalendarPrevious({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction CalendarNext({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction CalendarMonthSelect({\n className,\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction CalendarYearSelect({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* One month. The primitive draws the chosen day's key here, as `before:` (the date or a range's\n start) and `after:` (a range's end), and glides it between days. This gives it the primary key look. */\nconst chosenKey = cn(\n \"before:rounded-[9px] before:bg-primary after:rounded-[9px] after:bg-primary\",\n \"before:shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.25)] after:shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.25)]\",\n \"dark:before:shadow-[inset_0_1px_0_rgb(255_255_255/0.7),0_1px_2px_rgb(0_0_0/0.5)] dark:after:shadow-[inset_0_1px_0_rgb(255_255_255/0.7),0_1px_2px_rgb(0_0_0/0.5)]\",\n)\n\nfunction CalendarGrid({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n <>\n \n \n \n )}\n \n )\n}\n\nfunction CalendarWeekdays({\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? ((index) => )}\n \n )\n}\n\nfunction CalendarWeekday({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CalendarWeeks({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? ((cell) => )}\n \n )\n}\n\n/* A day. The chosen key is drawn under it by the grid, so a chosen day only turns its number\n to the key's text colour. A range is a soft band between the two keys, rounded where a week wraps. */\nfunction CalendarDay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n CalendarDay,\n CalendarGrid,\n CalendarHeader,\n CalendarHeading,\n CalendarMonthSelect,\n CalendarNext,\n CalendarPrevious,\n CalendarWeekday,\n CalendarWeekdays,\n CalendarWeeks,\n CalendarYearSelect,\n DatePicker,\n DatePickerClear,\n DatePickerContent,\n DatePickerField,\n DatePickerHint,\n DatePickerInput,\n DatePickerPreset,\n DatePickerTrigger,\n createDatePickerController,\n}\n", "type": "registry:component", "target": "components/keyframery/date-picker.tsx" } ], "type": "registry:component" }