@payfit/unity-components
Version:
138 lines (137 loc) • 4.74 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
overlay: string[];
wrapper: string[];
content: string[];
}, undefined, unknown, unknown, undefined>>;
export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
/**
* Controls whether the sheet can be dismissed by clicking outside or using escape key.
* @default true
*/
isDismissable?: boolean;
/**
* When true, pressing the Escape key will not close the sheet.
* This is useful when you need to prevent accidental dismissal.
* @default false
*/
isKeyboardDismissDisabled?: boolean;
/**
* Controls the open state of the sheet in controlled mode.
* Must be used together with `onOpenChange`.
*/
isOpen?: boolean;
/**
* Sets the initial open state in uncontrolled mode.
* @default false
*/
defaultOpen?: boolean;
/**
* Callback fired when the open state changes.
* Required when using controlled mode with `isOpen`.
*/
onOpenChange?: (isOpen: boolean) => void;
}
/**
* The BottomSheet component provides a mobile-optimized interface for displaying content
* that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
* information without leaving the current context.
*
* This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
* which adapts to different viewports.
*
* Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
* `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
* `isKeyboardDismissDisabled` props.
* @param {BottomSheetProps} props - The props for the BottomSheet component
* @see {@link BottomSheetProps} for all available props
* @example
* ```tsx
* import {
* BottomSheet,
* BottomSheetHeader,
* BottomSheetContent,
* BottomSheetFooter,
* Button,
* DialogTrigger
* } from '@payfit/unity-components'
*
* // Uncontrolled example
* function BasicExample() {
* return (
* <DialogTrigger>
* <Button>Open bottom sheet</Button>
* <BottomSheet>
* <BottomSheetHeader>Sheet title</BottomSheetHeader>
* <BottomSheetContent>Your content here</BottomSheetContent>
* <BottomSheetFooter>
* <Button variant="secondary">Cancel</Button>
* <Button variant="primary">Save</Button>
* </BottomSheetFooter>
* </BottomSheet>
* </DialogTrigger>
* )
* }
*
* // Controlled example
* function ControlledExample() {
* const [isOpen, setIsOpen] = useState(false)
*
* return (
* <>
* <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
*
* <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
* <BottomSheetHeader>Sheet title</BottomSheetHeader>
* <BottomSheetContent>Your content here</BottomSheetContent>
* <BottomSheetFooter>
* <Button
* variant="primary"
* onPress={() => setIsOpen(false)}
* >
* Close
* </Button>
* </BottomSheetFooter>
* </BottomSheet>
* </>
* )
* }
* ```
* @remarks
* [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
*/
declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
export { BottomSheet };