Glass Calendar

1'use client'
2 
3import * as React from 'react'
4import { DayPicker } from 'react-day-picker'
5import type { DayPickerProps } from 'react-day-picker'
6import { ChevronLeft, ChevronRight } from 'lucide-react'
7 
8import { cn } from '@/lib/utils'
9 
10// Consumers should pass `today` and `defaultMonth` explicitly for TZ-stable rendering.
11function GlassCalendar({ className, classNames, showOutsideDays = true, today, defaultMonth, ...props }: DayPickerProps & { today?: Date; defaultMonth?: Date }) {
12  return (
13    <DayPicker
14      showOutsideDays={showOutsideDays}
15      today={today}
16      defaultMonth={defaultMonth}
17      className={cn('p-3', className)}
18      classNames={{
19        // UI elements
20        root: '',
21        months: 'relative flex flex-col sm:flex-row gap-2',
22        month: 'flex flex-col gap-4',
23        month_caption: 'flex h-8 items-center justify-center',
24        caption_label: 'font-display font-medium text-sm',
25        nav: 'absolute inset-x-0 top-0 flex items-center justify-between',
26        button_previous: cn(
27          'inline-flex size-8 items-center justify-center rounded-full border border-foreground/10 bg-transparent text-sm transition-colors',
28          'hover:border-ruri hover:text-ruri dark:hover:border-ruri-soft dark:hover:text-ruri-soft',
29          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
30        ),
31        button_next: cn(
32          'inline-flex size-8 items-center justify-center rounded-full border border-foreground/10 bg-transparent text-sm transition-colors',
33          'hover:border-ruri hover:text-ruri dark:hover:border-ruri-soft dark:hover:text-ruri-soft',
34          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
35        ),
36        month_grid: 'w-full border-collapse',
37        weekdays: 'flex',
38        weekday: 'font-mono text-[0.6875rem] tracking-[0.15em] uppercase text-muted-foreground rounded-md w-9 font-normal',
39        week: 'flex w-full mt-2',
40        day: cn(
41          'relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20',
42          'flex items-center justify-center rounded-full',
43          'hover:bg-foreground/6',
44        ),
45        day_button: cn(
46          'inline-flex size-9 items-center justify-center rounded-full text-sm',
47// … truncated