Calendar

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