@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/DropdownMenu/renderDropdownItems.js

@@ -7,24 +7,45 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
-import { Divider } from "../Divider/index.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
+import { DropdownMenuDivider } from "./DropdownMenuDivider.js";
 import { DropdownMenuSubMenu } from "./DropdownMenuSubMenu.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, typographyVars, typeScaleVars, colorVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  divider: {
-    kqGvvJ: "xsq74q5",
-    $$css: true
-  }
-};
-function getItemKey(item) {
-  return `item-${item.label}`;
+function getItemKey(item, index) {
+  return `item-${item.id ?? index}`;
 }
 function getSectionKey(section, index) {
-  return `section-${section.title ?? index}`;
+  return `section-${section.id ?? index}`;
+}
+
+/**
+ * Renders one leaf row as a `DropdownMenuItem`.
+ *
+ * Keyed by `item.id` when the caller supplies one, else by position. NOT by
+ * label: an item that reports its own result (a copy row swapping to "Copied")
+ * would change key mid-interaction, remounting the row and dropping keyboard
+ * focus. Position is the safe default because a menu's rows are usually fixed;
+ * a menu whose items reorder or filter needs `id` for the same reason.
+ *
+ * `items` selects the submenu shape rather than being an item prop, and `id` is
+ * identity for React rather than something `DropdownMenuItem` renders, so both
+ * are stripped. Every remaining field of `DropdownMenuItemData` is a
+ * `DropdownMenuItem` prop by construction (the type is `Pick`ed from
+ * `DropdownMenuItemProps`), so the data path forwards them wholesale and can't
+ * silently drop a field the data API advertises.
+ */
+function renderLeafItem(item, index) {
+  const {
+    items: _submenuItems,
+    id: _id,
+    ...itemProps
+  } = item;
+  return /*#__PURE__*/_jsx(DropdownMenuItem, {
+    ...itemProps
+  }, getItemKey(item, index));
 }
 
 /**
@@ -36,10 +57,7 @@ export function renderDropdownItems(items) {
   for (let i = 0; i < items.length; i++) {
     const option = items[i];
     if ('type' in option && option.type === 'divider') {
-      elements.push(/*#__PURE__*/_jsx(Divider, {
-        xstyle: styles.divider,
-        ...themeProps('dropdown-menu-divider')
-      }, `divider-${i}`));
+      elements.push(/*#__PURE__*/_jsx(DropdownMenuDivider, {}, `divider-${i}`));
     } else if ('type' in option && option.type === 'section') {
       elements.push(/*#__PURE__*/_jsxs("div", {
         role: "group",
@@ -50,12 +68,7 @@ export function renderDropdownItems(items) {
             className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
           }),
           children: option.title
-        }), option.items.map(item => /*#__PURE__*/_jsx(DropdownMenuItem, {
-          icon: item.icon,
-          label: item.label,
-          onClick: item.onClick,
-          isDisabled: item.isDisabled
-        }, getItemKey(item)))]
+        }), option.items.map(renderLeafItem)]
       }, getSectionKey(option, i)));
     } else if (!('type' in option)) {
       // A plain item that declares nested `items` becomes a submenu (data-mode
@@ -69,14 +82,9 @@ export function renderDropdownItems(items) {
           label: option.label,
           isDisabled: option.isDisabled,
           children: renderDropdownItems(option.items)
-        }, getItemKey(option)));
+        }, getItemKey(option, i)));
       } else {
-        elements.push(/*#__PURE__*/_jsx(DropdownMenuItem, {
-          icon: option.icon,
-          label: option.label,
-          onClick: option.onClick,
-          isDisabled: option.isDisabled
-        }, getItemKey(option)));
+        elements.push(renderLeafItem(option, i));
       }
     }
   }

package/dist/EmptyState/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8CjB;yBA1De,UAAU"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAwDjB;yBApEe,UAAU"}

package/dist/EmptyState/EmptyState.js

