;
+
+export const Default: Story = {
+ play: (ctx) => openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Default Sheet Open'),
+ render: () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ Sheet Title
+
+
+
+ This is a description of the sheet content. Sheets are useful for displaying
+ supplementary information or actions.
+
+
+ This is the body content of the sheet. You can add any content here, including
+ forms, lists, or other components.
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const LeftSide: Story = {
+ play: (ctx) => openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Left Side Sheet'),
+ render: () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ Left Side Sheet
+
+
+
+ This sheet slides in from the left side of the screen.
+
+
+ Left side sheets are often used for navigation menus or sidebar content.
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const SettingsForm: Story = {
+ play: (ctx) => openSheetAndScreenshot(ctx, SETTINGS_REGEX, 'Settings Form Sheet'),
+ render: () => {
+ const [open, setOpen] = useState(false);
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+
+ return (
+
+
+
+
+
+
+
+ Account Settings
+
+
+
+ Update your account information and preferences here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sheet Without Close Button
+
+
+
+ This sheet doesn't show a close button. Users can still close it by pressing Esc or
+ clicking outside.
+
+
+ The close button can be hidden by setting the showClose prop to false.
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const LongContent: Story = {
+ play: (ctx) => openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Sheet With Long Content'),
+ render: () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ Long Content Example
+
+
+
+ This sheet demonstrates how it handles long scrollable content.
+
+
+ {Array.from({length: 20}, (_, i) => {
+ const sectionId = `section-${i + 1}`;
+ return (
+
+
+ Section {i + 1}
+
+
+ This is paragraph {i + 1} of the long content. The sheet body is scrollable,
+ so you can scroll through all the content while the header and footer remain
+ fixed.
+
+
+ );
+ })}
+
+
+
+
{children}
+
+ {isDesktop && showEscIndicator && Esc}
+ {showClose && (
+
+
+
+ )}
+
+
+
+ {children}
+
+ );
+}
+
+export {
+ Sheet,
+ SheetPortal,
+ SheetOverlay,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+ SheetBody,
+ sheetContentVariants,
+ sheetOverlayVariants,
+};
+
+export type {
+ SheetContentProps,
+ SheetHeaderProps,
+ SheetFooterProps,
+ SheetTitleProps,
+ SheetDescriptionProps,
+ SheetBodyProps,
+ SheetOverlayProps,
+};