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

package/dist/Card/Card.js

@@ -34,10 +34,12 @@ import { themeProps } from "../utils/themeProps.js";
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
  *   Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
  *
- * All variants include a transparent border to prevent layout jitter
- * when switching variants. Themes can override borderWidth/borderColor.
+ * Only `default` draws a visible border. Its border width is subtracted from
+ * the padding so the total inset (border + padding) equals the padding token —
+ * keeping content geometry faithful to the spacing scale and identical to the
+ * borderless variants. Themes can override borderWidth/borderColor.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -47,13 +49,16 @@ const styles = {
     "--_card-radius": "x2kkz0m",
     kaIpWk: "x153u1i6",
     kVQacm: "x7giv3",
-    kMzoRj: "x1litavf",
-    ksu8eU: "x1y0btm7",
-    kVAM5u: "x9r1u3d",
     $$css: true
   },
   withBorder: {
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
     kVAM5u: "xvy26l8",
+    kZCmMZ: "xs19ii7",
+    kwRFfy: "x12frdag",
+    kLKAdn: "x1nex4ik",
+    kGO01o: "xbv1mwh",
     $$css: true
   },
   scrollable: {
@@ -188,20 +193,23 @@ export function Card({
   const useThemeDefault = padding == null;
   const effectivePadding = padding ?? 4;
   const paddingToken = spacingStepToToken[effectivePadding];
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('card', {
       variant
-    }), stylex.props(styles.card, variantStyles[variant], variant === 'default' && styles.withBorder, hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
+    }), stylex.props(styles.card, variantStyles[variant], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
       useThemeDefault: 'card'
     } : {
       paddingInnerX: paddingToken,
       paddingInnerY: paddingToken,
       paddingOuterX: paddingToken,
       paddingOuterY: paddingToken
-    }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], xstyle), className, style),
+    }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
+    // Applied after the container padding so the border-inset calc wins;
+    // it reads the --container-padding-* vars set above.
+    variant === 'default' && styles.withBorder, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 Card.displayName = 'Card';

package/dist/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA+If;yBA7Je,QAAQ"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAgJf;yBA9Je,QAAQ"}

package/dist/Carousel/Carousel.js

@@ -25,7 +25,7 @@ import { useLayer } from "../Layer/index.js";
 import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
 import { mergeProps, mergeRefs } from "../utils/index.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";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -254,7 +254,7 @@ export function Carousel({
     width: 'anchor-size(width)',
     height: 'anchor-size(height)'
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: mergeRefs(ref, layer.ref),
     "data-testid": testId,
     role: "region",
@@ -262,17 +262,18 @@ export function Carousel({
     "aria-roledescription": "carousel",
     ...mergeProps(themeProps('carousel'), stylex.props(styles.root, xstyle), className, style),
     ...htmlProps,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: composedRef,
+      tabIndex: 0,
       ...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
-      children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
+      children: Children.map(children, child => /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x1bhewko x78zum5 x2lah0s"
         },
         children: child
-      }))
-    }), hasButtons && layer.render(/*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
+      }, void 0, false))
+    }, void 0, false), hasButtons && layer.render(/*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xuuh30"
@@ -281,11 +282,11 @@ export function Carousel({
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xuuh30 xg01cxk x47corl"
           }
         }[!!!overflowStart << 0],
-        children: /*#__PURE__*/_jsx(Button, {
-          icon: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Button, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "chevronLeft",
             size: "xsm"
-          }),
+          }, void 0, false),
           label: "Scroll left",
           variant: "ghost",
           size: "sm",
