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

package/dist/AspectRatio/AspectRatio.d.ts

@@ -1,12 +1,13 @@
 /**
  * @file AspectRatio.tsx
  * @input Uses React, stylex
- * @output Exports AspectRatio component and AspectRatioProps
+ * @output Exports AspectRatio component, AspectRatioProps, AspectRatioShape, AspectRatioFit
  * @position AspectRatio component; maintains a specific aspect ratio for its children
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
  * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
+ * - /packages/core/src/reset.css (AspectRatio fit baseline rules)
  * - /apps/storybook/stories/AspectRatio.stories.tsx
  * - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
@@ -19,6 +20,15 @@ import type { BaseProps } from '../BaseProps';
  *   this renders a circle at `ratio={1}` and an oval at non-square ratios.
  */
 export type AspectRatioShape = 'rectangle' | 'ellipse';
+/**
+ * How the child is sized and positioned inside the ratio box.
+ * - `cover`: the child fills the box; media is cropped to preserve its own
+ *   aspect ratio (`object-fit: cover`).
+ * - `contain`: the child fills the box; media is letterboxed to stay fully
+ *   visible (`object-fit: contain`).
+ * - `center`: the child keeps its natural size and sits centered in the box.
+ */
+export type AspectRatioFit = 'cover' | 'contain' | 'center';
 export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -30,19 +40,43 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
      * The shape of the container. Both shapes respect the provided `ratio`.
      * - `rectangle` (default): a standard rectangular container.
      * - `ellipse`: clips the container to an ellipse — a circle when `ratio={1}`,
-     *   or an oval at other ratios. Pair with a child that fills the container
-     *   (e.g. an image with `objectFit: 'cover'`).
+     *   or an oval at other ratios. Pair with `fit="cover"` so the media fills
+     *   the clipped container.
      *
      * @default 'rectangle'
      *
      * @example
      * ```
-     * <AspectRatio ratio={1} shape="ellipse">
-     *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
+     * <AspectRatio ratio={1} shape="ellipse" fit="cover">
+     *   <img src="avatar.jpg" alt="" />
      * </AspectRatio>
      * ```
      */
     shape?: AspectRatioShape;
+    /**
+     * How the child is laid out inside the ratio box, so the child does not
+     * have to declare `width`/`height`/`objectFit` itself.
+     * - `cover`: child fills the box; media is cropped (`object-fit: cover`).
+     * - `contain`: child fills the box; media is letterboxed
+     *   (`object-fit: contain`).
+     * - `center`: child keeps its natural size, centered in the box.
+     *
+     * `cover`/`contain` child sizing ships as zero-specificity baseline rules
+     * in `reset.css`, keyed on the `data-astryx-aspect-ratio-override`
+     * attribute the component sets on the child's direct parent. Any styles
+     * the child sets itself still win, so children that already size
+     * themselves keep their behavior. When omitted, the child is left
+     * unstyled (the pre-existing contract). `fit` is structural, not visual,
+     * so it is not exposed on the theming surface.
+     *
+     * @example
+     * ```
+     * <AspectRatio ratio={16 / 9} fit="cover">
+     *   <img src="image.jpg" alt="Widescreen image" />
+     * </AspectRatio>
+     * ```
+     */
+    fit?: AspectRatioFit;
     /**
      * Content to render inside the aspect ratio container.
      * The child element will be positioned absolutely to fill the container.
@@ -56,25 +90,29 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
  * is positioned absolutely to fill the container, which is useful for images,
  * videos, embeds, and placeholders.
  *
+ * Use `fit` to let the component size the child: `cover`/`contain` stretch
+ * the child to fill the box (cropping or letterboxing media), `center` keeps
+ * the child at its natural size. Without `fit`, the child styles itself.
+ *
  * Use `shape="ellipse"` to clip the container into an ellipse — a circle at
  * `ratio={1}` or an oval at other ratios. Both shapes respect the provided
  * `ratio`.
  *
  * @example
  * ```
- * <AspectRatio ratio={16 / 9}>
- *   <img src="image.jpg" alt="Widescreen image" style={{objectFit: 'cover'}} />
+ * <AspectRatio ratio={16 / 9} fit="cover">
+ *   <img src="image.jpg" alt="Widescreen image" />
  * </AspectRatio>
  * ```
  *
  * @example
  * ```
- * <AspectRatio ratio={1} shape="ellipse">
- *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
+ * <AspectRatio ratio={1} shape="ellipse" fit="cover">
+ *   <img src="avatar.jpg" alt="" />
  * </AspectRatio>
  * ```
  */
