@getgreenline/blaze-ui 1.0.3 → 1.0.4-5.02-beta

package/dist/components/selection-panel.js

@@ -0,0 +1,255 @@
+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, SheetDescription, 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 [expandedAvailableRows, setExpandedAvailableRows] = React.useState(new Set());
+    const [availableSearch, setAvailableSearch] = React.useState("");
+    const [selectedSearch, setSelectedSearch] = React.useState("");
+    const [availableSearchApplied, setAvailableSearchApplied] = React.useState("");
+    const [selectedSearchApplied, setSelectedSearchApplied] = React.useState("");
+    // Pagination state for both panels
+    const [availablePage, setAvailablePage] = React.useState(1);
+    const [availablePageSize, setAvailablePageSize] = React.useState(20);
+    const [selectedPage, setSelectedPage] = React.useState(1);
+    const [selectedPageSize, setSelectedPageSize] = React.useState(20);
+    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());
+            setExpandedAvailableRows(new Set());
+            setAvailableSearch("");
+            setSelectedSearch("");
+            setAvailableSearchApplied("");
+            setSelectedSearchApplied("");
+            setAvailablePage(1);
+            setSelectedPage(1);
+            setIsDirty(false);
+        }
+    }, [open, initialSelectedIds]);
+    const flattenTree = React.useCallback((items) => {
+        const map = {};
+        const traverse = (nodes, parentId) => {
+            nodes.forEach((node) => {
+                const entry = { ...node, parentId };
+                map[node.id] = entry;
+                if (node.children) {
+                    traverse(node.children, node.id);
+                }
+            });
+        };
+        traverse(items);
+        return map;
+    }, []);
+    const availableItemsMap = React.useMemo(() => flattenTree(availableItems), [availableItems, flattenTree]);
+    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]);
+    // Paginate available items (top-level only; children stay with parent)
+    const availableTotalPages = Math.ceil(availableItemsFiltered.length / availablePageSize);
+    const paginatedAvailableItems = React.useMemo(() => availableItemsFiltered.slice((availablePage - 1) * availablePageSize, availablePage * availablePageSize), [availableItemsFiltered, availablePage, availablePageSize]);
+    // Paginate selected items (flat list)
+    const selectedTotalPages = Math.ceil(selectedItemsData.length / selectedPageSize);
+    const paginatedSelectedItems = React.useMemo(() => selectedItemsData.slice((selectedPage - 1) * selectedPageSize, selectedPage * selectedPageSize), [selectedItemsData, selectedPage, selectedPageSize]);
+    // Reset to page 1 when filtered data changes (search, add/remove items)
+    React.useEffect(() => {
+        setAvailablePage(1);
+    }, [availableItemsFiltered.length]);
+    React.useEffect(() => {
+        setSelectedPage(1);
+    }, [selectedItemsData.length]);
+    const handleAvailableSelectionChange = React.useCallback((ids) => {
+        const transformedIds = onBeforeSelectionChange
+            ? onBeforeSelectionChange(ids)
+            : ids;
+        const newCheckedSet = new Set(transformedIds);
+        setAvailableChecked(newCheckedSet);
+        if (treeMode) {
+            // Only auto-expand ancestors of NEWLY checked IDs,
+            // don't touch expansion state for previously checked items
+            const newlyAdded = transformedIds.filter((id) => !availableChecked.has(id));
+            if (newlyAdded.length > 0) {
+                setExpandedAvailableRows((prev) => {
+                    const nextExpanded = new Set(prev);
+                    newlyAdded.forEach((id) => {
+                        const currentNode = availableItemsMap[id];
+                        if (!currentNode)
+                            return;
+                        let parentId = currentNode.parentId;
+                        while (parentId) {
+                            nextExpanded.add(parentId);
+                            parentId = availableItemsMap[parentId]?.parentId;
+                        }
+                    });
+                    return nextExpanded;
+                });
+            }
+        }
+    }, [onBeforeSelectionChange, treeMode, availableItemsMap, availableChecked]);
+    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: [jsxs(VisuallyHidden, { children: [jsx(SheetTitle, { children: title }), description && jsx(SheetDescription, { children: description })] }), 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, className: availableChecked.size === 0
+                                                                    ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                                    : undefined, "aria-label": availableChecked.size === 0
+                                                                    ? addButtonLabel
+                                                                    : `${addButtonLabel} (${availableChecked.size} selected)`, children: addButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!flex tw:!flex-col tw:!overflow-hidden", children: jsx(DataTable, { columns: columns, data: paginatedAvailableItems, onSelectionChange: handleAvailableSelectionChange, selectedRowIds: Array.from(availableChecked), treeData: treeMode, loading: loading, className: "tw:!flex-1", expandedRowIds: Array.from(expandedAvailableRows), onExpandedChange: (ids) => setExpandedAvailableRows(new Set(ids)), reservePaginationSpace: true, selectContentClassName: "tw:!z-[1300]", menuPopupClassName: "tw:!z-[1300]", pagination: {
+                                                            currentPage: availablePage,
+                                                            totalPages: availableTotalPages,
+                                                            onPageChange: setAvailablePage,
+                                                            pageSize: availablePageSize,
+                                                            totalItems: availableItemsFiltered.length,
+                                                            pageSizeOptions: [20, 40, 60, 80, 100],
+                                                            onPageSizeChange: (size) => {
+                                                                setAvailablePageSize(size);
+                                                                setAvailablePage(1);
+                                                            },
+                                                            showTotalItems: true,
+                                                        }, footerContent: jsxs("div", { className: "tw:text-sm tw:text-muted-foreground", "aria-live": "polite", role: "status", children: [availableChecked.size, " Selected"] }), emptyState: {
+                                                            title: availableEmptyMessage || "No items available",
+                                                            description: availableSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) })] }), 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", className: selectedChecked.size === 0
+                                                                    ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                                    : undefined, "aria-label": selectedChecked.size === 0
+                                                                    ? removeButtonLabel
+                                                                    : `${removeButtonLabel} (${selectedChecked.size} selected)`, children: removeButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!flex tw:!flex-col tw:!overflow-hidden", children: jsx(DataTable, { columns: selectedColumns ?? columns, data: paginatedSelectedItems, onSelectionChange: handleSelectedSelectionChange, selectedRowIds: Array.from(selectedChecked), treeData: false, className: "tw:!flex-1", reservePaginationSpace: true, selectContentClassName: "tw:!z-[1300]", menuPopupClassName: "tw:!z-[1300]", pagination: {
+                                                            currentPage: selectedPage,
+                                                            totalPages: selectedTotalPages,
+                                                            onPageChange: setSelectedPage,
+                                                            pageSize: selectedPageSize,
+                                                            totalItems: selectedItemsData.length,
+                                                            pageSizeOptions: [20, 40, 60, 80, 100],
+                                                            onPageSizeChange: (size) => {
+                                                                setSelectedPageSize(size);
+                                                                setSelectedPage(1);
+                                                            },
+                                                            showTotalItems: true,
+                                                        }, footerContent: jsxs("div", { className: "tw:text-sm tw:text-muted-foreground", "aria-live": "polite", role: "status", children: [selectedIds.size, " Selected"] }), emptyState: {
+                                                            title: selectedEmptyMessage,
+                                                            description: selectedSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) })] })] }), 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, className: selectedIds.size === 0
+                                                ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                : undefined, 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/separator.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAgBtD;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/separator.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../lib/utils.js';
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("tw:bg-border tw:shrink-0", orientation === "horizontal"
+            ? "tw:h-px tw:w-full"
+            : "tw:h-full tw:w-px", className), ...props }));
+}
+
+export { Separator };

package/dist/components/sheet.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+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, 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;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,42 @@
+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 });
+}
+function SheetTrigger({ ...props }) {
+    return jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+    return jsx(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...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, 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: 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 }));
+}
+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 }));
+}
+function SheetDescription({ className, ...props }) {
+    return (jsx(DialogPrimitive.Description, { "data-slot": "sheet-description", className: cn("tw:text-muted-foreground tw:text-sm", className), ...props }));
+}
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/components/sidebar.d.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
+import { Separator } from "../components/separator";
+import { TooltipContent } from "../components/tooltip";
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/components/sidebar.tsx"],"names":[],"mappings":"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"}