@particle-academy/react-fancy 5.54.2 → 5.56.0

package/CHANGELOG.md

@@ -11,6 +11,84 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.56.0] - 2026-10-21
+
+### Added
+
+- **`Calendar` per-day hooks and a controlled visible month.** All additive:
+  **nothing to do** for an existing Calendar, which renders and behaves as
+  before, plus new data attributes.
+  - Every day cell carries a stable id, `data-react-fancy-calendar-day`,
+    `YYYY-MM-DD` in local time by default (`dateId` replaces it). Leading and
+    trailing days carry `data-outside-month`; the heading carries
+    `data-react-fancy-calendar-month`.
+  - `renderDay(ctx)` draws a day's content, `dayClassName(ctx)` adds classes
+    to one day, `dayAriaLabel(ctx)` sets its accessible name. `ctx` is
+    `{ date, id, selected, disabled, inRange, outsideMonth, today }`, exported
+    as `CalendarDayContext`. A day shaded with `dayClassName` should get a
+    `dayAriaLabel` too: colour alone does not reach a screen reader.
+  - `visibleMonth` / `onVisibleMonthChange`: the shown month is controlled when
+    `visibleMonth` is given (the chevrons propose, the host decides);
+    uncontrolled it starts at today as before, and still reports each move.
+    The callback gets the 1st of the month.
+  - Opening a day on click is the existing `onChange` (single mode).
+  - Verified in Chrome in light, `.dark` and `[data-theme="dark"]`.
+
+The requester's wording was `month` / `onMonthChange`. The names here follow
+the spec (`visibleMonth` / `onVisibleMonthChange`), because `value` is already
+a date and a bare `month` reads as the selected one.
+
+## [5.55.0] - 2026-10-21
+
+### Added
+
+- **`TimeGrid` typed cells and range selection.** Pass `cells` (with `states`)
+  and the grid renders the host's own vocabulary instead of on/off. **Nothing
+  to do for an existing grid:** without `cells` it is the same boolean grid,
+  with the same DOM (byte-identical in Chrome against 5.54.2) and the same
+  timings. `value` / `onChange` are now optional in the type because a typed
+  grid does not use them.
+  - `cells: TimeGridCell[][]`: each cell is `{ state, disabled?, reasons?,
+    marks?, meta? }`. `meta` is handed back untouched in every callback.
+  - `states: Record<id, { tone?, label?, className? }>`: the exclusive
+    dimension (open / closed / booked …). `marks: Record<id, { tone?, icon?,
+    label? }>`: non-exclusive overlays. The kit declares the shape; the host
+    declares the vocabulary.
+  - `selectionShape: "rectangle" | "linear"`. A rectangle is the same window
+    across rows (09:00-17:00 Mon-Fri); a linear run goes in reading order and
+    crosses row ends (23:54 Mon to 00:06 Tue). `selection` is a discriminated
+    union, controlled or uncontrolled; `onSelectionChange(next, cells)` hands
+    the cells in selection order; `onSelectionCommit` fires when a drag ends
+    or Enter is pressed.
+  - Selection is derived from anchor + current cell, so a fast drag no longer
+    leaves gaps, and pointer capture keeps a drag tracking (clamped to the
+    edge) after it leaves the grid.
+  - `disabledRange: "clamp" | "refuse" | "span"` (default `clamp`) decides what
+    a range crossing a disabled cell does, identically in both shapes.
+    `onBlockedSelect(blocked)` reports clipped or refused cells with their
+    `reasons`.
+  - A disabled cell's `reasons` reach the `title`, the cell's
+    `aria-description`, and a tooltip shown while the cell has keyboard focus.
+  - Keyboard: the grid takes focus (`aria-activedescendant`), not every cell.
+    Arrows move, Shift+arrows extend from the anchor, Space selects the
+    focused cell, Enter commits, Escape clears. Header clicks select a whole
+    row or column.
+  - `onCellHover(cell, { r, c })` for a host-owned detail panel; `null, null`
+    on leave. `aria-label` names the grid.
+  - `cells` without `states` throws in development: an unknown vocabulary
+    would otherwise render as one colour. An unknown state id warns once and
+    renders neutral.
+  - Colours: state and mark tones from the existing `TimeGridTone` set; the
+    neutral fill, selection wash, focus outline, headers and tooltip read the
+    `--fancy-*` tokens. Dark mode follows `.dark` and `[data-theme="dark"]`.
+  - A mark's `icon` is a `ReactNode` (e.g. `<Icon name="lock" />`), not an
+    icon name: resolving names would import every Lucide glyph into any bundle
+    that uses TimeGrid (measured: 16k to 56k lines).
+- **Measured (Chrome, 4x CPU throttle, 240 columns, median of 7):** typed grid
+  mount 157 ms at 7 days, 260 ms at 14 days, 552 ms at 31 days; update
+  44-75 ms. The 14-day mount is still over the 200 ms budget. Column windowing
+  is the next release.
+
 ## [5.54.2] - 2026-10-21
 
 ### Fixed

