@astryxdesign/core 0.3.0 → 0.4.0-canary.41f53a0

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -15,23 +15,20 @@
  * Enter/Space activation come from the parent DropdownMenu's useListFocus +
  * activation path, which matches menuitemcheckbox alongside plain menuitem rows.
  *
- * The checkbox visual composes the real CheckboxInput primitive so its checkmark
- * matches CheckboxListItem and picks up the standard `checkbox` theming slots.
- * It is purely decorative: the composed control is wrapped in an element that is
- * both `aria-hidden` and `inert`, so it contributes nothing to the row's
- * accessible name, and its native <input> and sr-only label stay out of the tab
- * order and the accessibility tree while pointer clicks fall through to the row
- * — the same shim MultiSelector uses. The row owns the checked state and
- * accessible name. The control size is derived from the menu's item size (a
- * `sm` menu gets the compact control; `md`/`lg` get the standard one) and it
- * swaps to the inline-end of the row on coarse-pointer (touch) devices via CSS
- * `order`, so it lands where selection toggles are conventionally placed on
+ * The checkbox visual is the shared checkbox indicator, decorative
+ * (aria-hidden) — the row owns the role, checked state, and accessible name, so
+ * there is no nested native <input> to shim out of the accessibility tree. It
+ * picks up the same `checkbox` theming (and any theme replacement) as
+ * CheckboxInput. The control size is derived from the menu's item size (a `sm`
+ * menu gets the compact control; `md`/`lg` get the standard one) and the marker
+ * box swaps to the inline-end of the row on coarse-pointer (touch) devices via
+ * CSS `order`, so it lands where selection toggles are conventionally placed on
  * mobile.
  */
 import { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
-import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
+import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
@@ -53,8 +50,18 @@ const styles = {
     kSiTet: "xbyyjgo",
     kkrTdU: "x1h6gzvc",
     $$css: true
+  },
+  marker: {
+    kfzvcC: "x47corl",
+    kayTVb: "x1g77sc7 xozvky",
+    keTefX: "x1lziwak x1jymrmb",
+    $$css: true
   }
 };
