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

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @xds/core
 
+# 0.1.4
+
+#### New Features
+
+- Code: add `color` and `size` props. `color` accepts `'primary' | 'secondary' | 'inherit'` and now defaults to `'primary'` (mirroring Text's color subset); previously the color was left to inherit implicitly. `size="inherit"` makes inline code adopt the surrounding text's `font-size` and `line-height`. Exports `CodeColor` and `CodeSize` types (#2846)
+- Markdown: support CommonMark link reference definitions. Reference-style "footer" links — full `[text][label]`, collapsed `[text][]`, and shortcut `[text]` (plus their `![alt]` image forms) — now resolve against a `[label]: destination "title"` block, which is stripped from the output instead of leaking as a visible paragraph. Labels match case-insensitively with collapsed whitespace; top-level definitions are collected across the document (so a reference can precede its definition, including in the streaming/incremental parser, whose settled-block cache invalidates when definitions change). Footnotes (`[^1]`) are intentionally left untouched. Known limit: a definition nested inside a blockquote/list resolves within that container but is not yet exposed document-wide. (#3621)
+- Native form participation for custom inputs via htmlName (#3343)
+  Switch, CheckboxInput, RadioList, Slider, Selector, MultiSelector, and Tokenizer now accept the same `htmlName` prop TextInput and NumberInput already had, so they serialize into native form submission. Components with a real native input (Switch, CheckboxInput, RadioList) forward the name; the synthetic controls render hidden inputs that mirror native semantics — one entry per value for MultiSelector/Tokenizer (like a multi-select), string value for Slider (two entries in range mode), and exclusion from FormData when disabled.
+- Add `useTableRowExpansion` — expand/collapse tree rows inline.
+
+#### Fixes
+
+- Button: keep edge compensation working when a ghost button also has a tooltip. The tooltip is now attached via the tooltip hook instead of a wrapper element, so the button stays a direct child of its container — no extra DOM node, no layout shift, and containers (Toolbar, Banner) still detect the edge-compensation marker via their direct-child `:has()` selector and pull the button flush to the optical edge. (#2578)
+- Calendar: stop range-highlighting adjacent-month (outside) days, and cap the range highlight where it meets a disabled or adjacent-month day. In the two-month range view the same date renders in both panes, so the spillover copy on the neighbouring month's pane was drawn as part of the selection; outside days now never receive selection, range, or preview state. A highlighted day next to a disabled or outside day now gets a rounded end cap so the run reads as properly terminated instead of running square-edged into the gap. (#2715)
+- Code and CommandPaletteEmpty now forward props correctly (#3620)
+  `Code` spreads rest props (`aria-*`, `role`, event handlers) onto the DOM element. `CommandPaletteEmpty` applies the `xstyle`/`className`/`style` escape hatches and theme props.
+- DateRangeInput: use the label type-size token for the trigger field. The trigger was reading the body size/leading tokens (`--text-body-size`/`--text-body-leading`) instead of the label ones (`--text-label-size`/`--text-label-leading`), so its text rendered a step larger than the other date inputs. (#3655)
+- Spinner: promote the canvas to its own compositor layer (`willChange: transform`) so rotation stays smooth on WebKit — fixes wobbly spinning in Safari and Tauri WebViews. (#3628)
+- Text: apply the documented `size` prop as a font-size override (#3615)
+  `Text` now reflects `size` in theme props and applies the corresponding typography size token after its type-based baseline styles. The override changes font size while preserving the selected text type's line-height, weight, and family behavior.
+
+#### Documentation
+
+- MobileNav previews with an open trigger instead of an empty stage: new playground.overlay for full-viewport overlay components, and inline sub-components can declare their own playground (#3616)
+
+#### Other Changes
+
+- Inherited-columns mode: child rows use the same columns as their parents,
+  indented by depth. Injects a chevron column; clicking (or right-click → "Expand/Collapse row") toggles a row's children.
+- Headless: the consumer owns `expandedKeys` state; the plugin provides the UI.
+  Pair with `useTableRowExpansionState` to flatten a tree into the visible rows.
+- Optional expand-all header toggle via `isAllExpanded` + `onToggleExpandAll`.
+- Optional `expandOnRowClick` to toggle by clicking anywhere in the row.
+- Contributes a context-menu action for expand/collapse (via the
+  `contextMenuActions` system).
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @ahfoysal
+- @arham766
+- @cixzhang
+- @durvesh1992
+- @humbertovirtudes
+- @jiunshinn
+- @lexs
+- @MeGaurav4
+
+---
+
 # 0.1.3
 
 #### Breaking Changes

package/dist/AlertDialog/AlertDialog.d.ts

@@ -89,7 +89,7 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
  * />
  * ```
  */
-export declare function AlertDialog({ ref, isOpen, isInline, onOpenChange, title, description, cancelLabel, actionLabel, actionVariant, isActionLoading, onAction, width, xstyle, className, style, 'data-testid': testId, }: AlertDialogProps): React.JSX.Element;
+export declare function AlertDialog({ ref, isOpen, isInline, onOpenChange, title, description, cancelLabel, actionLabel, actionVariant, isActionLoading, onAction, width, xstyle, className, style, 'data-testid': testId, ...rest }: AlertDialogProps): React.JSX.Element;
 export declare namespace AlertDialog {
     var displayName: string;
 }

package/dist/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,gBAAgB,qBAqDlB;yBAtEe,WAAW"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAsDlB;yBAxEe,WAAW"}

package/dist/AlertDialog/AlertDialog.js

@@ -26,7 +26,7 @@ import { Text } from "../Text/Text.js";
 import { Button } from "../Button/index.js";
 import { mergeProps } 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";
 /**
  * A confirmation dialog for destructive or irreversible actions.
  *
@@ -62,14 +62,16 @@ export function AlertDialog({
   xstyle,
   className,
   style,
-  'data-testid': testId
+  'data-testid': testId,
+  ...rest
 }) {
   const titleId = useId();
   const descriptionId = useId();
   const handleCancel = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  return /*#__PURE__*/_jsx(Dialog, {
+  return /*#__PURE__*/_jsxDEV(Dialog, {
+    ...rest,
     ref: ref,
     isOpen: isOpen,
     isInline: isInline,
@@ -85,36 +87,36 @@ export function AlertDialog({
     }),
     xstyle: xstyle,
     "data-testid": testId,
-    children: /*#__PURE__*/_jsx(Layout, {
-      content: /*#__PURE__*/_jsxs(LayoutContent, {
-        children: [/*#__PURE__*/_jsx(Heading, {
+    children: /*#__PURE__*/_jsxDEV(Layout, {
+      content: /*#__PURE__*/_jsxDEV(LayoutContent, {
+        children: [/*#__PURE__*/_jsxDEV(Heading, {
           level: 2,
           id: titleId,
           children: title
-        }), /*#__PURE__*/_jsx(Text, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(Text, {
           type: "body",
           color: "secondary",
           id: descriptionId,
           children: description
-        })]
-      }),
-      footer: /*#__PURE__*/_jsx(LayoutFooter, {
-        children: /*#__PURE__*/_jsxs(HStack, {
+        }, void 0, false)]
+      }, void 0, true),
+      footer: /*#__PURE__*/_jsxDEV(LayoutFooter, {
+        children: /*#__PURE__*/_jsxDEV(HStack, {
           gap: 2,
           hAlign: "end",
-          children: [/*#__PURE__*/_jsx(Button, {
+          children: [/*#__PURE__*/_jsxDEV(Button, {
             variant: "ghost",
             label: cancelLabel,
             onClick: handleCancel
-          }), /*#__PURE__*/_jsx(Button, {
+          }, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
             variant: actionVariant,
             label: actionLabel,
             onClick: onAction,
             isLoading: isActionLoading
-          })]
-        })
-      })
-    })
-  });
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 AlertDialog.displayName = 'AlertDialog';

package/dist/AlertDialog/useImperativeAlertDialog.js

@@ -15,7 +15,7 @@
  */
 import { useState, useCallback, useMemo } from 'react';
 import { AlertDialog } from "./AlertDialog.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Imperative alert dialog — show/hide without managing state.
  *
@@ -54,7 +54,7 @@ export function useImperativeAlertDialog() {
     if (!options) {
       return null;
     }
-    return /*#__PURE__*/_jsx(AlertDialog, {
+    return /*#__PURE__*/_jsxDEV(AlertDialog, {
       ...options,
       isOpen: isOpen,
       onOpenChange: open => {
@@ -62,7 +62,7 @@ export function useImperativeAlertDialog() {
           setIsOpen(false);
         }
       }
-    });
+    }, void 0, false);
   }, [isOpen, options]);
   return {
     show,

package/dist/AppShell/AppShell.d.ts

@@ -214,7 +214,7 @@ export interface AppShellProps extends BaseProps<HTMLDivElement> {
  * </AppShell>
  * ```
  */
-export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, }: AppShellProps): React.JSX.Element;
+export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, ...rest }: AppShellProps): React.JSX.Element;
 export declare namespace AppShell {
     var displayName: string;
 }

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,aAAa,qBA+Wf;yBA7Xe,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAgXf;yBA/Xe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -37,19 +37,19 @@ import { mergeProps, mergeRefs, isRenderable } from "../utils/index.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
   mode,
   children
-}) => /*#__PURE__*/_jsx(React.Activity, {
+}) => /*#__PURE__*/_jsxDEV(React.Activity, {
   mode: mode,
   children: children
-}) : ({
+}, void 0, false) : ({
   children
-}) => /*#__PURE__*/_jsx(_Fragment, {
+}) => /*#__PURE__*/_jsxDEV(_Fragment, {
   children: children
-});
+}, void 0, false);
 
 // =============================================================================
 // Constants
@@ -218,7 +218,8 @@ export function AppShell({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   // =========================================================================
   // Parse mobileNav prop — normalize to config, custom element, or disabled
@@ -327,39 +328,39 @@ export function AppShell({
   const mobileContentValue = hasSideNav && mobileNavHasToggle ?
   /*#__PURE__*/
   // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
-  _jsx(SideNavRenderContext, {
+  _jsxDEV(SideNavRenderContext, {
     value: "drawer-content",
     children: sideNav
-  }) : null;
+  }, void 0, false) : null;
   const drawerMobileContentValue = hasSideNav ?
   /*#__PURE__*/
   // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
-  _jsx(SideNavRenderContext, {
+  _jsxDEV(SideNavRenderContext, {
     value: "drawer-content",
     children: sideNav
-  }) : null;
-  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+  }, void 0, false) : null;
+  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
     value: mobileContentValue,
-    children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+    children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
       value: "mobile-bar",
       children: topNav
-    })
-  }) : topNav : null;
-  const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxs(LayoutHeader, {
+    }, void 0, false)
+  }, void 0, false) : topNav : null;
+  const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxDEV(LayoutHeader, {
     padding: 0,
     hasDivider: navHasDividers && hasTopNav,
-    children: [hasBanner && /*#__PURE__*/_jsx("div", {
+    children: [hasBanner && /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.banner, navAreaStyle),
       children: banner
-    }), hasTopNav && topNavContent]
-  }) : undefined;
-  const headerContent = headerInner != null ? /*#__PURE__*/_jsx("div", {
+    }, void 0, false), hasTopNav && topNavContent]
+  }, void 0, true) : undefined;
+  const headerContent = headerInner != null ? /*#__PURE__*/_jsxDEV("div", {
     ref: headerRef,
     ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
     children: headerInner
-  }) : undefined;
+  }, void 0, false) : undefined;
 
   // =========================================================================
   // Build sideNav content
