@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/sheet/sheet.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../components/button/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Kbd } from '../../components/kbd/index.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { cn } from '../../utils/cn.js';
+const sheetOverlayVariants = cva('fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0');
+const sheetContentVariants = cva([
+    'fixed z-50 gap-4 bg-background-neutral-base shadow-tooltip transition ease-in-out',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+], {
+    variants: {
+        side: {
+            top: [
+                'inset-x-0 top-0 border-b border-border-neutral-strong',
+                'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top'
+            ],
+            bottom: [
+                'inset-x-0 bottom-0 border-t border-border-neutral-strong',
+                'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom'
+            ],
+            left: [
+                'inset-y-0 left-0 h-full w-3/4 border-r border-border-neutral-strong sm:max-w-sm',
+                'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left'
+            ],
+            right: [
+                'inset-y-0 right-0 h-full w-3/4 border-l border-border-neutral-strong sm:max-w-sm',
+                'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
+            ]
+        }
+    },
+    defaultVariants: {
+        side: 'right'
+    }
+});
+function Sheet({ ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Root, {
+        "data-slot": "sheet",
+        ...props
+    });
+}
+function SheetTrigger({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Trigger, {
+        "data-slot": "sheet-trigger",
+        className: cn('outline-none', className),
+        ...props
+    });
+}
+function SheetPortal({ ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Portal, {
+        "data-slot": "sheet-portal",
+        ...props
+    });
+}
+function SheetClose({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Close, {
+        "data-slot": "sheet-close",
+        className: cn('outline-none', className),
+        ...props
+    });
+}
+function SheetOverlay({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
+        "data-slot": "sheet-overlay",
+        className: cn(sheetOverlayVariants(), className),
+        ...props
+    });
+}
+function SheetContent({ side = 'right', className, children, container, ...props }) {
+    return /*#__PURE__*/ _jsxs(SheetPortal, {
+        container: container,
+        children: [
+            /*#__PURE__*/ _jsx(SheetOverlay, {}),
+            /*#__PURE__*/ _jsx(DialogPrimitive.Content, {
+                "data-slot": "sheet-content",
+                className: cn(sheetContentVariants({
+                    side
+                }), className),
+                ...props,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "relative size-full flex flex-col overflow-hidden",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "pointer-events-none absolute inset-0 shadow-separator-inset"
+                        }),
+                        children
+                    ]
+                })
+            })
+        ]
+    });
+}
+function SheetHeader({ className, showEscIndicator = true, showClose = true, children, ...props }) {
+    const isDesktop = useMediaQuery('(min-width: 768px)');
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col w-full shrink-0",
+        ...props,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: cn('border-b border-border-neutral-strong bg-background-neutral-base flex items-center justify-center gap-12 sm:gap-20 overflow-clip px-16 py-12 sm:px-24 sm:py-16 w-full', className),
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex-1 min-w-0",
+                    children: children
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-8 shrink-0",
+                    children: [
+                        isDesktop && showEscIndicator && /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Esc"
+                        }),
+                        showClose && /*#__PURE__*/ _jsx(SheetClose, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "transparent",
+                                size: "xs",
+                                className: "rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24",
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "close"
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function SheetFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sheet-footer",
+        className: cn('flex flex-col-reverse gap-8 sm:flex-row sm:justify-end sm:space-x-2 px-16 py-12 sm:px-24 sm:py-16 border-t border-border-neutral-strong bg-background-neutral-base', className),
+        ...props
+    });
+}
+function SheetTitle({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Title, {
+        "data-slot": "sheet-title",
+        className: cn('font-medium text-base sm:text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base sm:whitespace-nowrap', className),
+        ...props
+    });
+}
+function SheetDescription({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(DialogPrimitive.Description, {
+        "data-slot": "sheet-description",
+        className: cn('text-sm leading-20 text-foreground-neutral-subtle', className),
+        ...props
+    });
+}
+function SheetBody({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sheet-body",
+        className: cn('bg-background-neutral-base flex flex-col items-start px-16 pb-16 pt-12 sm:px-24 sm:pb-24 sm:pt-16 w-full overflow-y-auto overflow-x-clip scrollbar flex-1', className),
+        ...props,
+        children: children
+    });
+}
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetBody, sheetContentVariants, sheetOverlayVariants };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet/sheet.stories.js

