@getgreenline/blaze-ui 1.0.18 → 1.0.19

package/dist/components/checkbox.js

@@ -4,7 +4,7 @@ import { CheckIcon } from 'lucide-react';
 import { cn } from '../lib/utils.js';
 
 function Checkbox({ className, ...props }) {
-    return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("tw:peer tw:border-input tw:dark:bg-input/30 tw:data-[state=checked]:bg-primary tw:data-[state=checked]:text-primary-foreground tw:dark:data-[state=checked]:bg-primary tw:data-[state=checked]:border-primary tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:size-4 tw:shrink-0 tw:rounded-[4px] tw:border tw:shadow-xs tw:transition-shadow tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "tw:flex tw:items-center tw:justify-center tw:text-current tw:transition-none", children: jsx(CheckIcon, { className: "tw:size-3.5" }) }) }));
+    return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("tw:peer tw:border-border tw:dark:bg-input/30 tw:data-[state=checked]:bg-primary tw:data-[state=checked]:text-primary-foreground tw:dark:data-[state=checked]:bg-primary tw:data-[state=checked]:border-primary tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:size-4 tw:shrink-0 tw:rounded-[4px] tw:border tw:shadow-xs tw:transition-shadow tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:align-middle", className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "tw:flex tw:items-center tw:justify-center tw:text-current tw:transition-none", children: jsx(CheckIcon, { className: "tw:size-3.5" }) }) }));
 }
 
 export { Checkbox };

