@yahoo/uds 2.11.0 → 3.0.0

package/dist/client/index.d.ts

@@ -1,22 +1,121 @@
-import { e as UniversalButtonProps, f as UniversalIconButtonProps, g as UniversalPressableProps, M as MotionVariant, h as MotionVariantSpeed } from '../types-DPT0rst4.js';
-import { HTMLMotionProps, MotionConfigProps } from 'motion/react';
-import * as react from 'react';
-import react__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { cC as UniversalAvatarProps, cA as UniversalAvatarIconProps, cB as UniversalAvatarImageProps, cD as UniversalAvatarTextProps, cE as UniversalBadgeProps, cF as UniversalButtonProps, cG as UniversalCheckboxProps, cL as UniversalChipProps, cI as UniversalChipButtonProps, cJ as UniversalChipDismissibleProps, cK as UniversalChipLinkProps, cM as UniversalChipToggleProps, cN as UniversalIconButtonProps, ch as SpacingAlias, cR as UniversalPressableProps, cQ as UniversalMenuItemProps, cT as UniversalRadioProps, cS as UniversalRadioGroupProps, M as MotionVariant, n as MotionVariantSpeed, cU as UniversalSwitchProps } from '../types-d2CfR7zp.js';
+import * as react from 'react';
+import react__default, { AriaRole, HTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLMotionProps, MotionConfigProps } from 'motion/react';
+import { d as VStackProps, c as DividerProps, a as BoxProps } from '../VStack-CJs5afN8.js';
+export { e as Input, I as InputProps } from '../VStack-CJs5afN8.js';
+import { MenuProps, MenuItemProps as MenuItemProps$1, MenuItemCheckboxProps as MenuItemCheckboxProps$1, MenuProviderProps as MenuProviderProps$1, MenuButtonProps, useMenuContext, useMenuStore } from '@ariakit/react/menu';
+import { useStoreState } from '@ariakit/react';
 import '@yahoo/uds-icons/types';
