{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hooks-calendar", "type": "registry:ui", "title": "Calendar", "dependencies": [ "@internationalized/date", "lucide-react", "react-aria", "react-stately", "react" ], "registryDependencies": [ "https://react-aria.adobe.com/registry/hooks-button.json" ], "files": [ { "path": "components/ui/Calendar.tsx", "type": "registry:ui", "content": "'use client';\nimport {createCalendar, type CalendarDate, type DateValue} from '@internationalized/date';\nimport {ChevronLeft, ChevronRight} from 'lucide-react';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {\n useCalendar,\n useCalendarCell,\n useCalendarGrid,\n type AriaCalendarGridProps,\n type AriaCalendarProps\n} from 'react-aria/useCalendar';\nimport {useCalendarState, type CalendarState} from 'react-stately/useCalendarState';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useRef} from 'react';\nimport {Button} from '@/registry/react-aria/ui/Button';\nimport './Button.css';\nimport './Calendar.css';\n\nexport function Calendar(props: AriaCalendarProps) {\n let {locale} = useLocale();\n let state = useCalendarState({...props, locale, createCalendar});\n /*- begin highlight -*/\n let {calendarProps, prevButtonProps, nextButtonProps, title} = useCalendar(props, state);\n /*- end highlight -*/\n\n return (\n
\n
\n \n

{title}

\n \n
\n
\n
\n \n
\n
\n
\n );\n}\n\nfunction CalendarGrid({state, ...props}: AriaCalendarGridProps & {state: CalendarState}) {\n let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid(props, state);\n\n return (\n \n \n \n {weekDays.map((day, i) => (\n \n ))}\n \n \n \n {[...new Array(weeksInMonth).keys()].map(weekIndex => (\n \n {state\n .getDatesInWeek(weekIndex)\n .map((date, i) =>\n date ? : \n ))}\n \n
\n {day}\n
\n )}\n
\n );\n}\n\nfunction CalendarCell({state, date}: {state: CalendarState; date: CalendarDate}) {\n let ref = useRef(null);\n let {\n cellProps,\n buttonProps,\n isSelected,\n isOutsideVisibleRange,\n isDisabled,\n isUnavailable,\n isPressed,\n formattedDate\n } = useCalendarCell({date}, state, ref);\n let {hoverProps, isHovered} = useHover({});\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n \n