Calendar

1"use client";
2import * as React from "react";
3import {
4  ChevronDownIcon,
5  ChevronLeftIcon,
6  ChevronRightIcon,
7} from "lucide-react";
8import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
9
10import { Button, buttonVariants } from "@/registry/pure-ui/ui/button";
11import { cn } from "@/lib/classes";
12
13type CalendarProps = React.ComponentProps<typeof DayPicker> & {};
14
15function Calendar({
16  className,
17  classNames,
18  showOutsideDays = true,
19  captionLayout = "label",
20  formatters,
21  components,
22  ...props
23}: CalendarProps) {
24  const defaultClassNames = getDefaultClassNames();
25
26  return (
27    <DayPicker
28      showOutsideDays={showOutsideDays}
29      className={cn(
30        "border border-border rounded-md bg-background [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
31        className
32      )}
33      formatters={{
34        formatMonthDropdown: (date) =>
35          date.toLocaleString("default", { month: "short" }),
36        ...formatters,
37      }}
38      captionLayout={captionLayout}
39      classNames={{
40        root: cn("w-fit shadow-xs overflow-hidden", defaultClassNames.root),
41        months: cn(
42          "flex flex-col md:flex-row relative",
43          defaultClassNames.months
44        ),
45        month: cn(
46          "flex flex-col w-full [.rdp-month+&]:border-l [.rdp-month+&]:border-border/50 dark:[.rdp-month+&]:border-border/80",
47          defaultClassNames.month
48        ),
49        nav: cn(
50          "flex items-center gap-1 w-full absolute top-0 inset-x-0 z-0 justify-between p-1.5 rounded-t-md",
51          defaultClassNames.nav
52        ),
53        button_previous: cn(
54          buttonVariants({ variant: "ghost", size: "sm", radius: "sm" }),
55          "active:scale-100 border-[0.5px] border-border",
56          "size-[calc(var(--cell-size)-6px)] aria-disabled:opacity-50 p-0 select-none bg-background dark:bg-accent",
57          defaultClassNames.button_previous
58        ),
59        button_next: cn(
60          buttonVariants({ variant: "ghost", size: "sm", radius: "sm" }),
61          "active:scale-100 border-[0.5px] border-border",
62          "size-[calc(var(--cell-size)-6px)] aria-disabled:opacity-50 p-0 select-none bg-background dark:bg-accent",
63          defaultClassNames.button_next
64        ),
65        month_caption: cn(
66// … truncated