@sableui/react 0.4.0 → 0.6.0

package/dist/{chunk-FBSL2LZQ.js → chunk-EDXLM7YL.js}

@@ -1,8 +1,8 @@
-import { FIELD_SHELL, FIELD_INVALID, useMotion, useTypeTier, useScrollActivity, setRef, useAnchoredDensity, Dialog, DialogContent, DialogTitle, DialogDescription, useIsomorphicLayoutEffect } from './chunk-CCUDFLU3.js';
+import { FIELD_SHELL, FIELD_INVALID, useMotion, useTypeTier, useScrollActivity, setRef, useEdgeFade, useAnchoredDensity, Dialog, DialogContent, DialogTitle, DialogDescription, useIsomorphicLayoutEffect } from './chunk-7QSDYBXO.js';
 import { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
 import * as OtpParts from '@base-ui/react/otp-field';
-import { createContext, Fragment, useRef, useState, useId, useEffect, Children, isValidElement, useContext, useCallback, useLayoutEffect, useSyncExternalStore, useMemo } from 'react';
+import { createContext, Fragment, useRef, useState, useId, useEffect, Children, isValidElement, useContext, useCallback, useSyncExternalStore, useMemo } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { cva } from 'class-variance-authority';
@@ -2652,8 +2652,9 @@ function Sparkline({ data, label, variant = "line", tone = "primary", animate =
   const [ref, inView] = useArrival();
   const shown = !animate || !enabled || inView;
   const color = toneColor(tone);
-  const lo = Math.min(0, ...data);
-  const hi = Math.max(...data, lo + 1);
+  const min = data.length ? Math.min(...data) : 0;
+  const max = data.length ? Math.max(...data) : 1;
+  const [lo, hi] = variant === "bar" ? [Math.min(0, min), Math.max(max, Math.min(0, min) + 1)] : min === max ? [min - 1, max + 1] : [min, max];
   const y = (v) => H - 2 - (v - lo) / (hi - lo) * (H - 4);
   const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
   const summary = data.length ? `${label}: from ${nf.format(data[0])} to ${nf.format(data[data.length - 1])}, low ${nf.format(Math.min(...data))}, high ${nf.format(Math.max(...data))}` : label;
@@ -3775,7 +3776,7 @@ function SliderThumb({ className, children, ...props }) {
           {
             "aria-hidden": true,
             className: cn(
-              "pointer-events-none absolute inset-0 rounded-full border-2 border-primary bg-background shadow-sm",
+              "pointer-events-none absolute inset-0 rounded-full border-2 border-primary bg-background shadow-(--knob-shadow)",
               // The only thing that resizes. Scale (not width/height) so the box
               // metrics — and the row height around them — never move.
               "scale-75 motion-interactive ease-spring",
@@ -4225,35 +4226,15 @@ function Scroller({
     },
     [onKeyDown, orientation]
   );
-  const [showStart, setShowStart] = useState(false);
-  const [showEnd, setShowEnd] = useState(false);
-  const sync = useCallback(
-    (el) => {
-      if (orientation === "horizontal") {
-        const { scrollLeft, scrollWidth, clientWidth } = el;
-        setShowStart(scrollLeft > 0);
-        setShowEnd(scrollLeft < scrollWidth - clientWidth - 1);
-      } else {
-        const { scrollTop, scrollHeight, clientHeight } = el;
-        setShowStart(scrollTop > 0);
-        setShowEnd(scrollTop < scrollHeight - clientHeight - 1);
-      }
-    },
-    [orientation]
-  );
-  useLayoutEffect(() => {
-    if (regionRef.current) sync(regionRef.current);
-  }, [sync]);
+  const { sync: syncFade, style: fadeStyle } = useEdgeFade(regionRef, orientation);
   const handleScroll = useCallback(
     (event) => {
-      sync(event.currentTarget);
+      syncFade();
       onScroll?.(event);
     },
-    [sync, onScroll]
+    [syncFade, onScroll]
   );
   const isVertical = orientation === "vertical";
-  const fade = "calc(var(--spacing) * 7)";
-  const mask = showStart || showEnd ? `linear-gradient(to ${isVertical ? "bottom" : "right"}, ${showStart ? "transparent" : "#000"}, #000 ${showStart ? fade : "0"}, #000 ${showEnd ? `calc(100% - ${fade})` : "100%"}, ${showEnd ? "transparent" : "#000"})` : void 0;
   return (
     // The chrome box. Carries the consumer's border/background/radius and the
     // sizing, and is NOT masked — which is the entire point of the split. A
@@ -4269,7 +4250,7 @@ function Scroller({
         role: "group",
         "aria-label": label,
         "data-orientation": orientation,
-        style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0,
+        style: fadeStyle,
         className: cn(
           // Fill the chrome box without a percentage height. `min-h-0` /
           // `min-w-0` because a flex item's default `min-size: auto` refuses to

package/dist/chunk-FKZXAFIY.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+// src/lib/presentation.tsx
+var PresentationContext = createContext("page");
+var PresentationProvider = PresentationContext.Provider;
+function usePresentation() {
+  return useContext(PresentationContext);
+}
+var CardDepthContext = createContext(0);
+var StackedActionsContext = createContext(false);
+
+export { CardDepthContext, PresentationProvider, StackedActionsContext, usePresentation };

package/dist/{chunk-OQACYT2D.js → chunk-NETUFI34.js}

@@ -54,6 +54,16 @@ var SEMANTIC_TOKENS = [
   "tone-info-foreground",
   "tone-warning-foreground",
   "highlight-foreground",
+  // Status text — a status colour drawn ON a surface: text, icons, borders,
+  // rings. Separate from the fill because the two want different lightness in
+  // dark mode: a solid fill sits low enough for a white label, while text and
+  // marks must stay light enough to read on a dark card. `text-destructive`,
+  // `border-destructive` and `ring-destructive` read these through Tailwind's
+  // per-property colour namespaces (styles.css); only `bg-*` reads the fill.
+  "destructive-text",
+  "success-text",
+  "tone-warning-text",
+  "tone-info-text",
   // Overlay — a fixed, theme-independent dark surface for things that sit OVER
   // content rather than on a theme surface: modal/sheet scrims, media letterbox,
   // pills on imagery. `overlay-foreground` is its always-legible light ink.
@@ -278,6 +288,18 @@ var WORKSPACE_SURFACE_TOKENS = [
   "hairline",
   "hairline-strong"
 ];
+var ART_TOKENS = [
+  "art-1",
+  "art-2",
+  "art-3",
+  "art-4",
+  "art-5",
+  "art-6",
+  "art-ground",
+  "art-warp",
+  "art-softness",
+  "art-grain"
+];
 var DERIVED_EDGE_TOKENS = ["border-floating"];
 var TYPE_UI_TOKENS = [
   "type-ui-md-size",
@@ -290,4 +312,4 @@ var TYPE_UI_TOKENS = [
   "type-ui-micro-weight"
 ];
 
-export { DENSITY_TOKENS, DERIVED_EDGE_TOKENS, LAYERING_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS };
+export { ART_TOKENS, DENSITY_TOKENS, DERIVED_EDGE_TOKENS, LAYERING_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS };

package/dist/{chunk-NGBDP3BM.js → chunk-QJ6FWTUG.js}

@@ -1,4 +1,4 @@
-import { reiconIconSet } from './chunk-TH563WLW.js';
+import { reiconIconSet } from './chunk-XAZGMY73.js';
 import { createContext, useMemo, useContext } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-D2ETQBHV.js → chunk-VVW4UCDI.js}

@@ -1,6 +1,6 @@
-import { useMotion, useIsomorphicLayoutEffect, mergeRefs, trimLabel, useTypeTier, buttonVariants, Input, Table, TableCaption, TableHeader, TableRow, TableHead, Button, TableBody, TableCell, Card, SimpleTooltip, useDensity, FIELD_SHELL, FIELD_INVALID, MOBILE_FIELD_TIER, Tooltip, TooltipTrigger, TooltipContent, useScrollActivity, setRef, Textarea, Menu, MenuTrigger, MenuContent, MenuSubmenu, MenuSubmenuTrigger, Separator } from './chunk-CCUDFLU3.js';
+import { useMotion, useIsomorphicLayoutEffect, mergeRefs, trimLabel, useTypeTier, buttonVariants, Input, Table, TableCaption, TableHeader, TableRow, TableHead, Button, TableBody, TableCell, Card, SimpleTooltip, useDensity, FIELD_SHELL, FIELD_INVALID, MOBILE_FIELD_TIER, Tooltip, TooltipTrigger, TooltipContent, useScrollActivity, setRef, Textarea, Menu, MenuTrigger, MenuContent, MenuSubmenu, MenuSubmenuTrigger, Separator } from './chunk-7QSDYBXO.js';
 import { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
 import { createContext, useRef, useState, useEffect, isValidElement, cloneElement, useContext, useMemo, useCallback, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { flushSync } from 'react-dom';
@@ -286,8 +286,8 @@ function TabsTrigger({ className, children, ...props }) {
         variant === "underline" ? (
           // On the control ladder like the pill variant (it was py-2 plus
           // the label's line, ~36px — no rung).
-          "-mb-px inline-flex h-(--control-md) items-center border-b-2 border-transparent px-3 data-[active]:border-foreground"
-        ) : "inline-flex h-(--control-sm) items-center rounded-sm px-3 data-[active]:bg-muted",
+          "-mb-px inline-flex h-(--control-md) items-center gap-(--control-gap) border-b-2 border-transparent px-3 data-[active]:border-foreground"
+        ) : "inline-flex h-(--control-sm) items-center gap-(--control-gap) rounded-[var(--button-radius,9999px)] px-3 data-[active]:bg-muted",
         className
       ),
       ...props,
@@ -385,7 +385,7 @@ var tabsMeta = {
     {
       name: "TabsList",
       type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
-      description: 'The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant.'
+      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant.`
     },
     {
       name: "TabsTrigger",

package/dist/{chunk-TH563WLW.js → chunk-XAZGMY73.js}

@@ -69,6 +69,7 @@ import { Send } from 'reicon-react/icons/Send';
 import { Star } from 'reicon-react/icons/Star';
 import { Trash } from 'reicon-react/icons/Trash';
 import { Upload } from 'reicon-react/icons/Upload';
+import { memo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/icon-sets/reicon.tsx
@@ -165,16 +166,22 @@ var reiconIconSet = ({
   if (!Glyph) return null;
   const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
   return /* @__PURE__ */ jsx(
-    Glyph,
+    ReiconGlyph,
     {
-      size: "1em",
+      glyph: Glyph,
       weight: WEIGHTS[variant] ?? "Outline",
       className: spin ? `motion-spin ${className ?? ""}` : className,
-      style: { color: void 0 },
       ...a11y
     }
   );
 };
+var NO_INLINE_COLOR = { color: void 0 };
+var ReiconGlyph = memo(function ReiconGlyph2({
+  glyph: Glyph,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Glyph, { size: "1em", style: NO_INLINE_COLOR, ...props });
+});
 var reiconIconNames = Object.keys(ICONS);
 
 export { reiconIconNames, reiconIconSet };

package/dist/foundations/index.js

@@ -63,6 +63,12 @@ var accessibility = {
       why: "A faded ring loses the contrast the theme tested.",
       enforcedBy: "sable-lint: faded-focus-ring"
     },
+    {
+      never: "A brand or status fill retuned under its old label \u2014 dark ink on a bright red that passes 4.5:1 at APCA Lc 42.",
+      instead: "A label that clears 4.5:1 and APCA Lc 60 in both modes. Move the fill's lightness, not its hue, keeping the ink its colour takes. A status colour on a surface is its own token (`--destructive-text`), so the fill can move freely.",
+      why: "The ratio alone passes labels that read muddy. A deliberate brand pair is allowed with a recorded reason (lint disable or preset exceptions).",
+      enforcedBy: "sable-lint: label-contrast"
+    },
     {
       never: 'Blocking paste, or type="number" for codes and card numbers.',
       instead: 'type="text" inputMode="numeric" with the right autocomplete.',

package/dist/icon/index.js

@@ -1,2 +1,2 @@
-export { Icon, IconProvider, composeIconSets, useIconSet } from '../chunk-NGBDP3BM.js';
-export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from '../chunk-TH563WLW.js';
+export { Icon, IconProvider, composeIconSets, useIconSet } from '../chunk-QJ6FWTUG.js';
+export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from '../chunk-XAZGMY73.js';

package/dist/icon-sets/brands.d.ts

@@ -10,33 +10,6 @@ interface BrandGlyph {
 declare const BRAND_GRID = 24;
 declare const BRAND_GLYPHS: Record<string, BrandGlyph>;
 
-/**
- * Brand marks as a Sable icon set — `<Icon name="github" />`.
- *
- * This is an ADDITIVE set: it answers only for the brands it carries and
- * returns `null` for everything else, which is exactly what `composeIconSets`
- * falls through on. So it layers under a UI set rather than replacing one:
- *
- *     <IconProvider set={composeIconSets(brandIconSet, reiconIconSet)} />
- *
- * Order matters only if a name collides. None do today — the brand names are
- * proper nouns (`github`, `figma`) and the contract's names are common ones
- * (`gear`, `chevron-down`) — but put the brand set first if you ever want a
- * brand to win.
- *
- * **Marks are monochrome by default and take the surrounding ink**, because
- * that is what a footer social row wants and it keeps rule #1 intact: nothing
- * here names a color, so `text-muted-foreground` on the icon governs. The
- * generator strips upstream `fill`/`stroke` colors for this reason. A brand
- * that must appear in its official color is a deliberate act at the call site —
- * a token, or an arbitrary color utility on that one instance — never a
- * default. A page where every logo asserts its own brand color is how a footer
- * turns into a fruit salad.
- *
- * The glyph data is vendored and committed, never fetched at render time; see
- * `scripts/fetch-brand-icons.mjs` for why. Trademark note: these designs belong
- * to their owners — follow each brand's usage guidelines.
- */
 declare const brandIconSet: IconSet;
 /** The brand names this set answers to — useful for a coverage assertion. */
 declare const brandIconNames: string[];

package/dist/icon-sets/brands.js

@@ -119,6 +119,12 @@ var BRAND_GLYPHS = {
     markup: '<path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z"/>'
   }
 };
+var MARKUP = /* @__PURE__ */ new WeakMap();
+function markupOf(glyph) {
+  let markup = MARKUP.get(glyph);
+  if (!markup) MARKUP.set(glyph, markup = { __html: glyph.markup });
+  return markup;
+}
 var brandIconSet = ({
   name,
   spin,
@@ -137,7 +143,7 @@ var brandIconSet = ({
       height: "1em",
       fill: "currentColor",
       className: spin ? `motion-spin ${className ?? ""}` : className,
-      dangerouslySetInnerHTML: { __html: glyph.markup },
+      dangerouslySetInnerHTML: markupOf(glyph),
       ...a11y
     }
   );

package/dist/icon-sets/reicon.js

@@ -1 +1 @@
-export { reiconIconNames, reiconIconSet } from '../chunk-TH563WLW.js';
+export { reiconIconNames, reiconIconSet } from '../chunk-XAZGMY73.js';