Calendar Lume

1"use client";
2 
3import { useState, useMemo, useCallback, useRef } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7/* ── constants ── */
8const MO = [
9  "Jan",
10  "Feb",
11  "Mar",
12  "Apr",
13  "May",
14  "Jun",
15  "Jul",
16  "Aug",
17  "Sep",
18  "Oct",
19  "Nov",
20  "Dec",
21] as const;
22const MOFULL = [
23  "January",
24  "February",
25  "March",
26  "April",
27  "May",
28  "June",
29  "July",
30  "August",
31  "September",
32  "October",
33  "November",
34  "December",
35] as const;
36const WK = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] as const;
37const WKFULL = [
38  "Sunday",
39  "Monday",
40  "Tuesday",
41  "Wednesday",
42  "Thursday",
43  "Friday",
44  "Saturday",
45] as const;
46 
47/* ── date math ── */
48function daysIn(y: number, m: number) {
49  return new Date(y, m + 1, 0).getDate();
50}
51function startOff(y: number, m: number) {
52  return (new Date(y, m, 1).getDay() + 6) % 7;
53}
54function pad(n: number) {
55  return String(n).padStart(2, "0");
56}
57function iso(y: number, m: number, d: number) {
58  return `${y}-${pad(m + 1)}-${pad(d)}`;
59}
60 
61/* ── sound ── */
62let _ctx: AudioContext | null = null;
63let _buf: AudioBuffer | null = null;
64function _init() {
65  if (_ctx) return;
66  _ctx = new AudioContext();
67  const n = Math.ceil(_ctx.sampleRate * 0.003);
68  _buf = _ctx.createBuffer(1, n, _ctx.sampleRate);
69  const ch = _buf.getChannelData(0);
70  for (let i = 0; i < n; i++) {
71    const t = i / n;
72    ch[i] = (Math.random() * 2 - 1) * Math.pow(1 - t, 4) * 0.12;
73  }
74}
75let _last = 0;
76function _tick() {
77  const now = Date.now();
78  if (now - _last < 60) return;
79  _last = now;
80  if (!_ctx || !_buf) return;
81  const s = _ctx.createBufferSource();
82  s.buffer = _buf;
83  s.connect(_ctx.destination);
84  s.start();
85}
86 
87/* ── types ── */
88export interface CalendarLumeProps {
89  /** ISO date string "YYYY-MM-DD" */
90  value?: string;
91  /** Fires with ISO date string on day selection */
92  onChange?: (date: string) => void;
93  /** Enable tick sound. Default true */
94  sound?: boolean;
95}
96 
97type Level = "year" | "month" | "day";
98 
99/* ── stagger helper ── */
100const stag = (i: number) => ({
101  initial: { opacity: 0, y: 5 } as const,
102  animate: {
103    opacity: 1,
104    y: 0,
105    transition: { delay: i * 0.016 },
106  } as const,
107});
108 
109/* ── depth transition variants (functions receiving custom direction) ── */
110const depthVariants = {
111  initial: (dir: string) => ({
112    opacity: 0,
113    scale: dir === "in" ? 0.93 : 1.07,
114  }),
115  animate: { opacity: 1, scale: 1 },
116// … truncated