Calendar

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useMemo,
8  useRef,
9  useState,
10} from "react";
11import type * as React from "react";
12import { Button } from "@/components/ui/button";
13import { cn } from "@/lib/utils";
14import { selectionFocus } from "@/lib/recipes";
15 
16import { CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
17type Mode = "single" | "range" | "multiple";
18 
19export interface DateRange {
20  from?: Date;
21  to?: Date;
22}
23 
24interface BaseProps {
25  /** First day of the week (0 = Sunday). Default 0. */
26  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
27  /** Disable interaction. */
28  disabled?: boolean;
29  /** Disable specific dates. */
30  disabledDates?: (date: Date) => boolean;
31  /** Earliest selectable date. */
32  fromDate?: Date;
33  /** Latest selectable date. */
34  toDate?: Date;
35  /** Initial month to display (defaults to today or the selected value). */
36  defaultMonth?: Date;
37  className?: string;
38}
39 
40type SingleCalendarProps = BaseProps & {
41  mode?: "single";
42  value?: Date | null;
43  defaultValue?: Date | null;
44  onValueChange?: (value: Date | null) => void;
45};
46 
47type RangeCalendarProps = BaseProps & {
48  mode: "range";
49  value?: DateRange;
50  defaultValue?: DateRange;
51  onValueChange?: (value: DateRange) => void;
52};
53 
54type MultipleCalendarProps = BaseProps & {
55  mode: "multiple";
56  value?: Date[];
57  defaultValue?: Date[];
58  onValueChange?: (value: Date[]) => void;
59};
60 
61export type CalendarProps =
62  | SingleCalendarProps
63  | RangeCalendarProps
64  | MultipleCalendarProps;
65 
66const DAY_MS = 24 * 60 * 60 * 1000;
67const MONTH_NAMES = [
68  "January", "February", "March", "April", "May", "June",
69  "July", "August", "September", "October", "November", "December",
70];
71const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
72const DAY_NAMES_FULL = [
73  "Sunday",
74  "Monday",
75  "Tuesday",
76  "Wednesday",
77  "Thursday",
78  "Friday",
79  "Saturday",
80];
81 
82function startOfDay(d: Date): Date {
83  const x = new Date(d);
84  x.setHours(0, 0, 0, 0);
85  return x;
86}
87function isSameDay(a: Date, b: Date): boolean {
88  return (
89    a.getFullYear() === b.getFullYear() &&
90    a.getMonth() === b.getMonth() &&
91    a.getDate() === b.getDate()
92  );
93}
94function isSameMonth(a: Date, b: Date): boolean {
95  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
96}
97function addMonths(d: Date, n: number): Date {
98  const x = new Date(d);
99  x.setDate(1);
100  x.setMonth(x.getMonth() + n);
101  return x;
102}
103function addMonthsClamped(d: Date, n: number): Date {
104// … truncated