indas-ui 0.0.1 → 0.1.0

package/dist/components/datagrid/controls/menu/view/ChartView.js

@@ -0,0 +1,363 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import ReactECharts from 'echarts-for-react';
+import { BarChart3, LineChart as LineChartIcon, PieChart as PieChartIcon, Activity, } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../ui/index.js';
+import { Button } from '../../../../ui/index.js';
+import { Dropdown } from '../../../../index.js';
+import { Badge } from '../../../../ui/index.js';
+const CHART_COLORS = [
+    '#3b82f6', // Blue
+    '#ef4444', // Red
+    '#10b981', // Green
+    '#f59e0b', // Yellow
+    '#8b5cf6', // Purple
+    '#ec4899', // Pink
+    '#06b6d4', // Cyan
+    '#84cc16', // Lime
+    '#f97316', // Orange
+    '#6b7280', // Gray
+];
+export function DataVisualization({ data, columns, title = "Data Insights" }) {
+    const [selectedChart, setSelectedChart] = useState('bar');
+    const [xAxisColumn, setXAxisColumn] = useState('');
+    const [yAxisColumn, setYAxisColumn] = useState('');
+    const [groupByColumn, setGroupByColumn] = useState('');
+    // Extract numeric and categorical columns
+    const numericColumns = useMemo(() => {
+        return columns
+            .filter((col) => col.accessorKey || col.id)
+            .filter((col) => {
+            const key = col.accessorKey || col.id;
+            const sampleValues = data.slice(0, 10).map(row => row[key]).filter(val => val != null);
+            return sampleValues.some(val => typeof val === 'number' && !isNaN(val));
+        })
+            .map((col) => ({
+            key: col.accessorKey || col.id,
+            label: col.header || col.accessorKey || col.id,
+        }));
+    }, [columns, data]);
+    const categoricalColumns = useMemo(() => {
+        return columns
+            .filter((col) => col.accessorKey || col.id)
+            .filter((col) => {
+            const key = col.accessorKey || col.id;
+            const sampleValues = data.slice(0, 10).map(row => row[key]).filter(val => val != null);
+            return sampleValues.some(val => typeof val === 'string' || typeof val === 'boolean');
+        })
+            .map((col) => ({
+            key: col.accessorKey || col.id,
+            label: col.header || col.accessorKey || col.id,
+        }));
+    }, [columns, data]);
+    // Set default columns
+    React.useEffect(() => {
+        if (!xAxisColumn && categoricalColumns.length > 0) {
+            setXAxisColumn(categoricalColumns[0].key);
+        }
+        if (!yAxisColumn && numericColumns.length > 0) {
+            setYAxisColumn(numericColumns[0].key);
+        }
+    }, [categoricalColumns, numericColumns, xAxisColumn, yAxisColumn]);
+    // Process data for charts
+    const chartData = useMemo(() => {
+        if (!xAxisColumn || !yAxisColumn || data.length === 0)
+            return [];
+        if (groupByColumn) {
+            // Group data by both x-axis and group columns
+            const grouped = data.reduce((acc, item) => {
+                const xValue = String(item[xAxisColumn] || 'Unknown');
+                const groupValue = String(item[groupByColumn] || 'Unknown');
+                const yValue = Number(item[yAxisColumn]) || 0;
+                if (!acc[xValue])
+                    acc[xValue] = { [xAxisColumn]: xValue };
+                if (!acc[xValue][groupValue])
+                    acc[xValue][groupValue] = 0;
+                acc[xValue][groupValue] += yValue;
+                return acc;
+            }, {});
+            return Object.values(grouped);
+        }
+        else {
+            // Simple aggregation by x-axis
+            const grouped = data.reduce((acc, item) => {
+                const xValue = String(item[xAxisColumn] || 'Unknown');
+                const yValue = Number(item[yAxisColumn]) || 0;
+                if (!acc[xValue]) {
+                    acc[xValue] = { [xAxisColumn]: xValue, [yAxisColumn]: 0, count: 0 };
+                }
+                acc[xValue][yAxisColumn] += yValue;
+                acc[xValue].count += 1;
+                return acc;
+            }, {});
+            return Object.values(grouped).map((item) => ({
+                ...item,
+                [yAxisColumn]: item[yAxisColumn] / item.count, // Average
+            }));
+        }
+    }, [data, xAxisColumn, yAxisColumn, groupByColumn]);
+    // Process data specifically for pie chart
+    const pieChartData = useMemo(() => {
+        if (!xAxisColumn || data.length === 0)
+            return [];
+        const counts = data.reduce((acc, item) => {
+            const value = String(item[xAxisColumn] || 'Unknown');
+            acc[value] = (acc[value] || 0) + 1;
+            return acc;
+        }, {});
+        return Object.entries(counts).map(([name, value], index) => ({
+            name,
+            value,
+            itemStyle: { color: CHART_COLORS[index % CHART_COLORS.length] }
+        }));
+    }, [data, xAxisColumn]);
+    // Get unique group values for legend
+    const groupValues = useMemo(() => {
+        if (!groupByColumn)
+            return [];
+        return [...new Set(data.map((item) => String(item[groupByColumn] || 'Unknown')))];
+    }, [data, groupByColumn]);
+    // ECharts options for Bar Chart
+    const barChartOption = useMemo(() => {
+        const categoryData = chartData.map((item) => item[xAxisColumn]);
+        const series = groupByColumn
+            ? groupValues.map((groupValue, index) => ({
+                name: groupValue,
+                type: 'bar',
+                barMaxWidth: 40,
+                itemStyle: {
+                    color: CHART_COLORS[index % CHART_COLORS.length],
+                    borderRadius: [4, 4, 0, 0]
+                },
+                data: chartData.map((item) => item[groupValue] || 0)
+            }))
+            : [{
+                    name: yAxisColumn,
+                    type: 'bar',
+                    barMaxWidth: 40,
+                    itemStyle: {
+                        color: '#3b82f6',
+                        borderRadius: [4, 4, 0, 0]
+                    },
+                    data: chartData.map((item) => item[yAxisColumn])
+                }];
+        return {
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                borderColor: '#e5e7eb',
+                borderWidth: 1,
+                textStyle: { color: '#344767', fontSize: 12 },
+                axisPointer: { type: 'shadow' }
+            },
+            legend: groupByColumn ? { bottom: 0, left: 'center' } : undefined,
+            grid: { top: 20, right: 20, bottom: groupByColumn ? 40 : 20, left: 40, containLabel: true },
+            xAxis: {
+                type: 'category',
+                data: categoryData,
+                axisLine: { lineStyle: { color: '#dee2e6' } },
+                axisLabel: { color: '#666', fontSize: 12 },
+                axisTick: { show: false }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#666', fontSize: 12 },
+                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+            },
+            series
+        };
+    }, [chartData, xAxisColumn, yAxisColumn, groupByColumn, groupValues]);
+    // ECharts options for Line Chart
+    const lineChartOption = useMemo(() => {
+        const categoryData = chartData.map((item) => item[xAxisColumn]);
+        const series = groupByColumn
+            ? groupValues.map((groupValue, index) => ({
+                name: groupValue,
+                type: 'line',
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 8,
+                lineStyle: { width: 3, color: CHART_COLORS[index % CHART_COLORS.length] },
+                itemStyle: { color: CHART_COLORS[index % CHART_COLORS.length] },
+                data: chartData.map((item) => item[groupValue] || 0)
+            }))
+            : [{
+                    name: yAxisColumn,
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 8,
+                    lineStyle: { width: 3, color: '#3b82f6' },
+                    itemStyle: { color: '#3b82f6' },
+                    data: chartData.map((item) => item[yAxisColumn])
+                }];
+        return {
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                borderColor: '#e5e7eb',
+                borderWidth: 1,
+                textStyle: { color: '#344767', fontSize: 12 }
+            },
+            legend: groupByColumn ? { bottom: 0, left: 'center' } : undefined,
+            grid: { top: 20, right: 20, bottom: groupByColumn ? 40 : 20, left: 40, containLabel: true },
+            xAxis: {
+                type: 'category',
+                data: categoryData,
+                axisLine: { lineStyle: { color: '#dee2e6' } },
+                axisLabel: { color: '#666', fontSize: 12 },
+                axisTick: { show: false }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#666', fontSize: 12 },
+                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+            },
+            series
+        };
+    }, [chartData, xAxisColumn, yAxisColumn, groupByColumn, groupValues]);
+    // ECharts options for Area Chart
+    const areaChartOption = useMemo(() => {
+        const categoryData = chartData.map((item) => item[xAxisColumn]);
+        return {
+            tooltip: {
+                trigger: 'axis',
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                borderColor: '#e5e7eb',
+                borderWidth: 1,
+                textStyle: { color: '#344767', fontSize: 12 }
+            },
+            grid: { top: 20, right: 20, bottom: 20, left: 40, containLabel: true },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: categoryData,
+                axisLine: { lineStyle: { color: '#dee2e6' } },
+                axisLabel: { color: '#666', fontSize: 12 },
+                axisTick: { show: false }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#666', fontSize: 12 },
+                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+            },
+            series: [{
+                    name: yAxisColumn,
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'none',
+                    lineStyle: { width: 2, color: '#3b82f6' },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
+                                { offset: 1, color: 'rgba(59, 130, 246, 0)' }
+                            ]
+                        }
+                    },
+                    data: chartData.map((item) => item[yAxisColumn])
+                }]
+        };
+    }, [chartData, xAxisColumn, yAxisColumn]);
+    // ECharts options for Pie Chart
+    const pieChartOption = useMemo(() => {
+        return {
+            tooltip: {
+                trigger: 'item',
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                borderColor: '#e5e7eb',
+                borderWidth: 1,
+                textStyle: { color: '#344767', fontSize: 12 },
+                formatter: '{b}: {c} ({d}%)'
+            },
+            legend: {
+                bottom: 0,
+                left: 'center',
+                itemWidth: 12,
+                itemHeight: 12
+            },
+            series: [{
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    center: ['50%', '45%'],
+                    avoidLabelOverlap: true,
+                    itemStyle: {
+                        borderRadius: 4,
+                        borderColor: '#fff',
+                        borderWidth: 2
+                    },
+                    label: {
+                        show: true,
+                        formatter: '{b}: {d}%'
+                    },
+                    emphasis: {
+                        scale: true,
+                        scaleSize: 5,
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0, 0, 0, 0.2)'
+                        }
+                    },
+                    data: pieChartData
+                }]
+        };
+    }, [pieChartData]);
+    const getChartOption = () => {
+        switch (selectedChart) {
+            case 'bar':
+                return barChartOption;
+            case 'line':
+                return lineChartOption;
+            case 'pie':
+                return pieChartOption;
+            case 'area':
+                return areaChartOption;
+            default:
+                return barChartOption;
+        }
+    };
+    // Calculate summary statistics
+    const summaryStats = useMemo(() => {
+        if (!yAxisColumn || data.length === 0)
+            return null;
+        const values = data
+            .map((item) => Number(item[yAxisColumn]))
+            .filter(val => !isNaN(val));
+        if (values.length === 0)
+            return null;
+        const sum = values.reduce((a, b) => a + b, 0);
+        const avg = sum / values.length;
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        return { sum, avg, min, max, count: values.length };
+    }, [data, yAxisColumn]);
+    if (data.length === 0) {
+        return (_jsx(Card, { className: "p-8", children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx(BarChart3, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), _jsx("h3", { className: "text-lg font-medium mb-2", children: "No Data Available" }), _jsx("p", { className: "text-sm", children: "Add some data to view visualizations" })] }) }));
+    }
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title }), _jsxs("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [_jsx(BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), _jsxs(Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [_jsx(LineChartIcon, { className: "h-4 w-4 mr-2" }), "Line"] }), _jsxs(Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [_jsx(Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), _jsxs(Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [_jsx(PieChartIcon, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: summaryStats.sum.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), _jsx("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-orange-600", children: summaryStats.min.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-purple-600", children: summaryStats.max.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), _jsx(Dropdown, { options: categoricalColumns.map((col) => ({
+                                                value: col.key,
+                                                label: col.label,
+                                            })), value: xAxisColumn, onValueChange: (value) => setXAxisColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "Select column" })] }), selectedChart !== 'pie' && (_jsxs("div", { children: [_jsx("label", { className: "text-sm font-medium mb-2 block", children: "Y-Axis (Values)" }), _jsx(Dropdown, { options: numericColumns.map((col) => ({
+                                                value: col.key,
+                                                label: col.label,
+                                            })), value: yAxisColumn, onValueChange: (value) => setYAxisColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "Select column" })] })), selectedChart !== 'pie' && (_jsxs("div", { children: [_jsx("label", { className: "text-sm font-medium mb-2 block", children: "Group By (Optional)" }), _jsx(Dropdown, { options: [
+                                                { value: '', label: 'None' },
+                                                ...categoricalColumns
+                                                    .filter(col => col.key !== xAxisColumn)
+                                                    .map((col) => ({
+                                                    value: col.key,
+                                                    label: col.label,
+                                                }))
+                                            ], value: groupByColumn, onValueChange: (value) => setGroupByColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "None" })] }))] }) })] }), _jsx(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.3 }, children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { children: selectedChart === 'pie'
+                                            ? `Distribution by ${categoricalColumns.find(col => col.key === xAxisColumn)?.label || 'Category'}`
+                                            : `${numericColumns.find(col => col.key === yAxisColumn)?.label || 'Value'} by ${categoricalColumns.find(col => col.key === xAxisColumn)?.label || 'Category'}` }), groupByColumn && (_jsxs(Badge, { variant: "outline", children: ["Grouped by ", categoricalColumns.find(col => col.key === groupByColumn)?.label] }))] }) }), _jsx(CardContent, { children: _jsx(ReactECharts, { option: getChartOption(), style: { height: 400, width: '100%' }, opts: { renderer: 'canvas' } }) })] }) }, selectedChart)] }));
+}
+// Export alias for cleaner naming
+export { DataVisualization as ChartView };

