@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

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);
 }
 
 /**
@@ -197,6 +197,7 @@ export function Selector(props) {
     status,
     labelTooltip,
     startIcon,
+    htmlName,
     renderOption,
     hasSearch = false,
     searchPlaceholder = 'Search...',
@@ -387,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 —
@@ -419,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,
@@ -435,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)
@@ -455,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));
     }
@@ -469,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) {
@@ -479,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++;
@@ -496,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.
@@ -514,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"
@@ -547,27 +548,35 @@ 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
-        })
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        }, void 0, false)
+      }, void 0, false), htmlName != null && /*#__PURE__*/_jsxDEV("input", {
+        type: "hidden",
+        name: htmlName,
+        value: value ?? ''
+        // Disabled native controls are excluded from form submission;
+        // mirror that for the hidden carrier.
+        ,
+        disabled: isDisabled
+      }, 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"
@@ -582,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",
@@ -602,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",
@@ -617,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,
@@ -644,6 +653,6 @@ export function Selector(props) {
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent
-  });
+  }, void 0, false);
 }
 Selector.displayName = 'Selector';

package/dist/Selector/SelectorOption.js

@@ -13,7 +13,7 @@ import { renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const embeddedStyles = {
   root: {
     k8WAf4: "xt970qd",
@@ -54,7 +54,7 @@ export function SelectorOption({
   className,
   style
 }) {
-  return /*#__PURE__*/_jsx(Item, {
+  return /*#__PURE__*/_jsxDEV(Item, {
     startContent: icon ? renderIconSlot(icon, {
       size: 'sm',
       color: 'secondary'
@@ -67,6 +67,6 @@ export function SelectorOption({
       className,
       style
     })
-  });
+  }, void 0, false);
 }
 SelectorOption.displayName = 'SelectorOption';

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;AAwJ/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,+BA4Pd;yBA3Qe,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;AAwJ/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,+BAgQd;yBA/Qe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -38,7 +38,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 
 /** Width below which dragging collapses the sidebar (when collapsible). */
-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 COLLAPSE_THRESHOLD = 160;
 
 // =============================================================================
@@ -193,18 +193,18 @@ export function SideNav({
   // Topbar mode — heading + footerIcons in a horizontal bar
   // =========================================================================
   if (renderMode === 'topbar') {
-    return /*#__PURE__*/_jsxs("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       "data-testid": testId,
       ...mergeProps(themeProps('side-nav', {
         mode: 'topbar'
       }), stylex.props(styles.topbar, xstyle), className, style),
-      children: [header, /*#__PURE__*/_jsx("div", {
+      children: [header, /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
         },
         children: footerIcons
-      })]
-    });
+      }, void 0, false)]
+    }, void 0, true);
   }
 
   // =========================================================================
@@ -212,21 +212,21 @@ export function SideNav({
   // =========================================================================
   const hasDrawerFooter = !!(footer || footerIcons);
   if (renderMode === 'drawer') {
-    return /*#__PURE__*/_jsxs(MobileNav, {
+    return /*#__PURE__*/_jsxDEV(MobileNav, {
       header: header,
       "data-testid": testId,
-      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
+      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
+        children: [footer, footerIcons && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
           children: footerIcons
-        })]
-      })]
-    });
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true);
   }
 
   // =========================================================================
@@ -234,19 +234,19 @@ export function SideNav({
   // Used when TopNav owns the drawer and SideNav items are nested inside
   // =========================================================================
   if (renderMode === 'drawer-content') {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es x11xkdxz x13fuv20 x1pc3f07"
         },
-        children: [footer, footerIcons && /*#__PURE__*/_jsx("div", {
+        children: [footer, footerIcons && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
           children: footerIcons
-        })]
-      })]
-    });
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true);
   }
 
   // =========================================================================
