pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/Table/components/ActiveFilters.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ActiveFilter, ColumnDef } from "../TableProps";
+export interface ActiveFiltersProps<T> {
+    filters: ActiveFilter[];
+    columns: ColumnDef<T>[];
+    onRemove: (filter: ActiveFilter) => void;
+    onClearAll: () => void;
+    className?: string;
+}
+export declare function ActiveFilters<T>({ filters, columns, onRemove, onClearAll, className, }: ActiveFiltersProps<T>): React.ReactElement | null;

package/dist/components-v2/Table/components/ActiveFilters.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveFilters = ActiveFilters;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const badge_1 = require("../../ui/badge");
+const button_1 = require("../../ui/button");
+const filterUtils_1 = require("../utils/filterUtils");
+function formatValue(value) {
+    if (value === null || value === undefined || value === "")
+        return "";
+    if (Array.isArray(value))
+        return value.map((v) => String(v)).join(", ");
+    if (value instanceof Date)
+        return value.toISOString().slice(0, 10);
+    return String(value);
+}
+function ActiveFilters({ filters, columns, onRemove, onClearAll, className, }) {
+    if (filters.length === 0)
+        return null;
+    return (React.createElement("div", { className: (0, utils_1.cn)("flex flex-wrap items-center gap-2 border-b border-border bg-card px-3 py-2 text-xs", className) },
+        React.createElement("span", { className: "text-muted-foreground" }, "Filters:"),
+        filters.map((filter, index) => {
+            const column = columns.find((c) => c.id === filter.columnId);
+            if (!column)
+                return null;
+            const valueLabel = formatValue(filter.value);
+            return (React.createElement(badge_1.Badge, { key: `${filter.columnId}-${index}`, variant: "secondary", size: "sm", className: "gap-1 pr-1" },
+                React.createElement("span", { className: "font-medium" }, column.header),
+                React.createElement("span", { className: "text-muted-foreground" }, filterUtils_1.OPERATOR_LABELS[filter.operator]),
+                valueLabel && React.createElement("span", null, valueLabel),
+                React.createElement("button", { type: "button", "aria-label": `Remove ${column.header} filter`, onClick: () => onRemove(filter), className: "ml-0.5 rounded-sm hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                    React.createElement(lucide_react_1.X, { className: "h-3 w-3" }))));
+        }),
+        React.createElement(button_1.Button, { variant: "ghost", size: "sm", onClick: onClearAll, className: "ml-auto h-7 text-xs" }, "Clear all")));
+}

package/dist/components-v2/Table/components/BulkActionBar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { BulkAction } from "../TableProps";
+export interface BulkActionBarProps<T> {
+    selectedCount: number;
+    selectedKeys: (string | number)[];
+    selectedRows: T[];
+    actions: BulkAction<T>[];
+    onClear: () => void;
+    className?: string;
+}
+export declare function BulkActionBar<T>({ selectedCount, selectedKeys, selectedRows, actions, onClear, className, }: BulkActionBarProps<T>): React.ReactElement;

package/dist/components-v2/Table/components/BulkActionBar.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionBar = BulkActionBar;
+const React = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const utils_1 = require("../../../lib/utils");
+const button_1 = require("../../ui/button");
+const dialog_1 = require("../../ui/dialog");
+function BulkActionBar({ selectedCount, selectedKeys, selectedRows, actions, onClear, className, }) {
+    const [pending, setPending] = React.useState(null);
+    const runAction = (action) => {
+        action.onClick(selectedKeys, selectedRows);
+    };
+    const onClick = (action) => {
+        if (action.confirm) {
+            setPending({ action });
+        }
+        else {
+            runAction(action);
+        }
+    };
+    const confirmTitle = typeof (pending === null || pending === void 0 ? void 0 : pending.action.confirm) === "object" && (pending === null || pending === void 0 ? void 0 : pending.action.confirm.title)
+        ? pending.action.confirm.title
+        : `Confirm ${pending === null || pending === void 0 ? void 0 : pending.action.label}`;
+    const confirmDescription = typeof (pending === null || pending === void 0 ? void 0 : pending.action.confirm) === "object"
+        ? pending === null || pending === void 0 ? void 0 : pending.action.confirm.description
+        : `This will apply to ${selectedCount} ${selectedCount === 1 ? "row" : "rows"}.`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(framer_motion_1.AnimatePresence, { initial: false }, selectedCount > 0 && (React.createElement(framer_motion_1.motion.div, { key: "bulk-bar", initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.18, ease: "easeOut" }, className: "overflow-hidden", role: "region", "aria-label": "Bulk actions" },
+            React.createElement("div", { "aria-live": "polite", className: (0, utils_1.cn)("flex flex-wrap items-center gap-3 border-b border-border bg-primary/10 px-3 py-2", className) },
+                React.createElement("span", { className: "text-sm font-medium text-foreground" },
+                    selectedCount,
+                    " ",
+                    selectedCount === 1 ? "row" : "rows",
+                    " selected"),
+                React.createElement("div", { className: "ml-auto flex flex-wrap items-center gap-2" },
+                    actions.map((action) => (React.createElement(button_1.Button, { key: action.label, size: "sm", variant: action.variant === "destructive"
+                            ? "destructive"
+                            : "outline", leftIcon: action.icon, onClick: () => onClick(action) }, action.label))),
+                    React.createElement(button_1.Button, { size: "sm", variant: "ghost", onClick: onClear }, "Clear selection")))))),
+        React.createElement(dialog_1.Dialog, { open: pending !== null, onOpenChange: (open) => {
+                if (!open)
+                    setPending(null);
+            } },
+            React.createElement(dialog_1.DialogContent, { size: "sm" },
+                React.createElement(dialog_1.DialogHeader, null,
+                    React.createElement(dialog_1.DialogTitle, null, confirmTitle),
+                    confirmDescription && (React.createElement(dialog_1.DialogDescription, null, confirmDescription))),
+                React.createElement(dialog_1.DialogFooter, null,
+                    React.createElement(button_1.Button, { variant: "outline", onClick: () => setPending(null) }, "Cancel"),
+                    React.createElement(button_1.Button, { variant: (pending === null || pending === void 0 ? void 0 : pending.action.variant) === "destructive"
+                            ? "destructive"
+                            : "default", onClick: () => {
+                            if (pending) {
+                                runAction(pending.action);
+                                setPending(null);
+                            }
+                        } }, pending === null || pending === void 0 ? void 0 : pending.action.label))))));
+}

package/dist/components-v2/Table/components/ColumnResizeHandle.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface ColumnResizeHandleProps {
+    columnId: string;
+    isResizing: boolean;
+    onPointerDown: (columnId: string, event: React.PointerEvent<HTMLDivElement>) => void;
+}
+export declare function ColumnResizeHandle({ columnId, isResizing, onPointerDown, }: ColumnResizeHandleProps): React.ReactElement;

package/dist/components-v2/Table/components/ColumnResizeHandle.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnResizeHandle = ColumnResizeHandle;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
+function ColumnResizeHandle({ columnId, isResizing, onPointerDown, }) {
+    return (React.createElement("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize column", onPointerDown: (event) => onPointerDown(columnId, event), onClick: (event) => event.stopPropagation(), className: (0, utils_1.cn)("absolute right-0 top-0 h-full w-1 cursor-col-resize select-none", "before:absolute before:inset-y-1 before:right-0 before:w-px before:bg-transparent", "hover:before:bg-primary", isResizing && "before:bg-primary") }));
+}

