pixelize-design-library 2.2.198 → 2.3.1-beta.1

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

@@ -0,0 +1,52 @@
+"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.TableErrorState = TableErrorState;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../ui/button");
+function TableErrorState({ error, onRetry, }) {
+    const message = typeof error === "string" ? error : error.message || "Something went wrong";
+    const details = typeof error === "object" && error.stack ? error.stack : null;
+    return (React.createElement("div", { role: "alert", className: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center" },
+        React.createElement(lucide_react_1.AlertTriangle, { "aria-hidden": "true", className: "h-10 w-10 text-destructive" }),
+        React.createElement("div", { className: "space-y-1" },
+            React.createElement("p", { className: "text-sm font-medium text-foreground" }, "Couldn't load this table"),
+            React.createElement("p", { className: "text-sm text-muted-foreground" }, message)),
+        onRetry && (React.createElement(button_1.Button, { variant: "outline", size: "sm", leftIcon: React.createElement(lucide_react_1.RefreshCw, null), onClick: onRetry }, "Try again")),
+        details && (React.createElement("details", { className: "mt-2 max-w-md text-left" },
+            React.createElement("summary", { className: "cursor-pointer text-xs text-muted-foreground hover:text-foreground" }, "Technical details"),
+            React.createElement("pre", { className: "mt-2 max-h-32 overflow-auto rounded-md bg-muted p-2 text-[11px] leading-snug text-muted-foreground" }, details)))));
+}

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ColumnDef, SortState } from "../TableProps";
+export interface TableHeaderProps<T> {
+    columns: ColumnDef<T>[];
+    columnWidths: Record<string, number>;
+    sortable: boolean;
+    sort: SortState | null;
+    onSortChange: (next: SortState | null) => void;
+    selectable: boolean;
+    selectionMode: "single" | "multi";
+    isAllSelected: boolean;
+    isSomeSelected: boolean;
+    onToggleAll: () => void;
+    resizable: boolean;
+    resizingColumnId: string | null;
+    onResizePointerDown: (columnId: string, event: React.PointerEvent<HTMLDivElement>) => void;
+    sticky: boolean;
+    focusedColIndex: number;
+    onCellClick: (colIndex: number) => void;
+}
+export declare function TableHeader<T>({ columns, columnWidths, sortable, sort, onSortChange, selectable, selectionMode, isAllSelected, isSomeSelected, onToggleAll, resizable, resizingColumnId, onResizePointerDown, sticky, focusedColIndex, onCellClick, }: TableHeaderProps<T>): React.ReactElement;

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

