@sableui/react 0.17.0 → 0.18.0

package/dist/layout/Grid.js

@@ -21,15 +21,23 @@ function Grid({
 }) {
   if (minItemWidth) {
     const mergedStyle2 = {
-      display: "grid",
-      gridTemplateColumns: `repeat(${track === "fit" ? "auto-fit" : "auto-fill"}, minmax(min(${minItemWidth}, 100%), 1fr))`,
-      gap: resolveGap(gap),
+      "--sable-grid-gap": resolveGap(gap),
+      "--sable-grid-template": `repeat(${track === "fit" ? "auto-fit" : "auto-fill"}, minmax(min(${minItemWidth}, 100%), 1fr))`,
       ...style
     };
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle2, ...rest, children });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid grid-cols-(--sable-grid-template) gap-(--sable-grid-gap)", className),
+        style: mergedStyle2,
+        ...rest,
+        children
+      }
+    );
   }
   const mergedStyle = {
-    gap: resolveGap(gap),
+    "--sable-grid-gap": resolveGap(gap),
     ...responsiveVars("--cols", cols),
     ...style
   };
@@ -38,7 +46,7 @@ function Grid({
     {
       ref,
       "data-sable-grid-cols": true,
-      className: cn(className),
+      className: cn("grid gap-(--sable-grid-gap)", className),
       style: mergedStyle,
       ...rest,
       children

package/dist/layout/GridOverlay.js

@@ -10,18 +10,18 @@ function GridOverlay({
 }) {
   if (!show) return null;
   const style = {
-    position: "absolute",
-    inset: 0,
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-    gap,
-    paddingInline: inset ? "var(--page-inset)" : void 0
+    "--sable-overlay-cols": `repeat(${columns}, minmax(0, 1fr))`,
+    "--sable-overlay-gap": gap
   };
   return /* @__PURE__ */ jsx(
     "div",
     {
       "aria-hidden": true,
-      className: cn("pointer-events-none z-(--z-overlay)", className),
+      className: cn(
+        "pointer-events-none absolute inset-0 z-(--z-overlay) grid grid-cols-(--sable-overlay-cols) gap-(--sable-overlay-gap)",
+        inset && "px-(--page-inset)",
+        className
+      ),
       style,
       children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(
         "div",

package/dist/layout/Region.js

@@ -27,12 +27,27 @@ function Region({
   const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
   const safeEdges = safeArea === true ? ["top", "bottom"] : Array.isArray(safeArea) ? safeArea : [];
   const mergedStyle = {
-    ...maxWidth ? { maxWidth, marginInline: "auto" } : null,
-    ...!bleed && inset ? { paddingInline: "var(--page-inset)" } : null,
+    ...maxWidth ? { "--sable-region-max": maxWidth } : null,
     ...safeAreaInsets(safeEdges),
     ...style
   };
-  return /* @__PURE__ */ jsx(Comp, { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        "w-full",
+        // The cap class only with a cap: the variable inherits, so an uncapped
+        // Region inside a capped one would otherwise take its ancestor's width.
+        maxWidth && "mx-auto max-w-(--sable-region-max)",
+        !bleed && inset && "px-(--page-inset)",
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
 }
 export {
   Region

package/dist/layout/Row.js

@@ -2,18 +2,18 @@
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 var ALIGN = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
-  baseline: "baseline"
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
 };
 var JUSTIFY = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  between: "space-between",
-  around: "space-around"
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
 };
 function resolveGap(gap) {
   return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
@@ -29,16 +29,23 @@ function Row({
   ref,
   ...rest
 }) {
-  const mergedStyle = {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: ALIGN[align],
-    justifyContent: JUSTIFY[justify],
-    flexWrap: wrap ? "wrap" : "nowrap",
-    gap: resolveGap(gap),
-    ...style
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+  const mergedStyle = { "--sable-row-gap": resolveGap(gap), ...style };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-row gap-(--sable-row-gap)",
+        ALIGN[align],
+        JUSTIFY[justify],
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
 }
 export {
   Row

package/dist/layout/Spacer.js

@@ -1,8 +1,19 @@
 // src/layout/Spacer.tsx
+import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 function Spacer({ size = 1, axis = "vertical", grow, className }) {
-  const style = grow ? { flex: "1 1 0%" } : axis === "vertical" ? { height: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 } : { width: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 };
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className, style });
+  const style = grow ? void 0 : { "--sable-spacer": `calc(var(--rhythm-unit) * ${size})` };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        grow ? "flex-1" : axis === "vertical" ? "h-(--sable-spacer) shrink-0" : "w-(--sable-spacer) shrink-0",
+        className
+      ),
+      style
+    }
+  );
 }
 export {
   Spacer

package/dist/layout/SplitPane.js

@@ -39,7 +39,7 @@ function SplitPane({
       ref,
       "data-sable-split": true,
       "data-collapse": collapseBelow,
-      className: cn(className),
+      className: cn("grid", className),
       style: mergedStyle,
       ...rest,
       children: [

package/dist/layout/Stack.js

@@ -2,17 +2,17 @@
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 var ALIGN = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch"
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
 };
 var JUSTIFY = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  between: "space-between",
-  around: "space-around"
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
 };
 function resolveGap(gap) {
   return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
@@ -27,15 +27,22 @@ function Stack({
   ref,
   ...rest
 }) {
-  const mergedStyle = {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: ALIGN[align],
-    justifyContent: JUSTIFY[justify],
-    gap: resolveGap(gap),
-    ...style
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+  const mergedStyle = { "--sable-stack-gap": resolveGap(gap), ...style };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-(--sable-stack-gap)",
+        ALIGN[align],
+        JUSTIFY[justify],
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
 }
 export {
   Stack

package/dist/layout/index.d.ts

@@ -43,6 +43,11 @@ interface RegionProps extends ComponentPropsWithRef<"div"> {
  * The page region. Fluid-first: full width with a fluid page inset, NOT a
  * centered fixed-width container. Reach for `max` only when a specific region
  * (a reading column, a settings pane) genuinely needs a cap.
+ *
+ * The inset and the cap are classes (`px-(--page-inset)`, `mx-auto
+ * max-w-(--sable-region-max)`), never inline style, so a `className` utility
+ * overrides them at any breakpoint (`max-sm:px-0`, `hidden lg:block`). Only the
+ * `safeArea` padding stays inline: `env()` is already zero where it does not apply.
  */
 declare function Region({ as, inset, max, bleed, safeArea, className, style, children, ref, ...rest }: RegionProps): react.JSX.Element;
 
@@ -54,7 +59,13 @@ interface StackProps extends ComponentPropsWithRef<"div"> {
     align?: Align$1;
     justify?: Justify$1;
 }
-/** Vertical flow on the 8px rhythm. The default container for stacked content. */
+/**
+ * Vertical flow on the 8px rhythm. The default container for stacked content.
+ *
+ * Layout is carried by classes (`flex flex-col items-* justify-*`) and the gap
+ * by a CSS variable, so any utility in `className` overrides a prop, at any
+ * breakpoint: `max-lg:hidden`, `md:flex-row`, `md:gap-8`.
+ */
 declare function Stack({ gap, align, justify, className, style, children, ref, ...rest }: StackProps): react.JSX.Element;
 
 interface PageProps extends RegionProps {
@@ -127,6 +138,10 @@ interface GridProps extends ComponentPropsWithRef<"div"> {
  * `cols` breakpoint map (fewer columns on small screens), or `minItemWidth`
  * cells that breathe with no breakpoints at all (`track` decides whether a
  * sparse row keeps its empty columns or stretches its items across them).
+ *
+ * `display` is the `grid` class and the gap a CSS variable, never inline
+ * style, so a `className` utility overrides either at any breakpoint
+ * (`hidden md:grid`, `md:gap-6`, `lg:grid-cols-3`).
  */
 declare function Grid({ cols, minItemWidth, track, gap, className, style, children, ref, ...rest }: GridProps): react.JSX.Element;
 
@@ -155,6 +170,11 @@ interface ColProps extends ComponentPropsWithRef<"div"> {
  * the track itself can thin out on small screens (e.g. 2 → 6 → 12). Pair with
  * `Col` for spans. The track template resolves through the `[data-sable-grid-cols]`
  * rules in `styles.css`, mobile-first.
+ *
+ * `display` is the `grid` class and the gaps are CSS variables, never inline
+ * style, so a `className` utility overrides them at any breakpoint
+ * (`hidden md:grid`, `md:gap-x-8`). A bare `gap-*` utility replaces both gaps
+ * and with them the column-gap cap, so prefer the `gap` prop unless you mean it.
  */
 declare function Columns({ count, gap, className, style, children, ref, ...rest }: ColumnsProps): react.JSX.Element;
 /**
@@ -178,7 +198,13 @@ interface RowProps extends ComponentPropsWithRef<"div"> {
     justify?: Justify;
     wrap?: boolean;
 }
-/** Horizontal flow. Inline rows of controls, toolbars, action clusters. */
+/**
+ * Horizontal flow. Inline rows of controls, toolbars, action clusters.
+ *
+ * Layout is carried by classes (`flex flex-row items-* justify-*`) and the gap
+ * by a CSS variable, so any utility in `className` overrides a prop, at any
+ * breakpoint: `hidden md:flex`, `max-md:flex-col`, `md:gap-6`.
+ */
 declare function Row({ gap, align, justify, wrap, className, style, children, ref, ...rest }: RowProps): react.JSX.Element;
 
 interface SpacerProps {
@@ -190,21 +216,37 @@ interface SpacerProps {
     grow?: boolean;
     className?: string;
 }
-/** Explicit space on the rhythm, or a flexible `grow` pusher between siblings. */
+/**
+ * Explicit space on the rhythm, or a flexible `grow` pusher between siblings.
+ *
+ * The size is a class reading a CSS variable, never inline style, so a
+ * `className` utility resizes or hides it at a breakpoint (`md:h-16`, `max-sm:hidden`).
+ */
 declare function Spacer({ size, axis, grow, className }: SpacerProps): react.JSX.Element;
 
 interface CenterProps extends ComponentPropsWithRef<"div"> {
     /** Cap width: a named region ("prose" | "feed" | "wide" | "ultrawide") or any raw CSS length. */
     max?: string;
 }
-/** Horizontally center a block, optionally capping its width (commonly "prose"). */
+/**
+ * Horizontally center a block, optionally capping its width (commonly "prose").
+ *
+ * The centering and the cap are classes (`mx-auto`, `max-w-(--sable-center-max)`),
+ * never inline style, so a `className` utility overrides them at any breakpoint.
+ */
 declare function Center({ max, className, style, children, ref, ...rest }: CenterProps): react.JSX.Element;
 
 interface AspectBoxProps extends HTMLAttributes<HTMLDivElement> {
     /** Width / height ratio. Default 16/9. Reserves space so late media never shifts layout. */
     ratio?: number;
 }
-/** Reserves grid space via aspect-ratio — async/media content loads without layout shift. */
+/**
+ * Reserves grid space via aspect-ratio — async/media content loads without layout shift.
+ *
+ * The ratio is a class reading a CSS variable (`aspect-(--sable-aspect)`), never
+ * inline style, so a `className` utility reshapes it at a breakpoint
+ * (`md:aspect-video`).
+ */
 declare function AspectBox({ ratio, className, style, children, ...rest }: AspectBoxProps): react.JSX.Element;
 
 interface BleedProps extends ComponentPropsWithRef<"div"> {
@@ -222,6 +264,10 @@ interface BleedProps extends ComponentPropsWithRef<"div"> {
  * full-bleed app, or `Bleed` used standalone) `cqw` resolves against the viewport,
  * so behavior is unchanged there. Nest a `Region` / `Center` inside to re-inset.
  *
+ * The width and margins are classes, never inline style, so a breakpoint can
+ * turn the bleed off: `<Bleed className="lg:mx-0 lg:w-auto">` runs edge to edge
+ * on a phone and sits inside the column on a desktop.
+ *
  *   <Region max="feed">
  *     <Bleed><ProfileCover /></Bleed>
  *     …
@@ -258,7 +304,9 @@ interface SplitPaneProps extends Omit<ComponentPropsWithRef<"div">, "children">
  * hand-building a desktop two-column layout plus a separate mobile stack.
  *
  * The breakpoint switch + ratio resolve through the `[data-sable-split]` rules in
- * `styles.css` (inline CSS custom properties), so any `ratio` works.
+ * `styles.css` (inline CSS custom properties), so any `ratio` works. `display`
+ * is the `grid` class and those rules sit in `@layer components`, so a
+ * `className` utility (`hidden lg:grid`, `gap-8`) overrides them.
  *
  * `collapseBelow` is **viewport-relative**, not container-relative: it asks how
  * wide the window is, not how wide this SplitPane is. Dropped inside a narrow
@@ -296,6 +344,9 @@ interface GridOverlayProps {
 /**
  * Dev/docs structure visualizer — overlays the column grid so the layout's
  * skeleton is legible. Place inside a `position: relative` container.
+ *
+ * Positioning, `display` and the inset are classes, never inline style, so a
+ * `className` utility overrides them (`max-md:hidden` to draw it on desktop only).
  */
 declare function GridOverlay({ columns, gap, inset, show, className, }: GridOverlayProps): react.JSX.Element | null;
 

package/dist/lib/chart/activity.js

@@ -0,0 +1,32 @@
+// src/lib/chart/activity.ts
+import { dayNumber } from "./calendar.js";
+function normalizeActivity(data) {
+  const days = /* @__PURE__ */ new Map();
+  const list = Array.isArray(data) ? data : Object.entries(data).map(([date, value]) => ({ date, value }));
+  for (const d of list) {
+    const n = dayNumber(d.date);
+    const prev = days.get(n);
+    const value = (prev?.value ?? 0) + (Number.isFinite(d.value) ? d.value : 0);
+    const level = d.level == null ? prev?.level : Math.max(d.level, prev?.level ?? 0);
+    days.set(n, { value, level, category: d.category ?? prev?.category });
+  }
+  return days;
+}
+function mergeActivity(sources, { both = "both" } = {}) {
+  const merged = /* @__PURE__ */ new Map();
+  for (const [key, data] of Object.entries(sources)) {
+    const list = Array.isArray(data) ? data : Object.entries(data).map(([date, value]) => ({ date, value }));
+    for (const d of list) {
+      if (!(d.value > 0)) continue;
+      const entry = merged.get(d.date) ?? { value: 0, keys: /* @__PURE__ */ new Set() };
+      entry.value += d.value;
+      entry.keys.add(key);
+      merged.set(d.date, entry);
+    }
+  }
+  return [...merged.entries()].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([date, { value, keys }]) => ({ date, value, category: keys.size > 1 ? both : [...keys][0] }));
+}
+export {
+  mergeActivity,
+  normalizeActivity
+};

package/dist/lib/chart/calendar.js

@@ -0,0 +1,67 @@
+// src/lib/chart/calendar.ts
+var DAY_MS = 864e5;
+var ISO = /^(\d{4})-(\d{2})-(\d{2})$/;
+function dayNumber(iso) {
+  const m = ISO.exec(iso);
+  if (!m) throw new Error(`Expected a YYYY-MM-DD date, got "${iso}"`);
+  return Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])) / DAY_MS;
+}
+function isoDay(n) {
+  return new Date(n * DAY_MS).toISOString().slice(0, 10);
+}
+function weekday(n) {
+  return ((n + 4) % 7 + 7) % 7;
+}
+function dayOfMonth(n) {
+  return new Date(n * DAY_MS).getUTCDate();
+}
+function utcDate(n) {
+  return new Date(n * DAY_MS);
+}
+function today() {
+  const d = /* @__PURE__ */ new Date();
+  return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / DAY_MS;
+}
+function localeWeekStart(locale) {
+  try {
+    const tag = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+    const first = tag.getWeekInfo?.().firstDay ?? tag.weekInfo?.firstDay;
+    return first === 1 ? 1 : 0;
+  } catch {
+    return 0;
+  }
+}
+function activityGrid({ start, end, weekStart }) {
+  const origin = start - (weekday(start) - weekStart + 7) % 7;
+  const weeks = [];
+  for (let col = origin; col <= end; col += 7) {
+    const days = [];
+    for (let r = 0; r < 7; r++) {
+      const n = col + r;
+      days.push(n >= start && n <= end ? n : null);
+    }
+    weeks.push({ days });
+  }
+  const starts = [{ day: start, week: 0 }];
+  weeks.forEach((w, i) => {
+    const first = w.days.find((n) => n != null && dayOfMonth(n) === 1);
+    if (first != null && first !== start) starts.push({ day: first, week: i });
+  });
+  const months = starts.map((s, i) => ({ ...s, span: (starts[i + 1]?.week ?? weeks.length) - s.week }));
+  return { start, end, weekStart, origin, weeks, months: months.filter((m) => m.span > 0) };
+}
+function gridPosition(grid, n) {
+  const offset = n - grid.origin;
+  return { week: Math.floor(offset / 7), row: offset % 7 };
+}
+export {
+  activityGrid,
+  dayNumber,
+  dayOfMonth,
+  gridPosition,
+  isoDay,
+  localeWeekStart,
+  today,
+  utcDate,
+  weekday
+};

package/dist/lib/chart/chart-tooltip.js

@@ -18,7 +18,7 @@ function ChartTooltipContent({
       ),
       children: [
         label != null ? /* @__PURE__ */ jsx("div", { className: "text-label-sm", children: label }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        rows.length || total != null ? /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
           rows.map((row) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", indicator === "line" || indicator === "dashed" ? "items-stretch" : ""), children: [
             row.icon ? /* @__PURE__ */ jsx(Icon, { name: row.icon, className: "shrink-0 text-muted-foreground" }) : indicator === "dot" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[2px]", style: { background: row.color } }) : indicator === "line" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1 shrink-0 rounded-full", style: { background: row.color } }) : indicator === "dashed" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-0 shrink-0 border-[1.5px] border-dashed", style: { borderColor: row.color } }) : null,
             /* @__PURE__ */ jsx("span", { className: "flex-1 text-muted-foreground", children: row.label }),
@@ -28,7 +28,7 @@ function ChartTooltipContent({
             /* @__PURE__ */ jsx("span", { className: "flex-1 text-label-sm", children: "Total" }),
             /* @__PURE__ */ jsx("span", { className: "ms-3 font-mono tabular-nums text-foreground", children: total })
           ] }) : null
-        ] })
+        ] }) : null
       ]
     }
   );

package/dist/lib/chart/heat.js

@@ -0,0 +1,55 @@
+// src/lib/chart/heat.ts
+function quantile(sorted, p) {
+  if (!sorted.length) return 0;
+  const i = (sorted.length - 1) * p;
+  const lo = Math.floor(i);
+  const hi = Math.ceil(i);
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (i - lo);
+}
+function activityLevels(values, { levels = 5, scale = "quantile" } = {}) {
+  const steps = Math.max(2, Math.round(levels));
+  const top = steps - 1;
+  const positive = values.filter((v) => v > 0).sort((a, b) => a - b);
+  const stats = { min: positive[0] ?? 0, max: positive.at(-1) ?? 0, levels: steps };
+  const clamp = (l) => Math.min(top, Math.max(0, Math.round(l)));
+  if (typeof scale === "function") {
+    return { thresholds: [], level: (v) => v > 0 ? Math.max(1, clamp(scale(v, stats))) : 0 };
+  }
+  let thresholds;
+  if (Array.isArray(scale)) {
+    thresholds = scale.slice(0, top);
+  } else if (scale === "linear") {
+    thresholds = Array.from({ length: top }, (_, k) => k === 0 ? Number.MIN_VALUE : stats.max * k / top);
+  } else {
+    thresholds = Array.from({ length: top }, (_, k) => quantile(positive, k / top));
+  }
+  return {
+    thresholds,
+    level: (v) => {
+      if (!(v > 0)) return 0;
+      let l = 1;
+      for (let k = 1; k < thresholds.length; k++) if (v >= thresholds[k]) l = k + 1;
+      return l;
+    }
+  };
+}
+var HEAT_EMPTY = "color-mix(in oklch, var(--foreground) 8%, transparent)";
+function heatColor(base, level, levels) {
+  if (level <= 0) return HEAT_EMPTY;
+  const top = Math.max(1, levels - 1);
+  if (level >= top) return base;
+  const share = Math.round(35 + 65 * (level - 1) / (top - 1));
+  return `color-mix(in oklch, ${base} ${share}%, ${HEAT_EMPTY})`;
+}
+function levelNames(levels) {
+  if (levels === 5) return ["None", "Low", "Medium-low", "Medium-high", "High"];
+  if (levels === 2) return ["None", "Some"];
+  if (levels === 3) return ["None", "Low", "High"];
+  return Array.from({ length: levels }, (_, k) => k === 0 ? "None" : `Level ${k} of ${levels - 1}`);
+}
+export {
+  HEAT_EMPTY,
+  activityLevels,
+  heatColor,
+  levelNames
+};

package/dist/lib/focus-return.js

@@ -0,0 +1,53 @@
+// src/lib/focus-return.tsx
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+var FocusReturnContext = createContext(null);
+function focusedElement() {
+  if (typeof document === "undefined") return null;
+  let element = document.activeElement;
+  while (element?.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+  return element instanceof HTMLElement && element !== document.body ? element : null;
+}
+function useFocusReturn(open, onOpenChange) {
+  const [opener, setOpener] = useState(null);
+  const popupRef = useRef(null);
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== void 0 && open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setOpener(focusedElement());
+  }
+  const handleOpenChange = useCallback(
+    (next, ...rest) => {
+      if (next && open === void 0) setOpener(focusedElement());
+      onOpenChange?.(next, ...rest);
+    },
+    [open, onOpenChange]
+  );
+  const value = useMemo(
+    () => ({
+      popupRef(node) {
+        popupRef.current = node;
+      },
+      // Base UI reads finalFocus when the popup closes, from the latest props,
+      // so a new function per opener is picked up.
+      finalFocus() {
+        const target = opener;
+        if (!target?.isConnected) return true;
+        const active = focusedElement();
+        const popup = popupRef.current;
+        if (active && active !== target && popup && !popup.contains(active)) return false;
+        return target;
+      }
+    }),
+    [opener]
+  );
+  return { onOpenChange: handleOpenChange, focusReturn: value };
+}
+var FocusReturnProvider = FocusReturnContext.Provider;
+function useFocusReturnDefault() {
+  return useContext(FocusReturnContext);
+}
+export {
+  FocusReturnProvider,
+  useFocusReturn,
+  useFocusReturnDefault
+};

package/dist/lib/taxonomy.js

@@ -131,6 +131,7 @@ var COMPONENT_TAXONOMY = {
   RadarChart: ["Charts", "page"],
   RadialChart: ["Charts", "page"],
   Sparkline: ["Charts", "either"],
+  ActivityHeatmap: ["Charts", "either"],
   /* ── Data display ─────────────────────────────────────────────────────────
      Showing records and readings. `Meter` (bar or ring) is here: it shows a
      value within a known range (a reading), which is not loading or progress. */