@particle-academy/react-fancy 5.54.1 → 5.55.0

package/dist/chunk-SFJ5WOX5.js

@@ -0,0 +1,703 @@
+import { composeRefs } from './chunk-SV5BW3IA.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { memo, forwardRef, useId, useRef, useMemo, useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/TimeGrid/TimeGrid.selection.ts
+function selectionBetween(shape, a, b, nCols) {
+  if (shape === "linear") {
+    const ia = a.r * nCols + a.c;
+    const ib = b.r * nCols + b.c;
+    return ia <= ib ? { shape: "linear", from: { r: a.r, c: a.c }, to: { r: b.r, c: b.c } } : { shape: "linear", from: { r: b.r, c: b.c }, to: { r: a.r, c: a.c } };
+  }
+  return {
+    shape: "rectangle",
+    r1: Math.min(a.r, b.r),
+    c1: Math.min(a.c, b.c),
+    r2: Math.max(a.r, b.r),
+    c2: Math.max(a.c, b.c)
+  };
+}
+function rowSegment(sel, r, nCols) {
+  if (!sel) return null;
+  if (sel.shape === "rectangle") {
+    return r >= sel.r1 && r <= sel.r2 ? [sel.c1, sel.c2] : null;
+  }
+  const { from, to } = sel;
+  if (r < from.r || r > to.r) return null;
+  const start = r === from.r ? from.c : 0;
+  const end = r === to.r ? to.c : nCols - 1;
+  return start <= end ? [start, end] : null;
+}
+function selectionCoords(sel, nRows, nCols) {
+  const out = [];
+  if (!sel) return out;
+  const rFrom = sel.shape === "rectangle" ? sel.r1 : sel.from.r;
+  const rTo = sel.shape === "rectangle" ? sel.r2 : sel.to.r;
+  for (let r = Math.max(0, rFrom); r <= Math.min(nRows - 1, rTo); r++) {
+    const seg = rowSegment(sel, r, nCols);
+    if (!seg) continue;
+    for (let c = Math.max(0, seg[0]); c <= Math.min(nCols - 1, seg[1]); c++) out.push({ r, c });
+  }
+  return out;
+}
+function sameSelection(a, b) {
+  if (!a || !b) return !a && !b;
+  if (a.shape === "rectangle" && b.shape === "rectangle") {
+    return a.r1 === b.r1 && a.c1 === b.c1 && a.r2 === b.r2 && a.c2 === b.c2;
+  }
+  if (a.shape === "linear" && b.shape === "linear") {
+    return a.from.r === b.from.r && a.from.c === b.from.c && a.to.r === b.to.r && a.to.c === b.to.c;
+  }
+  return false;
+}
+function resolveRange(shape, anchor, target, nRows, nCols, isDisabled, policy) {
+  const requested = selectionBetween(shape, anchor, target, nCols);
+  if (policy === "span") return { kind: "select", selection: requested, blocked: [] };
+  const blocked = selectionCoords(requested, nRows, nCols).filter(({ r, c }) => isDisabled(r, c));
+  if (blocked.length === 0) return { kind: "select", selection: requested, blocked };
+  if (policy === "refuse" || isDisabled(anchor.r, anchor.c)) return { kind: "refuse", blocked };
+  if (shape === "linear") {
+    const ia = anchor.r * nCols + anchor.c;
+    const it = target.r * nCols + target.c;
+    const step = it >= ia ? 1 : -1;
+    let last = ia;
+    for (let i = ia + step; step > 0 ? i <= it : i >= it; i += step) {
+      if (isDisabled(Math.floor(i / nCols), i % nCols)) break;
+      last = i;
+    }
+    const end = { r: Math.floor(last / nCols), c: last % nCols };
+    return { kind: "select", selection: selectionBetween("linear", anchor, end, nCols), blocked };
+  }
+  const rStep = target.r >= anchor.r ? 1 : -1;
+  const cStep = target.c >= anchor.c ? 1 : -1;
+  const colBlocked = (c, rEnd2) => {
+    for (let r = anchor.r; rStep > 0 ? r <= rEnd2 : r >= rEnd2; r += rStep) {
+      if (isDisabled(r, c)) return true;
+    }
+    return false;
+  };
+  let rEnd = target.r;
+  if (colBlocked(anchor.c, rEnd)) {
+    rEnd = anchor.r;
+    for (let r = anchor.r + rStep; rStep > 0 ? r <= target.r : r >= target.r; r += rStep) {
+      if (isDisabled(r, anchor.c)) break;
+      rEnd = r;
+    }
+  }
+  let cEnd = anchor.c;
+  for (let c = anchor.c + cStep; cStep > 0 ? c <= target.c : c >= target.c; c += cStep) {
+    if (colBlocked(c, rEnd)) break;
+    cEnd = c;
+  }
+  return {
+    kind: "select",
+    selection: selectionBetween("rectangle", anchor, { r: rEnd, c: cEnd }, nCols),
+    blocked
+  };
+}
+var TONE_FILL = {
+  violet: "bg-violet-500",
+  emerald: "bg-emerald-500",
+  sky: "bg-sky-500",
+  rose: "bg-rose-500",
+  amber: "bg-amber-500",
+  indigo: "bg-indigo-500",
+  blue: "bg-blue-500",
+  zinc: "bg-zinc-500"
+};
+var NEUTRAL_FILL = "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]";
+var CELL_BASE = "relative m-px rounded-sm";
+var CELL_ENABLED = "cursor-pointer hover:brightness-90 dark:hover:brightness-125";
+var CELL_DISABLED = "cursor-not-allowed opacity-40";
+var CELL_SELECTED = "after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:bg-[color:var(--fancy-focus,var(--color-blue-500))]/50 dark:after:bg-[color:var(--fancy-focus-dark,var(--color-blue-400))]/50";
+var CELL_ACTIVE = "z-10 outline-2 outline-offset-1 outline-[color:var(--fancy-text,var(--color-zinc-900))] dark:outline-[color:var(--fancy-text-dark,var(--color-zinc-100))]";
+var MARK_DOT = "h-1.5 w-1.5 rounded-full ring-1 ring-[color:var(--fancy-surface,var(--color-white))] dark:ring-[color:var(--fancy-surface-dark,var(--color-zinc-900))]";
+var HEADER_COL = "overflow-visible whitespace-nowrap text-[10px] leading-4 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]";
+var HEADER_ROW = "whitespace-nowrap pr-1 text-right text-[10px] font-medium text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]";
+var HEADER_HOVER = "cursor-pointer hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]";
+var TOOLTIP = "pointer-events-none absolute z-20 max-w-xs rounded-md px-2 py-1 text-xs shadow-lg bg-[color:var(--fancy-text,var(--color-zinc-900))] text-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]";
+function isDev() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+var EMPTY = {};
+var warnedStates = /* @__PURE__ */ new Set();
+var warnedNoStates = false;
+var cellDomId = (baseId, r, c) => `${baseId}-${r}-${c}`;
+function parseCoord(el, baseId) {
+  const id = el?.id;
+  if (!id || !id.startsWith(baseId + "-")) return null;
+  const m = /-(\d+)-(\d+)$/.exec(id);
+  return m ? { r: Number(m[1]), c: Number(m[2]) } : null;
+}
+var TypedRow = memo(function TypedRow2({
+  ctx,
+  r,
+  rowCells,
+  selStart,
+  selEnd,
+  activeCol,
+  onRowHeader
+}) {
+  const { baseId, rows, cols, states, marks, stateClass, cellWidth, cellHeight } = ctx;
+  const { cellId, ariaCell } = ctx.fns.current;
+  const out = new Array(cols.length + 1);
+  out[0] = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "rowheader",
+      "data-react-fancy-timegrid-row": r,
+      onClick: onRowHeader ? () => onRowHeader(r) : void 0,
+      className: onRowHeader ? `${HEADER_ROW} ${HEADER_HOVER}` : HEADER_ROW,
+      children: rows[r]
+    },
+    "h"
+  );
+  for (let c = 0; c < cols.length; c++) {
+    const cell = rowCells?.[c];
+    const state = cell?.state ?? "";
+    const selected = c >= selStart && c <= selEnd;
+    const reasons = cell?.reasons?.length ? cell.reasons.join(". ") : void 0;
+    const markIds = cell?.marks;
+    let label;
+    if (ariaCell) {
+      label = ariaCell(r, c, selected);
+    } else {
+      label = `${rows[r]} ${cols[c]} ${states[state]?.label ?? state}`;
+      if (markIds?.length) label += ", " + markIds.map((m) => marks[m]?.label ?? m).join(", ");
+    }
+    let cls = stateClass(state) + " " + (cell?.disabled ? CELL_DISABLED : CELL_ENABLED);
+    if (selected) cls += " " + CELL_SELECTED;
+    if (c === activeCol) cls += " " + CELL_ACTIVE;
+    out[c + 1] = /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: cellDomId(baseId, r, c),
+        role: "gridcell",
+        "data-react-fancy-timegrid-cell": cellId ? cellId(r, c) : `${r}:${c}`,
+        "data-state": state,
+        "data-marks": markIds?.length ? markIds.join(" ") : void 0,
+        "aria-selected": selected,
+        "aria-disabled": cell?.disabled ? true : void 0,
+        "aria-label": label,
+        "aria-description": reasons,
+        title: reasons,
+        className: cls,
+        style: { width: cellWidth, height: cellHeight },
+        children: markIds?.length ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute right-0 top-0 flex gap-px", children: markIds.map((m) => {
+          const def = marks[m];
+          return def?.icon ? /* @__PURE__ */ jsx("span", { "data-react-fancy-timegrid-mark": m, className: "flex h-2.5 w-2.5 items-center justify-center [&>svg]:h-full [&>svg]:w-full", children: def.icon }, m) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-react-fancy-timegrid-mark": m,
+              className: `${MARK_DOT} ${def?.tone ? TONE_FILL[def.tone] : NEUTRAL_FILL}`
+            },
+            m
+          );
+        }) }) : null
+      },
+      c
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: out });
+});
+var TypedTimeGrid = forwardRef(function TypedTimeGrid2({
+  rows,
+  cols,
+  cells: cellsProp,
+  states: statesProp,
+  marks: marksProp,
+  cellWidth = 20,
+  cellHeight = 16,
+  sparseColLabels = true,
+  toggleStripsOnHeaderClick = true,
+  ariaCell,
+  cellId,
+  className,
+  selectionShape = "rectangle",
+  selection: selectionProp,
+  onSelectionChange,
+  onSelectionCommit,
+  disabledRange = "clamp",
+  onBlockedSelect,
+  onCellHover,
+  "aria-label": ariaLabel
+}, ref) {
+  if (!statesProp) {
+    const msg = 'TimeGrid: `cells` was given without `states`. Every cell names a state id, and with no vocabulary there is no tone to draw it in. Pass `states={{ open: { tone: "emerald", label: "Open" }, \u2026 }}`.';
+    if (isDev()) throw new Error(msg);
+    if (!warnedNoStates) {
+      warnedNoStates = true;
+      console.error(msg);
+    }
+  }
+  const states = statesProp ?? EMPTY;
+  const marks = marksProp ?? EMPTY;
+  const cells = cellsProp;
+  const nRows = rows.length;
+  const nCols = cols.length;
+  const baseId = useId();
+  const outerRef = useRef(null);
+  const gridRef = useRef(null);
+  const setOuterRef = useMemo(() => composeRefs(ref, outerRef), [ref]);
+  const controlled = selectionProp !== void 0;
+  const [inner, setInner] = useState(null);
+  const selection = controlled ? selectionProp : inner;
+  const [active, setActive] = useState({ r: 0, c: 0 });
+  const [focused, setFocused] = useState(false);
+  const anchorRef = useRef(null);
+  const gestureRef = useRef(null);
+  const hoverRef = useRef("");
+  const live = useRef({ cells, selection, selectionShape, disabledRange, onSelectionChange, onSelectionCommit, onBlockedSelect, onCellHover });
+  live.current = { cells, selection, selectionShape, disabledRange, onSelectionChange, onSelectionCommit, onBlockedSelect, onCellHover };
+  const fns = useRef({});
+  fns.current = { cellId, ariaCell };
+  const stateClass = useMemo(() => {
+    const cache = /* @__PURE__ */ new Map();
+    return (state) => {
+      let cls = cache.get(state);
+      if (cls !== void 0) return cls;
+      const def = states[state];
+      if (!def && statesProp && !warnedStates.has(state)) {
+        warnedStates.add(state);
+        console.warn(`TimeGrid: unknown state id "${state}" \u2014 not a key of \`states\`. Rendering it neutral.`);
+      }
+      cls = `${CELL_BASE} ${def?.tone ? TONE_FILL[def.tone] : NEUTRAL_FILL}${def?.className ? " " + def.className : ""}`;
+      cache.set(state, cls);
+      return cls;
+    };
+  }, [states, statesProp]);
+  const ctx = useMemo(
+    () => ({ baseId, rows, cols, states, marks, stateClass, cellWidth, cellHeight, fns }),
+    [baseId, rows, cols, states, marks, stateClass, cellWidth, cellHeight]
+  );
+  const isDisabled = useCallback(
+    (r, c) => !!live.current.cells[r]?.[c]?.disabled,
+    []
+  );
+  const cellsOf = useCallback(
+    (sel) => selectionCoords(sel, nRows, nCols).map(({ r, c }) => live.current.cells[r]?.[c]),
+    [nRows, nCols]
+  );
+  const emit = useCallback(
+    (next) => {
+      if (!controlled) setInner(next);
+      live.current.onSelectionChange?.(next, cellsOf(next));
+    },
+    [controlled, cellsOf]
+  );
+  const reportBlocked = useCallback((blocked, g) => {
+    if (!blocked.length) return;
+    const key = blocked.map((b) => `${b.r}:${b.c}`).join(",");
+    if (g) {
+      if (g.blockedKey === key) return;
+      g.blockedKey = key;
+    }
+    live.current.onBlockedSelect?.(
+      blocked.map(({ r, c }) => {
+        const reasons = live.current.cells[r]?.[c]?.reasons;
+        return reasons ? { r, c, reasons } : { r, c };
+      })
+    );
+  }, []);
+  const extend = useCallback(
+    (anchor, target, g, shape = live.current.selectionShape) => {
+      const res = resolveRange(shape, anchor, target, nRows, nCols, isDisabled, live.current.disabledRange);
+      reportBlocked(res.blocked, g);
+      if (res.kind === "refuse") return void 0;
+      const current = g ? g.selection : live.current.selection;
+      if (!sameSelection(current, res.selection) || g && g.selection === null) emit(res.selection);
+      return res.selection;
+    },
+    [nRows, nCols, isDisabled, reportBlocked, emit]
+  );
+  const commit = useCallback(
+    (sel) => {
+      if (sel) live.current.onSelectionCommit?.(sel, cellsOf(sel));
+    },
+    [cellsOf]
+  );
+  const coordFromEvent = useCallback(
+    (e) => {
+      const t = e.target;
+      let hit = parseCoord(t?.closest?.('[role="gridcell"]') ?? null, baseId);
+      if (!hit && typeof document.elementFromPoint === "function") {
+        const under = document.elementFromPoint(e.clientX, e.clientY);
+        hit = parseCoord(under?.closest?.('[role="gridcell"]') ?? null, baseId);
+      }
+      if (!hit) hit = clampToGrid(e.clientX, e.clientY);
+      return hit;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [baseId, nRows, nCols]
+  );
+  function clampToGrid(x, y) {
+    const first = document.getElementById(cellDomId(baseId, 0, 0));
+    const last = document.getElementById(cellDomId(baseId, nRows - 1, nCols - 1));
+    if (!first || !last) return null;
+    const a = first.getBoundingClientRect();
+    const b = last.getBoundingClientRect();
+    const w = (b.right - a.left) / nCols;
+    const h = (b.bottom - a.top) / nRows;
+    if (!(w > 0) || !(h > 0)) return null;
+    return {
+      r: Math.min(nRows - 1, Math.max(0, Math.floor((y - a.top) / h))),
+      c: Math.min(nCols - 1, Math.max(0, Math.floor((x - a.left) / w)))
+    };
+  }
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    const at = coordFromEvent(e);
+    if (!at) return;
+    e.preventDefault();
+    gridRef.current?.focus({ preventScroll: true });
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    setActive(at);
+    const g = { anchor: at, last: at, selection: null, blockedKey: "" };
+    const sel = extend(at, at, g);
+    if (sel === void 0) {
+      gestureRef.current = null;
+      return;
+    }
+    g.selection = sel;
+    anchorRef.current = at;
+    gestureRef.current = g;
+  };
+  const onPointerMove = (e) => {
+    const g = gestureRef.current;
+    if (!g) return;
+    const at = coordFromEvent(e);
+    if (!at || at.r === g.last.r && at.c === g.last.c) return;
+    g.last = at;
+    setActive(at);
+    const sel = extend(g.anchor, at, g);
+    if (sel !== void 0) g.selection = sel;
+  };
+  const endGesture = () => {
+    const g = gestureRef.current;
+    gestureRef.current = null;
+    if (g) commit(g.selection);
+  };
+  const onPointerOver = (e) => {
+    if (!live.current.onCellHover) return;
+    const at = parseCoord(e.target?.closest?.('[role="gridcell"]') ?? null, baseId);
+    if (!at) return;
+    const key = `${at.r}:${at.c}`;
+    if (hoverRef.current === key) return;
+    hoverRef.current = key;
+    live.current.onCellHover(live.current.cells[at.r]?.[at.c] ?? null, at);
+  };
+  const onPointerLeave = () => {
+    if (!hoverRef.current) return;
+    hoverRef.current = "";
+    live.current.onCellHover?.(null, null);
+  };
+  const onKeyDown = (e) => {
+    const move = {
+      ArrowUp: [-1, 0],
+      ArrowDown: [1, 0],
+      ArrowLeft: [0, -1],
+      ArrowRight: [0, 1]
+    };
+    const d = move[e.key];
+    if (d) {
+      e.preventDefault();
+      const next = {
+        r: Math.min(nRows - 1, Math.max(0, active.r + d[0])),
+        c: Math.min(nCols - 1, Math.max(0, active.c + d[1]))
+      };
+      setActive(next);
+      if (e.shiftKey) {
+        const anchor = anchorRef.current ?? active;
+        anchorRef.current = anchor;
+        extend(anchor, next, null);
+      }
+      return;
+    }
+    if (e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      const sel = live.current.selection;
+      const single = selectionBetween(live.current.selectionShape, active, active, nCols);
+      if (sel && sameSelection(sel, single)) {
+        anchorRef.current = null;
+        emit(null);
+      } else {
+        const res = extend(active, active, null);
+        if (res !== void 0) anchorRef.current = active;
+      }
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      let sel = live.current.selection ?? null;
+      if (!sel) {
+        const res = extend(active, active, null);
+        if (res === void 0) return;
+        anchorRef.current = active;
+        sel = res;
+      }
+      commit(sel);
+      return;
+    }
+    if (e.key === "Escape") {
+      if (live.current.selection) {
+        e.preventDefault();
+        anchorRef.current = null;
+        emit(null);
+      }
+    }
+  };
+  const pickStrip = useCallback(
+    (a, b) => {
+      anchorRef.current = a;
+      setActive(a);
+      const sel = extend(a, b, null, "rectangle");
+      if (sel) commit(sel);
+    },
+    [extend, commit]
+  );
+  const onRowHeader = useMemo(
+    () => toggleStripsOnHeaderClick ? (r) => pickStrip({ r, c: 0 }, { r, c: nCols - 1 }) : void 0,
+    [toggleStripsOnHeaderClick, pickStrip, nCols]
+  );
+  const activeCell = cells[active.r]?.[active.c];
+  const activeReasons = focused && activeCell?.reasons?.length ? activeCell.reasons.join(". ") : null;
+  const [tipPos, setTipPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!activeReasons) return;
+    const outer = outerRef.current;
+    const el = document.getElementById(cellDomId(baseId, active.r, active.c));
+    if (!outer || !el) return;
+    const o = outer.getBoundingClientRect();
+    const b = el.getBoundingClientRect();
+    setTipPos({ left: b.left - o.left + outer.scrollLeft, top: b.bottom - o.top + outer.scrollTop + 4 });
+  }, [activeReasons, active.r, active.c, baseId]);
+  useEffect(() => {
+    if (!focused) return;
+    const el = document.getElementById(cellDomId(baseId, active.r, active.c));
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [focused, active.r, active.c, baseId]);
+  const colStep = Math.max(1, Math.floor(nCols / 6));
+  const pitchX = cellWidth + 2;
+  const tipId = `${baseId}-tip`;
+  const bodyRows = new Array(nRows);
+  for (let r = 0; r < nRows; r++) {
+    const seg = rowSegment(selection, r, nCols);
+    bodyRows[r] = /* @__PURE__ */ jsx(
+      TypedRow,
+      {
+        ctx,
+        r,
+        rowCells: cells[r],
+        selStart: seg ? seg[0] : -1,
+        selEnd: seg ? seg[1] : -2,
+        activeCol: focused && active.r === r ? active.c : -1,
+        onRowHeader
+      },
+      r
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setOuterRef,
+      "data-react-fancy-timegrid": "",
+      "data-typed": "",
+      className: cn("relative select-none overflow-x-auto", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: gridRef,
+            role: "grid",
+            tabIndex: 0,
+            "aria-label": ariaLabel,
+            "aria-multiselectable": "true",
+            "aria-rowcount": nRows + 1,
+            "aria-colcount": nCols + 1,
+            "aria-activedescendant": cellDomId(baseId, active.r, active.c),
+            "aria-describedby": activeReasons ? tipId : void 0,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endGesture,
+            onPointerCancel: endGesture,
+            onPointerOver,
+            onPointerLeave,
+            onKeyDown,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "inline-grid touch-none items-center outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20",
+            style: { gridTemplateColumns: `max-content repeat(${nCols}, ${pitchX}px)` },
+            children: [
+              /* @__PURE__ */ jsxs("div", { role: "row", className: "contents", children: [
+                /* @__PURE__ */ jsx("div", { role: "columnheader" }),
+                cols.map((label, c) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "columnheader",
+                    "data-react-fancy-timegrid-col": c,
+                    onClick: toggleStripsOnHeaderClick ? () => pickStrip({ r: 0, c }, { r: nRows - 1, c }) : void 0,
+                    className: toggleStripsOnHeaderClick ? `${HEADER_COL} ${HEADER_HOVER}` : HEADER_COL,
+                    children: sparseColLabels ? c % colStep === 0 ? label : "" : label
+                  },
+                  c
+                ))
+              ] }),
+              bodyRows
+            ]
+          }
+        ),
+        activeReasons ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: tipId,
+            role: "tooltip",
+            "data-react-fancy-timegrid-tooltip": "",
+            className: TOOLTIP,
+            style: tipPos ? { left: tipPos.left, top: tipPos.top } : void 0,
+            children: activeReasons
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var TONE_CLASSES = {
+  violet: "bg-violet-500 hover:bg-violet-600",
+  emerald: "bg-emerald-500 hover:bg-emerald-600",
+  sky: "bg-sky-500 hover:bg-sky-600",
+  rose: "bg-rose-500 hover:bg-rose-600",
+  amber: "bg-amber-500 hover:bg-amber-600",
+  indigo: "bg-indigo-500 hover:bg-indigo-600",
+  blue: "bg-blue-500 hover:bg-blue-600",
+  zinc: "bg-zinc-500 hover:bg-zinc-600"
+};
+var OFF_CLASSES = "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:bg-zinc-200 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:bg-zinc-700";
+var NO_VALUE = [];
+var noop = () => {
+};
+var TimeGrid = forwardRef(
+  (props, ref) => props.cells ? /* @__PURE__ */ jsx(TypedTimeGrid, { ref, ...props }) : /* @__PURE__ */ jsx(BooleanTimeGrid, { ref, ...props })
+);
+var BooleanTimeGrid = forwardRef(
+  ({
+    rows,
+    cols,
+    value = NO_VALUE,
+    onChange = noop,
+    toneOn = "violet",
+    cellWidth = 20,
+    cellHeight = 16,
+    sparseColLabels = true,
+    toggleStripsOnHeaderClick = true,
+    ariaCell,
+    cellId,
+    className
+  }, ref) => {
+    const [drag, setDrag] = useState(null);
+    const setCell = (r, c, v) => {
+      if (value[r]?.[c] === v) return;
+      const next = value.map((row) => row.slice());
+      next[r][c] = v;
+      onChange(next);
+    };
+    const toggleRow = (r) => {
+      if (!toggleStripsOnHeaderClick) return;
+      const all = value[r].every(Boolean);
+      const next = value.map((row) => row.slice());
+      for (let c = 0; c < cols.length; c++) next[r][c] = !all;
+      onChange(next);
+    };
+    const toggleCol = (c) => {
+      if (!toggleStripsOnHeaderClick) return;
+      const all = value.every((row) => row[c]);
+      const next = value.map((row) => row.slice());
+      for (let r = 0; r < rows.length; r++) next[r][c] = !all;
+      onChange(next);
+    };
+    const colStep = Math.max(1, Math.floor(cols.length / 6));
+    const onTone = TONE_CLASSES[toneOn];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-timegrid": "",
+        className: cn(
+          "select-none overflow-x-auto",
+          className
+        ),
+        onMouseLeave: () => setDrag(null),
+        onMouseUp: () => setDrag(null),
+        children: /* @__PURE__ */ jsxs("table", { className: "text-[10px]", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", {}),
+            cols.map((label, c) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                onClick: () => toggleCol(c),
+                style: { width: cellWidth },
+                "data-react-fancy-timegrid-col": c,
+                className: cn(
+                  "text-zinc-400",
+                  toggleStripsOnHeaderClick && "cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-200"
+                ),
+                children: sparseColLabels ? c % colStep === 0 ? label : "" : label
+              },
+              c
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: rows.map((label, r) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                onClick: () => toggleRow(r),
+                "data-react-fancy-timegrid-row": r,
+                className: cn(
+                  "pr-1 text-right font-medium text-zinc-500",
+                  toggleStripsOnHeaderClick && "cursor-pointer hover:text-zinc-800 dark:hover:text-zinc-200"
+                ),
+                children: label
+              }
+            ),
+            cols.map((_, c) => {
+              const on = value[r]?.[c] ?? false;
+              return /* @__PURE__ */ jsx("td", { className: "p-px", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: () => {
+                    const v = !on;
+                    setDrag(v);
+                    setCell(r, c, v);
+                  },
+                  onMouseEnter: () => drag !== null && setCell(r, c, drag),
+                  style: { width: cellWidth, height: cellHeight },
+                  "data-react-fancy-timegrid-cell": cellId ? cellId(r, c) : `${r}:${c}`,
+                  "aria-pressed": on,
+                  "aria-label": ariaCell ? ariaCell(r, c, on) : `${rows[r]} ${cols[c]} ${on ? "on" : "off"}`,
+                  className: cn(
+                    "block rounded-sm transition",
+                    on ? onTone : OFF_CLASSES
+                  )
+                }
+              ) }, c);
+            })
+          ] }, r)) })
+        ] })
+      }
+    );
+  }
+);
+TimeGrid.displayName = "TimeGrid";
+BooleanTimeGrid.displayName = "BooleanTimeGrid";
+
+export { TimeGrid };
+//# sourceMappingURL=chunk-SFJ5WOX5.js.map
+//# sourceMappingURL=chunk-SFJ5WOX5.js.map