@astryxdesign/core 0.3.0 → 0.4.0

package/src/DropdownMenu/DropdownMenu.tsx

@@ -14,6 +14,11 @@
  *
  * Both modes use useListFocus for DOM-based keyboard navigation.
  *
+ * Initial focus on open follows the input modality: a keyboard open
+ * (Enter / Space / ArrowDown on the trigger) focuses the first enabled item
+ * (APG menu-button); a pointer open focuses the menu container itself so no
+ * item reads as pre-selected, and the first ArrowDown then moves to item 1.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DropdownMenu/DropdownMenu.doc.mjs
  * - /packages/core/src/DropdownMenu/DropdownMenu.test.tsx
@@ -35,9 +40,9 @@ import * as stylex from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
 import {Button, type ButtonProps} from '../Button';
 import {Icon} from '../Icon';
-import type {IconType} from '../Icon';
 
 import {renderDropdownItems} from './renderDropdownItems';
+import type {DropdownMenuItemProps} from './DropdownMenuItem';
 import {
   MENU_ITEM_ROLES,
   MENU_ITEM_SELECTOR,
@@ -82,14 +87,6 @@ const styles = stylex.create({
   popover: {
     minWidth: 'anchor-size(width)',
   },
-  popoverBlockGap: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-  },
-  popoverInlineGap: {
-    marginInlineStart: spacingVars['--spacing-1'],
-    marginInlineEnd: spacingVars['--spacing-1'],
-  },
   popoverCustomWidth: (width: string | number) => ({
     minWidth: typeof width === 'number' ? `${width}px` : width,
   }),
@@ -99,11 +96,34 @@ const styles = stylex.create({
 // Types
 // =============================================================================
 
-export interface DropdownMenuItemData {
-  label: string;
-  onClick?: () => void;
-  isDisabled?: boolean;
-  icon?: ReactNode | IconType;
+/**
+ * Data-mode shape for one menu row.
+ *
+ * The item fields are sourced from `DropdownMenuItemProps` — data mode renders
+ * through `DropdownMenuItem`, so the two APIs describe the same thing and must
+ * not drift. Only the fields listed here are part of the data API; add a key to
+ * the `Pick` to expose more of the item's props to `items`.
+ */
+export interface DropdownMenuItemData extends Pick<
+  DropdownMenuItemProps,
+  | 'icon'
+  | 'onClick'
+  | 'isDisabled'
+  | 'variant'
+  | 'description'
+  | 'endContent'
+  | 'hasCloseOnSelect'
+> {
+  /**
+   * Stable identity for the row, used as its React key (as on
+   * `TreeListItemData`). Omit it and the row is keyed by position, which is
+   * correct for a fixed menu; set it when `items` can reorder, filter, or grow,
+   * so a row keeps its DOM node — and therefore keyboard focus — as the array
+   * changes around it.
+   */
+  id?: string;
+  /** Primary label content. */
+  label: ReactNode;
   /**
    * Nested submenu entries. When present, this row becomes a submenu (a
    * flyout revealing `items`) instead of a leaf action — no separate item
@@ -112,18 +132,24 @@ export interface DropdownMenuItemData {
   items?: DropdownMenuOption[];
 }
 
-export interface DropdownMenuDivider {
+/**
+ * Data-mode shape for a divider row. The compound-mode peer is the
+ * `DropdownMenuDivider` component, which both modes render.
+ */
+export interface DropdownMenuDividerData {
   type: 'divider';
 }
 
 export interface DropdownMenuSection {
   type: 'section';
+  /** Stable identity for the group; see {@link DropdownMenuItemData.id}. */
+  id?: string;
   title?: string;
   items: DropdownMenuItemData[];
 }
 
 export type DropdownMenuOption =
-  DropdownMenuItemData | DropdownMenuDivider | DropdownMenuSection;
+  DropdownMenuItemData | DropdownMenuDividerData | DropdownMenuSection;
 
 // =============================================================================
 // Props
@@ -254,6 +280,13 @@ export function DropdownMenu({
   // captures the trigger instead of the first menu item.
   const shouldFocusOnOpenRef = useRef(false);
 
+  // How the next open was initiated. Keyboard (and programmatic) opens focus
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container instead, so no item is visually highlighted as
+  // if pre-selected (#4477). Reset to 'keyboard' after every open so
+  // programmatic controlled opens keep the item-focus behavior.
+  const openModalityRef = useRef<'keyboard' | 'pointer'>('keyboard');
+
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);
     if (!isControlled) {
@@ -319,14 +352,26 @@ export function DropdownMenu({
     }
   }, [controlledIsOpen, isControlled, popover]);
 
-  // Move focus into the menu only after the layer has committed open.
+  // Move focus into the menu only after the layer has committed open,
+  // honoring the input modality: keyboard (and programmatic) opens land on
+  // the first enabled item per the APG menu-button pattern; pointer opens
+  // focus the menu container itself (tabIndex={-1}) so no item is
+  // highlighted as if pre-selected (#4477). Container focus keeps arrows,
+  // typeahead, Escape and Tab in the menu's onKeyDown, and is also the
+  // fallback when no item is focusable (e.g. all disabled), mirroring the
+  // submenu flyout fallback.
   useEffect(() => {
     if (!popover.isOpen || !shouldFocusOnOpenRef.current) {
       return;
     }
     shouldFocusOnOpenRef.current = false;
-    requestAnimationFrame(() => focusFirst());
-  }, [popover.isOpen, focusFirst]);
+    requestAnimationFrame(() => {
+      if (openModalityRef.current === 'pointer' || !focusFirst()) {
+        listRef.current?.focus();
+      }
+      openModalityRef.current = 'keyboard';
+    });
+  }, [popover.isOpen, focusFirst, listRef]);
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(
@@ -366,36 +411,51 @@ export function DropdownMenu({
     [listNavKeyDown, closeMenu, typeahead, ownsEvent],
   );
 
-  const openAndFocus = useCallback(() => {
-    shouldFocusOnOpenRef.current = true;
-    popover.show();
-  }, [popover]);
+  const openAndFocus = useCallback(
+    (modality: 'keyboard' | 'pointer' = 'keyboard') => {
+      openModalityRef.current = modality;
+      shouldFocusOnOpenRef.current = true;
+      popover.show();
+    },
+    [popover],
+  );
 
-  const handleButtonClick = useCallback(() => {
-    // If the menu was just closed by light dismiss (e.g. iOS Safari fires
-    // pointerdown → hide before the trigger's click), the click would
-    // otherwise immediately re-open it. Short-circuit within the guard window.
-    if (Date.now() - lastHideTimeRef.current < 50) {
-      return;
-    }
-    onClick?.();
-    if (isControlled) {
-      onOpenChange?.(!controlledIsOpen);
-    } else {
-      if (popover.isOpen) {
-        popover.hide();
+  const handleButtonClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      // If the menu was just closed by light dismiss (e.g. iOS Safari fires
+      // pointerdown → hide before the trigger's click), the click would
+      // otherwise immediately re-open it. Short-circuit within the guard
+      // window.
+      if (Date.now() - lastHideTimeRef.current < 50) {
+        return;
+      }
+      onClick?.();
+      // detail === 0 marks a synthesized click (screen reader / AT
+      // activation): treat it as keyboard so those users still land on the
+      // first item. Real pointer clicks report detail >= 1.
+      const modality = e.detail === 0 ? 'keyboard' : 'pointer';
+      if (isControlled) {
+        if (!controlledIsOpen) {
+          openModalityRef.current = modality;
+        }
+        onOpenChange?.(!controlledIsOpen);
       } else {
-        openAndFocus();
+        if (popover.isOpen) {
+          popover.hide();
+        } else {
+          openAndFocus(modality);
+        }
       }
-    }
-  }, [
-    onClick,
-    isControlled,
-    onOpenChange,
-    controlledIsOpen,
-    popover,
-    openAndFocus,
-  ]);
+    },
+    [
+      onClick,
+      isControlled,
+      onOpenChange,
+      controlledIsOpen,
+      popover,
+      openAndFocus,
+    ],
+  );
 
   const handleButtonKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -421,11 +481,6 @@ export function DropdownMenu({
   const popoverXstyle = menuWidth
     ? styles.popoverCustomWidth(menuWidth)
     : styles.popover;
-  const popoverGapStyle =
-    placement === 'above' || placement === 'below'
-      ? styles.popoverBlockGap
-      : styles.popoverInlineGap;
-
   // Context for compound items
   const contextValue = useMemo<DropdownMenuContextValue>(
     () => ({closeMenu, menuSize}),
@@ -468,6 +523,11 @@ export function DropdownMenu({
           ref={listRef}
           id={menuId}
           role="menu"
+          // Focus target for pointer opens (not in the Tab order): holding
+          // focus on the container keeps key events (arrows, typeahead,
+          // Escape, Tab) inside the menu without highlighting any item.
+          // Mirrors the DropdownMenuSubMenu flyout container.
+          tabIndex={-1}
           // Give the menu an accessible name from its trigger's label, so
           // screen readers announce e.g. "Actions menu" rather than an unnamed
           // menu (menus-13).
@@ -486,7 +546,8 @@ export function DropdownMenu({
         {
           placement,
           alignment,
-          xstyle: [popoverXstyle, popoverGapStyle, layerAnimations[placement]],
+          offset: spacingVars['--spacing-1'],
+          xstyle: [popoverXstyle, layerAnimations[placement]],
         },
       )}
     </>

package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -15,24 +15,21 @@
  * 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, type PointerEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
-import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
+import {useIndicator} from '../Indicator';
 import {Item} from '../Item';
 import {useDropdownMenuContext} from './DropdownMenuContext';
 import {focusMenuItemOnHover} from './menuItemHover';
@@ -61,9 +58,10 @@ const styles = stylex.create({
   // `aria-hidden` + `inert` + pointer-events:none keep the composed CheckboxInput
   // decorative: it adds no accessible name, and clicks fall through to the row,
   // which owns the role and activation.
-  markerBox: {
-    display: 'flex',
-    flexShrink: 0,
+  // Placement of the marker within the row. The indicator draws its own box
+  // (size, fill, border) — these are only the rules the MENU owns: where the
+  // marker sits in the row, and that it never takes the pointer.
+  marker: {
     pointerEvents: 'none',
     order: {
       default: 0,
@@ -76,6 +74,8 @@ const styles = stylex.create({
   },
 });
 
+// Matches the control sizes CheckboxInput uses, so a checkbox reads the same in
+// a menu row as it does in a form.
 export interface DropdownMenuCheckboxItemProps extends Omit<
   BaseProps,
   'onChange' | 'role' | 'aria-checked' | 'tabIndex'
@@ -157,12 +157,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) {
@@ -187,15 +182,17 @@ export function DropdownMenuCheckboxItem({
       tabIndex={isDisabled ? undefined : -1}
       onPointerMove={handlePointerMove}
       marker={
-        <div aria-hidden="true" inert {...stylex.props(styles.markerBox)}>
-          <CheckboxInput
-            label={checkboxLabel}
-            isLabelHidden
-            value={value}
-            isDisabled={isDisabled}
-            size={controlSize}
-          />
-        </div>
+        // 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.
+        <CheckboxControl
+          state={value ? 'checked' : 'unchecked'}
+          size={controlSize}
+          isDisabled={isDisabled}
+          xstyle={styles.marker}
+        />
       }
       startContent={
         icon

package/src/DropdownMenu/DropdownMenuDivider.doc.mjs

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
+
+export const docs = {
+  name: 'DropdownMenuDivider',
+  subComponentOf: 'DropdownMenu',
+  displayName: 'Dropdown Menu Divider',
+  isHiddenFromOverview: true,
+  description:
+    'A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven equivalent is the `{type: "divider"}` entry in `items`; both modes render this component, so they look and theme identically.',
+  props: [
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description:
+        'StyleX styles applied after the menu spacing. Must be a stylex.create() value: not an inline style object like style={{}}.',
+    },
+  ],
+  theming: {
+    targets: [{className: 'astryx-dropdown-menu-divider'}],
+  },
+};
+
+export const docsDense = {
+  name: 'DropdownMenuDivider',
+  isHiddenFromOverview: true,
+  displayName: 'Dropdown Menu Divider',
+  description:
+    'separator row for compound menus; compound peer of the data API\'s {type: "divider"}',
+  propDescriptions: {
+    xstyle: 'StyleX styles applied after the menu spacing',
+  },
+};

package/src/DropdownMenu/DropdownMenuDivider.tsx

@@ -0,0 +1,81 @@
+// 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';
+import {spacingVars} from '../theme/tokens.stylex';
+import type {BaseProps} from '../BaseProps';
+import {themeProps} from '../utils/themeProps';
+
+const styles = stylex.create({
+  divider: {
+    marginBlock: spacingVars['--spacing-1'],
+  },
+});
+
+const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
+
+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 function DropdownMenuDivider({
+  xstyle,
+  className,
+  style,
+  ref,
+}: DropdownMenuDividerProps) {
+  return (
+    <Divider
+      ref={ref}
+      xstyle={[styles.divider, xstyle]}
+      className={
+        className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME
+      }
+      style={style}
+    />
+  );
+}
+
+DropdownMenuDivider.displayName = 'DropdownMenuDivider';

package/src/DropdownMenu/DropdownMenuItem.doc.mjs

@@ -7,7 +7,8 @@ export const docs = {
   subComponentOf: 'DropdownMenu',
   displayName: 'Dropdown Menu Item',
   isHiddenFromOverview: true,
-  description: 'Helper component for custom item rendering with consistent styling.',
+  description:
+    'Helper component for custom item rendering with consistent styling.',
   playground: {
     // Standalone DropdownMenuItem has no required props, so the properties-tab
     // preview renders an empty row without seeded content. Seed a label and
@@ -18,7 +19,8 @@ export const docs = {
     {
       name: 'icon',
       type: 'IconType',
-      description: 'Icon to display before the label. See `astryx docs icons` for valid semantic names.',
+      description:
+        'Icon to display before the label. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'label',
@@ -33,12 +35,28 @@ export const docs = {
     {
       name: 'endContent',
       type: 'ReactNode',
-      description: 'Additional content rendered after the label and description.',
+      description:
+        'Additional content rendered after the label and description.',
+    },
+    {
+      name: 'hasCloseOnSelect',
+      type: 'boolean',
+      description:
+        'Whether activating the item closes the menu. Set false for an action that reports its result on the item itself.',
+      default: 'true',
+    },
+    {
+      name: 'variant',
+      type: "'default' | 'destructive'",
+      description:
+        "Visual variant. 'destructive' renders the label, description, and icon in the error color for dangerous actions (e.g. Delete).",
+      default: "'default'",
     },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
-      description: 'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.',
+      description:
+        'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.',
     },
   ],
 };
@@ -69,6 +87,19 @@ export const docsZh = {
       type: 'ReactNode',
       description: '在标签和描述之后渲染的附加内容。',
     },
+    {
+      name: 'hasCloseOnSelect',
+      type: 'boolean',
+      description: '激活该项时是否关闭菜单。若操作要在该项上就地反馈结果，请设为 false。',
+      default: 'true',
+    },
+    {
+      name: 'variant',
+      type: "'default' | 'destructive'",
+      description:
+        "视觉变体。'destructive' 会以错误色渲染标签、描述和图标，用于危险操作（如删除）。",
+      default: "'default'",
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -87,6 +118,10 @@ export const docsDense = {
     label: 'primary label text',
     description: 'secondary text below label',
     endContent: 'additional content after label+description',
+    hasCloseOnSelect:
+      'false keeps the menu open on activation (in-place result on the item)',
+    variant:
+      "'destructive' renders the item in the error color for dangerous actions",
     xstyle: 'StyleX styles for root container',
   },
 };

package/src/DropdownMenu/DropdownMenuItem.tsx

@@ -62,6 +62,15 @@ const menuItemStyles = stylex.create({
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+  destructive: {
+    // Only recolor the text/icon; the hover / focus background stays the shared
+    // neutral overlay from `root` so the hover state matches every other menu
+    // item. The root color covers the label/description via the Item custom
+    // properties (and any bare text). Semantic error tokens keep it theme-aware.
+    color: colorVars['--color-error'],
+    '--_item-label-color': colorVars['--color-error'],
+    '--_item-description-color': colorVars['--color-error'],
+  },
 });
 
 const itemSizeStyles = stylex.create({
@@ -91,6 +100,19 @@ export interface DropdownMenuItemProps extends Pick<
   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';
 }
 
 /**
@@ -103,7 +125,7 @@ export interface DropdownMenuItemProps extends Pick<
  * ```
  * <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>
  * ```
  */
@@ -114,6 +136,8 @@ export function DropdownMenuItem({
   onClick,
   isDisabled = false,
   endContent,
+  hasCloseOnSelect = true,
+  variant = 'default',
   xstyle,
   className,
   style,
@@ -122,18 +146,22 @@ export function DropdownMenuItem({
   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: PointerEvent<HTMLElement>) => focusMenuItemOnHover(e, isDisabled),
     [isDisabled],
   );
 
+  const isDestructive = variant === 'destructive';
+
   return (
     <Item
       role="menuitem"
@@ -141,7 +169,10 @@ export function DropdownMenuItem({
       onPointerMove={handlePointerMove}
       startContent={
         icon
-          ? renderIconSlot(icon, {size: 'sm', color: 'secondary'})
+          ? renderIconSlot(icon, {
+              size: 'sm',
+              color: isDestructive ? 'error' : 'secondary',
+            })
           : undefined
       }
       label={label}
@@ -152,13 +183,20 @@ export function DropdownMenuItem({
       xstyle={[
         menuItemStyles.root,
         itemSizeStyles[menuSize],
+        isDestructive && menuItemStyles.destructive,
         isDisabled && menuItemStyles.disabled,
         xstyle,
       ]}
-      {...mergeProps(themeProps('dropdown-menu-item', {size: menuSize}), {
-        className,
-        style,
-      })}
+      {...mergeProps(
+        themeProps('dropdown-menu-item', {
+          size: menuSize,
+          variant: isDestructive ? 'destructive' : null,
+        }),
+        {
+          className,
+          style,
+        },
+      )}
     />
   );
 }