@luxfi/ui 7.4.10 → 7.4.12

package/src/menu.tsx

@@ -1,41 +1,40 @@
 'use client';
 
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import * as React from 'react';
+import { Menu, Text, View, XStack } from '@hanzo/gui';
 import { Check, ChevronRight } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from './utils';
-
-// --- Utility: map Chakra-style placement string to Radix side + align ---
-
-type Side = 'top' | 'right' | 'bottom' | 'left';
-type Align = 'start' | 'center' | 'end';
-
-interface PlacementMapping {
-  readonly side: Side;
-  readonly align: Align;
-}
-
-function parsePlacement(placement: string | undefined): PlacementMapping {
-  if (!placement) {
-    return { side: 'bottom', align: 'start' };
-  }
-
-  const parts = placement.split('-');
-  const side = (parts[0] as Side) ?? 'bottom';
-  const alignPart = parts[1];
-
-  let align: Align = 'center';
-  if (alignPart === 'start') {
-    align = 'start';
-  } else if (alignPart === 'end') {
-    align = 'end';
-  }
-
-  return { side, align };
-}
+import { ink } from './ink';
+
+// The Lux menu, on gui's Menu — the same fifteen parts Radix's dropdown has,
+// under the names this package already published.
+//
+// One thing genuinely got simpler rather than merely moving. Radix splits
+// position into `side` + `align`, so the old file carried a `parsePlacement`
+// that took `'bottom-start'` apart into `{ side: 'bottom', align: 'start' }`,
+// plus a context to carry the two halves down to the content. gui's Menu sits
+// on Popper, which takes the floating-ui `placement` string whole and derives
+// side and align itself. The parser, the context, and the four props they fed
+// are all gone: the caller's string reaches the engine untouched.
+
+const ITEM_HOVER = 'var(--color-popover-item-hover)';
+const TEXT = 'var(--color-text-primary)';
+
+/** Resting/highlighted look shared by every selectable row. */
+const ROW = {
+  position: 'relative',
+  flexDirection: 'row',
+  alignItems: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  borderRadius: 6,
+  fontSize: 14,
+  backgroundColor: 'transparent',
+  hoverStyle: { backgroundColor: ITEM_HOVER },
+  focusStyle: { backgroundColor: ITEM_HOVER },
+} as const;
 
-// --- Positioning context (mirrors popover.tsx pattern) ---
+// --- MenuRoot ---
 
 interface Positioning {
   readonly placement?: string;
@@ -45,427 +44,255 @@ interface Positioning {
   };
 }
 
-interface MenuPositioning {
-  readonly side: Side;
-  readonly align: Align;
-  readonly sideOffset: number;
-  readonly alignOffset: number;
-}
-
-const PositioningContext = React.createContext<MenuPositioning>({
-  side: 'bottom',
-  align: 'start',
-  sideOffset: 4,
-  alignOffset: 0,
-});
-
-// --- MenuRoot ---
-
 export interface MenuRootProps {
   readonly children?: React.ReactNode;
   readonly open?: boolean;
   readonly defaultOpen?: boolean;
   readonly onOpenChange?: (details: { open: boolean }) => void;
   readonly positioning?: Positioning;
-  readonly lazyMount?: boolean;
-  readonly unmountOnExit?: boolean;
   readonly modal?: boolean;
 }
 
-export const MenuRoot = (props: MenuRootProps): React.ReactElement => {
-  const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    positioning,
-    modal = true,
-    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
-    // mount/unmount automatically.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    lazyMount: _lazyMount,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unmountOnExit: _unmountOnExit,
-  } = props;
-
-  const mergedPositioning: Positioning = {
-    placement: 'bottom-start',
-    ...positioning,
-    offset: {
-      mainAxis: 4,
-      ...positioning?.offset,
-    },
-  };
-
-  const { side, align } = parsePlacement(mergedPositioning.placement);
-
-  const positioningValue = React.useMemo<MenuPositioning>(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0,
-  }), [ side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis ]);
-
-  const handleOpenChange = React.useCallback((isOpen: boolean) => {
-    onOpenChange?.({ open: isOpen });
-  }, [ onOpenChange ]);
-
-  return (
-    <PositioningContext.Provider value={ positioningValue }>
-      <DropdownMenu.Root
-        open={ open }
-        defaultOpen={ defaultOpen }
-        onOpenChange={ handleOpenChange }
-        modal={ modal }
-      >
-        { children }
-      </DropdownMenu.Root>
-    </PositioningContext.Provider>
-  );
-};
+export const MenuRoot = ({
+  children, open, defaultOpen, onOpenChange, positioning, modal = true,
+}: MenuRootProps): React.ReactElement => (
+  <Menu
+    open={ open }
+    defaultOpen={ defaultOpen }
+    onOpenChange={ onOpenChange ? (isOpen: boolean) => onOpenChange({ open: isOpen }) : undefined }
+    modal={ modal }
+    placement={ (positioning?.placement ?? 'bottom-start') as never }
+    offset={ positioning?.offset?.mainAxis ?? 4 }
+  >
+    { children }
+  </Menu>
+);
 
 // --- MenuTrigger ---
 
