Calendar

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