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