makersclaw 0.2.0 → 0.3.0

package/templates/next/files/components/ui/calendar.jsx

@@ -0,0 +1,609 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { cx } from "./cx";
+import { IconButton } from "./button";
+import { Select } from "./field";
+
+// Calendar — a month grid to pick a day, several days, or a span of days.
+// It is the WAI-ARIA date grid: one Tab stop (the focused day), arrows
+// move a day or a week, Page Up/Down a month (with Shift, a year), Home
+// and End the week's edges, Enter or Space picks. Names, week start and
+// digits come from Intl for the reader's locale. No date library.
+//
+//   mode       single (value "2026-03-12" | null) · multiple (value
+//              ["2026-03-12", …], kept sorted) · range (value { from, to }
+//              | null; `to` is null until the second click; a second click
+//              before `from` swaps them)
+//   value, onChange(value) — controlled; or `defaultValue`
+//   required   single: clicking the chosen day again keeps it (default:
+//              it clears)
+//   month      the month shown, "2026-03" (controlled, with onMonthChange);
+//              or `defaultMonth`; else the first chosen day's, else today's
+//   numberOfMonths  side by side from 640px, stacked on a phone
+//   min, max   "YYYY-MM-DD", inclusive; days past them are disabled and
+//              the arrows stop there
+//   disabled   (date) → true for a day that cannot be picked (weekends,
+//              booked days); true disables every day
+//   captionLayout  label (default) · dropdown (month and year Selects for
+//              far jumps; the arrows stay) · none (no caption and no
+//              arrows: the parent shows the month and moves it, passing a
+//              controlled `month`; a screen reader still hears the month)
+//   fromYear, toYear  the dropdown's years (default: min/max, else today
+//              −100 … +10)
+//   showOutsideDays   the neighbouring months' days, muted (true)
+//   showWeekNumbers   ISO 8601 week numbers down the side
+//   marked     days that hold something (posts, bookings): a list of
+//              "YYYY-MM-DD", or { "2026-03-04": { tone, label } } — a dot
+//              under the number in `tone` (primary, the default · neutral ·
+//              success · warning · danger · info); `label` joins the day's
+//              name for a screen reader ("Wednesday, March 4, 2026, 3
+//              posts"). Selection is unchanged: open the day's items from
+//              onChange
+//   emphasizeMarked  marked days drawn bold, the rest muted — a calendar
+//              that exists to show where the posts are (false)
+//   onlyMarked unmarked days cannot be picked, with no strike-through: they
+//              are empty, not forbidden (that stays `disabled`'s look).
+//              Keys still walk them (false)
+//   weekStartsOn  0 (Sunday) … 6; default: the locale's
+//   locale     a BCP 47 tag; default: the browser's
+//   today      "YYYY-MM-DD", drawn ringed; default: the browser's today.
+//              Pass it where a screen must not change from day to day (a
+//              demo, a test)
+//   size       md (44px days) · sm (36px days from 640px, 44px on a phone)
+//   autoFocus  when it turns true, focus moves to the grid (a picker
+//              passes its open state)
+//   label      what a screen reader calls the whole calendar ("Calendar")
+//
+// Dates are plain "YYYY-MM-DD" strings in and out, never Date objects. A
+// date is a day on a wall calendar, not an instant: a Date is an instant,
+// and "2026-03-12" parsed as one is midnight UTC — the 11th in New York.
+// Strings compare in order ("2026-03-02" < "2026-03-12"), survive JSON
+// and a database's `date` column unchanged, and mean the same day in
+// every timezone. Inside, arithmetic runs on UTC midnights, where no
+// daylight-saving shift can add or lose a day. The helpers below are
+// exported for the same work in a surface.
+
+// ── Dates as strings ────────────────────────────────────────────────────
+
+const ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+const DAY = 86400000;
+const pad = (n, w = 2) => String(n).padStart(w, "0");
+
+/** "YYYY-MM-DD" → a Date at that day's UTC midnight; null when it is not
+ *  a real day ("2026-02-30", "", undefined). */
+export function parseDate(s) {
+  const m = typeof s === "string" ? ISO.exec(s) : null;
+  if (!m) return null;
+  const d = new Date(0);
+  d.setUTCFullYear(+m[1], +m[2] - 1, +m[3]);
+  return d.getUTCMonth() === +m[2] - 1 && d.getUTCDate() === +m[3] ? d : null;
+}
+
+const iso = (d) => `${pad(d.getUTCFullYear(), 4)}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
+
+/** True for a real "YYYY-MM-DD" day. */
+export const isDateString = (s) => parseDate(s) !== null;
+
+/** A JS Date → the "YYYY-MM-DD" it is on the reader's own calendar
+ *  (local time: new Date() at 23:30 in Tokyo is Tokyo's day). */
+export function toDateString(date = new Date()) {
+  return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** Today on the reader's calendar, "YYYY-MM-DD". */
+export const todayString = () => toDateString(new Date());
+
+/** The day `n` days on (negative: back). */
+export function addDays(s, n) {
+  const d = parseDate(s);
+  return d ? iso(new Date(d.getTime() + n * DAY)) : null;
+}
+
+/** The same day `n` months on, clamped to the month's end (Jan 31 + 1 →
+ *  Feb 28). */
+export function addMonths(s, n) {
+  const d = parseDate(s);
+  if (!d) return null;
+  const y = d.getUTCFullYear();
+  const m = d.getUTCMonth() + n;
+  const last = new Date(Date.UTC(2000, 0, 1));
+  last.setUTCFullYear(y, m + 1, 0);
+  const out = new Date(0);
+  out.setUTCFullYear(y, m, Math.min(d.getUTCDate(), last.getUTCDate()));
+  return iso(out);
+}
+
+/** The first day of `s`'s month; "2026-03" works as well as a full date. */
+export const startOfMonth = (s) => (typeof s === "string" && /^\d{4}-\d{2}/.test(s) ? `${s.slice(0, 7)}-01` : null);
+
+/** The last day of `s`'s month. */
+export const endOfMonth = (s) => {
+  const first = startOfMonth(s);
+  return first ? addDays(addMonths(first, 1), -1) : null;
+};
+
+/** The day of the week, 0 (Sunday) … 6. */
+export const dayOfWeek = (s) => parseDate(s)?.getUTCDay() ?? null;
+
+// Intl's spacing differs between ICU builds (Node's thin and no-break
+// spaces around a range's dash, a browser's plain ones): the server's
+// HTML and the browser's first render must be the same text, so every
+// formatted string is written with plain spaces.
+export const plainSpaces = (s) => s.replace(/[\u00a0\u2009\u202f]/g, " ");
+
+/** A day in words for the locale: formatDate("2026-03-12") → "Mar 12,
+ *  2026"; `options` are Intl.DateTimeFormat's ({ dateStyle: "full" }). */
+export function formatDate(s, options = { dateStyle: "medium" }, locale) {
+  const d = parseDate(s);
+  return d ? plainSpaces(new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(d)) : "";
+}
+
+// The week's first day for a locale: Intl's own answer where the browser
+// has it (getWeekInfo), else CLDR's regions that start on Sunday or
+// Saturday; everyone else starts on Monday.
+const SUNDAY = new Set("AG AS BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IL IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW".split(" "));
+const SATURDAY = new Set("AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY".split(" "));
+
+/** 0 (Sunday) … 6: the day a week starts on in `locale`. */
+export function firstDayOfWeek(locale) {
+  try {
+    const loc = new Intl.Locale(locale ?? Intl.DateTimeFormat().resolvedOptions().locale);
+    const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+    if (info?.firstDay) return info.firstDay % 7;
+    const region = loc.maximize().region;
+    return SUNDAY.has(region) ? 0 : SATURDAY.has(region) ? 6 : 1;
+  } catch {
+    return 1;
+  }
+}
+
+// ISO 8601 week number of the week holding `thursday` (a Thursday's
+// week number is its day of the year, in sevens, rounded up).
+function isoWeek(thursday) {
+  const d = parseDate(thursday);
+  const jan1 = Date.UTC(d.getUTCFullYear(), 0, 1);
+  return Math.floor((d.getTime() - jan1) / DAY / 7) + 1;
+}
+
+// ── The reader's locale and today, without a hydration mismatch ────────
+// The server does not know either. useSyncExternalStore renders the
+// server's answer (null) while hydrating, then the browser's — so the
+// first paint matches the HTML and nothing warns.
+
+const never = () => () => {};
+function useBrowser(get) {
+  return useSyncExternalStore(never, get, () => null);
+}
+
+/** The locale to format in: `locale`, else the browser's (after
+ *  hydration; "en-US" in the server's HTML). */
+export function useLocale(locale) {
+  const browser = useBrowser(() => navigator.language);
+  return locale ?? browser ?? "en-US";
+}
+
+/** `today`, else the browser's today once hydrated (null before). */
+export function useToday(today) {
+  const browser = useBrowser(todayString);
+  return today ?? browser;
+}
+
+// ── The grid ────────────────────────────────────────────────────────────
+
+// A marked day's dot. On a picked day (the primary fill) the primary and
+// neutral dots turn to the fill's own foreground so they still show.
+const DOT = {
+  primary: "bg-primary",
+  neutral: "bg-muted-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  info: "bg-info",
+};
+
+const SIZES = {
+  md: { cell: "size-11", caption: "h-11", nav: "md" },
+  sm: { cell: "size-11 sm:size-9", caption: "h-11 sm:h-9", nav: "sm" },
+};
+
+function useControlled(value, fallback) {
+  const [own, setOwn] = useState(fallback);
+  return value !== undefined ? [value, false] : [own, setOwn];
+}
+
+function listOf(mode, value) {
+  if (!value) return [];
+  if (mode === "multiple") return Array.isArray(value) ? value : [];
+  if (mode === "range") return [value.from, value.to].filter(Boolean);
+  return [value];
+}
+
+export function Calendar({
+  mode = "single",
+  value: valueProp,
+  defaultValue,
+  onChange,
+  required = false,
+  month: monthProp,
+  defaultMonth,
+  onMonthChange,
+  numberOfMonths = 1,
+  min,
+  max,
+  disabled,
+  captionLayout = "label",
+  fromYear,
+  toYear,
+  showOutsideDays = true,
+  showWeekNumbers = false,
+  marked,
+  emphasizeMarked = false,
+  onlyMarked = false,
+  weekStartsOn,
+  locale: localeProp,
+  today: todayProp,
+  size = "md",
+  autoFocus = false,
+  label = "Calendar",
+  className,
+}) {
+  const uid = useId();
+  const root = useRef(null);
+  const pending = useRef(false);
+  const locale = useLocale(localeProp);
+  const today = useToday(todayProp);
+  const s = SIZES[size] ?? SIZES.md;
+  const n = Math.max(1, numberOfMonths | 0);
+
+  const [own, setOwnValue] = useControlled(valueProp, defaultValue ?? (mode === "multiple" ? [] : null));
+  const value = valueProp !== undefined ? valueProp : own;
+  const chosen = listOf(mode, value);
+
+  const [ownMonth, setOwnMonth] = useState(() => startOfMonth(defaultMonth) ?? startOfMonth(chosen[0]));
+  const first = startOfMonth(monthProp) ?? ownMonth ?? startOfMonth(today);
+  const last = first ? addMonths(first, n - 1) : null;
+  const [focus, setFocus] = useState(null);
+  const [hover, setHover] = useState(null);
+
+  const marks = useMemo(() => {
+    if (Array.isArray(marked)) return Object.fromEntries(marked.map((d) => [d, {}]));
+    return marked && typeof marked === "object" ? marked : {};
+  }, [marked]);
+
+  const ws = weekStartsOn ?? firstDayOfWeek(locale);
+  const fmt = useMemo(() => {
+    const f = (o) => {
+      const intl = new Intl.DateTimeFormat(locale, { ...o, timeZone: "UTC" });
+      return { format: (d) => plainSpaces(intl.format(d)) };
+    };
+    return {
+      caption: f({ month: "long", year: "numeric" }),
+      day: f({ day: "numeric" }),
+      full: f({ dateStyle: "full" }),
+      monthShort: f({ month: "short" }),
+      year: f({ year: "numeric" }),
+      weekShort: f({ weekday: "short" }),
+      weekLong: f({ weekday: "long" }),
+    };
+  }, [locale]);
+  // 2023-01-01 was a Sunday: the seven names from the week's first day.
+  const weekdays = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, i) => {
+        const d = parseDate(addDays("2023-01-01", (ws + i) % 7));
+        return { short: fmt.weekShort.format(d), long: fmt.weekLong.format(d) };
+      }),
+    [fmt, ws],
+  );
+
+  // Focus follows the roving day after the render that shows it.
+  useEffect(() => {
+    if (!pending.current) return;
+    pending.current = false;
+    root.current?.querySelector('button[data-day][tabindex="0"]')?.focus();
+  });
+  useEffect(() => {
+    if (!autoFocus) return;
+    const go = () => root.current?.querySelector('button[data-day][tabindex="0"]')?.focus({ preventScroll: true });
+    // Inside a popover not shown yet (one open on load), wait for it: the
+    // Popover focuses its first control on toggle, and the day wins after.
+    const pop = root.current?.closest("[popover]");
+    if (pop && !pop.matches(":popover-open")) {
+      let t;
+      const on = () => (t = setTimeout(go));
+      pop.addEventListener("toggle", on, { once: true });
+      return () => {
+        pop.removeEventListener("toggle", on);
+        clearTimeout(t);
+      };
+    }
+    go();
+  }, [autoFocus]);
+
+  function setMonth(m) {
+    if (monthProp === undefined) setOwnMonth(m);
+    onMonthChange?.(m.slice(0, 7));
+  }
+
+  function setValue(v) {
+    if (setOwnValue) setOwnValue(v);
+    onChange?.(v);
+  }
+
+  const isDisabled = (d) =>
+    disabled === true || (min && d < min) || (max && d > max) || (typeof disabled === "function" && !!disabled(d));
+  const inView = (d) => !!(d && first && startOfMonth(d) >= first && startOfMonth(d) <= last);
+
+  const isEmpty = (d) => onlyMarked && !marks[d];
+
+  function pick(d) {
+    if (isDisabled(d) || isEmpty(d)) return;
+    if (mode === "multiple") {
+      setValue(chosen.includes(d) ? chosen.filter((x) => x !== d) : [...chosen, d].sort());
+    } else if (mode === "range") {
+      const { from, to } = value ?? {};
+      if (!from || to) setValue({ from: d, to: null });
+      else if (d < from) setValue({ from: d, to: from });
+      else setValue({ from, to: d });
+    } else {
+      setValue(value === d && !required ? null : d);
+    }
+  }
+
+  function moveTo(d) {
+    if (min && d < min) d = min;
+    if (max && d > max) d = max;
+    const m = startOfMonth(d);
+    if (m < first) setMonth(m);
+    else if (m > last) setMonth(addMonths(m, -(n - 1)));
+    setFocus(d);
+    pending.current = true;
+  }
+
+  function onKeyDown(e) {
+    const day = e.target.dataset?.day;
+    if (!day || e.altKey || e.ctrlKey || e.metaKey) return;
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const back = (dayOfWeek(day) - ws + 7) % 7;
+    const step = {
+      ArrowLeft: () => addDays(day, rtl ? 1 : -1),
+      ArrowRight: () => addDays(day, rtl ? -1 : 1),
+      ArrowUp: () => addDays(day, -7),
+      ArrowDown: () => addDays(day, 7),
+      PageUp: () => addMonths(day, e.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(day, e.shiftKey ? 12 : 1),
+      Home: () => addDays(day, -back),
+      End: () => addDays(day, 6 - back),
+    }[e.key];
+    if (!step) return;
+    e.preventDefault();
+    moveTo(step());
+  }
+
+  // Range display: the committed span, or — between the two clicks —
+  // a preview from `from` to the day under the pointer or focus.
+  const range = mode === "range" ? value ?? {} : {};
+  const previewing = !!(range.from && !range.to && hover);
+  const ends = range.from ? [range.from, range.to ?? (previewing ? hover : range.from)].sort() : null;
+
+  const tabbable = [focus, ...chosen, today].find((d) => inView(d) && !(min && d < min) && !(max && d > max)) ?? (inView(min) ? min : first);
+
+  if (!first) {
+    // Hydrating with no month to show yet: hold the space.
+    return <div ref={root} role="group" aria-label={label} aria-busy="true" className={cx("min-h-80 min-w-72", className)} />;
+  }
+
+  const months = Array.from({ length: n }, (_, i) => addMonths(first, i));
+  const prevOff = !!(min && startOfMonth(min) >= first);
+  const nextOff = !!(max && startOfMonth(max) <= last);
+
+  function Caption({ m, i }) {
+    const id = `${uid}-cap-${i}`;
+    if (captionLayout === "none") {
+      return (
+        <span id={id} className="sr-only" aria-live={i === 0 ? "polite" : undefined}>
+          {fmt.caption.format(parseDate(m))}
+        </span>
+      );
+    }
+    if (captionLayout === "dropdown" && i === 0) {
+      const y = +m.slice(0, 4);
+      const ty = +(today ?? m).slice(0, 4);
+      const lo = Math.min(fromYear ?? (min ? +min.slice(0, 4) : ty - 100), y);
+      const hi = Math.max(toYear ?? (max ? +max.slice(0, 4) : ty + 10), y);
+      const monthOff = (k) => {
+        const mm = `${pad(y, 4)}-${pad(k + 1)}-01`;
+        return (min && endOfMonth(mm) < min) || (max && mm > max);
+      };
+      return (
+        <div className={cx("flex items-center justify-center gap-1 px-12", s.caption)}>
+          <span id={id} className="sr-only" aria-live="polite">
+            {fmt.caption.format(parseDate(m))}
+          </span>
+          <span className="min-w-0 flex-[3]">
+            <Select aria-label="Month" value={String(+m.slice(5, 7))} onChange={(e) => setMonth(`${pad(y, 4)}-${pad(+e.target.value)}-01`)}>
+              {Array.from({ length: 12 }, (_, k) => (
+                <option key={k} value={k + 1} disabled={monthOff(k)}>
+                  {fmt.monthShort.format(parseDate(`2023-${pad(k + 1)}-01`))}
+                </option>
+              ))}
+            </Select>
+          </span>
+          <span className="min-w-0 flex-[2]">
+            <Select aria-label="Year" value={String(y)} onChange={(e) => setMonth(`${pad(+e.target.value, 4)}${m.slice(4)}`)}>
+              {Array.from({ length: hi - lo + 1 }, (_, k) => (
+                <option key={k} value={lo + k}>
+                  {fmt.year.format(parseDate(`${pad(lo + k, 4)}-06-15`))}
+                </option>
+              ))}
+            </Select>
+          </span>
+        </div>
+      );
+    }
+    return (
+      <div id={id} aria-live={i === 0 ? "polite" : undefined} className={cx("flex items-center justify-center px-12 font-medium", s.caption)}>
+        {fmt.caption.format(parseDate(m))}
+      </div>
+    );
+  }
+
+  function Month({ m, i }) {
+    const lead = (dayOfWeek(m) - ws + 7) % 7;
+    const start = addDays(m, -lead);
+    const dim = +endOfMonth(m).slice(8);
+    const rows = Math.ceil((lead + dim) / 7);
+    return (
+      <div className="grid content-start gap-2">
+        {Caption({ m, i })}
+        <table role="grid" aria-labelledby={`${uid}-cap-${i}`} className="border-collapse" onKeyDown={onKeyDown}>
+          <thead>
+            <tr>
+              {showWeekNumbers ? (
+                <th scope="col" className="w-8 text-xs font-normal text-muted-foreground">
+                  <span className="sr-only">Week</span>
+                </th>
+              ) : null}
+              {weekdays.map((w) => (
+                <th key={w.long} scope="col" abbr={w.long} className="h-8 p-0 text-xs font-normal text-muted-foreground">
+                  <span aria-hidden="true">{w.short}</span>
+                  <span className="sr-only">{w.long}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: rows }, (_, r) => {
+              const rowStart = addDays(start, r * 7);
+              return (
+                <tr key={rowStart}>
+                  {showWeekNumbers ? (
+                    <th scope="row" className="w-8 p-0 text-center text-xs font-normal tabular-nums text-muted-foreground">
+                      {isoWeek(addDays(rowStart, (4 - dayOfWeek(rowStart) + 7) % 7))}
+                    </th>
+                  ) : null}
+                  {Array.from({ length: 7 }, (_, c) => Day({ d: addDays(rowStart, c), m }))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  function Day({ d, m }) {
+    const outside = startOfMonth(d) !== m;
+    if (outside && !showOutsideDays) return <td key={d} className="p-0" />;
+    const off = isDisabled(d);
+    const empty = !off && isEmpty(d);
+    const picked = mode === "range" ? d === range.from || d === range.to : chosen.includes(d);
+    // Beside another month, an outside day repeats a day shown there: only
+    // the real one carries the band.
+    const band = ends && ends[0] < ends[1] && d >= ends[0] && d <= ends[1] && !(outside && n > 1);
+    const isToday = d === today;
+    const mark = marks[d];
+    const tone = mark ? (DOT[mark.tone] ? mark.tone : "primary") : null;
+    // cx does not merge: one text colour and one weight per day.
+    const quiet = !picked && !band && !outside && ((emphasizeMarked && !mark) || empty);
+    return (
+      <td
+        key={d}
+        aria-selected={picked || (band && !previewing) || undefined}
+        className={cx(
+          "p-0 text-center",
+          band && (previewing ? "bg-accent/50" : "bg-accent"),
+          band && d === ends[0] && "rounded-l-md",
+          band && d === ends[1] && "rounded-r-md",
+        )}
+      >
+        <button
+          type="button"
+          data-day={d}
+          data-outside={outside || undefined}
+          tabIndex={!outside && d === tabbable ? 0 : -1}
+          aria-label={[fmt.full.format(parseDate(d)), isToday && "today", mark?.label].filter(Boolean).join(", ")}
+          aria-current={isToday ? "date" : undefined}
+          aria-disabled={off || empty || undefined}
+          onClick={() => {
+            if (off || empty) return;
+            pick(d);
+            setFocus(d);
+            if (!inView(d)) setMonth(startOfMonth(d) < first ? startOfMonth(d) : addMonths(startOfMonth(d), -(n - 1)));
+          }}
+          onMouseEnter={() => mode === "range" && setHover(d)}
+          onFocus={() => mode === "range" && setHover(d)}
+          className={cx(
+            "relative inline-flex items-center justify-center rounded-md text-sm tabular-nums outline-none",
+            "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring",
+            s.cell,
+            picked
+              ? "bg-primary font-medium text-primary-foreground"
+              : band
+                ? "text-accent-foreground hover:bg-accent"
+                : quiet
+                  ? "text-muted-foreground"
+                  : "text-foreground",
+            !picked && !band && !empty && "hover:bg-accent",
+            emphasizeMarked && mark && !picked && !isToday && "font-semibold",
+            outside && !picked && "text-muted-foreground opacity-60",
+            outside && picked && "opacity-70",
+            off && "cursor-not-allowed line-through opacity-40 hover:bg-transparent",
+            empty && "cursor-default",
+            // Today: a ring and a heavier number — never colour alone.
+            isToday && "font-semibold ring-1 ring-inset ring-muted-foreground/60",
+          )}
+        >
+          {fmt.day.format(parseDate(d))}
+          {tone ? (
+            <span
+              aria-hidden="true"
+              className={cx(
+                "absolute bottom-1 left-1/2 size-1.5 -translate-x-1/2 rounded-full",
+                picked && (tone === "primary" || tone === "neutral") ? "bg-primary-foreground" : DOT[tone],
+              )}
+            />
+          ) : null}
+        </button>
+      </td>
+    );
+  }
+
+  return (
+    <div
+      ref={root}
+      role="group"
+      aria-label={label}
+      onMouseLeave={() => setHover(null)}
+      onBlur={(e) => !root.current?.contains(e.relatedTarget) && setHover(null)}
+      className={cx("relative inline-block max-w-full text-sm", className)}
+    >
+      {captionLayout === "none" ? null : (
+        <>
+          <IconButton
+            icon="chevron-left"
+            label="Previous month"
+            size={s.nav}
+            disabled={prevOff}
+            onClick={() => setMonth(addMonths(first, -1))}
+            className="absolute left-0 top-0 z-10"
+          />
+          <IconButton
+            icon="chevron-right"
+            label="Next month"
+            size={s.nav}
+            disabled={nextOff}
+            onClick={() => setMonth(addMonths(first, 1))}
+            className="absolute right-0 top-0 z-10"
+          />
+        </>
+      )}
+      <div className="flex flex-col gap-4 sm:flex-row sm:gap-6">
+        {months.map((m, i) => (
+          <div key={m}>{Month({ m, i })}</div>
+        ))}
+      </div>
+    </div>
+  );
+}