calendar

1"use client"
2 
3import * as React from "react"
4import {
5  DayPicker,
6  getDefaultClassNames,
7  type DayButton,
8  type Locale,
9} from "react-day-picker"
10 
11import { cn } from "@/lib/utils"
12import { Button, buttonVariants } from "@/components/ui/button"
13import { IconChevronLeft, IconChevronRight, IconChevronDown } from "@tabler/icons-react"
14 
15function Calendar({
16  className,
17  classNames,
18  showOutsideDays = true,
19  captionLayout = "label",
20  buttonVariant = "ghost",
21  locale,
22  formatters,
23  components,
24  ...props
25}: React.ComponentProps<typeof DayPicker> & {
26  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
27}) {
28  const defaultClassNames = getDefaultClassNames()
29 
30  return (
31    <DayPicker
32      showOutsideDays={showOutsideDays}
33      className={cn(
34        "group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
35        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
36        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
37        className
38      )}
39      captionLayout={captionLayout}
40      locale={locale}
41      formatters={{
42        formatMonthDropdown: (date) =>
43          date.toLocaleString(locale?.code, { 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          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
73          defaultClassNames.dropdowns
74        ),
75// … truncated