@@ -369,7 +370,7 @@ export function AppShell({
   // below the header while the main content scrolls. A wrapper div applies
   // the sticky behavior since LayoutPanel doesn't accept style/className.
   // =========================================================================
-  const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsx(LayoutPanel, {
+  const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsxDEV(LayoutPanel, {
     padding: 0,
     hasDivider: navHasDividers,
     isScrollable: isFill,
@@ -378,36 +379,36 @@ export function AppShell({
     }),
     xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
     children: sideNav
-  }) : undefined;
-  const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsx("div", {
+  }, void 0, false) : undefined;
+  const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x2lah0s x7giv3 x7wzq59 xepuwc7 x16zugyo x78zum5 xdt5ytf"
     },
     children: sideNavPanel
-  }) : sideNavPanel;
+  }, void 0, false) : sideNavPanel;
 
   // =========================================================================
   // Build main content
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
-  const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
+  const mainInner = /*#__PURE__*/_jsxDEV(LayoutContent, {
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID,
     isScrollable: isFill,
     xstyle: contentAreaStyle,
     children: children
-  });
-  const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxs("div", {
+  }, void 0, false);
+  const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       className: "x1n2onr6 x78zum5 x98rzlu x2lwn1j x5yr21d"
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
       }
-    }), mainInner]
-  }) : mainInner;
+    }, void 0, false), mainInner]
+  }, void 0, true) : mainInner;
 
   // =========================================================================
   // Render
