@sableui/react 0.11.0 → 0.13.0

package/dist/index.js

@@ -42,11 +42,14 @@ export * from "./layout/index.js";
 export * from "./icon/index.js";
 export * from "./motion/index.js";
 export * from "./components/button/index.js";
+export * from "./components/button-group/index.js";
 export * from "./components/card/index.js";
+export * from "./components/caret-menu/index.js";
 export * from "./components/badge/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/separator/index.js";
 export * from "./components/input/index.js";
+export * from "./components/input-group/index.js";
 export * from "./components/textarea/index.js";
 export * from "./components/number-field/index.js";
 export * from "./components/otp-field/index.js";
@@ -84,6 +87,8 @@ export * from "./components/radio/index.js";
 export * from "./components/select/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/menu/index.js";
+export * from "./components/navigation-menu/index.js";
+export * from "./components/menubar/index.js";
 export * from "./components/sheet/index.js";
 export * from "./components/table/index.js";
 export * from "./components/data-table/index.js";
@@ -161,9 +166,13 @@ import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier }
 import { PresentationProvider, usePresentation } from "./lib/presentation.js";
 import { useScrollActivity } from "./lib/use-scroll-activity.js";
 import { useCopy } from "./lib/use-copy.js";
+import { useSmoothWheel } from "./lib/use-smooth-wheel.js";
+import {
+  useCaretTrigger
+} 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.11.0";
+var SABLE_UI_VERSION = "0.13.0";
 export {
   ART_TOKENS,
   CHART_SERIES_COUNT,
@@ -214,10 +223,12 @@ export {
   themeManifestById,
   themeManifests,
   useAnchoredDensity,
+  useCaretTrigger,
   useCopy,
   useDensity,
   usePresentation,
   useSableTheme,
   useScrollActivity,
+  useSmoothWheel,
   useTypeTier
 };

package/dist/lib/palette.js

@@ -4,7 +4,9 @@ var PALETTE_FAMILIES = [
   { name: "red", hue: 25, light: { l: 0.6, c: 0.21 }, dark: { l: 0.64, c: 0.2 } },
   { name: "orange", hue: 50, light: { l: 0.69, c: 0.18 }, dark: { l: 0.71, c: 0.17 } },
   // Yellow is only yellow when it is light; at 0.6 it is olive.
-  { name: "yellow", hue: 92, light: { l: 0.83, c: 0.16 }, dark: { l: 0.82, c: 0.15 } },
+  // In dark mode it sits a little deeper, or 800–950 crowd into the room
+  // left between it and the ink.
+  { name: "yellow", hue: 92, light: { l: 0.83, c: 0.16 }, dark: { l: 0.78, c: 0.15 } },
   { name: "green", hue: 145, light: { l: 0.64, c: 0.17 }, dark: { l: 0.68, c: 0.16 } },
   { name: "teal", hue: 190, light: { l: 0.7, c: 0.12 }, dark: { l: 0.74, c: 0.12 } },
   { name: "blue", hue: 262, light: { l: 0.6, c: 0.19 }, dark: { l: 0.64, c: 0.17 } },
@@ -69,10 +71,15 @@ var NEUTRAL_MIX = {
   900: 90,
   950: 95
 };
-var TONE_CHROMA_CAP = {
-  light: { 50: 0.02, 100: 0.04, 200: 0.07, 300: 0.11 },
-  dark: { 50: 0.035, 100: 0.05, 200: 0.07, 300: 0.1 }
+var TONE_LADDER = {
+  light: { 50: 0.975, 100: 0.945, 200: 0.895, 300: 0.82, 400: 0.725, 500: 0.63, 600: 0.55, 700: 0.47, 800: 0.4, 900: 0.33, 950: 0.27 },
+  dark: { 50: 0.215, 100: 0.25, 200: 0.31, 300: 0.39, 400: 0.5, 500: 0.6, 600: 0.69, 700: 0.77, 800: 0.84, 900: 0.895, 950: 0.94 }
 };
+var TONE_CHROMA_ENDS = {
+  light: { page: 0.12, ink: 0.52 },
+  dark: { page: 0.25, ink: 0.3 }
+};
+var TONE_SNAP = 1e4;
 var LEAN = { amount: 0.5, cap: 15, fullAt: 0.06, maxHarmony: 2 };
 var LEAN_REACH = LEAN.cap * LEAN.maxHarmony;
 var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
@@ -85,6 +92,34 @@ function stepFrom(anchor, step, mode) {
   const curve = STEP_CURVES[mode][step];
   return { l: anchor.l + (curve.target - anchor.l) * curve.pull, c: anchor.c * curve.chroma };
 }
+function ladderDepth(l, mode) {
+  const top = TONE_LADDER[mode][50];
+  return mode === "light" ? top - l : l - top;
+}
+function toneAnchor(l, mode) {
+  const ladder = TONE_LADDER[mode];
+  let depth = 0;
+  for (let i = 1; i < PALETTE_STEPS.length; i++) {
+    const [before, at] = [ladder[PALETTE_STEPS[i - 1]], ladder[PALETTE_STEPS[i]]];
+    const mid = (before + at) / 2;
+    depth += Math.abs(at - before) * clamp((mode === "light" ? mid - l : l - mid) * TONE_SNAP, 0, 1);
+  }
+  return depth;
+}
+function toneStep(tone, step, mode) {
+  const end = ladderDepth(TONE_LADDER[mode][950], mode);
+  const at = ladderDepth(TONE_LADDER[mode][step], mode);
+  const anchor = toneAnchor(tone.l, mode);
+  const own = ladderDepth(tone.l, mode);
+  const pageSide = clamp((anchor - at) * TONE_SNAP, 0, 1);
+  const towardPage = at * own / Math.max(anchor, 1e-3);
+  const towardInk = own + (at - anchor) * (end - own) / Math.max(end - anchor, 1e-3);
+  const depth = pageSide * towardPage + (1 - pageSide) * towardInk;
+  const ends = TONE_CHROMA_ENDS[mode];
+  const share = pageSide * (1 - (1 - ends.page) * ((anchor - at) / Math.max(anchor, 1e-3))) + (1 - pageSide) * (1 - (1 - ends.ink) * ((at - anchor) / Math.max(end - anchor, 1e-3)));
+  const top = TONE_LADDER[mode][50];
+  return { l: mode === "light" ? top - depth : top + depth, c: tone.c * share, anchor: Math.abs(at - anchor) * TONE_SNAP < 1 };
+}
 export {
   LEAN,
   LEAN_REACH,
@@ -96,8 +131,13 @@ export {
   PALETTE_STEPS,
   PALETTE_TONES,
   STEP_CURVES,
-  TONE_CHROMA_CAP,
+  TONE_CHROMA_ENDS,
+  TONE_LADDER,
+  TONE_SNAP,
   familyHue,
   isPaletteColor,
-  stepFrom
+  ladderDepth,
+  stepFrom,
+  toneAnchor,
+  toneStep
 };

package/dist/lib/taxonomy.js

@@ -24,6 +24,8 @@ var COMPONENT_TAXONOMY = {
      options" pattern) — that its list opens in a layer is how it works, not
      what it is. Copying is `useCopy` on a Button, not a component. */
   Button: ["Actions", "either"],
+  ButtonGroup: ["Actions", "either"],
+  Menubar: ["Actions", "either"],
   OverflowMenu: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
   /* ── Forms ────────────────────────────────────────────────────────────────
@@ -38,6 +40,7 @@ var COMPONENT_TAXONOMY = {
   FileDropzone: ["Forms", "page"],
   Form: ["Forms", "either"],
   Input: ["Forms", "either"],
+  InputGroup: ["Forms", "either"],
   Label: ["Forms", "either"],
   NumberField: ["Forms", "either"],
   OtpField: ["Forms", "either"],
@@ -64,6 +67,7 @@ var COMPONENT_TAXONOMY = {
   Toggle: ["Selection", "either"],
   /* ── Overlays ─────────────────────────────────────────────────────────────
      Anything that renders above the page in its own layer. */
+  CaretMenu: ["Overlays", "either"],
   CommandMenu: ["Overlays", "either"],
   ContextCard: ["Overlays", "page"],
   ContextMenu: ["Overlays", "either"],
@@ -81,6 +85,7 @@ var COMPONENT_TAXONOMY = {
      stay together; `Tree` is the hierarchy browser. */
   Breadcrumbs: ["Navigation", "either"],
   BottomNav: ["Navigation", "page"],
+  NavigationMenu: ["Navigation", "page"],
   Pagination: ["Navigation", "either"],
   ShowMore: ["Navigation", "page"],
   SideNav: ["Navigation", "page"],

package/dist/lib/use-caret-trigger.js

@@ -0,0 +1,187 @@
+"use client";
+
+// src/lib/use-caret-trigger.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useCaretTrigger({ triggers }) {
+  const [field, setField] = useState(null);
+  const [match, setMatch] = useState(null);
+  const dismissedAt = useRef(null);
+  const composing = useRef(false);
+  const triggersRef = useRef(triggers);
+  triggersRef.current = triggers;
+  const evaluate = useCallback(() => {
+    if (!field || composing.current) return;
+    const next = field.ownerDocument.activeElement === field ? findMatch(field, triggersRef.current) : null;
+    if (!next || next.start !== dismissedAt.current) dismissedAt.current = null;
+    const visible = next && dismissedAt.current === null ? next : null;
+    setMatch((prev) => sameMatch(prev, visible) ? prev : visible);
+  }, [field]);
+  useEffect(() => {
+    if (!field) return;
+    const doc = field.ownerDocument;
+    const onSelection = () => {
+      if (doc.activeElement === field) evaluate();
+    };
+    const onCompositionStart = () => {
+      composing.current = true;
+    };
+    const onCompositionEnd = () => {
+      composing.current = false;
+      setTimeout(evaluate, 0);
+    };
+    const onBlur = () => {
+      dismissedAt.current = null;
+      setMatch(null);
+    };
+    const onInput = (event) => {
+      if (event.target === field) evaluate();
+    };
+    doc.addEventListener("input", onInput);
+    field.addEventListener("focus", evaluate);
+    field.addEventListener("click", evaluate);
+    field.addEventListener("keyup", evaluate);
+    field.addEventListener("compositionstart", onCompositionStart);
+    field.addEventListener("compositionend", onCompositionEnd);
+    field.addEventListener("blur", onBlur);
+    doc.addEventListener("selectionchange", onSelection);
+    return () => {
+      doc.removeEventListener("input", onInput);
+      field.removeEventListener("focus", evaluate);
+      field.removeEventListener("click", evaluate);
+      field.removeEventListener("keyup", evaluate);
+      field.removeEventListener("compositionstart", onCompositionStart);
+      field.removeEventListener("compositionend", onCompositionEnd);
+      field.removeEventListener("blur", onBlur);
+      doc.removeEventListener("selectionchange", onSelection);
+    };
+  }, [field, evaluate]);
+  const dismiss = useCallback(() => {
+    setMatch((current) => {
+      if (current) dismissedAt.current = current.start;
+      return null;
+    });
+  }, []);
+  const replace = useCallback(
+    (text) => {
+      if (!field || !match) return;
+      insertText(field, match.start, match.end, text);
+      dismissedAt.current = match.start;
+      evaluate();
+    },
+    [field, match, evaluate]
+  );
+  const getAnchorRect = useCallback(() => {
+    if (!field || !match) return null;
+    return caretRect(field, match.start);
+  }, [field, match]);
+  return { fieldRef: setField, field, match, getAnchorRect, replace, dismiss };
+}
+var BOUNDARY = /[\s([{"'“‘]/;
+function findMatch(field, triggers) {
+  const { value, selectionStart, selectionEnd } = field;
+  if (selectionStart === null || selectionStart !== selectionEnd) return null;
+  return matchAt(value, selectionStart, triggers);
+}
+function matchAt(value, caret, triggers) {
+  for (let i = caret - 1; i >= 0; i--) {
+    const ch = value[i];
+    if (ch === "\n") return null;
+    const trigger = triggers.find((t) => t.char === ch);
+    if (trigger && opens(value, i, caret, trigger)) {
+      return { trigger, query: value.slice(i + 1, caret), start: i, end: caret };
+    }
+  }
+  return null;
+}
+function opens(value, i, caret, trigger) {
+  const query = value.slice(i + 1, caret);
+  if (!trigger.allowSpaces && /\s/.test(query)) return false;
+  if (query.length > (trigger.maxQueryLength ?? 32)) return false;
+  if (/^\s/.test(query)) return false;
+  const before = i === 0 ? "" : value[i - 1];
+  if (before !== "" && !BOUNDARY.test(before)) return false;
+  if (trigger.atStart && value.slice(0, i).trim() !== "") return false;
+  return true;
+}
+function sameMatch(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.trigger === b.trigger && a.query === b.query && a.start === b.start && a.end === b.end;
+}
+function insertText(field, start, end, text) {
+  field.focus();
+  field.setSelectionRange(start, end);
+  const doc = field.ownerDocument;
+  const inserted = text === "" ? typeof doc.execCommand === "function" && doc.execCommand("delete", false) : typeof doc.execCommand === "function" && doc.execCommand("insertText", false, text);
+  if (!inserted || field.value.slice(start, start + text.length) !== text) {
+    const next = field.value.slice(0, start) + text + field.value.slice(end);
+    const proto = field instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(proto, "value")?.set?.call(field, next);
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  const caret = start + text.length;
+  field.setSelectionRange(caret, caret);
+}
+var MIRRORED = [
+  "boxSizing",
+  "width",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontFeatureSettings",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "textIndent",
+  "textTransform",
+  "tabSize",
+  "direction"
+];
+function caretRect(field, index) {
+  const doc = field.ownerDocument;
+  const view = doc.defaultView ?? window;
+  const style = view.getComputedStyle(field);
+  const mirror = doc.createElement("div");
+  const s = mirror.style;
+  for (const prop of MIRRORED) s[prop] = style[prop];
+  s.position = "absolute";
+  s.visibility = "hidden";
+  s.top = "0";
+  s.left = "-9999px";
+  s.overflow = "hidden";
+  const multiline = field instanceof HTMLTextAreaElement;
+  s.whiteSpace = multiline ? "pre-wrap" : "pre";
+  s.overflowWrap = multiline ? "break-word" : "normal";
+  mirror.textContent = field.value.slice(0, index);
+  const marker = doc.createElement("span");
+  marker.textContent = field.value.slice(index) || "\u200B";
+  mirror.appendChild(marker);
+  doc.body.appendChild(mirror);
+  const box = field.getBoundingClientRect();
+  const lineHeight = Number.parseFloat(style.lineHeight) || marker.offsetHeight;
+  const rect = new DOMRect(
+    box.left + marker.offsetLeft - field.scrollLeft,
+    box.top + marker.offsetTop - field.scrollTop,
+    1,
+    lineHeight
+  );
+  mirror.remove();
+  return rect;
+}
+export {
+  caretRect,
+  findMatch,
+  matchAt,
+  useCaretTrigger
+};

package/dist/lib/use-copy.js

@@ -11,7 +11,12 @@ function useCopy(text, { timeout = 1500 } = {}) {
   const copy = useCallback(async () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return false;
     try {
-      await navigator.clipboard.writeText(text);
+      const value = typeof text === "function" ? text() : text;
+      if (typeof value === "string") await navigator.clipboard.writeText(value);
+      else if (typeof ClipboardItem !== "undefined" && navigator.clipboard.write) {
+        const blob = value.then((t) => new Blob([t], { type: "text/plain" }));
+        await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+      } else await navigator.clipboard.writeText(await value);
     } catch {
       return false;
     }

package/dist/lib/use-smooth-wheel.js

@@ -0,0 +1,164 @@
+"use client";
+
+// src/lib/use-smooth-wheel.ts
+import { useCallback, useEffect, useRef } from "react";
+import { useMotion } from "../motion/MotionProvider.js";
+var LINE_HEIGHT = 16;
+var PAGE_HEIGHT = 400;
+function toPixels(delta, mode) {
+  if (mode === 1) return delta * LINE_HEIGHT;
+  if (mode === 2) return delta * PAGE_HEIGHT;
+  return delta;
+}
+function isNotch(event) {
+  if (event.deltaMode !== 0) return true;
+  const legacy = event.wheelDeltaY;
+  if (legacy) return event.deltaX === 0 && legacy % 120 === 0;
+  return event.deltaX === 0 && Number.isInteger(event.deltaY) && Math.abs(event.deltaY) >= 50;
+}
+function innerScrolls(target, region, deltaY) {
+  for (let el = target instanceof Element ? target : null; el && el !== region; el = el.parentElement) {
+    if (!(el instanceof HTMLElement) || el.scrollHeight <= el.clientHeight) continue;
+    const overflow = getComputedStyle(el).overflowY;
+    if (overflow !== "auto" && overflow !== "scroll") continue;
+    const max = el.scrollHeight - el.clientHeight;
+    if (deltaY < 0 ? Math.round(el.scrollTop) > 0 : Math.round(el.scrollTop) < max) return true;
+  }
+  return false;
+}
+function cssOwnsMotion(el) {
+  const style = getComputedStyle(el);
+  return style.scrollBehavior === "smooth" || style.scrollSnapType !== "" && style.scrollSnapType !== "none";
+}
+var EASE_PER_FRAME = 0.14;
+var FRAME_MS = 1e3 / 60;
+var SETTLE_PX = 0.5;
+function useSmoothWheel({
+  axis = "vertical",
+  mapVertical = true,
+  smooth = true
+} = {}) {
+  const { enabled: motion } = useMotion();
+  const settings = useRef({ axis, mapVertical, smooth: smooth && motion });
+  settings.current = { axis, mapVertical, smooth: smooth && motion };
+  const horizontal = axis === "horizontal";
+  const active = smooth && motion || horizontal && mapVertical;
+  const nodeRef = useRef(null);
+  const anim = useRef(null);
+  const stop = useCallback(() => {
+    if (anim.current) cancelAnimationFrame(anim.current.frame);
+    anim.current = null;
+  }, []);
+  const step = useCallback((now) => {
+    const el = nodeRef.current;
+    const a = anim.current;
+    if (!el || !a) return;
+    const key = settings.current.axis === "horizontal" ? "scrollLeft" : "scrollTop";
+    const dt = Math.min(64, now - a.last);
+    a.last = now;
+    a.pos += (a.target - a.pos) * (1 - (1 - EASE_PER_FRAME) ** (dt / FRAME_MS));
+    if (Math.abs(a.target - a.pos) < SETTLE_PX) a.pos = a.target;
+    el[key] = a.pos;
+    a.written = el[key];
+    if (a.pos === a.target) anim.current = null;
+    else a.frame = requestAnimationFrame(step);
+  }, []);
+  const onWheel = useCallback(
+    (event) => {
+      const el = nodeRef.current;
+      if (!el || event.ctrlKey) return;
+      const { axis: current, mapVertical: map, smooth: ease } = settings.current;
+      const sideways = current === "horizontal";
+      if (event.shiftKey) return;
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.deltaY === 0) return;
+      if (sideways && !map) return;
+      if (innerScrolls(event.target, el, event.deltaY)) return;
+      const notch = ease && isNotch(event) && !cssOwnsMotion(el);
+      if (!sideways && !notch) return;
+      const key = sideways ? "scrollLeft" : "scrollTop";
+      const max = sideways ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+      if (max <= 0) return;
+      const delta = toPixels(event.deltaY, event.deltaMode);
+      const from = notch && anim.current ? anim.current.target : el[key];
+      if (delta < 0 && Math.round(from) <= 0 || delta > 0 && Math.round(from) >= max) return;
+      event.preventDefault();
+      const target = Math.max(0, Math.min(max, from + delta));
+      if (!notch) {
+        stop();
+        el[key] = target;
+        return;
+      }
+      if (anim.current) {
+        anim.current.target = target;
+        return;
+      }
+      anim.current = {
+        target,
+        pos: el[key],
+        written: el[key],
+        last: performance.now(),
+        frame: requestAnimationFrame(step)
+      };
+    },
+    [step, stop]
+  );
+  const onScroll = useCallback(() => {
+    const el = nodeRef.current;
+    const a = anim.current;
+    if (!el || !a) return;
+    const key = settings.current.axis === "horizontal" ? "scrollLeft" : "scrollTop";
+    if (Math.abs(el[key] - a.written) > 1) stop();
+  }, [stop]);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const attached = useRef(null);
+  const sync = useCallback(() => {
+    const want = activeRef.current ? nodeRef.current : null;
+    if (attached.current === want) return;
+    const was = attached.current;
+    if (was) {
+      was.removeEventListener("wheel", onWheel);
+      was.removeEventListener("scroll", onScroll);
+      was.removeEventListener("pointerdown", stop);
+      stop();
+    }
+    attached.current = want;
+    if (want) {
+      want.addEventListener("wheel", onWheel, { passive: false });
+      want.addEventListener("scroll", onScroll, { passive: true });
+      want.addEventListener("pointerdown", stop, { passive: true });
+    }
+  }, [onWheel, onScroll, stop]);
+  useEffect(sync, [active, sync]);
+  return useCallback(
+    (node) => {
+      nodeRef.current = node;
+      sync();
+    },
+    [sync]
+  );
+}
+function scrollRegionKeyDown(event, orientation) {
+  const el = event.currentTarget;
+  const horizontal = orientation === "horizontal";
+  const page = horizontal ? el.clientWidth : el.clientHeight;
+  const step = Math.max(40, page * 0.2);
+  const back = horizontal ? "ArrowLeft" : "ArrowUp";
+  const forward = horizontal ? "ArrowRight" : "ArrowDown";
+  const axis = horizontal ? "scrollLeft" : "scrollTop";
+  const max = horizontal ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+  let next = null;
+  if (event.key === back) next = el[axis] - step;
+  else if (event.key === forward) next = el[axis] + step;
+  else if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = max;
+  else if (event.key === "PageUp") next = el[axis] - page;
+  else if (event.key === "PageDown") next = el[axis] + page;
+  if (next === null) return;
+  event.preventDefault();
+  el[axis] = Math.max(0, Math.min(max, next));
+}
+export {
+  scrollRegionKeyDown,
+  useSmoothWheel
+};