Calendar

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