package/dist/calendar.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkUET6D7B3_cjs = require('./chunk-UET6D7B3.cjs');
+var chunkCQ7QXZLR_cjs = require('./chunk-CQ7QXZLR.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
-  get: function () { return chunkUET6D7B3_cjs.Calendar; }
+  get: function () { return chunkCQ7QXZLR_cjs.Calendar; }
 });
 //# sourceMappingURL=calendar.cjs.map
 //# sourceMappingURL=calendar.cjs.map

package/dist/calendar.d.cts

@@ -1,10 +1,24 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 
 type CalendarMode = "single" | "range" | "multiple";
 interface DateRange {
     start: Date | null;
     end: Date | null;
 }
+/** Everything a per-day hook needs to know about one day cell. */
+interface CalendarDayContext {
+    date: Date;
+    /** Stable id: `dateId(date)`, default `YYYY-MM-DD` in local time. Also on the cell as `data-react-fancy-calendar-day`. */
+    id: string;
+    selected: boolean;
+    disabled: boolean;
+    /** Strictly between a range's ends (range mode). */
+    inRange: boolean;
+    /** A leading/trailing day from the neighbouring month. */
+    outsideMonth: boolean;
+    today: boolean;
+}
 interface CalendarProps {
     mode?: CalendarMode;
     value?: Date | Date[] | DateRange | null;
@@ -13,8 +27,23 @@ interface CalendarProps {
     maxDate?: Date;
     disabledDates?: Date[];
     className?: string;
+    /** Stable id per day. Default `YYYY-MM-DD` in local time. */
+    dateId?: (date: Date) => string;
+    /** The day cell's content. Default: the day number. The cell (button, click, state classes) stays the Calendar's. */
+    renderDay?: (ctx: CalendarDayContext) => ReactNode;
+    /** Extra classes for one day cell, merged after the built-in ones. */
+    dayClassName?: (ctx: CalendarDayContext) => string | undefined;
+    /**
+     * The day cell's accessible name. Pair it with `dayClassName`: a shaded day
+     * must say what the shade means. It REPLACES the name, so include the date.
+     */
+    dayAriaLabel?: (ctx: CalendarDayContext) => string | undefined;
+    /** Controlled visible month (any day in it). Uncontrolled when omitted; starts at today. */
+    visibleMonth?: Date;
+    /** Called with the 1st of the month navigated to, controlled or not. */
+    onVisibleMonthChange?: (month: Date) => void;
 }
 
 declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Calendar, type CalendarMode, type CalendarProps, type DateRange };
+export { Calendar, type CalendarDayContext, type CalendarMode, type CalendarProps, type DateRange };

package/dist/calendar.d.ts