+import 'type-fest';
+
+type AvatarProps = UniversalAvatarProps;
+/**
+ * **👤 Avatar Component**
+ *
+ * @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+ * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
+ * @param props - Combined Avatar props.
+ * @returns The Avatar element.
+ * @componentType Client component
+ * @example ```tsx
+ * import { Avatar } from '@yahoo/uds';
+ *
+ * <Avatar
+ *    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+ *    alt="Jane Doe"
+ *    fallback="J"
+ * />
+ * ```
+ *
+ */
+declare const Avatar: {
+    (props: AvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AvatarIconProps = UniversalAvatarIconProps;
+/**
+ * **AvatarIcon Component**
+ *
+ * Renders an Avatar with an icon representation.
+ *
+ * @param props - Props for icon variant.
+ * @returns The AvatarIcon element.
+ */
+declare const AvatarIcon: {
+    ({ size, variant, customSize, icon, className }: AvatarIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-type HtmlButtonProps$2 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps$2, UniversalButtonProps {
+type AvatarImageProps = UniversalAvatarImageProps;
+/**
+ * **AvatarImage Component**
+ *
+ * Renders an Avatar with an image. If the image fails to load, it falls back first to
+ * a text representation (if a name or initials are provided) and then to an icon.
+ *
+ * @param props - Props for image variant.
+ * @returns The AvatarImage element.
+ */
+declare const AvatarImage: {
+    ({ size, variant, src, srcSet, customSize, alt, imageProps, abbreviationStrategy, fallback, className, }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AvatarTextProps = UniversalAvatarTextProps;
+/**
+ * **AvatarText Component**
+ *
+ * Renders an Avatar with text (initials) representation.
+ *
+ * @param props - Props for text variant.
+ * @returns The AvatarText element.
+ */
+declare const AvatarText: {
+    ({ variant, size, name, initials, customSize, abbreviationStrategy, className, }: AvatarTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type HtmlDivProps$4 = react__default.HTMLAttributes<HTMLDivElement>;
+interface BadgeProps extends HtmlDivProps$4, UniversalBadgeProps {
 }
 /**
- * **🖲️ A button element that can be used to trigger an action**
+ * **⚙️️ A badge.
  *
  * @componentType Client component
  *
  * @description
- * A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage
- * with to submit forms, open dialogues, or perform any other interaction within an application or website.
- * Consider an [IconButton](https://uds.build/docs/components/icon-button) for buttons that only contain an icon.
+ * Badges show notifications, counts, or status information on navigation items and icons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Badge } from "@yahoo/uds";
+ *
+ * <Badge>Label</Badge>
+ *```
+ *
+ * @related [Chip](https://uds.build/docs/components/chip).
+ **/
+declare const Badge: react__default.ForwardRefExoticComponent<BadgeProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps$3 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+interface ButtonProps extends HtmlButtonProps$3, UniversalButtonProps {
+}
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
  *
  * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
  *
@@ -42,19 +141,93 @@ interface ButtonProps extends HtmlButtonProps$2, UniversalButtonProps {
  **/
 declare const Button: react__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
 
-type HtmlButtonProps$1 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-interface IconButtonProps extends HtmlButtonProps$1, UniversalIconButtonProps {
+type NativeInputProps$2 = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+interface CheckboxProps extends NativeInputProps$2, UniversalCheckboxProps {
 }
 /**
- * **⚙️️ An icon button element that can be used to trigger an action**
+ * **⚙️️ An checkbox.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ *
+ * @usage
+ * - Forms: checkbox
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Checkbox } from "@yahoo/uds";
+ *
+ * <Checkbox label="Name" required />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
+ **/
+declare const Checkbox: react__default.ForwardRefExoticComponent<CheckboxProps & react__default.RefAttributes<HTMLInputElement>>;
+
+type HtmlDivProps$3 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle'>;
+interface ChipProps extends UniversalChipProps, HtmlDivProps$3 {
+}
+/**
+ * **⚙️️ A chip.
  *
  * @componentType Client component
  *
  * @description
- * An icon button is essentially an interactive icon. They should be used to
- * display an icon which, when clicked, allows the user to trigger an action.
- * Icon buttons provide additional features such hover states, focus states, and
- * pressable functionality.
+ * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Chip } from "@yahoo/uds";
+ *
+ * <Chip>Label</Chip>
+ *```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+ **/
+declare const Chip: react__default.ForwardRefExoticComponent<ChipProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlDivProps$2 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'label'>;
+interface ChipButtonProps extends HtmlDivProps$2, Omit<UniversalChipButtonProps, 'type'> {
+}
+declare const ChipButton: react__default.ForwardRefExoticComponent<ChipButtonProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlDivProps$1 = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'label'>;
+interface ChipDismissibleProps extends HtmlDivProps$1, Omit<UniversalChipDismissibleProps, 'type'> {
+}
+declare const ChipDismissible: react__default.ForwardRefExoticComponent<ChipDismissibleProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlAnchorProps = Omit<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'type'>;
+interface ChipLinkProps extends HtmlAnchorProps, Omit<UniversalChipLinkProps, 'type'> {
+}
+declare const ChipLink: react__default.ForwardRefExoticComponent<ChipLinkProps & react__default.RefAttributes<HTMLAnchorElement>>;
+
+type HtmlDivProps = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children' | 'label' | 'onToggle'>;
+interface ChipToggleProps extends UniversalChipToggleProps, HtmlDivProps {
+}
+declare const ChipToggle: react__default.ForwardRefExoticComponent<ChipToggleProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps$2 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+interface IconButtonProps extends HtmlButtonProps$2, UniversalIconButtonProps {
+}
+/**
+ * **⚙️️ An icon button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
  *
  * @see
  * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
@@ -69,7 +242,7 @@ interface IconButtonProps extends HtmlButtonProps$1, UniversalIconButtonProps {
  * import { IconButton } from "@yahoo/uds";
  * import { AddFolder } from "@yahoo/uds-icons";
  *
- * <IconButton name={AddFolder} palette="accent" />
+ * <IconButton name={AddFolder} variant="primary" />
  * ```
  *
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
@@ -77,8 +250,261 @@ interface IconButtonProps extends HtmlButtonProps$1, UniversalIconButtonProps {
  **/
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
+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**
@@ -117,10 +543,447 @@ interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
  */
 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 };
+}
+
+type NativeInputProps$1 = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps$1, UniversalRadioProps {
+}
+/**
+ * **⚙️️ A Radio.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: Radio
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from "@yahoo/uds";
+ *
+ * <Radio label="Name" />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/Radio).
+ **/
+declare const Radio: react__default.ForwardRefExoticComponent<RadioProps & react__default.RefAttributes<HTMLInputElement>>;
+
+type NativeDivProps = Omit<react__default.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+interface RadioGroupProviderProps extends UniversalRadioGroupProps, NativeDivProps {
+}
+/**
+ * **⚙️️ A RadioGroup that improves accessibility and provides a central component for state manangement.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Provides a radio group
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ *
+ * @usage
+ * - Forms: RadioGroup
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { RadioGroup } from "@yahoo/uds";
+ *
+ * <RadioGroup name="items" value="1">
+ *   <Radio value="1" label="One" />
+ *   <Radio value="2" label="Two" />
+ * </RadioGroup>
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio).
+ **/
+declare const RadioGroupProvider: react__default.ForwardRefExoticComponent<RadioGroupProviderProps & react__default.RefAttributes<HTMLDivElement>>;
+
 interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
+    /**
+     * The layout variant to use for the motion config.
+     * @default 'subtle'
+     */
     layoutVariant?: MotionVariant;
+    /**
+     * The layout speed to use for the motion config.
+     * @default '3'
+     */
     layoutSpeed?: MotionVariantSpeed;
+    /**
+     * The color variant to use for the motion config.
+     * @default 'smooth'
+     */
     colorVariant?: MotionVariant;
+    /**
+     * The color speed to use for the motion config.
+     * @default '3'
+     */
     colorSpeed?: MotionVariantSpeed;
 }
 /**
@@ -134,4 +997,33 @@ interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | '
  */
 declare function SpringMotionConfig({ reducedMotion, children, layoutVariant, layoutSpeed, colorVariant, colorSpeed, }: SpringMotionConfigProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Pressable, type PressableProps, SpringMotionConfig, type SpringMotionConfigProps };
+type NativeInputProps = Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
+}
+/**
+ * **⚙️️ An switch.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ *
+ * @usage
+ * - Forms: switch
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Switch } from "@yahoo/uds";
+ *
+ * <Switch label="Name" required />
+ *```
+ *
+ * @related [Checkbox](https://uds.build/docs/components/checkbox).
+ **/
+declare const Switch: react__default.ForwardRefExoticComponent<SwitchProps & react__default.RefAttributes<HTMLInputElement>>;
+
+export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarText, type AvatarTextProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipButton, type ChipButtonProps, ChipDismissible, type ChipDismissibleProps, ChipLink, type ChipLinkProps, type ChipProps, ChipToggle, type ChipToggleProps, IconButton, type IconButtonProps, Menu_index as Menu, type MenuContentProps, type MenuDividerProps, type MenuItemCheckboxProps, type MenuItemProps, type MenuPlacement, type MenuProviderProps, type MenuTriggerProps, Pressable, type PressableProps, Radio, RadioGroupProvider, type RadioGroupProviderProps, type RadioProps, SpringMotionConfig, type SpringMotionConfigProps, Switch, type SwitchProps };