indas-ui 0.0.1 → 0.1.1

package/dist/hooks/useGridTheme.js

@@ -0,0 +1,199 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+const DEFAULT_CONFIG = {
+    theme: 'auto',
+    autoDetectSystemTheme: true
+};
+/**
+ * Hook for managing grid theme with system preference detection
+ * and persistent storage
+ */
+export function useGridTheme(initialConfig = {}) {
+    const config = { ...DEFAULT_CONFIG, ...initialConfig };
+    const [currentTheme, setCurrentTheme] = useState(() => {
+        if (typeof window === 'undefined')
+            return config.theme;
+        try {
+            const stored = localStorage.getItem('grid-theme');
+            return stored || config.theme;
+        }
+        catch {
+            return config.theme;
+        }
+    });
+    const [systemTheme, setSystemTheme] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    });
+    // Detect system theme changes
+    useEffect(() => {
+        if (!config.autoDetectSystemTheme || typeof window === 'undefined')
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e) => {
+            setSystemTheme(e.matches ? 'dark' : 'light');
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [config.autoDetectSystemTheme]);
+    // Determine the actual theme to apply
+    const resolvedTheme = currentTheme === 'auto' ? systemTheme : currentTheme;
+    // Apply theme to document
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        // Set theme attribute on document root
+        document.documentElement.setAttribute('data-theme', resolvedTheme);
+        // Also set a class for easier CSS targeting
+        document.documentElement.className = document.documentElement.className
+            .replace(/theme-\w+/g, '')
+            .concat(` theme-${resolvedTheme}`)
+            .trim();
+        // Store preference
+        try {
+            localStorage.setItem('grid-theme', currentTheme);
+        }
+        catch {
+            // Ignore localStorage errors
+        }
+    }, [currentTheme, resolvedTheme]);
+    // Apply custom colors
+    useEffect(() => {
+        if (!config.customColors || typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        if (config.customColors) {
+            Object.entries(config.customColors).forEach(([property, value]) => {
+                root.style.setProperty(`--grid-${property}`, value);
+            });
+        }
+        return () => {
+            // Cleanup custom properties
+            if (config.customColors) {
+                Object.keys(config.customColors).forEach(property => {
+                    root.style.removeProperty(`--grid-${property}`);
+                });
+            }
+        };
+    }, [config.customColors]);
+    // Change theme
+    const setTheme = useCallback((newTheme) => {
+        setCurrentTheme(newTheme);
+    }, []);
+    // Toggle between light and dark
+    const toggleTheme = useCallback(() => {
+        setCurrentTheme(current => {
+            if (current === 'auto') {
+                return systemTheme === 'light' ? 'dark' : 'light';
+            }
+            return current === 'light' ? 'dark' : 'light';
+        });
+    }, [systemTheme]);
+    // Reset to auto/system theme
+    const resetToSystemTheme = useCallback(() => {
+        setCurrentTheme('auto');
+    }, []);
+    // Get CSS custom properties for the current theme
+    const getThemeProperties = useCallback(() => {
+        if (typeof window === 'undefined')
+            return {};
+        const computedStyle = getComputedStyle(document.documentElement);
+        const properties = {};
+        // Extract all grid-related CSS variables
+        const rootStyle = document.documentElement.style;
+        for (let i = 0; i < rootStyle.length; i++) {
+            const property = rootStyle[i];
+            if (property.startsWith('--grid-')) {
+                properties[property] = computedStyle.getPropertyValue(property).trim();
+            }
+        }
+        return properties;
+    }, []);
+    // Apply custom color overrides
+    const setCustomColors = useCallback((colors) => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        Object.entries(colors).forEach(([property, value]) => {
+            root.style.setProperty(`--grid-${property}`, value);
+        });
+    }, []);
+    // Clear custom color overrides
+    const clearCustomColors = useCallback(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const style = root.style;
+        // Remove all custom grid properties
+        for (let i = style.length - 1; i >= 0; i--) {
+            const property = style[i];
+            if (property.startsWith('--grid-')) {
+                style.removeProperty(property);
+            }
+        }
+    }, []);
+    // Check if system supports dark mode
+    const systemSupportsDarkMode = typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all';
+    // Get theme status information
+    const themeInfo = {
+        current: currentTheme,
+        resolved: resolvedTheme,
+        isAuto: currentTheme === 'auto',
+        isDark: resolvedTheme === 'dark',
+        isLight: resolvedTheme === 'light',
+        isHighContrast: resolvedTheme === 'high-contrast',
+        systemTheme,
+        systemSupportsDarkMode
+    };
+    return {
+        ...themeInfo,
+        setTheme,
+        toggleTheme,
+        resetToSystemTheme,
+        getThemeProperties,
+        setCustomColors,
+        clearCustomColors
+    };
+}
+// Utility function to get theme-aware CSS classes
+export function getThemeClasses(theme = 'auto') {
+    const classes = ['advanced-data-grid'];
+    if (theme !== 'auto') {
+        classes.push(`theme-${theme}`);
+    }
+    return classes.join(' ');
+}
+// Predefined theme configurations
+export const THEME_PRESETS = {
+    default: {
+        theme: 'auto',
+        autoDetectSystemTheme: true
+    },
+    corporate: {
+        theme: 'light',
+        customColors: {
+            'accent-primary': '#1e40af',
+            'accent-secondary': '#1e3a8a',
+            'header-bg': '#f8fafc',
+            'border-primary': '#e2e8f0'
+        }
+    },
+    minimal: {
+        theme: 'light',
+        customColors: {
+            'border-primary': '#f1f5f9',
+            'header-bg': '#ffffff',
+            'bg-hover': '#fafafa'
+        }
+    },
+    vibrant: {
+        theme: 'dark',
+        customColors: {
+            'accent-primary': '#8b5cf6',
+            'accent-secondary': '#a78bfa',
+            'bg-selected': '#5b21b6'
+        }
+    }
+};

