Calendar

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