@@ -298,8 +299,8 @@ export function Carousel({
           isDisabled: !overflowStart,
           onClick: () => scrollBy(-1),
           xstyle: styles.buttonRadiusOverride
-        })
-      }), /*#__PURE__*/_jsx("div", {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x67bb7w x1hc1fzr x19991ni xuedmi6 xlr8y92 xitnhlw"
@@ -308,11 +309,11 @@ export function Carousel({
             className: "x78zum5 x6s0dn4 xl56j7k x1prclbq xjspbzw x14hfi27 x19991ni xuedmi6 xlr8y92 xitnhlw xg01cxk x47corl"
           }
         }[!!!overflowEnd << 0],
-        children: /*#__PURE__*/_jsx(Button, {
-          icon: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsxDEV(Button, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "chevronRight",
             size: "xsm"
-          }),
+          }, void 0, false),
           label: "Scroll right",
           variant: "ghost",
           size: "sm",
@@ -323,14 +324,14 @@ export function Carousel({
           isDisabled: !overflowEnd,
           onClick: () => scrollBy(1),
           xstyle: styles.buttonRadiusOverride
-        })
-      })]
-    }), {
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true), {
       placement: 'below',
       alignment: 'center',
       style: coverStyle,
       xstyle: styles.buttonOverlay
     })]
-  });
+  }, void 0, true);
 }
 Carousel.displayName = 'Carousel';

package/dist/Center/Center.js

@@ -17,7 +17,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     k1xSpc: "x78zum5",
@@ -82,11 +82,11 @@ export function Center({
   const stylexProps = mergeProps(themeProps('center', {
     axis
   }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), xstyle), className, style);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...stylexProps,
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 Center.displayName = 'Center';

package/dist/Chat/ChatComposer.js

@@ -36,7 +36,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Types
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -134,7 +134,7 @@ export function ChatComposer(props) {
     const editable = bodyRef.current?.querySelector('[contenteditable="true"], textarea');
     editable?.focus();
   }, []);
-  const statusEl = status ? /*#__PURE__*/_jsxs("div", {
+  const statusEl = status ? /*#__PURE__*/_jsxDEV("div", {
     role: status.type === 'error' ? 'alert' : 'status',
     ...{
       0: {
@@ -162,12 +162,12 @@ export function ChatComposer(props) {
         className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x24i8r5 xdhq94a"
       }
     }[!!(statusPosition === 'top') << 2 | !!(status.type === 'error') << 1 | !!(status.type === 'warning') << 0],
-    children: [/*#__PURE__*/_jsx(Icon, {
+    children: [/*#__PURE__*/_jsxDEV(Icon, {
       icon: status.type === 'error' ? 'error' : 'warning',
       size: "md",
       color: status.type === 'error' ? 'error' : 'warning'
-    }), status.message]
-  }) : null;
+    }, void 0, false), status.message]
+  }, void 0, true) : null;
   const composerContext = useMemo(() => ({
     value: currentValue,
     onChange: updateValue,
@@ -178,9 +178,9 @@ export function ChatComposer(props) {
     canSend,
     onStop
   }), [currentValue, updateValue, handleSubmit, placeholder, isDisabled, isStopShown, canSend, onStop]);
-  return /*#__PURE__*/_jsx(ChatComposerContext, {
+  return /*#__PURE__*/_jsxDEV(ChatComposerContext, {
     value: composerContext,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       ...mergeProps(themeProps('chat-composer', {
         density
@@ -193,48 +193,48 @@ export function ChatComposer(props) {
         }
       }[!!isDisabled << 0], className, style),
       ...rest,
-      children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
+      children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxDEV("div", {
         ref: bodyRef,
         onClick: handleBodyClick,
         ...stylex.props(styles.body, density === 'compact' && styles.compact, xstyle),
-        children: [(headerActions || headerContext) && /*#__PURE__*/_jsxs("div", {
+        children: [(headerActions || headerContext) && /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj xe0p6wg"
           },
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsxDEV("div", {
             ...{
               className: "x78zum5 x6s0dn4 xzye2dw"
             },
             children: headerActions
-          }), /*#__PURE__*/_jsx("div", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
             ...{
               className: "x78zum5 x6s0dn4 x1txdalj xvc5jky x141an7d x1ltkj2j xv1l7n4"
             },
             children: headerContext
-          })]
-        }), /*#__PURE__*/_jsx("div", {
+          }, void 0, false)]
+        }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 xdt5ytf"
           },
-          children: input ?? /*#__PURE__*/_jsx(ChatComposerInput, {})
-        }), /*#__PURE__*/_jsxs("div", {
+          children: input ?? /*#__PURE__*/_jsxDEV(ChatComposerInput, {}, void 0, false)
+        }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj x21xpn4"
           },
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsxDEV("div", {
             ...{
               className: "x78zum5 x6s0dn4 xzye2dw"
             },
             children: footerActions
-          }), /*#__PURE__*/_jsxs("div", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
             ...{
               className: "x78zum5 x6s0dn4 xzye2dw"
             },
-            children: [sendActions, sendButton ?? /*#__PURE__*/_jsx(ChatSendButton, {})]
-          })]
-        })]
-      }), statusPosition === 'bottom' && statusEl]
-    })
-  });
+            children: [sendActions, sendButton ?? /*#__PURE__*/_jsxDEV(ChatSendButton, {}, void 0, false)]
+          }, void 0, true)]
+        }, void 0, true)]
+      }, void 0, true), statusPosition === 'bottom' && statusEl]
+    }, void 0, true)
+  }, void 0, false);
 }
 ChatComposer.displayName = 'ChatComposer';