-export interface MenuTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
-  readonly asChild?: boolean;
-}
+export type MenuTriggerProps = React.ComponentProps<typeof Menu.Trigger>;
 
-export const MenuTrigger = React.forwardRef<
-  HTMLButtonElement,
-  MenuTriggerProps
->(function MenuTrigger(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return <DropdownMenu.Trigger asChild={ asChild } ref={ ref } { ...rest }/>;
-});
+export const MenuTrigger = ({ asChild = false, ...rest }: MenuTriggerProps): React.ReactElement => (
+  <Menu.Trigger asChild={ asChild } { ...rest }/>
+);
 
 // --- MenuContent ---
 
-export interface MenuContentProps extends React.ComponentPropsWithoutRef<'div'> {
+export type MenuContentProps = React.ComponentProps<typeof Menu.Content> & {
   readonly portalled?: boolean;
-  readonly portalRef?: React.RefObject<HTMLElement>;
-
-  /** Legacy Chakra zIndex prop - mapped to inline style */
-  readonly zIndex?: string | number;
-
-  /** Legacy Chakra minW prop - mapped to inline style */
   readonly minW?: string | number;
-}
-
-export const MenuContent = React.forwardRef<
-  HTMLDivElement,
-  MenuContentProps
->(function MenuContent(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React.useContext(PositioningContext);
-
-  const mergedStyle: React.CSSProperties = {
-    ...style,
-    ...(zIndex !== undefined ? { zIndex: typeof zIndex === 'string' ? `var(--z-index-${ zIndex }, ${ zIndex })` : zIndex } : {}),
-    ...(minW !== undefined ? { minWidth: minW } : {}),
-  };
+};
 
+export const MenuContent = ({
+  portalled = true, minW, children, ...rest
+}: MenuContentProps): React.ReactElement => {
   const content = (
-    <DropdownMenu.Content
-      ref={ ref }
-      side={ positioning.side }
-      align={ positioning.align }
-      sideOffset={ positioning.sideOffset }
-      alignOffset={ positioning.alignOffset }
-      className={ cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-lg p-1',
-        'border border-[var(--color-popover-border,var(--color-border-divider))]',
-        'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
-        'shadow-[0_4px_12px_var(--color-popover-shadow)]',
-        'outline-none',
-        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      ) }
-      style={ Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined }
+    <Menu.Content
+      unstyled
+      zIndex={ 50 }
+      minWidth={ (minW ?? 128) as never }
+      overflow="hidden"
+      borderRadius={ 8 }
+      padding={ 4 }
+      borderWidth={ 1 }
+      borderColor={ 'var(--color-popover-border)' as never }
+      backgroundColor={ 'var(--color-popover-bg)' as never }
+      transition="quick"
+      enterStyle={{ opacity: 0, scale: 0.95 }}
+      exitStyle={{ opacity: 0, scale: 0.95 }}
       { ...rest }
-    />
+    >
+      { children }
+    </Menu.Content>
   );
 
-  if (!portalled) {
-    return content;
-  }
-
-  return (
-    <DropdownMenu.Portal container={ portalRef?.current ?? undefined }>
-      { content }
-    </DropdownMenu.Portal>
-  );
-});
+  return portalled ? <Menu.Portal>{ content }</Menu.Portal> : content;
+};
 
 // --- MenuItem ---
 
-export interface MenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
+export type MenuItemProps = React.ComponentProps<typeof Menu.Item> & {
 
-  /** Informational value identifier (not used by Radix but kept for API compat) */
+  /** Informational identifier — the row's own name, not read by the engine. */
   readonly value?: string;
-  readonly disabled?: boolean;
-  readonly asChild?: boolean;
-
-  /** Chakra compat - accepted but not used by Radix */
-  readonly closeOnSelect?: boolean;
-}
+};
 
