@sableui/react 0.17.0 → 0.19.0

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 oklab, 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/cn.js

@@ -31,6 +31,7 @@ var dsTypographyTokens = [
   // not optional bookkeeping: an unrecognised `text-*` class lands in
   // tailwind-merge's COLOUR group, so `cn("text-ui-md", "text-primary-foreground")`
   // would drop the colour and render, for instance, white text on a white button.
+  "ui-title",
   "ui-md",
   "ui-sm",
   "ui-body",

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. */

package/dist/lib/use-media-query.js

@@ -0,0 +1,41 @@
+"use client";
+
+// src/lib/use-media-query.ts
+import { useCallback, useSyncExternalStore } from "react";
+var VIEWPORT_BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+function belowBreakpointQuery(breakpoint) {
+  return `(width < ${VIEWPORT_BREAKPOINTS[breakpoint]})`;
+}
+var hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+function useMediaQuery(query, { serverValue = false } = {}) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (!hasMatchMedia()) return () => {
+      };
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => hasMatchMedia() ? window.matchMedia(query).matches : serverValue,
+    () => serverValue
+  );
+}
+function useBelowBreakpoint(breakpoint = "lg", options) {
+  return useMediaQuery(belowBreakpointQuery(breakpoint), options);
+}
+export {
+  VIEWPORT_BREAKPOINTS,
+  belowBreakpointQuery,
+  useBelowBreakpoint,
+  useMediaQuery
+};

package/dist/{meta-DX5r5wQL.d.ts → meta-Dfm9AExe.d.ts}

@@ -143,6 +143,12 @@ interface PatternMeta {
     summary: string;
     /** When to reach for this shell — and when not to. */
     intent: string;
+    /**
+     * What a brief calls this kind of product ("issue tracker", "like Linear"),
+     * for `sable search`. A whole-app query should land on the shell, not on the
+     * one component whose keywords happen to share a word with it.
+     */
+    keywords?: string[];
     /** Canonical decisions the pattern encodes (region cap, rhythm, hierarchy). */
     notes?: string[];
     /** Accessibility notes. */

package/dist/patterns/dashboard-page.js

@@ -17,15 +17,15 @@ import {
   CardTitle
 } from "../components/card/index.js";
 import { DataTable } from "../components/data-table/index.js";
-import { OverflowMenu } from "../components/overflow-menu/index.js";
 import { Entity } from "../components/entity/index.js";
-import { MenuItem, MenuSeparator } from "../components/menu/index.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../components/menu/index.js";
 import { Meter } from "../components/meter/index.js";
 import { NotificationBadge } from "../components/notification-badge/index.js";
 import { PageHeader } from "../components/page-header/index.js";
 import { RelativeTime } from "../components/relative-time/index.js";
 import {
   Sidebar,
+  SidebarAccount,
   SidebarFooter,
   SidebarBrand,
   SidebarHeader,
@@ -126,21 +126,27 @@ function DashboardPage() {
           ),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
         ] }),
-        /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(
-          Entity,
-          {
-            className: "[--entity-py:0]",
-            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "" }),
-            title: "Ada Lovelace",
-            subtitle: "@ada",
-            action: /* @__PURE__ */ jsxs(OverflowMenu, { label: "Account", size: "icon-sm", children: [
-              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
-              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
-              /* @__PURE__ */ jsx(MenuSeparator, {}),
-              /* @__PURE__ */ jsx(MenuItem, { children: "Sign out" })
-            ] })
-          }
-        ) })
+        /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsxs(Menu, { children: [
+          /* @__PURE__ */ jsx(
+            MenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx(
+                SidebarAccount,
+                {
+                  avatar: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "xs", fallback: "AL", alt: "" }),
+                  label: "Ada Lovelace",
+                  detail: "@ada"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(MenuContent, { side: "top", align: "start", children: [
+            /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
+            /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
+            /* @__PURE__ */ jsx(MenuSeparator, {}),
+            /* @__PURE__ */ jsx(MenuItem, { children: "Sign out" })
+          ] })
+        ] }) })
       ] }),
       children: /* @__PURE__ */ jsxs(Page, { max: "wide", gap: 4, className: "py-6", children: [
         /* @__PURE__ */ jsx(

package/dist/patterns/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as PatternMeta } from '../meta-DX5r5wQL.js';
+import { P as PatternMeta } from '../meta-Dfm9AExe.js';
 
 declare function AuthPage(): react.JSX.Element;
 
@@ -33,4 +33,9 @@ declare function SettingsPage(): react.JSX.Element;
 
 declare const settingsPageMeta: PatternMeta;
 
-export { AuthPage, BrandLandingPage, ChatPanel, DashboardPage, FeedPage, LandingPage, ListDetailPage, SettingsPage, authPageMeta, brandLandingPageMeta, chatPanelMeta, dashboardPageMeta, feedPageMeta, landingPageMeta, listDetailPageMeta, settingsPageMeta };
+/** One icon-only action with a visible name on hover and focus. */
+declare function TrackerPage(): react.JSX.Element;
+
+declare const trackerPageMeta: PatternMeta;
+
+export { AuthPage, BrandLandingPage, ChatPanel, DashboardPage, FeedPage, LandingPage, ListDetailPage, SettingsPage, TrackerPage, authPageMeta, brandLandingPageMeta, chatPanelMeta, dashboardPageMeta, feedPageMeta, landingPageMeta, listDetailPageMeta, settingsPageMeta, trackerPageMeta };

package/dist/patterns/index.js

@@ -15,6 +15,8 @@ import { ListDetailPage } from "./list-detail-page.js";
 import { listDetailPageMeta } from "./list-detail-page.meta.js";
 import { SettingsPage } from "./settings-page.js";
 import { settingsPageMeta } from "./settings-page.meta.js";
+import { TrackerPage } from "./tracker-page.js";
+import { trackerPageMeta } from "./tracker-page.meta.js";
 export {
   AuthPage,
   BrandLandingPage,
@@ -24,6 +26,7 @@ export {
   LandingPage,
   ListDetailPage,
   SettingsPage,
+  TrackerPage,
   authPageMeta,
   brandLandingPageMeta,
   chatPanelMeta,
@@ -31,5 +34,6 @@ export {
   feedPageMeta,
   landingPageMeta,
   listDetailPageMeta,
-  settingsPageMeta
+  settingsPageMeta,
+  trackerPageMeta
 };