@shipfox/react-ui 0.15.0 → 0.17.0

package/dist/components/dashboard/toolbar/toolbar-search.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../components/icon/index.js';
+import { Search, SearchContent, SearchEmpty, SearchFooter, SearchGroup, SearchInput, SearchItem, SearchList, SearchSeparator, SearchTrigger } from '../../../components/search/index.js';
+import { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+export function ToolbarSearch({ placeholder = 'Try: job name, status, pipeline...', shortcutKey = 'meta+k', onSelect, className }) {
+    const [open, setOpen] = useState(false);
+    const handleSelect = (value)=>{
+        onSelect?.(value);
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex-1",
+        children: /*#__PURE__*/ _jsxs(Search, {
+            open: open,
+            onOpenChange: setOpen,
+            shortcutKey: shortcutKey,
+            children: [
+                /*#__PURE__*/ _jsx(SearchTrigger, {
+                    placeholder: placeholder,
+                    size: "small",
+                    variant: "primary",
+                    className: cn('w-full', className)
+                }),
+                /*#__PURE__*/ _jsxs(SearchContent, {
+                    "aria-describedby": undefined,
+                    children: [
+                        /*#__PURE__*/ _jsx(SearchInput, {
+                            placeholder: "Search for anything..."
+                        }),
+                        /*#__PURE__*/ _jsxs(SearchList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchEmpty, {
+                                    children: "No results found."
+                                }),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Recent",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "gitBranchLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "CI Pipeline",
+                                            onSelect: ()=>handleSelect('feat/data-processing'),
+                                            children: "feat/data-processing"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "gitBranchLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "CI Pipeline",
+                                            onSelect: ()=>handleSelect('feat/pagination-polling'),
+                                            children: "feat/pagination-polling"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(SearchSeparator, {}),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Jobs",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "settings3Line",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "Running",
+                                            onSelect: ()=>handleSelect('build-docker-image'),
+                                            children: "build-docker-image"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "settings3Line",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "Completed",
+                                            onSelect: ()=>handleSelect('run-tests'),
+                                            children: "run-tests"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(SearchSeparator, {}),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Status",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "checkboxCircleLine",
+                                                className: "size-16 text-foreground-success-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:success'),
+                                            children: "Success"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "errorWarningLine",
+                                                className: "size-16 text-foreground-danger-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:failed'),
+                                            children: "Failed"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "loopRightLine",
+                                                className: "size-16 text-foreground-warning-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:running'),
+                                            children: "Running"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(SearchFooter, {})
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=toolbar-search.js.map

package/dist/components/dashboard/toolbar/view-dropdown.d.ts

@@ -0,0 +1,11 @@
+export interface ViewColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+}
+export interface ViewDropdownProps {
+    columns?: ViewColumn[];
+    onColumnsChange?: (columns: ViewColumn[]) => void;
+}
+export declare function ViewDropdown({ columns: controlledColumns, onColumnsChange }: ViewDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=view-dropdown.d.ts.map

package/dist/components/dashboard/toolbar/view-dropdown.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { useState } from 'react';
+const defaultColumns = [
+    {
+        id: 'total',
+        label: 'Total',
+        visible: true
+    },
+    {
+        id: 'success',
+        label: 'Success',
+        visible: true
+    },
+    {
+        id: 'failed',
+        label: 'Failed',
+        visible: true
+    },
+    {
+        id: 'neutral',
+        label: 'Neutral',
+        visible: true
+    },
+    {
+        id: 'flaked',
+        label: 'Flaked',
+        visible: true
+    },
+    {
+        id: 'failure-rate',
+        label: 'Failure rate',
+        visible: true
+    },
+    {
+        id: 'flake-rate',
+        label: 'Flake rate',
+        visible: true
+    },
+    {
+        id: 'repository',
+        label: 'Repository',
+        visible: false
+    },
+    {
+        id: 'branch',
+        label: 'Branch',
+        visible: false
+    }
+];
+export function ViewDropdown({ columns: controlledColumns, onColumnsChange }) {
+    const [internalColumns, setInternalColumns] = useState(defaultColumns);
+    const columns = controlledColumns ?? internalColumns;
+    const handleColumnChange = (columnId, visible)=>{
+        const updatedColumns = columns.map((col)=>col.id === columnId ? {
+                ...col,
+                visible
+            } : col);
+        if (onColumnsChange) {
+            onColumnsChange(updatedColumns);
+        } else {
+            setInternalColumns(updatedColumns);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "secondary",
+                    size: "sm",
+                    "aria-label": "Customize columns",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "stackedView",
+                            className: "size-16 text-foreground-neutral-subtle block md:hidden"
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "hidden md:inline-flex items-center gap-6",
+                            children: [
+                                "View ",
+                                /*#__PURE__*/ _jsx(Icon, {
+                                    name: "stackedView",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                align: "end",
+                className: "w-180",
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                        children: "Custom display"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    columns.map((column)=>/*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+                            checked: column.visible,
+                            onCheckedChange: (visible)=>handleColumnChange(column.id, visible),
+                            closeOnSelect: false,
+                            children: column.label
+                        }, column.id))
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=view-dropdown.js.map

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,10 @@
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export interface EmptyStateProps extends ComponentProps<'div'> {
+    icon?: IconName;
+    title?: string;
+    description?: string;
+    variant?: 'default' | 'compact';
+}
+export declare function EmptyState({ icon, title, description, variant, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
+import { Text } from '../../components/typography/index.js';
+import { cn } from '../../utils/cn.js';
+export function EmptyState({ icon = 'fileDamageLine', title, description, variant = 'default', className, ...props }) {
+    const containerClasses = variant === 'compact' ? 'flex flex-col gap-10 items-center justify-center' : 'flex flex-col items-center justify-center gap-12 py-48';
+    const iconContainerClasses = variant === 'compact' ? 'size-32 rounded-6 bg-background-neutral-base border border-border-neutral-strong flex items-center justify-center p-8' : 'size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center';
+    const iconSize = variant === 'compact' ? 'size-20' : 'size-16';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(containerClasses, className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: iconContainerClasses,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: icon,
+                    className: cn(iconSize, 'text-foreground-neutral-subtle'),
+                    color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('text-center', variant === 'default' && 'space-y-4'),
+                children: [
+                    title && /*#__PURE__*/ _jsx(Text, {
+                        size: "sm",
+                        className: variant === 'compact' ? 'text-foreground-neutral-subtle' : 'text-foreground-neutral-base',
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ _jsx(Text, {
+                        size: "xs",
+                        className: "text-foreground-neutral-muted",
+                        children: description
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.stories.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from './empty-state.js';
+const meta = {
+    title: 'Components/EmptyState',
+    component: EmptyState,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {}
+};
+export const CustomContent = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        icon: 'shipfox',
+        title: 'No jobs yet',
+        description: 'Import past runs or start a runner.'
+    }
+};
+export const Compact = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400 h-200 relative",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        icon: 'lineChartLine',
+        title: 'Nothing here yet.',
+        variant: 'compact'
+    }
+};
+export const NoDescription = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        title: 'No data available',
+        description: undefined
+    }
+};
+export const NoTitle = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        title: undefined,
+        description: 'This is a description without a title.'
+    }
+};
+
+//# sourceMappingURL=empty-state.stories.js.map

package/dist/components/empty-state/index.d.ts

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

package/dist/components/empty-state/index.js

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

package/dist/components/index.d.ts

@@ -4,15 +4,18 @@ export * from './badge';
 export * from './button';
 export * from './button-group';
 export * from './calendar';
+export * from './card';
 export * from './checkbox';
 export * from './code-block';
 export * from './command';
 export * from './confetti';
+export * from './dashboard';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
 export * from './dropdown-menu';
 export * from './dynamic-item';
+export * from './empty-state';
 export * from './form';
 export * from './icon';
 export * from './inline-tips';
@@ -25,6 +28,7 @@ export * from './moving-border';
 export * from './popover';
 export * from './search';
 export * from './select';
+export * from './sheet';
 export * from './shiny-text';
 export * from './skeleton';
 export * from './table';

package/dist/components/index.js

@@ -4,15 +4,18 @@ export * from './badge/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './calendar/index.js';
+export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
 export * from './command/index.js';
 export * from './confetti/index.js';
+export * from './dashboard/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
 export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
+export * from './empty-state/index.js';
 export * from './form/index.js';
 export * from './icon/index.js';
 export * from './inline-tips/index.js';
@@ -25,6 +28,7 @@ export * from './moving-border/index.js';
 export * from './popover/index.js';
 export * from './search/index.js';
 export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './shiny-text/index.js';
 export * from './skeleton/index.js';
 export * from './table/index.js';

package/dist/components/modal/modal.js

@@ -3,6 +3,7 @@ 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 { Text } from '../../components/typography/index.js';
 import { motion } from 'framer-motion';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
@@ -180,9 +181,8 @@ function ModalHeader({ className, title, showEscIndicator = true, showClose = tr
                     /*#__PURE__*/ _jsxs("div", {
                         className: "flex items-center gap-8",
                         children: [
-                            isDesktop && showEscIndicator && /*#__PURE__*/ _jsx("kbd", {
-                                className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
-                                children: "esc"
+                            isDesktop && showEscIndicator && /*#__PURE__*/ _jsx(Kbd, {
+                                children: "Esc"
                             }),
                             showClose && /*#__PURE__*/ _jsx(ModalClose, {
                                 asChild: true,

package/dist/components/search/search-inline.js

@@ -65,7 +65,7 @@ export function SearchInline({ className, variant, size, radius, value, onChange
                 value: inputValue,
                 onChange: handleChange,
                 onKeyDown: handleKeyDown,
-                className: cn('flex-1 bg-transparent outline-none min-w-0', 'text-foreground-neutral-base', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'),
+                className: cn('flex-1 bg-transparent outline-none min-w-0', 'text-base md:text-sm', 'text-foreground-neutral-base', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'),
                 ...props
             }),
             showClearButton && hasValue && /*#__PURE__*/ _jsx("button", {

package/dist/components/search/search-modal.js

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { cn } from '../../utils/cn.js';
 import { Icon } from '../icon/index.js';
 import { Kbd } from '../kbd/index.js';
-import { Modal, ModalBody, ModalContent } from '../modal/modal.js';
+import { Modal, ModalBody, ModalContent, ModalTitle } from '../modal/modal.js';
 import { useSearchContext } from './search-context.js';
 export function SearchContent({ breakpoint = '(min-width: 768px)', className, children, overlayClassName, onEscapeKeyDown, ...props }) {
     const { open, setOpen, searchValue, setSearchValue } = useSearchContext();
@@ -24,16 +24,22 @@ export function SearchContent({ breakpoint = '(min-width: 768px)', className, ch
         open: open,
         onOpenChange: setOpen,
         breakpoint: breakpoint,
-        children: /*#__PURE__*/ _jsx(ModalContent, {
+        children: /*#__PURE__*/ _jsxs(ModalContent, {
             "data-slot": "search-content",
             className: cn('top-[15%]! translate-y-0!', className),
             overlayClassName: cn('backdrop-blur-sm', overlayClassName),
             onEscapeKeyDown: handleEscapeKeyDown,
             ...props,
-            children: /*#__PURE__*/ _jsx(ModalBody, {
-                className: "flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip",
-                children: children
-            })
+            children: [
+                /*#__PURE__*/ _jsx(ModalTitle, {
+                    className: "sr-only",
+                    children: "Search"
+                }),
+                /*#__PURE__*/ _jsx(ModalBody, {
+                    className: "flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip",
+                    children: children
+                })
+            ]
         })
     });
 }
@@ -51,7 +57,7 @@ export function SearchInput({ className, ...props }) {
                 autoFocus: open,
                 value: searchValue,
                 onValueChange: setSearchValue,
-                className: cn('flex-1 bg-transparent text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
+                className: cn('flex-1 bg-transparent text-base md:text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
                 ...props
             }),
             /*#__PURE__*/ _jsx(Kbd, {

package/dist/components/select/select.d.ts

@@ -13,7 +13,9 @@ type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & Varia
 declare function SelectTrigger({ className, variant, size, children, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
-declare function SelectContent({ className, children, position, sideOffset, align, ...props }: ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, sideOffset, align, container, ...props }: ComponentProps<typeof SelectPrimitive.Content> & {
+    container?: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
 declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
 type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
     icon?: IconName;

package/dist/components/select/select.js

@@ -88,8 +88,9 @@ function SelectScrollDownButton({ className, ...props }) {
         })
     });
 }
-function SelectContent({ className, children, position = 'popper', sideOffset = 4, align = 'center', ...props }) {
+function SelectContent({ className, children, position = 'popper', sideOffset = 4, align = 'center', container, ...props }) {
     return /*#__PURE__*/ _jsx(SelectPrimitive.Portal, {
+        container: container,
         children: /*#__PURE__*/ _jsxs(SelectPrimitive.Content, {
             "data-slot": "select-content",
             className: cn('relative z-50 max-h-300 min-w-180 overflow-hidden rounded-10 p-4', 'bg-background-neutral-overlay shadow-tooltip', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),

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

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

package/dist/components/sheet/index.js

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

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,33 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const sheetOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const sheetContentVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Sheet({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ className, ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+type SheetOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
+declare function SheetOverlay({ className, ...props }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;
+type SheetContentProps = ComponentProps<typeof DialogPrimitive.Content> & VariantProps<typeof sheetContentVariants> & {
+    container?: HTMLElement | null;
+};
+declare function SheetContent({ side, className, children, container, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+type SheetHeaderProps = ComponentProps<'div'> & {
+    showEscIndicator?: boolean;
+    showClose?: boolean;
+};
+declare function SheetHeader({ className, showEscIndicator, showClose, children, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+type SheetFooterProps = ComponentProps<'div'>;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+type SheetTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react/jsx-runtime").JSX.Element;
+type SheetDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
+type SheetBodyProps = ComponentProps<'div'>;
+declare function SheetBody({ className, children, ...props }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetBody, sheetContentVariants, sheetOverlayVariants, };
+export type { SheetContentProps, SheetHeaderProps, SheetFooterProps, SheetTitleProps, SheetDescriptionProps, SheetBodyProps, SheetOverlayProps, };
+//# sourceMappingURL=sheet.d.ts.map