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

package/dist/Item/Item.js

@@ -26,7 +26,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Types
 // =============================================================================
-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";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -193,15 +193,15 @@ export function Item({
   const isStringDescription = typeof description === 'string';
   const labelTruncateStyle = labelLines != null ? labelLines === 1 ? styles.labelSingleTruncate : styles.labelMultiTruncate : isStringLabel ? styles.labelSingleTruncate : null;
   const descriptionTruncateStyle = descriptionLines != null ? descriptionLines === 1 ? styles.descriptionSingleTruncate : styles.descriptionMultiTruncate : isStringDescription ? styles.descriptionSingleTruncate : null;
-  const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("span", {
+  const labelAndDescription = /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       ...stylex.props(styles.label, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
       children: label
-    }), description != null && /*#__PURE__*/_jsx("span", {
+    }, void 0, false), description != null && /*#__PURE__*/_jsxDEV("span", {
       ...stylex.props(styles.description, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
       children: description
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
   const handleContainerClick = e => {
     if (isDisabled) {
       return;
@@ -212,13 +212,13 @@ export function Item({
     }
     onClick?.(e);
   };
-  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
+  const innerContent = /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [marker, startContent != null && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x3psx0u x78zum5"
       },
       children: startContent
-    }), hasParentRole ? /*#__PURE__*/_jsx("span", {
+    }, void 0, false), hasParentRole ? /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -228,7 +228,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
+    }, void 0, false) : href != null ? /*#__PURE__*/_jsxDEV(LinkComponent, {
       href: href,
       target: target,
       rel: rel,
@@ -243,7 +243,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : onClick != null ? /*#__PURE__*/_jsx("button", {
+    }, void 0, false) : onClick != null ? /*#__PURE__*/_jsxDEV("button", {
       type: "button",
       onClick: onClick,
       disabled: isDisabled,
@@ -256,7 +256,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : /*#__PURE__*/_jsx("span", {
+    }, void 0, false) : /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -266,7 +266,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }), endContent != null && /*#__PURE__*/_jsx("span", {
+    }, void 0, false), endContent != null && /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x3psx0u x78zum5 xvc5jky"
@@ -276,13 +276,13 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: endContent
-    })]
-  });
-  return /*#__PURE__*/_jsx(Component, {
+    }, void 0, false)]
+  }, void 0, true);
+  return /*#__PURE__*/_jsxDEV(Component, {
     ref: ref,
+    ...restProps,
     "aria-selected": isSelected || undefined,
     "aria-disabled": isDisabled || undefined,
-    ...restProps,
     ...mergeProps(themeProps('item', {
       density,
       align
@@ -290,6 +290,6 @@ export function Item({
     role: role,
     onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
     children: innerContent
-  });
+  }, void 0, false);
 }
 Item.displayName = 'Item';

package/dist/Kbd/Kbd.js

@@ -18,7 +18,7 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   wrapper: {
     k1xSpc: "x3nfvp2",
@@ -145,19 +145,19 @@ export function Kbd({
   // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
   // the visual glyphs below are announced meaninglessly by assistive tech.
   const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     role: "img",
     "aria-label": accessibleName,
     ...rest,
     ...mergeProps(themeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
-    children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
+    children: parts.map(key => /*#__PURE__*/_jsxDEV("kbd", {
       "aria-hidden": "true",
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
       },
       children: getKeyDisplay(key, isMac)
-    }, key))
-  });
+    }, key, false))
+  }, void 0, false);
 }
 Kbd.displayName = 'Kbd';

package/dist/Layer/LayerProvider.js

@@ -5,7 +5,7 @@
 import { useMemo } from 'react';
 import { LayerContext, useLayerContext } from "./LayerContext.js";
 import { ToastViewport } from "../Toast/ToastViewport.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * App-level provider for layer systems (toast, sheet, imperative modals).
  *
