{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "type": "registry:item",
  "title": "Calendar",
  "description": "A date picker calendar component.",
  "dependencies": [
    "lucide-react",
    "react-day-picker"
  ],
  "files": [
    {
      "path": "registry/brook/ui/calendar/calendar.tsx",
      "content": "\"use client\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\nimport { cn } from \"@/lib/utils\";\nimport type { Button } from \"@/registry/brook/ui/button/button\";\nimport styles from \"./calendar.module.css\";\n\ninterface CalendarDayButtonProps extends React.ComponentProps<typeof DayButton> {}\n\nfunction CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  React.useEffect(() => {\n    if (modifiers.focused) {\n      buttonRef.current?.focus();\n    }\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      className={cn(styles.dayButton, defaultClassNames.day, className)}\n      data-day={day.date.toLocaleDateString()}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      data-range-start={modifiers.range_start}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      ref={buttonRef}\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\ntype CalendarProps = React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n};\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: CalendarProps) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      captionLayout={captionLayout}\n      className={cn(styles.root, className)}\n      classNames={{\n        root: cn(styles.root, defaultClassNames.root),\n        months: cn(styles.months, defaultClassNames.months),\n        month: cn(styles.month, defaultClassNames.month),\n        nav: cn(styles.nav, defaultClassNames.nav),\n        button_previous: cn(styles.navButton, defaultClassNames.button_previous),\n        button_next: cn(styles.navButton, defaultClassNames.button_next),\n        month_caption: cn(styles.monthCaption, defaultClassNames.month_caption),\n        dropdowns: cn(styles.dropdowns, defaultClassNames.dropdowns),\n        dropdown_root: cn(styles.dropdownRoot, defaultClassNames.dropdown_root),\n        dropdown: cn(styles.dropdown, defaultClassNames.dropdown),\n        caption_label: cn(\n          styles.captionLabel,\n          captionLayout !== \"label\" && styles.captionLabelDropdown,\n          defaultClassNames.caption_label\n        ),\n        table: styles.table,\n        weekdays: cn(styles.weekdays, defaultClassNames.weekdays),\n        weekday: cn(styles.weekday, defaultClassNames.weekday),\n        week: cn(styles.week, defaultClassNames.week),\n        week_number_header: cn(styles.weekNumberHeader, defaultClassNames.week_number_header),\n        week_number: cn(styles.weekNumber, defaultClassNames.week_number),\n        day: cn(styles.day, props.showWeekNumber ? styles.dayWithWeekNumber : styles.dayDefault, defaultClassNames.day),\n        range_start: cn(styles.rangeStart, defaultClassNames.range_start),\n        range_middle: cn(styles.rangeMiddle, defaultClassNames.range_middle),\n        range_end: cn(styles.rangeEnd, defaultClassNames.range_end),\n        today: cn(styles.today, defaultClassNames.today),\n        outside: cn(styles.outside, defaultClassNames.outside),\n        disabled: cn(styles.disabled, defaultClassNames.disabled),\n        hidden: cn(styles.hidden, defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className: rootClassName, rootRef, ...rootProps }) => (\n          <div className={cn(rootClassName)} data-slot=\"calendar\" ref={rootRef} {...rootProps} />\n        ),\n        Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeft className={cn(styles.chevron, chevronClassName)} {...chevronProps} />;\n          }\n          return <ChevronRight className={cn(styles.chevron, chevronClassName)} {...chevronProps} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...weekNumberProps }) => (\n          <td {...weekNumberProps}>\n            <div className={styles.weekNumberCell}>{children}</div>\n          </td>\n        ),\n        ...components,\n      }}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      showOutsideDays={showOutsideDays}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n",
      "type": "registry:file",
      "target": "~/components/ui/calendar/calendar.tsx"
    },
    {
      "path": "registry/brook/ui/calendar/calendar.module.css",
      "content": ".root {\n  --cell-size: 2rem;\n  padding: 0.75rem;\n  background-color: var(--popover);\n  width: fit-content;\n}\n\n.months {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  position: relative;\n}\n\n@media (min-width: 768px) {\n  .months {\n    flex-direction: row;\n  }\n}\n\n.month {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 1rem;\n}\n\n.nav {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  justify-content: space-between;\n}\n\n.navButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--cell-size);\n  height: var(--cell-size);\n  padding: 0;\n  user-select: none;\n  border-radius: var(--radius);\n  border: 0.5px solid oklch(from var(--border) l c h / 0.8);\n  background-color: var(--popover);\n  color: var(--foreground);\n  cursor: pointer;\n  transition:\n    background-color 150ms,\n    border-color 150ms;\n}\n\n.navButton:hover {\n  background-color: var(--accent);\n  border-color: var(--accent);\n}\n\n.navButton:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.navButton[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.monthCaption {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--cell-size);\n  width: 100%;\n  padding-left: var(--cell-size);\n  padding-right: var(--cell-size);\n}\n\n.dropdowns {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 500;\n  justify-content: center;\n  height: var(--cell-size);\n  gap: 0.375rem;\n}\n\n.dropdownRoot {\n  position: relative;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-xs);\n}\n\n.dropdownRoot:has(:focus) {\n  border-color: var(--ring);\n  box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.5);\n}\n\n.dropdown {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  background-color: var(--popover);\n}\n\n.captionLabel {\n  user-select: none;\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n\n.captionLabelDropdown {\n  border-radius: var(--radius);\n  padding-left: 0.5rem;\n  padding-right: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-size: 0.875rem;\n  height: 2rem;\n}\n\n.captionLabelDropdown svg {\n  color: var(--muted-foreground);\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.weekdays {\n  display: flex;\n}\n\n.weekday {\n  color: var(--muted-foreground);\n  border-radius: var(--radius);\n  flex: 1;\n  font-weight: 400;\n  font-size: 0.8rem;\n  user-select: none;\n  text-align: center;\n}\n\n.week {\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n.weekNumberHeader {\n  user-select: none;\n  width: var(--cell-size);\n}\n\n.weekNumber {\n  font-size: 0.8rem;\n  user-select: none;\n  color: var(--muted-foreground);\n}\n\n.weekNumberCell {\n  display: flex;\n  width: var(--cell-size);\n  height: var(--cell-size);\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n\n.day {\n  position: relative;\n  flex: 1;\n  padding: 0;\n  text-align: center;\n  user-select: none;\n}\n\n.dayDefault[data-selected=\"true\"] button {\n  border-top-left-radius: var(--radius);\n  border-bottom-left-radius: var(--radius);\n}\n\n.day:last-child[data-selected=\"true\"] button {\n  border-top-right-radius: var(--radius);\n  border-bottom-right-radius: var(--radius);\n}\n\n.dayWithWeekNumber:nth-child(2)[data-selected=\"true\"] button {\n  border-top-left-radius: var(--radius);\n  border-bottom-left-radius: var(--radius);\n}\n\n.rangeStart {\n  border-top-left-radius: var(--radius);\n  border-bottom-left-radius: var(--radius);\n  background-color: var(--accent);\n}\n\n.rangeMiddle {\n  border-radius: 0;\n}\n\n.rangeEnd {\n  border-top-right-radius: var(--radius);\n  border-bottom-right-radius: var(--radius);\n  background-color: var(--accent);\n}\n\n.today {\n}\n\n.today[data-selected=\"true\"] {\n}\n\n.outside {\n  color: var(--muted-foreground);\n}\n\n.outside[aria-selected=\"true\"] {\n  color: var(--muted-foreground);\n}\n\n.disabled {\n  color: var(--muted-foreground);\n  opacity: 0.5;\n}\n\n.hidden {\n  visibility: hidden;\n}\n\n.chevron {\n  width: 1rem;\n  height: 1rem;\n}\n\n.dayButton {\n  display: flex;\n  aspect-ratio: 1;\n  width: 100%;\n  min-width: var(--cell-size);\n  height: auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  line-height: 1;\n  font-weight: 400;\n  font-size: 0.875rem;\n  border-radius: var(--radius);\n  border: none;\n  background-color: transparent;\n  color: var(--foreground);\n  cursor: pointer;\n  transition: background-color 150ms;\n}\n\n.dayButton:hover:not([data-selected-single=\"true\"]):not(\n    [data-range-start=\"true\"]\n  ):not([data-range-end=\"true\"]) {\n  background-color: var(--accent);\n}\n\n.dayButton span {\n  font-size: 0.75rem;\n  opacity: 0.7;\n}\n\n.dayButton[data-selected-single=\"true\"] {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n}\n\n.dayButton[data-range-start=\"true\"] {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n  border-radius: var(--radius);\n  border-top-left-radius: var(--radius);\n  border-bottom-left-radius: var(--radius);\n}\n\n.dayButton[data-range-end=\"true\"] {\n  background-color: var(--primary);\n  color: var(--primary-foreground);\n  border-radius: var(--radius);\n  border-top-right-radius: var(--radius);\n  border-bottom-right-radius: var(--radius);\n}\n\n.dayButton[data-range-middle=\"true\"] {\n  background-color: var(--accent);\n  color: var(--accent-foreground);\n  border-radius: 0;\n}\n\n.day[data-focused=\"true\"] .dayButton {\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.5);\n  border-color: var(--ring);\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/calendar/calendar.module.css"
    }
  ]
}