@luxfi/ui 7.4.10 → 7.4.11

package/dist/menu.cjs

@@ -1,293 +1,182 @@
 "use client";
 'use strict';
 
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
-var React = require('react');
+var gui = require('@hanzo/gui');
 var lucideReact = require('lucide-react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-function parsePlacement(placement) {
-  if (!placement) {
-    return { side: "bottom", align: "start" };
-  }
-  const parts = placement.split("-");
-  const side = parts[0] ?? "bottom";
-  const alignPart = parts[1];
-  let align = "center";
-  if (alignPart === "start") {
-    align = "start";
-  } else if (alignPart === "end") {
-    align = "end";
-  }
-  return { side, align };
-}
-var PositioningContext = React__namespace.createContext({
-  side: "bottom",
-  align: "start",
-  sideOffset: 4,
-  alignOffset: 0
-});
-var MenuRoot = (props) => {
-  const {
-    children,
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  react.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return react.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? react.createElement(Wrap, props, child) : child);
+};
+var ITEM_HOVER = "var(--color-popover-item-hover)";
+var TEXT = "var(--color-text-primary)";
+var 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 }
+};
+var MenuRoot = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  positioning,
+  modal = true
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu,
+  {
     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 = {
-    placement: "bottom-start",
-    ...positioning,
-    offset: {
-      mainAxis: 4,
-      ...positioning?.offset
-    }
-  };
-  const { side, align } = parsePlacement(mergedPositioning.placement);
-  const positioningValue = React__namespace.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React__namespace.useCallback((isOpen) => {
-    onOpenChange?.({ open: isOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) });
-};
-var MenuTrigger = React__namespace.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React__namespace.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React__namespace.useContext(PositioningContext);
-  const mergedStyle = {
-    ...style,
-    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
-    ...minW !== void 0 ? { minWidth: minW } : {}
-  };
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Content,
-    {
-      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 : void 0,
-      ...rest
-    }
-  );
-  if (!portalled) {
-    return content;
+    onOpenChange: onOpenChange ? (isOpen) => onOpenChange({ open: isOpen }) : void 0,
+    modal,
+    placement: positioning?.placement ?? "bottom-start",
+    offset: positioning?.offset?.mainAxis ?? 4,
+    children
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React__namespace.forwardRef(function MenuItem2(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Item,
+);
+var MenuTrigger = ({ asChild = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Trigger, { asChild, ...rest });
+var MenuContent = ({
+  portalled = true,
+  minW,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Content,
     {
-      ref,
-      asChild,
-      disabled,
-      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
-      ),
+      unstyled: true,
+      zIndex: 50,
+      minWidth: minW ?? 128,
+      overflow: "hidden",
+      borderRadius: 8,
+      padding: 4,
+      borderWidth: 1,
+      borderColor: "var(--color-popover-border)",
+      backgroundColor: "var(--color-popover-bg)",
+      transition: "quick",
+      enterStyle: { opacity: 0, scale: 0.95 },
+      exitStyle: { opacity: 0, scale: 0.95 },
       ...rest,
       children
     }
   );
-});
-var MenuItemText = React__namespace.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-var MenuItemCommand = React__namespace.forwardRef(function MenuItemCommand2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref,
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...rest
-    }
-  );
-});
-var MenuSeparator = React__namespace.forwardRef(function MenuSeparator2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Separator,
-    {
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
-      ...rest
-    }
-  );
-});
-var MenuItemGroup = React__namespace.forwardRef(function MenuItemGroup2(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { ref, className, ...rest, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
-    children
-  ] });
-});
-var MenuArrow = React__namespace.forwardRef(function MenuArrow2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Arrow,
-    {
-      ref,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
-      ...rest
-    }
-  );
-});
-var MenuCheckboxItem = React__namespace.forwardRef(function MenuCheckboxItem2(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.CheckboxItem,
+  return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Portal, { children: content }) : content;
+};
+var MenuItem = ({ children, value: _value, asChild, ...rest }) => (
+  // `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 ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Item, { asChild: true, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Item,
     {
-      ref,
-      checked,
-      onCheckedChange,
-      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
-      ),
+      unstyled: true,
+      ...ROW,
+      gap: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      disabledStyle: { opacity: 0.5, pointerEvents: "none" },
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-var MenuRadioItemGroup = React__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
+      children: ink(children, void 0, { fontSize: 14, color: TEXT })
     }