package/dist/components-v2/Table/components/Pagination.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface PaginationProps {
+    pageIndex: number;
+    pageCount: number;
+    pageSize: number;
+    pageSizeOptions: number[];
+    totalRows: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+}
+export declare function Pagination({ pageIndex, pageCount, pageSize, pageSizeOptions, totalRows, onPageChange, onPageSizeChange, }: PaginationProps): React.ReactElement;

package/dist/components-v2/Table/components/Pagination.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const select_1 = require("../../ui/select");
+const MAX_PAGE_NUMBERS = 7;
+function pageNumbers(current, total) {
+    if (total <= MAX_PAGE_NUMBERS) {
+        return Array.from({ length: total }, (_, i) => i);
+    }
+    const result = [];
+    const left = Math.max(1, current - 1);
+    const right = Math.min(total - 2, current + 1);
+    result.push(0);
+    if (left > 1)
+        result.push("ellipsis");
+    for (let i = left; i <= right; i++)
+        result.push(i);
+    if (right < total - 2)
+        result.push("ellipsis");
+    result.push(total - 1);
+    return result;
+}
+function Pagination({ pageIndex, pageCount, pageSize, pageSizeOptions, totalRows, onPageChange, onPageSizeChange, }) {
+    const firstRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const lastRow = Math.min(totalRows, (pageIndex + 1) * pageSize);
+    const numbers = pageNumbers(pageIndex, pageCount);
+    return (React.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-border bg-card px-3 py-2 text-xs" },
+        React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("span", { className: "text-muted-foreground" }, "Rows per page"),
+            React.createElement(select_1.SelectRoot, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)) },
+                React.createElement(select_1.SelectTrigger, { size: "sm", className: "h-7 w-[68px]" },
+                    React.createElement(select_1.SelectValue, null)),
+                React.createElement(select_1.SelectContent, null, pageSizeOptions.map((option) => (React.createElement(select_1.SelectItem, { key: option, value: String(option) }, option)))))),
+        React.createElement("div", { className: "text-muted-foreground tabular-nums", "aria-live": "polite" }, totalRows === 0
+            ? "No records"
+            : `Showing ${firstRow}–${lastRow} of ${totalRows.toLocaleString()}`),
+        React.createElement("nav", { className: "flex items-center gap-1", "aria-label": "Pagination" },
+            React.createElement(PageButton, { label: "First page", disabled: pageIndex === 0, onClick: () => onPageChange(0) },
+                React.createElement(lucide_react_1.ChevronsLeft, { className: "h-4 w-4" })),
+            React.createElement(PageButton, { label: "Previous page", disabled: pageIndex === 0, onClick: () => onPageChange(pageIndex - 1) },
+                React.createElement(lucide_react_1.ChevronLeft, { className: "h-4 w-4" })),
+            React.createElement("div", { className: "hidden items-center gap-1 sm:flex" }, numbers.map((value, index) => value === "ellipsis" ? (React.createElement("span", { key: `ellipsis-${index}`, className: "px-1 text-muted-foreground", "aria-hidden": "true" }, "\u2026")) : (React.createElement("button", { key: value, type: "button", "aria-current": value === pageIndex ? "page" : undefined, onClick: () => onPageChange(value), className: (0, utils_1.cn)("h-7 min-w-[28px] rounded-md px-2 text-xs transition-colors", "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", value === pageIndex &&
+                    "bg-primary text-primary-foreground hover:bg-primary") }, value + 1)))),
+            React.createElement("span", { className: "text-muted-foreground sm:hidden" },
+                "Page ",
+                pageIndex + 1,
+                " of ",
+                pageCount),
+            React.createElement(PageButton, { label: "Next page", disabled: pageIndex >= pageCount - 1, onClick: () => onPageChange(pageIndex + 1) },
+                React.createElement(lucide_react_1.ChevronRight, { className: "h-4 w-4" })),
+            React.createElement(PageButton, { label: "Last page", disabled: pageIndex >= pageCount - 1, onClick: () => onPageChange(pageCount - 1) },
+                React.createElement(lucide_react_1.ChevronsRight, { className: "h-4 w-4" })))));
+}
+function PageButton({ label, disabled, onClick, children, }) {
+    return (React.createElement("button", { type: "button", "aria-label": label, disabled: disabled, onClick: onClick, className: (0, utils_1.cn)("inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent") }, children));
+}

