indas-ui 0.1.3 → 0.1.4

package/dist/components/dashboard/kpi/KpiRating.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrendingUp, TrendingDown, Info } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiRating - KPI card with star rating display
  *
@@ -27,9 +28,9 @@ export function KpiRating({ title, score, maxScore = 5, reviewCount, status, sta
             return 'bg-[rgb(var(--color-warning))]';
         return 'bg-[rgb(var(--color-error))]';
     };
-    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: _jsx(Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), _jsxs("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), _jsx("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: _jsx("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && (_jsx("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && (_jsxs("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), _jsx("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), _jsx("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), _jsx("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: _jsx("div", { className: cn('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), _jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: item.count.toLocaleString() }), _jsxs("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { children: _jsx("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), _jsxs("div", { children: [_jsx("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: _jsx(Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), _jsxs("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), _jsx("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: _jsx("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && (_jsx("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && (_jsxs("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), _jsx("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), _jsx("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), _jsx("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: _jsx("div", { className: cn('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), _jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: formatNumber(item.count) }), _jsxs("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { children: _jsx("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), _jsxs("div", { children: [_jsx("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
                                     const starIndex = i + 1;
                                     const isFilled = starIndex <= filledStars || (starIndex === filledStars + 1 && hasPartialStar);
                                     return (_jsx("svg", { className: cn('w-5 h-5 transition-transform hover:scale-110 cursor-pointer', isFilled ? 'text-yellow-400' : 'text-yellow-400/30'), fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i));
-                                }) }), reviewCount !== undefined && (_jsxs("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [reviewCount.toLocaleString(), " reviews"] }))] }), status && (_jsx("div", { className: "ml-auto text-right", children: _jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && (_jsxs("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && (_jsxs("div", { className: "flex items-center gap-1", children: [change > 0 ? (_jsx(TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? (_jsx(TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, _jsxs("span", { className: cn('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && (_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
+                                }) }), reviewCount !== undefined && (_jsxs("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [formatNumber(reviewCount), " reviews"] }))] }), status && (_jsx("div", { className: "ml-auto text-right", children: _jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && (_jsxs("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && (_jsxs("div", { className: "flex items-center gap-1", children: [change > 0 ? (_jsx(TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? (_jsx(TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, _jsxs("span", { className: cn('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && (_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
 }

package/dist/components/datagrid/columns/ColumnContextMenu.js

@@ -8,6 +8,7 @@ import { Input } from '../../ui/index.js';
 import { Checkbox } from '../../ui/index.js';
 import { Separator } from '../../ui/index.js';
 import { Badge } from '../../ui/index.js';
+import { formatNumber } from '../../../lib/number-format.js';
 export function ColumnContextMenu({ column, table, data, isVisible, position, onClose, onApplyFilter, }) {
     const [activeSubmenu, setActiveSubmenu] = useState(null);
     const [quickFilterValue, setQuickFilterValue] = useState('');
@@ -316,7 +317,7 @@ export function ColumnContextMenu({ column, table, data, isVisible, position, on
                                             }, className: "w-full flex items-center gap-2 px-2 py-1 text-left text-xs rounded hover:bg-[rgb(var(--bg-subtle))]", children: [_jsx(Eye, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), _jsx("span", { className: "truncate flex-1", children: col.label })] }, col.id))) })] }) }, item.id));
                     }
                     if (item.id === 'column-stats' && columnStats) {
-                        return (_jsxs("div", { className: "p-2 space-y-1.5", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Column Statistics" }), _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Total:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.totalCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Unique:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.uniqueCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Null:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.nullCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Type:" }), _jsx("div", { className: "text-right", children: _jsx(Badge, { variant: "outline", className: "text-xs h-4", children: columnStats.dataType }) }), columnStats.dataType === 'number' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Min:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.min }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Max:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.max }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Avg:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.avg?.toFixed(2) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Sum:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.sum?.toLocaleString() })] }))] })] }, item.id));
+                        return (_jsxs("div", { className: "p-2 space-y-1.5", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Column Statistics" }), _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Total:" }), _jsx("span", { className: "font-medium text-right", children: formatNumber(columnStats.totalCount) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Unique:" }), _jsx("span", { className: "font-medium text-right", children: formatNumber(columnStats.uniqueCount) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Null:" }), _jsx("span", { className: "font-medium text-right", children: formatNumber(columnStats.nullCount) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Type:" }), _jsx("div", { className: "text-right", children: _jsx(Badge, { variant: "outline", className: "text-xs h-4", children: columnStats.dataType }) }), columnStats.dataType === 'number' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Min:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.min }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Max:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.max }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Avg:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.avg?.toFixed(2) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Sum:" }), _jsx("span", { className: "font-medium text-right", children: formatNumber(columnStats.sum) })] }))] })] }, item.id));
                     }
                 }
                 const Icon = item.icon;

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

