@astryxdesign/core 0.3.0 → 0.4.0-canary.058f476

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -10,11 +10,11 @@
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
  * Enter/Space activation come from the parent DropdownMenu.
  *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
+ * The round radio visual is the shared radio indicator, decorative
+ * (aria-hidden) — the row owns the checked state, and menu radios pick up the
+ * same `radio` theming (and any theme replacement) as RadioList. This row keeps
+ * the marker box: its size is derived from the menu's item size and it swaps to
+ * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 import { type ReactNode } from 'react';
 import { type IconType } from '../Icon';

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAYtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqE5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAgF5B;yBA3Fe,qBAAqB"}
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAmE5B;yBA9Ee,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -14,20 +14,21 @@
  * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
  * Enter/Space activation come from the parent DropdownMenu.
  *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
+ * The round radio visual is the shared radio indicator, decorative
+ * (aria-hidden) — the row owns the checked state, and menu radios pick up the
+ * same `radio` theming (and any theme replacement) as RadioList. This row keeps
+ * the marker box: its size is derived from the menu's item size and it swaps to
+ * the inline-end of the row on coarse-pointer (touch) devices via CSS `order`.
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
+import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
 import { useDropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,62 +47,17 @@ const styles = {
     kkrTdU: "x1h6gzvc",
     $$css: true
   },
-  circle: {
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kmuXW: "x2lah0s",
-    kB7OPa: "x9f619",
-    kMzoRj: "x1litavf",
-    ksu8eU: "x1y0btm7",
-    kaIpWk: "x16rqkct",
-    k1ekBW: "xts7igz",
-    kIyJzY: "xuedmi6 x12w9bfk",
-    kAMwcw: "xlr8y92",
+  marker: {
+    kfzvcC: "x47corl",
     kayTVb: "x1g77sc7 xozvky",
     keTefX: "x1lziwak x1jymrmb",
     $$css: true
-  },
-  unchecked: {
-    kVAM5u: "xvy26l8",
-    kWkggS: "x10xzikg",
-    $$css: true
-  },
-  checked: {
-    kVAM5u: "xad5do",
-    kWkggS: "x1ewilqj",
-    $$css: true
-  },
-  dot: {
-    kaIpWk: "x16rqkct",
-    kWkggS: "x1azo05",
-    $$css: true
-  }
-};
-const circleSizeStyles = {
-  sm: {
-    kzqmXN: "x1xp8n7a",
-    kZKoxP: "xmix8c7",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x17z2i9w",
-    kZKoxP: "x17rw0jw",
-    $$css: true
-  }
-};
-const dotSizeStyles = {
-  sm: {
-    kzqmXN: "x1v4s8kt",
-    kZKoxP: "xols6we",
-    $$css: true
-  },
-  md: {
-    kzqmXN: "x1xc55vz",
-    kZKoxP: "xdk7pt",
-    $$css: true
   }
 };
+
+// Matches the control sizes RadioList uses, so a radio reads the same in a
+// menu row as it does in a radio group.
+
 /**
  * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
  *
@@ -133,6 +89,7 @@ export function DropdownMenuRadioItem({
   const menuSize = menuCtx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
   const isChecked = groupCtx.value === value;
+  const RadioControl = useIndicator('radio');
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -149,19 +106,19 @@ export function DropdownMenuRadioItem({
     "aria-checked": isChecked,
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
-    marker: /*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      ...mergeProps(themeProps('dropdown-menu-radio', {
+    marker:
+    /*#__PURE__*/
+    // No wrapper — see DropdownMenuCheckboxItem: the target belongs on the
+    // visible circle, and the indicator already owns its control size.
+    _jsx(RadioControl, {
+      state: isChecked ? 'checked' : 'unchecked',
+      size: controlSize,
+      isDisabled: isDisabled,
+      xstyle: styles.marker,
+      ...themeProps('dropdown-menu-radio', {
         size: controlSize,
         checked: isChecked ? 'checked' : null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.circle, circleSizeStyles[controlSize], isChecked ? styles.checked : styles.unchecked)),
-      children: isChecked && /*#__PURE__*/_jsx("span", {
-        ...mergeProps(themeProps('dropdown-menu-radio-dot', {
-          size: controlSize,
-          checked: 'checked',
-          disabled: isDisabled ? 'disabled' : null
-        }), stylex.props(styles.dot, dotSizeStyles[controlSize]))
       })
     }),
     startContent: icon ? renderIconSlot(icon, {

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAmVX;yBArVe,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqF5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAoVX;yBAtVe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -95,19 +95,12 @@ const triggerSizeStyles = {
     $$css: true
   }
 };
-const _temp = {
-  keTefX: "x11g1kdw",
-  k71WvV: "xnur1sd",
-  "$$css": true
-};
 const flyoutStyles = {
   popover: {
     k7Eaqz: "x5w4yej",
-    keTefX: "x11g1kdw",
-    k71WvV: "xnur1sd",
     $$css: true
   },
-  popoverCustomWidth: width => [_temp, {
+  popoverCustomWidth: width => [{
     k7Eaqz: (typeof width === 'number' ? `${width}px` : width) != null ? "xkj4a21" : typeof width === 'number' ? `${width}px` : width,
     $$css: true
   }, {
@@ -428,6 +421,7 @@ export function DropdownMenuSubMenu(props) {
     }), {
       placement: 'end',
       alignment: 'start',
+      offset: spacingVars['--spacing-1'],
       xstyle: [popoverXstyle, layerAnimations.end]
     })]
   });

package/dist/DropdownMenu/index.d.ts

@@ -12,8 +12,9 @@
  * DropdownMenuContext + useListFocus path, so a new item type (e.g. a submenu)
  * only shows up in their public API once it's aliased there too.
  */
-export { DropdownMenu, type DropdownMenuProps, type DropdownMenuButtonProps, type DropdownMenuItemData, type DropdownMenuDivider, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu';
+export { DropdownMenu, type DropdownMenuProps, type DropdownMenuButtonProps, type DropdownMenuItemData, type DropdownMenuDividerData, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu';
 export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem';
+export { DropdownMenuDivider, type DropdownMenuDividerProps, } from './DropdownMenuDivider';
 export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
 export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup';
 export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,gBAAgB,EAAE,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,gBAAgB,EAAE,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIhF,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAC"}

package/dist/DropdownMenu/index.js

@@ -19,6 +19,10 @@
 export { DropdownMenu } from "./DropdownMenu.js";
 export { DropdownMenuItem } from "./DropdownMenuItem.js";
 
+// Divider — the compound peer of the data API's `{type: 'divider'}`. Both
+// modes render this component, so they cannot drift.
+export { DropdownMenuDivider } from "./DropdownMenuDivider.js";
+
 // Selectable items — checkbox (independent) and radio (single-select group).
 export { DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.js";
 export { DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.js";

package/dist/DropdownMenu/renderDropdownItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderDropdownItems.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/renderDropdownItems.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAyBxB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAwE1E"}
+{"version":3,"file":"renderDropdownItems.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/renderDropdownItems.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,EAAe,SAAS,EAAC,MAAM,OAAO,CAAC;AAYnD,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AA8CxB;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAkD1E"}

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/Field/PanelSearchInput.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @file PanelSearchInput.tsx
+ * @input Uses React, StyleX, Icon, InputClearButton, theme tokens
+ * @output Exports PanelSearchInput — the search row that sits at the top of a
+ *   dropdown panel
+ * @position Shared internal primitive; used by Selector and MultiSelector
+ *
+ * A dropdown panel is already a bordered, elevated surface. Nesting a bordered
+ * TextInput inside it draws a second box within that box, so the field reads as
+ * a control dropped into the menu rather than part of it. This row is the
+ * seamless alternative — magnifier, borderless input, clear button — separated
+ * from the options by a divider the panel owns.
+ *
+ * The field is shaped like the option rows under it rather than like a form
+ * input: same inset from the panel edge, same `--radius-element` corners, same
+ * height. The focus ring is drawn on that rounded box, so focus reads as "this
+ * row of the panel" — the same visual language as an item's highlight — instead
+ * of ringing the whole panel header. It appears for keyboard focus only; see
+ * `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
+ *
+ *   ┌─ panel ──────────────────┐
+ *   │ ┌──────────────────────┐ │  ← field: rounded, inset, item-sized
+ *   │ │ ⌕  Search…         ✕ │ │
+ *   │ └──────────────────────┘ │
+ *   ├──────────────────────────┤  ← divider (full-bleed)
+ *   │ ┌──────────────────────┐ │
+ *   │ │ Apple                │ │  ← option row: same box
+ *
+ * The clear button is the shared `InputClearButton`, so the affordance and its
+ * ghost-button behavior match every other input's clear. It renders AFTER the
+ * input in DOM order: the selector components' Tab handling depends on that
+ * order to keep the popup open while focus moves onto it.
+ *
+ * Not exported from the package: it is an implementation detail of the panels
+ * that use it, not public API.
+ */
+import { type Ref } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>, 'onChange'> {
+    /** Ref forwarded to the input element (for focus management). */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Accessible name for the input. Rendered as `aria-label`: the panel has no
+     * visible label for the field, and a placeholder is not a reliable name.
+     */
+    label: string;
+    /** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
+    clearLabel: string;
+    /** Placeholder text shown while the query is empty. */
+    placeholder?: string;
+    /** The current query. */
+    value: string;
+    /** Called with the next query on every keystroke and on clear. */
+    onValueChange: (value: string) => void;
+    /** Key handler for the input itself. */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /** Focus handler for the input; runs after the ring's own bookkeeping. */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Blur handler for the input; runs after the ring's own bookkeeping. */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Key handler for the row. Events from the input are handled by `onKeyDown`;
+     * this one exists for keys pressed on the clear button, which has no other
+     * handler of its own.
+     */
+    onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+/**
+ * Search row for the top of a dropdown panel: magnifier, borderless input, and
+ * a clear button once a query is typed, in a rounded box shaped like the
+ * option rows beneath it.
+ *
+ * `className`/`style`/`xstyle` apply to the outer row (use them to match the
+ * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
+ * passes through to the `<input>`, so the caller owns the combobox wiring.
+ */
+export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
+export declare namespace PanelSearchInput {
+    var displayName: string;
+}
+//# sourceMappingURL=PanelSearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAmC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6E5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAkEvB;yBAjFe,gBAAgB"}