+
+// Matches the control sizes CheckboxInput uses, so a checkbox reads the same in
+// a menu row as it does in a form.
+
 /**
  * A checkable dropdown menu item (role="menuitemcheckbox").
  *
@@ -90,12 +97,7 @@ export function DropdownMenuCheckboxItem({
   const ctx = useDropdownMenuContext();
   const menuSize = ctx?.menuSize ?? 'md';
   const controlSize = menuSize === 'sm' ? 'sm' : 'md';
-
-  // The composed checkbox is decorative and inert, so its label never reaches
-  // the accessibility tree — the row's `label` prop provides the announced
-  // name. CheckboxInput still requires a string label, so pass one through when
-  // the row label is a plain string.
-  const checkboxLabel = typeof label === 'string' ? label : '';
+  const CheckboxControl = useIndicator('checkbox');
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -112,19 +114,18 @@ export function DropdownMenuCheckboxItem({
     "aria-checked": value,
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
-    marker: /*#__PURE__*/_jsx("div", {
-      "aria-hidden": "true",
-      inert: true,
-      ...{
-        className: "x78zum5 x2lah0s x47corl x1g77sc7 xozvky x1lziwak x1jymrmb"
-      },
-      children: /*#__PURE__*/_jsx(CheckboxInput, {
-        label: checkboxLabel,
-        isLabelHidden: true,
-        value: value,
-        isDisabled: isDisabled,
-        size: controlSize
-      })
+    marker:
+    /*#__PURE__*/
+    // No wrapper, and no menu-specific theme target: the shared
+    // `astryx-checkbox` target is already on this element (main reached
+    // the menu checkbox through it too), so the menu adds only its own
+    // placement rules. A wrapper here would have duplicated the
+    // indicator's control size and moved nothing themeable.
+    _jsx(CheckboxControl, {
+      state: value ? 'checked' : 'unchecked',
+      size: controlSize,
+      isDisabled: isDisabled,
+      xstyle: styles.marker
     }),
     startContent: icon ? renderIconSlot(icon, {
       size: 'sm',

package/dist/DropdownMenu/DropdownMenuDivider.d.ts

@@ -0,0 +1,25 @@
+import type { BaseProps } from '../BaseProps';
+export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /** Ref forwarded to the separator element. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * A horizontal rule separating groups of menu rows.
+ *
+ * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ *
+ * @example
+ * ```
+ * <DropdownMenu button={{ label: 'Actions' }}>
+ *   <DropdownMenuItem label="Edit" onClick={handleEdit} />
+ *   <DropdownMenuDivider />
+ *   <DropdownMenuItem label="Delete" variant="destructive" onClick={handleDelete} />
+ * </DropdownMenu>
+ * ```
+ */
+export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
+export declare namespace DropdownMenuDivider {
+    var displayName: string;
+}
+//# sourceMappingURL=DropdownMenuDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,wBAAwB,+BAW1B;yBAhBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuDivider.js

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DropdownMenuDivider.tsx
+ * @input Uses Divider, spacing tokens, themeProps
+ * @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
+ * @position Sub-component; used inside DropdownMenu
+ *
+ * The compound-mode peer of the data API's `{type: 'divider'}` option. The
+ * data path renders this same component, so neither mode can drift from the
+ * other in DOM, spacing, or theme target.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
+ * - /packages/core/src/DropdownMenu/DropdownMenuDivider.doc.mjs
+ * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
+ * - /packages/core/src/DropdownMenu/index.ts
+ * - /packages/core/src/ContextMenu/index.ts
+ * - /packages/core/src/Breadcrumbs/index.ts
+ * - /apps/storybook/stories/DropdownMenu.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ */
+import * as stylex from '@stylexjs/stylex';
+import { Divider } from "../Divider/index.js";
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  divider: {
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  }
+};
+const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
+/**
+ * A horizontal rule separating groups of menu rows.
+ *
+ * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ *
+ * @example
+ * ```
+ * <DropdownMenu button={{ label: 'Actions' }}>
+ *   <DropdownMenuItem label="Edit" onClick={handleEdit} />
+ *   <DropdownMenuDivider />
+ *   <DropdownMenuItem label="Delete" variant="destructive" onClick={handleDelete} />
+ * </DropdownMenu>
+ * ```
+ */
+export function DropdownMenuDivider({
+  xstyle,
+  className,
+  style,
+  ref
+}) {
+  return /*#__PURE__*/_jsx(Divider, {
+    ref: ref,
+    xstyle: [styles.divider, xstyle],
+    className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,
+    style: style
+  });
+}
+DropdownMenuDivider.displayName = 'DropdownMenuDivider';

package/dist/DropdownMenu/DropdownMenuItem.d.ts

@@ -34,6 +34,19 @@ export interface DropdownMenuItemProps extends Pick<BaseProps, 'xstyle' | 'class
     isDisabled?: boolean;
     /** Additional content to render after the label/description. */
     endContent?: ReactNode;
+    /**
+     * Whether activating the item closes the menu. Set `false` for an action
+     * that reports its result on the item itself (a copy row swapping to
+     * "Copied"), matching the checkbox and radio items, which already decide
+     * this for themselves.
+     * @default true
+     */
+    hasCloseOnSelect?: boolean;
+    /**
+     * Visual variant. `'destructive'` renders the label, description, and icon in
+     * the error color for dangerous actions (e.g. Delete). @default 'default'
+     */
+    variant?: 'default' | 'destructive';
 }
 /**
  * An interactive dropdown menu item with icon, label, and optional description.
@@ -45,11 +58,11 @@ export interface DropdownMenuItemProps extends Pick<BaseProps, 'xstyle' | 'class
  * ```
  * <DropdownMenu button={{ label: 'Actions' }}>
  *   <DropdownMenuItem icon={PencilIcon} label="Edit" onClick={handleEdit} />
- *   <DropdownMenuItem label="Delete" endContent={<Badge label="⌘D" />} onClick={handleDelete} />
+ *   <DropdownMenuItem label="Delete" variant="destructive" onClick={handleDelete} />
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuItem({ icon, label, description, onClick, isDisabled, endContent, xstyle, className, style, }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuItem({ icon, label, description, onClick, isDisabled, endContent, hasCloseOnSelect, variant, xstyle, className, style, }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare namespace DropdownMenuItem {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyC5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BA4CvB;yBAtDe,gBAAgB"}
+{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkD5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,+BA0DvB;yBAtEe,gBAAgB"}

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -53,6 +53,12 @@ const menuItemStyles = {
     kSiTet: "xbyyjgo",
     kkrTdU: "x1h6gzvc",
     $$css: true
+  },
+  destructive: {
+    kMwMTN: "xjt36v0",
+    "--_item-label-color": "xufyqxy",
+    "--_item-description-color": "xqlix59",
+    $$css: true
   }
 };
 const itemSizeStyles = {
@@ -79,7 +85,7 @@ const itemSizeStyles = {
  * ```
  * <DropdownMenu button={{ label: 'Actions' }}>
  *   <DropdownMenuItem icon={PencilIcon} label="Edit" onClick={handleEdit} />
- *   <DropdownMenuItem label="Delete" endContent={<Badge label="⌘D" />} onClick={handleDelete} />
+ *   <DropdownMenuItem label="Delete" variant="destructive" onClick={handleDelete} />
  * </DropdownMenu>
  * ```
  */
@@ -90,6 +96,8 @@ export function DropdownMenuItem({
   onClick,
   isDisabled = false,
   endContent,
+  hasCloseOnSelect = true,
+  variant = 'default',
   xstyle,
   className,
   style
@@ -97,29 +105,33 @@ export function DropdownMenuItem({
   const ctx = useDropdownMenuContext();
   const menuSize = ctx?.menuSize ?? 'md';
   const handleClick = useCallback(() => {
-    if (isDisabled || !onClick) {
+    if (isDisabled) {
       return;
     }
-    onClick();
-    ctx?.closeMenu();
-  }, [isDisabled, onClick, ctx]);
+    onClick?.();
+    if (hasCloseOnSelect) {
+      ctx?.closeMenu();
+    }
+  }, [isDisabled, onClick, hasCloseOnSelect, ctx]);
   const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
+  const isDestructive = variant === 'destructive';
   return /*#__PURE__*/_jsx(Item, {
     role: "menuitem",
     tabIndex: isDisabled ? undefined : -1,
     onPointerMove: handlePointerMove,
     startContent: icon ? renderIconSlot(icon, {
       size: 'sm',
-      color: 'secondary'
+      color: isDestructive ? 'error' : 'secondary'
     }) : undefined,
     label: label,
     description: description,
     endContent: endContent,
     onClick: handleClick,
     isDisabled: isDisabled,
-    xstyle: [menuItemStyles.root, itemSizeStyles[menuSize], isDisabled && menuItemStyles.disabled, xstyle],
+    xstyle: [menuItemStyles.root, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
     ...mergeProps(themeProps('dropdown-menu-item', {
-      size: menuSize
+      size: menuSize,
+      variant: isDestructive ? 'destructive' : null
     }), {
       className,
       style

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));
       }
     }
   }