@@ -254,20 +254,24 @@ export function SideNav({
   // =========================================================================
   const hasStickyTop = !!(header || topContent);
   const hasStickyBottom = !!(footer || footerIcons);
+  // The built-in collapse button only renders when collapse is enabled and it
+  // hasn't been opted out via `collapsible.hasButton: false` (e.g. when the
+  // consumer places a SideNavCollapseButton in the header instead).
+  const showCollapseButton = isCollapsible && hasCollapseButton;
 
   // When resizable, override the nav width via inline style
   const resizableNavStyle = isResizable ? {
     ...(style ?? {}),
     width: collapsed ? undefined : resizableHook.size
   } : style;
-  const navElement = /*#__PURE__*/_jsxs("nav", {
+  const navElement = /*#__PURE__*/_jsxDEV("nav", {
     ref: mergeRefs(ref, navRef),
     role: "navigation",
     "aria-label": "Side navigation",
     "data-testid": testId,
     ...mergeProps(themeProps('side-nav'), stylex.props(styles.root, collapsed && styles.rootCollapsed, xstyle), className, resizableNavStyle),
     ...props,
-    children: [hasStickyTop && /*#__PURE__*/_jsxs("div", {
+    children: [hasStickyTop && /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x2lah0s x7wzq59 x13vifvy x1vjfegm xgcd1z6 x1xye8es x1wesfrj xf314gf x1txdalj"
@@ -276,11 +280,11 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s x7wzq59 x13vifvy x1vjfegm xgcd1z6 x1xye8es x1wesfrj xf314gf x1txdalj x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [header, topContent && /*#__PURE__*/_jsx("div", {
+      children: [header, topContent && /*#__PURE__*/_jsxDEV("div", {
         ...{},
         children: topContent
-      })]
-    }), /*#__PURE__*/_jsx("div", {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "x98rzlu x1odjw0f x6ikm8r xf314gf x1xye8es x1wesfrj"
@@ -308,7 +312,7 @@ export function SideNav({
         }
       }[!!collapsed << 2 | !!hasStickyTop << 1 | !!hasStickyBottom << 0],
       children: children
-    }), (hasStickyBottom || isCollapsible) && /*#__PURE__*/_jsxs("div", {
+    }, void 0, false), (hasStickyBottom || showCollapseButton) && /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf xfsso4q x1wesfrj x11xkdxz x13fuv20 x1pc3f07"
@@ -317,7 +321,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj x11xkdxz x13fuv20 x1pc3f07 xexx8yu"
         }
       }[!!collapsed << 0],
-      children: [footer, /*#__PURE__*/_jsxs("div", {
+      children: [footer, /*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw"
@@ -326,19 +330,19 @@ export function SideNav({
             className: "x78zum5 x6s0dn4 xzye2dw x3ieub6"
           }
         }[!!collapsed << 0],
-        children: [isCollapsible && hasCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
-      })]
-    })]
-  });
+        children: [showCollapseButton && /*#__PURE__*/_jsxDEV(SideNavCollapseButton, {}, void 0, false), footerIcons]
+      }, void 0, true)]
+    }, void 0, true)]
+  }, void 0, true);
 
   // Overlay drag handle inside the nav when resizable.
   // Uses ResizeHandle in overlay mode so the handle sits inside
   // the panel's overflow: clip bounds.
-  const content = showResizeHandle ? /*#__PURE__*/_jsxs("div", {
+  const content = showResizeHandle ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x1n2onr6 x78zum5 x2lah0s x5yr21d"
     },
-    children: [navElement, /*#__PURE__*/_jsx(ResizeHandle, {
+    children: [navElement, /*#__PURE__*/_jsxDEV(ResizeHandle, {
       "data-testid": "astryx-sidenav-resize-handle",
       direction: "horizontal",
       position: "overlay",
@@ -346,13 +350,13 @@ export function SideNav({
       isAlwaysVisible: false,
       resizable: resizableHook.props,
       label: "Resize sidebar"
-    })]
-  }) : navElement;
+    }, void 0, false)]
+  }, void 0, true) : navElement;
   if (isCollapsible) {
-    return /*#__PURE__*/_jsx(SideNavCollapseContext, {
+    return /*#__PURE__*/_jsxDEV(SideNavCollapseContext, {
       value: collapseContext,
       children: content
-    });
+    }, void 0, false);
   }
   return content;
 }

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -53,7 +53,7 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  * <SideNav handleRef={ref} collapsible>...</SideNav>
  * ```
  */
-export declare function SideNavCollapseButton({ ref, handleRef, label, children, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
+export declare function SideNavCollapseButton({ ref, handleRef, label, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
 export declare namespace SideNavCollapseButton {
     var displayName: string;
 }

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;AAC5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAwBlC,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,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAgC5B;yBAtCe,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;AAwBlC,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,4BAgC5B;yBAvCe,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -22,13 +22,14 @@ 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 { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Types
 // =============================================================================
@@ -63,6 +64,7 @@ export function SideNavCollapseButton({
   handleRef,
   label,
   children,
+  onClick: onClickProp,
   ...props
 }) {
   const {
@@ -79,13 +81,13 @@ export function SideNavCollapseButton({
   if (!isCollapsible || isMobile) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Button, {
+  return /*#__PURE__*/_jsxDEV(Button, {
     ref: ref,
     label: label ?? (isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'),
     variant: "ghost",
     ...props,
-    onClick: toggle,
-    icon: children ?? /*#__PURE__*/_jsx("span", {
+    onClick: composeEventHandlers(onClickProp, toggle),
+    icon: children ?? /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x3nfvp2 x6s0dn4 x11xpdln xuedmi6 xlr8y92"
@@ -95,9 +97,9 @@ export function SideNavCollapseButton({
         }
       }[!!isCollapsed << 0],
       children: getIcon('chevronLeft')
-    }),
+    }, void 0, false),
     isIconOnly: true
-  });
+  }, void 0, false);
 }
 SideNavCollapseButton.displayName = 'SideNavCollapseButton';
 function useSideNavCollapseState(handleRef) {