@@ -423,63 +424,64 @@ export function AppShell({
 
   // For sidenav-only layouts with no TopNav, render the sideNav in topbar
   // mode — it shows heading + footer icons horizontally, with the hamburger
-  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsx("div", {
+  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('app-shell-header', {
       variant
     }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
-    children: /*#__PURE__*/_jsx(LayoutHeader, {
+    children: /*#__PURE__*/_jsxDEV(LayoutHeader, {
       padding: 0,
       hasDivider: navHasDividers,
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 x6s0dn4 x1k15mir xf314gf"
         },
         role: "navigation",
         "aria-label": "Mobile navigation",
-        children: [/*#__PURE__*/_jsx(SideNavRenderContext, {
+        children: [/*#__PURE__*/_jsxDEV(SideNavRenderContext, {
           value: "topbar",
           children: sideNav
-        }), /*#__PURE__*/_jsx(MobileNavToggle, {})]
-      })
-    })
-  }) : undefined;
-  return /*#__PURE__*/_jsx(AppShellMobileContext, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(MobileNavToggle, {}, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false) : undefined;
+  return /*#__PURE__*/_jsxDEV(AppShellMobileContext, {
     value: mobileContextValue,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
+      ...rest,
       ref: mergeRefs(ref, shellRef),
       "data-testid": dataTestId,
       ...mergeProps(themeProps('app-shell', {
         variant
       }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("a", {
+      children: [/*#__PURE__*/_jsxDEV("a", {
         href: `#${MAIN_CONTENT_ID}`,
         ...{
           className: "x10l6tqk x1xrnuwo x1i1rx1s x1jqxupm xjm9jq1 x15cytp8 xt970qd xh2mrf5 xnjsko4 x1cf3d6k xkdpibf x1y5lnwp xb3r6kr xomzh7y x1hyvwdk x1rsz1da xuxw1ft x1hbpcn8 xc342km x13vifvy x1rw3289 x1o0tod xodanix x10xzikg xjse4m1 x1q2oy4v x1hl2dhg x2mo6ok xjm74w1"
         },
         "data-testid": "skip-to-content",
         children: "Skip to content"
-      }), /*#__PURE__*/_jsx(Layout, {
+      }, void 0, false), /*#__PURE__*/_jsxDEV(Layout, {
         height: height,
         padding: 0,
-        header: /*#__PURE__*/_jsxs(_Fragment, {
+        header: /*#__PURE__*/_jsxDEV(_Fragment, {
           children: [headerContent, autoMobileTopBar]
-        }),
+        }, void 0, true),
         start: sideNavContent,
         content: mainContent
-      }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
+      }, void 0, false), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxDEV(ActivityWrapper, {
         mode: isMobileNavOpen ? 'visible' : 'hidden',
-        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
+        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsxDEV(SideNavRenderContext, {
           value: "drawer",
           children: sideNav
-        }), hasTopNav && /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+        }, void 0, false), hasTopNav && /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
           value: drawerMobileContentValue,
-          children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+          children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
             value: "drawer",
             children: topNav
-          })
-        })]
-      })]
-    })
-  });
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true)
+  }, void 0, false);
 }
 AppShell.displayName = 'AppShell';

