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/components/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:--spacing(8)] [[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          "flex gap-4 flex-col md:flex-row relative",
47          defaultClassNames.months
48        ),
49        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
50        nav: cn(
51          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
52          defaultClassNames.nav
53        ),
54        button_previous: cn(
55          buttonVariants({ variant: buttonVariant }),
56          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
57          defaultClassNames.button_previous
58        ),
59        button_next: cn(
60          buttonVariants({ variant: buttonVariant }),
61          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
62          defaultClassNames.button_next
63        ),
64        month_caption: cn(
65          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
66          defaultClassNames.month_caption
67        ),
68        dropdowns: cn(
69          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
70          defaultClassNames.dropdowns
71        ),
72        dropdown_root: cn(
73// … truncated