@spark-ui/components/dist/drawer/index.d.mts

Spark (Leboncoin design system) components.

import { Dialog } from 'radix-ui';
import { ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
import { IconButtonProps } from '../icon-button/index.mjs';
import '../button/index.mjs';

interface DrawerProps {
    /**
     * Children of the component.
     */
    children?: Dialog.DialogProps['children'];
    /**
     * Specifies if the dialog is open or not.
     */
    open?: Dialog.DialogProps['open'];
    /**
     * Default open state.
     */
    defaultOpen?: Dialog.DialogProps['defaultOpen'];
    /**
     * Handler executed on every dialog open state change.
     */
    onOpenChange?: Dialog.DialogProps['onOpenChange'];
    /**
     * Specifies if the dialog is a modal.
     */
    modal?: Dialog.DialogProps['modal'];
}
declare const Drawer$1: {
    ({ children, ...rest }: DrawerProps): ReactElement;
    displayName: string;
};

declare const drawerBodyStyles: (props?: ({
    inset?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>;

interface DrawerBodyProps extends DrawerBodyStylesProps {
    children: ReactNode;
    className?: string;
    ref?: Ref<HTMLDivElement>;
}
declare const DrawerBody: {
    ({ children, inset, className, ref, ...rest }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type DrawerCloseProps = Dialog.DialogCloseProps & {
    ref?: Ref<HTMLButtonElement>;
};

type DrawerCloseButtonProps = DrawerCloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
declare const DrawerCloseButton: {
    ({ "aria-label": ariaLabel, className, size, intent, design, children, ref, ...rest }: DrawerCloseButtonProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const drawerContentStyles: (props?: ({
    size?: "sm" | "md" | "lg" | "fluid" | "fullscreen" | null | undefined;
    side?: "right" | "left" | "top" | "bottom" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>;

type DrawerContentProps = Dialog.DialogContentProps & DrawerContentStylesProps & {
    ref?: Ref<HTMLDivElement>;
};
declare const DrawerContent: {
    ({ className, size, side, onInteractOutside, ref, ...rest }: DrawerContentProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type DrawerDescriptionProps = Dialog.DialogDescriptionProps & {
    ref?: Ref<HTMLParagraphElement>;
};
declare const DrawerDescription: {
    (props: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {
    ref?: Ref<HTMLDivElement>;
};
declare const DrawerFooter: {
    ({ className, ref, ...rest }: DrawerFooterProps): ReactElement;
    displayName: string;
};

interface DrawerHeaderProps {
    children: ReactNode;
    className?: string;
    ref?: Ref<HTMLDivElement>;
}
declare const DrawerHeader: {
    ({ children, className, ref, ...rest }: DrawerHeaderProps): ReactElement;
    displayName: string;
};

type DrawerOverlayProps = Dialog.DialogOverlayProps & {
    ref?: Ref<HTMLDivElement>;
};
declare const DrawerOverlay: {
    ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement;
    displayName: string;
};

type DrawerPortalProps = Dialog.DialogPortalProps;
declare const DrawerPortal: {
    ({ children, ...rest }: DrawerPortalProps): ReactElement;
    displayName: string;
};

type DrawerTitleProps = Dialog.DialogTitleProps & {
    ref?: Ref<HTMLHeadingElement>;
};
declare const DrawerTitle: {
    ({ className, ref, ...others }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface DrawerTriggerProps extends Dialog.DialogTriggerProps {
    /**
     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
     */
    asChild?: boolean;
    ref?: Ref<HTMLButtonElement>;
}
declare const DrawerTrigger: {
    (props: DrawerTriggerProps): ReactElement;
    displayName: string;
};

declare const Drawer: typeof Drawer$1 & {
    Trigger: typeof DrawerTrigger;
    Portal: typeof DrawerPortal;
    Overlay: typeof DrawerOverlay;
    Content: typeof DrawerContent;
    Header: typeof DrawerHeader;
    Body: typeof DrawerBody;
    Footer: typeof DrawerFooter;
    CloseButton: typeof DrawerCloseButton;
    Title: typeof DrawerTitle;
    Description: typeof DrawerDescription;
};

export { Drawer, type DrawerBodyProps, type DrawerCloseButtonProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps };