@surflane/ui 0.9.0 → 0.10.1

package/dist/menu.d.ts

@@ -1,51 +1,87 @@
 import * as React from 'react';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
-declare const MenuPopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const MenuPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const MenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
-declare const MenuTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const MenuPopup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+declare const MenuPositioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
+declare const MenuContent: ({ align, sideOffset, side, collisionPadding, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseMenu.Positioner>, "align" | "side" | "sideOffset" | "collisionPadding"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+declare const MenuTrigger: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
 /** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
 declare const MenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Menu: {
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & React.RefAttributes<HTMLDivElement>>;
-    Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    CheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    RadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    SubmenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+    Content: ({ align, sideOffset, side, collisionPadding, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseMenu.Positioner>, "align" | "side" | "sideOffset" | "collisionPadding"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Positioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Trigger: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    CheckboxItemIndicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItemIndicator> & {
+        ref?: React.Ref<HTMLSpanElement>;
+    }) => React.JSX.Element;
+    RadioItemIndicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItemIndicator> & {
+        ref?: React.Ref<HTMLSpanElement>;
+    }) => React.JSX.Element;
+    SubmenuTrigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger> & {
         indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    LinkItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    CheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    RadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLInputElement>>;
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Item: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    LinkItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLAnchorElement> | undefined;
+    }) => React.JSX.Element;
+    CheckboxItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    RadioItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    GroupLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Separator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Input: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+    }) => React.JSX.Element;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -62,20 +98,40 @@ export declare const Menu: {
     useFilter: typeof BaseMenu.useFilter;
 };
 export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent, MenuPortal };
-export declare const MenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, MenuClear: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, MenuEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuFilterProvider: typeof BaseMenu.FilterProvider, MenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MenuHandle: typeof BaseMenu.Handle, MenuInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLInputElement>>, MenuItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MenuLinkItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLAnchorElement>>, MenuList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, MenuRoot: typeof BaseMenu.Root, MenuSeparator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MenuSubmenuRoot: typeof BaseMenu.SubmenuRoot, MenuSubmenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/menu").MenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+export declare const MenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuCheckboxItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MenuCheckboxItemIndicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItemIndicator> & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element, MenuClear: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, MenuEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuFilterProvider: typeof BaseMenu.FilterProvider, MenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuGroupLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MenuHandle: typeof BaseMenu.Handle, MenuInput: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+}) => React.JSX.Element, MenuItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MenuLinkItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => React.JSX.Element, MenuList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, MenuRadioItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MenuRadioItemIndicator: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItemIndicator> & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element, MenuRoot: typeof BaseMenu.Root, MenuSeparator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MenuSubmenuRoot: typeof BaseMenu.SubmenuRoot, MenuSubmenuTrigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger> & {
     indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, MenuViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, MenuViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/menu.js

@@ -1,28 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { OwnPortal, part, scopedPortal, skin } from './parts.js';
-const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'pui-menu', { portal: true });
-const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'pui-positioner', { portal: true });
-const MenuContent = /* @__PURE__ */ React.forwardRef(function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ...props }, ref) {
+const MenuPopup = /* @__PURE__ */ part(BaseMenu.Popup, 'surf-menu', { portal: true });
+const MenuPositioner = /* @__PURE__ */ part(BaseMenu.Positioner, 'surf-positioner', { portal: true });
+const MenuContent = function MenuContent({ align = 'end', sideOffset = 6, side, collisionPadding, className, ref, ...props }) {
     return (_jsx(OwnPortal, { portal: BaseMenu.Portal, children: _jsx(MenuPositioner, { align: align, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, children: _jsx(MenuPopup, { ...props, ref: ref, className: className }) }) }));
-});
-const MenuTrigger = /* @__PURE__ */ React.forwardRef(function MenuTrigger({ className, ...props }, ref) {
-    return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('pui-button pui-menu-trigger', className) }));
-});
-const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? _jsx(Icon, { name: 'check' }) }));
-});
-const RadioIndicator = /* @__PURE__ */ React.forwardRef(function RadioIndicator({ className, children, ...props }, ref) {
-    return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
-});
-const SubmenuTrigger = /* @__PURE__ */ React.forwardRef(function SubmenuTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('pui-menu-item pui-menu-submenu-trigger', className), children: [children, indicator === false
+};
+const MenuTrigger = function MenuTrigger({ className, ref, ...props }) {
+    return (_jsx(BaseMenu.Trigger, { "data-variant": 'ghost', ...props, ref: ref, className: skin('surf-button surf-menu-trigger', className) }));
+};
+const CheckboxIndicator = function CheckboxIndicator({ className, children, ref, ...props }) {
+    return (_jsx(BaseMenu.CheckboxItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('surf-menu-indicator', className), children: children ?? _jsx(Icon, { name: 'check' }) }));
+};
+const RadioIndicator = function RadioIndicator({ className, children, ref, ...props }) {
+    return (_jsx(BaseMenu.RadioItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('surf-menu-indicator', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'currentColor', "aria-hidden": 'true', children: _jsx("circle", { cx: '12', cy: '12', r: '4' }) })) }));
+};
+const SubmenuTrigger = function SubmenuTrigger({ className, children, indicator, ref, ...props }) {
+    return (_jsxs(BaseMenu.SubmenuTrigger, { ...props, ref: ref, className: skin('surf-menu-item surf-menu-submenu-trigger', className), children: [children, indicator === false
                 ? null
-                : (indicator ?? (_jsx(Icon, { name: 'chevron-forward', className: 'pui-submenu-arrow' })))] }));
-});
+                : (indicator ?? (_jsx(Icon, { name: 'chevron-forward', className: 'surf-submenu-arrow' })))] }));
+};
 /** Content brings its own portal; Portal stays for wrapping it, or raw parts. */
 const MenuPortal = /* @__PURE__ */ scopedPortal(BaseMenu.Portal);
 export const Menu = {
@@ -35,13 +34,13 @@ export const Menu = {
     CheckboxItemIndicator: CheckboxIndicator,
     RadioItemIndicator: RadioIndicator,
     SubmenuTrigger,
-    Item: /* @__PURE__ */ part(BaseMenu.Item, 'pui-menu-item'),
-    LinkItem: /* @__PURE__ */ part(BaseMenu.LinkItem, 'pui-menu-item'),
-    CheckboxItem: /* @__PURE__ */ part(BaseMenu.CheckboxItem, 'pui-menu-item pui-menu-check-item'),
-    RadioItem: /* @__PURE__ */ part(BaseMenu.RadioItem, 'pui-menu-item pui-menu-check-item'),
-    GroupLabel: /* @__PURE__ */ part(BaseMenu.GroupLabel, 'pui-menu-group-label'),
-    Separator: /* @__PURE__ */ part(BaseMenu.Separator, 'pui-menu-separator'),
-    Input: /* @__PURE__ */ part(BaseMenu.Input, 'pui-input'),
+    Item: /* @__PURE__ */ part(BaseMenu.Item, 'surf-menu-item'),
+    LinkItem: /* @__PURE__ */ part(BaseMenu.LinkItem, 'surf-menu-item'),
+    CheckboxItem: /* @__PURE__ */ part(BaseMenu.CheckboxItem, 'surf-menu-item surf-menu-check-item'),
+    RadioItem: /* @__PURE__ */ part(BaseMenu.RadioItem, 'surf-menu-item surf-menu-check-item'),
+    GroupLabel: /* @__PURE__ */ part(BaseMenu.GroupLabel, 'surf-menu-group-label'),
+    Separator: /* @__PURE__ */ part(BaseMenu.Separator, 'surf-menu-separator'),
+    Input: /* @__PURE__ */ part(BaseMenu.Input, 'surf-input'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { MenuPopup, MenuPositioner, MenuTrigger, MenuContent, MenuPortal };

package/dist/menubar.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
-export declare const Menubar: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menubar").MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const Menubar: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/menubar").MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;

package/dist/menubar.js

@@ -1,4 +1,4 @@
 'use client';
 import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
 import { part } from './parts.js';
-export const Menubar = /* @__PURE__ */ part(BaseMenubar, 'pui-menubar');
+export const Menubar = /* @__PURE__ */ part(BaseMenubar, 'surf-menubar');

package/dist/meter.d.ts

@@ -1,29 +1,49 @@
 import * as React from 'react';
 export declare const Meter: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Label: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    Value: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    Track: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Indicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MeterLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>, MeterRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MeterTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, MeterValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const MeterIndicator: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MeterLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element, MeterRoot: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MeterTrack: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, MeterValue: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/meter.js

@@ -3,11 +3,11 @@ import { Meter as BaseMeter } from '@base-ui/react/meter';
 import { part } from './parts.js';
 export const Meter = {
     ...BaseMeter,
-    Root: /* @__PURE__ */ part(BaseMeter.Root, 'pui-gauge pui-meter'),
-    Label: /* @__PURE__ */ part(BaseMeter.Label, 'pui-gauge-label'),
-    Value: /* @__PURE__ */ part(BaseMeter.Value, 'pui-gauge-value'),
-    Track: /* @__PURE__ */ part(BaseMeter.Track, 'pui-gauge-track'),
-    Indicator: /* @__PURE__ */ part(BaseMeter.Indicator, 'pui-gauge-indicator'),
+    Root: /* @__PURE__ */ part(BaseMeter.Root, 'surf-gauge surf-meter'),
+    Label: /* @__PURE__ */ part(BaseMeter.Label, 'surf-gauge-label'),
+    Value: /* @__PURE__ */ part(BaseMeter.Value, 'surf-gauge-value'),
+    Track: /* @__PURE__ */ part(BaseMeter.Track, 'surf-gauge-track'),
+    Indicator: /* @__PURE__ */ part(BaseMeter.Indicator, 'surf-gauge-indicator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Indicator: MeterIndicator, Label: MeterLabel, Root: MeterRoot, Track: MeterTrack, Value: MeterValue, } = Meter;

package/dist/native-select.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { type ComponentSizeAlias } from './sizing.js';
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
+export declare const NativeSelect: ({ children, onChange, value, defaultValue, className, size, ref, ...props }: Omit<React.ComponentPropsWithoutRef<"select">, "size" | "multiple"> & {
     size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
 export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
 export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;

package/dist/native-select.js

@@ -27,7 +27,7 @@ function optionList(children) {
     });
 }
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
+export const NativeSelect = function NativeSelect({ children, onChange, value, defaultValue, className, size, ref, ...props }) {
     const input = React.useRef(null);
     const options = optionList(children);
     return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
@@ -45,7 +45,7 @@ export const NativeSelect = /* @__PURE__ */ React.forwardRef(function NativeSele
             });
             onChange(event);
         } }));