-export const MenuItem = React.forwardRef<
-  HTMLDivElement,
-  MenuItemProps
->(function MenuItem(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return (
-    <DropdownMenu.Item
-      ref={ ref }
-      asChild={ asChild }
-      disabled={ disabled }
-      onClick={ onClick }
-      className={ cn(
-        'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-        'outline-none transition-colors',
-        'text-[var(--color-text-primary,inherit)]',
-        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        className,
-      ) }
-      { ...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenu.Item>) }
+export const MenuItem = ({ children, value: _value, asChild, ...rest }: MenuItemProps): React.ReactElement => (
+  // `asChild` means the caller brought its own element and owns the look. Its
+  // props are then forwarded to that element verbatim, so the skin must NOT be
+  // applied: `unstyled` and friends are not DOM attributes and React rejects
+  // them out loud ("Received `true` for a non-boolean attribute `unstyled`").
+  // Two shapes, said once, rather than one shape that is wrong in one of them.
+  asChild ? (
+    <Menu.Item asChild { ...rest }>{ children }</Menu.Item>
+  ) : (
+    <Menu.Item
+      unstyled
+      { ...ROW }
+      gap={ 8 }
+      paddingHorizontal={ 8 }
+      paddingVertical={ 6 }
+      disabledStyle={{ opacity: 0.5, pointerEvents: 'none' }}
+      { ...rest }
     >
-      { children }
-    </DropdownMenu.Item>
-  );
-});
-
-// --- MenuItemText ---
+      { ink(children, undefined, { fontSize: 14, color: TEXT }) }
+    </Menu.Item>
+  )
+);
 
-export interface MenuItemTextProps extends React.ComponentPropsWithoutRef<'span'> {}
+// --- MenuItemText / MenuItemCommand ---
 
-export const MenuItemText = React.forwardRef<
-  HTMLSpanElement,
-  MenuItemTextProps
->(function MenuItemText(props, ref) {
-  const { className, ...rest } = props;
-  return <span ref={ ref } className={ cn('flex-1', className) } { ...rest }/>;
-});
+export type MenuItemTextProps = React.ComponentProps<typeof Text>;
 
-// --- MenuItemCommand ---
+export const MenuItemText = (props: MenuItemTextProps): React.ReactElement => (
+  <Text flex={ 1 } fontSize={ 14 } color={ TEXT as never } { ...props }/>
+);
 
-export interface MenuItemCommandProps extends React.ComponentPropsWithoutRef<'span'> {}
+export type MenuItemCommandProps = React.ComponentProps<typeof Text>;
 
-export const MenuItemCommand = React.forwardRef<
-  HTMLSpanElement,
-  MenuItemCommandProps
->(function MenuItemCommand(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <span
-      ref={ ref }
-      className={ cn('ml-auto text-xs tracking-widest opacity-60', className) }
-      { ...rest }
-    />
-  );
-});
+/** The keyboard shortcut on the trailing edge of a row. */
+export const MenuItemCommand = (props: MenuItemCommandProps): React.ReactElement => (
+  <Text marginLeft="auto" fontSize={ 12 } letterSpacing={ 1 } opacity={ 0.6 } color={ TEXT as never } { ...props }/>
+);
 
 // --- MenuSeparator ---
 
-export interface MenuSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {}
-
-export const MenuSeparator = React.forwardRef<
-  HTMLDivElement,
-  MenuSeparatorProps
->(function MenuSeparator(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <DropdownMenu.Separator
-      ref={ ref }
-      className={ cn('-mx-1 my-1 h-px bg-[var(--color-border-divider)]', className) }
-      { ...rest }
-    />
-  );
-});
+export type MenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;
+
+export const MenuSeparator = (props: MenuSeparatorProps): React.ReactElement => (
+  <Menu.Separator
+    unstyled
+    height={ 1 }
+    marginVertical={ 4 }
+    marginHorizontal={ -4 }
+    backgroundColor={ 'var(--color-border-divider)' as never }
+    { ...props }
+  />
+);
 
 // --- MenuItemGroup ---
 
-export interface MenuItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+export type MenuItemGroupProps = React.ComponentProps<typeof Menu.Group> & {
   readonly title?: string;
-}
+};
 
