Calendar

1'use client';
2 
3import {
4  format,
5  getYear,
6  isValid,
7  setMonth,
8  setYear,
9  startOfToday,
10} from 'date-fns';
11import {
12  type ButtonHTMLAttributes,
13  type ChangeEvent,
14  type ComponentProps,
15  type HTMLAttributes,
16  type Ref,
17  useEffect,
18  useMemo,
19  useRef,
20  useState,
21} from 'react';
22import {
23  type CalendarMonth,
24  type DayButton,
25  DayPicker,
26  getDefaultClassNames,
27  useDayPicker,
28} from 'react-day-picker';
29 
30import { Button } from '@/components/ui/button';
31import { Icon } from '@/components/ui/icon';
32import { IconShell } from '@/components/ui/icon-shell';
33import { Input } from '@/components/ui/input';
34import { cn } from '@/lib/utils';
35 
36// Constants
37const MONTH_NAMES = [
38  'JAN',
39  'FEB',
40  'MAR',
41  'APR',
42  'MAY',
43  'JUN',
44  'JUL',
45  'AUG',
46  'SEP',
47  'OCT',
48  'NOV',
49  'DEC',
50] as const;
51 
52const DEFAULT_CAPTION_LAYOUT = 'label' as const;
53 
54function CalendarDayButton({
55  className,
56  day,
57  modifiers,
58  children,
59  calendarSize = 'default',
60  ...props
61}: ComponentProps<typeof DayButton> & {
62  calendarSize?: 'default' | 'lg';
63}) {
64  const defaultClassNames = useMemo(() => getDefaultClassNames(), []);
65 
66  const ref = useRef<HTMLButtonElement>(null);
67 
68  useEffect(() => {
69    if (modifiers.focused) ref.current?.focus();
70  }, [modifiers.focused]);
71 
72  const isSelected =
73    modifiers.selected &&
74    !modifiers.range_start &&
75    !modifiers.range_end &&
76    !modifiers.range_middle;
77 
78  const isRangeStart = modifiers.range_start;
79  const isRangeEnd = modifiers.range_end;
80  const isRangeMiddle = modifiers.range_middle;
81  const isToday = modifiers.today;
82  const isDisabled = modifiers.disabled || modifiers.outside;
83  const isFocused = modifiers.focused;
84 
85  const typographyClass =
86    calendarSize === 'lg' ? 'label-large-primary' : 'label-regular-primary';
87 
88  // Organize className styles into logical groups
89  const baseStyles = cn(
90    typographyClass,
91    'cursor-pointer outline-none',
92    'relative',
93    'flex aspect-square size-auto w-full min-w-(--cell-size)',
94    'flex-col items-center justify-center',
95    'p-2',
96  );
97 
98  const defaultStateStyles = 'bg-stateslayer-overlay-enabled text-fg-secondary';
99 
100  const hoverStyles = cn(
101    'hover:bg-stateslayer-overlay-hover hover:text-fg-primary',
102    'hover:data-[disabled=true]:bg-stateslayer-overlay-enabled',
103    'hover:data-[disabled=true]:text-fg-disabled',
104  );
105 
106  const focusedStyles = cn(
107    'data-[focused=true]:bg-stateslayer-overlay-active-inverse',
108    'data-[focused=true]:text-fg-primary',
109// … truncated