indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/datagrid/cells/BooleanCell.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanCell = BooleanCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Standardized Boolean Cell Component for DataGrid
+ * Displays a compact checkmark or X icon in a colored circle
+ * Matches the Die availability column style from machine planning grid
+ */
+function BooleanCell({ value, variant = 'success' }) {
+    // Color mapping based on variant
+    const colors = {
+        success: {
+            bg: 'bg-[rgb(var(--color-success-subtle))]',
+            text: 'text-[rgb(var(--color-success))]',
+            falseBg: 'bg-[rgb(var(--bg-hover))]',
+            falseText: 'text-[rgb(var(--fg-muted))]'
+        },
+        info: {
+            bg: 'bg-[rgb(var(--color-primary-subtle))]',
+            text: 'text-[rgb(var(--color-primary))]',
+            falseBg: 'bg-[rgb(var(--bg-hover))]',
+            falseText: 'text-[rgb(var(--fg-muted))]'
+        },
+        warning: {
+            bg: 'bg-[rgb(var(--color-warning-subtle))]',
+            text: 'text-[rgb(var(--color-warning))]',
+            falseBg: 'bg-[rgb(var(--bg-hover))]',
+            falseText: 'text-[rgb(var(--fg-muted))]'
+        },
+        danger: {
+            bg: 'bg-[rgb(var(--color-error-subtle))]',
+            text: 'text-[rgb(var(--color-error))]',
+            falseBg: 'bg-[rgb(var(--bg-hover))]',
+            falseText: 'text-[rgb(var(--fg-muted))]'
+        }
+    };
+    const colorScheme = colors[variant];
+    return value ? ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full ${colorScheme.bg} ${colorScheme.text}`, children: (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })) : ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full ${colorScheme.falseBg} ${colorScheme.falseText}`, children: (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }));
+}
+BooleanCell.displayName = 'BooleanCell';

package/dist/cjs/components/datagrid/cells/CellRenderer.js

