indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,401 @@
+'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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataVisualization = DataVisualization;
+exports.ChartView = DataVisualization;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../../../../ui/index.js");
+const ui_2 = require("../../../../ui/index.js");
+const components_1 = require("../../../../index.js");
+const ui_3 = require("../../../../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
+];
+function DataVisualization({ data, columns, title = "Data Insights" }) {
+    const [selectedChart, setSelectedChart] = (0, react_1.useState)('bar');
+    const [xAxisColumn, setXAxisColumn] = (0, react_1.useState)('');
+    const [yAxisColumn, setYAxisColumn] = (0, react_1.useState)('');
+    const [groupByColumn, setGroupByColumn] = (0, react_1.useState)('');
+    // Extract numeric and categorical columns
+    const numericColumns = (0, react_1.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 = (0, react_1.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_1.default.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        if (!groupByColumn)
+            return [];
+        return [...new Set(data.map((item) => String(item[groupByColumn] || 'Unknown')))];
+    }, [data, groupByColumn]);
+    // ECharts options for Bar Chart
+    const barChartOption = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 ((0, jsx_runtime_1.jsx)(ui_1.Card, { className: "p-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-gray-500", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-2", children: "No Data Available" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: "Add some data to view visualizations" })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LineChart, { className: "h-4 w-4 mr-2" }), "Line"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), (0, jsx_runtime_1.jsxs)(ui_2.Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PieChart, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: summaryStats.sum.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-orange-600", children: summaryStats.min.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.Card, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardContent, { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: summaryStats.max.toLocaleString() }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(ui_1.CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), (0, jsx_runtime_1.jsx)(components_1.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' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium mb-2 block", children: "Y-Axis (Values)" }), (0, jsx_runtime_1.jsx)(components_1.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' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium mb-2 block", children: "Group By (Optional)" }), (0, jsx_runtime_1.jsx)(components_1.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" })] }))] }) })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.3 }, children: (0, jsx_runtime_1.jsxs)(ui_1.Card, { children: [(0, jsx_runtime_1.jsx)(ui_1.CardHeader, { children: (0, jsx_runtime_1.jsxs)(ui_1.CardTitle, { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)(ui_3.Badge, { variant: "outline", children: ["Grouped by ", categoricalColumns.find(col => col.key === groupByColumn)?.label] }))] }) }), (0, jsx_runtime_1.jsx)(ui_1.CardContent, { children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { option: getChartOption(), style: { height: 400, width: '100%' }, opts: { renderer: 'canvas' } }) })] }) }, selectedChart)] }));
+}

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

@@ -0,0 +1,12 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSection = ViewSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+const LanguageContext_1 = require("../../../../../contexts/LanguageContext.js");
+function ViewSection({ currentView, onViewChange }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: t('View Options') })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onViewChange('grid'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Grid3X3, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: t('Grid View') }), currentView === 'grid' && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onViewChange('cards'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: t('Card View') }), currentView === 'cards' && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onViewChange('chart'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BarChart3, { className: "mr-2 h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: t('Chart View') }), currentView === 'chart' && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "ml-auto h-4 w-4 text-[rgb(var(--color-primary))]" })] })] })] }) }));
+}

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

@@ -0,0 +1,127 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCellRangeSelection = useCellRangeSelection;
+const react_1 = require("react");
+function useCellRangeSelection() {
+    const [range, setRange] = (0, react_1.useState)(null);
+    const [isSelecting, setIsSelecting] = (0, react_1.useState)(false);
+    const startCellRef = (0, react_1.useRef)(null);
+    const handleMouseDown = (0, react_1.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 = (0, react_1.useCallback)((rowIndex, columnIndex) => {
+        if (isSelecting && startCellRef.current) {
+            setRange({
+                start: startCellRef.current,
+                end: { rowIndex, columnIndex }
+            });
+        }
+    }, [isSelecting]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        setIsSelecting(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const handleGlobalMouseUp = () => {
+            setIsSelecting(false);
+        };
+        document.addEventListener('mouseup', handleGlobalMouseUp);
+        return () => {
+            document.removeEventListener('mouseup', handleGlobalMouseUp);
+        };
+    }, []);
+    const isCellInRange = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setRange(null);
+        startCellRef.current = null;
+        setIsSelecting(false);
+    }, []);
+    const getSelectedCells = (0, react_1.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 = (0, react_1.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
+    };
+}