package/dist/Chat/ChatComposerDrawer.js

@@ -21,7 +21,7 @@ import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typeScaleVa
 import { Badge } from "../Badge/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";
 const styles = {
   root: {
     kVAEAm: "x1n2onr6",
@@ -78,14 +78,14 @@ export function ChatComposerDrawer({
     }
     onCollapsedChange?.(next);
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     "data-testid": testId,
     ...mergeProps(themeProps('chat-composer-drawer', {
       collapsed: isCollapsed ? 'collapsed' : null
     }), stylex.props(styles.root, xstyle), className, style),
     ...htmlProps,
-    children: [canCollapse && /*#__PURE__*/_jsxs("div", {
+    children: [canCollapse && /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "xrvj5dj x1y6fwsi x6s0dn4 x1grt7ep x1pzlopt x1ng9b9t x1ypdohk x87ps6o x-default-marker"
@@ -105,7 +105,7 @@ export function ChatComposerDrawer({
           toggle();
         }
       },
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x1ms6mhf xgkxs2y x1lqcxt8 x3nfvp2 x6s0dn4 x1grt7ep x1txdalj xjspbzw x1hc1fzr x19991ni xuedmi6 xlr8y92"
@@ -114,16 +114,16 @@ export function ChatComposerDrawer({
             className: "x1ms6mhf xgkxs2y x1lqcxt8 x3nfvp2 x6s0dn4 x1grt7ep x1txdalj xjspbzw x19991ni xuedmi6 xlr8y92 xg01cxk x47corl"
           }
         }[!!!isCollapsed << 0],
-        children: [/*#__PURE__*/_jsx(Badge, {
+        children: [/*#__PURE__*/_jsxDEV(Badge, {
           variant: "neutral",
           label: count
-        }), /*#__PURE__*/_jsx("span", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "xv1l7n4 x1t9gxa6 xjm74w1 x7acx1w xt3l3uh xuedmi6 xlr8y92"
           },
           children: label
-        })]
-      }), /*#__PURE__*/_jsx("div", {
+        }, void 0, false)]
+      }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1hc1fzr x1e8aii2 xuedmi6 xlr8y92"
@@ -132,8 +132,8 @@ export function ChatComposerDrawer({
             className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1e8aii2 xuedmi6 xlr8y92 xg01cxk x47corl"
           }
         }[!!isCollapsed << 0]
-      })]
-    }), /*#__PURE__*/_jsx("div", {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"
@@ -142,7 +142,7 @@ export function ChatComposerDrawer({
           className: "xrvj5dj x1qn9uv2 x80gvsz xlr8y92 xihq33y"
         }
       }[!!(canCollapse && isCollapsed) << 0],
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           0: {
             className: "x2lwn1j x78zum5 x1a02dak xzye2dw x1cy8zhl x1hc1fzr x19991ni x80gvsz x10b1n17 xlr8y92"
@@ -152,8 +152,8 @@ export function ChatComposerDrawer({
           }
         }[!!(canCollapse && isCollapsed) << 0],
         children: children
-      })
-    })]
-  });
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
 }
 ChatComposerDrawer.displayName = 'ChatComposerDrawer';