@@ -0,0 +1,142 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellRenderer = CellRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_table_1 = require("@tanstack/react-table");
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../../ui/index.js");
+function CellRenderer({ cell, cellIndex, row, enableBacchaSearch = false, mainColumnsArray = [], frozenColumnsState = new Set(), navigationState = {}, columnSearches = {}, isColumnSearchActive = {}, onColumnSearch, onClearColumnSearch, SearchHighlighter, InlineSearchCell, isSelected = false }) {
+    const cellValue = cell.getValue();
+    const cellString = String(cellValue ?? '').trim();
+    // Simple and reliable badge detection
+    // Check if the column cell renderer returns a Badge or BooleanCell
+    const cellRenderer = cell.column.columnDef.cell;
+    const cellRendererString = cellRenderer?.toString() || '';
+    // Check if cell uses Badge or BooleanCell components
+    const isBadgeColumn = cellRendererString.includes('Badge') ||
+        cellRendererString.includes('BooleanCell') ||
+        cellRendererString.includes('rounded-full') ||
+        cellRendererString.includes('inline-flex');
+    // Check if cell value is a placeholder (dash, hyphen, empty indicator)
+    // These should be center aligned like badges
+    const isPlaceholderValue = cellString === '-' || cellString === '–' || cellString === '—' || cellString === 'N/A' || cellString === 'n/a' || cellString === '';
+    // Excel-like alignment: Numbers RIGHT, Text/Strings LEFT, Placeholders CENTER
+    // Only align RIGHT if the value is truly numeric (not mixed alphanumeric)
+    const isNumericContent = (() => {
+        // Type check - if JavaScript knows it's a number, align right
+        if (typeof cellValue === 'number')
+            return true;
+        // Empty or null values - treat as text (left align)
+        if (!cellString || cellString === 'null' || cellString === 'undefined')
+            return false;
+        // Pure number string (including decimals, negatives)
+        // Matches: 123, -456, 12.5, 0.5, .5, 5.
+        if (/^-?\d*\.?\d+$/.test(cellString))
+            return true;
+        // Formatted numbers with commas: 1,234 or 1,234.56
+        if (/^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(cellString))
+            return true;
+        // Percentages: 50%, 12.5%, -5%
+        if (/^-?\d+\.?\d*%$/.test(cellString))
+            return true;
+        // Currency formats: $100, ₹1,234, €50.00, 100$, 1234₹
+        if (/^[\$€£¥₹₽]\s?-?\d[\d,]*\.?\d*$/.test(cellString))
+            return true;
+        if (/^-?\d[\d,]*\.?\d*\s?[\$€£¥₹₽]$/.test(cellString))
+            return true;
+        // Dimensions: 437x420, 437 x 420, 10×20, 489.5×882.4, 95.5×915
+        if (/^\d+\.?\d*\s*[xX×]\s*\d+\.?\d*$/.test(cellString))
+            return true;
+        // Parenthesized numbers (accounting negative): (100), (1,234.56)
+        if (/^\(\d[\d,]*\.?\d*\)$/.test(cellString))
+            return true;
+        // Scientific notation: 1e5, 2.5E-10
+        if (/^-?\d+\.?\d*[eE][+-]?\d+$/.test(cellString))
+            return true;
+        // Fractions: 1/2, 3/4
+        if (/^\d+\/\d+$/.test(cellString))
+            return true;
+        // Everything else (strings, mixed content) - align LEFT
+        return false;
+    })();
+    const columnKey = cell.column.id || cell.column.columnDef.accessorKey;
+    const isSelectColumn = cell.column.columnDef.meta?.isSelectColumn ||
+        cell.column.columnDef.meta?.skipSearch ||
+        cell.column.id === 'select' ||
+        columnKey === 'select';
+    const isMainColumn = enableBacchaSearch && !isSelectColumn && columnKey && mainColumnsArray.includes(columnKey);
+    const isCellFrozen = frozenColumnsState.has(cell.column.id);
+    const isPinnedRight = cell.column.getIsPinned() === 'right';
+    const visibleCells = row.getVisibleCells();
+    const isLastFrozenCell = isCellFrozen && (cellIndex === visibleCells.length - 1 ||
+        !frozenColumnsState.has(visibleCells[cellIndex + 1]?.column.id));
+    const isFirstPinnedRightCell = isPinnedRight && (cellIndex === 0 ||
+        visibleCells[cellIndex - 1]?.column.getIsPinned() !== 'right');
+    // Calculate left position for frozen cells
+    let leftPosition = 0;
+    if (isCellFrozen) {
+        for (let i = 0; i < cellIndex; i++) {
+            const prevCell = visibleCells[i];
+            if (frozenColumnsState.has(prevCell.column.id)) {
+                leftPosition += prevCell.column.getSize();
+            }
+        }
+    }
+    // Calculate right position for right-pinned cells
+    let rightPosition = 0;
+    if (isPinnedRight) {
+        for (let i = cellIndex + 1; i < visibleCells.length; i++) {
+            const nextCell = visibleCells[i];
+            if (nextCell.column.getIsPinned() === 'right') {
+                rightPosition += nextCell.column.getSize();
+            }
+        }
+    }
+    const rowId = row.original.id || row.id;
+    return ((0, jsx_runtime_1.jsx)("td", { className: `
+        px-1 py-1 text-xs text-fg-default align-middle
+        ${isBadgeColumn || isPlaceholderValue ? 'text-center' : isNumericContent ? 'text-right' : 'text-left'}
+        ${isCellFrozen || isPinnedRight ? 'sticky z-[5]' : ''}
+      `, style: {
+            width: `${cell.column.getSize()}px`,
+            minWidth: `${cell.column.getSize()}px`,
+            // No maxWidth - allows user to drag columns wider than predefined width
+            // Use box-shadow instead of border to prevent subpixel rendering issues at different zoom levels
+            boxShadow: `inset 0 -1px 0 rgb(var(--bd-default))${isLastFrozenCell ? ', 2px 0 5px -2px rgba(0,0,0,0.1)' : ''}${isFirstPinnedRightCell ? ', -2px 0 5px -2px rgba(0,0,0,0.1)' : ''}`,
+            ...(isCellFrozen && {
+                position: 'sticky',
+                left: `${leftPosition}px`,
+                backgroundColor: isSelected
+                    ? 'color-mix(in srgb, rgb(var(--color-primary)) 8%, rgb(var(--bg-surface)))'
+                    : 'var(--dg-row-bg, rgb(var(--bg-surface)))',
+                transform: 'translateZ(0)',
+                willChange: 'transform',
+            }),
+            ...(isPinnedRight && {
+                position: 'sticky',
+                right: `${rightPosition}px`,
+                backgroundColor: isSelected
+                    ? 'color-mix(in srgb, rgb(var(--color-primary)) 8%, rgb(var(--bg-surface)))'
+                    : 'var(--dg-row-bg, rgb(var(--bg-surface)))',
+                transform: 'translateZ(0)',
+                willChange: 'transform',
+            })
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: "relative", title: typeof cellValue === 'string' ? cellValue : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: cell.getIsGrouped() ? (
+                    // This is a grouped cell - show expand/collapse toggle with group value
+                    (0, jsx_runtime_1.jsxs)("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            row.getToggleExpandedHandler()();
+                        }, className: "flex items-center gap-1 w-full text-left font-semibold text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))]", children: [row.getIsExpanded() ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 flex-shrink-0" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 flex-shrink-0" })), (0, jsx_runtime_1.jsx)("span", { children: cellString }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-[rgb(var(--fg-muted))]", children: ["(", row.subRows?.length || 0, ")"] })] })) : cell.getIsAggregated() ? (
+                    // This is an aggregated cell - show aggregated value
+                    (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))] italic", children: (0, react_table_1.flexRender)(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : (
+                    // Regular cell rendering
+                    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMainColumn && InlineSearchCell ? ((0, jsx_runtime_1.jsx)(InlineSearchCell, { value: cellString, columnId: columnKey, rowId: rowId, onSearch: onColumnSearch, onClearSearch: onClearColumnSearch, isSearchActive: isColumnSearchActive[columnKey] || false, searchTerm: columnSearches[columnKey] || '', className: "w-full" })) : isSelectColumn ? (
+                        // Always render select column (checkbox/radio) normally, never apply search highlighting
+                        (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())) : (
+                        // Regular cell content with search highlighting for global search.
+                        // IMPORTANT: columns with custom cell renderers (badges, buttons, formatted numbers)
+                        // must always use flexRender — highlighting the raw cellString would bypass
+                        // their JSX output and show raw backend values like "MarginApproved".
+                        navigationState.searchTerm && SearchHighlighter && !cellRenderer ? ((0, jsx_runtime_1.jsx)(SearchHighlighter, { text: cellString, searchTerm: navigationState.searchTerm })) : ((0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))) })) }) }) }) }, cell.id));
+}

