@astryxdesign/core 0.4.1 → 0.4.2-canary.356d2f9

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,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkE5C,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,qBA8GpB;yBA1He,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsF5C,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,qBA8GpB;yBA1He,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -52,6 +52,11 @@ const styles = {
     kSiTet: "xg01cxk",
     kkrTdU: "x1ypdohk",
     kY2c9j: "x1vjfegm",
+    k7Eaqz: "xkagaj0",
+    kAzted: "x80b3aj",
+    k87sOh: "xijlfn0",
+    kLqNvP: "x1hsn8va",
+    k3aq6I: "x8i4i9p",
     $$css: true
   },
   inputDisabled: {

package/dist/SideNav/SideNav.d.ts

@@ -19,7 +19,7 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import { type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
 import type { ResizableConfig } from '../Resizable/useResizable';
 export interface SideNavProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
@@ -28,6 +28,9 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
      * Imperative collapse handle for SideNavCollapseButton instances rendered
      * outside this SideNav. This intentionally stays separate from `ref`, which
      * continues to expose the root HTMLElement.
+     *
+     * @deprecated Hand the same controlled `collapsible` config to SideNav and
+     * to the outside button instead.
      */
     handleRef?: React.Ref<SideNavImperativeCollapseHandle>;
     /**
@@ -98,19 +101,14 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
      * - `true` — enables collapse with default toggle button and uncontrolled state
      * - Object — enables collapse with advanced configuration:
      *   - `defaultIsCollapsed` — start collapsed (uncontrolled)
-     *   - `isCollapsed` + `onCollapsedChange` — controlled mode
+     *   - `isCollapsed` + `onCollapsedChange` — controlled mode. Pass the same
+     *     object to a `SideNavCollapseButton` rendered outside this SideNav
      *   - `hasButton` — render built-in collapse button (default: true)
      *   - `buttonLabel` — accessibility label for the collapse button
      *
      * @default false
      */
-    collapsible?: boolean | {
-        defaultIsCollapsed?: boolean;
-        isCollapsed?: boolean;
-        onCollapsedChange?: (isCollapsed: boolean) => void;
-        hasButton?: boolean;
-        buttonLabel?: string;
-    };
+    collapsible?: boolean | SideNavCollapsibleConfig;
 }
 /**
  * Sidebar navigation container for application pages.

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;AAmJ/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,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AA2J/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;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;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;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,+BAiRd;yBAhSe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -32,6 +32,7 @@ import { MobileNav } from "../MobileNav/MobileNav.js";
 import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
+import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
@@ -75,6 +76,13 @@ const styles = {
   }
 };
 
+/**
+ * Cascaded to the icon rows through `SizeContext` so the built-in collapse
+ * button and the consumer's `footerIcons` come out one height. An explicit
+ * `size` on a child still wins.
+ */
+const FOOTER_ICON_SIZE = 'sm';
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -160,6 +168,9 @@ export function SideNav({
   });
   const toggle = useCallback(() => {
     const next = !collapsed;
+
+    // Deprecated `handleRef` path only: an out-of-tree button reads this
+    // snapshot while rendering, which can happen before SideNav re-renders.
     collapseStateRef.current = {
       ...collapseStateRef.current,
       isCollapsed: next
@@ -204,7 +215,10 @@ export function SideNav({
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
         },
-        children: footerIcons
+        children: /*#__PURE__*/_jsx(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: footerIcons
+        })
       })]
     });
   }
@@ -217,6 +231,10 @@ export function SideNav({
     return /*#__PURE__*/_jsxs(MobileNav, {
       header: header,
       "data-testid": testId,
+      xstyle: xstyle,
+      className: className,
+      style: style,
+      ...props,
       children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
@@ -225,7 +243,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -245,7 +266,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -323,7 +347,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [footer, /*#__PURE__*/_jsxs("div", {
+      children: [footer, /*#__PURE__*/_jsx("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw"
@@ -332,7 +356,10 @@ export function SideNav({
             className: "x78zum5 x6s0dn4 xzye2dw x3ieub6"
           }
         }[!!collapsed << 0],
-        children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        children: /*#__PURE__*/_jsxs(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        })
       })]
     })]
   });

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -5,7 +5,7 @@
  * @position Composable toggle button for sidenav collapse
  *
  * Place inside SideNav (reads context automatically) or outside