@@ -77,11 +77,11 @@ export function EmptyState({
   const HeadingTag = `h${headingLevel}`;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
+    ...props,
     role: "status",
     ...mergeProps(themeProps('empty-state', {
       variant: isCompact ? 'compact' : null
     }), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
-    ...props,
     children: [icon != null && /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
       children: icon
@@ -89,28 +89,32 @@ export function EmptyState({
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xxc7z9f"
       },
-      children: [/*#__PURE__*/createElement(HeadingTag, {
+      children: [/*#__PURE__*/createElement(HeadingTag, mergeProps(themeProps('empty-state-title', {
+        variant: isCompact ? 'compact' : null
+      }), {
         0: {
           className: "x1ghz6dp xjb2p0i x18juvz8 x2mo6ok xf74fhv x1tgivj0"
         },
         1: {
           className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
         }
-      }[!!isCompact << 0], title), description != null &&
+      }[!!isCompact << 0]), title), description != null &&
       /*#__PURE__*/
       // Rendered as <div> (not <p>): description accepts ReactNode and a
       // <p> cannot legally contain block children, which causes hydration
       // mismatches. The StyleX style sets margin: 0, so appearance is
       // unchanged.
       _jsx("div", {
-        ...{
+        ...mergeProps(themeProps('empty-state-description', {
+          variant: isCompact ? 'compact' : null
+        }), {
           0: {
             className: "x1ghz6dp xjb2p0i xjm74w1 x1sodnla xw6l6zx xv1l7n4"
           },
           1: {
             className: "x1ghz6dp xjb2p0i x1sodnla xw6l6zx xv1l7n4 x141an7d"
           }
-        }[!!isCompact << 0],
+        }[!!isCompact << 0]),
         children: description
       })]
     }), actions != null && /*#__PURE__*/_jsx("div", {

package/dist/Field/InputClearButton.d.ts

@@ -1,8 +1,13 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton shared clear button for input components
- * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ * @output Exports InputClearButton, the shared clear (✕) button rendered by
+ *   every clearable input in the family.
+ * @position Shared primitive. Every input that renders a clear affordance —
+ *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
+ *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
+ *   routes it through here, so the glyph is themed in one place via the
+ *   `astryx-input-clear-icon` target.
  */
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -10,8 +15,16 @@ export interface InputClearButtonProps {
     label: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     xstyle?: stylex.StyleXStyles;
+    /**
+     * Extra class(es) for the clear glyph itself, merged onto the shared
+     * `astryx-input-clear-icon` target. Used by inputs that shipped a
+     * component-specific clear-icon target before the family converged here
+     * (e.g. `astryx-date-input-clear-icon`) to keep emitting it for a
+     * deprecation window; new callers don't need it.
+     */
+    iconClassName?: string;
 }
-export declare function InputClearButton({ label, onClick, xstyle, }: InputClearButtonProps): ReactNode;
+export declare function InputClearButton({ label, onClick, xstyle, iconClassName, }: InputClearButtonProps): ReactNode;
 export declare namespace InputClearButton {
     var displayName: string;
 }

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAW3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,GAAG,SAAS,CAYnC;yBAhBe,gBAAgB"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CAwBnC;yBA7Be,gBAAgB"}

package/dist/Field/InputClearButton.js

@@ -5,12 +5,18 @@
 /**
  * @file InputClearButton.tsx
  * @input Uses React, Button, Icon
- * @output Exports InputClearButton shared clear button for input components
- * @position Shared primitive; used by Typeahead, Tokenizer, TextInput
+ * @output Exports InputClearButton, the shared clear (✕) button rendered by
+ *   every clearable input in the family.
+ * @position Shared primitive. Every input that renders a clear affordance —
+ *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
+ *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
+ *   routes it through here, so the glyph is themed in one place via the
+ *   `astryx-input-clear-icon` target.
  */
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   button: {
@@ -22,8 +28,12 @@ const styles = {
 export function InputClearButton({
   label,
   onClick,
-  xstyle
+  xstyle,
+  iconClassName
 }) {
+  const {
+    className: iconTargetClassName
+  } = themeProps('input-clear-icon');
   return /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
     size: "sm",
@@ -31,7 +41,8 @@ export function InputClearButton({
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",
       size: "sm",
-      color: "inherit"
+      color: "secondary",
+      className: iconClassName != null ? `${iconTargetClassName} ${iconClassName}` : iconTargetClassName
     }),
     onClick: onClick,
     isIconOnly: true,

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA+M9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA2ZhB;yBAtbe,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAwN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}

package/dist/FileInput/FileInput.js

@@ -40,11 +40,11 @@ function formatFileSize(bytes) {
   }
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
+function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
   const errors = [];
   let valid = files;
   if (accept) {
-    const acceptedTypes = accept.split(',').map(t => t.trim().toLowerCase());
+    const acceptedTypes = accept.split(',').map(s => s.trim().toLowerCase());
     valid = valid.filter(file => {
       const matches = acceptedTypes.some(type => {
         if (type.startsWith('.')) {
@@ -56,7 +56,9 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
         return file.type.toLowerCase() === type;
       });
       if (!matches) {
-        errors.push(`"${file.name}" is not an accepted file type`);
+        errors.push(t('@astryx.fileInput.errorInvalidType', {
+          fileName: file.name
+        }));
       }
       return matches;
     });
@@ -64,14 +66,19 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
   if (maxSize != null) {
     valid = valid.filter(file => {
       if (file.size > maxSize) {
-        errors.push(`"${file.name}" exceeds ${formatFileSize(maxSize)} limit`);
+        errors.push(t('@astryx.fileInput.errorMaxSize', {
+          fileName: file.name,
+          maxSize: formatFileSize(maxSize)
+        }));
         return false;
       }
       return true;
     });
   }
   if (isMultiple && maxFiles != null && valid.length > maxFiles) {
-    errors.push(`Maximum ${maxFiles} files allowed`);
+    errors.push(t('@astryx.fileInput.errorMaxFiles', {
+      maxFiles
+    }));
     valid = valid.slice(0, maxFiles);
   }
   return {
@@ -248,7 +255,7 @@ export function FileInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, conveysRequired ? requiredID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
-  const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
+  const defaultPlaceholder = isMultiple ? t('@astryx.fileInput.placeholderMultiple') : t('@astryx.fileInput.placeholder');
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
   const handleFiles = useCallback(fileList => {
     if (isDisabled) {
@@ -257,7 +264,7 @@ export function FileInput({
     const {
       valid,
       errors
-    } = validateFiles(fileList, accept, maxSize, maxFiles, isMultiple);
+    } = validateFiles(fileList, accept, maxSize, maxFiles, isMultiple, t);
     if (errors.length > 0) {
       setValidationError(errors[0]);
     } else {
@@ -275,14 +282,18 @@ export function FileInput({
     // status mounts, so only announce the attach here (do not
     // double-announce errors).
     if (errors.length === 0) {
-      announce(valid.length === 1 ? `1 file selected: ${valid[0].name}` : `${valid.length} files selected`);
+      announce(valid.length === 1 ? t('@astryx.fileInput.fileSelected', {
+        fileName: valid[0].name
+      }) : t('@astryx.fileInput.filesSelected', {
+        count: valid.length
+      }));
     }
     if (changeAction) {
       startTransition(async () => {
         await changeAction(result);
       });
     }
-  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition, announce]);
+  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition, announce, t]);
   const handleInputChange = useCallback(e => {
     const fileList = Array.from(e.target.files ?? []);
     handleFiles(fileList);
@@ -388,7 +399,7 @@ export function FileInput({
         ...{
           className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x2b8uid x87ps6o"
         },
-        children: isDragOver ? 'Drop files here' : displayPlaceholder
+        children: isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder
       })]
     });
   };

package/dist/HoverCard/useHoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA4C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAyT5E"}
+{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAgC3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAiT5E"}

package/dist/HoverCard/useHoverCard.js

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/HoverCard/index.ts
  */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useLayer } from "../Layer/useLayer.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
@@ -26,20 +26,6 @@ const styles = {
     kaIpWk: "x7a53xk",
     kGVxlE: "x14hfi27",
     $$css: true
-  },
-  marginBlock: {
-    keoZOQ: "xcsaf9d",
-    k1K539: "x14cgwvg",
-    keTefX: "x1lziwak",
-    k71WvV: "x14z9mp",
-    $$css: true
-  },
-  marginInline: {
-    keoZOQ: "xdj266r",
-    k1K539: "xat24cr",
-    keTefX: "x11g1kdw",
-    k71WvV: "xnur1sd",
-    $$css: true
   }
 };
 
@@ -100,15 +86,12 @@ export function useHoverCard(options = {}) {
     onShow,
     onHide
   } = options;
-
-  // Select margin style based on placement axis
-  const marginStyle = placement === 'above' || placement === 'below' ? styles.marginBlock : styles.marginInline;
   const layer = useLayer({
     mode: 'context',
     onShow,
     onHide
   });
-  const popoverXstyle = useMemo(() => [styles.container, marginStyle], [marginStyle]);
+  const popoverXstyle = styles.container;
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const triggerRef = useRef(null);
@@ -262,6 +245,7 @@ export function useHoverCard(options = {}) {
     const renderProps = {
       placement: renderPlacement,
       alignment: props?.alignment ?? alignment,
+      offset: spacingVars['--spacing-1'],
       // A named dialog when a label is provided; otherwise a group. A group
       // may validly be unnamed, an unnamed dialog may not — and hover cards
       // are non-modal, so group is honest semantics without a name.

package/dist/Indicator/CheckIndicator.d.ts

@@ -0,0 +1,25 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default single-selection mark: a checkmark when chosen, nothing when not.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no role,
+ * state, or focus behavior; the option or row that hosts it keeps all of that.
+ *
+ * @example
+ * ```
+ * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
+ * ```
+ *
+ * Swap every single-selection mark for a radio:
+ *
+ * @example
+ * ```
+ * import {RadioIndicator} from '@astryxdesign/core/Indicator';
+ * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
+ * ```
+ */
+export declare function CheckIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'singleSelection'>): import("react").JSX.Element | null;
+export declare namespace CheckIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CheckIndicator.d.ts.map

package/dist/Indicator/CheckIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckIndicator.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AA6B5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,iBAAiB,CAAC,sCA6EnC;yBAvFe,cAAc"}

package/dist/Indicator/CheckIndicator.js

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CheckIndicator.tsx
+ * @input Indicator state props
+ * @output Exports CheckIndicator — the default single-selection mark
+ * @position Decorative check visual used wherever "this one is chosen" is
+ *           marked without a control: selector options, menu rows
+ *
+ * This is the indicator a product replaces to change what "chosen" looks like.
+ * `defineTheme({indicators: {check: RadioIndicator}})` turns every
+ * single-selection mark into a radio, in one line, without any component
+ * knowing it happened.
+ *
+ * It draws NOTHING when unchecked, which is what makes it the default: a
+ * listbox should not show an empty box beside every row. A replacement is free
+ * to draw in both states — a radio does — and hosting components render the
+ * indicator unconditionally so that works.
+ *
+ * Unlike the checkbox and radio indicators, this one renders no chrome of its
+ * own: it IS the glyph. Two consequences, both deliberate:
+ *
+ *   - It renders `<Icon>` directly rather than wrapping one, so the class the
+ *     host passes (`selector-check`, say) lands on the same element as
+ *     `astryx-icon` — one element carrying the mark and its theme target, per
+ *     the wrapper reduction in #4838/#4846.
+ *   - It adds NO theme target of its own. `astryx-checkbox` and `astryx-radio`
+ *     exist because those indicators draw chrome that needs styling; a check
+ *     is an icon, and `astryx-icon` plus the host's target already reach it.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import { Icon } from "../Icon/Icon.js";
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+import { isRenderable, mergeProps } from "../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The check glyph matches the control sizes the indicator families share. */
+const iconSizeForIndicator = {
+  sm: 'sm',
+  md: 'sm'
+};
+const styles = {
+  slot: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmuXW: "x2lah0s",
+    kzqmXN: "xcdlrvm",
+    kZKoxP: "x1l36t39",
+    $$css: true
+  },
+  enabled: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  disabled: {
+    kMwMTN: "xqa6c3m",
+    $$css: true
+  }
+};
+
+/**
+ * The default single-selection mark: a checkmark when chosen, nothing when not.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no role,
+ * state, or focus behavior; the option or row that hosts it keeps all of that.
+ *
+ * @example
+ * ```
+ * <CheckIndicator state={isSelected ? 'checked' : 'unchecked'} size="sm" />
+ * ```
+ *
+ * Swap every single-selection mark for a radio:
+ *
+ * @example
+ * ```
+ * import {RadioIndicator} from '@astryxdesign/core/Indicator';
+ * defineTheme({name: 'brand', indicators: {check: RadioIndicator}});
+ * ```
+ */
+export function CheckIndicator({
+  state,
+  size = 'md',
+  isDisabled = false,
+  children,
+  ref,
+  className,
+  style,
+  xstyle,
+  ...rest
+}) {
+  const isChecked = state === 'checked';
+
+  // `children` (a pending Spinner, say) replaces the mark but keeps the
+  // indicator's place, matching the other indicators' contract. It is checked
+  // BEFORE `state`: a host passes a busy visual through in whatever state the
+  // row happens to be in, and an unchecked listbox row is the common one.
+  //
+  // `isRenderable`, not `children != null`: the idiom a host actually writes is
+  // `children={isBusy && <Spinner/>}`, which passes `false` when it is not
+  // busy. `false` is non-null, so a null check takes this branch, renders
+  // nothing inside it, and DELETES the mark on a chosen row (#4893).
+  //
+  // There is no glyph to hang the caller's props on in this branch, so they go
+  // on a span — every one of them, so a `data-testid`, an `id`, a handler or
+  // an `xstyle` behaves the same whether or not children are present.
+  if (isRenderable(children)) {
+    return /*#__PURE__*/_jsx("span", {
+      ...rest,
+      ref: ref,
+      "aria-hidden": "true",
+      ...mergeProps(stylex.props(styles.slot, isDisabled ? styles.disabled : styles.enabled, xstyle), className, style),
+      children: children
+    });
+  }
+
+  // Nothing to draw, and no box to reserve: an unmarked row keeps the layout
+  // it would have without this indicator.
+  if (!isChecked) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Icon
+  // Spread first so the indicator's own contract (below) wins over any
+  // same-named DOM attribute a caller passed through.
+  //
+  // An indicator declares span props (BaseProps<HTMLSpanElement>) while
+  // Icon declares SVG ones, so the handler types differ nominally. For a
+  // registry icon the element that actually receives these IS a span
+  // (IconFromRegistry renders one), so forwarding them is correct at
+  // runtime; the cast only reconciles the two declarations.
+  , {
+    ...rest,
+    // After the spread, deliberately. Icon puts its own a11y defaults BEFORE
+    // `{...props}` as a documented escape hatch (Icon.tsx), which is right
+    // for an icon and wrong for an indicator — this one is decorative by
+    // contract, so it re-asserts it here rather than inheriting the hatch.
+    "aria-hidden": "true",
+    icon: "check",
+    size: iconSizeForIndicator[size],
+    color: isDisabled ? 'disabled' : 'accent'
+    // The focus ring rides in through xstyle (composed at resolution), but
+    // never paints here: it only activates under an owner's indicatorScope
+    // marker, and a listbox row that marks selection takes focus itself
+    // rather than marking its indicator.
+    ,
+    xstyle: xstyle
+    // Icon merges className/style with its own rather than shadowing them,
+    // so the host's theme target composes with `astryx-icon`.
+    ,
+    className: className,
+    style: style
+  });
+}
+CheckIndicator.displayName = 'CheckIndicator';

package/dist/Indicator/CheckboxIndicator.d.ts

@@ -0,0 +1,22 @@
+import type { IndicatorProps } from './types';
+/**
+ * The default checkbox visual: a square box with a checkmark or an
+ * indeterminate bar.
+ *
+ * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
+ * role, or focus behavior. The focus ring lives on the owner's control wrapper
+ * (see CheckboxInput), so a theme that replaces this component keeps a visible
+ * focus indicator for free. Themes replace it wholesale through
+ * `defineTheme({indicators: {checkbox: MyCheckbox}})`, or restyle it through
+ * the `checkbox` theme target like any other component.
+ *
+ * @example
+ * ```
+ * <CheckboxIndicator state="indeterminate" size="sm" />
+ * ```
+ */
+export declare function CheckboxIndicator({ state, size, isDisabled, children, ref, className, style, xstyle, ...rest }: IndicatorProps<'multiSelection'>): import("react").JSX.Element;
+export declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=CheckboxIndicator.d.ts.map

package/dist/Indicator/CheckboxIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/CheckboxIndicator.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAwI5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAW,EACX,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAwElC;yBAlFe,iBAAiB"}