package/dist/Chat/ChatComposerInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}

package/dist/Chat/ChatComposerInput.js

@@ -54,7 +54,7 @@ import { themeProps } from "../utils/themeProps.js";
  * - **Custom render**: `{ value, render }` \u2014 full control via ReactNode.
  *   Use for tooltips, hovercards, or any content beyond a badge.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -114,11 +114,12 @@ function serialize(node) {
 
 export function ChatComposerInput(props) {
   const composerCtx = useChatComposerContext();
+  const hasControlledValueProp = props.value !== undefined;
   const {
     ref,
     handleRef,
     value: controlledValue = composerCtx?.value,
-    onChange = composerCtx?.onChange,
+    onChange: onChangeProp,
     placeholder = composerCtx?.placeholder ?? 'Type a message\u2026',
     maxRows = 8,
     triggers,
@@ -135,6 +136,17 @@ export function ChatComposerInput(props) {
     style,
     ...rest
   } = props;
+  const composerOnChange = composerCtx?.onChange;
+  const onChange = useCallback(nextValue => {
+    if (hasControlledValueProp) {
+      onChangeProp?.(nextValue);
+      return;
+    }
+    composerOnChange?.(nextValue);
+    if (onChangeProp !== composerOnChange) {
+      onChangeProp?.(nextValue);
+    }
+  }, [composerOnChange, hasControlledValueProp, onChangeProp]);
   const editableRef = useRef(null);
   const selfRef = useRef(null);
   const [isEmpty, setIsEmpty] = useState(true);
@@ -404,17 +416,17 @@ export function ChatComposerInput(props) {
     emitChange();
   }, [onFiles, onPasteProp, emitChange, tokens, pasteAsToken]);
   const maxHeight = maxRows * LINE_HEIGHT_PX;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('chat-composer-input'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
     ...rest,
-    children: [isEmpty && /*#__PURE__*/_jsx("div", {
+    children: [isEmpty && /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x47corl xv1l7n4 xjm74w1 x6pjikd x19v9tvf x9ynric x87ps6o x9epnlk"
       },
       "aria-hidden": "true",
       children: placeholder
-    }), /*#__PURE__*/_jsx("div", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
       ref: editableRef,
       "aria-multiline": "true",
       "aria-label": label,
@@ -431,23 +443,23 @@ export function ChatComposerInput(props) {
           maxHeight: `${maxHeight}px`
         }
       })
-    }), triggerMenu.renderMenu(), tokens.tokenPortals.filter(({
+    }, void 0, false), triggerMenu.renderMenu(), tokens.tokenPortals.filter(({
       span
     }) => span.isConnected).map(({
       id,
       span,
       token
-    }) => /*#__PURE__*/createPortal(isCustomToken(token) ? /*#__PURE__*/_jsx("span", {
+    }) => /*#__PURE__*/createPortal(isCustomToken(token) ? /*#__PURE__*/_jsxDEV("span", {
       children: token.render()
-    }, id) : token.value.length > (pasteAsToken === null ? Infinity : 200) ? /*#__PURE__*/_jsx(ChatPastedTextToken, {
+    }, id, false) : token.value.length > (pasteAsToken === null ? Infinity : 200) ? /*#__PURE__*/_jsxDEV(ChatPastedTextToken, {
       text: token.value,
       onExpand: () => tokens.expandToken(id)
-    }, id) : /*#__PURE__*/_jsx(Badge, {
+    }, id, false) : /*#__PURE__*/_jsxDEV(Badge, {
       label: token.label,
       variant: token.variant,
       icon: token.icon
-    }, id), span))]
-  });
+    }, id, false), span))]
+  }, void 0, true);
 }
 ChatComposerInput.displayName = 'ChatComposerInput';
 
