@getgreenline/blaze-ui 1.0.24 → 1.0.26

package/dist/components/selection-panel.d.ts

@@ -0,0 +1,29 @@
+import { type DataTableColumn, type DataTableRow } from "./data-table";
+export interface SelectionPanelProps<T extends DataTableRow> {
+    open: boolean;
+    onClose: () => void;
+    onDone: (selectedIds: string[]) => void;
+    title?: string;
+    description?: string;
+    availableItems: T[];
+    columns: DataTableColumn<T>[];
+    selectedColumns?: DataTableColumn<T>[];
+    selectedIds: string[];
+    loading?: boolean;
+    treeMode?: boolean;
+    availableLabel?: string;
+    selectedLabel?: string;
+    addButtonLabel?: string;
+    removeButtonLabel?: string;
+    doneButtonLabel?: string;
+    cancelButtonLabel?: string;
+    availableEmptyMessage?: string;
+    selectedEmptyMessage?: string;
+    width?: string;
+    maxWidth?: string;
+    showConfirmOnClose?: boolean;
+    confirmCloseMessage?: string;
+    onBeforeSelectionChange?: (selectedIds: string[]) => string[];
+}
+export declare function SelectionPanel<T extends DataTableRow>({ open, onClose, onDone, title, description, availableItems, columns, selectedColumns, selectedIds: initialSelectedIds, loading, treeMode, availableLabel, selectedLabel, addButtonLabel, removeButtonLabel, doneButtonLabel, cancelButtonLabel, availableEmptyMessage, selectedEmptyMessage, width, maxWidth, showConfirmOnClose, confirmCloseMessage, onBeforeSelectionChange, }: SelectionPanelProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=selection-panel.d.ts.map

package/dist/components/selection-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-panel.d.ts","sourceRoot":"","sources":["../../src/components/selection-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAA;AAuBrB,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,YAAY;IACzD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,EAAE,CAAA;IACnB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACtC,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,EAAE,CAAA;CAC9D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,EACrD,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAsB,EACtB,WAAW,EACX,cAAc,EACd,OAAO,EACP,eAAe,EACf,WAAW,EAAE,kBAAkB,EAC/B,OAAe,EACf,QAAgB,EAChB,cAA4B,EAC5B,aAA0B,EAC1B,cAA+B,EAC/B,iBAAqC,EACrC,eAAwB,EACxB,iBAA4B,EAC5B,qBAAqB,EACrB,oBAA0C,EAC1C,KAAa,EACb,QAAmB,EACnB,kBAAyB,EACzB,mBAAkF,EAClF,uBAAuB,GACxB,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA6VxB"}

package/dist/components/selection-panel.js

@@ -0,0 +1,166 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+import { SearchBar } from './search-bar.js';
+import { DataTable } from './data-table.js';
+import { Button } from './button.js';
+import { Sheet, SheetContent, SheetTitle, SheetFooter } from './sheet.js';
+import { VisuallyHidden } from './visually-hidden.js';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './alert-dialog.js';
+
+function SelectionPanel({ open, onClose, onDone, title = "Select Items", description, availableItems, columns, selectedColumns, selectedIds: initialSelectedIds, loading = false, treeMode = false, availableLabel = "Available", selectedLabel = "Selected", addButtonLabel = "Add Selected", removeButtonLabel = "Remove Selected", doneButtonLabel = "Done", cancelButtonLabel = "Cancel", availableEmptyMessage, selectedEmptyMessage = "No items selected", width = "75%", maxWidth = "1400px", showConfirmOnClose = true, confirmCloseMessage = "Are you sure you want to exit without saving your changes?", onBeforeSelectionChange, }) {
+    const [selectedIds, setSelectedIds] = React.useState(new Set(initialSelectedIds));
+    const [availableChecked, setAvailableChecked] = React.useState(new Set());
+    const [selectedChecked, setSelectedChecked] = React.useState(new Set());
+    const [availableSearch, setAvailableSearch] = React.useState("");
+    const [selectedSearch, setSelectedSearch] = React.useState("");
+    const [availableSearchApplied, setAvailableSearchApplied] = React.useState("");
+    const [selectedSearchApplied, setSelectedSearchApplied] = React.useState("");
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+    const availableHeadingId = React.useId();
+    const selectedHeadingId = React.useId();
+    React.useEffect(() => {
+        if (open) {
+            setSelectedIds(new Set(initialSelectedIds));
+            setAvailableChecked(new Set());
+            setSelectedChecked(new Set());
+            setAvailableSearch("");
+            setSelectedSearch("");
+            setAvailableSearchApplied("");
+            setSelectedSearchApplied("");
+            setIsDirty(false);
+        }
+    }, [open, initialSelectedIds]);
+    const availableItemsFiltered = React.useMemo(() => {
+        const filterRecursive = (items) => {
+            return items
+                .filter((item) => !selectedIds.has(item.id))
+                .map((item) => {
+                if (treeMode && item.children) {
+                    return {
+                        ...item,
+                        children: filterRecursive(item.children),
+                    };
+                }
+                return item;
+            });
+        };
+        let filtered = filterRecursive(availableItems);
+        if (availableSearchApplied) {
+            const searchLower = availableSearchApplied.toLowerCase();
+            const searchRecursive = (items) => {
+                return items.filter((item) => {
+                    const matches = columns.some((col) => {
+                        const value = item[col.key];
+                        return String(value).toLowerCase().includes(searchLower);
+                    });
+                    if (treeMode && item.children) {
+                        const matchingChildren = searchRecursive(item.children);
+                        if (matchingChildren.length > 0) {
+                            return true;
+                        }
+                    }
+                    return matches;
+                });
+            };
+            filtered = searchRecursive(filtered);
+        }
+        return filtered;
+    }, [availableItems, selectedIds, availableSearchApplied, columns, treeMode]);
+    const selectedItemsData = React.useMemo(() => {
+        const findItemsById = (items, ids) => {
+            const result = [];
+            for (const item of items) {
+                if (ids.has(item.id)) {
+                    result.push(item);
+                }
+                if (treeMode && item.children) {
+                    result.push(...findItemsById(item.children, ids));
+                }
+            }
+            return result;
+        };
+        let selected = findItemsById(availableItems, selectedIds);
+        if (selectedSearchApplied) {
+            const searchLower = selectedSearchApplied.toLowerCase();
+            selected = selected.filter((item) => {
+                return columns.some((col) => {
+                    const value = item[col.key];
+                    return String(value).toLowerCase().includes(searchLower);
+                });
+            });
+        }
+        return selected;
+    }, [availableItems, selectedIds, selectedSearchApplied, columns, treeMode]);
+    const handleAvailableSelectionChange = React.useCallback((ids) => {
+        const transformedIds = onBeforeSelectionChange
+            ? onBeforeSelectionChange(ids)
+            : ids;
+        setAvailableChecked(new Set(transformedIds));
+    }, [onBeforeSelectionChange]);
+    const handleSelectedSelectionChange = React.useCallback((ids) => {
+        setSelectedChecked(new Set(ids));
+    }, []);
+    const handleAddSelected = React.useCallback(() => {
+        if (availableChecked.size === 0)
+            return;
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            availableChecked.forEach((id) => next.add(id));
+            return next;
+        });
+        setAvailableChecked(new Set());
+        setIsDirty(true);
+    }, [availableChecked]);
+    const handleRemoveSelected = React.useCallback(() => {
+        if (selectedChecked.size === 0)
+            return;
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            selectedChecked.forEach((id) => next.delete(id));
+            return next;
+        });
+        setSelectedChecked(new Set());
+        setIsDirty(true);
+    }, [selectedChecked]);
+    const handleDone = React.useCallback(() => {
+        onDone(Array.from(selectedIds));
+        onClose();
+    }, [selectedIds, onDone, onClose]);
+    const handleClose = React.useCallback(() => {
+        if (isDirty && showConfirmOnClose) {
+            setShowConfirmDialog(true);
+        }
+        else {
+            onClose();
+        }
+    }, [isDirty, showConfirmOnClose, onClose]);
+    const handleConfirmClose = React.useCallback(() => {
+        setShowConfirmDialog(false);
+        onClose();
+    }, [onClose]);
+    return (jsxs(Fragment, { children: [jsx(Sheet, { open: open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: jsxs(SheetContent, { side: "right", className: cn("tw:!p-0 tw:!z-[1200]"), overlayClassName: "tw:!z-[1200]", style: { width, maxWidth }, children: [jsx(VisuallyHidden, { children: jsx(SheetTitle, { children: title }) }), jsxs("div", { className: "tw:!flex tw:!h-full tw:!flex-col", children: [jsxs("div", { className: "tw:!flex tw:!flex-1 tw:!overflow-hidden", children: [jsxs("div", { className: "tw:!flex tw:!w-1/2 tw:!flex-col tw:!border-r", role: "region", "aria-labelledby": availableHeadingId, children: [jsxs("div", { className: "tw:!border-b tw:!p-4", children: [jsx("h2", { id: availableHeadingId, className: "tw:text-lg tw:!font-semibold tw:!mb-3", children: availableLabel }), jsx(SearchBar, { value: availableSearch, onChange: setAvailableSearch, onSearch: (term) => setAvailableSearchApplied(term), onClear: () => {
+                                                                setAvailableSearch("");
+                                                                setAvailableSearchApplied("");
+                                                            }, placeholder: `Search ${availableLabel.toLowerCase()}...`, inputAriaLabel: `Search within ${availableLabel}` }), jsx("div", { className: "tw:!flex tw:!justify-end tw:!mt-3", children: jsx(Button, { size: "sm", onClick: handleAddSelected, disabled: availableChecked.size === 0, "aria-label": availableChecked.size === 0
+                                                                    ? addButtonLabel
+                                                                    : `${addButtonLabel} (${availableChecked.size} selected)`, children: addButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!overflow-hidden", children: jsx(DataTable, { columns: columns, data: availableItemsFiltered, onSelectionChange: handleAvailableSelectionChange, selectedRowIds: Array.from(availableChecked), treeData: treeMode, loading: loading, className: "tw:!h-full", emptyState: {
+                                                            title: availableEmptyMessage || "No items available",
+                                                            description: availableSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) }), jsxs("div", { className: "tw:!p-2 tw:text-sm tw:!text-muted-foreground", "aria-live": "polite", role: "status", children: [availableChecked.size, " Selected"] })] }), jsxs("div", { className: "tw:!flex tw:!w-1/2 tw:!flex-col", role: "region", "aria-labelledby": selectedHeadingId, children: [jsxs("div", { className: "tw:!border-b tw:!p-4", children: [jsx("h2", { id: selectedHeadingId, className: "tw:text-lg tw:!font-semibold tw:!mb-3", children: selectedLabel }), jsx(SearchBar, { value: selectedSearch, onChange: setSelectedSearch, onSearch: (term) => setSelectedSearchApplied(term), onClear: () => {
+                                                                setSelectedSearch("");
+                                                                setSelectedSearchApplied("");
+                                                            }, placeholder: `Search ${selectedLabel.toLowerCase()}...`, inputAriaLabel: `Search within ${selectedLabel}` }), jsx("div", { className: "tw:!flex tw:!justify-end tw:!mt-3", children: jsx(Button, { size: "sm", onClick: handleRemoveSelected, disabled: selectedChecked.size === 0, variant: "destructive", "aria-label": selectedChecked.size === 0
+                                                                    ? removeButtonLabel
+                                                                    : `${removeButtonLabel} (${selectedChecked.size} selected)`, children: removeButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!overflow-hidden", children: jsx(DataTable, { columns: selectedColumns ?? columns, data: selectedItemsData, onSelectionChange: handleSelectedSelectionChange, selectedRowIds: Array.from(selectedChecked), treeData: false, className: "tw:!h-full", emptyState: {
+                                                            title: selectedEmptyMessage,
+                                                            description: selectedSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) }), jsxs("div", { className: "tw:!p-2 tw:text-sm tw:!text-muted-foreground", "aria-live": "polite", role: "status", children: [selectedIds.size, " Selected"] })] })] }), jsxs(SheetFooter, { className: "tw:!border-t tw:!flex tw:!flex-row tw:!justify-between tw:!items-center", children: [jsx(Button, { variant: "link", className: "tw:!text-primary tw:!px-0", onClick: handleClose, children: cancelButtonLabel }), jsx(Button, { onClick: handleDone, disabled: selectedIds.size === 0, children: doneButtonLabel })] })] })] }) }), jsx(AlertDialog, { open: showConfirmDialog, onOpenChange: setShowConfirmDialog, children: jsxs(AlertDialogContent, { className: "tw:!z-[1300]", overlayClassName: "tw:!z-[1300]", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { children: "Unsaved Changes" }), jsx(AlertDialogDescription, { children: confirmCloseMessage })] }), jsxs(AlertDialogFooter, { children: [jsx(AlertDialogCancel, { onClick: () => setShowConfirmDialog(false), children: "Go Back" }), jsx(AlertDialogAction, { onClick: handleConfirmClose, children: "Exit Without Saving" })] })] }) })] }));
+}
+
+export { SelectionPanel };

package/dist/components/sheet.d.ts

@@ -5,8 +5,9 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, overlayClassName, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
+    overlayClassName?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AAKxD,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,2CAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAYrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAC3C,2CA+BA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AAMxD,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,2CAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAYrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,2CA+BA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}

package/dist/components/sheet.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 import { cn } from '../lib/utils.js';
+import { PortalWrapper } from '../lib/portal-wrapper.js';
 
 function Sheet({ ...props }) {
     return jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
@@ -18,12 +19,12 @@ function SheetPortal({ ...props }) {
 function SheetOverlay({ className, ...props }) {
     return (jsx(DialogPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn("tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0", className), ...props }));
 }
-function SheetContent({ className, children, side = "right", ...props }) {
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, { "data-slot": "sheet-content", className: cn("tw:fixed tw:z-50 tw:flex tw:flex-col tw:gap-4 tw:bg-background tw:shadow-lg tw:transition tw:ease-in-out", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:duration-300 tw:data-[state=open]:duration-500", side === "right" &&
+function SheetContent({ className, overlayClassName, children, side = "right", ...props }) {
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, { className: overlayClassName }), jsx(DialogPrimitive.Content, { "data-slot": "sheet-content", className: cn("tw:fixed tw:z-50 tw:flex tw:flex-col tw:gap-4 tw:bg-background tw:shadow-lg tw:transition tw:ease-in-out", "tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:duration-300 tw:data-[state=open]:duration-500", side === "right" &&
                     "tw:inset-y-0 tw:right-0 tw:h-full tw:w-3/4 tw:border-l tw:data-[state=closed]:slide-out-to-right tw:data-[state=open]:slide-in-from-right tw:sm:max-w-sm", side === "left" &&
                     "tw:inset-y-0 tw:left-0 tw:h-full tw:w-3/4 tw:border-r tw:data-[state=closed]:slide-out-to-left tw:data-[state=open]:slide-in-from-left tw:sm:max-w-sm", side === "top" &&
                     "tw:inset-x-0 tw:top-0 tw:h-auto tw:border-b tw:data-[state=closed]:slide-out-to-top tw:data-[state=open]:slide-in-from-top", side === "bottom" &&
-                    "tw:inset-x-0 tw:bottom-0 tw:h-auto tw:border-t tw:data-[state=closed]:slide-out-to-bottom tw:data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, jsxs(DialogPrimitive.Close, { className: "tw:absolute tw:right-4 tw:top-4 tw:rounded-sm tw:opacity-70 tw:transition-opacity tw:ring-offset-background tw:hover:opacity-100 tw:focus:outline-hidden tw:focus:ring-2 tw:focus:ring-ring tw:focus:ring-offset-2 tw:data-[state=open]:bg-secondary tw:disabled:pointer-events-none", children: [jsx(XIcon, { "aria-hidden": true, className: "tw:size-4" }), jsx("span", { className: "tw:sr-only", children: "Close" })] })] })] }));
+                    "tw:inset-x-0 tw:bottom-0 tw:h-auto tw:border-t tw:data-[state=closed]:slide-out-to-bottom tw:data-[state=open]:slide-in-from-bottom", className), ...props, children: jsxs(PortalWrapper, { children: [children, jsxs(DialogPrimitive.Close, { className: "tw:absolute tw:right-4 tw:top-4 tw:rounded-sm tw:opacity-70 tw:transition-opacity tw:ring-offset-background tw:hover:opacity-100 tw:focus:outline-hidden tw:focus:ring-2 tw:focus:ring-ring tw:focus:ring-offset-2 tw:data-[state=open]:bg-secondary tw:disabled:pointer-events-none", children: [jsx(XIcon, { "aria-hidden": true, className: "tw:size-4" }), jsx("span", { className: "tw:sr-only", children: "Close" })] })] }) })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (jsx("div", { "data-slot": "sheet-header", className: cn("tw:flex tw:flex-col tw:gap-1.5 tw:p-4", className), ...props }));
@@ -32,7 +33,7 @@ function SheetFooter({ className, ...props }) {
     return (jsx("div", { "data-slot": "sheet-footer", className: cn("tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4", className), ...props }));
 }
 function SheetTitle({ className, ...props }) {
-    return (jsx(DialogPrimitive.Title, { "data-slot": "sheet-title", className: cn("tw:text-foreground tw:text-lg tw:font-semibold", className), ...props }));
+    return (jsx(DialogPrimitive.Title, { "data-slot": "sheet-title", className: cn("tw!:text-foreground tw!:text-lg tw!:font-semibold", className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
     return (jsx(DialogPrimitive.Description, { "data-slot": "sheet-description", className: cn("tw:text-muted-foreground tw:text-sm", className), ...props }));

package/dist/components/visually-hidden.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * VisuallyHidden component
+ *
+ * Hides content visually while keeping it accessible to screen readers.
+ * This is useful for meeting accessibility requirements (like DialogTitle in Radix)
+ * without changing the visual design.
+ *
+ * Uses CSS positioning to move content off-screen rather than display:none,
+ * which would hide it from screen readers as well.
+ *
+ * @see https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { VisuallyHidden };
+//# sourceMappingURL=visually-hidden.d.ts.map

package/dist/components/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../../src/components/visually-hidden.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,cAAc,sKAgBlB,CAAA;AAIF,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/visually-hidden.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+
+/**
+ * VisuallyHidden component
+ *
+ * Hides content visually while keeping it accessible to screen readers.
+ * This is useful for meeting accessibility requirements (like DialogTitle in Radix)
+ * without changing the visual design.
+ *
+ * Uses CSS positioning to move content off-screen rather than display:none,
+ * which would hide it from screen readers as well.
+ *
+ * @see https://www.a11yproject.com/posts/how-to-hide-content/
+ */
+const VisuallyHidden = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("span", { ref: ref, className: cn("tw:absolute tw:w-px tw:h-px tw:p-0 tw:-m-px tw:overflow-hidden tw:whitespace-nowrap tw:border-0", className), ...props, children: children }));
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };