indas-ui 0.0.1 → 0.1.1

package/dist/components/datagrid/rows/ExpandableRow.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { ChevronDown, ChevronRight, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useCurrency } from '../../../contexts/CurrencyContext.js';
+export function ExpandableRow({ row, renderSubComponent, expandMode = 'basic', subData, subColumns, getSubRowId, onSubRowClick, onSubRowSelect, getSubRowProps, onRowClick, onRowDoubleClick, onRowContextMenu, className = '', style, rowHeight, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { className: className, onClick: onRowClick, onDoubleClick: onRowDoubleClick, onContextMenu: onRowContextMenu, style: { ...(rowHeight ? { height: `${rowHeight}px` } : {}), ...style }, children: children }), row.getIsExpanded() && expandMode === 'basic' && renderSubComponent && (_jsx("tr", { children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0 bg-gray-50 border-b", children: _jsx(AnimatePresence, { children: _jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'auto' }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2 }, className: "p-4", children: renderSubComponent(row) }) }) }) })), row.getIsExpanded() && expandMode === 'detailed' && subData && subData.length > 0 && subColumns && (_jsx(DetailedSubRows, { subData: subData, subColumns: subColumns, getSubRowId: getSubRowId, onSubRowClick: onSubRowClick, onSubRowSelect: onSubRowSelect, getSubRowProps: getSubRowProps, parentRow: row }))] }));
+}
+function DetailedSubRows({ subData, subColumns, getSubRowId, onSubRowClick, onSubRowSelect, getSubRowProps, parentRow, }) {
+    const parentCells = parentRow.getVisibleCells();
+    const [selectedSubRowId, setSelectedSubRowId] = useState(null);
+    const handleSubRowClick = useCallback((item, rowId, e) => {
+        // If clicking a button/link (action buttons), don't select
+        const target = e.target;
+        if (target.closest('button') || target.closest('a'))
+            return;
+        // Row click selects locally + propagates to parent
+        const isDeselecting = selectedSubRowId === rowId;
+        setSelectedSubRowId(isDeselecting ? null : rowId);
+        if (!isDeselecting && onSubRowSelect) {
+            onSubRowSelect(item);
+        }
+    }, [selectedSubRowId, onSubRowSelect]);
+    return (_jsx(_Fragment, { children: subData.map((item, itemIndex) => {
+            const rawId = getSubRowId ? getSubRowId(item) : String(itemIndex);
+            const rowId = `${parentRow.id}-${rawId}`;
+            const isSelected = selectedSubRowId === rowId;
+            const bgBase = isSelected
+                ? 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_12%,rgb(var(--bg-surface)))]'
+                : 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]';
+            const bgHover = 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_18%,rgb(var(--bg-surface)))]';
+            // Consumer tint (e.g. margin colour) — inline style wins over the revision shade.
+            const subProps = getSubRowProps?.(item);
+            return (_jsx("tr", { className: `cursor-pointer group transition-colors duration-150 ease-out ${bgHover} ${bgBase} ${subProps?.className ?? ''}`, style: subProps?.style, onClick: (e) => handleSubRowClick(item, rowId, e), children: parentCells.map((parentCell, cellIndex) => {
+                    const colDef = parentCell.column.columnDef;
+                    const colId = parentCell.column.id;
+                    const accessorKey = colDef.accessorKey;
+                    const width = parentCell.column.getSize();
+                    // Check pinning state
+                    const isPinnedLeft = parentCell.column.getIsPinned() === 'left';
+                    const isPinnedRight = parentCell.column.getIsPinned() === 'right';
+                    // Calculate right position for right-pinned cells
+                    let rightPosition = 0;
+                    if (isPinnedRight) {
+                        for (let i = cellIndex + 1; i < parentCells.length; i++) {
+                            const nextCell = parentCells[i];
+                            if (nextCell.column.getIsPinned() === 'right') {
+                                rightPosition += nextCell.column.getSize();
+                            }
+                        }
+                    }
+                    // Calculate left position for left-pinned (frozen) cells
+                    let leftPosition = 0;
+                    if (isPinnedLeft) {
+                        for (let i = 0; i < cellIndex; i++) {
+                            const prevCell = parentCells[i];
+                            if (prevCell.column.getIsPinned() === 'left') {
+                                leftPosition += prevCell.column.getSize();
+                            }
+                        }
+                    }
+                    // Get cell value from sub-data item
+                    const cellValue = accessorKey ? item[accessorKey] : undefined;
+                    const cellString = String(cellValue ?? '').trim();
+                    // Badge detection (same as CellRenderer)
+                    const cellRendererString = colDef.cell?.toString() || '';
+                    const isBadgeColumn = cellRendererString.includes('Badge') ||
+                        cellRendererString.includes('BooleanCell') ||
+                        cellRendererString.includes('rounded-full') ||
+                        cellRendererString.includes('inline-flex');
+                    const isPlaceholderValue = cellString === '-' || cellString === '–' || cellString === '—' || cellString === 'N/A' || cellString === 'n/a' || cellString === '';
+                    // Excel-like alignment: Numbers RIGHT, Text LEFT, Badges/Placeholders CENTER
+                    const isNumericContent = (() => {
+                        if (typeof cellValue === 'number')
+                            return true;
+                        if (!cellString || cellString === 'null' || cellString === 'undefined')
+                            return false;
+                        if (/^-?\d*\.?\d+$/.test(cellString))
+                            return true;
+                        if (/^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(cellString))
+                            return true;
+                        if (/^-?\d+\.?\d*%$/.test(cellString))
+                            return true;
+                        if (/^[\$€£¥₹₽]\s?-?\d[\d,]*\.?\d*$/.test(cellString))
+                            return true;
+                        if (/^-?\d[\d,]*\.?\d*\s?[\$€£¥₹₽]$/.test(cellString))
+                            return true;
+                        if (/^\d+\.?\d*\s*[xX×]\s*\d+\.?\d*$/.test(cellString))
+                            return true;
+                        if (/^\(\d[\d,]*\.?\d*\)$/.test(cellString))
+                            return true;
+                        if (/^-?\d+\.?\d*[eE][+-]?\d+$/.test(cellString))
+                            return true;
+                        if (/^\d+\/\d+$/.test(cellString))
+                            return true;
+                        return false;
+                    })();
+                    const alignClass = isBadgeColumn || isPlaceholderValue ? 'text-center' : isNumericContent ? 'text-right' : 'text-left';
+                    // Build a fake row context that satisfies TanStack cell renderers
+                    const fakeRow = {
+                        original: item,
+                        getValue: (key) => item[key],
+                        getIsSelected: () => isSelected,
+                        toggleSelected: () => setSelectedSubRowId(prev => prev === rowId ? null : rowId),
+                        getCanExpand: () => false,
+                        getIsExpanded: () => false,
+                        getToggleExpandedHandler: () => () => { },
+                    };
+                    // Render using the column's cell renderer if it exists, otherwise show raw value
+                    let content = cellValue ?? '';
+                    if (colDef.cell && typeof colDef.cell === 'function') {
+                        try {
+                            content = colDef.cell({
+                                getValue: () => cellValue,
+                                row: fakeRow,
+                                column: parentCell.column,
+                                cell: parentCell,
+                                renderValue: () => cellValue,
+                            });
+                        }
+                        catch {
+                            content = cellValue ?? '';
+                        }
+                    }
+                    // Pinned cells need a solid background; inherit the row tint (--dg-row-bg)
+                    // when the consumer set one so frozen/pinned cells match the rest of the row.
+                    const pinnedBg = isSelected
+                        ? 'color-mix(in srgb, rgb(var(--color-primary)) 12%, rgb(var(--bg-surface)))'
+                        : 'var(--dg-row-bg, rgb(var(--bg-surface)))';
+                    return (_jsx("td", { className: `px-1 py-1 text-xs text-[rgb(var(--fg-default))] align-middle ${alignClass} ${isPinnedLeft || isPinnedRight ? 'sticky z-[5]' : ''}`, style: {
+                            width: `${width}px`,
+                            minWidth: `${width}px`,
+                            boxShadow: `inset 0 -1px 0 rgb(var(--bd-default))${isPinnedRight ? ', -2px 0 5px -2px rgba(0,0,0,0.1)' : ''}`,
+                            ...(isPinnedRight && {
+                                position: 'sticky',
+                                right: `${rightPosition}px`,
+                                backgroundColor: pinnedBg,
+                                transform: 'translateZ(0)',
+                                willChange: 'transform',
+                            }),
+                            ...(isPinnedLeft && {
+                                position: 'sticky',
+                                left: `${leftPosition}px`,
+                                backgroundColor: pinnedBg,
+                                transform: 'translateZ(0)',
+                                willChange: 'transform',
+                            }),
+                        }, children: _jsx("div", { className: "relative", children: _jsx("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: content }) }) }, `${rowId}-${colId}`));
+                }) }, rowId));
+        }) }));
+}
+export function ExpansionToggleCell({ row }) {
+    if (!row.getCanExpand?.()) {
+        return null;
+    }
+    return (_jsx("button", { onClick: (e) => {
+            e.stopPropagation();
+            row.getToggleExpandedHandler?.()?.();
+        }, className: "flex items-center justify-center w-6 h-6 rounded hover:bg-[rgb(var(--bg-hover))] transition-colors", "aria-label": row.getIsExpanded?.() ? 'Collapse' : 'Expand', children: row.getIsExpanded?.() ? (_jsx(ChevronDown, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" })) : (_jsx(ChevronRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" })) }));
+}
+// ==========================================
+// EXPANSION TOGGLE HEADER
+// ==========================================
+// Header button to expand/collapse ALL rows at once
+export function ExpansionToggleHeader({ table }) {
+    const isAllExpanded = table.getIsAllRowsExpanded();
+    const isSomeExpanded = table.getIsSomeRowsExpanded();
+    return (_jsx("button", { onClick: (e) => {
+            e.stopPropagation();
+            table.toggleAllRowsExpanded(!isAllExpanded);
+        }, className: "flex items-center justify-center w-6 h-6", children: isAllExpanded || isSomeExpanded ? (_jsx(ChevronsDownUp, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" })) : (_jsx(ChevronsUpDown, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" })) }));
+}
+export function ProcessBreakdown({ processes }) {
+    const { getCurrencyInfo, selectedCurrency } = useCurrency();
+    const currencySymbol = getCurrencyInfo(selectedCurrency)?.symbol || '';
+    return (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3", children: processes.map((process, index) => (_jsxs("div", { className: "flex flex-col p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all", children: [_jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: process.name }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: "text-lg font-semibold text-gray-900", children: [currencySymbol, process.totalCost.toFixed(2)] }), _jsx("span", { className: "text-xs text-gray-500", children: "/" }), _jsxs("span", { className: "text-sm text-gray-600", children: [currencySymbol, process.unitCost.toFixed(2)] })] })] }, index))) }));
+}

package/dist/components/datagrid/rows/FilterRow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+interface FilterRowProps<TData> {
+    table: Table<TData>;
+    frozenColumnsState: Set<string>;
+    isRowReorderingActive: boolean;
+    onColumnFilterChange?: () => void;
+}
+export declare function FilterRow<TData>({ table, frozenColumnsState, isRowReorderingActive, onColumnFilterChange }: FilterRowProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/rows/FilterRow.js

@@ -0,0 +1,185 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Search, X, Calendar } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+// Extract the display value from a filter value (which could be a string or an object from context menu/advanced filter)
+function extractFilterDisplayValue(filterValue) {
+    if (!filterValue)
+        return '';
+    if (typeof filterValue === 'string')
+        return filterValue;
+    if (typeof filterValue === 'object' && filterValue.value !== undefined) {
+        // Handle array values (from "in" filter) - show comma separated
+        if (Array.isArray(filterValue.value))
+            return filterValue.value.join(', ');
+        return String(filterValue.value);
+    }
+    return '';
+}
+// Debounce hook for filter inputs
+function useDebouncedCallback(callback, delay) {
+    const timeoutRef = useRef(null);
+    const debouncedCallback = useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    }, [callback, delay]);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return debouncedCallback;
+}
+// Detect if column is a date column based on id, accessorKey, or meta
+function isDateColumn(header) {
+    const columnId = header.column.id.toLowerCase();
+    const accessorKey = (header.column.columnDef.accessorKey || '').toLowerCase();
+    const meta = header.column.columnDef.meta;
+    // Check meta first (most reliable)
+    if (meta?.filterType === 'date')
+        return true;
+    if (meta?.type === 'date')
+        return true;
+    // Check column ID/accessor for date-related names (be specific to avoid false positives)
+    const dateKeywords = ['date', 'createdat', 'updatedat', 'timestamp', 'datetime'];
+    return dateKeywords.some(keyword => columnId.includes(keyword) || accessorKey.includes(keyword));
+}
+// Detect if column is a number column
+function isNumberColumn(header) {
+    const meta = header.column.columnDef.meta;
+    // Check meta first
+    if (meta?.filterType === 'number')
+        return true;
+    if (meta?.type === 'number')
+        return true;
+    return false;
+}
+// Check if column should skip filtering (select columns, action columns)
+function shouldSkipFilter(header) {
+    const meta = header.column.columnDef.meta;
+    const columnId = header.column.id.toLowerCase();
+    // Skip select/checkbox columns
+    if (meta?.isSelectColumn || meta?.skipSearch || columnId === 'select')
+        return true;
+    // Skip action columns
+    if (columnId === 'actions' || meta?.isActionColumn)
+        return true;
+    // Skip expand toggle columns
+    if (columnId === 'expand' || meta?.isExpandColumn)
+        return true;
+    return false;
+}
+function FilterCell({ header, isFrozen, isPinnedRight, leftPosition, rightPosition, isLastFrozen, isFirstPinnedRight, isLastColumn, onColumnFilterChange }) {
+    const [localValue, setLocalValue] = useState('');
+    const inputRef = useRef(null);
+    // Get current filter value from table (could be string or object from context menu)
+    const currentFilterValue = header.column.getFilterValue();
+    // Sync local value with table filter value - extract display string from any format
+    useEffect(() => {
+        setLocalValue(extractFilterDisplayValue(currentFilterValue));
+    }, [currentFilterValue]);
+    // Debounced filter update
+    const debouncedSetFilter = useDebouncedCallback((value) => {
+        header.column.setFilterValue(value || undefined);
+        onColumnFilterChange?.();
+    }, 300);
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setLocalValue(value);
+        debouncedSetFilter(value);
+    };
+    const handleClear = () => {
+        setLocalValue('');
+        header.column.setFilterValue(undefined);
+        inputRef.current?.focus();
+    };
+    const skipFilter = shouldSkipFilter(header);
+    const isDate = !skipFilter && isDateColumn(header);
+    const isNumber = !skipFilter && isNumberColumn(header);
+    // Build box-shadow for consistent rendering (no vertical separators in filter row)
+    const cellBoxShadow = [
+        'inset 0 -1px 0 rgb(var(--bd-default))', // Bottom border only
+        ...(isLastFrozen ? ['2px 0 5px -2px rgba(0,0,0,0.1)'] : []),
+        ...(isFirstPinnedRight ? ['-2px 0 5px -2px rgba(0,0,0,0.1)'] : [])
+    ].join(', ');
+    return (_jsx("th", { style: {
+            width: `${header.getSize()}px`,
+            minWidth: `${header.getSize()}px`,
+            height: '2rem',
+            position: 'relative',
+            boxShadow: cellBoxShadow,
+            ...(isFrozen && {
+                position: 'sticky',
+                left: `${leftPosition}px`,
+                zIndex: 11,
+                backgroundColor: 'color-mix(in srgb, rgb(var(--color-primary)) 5%, rgb(var(--bg-surface)))',
+                transform: 'translateZ(0)',
+                willChange: 'transform'
+            }),
+            ...(isPinnedRight && {
+                position: 'sticky',
+                right: `${rightPosition}px`,
+                zIndex: 12,
+                backgroundColor: 'color-mix(in srgb, rgb(var(--color-primary)) 5%, rgb(var(--bg-surface)))',
+                transform: 'translateZ(0)',
+                willChange: 'transform'
+            })
+        }, className: cn('px-1 text-left align-middle', 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,white)]', 'dark:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'), children: skipFilter ? (
+        // Empty cell for select/action columns
+        _jsx("div", { className: "h-full" })) : (_jsxs("div", { className: "relative flex items-center h-full", children: [_jsx("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 pointer-events-none opacity-50", children: isDate ? (_jsx(Calendar, { className: "h-3 w-3 text-[rgb(var(--color-icon))]" })) : (_jsx(Search, { className: "h-3 w-3 text-[rgb(var(--color-icon))]" })) }), _jsx("input", { ref: inputRef, type: isNumber ? 'number' : 'text', value: localValue, onChange: handleChange, placeholder: "", className: cn('w-full h-6 pl-6 pr-5 text-xs', 'bg-[rgb(var(--bg-surface))] rounded', 'focus:outline-none focus:ring-1 focus:ring-[rgb(var(--color-primary))] focus:border-[rgb(var(--color-primary))]', 'placeholder:text-[rgb(var(--fg-muted))]', 'text-[rgb(var(--fg-default))]', 
+                    // Highlight active filter
+                    localValue
+                        ? 'border-2 border-[rgb(var(--color-primary))] bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'
+                        : 'border border-[rgb(var(--bd-default))]') }), localValue && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-1 top-1/2 -translate-y-1/2 p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded transition-colors", children: _jsx(X, { className: "h-3 w-3 text-[rgb(var(--color-icon))]" }) }))] })) }));
+}
+export function FilterRow({ table, frozenColumnsState, isRowReorderingActive, onColumnFilterChange }) {
+    const headerGroups = table.getHeaderGroups();
+    // Get the last header group (bottom-most headers in case of grouped headers)
+    const headerGroup = headerGroups[headerGroups.length - 1];
+    if (!headerGroup)
+        return null;
+    return (_jsxs("tr", { className: "border-t border-b border-[rgb(var(--bd-default))] bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,white)] dark:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]", children: [isRowReorderingActive && (_jsx("th", { style: {
+                    width: '1.875rem',
+                    minWidth: '1.875rem',
+                    maxWidth: '1.875rem',
+                    height: '2rem'
+                }, className: "bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,white)] dark:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]" })), headerGroup.headers.map((header, headerIndex) => {
+                const isFrozen = frozenColumnsState.has(header.id);
+                const isPinnedRight = header.column.getIsPinned() === 'right';
+                const isLastColumn = headerIndex === headerGroup.headers.length - 1;
+                // Check if this is the last frozen column
+                const isLastFrozen = isFrozen && (headerIndex === headerGroup.headers.length - 1 ||
+                    !frozenColumnsState.has(headerGroup.headers[headerIndex + 1]?.id));
+                // Check if this is the first right-pinned column
+                const isFirstPinnedRight = isPinnedRight && (headerIndex === 0 ||
+                    headerGroup.headers[headerIndex - 1]?.column.getIsPinned() !== 'right');
+                // Calculate left position for frozen columns
+                let leftPosition = 0;
+                if (isFrozen) {
+                    for (let i = 0; i < headerIndex; i++) {
+                        const prevHeader = headerGroup.headers[i];
+                        if (frozenColumnsState.has(prevHeader.id)) {
+                            leftPosition += prevHeader.getSize();
+                        }
+                    }
+                }
+                // Calculate right position for right-pinned columns
+                let rightPosition = 0;
+                if (isPinnedRight) {
+                    for (let i = headerIndex + 1; i < headerGroup.headers.length; i++) {
+                        const nextHeader = headerGroup.headers[i];
+                        if (nextHeader.column.getIsPinned() === 'right') {
+                            rightPosition += nextHeader.getSize();
+                        }
+                    }
+                }
+                return (_jsx(FilterCell, { header: header, isFrozen: isFrozen, isPinnedRight: isPinnedRight, leftPosition: leftPosition, rightPosition: rightPosition, isLastFrozen: isLastFrozen, isFirstPinnedRight: isFirstPinnedRight, isLastColumn: isLastColumn, onColumnFilterChange: onColumnFilterChange }, header.id));
+            })] }));
+}

package/dist/components/datagrid/rows/SelectColumn.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDef } from '@tanstack/react-table';
+export declare function createSelectColumn<TData>(): ColumnDef<TData>;

package/dist/components/datagrid/rows/SelectColumn.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createSelectColumn() {
+    return {
+        id: 'select',
+        header: ({ table }) => {
+            return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("input", { type: "checkbox", checked: table.getIsAllPageRowsSelected(), onChange: (e) => {
+                        e.stopPropagation();
+                        table.toggleAllPageRowsSelected(e.target.checked);
+                    }, className: "w-4 h-4 border border-gray-300 rounded cursor-pointer focus:ring-2 focus:ring-blue-500" }) }));
+        },
+        cell: ({ row }) => {
+            return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => {
+                        e.stopPropagation();
+                        row.toggleSelected(e.target.checked);
+                    }, className: "w-4 h-4 border border-gray-300 rounded cursor-pointer focus:ring-2 focus:ring-blue-500" }) }));
+        },
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        enableColumnFilter: false,
+        enableGlobalFilter: false,
+        size: 30,
+        maxSize: 30,
+        minSize: 30,
+        meta: {
+            isSelectColumn: true,
+            skipSearch: true
+        }
+    };
+}

