indas-ui 0.0.1 → 0.1.0

package/dist/components/datagrid/cells/BooleanCell.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface BooleanCellProps {
+    value: boolean;
+    variant?: 'success' | 'info' | 'warning' | 'danger';
+}
+/**
+ * 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
+ */
+export declare function BooleanCell({ value, variant }: BooleanCellProps): React.JSX.Element;
+export declare namespace BooleanCell {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "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
+ */
+export 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 ? (_jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full ${colorScheme.bg} ${colorScheme.text}`, children: _jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: _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" }) }) })) : (_jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full ${colorScheme.falseBg} ${colorScheme.falseText}`, children: _jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: _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/components/datagrid/cells/CellRenderer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Cell } from '@tanstack/react-table';
+interface CellRendererProps<TData> {
+    cell: Cell<TData, unknown>;
+    cellIndex: number;
+    row: any;
+    enableBacchaSearch?: boolean;
+    mainColumnsArray?: string[];
+    frozenColumnsState?: Set<string>;
+    navigationState?: {
+        searchTerm?: string;
+    };
+    columnSearches?: Record<string, string>;
+    isColumnSearchActive?: Record<string, boolean>;
+    onColumnSearch?: (columnId: string, rowId: string, value: string) => void;
+    onClearColumnSearch?: (columnId: string) => void;
+    SearchHighlighter?: React.ComponentType<{
+        text: string;
+        searchTerm: string;
+    }>;
+    InlineSearchCell?: React.ComponentType<any>;
+    isSelected?: boolean;
+}
+export declare function CellRenderer<TData>({ cell, cellIndex, row, enableBacchaSearch, mainColumnsArray, frozenColumnsState, navigationState, columnSearches, isColumnSearchActive, onColumnSearch, onClearColumnSearch, SearchHighlighter, InlineSearchCell, isSelected }: CellRendererProps<TData>): React.JSX.Element;
+export {};

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

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { ChevronRight, ChevronDown } from 'lucide-react';
+import { TooltipProvider } from '../../ui/index.js';
+export 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 (_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: _jsx(TooltipProvider, { children: _jsx("div", { className: "relative", title: typeof cellValue === 'string' ? cellValue : undefined, children: _jsx("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: cell.getIsGrouped() ? (
+                    // This is a grouped cell - show expand/collapse toggle with group value
+                    _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() ? (_jsx(ChevronDown, { className: "h-4 w-4 flex-shrink-0" })) : (_jsx(ChevronRight, { className: "h-4 w-4 flex-shrink-0" })), _jsx("span", { children: cellString }), _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
+                    _jsx("span", { className: "text-[rgb(var(--fg-muted))] italic", children: flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : (
+                    // Regular cell rendering
+                    _jsx(_Fragment, { children: isMainColumn && InlineSearchCell ? (_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
+                        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 ? (_jsx(SearchHighlighter, { text: cellString, searchTerm: navigationState.searchTerm })) : (flexRender(cell.column.columnDef.cell, cell.getContext()))) })) }) }) }) }, cell.id));
+}

package/dist/components/datagrid/cells/EditableCell.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface EditableCellProps {
+    value: any;
+    rowId?: string;
+    columnId?: string;
+    onSave: ((rowId: string, columnId: string, newValue: any) => void) | ((newValue: any) => void);
+    onCancel?: () => void;
+    onNavigate?: (direction: 'next' | 'previous') => void;
+    editable?: boolean;
+    type?: 'text' | 'number' | 'date' | 'email' | 'dropdown';
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    className?: string;
+    formatDisplay?: (value: number) => string;
+    currencySymbol?: string;
+    trackEdits?: boolean;
+    originalValue?: any;
+    isEdited?: boolean;
+}
+export declare function EditableCell({ value, rowId, columnId, onSave, onCancel, onNavigate, editable, type, options, className, formatDisplay, currencySymbol, trackEdits, originalValue, isEdited: externalIsEdited }: EditableCellProps): React.JSX.Element;
+export declare const EditableTableCell: typeof EditableCell;
+export declare function useCellEditing<TData>(): {
+    data: TData[];
+    setData: React.Dispatch<React.SetStateAction<TData[]>>;
+    editingCell: {
+        rowId: string;
+        columnId: string;
+    };
+    startEditing: (rowId: string, columnId: string) => void;
+    isEditing: (rowId: string, columnId: string) => boolean;
+    handleCellSave: (rowId: string, columnId: string, newValue: any) => void;
+    handleCellCancel: () => void;
+};

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

@@ -0,0 +1,179 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from 'react';
+import { Input, Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../ui/index.js';
+import { Dropdown } from '../../index.js';
+import { cn } from '../../../lib/utils.js';
+export 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] = useState(false);
+    const [editValue, setEditValue] = useState(value?.toString() || '');
+    const [hasBeenEdited, setHasBeenEdited] = useState(false);
+    const inputRef = useRef(null);
+    const selectRef = useRef(null);
+    const savedRef = useRef(false); // Guard against double-save (Enter + blur)
+    // Determine if field is edited
+    const isEdited = React.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)
+    useEffect(() => {
+        if (!isEditing) {
+            setEditValue(value?.toString() || '');
+        }
+    }, [value, isEditing]);
+    // Focus input/select when editing starts
+    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 _jsxs("span", { className: className, children: [currencySymbol, formatDisplay(Number(value))] });
+        }
+        return _jsx("span", { className: className, children: value });
+    }
+    if (isEditing) {
+        return (_jsx("div", { className: "flex items-center gap-1 w-full", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: type === 'dropdown' ? (_jsx(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" })) : (_jsx(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 (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { onDoubleClick: handleDoubleClick, className: 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' }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isEdited ? "Manually edited - Double-click to edit" : "Double-click to edit" }) })] }) }));
+}
+// Alias for backward compatibility with cost table
+export const EditableTableCell = EditableCell;
+// Hook for managing cell editing state
+export function useCellEditing() {
+    const [editingCell, setEditingCell] = useState(null);
+    const [data, setData] = 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/components/datagrid/cells/SelectionCell.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SelectionCellProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    circular?: boolean;
+    mode?: 'checkbox' | 'radio';
+}
+export declare function SelectionCell({ checked, indeterminate, onChange, disabled, circular, mode, }: SelectionCellProps): React.JSX.Element;
+export { SelectionCell as SelectionCheckbox };

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export 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 (_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 && (_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 (_jsxs("div", { className: "relative flex items-center justify-center flex-shrink-0", onClick: handleClick, children: [_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" }), _jsxs("div", { className: 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 && (_jsx(Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })), indeterminate && (_jsx("div", { className: "w-2 h-0.5 bg-white rounded" }))] })] }));
+    }
+    // Circular checkbox (AG Grid style, multi-select with circular prop)
+    return (_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 && (_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-white transition-all duration-150" })), indeterminate && (_jsx("div", { className: "w-2 h-0.5 bg-white rounded transition-all duration-150" }))] }));
+}
+// Backward compatibility
+export { SelectionCell as SelectionCheckbox };

package/dist/components/datagrid/cells/index.d.ts

@@ -0,0 +1 @@
+export { BooleanCell } from './BooleanCell.js';

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

@@ -0,0 +1,2 @@
+'use client';
+export { BooleanCell } from './BooleanCell.js';