package/dist/components/datagrid/controls/menu/view/ViewSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ViewSectionProps {
+    currentView: 'grid' | 'chart' | 'cards';
+    onViewChange: (view: 'grid' | 'chart' | 'cards') => void;
+}
+export declare function ViewSection({ currentView, onViewChange }: ViewSectionProps): React.JSX.Element;
+export {};

package/dist/components/datagrid/controls/menu/view/ViewSection.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from '../../../../ui/index.js';
+import { Grid3X3, LayoutGrid, BarChart3, Check, Eye } from 'lucide-react';
+import { useLanguage } from '../../../../../contexts/LanguageContext.js';
+export function ViewSection({ currentView, onViewChange }) {
+    const { t } = useLanguage();
+    return (_jsx(_Fragment, { children: _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('View Options') })] }), _jsxs(DropdownMenuSubContent, { children: [_jsxs(DropdownMenuItem, { onClick: () => onViewChange('grid'), children: [_jsx(Grid3X3, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('Grid View') }), currentView === 'grid' && _jsx(Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] }), _jsxs(DropdownMenuItem, { onClick: () => onViewChange('cards'), children: [_jsx(LayoutGrid, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('Card View') }), currentView === 'cards' && _jsx(Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] }), _jsxs(DropdownMenuItem, { onClick: () => onViewChange('chart'), children: [_jsx(BarChart3, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('Chart View') }), currentView === 'chart' && _jsx(Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] })] })] }) }));
+}