@@ -0,0 +1,94 @@
+"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.TableHeader = TableHeader;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const checkbox_1 = require("../../ui/checkbox");
+const sortUtils_1 = require("../utils/sortUtils");
+const ColumnResizeHandle_1 = require("./ColumnResizeHandle");
+function TableHeader({ columns, columnWidths, sortable, sort, onSortChange, selectable, selectionMode, isAllSelected, isSomeSelected, onToggleAll, resizable, resizingColumnId, onResizePointerDown, sticky, focusedColIndex, onCellClick, }) {
+    const handleSort = (column) => {
+        if (!sortable || column.sortable === false)
+            return;
+        const currentDirection = (sort === null || sort === void 0 ? void 0 : sort.id) === column.id ? sort.direction : null;
+        const next = (0, sortUtils_1.nextSortDirection)(currentDirection);
+        onSortChange(next === null ? null : { id: column.id, direction: next });
+    };
+    return (React.createElement("thead", { className: (0, utils_1.cn)("bg-muted/50", sticky && "sticky top-0 z-20") },
+        React.createElement("tr", null,
+            selectable && (React.createElement("th", { scope: "col", className: "h-[var(--row-height)] w-10 border-b border-border px-2 align-middle" }, selectionMode === "multi" && (React.createElement(checkbox_1.Checkbox, { size: "sm", checked: isAllSelected
+                    ? true
+                    : isSomeSelected
+                        ? "indeterminate"
+                        : false, onCheckedChange: onToggleAll, "aria-label": isAllSelected ? "Deselect all" : "Select all" })))),
+            columns.map((column, colIndex) => {
+                var _a;
+                const adjustedColIndex = selectable ? colIndex + 1 : colIndex;
+                const isSorted = (sort === null || sort === void 0 ? void 0 : sort.id) === column.id;
+                const direction = isSorted ? sort === null || sort === void 0 ? void 0 : sort.direction : null;
+                const sortableCol = sortable && column.sortable !== false;
+                const width = (_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width;
+                const isSticky = !!column.sticky;
+                return (React.createElement("th", { key: column.id, scope: "col", "data-column-id": column.id, "aria-sort": isSorted && direction
+                        ? direction === "asc"
+                            ? "ascending"
+                            : "descending"
+                        : sortableCol
+                            ? "none"
+                            : undefined, tabIndex: focusedColIndex === adjustedColIndex ? 0 : -1, onClick: () => {
+                        onCellClick(adjustedColIndex);
+                        handleSort(column);
+                    }, style: Object.assign({ width, minWidth: width, maxWidth: width }, (isSticky
+                        ? {
+                            position: "sticky",
+                            [column.sticky === "left" ? "left" : "right"]: 0,
+                            zIndex: 21,
+                        }
+                        : {})), className: (0, utils_1.cn)("relative h-[var(--row-height)] select-none border-b border-border px-3 align-middle text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", sortableCol &&
+                        "cursor-pointer hover:text-foreground", isSticky && "bg-muted/80", column.align === "center" && "text-center", column.align === "right" && "text-right") },
+                    React.createElement("span", { className: "flex items-center gap-1.5" },
+                        React.createElement("span", { className: "truncate" }, column.header),
+                        sortableCol && (React.createElement(SortIcon, { sorted: isSorted, direction: direction !== null && direction !== void 0 ? direction : null }))),
+                    resizable && column.enableResizing !== false && (React.createElement(ColumnResizeHandle_1.ColumnResizeHandle, { columnId: column.id, isResizing: resizingColumnId === column.id, onPointerDown: onResizePointerDown }))));
+            }))));
+}
+function SortIcon({ sorted, direction, }) {
+    if (!sorted || direction === null) {
+        return (React.createElement(lucide_react_1.ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 opacity-50" }));
+    }
+    return direction === "asc" ? (React.createElement(lucide_react_1.ArrowUp, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-primary" })) : (React.createElement(lucide_react_1.ArrowDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-primary" }));
+}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { ColumnDef } from "../TableProps";
+export interface TableRowProps<T> {
+    row: T;
+    rowKey: string | number;
+    rowIndex: number;
+    columns: ColumnDef<T>[];
+    columnWidths: Record<string, number>;
+    selectable: boolean;
+    selected: boolean;
+    onToggleSelect: (key: string | number, event: React.MouseEvent) => void;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    rowClassName?: (row: T) => string | undefined;
+    /** Index of the currently keyboard-focused column (or -1). */
+    focusedColIndex: number;
+    onCellClick: (colIndex: number) => void;
+    striped: boolean;
+    noBorders: boolean;
+}
+export declare const TableRow: <T>(props: TableRowProps<T>) => React.ReactElement;

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

@@ -0,0 +1,64 @@
+"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.TableRow = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
+const checkbox_1 = require("../../ui/checkbox");
+const sortUtils_1 = require("../utils/sortUtils");
+const TableCell_1 = require("./TableCell");
+function TableRowImpl({ row, rowKey, rowIndex, columns, columnWidths, selectable, selected, onToggleSelect, onRowClick, rowClassName, focusedColIndex, onCellClick, striped, noBorders, }) {
+    const clickableRow = !!onRowClick;
+    const rowClasses = rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row);
+    return (React.createElement("tr", { "data-row-key": rowKey, "aria-selected": selectable ? selected : undefined, onClick: (event) => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, event), className: (0, utils_1.cn)("group transition-colors", striped && rowIndex % 2 === 1 && "bg-muted/30", selected && "!bg-primary/10 outline outline-2 -outline-offset-2 outline-primary/40", clickableRow && "cursor-pointer", "hover:bg-accent/50", noBorders && "[&>td]:border-b-0", rowClasses) },
+        selectable && (React.createElement("td", { className: "h-[var(--row-height)] w-10 border-b border-border px-2 align-middle", onClick: (event) => event.stopPropagation(), tabIndex: focusedColIndex === 0 ? 0 : -1, role: "gridcell" },
+            React.createElement(checkbox_1.Checkbox, { size: "sm", checked: selected, onCheckedChange: () => {
+                    const fakeEvent = {
+                        shiftKey: false,
+                    };
+                    onToggleSelect(rowKey, fakeEvent);
+                }, "aria-label": `Select row ${rowIndex + 1}` }))),
+        columns.map((column, colIndex) => {
+            var _a;
+            const adjustedColIndex = selectable ? colIndex + 1 : colIndex;
+            const value = (0, sortUtils_1.getRowValue)(row, column);
+            return (React.createElement(TableCell_1.TableCell, { key: column.id, column: column, value: value, row: row, width: (_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width, isFocused: focusedColIndex === adjustedColIndex, onClick: (event) => {
+                    event.stopPropagation();
+                    onCellClick(adjustedColIndex);
+                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, event);
+                } }));
+        })));
+}
+exports.TableRow = React.memo(TableRowImpl);

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface TableSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+export declare function TableSearch({ value, onChange, placeholder, className, }: TableSearchProps): React.ReactElement;

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

