{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "title": "Calendar", "description": "One key glides from the old day to the new one, and weeks slide in from the side you turned to.", "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/calendar.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/calendar`: 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 - Glide: the chosen day's key is one surface per grid that glides from day to day, drawn by the grid\n and placed with CSS anchors. In a range there are two, one for each end, and the end key follows the\n pointer while a range is being picked. Style them with `before:` (the date, or a range's start) and\n `after:` (a range's end) on CalendarGrid.\n - Direction: a new month's weeks come in from the side the months turned to, with a blur.\n - Press: days and the month buttons give under the pointer and spring back. */\n\nimport {\n Calendar as CalendarRoot,\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} from \"@ui-sdk/react/calendar\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/calendar\"\n\n/* The month the first grid showed when it last rendered, so a month change can tell whether it\n went forward or back. Without the animated Calendar around them the weeks simply fade in. */\nconst ShownMonthContext = React.createContext | null>(null)\n\n/* Marks the way the months last turned as `data-direction=\"next\" | \"previous\"`. */\nfunction Calendar({\n className,\n children,\n onMonthChange,\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 {...props}\n >\n {children ?? (\n <>\n \n \n \n {Array.from({ length: months }, (_, offset) => (\n \n ))}\n \n )}\n \n \n )\n}\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(ShownMonthContext)\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 { Calendar, CalendarDay, CalendarGrid, CalendarNext, CalendarPrevious, CalendarWeeks }\n", "type": "registry:component", "target": "components/keyframery/primitives/calendar.tsx" }, { "path": "registry/components/keyframery/calendar.tsx", "content": "\"use client\"\n\n/* Styled calendar: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n Calendar as CalendarPrimitive,\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} from \"@/components/keyframery/primitives/calendar\"\nimport { cn } from \"@/lib/utils\"\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-card\",\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\n/* The card. Without children it lays out the heading, the month keys and a grid per month. */\nfunction Calendar({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n const months = Math.max(1, Math.floor(props.months ?? 1) || 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 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 Calendar,\n CalendarDay,\n CalendarGrid,\n CalendarHeader,\n CalendarHeading,\n CalendarMonthSelect,\n CalendarNext,\n CalendarPrevious,\n CalendarWeekday,\n CalendarWeekdays,\n CalendarWeeks,\n CalendarYearSelect,\n}\n", "type": "registry:component", "target": "components/keyframery/calendar.tsx" } ], "type": "registry:component" }