@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/dist/Spinner/Spinner.js

@@ -33,6 +33,16 @@ import { themeProps } from "../utils/themeProps.js";
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ARC_FRACTION = 0.375;
+
+/**
+ * The dash pattern, per unit of diameter: one arc, then the gap that closes
+ * the circle. The circumference is `pi x diameter`, so multiplying the
+ * resolved diameter by these two constants gives exactly the lengths the
+ * default render has always used, and scales them with a themed diameter.
+ */
+const PI = 3.141592653589793;
+const ARC_DASH = PI * ARC_FRACTION;
+const ARC_GAP = PI * (1 - ARC_FRACTION);
 const SIZES = {
   sm: {
     diameter: 10,
@@ -52,7 +62,12 @@ const SIZES = {
   }
 };
 
-/** `onMedia` keeps the 77/255 its token's `4D` hex suffix used to encode. */
+/**
+ * Opacity the track is drawn at, per shade. `77 / 255` is the `4D` the onMedia
+ * track used to append to the token's hex — the same composite, but applied as
+ * `stroke-opacity` to a color off the cascade, so it no longer depends on the
+ * token being hex notation and it applies to a themed color too.
+ */
 const TRACK_OPACITY = {
   default: 1,
   subtle: 1,
@@ -60,6 +75,87 @@ const TRACK_OPACITY = {
   inherit: 0.3
 };
 
+/**
+ * Where the resolved geometry lands: the public var, resolved into a registered
+ * `<length>` the `calc()`s below can do arithmetic on. The box and the ring
+ * read these; the public vars are declared once, on the element carrying the
+ * theme target, by `sizeStyles`.
+ */
+const RESOLVED_DIAMETER = '--_spinner-ring-diameter';
+const RESOLVED_STROKE = '--_spinner-ring-stroke';
+const RESOLVED_GEOMETRY_VARS = [RESOLVED_DIAMETER, RESOLVED_STROKE];
+
+/**
+ * The composed box size: diameter plus a stroke width on each side.
+ *
+ * It is deliberately NOT registered, unlike the pair above. The element reads
+ * it through an inline `width`/`height` with the size's own default as the
+ * `var()` fallback, so a render with no stylesheet — where nothing declares
+ * it — still sizes the box the way it always did. A registered property always
+ * has a value (its `initial-value`), which would swallow that fallback and
+ * collapse the box to zero.
+ */
+const BOX_SIZE = '--_spinner-box-size';
+
+/**
+ * Register the resolved geometry vars as `<length>`.
+ *
+ * Both are consumed inside `calc()` — the box adds two stroke widths to a diameter,
+ * the circle halves one. Unregistered, a custom property substitutes as text,
+ * so whatever a theme wrote lands in the expression verbatim and a bare `0`
+ * (a valid length on its own, a `<number>` inside `calc()`) poisons the sum:
+ * `calc(28px + 0 * 2)` is invalid at computed-value time and the box loses its
+ * size. Registered, the value is already an absolute length by the time the
+ * `calc()` sees it, so `0` means `0px` — a zero-width stroke that paints
+ * nothing — rather than a bare `0` that invalidates the sum and leaves the box
+ * with no size at all. One `stroke-width` drives both circles, so a themed
+ * stroke width of `0` hides the arc along with the track; an arc with no track behind
+ * it is `--spinner-track-color: transparent`.
+ *
+ * Only these private vars are registered. The four public ones deliberately
+ * are not: a registered property has an `initial-value`, so every element in
+ * the document would report a value for it — and
+ * `.github/scripts/theme-var-reachability.js` finds a var's declaring element
+ * by exactly that test, so registering them would point the guard at `<html>`
+ * and report a var no theme can select.
+ */
+function registerSpinnerVars() {
+  if (typeof CSS === 'undefined' || typeof CSS.registerProperty !== 'function') {
+    return;
+  }
+  for (const name of RESOLVED_GEOMETRY_VARS) {
+    try {
+      CSS.registerProperty({
+        name,
+        syntax: '<length>',
+        inherits: true,
+        initialValue: '0px'
+      });
+    } catch {
+      // Already registered — a second copy of the package on the page, or a
+      // fast-refresh re-evaluation. registerProperty throws rather than
+      // replacing, and the existing registration is this same one.
+    }
+  }
+}
+
+// Registering an inherited property with an `initial-value` invalidates style
+// for the whole document, so this runs when the module is evaluated rather
+// than when a spinner mounts. A spinner is the loading indicator: it mounts
+// onto a page that is already rendered, with someone already waiting, and the
+// recalc it triggers there is paid on the full tree. At import the tree is
+// whatever has rendered so far, which for a bundle loaded in the head is
+// nothing.
+//
+// It is safe at module scope in both directions. The `typeof CSS` guard above
+// keeps it out of the server render, and tree-shaking cannot strip it from a
+// build that renders a spinner: core's `sideEffects` allowlist does not name
+// this file, so a bundle that never imports `Spinner` drops the module whole —
+// registration and all, which is the outcome you want — while one that does
+// import it keeps the module, and a bare call is not something a bundler may
+// elide.
+registerSpinnerVars();
+
 /**
  * Pin every ring's rotation to the document timeline's origin instead of its
  * own start time, so spinners mounted seconds apart turn in phase.
@@ -87,10 +183,19 @@ function pinRingsToTimelineOrigin() {
     animation.startTime = 0;
   }
 }
+
+/**
+ * Ref callback for the ring: the one place a mounted ring touches the DOM.
+ *
+ * It reads nothing back — the geometry is resolved by the cascade, not in JS.
+ */
 function syncRotationPhase(svg) {
+  if (svg == null) {
+    return undefined;
+  }
   // jsdom implements no Web Animations, and this runs in every consumer's
   // component tests.
-  if (svg == null || typeof svg.getAnimations !== 'function') {
+  if (typeof svg.getAnimations !== 'function') {
     return undefined;
   }
   pendingRings.add(svg);
@@ -126,50 +231,104 @@ const styles = {
     kgQiWS: "x1ku5rj1",
     kVQacm: "xb3r6kr",
     kXLuUW: "xxymvpz",
+    "--_spinner-ring-diameter": "x2lq4xu",
+    "--_spinner-ring-stroke": "x10qssua",
+    "--_spinner-box-size": "x69vvuq",
     $$css: true
   },
   circle: {
     kDwRjp: "xbh8q5q",
     kU5bRw: "x1owpc8m",
+    kPFa82: "xio8zfp",
+    kfJifR: "xgw3ha0",
+    $$css: true
+  },
+  track: {
+    kjVXCG: "xalkhop",
     $$css: true
   }
 };
-const arcStyles = {
+
+// What each named `size` and `shade` resolve to. Both groups DECLARE the four
+// public vars, on the element that carries the `spinner` theme target, and
+// everything downstream reads them — so a theme's `@layer astryx-theme` rule
+// against `.astryx-spinner.xl` overrides the default the same way it does for
+// `--tree-list-indent` or `--button-focus-offset`, e.g.
+// spinner: { 'size:xl': { '--spinner-diameter': '40px' } }.
+//
+// Declaring is only safe because #5410 moved the compiled StyleX CSS inside
+// `@layer astryx-base`. Before it, StyleX emitted custom-property
+// declarations at priority 0 and therefore OUTSIDE its layers, and an
+// unlayered declaration beats every layer — so a StyleX-declared
+// `--spinner-diameter: 10px` shadowed the theme's own rule no matter how
+// specific the theme got. An earlier revision of this component worked around
+// that by never declaring the public var and reading it with the default as a
+// `var()` fallback; that is no longer necessary, and the fallback shape has a
+// cost of its own — with nothing declaring the var,
+// `theme-var-reachability.js` cannot find an element to check, so a documented
+// var reads as unreachable.
+const sizeStyles = {
+  sm: {
+    "--spinner-diameter": "x11wm0hx",
+    "--spinner-stroke-width": "xls98ul",
+    $$css: true
+  },
+  md: {
+    "--spinner-diameter": "x15pu9g6",
+    "--spinner-stroke-width": "xr0wkrm",
+    $$css: true
+  },
+  lg: {
+    "--spinner-diameter": "x1w424tr",
+    "--spinner-stroke-width": "xr0wkrm",
+    $$css: true
+  },
+  xl: {
+    "--spinner-diameter": "x1orj1z9",
+    "--spinner-stroke-width": "x7y2bof",
+    $$css: true
+  }
+};
+const shadeStyles = {
   default: {
-    kjVXCG: "xjsr54c",
+    "--spinner-color": "xt1b8mc",
+    "--spinner-track-color": "xspt9s2",
     $$css: true
   },
   subtle: {
-    kjVXCG: "xxvau67",
+    "--spinner-color": "x1jevo6s",
+    "--spinner-track-color": "xspt9s2",
     $$css: true
   },
   onMedia: {
-    kjVXCG: "x16lqycg",
+    "--spinner-color": "x13u6jys",
+    "--spinner-track-color": "x1ufpcf6",
     $$css: true
   },
   inherit: {
-    kjVXCG: "x73je2i",
+    "--spinner-color": "x1uzk0gl",
+    "--spinner-track-color": "xbfzqbu",
     $$css: true
   }
 };
-const trackStyles = {
+
+// The track's alpha is a property, not a color: it composites over whatever
+// color the shade or the theme supplies. `77 / 255` is the `4D` the onMedia
+// token's hex used to carry.
+const trackOpacityStyles = {
   default: {
-    kjVXCG: "xpi25hw",
     kDd8S0: "x1g350g8",
     $$css: true
   },
   subtle: {
-    kjVXCG: "xpi25hw",
     kDd8S0: "x1g350g8",
     $$css: true
   },
   onMedia: {
-    kjVXCG: "x16lqycg",
     kDd8S0: "x1smxkh6",
     $$css: true
   },
   inherit: {
-    kjVXCG: "x73je2i",
     kDd8S0: "x7bo2k",
     $$css: true
   }
@@ -236,10 +395,24 @@ export function Spinner({
     ...mergeProps(hasLabel ? '' : themeProps('spinner', {
       size,
       shade
-    }), stylex.props(styles.spinner, !hasLabel && xstyle), hasLabel ? undefined : className, {
+    }), stylex.props(styles.spinner,
+    // The defaults are declared on whichever element carries the theme
+    // target, and only there: when a label moves the target to the
+    // wrapper, this span must inherit the wrapper's value rather than
+    // declare its own, which would shadow a theme's override with the
+    // default it is trying to replace.
+    !hasLabel && sizeStyles[size], !hasLabel && shadeStyles[shade], !hasLabel && xstyle), hasLabel ? undefined : className,
+    // The box is sized here, after the caller's `style`, exactly as it was
+    // before the geometry became themeable: the component's own size wins
+    // over a `style={{width}}` a caller passes, and the precedence between
+    // the two is unchanged by this PR. What the value is made of has
+    // changed — it is the composed var rather than a number — so a themed
+    // diameter moves the box with the ring. The fallback is the size's own
+    // frame, for the render where no stylesheet has declared the var.
+    {
       ...(hasLabel ? {} : style),
-      width: frameSize,
-      height: frameSize
+      width: `var(${BOX_SIZE}, ${frameSize}px)`,
+      height: `var(${BOX_SIZE}, ${frameSize}px)`
     }),
     children: /*#__PURE__*/_jsxs("svg", {
       ref: syncRotationPhase,
@@ -248,22 +421,28 @@ export function Spinner({
       viewBox: `0 0 ${frameSize} ${frameSize}`,
       "aria-hidden": "true",
       ...{
-        className: "xlp1x4z x1lliihq x1so62im x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
+        className: "xlp1x4z x1lliihq x1so62im x1rea2x4 x14qxm4i xnh0sag xa4qsjk x1ka1v4i x1esw782"
       },
       children: [/*#__PURE__*/_jsx("circle", {
         cx: center,
         cy: center,
         r: diameter / 2,
         strokeWidth: border,
-        ...stylex.props(styles.circle, trackStyles[shade])
+        ...stylex.props(styles.circle, styles.track, trackOpacityStyles[shade])
       }), /*#__PURE__*/_jsx("circle", {
         cx: center,
         cy: center,
         r: diameter / 2,
-        strokeWidth: border,
+        strokeWidth: border
+        // The size's own dash, for the render with no stylesheet. The rule
+        // above composes the same lengths from the resolved diameter, so a
+        // themed ring keeps this fraction of arc rather than this length.
+        ,
         strokeDasharray: `${arcLength} ${circumference - arcLength}`,
         transform: `rotate(-90 ${center} ${center})`,
-        ...stylex.props(styles.circle, arcStyles[shade])
+        ...{
+          className: "xbh8q5q x1owpc8m xio8zfp xgw3ha0 xtve3lm x1vy8frr"
+        }
       })]
     })
   });
@@ -277,7 +456,7 @@ export function Spinner({
     ...mergeProps(themeProps('spinner', {
       size,
       shade
-    }), stylex.props(styles.wrapper, xstyle), className, style),
+    }), stylex.props(styles.wrapper, sizeStyles[size], shadeStyles[shade], xstyle), className, style),
     children: [spinner, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
       id: labelId,
       type: "body",

package/dist/StatusDot/StatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAoFjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAmChB;yBA9Ce,SAAS"}
+{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAoFjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAyChB;yBApDe,SAAS"}

package/dist/StatusDot/StatusDot.js

@@ -143,8 +143,13 @@ export function StatusDot({
     ref: ref,
     role: "img",
     "aria-label": label,
-    ...mergeProps(themeProps('statusdot', {
+    ...mergeProps(themeProps('status-dot', {
       variant
+    },
+    // `statusdot` ran the compound name together; themes styling it keep
+    // working until the next major.
+    {
+      legacyNames: ['statusdot']
     }), stylex.props(styles.base, variants[variant], isPulsing && styles.pulsing, isPulsing && styles.reducedMotion, xstyle), className, style),
     ...props,
     children: showsIcon && /*#__PURE__*/_jsx("span", {

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA4tBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAitBX;yBAluBe,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAoBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAgtBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAqtBX;yBAtuBe,IAAI"}

package/dist/Stepper/Step.js

@@ -36,6 +36,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, textSizeVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { focusOutlineStyles, mergeProps, isRenderable, themeProps } from "../utils/index.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { Icon } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
@@ -445,7 +446,7 @@ const styles = {
     k1ekBW: "x15406qy",
     kIyJzY: "xkvfbh3 x12w9bfk",
     kAMwcw: "xlr8y92",
-    kWkggS: "xjbqb8w xoevpu5 xyxi2l3",
+    kWkggS: "xjbqb8w",
     $$css: true
   },
   otVerticalRoot: {
@@ -469,7 +470,7 @@ const styles = {
     k1ekBW: "x15406qy",
     kIyJzY: "xkvfbh3 x12w9bfk",
     kAMwcw: "xlr8y92",
-    kWkggS: "xjbqb8w xoevpu5 xyxi2l3",
+    kWkggS: "xjbqb8w",
     $$css: true
   },
   otRowWrap: {
@@ -945,7 +946,7 @@ export function Step({
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
-          ...stylex.props(styles.otInteractive, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible),
+          ...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible),
           children: inner
         }) : /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.otRowWrap, styles.otRowPadV(densitySpace)),
@@ -982,7 +983,7 @@ export function Step({
         type: "button",
         onClick: handleClick,
         "aria-label": stepAriaLabel,
-        ...stylex.props(styles.otInteractive, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible),
+        ...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible),
         children: innerH
       }) : /*#__PURE__*/_jsx("div", {
         ...stylex.props(styles.otColWrap, styles.otPadBlock(densitySpace)),
@@ -1010,7 +1011,7 @@ export function Step({
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
-          ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+          ...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
           children: [iconLabelNode, descriptionNode]
         }) : /*#__PURE__*/_jsxs("div", {
           ...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
@@ -1034,7 +1035,7 @@ export function Step({
       type: "button",
       onClick: handleClick,
       "aria-label": stepAriaLabel,
-      ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+      ...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
       children: [iconLabelNode, descriptionNode]
     }) : /*#__PURE__*/_jsxs("div", {
       ...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/dist/Switch/Switch.js

@@ -381,7 +381,11 @@ export function Switch({
   });
   const labelElement = /*#__PURE__*/_jsx("div", {
     ...stylex.props(styles.labelWrapper, labelWrapperSizeStyles[size]),
-    children: /*#__PURE__*/_jsx(FieldLabel, {
+    children: /*#__PURE__*/_jsx(FieldLabel
+    // See CheckboxInput: the control names its own label target rather
+    // than the label guessing at its placement.
+    , {
+      ...themeProps('switch-label'),
       label: label,
       inputID: id,
       isLabelHidden: isLabelHidden,

package/dist/Table/BaseTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAsmBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
+{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA2mBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}

package/dist/Table/BaseTable.js

@@ -410,7 +410,12 @@ function BaseTableInner({
       'aria-rowcount': ariaRowCount
     } : null),
     ...tableRenderProps.htmlProps,
-    ...mergeProps(themeProps('base-table'), stylex.props(...tableRenderProps.xstyle, xstyle), [tableRenderProps.htmlProps.className, className].filter(Boolean).join(' ') || undefined, tableStyle),
+    ...mergeProps(themeProps('table', undefined, {
+      // `base-table` was a second root on the same <table> element that
+      // `table` names; themes styling it keep working until the next
+      // major.
+      legacyNames: ['base-table']
+    }), stylex.props(...tableRenderProps.xstyle, xstyle), [tableRenderProps.htmlProps.className, className].filter(Boolean).join(' ') || undefined, tableStyle),
     ...rest,
     children: children ? children : /*#__PURE__*/_jsxs(_Fragment, {
       children: [hasColumns && /*#__PURE__*/_jsx(TableHeader, {

package/dist/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AA0JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AAqJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}

package/dist/Table/Table.js

@@ -105,14 +105,11 @@ function TableScrollWrapper({
 function buildTableStylePlugin() {
   return {
     transformTable(props) {
-      const existingClass = props.htmlProps.className ?? '';
-      const tableClass = themeProps('table').className;
+      // The `astryx-table` class itself comes from BaseTable, which renders
+      // the <table> element and now names it `table` (with `base-table` as its
+      // legacy name). Adding it here too would put the token on twice.
       return {
         ...props,
-        htmlProps: {
-          ...props.htmlProps,
-          className: existingClass ? `${existingClass} ${tableClass}` : tableClass
-        },
         xstyle: [...props.xstyle, tableStyles.base]
       };
     }

package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableFiltering.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/filtering/useTableFiltering.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,iBAAiB,EAGjB,iBAAiB,EASlB,MAAM,4BAA4B,CAAC;AAMpC,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC;CACvC,CAAC,EACF,YAAY,EAAE,iBAAiB,GAC9B,iBAAiB,EAAE,CAoCrB;AAwDD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,gBAAgB,CAAC;AAMzE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAuB;IACtC,kEAAkE;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;;;OAQG;IACH,YAAY,EAAE,iBAAiB,CAAC;CACjC;AA8rBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,GAC9B,WAAW,CAAC,CAAC,CAAC,CAiGhB"}
+{"version":3,"file":"useTableFiltering.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/filtering/useTableFiltering.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EACV,iBAAiB,EAGjB,iBAAiB,EASlB,MAAM,4BAA4B,CAAC;AAMpC,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC;CACvC,CAAC,EACF,YAAY,EAAE,iBAAiB,GAC9B,iBAAiB,EAAE,CAoCrB;AAwDD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,gBAAgB,CAAC;AAMzE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAuB;IACtC,kEAAkE;IAClE,OAAO,EAAE,gBAAgB,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;;;OAQG;IACH,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAuxBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,GAC9B,WAAW,CAAC,CAAC,CAAC,CAiGhB"}

package/dist/Table/plugins/filtering/useTableFiltering.js

@@ -21,13 +21,14 @@ import { Button } from "../../../Button/index.js";
 import { Popover } from "../../../Popover/index.js";
 import { TextInput } from "../../../TextInput/index.js";
 import { NumberInput } from "../../../NumberInput/index.js";
+import { parseNumberInput, resolveNumberInputCommit } from "../../../NumberInput/numberInputCommit.js";
 import { DateInput } from "../../../DateInput/index.js";
 import { TimeInput } from "../../../TimeInput/index.js";
 import { Selector } from "../../../Selector/index.js";
 import { MultiSelector } from "../../../MultiSelector/index.js";
 import { Tokenizer } from "../../../Tokenizer/index.js";
 import { proportional } from "../../columnUtils.js";
-import { useTranslator } from "../../../i18n/index.js";
+import { useLocale, useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Filter Value Types
@@ -310,6 +311,59 @@ function TextFilterControl({
     hasClear: hasClear
   });
 }
+function useLiveNumberFilter({
+  value,
+  min,
+  max,
+  hasClear,
+  onChange
+}) {
+  const locale = useLocale();
+  const editStartValueRef = useRef(value);
+  const handleChange = useCallback(nextValue => {
+    editStartValueRef.current = nextValue;
+    onChange(nextValue);
+  }, [onChange]);
+  const handleFocus = useCallback(() => {
+    editStartValueRef.current = value;
+  }, [value]);
+  const handleInput = useCallback(event => {
+    const nextValue = parseNumberInput(event.currentTarget.value, {
+      min,
+      max,
+      locale
+    });
+    if (nextValue !== null && nextValue !== value) {
+      onChange(nextValue);
+    }
+  }, [locale, max, min, onChange, value]);
+  const restoreRejectedDraft = useCallback(input => {
+    const decision = resolveNumberInputCommit(input.value, {
+      min,
+      max,
+      locale,
+      hasClear
+    });
+    if (decision.type === 'revert' && value !== editStartValueRef.current) {
+      onChange(editStartValueRef.current);
+    }
+  }, [hasClear, locale, max, min, onChange, value]);
+  const handleBlur = useCallback(event => {
+    restoreRejectedDraft(event.currentTarget);
+  }, [restoreRejectedDraft]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      restoreRejectedDraft(event.currentTarget);
+    }
+  }, [restoreRejectedDraft]);
+  return {
+    handleBlur,
+    handleChange,
+    handleFocus,
+    handleInput,
+    handleKeyDown
+  };
+}
 function NumberFilterControl({
   columnKey,
   header,
@@ -323,9 +377,16 @@ function NumberFilterControl({
   const value = config.filters[columnKey];
   const numValue = typeof value === 'number' ? value : null;
   const step = operatorValue.type === 'integer' ? 1 : null;
-  const handleChange = useCallback(newValue => {
+  const updateFilter = useCallback(newValue => {
     store.getConfig().onFilterChange(columnKey, newValue);
   }, [store, columnKey]);
+  const liveFilter = useLiveNumberFilter({
+    value: numValue,
+    min: operatorValue.minValue,
+    max: operatorValue.maxValue,
+    hasClear: !!hasClear,
+    onChange: updateFilter
+  });
   if (hasClear) {
     return /*#__PURE__*/_jsx(NumberInput, {
       label: t('@astryx.tableFiltering.filterByColumn', {
@@ -333,7 +394,11 @@ function NumberFilterControl({
       }),
       isLabelHidden: true,
       value: numValue,
-      onChange: handleChange,
+      onChange: liveFilter.handleChange,
+      onFocus: liveFilter.handleFocus,
+      onInput: liveFilter.handleInput,
+      onBlur: liveFilter.handleBlur,
+      onKeyDown: liveFilter.handleKeyDown,
       placeholder: t('@astryx.tableFiltering.filterByColumn', {
         header
       }),
@@ -350,7 +415,11 @@ function NumberFilterControl({
     }),
     isLabelHidden: true,
     value: numValue,
-    onChange: handleChange,
+    onChange: liveFilter.handleChange,
+    onFocus: liveFilter.handleFocus,
+    onInput: liveFilter.handleInput,
+    onBlur: liveFilter.handleBlur,
+    onKeyDown: liveFilter.handleKeyDown,
     placeholder: t('@astryx.tableFiltering.filterByColumn', {
       header
     }),

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts

@@ -73,6 +73,32 @@ export interface UseTableGroupedRowsResult<T extends Record<string, unknown>> {
  *   plugins={{grouped: grouped.plugin}}
  * />;
  * ```
+ *
+ * ## Pairing with pagination
+ *
+ * Grouping runs on the rows it is handed, so the order is filter, sort, slice,
+ * then group. Sort by the group key first and the reader's own keys second —
+ * the same `ORDER BY group, sort` a backend would run. That keeps a section's
+ * rows contiguous in the result set, so pages fill sections in order and new
+ * rows always land at the bottom of the table. Slice a differently-ordered
+ * list and every page holds a scatter of sections instead, so loading more
+ * splices rows into the middle and new headings appear above the fold.
+ *
+ * @example
+ * ```
+ * const ordered = useMemo(
+ *   () => [...filtered].sort((a, b) => byTeam(a, b) || bySortKeys(a, b)),
+ *   [filtered, sortKeys],
+ * );
+ * const page = ordered.slice(0, loadedCount);
+ *
+ * const grouped = useTableGroupedRows({
+ *   data: page,
+ *   groupBy: r => r.team,
+ *   collapsedGroups,
+ *   onToggleGroup,
+ * });
+ * ```
  */
 export declare function useTableGroupedRows<T extends Record<string, unknown>>(config: UseTableGroupedRowsConfig<T>): UseTableGroupedRowsResult<T>;
 //# sourceMappingURL=useTableGroupedRows.d.ts.map