@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! ⚡
300 lines • 9.66 kB
TypeScript
import { Dialog as BaseDialog } from "@base-ui/react/dialog";
import { useRender } from "@base-ui/react/use-render";
import * as React from "react";
export type SheetSide = "top" | "right" | "bottom" | "left";
interface SheetProps extends React.ComponentPropsWithRef<typeof BaseDialog.Root> {
}
interface SheetTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Trigger>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
/**
* Enables child element composition instead of rendering the default wrapper.
* @default false
* @deprecated Prefer Base UI's `render` prop.
*/
asChild?: boolean;
}
interface SheetOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Backdrop>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
export interface SheetContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Popup>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
/**
* Controls which side of the viewport the sheet enters from.
* @default "right"
*/
side?: SheetSide;
}
interface SheetHeaderProps 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 SheetFooterProps 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 SheetTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Title>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
interface SheetDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Description>, "className"> {
/**
* Applies additional CSS classes to the component root element.
* @default undefined
*/
className?: string;
}
/**
* Coordinates sheet state and accessibility behavior.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <Sheet>Content</Sheet>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function Sheet(props: Readonly<Sheet.Props>): React.ReactElement;
declare namespace Sheet {
var displayName: string;
}
/**
* Provides the sheet portal container.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <SheetPortal>Content</SheetPortal>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare const SheetPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the sheet close.
*
* @remarks
* - Delegates structure and state to the underlying Base UI primitive
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Preserves the underlying primitive API for advanced composition
*
* @example
* ```tsx
* <SheetClose>Content</SheetClose>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare const SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders the sheet trigger.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetTrigger>Content</SheetTrigger>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<SheetTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
* Renders the sheet overlay.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetOverlay>Content</SheetOverlay>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function SheetOverlay(props: Readonly<SheetOverlay.Props>): React.ReactElement;
declare namespace SheetOverlay {
var displayName: string;
}
/**
* Renders the sheet content.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetContent>Content</SheetContent>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the sheet header.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetHeader>Content</SheetHeader>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function SheetHeader(props: Readonly<SheetHeader.Props>): React.ReactElement;
declare namespace SheetHeader {
var displayName: string;
}
/**
* Renders the sheet footer.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetFooter>Content</SheetFooter>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function SheetFooter(props: Readonly<SheetFooter.Props>): React.ReactElement;
declare namespace SheetFooter {
var displayName: string;
}
/**
* Renders the sheet title.
*
* @remarks
* - Renders a `<h2>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetTitle>Content</SheetTitle>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function SheetTitle(props: Readonly<SheetTitle.Props>): React.ReactElement;
declare namespace SheetTitle {
var displayName: string;
}
/**
* Renders the sheet description.
*
* @remarks
* - Renders a `<p>` element by default
* - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
* - Supports the `render` prop for element composition
*
* @example
* ```tsx
* <SheetDescription>Content</SheetDescription>
* ```
*
* @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
*/
declare function SheetDescription(props: Readonly<SheetDescription.Props>): React.ReactElement;
declare namespace SheetDescription {
var displayName: string;
}
declare namespace Sheet {
type Props = SheetProps;
type State = BaseDialog.Root.State;
}
declare namespace SheetTrigger {
type Props = SheetTriggerProps;
type State = BaseDialog.Trigger.State;
}
declare namespace SheetOverlay {
type Props = SheetOverlayProps;
type State = BaseDialog.Backdrop.State;
}
declare namespace SheetContent {
type Props = SheetContentProps;
type State = BaseDialog.Popup.State;
}
declare namespace SheetHeader {
type Props = SheetHeaderProps;
type State = Record<string, never>;
}
declare namespace SheetFooter {
type Props = SheetFooterProps;
type State = Record<string, never>;
}
declare namespace SheetTitle {
type Props = SheetTitleProps;
type State = BaseDialog.Title.State;
}
declare namespace SheetDescription {
type Props = SheetDescriptionProps;
type State = BaseDialog.Description.State;
}
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
//# sourceMappingURL=sheet.d.ts.map