@@ -1,10 +1,24 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 
 type CalendarMode = "single" | "range" | "multiple";
 interface DateRange {
     start: Date | null;
     end: Date | null;
 }
+/** Everything a per-day hook needs to know about one day cell. */
+interface CalendarDayContext {
+    date: Date;
+    /** Stable id: `dateId(date)`, default `YYYY-MM-DD` in local time. Also on the cell as `data-react-fancy-calendar-day`. */
+    id: string;
+    selected: boolean;
+    disabled: boolean;
+    /** Strictly between a range's ends (range mode). */
+    inRange: boolean;
+    /** A leading/trailing day from the neighbouring month. */
+    outsideMonth: boolean;
+    today: boolean;
+}
 interface CalendarProps {
     mode?: CalendarMode;
     value?: Date | Date[] | DateRange | null;
@@ -13,8 +27,23 @@ interface CalendarProps {
     maxDate?: Date;
     disabledDates?: Date[];
     className?: string;
+    /** Stable id per day. Default `YYYY-MM-DD` in local time. */
+    dateId?: (date: Date) => string;
+    /** The day cell's content. Default: the day number. The cell (button, click, state classes) stays the Calendar's. */
+    renderDay?: (ctx: CalendarDayContext) => ReactNode;
+    /** Extra classes for one day cell, merged after the built-in ones. */
+    dayClassName?: (ctx: CalendarDayContext) => string | undefined;
+    /**
+     * The day cell's accessible name. Pair it with `dayClassName`: a shaded day
+     * must say what the shade means. It REPLACES the name, so include the date.
+     */
+    dayAriaLabel?: (ctx: CalendarDayContext) => string | undefined;
+    /** Controlled visible month (any day in it). Uncontrolled when omitted; starts at today. */
+    visibleMonth?: Date;
+    /** Called with the 1st of the month navigated to, controlled or not. */
+    onVisibleMonthChange?: (month: Date) => void;
 }
 
 declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Calendar, type CalendarMode, type CalendarProps, type DateRange };
+export { Calendar, type CalendarDayContext, type CalendarMode, type CalendarProps, type DateRange };

package/dist/calendar.js

@@ -1,4 +1,4 @@
-export { Calendar } from './chunk-HVND2IIB.js';
+export { Calendar } from './chunk-X2A3NAJW.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=calendar.js.map
 //# sourceMappingURL=calendar.js.map

package/dist/{chunk-UET6D7B3.cjs → chunk-CQ7QXZLR.cjs}

