@arolariu/components
Version:
🎨 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! ⚡
292 lines • 9.21 kB
TypeScript
import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
import { useRender } from "@base-ui/react/use-render";
import * as React from "react";
interface DrawerProps extends React.ComponentPropsWithRef<typeof BaseDrawer.Root> {
}
interface DrawerTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Trigger>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
interface DrawerOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Backdrop>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
interface DrawerContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Popup>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
interface DrawerHeaderProps extends React.ComponentPropsWithRef<"div"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
/**
* Overrides the default rendered element while preserving component behavior.
* @default undefined
*/
render?: useRender.RenderProp<Record<string, never>>;
/**
* Enables child element composition instead of rendering the default wrapper.
* @default false
* @deprecated Prefer Base UI's `render` prop.
*/
asChild?: boolean;
}
interface DrawerFooterProps extends React.ComponentPropsWithRef<"div"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
/**
* Overrides the default rendered element while preserving component behavior.
* @default undefined
*/
render?: useRender.RenderProp<Record<string, never>>;
/**
* Enables child element composition instead of rendering the default wrapper.
* @default false
* @deprecated Prefer Base UI's `render` prop.
*/
asChild?: boolean;
}
interface DrawerTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Title>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
interface DrawerDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Description>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
/**
* Coordinates drawer state and accessibility behavior.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <Drawer>Content</Drawer>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function Drawer(props: Readonly<Drawer.Props>): React.ReactElement;
declare namespace Drawer {
var displayName: string;
}
/**
* Renders the drawer trigger.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerTrigger>Content</DrawerTrigger>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Provides the drawer portal container.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <DrawerPortal>Content</DrawerPortal>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare const DrawerPortal: typeof BaseDrawer.Portal & {
displayName?: string;
};
/**
* Renders the drawer close.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <DrawerClose>Content</DrawerClose>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare const DrawerClose: typeof BaseDrawer.Close & {
displayName?: string;
};
/**
* Renders the drawer overlay.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerOverlay>Content</DrawerOverlay>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function DrawerOverlay(props: Readonly<DrawerOverlay.Props>): React.ReactElement;
declare namespace DrawerOverlay {
var displayName: string;
}
/**
* Renders the drawer content.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerContent>Content</DrawerContent>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the drawer header.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerHeader>Content</DrawerHeader>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function DrawerHeader(props: Readonly<DrawerHeader.Props>): React.ReactElement;
declare namespace DrawerHeader {
var displayName: string;
}
/**
* Renders the drawer footer.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerFooter>Content</DrawerFooter>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function DrawerFooter(props: Readonly<DrawerFooter.Props>): React.ReactElement;
declare namespace DrawerFooter {
var displayName: string;
}
/**
* Renders the drawer title.
*
* @remarks
* - Renders a `<h2>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerTitle>Content</DrawerTitle>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function DrawerTitle(props: Readonly<DrawerTitle.Props>): React.ReactElement;
declare namespace DrawerTitle {
var displayName: string;
}
/**
* Renders the drawer description.
*
* @remarks
* - Renders a `<p>` element by default
* - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <DrawerDescription>Content</DrawerDescription>
* ```
*
* @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
*/
declare function DrawerDescription(props: Readonly<DrawerDescription.Props>): React.ReactElement;
declare namespace DrawerDescription {
var displayName: string;
}
declare namespace Drawer {
type Props = DrawerProps;
type State = BaseDrawer.Root.State;
}
declare namespace DrawerTrigger {
type Props = DrawerTriggerProps;
type State = BaseDrawer.Trigger.State;
}
declare namespace DrawerOverlay {
type Props = DrawerOverlayProps;
type State = BaseDrawer.Backdrop.State;
}
declare namespace DrawerContent {
type Props = DrawerContentProps;
type State = BaseDrawer.Popup.State;
}
declare namespace DrawerHeader {
type Props = DrawerHeaderProps;
type State = Record<string, never>;
}
declare namespace DrawerFooter {
type Props = DrawerFooterProps;
type State = Record<string, never>;
}
declare namespace DrawerTitle {
type Props = DrawerTitleProps;
type State = BaseDrawer.Title.State;
}
declare namespace DrawerDescription {
type Props = DrawerDescriptionProps;
type State = BaseDrawer.Description.State;
}
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
//# sourceMappingURL=drawer.d.ts.map