package/dist/components/datagrid/rows/SummaryRow.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+import { SummaryConfig } from '../utils/grid-types.js';
+interface SummaryRowProps<TData> {
+    table: Table<TData>;
+    data: TData[];
+    config: SummaryConfig<TData> | SummaryConfig<TData>[];
+    enableRowSelection?: boolean;
+    showDragHandle?: boolean;
+}
+export declare function SummaryRow<TData>({ table, data, config, enableRowSelection, showDragHandle }: SummaryRowProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/rows/SummaryRow.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateAllSummaries } from './summary.js';
+export function SummaryRow({ table, data, config, enableRowSelection = false, showDragHandle = false }) {
+    const visibleColumns = table.getVisibleLeafColumns();
+    // Support both single config and array of configs
+    const configs = Array.isArray(config) ? config : [config];
+    return (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-[rgb(var(--bg-surface))]", children: configs.map((cfg, configIndex) => {
+            // Calculate summary values for this row
+            const summaries = calculateAllSummaries(data, cfg.columns);
+            return (_jsxs("tr", { className: `${configIndex > 0 ? 'border-t border-[rgb(var(--bd-default))]' : ''} ${cfg.className || 'bg-[rgb(var(--bg-muted))] font-semibold'} [text-decoration:none]`, style: { ...cfg.style, textDecoration: 'none' }, children: [showDragHandle && (_jsx("td", { className: "text-center", style: { width: '1.875rem', minWidth: '1.875rem', maxWidth: '1.875rem' } })), visibleColumns.map((column, index) => {
+                        const columnKey = column.id;
+                        const summaryConfig = cfg.columns[columnKey];
+                        const columnSize = column.getSize();
+                        // If this column has no summary, render empty cell
+                        if (!summaryConfig) {
+                            return (_jsx("td", { className: "px-2 py-1 text-xs", style: { width: `${columnSize}px`, maxWidth: `${columnSize}px` }, suppressHydrationWarning: true }, columnKey));
+                        }
+                        // Get calculated value
+                        const value = summaries[columnKey];
+                        return (_jsx("td", { className: `px-2 py-1 text-xs ${summaryConfig.className || 'text-right'} [text-decoration:none]`, style: { width: `${columnSize}px`, maxWidth: `${columnSize}px`, textDecoration: 'none' }, suppressHydrationWarning: true, children: _jsxs("div", { className: "line-clamp-2 [text-decoration:none]", style: {
+                                    textDecoration: 'none',
+                                    display: '-webkit-box',
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: 'vertical',
+                                    overflow: 'hidden',
+                                    wordBreak: 'break-word'
+                                }, children: [summaryConfig.label && (_jsx("span", { className: "mr-1 [text-decoration:none]", style: { textDecoration: 'none' }, children: summaryConfig.label })), _jsx("span", { className: "font-bold text-[rgb(var(--color-primary))] [text-decoration:none]", style: { textDecoration: 'none' }, children: value })] }) }, columnKey));
+                    })] }, configIndex));
+        }) }));
+}