@@ -23,6 +23,10 @@ var MONTHS = [
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
+var pad2 = (n) => n < 10 ? `0${n}` : String(n);
+function defaultDateId(date) {
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
 function getDaysInMonth(year, month) {
   const days = [];
   const firstDay = new Date(year, month, 1);
@@ -47,34 +51,36 @@ var Calendar = react.forwardRef(
     minDate,
     maxDate,
     disabledDates = [],
-    className
+    className,
+    dateId = defaultDateId,
+    renderDay,
+    dayClassName,
+    dayAriaLabel,
+    visibleMonth,
+    onVisibleMonthChange
   }, ref) {
     const today = react.useMemo(() => /* @__PURE__ */ new Date(), []);
-    const [viewMonth, setViewMonth] = react.useState(today.getMonth());
-    const [viewYear, setViewYear] = react.useState(today.getFullYear());
+    const [innerMonth, setInnerMonth] = react.useState(
+      () => new Date(today.getFullYear(), today.getMonth(), 1)
+    );
     const [rangeHover, setRangeHover] = react.useState(null);
+    const shown = visibleMonth ?? innerMonth;
+    const viewMonth = shown.getMonth();
+    const viewYear = shown.getFullYear();
     const days = react.useMemo(
       () => getDaysInMonth(viewYear, viewMonth),
       [viewYear, viewMonth]
     );
-    const prevMonth = react.useCallback(() => {
-      setViewMonth((m) => {
-        if (m === 0) {
-          setViewYear((y) => y - 1);
-          return 11;
-        }
-        return m - 1;
-      });
-    }, []);
-    const nextMonth = react.useCallback(() => {
-      setViewMonth((m) => {
-        if (m === 11) {
-          setViewYear((y) => y + 1);
-          return 0;
-        }
-        return m + 1;
-      });
-    }, []);
+    const goToMonth = react.useCallback(
+      (delta) => {
+        const next = new Date(viewYear, viewMonth + delta, 1);
+        if (visibleMonth === void 0) setInnerMonth(next);
+        onVisibleMonthChange?.(next);
+      },
+      [viewYear, viewMonth, visibleMonth, onVisibleMonthChange]
+    );
+    const prevMonth = react.useCallback(() => goToMonth(-1), [goToMonth]);
+    const nextMonth = react.useCallback(() => goToMonth(1), [goToMonth]);
     const isDisabled = react.useCallback(
       (date) => {
         if (minDate && date < minDate) return true;
@@ -161,7 +167,7 @@ var Calendar = react.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold", "data-react-fancy-calendar-month": "", children: [
               MONTHS[viewMonth],
               " ",
               viewYear
@@ -191,11 +197,23 @@ var Calendar = react.forwardRef(
             const inRange = isInRange(date);
             const disabled = isDisabled(date);
             const isToday = isSameDay(date, today);
+            const ctx = {
+              date,
+              id: dateId(date),
+              selected,
+              disabled,
+              inRange,
+              outsideMonth: !isCurrentMonth,
+              today: isToday
+            };
             return /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 disabled,
+                "data-react-fancy-calendar-day": ctx.id,
+                "data-outside-month": isCurrentMonth ? void 0 : "",
+                "aria-label": dayAriaLabel?.(ctx) || void 0,
                 onClick: () => handleSelect(date),
                 onMouseEnter: () => mode === "range" && setRangeHover(date),
                 className: chunkZU5Q77OT_cjs.cn(
@@ -205,9 +223,10 @@ var Calendar = react.forwardRef(
                   inRange && "bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
                   selected && "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900",
                   isToday && !selected && "font-bold",
-                  disabled && "cursor-not-allowed opacity-30"
+                  disabled && "cursor-not-allowed opacity-30",
+                  dayClassName?.(ctx)
                 ),
-                children: date.getDate()
+                children: renderDay ? renderDay(ctx) : date.getDate()
               },
               i
             );
@@ -220,5 +239,5 @@ var Calendar = react.forwardRef(
 Calendar.displayName = "Calendar";
 
 exports.Calendar = Calendar;
-//# sourceMappingURL=chunk-UET6D7B3.cjs.map
-//# sourceMappingURL=chunk-UET6D7B3.cjs.map
+//# sourceMappingURL=chunk-CQ7QXZLR.cjs.map
+//# sourceMappingURL=chunk-CQ7QXZLR.cjs.map

package/dist/chunk-CQ7QXZLR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Calendar/Calendar.tsx"],"names":["forwardRef","Calendar","useMemo","useState","useCallback","jsxs","cn","jsx","ChevronLeft","ChevronRight"],"mappings":"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","file":"chunk-CQ7QXZLR.cjs","sourcesContent":["import { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CalendarDayContext, CalendarProps, DateRange } from \"./Calendar.types\";\n\nconst DAYS = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"];\nconst MONTHS = [\n  \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n  \"July\", \"August\", \"September\", \"October\", \"November\", \"December\",\n];\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nconst pad2 = (n: number) => (n < 10 ? `0${n}` : String(n));\n\n/** `YYYY-MM-DD` in LOCAL time — never `toISOString()`, which shifts the day east of UTC. */\nfunction defaultDateId(date: Date): string {\n  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;\n}\n\nfunction getDaysInMonth(year: number, month: number): Date[] {\n  const days: Date[] = [];\n  const firstDay = new Date(year, month, 1);\n  const startDayOfWeek = firstDay.getDay();\n\n  // Fill leading days from previous month\n  for (let i = startDayOfWeek - 1; i >= 0; i--) {\n    days.push(new Date(year, month, -i));\n  }\n\n  // Fill current month\n  const lastDate = new Date(year, month + 1, 0).getDate();\n  for (let d = 1; d <= lastDate; d++) {\n    days.push(new Date(year, month, d));\n  }\n\n  // Fill trailing days to complete 6 rows\n  while (days.length < 42) {\n    days.push(new Date(year, month + 1, days.length - startDayOfWeek - lastDate + 1));\n  }\n\n  return days;\n}\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(\n    {\n      mode = \"single\",\n      value,\n      onChange,\n      minDate,\n      maxDate,\n      disabledDates = [],\n      className,\n      dateId = defaultDateId,\n      renderDay,\n      dayClassName,\n      dayAriaLabel,\n      visibleMonth,\n      onVisibleMonthChange,\n    },\n    ref,\n  ) {\n    const today = useMemo(() => new Date(), []);\n    const [innerMonth, setInnerMonth] = useState(\n      () => new Date(today.getFullYear(), today.getMonth(), 1),\n    );\n    const [rangeHover, setRangeHover] = useState<Date | null>(null);\n\n    const shown = visibleMonth ?? innerMonth;\n    const viewMonth = shown.getMonth();\n    const viewYear = shown.getFullYear();\n\n    const days = useMemo(\n      () => getDaysInMonth(viewYear, viewMonth),\n      [viewYear, viewMonth],\n    );\n\n    const goToMonth = useCallback(\n      (delta: number) => {\n        const next = new Date(viewYear, viewMonth + delta, 1);\n        if (visibleMonth === undefined) setInnerMonth(next);\n        onVisibleMonthChange?.(next);\n      },\n      [viewYear, viewMonth, visibleMonth, onVisibleMonthChange],\n    );\n    const prevMonth = useCallback(() => goToMonth(-1), [goToMonth]);\n    const nextMonth = useCallback(() => goToMonth(1), [goToMonth]);\n\n    const isDisabled = useCallback(\n      (date: Date): boolean => {\n        if (minDate && date < minDate) return true;\n        if (maxDate && date > maxDate) return true;\n        return disabledDates.some((d) => isSameDay(d, date));\n      },\n      [minDate, maxDate, disabledDates],\n    );\n\n    const isSelected = useCallback(\n      (date: Date): boolean => {\n        if (!value) return false;\n        if (mode === \"single\" && value instanceof Date) {\n          return isSameDay(date, value);\n        }\n        if (mode === \"multiple\" && Array.isArray(value)) {\n          return value.some((v) => isSameDay(date, v));\n        }\n        if (mode === \"range\" && value && typeof value === \"object\" && \"start\" in value) {\n          const range = value as DateRange;\n          if (range.start && isSameDay(date, range.start)) return true;\n          if (range.end && isSameDay(date, range.end)) return true;\n        }\n        return false;\n      },\n      [value, mode],\n    );\n\n    const isInRange = useCallback(\n      (date: Date): boolean => {\n        if (mode !== \"range\" || !value || typeof value !== \"object\" || !(\"start\" in value))\n          return false;\n        const range = value as DateRange;\n        if (!range.start) return false;\n        const end = range.end ?? rangeHover;\n        if (!end) return false;\n        const [s, e] = range.start <= end ? [range.start, end] : [end, range.start];\n        return date > s && date < e;\n      },\n      [value, mode, rangeHover],\n    );\n\n    const handleSelect = useCallback(\n      (date: Date) => {\n        if (isDisabled(date)) return;\n\n        if (mode === \"single\") {\n          onChange?.(date);\n        } else if (mode === \"multiple\") {\n          const arr = (Array.isArray(value) ? value : []) as Date[];\n          const exists = arr.findIndex((d) => isSameDay(d, date));\n          if (exists >= 0) {\n            onChange?.(arr.filter((_, i) => i !== exists));\n          } else {\n            onChange?.([...arr, date]);\n          }\n        } else if (mode === \"range\") {\n          const range = (value && typeof value === \"object\" && \"start\" in value\n            ? value\n            : { start: null, end: null }) as DateRange;\n\n          if (!range.start || range.end) {\n            onChange?.({ start: date, end: null });\n          } else {\n            const [s, e] =\n              date >= range.start ? [range.start, date] : [date, range.start];\n            onChange?.({ start: s, end: e });\n          }\n        }\n      },\n      [mode, value, onChange, isDisabled],\n    );\n\n    const btnBase =\n      \"flex h-8 w-8 items-center justify-center rounded-lg text-sm transition-colors\";\n\n    return (\n      <div\n        data-react-fancy-calendar=\"\"\n        ref={ref}\n        className={cn(\n          \"inline-block w-72 rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        {/* Header */}\n        <div className=\"mb-3 flex items-center justify-between\">\n          <button\n            type=\"button\"\n            onClick={prevMonth}\n            className=\"rounded-lg p-1 text-zinc-400 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n            aria-label=\"Previous month\"\n          >\n            <ChevronLeft size={16} />\n          </button>\n          <span className=\"text-sm font-semibold\" data-react-fancy-calendar-month=\"\">\n            {MONTHS[viewMonth]} {viewYear}\n          </span>\n          <button\n            type=\"button\"\n            onClick={nextMonth}\n            className=\"rounded-lg p-1 text-zinc-400 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n            aria-label=\"Next month\"\n          >\n            <ChevronRight size={16} />\n          </button>\n        </div>\n\n        {/* Day headers */}\n        <div className=\"mb-1 grid grid-cols-7 gap-1\">\n          {DAYS.map((d) => (\n            <div\n              key={d}\n              className=\"flex h-8 items-center justify-center text-xs font-medium text-zinc-400\"\n            >\n              {d}\n            </div>\n          ))}\n        </div>\n\n        {/* Day grid */}\n        <div className=\"grid grid-cols-7 gap-1\">\n          {days.map((date, i) => {\n            const isCurrentMonth = date.getMonth() === viewMonth;\n            const selected = isSelected(date);\n            const inRange = isInRange(date);\n            const disabled = isDisabled(date);\n            const isToday = isSameDay(date, today);\n            const ctx: CalendarDayContext = {\n              date,\n              id: dateId(date),\n              selected,\n              disabled,\n              inRange,\n              outsideMonth: !isCurrentMonth,\n              today: isToday,\n            };\n\n            return (\n              <button\n                key={i}\n                type=\"button\"\n                disabled={disabled}\n                data-react-fancy-calendar-day={ctx.id}\n                data-outside-month={isCurrentMonth ? undefined : \"\"}\n                aria-label={dayAriaLabel?.(ctx) || undefined}\n                onClick={() => handleSelect(date)}\n                onMouseEnter={() =>\n                  mode === \"range\" && setRangeHover(date)\n                }\n                className={cn(\n                  btnBase,\n                  !isCurrentMonth && \"text-zinc-300 dark:text-zinc-600\",\n                  isCurrentMonth &&\n                    !selected &&\n                    !inRange &&\n                    \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n                  inRange &&\n                    \"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\",\n                  selected &&\n                    \"bg-zinc-900 text-white dark:bg-white dark:text-zinc-900\",\n                  isToday && !selected && \"font-bold\",\n                  disabled && \"cursor-not-allowed opacity-30\",\n                  dayClassName?.(ctx),\n                )}\n              >\n                {renderDay ? renderDay(ctx) : date.getDate()}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n\nCalendar.displayName = \"Calendar\";\n"]}