Calendar

1import * as React from "react";
2import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from "react-day-picker";
3 
4import { cn } from "@/lib/utils";
5import { Button, buttonVariants } from "@/components/ui/button";
6import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
7 
8type DayPickerProps = React.ComponentProps<typeof DayPicker>;
9type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
10 
11export type CalendarProps = DistributiveOmit<DayPickerProps, "captionLayout"> & {
12  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
13  captionLayout?: DayPickerProps["captionLayout"] | "buttons";
14  fromDate?: Date;
15  fromMonth?: Date;
16  fromYear?: number;
17  hideHead?: boolean;
18  initialFocus?: boolean;
19  toDate?: Date;
20  toMonth?: Date;
21  toYear?: number;
22};
23 
24function Calendar({
25  className,
26  classNames,
27  showOutsideDays = true,
28  captionLayout = "label",
29  buttonVariant = "noShadow",
30  locale,
31  formatters,
32  components,
33  startMonth,
34  endMonth,
35  hidden,
36  autoFocus,
37  hideWeekdays,
38  fromDate,
39  fromMonth,
40  fromYear,
41  hideHead,
42  initialFocus,
43  toDate,
44  toMonth,
45  toYear,
46  ...props
47}: CalendarProps) {
48  const defaultClassNames = getDefaultClassNames();
49  const resolvedCaptionLayout = captionLayout === "buttons" ? "label" : captionLayout;
50  const resolvedStartMonth =
51    startMonth ?? fromMonth ?? (fromYear === undefined ? fromDate : new Date(fromYear, 0));
52  const resolvedEndMonth =
53    endMonth ?? toMonth ?? (toYear === undefined ? toDate : new Date(toYear, 11));
54  const legacyHidden = [
55    fromDate && fromMonth === undefined && fromYear === undefined
56      ? { before: fromDate }
57      : undefined,
58    toDate && toMonth === undefined && toYear === undefined ? { after: toDate } : undefined,
59  ].filter((matcher) => matcher !== undefined);
60  const resolvedHidden = legacyHidden.length
61    ? [...(hidden === undefined ? [] : Array.isArray(hidden) ? hidden : [hidden]), ...legacyHidden]
62    : hidden;
63 
64  return (
65    <DayPicker
66      showOutsideDays={showOutsideDays}
67      className={cn(
68        "group/calendar rounded-base! border-2 border-border bg-main p-3 font-heading text-main-foreground shadow-shadow [--cell-radius:var(--radius-base)] [--cell-size:--spacing(9)] in-data-[slot=card-content]:bg-main in-data-[slot=popover-content]:bg-main",
69        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
70        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
71// … truncated