@@ -458,7 +470,7 @@ ChatComposerInput.displayName = 'ChatComposerInput';
 export function ChatComposerTokenElement({
   token
 }) {
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     "data-astryx-token": "",
     "data-astryx-token-value": token.value,
     contentEditable: false,
@@ -466,11 +478,11 @@ export function ChatComposerTokenElement({
       display: 'inline-flex',
       verticalAlign: 'baseline'
     },
-    children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsx(Badge, {
+    children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsxDEV(Badge, {
       label: token.label,
       variant: token.variant,
       icon: token.icon
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 ChatComposerTokenElement.displayName = 'ChatComposerTokenElement';

package/dist/Chat/ChatDictationButton.d.ts

@@ -36,7 +36,7 @@ export interface ChatDictationButtonProps extends BaseProps<HTMLSpanElement> {
  * <ChatDictationButton dictation={dictation} />
  * ```
  */
-export declare function ChatDictationButton({ ref, dictation, size, isHiddenWhenUnsupported, label, xstyle, className, style, }: ChatDictationButtonProps): React.JSX.Element | null;
+export declare function ChatDictationButton({ ref, dictation, size, isHiddenWhenUnsupported, label, xstyle, className, style, ...rest }: ChatDictationButtonProps): React.JSX.Element | null;
 export declare namespace ChatDictationButton {
     var displayName: string;
 }

package/dist/Chat/ChatDictationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,wBAAwB,4BAgE1B;yBAzEe,mBAAmB"}
+{"version":3,"file":"ChatDictationButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatDictationButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC;AAMvE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,sEAAsE;IACtE,SAAS,EAAE,0BAA0B,CAAC;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,IAAW,EACX,uBAA8B,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,4BA+D1B;yBAzEe,mBAAmB"}

package/dist/Chat/ChatDictationButton.js

@@ -28,7 +28,7 @@ import { mergeProps } from "../utils/index.js";
 // =============================================================================
 // Types
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -83,7 +83,8 @@ export function ChatDictationButton({
   label,
   xstyle,
   className,
-  style
+  style,
+  ...rest
 }) {
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
@@ -107,10 +108,11 @@ export function ChatDictationButton({
     barGap,
     barMaxHeight
   } = SIZE_CONFIG[size];
-  return /*#__PURE__*/_jsxs("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
-    children: [isListening && /*#__PURE__*/_jsx("span", {
+    ...rest,
+    children: [isListening && /*#__PURE__*/_jsxDEV("span", {
       "aria-hidden": true,
       ...mergeProps({
         className: "x10l6tqk x78zum5 x6s0dn4 xl56j7k x47corl x1vjfegm"
@@ -122,7 +124,7 @@ export function ChatDictationButton({
       }),
       children: boostedBands.slice(0, BAR_COUNT).map((level, i) => {
         const scale = BAR_MIN_SCALE + level * (1 - BAR_MIN_SCALE);
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...mergeProps({
             className: "xjspbzw x1g0ag68 x18dpk69 x11bq7d0 x9lcvmn"
           }, {
@@ -133,20 +135,20 @@ export function ChatDictationButton({
               transform: `scaleY(${scale})`
             }
           })
-        }, i);
+        }, i, false);
       })
-    }), /*#__PURE__*/_jsx(Button, {
+    }, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
       label: accessibleLabel,
       "aria-label": accessibleLabel,
       variant: "ghost",
       size: size,
-      icon: isListening ? undefined : /*#__PURE__*/_jsx(Icon, {
+      icon: isListening ? undefined : /*#__PURE__*/_jsxDEV(Icon, {
         icon: "microphone",
         size: size
-      }),
+      }, void 0, false),
       isIconOnly: true,
       onClick: dictation.toggle
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 ChatDictationButton.displayName = 'ChatDictationButton';