@astryxdesign/core 0.1.9 → 0.2.0-canary.0e01213

package/dist/ProgressBar/ProgressBar.js

@@ -48,6 +48,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 const indeterminateSlide = "xr3m334-B";
 
+// RTL: mirror the slide so the indeterminate bar travels along the reading
+// flow (inline-start → inline-end, i.e. right → left) instead of always
+// physically left → right. The magnitudes mirror the LTR keyframe.
+const indeterminateSlideRtl = "x1c2q33o-B";
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -73,7 +78,7 @@ const styles = {
     kZKoxP: "x5yr21d",
     kzqmXN: "xz84dc7",
     kaIpWk: "xjspbzw",
-    kKVMdj: "xozk8ic",
+    kKVMdj: "xozk8ic xfd3fxj",
     k44tkh: "xmg6eyc xnh0sag",
     kyAemX: "x4hg4is",
     ko0y90: "xa4qsjk",

package/dist/RadioList/RadioList.d.ts

@@ -103,8 +103,8 @@ export interface RadioListProps extends Omit<BaseProps<HTMLElement>, 'onChange'>
     status?: InputStatus;
     /**
      * The size of the radio controls.
-     * - 'sm': Compact size (18px radio, 20px wrapper)
-     * - 'md': Default size (22px radio, 24px wrapper)
+     * - 'sm': Compact size (20px radio)
+     * - 'md': Default size (24px radio)
      * @default 'md'
      */
     size?: RadioListSize;

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6J5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -97,7 +97,7 @@ const styles = {
   },
   innerDot: {
     kaIpWk: "x16rqkct",
-    kWkggS: "x1azo05",
+    kWkggS: "x1azo05 xwvh9j7",
     $$css: true
   }
 };
@@ -115,13 +115,13 @@ const wrapperSizeStyles = {
 };
 const radioSizeStyles = {
   sm: {
-    kzqmXN: "x1xp8n7a",
-    kZKoxP: "xmix8c7",
+    kzqmXN: "xw4jnvo",
+    kZKoxP: "x1qx5ct2",
     $$css: true
   },
   md: {
-    kzqmXN: "x17z2i9w",
-    kZKoxP: "x17rw0jw",
+    kzqmXN: "xvy4d1p",
+    kZKoxP: "xxk0z11",
     $$css: true
   }
 };

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8KzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAqQnB;yBApRe,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAqNzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgRnB;yBA/Re,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -40,14 +40,25 @@ function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
 }
 
 /**
- * Hit area bias percentage. When the pill is off-center, the grab zone
- * shifts ~2:1 toward the pill so users can reach the visible grip easily.
+ * Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
+ *
+ * The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
+ * divider's inline-start edge and pushed one grip-width-plus-gap toward the
+ * panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
+ * offset is physical, the pill sits on the same physical side of the divider in
+ * both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
+ * exact same anchor + physical-offset construction as the pill (just wider) —
+ * anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
+ * biasing with a percentage translate mixes a logical anchor (which flips under
+ * RTL) with a physical translate (which doesn't), leaving the grab zone stranded
+ * to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
+ * `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
  */
