@sableui/react 0.16.0 → 0.18.0

package/dist/adapters/github.js

@@ -0,0 +1,24 @@
+// src/adapters/github.ts
+var LEVEL = {
+  NONE: 0,
+  FIRST_QUARTILE: 1,
+  SECOND_QUARTILE: 2,
+  THIRD_QUARTILE: 3,
+  FOURTH_QUARTILE: 4
+};
+function fromGitHubGraphQL(calendar) {
+  return calendar.weeks.flatMap(
+    (w) => w.contributionDays.map((d) => ({
+      date: d.date,
+      value: d.contributionCount,
+      ...d.contributionLevel ? { level: LEVEL[d.contributionLevel] } : {}
+    }))
+  );
+}
+function fromGitHubContributionsApi(json) {
+  return json.contributions.map((d) => ({ date: d.date, value: d.count, ...d.level != null ? { level: d.level } : {} }));
+}
+export {
+  fromGitHubContributionsApi,
+  fromGitHubGraphQL
+};

package/dist/blocks/approval-block.js

@@ -1,59 +1,48 @@
 // src/blocks/approval-block.tsx
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "../components/button/index.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
-import { Checkbox } from "../components/checkbox/index.js";
-import { Code } from "../components/code/index.js";
 import { InlineStatus } from "../components/inline-status/index.js";
-import { Label } from "../components/label/index.js";
+import { ToolCall } from "../components/tool-call/index.js";
 import { cn } from "../lib/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var request = {
-  tool: "send_email",
-  title: "Send the invoice to Ada?",
-  description: "The agent wants to email invoice INV-1042. An email can't be unsent.",
-  details: [
-    { label: "To", value: "ada@example.com" },
-    { label: "Subject", value: "INV-1042 for October" },
-    { label: "Attached", value: "INV-1042.pdf" }
-  ],
-  allowed: "Allowed. Sending the email.",
-  denied: "Denied. The agent won't send it."
+  title: "Run this command?",
+  description: "The agent wants to migrate the production database in acme/api. It changes live data.",
+  tool: "run_command",
+  action: "Run a command",
+  // A command reads as the command; a structured call would pass its arguments object.
+  input: "pnpm db:migrate --env production",
+  allowed: "Allowed. Running the migration.",
+  denied: "Denied. The agent won't run it."
 };
 function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
   const [decision, setDecision] = useState(null);
-  const [remember, setRemember] = useState(false);
-  const id = useId();
   const outcome = useRef(null);
   useEffect(() => {
     if (decision) outcome.current?.focus();
   }, [decision]);
+  const approve = (remember) => {
+    setDecision("allowed");
+    onApprove?.({ remember });
+  };
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-md", className), children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: request.title }),
       /* @__PURE__ */ jsx(CardDescription, { children: request.description })
     ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-body-sm", children: [