package/dist/AspectRatio/AspectRatio.js

@@ -24,7 +24,7 @@ import { themeProps } from "../utils/themeProps.js";
  * - `ellipse`: clips the container to an ellipse. Combined with the `ratio`,
  *   this renders a circle at `ratio={1}` and an oval at non-square ratios.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     kVAEAm: "x1n2onr6",
@@ -75,7 +75,7 @@ export function AspectRatio({
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('aspect-ratio', {
       shape
@@ -84,12 +84,12 @@ export function AspectRatio({
       aspectRatio: ratio
     }),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
       },
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AspectRatio.displayName = 'AspectRatio';

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GAClB,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmFb;yBAhGe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -35,7 +35,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
 
 /**
@@ -202,16 +202,16 @@ function getInitials(name) {
 function DefaultIcon({
   size
 }) {
-  return /*#__PURE__*/_jsx("svg", {
+  return /*#__PURE__*/_jsxDEV("svg", {
     width: size * 0.6,
     height: size * 0.6,
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx("path", {
+    children: /*#__PURE__*/_jsxDEV("path", {
       d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 
 /**
@@ -241,10 +241,12 @@ export function Avatar({
   ref,
   ...props
 }) {
-  const [imageError, setImageError] = useState(false);
-  const [fallbackError, setFallbackError] = useState(false);
-  const showImage = src && !imageError;
-  const showFallbackImage = !showImage && fallbackSrc && !fallbackError;
+  // Track the exact src that failed (rather than a boolean) so a changed
+  // src/fallbackSrc gets a fresh load attempt instead of the stale error.
+  const [erroredSrc, setErroredSrc] = useState(undefined);
+  const [erroredFallbackSrc, setErroredFallbackSrc] = useState(undefined);
+  const showImage = src && erroredSrc !== src;
+  const showFallbackImage = !showImage && fallbackSrc && erroredFallbackSrc !== fallbackSrc;
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
 
@@ -256,9 +258,9 @@ export function Avatar({
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
-  return /*#__PURE__*/_jsx(AvatarSizeContext, {
+  return /*#__PURE__*/_jsxDEV(AvatarSizeContext, {
     value: numericSize,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       role: isDecorative ? 'presentation' : 'img',
       "aria-label": isDecorative ? undefined : accessibleName,
@@ -268,38 +270,38 @@ export function Avatar({
         size: resolvedSize
       }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
       ...props,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
-        children: [showImage && /*#__PURE__*/_jsx("img", {
+        children: [showImage && /*#__PURE__*/_jsxDEV("img", {
           src: src,
           alt: "",
-          onError: () => setImageError(true),
+          onError: () => setErroredSrc(src),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"
           }
-        }), showFallbackImage && /*#__PURE__*/_jsx("img", {
+        }, void 0, false), showFallbackImage && /*#__PURE__*/_jsxDEV("img", {
           src: fallbackSrc,
           alt: "",
-          onError: () => setFallbackError(true),
+          onError: () => setErroredFallbackSrc(fallbackSrc),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"
           }
-        }), showInitials && /*#__PURE__*/_jsx("div", {
+        }, void 0, false), showInitials && /*#__PURE__*/_jsxDEV("div", {
           ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
           children: getInitials(name)
-        }), showIcon && /*#__PURE__*/_jsx("div", {
+        }, void 0, false), showIcon && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
           },
-          children: /*#__PURE__*/_jsx(DefaultIcon, {
+          children: /*#__PURE__*/_jsxDEV(DefaultIcon, {
             size: numericSize
-          })
-        })]
-      }), status && /*#__PURE__*/_jsx("div", {
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true), status && /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
         children: status
-      })]
-    })
-  });
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 Avatar.displayName = 'Avatar';

package/dist/Avatar/AvatarStatusDot.js

@@ -38,7 +38,7 @@ import { themeProps } from "../utils/themeProps.js";
  * Icons are not rendered at the smallest tier — there isn't enough
  * room for them to be legible.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 function resolveStatusDotSize(avatarSize) {
   if (avatarSize <= 36) {
     return {
@@ -174,7 +174,7 @@ export function AvatarStatusDot({
     borderWidth,
     iconSize
   } = resolveStatusDotSize(avatarSize);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...(label ? {
       role: 'img',
@@ -184,11 +184,11 @@ export function AvatarStatusDot({
       variant
     }), stylex.props(styles.dot, variantStyleMap[variant], dynamicStyles.size(dotSize, borderWidth), xstyle), className, style),
     ...props,
-    children: icon && iconSize > 0 && /*#__PURE__*/_jsx("span", {
+    children: icon && iconSize > 0 && /*#__PURE__*/_jsxDEV("span", {
       "aria-hidden": "true",
       ...stylex.props(styles.icon, dynamicStyles.iconSize(iconSize)),
       children: icon
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AvatarStatusDot.displayName = 'AvatarStatusDot';