package/dist/components/data-table.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Check, X } from "lucide-react";
+export type SortDirection = "asc" | "desc" | null;
+export interface DataTableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "left" | "center" | "right";
+    width?: string;
+    render?: (value: any, row: T, index: number) => React.ReactNode;
+}
+export interface DataTableRow {
+    id: string;
+    children?: DataTableRow[];
+    [key: string]: any;
+}
+export interface IClickableField<T = any> {
+    field: string;
+    onClick: (row: T) => void;
+}
+export interface DataTableAction<T> {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (row: T) => void;
+    variant?: "default" | "destructive";
+    condition?: (row: T) => boolean;
+}
+export type PaginationMode = "offset" | "cursor";
+export interface DataTablePaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize?: number;
+    totalItems?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    mode?: PaginationMode;
+    serverSide?: boolean;
+    showTotalItems?: boolean;
+    disableNext?: boolean;
+    disablePrevious?: boolean;
+}
+export interface DataTableProps<T extends DataTableRow> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    onSelectionChange?: (selectedIds: string[]) => void;
+    selectedRowIds?: string[];
+    onSort?: (key: string, direction: SortDirection) => void;
+    sortState?: {
+        key: string;
+        direction: SortDirection;
+    };
+    expandable?: boolean;
+    renderExpandedRow?: (row: T) => React.ReactNode;
+    actions?: DataTableAction<T>[];
+    className?: string;
+    pagination?: DataTablePaginationProps;
+    treeData?: boolean;
+    reorderable?: boolean;
+    onReorder?: (rowId: string, direction: "up" | "down", parentId?: string) => void;
+    onDragReorder?: (draggedId: string, targetId: string, parentId?: string) => void;
+    hiddenColumns?: string[];
+    onColumnVisibilityChange?: (hiddenColumns: string[]) => void;
+    loading?: boolean;
+    loadingRows?: number;
+    emptyState?: {
+        title?: string;
+        description?: string;
+        icon?: React.ReactNode;
+    };
+    clickableFields?: IClickableField<T>[];
+    showColumnVisibility?: boolean;
+    expandedRowIds?: string[];
+    onExpandedChange?: (expandedIds: string[]) => void;
+}
+export declare function DataTable<T extends DataTableRow>({ columns, data, onSelectionChange, selectedRowIds, onSort, sortState, expandable, renderExpandedRow, actions, className, pagination, treeData, reorderable, onReorder, onDragReorder, hiddenColumns, onColumnVisibilityChange, loading, loadingRows, emptyState, clickableFields, showColumnVisibility, expandedRowIds, onExpandedChange, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { Check, X };
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

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

package/dist/components/data-table.js

@@ -0,0 +1,254 @@
+import { jsxs, jsx } from 'react/jsx-runtime.js';
+import * as React from 'react';
+import { Settings, Inbox, ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, MoreHorizontal } from 'lucide-react';
+export { Check, X } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { Checkbox } from './checkbox.js';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from './dropdown-menu.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.js';
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext, PaginationLink, PaginationEllipsis } from './pagination.js';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+function DataTable({ columns, data, onSelectionChange, selectedRowIds, onSort, sortState, expandable = false, renderExpandedRow, actions, className, pagination, treeData = false, reorderable = false, onReorder, onDragReorder, hiddenColumns = [], onColumnVisibilityChange, loading = false, loadingRows = 5, emptyState, clickableFields, showColumnVisibility = true, expandedRowIds, onExpandedChange, }) {
+    const [internalSelectedRows, setInternalSelectedRows] = React.useState(new Set());
+    const [internalExpandedRows, setInternalExpandedRows] = React.useState(new Set());
+    const [internalSortConfig, setInternalSortConfig] = React.useState({ key: "", direction: null });
+    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 && onColumnVisibilityChange);
+    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 getSortIcon = (columnKey) => {
+        if (sortConfig.key !== columnKey) {
+            return jsx(ArrowUpDown, { className: "tw:ml-2 tw:h-4 tw:w-4 tw:opacity-50" });
+        }
+        if (sortConfig.direction === "asc") {
+            return jsx(ArrowUpDown, { className: "tw:ml-2 tw:h-4 tw:w-4 tw:rotate-180" });
+        }
+        if (sortConfig.direction === "desc") {
+            return jsx(ArrowUpDown, { className: "tw:ml-2 tw:h-4 tw:w-4" });
+        }
+        return jsx(ArrowUpDown, { className: "tw:ml-2 tw:h-4 tw:w-4 tw:opacity-50" });
+    };
+    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) => {
+        if (!onColumnVisibilityChange)
+            return;
+        const newHidden = hiddenColumns.includes(columnKey)
+            ? hiddenColumns.filter((k) => k !== columnKey)
+            : [...hiddenColumns, columnKey];
+        onColumnVisibilityChange(newHidden);
+    };
+    const getRowBackgroundClass = (row, rowIndex, depth) => {
+        if (selectedRows.has(row.id))
+            return "tw:bg-accent";
+        if (depth > 0)
+            return "tw:bg-muted";
+        if (rowIndex % 2 === 1)
+            return "tw:bg-muted";
+        return "tw:bg-background";
+    };
+    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 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", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), 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), 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(ChevronDown, { className: "tw:h-4 tw:w-4" })) : (jsx(ChevronRight, { className: "tw:h-4 tw:w-4" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), 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}` }) }) })), reorderable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), 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(ChevronUp, { className: cn("tw:h-4 tw:w-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(ChevronDown, { className: cn("tw:h-4 tw:w-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) : row[column.key];
+                            return (jsx("td", { className: cn("tw:p-4 tw:align-middle tw:whitespace-nowrap", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right", rowBgClass), children: jsx("div", { style: { paddingLeft: colIndex === 0 ? (isExpandable ? (depth > 0 ? 16 : 0) : indentPadding) : 0 }, children: clickableField ? (jsx("button", { onClick: () => clickableField.onClick(row), className: "tw:text-sky-500 hover:tw:text-sky-600 hover:tw:underline tw:cursor-pointer tw:transition-colors", children: cellContent })) : (cellContent) }) }, column.key));
+                        }), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), children: visibleActionsForRow.length > 0 && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", children: jsx(MoreHorizontal, { className: "tw:h-4 tw:w-4" }) }) }), jsx(DropdownMenuContent, { align: "end", children: visibleActionsForRow.map((action, index) => (jsxs(DropdownMenuItem, { onClick: () => action.onClick(row), className: cn(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;
+    };
+    return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto [&::-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:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-background", children: jsxs("tr", { children: [isExpandable && jsx("th", { className: "tw:h-10 tw:w-12 tw:px-2" }), hasRowSelection && (jsx("th", { 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" }) }) })), reorderable && jsx("th", { className: "tw:h-10 tw:w-12 tw:px-2" }), visibleColumns.map((column) => (jsx("th", { className: cn("tw:h-10 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 && onSort ? (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", { className: "tw:h-10 tw:w-20 tw:px-2 tw:sticky tw:right-0 tw:bg-background", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:pr-1", children: showColumnVisibility && onColumnVisibilityChange && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Toggle column visibility", children: jsx(Settings, { className: "tw:h-4 tw:w-4 tw:text-muted-foreground" }) }) }), jsxs(DropdownMenuContent, { align: "end", children: [jsx(DropdownMenuLabel, { children: "Toggle Columns" }), jsx(DropdownMenuSeparator, {}), columns.map((column) => (jsxs(DropdownMenuItem, { onClick: (e) => {
+                                                                    e.preventDefault();
+                                                                    toggleColumnVisibility(column.key);
+                                                                }, className: "tw:flex tw:items-center tw:gap-2", children: [jsx(Checkbox, { checked: !hiddenColumns.includes(column.key), onCheckedChange: () => toggleColumnVisibility(column.key) }), jsx("span", { children: column.label })] }, column.key)))] })] })) }) }))] }) }), jsx("tbody", { children: loading ? (Array.from({ length: loadingRows }).map((_, rowIndex) => (jsxs("tr", { className: cn("tw:border-b", rowIndex % 2 === 1 ? "tw:bg-muted" : "tw:bg-background"), children: [isExpandable && (jsx("td", { className: "tw:p-2 tw:w-12", children: jsx("div", { className: "tw:h-4 tw:w-4 tw:rounded tw:bg-muted tw:animate-pulse" }) })), hasRowSelection && (jsx("td", { className: "tw:p-2 tw:w-5", children: jsx("div", { className: "tw:h-4 tw:w-4 tw:rounded tw:bg-muted tw:animate-pulse" }) })), reorderable && (jsx("td", { className: "tw:p-2 tw:w-12", children: jsx("div", { className: "tw:h-8 tw:w-4 tw:rounded tw:bg-muted tw:animate-pulse tw:mx-auto" }) })), visibleColumns.map((column, colIndex) => (jsx("td", { className: cn("tw:p-4 tw:align-middle", column.align === "center" && "tw:text-center", column.align === "right" && "tw:text-right"), children: colIndex === 0 ? (jsxs("div", { className: "tw:flex tw:items-center tw:gap-3", children: [jsx("div", { className: "tw:h-10 tw:w-10 tw:rounded-md tw:bg-muted tw:animate-pulse" }), jsx("div", { className: "tw:h-4 tw:w-32 tw:rounded tw:bg-muted tw:animate-pulse" })] })) : (jsx("div", { className: cn("tw:h-4 tw:rounded tw:bg-muted tw:animate-pulse", column.align === "right" ? "tw:ml-auto tw:w-16" : "tw:w-20") })) }, column.key))), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowIndex % 2 === 1 ? "tw:bg-muted" : "tw:bg-background"), children: jsx("div", { className: "tw:h-8 tw:w-8 tw:rounded tw:bg-accent tw:animate-pulse tw:ml-auto" }) }))] }, `skeleton-${rowIndex}`)))) : data.length === 0 ? (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(Inbox, { className: "tw:h-6 tw:w-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." })] }) }) })) : (data.map((row, rowIndex) => renderRow(row, rowIndex, 0))) })] }) }), pagination && (pagination.totalPages > 1 || pagination.mode === "cursor" || pagination.showTotalItems || (pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS).length > 0) && (jsxs("div", { className: "tw:flex tw:items-center tw:border-t tw:px-4 tw:py-4", 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", children: [jsx("span", { className: "tw:text-sm 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: (value) => !loading && pagination.onPageSizeChange?.(Number(value)), disabled: loading, children: [jsx(SelectTrigger, { className: "tw:h-8 tw:w-[70px]", "aria-labelledby": "rows-per-page-label", children: jsx(SelectValue, { placeholder: pagination.pageSize ?? options[0] }) }), jsx(SelectContent, { children: options.map((size) => (jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }));
+                    })(), pagination.showTotalItems && pagination.totalItems !== undefined && (jsx("div", { className: "tw:flex-1 tw:flex tw:justify-center", children: jsxs("span", { className: "tw:text-sm tw:text-muted-foreground", children: ["Total: ", pagination.totalItems] }) })), !pagination.showTotalItems && jsx("div", { className: "tw:flex-1" }), 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/index.d.ts

@@ -36,6 +36,7 @@ export * from "./components/slider";
 export * from "./components/sonner";
 export * from "./components/spinner";
 export * from "./components/table";
+export * from "./components/data-table";
 export * from "./components/tabs";
 export * from "./components/textarea";
 export * from "./components/toggle";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA"}

package/dist/index.js

@@ -36,6 +36,7 @@ export { Slider } from './components/slider.js';
 export { Toaster } from './components/sonner.js';
 export { Spinner } from './components/spinner.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
+export { DataTable } from './components/data-table.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/tabs.js';
 export { Textarea } from './components/textarea.js';
 export { Toggle, toggleVariants } from './components/toggle.js';
@@ -53,3 +54,4 @@ export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, For
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/input-group.js';
 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 } from './components/sidebar.js';
 export { cn } from './lib/utils.js';
+export { Check, X } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getgreenline/blaze-ui",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",