-        request.details.map((d) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: d.label }),
-          /* @__PURE__ */ jsx("dd", { className: "truncate text-foreground", children: d.value })
-        ] }, d.label)),
-        /* @__PURE__ */ jsxs("div", { className: "contents", children: [
-          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Tool" }),
-          /* @__PURE__ */ jsx("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx(Code, { children: request.tool }) })
-        ] })
-      ] }),
-      decision ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Checkbox, { id: `${id}-remember`, checked: remember, onCheckedChange: (v) => setRemember(v) }),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-remember`, className: "text-body-sm", children: [
-          "Allow ",
-          /* @__PURE__ */ jsx(Code, { children: request.tool }),
-          " for the rest of this chat"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: decision ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      ToolCall,
+      {
+        name: request.tool,
+        title: request.action,
+        status: decision === "allowed" ? "complete" : decision === "denied" ? "denied" : "awaiting",
+        statusLabel: decision === "allowed" ? "Allowed" : void 0,
+        input: request.input,
+        defaultOpen: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CardFooter, { actions: true, children: decision ? /* @__PURE__ */ jsx(
       InlineStatus,
       {
         ref: outcome,
@@ -67,7 +56,8 @@ function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
       /* @__PURE__ */ jsx(
         Button,
         {
-          variant: "outline",
+          variant: "ghost",
+          className: "me-auto",
           onClick: () => {
             setDecision("denied");
             onDeny?.();
@@ -75,16 +65,8 @@ function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
           children: "Deny"
         }
       ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            setDecision("allowed");
-            onApprove?.({ remember });
-          },
-          children: "Allow"
-        }
-      )
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => approve(true), children: "Always allow" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => approve(false), children: "Allow once" })
     ] }) })
   ] });
 }

package/dist/blocks/approval-block.meta.js

@@ -4,18 +4,17 @@ var approvalBlockMeta = {
   family: "AI & agents",
   kind: "card",
   width: { min: "18rem", max: "28rem" },
-  summary: `An agent asking permission for one tool call: the question, what will happen and what can't be undone, the call's details, an "allow for the rest of this chat" Checkbox, and Deny / Allow.`,
-  intent: 'Reach for this in a chat or agent run when a tool call waits on the person \u2014 sending, paying, deleting, publishing. The call itself, before and after the decision, is a ToolCall with status="awaiting", then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.',
+  summary: "An agent asking permission for one tool call: the question, what is at stake, the call itself as a ToolCall with its exact input, and Deny / Always allow / Allow once.",
+  intent: `Reach for this in a chat or agent run when a tool call waits on the person \u2014 running a command, sending, paying, deleting, publishing. It wraps the call's own ToolCall, which shows status="awaiting" until the person answers and then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.`,
   notes: [
-    `The title is the question in plain words ("Send the invoice to Ada?"), not the tool's name; the tool's name is one row of the details, for the person who wants to know exactly what runs.`,
-    "The description says what can't be undone. That sentence is what the person is deciding on.",
-    "Deny comes first and Allow is the primary on the end, the same order as every Sable confirmation. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.",
-    "After a decision the buttons give way to one InlineStatus line saying what happened, so the thread keeps a record of the answer."
+    'The title is the question in plain words ("Run this command?"); the description says what is at stake. That sentence is what the person is deciding on.',
+    "The call is shown as the agent made it \u2014 tool name and raw input, open on arrival \u2014 because the exact arguments are what a careful person checks. Do not paraphrase them into a form.",
+    "Three answers, as agent products settle on: Deny on the start edge, then Always allow and Allow once, the primary on the end. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.",
+    "After a decision the buttons give way to one InlineStatus line saying what happened, and the ToolCall shows the outcome, so the thread keeps a record of the answer."
   ],
   a11y: [
     "Focus moves to the outcome line when the buttons leave, instead of dropping to the page; the line is a role=status region, so the decision is announced.",
-    "The details are a dl, so each value is read with its label.",
-    "The remember Checkbox has its own Label, so the tool name inside it is part of its accessible name."
+    "The ToolCall announces its own status change, and its input is a labelled code view."
   ]
 };
 export {

package/dist/blocks/index.d.ts

@@ -17,7 +17,7 @@ interface ApprovalBlockProps {
     className?: string;
     /** false drops the card's surface and border — for a chat column that already frames it. */
     framed?: boolean;
-    /** The person allowed the call. `remember` is the "for the rest of this chat" choice. */
+    /** The person allowed the call. `remember` is true for "Always allow". */
     onApprove?: (options: {
         remember: boolean;
     }) => void;

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -0,0 +1,420 @@
+"use client";
+
+// src/components/activity-heatmap/activity-heatmap.tsx
+import {
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { normalizeActivity } from "../../lib/chart/activity.js";
+import { activityGrid, dayNumber, gridPosition, isoDay, localeWeekStart, today, utcDate, weekday } from "../../lib/chart/calendar.js";
+import { ChartLegend } from "../../lib/chart/chart-legend.js";
+import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
+import { centerValueFormat } from "../../lib/chart/format.js";
+import { activityLevels, heatColor, levelNames } from "../../lib/chart/heat.js";
+import { riseTransition, stagger } from "../../lib/chart/motion.js";
+import { categoryStyle, toneColor } from "../../lib/chart/types.js";
+import { useArrival } from "../../lib/chart/use-arrival.js";
+import { cn } from "../../lib/cn.js";
+import { mergeRefs } from "../../lib/refs.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useResizeObserver } from "../../lib/use-resize-observer.js";
+import { motionAttribute, useMotionLevel } from "../../motion/MotionProvider.js";
+import { Scroller } from "../scroller/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CELL_FLOOR = { sm: 10, md: 12, lg: 14 };
+var CELL_MAX = 20;
+var PAD = 4;
+var SHOWN_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
+var gapFor = (cell) => Math.max(2, Math.floor(cell * 0.2 * 4) / 4);
+function fitCell(width, weeks, floor, stretch) {
+  if (!stretch || !width) return floor;
+  const fit = (width - PAD * 2) / (weeks * 1.2 + 0.2);
+  return Math.max(floor, Math.min(CELL_MAX, Math.floor(fit * 4) / 4));
+}
+function ActivityHeatmap({
+  label,
+  data,
+  start,
+  end,
+  year,
+  weekStart,
+  levels = 5,
+  levelScale = "quantile",
+  tone = "1",
+  categories,
+  unit,
+  formatValue,
+  tooltip = true,
+  legend = true,
+  legendLabels = ["Less", "More"],
+  monthLabels = true,
+  weekdayLabels = "alternate",
+  size = "md",
+  stretch = true,
+  activeDate,
+  defaultActiveDate = null,
+  onActiveDateChange,
+  selectedDate,
+  onSelectDate,
+  renderCell,
+  loading = false,
+  motion,
+  locale,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const uid = useId();
+  const { expressive } = useMotionLevel(motion);
+  const [arrivalRef, inView] = useArrival();
+  const figureRef = useMemo(() => mergeRefs(arrivalRef, ref), [arrivalRef, ref]);
+  const shown = !expressive || inView;
+  const todayN = today();
+  const firstDay = weekStart ?? localeWeekStart(locale);
+  const endN = year != null ? dayNumber(`${year}-12-31`) : end ? dayNumber(end) : todayN;
+  const startN = useMemo(() => {
+    if (year != null) return dayNumber(`${year}-01-01`);
+    if (start) return dayNumber(start);
+    const back = endN - 364;
+    return back - (weekday(back) - firstDay + 7) % 7;
+  }, [year, start, endN, firstDay]);
+  const grid = useMemo(() => activityGrid({ start: startN, end: endN, weekStart: firstDay }), [startN, endN, firstDay]);
+  const last = Math.min(endN, todayN);
+  const navigable = useCallback((n) => n != null && n >= startN && n <= last, [startN, last]);
+  const days = useMemo(() => loading ? /* @__PURE__ */ new Map() : normalizeActivity(data), [data, loading]);
+  const scaleLevels = useMemo(
+    () => activityLevels([...days.values()].map((d) => d.value), { levels, scale: levelScale }),
+    [days, levels, levelScale]
+  );
+  const categoryKeys = categories ? Object.keys(categories) : [];
+  const base = toneColor(tone);
+  const resolve = (n) => {
+    const d = days.get(n);
+    const value = d?.value ?? 0;
+    const level = d?.level != null ? Math.min(levels - 1, Math.max(0, d.level)) : scaleLevels.level(value);
+    const known = d?.category != null && categories?.[d.category] ? d.category : void 0;
+    const cat = known ? categoryStyle(categories, known, categoryKeys.indexOf(known)) : void 0;
+    return { date: isoDay(n), value, level, category: d?.category, color: heatColor(cat?.color ?? base, level, levels), categoryLabel: cat?.label };
+  };
+  const words = useMemo(() => {
+    const long = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
+    const short = new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+    const crossesYear = utcDate(startN).getUTCFullYear() !== utcDate(endN).getUTCFullYear();
+    const monthLong = new Intl.DateTimeFormat(locale, { month: "long", ...crossesYear ? { year: "numeric" } : {}, timeZone: "UTC" });
+    const monthShort = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
+    const dayLong = new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" });
+    const dayShort = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+    const plural = new Intl.PluralRules(locale);
+    const number = (v) => formatValue?.(v) ?? new Intl.NumberFormat(locale, centerValueFormat(v)).format(v);
+    const unitWord = (v) => unit == null ? "" : typeof unit === "string" ? unit : plural.select(v) === "one" ? unit.one : unit.other;
+    const none = unit == null ? "no activity" : `no ${typeof unit === "string" ? unit : unit.other}`;
+    return {
+      long: (n) => long.format(utcDate(n)),
+      short: (n) => short.format(utcDate(n)),
+      monthLong: (n) => monthLong.format(utcDate(n)),
+      monthShort: (n) => monthShort.format(utcDate(n)),
+      // 1970-01-04 (day 3) was a Sunday, so day 3 + d is weekday d.
+      dayLong: (d) => dayLong.format(utcDate(3 + d)),
+      dayShort: (d) => dayShort.format(utcDate(3 + d)),
+      number,
+      value: (v) => v > 0 ? [number(v), unitWord(v)].filter(Boolean).join(" ") : none,
+      unitTitle: unit == null ? "Value" : (typeof unit === "string" ? unit : unit.other).replace(/^./, (c) => c.toUpperCase())
+    };
+  }, [locale, startN, endN, formatValue, unit]);
+  const names = levelNames(levels);
+  const areaRef = useRef(null);
+  const scrollRef = useRef(null);
+  const [width, setWidth] = useState(null);
+  const measure = useCallback(() => setWidth(areaRef.current?.clientWidth ?? null), []);
+  useResizeObserver(measure, [areaRef]);
+  const cell = fitCell(width, grid.weeks.length, CELL_FLOOR[size], stretch);
+  const gap = gapFor(cell);
+  const opened = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    const region = scrollRef.current;
+    if (!region || width == null || opened.current) return;
+    opened.current = true;
+    const latest = last >= startN ? cellAt(last) : null;
+    if (!latest) return;
+    const overshoot = latest.getBoundingClientRect().right - region.getBoundingClientRect().right;
+    region.scrollLeft = Math.max(0, region.scrollLeft + overshoot + PAD + gap);
+  }, [width, cell]);
+  const latestActive = useMemo(() => {
+    for (let n = last; n >= startN; n--) if ((days.get(n)?.value ?? 0) > 0) return n;
+    return last >= startN ? last : null;
+  }, [days, last, startN]);
+  const [focusState, setFocusState] = useState(null);
+  const focusDay = navigable(focusState) ? focusState : latestActive;
+  const [uncontrolledActive, setUncontrolledActive] = useState(defaultActiveDate ? dayNumber(defaultActiveDate) : null);
+  const active = activeDate !== void 0 ? activeDate ? dayNumber(activeDate) : null : uncontrolledActive;
+  const setActive = (n) => {
+    if (n === active) return;
+    if (activeDate === void 0) setUncontrolledActive(n);
+    onActiveDateChange?.(n == null ? null : isoDay(n));
+  };
+  const [dismissed, setDismissed] = useState(false);
+  const selectable = onSelectDate != null;
+  const [uncontrolledSelected, setUncontrolledSelected] = useState(null);
+  const selected = selectedDate !== void 0 ? selectedDate ? dayNumber(selectedDate) : null : uncontrolledSelected;
+  const select = (n) => {
+    if (selectedDate === void 0) setUncontrolledSelected(n);
+    onSelectDate?.(isoDay(n));
+  };
+  const tableRef = useRef(null);
+  const cellAt = (n) => tableRef.current?.querySelector(`[data-date="${isoDay(n)}"]`) ?? null;
+  const dayOf = (target) => {
+    const el = target?.closest?.("td[data-date]");
+    return el?.dataset.date ? dayNumber(el.dataset.date) : null;
+  };
+  const moveFrom = (n, event) => {
+    const { week, row } = gridPosition(grid, n);
+    const inRow = (w) => grid.weeks[w]?.days[row];
+    const inColumn = (r) => grid.weeks[week].days[r];
+    const firstOf = (items, pick) => {
+      for (const item of items) {
+        const d = pick(item);
+        if (navigable(d)) return d;
+      }
+      return null;
+    };
+    const weeks = grid.weeks.map((_, i) => i);
+    const rows = [0, 1, 2, 3, 4, 5, 6];
+    switch (event.key) {
+      case "ArrowUp":
+        return row > 0 ? n - 1 : null;
+      case "ArrowDown":
+        return row < 6 ? n + 1 : null;
+      case "ArrowLeft":
+        return n - 7;
+      case "ArrowRight":
+        return n + 7;
+      case "Home":
+        return event.ctrlKey || event.metaKey ? startN : firstOf(weeks, inRow);
+      case "End":
+        return event.ctrlKey || event.metaKey ? last : firstOf([...weeks].reverse(), inRow);
+      case "PageUp":
+        return firstOf(rows, inColumn);
+      case "PageDown":
+        return firstOf([...rows].reverse(), inColumn);
+      default:
+        return null;
+    }
+  };
+  const onKeyDown = (event) => {
+    const from = dayOf(event.target);
+    if (from == null) return;
+    if (event.key === "Escape") {
+      setDismissed(true);
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && selectable) {
+      event.preventDefault();
+      select(from);
+      return;
+    }
+    const handled = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key);
+    if (!handled) return;
+    event.preventDefault();
+    const next = moveFrom(from, event);
+    if (!navigable(next)) return;
+    setFocusState(next);
+    const el = cellAt(next);
+    el?.focus({ preventScroll: true });
+    el?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  };
+  const onFocus = (event) => {
+    const n = dayOf(event.target);
+    if (n == null) return;
+    setFocusState(n);
+    setDismissed(false);
+    setActive(n);
+  };
+  const onBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setActive(null);
+  };
+  const onPointerOver = (event) => {
+    const n = dayOf(event.target);
+    if (!navigable(n)) return;
+    setDismissed(false);
+    setActive(n);
+  };
+  const onPointerLeave = (event) => {
+    const focused = event.currentTarget.contains(document.activeElement) ? dayOf(document.activeElement) : null;
+    setActive(focused);
+  };
+  const bodyRef = useRef(null);
+  const [tip, setTip] = useState(null);
+  const showTip = tooltip !== false && !loading && !dismissed && navigable(active);
+  useIsomorphicLayoutEffect(() => {
+    if (!showTip || active == null) {
+      setTip(null);
+      return;
+    }
+    const place = () => {
+      const el = cellAt(active);
+      const host = bodyRef.current;
+      if (!el || !host) return setTip(null);
+      const c = el.getBoundingClientRect();
+      const h = host.getBoundingClientRect();
+      const x = c.left - h.left + c.width / 2;
+      setTip({ x, y: c.top - h.top, align: x < h.width * 0.2 ? "start" : x > h.width * 0.8 ? "end" : "center" });
+    };
+    place();
+    const region = scrollRef.current;
+    region?.addEventListener("scroll", place, { passive: true });
+    return () => region?.removeEventListener("scroll", place);
+  }, [showTip, active, cell]);
+  const tipDay = active != null && showTip ? resolve(active) : null;
+  const tipContent = tipDay == null ? null : typeof tooltip === "function" ? /* @__PURE__ */ jsx(ChartTooltipContent, { label: tooltip(tipDay), rows: [] }) : /* @__PURE__ */ jsx(
+    ChartTooltipContent,
+    {
+      label: words.short(dayNumber(tipDay.date)),
+      rows: [{ key: "value", label: tipDay.categoryLabel ?? words.unitTitle, value: tipDay.value > 0 ? words.number(tipDay.value) : "0", color: tipDay.color }]
+    }
+  );
+  const weeksCount = grid.weeks.length;
+  const showWeekday = (r) => weekdayLabels === "all" || weekdayLabels === "alternate" && SHOWN_WEEKDAYS.has((firstDay + r) % 7);
+  const vars = { "--heat-cell": `${cell}px`, "--heat-gap": `${gap}px` };
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref: figureRef,
+      "data-reveal": shown ? "in" : "out",
+      "data-motion": motionAttribute(motion),
+      className: cn("m-0 flex w-full min-w-0 flex-col gap-2", className),
+      style: { ...vars, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: "relative flex min-w-0 items-start", children: [
+          weekdayLabels !== "none" ? (
+            // Outside the scroller on purpose: labels that sat inside it, pinned
+            // over the cells, let the weeks slide under them on a phone.
+            /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex shrink-0 flex-col gap-(--heat-gap) pe-1 pt-[calc(var(--heat-gap)+--spacing(1))] text-caption text-muted-foreground", children: [
+              monthLabels ? /* @__PURE__ */ jsx("span", { className: "h-5" }) : null,
+              [0, 1, 2, 3, 4, 5, 6].map((r) => /* @__PURE__ */ jsx("span", { className: "flex h-(--heat-cell) items-center leading-none", children: showWeekday(r) ? words.dayShort((firstDay + r) % 7) : null }, r))
+            ] })
+          ) : null,
+          /* @__PURE__ */ jsx("div", { ref: areaRef, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(Scroller, { ref: scrollRef, orientation: "horizontal", tabIndex: -1, role: "presentation", "aria-label": void 0, children: /* @__PURE__ */ jsx("div", { className: "relative w-max p-1", children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              ref: tableRef,
+              role: "grid",
+              "aria-readonly": selectable ? void 0 : true,
+              "aria-busy": loading || void 0,
+              "aria-labelledby": `${uid}-caption`,
+              onKeyDown,
+              onFocus,
+              onBlur,
+              onPointerOver,
+              onPointerLeave,
+              onClick: (event) => {
+                const n = dayOf(event.target);
+                if (selectable && navigable(n)) select(n);
+              },
+              className: "border-separate border-spacing-(--heat-gap)",
+              children: [
+                /* @__PURE__ */ jsx("caption", { id: `${uid}-caption`, className: "sr-only", children: label }),
+                monthLabels ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { className: "sr-only" }),
+                  grid.months.map((m, i) => /* @__PURE__ */ jsxs(
+                    "th",
+                    {
+                      scope: "col",
+                      colSpan: m.span,
+                      className: "h-5 overflow-visible whitespace-nowrap p-0 text-start align-bottom text-caption text-muted-foreground",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: words.monthLong(m.day) }),
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: m.span >= 3 || i > 0 && m.span >= 2 ? words.monthShort(m.day) : null })
+                      ]
+                    },
+                    m.day
+                  ))
+                ] }) }) : null,
+                /* @__PURE__ */ jsx("tbody", { children: [0, 1, 2, 3, 4, 5, 6].map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { scope: "row", className: "sr-only", children: words.dayLong((firstDay + r) % 7) }),
+                  grid.weeks.map((week, w) => {
+                    const n = week.days[r];
+                    if (n == null) return /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: "p-0" }, w);
+                    if (n > last) {
+                      return /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: "size-(--heat-cell) rounded-xs border border-border-strong p-0" }, w);
+                    }
+                    const day = resolve(n);
+                    const isActive = n === active && showTip;
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        role: "gridcell",
+                        "data-date": day.date,
+                        "data-level": day.level,
+                        "data-active": isActive || void 0,
+                        tabIndex: n === focusDay ? 0 : -1,
+                        "aria-label": `${words.long(n)}: ${words.value(day.value)}${day.categoryLabel ? `, ${day.categoryLabel}` : ""}`,
+                        "aria-describedby": `${uid}-level-${day.level}`,
+                        "aria-selected": selectable ? n === selected : void 0,
+                        className: cn(
+                          "relative size-(--heat-cell) rounded-[min(var(--radius-xs),calc(var(--heat-cell)/4))] p-0 outline-offset-1 outline-ring",
+                          "focus-visible:outline-2 data-active:outline-2 aria-selected:outline-2 aria-selected:outline-foreground",
+                          "[[data-reveal=out]_&]:opacity-0",
+                          // Forced colours flatten every fill to one system colour, so the
+                          // level becomes the size of an inner square instead.
+                          "forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText] forced-colors:[clip-path:inset(var(--heat-inset))]",
+                          loading && "motion-shimmer"
+                        ),
+                        style: {
+                          backgroundColor: day.color,
+                          "--heat-inset": `${Math.round((levels - 1 - day.level) / Math.max(1, levels - 1) * 40)}%`,
+                          transition: `${riseTransition(stagger(Math.round(w * 24 / Math.max(1, weeksCount - 1))))}, background-color var(--motion-duration-base) var(--motion-ease-standard)`
+                        },
+                        children: renderCell ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: renderCell(day, { level: day.level, color: day.color, size: cell }) }) : null
+                      },
+                      w
+                    );
+                  })
+                ] }, r)) })
+              ]
+            }
+          ) }) }) }),
+          tip && tipContent ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute start-0 top-0 z-10 transition-transform duration-(--motion-duration-fast) ease-standard",
+              style: { transform: `translate(${Math.round(tip.x)}px, ${Math.round(tip.y)}px)` },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-max -translate-y-full pb-2",
+                    tip.align === "center" && "-translate-x-1/2",
+                    tip.align === "end" && "-translate-x-full"
+                  ),
+                  children: tipContent
+                }
+              )
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { hidden: true, children: names.map((name, k) => /* @__PURE__ */ jsx("span", { id: `${uid}-level-${k}`, children: name }, name)) }),
+        legend && categories ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            className: "justify-start",
+            items: categoryKeys.map((key, i) => ({ key, ...categoryStyle(categories, key, i) }))
+          }
+        ) : legend ? /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex items-center justify-end gap-1 text-caption text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "me-1", children: legendLabels[0] }),
+          names.map((name, k) => /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-[2px]", style: { backgroundColor: heatColor(base, k, levels) } }, name)),
+          /* @__PURE__ */ jsx("span", { className: "ms-1", children: legendLabels[1] })
+        ] }) : null
+      ]
+    }
+  );
+}
+ActivityHeatmap.displayName = "ActivityHeatmap";
+export {
+  ActivityHeatmap
+};