package/dist/components/datagrid/hooks/useCellRangeSelection.d.ts

@@ -0,0 +1,20 @@
+export interface CellPosition {
+    rowIndex: number;
+    columnIndex: number;
+}
+export interface CellRange {
+    start: CellPosition;
+    end: CellPosition;
+}
+export declare function useCellRangeSelection(): {
+    range: CellRange;
+    isSelecting: boolean;
+    handleMouseDown: (rowIndex: number, columnIndex: number, event: React.MouseEvent) => void;
+    handleMouseEnter: (rowIndex: number, columnIndex: number) => void;
+    handleMouseUp: () => void;
+    isCellInRange: (rowIndex: number, columnIndex: number) => boolean;
+    getCellClassName: (rowIndex: number, columnIndex: number) => string;
+    clearRange: () => void;
+    getSelectedCells: () => CellPosition[];
+    selectAll: (rowCount: number, columnCount: number) => void;
+};

package/dist/components/datagrid/hooks/useCellRangeSelection.js

@@ -0,0 +1,124 @@
+'use client';
+import { useState, useCallback, useRef, useEffect } from 'react';
+export function useCellRangeSelection() {
+    const [range, setRange] = useState(null);
+    const [isSelecting, setIsSelecting] = useState(false);
+    const startCellRef = useRef(null);
+    const handleMouseDown = useCallback((rowIndex, columnIndex, event) => {
+        // Only start selection on left click without modifiers (except shift)
+        if (event.button !== 0)
+            return;
+        const start = { rowIndex, columnIndex };
+        startCellRef.current = start;
+        if (event.shiftKey && range) {
+            // Extend existing range
+            setRange({
+                start: range.start,
+                end: start
+            });
+        }
+        else {
+            // Start new range
+            setRange({
+                start,
+                end: start
+            });
+            setIsSelecting(true);
+        }
+    }, [range]);
+    const handleMouseEnter = useCallback((rowIndex, columnIndex) => {
+        if (isSelecting && startCellRef.current) {
+            setRange({
+                start: startCellRef.current,
+                end: { rowIndex, columnIndex }
+            });
+        }
+    }, [isSelecting]);
+    const handleMouseUp = useCallback(() => {
+        setIsSelecting(false);
+    }, []);
+    useEffect(() => {
+        const handleGlobalMouseUp = () => {
+            setIsSelecting(false);
+        };
+        document.addEventListener('mouseup', handleGlobalMouseUp);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalMouseUp);
+        };
+    }, []);
+    const isCellInRange = useCallback((rowIndex, columnIndex) => {
+        if (!range)
+            return false;
+        const { start, end } = range;
+        const minRow = Math.min(start.rowIndex, end.rowIndex);
+        const maxRow = Math.max(start.rowIndex, end.rowIndex);
+        const minCol = Math.min(start.columnIndex, end.columnIndex);
+        const maxCol = Math.max(start.columnIndex, end.columnIndex);
+        return (rowIndex >= minRow &&
+            rowIndex <= maxRow &&
+            columnIndex >= minCol &&
+            columnIndex <= maxCol);
+    }, [range]);
+    const getCellClassName = useCallback((rowIndex, columnIndex) => {
+        if (!range)
+            return '';
+        if (isCellInRange(rowIndex, columnIndex)) {
+            const { start, end } = range;
+            const minRow = Math.min(start.rowIndex, end.rowIndex);
+            const maxRow = Math.max(start.rowIndex, end.rowIndex);
+            const minCol = Math.min(start.columnIndex, end.columnIndex);
+            const maxCol = Math.max(start.columnIndex, end.columnIndex);
+            let className = 'bg-blue-100 ';
+            // Add border classes for range edges
+            if (rowIndex === minRow)
+                className += 'border-t-2 border-t-blue-500 ';
+            if (rowIndex === maxRow)
+                className += 'border-b-2 border-b-blue-500 ';
+            if (columnIndex === minCol)
+                className += 'border-l-2 border-l-blue-500 ';
+            if (columnIndex === maxCol)
+                className += 'border-r-2 border-r-blue-500 ';
+            return className.trim();
+        }
+        return '';
+    }, [range, isCellInRange]);
+    const clearRange = useCallback(() => {
+        setRange(null);
+        startCellRef.current = null;
+        setIsSelecting(false);
+    }, []);
+    const getSelectedCells = useCallback(() => {
+        if (!range)
+            return [];
+        const { start, end } = range;
+        const minRow = Math.min(start.rowIndex, end.rowIndex);
+        const maxRow = Math.max(start.rowIndex, end.rowIndex);
+        const minCol = Math.min(start.columnIndex, end.columnIndex);
+        const maxCol = Math.max(start.columnIndex, end.columnIndex);
+        const cells = [];
+        for (let row = minRow; row <= maxRow; row++) {
+            for (let col = minCol; col <= maxCol; col++) {
+                cells.push({ rowIndex: row, columnIndex: col });
+            }
+        }
+        return cells;
+    }, [range]);
+    const selectAll = useCallback((rowCount, columnCount) => {
+        setRange({
+            start: { rowIndex: 0, columnIndex: 0 },
+            end: { rowIndex: rowCount - 1, columnIndex: columnCount - 1 }
+        });
+    }, []);
+    return {
+        range,
+        isSelecting,
+        handleMouseDown,
+        handleMouseEnter,
+        handleMouseUp,
+        isCellInRange,
+        getCellClassName,
+        clearRange,
+        getSelectedCells,
+        selectAll
+    };
+}

package/dist/components/datagrid/hooks/useClipboard.d.ts

@@ -0,0 +1,15 @@
+import { Table, Row } from '@tanstack/react-table';
+export interface ClipboardConfig {
+    enableCopy?: boolean;
+    enablePaste?: boolean;
+    copyFormat?: 'csv' | 'tsv' | 'json';
+    includeHeaders?: boolean;
+}
+export declare function useClipboard<TData>(table: Table<TData>, config?: ClipboardConfig): {
+    copyToClipboard: (customData?: string) => Promise<boolean>;
+    pasteFromClipboard: () => Promise<string>;
+    getSelectedData: () => {
+        rows: Row<TData>[];
+        columns: import("@tanstack/table-core").Column<TData, unknown>[];
+    };
+};