package/dist/components-v2/Table/components/TableBody.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { ColumnDef, RowKey } from "../TableProps";
+import type { VirtualWindow } from "../hooks/useVirtualScroll";
+export interface TableBodyProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    rowKey: RowKey<T>;
+    columnWidths: Record<string, number>;
+    selectable: boolean;
+    selectedKeys: Set<string | number>;
+    onToggleSelect: (key: string | number, event: React.MouseEvent) => void;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    rowClassName?: (row: T) => string | undefined;
+    striped: boolean;
+    noBorders: boolean;
+    focusedRowIndex: number;
+    focusedColIndex: number;
+    onCellClick: (rowIndex: number, colIndex: number) => void;
+    isLoading: boolean;
+    loadingRowCount: number;
+    virtual: VirtualWindow;
+}
+export declare function TableBody<T>({ data, columns, rowKey, columnWidths, selectable, selectedKeys, onToggleSelect, onRowClick, rowClassName, striped, noBorders, focusedRowIndex, focusedColIndex, onCellClick, isLoading, loadingRowCount, virtual, }: TableBodyProps<T>): React.ReactElement;

package/dist/components-v2/Table/components/TableBody.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBody = TableBody;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
+const skeleton_1 = require("../../ui/skeleton");
+const sortUtils_1 = require("../utils/sortUtils");
+const TableRow_1 = require("./TableRow");
+function TableBody({ data, columns, rowKey, columnWidths, selectable, selectedKeys, onToggleSelect, onRowClick, rowClassName, striped, noBorders, focusedRowIndex, focusedColIndex, onCellClick, isLoading, loadingRowCount, virtual, }) {
+    if (isLoading) {
+        return (React.createElement("tbody", null, Array.from({ length: loadingRowCount }).map((_, index) => (React.createElement("tr", { key: `skeleton-${index}` },
+            selectable && (React.createElement("td", { className: "h-[var(--row-height)] w-10 border-b border-border px-2 align-middle" },
+                React.createElement(skeleton_1.Skeleton, { variant: "rectangle", className: "h-4 w-4 rounded-sm" }))),
+            columns.map((column) => {
+                var _a;
+                return (React.createElement("td", { key: column.id, className: "h-[var(--row-height)] border-b border-border px-3 align-middle", style: { width: (_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width } },
+                    React.createElement(skeleton_1.Skeleton, { variant: "text", className: (0, utils_1.cn)("h-3", index % 3 === 0
+                            ? "w-1/2"
+                            : index % 3 === 1
+                                ? "w-3/4"
+                                : "w-2/5") })));
+            }))))));
+    }
+    const window = virtual.active ? data.slice(virtual.startIndex, virtual.endIndex) : data;
+    const offset = virtual.active ? virtual.startIndex : 0;
+    return (React.createElement("tbody", null,
+        virtual.active && virtual.paddingTop > 0 && (React.createElement("tr", { "aria-hidden": "true", style: { height: virtual.paddingTop } },
+            React.createElement("td", { colSpan: (selectable ? 1 : 0) + columns.length }))),
+        window.map((row, idx) => {
+            const rowIndex = offset + idx;
+            const key = (0, sortUtils_1.resolveRowKey)(row, rowKey);
+            return (React.createElement(TableRow_1.TableRow, { key: key, row: row, rowKey: key, rowIndex: rowIndex, columns: columns, columnWidths: columnWidths, selectable: selectable, selected: selectedKeys.has(key), onToggleSelect: onToggleSelect, onRowClick: onRowClick, rowClassName: rowClassName, focusedColIndex: focusedRowIndex === rowIndex ? focusedColIndex : -1, onCellClick: (colIndex) => onCellClick(rowIndex, colIndex), striped: striped, noBorders: noBorders }));
+        }),
+        virtual.active && virtual.paddingBottom > 0 && (React.createElement("tr", { "aria-hidden": "true", style: { height: virtual.paddingBottom } },
+            React.createElement("td", { colSpan: (selectable ? 1 : 0) + columns.length })))));
+}

package/dist/components-v2/Table/components/TableCell.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { ColumnDef } from "../TableProps";
+export interface TableCellProps<T> {
+    column: ColumnDef<T>;
+    value: unknown;
+    row: T;
+    width?: number;
+    /** Sticky offset in px when the column is sticky. */
+    stickyOffset?: number;
+    isFocused?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+    className?: string;
+}
+export declare const TableCell: <T>(props: TableCellProps<T>) => React.ReactElement;

package/dist/components-v2/Table/components/TableCell.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
+function TableCellImpl({ column, value, row, width, stickyOffset, isFocused, onClick, className, }) {
+    const content = column.cell ? column.cell(value, row) : formatPrimitive(value);
+    const isSticky = !!column.sticky;
+    const title = column.cell || typeof content !== "string"
+        ? undefined
+        : content;
+    return (React.createElement("td", { "data-column-id": column.id, role: "gridcell", onClick: onClick, tabIndex: isFocused ? 0 : -1, title: title, style: Object.assign({ width, minWidth: width, maxWidth: width }, (isSticky
+            ? {
+                position: "sticky",
+                [column.sticky === "left" ? "left" : "right"]: stickyOffset !== null && stickyOffset !== void 0 ? stickyOffset : 0,
+                zIndex: 1,
+            }
+            : {})), className: (0, utils_1.cn)("h-[var(--row-height)] truncate border-b border-border px-3 align-middle text-sm text-foreground", isSticky && "bg-card", column.align === "center" && "text-center", column.align === "right" && "text-right", isFocused && "outline outline-2 outline-ring outline-offset-[-2px]", className) }, content));
+}
+function formatPrimitive(value) {
+    if (value === null || value === undefined) {
+        return React.createElement("span", { className: "text-muted-foreground" }, "\u2014");
+    }
+    if (typeof value === "boolean")
+        return value ? "Yes" : "No";
+    if (value instanceof Date)
+        return value.toLocaleDateString();
+    return String(value);
+}
+exports.TableCell = React.memo(TableCellImpl);

package/dist/components-v2/Table/components/TableEmptyState.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TableEmptyStateProps {
+    title?: string;
+    description?: string;
+    hasActiveFilters?: boolean;
+    onClearFilters?: () => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare function TableEmptyState({ title, description, hasActiveFilters, onClearFilters, action, }: TableEmptyStateProps): React.ReactElement;

package/dist/components-v2/Table/components/TableEmptyState.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableEmptyState = TableEmptyState;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../ui/button");
+function TableEmptyState({ title, description, hasActiveFilters = false, onClearFilters, action, }) {
+    if (hasActiveFilters) {
+        return (React.createElement("div", { role: "status", className: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center" },
+            React.createElement(lucide_react_1.SearchX, { "aria-hidden": "true", className: "h-10 w-10 text-muted-foreground" }),
+            React.createElement("div", { className: "space-y-1" },
+                React.createElement("p", { className: "text-sm font-medium text-foreground" }, "No results match your filters"),
+                React.createElement("p", { className: "text-sm text-muted-foreground" }, "Try adjusting or clearing the filters to see more rows.")),
+            onClearFilters && (React.createElement(button_1.Button, { variant: "outline", size: "sm", onClick: onClearFilters }, "Clear filters"))));
+    }
+    return (React.createElement("div", { role: "status", className: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center" },
+        React.createElement(lucide_react_1.Inbox, { "aria-hidden": "true", className: "h-10 w-10 text-muted-foreground" }),
+        React.createElement("div", { className: "space-y-1" },
+            React.createElement("p", { className: "text-sm font-medium text-foreground" }, title !== null && title !== void 0 ? title : "No data to display"),
+            description && (React.createElement("p", { className: "text-sm text-muted-foreground" }, description))),
+        action && (React.createElement(button_1.Button, { size: "sm", onClick: action.onClick }, action.label))));
+}

package/dist/components-v2/Table/components/TableErrorState.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface TableErrorStateProps {
+    error: Error | string;
+    onRetry?: () => void;
+}
+export declare function TableErrorState({ error, onRetry, }: TableErrorStateProps): React.ReactElement;