@@ -7,6 +7,7 @@ import { Badge } from '../../../../ui/index.js';
 import { SelectionCheckbox } from '../../../cells/SelectionCell.js';
 import { Skeleton } from '../../../../ui/feedback/skeleton.js';
 import { useLanguage } from '../../../../../contexts/LanguageContext.js';
+import { formatNumber } from '../../../../../lib/number-format.js';
 const sizeConfig = {
     compact: {
         grid: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
@@ -128,7 +129,7 @@ export function CardView({ data, columns, onRowClick, selectedRows, onRowSelect,
             return value ? (_jsx(Badge, { variant: "default", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))] border-0 font-medium", children: t('Yes') })) : (_jsx(Badge, { variant: "secondary", className: "h-4.5 text-[0.6rem] px-1.5 py-0 bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] border-0 font-medium", children: t('No') }));
         }
         if (typeof value === 'number')
-            return value.toLocaleString();
+            return formatNumber(value);
         return value?.toString() || '—';
     }, [t]);
     const getFieldLabel = useCallback((column) => {

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

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../../../ui/index.j
 import { Button } from '../../../../ui/index.js';
 import { Dropdown } from '../../../../index.js';
 import { Badge } from '../../../../ui/index.js';
+import { formatNumber } from '../../../../../lib/number-format.js';
 const CHART_COLORS = [
     '#3b82f6', // Blue
     '#ef4444', // Red
@@ -341,7 +342,7 @@ export function DataVisualization({ data, columns, title = "Data Insights" }) {
     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) => ({
+    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: formatNumber(summaryStats.sum) }), _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: formatNumber(summaryStats.min) }), _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: formatNumber(summaryStats.max) }), _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) => ({

package/dist/components/datagrid/utils/grid-helpers.d.ts

@@ -25,7 +25,7 @@ export declare function debounce<T extends (...args: any[]) => any>(func: T, del
  */
 export declare function getRowId<TData>(row: TData, index: number, getRowIdFn?: (row: TData) => string): string;
 /**
- * Format large numbers with commas
+ * Format large numbers with grouping, in the library's number locale (Indian by default)
  */
 export declare function formatNumber(num: number): string;
 /**

package/dist/components/datagrid/utils/grid-helpers.js

@@ -1,4 +1,5 @@
 'use client';
+import { formatNumber as formatGrouped } from '../../../lib/number-format.js';
 /**
  * Grid utility functions and helpers
  */
@@ -75,10 +76,10 @@ export function getRowId(row, index, getRowIdFn) {
     return String(index);
 }
 /**
- * Format large numbers with commas
+ * Format large numbers with grouping, in the library's number locale (Indian by default)
  */
 export function formatNumber(num) {
-    return num.toLocaleString();
+    return formatGrouped(num);
 }
 /**
  * Check if value matches search term

package/dist/components/layout/footer.js

@@ -2,6 +2,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../hooks/useTranslation.js";
+import { formatNumber } from '../../lib/number-format.js';
 export function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = false, compact = false, padding, variant = 'page', gradient = false }) {
     if (!kpis && !actions && !leftContent && !iconButtons) {
         return null;
@@ -41,7 +42,7 @@ export function Footer({ kpis, actions, iconButtons, leftContent, className, sti
                     padding === 'normal' ? "py-3 sm:py-4" :
                         compact ? "py-1" :
                             isModal ? "py-1.5 sm:py-2" : "py-3 sm:py-4"), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [leftContent, kpis && kpis.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-3 sm:gap-6 md:gap-8", children: kpis.map((kpi) => (_jsxs("div", { className: cn("flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm", kpi.onClick && "cursor-pointer hover:text-[rgb(var(--color-primary-hover))] transition-colors"), onClick: kpi.onClick, children: [_jsxs("span", { className: "text-[rgb(var(--fg-muted))] whitespace-nowrap", children: [kpi.label, ":"] }), _jsx("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: typeof kpi.value === 'number'
-                                            ? kpi.value.toLocaleString()
+                                            ? formatNumber(kpi.value)
                                             : kpi.value }), kpi.trend && (_jsxs("span", { className: cn("text-xs font-medium", kpi.trend.direction === 'up'
                                             ? "text-[rgb(var(--color-success))]"
                                             : "text-[rgb(var(--color-error))]"), children: [kpi.trend.direction === 'up' ? '↑' : '↓', Math.abs(kpi.trend.value), "%"] }))] }, kpi.id))) }))] }), iconButtons && iconButtons.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2", children: iconButtons.map((button) => {

package/dist/components/layout/side-panel.js

@@ -107,7 +107,10 @@ export function SidePanel({ title, icon: Icon, categories, activeItemId, onItemS
                                                                     return _jsx(ItemIcon, { className: "w-4 h-4 shrink-0 opacity-50" });
                                                                 })(), _jsx("span", { className: "truncate flex-1", children: item.label }), item.badge !== undefined && item.badge !== 0 && (_jsx("span", { className: cn("text-xs px-1.5 py-0.5 rounded-full shrink-0 tabular-nums", activeItemId === item.id
                                                                         ? "bg-[rgb(var(--color-primary))] text-white"
-                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && (_jsx("button", { onClick: (e) => handleMenuToggle(e, item.id), className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100", children: _jsx(MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && (_jsx("div", { className: cn("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && (_jsx("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
+                                                                        : "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]"), children: item.badge }))] }), itemContextMenu && (
+                                                        // Named for screen readers, and shown on keyboard focus as well as hover:
+                                                        // it was an unlabelled button nobody tabbing could see.
+                                                        _jsx("button", { type: "button", onClick: (e) => handleMenuToggle(e, item.id), "aria-label": `More actions for ${item.label}`, "aria-haspopup": "menu", "aria-expanded": menuOpen === item.id, className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-6 h-6 rounded-md text-[rgb(var(--fg-muted))]/50 flex items-center justify-center hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-all opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: _jsx(MoreVertical, { className: "w-3.5 h-3.5" }) }))] }, item.id))) }))] }, category.id))))] })) }), footer && !isCollapsed && (_jsx("div", { className: cn("shrink-0 border-t border-[rgb(var(--bd-default))] transition-opacity duration-200", isAnimating ? "opacity-0" : "opacity-100"), children: footer }))] }), menuOpen !== null && itemContextMenu && (_jsx("div", { ref: menuRef, className: "fixed bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg min-w-[170px] shadow-lg overflow-hidden z-[9999]", style: {
                         left: `${menuPosition.left}px`,
                         top: `${menuPosition.top}px`,
                         transform: 'translateY(-50%)'

package/dist/components/ui/display/stats-card.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrendingUp, TrendingDown } from "lucide-react";
 import { cn } from "../../../lib/utils.js";
 import { Card } from "./card.js";
+import { formatNumber } from '../../../lib/number-format.js';
 const iconVariants = {
     default: "bg-primary text-white",
     accent: "bg-accent text-white",
@@ -12,7 +13,7 @@ const iconVariants = {
 export function StatsCard({ title, value, icon: Icon, trend, description, className, variant = 'default' }) {
     const TrendIcon = trend?.direction === 'up' ? TrendingUp : TrendingDown;
     const trendColor = trend?.direction === 'up' ? 'text-success' : 'text-error';
-    return (_jsx(Card, { className: cn("p-6 min-h-[140px] w-full", className), children: _jsxs("div", { className: "flex items-start gap-4", children: [Icon && (_jsx("div", { className: cn("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: _jsx(Icon, { className: "h-6 w-6" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-baseline flex-wrap gap-2", children: [_jsx("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? value.toLocaleString() : value }), trend && (_jsxs("div", { className: cn("flex items-center text-sm font-semibold", trendColor), children: [_jsx(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), _jsxs("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), _jsx("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && (_jsx("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
+    return (_jsx(Card, { className: cn("p-6 min-h-[140px] w-full", className), children: _jsxs("div", { className: "flex items-start gap-4", children: [Icon && (_jsx("div", { className: cn("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: _jsx(Icon, { className: "h-6 w-6" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-baseline flex-wrap gap-2", children: [_jsx("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? formatNumber(value) : value }), trend && (_jsxs("div", { className: cn("flex items-center text-sm font-semibold", trendColor), children: [_jsx(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), _jsxs("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), _jsx("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && (_jsx("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
 }
 export function StatsGrid({ children, columns = 4, className }) {
     const gridCols = {

package/dist/lib/number-format.d.ts

@@ -0,0 +1,18 @@
+/**
+ * How every number in the library is written. Indian grouping by default (20,00,000, not
+ * 2,000,000): the products built on this library keep Indian books, and a bare `toLocaleString()`
+ * follows whatever locale the browser happens to be set to, so the same figure read differently on
+ * two machines.
+ *
+ * A product that needs another convention calls `setNumberLocale()` once at start-up.
+ */
+export declare function setNumberLocale(locale: string): void;
+export declare function getNumberLocale(): string;
+/** A full number with grouping, up to two decimals. Empty for null, undefined or NaN. */
+export declare function formatNumber(value: number | string | null | undefined, maximumFractionDigits?: number): string;
+/**
+ * A short number for chart axes, where a full figure runs into its neighbour: 12,500 · 20 L ·
+ * 1.4 Cr in Indian grouping; 12.5K · 2M · 1.4B otherwise. Below a lakh (or a thousand) it is the
+ * full number.
+ */
+export declare function formatCompactNumber(value: number | string | null | undefined): string;

package/dist/lib/number-format.js

@@ -0,0 +1,54 @@
+'use client';
+/**
+ * How every number in the library is written. Indian grouping by default (20,00,000, not
+ * 2,000,000): the products built on this library keep Indian books, and a bare `toLocaleString()`
+ * follows whatever locale the browser happens to be set to, so the same figure read differently on
+ * two machines.
+ *
+ * A product that needs another convention calls `setNumberLocale()` once at start-up.
+ */
+let numberLocale = 'en-IN';
+export function setNumberLocale(locale) {
+    numberLocale = locale;
+}
+export function getNumberLocale() {
+    return numberLocale;
+}
+/** A full number with grouping, up to two decimals. Empty for null, undefined or NaN. */
+export function formatNumber(value, maximumFractionDigits = 2) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return typeof value === 'string' ? value : '';
+    return n.toLocaleString(numberLocale, { maximumFractionDigits });
+}
+const trim = (n) => n.toFixed(n >= 100 ? 0 : n >= 10 ? 1 : 2).replace(/\.?0+$/, '');
+/**
+ * A short number for chart axes, where a full figure runs into its neighbour: 12,500 · 20 L ·
+ * 1.4 Cr in Indian grouping; 12.5K · 2M · 1.4B otherwise. Below a lakh (or a thousand) it is the
+ * full number.
+ */
+export function formatCompactNumber(value) {
+    if (value == null || value === '')
+        return '';
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return String(value);
+    const sign = n < 0 ? '-' : '';
+    const a = Math.abs(n);
+    if (numberLocale === 'en-IN') {
+        if (a >= 1e7)
+            return `${sign}${trim(a / 1e7)} Cr`;
+        if (a >= 1e5)
+            return `${sign}${trim(a / 1e5)} L`;
+        return formatNumber(n, 0);
+    }
+    if (a >= 1e9)
+        return `${sign}${trim(a / 1e9)}B`;
+    if (a >= 1e6)
+        return `${sign}${trim(a / 1e6)}M`;
+    if (a >= 1e3)
+        return `${sign}${trim(a / 1e3)}K`;
+    return formatNumber(n, 0);
+}

package/dist/lib/utils.js

@@ -1,11 +1,12 @@
 'use client';
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { getNumberLocale } from './number-format.js';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-export function formatCurrency(amount, currency = 'USD') {
-    return new Intl.NumberFormat('en-US', {
+export function formatCurrency(amount, currency = 'INR') {
+    return new Intl.NumberFormat(getNumberLocale(), {
         style: 'currency',
         currency,
     }).format(amount);
@@ -18,7 +19,7 @@ export function formatDate(date) {
     }).format(new Date(date));
 }
 export function formatNumber(num, decimals = 0) {
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat(getNumberLocale(), {
         minimumFractionDigits: decimals,
         maximumFractionDigits: decimals,
     }).format(num);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indas-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Indas UI — React component library for business apps: Tailwind design tokens, Radix primitives, Lucide icons, DataGrid, dashboards and charts.",
   "license": "MIT",
   "author": "Indas Analytics Pvt Ltd",
@@ -121,8 +121,8 @@
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^12.23.12",
-    "jspdf": "^3.0.2",
-    "jspdf-autotable": "^5.0.2",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.8",
     "ldrs": "^1.1.9",
     "lucide-react": "^0.562.0",
     "next-auth": "^4.24.7",
@@ -133,7 +133,7 @@
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "svg2pdf.js": "^2.7.0",
+    "svg2pdf.js": "^2.8.1",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {