@shipfox/react-ui 0.15.0 → 0.16.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/index.d.ts

@@ -25,6 +25,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

@@ -25,6 +25,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

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