calendar

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