@@ -0,0 +1,368 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../../components/button/index.js';
+import { Input } from '../../components/input/index.js';
+import { Label } from '../../components/label/index.js';
+import { Text } from '../../components/typography/index.js';
+import { useState } from 'react';
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './sheet.js';
+const OPEN_SHEET_REGEX = /open sheet/i;
+const SETTINGS_REGEX = /settings/i;
+async function openSheetAndScreenshot(ctx, triggerRegex, screenshotName) {
+    const { canvasElement, step } = ctx;
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await step('Open the sheet', async ()=>{
+        const triggerButton = canvas.getByRole('button', {
+            name: triggerRegex
+        });
+        await user.click(triggerButton);
+    });
+    await step('Wait for sheet to appear and render', async ()=>{
+        await screen.findByRole('dialog');
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+    });
+    await argosScreenshot(ctx, screenshotName);
+}
+const meta = {
+    title: 'Components/Sheet',
+    component: Sheet,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    play: (ctx)=>openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Default Sheet Open'),
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Sheet, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(SheetTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Sheet"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(SheetContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SheetHeader, {
+                                children: /*#__PURE__*/ _jsx(SheetTitle, {
+                                    children: "Sheet Title"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetBody, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SheetDescription, {
+                                        children: "This is a description of the sheet content. Sheets are useful for displaying supplementary information or actions."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-subtle w-full",
+                                        children: "This is the body content of the sheet. You can add any content here, including forms, lists, or other components."
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Save"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const LeftSide = {
+    play: (ctx)=>openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Left Side Sheet'),
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Sheet, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(SheetTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Sheet"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(SheetContent, {
+                        side: "left",
+                        children: [
+                            /*#__PURE__*/ _jsx(SheetHeader, {
+                                children: /*#__PURE__*/ _jsx(SheetTitle, {
+                                    children: "Left Side Sheet"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetBody, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SheetDescription, {
+                                        children: "This sheet slides in from the left side of the screen."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-subtle w-full",
+                                        children: "Left side sheets are often used for navigation menus or sidebar content."
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(SheetFooter, {
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    onClick: ()=>setOpen(false),
+                                    children: "Close"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const SettingsForm = {
+    play: (ctx)=>openSheetAndScreenshot(ctx, SETTINGS_REGEX, 'Settings Form Sheet'),
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        const [name, setName] = useState('');
+        const [email, setEmail] = useState('');
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Sheet, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(SheetTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Settings"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(SheetContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SheetHeader, {
+                                children: /*#__PURE__*/ _jsx(SheetTitle, {
+                                    children: "Account Settings"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetBody, {
+                                className: "gap-20",
+                                children: [
+                                    /*#__PURE__*/ _jsx(SheetDescription, {
+                                        children: "Update your account information and preferences here."
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-20 w-full",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8 w-full",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Label, {
+                                                        htmlFor: "name",
+                                                        children: "Name"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        id: "name",
+                                                        placeholder: "John Doe",
+                                                        value: name,
+                                                        onChange: (e)=>setName(e.target.value)
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8 w-full",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Label, {
+                                                        htmlFor: "email",
+                                                        children: "Email"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Input, {
+                                                        id: "email",
+                                                        type: "email",
+                                                        placeholder: "john@example.com",
+                                                        value: email,
+                                                        onChange: (e)=>setEmail(e.target.value)
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Save Changes"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const WithoutCloseButton = {
+    play: (ctx)=>openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Sheet Without Close Button'),
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Sheet, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(SheetTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Sheet"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(SheetContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SheetHeader, {
+                                showClose: false,
+                                children: /*#__PURE__*/ _jsx(SheetTitle, {
+                                    children: "Sheet Without Close Button"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetBody, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SheetDescription, {
+                                        children: "This sheet doesn't show a close button. Users can still close it by pressing Esc or clicking outside."
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-subtle w-full",
+                                        children: "The close button can be hidden by setting the showClose prop to false."
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(SheetFooter, {
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    onClick: ()=>setOpen(false),
+                                    children: "Close"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const LongContent = {
+    play: (ctx)=>openSheetAndScreenshot(ctx, OPEN_SHEET_REGEX, 'Sheet With Long Content'),
+    render: ()=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
+            children: /*#__PURE__*/ _jsxs(Sheet, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ _jsx(SheetTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            children: "Open Sheet"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(SheetContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SheetHeader, {
+                                children: /*#__PURE__*/ _jsx(SheetTitle, {
+                                    children: "Long Content Example"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetBody, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SheetDescription, {
+                                        children: "This sheet demonstrates how it handles long scrollable content."
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "flex flex-col gap-16 w-full",
+                                        children: Array.from({
+                                            length: 20
+                                        }, (_, i)=>{
+                                            const sectionId = `section-${i + 1}`;
+                                            return /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex flex-col gap-8",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(Text, {
+                                                        size: "sm",
+                                                        className: "font-medium text-foreground-neutral-base",
+                                                        children: [
+                                                            "Section ",
+                                                            i + 1
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Text, {
+                                                        size: "sm",
+                                                        className: "text-foreground-neutral-subtle",
+                                                        children: [
+                                                            "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."
+                                                        ]
+                                                    })
+                                                ]
+                                            }, sectionId);
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(SheetFooter, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Save"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+
+//# sourceMappingURL=sheet.stories.js.map

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -0,0 +1,3 @@
+export * from './skeleton.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+type SkeletonProps = ComponentProps<'div'>;
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+export function Skeleton({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "skeleton",
+        className: cn('animate-pulse rounded-6 bg-background-neutral-disabled', className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=skeleton.js.map