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

package/dist/components/data-table.js

@@ -0,0 +1,390 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { SettingsIcon, CheckIcon, InboxIcon, Loader2Icon, ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, MoreHorizontalIcon } from 'lucide-react';
+export { CheckIcon, XIcon } from 'lucide-react';
+import { Menu } from '@base-ui/react/menu';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.js';
+import { cn } from '../lib/utils.js';
+import { Checkbox } from './checkbox.js';
+import { Button } from './button.js';
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext, PaginationLink, PaginationEllipsis } from './pagination.js';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+function renderCellValue(value) {
+    if (value == null || React.isValidElement(value))
+        return value;
+    if (typeof value !== "object")
+        return value;
+    if (Array.isArray(value))
+        return value.length;
+    return String(value);
+}
+function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowIds, onSort, sortState, expandable = false, renderExpandedRow, actions, className, pagination, treeData = false, reorderable = false, onReorder, onDragReorder, customFilterColumnsWhiteList, loading = false, loadingRows = 5, emptyState, clickableFields, showColumnVisibility = true, footerContent, expandedRowIds, onExpandedChange, reservePaginationSpace = false, striped = true, selectContentClassName, menuPopupClassName, }) {
+    const [internalSelectedRows, setInternalSelectedRows] = React.useState(new Set());
+    const [internalExpandedRows, setInternalExpandedRows] = React.useState(new Set());
+    const [internalSortConfig, setInternalSortConfig] = React.useState({ key: "", direction: null });
+    const [hiddenColumns, setHiddenColumns] = React.useState([]);
+    const [draggedRowId, setDraggedRowId] = React.useState(null);
+    const [dragOverRowId, setDragOverRowId] = React.useState(null);
+    const scrollContainerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (pagination?.currentPage && scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTo({ top: 0, behavior: "smooth" });
+        }
+    }, [pagination?.currentPage]);
+    const selectedRows = React.useMemo(() => {
+        if (selectedRowIds !== undefined) {
+            return new Set(selectedRowIds);
+        }
+        return internalSelectedRows;
+    }, [selectedRowIds, internalSelectedRows]);
+    const expandedRows = React.useMemo(() => {
+        if (expandedRowIds !== undefined) {
+            return new Set(expandedRowIds);
+        }
+        return internalExpandedRows;
+    }, [expandedRowIds, internalExpandedRows]);
+    const sortConfig = React.useMemo(() => {
+        if (sortState !== undefined) {
+            return sortState;
+        }
+        return internalSortConfig;
+    }, [sortState, internalSortConfig]);
+    const setSelectedRows = React.useCallback((newSelected) => {
+        if (selectedRowIds === undefined) {
+            setInternalSelectedRows(newSelected);
+        }
+    }, [selectedRowIds]);
+    const setExpandedRows = React.useCallback((newExpanded) => {
+        if (expandedRowIds === undefined) {
+            setInternalExpandedRows(newExpanded);
+        }
+    }, [expandedRowIds]);
+    const hasRowSelection = !!onSelectionChange;
+    const hasActions = actions && actions.length > 0;
+    const showActionsColumn = hasActions || showColumnVisibility;
+    const toggleRowSelection = (rowId) => {
+        const newSelected = new Set(selectedRows);
+        if (newSelected.has(rowId)) {
+            newSelected.delete(rowId);
+        }
+        else {
+            newSelected.add(rowId);
+        }
+        setSelectedRows(newSelected);
+        const selectedIdsArray = Array.from(newSelected);
+        onSelectionChange?.(selectedIdsArray);
+    };
+    const toggleAllRows = () => {
+        const currentPageIds = data.map((row) => row.id);
+        const allCurrentPageSelected = currentPageIds.every((id) => selectedRows.has(id));
+        let newSelected;
+        if (allCurrentPageSelected) {
+            newSelected = new Set(selectedRows);
+            currentPageIds.forEach((id) => newSelected.delete(id));
+        }
+        else {
+            newSelected = new Set(selectedRows);
+            currentPageIds.forEach((id) => newSelected.add(id));
+        }
+        setSelectedRows(newSelected);
+        const selectedIdsArray = Array.from(newSelected);
+        onSelectionChange?.(selectedIdsArray);
+    };
+    const toggleRowExpansion = (rowId) => {
+        const newExpanded = new Set(expandedRows);
+        if (newExpanded.has(rowId)) {
+            newExpanded.delete(rowId);
+        }
+        else {
+            newExpanded.add(rowId);
+        }
+        setExpandedRows(newExpanded);
+        onExpandedChange?.(Array.from(newExpanded));
+    };
+    const handleSort = (key) => {
+        let direction = "asc";
+        if (sortConfig.key === key) {
+            if (sortConfig.direction === "asc") {
+                direction = "desc";
+            }
+            else if (sortConfig.direction === "desc") {
+                direction = null;
+            }
+        }
+        if (sortState === undefined) {
+            setInternalSortConfig({ key, direction });
+        }
+        onSort?.(key, direction);
+    };
+    const processedData = React.useMemo(() => {
+        const result = [...data];
+        if (!onSort && sortConfig.key && sortConfig.direction) {
+            result.sort((a, b) => {
+                const aValue = a[sortConfig.key];
+                const bValue = b[sortConfig.key];
+                if (aValue === bValue)
+                    return 0;
+                const comparison = typeof aValue === "number" && typeof bValue === "number"
+                    ? aValue - bValue
+                    : String(aValue ?? "").localeCompare(String(bValue ?? ""), undefined, {
+                        numeric: true,
+                    });
+                return sortConfig.direction === "asc" ? comparison : -comparison;
+            });
+        }
+        return result;
+    }, [data, sortConfig, onSort]);
+    const getSortIcon = (columnKey) => {
+        if (sortConfig.key !== columnKey) {
+            return (jsx(ArrowUpDownIcon, { className: "tw:ml-2 tw:size-4 tw:text-muted-foreground" }));
+        }
+        if (sortConfig.direction === "asc") {
+            return jsx(ArrowUpIcon, { className: "tw:ml-2 tw:size-4 tw:text-foreground" });
+        }
+        if (sortConfig.direction === "desc") {
+            return jsx(ArrowDownIcon, { className: "tw:ml-2 tw:size-4 tw:text-foreground" });
+        }
+        return (jsx(ArrowUpDownIcon, { className: "tw:ml-2 tw:size-4 tw:text-muted-foreground" }));
+    };
+    const hasChildren = (row) => treeData && row.children && row.children.length > 0;
+    const isExpandable = expandable || treeData;
+    const visibleColumns = columns.filter((col) => !hiddenColumns.includes(col.key));
+    const toggleColumnVisibility = (columnKey) => {
+        const newHidden = hiddenColumns.includes(columnKey)
+            ? hiddenColumns.filter((key) => key !== columnKey)
+            : [...hiddenColumns, columnKey];
+        setHiddenColumns(newHidden);
+    };
+    const filterableColumns = customFilterColumnsWhiteList
+        ? columns.filter((col) => customFilterColumnsWhiteList.includes(col.key))
+        : columns;
+    const getRowBackgroundClass = (row, rowIndex, depth) => {
+        if (selectedRows.has(row.id))
+            return "tw:bg-accent";
+        if (depth > 0)
+            return striped ? "tw:bg-muted" : "tw:bg-card";
+        if (striped && rowIndex % 2 === 1)
+            return "tw:bg-muted";
+        return "tw:bg-card";
+    };
+    const getClickableField = (fieldKey) => {
+        return clickableFields?.find((cf) => cf.field === fieldKey);
+    };
+    const getVisibleActions = (row) => {
+        if (!actions)
+            return [];
+        return actions.filter((action) => !action.condition || action.condition(row));
+    };
+    const renderRow = (row, rowIndex, depth = 0, parentRow, siblingCount) => {
+        const canExpand = hasChildren(row) || (expandable && renderExpandedRow);
+        const isExpanded = expandedRows.has(row.id);
+        const indentPadding = depth * 24;
+        const rowBgClass = getRowBackgroundClass(row, rowIndex, depth);
+        const visibleActionsForRow = getVisibleActions(row);
+        const isDragging = draggedRowId === row.id;
+        const isDragOver = dragOverRowId === row.id;
+        const totalSiblings = siblingCount ?? data.length;
+        const isRowClickable = !!onRowClick;
+        const handleRowClick = (event) => {
+            const target = event.target;
+            if (target?.closest('button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"]')) {
+                return;
+            }
+            onRowClick?.(row);
+        };
+        const handleRowKeyDown = (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            onRowClick?.(row);
+        };
+        const handleDragStart = (e) => {
+            setDraggedRowId(row.id);
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", row.id);
+        };
+        const handleDragEnd = () => {
+            setDraggedRowId(null);
+            setDragOverRowId(null);
+        };
+        const handleDragOver = (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+            if (draggedRowId !== row.id) {
+                setDragOverRowId(row.id);
+            }
+        };
+        const handleDragLeave = () => {
+            setDragOverRowId(null);
+        };
+        const handleDrop = (e) => {
+            e.preventDefault();
+            const draggedId = e.dataTransfer.getData("text/plain");
+            if (draggedId && draggedId !== row.id) {
+                onDragReorder?.(draggedId, row.id, parentRow?.id);
+            }
+            setDraggedRowId(null);
+            setDragOverRowId(null);
+        };
+        return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors hover:tw:bg-accent/50", isRowClickable &&
+                        "tw:cursor-pointer tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-inset", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), tabIndex: isRowClickable ? 0 : undefined, onClick: isRowClickable ? handleRowClick : undefined, onKeyDown: isRowClickable ? handleRowKeyDown : undefined, draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-1", "aria-label": isExpanded ? "Collapse row" : "Expand row", "aria-expanded": isExpanded, children: isExpanded ? (jsx(ChevronDownIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) : (jsx(ChevronRightIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: selectedRows.has(row.id), onCheckedChange: () => toggleRowSelection(row.id), "aria-label": `Select row ${rowIndex + 1}`, className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:gap-0.5", children: [jsx("button", { onClick: () => onReorder?.(row.id, "up", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === 0, "aria-label": "Move row up", children: jsx(ChevronUpIcon, { className: cn("tw:size-4", rowIndex === 0 && "tw:opacity-30") }) }), jsx("button", { onClick: () => onReorder?.(row.id, "down", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center hover:tw:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors", disabled: rowIndex === totalSiblings - 1, "aria-label": "Move row down", children: jsx(ChevronDownIcon, { className: cn("tw:size-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
+                            const clickableField = getClickableField(column.key);
+                            const cellContent = column.render
+                                ? column.render(row[column.key], row, rowIndex, depth)
+                                : renderCellValue(row[column.key]);
+                            return (jsx("td", { className: cn("tw:p-4 tw:align-middle tw:max-w-0 tw:overflow-hidden", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right", column.className, rowBgClass), children: jsx("div", { className: cn("tw:truncate", clickableField && "tw:!text-primary"), style: {
+                                        paddingLeft: colIndex === 0
+                                            ? isExpandable
+                                                ? depth > 0
+                                                    ? 16
+                                                    : 0
+                                                : indentPadding
+                                            : 0,
+                                    }, children: clickableField ? (jsx("button", { type: "button", onClick: (event) => {
+                                            event.stopPropagation();
+                                            clickableField.onClick(row);
+                                        }, className: "tw:inline tw:cursor-pointer tw:appearance-none tw:border-0 tw:bg-transparent tw:p-0 tw:text-inherit tw:font-[inherit] tw:transition-colors hover:tw:!text-primary/80 hover:tw:underline", children: cellContent })) : (cellContent) }) }, column.key));
+                        }), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), onClick: (event) => event.stopPropagation(), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground 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 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
+                                                        "tw:text-destructive focus:tw:text-destructive"), children: [action.icon && (jsx("span", { className: "tw:mr-2", children: action.icon })), action.label] }, index))) }) }) })] })) }))] }), expandable && !treeData && isExpanded && renderExpandedRow && (jsx("tr", { className: "tw:border-b tw:bg-muted/30", children: jsx("td", { colSpan: visibleColumns.length +
+                            (showActionsColumn ? 1 : 0) +
+                            (hasRowSelection ? 1 : 0) +
+                            (isExpandable ? 1 : 0) +
+                            (reorderable ? 1 : 0), className: "tw:p-4", children: renderExpandedRow(row) }) })), treeData &&
+                    isExpanded &&
+                    row.children &&
+                    row.children.map((child, childIndex) => renderRow(child, childIndex, depth + 1, row, row.children?.length))] }, row.id));
+    };
+    const renderPaginationItems = () => {
+        if (!pagination)
+            return null;
+        const { currentPage, totalPages, onPageChange } = pagination;
+        const items = [];
+        const maxVisiblePages = 5;
+        let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+        const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+        if (endPage - startPage + 1 < maxVisiblePages) {
+            startPage = Math.max(1, endPage - maxVisiblePages + 1);
+        }
+        if (startPage > 1) {
+            items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", onClick: (e) => {
+                        e.preventDefault();
+                        if (!loading)
+                            onPageChange(1);
+                    }, "aria-label": "Go to page 1", "aria-disabled": loading, className: cn(loading && "tw:pointer-events-none tw:opacity-50"), children: "1" }) }, 1));
+            if (startPage > 2) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationEllipsis, {}) }, "ellipsis-start"));
+            }
+        }
+        for (let i = startPage; i <= endPage; i++) {
+            items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", isActive: i === currentPage, onClick: (e) => {
+                        e.preventDefault();
+                        if (!loading)
+                            onPageChange(i);
+                    }, "aria-label": i === currentPage ? `Page ${i}, current page` : `Go to page ${i}`, "aria-current": i === currentPage ? "page" : undefined, "aria-disabled": loading, className: cn(loading && "tw:pointer-events-none tw:opacity-50"), children: i }) }, i));
+        }
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                items.push(jsx(PaginationItem, { children: jsx(PaginationEllipsis, {}) }, "ellipsis-end"));
+            }
+            items.push(jsx(PaginationItem, { children: jsx(PaginationLink, { href: "#", onClick: (e) => {
+                        e.preventDefault();
+                        if (!loading)
+                            onPageChange(totalPages);
+                    }, "aria-label": `Go to page ${totalPages}`, "aria-disabled": loading, className: cn(loading && "tw:pointer-events-none tw:opacity-50"), children: totalPages }) }, totalPages));
+        }
+        return items;
+    };
+    const calculateMinTableWidth = () => {
+        let totalWidth = 0;
+        // Add fixed column widths (48px each for expand, selection, reorder, actions)
+        if (isExpandable)
+            totalWidth += 48;
+        if (hasRowSelection)
+            totalWidth += 48;
+        if (reorderable)
+            totalWidth += 48;
+        if (showActionsColumn)
+            totalWidth += 48;
+        // Add specified column widths
+        visibleColumns.forEach((col) => {
+            if (col.width) {
+                // Parse width value (e.g., "80px" -> 80, "10%" -> skip)
+                const widthMatch = col.width.match(/^(\d+)px$/);
+                if (widthMatch && widthMatch[1]) {
+                    totalWidth += parseInt(widthMatch[1], 10);
+                }
+                else {
+                    // If width is not in px (e.g., percentage), use default
+                    totalWidth += 150;
+                }
+            }
+            else {
+                // No width specified, use default minimum
+                totalWidth += 150;
+            }
+        });
+        return `${totalWidth}px`;
+    };
+    return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0 tw:overflow-hidden tw:rounded-md tw:border", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto tw:bg-card [&::-webkit-scrollbar]:tw:h-2 [&::-webkit-scrollbar]:tw:w-2 [&::-webkit-scrollbar-track]:tw:bg-muted [&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/30 [&::-webkit-scrollbar-thumb]:tw:rounded-full hover:[&::-webkit-scrollbar-thumb]:tw:bg-muted-foreground/50", children: jsxs("table", { className: "tw:w-full tw:table-fixed tw:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, style: { minWidth: calculateMinTableWidth() }, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-card", children: jsxs("tr", { children: [isExpandable && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" })), hasRowSelection && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: data.length > 0 &&
+                                                            data.every((row) => selectedRows.has(row.id)), onCheckedChange: toggleAllRows, "aria-label": "Select all rows", className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" })), visibleColumns.map((column) => (jsx("th", { scope: "col", "aria-sort": column.sortable && sortConfig.key === column.key
+                                                    ? sortConfig.direction === "asc"
+                                                        ? "ascending"
+                                                        : sortConfig.direction === "desc"
+                                                            ? "descending"
+                                                            : "none"
+                                                    : undefined, className: cn("tw:!h-[40px] tw:px-4 tw:text-left tw:align-middle tw:font-medium tw:text-foreground tw:whitespace-nowrap", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right"), style: { width: column.width }, children: column.sortable ? (jsxs("button", { onClick: () => !loading && handleSort(column.key), disabled: loading, "aria-label": `Sort by ${column.label}${sortConfig.key === column.key
+                                                        ? sortConfig.direction === "asc"
+                                                            ? ", currently sorted ascending"
+                                                            : sortConfig.direction === "desc"
+                                                                ? ", currently sorted descending"
+                                                                : ""
+                                                        : ""}`, className: cn("tw:flex tw:items-center hover:tw:text-foreground/80 tw:transition-colors", loading && "tw:opacity-50 tw:cursor-not-allowed"), children: [column.label, getSortIcon(column.key)] })) : (column.label) }, column.key))), showActionsColumn && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-20 tw:px-2 tw:sticky tw:right-0 tw:bg-card", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:pr-1", children: showColumnVisibility && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: "base-ui-toggle-columns-trigger", render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Toggle column visibility", ...props, id: "base-ui-toggle-columns-trigger", children: jsx(SettingsIcon, { className: "tw:size-5 tw:text-muted-foreground" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": `base-ui-toggle-columns-trigger`, className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground 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 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md", menuPopupClassName), children: jsxs(Menu.Group, { children: [jsx(Menu.GroupLabel, { className: "tw:px-2 tw:py-1.5 tw:text-[14px] tw:font-medium", children: "Toggle Columns" }), jsx("div", { className: "tw:bg-border tw:-mx-1 tw:my-1 tw:h-px" }), filterableColumns.map((column) => {
+                                                                                    const isVisible = !hiddenColumns.includes(column.key);
+                                                                                    return (jsxs(Menu.Item, { onClick: () => toggleColumnVisibility(column.key), closeOnClick: false, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50"), children: [jsx("span", { className: "tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center", children: isVisible && (jsx(CheckIcon, { className: "tw:size-4" })) }), column.label] }, column.key));
+                                                                                })] }) }) }) })] })) }) }))] }) }), jsx("tbody", { className: "tw:relative", children: data.length === 0 && !loading ? (jsx("tr", { children: jsx("td", { colSpan: visibleColumns.length +
+                                                (showActionsColumn ? 1 : 0) +
+                                                (hasRowSelection ? 1 : 0) +
+                                                (isExpandable ? 1 : 0) +
+                                                (reorderable ? 1 : 0), className: "tw:h-48", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:text-center", children: [emptyState?.icon || (jsx("div", { className: "tw:h-12 tw:w-12 tw:rounded-full tw:bg-muted tw:flex tw:items-center tw:justify-center tw:mb-3", children: jsx(InboxIcon, { className: "tw:size-6 tw:text-muted-foreground" }) })), jsx("p", { className: "tw:text-base tw:font-medium tw:text-foreground", children: emptyState?.title || "No results found" }), jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-1", children: emptyState?.description ||
+                                                            "There are no items to display." })] }) }) })) : (processedData.map((row, rowIndex) => renderRow(row, rowIndex, 0))) })] }) }), loading && (jsx("div", { className: "tw:absolute tw:inset-0 tw:z-20 tw:flex tw:items-center tw:justify-center tw:bg-card/50 tw:backdrop-blur-[1px]", children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center", children: [jsx(Loader2Icon, { className: "tw:size-8 tw:animate-spin tw:text-primary" }), data.length === 0 && (jsx("p", { className: "tw:text-sm tw:text-muted-foreground tw:mt-3", children: "Loading..." }))] }) }))] }), footerContent && (jsx("div", { className: "tw:border-t tw:px-4 tw:py-3 tw:bg-card", children: footerContent })), pagination &&
+                (pagination.totalPages > 1 ||
+                    pagination.mode === "cursor" ||
+                    pagination.showTotalItems ||
+                    (pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS).length >
+                        0) && (jsxs("div", { className: "tw:relative tw:flex tw:items-center tw:justify-between tw:border-t tw:px-4 tw:py-4 tw:bg-card", children: [(() => {
+                        const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+                        if (options.length === 0)
+                            return jsx("div", {});
+                        return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(pagination.pageSize ?? options[0]), onValueChange: (val) => !loading && pagination.onPageSizeChange?.(Number(val)), disabled: loading, children: [jsx(SelectTrigger, { id: "base-ui-pagination-trigger", className: "tw:flex tw:h-[32px] tw:w-[70px] tw:items-center tw:justify-between tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:px-3 tw:py-2 tw:text-[14px] tw:shadow-sm tw:ring-offset-background placeholder:tw:text-muted-foreground focus:tw:outline-none focus:tw:ring-1 focus:tw:ring-ring disabled:tw:cursor-not-allowed disabled:tw:opacity-50", children: jsx(SelectValue, {}) }), jsx(SelectContent, { side: "top", align: "end", className: selectContentClassName, children: options.map((size) => (jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }));
+                    })(), pagination.showTotalItems &&
+                        pagination.totalItems !== undefined && (jsx("div", { className: "tw:absolute tw:left-1/2 tw:-translate-x-1/2 tw:flex tw:justify-center tw:items-center", children: jsxs("span", { className: "tw:text-[14px] tw:text-muted-foreground", children: ["Total: ", pagination.totalItems] }) })), jsx("div", { className: "tw:z-10", children: jsx(Pagination, { className: "tw:!mx-0 tw:!w-auto", "aria-label": "Table pagination", children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { href: "#", onClick: (e) => {
+                                                e.preventDefault();
+                                                if (!loading &&
+                                                    !pagination.disablePrevious &&
+                                                    pagination.currentPage > 1) {
+                                                    pagination.onPageChange(pagination.currentPage - 1);
+                                                }
+                                            }, "aria-label": "Go to previous page", "aria-disabled": loading ||
+                                                pagination.disablePrevious ||
+                                                pagination.currentPage <= 1, className: cn((loading ||
+                                                pagination.disablePrevious ||
+                                                pagination.currentPage <= 1) &&
+                                                "tw:pointer-events-none tw:opacity-50") }) }), pagination.mode !== "cursor" && renderPaginationItems(), jsx(PaginationItem, { children: jsx(PaginationNext, { href: "#", onClick: (e) => {
+                                                e.preventDefault();
+                                                if (!loading &&
+                                                    !pagination.disableNext &&
+                                                    pagination.currentPage < pagination.totalPages) {
+                                                    pagination.onPageChange(pagination.currentPage + 1);
+                                                }
+                                            }, "aria-label": "Go to next page", "aria-disabled": loading ||
+                                                pagination.disableNext ||
+                                                pagination.currentPage >= pagination.totalPages, className: cn((loading ||
+                                                pagination.disableNext ||
+                                                pagination.currentPage >= pagination.totalPages) &&
+                                                "tw:pointer-events-none tw:opacity-50") }) })] }) }) })] }))] }));
+}
+
+export { DataTable };

package/dist/components/dialog.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CAyBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/components/dialog.js

@@ -0,0 +1,37 @@
+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';
+
+function Dialog({ ...props }) {
+    return jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("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 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("tw:bg-background 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 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-[50%] tw:left-[50%] tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:translate-x-[-50%] tw:translate-y-[-50%] tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: [children, showCloseButton && (jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:top-4 tw:right-4 tw:rounded-xs tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:ring-2 tw:focus:ring-offset-2 tw:focus:outline-hidden tw:disabled:pointer-events-none tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", children: [jsx(XIcon, {}), jsx("span", { className: "tw:sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "dialog-header", className: cn("tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left", className), ...props }));
+}
+function DialogFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "dialog-footer", className: cn("tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end", className), ...props }));
+}
+function DialogTitle({ className, ...props }) {
+    return (jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("tw:text-lg tw:leading-none tw:font-semibold", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("tw:text-muted-foreground tw:text-sm", className), ...props }));
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/drawer.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAIhD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAqBtD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/drawer.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Drawer as Drawer$1 } from 'vaul';
+import { cn } from '../lib/utils.js';
+
+function Drawer({ ...props }) {
+    return jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (jsx(Drawer$1.Overlay, { "data-slot": "drawer-overlay", className: cn("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 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
+}
+function DrawerContent({ className, children, ...props }) {
+    return (jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [jsx(DrawerOverlay, {}), jsxs(Drawer$1.Content, { "data-slot": "drawer-content", className: cn("tw:group/drawer-content tw:bg-background tw:fixed tw:z-50 tw:flex tw:h-auto tw:flex-col", "tw:data-[vaul-drawer-direction=top]:inset-x-0 tw:data-[vaul-drawer-direction=top]:top-0 tw:data-[vaul-drawer-direction=top]:mb-24 tw:data-[vaul-drawer-direction=top]:max-h-[80vh] tw:data-[vaul-drawer-direction=top]:rounded-b-lg tw:data-[vaul-drawer-direction=top]:border-b", "tw:data-[vaul-drawer-direction=bottom]:inset-x-0 tw:data-[vaul-drawer-direction=bottom]:bottom-0 tw:data-[vaul-drawer-direction=bottom]:mt-24 tw:data-[vaul-drawer-direction=bottom]:max-h-[80vh] tw:data-[vaul-drawer-direction=bottom]:rounded-t-lg tw:data-[vaul-drawer-direction=bottom]:border-t", "tw:data-[vaul-drawer-direction=right]:inset-y-0 tw:data-[vaul-drawer-direction=right]:right-0 tw:data-[vaul-drawer-direction=right]:w-3/4 tw:data-[vaul-drawer-direction=right]:border-l tw:data-[vaul-drawer-direction=right]:sm:max-w-sm", "tw:data-[vaul-drawer-direction=left]:inset-y-0 tw:data-[vaul-drawer-direction=left]:left-0 tw:data-[vaul-drawer-direction=left]:w-3/4 tw:data-[vaul-drawer-direction=left]:border-r tw:data-[vaul-drawer-direction=left]:sm:max-w-sm", className), ...props, children: [jsx("div", { className: "tw:bg-muted tw:mx-auto tw:mt-4 tw:hidden tw:h-2 tw:w-[100px] tw:shrink-0 tw:rounded-full tw:group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "drawer-header", className: cn("tw:flex tw:flex-col tw:gap-0.5 tw:p-4 tw:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center tw:group-data-[vaul-drawer-direction=top]/drawer-content:text-center tw:md:gap-1.5 tw:md:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "drawer-footer", className: cn("tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (jsx(Drawer$1.Title, { "data-slot": "drawer-title", className: cn("tw:text-foreground tw:font-semibold", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (jsx(Drawer$1.Description, { "data-slot": "drawer-description", className: cn("tw:text-muted-foreground tw:text-sm", className), ...props }));
+}
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu.d.ts.map

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