package/dist/cjs/components/datagrid/cells/EditableCell.js

@@ -0,0 +1,217 @@
+'use client';
+"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.EditableTableCell = void 0;
+exports.EditableCell = EditableCell;
+exports.useCellEditing = useCellEditing;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ui_1 = require("../../ui/index.js");
+const components_1 = require("../../index.js");
+const utils_1 = require("../../../lib/utils.js");
+function EditableCell({ value, rowId, columnId, onSave, onCancel, onNavigate, editable = true, type = 'number', options = [], className = '', formatDisplay = (val) => val.toLocaleString('en-IN', { minimumFractionDigits: 2 }), currencySymbol = '', trackEdits = false, originalValue, isEdited: externalIsEdited }) {
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [editValue, setEditValue] = (0, react_1.useState)(value?.toString() || '');
+    const [hasBeenEdited, setHasBeenEdited] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const selectRef = (0, react_1.useRef)(null);
+    const savedRef = (0, react_1.useRef)(false); // Guard against double-save (Enter + blur)
+    // Determine if field is edited
+    const isEdited = react_1.default.useMemo(() => {
+        // If external control is provided, use that
+        if (externalIsEdited !== undefined)
+            return externalIsEdited;
+        // If tracking is enabled and we have an original value
+        if (trackEdits && originalValue !== undefined) {
+            // Compare values (handle type conversion)
+            return String(value) !== String(originalValue) || hasBeenEdited;
+        }
+        return hasBeenEdited;
+    }, [trackEdits, originalValue, value, externalIsEdited, hasBeenEdited]);
+    // Update editValue when value prop changes (for cost table compatibility)
+    (0, react_1.useEffect)(() => {
+        if (!isEditing) {
+            setEditValue(value?.toString() || '');
+        }
+    }, [value, isEditing]);
+    // Focus input/select when editing starts
+    (0, react_1.useEffect)(() => {
+        if (isEditing) {
+            if (type === 'dropdown' && selectRef.current) {
+                selectRef.current.focus();
+            }
+            else if (inputRef.current) {
+                inputRef.current.focus();
+                inputRef.current.select();
+            }
+        }
+    }, [isEditing, type]);
+    const handleDoubleClick = () => {
+        if (editable) {
+            setEditValue(value?.toString() || '');
+            savedRef.current = false;
+            setIsEditing(true);
+        }
+    };
+    const handleSave = () => {
+        // Prevent double-save: Enter sets isEditing=false → input unmounts → blur fires → save called again with stale value
+        if (savedRef.current)
+            return;
+        savedRef.current = true;
+        const processedValue = type === 'number' ? (parseFloat(editValue) || 0) : editValue;
+        // Mark as edited if value changed
+        if (trackEdits && String(processedValue) !== String(value)) {
+            setHasBeenEdited(true);
+        }
+        // Support both callback signatures (cost table vs DataGrid)
+        if (rowId !== undefined && columnId !== undefined) {
+            // DataGrid signature
+            onSave(rowId, columnId, processedValue);
+        }
+        else {
+            // Cost table signature
+            onSave(processedValue);
+        }
+        setIsEditing(false);
+    };
+    const handleCancel = () => {
+        setEditValue(value?.toString() || '');
+        setIsEditing(false);
+        onCancel?.();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSave();
+            // Move to next cell on Enter (DataGrid feature)
+            onNavigate?.('next');
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            handleCancel();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            handleSave();
+            // Move to next/previous cell on Tab (DataGrid feature)
+            if (e.shiftKey) {
+                onNavigate?.('previous');
+            }
+            else {
+                onNavigate?.('next');
+            }
+        }
+    };
+    const handleBlur = () => {
+        // Save on blur
+        handleSave();
+    };
+    if (!editable) {
+        // Cost table format with currency
+        if (type === 'number' && currencySymbol) {
+            return (0, jsx_runtime_1.jsxs)("span", { className: className, children: [currencySymbol, formatDisplay(Number(value))] });
+        }
+        return (0, jsx_runtime_1.jsx)("span", { className: className, children: value });
+    }
+    if (isEditing) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 w-full", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: type === 'dropdown' ? ((0, jsx_runtime_1.jsx)(components_1.Dropdown, { options: options, value: editValue, onValueChange: (val) => {
+                    setEditValue(val);
+                    // Auto-save on selection
+                    const processedValue = val;
+                    if (rowId !== undefined && columnId !== undefined) {
+                        onSave(rowId, columnId, processedValue);
+                    }
+                    else {
+                        onSave(processedValue);
+                    }
+                    setIsEditing(false);
+                }, placeholder: "Select...", searchable: true, className: "w-full" })) : ((0, jsx_runtime_1.jsx)(ui_1.Input, { ref: inputRef, type: type, value: editValue, onChange: (e) => setEditValue(e.target.value), onKeyDown: handleKeyDown, onBlur: handleBlur, className: "w-full h-9 text-sm px-2", step: type === 'number' ? '0.01' : undefined })) }));
+    }
+    // Get display value
+    let displayValue;
+    if (type === 'dropdown' && options.length > 0) {
+        displayValue = options.find(opt => opt.value === value)?.label || value;
+    }
+    else if (type === 'number' && currencySymbol) {
+        // Cost table format with currency
+        displayValue = `${currencySymbol}${formatDisplay(Number(value))}`;
+    }
+    else {
+        displayValue = value;
+    }
+    return ((0, jsx_runtime_1.jsx)(ui_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { onDoubleClick: handleDoubleClick, className: (0, utils_1.cn)('cursor-pointer px-2 py-0.5 rounded transition-colors h-6', 
+                        // Edited field highlighting
+                        isEdited
+                            ? 'bg-amber-50 dark:bg-amber-950/30 border border-amber-400 dark:border-amber-600 hover:bg-amber-100 dark:hover:bg-amber-950/40'
+                            : 'hover:bg-[rgb(var(--color-primary-subtle))]', type === 'number' ? 'text-right' : '', className), "data-editable-cell": "true", "data-is-edited": isEdited, children: displayValue || '\u00A0' }) }), (0, jsx_runtime_1.jsx)(ui_1.TooltipContent, { children: (0, jsx_runtime_1.jsx)("p", { children: isEdited ? "Manually edited - Double-click to edit" : "Double-click to edit" }) })] }) }));
+}
+// Alias for backward compatibility with cost table
+exports.EditableTableCell = EditableCell;
+// Hook for managing cell editing state
+function useCellEditing() {
+    const [editingCell, setEditingCell] = (0, react_1.useState)(null);
+    const [data, setData] = (0, react_1.useState)([]);
+    const handleCellSave = (rowId, columnId, newValue) => {
+        setData((prevData) => prevData.map((row) => {
+            if (row.id === rowId || prevData.indexOf(row).toString() === rowId) {
+                return {
+                    ...row,
+                    [columnId]: newValue
+                };
+            }
+            return row;
+        }));
+        setEditingCell(null);
+    };
+    const handleCellCancel = () => {
+        setEditingCell(null);
+    };
+    const startEditing = (rowId, columnId) => {
+        setEditingCell({ rowId, columnId });
+    };
+    const isEditing = (rowId, columnId) => {
+        return (editingCell?.rowId === rowId && editingCell?.columnId === columnId);
+    };
+    return {
+        data,
+        setData,
+        editingCell,
+        startEditing,
+        isEditing,
+        handleCellSave,
+        handleCellCancel
+    };
+}