@@ -0,0 +1,47 @@
+"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.TableSearch = TableSearch;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const input_1 = require("../../ui/input");
+function TableSearch({ value, onChange, placeholder = "Search…", className, }) {
+    return (React.createElement("div", { className: (0, utils_1.cn)("relative w-full max-w-xs", className) },
+        React.createElement(lucide_react_1.Search, { "aria-hidden": "true", className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        React.createElement(input_1.Input, { type: "search", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, className: "pl-8 pr-8", "aria-label": "Search table" }),
+        value && (React.createElement("button", { type: "button", "aria-label": "Clear search", onClick: () => onChange(""), className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+            React.createElement(lucide_react_1.X, { className: "h-3.5 w-3.5" })))));
+}

package/dist/components-v2/Table/filters/FilterChips.d.ts

@@ -0,0 +1,6 @@
+/**
+ * FilterChips is the same UI as ActiveFilters — re-exported here so consumers
+ * can import either location without surprises.
+ */
+export { ActiveFilters as FilterChips } from "../components/ActiveFilters";
+export type { ActiveFiltersProps as FilterChipsProps } from "../components/ActiveFilters";

package/dist/components-v2/Table/filters/FilterChips.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterChips = void 0;
+/**
+ * FilterChips is the same UI as ActiveFilters — re-exported here so consumers
+ * can import either location without surprises.
+ */
+var ActiveFilters_1 = require("../components/ActiveFilters");
+Object.defineProperty(exports, "FilterChips", { enumerable: true, get: function () { return ActiveFilters_1.ActiveFilters; } });

package/dist/components-v2/Table/filters/LeftFilterPane.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { FilterSidebarConfig } from "../TableProps";
+export interface LeftFilterPaneProps {
+    filters: FilterSidebarConfig[];
+    initialValues?: Record<string, unknown>;
+    onApply: (values: Record<string, unknown>) => void;
+    onClose?: () => void;
+    position?: "left" | "right";
+    isLoading?: boolean;
+    className?: string;
+}
+/**
+ * Sidebar variant of the filter UI — renders inline alongside the table when
+ * `filterMode === 'sidebar'`. Maintains its own draft state and only fires
+ * `onApply` on the explicit Apply button.
+ */
+export declare function LeftFilterPane({ filters, initialValues, onApply, onClose, position, isLoading, className, }: LeftFilterPaneProps): React.ReactElement;

package/dist/components-v2/Table/filters/LeftFilterPane.js

@@ -0,0 +1,105 @@
+"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.LeftFilterPane = LeftFilterPane;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const button_1 = require("../../ui/button");
+const input_1 = require("../../ui/input");
+const label_1 = require("../../ui/label");
+const Select_1 = require("../../Select/Select");
+const spinner_1 = require("../../ui/spinner");
+/**
+ * Sidebar variant of the filter UI — renders inline alongside the table when
+ * `filterMode === 'sidebar'`. Maintains its own draft state and only fires
+ * `onApply` on the explicit Apply button.
+ */
+function LeftFilterPane({ filters, initialValues, onApply, onClose, position = "left", isLoading, className, }) {
+    const [draft, setDraft] = React.useState(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+    React.useEffect(() => {
+        if (initialValues)
+            setDraft(initialValues);
+    }, [initialValues]);
+    const update = (id, value) => setDraft((prev) => (Object.assign(Object.assign({}, prev), { [id]: value })));
+    return (React.createElement("aside", { "aria-label": "Filters", className: (0, utils_1.cn)("flex w-72 shrink-0 flex-col border-border bg-card text-card-foreground", position === "left" ? "border-r" : "border-l", className) },
+        React.createElement("header", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2" },
+            React.createElement("span", { className: "inline-flex items-center gap-2 text-sm font-medium" },
+                React.createElement(lucide_react_1.Filter, { "aria-hidden": "true", className: "h-4 w-4" }),
+                "Filters"),
+            onClose && (React.createElement("button", { type: "button", "aria-label": "Close filters", onClick: onClose, className: "rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                React.createElement(lucide_react_1.X, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "flex-1 space-y-4 overflow-y-auto px-3 py-3" },
+            filters.map((config) => (React.createElement(FilterField, { key: config.id, config: config, value: draft[config.id], onChange: (v) => update(config.id, v) }))),
+            filters.length === 0 && (React.createElement("p", { className: "text-xs text-muted-foreground" }, "No filters configured."))),
+        React.createElement("footer", { className: "flex items-center justify-end gap-2 border-t border-border px-3 py-2" },
+            React.createElement(button_1.Button, { variant: "ghost", size: "sm", onClick: () => {
+                    setDraft({});
+                    onApply({});
+                } }, "Reset"),
+            React.createElement(button_1.Button, { size: "sm", onClick: () => onApply(draft), isLoading: isLoading, leftIcon: isLoading ? React.createElement(spinner_1.Spinner, { size: "sm" }) : undefined }, "Apply"))));
+}
+function FilterField({ config, value, onChange, }) {
+    var _a, _b, _c, _d, _e;
+    const opts = ((_a = config.options) !== null && _a !== void 0 ? _a : []).map((option) => ({
+        value: String(option.value),
+        label: option.label,
+    }));
+    if (config.type === "select") {
+        return (React.createElement(Select_1.Select, { label: config.label, options: opts, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), clearable: true, searchable: opts.length > 6 }));
+    }
+    if (config.type === "multi-select") {
+        return (React.createElement(Select_1.Select, { label: config.label, options: opts, multiple: true, value: Array.isArray(value) ? value : [], onChange: (v) => onChange(v), clearable: true, searchable: opts.length > 6 }));
+    }
+    if (config.type === "number-range") {
+        const v = Array.isArray(value) ? value : ["", ""];
+        return (React.createElement("div", { className: "space-y-1.5" },
+            React.createElement(label_1.Label, null, config.label),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(input_1.Input, { size: "sm", inputMode: "decimal", placeholder: "Min", value: (_b = v[0]) !== null && _b !== void 0 ? _b : "", onChange: (event) => { var _a; return onChange([event.target.value, (_a = v[1]) !== null && _a !== void 0 ? _a : ""]); } }),
+                React.createElement(input_1.Input, { size: "sm", inputMode: "decimal", placeholder: "Max", value: (_c = v[1]) !== null && _c !== void 0 ? _c : "", onChange: (event) => { var _a; return onChange([(_a = v[0]) !== null && _a !== void 0 ? _a : "", event.target.value]); } }))));
+    }
+    if (config.type === "date-range") {
+        const v = Array.isArray(value) ? value : ["", ""];
+        return (React.createElement("div", { className: "space-y-1.5" },
+            React.createElement(label_1.Label, null, config.label),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(input_1.Input, { size: "sm", type: "date", value: (_d = v[0]) !== null && _d !== void 0 ? _d : "", onChange: (event) => { var _a; return onChange([event.target.value, (_a = v[1]) !== null && _a !== void 0 ? _a : ""]); } }),
+                React.createElement(input_1.Input, { size: "sm", type: "date", value: (_e = v[1]) !== null && _e !== void 0 ? _e : "", onChange: (event) => { var _a; return onChange([(_a = v[0]) !== null && _a !== void 0 ? _a : "", event.target.value]); } }))));
+    }
+    return (React.createElement("div", { className: "space-y-1.5" },
+        React.createElement(label_1.Label, null, config.label),
+        React.createElement(input_1.Input, { size: "sm", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value), placeholder: `Filter by ${config.label.toLowerCase()}` })));
+}

package/dist/components-v2/Table/filters/TableFilters.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { ActiveFilter, ColumnDef } from "../TableProps";
+export interface TableFiltersProps<T> {
+    columns: ColumnDef<T>[];
+    filters: ActiveFilter[];
+    onApply: (next: ActiveFilter[]) => void;
+}
+/**
+ * Inline column-level filter builder. Opens from a "Filters" button in the
+ * toolbar and lets the user add per-column filter rules.
+ */
+export declare function TableFilters<T>({ columns, filters, onApply, }: TableFiltersProps<T>): React.ReactElement;

package/dist/components-v2/Table/filters/TableFilters.js

@@ -0,0 +1,127 @@
+"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.TableFilters = TableFilters;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+const button_1 = require("../../ui/button");
+const input_1 = require("../../ui/input");
+const popover_1 = require("../../ui/popover");
+const select_1 = require("../../ui/select");
+const filterUtils_1 = require("../utils/filterUtils");
+/**
+ * Inline column-level filter builder. Opens from a "Filters" button in the
+ * toolbar and lets the user add per-column filter rules.
+ */
+function TableFilters({ columns, filters, onApply, }) {
+    const [open, setOpen] = React.useState(false);
+    const [draft, setDraft] = React.useState(filters);
+    React.useEffect(() => {
+        if (open)
+            setDraft(filters);
+    }, [open, filters]);
+    const filterableColumns = columns.filter((c) => c.filterable !== false);
+    const addFilter = () => {
+        const first = filterableColumns[0];
+        if (!first)
+            return;
+        const op = (0, filterUtils_1.defaultOperatorFor)(first.type);
+        setDraft((prev) => [
+            ...prev,
+            { columnId: first.id, operator: op, value: "" },
+        ]);
+    };
+    const updateAt = (index, patch) => {
+        setDraft((prev) => prev.map((row, i) => (i === index ? Object.assign(Object.assign({}, row), patch) : row)));
+    };
+    const removeAt = (index) => {
+        setDraft((prev) => prev.filter((_, i) => i !== index));
+    };
+    const handleApply = () => {
+        onApply(draft);
+        setOpen(false);
+    };
+    return (React.createElement(popover_1.Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(popover_1.PopoverTrigger, { asChild: true },
+            React.createElement(button_1.Button, { variant: "outline", size: "sm", leftIcon: React.createElement(lucide_react_1.Filter, null), "aria-label": "Filters" },
+                "Filters",
+                filters.length > 0 && (React.createElement("span", { className: "ml-1 rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground" }, filters.length)))),
+        React.createElement(popover_1.PopoverContent, { align: "end", className: "w-[min(420px,90vw)] p-0" },
+            React.createElement("div", { className: "border-b border-border px-3 py-2 text-sm font-medium" }, "Filter rules"),
+            React.createElement("div", { className: "max-h-[60vh] space-y-2 overflow-y-auto px-3 py-3" },
+                draft.length === 0 && (React.createElement("p", { className: "text-xs text-muted-foreground" }, "No filters yet. Add one to narrow the results.")),
+                draft.map((row, index) => {
+                    var _a, _b;
+                    const column = columns.find((c) => c.id === row.columnId);
+                    const type = (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : "text";
+                    const operators = (_b = filterUtils_1.FILTER_OPERATORS_BY_TYPE[type]) !== null && _b !== void 0 ? _b : [];
+                    const needsValue = (0, filterUtils_1.operatorNeedsValue)(row.operator);
+                    return (React.createElement("div", { key: `${row.columnId}-${index}`, className: "flex flex-wrap items-center gap-2" },
+                        React.createElement(select_1.SelectRoot, { value: row.columnId, onValueChange: (value) => {
+                                var _a;
+                                const nextColumn = (_a = columns.find((c) => c.id === value)) !== null && _a !== void 0 ? _a : column;
+                                updateAt(index, {
+                                    columnId: value,
+                                    operator: (0, filterUtils_1.defaultOperatorFor)(nextColumn === null || nextColumn === void 0 ? void 0 : nextColumn.type),
+                                    value: "",
+                                });
+                            } },
+                            React.createElement(select_1.SelectTrigger, { size: "sm", className: "w-32 text-xs" },
+                                React.createElement(select_1.SelectValue, null)),
+                            React.createElement(select_1.SelectContent, null, filterableColumns.map((c) => (React.createElement(select_1.SelectItem, { key: c.id, value: c.id }, c.header))))),
+                        React.createElement(select_1.SelectRoot, { value: row.operator, onValueChange: (value) => updateAt(index, {
+                                operator: value,
+                            }) },
+                            React.createElement(select_1.SelectTrigger, { size: "sm", className: "w-32 text-xs" },
+                                React.createElement(select_1.SelectValue, null)),
+                            React.createElement(select_1.SelectContent, null, operators.map((op) => (React.createElement(select_1.SelectItem, { key: op, value: op }, filterUtils_1.OPERATOR_LABELS[op]))))),
+                        needsValue && (React.createElement(input_1.Input, { size: "sm", className: "flex-1 min-w-[120px] text-xs", placeholder: "Value", value: typeof row.value === "string" ||
+                                typeof row.value === "number"
+                                ? String(row.value)
+                                : "", onChange: (event) => updateAt(index, { value: event.target.value }) })),
+                        React.createElement("button", { type: "button", "aria-label": "Remove filter", onClick: () => removeAt(index), className: (0, utils_1.cn)("rounded-md p-1 text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") },
+                            React.createElement(lucide_react_1.X, { className: "h-3.5 w-3.5" }))));
+                })),
+            React.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-border px-3 py-2" },
+                React.createElement(button_1.Button, { variant: "ghost", size: "sm", onClick: addFilter, disabled: filterableColumns.length === 0 }, "+ Add filter"),
+                React.createElement("div", { className: "flex gap-2" },
+                    React.createElement(button_1.Button, { variant: "outline", size: "sm", onClick: () => {
+                            setDraft([]);
+                            onApply([]);
+                            setOpen(false);
+                        } }, "Clear"),
+                    React.createElement(button_1.Button, { size: "sm", onClick: handleApply }, "Apply"))))));
+}

package/dist/components-v2/Table/hooks/useColumnResize.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { ColumnDef } from "../TableProps";
+export interface UseColumnResizeOptions<T> {
+    columns: ColumnDef<T>[];
+    columnWidths: Record<string, number>;
+    setColumnWidth: (id: string, width: number) => void;
+    enabled: boolean;
+}
+export interface ColumnResizeAPI {
+    handlePointerDown: (columnId: string, event: React.PointerEvent<HTMLDivElement>) => void;
+    isResizing: boolean;
+    resizingColumnId: string | null;
+    getWidth: (columnId: string) => number | undefined;
+}
+export declare function useColumnResize<T>({ columns, columnWidths, setColumnWidth, enabled, }: UseColumnResizeOptions<T>): ColumnResizeAPI;