@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/Resizable/ResizeHandle.js

@@ -24,7 +24,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
 function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
@@ -251,6 +251,9 @@ export function ResizeHandle({
   ...props
 }) {
   const handleRef = useRef(null);
+  // Removes the in-flight drag's window listeners (and resets body styles).
+  // Held in a ref so unmount can tear down a drag that never got a pointerup.
+  const dragCleanupRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -302,10 +305,12 @@ export function ResizeHandle({
       window.removeEventListener('pointermove', onMove);
       window.removeEventListener('pointerup', onUp);
       window.removeEventListener('pointercancel', onCancel);
+      dragCleanupRef.current = null;
     }
     window.addEventListener('pointermove', onMove);
     window.addEventListener('pointerup', onUp);
     window.addEventListener('pointercancel', onCancel);
+    dragCleanupRef.current = cleanup;
   }, [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign]);
 
   // --- Keyboard ---
@@ -376,20 +381,25 @@ export function ResizeHandle({
   }, [isDisabled, resizable]);
 
   // --- Cleanup on unmount ---
+  // A drag in flight when the handle unmounts never gets its pointerup, so
+  // tear down the window listeners here too — otherwise every pointermove
+  // keeps driving the (still-mounted) region's resize state after the handle
+  // is gone, and the body cursor/user-select overrides stick.
   useEffect(() => {
     return () => {
-      if (isDragging) {
+      if (dragCleanupRef.current) {
+        dragCleanupRef.current();
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
       }
     };
-  }, [isDragging]);
+  }, []);
 
   // --- ARIA ---
   const ariaValueNow = resizable ? resizable._size : undefined;
   const ariaValueMin = resizable ? resizable._minSizePx : undefined;
   const ariaValueMax = resizable && resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: mergeRefs(ref, handleRef),
     role: "separator",
     "aria-orientation": isHorizontal ? 'vertical' : 'horizontal',