-export const MenuItemGroup = React.forwardRef<
-  HTMLDivElement,
-  MenuItemGroupProps
->(function MenuItemGroup(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return (
-    <DropdownMenu.Group ref={ ref } className={ className } { ...rest }>
-      { title && (
-        <DropdownMenu.Label className="px-2 py-1.5 text-xs font-semibold select-none opacity-60">
-          { title }
-        </DropdownMenu.Label>
-      ) }
-      { children }
-    </DropdownMenu.Group>
-  );
-});
+export const MenuItemGroup = ({ title, children, ...rest }: MenuItemGroupProps): React.ReactElement => (
+  <Menu.Group unstyled { ...rest }>
+    { title && (
+      <Menu.Label
+        unstyled
+        paddingHorizontal={ 8 }
+        paddingVertical={ 6 }
+        fontSize={ 12 }
+        fontWeight="600"
+        userSelect="none"
+        opacity={ 0.6 }
+        color={ TEXT as never }
+      >
+        { title }
+      </Menu.Label>
+    ) }
+    { children }
+  </Menu.Group>
+);
 
 // --- MenuArrow ---
 
-export interface MenuArrowProps extends React.ComponentPropsWithoutRef<'svg'> {}
-
-export const MenuArrow = React.forwardRef<
-  SVGSVGElement,
-  MenuArrowProps
->(function MenuArrow(props, ref) {
-  const { className, ...rest } = props;
-  return (
-    <DropdownMenu.Arrow
-      ref={ ref }
-      className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
-      { ...rest }
-    />
-  );
-});
-
-// --- MenuCheckboxItem ---
-
-export interface MenuCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  readonly checked?: boolean;
-  readonly onCheckedChange?: (checked: boolean) => void;
-}
-
-export const MenuCheckboxItem = React.forwardRef<
-  HTMLDivElement,
-  MenuCheckboxItemProps
->(function MenuCheckboxItem(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return (
-    <DropdownMenu.CheckboxItem
-      ref={ ref }
-      checked={ checked }
-      onCheckedChange={ onCheckedChange }
-      onClick={ onClick }
-      className={ cn(
-        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm',
-        'outline-none transition-colors',
-        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        className,
-      ) }
-      { ...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenu.CheckboxItem>) }
-    >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenu.ItemIndicator>
-          <Check className="h-4 w-4"/>
-        </DropdownMenu.ItemIndicator>
-      </span>
-      { children }
-    </DropdownMenu.CheckboxItem>
-  );
-});
+export type MenuArrowProps = React.ComponentProps<typeof Menu.Arrow>;
 
-// --- MenuRadioItemGroup ---
-
-export interface MenuRadioItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
-  readonly value?: string;
-  readonly onValueChange?: (value: string) => void;
-}
+export const MenuArrow = (props: MenuArrowProps): React.ReactElement => (
+  <Menu.Arrow backgroundColor={ 'var(--color-popover-bg)' as never } { ...props }/>
+);
 
-export const MenuRadioItemGroup = React.forwardRef<
-  HTMLDivElement,
-  MenuRadioItemGroupProps
->(function MenuRadioItemGroup(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return (
-    <DropdownMenu.RadioGroup
-      ref={ ref }
-      value={ value }
-      onValueChange={ onValueChange }
-      { ...rest }
-    />
-  );
-});
+// --- The indicator well, shared by checkbox and radio rows ---
 
-// --- MenuRadioItem ---
+const Indicator = () => (
+  <View position="absolute" left={ 8 } width={ 14 } height={ 14 } alignItems="center" justifyContent="center">
+    <Menu.ItemIndicator>
+      <Check size={ 16 }/>
+    </Menu.ItemIndicator>
+  </View>
+);
 
-export interface MenuRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  readonly value: string;
-}
+// --- MenuCheckboxItem ---
 