package/dist/cjs/components/datagrid/cells/SelectionCell.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionCell = SelectionCell;
+exports.SelectionCheckbox = SelectionCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+function SelectionCell({ checked, indeterminate = false, onChange, disabled = false, circular = false, mode = 'checkbox', }) {
+    const handleClick = (e) => {
+        e.stopPropagation();
+        if (!disabled) {
+            onChange(!checked);
+        }
+    };
+    // Radio button mode (single selection) - always circular regardless of circularCheckboxes prop
+    if (mode === 'radio') {
+        return ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, className: `
+          relative rounded-full border-2 cursor-pointer transition-all duration-150
+          flex items-center justify-center flex-shrink-0
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          ${checked
+                ? 'border-primary bg-white'
+                : 'border-gray-300 bg-white hover:border-gray-400'}
+        `, style: {
+                boxShadow: checked ? '0 0 0 2px rgba(59, 130, 246, 0.1)' : 'none',
+                width: '14px',
+                height: '14px',
+                minWidth: '14px',
+                minHeight: '14px',
+            }, children: checked && ((0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary transition-all duration-150" })) }));
+    }
+    // Square checkbox (multi-select) - matches dropdown multi-select style
+    if (!circular) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center flex-shrink-0", onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: checked, ref: (el) => {
+                        if (el)
+                            el.indeterminate = indeterminate;
+                    }, onChange: (e) => {
+                        e.stopPropagation();
+                        onChange(e.target.checked);
+                    }, disabled: disabled, className: "peer sr-only" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center cursor-pointer", checked || indeterminate
+                        ? "bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]"
+                        : "border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] hover:border-[rgb(var(--color-primary))]", disabled && "opacity-50 cursor-not-allowed"), children: [checked && !indeterminate && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })), indeterminate && ((0, jsx_runtime_1.jsx)("div", { className: "w-2 h-0.5 bg-white rounded" }))] })] }));
+    }
+    // Circular checkbox (AG Grid style, multi-select with circular prop)
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: handleClick, className: `
+        relative rounded-full border-2 cursor-pointer transition-all duration-150
+        flex items-center justify-center flex-shrink-0
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        ${checked || indeterminate
+            ? 'border-primary bg-primary'
+            : 'border-gray-300 bg-white hover:border-gray-400'}
+      `, style: {
+            boxShadow: checked || indeterminate ? '0 0 0 2px rgba(59, 130, 246, 0.1)' : 'none',
+            width: '14px',
+            height: '14px',
+            minWidth: '14px',
+            minHeight: '14px',
+        }, children: [checked && !indeterminate && ((0, jsx_runtime_1.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-white transition-all duration-150" })), indeterminate && ((0, jsx_runtime_1.jsx)("div", { className: "w-2 h-0.5 bg-white rounded transition-all duration-150" }))] }));
+}

package/dist/cjs/components/datagrid/cells/index.js

@@ -0,0 +1,6 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanCell = void 0;
+var BooleanCell_1 = require("./BooleanCell.js");
+Object.defineProperty(exports, "BooleanCell", { enumerable: true, get: function () { return BooleanCell_1.BooleanCell; } });