-function hitAreaBias(effectiveSide) {
+function hitAreaBiasDir(effectiveSide) {
   if (effectiveSide === 'center') {
-    return '50%';
+    return null;
   }
-  return effectiveSide === 'start' ? '66.67%' : '33.33%';
+  return effectiveSide === 'start' ? -1 : 1;
 }
 const styles = {
   handle: {
@@ -79,8 +90,8 @@ const styles = {
   },
   overlayVertical: {
     krVfgx: "x1ey2m1c",
-    kbCHJM: "xu96u03",
-    kCIrl2: "x3m8u43",
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     kZKoxP: "x5kfih4",
     $$css: true
   },
@@ -130,18 +141,26 @@ const styles = {
     kzqmXN: "x12xnipv",
     k87sOh: "x13vifvy",
     krVfgx: "x1ey2m1c",
-    kbCHJM: "x1nrll8i",
     kkrTdU: "xicojor",
     $$css: true
   },
   hitAreaVertical: {
     kZKoxP: "x6b6gus",
-    kbCHJM: "xu96u03",
-    kCIrl2: "x3m8u43",
-    k87sOh: "xwa60dl",
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     kkrTdU: "xyozgr7",
     $$css: true
   },
+  hitAreaCenteredX: {
+    kLqNvP: "xbudbmw",
+    k3aq6I: "xuuh30",
+    $$css: true
+  },
+  hitAreaCenteredY: {
+    k87sOh: "xwa60dl",
+    k3aq6I: "x1cb1t30",
+    $$css: true
+  },
   pill: {
     kVAEAm: "x10l6tqk",
     kY2c9j: "xhtitgo",
@@ -152,7 +171,7 @@ const styles = {
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
     k87sOh: "xwa60dl",
-    kbCHJM: "x1nrll8i",
+    kLqNvP: "xbudbmw",
     k3aq6I: "x11lhmoz",
     $$css: true
   },
@@ -189,15 +208,17 @@ const styles = {
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const _temp = {
-  k3aq6I: "xsqj5wx",
+  kLqNvP: "x1o0tod",
+  k3aq6I: "x11wx31z " + "x75qhwu",
   "$$css": true
 };
 const _temp2 = {
+  k87sOh: "x13vifvy",
   k3aq6I: "xsqj5wx",
   "$$css": true
 };
 const _temp3 = {
-  kbCHJM: "xu96u03",
+  kLqNvP: "x1o0tod",
   k3aq6I: "xsqj5wx",
   "$$css": true
 };
@@ -207,11 +228,12 @@ const _temp4 = {
   "$$css": true
 };
 const dynamicStyles = {
-  hitAreaBiasX: pct => [_temp, {
-    "--x-transform": `translateX(-${pct})` != null ? `translateX(-${pct})` : undefined
+  hitAreaOffsetX: dir => [_temp, {
+    "--x-qthpiu": `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px), -50%)` != null ? `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px), -50%)` : undefined,
+    "--x-sj6hyi": `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px), -50%)` != null ? `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px), -50%)` : undefined
   }],
-  hitAreaBiasY: pct => [_temp2, {
-    "--x-transform": `translateY(-${pct})` != null ? `translateY(-${pct})` : undefined
+  hitAreaOffsetY: dir => [_temp2, {
+    "--x-transform": `translate(-50%, calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` != null ? `translate(-50%, calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` : undefined
   }],
   pillOffsetX: dir => [_temp3, {
     "--x-transform": `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` != null ? `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` : undefined
@@ -264,6 +286,9 @@ export function ResizeHandle({
   const isOverlay = positionMode === 'overlay';
   const sign = isReversed ? -1 : 1;
   const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, resizable?._isCollapsed ?? false);
+  // Physical offset direction shared by the pill and the grab zone (null =
+  // centered / no bias). Keeps the two positioned identically in LTR and RTL.
+  const hitBiasDir = hitAreaBiasDir(effectiveSide);
   const getRTLMultiplier = useCallback(() => {
     const el = handleRef.current;
     if (!el) {
@@ -428,7 +453,12 @@ export function ResizeHandle({
       handleKeyDown(e);
     },
     children: [/*#__PURE__*/_jsx("div", {
-      ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical, isHorizontal ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide)) : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)), isDisabled && styles.disabled),
+      ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
+      // Bias the grab zone to sit over the visible pill. When the pill is
+      // centered (no bias) just center the hit area on the divider; when
+      // it's offset to a panel side, reuse the pill's physical-offset
+      // construction so the two stay aligned in LTR and RTL alike.
+      hitBiasDir == null ? isHorizontal ? styles.hitAreaCenteredX : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
       onPointerDown: handlePointerDown,
       onPointerEnter: () => setIsHovered(true),
       onPointerLeave: () => {

package/dist/SegmentedControl/SegmentedControlItem.d.ts

@@ -48,7 +48,7 @@ export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement>
  * <SegmentedControlItem value="grid" label="Grid" icon={<GridIcon />} />
  * ```
  */
-export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, ...rest }: SegmentedControlItemProps): React.JSX.Element;
+export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, xstyle, ...rest }: SegmentedControlItemProps): React.JSX.Element;
 export declare namespace SegmentedControlItem {
     var displayName: string;
 }

package/dist/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6FD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAgE3B;yBAzEe,oBAAoB"}
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+GD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAiE3B;yBA3Ee,oBAAoB"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -55,9 +55,10 @@ const styles = {
     $$css: true
   },
   selected: {
-    kMwMTN: "x1tgivj0",
+    kAXs8y: "x1kzknox",
+    kMwMTN: "x1tgivj0 x1k5gbb1",
     k63SB2: "x2mo6ok",
-    kWkggS: "x10xzikg",
+    kWkggS: "x10xzikg x1jzqe4",
     kGVxlE: "x1i5ehqx",
     $$css: true
   },
@@ -136,6 +137,7 @@ export function SegmentedControlItem({
   icon,
   isDisabled = false,
   onClick: onClickProp,
+  xstyle,
   ...rest
 }) {
   const ctx = useSegmentedControlContext();
@@ -181,7 +183,7 @@ export function SegmentedControlItem({
       size,
       selected: isSelected ? 'selected' : null,
       disabled: isItemDisabled ? 'disabled' : null
-    }), stylex.props(styles.base, sizeStyles[size], isFill && styles.fill, isSelected && styles.selected, !isSelected && !isItemDisabled && styles.hover, isItemDisabled && styles.disabled)),
+    }), stylex.props(styles.base, sizeStyles[size], isFill && styles.fill, isSelected && styles.selected, !isSelected && !isItemDisabled && styles.hover, isItemDisabled && styles.disabled, xstyle)),
     children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsx("span", {
       children: label
     })]

package/dist/Selector/Selector.d.ts

@@ -13,6 +13,7 @@
  */
 import React, { type ReactNode } from 'react';
 import { type IconType } from '../Icon';
+import { type FieldStatusVariant } from '../Field';
 import type { LayerPlacement } from '../Layer/useLayer';
 import type { SelectorOptionType, SelectorOptionData } from './types';
 import type { BaseProps } from '../BaseProps';
@@ -107,6 +108,13 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
      * If message is provided, displays a message box below the selector.
      */
     status?: SelectorStatus;
+    /**
+     * How the status message is placed relative to the input.
+     * - 'attached': message overlaps directly below the input (bordered treatment)
+     * - 'detached': message floats below as a separate element with spacing
+     * @default 'attached'
+     */
+    statusVariant?: FieldStatusVariant;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they

package/dist/Selector/Selector.d.ts.map

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

package/dist/Selector/Selector.js

@@ -85,7 +85,7 @@ const styles = {
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w",
     kkrTdU: "x1ypdohk",
-    k9WMMc: "xdpxx8g",
+    k9WMMc: "x1yc453h",
     kI3sdo: "x1a2a7pz",
     $$css: true
   },
@@ -166,6 +166,16 @@ function DefaultOption({
   });
 }
 
+// Case-insensitive substring match for a single option. The one predicate used
+// by both the flat filter (count + keyboard nav) and the grouped renderer, so
+// what is shown while searching stays in lockstep with the announced count.
+function optionMatchesQuery(option, query) {
+  if (!query) {
+    return true;
+  }
+  return (option.label ?? option.value).toLowerCase().includes(query.toLowerCase());
+}
+
 // Case-insensitive substring filter over the selectable options. Shared by the
 // `filteredItems` memo (rendering) and the search-change handler, which needs
 // the count for the *next* query synchronously to announce it exactly once per
@@ -174,8 +184,7 @@ function filterOptionsByQuery(items, query) {
   if (!query) {
     return items;
   }
-  const q = query.toLowerCase();
-  return items.filter(item => (item.label ?? item.value).toLowerCase().includes(q));
+  return items.filter(item => optionMatchesQuery(item, query));
 }
 
 /**
@@ -210,6 +219,7 @@ export function Selector(props) {
     placeholder: placeholderFromProps,
     size: sizeProp,
     status,
+    statusVariant = 'attached',
     labelTooltip,
     startIcon,
     htmlName,
@@ -491,32 +501,50 @@ export function Selector(props) {
 
   // Render all options (handling sections/dividers)
   const renderOptions = useCallback(() => {
-    // When search is active, render filtered items flat (no sections/dividers)
-    if (hasSearch && searchQuery) {
-      if (filteredItems.length === 0) {
-        return [/*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
-          },
-          children: "No results found"
-        }, "empty")];
-      }
-      return filteredItems.map((item, index) => renderItem(item, index));
+    const isSearching = hasSearch && Boolean(searchQuery);
+
+    // Nothing matched across every group/option: show the empty state.
+    if (isSearching && filteredItems.length === 0) {
+      // role="presentation" keeps the message out of the listbox's
+      // accessibility tree (role="listbox" only permits option/group
+      // children); the no-results outcome is announced via the
+      // result-count live region instead.
+      return [/*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        ...{
+          className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
+        },
+        children: "No results found"
+      }, "empty")];
     }
     let flatIndex = 0;
     const elements = [];
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
       if (isDivider(option)) {
+        // While searching, a standalone divider between groups would orphan
+        // itself once its neighbors are filtered out, so skip it.
+        if (isSearching) {
+          continue;
+        }
         elements.push(/*#__PURE__*/_jsx(Divider, {
           xstyle: styles.divider
         }, `divider-${i}`));
       } else if (isSection(option)) {
         const sectionItems = [];
         for (const opt of option.options) {
-          sectionItems.push(renderItem(normalizeOption(opt), flatIndex));
+          const normalized = normalizeOption(opt);
+          if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
+            continue;
+          }
+          sectionItems.push(renderItem(normalized, flatIndex));
           flatIndex++;
         }
+        // Hide a group entirely (header + wrapper) when none of its items
+        // match the query, so no header is left standing over nothing.
+        if (sectionItems.length === 0) {
+          continue;
+        }
         if (option.title) {
           elements.push(/*#__PURE__*/_jsx(Divider, {
             label: option.title,
@@ -529,12 +557,20 @@ export function Selector(props) {
           children: sectionItems
         }, `section-${i}`));
       } else if (isOptionData(option)) {
-        elements.push(renderItem(normalizeOption(option), flatIndex));
+        const normalized = normalizeOption(option);
+        if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
+          continue;
+        }
+        elements.push(renderItem(normalized, flatIndex));
         flatIndex++;
       }
     }
     return elements;
   }, [options, renderItem, hasSearch, searchQuery, filteredItems]);
+
+  // The detached message box renders its own leading status icon, so the
+  // on-field icon would duplicate it — keep the chevron indicator instead.
+  const showStatusIcon = status != null && statusVariant !== 'detached';
   const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
@@ -549,7 +585,7 @@ export function Selector(props) {
       ...mergeProps(themeProps('selector', {
         size,
         status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, !selectedItem && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, !selectedItem && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -615,6 +651,13 @@ export function Selector(props) {
           icon: "close",
           size: "sm",
           color: "secondary"
+          // Stable theme target on the clear glyph itself, so a theme can
+          // restyle just this icon (color, size, hover) via `defineTheme`.
+          // Same-element rules in @layer astryx-theme win over the icon's
+          // own base color/size, which a button-level target could not
+          // reach.
+          ,
+          ...themeProps('selector-clear-icon')
         })
       }), /*#__PURE__*/_jsx("span", {
         ...{
@@ -630,8 +673,8 @@ export function Selector(props) {
           3: {
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
           }
-        }[!!(!status && popover.isOpen) << 1 | !!status << 0],
-        children: status ? /*#__PURE__*/_jsx(Icon, {
+        }[!!(!showStatusIcon && popover.isOpen) << 1 | !!showStatusIcon << 0],
+        children: showStatusIcon ? /*#__PURE__*/_jsx(Icon, {
           icon: STATUS_ICON_MAP[status.type],
           size: "sm",
           color: STATUS_ICON_COLOR_MAP[status.type]
@@ -639,6 +682,15 @@ export function Selector(props) {
           icon: "chevronDown",
           size: "sm",
           color: "inherit"
+          // Stable theme target on the chevron glyph itself, so a theme can
+          // restyle just this icon (color, size, hover) — and its
+          // open/closed state — via `defineTheme`. Same-element rules in
+          // @layer astryx-theme win over the icon's own base color/size,
+          // which a button-level target could not reach.
+          ,
+          ...themeProps('selector-indicator-icon', {
+            state: popover.isOpen ? 'expanded' : 'collapsed'
+          })
         })
       })]
     }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
@@ -690,6 +742,7 @@ export function Selector(props) {
       message: status.message,
       messageID: status.message ? statusMessageId : undefined
     } : undefined,
+    statusVariant: statusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent

package/dist/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAyJ/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;QACnD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACP;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiQd;yBAhRe,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAkJ/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;QACnD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACP;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiQd;yBAhRe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -23,7 +23,7 @@
 import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { borderVars, colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { SideNavCollapseContext } from "./SideNavCollapseContext.js";
 import { SideNavCollapseButton } from "./SideNavCollapseButton.js";
@@ -219,7 +219,7 @@ export function SideNav({
       "data-testid": testId,
       children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
-          className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
+          className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
         },
         children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
           ...{
@@ -239,7 +239,7 @@ export function SideNav({
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
-          className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
+          className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
         },
         children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
           ...{
@@ -317,10 +317,10 @@ export function SideNav({
     }), (hasStickyBottom || showCollapseButton) && /*#__PURE__*/_jsxs("div", {
       ...{
         0: {
-          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf xfsso4q x1wesfrj x11xkdxz x13fuv20 x1pc3f07"
+          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf xfsso4q x1wesfrj"
         },
         1: {
-          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj x11xkdxz x13fuv20 x1pc3f07 xexx8yu"
+          className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu"
         }
       }[!!collapsed << 0],
       children: [footer, /*#__PURE__*/_jsxs("div", {

package/dist/SideNav/SideNavCollapseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAsC5B;yBA7Ce,qBAAqB"}
+{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAwC5B;yBA/Ce,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -22,7 +22,7 @@ import "../theme/tokens.stylex.js";
 import { durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { getIcon } from "../Icon/globalIconRegistry.js";
 import { Button } from "../Button/index.js";
-import { composeEventHandlers } from "../utils/index.js";
+import { composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { useTranslator } from "../i18n/index.js";
@@ -90,15 +90,18 @@ export function SideNavCollapseButton({
     ...props,
     onClick: composeEventHandlers(onClickProp, toggle),
     icon: children ?? /*#__PURE__*/_jsx("span", {
-      ...{
-        0: {
-          className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
-        },
-        1: {
-          className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
-        }
-      }[!!isCollapsed << 0],
-      children: getIcon('chevronLeft')
+      ...stylex.props(rtlStyles.mirror),
+      children: /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
+          },
+          1: {
+            className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
+          }
+        }[!!isCollapsed << 0],
+        children: getIcon('chevronLeft')
+      })
     }),
     isIconOnly: true
   });

package/dist/SideNav/SideNavItem.d.ts

@@ -107,7 +107,7 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
  * </SideNavItem>
  * ```
  */
-export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, }: SideNavItemProps): import("react").JSX.Element | null;
+export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, ...rest }: SideNavItemProps): import("react").JSX.Element | null;
 export declare namespace SideNavItem {
     var displayName: string;
 }

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAwMhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,gBAAgB,sCAmVlB;yBAlWe,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAwMhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAmVlB;yBApWe,WAAW"}