Calendar

1"use client";
2 
3import { CaretDownIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
4import * as React from "react";
5import { type DayButton, DayPicker, getDefaultClassNames, type Locale } from "react-day-picker";
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8import { Button, buttonVariants } from "./button";
9 
10export type CalendarProps = React.ComponentProps<typeof DayPicker> &
11  MaterialAxisProps & {
12    variant?: "default" | "glass";
13    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
14  };
15 
16/* Role: borderless adaptive glass. */
17const ROLE = {};
18 
19function Calendar({
20  className,
21  classNames,
22  showOutsideDays = true,
23  variant = "glass",
24  captionLayout = "label",
25  buttonVariant = "ghost",
26  locale,
27  formatters,
28  components,
29  ...props
30}: CalendarProps) {
31  const [axes, rest] = splitAxisProps(props);
32  const defaultClassNames = getDefaultClassNames();
33 
34  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
35  const variants = {
36    default: "",
37    glass: "rounded-lg p-4",
38  };
39 
40  const m = materialSurface(variant === "default" ? null : ROLE, axes);
41 
42  return (
43    <DayPicker
44      showOutsideDays={showOutsideDays}
45      className={cn(
46        m?.className,
47        "group/calendar w-fit [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(9)]",
48        variants[variant],
49        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
50        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
51        className,
52      )}
53      captionLayout={captionLayout}
54      locale={locale}
55      formatters={{
56        formatMonthDropdown: (date) =>
57          date.toLocaleString(locale?.code, {
58            month: "short",
59          }),
60        ...formatters,
61      }}
62      classNames={{
63        root: cn("w-fit", defaultClassNames.root),
64        months: cn("relative flex flex-col gap-4 sm:flex-row", defaultClassNames.months),
65        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
66        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
67        button_previous: cn(
68          buttonVariants({
69            variant: buttonVariant,
70          }),
71          "size-(--cell-size) p-0 opacity-70 select-none hover:opacity-100 aria-disabled:opacity-50",
72          defaultClassNames.button_previous,
73        ),
74        button_next: cn(
75// … truncated