@sableui/react 0.17.0 → 0.19.0

package/dist/index.js

@@ -82,6 +82,10 @@ export * from "./components/pie-chart/index.js";
 export * from "./components/radar-chart/index.js";
 export * from "./components/radial-chart/index.js";
 export * from "./components/sparkline/index.js";
+export * from "./components/activity-heatmap/index.js";
+import { mergeActivity } from "./lib/chart/activity.js";
+import { activityGrid } from "./lib/chart/calendar.js";
+import { activityLevels } from "./lib/chart/heat.js";
 import {
   CHART_SERIES_COUNT,
   chartColor,
@@ -174,6 +178,12 @@ export * from "./components/marker/index.js";
 import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier } from "./lib/density.js";
 import { PresentationProvider, usePresentation } from "./lib/presentation.js";
 import { useScrollActivity } from "./lib/use-scroll-activity.js";
+import {
+  belowBreakpointQuery,
+  useBelowBreakpoint,
+  useMediaQuery,
+  VIEWPORT_BREAKPOINTS
+} from "./lib/use-media-query.js";
 import { useMatchHighlight } from "./lib/use-match-highlight.js";
 import { useCopy } from "./lib/use-copy.js";
 import { useSmoothWheel } from "./lib/use-smooth-wheel.js";
@@ -183,7 +193,7 @@ import {
 } from "./lib/use-caret-trigger.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.17.0";
+var SABLE_UI_VERSION = "0.19.0";
 export {
   APP_SHELL_TOKENS,
   ART_TOKENS,
@@ -219,9 +229,13 @@ export {
   TYPE_REFINEMENT_TOKENS,
   TYPE_SCALE_TOKENS,
   TYPE_UI_TOKENS,
+  VIEWPORT_BREAKPOINTS,
   WORKSPACE_SURFACE_TOKENS,
+  activityGrid,
+  activityLevels,
   applySableColorMode,
   applySableTheme,
+  belowBreakpointQuery,
   chartColor,
   toneColor as chartToneColor,
   componentGuidance,
@@ -232,16 +246,19 @@ export {
   getThemeManifest,
   isPaletteColor,
   isThemeId,
+  mergeActivity,
   switchMeta,
   themeIds,
   themeManifestById,
   themeManifests,
   useActiveSection,
   useAnchoredDensity,
+  useBelowBreakpoint,
   useCaretTrigger,
   useCopy,
   useDensity,
   useMatchHighlight,
+  useMediaQuery,
   usePresentation,
   useSableTheme,
   useScrollActivity,

package/dist/layout/AspectBox.js

@@ -8,14 +8,11 @@ function AspectBox({
   children,
   ...rest
 }) {
-  const mergedStyle = {
-    aspectRatio: String(ratio),
-    ...style
-  };
+  const mergedStyle = { "--sable-aspect": String(ratio), ...style };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("relative w-full overflow-hidden", className),
+      className: cn("relative aspect-(--sable-aspect) w-full overflow-hidden", className),
       style: mergedStyle,
       ...rest,
       children

package/dist/layout/Bleed.js

@@ -2,12 +2,16 @@
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 function Bleed({ className, style, children, ref, ...rest }) {
-  const mergedStyle = {
-    width: "100cqw",
-    marginInline: "calc(50% - 50cqw)",
-    ...style
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mx-[calc(50%_-_50cqw)] w-[100cqw]", className),
+      style,
+      ...rest,
+      children
+    }
+  );
 }
 Bleed.displayName = "Bleed";
 export {

package/dist/layout/Center.js

@@ -10,11 +10,19 @@ var NAMED_MAX = {
 function Center({ max, className, style, children, ref, ...rest }) {
   const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
   const mergedStyle = {
-    marginInline: "auto",
-    ...maxWidth ? { maxWidth } : null,
+    ...maxWidth ? { "--sable-center-max": maxWidth } : null,
     ...style
   };
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mx-auto w-full", maxWidth && "max-w-(--sable-center-max)", className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
 }
 export {
   Center

package/dist/layout/Columns.js

@@ -21,8 +21,8 @@ function Columns({
 }) {
   const resolvedGap = resolveGap(gap);
   const mergedStyle = {
-    rowGap: resolvedGap,
-    columnGap: cappedColumnGap(resolvedGap),
+    "--sable-columns-row-gap": resolvedGap,
+    "--sable-columns-column-gap": cappedColumnGap(resolvedGap),
     ...responsiveVars("--cols", count),
     ...style
   };
@@ -31,7 +31,10 @@ function Columns({
     {
       ref,
       "data-sable-grid-cols": true,
-      className: cn(className),
+      className: cn(
+        "grid gap-x-(--sable-columns-column-gap) gap-y-(--sable-columns-row-gap)",
+        className
+      ),
       style: mergedStyle,
       ...rest,
       children

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
       ]
     }
   );