Calendar

1"use client";
2 
3import "react-day-picker/style.css";
4 
5import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
6import { DayPicker, getDefaultClassNames } from "react-day-picker";
7import { cn } from "@/lib/utils";
8 
9export type CalendarProps = React.ComponentProps<typeof DayPicker>;
10 
11export function Calendar({
12  className,
13  classNames,
14  components,
15  captionLayout = "dropdown",
16  showOutsideDays = true,
17  startMonth,
18  endMonth,
19  style,
20  ...props
21}: CalendarProps) {
22  const defaults = getDefaultClassNames();
23 
24  // The month/year dropdowns need a bounded range to list options. Default to a
25  // wide, generally-useful span; callers can still pass their own.
26  const fromMonth = startMonth ?? new Date(1925, 0);
27  const toMonth = endMonth ?? new Date(new Date().getFullYear() + 5, 11);
28 
29  // Neutralize react-day-picker's blue accent at the source. These are set
30  // inline (highest priority) because rdp declares the same vars on `.rdp-root`
31  // with equal specificity, so a class would lose on load order. Values are
32  // theme-neutral, so they work in both light and dark.
33  const accentReset = {
34    "--rdp-accent-color": "currentColor",
35    "--rdp-accent-background-color": "transparent",
36    "--rdp-selected-border": "0",
37    "--rdp-today-color": "inherit",
38    // rdp defaults day cells to 44px via these vars, which beat our `w-9` on the
39    // day (same specificity, rdp loads later) while the weekday header has no
40    // width rule and stays 36px — so the columns drift apart. Pin every cell to
41    // 36px at the source so weekdays and days share one column pitch.
42    "--rdp-day-width": "2.25rem",
43    "--rdp-day-height": "2.25rem",
44    "--rdp-day_button-width": "2.25rem",
45    "--rdp-day_button-height": "2.25rem",
46    "--rdp-day_button-border": "0",
47  } as React.CSSProperties;
48 
49  return (
50    <DayPicker
51      showOutsideDays={showOutsideDays}
52      captionLayout={captionLayout}
53      startMonth={fromMonth}
54      endMonth={toMonth}
55      style={{ ...accentReset, ...style }}
56      className={cn("w-fit p-3", className)}
57      components={{
58        // rdp's default chevrons are sharp; lucide's have rounded line caps and
59        // we render them smaller for a softer nav. `down` is the dropdown caret.
60        Chevron: ({ orientation }) => {
61          const Icon =
62            orientation === "left"
63              ? ChevronLeft
64              : orientation === "right"
65                ? ChevronRight
66                : ChevronDown;
67// … truncated