@arolariu/components/dist/components/ui/dropdrawer.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
import { Menu as BaseMenu } from "@base-ui/react/menu";
import { useRender } from "@base-ui/react/use-render";
import * as React from "react";
declare const Drawer: typeof BaseDrawer.Root;
declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerTriggerProps<unknown> & React.RefAttributes<HTMLElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement> & {
    children?: React.ReactNode;
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare function DrawerFooter(props: Readonly<React.ComponentPropsWithRef<"div"> & {
    render?: useRender.RenderProp<Record<string, never>>;
}>): React.ReactElement;
declare function DrawerTitle(props: Readonly<React.ComponentPropsWithRef<typeof BaseDrawer.Title>>): React.ReactElement;
declare const DropdownMenu: <Payload>(props: BaseMenu.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
declare const DropdownMenuSub: typeof BaseMenu.SubmenuRoot;
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement> & {
    children?: React.ReactNode;
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare function DropdownMenuLabel(props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.GroupLabel>>): React.ReactElement;
declare function DropdownMenuSeparator(props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.Separator>>): React.ReactElement;
declare function DropdownMenuSubTrigger(props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.SubmenuTrigger> & {
    inset?: boolean;
}>): React.ReactElement;
declare function DropdownMenuSubContent(props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.Positioner> & {
    children?: React.ReactNode;
}>): React.ReactElement;
type DropDrawerRootProps = React.ComponentProps<typeof Drawer> | React.ComponentProps<typeof DropdownMenu>;
type DropDrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DrawerTrigger> | React.ComponentPropsWithoutRef<typeof DropdownMenuTrigger>;
type DropDrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerContent> | React.ComponentPropsWithoutRef<typeof DropdownMenuContent>;
interface MobileSubmenuDataAttributes {
    "data-parent-submenu-id"?: string;
    "data-parent-submenu"?: string;
    "data-submenu-id"?: string;
}
interface SharedDropDrawerItemProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>, "children" | "onClick" | "onSelect">, MobileSubmenuDataAttributes {
    /**
     * Item contents.
     * @default undefined
     */
    children?: React.ReactNode;
    /**
     * Additional CSS classes merged with the item styles.
     * @default undefined
     */
    className?: string;
    /**
     * Whether the desktop dropdown should close after the item is activated.
     * @default undefined
     */
    closeOnClick?: boolean;
    /**
     * Optional trailing icon or affordance rendered alongside the item content.
     * @default undefined
     */
    icon?: React.ReactNode;
    /**
     * Whether to apply inset spacing to align the item with grouped content.
     * @default undefined
     */
    inset?: boolean;
    /**
     * Mouse click handler invoked when the item is activated.
     * @default undefined
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * Selection callback invoked with the native event when the item is activated.
     * @default undefined
     */
    onSelect?: (event: Event) => void;
}
/**
 * Provides a responsive dropdown-on-desktop, drawer-on-mobile navigation surface.
 *
 * @remarks
 * - Renders either Base UI `Menu.Root` or `Drawer.Root` depending on viewport size
 * - Built on Base UI Menu and Drawer primitives
 *
 * @example
 * ```tsx
 * <DropDrawer>
 *   <DropDrawerTrigger>Open menu</DropDrawerTrigger>
 *   <DropDrawerContent>
 *     <DropDrawerItem>Profile</DropDrawerItem>
 *   </DropDrawerContent>
 * </DropDrawer>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawer({ children, ...props }: DropDrawerRootProps): React.JSX.Element;
declare namespace DropDrawer {
    var displayName: string;
}
/**
 * Renders the control that opens the dropdown or drawer surface.
 *
 * @remarks
 * - Renders either a Base UI menu trigger or drawer trigger
 * - Built on Base UI Menu and Drawer primitives
 *
 * @example
 * ```tsx
 * <DropDrawerTrigger>Open menu</DropDrawerTrigger>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/drawer | Base UI Drawer Docs}
 */
declare const DropDrawerTrigger: React.ForwardRefExoticComponent<DropDrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Renders the responsive dropdown or drawer content surface.
 *
 * @remarks
 * - Renders a Base UI popup on desktop and drawer content on mobile
 * - Built on Base UI Menu and Drawer primitives with animated mobile submenu navigation
 *
 * @example
 * ```tsx
 * <DropDrawerContent>
 *   <DropDrawerItem>Settings</DropDrawerItem>
 * </DropDrawerContent>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare const DropDrawerContent: React.ForwardRefExoticComponent<DropDrawerContentProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders an actionable item inside the drop drawer surface.
 *
 * @remarks
 * - Renders a Base UI menu item on desktop and a keyboard-accessible `<div>` on mobile
 * - Built on Base UI Menu and Drawer close primitives
 *
 * @example
 * ```tsx
 * <DropDrawerItem icon={<ChevronRightIcon />}>Account</DropDrawerItem>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerItem({ className, children, closeOnClick, disabled, icon, inset, onClick, onSelect, ...props }: SharedDropDrawerItemProps): React.JSX.Element;
declare namespace DropDrawerItem {
    var displayName: string;
}
/**
 * Renders a visual separator between desktop drop drawer sections.
 *
 * @remarks
 * - Renders a separator only in desktop dropdown mode
 * - Built on Base UI Menu separator primitives
 *
 * @example
 * ```tsx
 * <DropDrawerSeparator />
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerSeparator({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuSeparator>): React.JSX.Element | null;
declare namespace DropDrawerSeparator {
    var displayName: string;
}
/**
 * Renders a section label for the drop drawer surface.
 *
 * @remarks
 * - Renders a drawer title on mobile and a menu label on desktop
 * - Built on Base UI Drawer and Menu primitives
 *
 * @example
 * ```tsx
 * <DropDrawerLabel>Actions</DropDrawerLabel>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerLabel({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuLabel> | React.ComponentProps<typeof DrawerTitle>): React.JSX.Element;
declare namespace DropDrawerLabel {
    var displayName: string;
}
/**
 * Renders footer content aligned to the bottom of the responsive surface.
 *
 * @remarks
 * - Renders a drawer footer on mobile and a styled `<div>` on desktop
 * - Built on Base UI Drawer primitives for mobile layouts
 *
 * @example
 * ```tsx
 * <DropDrawerFooter>Signed in as Alex</DropDrawerFooter>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/drawer | Base UI Drawer Docs}
 */
declare function DropDrawerFooter({ className, children, ...props }: React.ComponentProps<typeof DrawerFooter> | React.ComponentProps<"div">): React.JSX.Element;
declare namespace DropDrawerFooter {
    var displayName: string;
}
/**
 * Renders a grouped collection of drop drawer items.
 *
 * @remarks
 * - Renders a Base UI menu group on desktop and a `<div role="group">` on mobile
 * - Inserts mobile-only separators between adjacent children
 *
 * @example
 * ```tsx
 * <DropDrawerGroup>
 *   <DropDrawerItem>Profile</DropDrawerItem>
 *   <DropDrawerItem>Billing</DropDrawerItem>
 * </DropDrawerGroup>
 * ```
 *
 * @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles/group_role | ARIA Group Role}
 */
declare function DropDrawerGroup({ className, children, ...props }: React.ComponentProps<"div"> & {
    children: React.ReactNode;
}): React.JSX.Element;
declare namespace DropDrawerGroup {
    var displayName: string;
}
/**
 * Renders a submenu root within the drop drawer surface.
 *
 * @remarks
 * - Renders a Base UI submenu on desktop and a mobile-aware container on small screens
 * - Registers submenu content for animated mobile drill-down navigation
 *
 * @example
 * ```tsx
 * <DropDrawerSub>
 *   <DropDrawerSubTrigger>More</DropDrawerSubTrigger>
 *   <DropDrawerSubContent>
 *     <DropDrawerItem>Sub item</DropDrawerItem>
 *   </DropDrawerSubContent>
 * </DropDrawerSub>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerSub({ children, id, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuSub> & {
    children?: React.ReactNode;
    id?: string;
}): React.JSX.Element;
declare namespace DropDrawerSub {
    var displayName: string;
}
interface DropDrawerSubTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>, "children" | "onClick">, MobileSubmenuDataAttributes {
    /**
     * Trigger contents.
     * @default undefined
     */
    children?: React.ReactNode;
    /**
     * Additional CSS classes merged with the trigger styles.
     * @default undefined
     */
    className?: string;
    /**
     * Whether to apply inset spacing to align the trigger with grouped content.
     * @default undefined
     */
    inset?: boolean;
    /**
     * Mouse click handler invoked before submenu navigation occurs.
     * @default undefined
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
}
/**
 * Renders the trigger that opens a nested submenu.
 *
 * @remarks
 * - Renders a Base UI submenu trigger on desktop and a keyboard-accessible `<div>` on mobile
 * - Built on Base UI Menu submenu primitives
 *
 * @example
 * ```tsx
 * <DropDrawerSubTrigger>Advanced</DropDrawerSubTrigger>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerSubTrigger({ className, inset, children, onClick, ...props }: DropDrawerSubTriggerProps): React.JSX.Element;
declare namespace DropDrawerSubTrigger {
    var displayName: string;
}
/**
 * Renders the content region for a nested submenu.
 *
 * @remarks
 * - Renders only in desktop dropdown mode
 * - Built on Base UI Menu submenu popup primitives
 *
 * @example
 * ```tsx
 * <DropDrawerSubContent>
 *   <DropDrawerItem>Details</DropDrawerItem>
 * </DropDrawerSubContent>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
 */
declare function DropDrawerSubContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>): React.JSX.Element | null;
declare namespace DropDrawerSubContent {
    var displayName: string;
}
export { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger, };
//# sourceMappingURL=dropdrawer.d.ts.map