@yahoo/uds 3.5.0-beta.1 → 3.5.0-beta.3

package/dist/Menu-DR13-K-l.d.cts

@@ -0,0 +1,662 @@
+import * as react from 'react';
+import { AriaRole, HTMLAttributes, PropsWithChildren } from 'react';
+import { MenuProps, MenuItemProps as MenuItemProps$1, MenuItemCheckboxProps as MenuItemCheckboxProps$1, MenuProviderProps as MenuProviderProps$1, MenuButtonProps, useMenuContext, useMenuStore } from '@ariakit/react/menu';
+import { ch as SpacingAlias, cR as UniversalPressableProps, cQ as UniversalMenuItemProps } from './types-TxDF_k0q.cjs';
+import { d as VStackProps, c as DividerProps, a as BoxProps } from './VStack-cakCiiUo.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useStoreState } from '@ariakit/react';
+
+interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
+    gutter?: SpacingAlias;
+    /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
+     *  If you need to disable this, set this prop to true.
+     *
+     *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/hooks/useNestedBorderRadius.ts
+     **/
+    disableAutoBorderRadius?: boolean;
+    /**
+     * `portalRef` is similar to `ref` but is scoped to the portal node. It's
+     * useful when you need to be informed when the portal element is appended to
+     * the DOM or removed from the DOM.
+     *
+     * Live examples:
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     * @example
+     * ```jsx
+     * const [portalElement, setPortalElement] = useState(null);
+     *
+     * <Portal portalRef={setPortalElement} />
+     * ```
+     */
+    portalRef?: MenuProps['portalRef'];
+    /**
+     * Determines whether the element should be rendered as a React Portal.
+     *
+     * Live examples:
+     * - [Combobox with integrated
+     *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     * - [Hovercard with keyboard
+     *   support](https://ariakit.org/examples/hovercard-disclosure)
+     * - [Menubar](https://ariakit.org/components/menubar)
+     * - [Standalone Popover](https://ariakit.org/examples/popover-standalone)
+     * - [Animated Select](https://ariakit.org/examples/select-animated)
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * An HTML element or a memoized callback function that returns an HTML
+     * element to be used as the portal element. By default, the portal element
+     * will be a `div` element appended to the `document.body`.
+     *
+     * Live examples:
+     * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
+     * @example
+     * ```jsx
+     * const [portal, setPortal] = useState(null);
+     *
+     * <Portal portalElement={portal} />
+     * <div ref={setPortal} />
+     * ```
+     * @example
+     * ```jsx
+     * const getPortalElement = useCallback(() => {
+     *   const div = document.createElement("div");
+     *   const portalRoot = document.getElementById("portal-root");
+     *   portalRoot.appendChild(div);
+     *   return div;
+     * }, []);
+     *
+     * <Portal portalElement={getPortalElement} />
+     * ```
+     */
+    portalElement?: MenuProps['portalElement'];
+    /**
+     * Determines whether the popover should hide when the mouse leaves the
+     * popover or the anchor element and there's no _hover intent_, meaning, the
+     * mouse isn't moving toward the popover.
+     *
+     * This can be either a boolean or a callback receiving the mouse move event
+     * that initiated the behavior. The callback should return a boolean.
+     *
+     * **Note**: This behavior won't be triggered when the popover or any of its
+     * descendants are in focus.
+     * @default true
+     */
+    hideOnHoverOutside?: MenuProps['hideOnHoverOutside'];
+    /**
+     * Determines if the dialog will hide when the user presses the Escape key.
+     *
+     * This prop can be either a boolean or a function that accepts an event as an
+     * argument and returns a boolean. The event object represents the keydown
+     * event that initiated the hide action, which could be either a native
+     * keyboard event or a React synthetic event.
+     *
+     * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
+     * `event.stopPropagation()` within this function will stop the event from
+     * reaching the third-party dialog, closing only the Ariakit dialog.
+     * @default true
+     */
+    hideOnEscape?: MenuProps['hideOnEscape'];
+    /**
+     * Determines if the dialog should hide when the user clicks or focuses on an
+     * element outside the dialog.
+     *
+     * This prop can be either a boolean or a function that takes an event as an
+     * argument and returns a boolean. The event object represents the event that
+     * triggered the action, which could be a native event or a React synthetic
+     * event of various types.
+     *
+     * Live examples:
+     * - [Selection Popover](https://ariakit.org/examples/popover-selection)
+     * @default true
+     */
+    hideOnInteractOutside?: MenuProps['hideOnInteractOutside'];
+    /**
+     * Determines if the pointer events outside of the popover and its anchor
+     * element should be disabled during _hover intent_, that is, when the mouse
+     * is moving toward the popover.
+     *
+     * This is required as these external events may trigger focus on other
+     * elements and close the popover while the user is attempting to hover over
+     * it.
+     *
+     * This can be either a boolean or a callback receiving the mouse event
+     * happening during hover intent. The callback should return a boolean.
+     * @default true
+     */
+    disablePointerEventsOnApproach?: MenuProps['disablePointerEventsOnApproach'];
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuProps['store'];
+    /**
+     * Whether the popover should have the same width as the anchor element. This
+     * will be exposed to CSS as
+     * [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).
+     * @default false
+     */
+    sameWidth?: MenuProps['sameWidth'];
+    /**
+     * @see https://ariakit.org/reference/focusable
+     * @default true
+     */
+    focusable?: MenuProps['focusable'];
+    /**
+     * This is an event handler prop triggered when the dialog's `close` event is
+     * dispatched. The `close` event is similar to the native dialog
+     * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
+     * event. The only difference is that this event can be canceled with
+     * `event.preventDefault()`, which will prevent the dialog from hiding.
+     *
+     * It's important to note that this event only fires when the dialog store's
+     * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
+     * to `false`. If the controlled
+     * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
+     * if the dialog's visibility is altered in any other way (such as unmounting
+     * the dialog without adjusting the open state), this event won't be
+     * triggered.
+     *
+     * Live examples:
+     * - [Dialog with scrollable
+     *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
+     * - [Dialog with details &
+     *   summary](https://ariakit.org/examples/dialog-details)
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     */
+    onClose?: MenuProps['onClose'];
+}
+/**
+ * **📦 A Menu Content component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A content component for the menu, which is used to provide the menu context to the menu items.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MenuDividerProps extends Omit<DividerProps, 'variant'> {
+    /**
+     * The role of the divider.
+     * @default 'separator'
+     */
+    role?: AriaRole;
+}
+/**
+ * **〰️ A Menu Divider component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A divider component for the menu.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-divider Menu.Divider Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ *
+ * export function DividerExample() {
+ *   return (
+ *     <Menu>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item>Calendar</Menu.Item>
+ *         <Menu.Divider>Other actions</Menu.Divider>
+ *         <Menu.Item>Clipboard</Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuDivider to separate groups of menu items.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
+ **/
+declare const MenuDivider: react.ForwardRefExoticComponent<MenuDividerProps & react.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps$1 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps$1 {
+}
+/**
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * The Pressable component is a primitive component that can be used
+ * to create button interactions with accessibility support. It can be used
+ * to trigger an action, such as submitting a form, navigating to a new page,
+ * or adding interactivity to a section or card.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds';
+ *
+ * <Pressable
+ *   backgroundColor="secondary"
+ *   borderWidth="thin"
+ *   borderColor="primary"
+ *   borderRadius="lg"
+ *   onPress={() => console.log('Pressed!')}
+ *  >
+ *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - If you need to add interactivity to a section or card.
+ * - If you need a highly customized version of [Button](./button)
+ *
+ * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+ *
+ */
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface MenuItemProps extends PressableProps, Omit<UniversalMenuItemProps, 'name'> {
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuItemProps$1['store'];
+    /**
+     * Determines if the menu should hide when this item is clicked.
+     *
+     * **Note**: This behavior isn't triggered if this menu item is rendered as a
+     * link and modifier keys are used to either open the link in a new tab or
+     * download it.
+     *
+     * @default true
+     */
+    hideOnClick?: MenuItemProps$1['hideOnClick'];
+    /**
+     * The role of the menu item.
+     *
+     * @default 'menuitem'
+     */
+    role?: AriaRole;
+    /** Internal overrides for downstream components. */
+    layerClassNames?: {
+        root?: string;
+        startIcon?: string;
+        endIcon?: string;
+    };
+}
+/**
+ * **📋 A Menu Item component for navigation and actions**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A standard menu item that can be used for navigation, actions, or displaying options in a menu.
+ * Menu items can be styled with active states, icons, and can trigger callbacks when clicked.
+ * They support both visual and functional customization.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-item Menu.Item Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuItemExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
+ * The active prop can be used to highlight the currently selected item.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+type HtmlButtonProps = HTMLAttributes<HTMLButtonElement>;
+interface MenuItemCheckboxProps extends PressableProps, HtmlButtonProps, UniversalMenuItemProps {
+    /**
+     * The name of the field in the
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state.
+     *
+     * Live examples at [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
+     */
+    name: string;
+    /**
+     * The controlled checked state of the element. It will set the menu
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state if
+     * provided.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the element. It will set the default value in
+     * the menu [`values`](https://ariakit.org/reference/menu-provider#values)
+     * state if provided.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuItemCheckboxProps$1['store'];
+    /**
+     * Determines if the menu should hide when this item is clicked.
+     *
+     * **Note**: This behavior isn't triggered if this menu item is rendered as a
+     * link and modifier keys are used to either open the link in a new tab or
+     * download it.
+     *
+     * @default undefined
+     */
+    hideOnClick?: MenuItemCheckboxProps$1['hideOnClick'];
+}
+/**
+ * **✅ A Menu Item Checkbox component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A checkable menu item that toggles between selected and unselected states. Menu item checkboxes
+ * allow users to select multiple options from a menu, displaying a checkmark when active. They maintain
+ * their state even when the menu is closed and reopened.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-item-checkbox Menu.ItemCheckbox Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ *
+ * export function MenuItemCheckboxExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Filter Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.ItemCheckbox name="showArchived" defaultChecked={false}>
+ *           Show Archived
+ *         </Menu.ItemCheckbox>
+ *         <Menu.ItemCheckbox name="includeComments" defaultChecked={true}>
+ *           Include Comments
+ *         </Menu.ItemCheckbox>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItemCheckbox when you need to provide users with multiple selectable options within a menu.
+ * Unlike radio options, checkboxes allow for multiple simultaneous selections.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
+ **/
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "as" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLButtonElement>>;
+
+/** Valid vertical placement values for the menu */
+type VerticalPlacement = 'top' | 'bottom';
+/** Valid horizontal placement values for the menu */
+type HorizontalPlacement = 'start' | 'end';
+/** Combined placement values for menu positioning */
+type MenuPlacement = VerticalPlacement | HorizontalPlacement | `${VerticalPlacement}-${HorizontalPlacement}` | `${HorizontalPlacement}-${VerticalPlacement}`;
+type MenuProviderProps = PropsWithChildren<{
+    /**
+     * A callback that gets called when the
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state
+     * changes.
+     *
+     * Live examples:
+     * - [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
+     */
+    setValues?: (values: Record<string, boolean>) => void | MenuProviderProps$1['setValues'];
+    /**
+     * A map of names and values that will be used by the
+     * [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
+     *
+     * Live examples:
+     * - [MenuItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+     */
+    values?: MenuProviderProps$1['values'];
+    /**
+     * The placement of the Menu.Content.
+     *
+     * @default 'bottom'
+     */
+    placement?: MenuPlacement;
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuProviderProps$1['store'];
+    /**
+     * Whether the menu should be rendered in RTL direction.
+     *
+     * This only affects the some component behavior behavior. You still need to set
+     * `dir="rtl"` on HTML/CSS.
+     * @default false
+     */
+    rtl?: MenuProviderProps$1['rtl'];
+    /**
+     * Whether the content is visible.
+     * @default false
+     */
+    open?: MenuProviderProps$1['open'];
+    /**
+     * A callback that gets called when the
+     * [`open`](https://ariakit.org/reference/disclosure-provider#open) state
+     * changes.
+     * @example
+     * const [open, setOpen] = useState(false);
+     * const disclosure = useDisclosureStore({ open, setOpen });
+     */
+    setOpen?: MenuProviderProps$1['setOpen'];
+    /**
+     * Whether the content should be visible by default.
+     * @default false
+     */
+    defaultOpen?: MenuProviderProps$1['defaultOpen'];
+    /**
+     * Determines how the focus behaves when the user reaches the end of the
+     * composite widget.
+     *
+     * Live examples:
+     * - [Command Menu](https://uds.build/docs/components/menu)
+     * @default false
+     */
+    focusLoop?: MenuProviderProps$1['focusLoop'];
+    /**
+     * If enabled, moving to the next item from the last one in a row or column
+     * will focus on the first item in the next row or column and vice-versa.
+     * `true` wraps between rows and columns, `horizontal` wraps only between rows, and `vertical` wraps only between columns.
+     *
+     * @default false
+     */
+    focusWrap?: MenuProviderProps$1['focusWrap'];
+}>;
+/**
+ * **🏗️ A Menu Provider component**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * A provider component for the menu, which is used to provide the menu context to the menu items.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-provider Menu.Provider Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
+ * The active prop can be used to highlight the currently selected item.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuProvider: ({ placement, rtl: explicitRtl, ...props }: MenuProviderProps) => react_jsx_runtime.JSX.Element;
+
+interface MenuTriggerProps extends PressableProps {
+    /**
+     * When asChild is set to true, the component's child will be cloned and passed
+     * the props and behavior required to make it functional.
+     */
+    asChild?: BoxProps['asChild'];
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuButtonProps['store'];
+    /**
+     * Determines if [Focusable](https://ariakit.org/components/focusable)
+     * features should be active on non-native focusable elements.
+     *
+     * **Note**: This prop only turns off the additional features provided by the
+     * [`Focusable`](https://ariakit.org/reference/focusable) component.
+     * Non-native focusable elements will lose their focusability entirely.
+     * However, native focusable elements will retain their inherent focusability,
+     * but without added features such as improved
+     * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
+     * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
+     * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
+     * etc.
+     * @default true
+     */
+    focusable?: MenuButtonProps['focusable'];
+}
+/**
+ * **⚡ A Menu Trigger component**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * A trigger component for the menu, which is used to toggle the menus open state.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-trigger Menu.Trigger Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuTrigger to toggle the open state of a menu.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuTrigger: react.ForwardRefExoticComponent<MenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const Menu_index_useMenuContext: typeof useMenuContext;
+declare const Menu_index_useMenuStore: typeof useMenuStore;
+declare const Menu_index_useStoreState: typeof useStoreState;
+declare namespace Menu_index {
+  export { MenuContent as Content, MenuDivider as Divider, MenuItem as Item, MenuItemCheckbox as ItemCheckbox, MenuProvider as Provider, MenuTrigger as Trigger, Menu_index_useMenuContext as useMenuContext, Menu_index_useMenuStore as useMenuStore, Menu_index_useStoreState as useStoreState };
+}
+
+export { Menu_index as M, Pressable as P, type MenuContentProps as a, type MenuDividerProps as b, type MenuItemCheckboxProps as c, type MenuItemProps as d, type MenuPlacement as e, type MenuProviderProps as f, type MenuTriggerProps as g, type PressableProps as h };