package/dist/hooks/useId.d.ts

@@ -0,0 +1,2 @@
+export declare function useClientId(prefix?: string): string;
+export declare function useUniqueId(prefix?: string): string;

package/dist/hooks/useId.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from 'react';
+let idCounter = 0;
+export function useClientId(prefix = 'id') {
+    const [id, setId] = useState(`${prefix}-ssr`);
+    useEffect(() => {
+        setId(`${prefix}-${++idCounter}`);
+    }, [prefix]);
+    return id;
+}
+export function useUniqueId(prefix = 'id') {
+    const [id, setId] = useState(`${prefix}-ssr`);
+    useEffect(() => {
+        setId(`${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
+    }, [prefix]);
+    return id;
+}

package/dist/hooks/useIntelligentColumnSizing.d.ts

@@ -0,0 +1,71 @@
+import { ColumnDef } from '@tanstack/react-table';
+export interface ColumnSizingConfig {
+    globalMinWidth?: number;
+    globalMaxWidth?: number;
+    paddingBuffer?: number;
+    sampleSize?: number;
+    enableIntelligentSizing?: boolean;
+}
+export interface ColumnSizeConstraints {
+    minWidth: number;
+    maxWidth: number;
+    contentWidth: number;
+    optimalWidth: number;
+    dataType?: 'text' | 'number' | 'date' | 'boolean' | 'array' | 'badge' | 'action';
+    variance?: number;
+}
+/**
+ * Hook for intelligent column sizing based on content analysis
+ * Automatically calculates optimal column widths based on content
+ * MERGED: Best features from useAutoIntelligentSizing + useIntelligentColumnSizing
+ */
+export declare function useIntelligentColumnSizing<TData>(data: TData[], columns: ColumnDef<TData>[], config?: ColumnSizingConfig): {
+    enhancedColumns: ColumnDef<TData>[];
+    getColumnWidth: (columnId: string) => number;
+    getColumnConstraints: (columnId: string) => ColumnSizeConstraints | null;
+    getSizingSummary: () => Record<string, any>;
+    recalculateWidths: () => Record<string, any>;
+    autoResizeAllColumns: (table: any) => void;
+    smartResize: (columnId: string, table: any) => void;
+    columnAnalysis: {
+        [k: string]: ColumnSizeConstraints;
+    };
+    config: {
+        globalMinWidth: number;
+        globalMaxWidth: number;
+        paddingBuffer: number;
+        sampleSize: number;
+        enableIntelligentSizing: boolean;
+    };
+    stats: {
+        totalColumns: number;
+        avgOptimalWidth: number;
+        minWidth: number;
+        maxWidth: number;
+    };
+};
+/**
+ * Helper function to create a column with intelligent sizing options
+ */
+export declare function createIntelligentColumn<TData>(columnDef: ColumnDef<TData>, sizingOptions?: {
+    minWidth?: number;
+    maxWidth?: number;
+    priority?: 'compact' | 'comfortable' | 'spacious';
+}): ColumnDef<TData>;
+/**
+ * Preset configurations for common use cases
+ */
+export declare const COLUMN_SIZING_PRESETS: {
+    readonly compact: {
+        readonly globalMinWidth: 20;
+        readonly globalMaxWidth: 200;
+        readonly paddingBuffer: 4;
+        readonly sampleSize: 50;
+    };
+    readonly standard: {
+        readonly globalMinWidth: 30;
+        readonly globalMaxWidth: 300;
+        readonly paddingBuffer: 4;
+        readonly sampleSize: 100;
+    };
+};

package/dist/hooks/useIntelligentColumnSizing.js

@@ -0,0 +1,310 @@
+'use client';
+import { useMemo, useCallback } from 'react';
+const DEFAULT_CONFIG = {
+    globalMinWidth: 30, // Very small - will be overridden by content
+    globalMaxWidth: 300, // Maximum column width
+    paddingBuffer: 4, // Extra padding buffer
+    sampleSize: 100, // Sample first 100 rows for performance
+    enableIntelligentSizing: true
+};
+// Internal defaults for calculations
+const CALCULATION_DEFAULTS = {
+    characterWidth: 7, // Average character width for 12px font (text-xs)
+    headerPadding: 8, // 4px left + 4px right (matches px-1 in CSS)
+    cellPadding: 8, // 4px left + 4px right (matches px-1 in CSS)
+};
+/**
+ * Hook for intelligent column sizing based on content analysis
+ * Automatically calculates optimal column widths based on content
+ * MERGED: Best features from useAutoIntelligentSizing + useIntelligentColumnSizing
+ */
+export function useIntelligentColumnSizing(data, columns, config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    // Smart content analyzer - detects data type and calculates optimal width
+    const analyzeContent = useCallback((columnId, sampleData) => {
+        const values = sampleData.map(row => row[columnId]).filter(v => v !== null && v !== undefined);
+        if (values.length === 0) {
+            return {
+                dataType: 'text',
+                widths: [80], // Default fallback
+                avgLength: 0
+            };
+        }
+        // Smart type detection
+        let dataType = 'text';
+        const widths = [];
+        values.forEach(value => {
+            let displayText = '';
+            let detectedType = 'text';
+            if (typeof value === 'number') {
+                detectedType = 'number';
+                // Smart number formatting detection
+                const formattedNumber = value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                if (columnId.toLowerCase().includes('salary') || columnId.toLowerCase().includes('price')) {
+                    displayText = `$${formattedNumber}`;
+                }
+                else if (columnId.toLowerCase().includes('percent') || columnId.toLowerCase().includes('performance')) {
+                    displayText = `${value}%`;
+                }
+                else {
+                    displayText = formattedNumber;
+                }
+            }
+            else if (typeof value === 'boolean') {
+                detectedType = 'boolean';
+                displayText = value ? 'Yes' : 'No';
+            }
+            else if (Array.isArray(value)) {
+                detectedType = 'array';
+                displayText = value.length > 2 ? `${value.slice(0, 2).join(', ')} +${value.length - 2}` : value.join(', ');
+            }
+            else if (typeof value === 'string') {
+                // Smart string type detection
+                if (value.match(/^\d{4}-\d{2}-\d{2}/)) {
+                    detectedType = 'date';
+                }
+                else if (value.length < 20 && ['active', 'inactive', 'pending', 'approved', 'rejected', 'admin', 'user', 'manager'].includes(value.toLowerCase())) {
+                    detectedType = 'badge';
+                }
+                displayText = String(value);
+            }
+            else {
+                displayText = String(value);
+            }
+            // Calculate display width (8px per character average + smart type-based adjustments)
+            let pixelWidth = displayText.length * CALCULATION_DEFAULTS.characterWidth;
+            // Smart adjustments based on content type
+            if (detectedType === 'number')
+                pixelWidth += 10; // Numbers need extra space for formatting
+            if (detectedType === 'badge')
+                pixelWidth += 20; // Badges have padding and borders
+            if (detectedType === 'array')
+                pixelWidth += 15; // Arrays have spacing between items
+            if (detectedType === 'date')
+                pixelWidth += 5; // Dates are consistent but need slight buffer
+            widths.push(pixelWidth);
+            // Set the most common type
+            if (dataType === 'text' || detectedType !== 'text') {
+                dataType = detectedType;
+            }
+        });
+        return {
+            dataType,
+            widths,
+            avgLength: widths.reduce((sum, w) => sum + w, 0) / widths.length
+        };
+    }, []);
+    // Intelligent analysis of all columns
+    const columnAnalysis = useMemo(() => {
+        if (!finalConfig.enableIntelligentSizing || !data.length) {
+            return new Map();
+        }
+        const analysis = new Map();
+        const sampleData = data.slice(0, Math.min(finalConfig.sampleSize, data.length));
+        columns.forEach(column => {
+            const columnId = column.id || column.accessorKey;
+            if (!columnId || columnId === 'select' || columnId === 'actions')
+                return;
+            // Get column configuration from meta
+            const columnMeta = column.meta;
+            const metaMinWidth = columnMeta?.minWidth;
+            const metaMaxWidth = columnMeta?.maxWidth;
+            // Calculate header text width
+            const headerText = typeof column.header === 'string' ? column.header : columnId;
+            const headerWidth = (headerText.length * CALCULATION_DEFAULTS.characterWidth) + CALCULATION_DEFAULTS.headerPadding;
+            // Analyze content with smart type detection
+            const contentAnalysis = analyzeContent(columnId, sampleData);
+            // Calculate content statistics
+            const maxContentWidth = Math.max(...contentAnalysis.widths, 0);
+            const avgContentWidth = contentAnalysis.avgLength;
+            const minContentWidth = Math.min(...contentAnalysis.widths, 0);
+            // Calculate variance (how much content size varies)
+            const variance = contentAnalysis.widths.length > 1
+                ? Math.sqrt(contentAnalysis.widths.reduce((sum, w) => sum + Math.pow(w - avgContentWidth, 2), 0) / contentAnalysis.widths.length)
+                : 0;
+            // BALANCED LOGIC: Compare header vs content, use intelligent rules
+            // Calculate header-to-content ratio
+            const headerToContentRatio = headerWidth / Math.max(maxContentWidth, 1);
+            // Dynamic buffer based on content type
+            let contentBuffer;
+            if (contentAnalysis.dataType === 'badge' || contentAnalysis.dataType === 'boolean') {
+                contentBuffer = 15;
+            }
+            else if (contentAnalysis.dataType === 'number') {
+                contentBuffer = 25;
+            }
+            else if (contentAnalysis.dataType === 'date') {
+                contentBuffer = 20;
+            }
+            else if (variance > avgContentWidth * 0.5) {
+                contentBuffer = 35;
+            }
+            else {
+                contentBuffer = 30;
+            }
+            // Optimal width calculation with intelligent rules
+            let optimalWidth;
+            // Calculate base width from content
+            const baseContentWidth = variance > avgContentWidth * 0.5
+                ? avgContentWidth + contentBuffer
+                : maxContentWidth + contentBuffer;
+            // Rule 1: If header is much wider than content (ratio > 1.8), use compromise
+            if (headerToContentRatio > 1.8) {
+                // Use 60% content + 40% header (let header wrap significantly)
+                optimalWidth = (baseContentWidth * 0.6) + (headerWidth * 0.4);
+            }
+            // Rule 2: If header is moderately wider (ratio 1.2-1.8), use balanced approach
+            else if (headerToContentRatio > 1.2) {
+                // Use 50% content + 50% header (balanced)
+                optimalWidth = (baseContentWidth * 0.5) + (headerWidth * 0.5);
+            }
+            // Rule 3: If content is wider or similar to header, use content
+            else {
+                // Use content width (header fits comfortably)
+                optimalWidth = baseContentWidth;
+            }
+            // Minimum width = reasonable minimum, not too cramped
+            const actualMinWidth = Math.max(minContentWidth + 20, finalConfig.globalMinWidth);
+            // Apply meta overrides if present
+            const finalMinWidth = metaMinWidth || actualMinWidth;
+            const finalMaxWidth = metaMaxWidth || finalConfig.globalMaxWidth;
+            // Final optimal width = content-based but capped at max
+            const finalWidth = Math.min(Math.max(finalMinWidth, optimalWidth), // At least minimum, prefer optimal
+            finalMaxWidth // But never exceed maximum
+            );
+            analysis.set(columnId, {
+                minWidth: finalMinWidth,
+                maxWidth: finalMaxWidth,
+                contentWidth: maxContentWidth,
+                optimalWidth: finalWidth,
+                dataType: contentAnalysis.dataType,
+                variance
+            });
+        });
+        return analysis;
+    }, [data, columns, finalConfig, analyzeContent]);
+    // Get optimal width for a specific column
+    const getColumnWidth = useCallback((columnId) => {
+        const analysis = columnAnalysis.get(columnId);
+        return analysis?.optimalWidth || finalConfig.globalMinWidth;
+    }, [columnAnalysis, finalConfig.globalMinWidth]);
+    // Get sizing constraints for a column
+    const getColumnConstraints = useCallback((columnId) => {
+        return columnAnalysis.get(columnId) || null;
+    }, [columnAnalysis]);
+    // Get sizing summary for debugging/monitoring
+    const getSizingSummary = useCallback(() => {
+        const summary = {};
+        columnAnalysis.forEach((constraints, columnId) => {
+            summary[columnId] = {
+                optimal: constraints.optimalWidth,
+                min: constraints.minWidth,
+                max: constraints.maxWidth,
+                content: constraints.contentWidth,
+                type: constraints.dataType,
+                variance: constraints.variance
+            };
+        });
+        return summary;
+    }, [columnAnalysis]);
+    // Recalculate widths (useful when data changes)
+    const recalculateWidths = useCallback(() => {
+        return getSizingSummary();
+    }, [getSizingSummary]);
+    // Auto-resize all columns to optimal width
+    const autoResizeAllColumns = useCallback((table) => {
+        if (!table?.getAllColumns)
+            return;
+        const allColumns = table.getAllColumns();
+        allColumns.forEach((column) => {
+            const columnId = column.id;
+            const optimalWidth = getColumnWidth(columnId);
+            if (column.setSize) {
+                column.setSize(optimalWidth);
+            }
+        });
+    }, [getColumnWidth]);
+    // Smart resize based on content changes (single column)
+    const smartResize = useCallback((columnId, table) => {
+        const column = table?.getColumn?.(columnId);
+        if (!column?.setSize)
+            return;
+        const optimalWidth = getColumnWidth(columnId);
+        column.setSize(optimalWidth);
+    }, [getColumnWidth]);
+    // Apply intelligent sizing to column definitions
+    const enhancedColumns = useMemo(() => {
+        if (!finalConfig.enableIntelligentSizing) {
+            return columns;
+        }
+        return columns.map(column => {
+            const columnId = column.id || column.accessorKey;
+            if (!columnId)
+                return column;
+            const constraints = columnAnalysis.get(columnId);
+            if (!constraints)
+                return column;
+            return {
+                ...column,
+                size: constraints.optimalWidth,
+                minSize: constraints.minWidth,
+                // maxSize intentionally not set here - allows users to drag columns wider than calculated optimal
+                // The calculated maxWidth is only used for auto-sizing, not for limiting manual resize
+                enableResizing: true
+            };
+        });
+    }, [columns, columnAnalysis, finalConfig]);
+    return {
+        // Enhanced columns with intelligent sizing
+        enhancedColumns,
+        // Utilities
+        getColumnWidth,
+        getColumnConstraints,
+        getSizingSummary,
+        recalculateWidths,
+        autoResizeAllColumns,
+        smartResize,
+        // Analysis data
+        columnAnalysis: Object.fromEntries(columnAnalysis),
+        // Configuration
+        config: finalConfig,
+        // Statistics
+        stats: {
+            totalColumns: columnAnalysis.size,
+            avgOptimalWidth: Array.from(columnAnalysis.values()).reduce((sum, c) => sum + c.optimalWidth, 0) / columnAnalysis.size || 0,
+            minWidth: Math.min(...Array.from(columnAnalysis.values()).map(c => c.optimalWidth), finalConfig.globalMaxWidth),
+            maxWidth: Math.max(...Array.from(columnAnalysis.values()).map(c => c.optimalWidth), finalConfig.globalMinWidth)
+        }
+    };
+}
+/**
+ * Helper function to create a column with intelligent sizing options
+ */
+export function createIntelligentColumn(columnDef, sizingOptions) {
+    return {
+        ...columnDef,
+        meta: {
+            ...columnDef.meta,
+            minWidth: sizingOptions?.minWidth,
+            maxWidth: sizingOptions?.maxWidth,
+            priority: sizingOptions?.priority
+        }
+    };
+}
+/**
+ * Preset configurations for common use cases
+ */
+export const COLUMN_SIZING_PRESETS = {
+    compact: {
+        globalMinWidth: 20,
+        globalMaxWidth: 200,
+        paddingBuffer: 4,
+        sampleSize: 50
+    },
+    standard: {
+        globalMinWidth: 30,
+        globalMaxWidth: 300,
+        paddingBuffer: 4,
+        sampleSize: 100
+    }
+};

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,33 @@
+import { Row } from '@tanstack/react-table';
+interface NavigationPosition {
+    rowIndex: number;
+    columnIndex: number;
+}
+interface KeyboardNavigationOptions {
+    enableNavigation?: boolean;
+    enableCellEdit?: boolean;
+    onCellEdit?: (rowIndex: number, columnIndex: string) => void;
+    onCellSelect?: (rowIndex: number, columnIndex: string) => void;
+    onRowSelect?: (rowIndex: number, isMultiSelect: boolean) => void;
+}
+/**
+ * Hook for keyboard navigation in data grids
+ * Supports arrow keys, Enter for editing, Space for selection
+ */
+export declare function useKeyboardNavigation<TData>(rows: Row<TData>[], columns: any[], options?: KeyboardNavigationOptions): {
+    containerRef: import("react").MutableRefObject<HTMLDivElement>;
+    focusedCell: NavigationPosition;
+    isEditing: boolean;
+    moveFocus: (rowIndex: number, columnIndex: number) => void;
+    startEditing: () => void;
+    stopEditing: () => void;
+    setFocusedCell: import("react").Dispatch<import("react").SetStateAction<NavigationPosition>>;
+    isCellFocused: (rowIndex: number, columnIndex: number) => boolean;
+    getCellProps: (rowIndex: number, columnIndex: number) => {
+        'data-row-index': number;
+        'data-column-index': number;
+        tabIndex: number;
+        className: string;
+    };
+};
+export {};