@@ -405,7 +415,16 @@ export function ResizeHandle({
     "data-resizing": isDragging || undefined,
     ...mergeProps(themeProps('resize-handle'), stylex.props(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
     ...props,
-    children: [/*#__PURE__*/_jsx("div", {
+    // Keyboard resizing must fire from the focusable separator, not a child:
+    // keydown fires on the focused element and bubbles up, so a handler on a
+    // descendant never runs (per the WAI-ARIA window-splitter pattern).
+    // Placed after {...props} and composed with any consumer onKeyDown so
+    // this accessibility-critical handler can't be clobbered by a passed prop.
+    onKeyDown: e => {
+      props.onKeyDown?.(e);
+      handleKeyDown(e);
+    },
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical, isHorizontal ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide)) : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)), isDisabled && styles.disabled),
       onPointerDown: handlePointerDown,
       onPointerEnter: () => setIsHovered(true),
@@ -413,11 +432,10 @@ export function ResizeHandle({
         if (!isDragging) {
           setIsHovered(false);
         }
-      },
-      onKeyDown: handleKeyDown
-    }), children ?? /*#__PURE__*/_jsx("div", {
+      }
+    }, void 0, false), children ?? /*#__PURE__*/_jsxDEV("div", {
       ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide !== 'center' && (isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1)), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 ResizeHandle.displayName = 'ResizeHandle';

package/dist/Section/Section.js

@@ -40,7 +40,7 @@ import { themeProps } from "../utils/themeProps.js";
  * Visual variant for the section.
  * Extensible via module augmentation of SectionVariantMap.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const variantStyles = {
   section: {
     kWkggS: "x10xzikg",
@@ -157,7 +157,7 @@ export function Section({
   const effectivePadding = padding ?? 4;
   const paddingToken = spacingStepToToken[effectivePadding];
   const outerStylex = stylex.props(nestedStyles.outer, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), xstyle);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     className: [outerStylex.className, className].filter(Boolean).join(' ') || undefined,
     style: style && outerStylex.style ? {
@@ -165,7 +165,7 @@ export function Section({
       ...style
     } : style || outerStylex.style,
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...mergeProps(themeProps('section', {
         variant
       }), stylex.props(nestedStyles.inner, ...container(useThemeDefault ? {
@@ -177,7 +177,7 @@ export function Section({
         paddingOuterY: paddingToken
       }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], !useThemeDefault && sectionPaddingPropagationStyles[effectivePadding], paddingBlock != null && paddingBlockStyles[paddingBlock], paddingBlock != null && containerPaddingBlockStartVarStyles[paddingBlock], paddingBlock != null && containerPaddingBlockEndVarStyles[paddingBlock], variantStyles[variant], dividers?.includes('top') && dividerStyles.top, dividers?.includes('bottom') && dividerStyles.bottom, dividers?.includes('start') && dividerStyles.start, dividers?.includes('end') && dividerStyles.end)),
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 Section.displayName = 'Section';

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -73,7 +73,7 @@ export interface SegmentedControlProps extends Omit<BaseProps<HTMLDivElement>, '
  * </SegmentedControl>
  * ```
  */
-export declare function SegmentedControl({ ref, value, onChange, label, size: sizeProp, layout, isDisabled, disabledMessage, children, xstyle, className, style, }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ ref, value, onChange, label, size: sizeProp, layout, isDisabled, disabledMessage, children, xstyle, className, style, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, ...rest }: SegmentedControlProps): React.JSX.Element;
 export declare namespace SegmentedControl {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA8CD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,qBAqHvB;yBAlIe,gBAAgB"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA8CD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAuIvB;yBAxJe,gBAAgB"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -22,10 +22,10 @@ import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
 import { useTooltip } from "../Tooltip/index.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -98,7 +98,11 @@ export function SegmentedControl({
   children,
   xstyle,
   className,
-  style
+  style,
+  onKeyDown: onKeyDownProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  ...rest
 }) {
   const size = useSize(sizeProp, 'md');
 
@@ -136,9 +140,13 @@ export function SegmentedControl({
     isEnabled: !isDisabled
   });
   const handleContainerKeyDown = useCallback(e => {
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
     hint.onKeyDown(e);
     handleKeyDown(e);
-  }, [hint, handleKeyDown]);
+  }, [onKeyDownProp, hint, handleKeyDown]);
 
   // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
   // so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
@@ -148,11 +156,24 @@ export function SegmentedControl({
   // and the already-selected value is skipped so an initial Tab-in (or a click
   // on the current segment) is a no-op, matching click behavior.
   const handleContainerFocus = useCallback(e => {
+    onFocusProp?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
     hint.onFocus(e);
     handleFocus(e);
     if (isDisabled) {
       return;
     }
+    // Only select when focus moved WITHIN the group (arrow/Home/End — APG
+    // selection-follows-focus). When focus is entering from outside, Tab
+    // must stay a pure focus move: with an unmatched or disabled-selected
+    // value the roving tab stop falls back to the first enabled radio, and
+    // selecting it here would rewrite the form value on mere traversal.
+    // Clicks are unaffected: the item's own handleClick selects.
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
     const focused = e.target?.closest('[role="radio"][data-value]');
     if (!focused || focused.getAttribute('aria-disabled') === 'true') {
       return;
@@ -161,7 +182,7 @@ export function SegmentedControl({
     if (nextValue != null && nextValue !== value) {
       onChange(nextValue);
     }
-  }, [hint, handleFocus, isDisabled, onChange, value]);
+  }, [onFocusProp, hint, handleFocus, isDisabled, onChange, value]);
   const contextValue = useMemo(() => ({
     value,
     onChange,
@@ -170,22 +191,23 @@ export function SegmentedControl({
     isDisabled,
     hasDisabledMessage: showsDisabledMessage
   }), [value, onChange, size, layout, isDisabled, showsDisabledMessage]);
-  return /*#__PURE__*/_jsxs(SegmentedControlContext, {
+  return /*#__PURE__*/_jsxDEV(SegmentedControlContext, {
     value: contextValue,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: mergeRefs(ref, listRef, disabledMessageTooltip.ref),
+      ...rest,
       role: "radiogroup",
       "aria-label": label,
       "aria-disabled": isDisabled || undefined,
       "aria-describedby": showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
       onKeyDown: handleContainerKeyDown,
       onFocus: handleContainerFocus,
-      onBlur: hint.onBlur,
+      onBlur: composeEventHandlers(onBlurProp, hint.onBlur),
       ...mergeProps(themeProps('segmented-control', {
         size
       }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && (showsDisabledMessage ? styles.disabledWithMessage : styles.disabled), xstyle), className, style),
       children: [children, hint.hintElement]
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+    }, void 0, true), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  }, void 0, true);
 }
 SegmentedControl.displayName = 'SegmentedControl';

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, }: SegmentedControlItemProps): React.JSX.Element;
+export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, ...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;AAezD,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,GACnB,EAAE,yBAAyB,qBA6D3B;yBApEe,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;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"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -14,14 +14,14 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
  * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { useSegmentedControlContext } from "./SegmentedControlContext.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, composeEventHandlers } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -134,7 +134,9 @@ export function SegmentedControlItem({
   label,
   isLabelHidden = false,
   icon,
-  isDisabled = false
+  isDisabled = false,
+  onClick: onClickProp,
+  ...rest
 }) {
   const ctx = useSegmentedControlContext();
   const isSelected = ctx.value === value;
@@ -146,17 +148,21 @@ export function SegmentedControlItem({
   const keepsSelectedFocusable = isSelected && (ctx.hasDisabledMessage ?? false) && !isDisabled;
   const size = ctx.size;
   const isFill = ctx.layout === 'fill';
-  const handleClick = useCallback(() => {
+
+  // Consumer-first: a consumer onClick can call preventDefault() to opt out of
+  // selection; otherwise selection proceeds when enabled and not selected.
+  const handleClick = composeEventHandlers(onClickProp, () => {
     if (!isItemDisabled && !isSelected) {
       ctx.onChange(value);
     }
-  }, [ctx, value, isItemDisabled, isSelected]);
-  const iconElement = icon ? /*#__PURE__*/_jsx("span", {
+  });
+  const iconElement = icon ? /*#__PURE__*/_jsxDEV("span", {
     ...stylex.props(styles.icon, iconSizeStyles[size]),
     children: icon
-  }) : null;
-  return /*#__PURE__*/_jsxs("button", {
+  }, void 0, false) : null;
+  return /*#__PURE__*/_jsxDEV("button", {
     ref: ref,
+    ...rest,
     type: "button",
     role: "radio",
     "aria-checked": isSelected,
@@ -176,9 +182,9 @@ export function SegmentedControlItem({
       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)),
-    children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsx("span", {
+    children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsxDEV("span", {
       children: label
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 SegmentedControlItem.displayName = 'SegmentedControlItem';

package/dist/SelectableCard/SelectableCard.js

@@ -37,7 +37,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   interactive: {
     kVAEAm: "x1n2onr6",
@@ -237,7 +237,7 @@ export function SelectableCard({
     onMouseUp(e);
     onMouseUpProp(e);
   } : onMouseUp;
-  return /*#__PURE__*/_jsxs(Card, {
+  return /*#__PURE__*/_jsxDEV(Card, {
     ref: mergeRefs(ref, containerRef),
     width: width,
     height: height,
@@ -255,7 +255,7 @@ export function SelectableCard({
     onClick: !isDisabled ? composedOnClick : undefined,
     onMouseUp: !isDisabled ? composedOnMouseUp : undefined,
     ...props,
-    children: [/*#__PURE__*/_jsx("input", {
+    children: [/*#__PURE__*/_jsxDEV("input", {
       ref: interactiveRef,
       type: "checkbox",
       checked: isSelected,
@@ -265,7 +265,7 @@ export function SelectableCard({
       ...{
         className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
       }
-    }), children]
-  });
+    }, void 0, false), children]
+  }, void 0, true);
 }
 SelectableCard.displayName = 'SelectableCard';

package/dist/Selector/Selector.js

@@ -35,7 +35,7 @@ import { themeProps } from "../utils/themeProps.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   triggerContainer: {
     kVAEAm: "x1n2onr6",
@@ -158,10 +158,10 @@ const STATUS_ICON_COLOR_MAP = {
 function DefaultOption({
   option
 }) {
-  return /*#__PURE__*/_jsx(SelectorOption, {
+  return /*#__PURE__*/_jsxDEV(SelectorOption, {
     icon: option.icon,
     label: option.label ?? option.value
-  });
+  }, void 0, false);
 }
 
 /**
@@ -388,11 +388,11 @@ export function Selector(props) {
     if (!hasSearch) {
       return null;
     }
-    return /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "xf314gf xu0wf1k"
       },
-      children: /*#__PURE__*/_jsx("input", {
+      children: /*#__PURE__*/_jsxDEV("input", {
         ref: searchRef,
         id: searchId
         // When hasSearch is set, focus moves into this input on open, so it —
@@ -420,15 +420,15 @@ export function Selector(props) {
         ...{
           className: "x9f619 xh8yej3 xu0wf1k xf314gf x1litavf x1y0btm7 xvy26l8 xh6dtrn x10xzikg x9ynric xcr08ib xdk3u5w x1tgivj0 x1a2a7pz xzeu18z x1wfwxd8"
         }
-      })
-    });
+      }, void 0, false)
+    }, void 0, false);
   }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown, popover.isOpen, highlightedIndex, getItemId]);
 
   // Render an individual item
   const renderItem = useCallback((item, flatIndex) => {
     const isHighlighted = flatIndex === highlightedIndex;
     const isSelected = item.value === normalizedValue;
-    return /*#__PURE__*/_jsxs("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       id: getItemId(flatIndex),
       role: "option",
       "aria-selected": isSelected,
@@ -436,19 +436,19 @@ export function Selector(props) {
       onClick: () => onItemSelect(item),
       onMouseEnter: () => onItemMouseEnter(item, flatIndex),
       ...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
         },
-        children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
+        children: renderOption ? renderOption(item) : /*#__PURE__*/_jsxDEV(DefaultOption, {
           option: item
-        })
-      }), isSelected && /*#__PURE__*/_jsx(Icon, {
+        }, void 0, false)
+      }, void 0, false), isSelected && /*#__PURE__*/_jsxDEV(Icon, {
         icon: "check",
         size: "sm",
         color: "accent"
-      })]
-    }, item.value);
+      }, void 0, false)]
+    }, item.value, true);
   }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
 
   // Render all options (handling sections/dividers)
@@ -456,12 +456,12 @@ export function Selector(props) {
     // When search is active, render filtered items flat (no sections/dividers)
     if (hasSearch && searchQuery) {
       if (filteredItems.length === 0) {
-        return [/*#__PURE__*/_jsx("div", {
+        return [/*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
           },
           children: "No results found"
-        }, "empty")];
+        }, "empty", false)];
       }
       return filteredItems.map((item, index) => renderItem(item, index));
     }
@@ -470,9 +470,9 @@ export function Selector(props) {
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
       if (isDivider(option)) {
-        elements.push(/*#__PURE__*/_jsx(Divider, {
+        elements.push(/*#__PURE__*/_jsxDEV(Divider, {
           xstyle: styles.divider
-        }, `divider-${i}`));
+        }, `divider-${i}`, false));
       } else if (isSection(option)) {
         const sectionItems = [];
         for (const opt of option.options) {
@@ -480,16 +480,16 @@ export function Selector(props) {
           flatIndex++;
         }
         if (option.title) {
-          elements.push(/*#__PURE__*/_jsx(Divider, {
+          elements.push(/*#__PURE__*/_jsxDEV(Divider, {
             label: option.title,
             xstyle: styles.sectionDivider
-          }, `section-divider-${i}`));
+          }, `section-divider-${i}`, false));
         }
-        elements.push(/*#__PURE__*/_jsx("div", {
+        elements.push(/*#__PURE__*/_jsxDEV("div", {
           role: "group",
           "aria-label": option.title,
           children: sectionItems
-        }, `section-${i}`));
+        }, `section-${i}`, false));
       } else if (isOptionData(option)) {
         elements.push(renderItem(normalizeOption(option), flatIndex));
         flatIndex++;
@@ -497,8 +497,8 @@ export function Selector(props) {
     }
     return elements;
   }, [options, renderItem, hasSearch, searchQuery, filteredItems]);
-  const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
+  const selectorContent = /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: el => {
         popover.triggerRef(el);
         // Anchor + hover/focus listeners for the disabled-message tooltip.
@@ -515,10 +515,10 @@ export function Selector(props) {
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
-      }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      }), inputGroup && /*#__PURE__*/_jsxDEV(VisuallyHidden, {
         id: inputLabelId,
         children: label
-      }), /*#__PURE__*/_jsx("button", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("button", {
         ref: triggerRef,
         id: triggerId,
         type: "button"
@@ -548,13 +548,13 @@ export function Selector(props) {
         ...{
           className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz"
         },
-        children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1iyjqo2 xeuugli xb3r6kr xlyipyv xuxw1ft x1yc453h"
           },
           children: selectedItem?.label ?? placeholder
-        })
-      }), htmlName != null && /*#__PURE__*/_jsx("input", {
+        }, void 0, false)
+      }, void 0, false), htmlName != null && /*#__PURE__*/_jsxDEV("input", {
         type: "hidden",
         name: htmlName,
         value: value ?? ''
@@ -562,21 +562,21 @@ export function Selector(props) {
         // mirror that for the hidden carrier.
         ,
         disabled: isDisabled
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      }, void 0, false), isBusy && /*#__PURE__*/_jsxDEV(Spinner, {
         size: "sm"
-      }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx("button", {
+      }, void 0, false), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsxDEV("button", {
         type: "button",
         onClick: handleClear,
         "aria-label": `Clear ${label}`,
         ...{
           className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
         },
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Icon, {
           icon: "close",
           size: "sm",
           color: "secondary"
-        })
-      }), /*#__PURE__*/_jsx("span", {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...{
           0: {
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
@@ -591,18 +591,18 @@ export function Selector(props) {
             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, {
+        children: status ? /*#__PURE__*/_jsxDEV(Icon, {
           icon: STATUS_ICON_MAP[status.type],
           size: "sm",
           color: STATUS_ICON_COLOR_MAP[status.type]
-        }) : /*#__PURE__*/_jsx(Icon, {
+        }, void 0, false) : /*#__PURE__*/_jsxDEV(Icon, {
           icon: "chevronDown",
           size: "sm",
           color: "inherit"
-        })
-      })]
-    }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
-      children: [renderSearch(), /*#__PURE__*/_jsx("div", {
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true), popover.render(hasSearch ? /*#__PURE__*/_jsxDEV("div", {
+      children: [renderSearch(), /*#__PURE__*/_jsxDEV("div", {
         ref: listboxRef,
         id: listboxId,
         role: "listbox",
@@ -611,8 +611,8 @@ export function Selector(props) {
           className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
         },
         children: renderOptions()
-      })]
-    }) : /*#__PURE__*/_jsx("div", {
+      }, void 0, false)]
+    }, void 0, true) : /*#__PURE__*/_jsxDEV("div", {
       ref: listboxRef,
       id: listboxId,
       role: "listbox",
@@ -626,17 +626,17 @@ export function Selector(props) {
         }
       }[!!!isPositioned << 0],
       children: renderOptions()
-    }), {
+    }, void 0, false), {
       placement: popoverPlacement,
       alignment: 'start',
       xstyle: [styles.popover, layerAnimations[popoverPlacement]],
       style: popoverOffsetStyle
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+  }, void 0, true);
   if (inputGroup) {
     return selectorContent;
   }
-  return /*#__PURE__*/_jsx(Field, {
+  return /*#__PURE__*/_jsxDEV(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -653,6 +653,6 @@ export function Selector(props) {
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent
-  });
+  }, void 0, false);
 }
 Selector.displayName = 'Selector';