-export const MenuRadioItem = React.forwardRef<
-  HTMLDivElement,
-  MenuRadioItemProps
->(function MenuRadioItem(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { value: _v, ...radixRest } = rest as Record<string, unknown>;
-  return (
-    <DropdownMenu.RadioItem
-      ref={ ref }
-      value={ value }
-      onClick={ onClick }
-      className={ cn(
-        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm',
-        'outline-none transition-colors',
-        'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        className,
-      ) }
-    >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenu.ItemIndicator>
-          <Check className="h-4 w-4"/>
-        </DropdownMenu.ItemIndicator>
-      </span>
-      <span>{ children }</span>
-    </DropdownMenu.RadioItem>
-  );
-});
+export type MenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem>;
+
+export const MenuCheckboxItem = ({ children, ...rest }: MenuCheckboxItemProps): React.ReactElement => (
+  <Menu.CheckboxItem
+    unstyled
+    { ...ROW }
+    paddingLeft={ 32 }
+    paddingRight={ 8 }
+    paddingVertical={ 6 }
+    disabledStyle={{ opacity: 0.5, pointerEvents: 'none' }}
+    { ...rest }
+  >
+    <Indicator/>
+    { ink(children, undefined, { fontSize: 14, color: TEXT }) }
+  </Menu.CheckboxItem>
+);
+
+// --- MenuRadioItemGroup / MenuRadioItem ---
+
+export type MenuRadioItemGroupProps = React.ComponentProps<typeof Menu.RadioGroup>;
+
+export const MenuRadioItemGroup = (props: MenuRadioItemGroupProps): React.ReactElement => (
+  <Menu.RadioGroup { ...props }/>
+);
+
+export type MenuRadioItemProps = React.ComponentProps<typeof Menu.RadioItem>;
+
+export const MenuRadioItem = ({ children, ...rest }: MenuRadioItemProps): React.ReactElement => (
+  <Menu.RadioItem
+    unstyled
+    { ...ROW }
+    paddingLeft={ 32 }
+    paddingRight={ 8 }
+    paddingVertical={ 6 }
+    disabledStyle={{ opacity: 0.5, pointerEvents: 'none' }}
+    { ...rest }
+  >
+    <Indicator/>
+    { ink(children, undefined, { fontSize: 14, color: TEXT }) }
+  </Menu.RadioItem>
+);
 
 // --- MenuContextTrigger ---
-// Radix DropdownMenu does not have a native context-menu trigger.
-// For API compatibility, export a no-op wrapper. Real context-menu
-// support would require @radix-ui/react-context-menu.
 
-export interface MenuContextTriggerProps extends React.ComponentPropsWithoutRef<'span'> {
+export type MenuContextTriggerProps = React.ComponentProps<typeof View> & {
   readonly asChild?: boolean;
-}
+};
 
-export const MenuContextTrigger = React.forwardRef<
-  HTMLSpanElement,
-  MenuContextTriggerProps
->(function MenuContextTrigger(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return <span ref={ ref } { ...rest }/>;
-});
+/**
+ * A right-click target. This menu is a DROPDOWN — it opens from its trigger, not
+ * from a pointer position — so the wrapper passes its children through. gui does
+ * ship a real `ContextMenu`; a surface that wants one should reach for that
+ * rather than have this quietly behave like it.
+ */
+export const MenuContextTrigger = ({ asChild: _asChild, ...rest }: MenuContextTriggerProps): React.ReactElement => (
+  <View { ...rest }/>
+);
 
-// --- MenuTriggerItem ---
+// --- MenuTriggerItem (a submenu's row) ---
 
-export interface MenuTriggerItemProps extends React.ComponentPropsWithoutRef<'div'> {
+export type MenuTriggerItemProps = React.ComponentProps<typeof Menu.SubTrigger> & {
   readonly startIcon?: React.ReactNode;
-}
+};
 
-export const MenuTriggerItem = React.forwardRef<
-  HTMLDivElement,
-  MenuTriggerItemProps
->(function MenuTriggerItem(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return (
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger
-        ref={ ref }
-        className={ cn(
-          'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-          'outline-none transition-colors',
-          'data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]',
-          className,
-        ) }
-        { ...rest }
-      >
-        { startIcon }
-        <span className="flex-1">{ children }</span>
-        <ChevronRight className="h-4 w-4"/>
-      </DropdownMenu.SubTrigger>
-    </DropdownMenu.Sub>
-  );
-});
+export const MenuTriggerItem = ({ startIcon, children, ...rest }: MenuTriggerItemProps): React.ReactElement => (
+  <Menu.Sub>
+    <Menu.SubTrigger
+      unstyled
+      { ...ROW }
+      gap={ 8 }
+      paddingHorizontal={ 8 }
+      paddingVertical={ 6 }
+      { ...rest }
+    >
+      { startIcon }
+      <XStack flex={ 1 }>{ ink(children, undefined, { fontSize: 14, color: TEXT }) }</XStack>
+      <ChevronRight size={ 16 }/>
+    </Menu.SubTrigger>
+  </Menu.Sub>
+);