Calendar

1"use client";
2
3import { ComponentProps, useEffect, useRef } from "react";
4
5import {
6  DayPicker,
7  getDefaultClassNames,
8  type DayButton,
9  type Locale
10} from "react-day-picker";
11
12import { cn } from "@/lib/utils";
13import { Button, buttonVariants } from "@/components/ui/button";
14import {
15  ChevronLeftIcon,
16  ChevronRightIcon,
17  ChevronDownIcon
18} from "lucide-react";
19
20function Calendar({
21  className,
22  classNames,
23  showOutsideDays = true,
24  captionLayout = "label",
25  buttonVariant = "ghost",
26  locale,
27  formatters,
28  components,
29  ...props
30}: ComponentProps<typeof DayPicker> & {
31  buttonVariant?: ComponentProps<typeof Button>["variant"];
32}) {
33  const defaultClassNames = getDefaultClassNames();
34
35  return (
36    <DayPicker
37      showOutsideDays={showOutsideDays}
38      className={cn(
39        "bg-card group/calendar p-2 [--cell-radius:calc(var(--radius)+4px)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
40        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
41        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
42        className
43      )}
44      captionLayout={captionLayout}
45      locale={locale}
46      formatters={{
47        formatMonthDropdown: (date) =>
48          date.toLocaleString(locale?.code, { month: "short" }),
49        ...formatters
50      }}
51      classNames={{
52        root: cn("w-fit", defaultClassNames.root),
53        months: cn(
54          "flex gap-4 flex-col md:flex-row relative",
55          defaultClassNames.months
56        ),
57        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
58        nav: cn(
59          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
60          defaultClassNames.nav
61        ),
62        button_previous: cn(
63          buttonVariants({ variant: buttonVariant }),
64          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
65          defaultClassNames.button_previous
66        ),
67        button_next: cn(
68          buttonVariants({ variant: buttonVariant }),
69          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
70          defaultClassNames.button_next
71        ),
72        month_caption: cn(
73          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
74          defaultClassNames.month_caption
75        ),
76        dropdowns: cn(
77// … truncated