-  );
-});
-var MenuRadioItem = React__namespace.forwardRef(function MenuRadioItem2(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  const { value: _v, ...radixRest } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.RadioItem,
-    {
-      ref,
-      value,
-      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
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      ]
-    }
-  );
-});
-var MenuContextTrigger = React__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
-});
-var MenuTriggerItem = React__namespace.forwardRef(function MenuTriggerItem2(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.SubTrigger,
+  )
+);
+var MenuItemText = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontSize: 14, color: TEXT, ...props });
+var MenuItemCommand = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginLeft: "auto", fontSize: 12, letterSpacing: 1, opacity: 0.6, color: TEXT, ...props });
+var MenuSeparator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu.Separator,
+  {
+    unstyled: true,
+    height: 1,
+    marginVertical: 4,
+    marginHorizontal: -4,
+    backgroundColor: "var(--color-border-divider)",
+    ...props
+  }
+);
+var MenuItemGroup = ({ title, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(gui.Menu.Group, { unstyled: true, ...rest, children: [
+  title && /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Label,
     {
-      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,
-      children: [
-        startIcon,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-      ]
+      unstyled: true,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      fontSize: 12,
+      fontWeight: "600",
+      userSelect: "none",
+      opacity: 0.6,
+      color: TEXT,
+      children: title
     }
-  ) });
-});
+  ),
+  children
+] });
+var MenuArrow = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Arrow, { backgroundColor: "var(--color-popover-bg)", ...props });
+var Indicator = () => /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", left: 8, width: 14, height: 14, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }) }) });
+var MenuCheckboxItem = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.CheckboxItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuRadioItemGroup = (props) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.RadioGroup, { ...props });
+var MenuRadioItem = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.RadioItem,
+  {
+    unstyled: true,
+    ...ROW,
+    paddingLeft: 32,
+    paddingRight: 8,
+    paddingVertical: 6,
+    disabledStyle: { opacity: 0.5, pointerEvents: "none" },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+      ink(children, void 0, { fontSize: 14, color: TEXT })
+    ]
+  }
+);
+var MenuContextTrigger = ({ asChild: _asChild, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.View, { ...rest });
+var MenuTriggerItem = ({ startIcon, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  gui.Menu.SubTrigger,
+  {
+    unstyled: true,
+    ...ROW,
+    gap: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    ...rest,
+    children: [
+      startIcon,
+      /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flex: 1, children: ink(children, void 0, { fontSize: 14, color: TEXT }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+    ]
+  }
+) });
 
 exports.MenuArrow = MenuArrow;
 exports.MenuCheckboxItem = MenuCheckboxItem;

package/dist/menu.d.cts

@@ -1,3 +1,4 @@
+import { Menu, Text, View } from '@hanzo/gui';
 import * as React from 'react';
 
 interface Positioning {
@@ -15,70 +16,53 @@ interface MenuRootProps {
         open: boolean;
     }) => void;
     readonly positioning?: Positioning;
-    readonly lazyMount?: boolean;
-    readonly unmountOnExit?: boolean;
     readonly modal?: boolean;
 }
