{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "title": "Calendar", "type": "registry:ui", "files": [ { "path": "packages/registry-react/components/calendar/Calendar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { DayPicker } from 'react-day-picker'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button'\n\nexport type CalendarProps = React.ComponentProps\n\n/**\n * Single-month calendar grid for date selection, built on react-day-picker v9.\n * This is the React mirror of the reka-ui-based Vue Calendar — the cell sizes,\n * selected / today / outside / range states, and outline nav chevrons are mapped\n * 1:1 from the Vue registry's Tailwind class strings via react-day-picker's\n * `classNames` map. Pair it with a Popover or use it inline.\n */\nfunction Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n return (\n as the FIRST child of .rdp-months\n // (a sibling of the month, NOT inside month_caption). The nav is\n // `absolute inset-x-0 top-0`, so .rdp-months MUST be `relative` or the\n // chevrons escape to the nearest positioned ancestor (Popover / Story\n // card) and float away from the calendar. With months relative + an h-9\n // caption, the nav overlays the caption row, prev/next pinned to the\n // inset-x edges — matching the Vue header (CalendarHeader > absolute nav).\n // No mt-4 here: in Vue that margin sits on the grid wrapper (below the\n // header), but rdp's .rdp-months wraps the nav + caption too, so a top\n // margin would push the whole header down 16px. The caption→grid gap is\n // the Month's gap-4 below.\n months: 'relative flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0',\n // `flex-1`: react-day-picker wraps the grid in an extra Month div\n // (Months > Month > grid) that Vue doesn't have (Vue's grid table is the\n // direct flex child with w-full). Without flex-1 the Month collapses to\n // the grid's intrinsic width in the sm:flex-row track, so the grid stays\n // narrow and the centered caption drifts left of the calendar. flex-1\n // makes the Month fill its track → full-width grid + truly centered label,\n // matching Vue, and splits evenly for a multi-month calendar.\n month: 'flex flex-1 flex-col gap-4',\n // Label-height (no h-9): Vue's CalendarHeader is sized to the heading and\n // the size-9 nav buttons overflow below it. Matching that height aligns the\n // nav's top-0 with the caption label (Vue parity) instead of the buttons\n // sitting 8px high against a 36px caption box.\n month_caption: 'flex items-center justify-center',\n caption_label: 'text-sm font-medium',\n nav: 'absolute inset-x-0 top-0 flex items-center justify-between gap-1',\n button_previous: cn(\n buttonVariants({ variant: 'outline' }),\n 'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',\n ),\n button_next: cn(\n buttonVariants({ variant: 'outline' }),\n 'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',\n ),\n month_grid: 'w-full border-collapse space-y-1',\n weekdays: 'flex',\n weekday: 'text-muted-foreground flex-1 rounded-md text-xs font-normal',\n week: 'mt-2 flex w-full',\n day: cn(\n 'relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20',\n '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',\n '[&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',\n ),\n day_button: cn(\n buttonVariants({ variant: 'ghost' }),\n 'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',\n ),\n selected:\n 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground',\n today: '[&:not([aria-selected])]:bg-accent [&:not([aria-selected])]:text-accent-foreground',\n outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',\n disabled: 'text-muted-foreground opacity-50',\n range_start: 'day-range-start rounded-l-md',\n range_end: 'day-range-end rounded-r-md',\n range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',\n hidden: 'invisible',\n ...classNames,\n }}\n formatters={{\n // Vue's reka-ui calendar renders narrow (single-letter) weekday labels;\n // react-day-picker defaults to short 'cccccc' (two-letter \"Mo\"). Emit the\n // locale's narrow name so weekdays match Vue across locales (incl. ja).\n formatWeekdayName: (weekday, options) =>\n weekday.toLocaleDateString(options?.locale?.code, { weekday: 'narrow' }),\n ...props.formatters,\n }}\n components={{\n Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) =>\n orientation === 'left' ? (\n \n ) : (\n \n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = 'Calendar'\n\nexport { Calendar }\n", "type": "registry:ui", "target": "~/components/ui/calendar/Calendar.tsx" }, { "path": "packages/registry-react/components/calendar/index.ts", "content": "export { Calendar, type CalendarProps } from './Calendar'\n", "type": "registry:ui", "target": "~/components/ui/calendar/index.ts" } ], "dependencies": [ "react-day-picker", "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/button.json" ], "description": "Single-month calendar grid for date selection, built on react-day-picker. Pair it with a Popover or use it inline. Supports min/max bounds, disabled dates, and locale formatting.", "categories": [ "date-time" ] }