- * (pass handleRef to connect). Customizable via label/children.
+ * (pass the same controlled `collapsible` config both get).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
@@ -14,12 +14,20 @@
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import { type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import { type SideNavControlledCollapsible, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import type { ElementSize } from '../SizeContext/SizeContext';
 export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
     /**
-     * Imperative handle from SideNav. Only needed when the button is rendered
-     * outside the sidenav, where collapse context is unavailable.
+     * The same controlled `collapsible` config given to SideNav
+     * (`{isCollapsed, onCollapsedChange}`). Needed only when the button is
+     * rendered outside the sidenav, where collapse context cannot reach it.
+     */
+    collapsible?: SideNavControlledCollapsible;
+    /**
+     * Imperative handle from SideNav.
+     *
+     * @deprecated Pass `collapsible` instead.
      */
     handleRef?: React.RefObject<SideNavImperativeCollapseHandle | null>;
     /**
@@ -27,6 +35,12 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
      * with the chevron icon. When omitted, renders as an icon-only button.
      */
     label?: string;
+    /**
+     * Button size. Defaults to the size its container cascades — `sm` in a
+     * SideNav footer — or `md` outside one. Set it for placements with no row
+     * to inherit from, e.g. a button placed in a `TopNav`.
+     */
+    size?: ElementSize;
     /**
      * Custom button content. Overrides the default chevron icon and label.
      */
@@ -37,7 +51,8 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * Place anywhere inside SideNav (header, topContent, footer, footerIcons)
  * and it reads collapse state from context automatically. For placement
- * outside the sidenav (e.g. in TopNav or content area), pass handleRef.
+ * outside the sidenav (e.g. in TopNav or content area), hold the state and
+ * hand the same `collapsible` config to both.
  *
  * @example
  * ```
@@ -48,12 +63,13 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * @example
  * ```
- * const ref = useRef(null);
- * <TopNav endContent={<SideNavCollapseButton handleRef={ref} />} />
- * <SideNav handleRef={ref} collapsible>...</SideNav>
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ * const collapsible = {isCollapsed, onCollapsedChange: setIsCollapsed};
+ * <TopNav endContent={<SideNavCollapseButton collapsible={collapsible} />} />
+ * <SideNav collapsible={{...collapsible, hasButton: false}}>...</SideNav>
  * ```
  */
-export declare function SideNavCollapseButton({ ref, handleRef, label, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
+export declare function SideNavCollapseButton({ ref, collapsible, handleRef, label, size, 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;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,4BA8C5B;yBArDe,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;AAKzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAkC5D,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAE3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAiD5B;yBA1De,qBAAqB"}

package/dist/SideNav/SideNavCollapseButton.js

@@ -9,14 +9,14 @@
  * @position Composable toggle button for sidenav collapse
  *
  * Place inside SideNav (reads context automatically) or outside
- * (pass handleRef to connect). Customizable via label/children.
+ * (pass the same controlled `collapsible` config both get).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/index.ts
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -26,17 +26,23 @@ import { composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { useTranslator } from "../i18n/index.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const styles = {
+  chevronMirror: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
   chevron: {
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
     k1ekBW: "x11xpdln",
-    kIyJzY: "xuedmi6",
+    kIyJzY: "xuedmi6 x12w9bfk",
     kAMwcw: "xlr8y92",
     $$css: true
   },
@@ -59,7 +65,8 @@ const styles = {
  *
  * Place anywhere inside SideNav (header, topContent, footer, footerIcons)
  * and it reads collapse state from context automatically. For placement
- * outside the sidenav (e.g. in TopNav or content area), pass handleRef.
+ * outside the sidenav (e.g. in TopNav or content area), hold the state and
+ * hand the same `collapsible` config to both.
  *
  * @example
  * ```
@@ -70,15 +77,18 @@ const styles = {
  *
  * @example
  * ```
- * const ref = useRef(null);
- * <TopNav endContent={<SideNavCollapseButton handleRef={ref} />} />
- * <SideNav handleRef={ref} collapsible>...</SideNav>
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ * const collapsible = {isCollapsed, onCollapsedChange: setIsCollapsed};
+ * <TopNav endContent={<SideNavCollapseButton collapsible={collapsible} />} />
+ * <SideNav collapsible={{...collapsible, hasButton: false}}>...</SideNav>
  * ```
  */
 export function SideNavCollapseButton({
   ref,
+  collapsible,
   handleRef,
   label,
+  size,
   children,
   onClick: onClickProp,
   ...props
@@ -88,7 +98,7 @@ export function SideNavCollapseButton({
     isCollapsed,
     toggle,
     isCollapsible
-  } = useSideNavCollapseState(handleRef);
+  } = useSideNavCollapseState(collapsible, handleRef);
   const {
     isMobile
   } = useAppShellMobile();
@@ -102,6 +112,7 @@ export function SideNavCollapseButton({
     ref: ref,
     label: label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar')),
     variant: "ghost",
+    size: size,
     ...props,
     onClick: composeEventHandlers(onClickProp, toggle),
     icon: children ??
@@ -111,7 +122,7 @@ export function SideNavCollapseButton({
     // element one would overwrite the other and the chevron would stop
     // mirroring under RTL. See utils/rtlStyles.ts.
     _jsx("span", {
-      ...stylex.props(rtlStyles.mirror),
+      ...stylex.props(styles.chevronMirror, rtlStyles.mirror),
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "chevronLeft",
         size: "sm",
@@ -123,17 +134,30 @@ export function SideNavCollapseButton({
   });
 }
 SideNavCollapseButton.displayName = 'SideNavCollapseButton';
-function useSideNavCollapseState(handleRef) {
+function useSideNavCollapseState(collapsible, handleRef) {
   const contextCollapseState = useSideNavCollapse();
+  const {
+    isCollapsed,
+    onCollapsedChange
+  } = collapsible ?? {};
+  const toggleCollapsible = useCallback(() => onCollapsedChange?.(!isCollapsed), [isCollapsed, onCollapsedChange]);
+  const toggleHandle = useCallback(() => {
+    handleRef?.current?.getCollapseState()?.toggle();
+  }, [handleRef]);
+  if (collapsible != null) {
+    return {
+      isCollapsed: isCollapsed ?? false,
+      toggle: toggleCollapsible,
+      isCollapsible: true
+    };
+  }
   if (handleRef == null) {
     return contextCollapseState;
   }
   const externalCollapseState = handleRef.current?.getCollapseState() ?? null;
   return {
     isCollapsed: externalCollapseState?.isCollapsed ?? false,
-    toggle: () => {
-      handleRef.current?.getCollapseState()?.toggle();
-    },
+    toggle: toggleHandle,
     isCollapsible: externalCollapseState?.isCollapsible ?? true
   };
 }

package/dist/SideNav/SideNavCollapseContext.d.ts

@@ -6,6 +6,27 @@ export interface SideNavCollapseState {
     /** Whether collapse is enabled */
     isCollapsible: boolean;
 }
+/** Object form of SideNav's `collapsible` prop. */
+export interface SideNavCollapsibleConfig {
+    defaultIsCollapsed?: boolean;
+    isCollapsed?: boolean;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    hasButton?: boolean;
+    buttonLabel?: string;
+}
+/**
+ * The controlled form: the consumer holds the state, so it can be handed to
+ * both SideNav and a SideNavCollapseButton rendered outside it.
+ */
+export interface SideNavControlledCollapsible extends SideNavCollapsibleConfig {
+    isCollapsed: boolean;
+    onCollapsedChange: (isCollapsed: boolean) => void;
+}
+/**
+ * @deprecated Pass the same controlled `collapsible` config to SideNav and to
+ * the out-of-tree SideNavCollapseButton instead. The state then reaches the
+ * button through props rather than through a ref.
+ */
 export interface SideNavImperativeCollapseHandle {
     getCollapseState: () => SideNavCollapseState | null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseContext.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseContext.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,OAAO,CAAC;CACxB;AAGD,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,EAAE,MAAM,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAGF;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}
+{"version":3,"file":"SideNavCollapseContext.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseContext.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,mDAAmD;AACnD,MAAM,WAAW,wBAAwB;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED;;;;GAIG;AACH,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,EAAE,MAAM,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,sBAAsB,+CAIjC,CAAC;AAGH;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}

package/dist/SideNav/SideNavCollapseContext.js

@@ -10,10 +10,24 @@
  *
  * Provides collapse state to SideNavCollapseButton and other
  * sidenav children. Set by SideNav when isCollapsible is true.
- * Also provides a small imperative handle for ref-based collapse buttons
- * rendered outside the SideNav tree.
+ * A button rendered outside the SideNav tree is out of context's reach and
+ * takes the controlled `collapsible` config as a prop instead.
  */
 import { createContext, use } from 'react';
+
+/** Object form of SideNav's `collapsible` prop. */
+
+/**
+ * The controlled form: the consumer holds the state, so it can be handed to
+ * both SideNav and a SideNavCollapseButton rendered outside it.
+ */
+
+/**
+ * @deprecated Pass the same controlled `collapsible` config to SideNav and to
+ * the out-of-tree SideNavCollapseButton instead. The state then reaches the
+ * button through props rather than through a ref.
+ */
+
 export const SideNavCollapseContext = /*#__PURE__*/createContext({
   isCollapsed: false,
   toggle: () => {},

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiN5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCA6drB;yBA9ee,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAoBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiN5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAwfrB;yBAzgBe,cAAc"}