package/dist/components/datagrid/rows/summary.d.ts

@@ -0,0 +1,9 @@
+import { ColumnSummary } from '../utils/grid-types.js';
+/**
+ * Calculate summary value for a column based on aggregation type
+ */
+export declare function calculateSummary<TData>(data: TData[], columnKey: string, config: ColumnSummary<TData>): string | number;
+/**
+ * Calculate all summaries for the grid
+ */
+export declare function calculateAllSummaries<TData>(data: TData[], summaryConfig: Record<string, ColumnSummary<TData>>): Record<string, string | number>;

package/dist/components/datagrid/rows/summary.js

@@ -0,0 +1,63 @@
+'use client';
+/**
+ * Calculate summary value for a column based on aggregation type
+ */
+export function calculateSummary(data, columnKey, config) {
+    // Handle custom aggregation with customFn (receives data array)
+    if (config.type === 'custom' && config.customFn) {
+        return config.customFn(data);
+    }
+    // Handle custom value (no data dependency - just returns value)
+    if (config.type === 'custom' && config.customValue) {
+        return config.customValue();
+    }
+    // Extract values from data for the column
+    const values = data
+        .map((row) => row[columnKey])
+        .filter((val) => val !== null && val !== undefined && val !== '')
+        .map((val) => {
+        // Try to convert to number
+        const num = typeof val === 'number' ? val : parseFloat(val);
+        return isNaN(num) ? null : num;
+    })
+        .filter((val) => val !== null);
+    if (values.length === 0) {
+        return config.type === 'count' ? 0 : '';
+    }
+    let result;
+    switch (config.type) {
+        case 'sum':
+            result = values.reduce((sum, val) => sum + val, 0);
+            break;
+        case 'avg':
+            result = values.reduce((sum, val) => sum + val, 0) / values.length;
+            break;
+        case 'count':
+            result = values.length;
+            break;
+        case 'min':
+            result = Math.min(...values);
+            break;
+        case 'max':
+            result = Math.max(...values);
+            break;
+        default:
+            return '';
+    }
+    // Apply custom formatting if provided
+    if (config.format) {
+        return config.format(result);
+    }
+    // Default formatting
+    return result;
+}
+/**
+ * Calculate all summaries for the grid
+ */
+export function calculateAllSummaries(data, summaryConfig) {
+    const summaries = {};
+    for (const [columnKey, config] of Object.entries(summaryConfig)) {
+        summaries[columnKey] = calculateSummary(data, columnKey, config);
+    }
+    return summaries;
+}

