Calendar

1"use client";
2 
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import * as React from "react";
5import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
6import { cn } from "@/lib/utils";
7import type { Button } from "@/registry/brook/ui/button/button";
8import styles from "./calendar.module.css";
9 
10interface CalendarDayButtonProps extends React.ComponentProps<typeof DayButton> {}
11 
12function CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps) {
13  const defaultClassNames = getDefaultClassNames();
14  const buttonRef = React.useRef<HTMLButtonElement>(null);
15 
16  React.useEffect(() => {
17    if (modifiers.focused) {
18      buttonRef.current?.focus();
19    }
20  }, [modifiers.focused]);
21 
22  return (
23    <button
24      className={cn(styles.dayButton, defaultClassNames.day, className)}
25      data-day={day.date.toLocaleDateString()}
26      data-range-end={modifiers.range_end}
27      data-range-middle={modifiers.range_middle}
28      data-range-start={modifiers.range_start}
29      data-selected-single={
30        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
31      }
32      ref={buttonRef}
33      type="button"
34      {...props}
35    />
36  );
37}
38 
39type CalendarProps = React.ComponentProps<typeof DayPicker> & {
40  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
41};
42 
43function Calendar({
44  className,
45  classNames,
46  showOutsideDays = true,
47  captionLayout = "label",
48  buttonVariant = "ghost",
49  formatters,
50  components,
51  ...props
52}: CalendarProps) {
53  const defaultClassNames = getDefaultClassNames();
54 
55  return (
56    <DayPicker
57      captionLayout={captionLayout}
58      className={cn(styles.root, className)}
59      classNames={{
60        root: cn(styles.root, defaultClassNames.root),
61        months: cn(styles.months, defaultClassNames.months),
62        month: cn(styles.month, defaultClassNames.month),
63        nav: cn(styles.nav, defaultClassNames.nav),
64        button_previous: cn(styles.navButton, defaultClassNames.button_previous),
65        button_next: cn(styles.navButton, defaultClassNames.button_next),
66        month_caption: cn(styles.monthCaption, defaultClassNames.month_caption),
67        dropdowns: cn(styles.dropdowns, defaultClassNames.dropdowns),
68        dropdown_root: cn(styles.dropdownRoot, defaultClassNames.dropdown_root),
69        dropdown: cn(styles.dropdown, defaultClassNames.dropdown),
70        caption_label: cn(
71          styles.captionLabel,
72// … truncated