-declare const MenuRoot: (props: MenuRootProps) => React.ReactElement;
-interface MenuTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
-    readonly asChild?: boolean;
-}
-declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-interface MenuContentProps extends React.ComponentPropsWithoutRef<'div'> {
+declare const MenuRoot: ({ children, open, defaultOpen, onOpenChange, positioning, modal, }: MenuRootProps) => React.ReactElement;
+type MenuTriggerProps = React.ComponentProps<typeof Menu.Trigger>;
+declare const MenuTrigger: ({ asChild, ...rest }: MenuTriggerProps) => React.ReactElement;
+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;
-}
-declare const MenuContent: React.ForwardRefExoticComponent<MenuContentProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Informational value identifier (not used by Radix but kept for API compat) */
+};
+declare const MenuContent: ({ portalled, minW, children, ...rest }: MenuContentProps) => React.ReactElement;
+type MenuItemProps = React.ComponentProps<typeof Menu.Item> & {
+    /** 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;
-}
-declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuItemTextProps extends React.ComponentPropsWithoutRef<'span'> {
-}
-declare const MenuItemText: React.ForwardRefExoticComponent<MenuItemTextProps & React.RefAttributes<HTMLSpanElement>>;
-interface MenuItemCommandProps extends React.ComponentPropsWithoutRef<'span'> {
-}
-declare const MenuItemCommand: React.ForwardRefExoticComponent<MenuItemCommandProps & React.RefAttributes<HTMLSpanElement>>;
-interface MenuSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+};
+declare const MenuItem: ({ children, value: _value, asChild, ...rest }: MenuItemProps) => React.ReactElement;
+type MenuItemTextProps = React.ComponentProps<typeof Text>;
+declare const MenuItemText: (props: MenuItemTextProps) => React.ReactElement;
+type MenuItemCommandProps = React.ComponentProps<typeof Text>;
+/** The keyboard shortcut on the trailing edge of a row. */
+declare const MenuItemCommand: (props: MenuItemCommandProps) => React.ReactElement;
+type MenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;
+declare const MenuSeparator: (props: MenuSeparatorProps) => React.ReactElement;
+type MenuItemGroupProps = React.ComponentProps<typeof Menu.Group> & {
     readonly title?: string;
-}
-declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuArrowProps extends React.ComponentPropsWithoutRef<'svg'> {
-}
-declare const MenuArrow: React.ForwardRefExoticComponent<MenuArrowProps & React.RefAttributes<SVGSVGElement>>;
-interface MenuCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly checked?: boolean;
-    readonly onCheckedChange?: (checked: boolean) => void;
-}
-declare const MenuCheckboxItem: React.ForwardRefExoticComponent<MenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuRadioItemGroupProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly value?: string;
-    readonly onValueChange?: (value: string) => void;
-}
-declare const MenuRadioItemGroup: React.ForwardRefExoticComponent<MenuRadioItemGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly value: string;
-}
-declare const MenuRadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
-interface MenuContextTriggerProps extends React.ComponentPropsWithoutRef<'span'> {
+};
+declare const MenuItemGroup: ({ title, children, ...rest }: MenuItemGroupProps) => React.ReactElement;
+type MenuArrowProps = React.ComponentProps<typeof Menu.Arrow>;
+declare const MenuArrow: (props: MenuArrowProps) => React.ReactElement;
+type MenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem>;
+declare const MenuCheckboxItem: ({ children, ...rest }: MenuCheckboxItemProps) => React.ReactElement;
+type MenuRadioItemGroupProps = React.ComponentProps<typeof Menu.RadioGroup>;
+declare const MenuRadioItemGroup: (props: MenuRadioItemGroupProps) => React.ReactElement;
+type MenuRadioItemProps = React.ComponentProps<typeof Menu.RadioItem>;
+declare const MenuRadioItem: ({ children, ...rest }: MenuRadioItemProps) => React.ReactElement;
+type MenuContextTriggerProps = React.ComponentProps<typeof View> & {
     readonly asChild?: boolean;
-}
-declare const MenuContextTrigger: React.ForwardRefExoticComponent<MenuContextTriggerProps & React.RefAttributes<HTMLSpanElement>>;
-interface MenuTriggerItemProps extends React.ComponentPropsWithoutRef<'div'> {
+};
+/**
+ * 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.
+ */
+declare const MenuContextTrigger: ({ asChild: _asChild, ...rest }: MenuContextTriggerProps) => React.ReactElement;
+type MenuTriggerItemProps = React.ComponentProps<typeof Menu.SubTrigger> & {
     readonly startIcon?: React.ReactNode;
-}
-declare const MenuTriggerItem: React.ForwardRefExoticComponent<MenuTriggerItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare const MenuTriggerItem: ({ startIcon, children, ...rest }: MenuTriggerItemProps) => React.ReactElement;
 
 export { MenuArrow, type MenuArrowProps, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuContextTrigger, type MenuContextTriggerProps, MenuItem, MenuItemCommand, type MenuItemCommandProps, MenuItemGroup, type MenuItemGroupProps, type MenuItemProps, MenuItemText, type MenuItemTextProps, MenuRadioItem, MenuRadioItemGroup, type MenuRadioItemGroupProps, type MenuRadioItemProps, MenuRoot, type MenuRootProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, MenuTriggerItem, type MenuTriggerItemProps, type MenuTriggerProps };