@@ -32,18 +32,18 @@ export function LayerProvider({
 
   // Nested provider — pass through
   if (existingContext) {
-    return /*#__PURE__*/_jsx(_Fragment, {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
       children: children
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx(LayerContext, {
+  return /*#__PURE__*/_jsxDEV(LayerContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(ToastViewport, {
+    children: /*#__PURE__*/_jsxDEV(ToastViewport, {
       position: toastConfig.position,
       maxVisible: toastConfig.maxVisible,
       inset: toastConfig.inset,
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayerProvider.displayName = 'LayerProvider';

package/dist/Layer/useLayer.js

@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import { addAnchorName, removeAnchorName } from "./anchorName.js";
 import "../theme/tokens.stylex.js";
 import { typographyVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     keoZOQ: "xdj266r",
@@ -276,7 +276,7 @@ export function useLayer(options) {
     // Render as the requested tag. A `span` keeps the layer phrasing content
     // so it is valid (and stays put on hydration) inside inline contexts like
     // a `<p>`; `div` remains the default for block layers.
-    return /*#__PURE__*/_jsx(Container, {
+    return /*#__PURE__*/_jsxDEV(Container, {
       ref: popoverRefCallback,
       id: id,
       role: role,
@@ -290,7 +290,7 @@ export function useLayer(options) {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       children: children
-    });
+    }, void 0, false);
   }, [anchorId, id, lightDismiss, popoverRefCallback]);
 
   // Render function for fixed mode
@@ -310,7 +310,7 @@ export function useLayer(options) {
     };
     const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
     const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
-    return /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       ref: popoverRefCallback,
       id: id,
       popover: lightDismiss ? 'auto' : 'manual',
@@ -321,7 +321,7 @@ export function useLayer(options) {
         ...extraStyle
       },
       children: children
-    });
+    }, void 0, false);
   }, [popoverRefCallback, id, lightDismiss]);
   if (mode === 'context') {
     return {

package/dist/Layout/Layout.js

@@ -32,7 +32,7 @@ import { layoutPaddingOuterXVarStyles, layoutPaddingOuterYVarStyles } from "./pa
  * - `fill`: Layout fills container height, content scrolls internally (default)
  * - `auto`: Layout grows with content, container/page scrolls
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   layoutOuter: {
     keTefX: "xojxgvx",
@@ -97,10 +97,10 @@ function AreaProvider({
   if (children == null) {
     return null;
   }
-  return /*#__PURE__*/_jsx(LayoutAreaContext, {
+  return /*#__PURE__*/_jsxDEV(LayoutAreaContext, {
     value: area,
     children: children
-  });
+  }, void 0, false);
 }
 
 /**
@@ -188,51 +188,51 @@ export function Layout({
     hasStart,
     hasEnd
   }), [hasHeader, hasFooter, hasStart, hasEnd]);
-  const tree = /*#__PURE__*/_jsx(LayoutSlotsContext, {
+  const tree = /*#__PURE__*/_jsxDEV(LayoutSlotsContext, {
     value: slotsValue,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       ...mergeProps(themeProps('layout', {
         height
       }), stylex.props(styles.layoutOuter, isFill ? styles.fill : styles.auto, xstyle), className, style),
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(_temp2, styles.layoutInner, ...stack({
           direction: 'vertical'
         }), isFill ? styles.fill : styles.auto, padding === 0 && styles.fullBleed, padding != null && layoutPaddingOuterXVarStyles[padding], padding != null && layoutPaddingOuterYVarStyles[padding], contentWidth != null && dynamicStyles.contentWidthVar(contentWidth)),
-        children: [/*#__PURE__*/_jsx(AreaProvider, {
+        children: [/*#__PURE__*/_jsxDEV(AreaProvider, {
           area: "header",
           children: header
-        }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
           ...stylex.props(...stack({
             direction: 'horizontal'
           }), styles.middle, contentWidth != null && dynamicStyles.contentWidth(contentWidth)),
-          children: [/*#__PURE__*/_jsx(AreaProvider, {
+          children: [/*#__PURE__*/_jsxDEV(AreaProvider, {
             area: "start",
             children: start
-          }), /*#__PURE__*/_jsx("div", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
             ...stylex.props(...stackItem({
               size: 'fill'
             })),
-            children: /*#__PURE__*/_jsx(AreaProvider, {
+            children: /*#__PURE__*/_jsxDEV(AreaProvider, {
               area: "content",
               children: resolvedContent
-            })
-          }), /*#__PURE__*/_jsx(AreaProvider, {
+            }, void 0, false)
+          }, void 0, false), /*#__PURE__*/_jsxDEV(AreaProvider, {
             area: "end",
             children: end
-          })]
-        }), /*#__PURE__*/_jsx(AreaProvider, {
+          }, void 0, false)]
+        }, void 0, true), /*#__PURE__*/_jsxDEV(AreaProvider, {
           area: "footer",
           children: footer
-        })]
-      })
-    })
-  });
+        }, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false);
   if (dividerCtxValue != null) {
-    return /*#__PURE__*/_jsx(LayoutDividerContext, {
+    return /*#__PURE__*/_jsxDEV(LayoutDividerContext, {
       value: dividerCtxValue,
       children: tree
-    });
+    }, void 0, false);
   }
   return tree;
 }

package/dist/Layout/LayoutContent.js

@@ -22,7 +22,7 @@ import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   content: {
     kB7OPa: "x9f619",
@@ -130,7 +130,7 @@ export function LayoutContent({
     hasEnd
   } = use(LayoutSlotsContext);
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
@@ -139,6 +139,6 @@ export function LayoutContent({
     !hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 LayoutContent.displayName = 'LayoutContent';

package/dist/Layout/LayoutFooter.js

@@ -22,7 +22,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   footer: {
     kmuXW: "x2lah0s",
@@ -103,17 +103,17 @@ export function LayoutFooter({
   const dividerCtx = use(LayoutDividerContext);
   const resolvedHasDivider = hasDivider ?? dividerCtx?.defaultHasDividers ?? false;
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
     ...mergeProps(themeProps('layout-footer'), stylex.props(styles.footer, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayoutFooter.displayName = 'LayoutFooter';

package/dist/Layout/LayoutHeader.js

@@ -22,7 +22,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   header: {
     kmuXW: "x2lah0s",
@@ -103,17 +103,17 @@ export function LayoutHeader({
   const dividerCtx = use(LayoutDividerContext);
   const resolvedHasDivider = hasDivider ?? dividerCtx?.defaultHasDividers ?? false;
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
     ...mergeProps(themeProps('layout-header'), stylex.props(styles.header, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayoutHeader.displayName = 'LayoutHeader';

package/dist/Layout/LayoutPanel.js

@@ -23,7 +23,7 @@ import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   panel: {
     kB7OPa: "x9f619",
@@ -166,7 +166,7 @@ export function LayoutPanel({
 
   // Select collapse style based on position (collapse the side where divider would be)
   const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
@@ -175,6 +175,6 @@ export function LayoutPanel({
     isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 LayoutPanel.displayName = 'LayoutPanel';

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAySf;yBAzTe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAmUf;yBAnVe,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -15,12 +15,13 @@
  * - /apps/storybook/stories/Lightbox.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Lightbox/ (showcase blocks)
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Icon } from "../Icon/index.js";
 import { IconButton } from "../IconButton/index.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
@@ -33,7 +34,7 @@ import { themeProps } from "../utils/themeProps.js";
 /**
  * Describes a single media item in a lightbox.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -162,7 +163,7 @@ export function Lightbox({
   });
 
   // Resolve current media item
-  const mediaArray = Array.isArray(media) ? media : [media];
+  const mediaArray = useMemo(() => Array.isArray(media) ? media : [media], [media]);
   const isGallery = mediaArray.length > 1;
   const currentItem = mediaArray.length > 0 ? mediaArray[Math.min(index, mediaArray.length - 1)] : null;
   const currentType = currentItem?.type ?? 'image';
@@ -185,6 +186,29 @@ export function Lightbox({
     });
   }, [index, currentItem?.src]);
 
+  // Announce gallery navigation to screen readers. Moving between images only
+  // updates the visual counter, which is silent to assistive tech, so mirror
+  // each change in a polite live region ("<alt>, 3 of 12", or "Image 3 of 12"
+  // when the image has no alt). Announce only when the image changes during an
+  // already-open session — not on mount, not when opening (even at a new
+  // index, since the dialog's aria-label already names the current image), and
+  // not on close.
+  const announce = useAnnounce();
+  const prevIndexRef = useRef(index);
+  const wasOpenRef = useRef(isOpen);
+  useEffect(() => {
+    const indexChanged = prevIndexRef.current !== index;
+    const wasOpen = wasOpenRef.current;
+    prevIndexRef.current = index;
+    wasOpenRef.current = isOpen;
+    if (!indexChanged || !isOpen || !wasOpen) {
+      return;
+    }
+    const item = mediaArray[Math.min(index, mediaArray.length - 1)];
+    const position = `${index + 1} of ${mediaArray.length}`;
+    announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
+  }, [index, isOpen, announce, mediaArray]);
+
   // Open/close dialog
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;
@@ -301,7 +325,7 @@ export function Lightbox({
   if (!currentItem) {
     return null;
   }
-  return /*#__PURE__*/_jsx("dialog", {
+  return /*#__PURE__*/_jsxDEV("dialog", {
     ref: mergeRefs(ref, dialogRef),
     onCancel: handleCancel,
     onClick: e => {
@@ -315,46 +339,46 @@ export function Lightbox({
     "aria-label": currentItem.alt || 'Media viewer',
     ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
     ...props,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
       },
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x10l6tqk xyx6v2t xmz3bnw x1vjfegm"
         },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(IconButton, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "close",
             size: "sm",
             color: "inherit"
-          }),
+          }, void 0, false),
           label: "Close",
           variant: "ghost",
           onClick: handleClose,
           xstyle: styles.controlButton
-        })
-      }), isGallery && /*#__PURE__*/_jsx("div", {
+        }, void 0, false)
+      }, void 0, false), isGallery && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm xnp31yv"
         },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(IconButton, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "chevronLeft",
             size: "sm",
             color: "inherit"
-          }),
+          }, void 0, false),
           label: "Previous",
           variant: "ghost",
           isDisabled: !canPrev,
           onClick: goToPrev,
           xstyle: styles.controlButton
-        })
-      }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
         },
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsxDEV("div", {
           ref: imageWrapperRef,
           ...{
             0: {
@@ -384,7 +408,7 @@ export function Lightbox({
           }[!!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
           onDoubleClick: isVideo ? undefined : handleDoubleClick,
           onPointerDown: isVideo ? undefined : handlePointerDown,
-          children: isVideo ? /*#__PURE__*/_jsx("video", {
+          children: isVideo ? /*#__PURE__*/_jsxDEV("video", {
             src: currentItem.src,
             "aria-label": currentItem.alt,
             controls: true,
@@ -392,41 +416,41 @@ export function Lightbox({
             ...{
               className: "x193iq5w xmz0i5r x19kjcj4 x1a2a7pz"
             }
-          }) : /*#__PURE__*/_jsx("img", {
+          }, void 0, false) : /*#__PURE__*/_jsxDEV("img", {
             src: currentItem.src,
             alt: currentItem.alt,
             draggable: false,
             ...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
-          })
-        }), currentItem.caption && /*#__PURE__*/_jsx("div", {
+          }, void 0, false)
+        }, void 0, false), currentItem.caption && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
           },
           children: currentItem.caption
-        })]
-      }), isGallery && /*#__PURE__*/_jsx("div", {
+        }, void 0, false)]
+      }, void 0, true), isGallery && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm xmz3bnw"
         },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(IconButton, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "chevronRight",
             size: "sm",
             color: "inherit"
-          }),
+          }, void 0, false),
           label: "Next",
           variant: "ghost",
           isDisabled: !canNext,
           onClick: goToNext,
           xstyle: styles.controlButton
-        })
-      }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
+        }, void 0, false)
+      }, void 0, false), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x10l6tqk xyx6v2t xnp31yv x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
         },
         children: [index + 1, " / ", mediaArray.length]
-      })]
-    })
-  });
+      }, void 0, true)]
+    }, void 0, true)
+  }, void 0, false);
 }
 Lightbox.displayName = 'Lightbox';