-});
+};
 export function NativeSelectOption(props) {
     return _jsx("option", { ...props });
 }

package/dist/navigation-menu.d.ts

@@ -3,50 +3,86 @@ import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-
 declare function Root<Value>(props: BaseNavigationMenu.Root.Props<Value>): React.JSX.Element;
 export declare const NavigationMenu: {
     Root: typeof Root;
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    Trigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNavigationMenu.Trigger> & {
         indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLUListElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLLIElement>>;
-    Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLAnchorElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Viewport: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Icon: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    } & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    List: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLUListElement> | undefined;
+    }) => React.JSX.Element;
+    Item: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLLIElement> | undefined;
+    }) => React.JSX.Element;
+    Link: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLAnchorElement> | undefined;
+    }) => React.JSX.Element;
+    Content: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Positioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Viewport: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Icon: ({ children, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon> & {
+        ref?: React.Ref<HTMLSpanElement>;
+    }) => React.JSX.Element;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
-export declare const NavigationMenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, NavigationMenuIcon: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, NavigationMenuItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLLIElement>>, NavigationMenuLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLAnchorElement>>, NavigationMenuList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLUListElement>>, NavigationMenuPopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, NavigationMenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, NavigationMenuRoot: typeof Root, NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+export declare const NavigationMenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuContent: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, NavigationMenuIcon: ({ children, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon> & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element, NavigationMenuItem: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLLIElement> | undefined;
+}) => React.JSX.Element, NavigationMenuLink: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => React.JSX.Element, NavigationMenuList: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLUListElement> | undefined;
+}) => React.JSX.Element, NavigationMenuPopup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, NavigationMenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, NavigationMenuPositioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, NavigationMenuRoot: typeof Root, NavigationMenuTrigger: ({ className, children, indicator, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseNavigationMenu.Trigger> & {
     indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>, NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, NavigationMenuViewport: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/navigation-menu").NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element;
 export {};