package/dist/components/datagrid/search/InlineSearchCell.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface InlineSearchCellProps {
+    value: any;
+    columnId: string;
+    rowId: string;
+    onSearch: (columnId: string, searchTerm: string) => void;
+    onClearSearch: (columnId: string) => void;
+    isSearchActive: boolean;
+    searchTerm: string;
+    className?: string;
+}
+export declare function InlineSearchCell({ value, columnId, rowId, onSearch, onClearSearch, isSearchActive, searchTerm, className }: InlineSearchCellProps): React.JSX.Element;
+export {};

package/dist/components/datagrid/search/InlineSearchCell.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Search } from 'lucide-react';
+export function InlineSearchCell({ value, columnId, rowId, onSearch, onClearSearch, isSearchActive, searchTerm, className = '' }) {
+    const [localSearchTerm, setLocalSearchTerm] = useState(searchTerm);
+    const [isTyping, setIsTyping] = useState(false);
+    const [typingTimeout, setTypingTimeout] = useState(null);
+    const cellRef = useRef(null);
+    // Update local search term when prop changes
+    useEffect(() => {
+        setLocalSearchTerm(searchTerm);
+    }, [searchTerm]);
+    // Reset typing timer function
+    const resetTypingTimer = () => {
+        // Clear existing timeout
+        if (typingTimeout) {
+            clearTimeout(typingTimeout);
+        }
+        // Set new timeout to stop typing indicator
+        const timeout = setTimeout(() => {
+            setIsTyping(false);
+        }, 1500);
+        setTypingTimeout(timeout);
+    };
+    // Handle direct typing on the cell
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            // Only handle if this cell is focused or clicked
+            if (!cellRef.current || !cellRef.current.contains(document.activeElement))
+                return;
+            // Handle backspace to clear search
+            if (event.key === 'Backspace') {
+                event.preventDefault();
+                if (localSearchTerm.length > 0) {
+                    const newTerm = localSearchTerm.slice(0, -1);
+                    setLocalSearchTerm(newTerm);
+                    onSearch(columnId, newTerm);
+                }
+                else {
+                    onClearSearch(columnId);
+                }
+                setIsTyping(true);
+                resetTypingTimer();
+                return;
+            }
+            // Handle escape to clear search
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setLocalSearchTerm('');
+                onClearSearch(columnId);
+                setIsTyping(false);
+                cellRef.current?.blur();
+                return;
+            }
+            // Handle printable characters
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                event.preventDefault();
+                const newTerm = localSearchTerm + event.key;
+                setLocalSearchTerm(newTerm);
+                onSearch(columnId, newTerm);
+                setIsTyping(true);
+                resetTypingTimer();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            if (typingTimeout) {
+                clearTimeout(typingTimeout);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localSearchTerm, columnId, onSearch, onClearSearch]);
+    const handleCellClick = () => {
+        // Make cell focusable for keyboard input
+        if (cellRef.current) {
+            cellRef.current.focus();
+        }
+    };
+    // Highlight matching text in the display value
+    const renderHighlightedText = (text, highlight) => {
+        if (!highlight || !text)
+            return text;
+        const parts = text.toString().split(new RegExp(`(${highlight})`, 'gi'));
+        return (_jsx(_Fragment, { children: parts.map((part, index) => part.toLowerCase() === highlight.toLowerCase() ? (_jsx("mark", { className: "bg-yellow-200 text-yellow-900 px-0.5 rounded", children: part }, index)) : (_jsx("span", { children: part }, index))) }));
+    };
+    const displayValue = value?.toString() || '';
+    return (_jsxs("div", { ref: cellRef, tabIndex: 0, className: `bacchasearch relative group cursor-pointer outline-none inline-flex items-center w-full ${className}`, onClick: handleCellClick, children: [_jsx("span", { className: `
+          text-xs flex-1 rounded transition-colors
+          ${isSearchActive ? 'bg-[rgb(var(--color-primary)/0.1)]' : 'hover:bg-[rgb(var(--color-primary)/0.05)]'}
+          ${isTyping ? 'ring-1 ring-[rgb(var(--color-primary)/0.3)] bg-[rgb(var(--color-primary)/0.15)]' : ''}
+        `, children: isSearchActive && searchTerm ?
+                    renderHighlightedText(displayValue, searchTerm) :
+                    displayValue }), _jsx(Search, { className: `h-3 w-3 text-[rgb(var(--fg-muted))] ml-0.5 flex-shrink-0 transition-opacity ${isTyping ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}` }), (isTyping || isSearchActive) && (_jsx("div", { className: "absolute -top-0.5 -right-0.5", children: _jsx("div", { className: `h-1.5 w-1.5 rounded-full ${isTyping ? 'bg-[rgb(var(--color-success))]' : 'bg-[rgb(var(--color-primary))]'}` }) })), isTyping && localSearchTerm && (_jsxs("div", { className: "absolute -bottom-5 left-0 bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] text-xs px-1.5 py-0.5 rounded shadow-lg border border-[rgb(var(--bd-default))] z-10 whitespace-nowrap", children: ["\"", localSearchTerm, "\""] }))] }));
+}