-export declare function AspectRatio({ ratio, shape, children, xstyle, className, style, ref, ...props }: AspectRatioProps): import("react").JSX.Element;
+export declare function AspectRatio({ ratio, shape, fit, children, xstyle, className, style, ref, ...props }: AspectRatioProps): import("react").JSX.Element;
 export declare namespace AspectRatio {
     var displayName: string;
 }

package/dist/AspectRatio/AspectRatio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkBlB;yBA3Be,WAAW"}
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA2BlB;yBArCe,WAAW"}

package/dist/AspectRatio/AspectRatio.js

@@ -5,12 +5,13 @@
 /**
  * @file AspectRatio.tsx
  * @input Uses React, stylex
- * @output Exports AspectRatio component and AspectRatioProps
+ * @output Exports AspectRatio component, AspectRatioProps, AspectRatioShape, AspectRatioFit
  * @position AspectRatio component; maintains a specific aspect ratio for its children
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
  * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
+ * - /packages/core/src/reset.css (AspectRatio fit baseline rules)
  * - /apps/storybook/stories/AspectRatio.stories.tsx
  * - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
@@ -24,7 +25,16 @@ 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";
+
+/**
+ * How the child is sized and positioned inside the ratio box.
+ * - `cover`: the child fills the box; media is cropped to preserve its own
+ *   aspect ratio (`object-fit: cover`).
+ * - `contain`: the child fills the box; media is letterboxed to stay fully
+ *   visible (`object-fit: contain`).
+ * - `center`: the child keeps its natural size and sits centered in the box.
+ */
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     kVAEAm: "x1n2onr6",
@@ -47,27 +57,32 @@ const styles = {
  * is positioned absolutely to fill the container, which is useful for images,
  * videos, embeds, and placeholders.
  *
+ * Use `fit` to let the component size the child: `cover`/`contain` stretch
+ * the child to fill the box (cropping or letterboxing media), `center` keeps
+ * the child at its natural size. Without `fit`, the child styles itself.
+ *
  * Use `shape="ellipse"` to clip the container into an ellipse — a circle at
  * `ratio={1}` or an oval at other ratios. Both shapes respect the provided
  * `ratio`.
  *
  * @example
  * ```
- * <AspectRatio ratio={16 / 9}>
- *   <img src="image.jpg" alt="Widescreen image" style={{objectFit: 'cover'}} />
+ * <AspectRatio ratio={16 / 9} fit="cover">
+ *   <img src="image.jpg" alt="Widescreen image" />
  * </AspectRatio>
  * ```
  *
  * @example
  * ```
- * <AspectRatio ratio={1} shape="ellipse">
- *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
+ * <AspectRatio ratio={1} shape="ellipse" fit="cover">
+ *   <img src="avatar.jpg" alt="" />
  * </AspectRatio>
  * ```
  */
 export function AspectRatio({
   ratio,
   shape = 'rectangle',
+  fit,
   children,
   xstyle,
   className,
@@ -75,7 +90,7 @@ export function AspectRatio({
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('aspect-ratio', {
       shape
@@ -84,12 +99,18 @@ export function AspectRatio({
       aspectRatio: ratio
     }),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
+      "data-astryx-aspect-ratio-override": fit,
       ...{
-        className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
-      },
+        0: {
+          className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
+        },
+        1: {
+          className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k"
+        }
+      }[!!(fit === 'center') << 0],
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AspectRatio.displayName = 'AspectRatio';

package/dist/AspectRatio/index.d.ts

@@ -7,5 +7,5 @@
  * SYNC: When modified, update /packages/core/src/AspectRatio/AspectRatio.doc.mjs
  */
 export { AspectRatio } from './AspectRatio';
-export type { AspectRatioProps, AspectRatioShape } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioShape, AspectRatioFit, } from './AspectRatio';
 //# sourceMappingURL=index.d.ts.map

package/dist/AspectRatio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,GACf,MAAM,eAAe,CAAC"}

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,10 @@ 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", {
+      ...props,
       ref: ref,
       role: isDecorative ? 'presentation' : 'img',
       "aria-label": isDecorative ? undefined : accessibleName,
@@ -267,39 +270,38 @@ export function Avatar({
       ...mergeProps(themeProps('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,8 @@ export function AvatarStatusDot({
     borderWidth,
     iconSize
   } = resolveStatusDotSize(avatarSize);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
+    ...props,
     ref: ref,
     ...(label ? {
       role: 'img',
@@ -183,12 +184,11 @@ export function AvatarStatusDot({
     ...mergeProps(themeProps('avatar-status-dot', {
       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';

package/dist/AvatarGroup/AvatarGroup.js

@@ -23,7 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { AvatarGroupContext } from "./AvatarGroupContext.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 OVERLAP_RATIO = 0.25;
 const styles = {
   root: {
@@ -69,9 +69,10 @@ export function AvatarGroup({
     overlap,
     numericSize
   }), [size, overlap, numericSize]);
-  return /*#__PURE__*/_jsx(AvatarGroupContext, {
+  return /*#__PURE__*/_jsxDEV(AvatarGroupContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
+      ...props,
       ref: ref,
       role: "group",
       "aria-label": ariaLabel,
@@ -79,9 +80,8 @@ export function AvatarGroup({
       ...mergeProps(themeProps('avatar-group', {
         size
       }), stylex.props(styles.root, xstyle), className, style),
-      ...props,
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 AvatarGroup.displayName = 'AvatarGroup';

package/dist/AvatarGroup/AvatarGroupOverflow.js

@@ -19,7 +19,7 @@ import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/
 import { mergeProps } from "../utils/index.js";
 import { useAvatarGroup } from "./AvatarGroupContext.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 BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
 const styles = {
@@ -109,22 +109,22 @@ export function AvatarGroupOverflow({
   const label = `${count} more`;
   const content = children ?? `+${count}`;
   if (onClick) {
-    return /*#__PURE__*/_jsx("button", {
+    return /*#__PURE__*/_jsxDEV("button", {
       ref: ref,
       type: "button",
       onClick: onClick,
-      "aria-label": label,
       ...rest,
+      "aria-label": label,
       ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
       children: content
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
-    "aria-label": label,
     ...rest,
+    "aria-label": label,
     ...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
     children: content
-  });
+  }, void 0, false);
 }
 AvatarGroupOverflow.displayName = 'AvatarGroupOverflow';

package/dist/Badge/Badge.js

@@ -24,7 +24,7 @@ import { themeProps } from "../utils/themeProps.js";
 /**
  * Base badge styles
  */
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     k1xSpc: "x3nfvp2",
@@ -164,13 +164,13 @@ export function Badge({
   ref,
   ...props
 }) {
-  return /*#__PURE__*/_jsxs("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     ...mergeProps(themeProps('badge', {
       variant
     }), stylex.props(styles.base, variants[variant], xstyle), className, style),
     ...props,
     children: [icon, label]
-  });
+  }, void 0, true);
 }
 Badge.displayName = 'Badge';

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Hb;yBA1Ie,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAiIb;yBAjJe,MAAM"}

package/dist/Banner/Banner.js

@@ -30,7 +30,7 @@
  * - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
  */
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
@@ -84,7 +84,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * Extensible via module augmentation of BannerContainerMap.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Status → Icon mapping
 // =============================================================================
@@ -249,6 +249,11 @@ export function Banner({
 }) {
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
+  // Links the expand/collapse toggle to the content region it shows/hides so
+  // assistive tech can move from the button to its controlled content
+  // (disclosure pattern). The region is conditionally rendered, so aria-controls
+  // below is set only while it's mounted to avoid a dangling reference.
+  const contentId = useId();
   const defaultIconName = defaultIconNames[status];
   const role = statusRole[status];
   const iconColor = statusIconColor[status];
@@ -272,51 +277,51 @@ export function Banner({
   const isSingleLine = description == null && hasActions;
   const showContent = hasChildren && isExpanded;
   const isCard = container === 'card';
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     ...mergeProps(stylex.props(styles.root, xstyle), className, style),
     ...rest,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ...mergeProps(themeProps('banner', {
         container,
         status
       }), stylex.props(styles.header, isSingleLine && styles.headerCentered, statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...mergeProps(themeProps('banner-icon', {
           status
         }), {
           className: "x78zum5 x6s0dn4 x2lah0s"
         }),
         "aria-hidden": "true",
-        children: icon != null ? icon : /*#__PURE__*/_jsx(Icon, {
+        children: icon != null ? icon : /*#__PURE__*/_jsxDEV(Icon, {
           icon: defaultIconName,
           size: "md",
           color: iconColor
-        })
-      }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf xxhr3t x98rzlu xeuugli"
         },
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0"
           },
           children: title
-        }), description != null && /*#__PURE__*/_jsx("div", {
+        }, void 0, false), description != null && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4"
           },
           children: description
-        })]
-      }), showEndArea && /*#__PURE__*/_jsxs("div", {
+        }, void 0, false)]
+      }, void 0, true), showEndArea && /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.endArea, edgeCompSlot.inset(spacingVars['--spacing-2'])),
-        children: [endContent, hasChildren && /*#__PURE__*/_jsx(Button, {
+        children: [endContent, hasChildren && /*#__PURE__*/_jsxDEV(Button, {
           variant: "ghost",
           size: "sm",
           label: isExpanded ? 'Collapse' : 'Expand',
           tooltip: isExpanded ? 'Collapse' : 'Expand',
-          icon: /*#__PURE__*/_jsx("span", {
+          icon: /*#__PURE__*/_jsxDEV("span", {
             ...{
               0: {
                 className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92"
@@ -325,30 +330,32 @@ export function Banner({
                 className: "x3nfvp2 x11xpdln xuedmi6 xlr8y92 x19jd1h0"
               }
             }[!!isExpanded << 0],
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsxDEV(Icon, {
               icon: "chevronDown",
               size: "sm",
               color: "inherit"
-            })
-          }),
+            }, void 0, false)
+          }, void 0, false),
           onClick: handleToggleExpand,
           "aria-expanded": isExpanded,
+          "aria-controls": showContent ? contentId : undefined,
           isIconOnly: true
-        }), isDismissable && /*#__PURE__*/_jsx(Button, {
+        }, void 0, false), isDismissable && /*#__PURE__*/_jsxDEV(Button, {
           variant: "ghost",
           size: "sm",
           label: "Dismiss",
           tooltip: "Dismiss",
-          icon: /*#__PURE__*/_jsx(Icon, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "close",
             size: "sm",
             color: "inherit"
-          }),
+          }, void 0, false),
           onClick: handleDismiss,
           isIconOnly: true
-        })]
-      })]
-    }), showContent && /*#__PURE__*/_jsx("div", {
+        }, void 0, false)]
+      }, void 0, true)]
+    }, void 0, true), showContent && /*#__PURE__*/_jsxDEV("div", {
+      id: contentId,
       ...mergeProps(themeProps('banner-content', {
         container,
         status
@@ -361,7 +368,7 @@ export function Banner({
         }
       }[!!isCard << 0]),
       children: children
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 Banner.displayName = 'Banner';