indas-ui 0.1.2 → 0.1.4

package/dist/components/dashboard/charts/Area.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + 'cc') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -31,10 +32,11 @@ function withAlpha(color, alpha) {
 /**
  * AreaChart - ECharts Area Chart component
  */
-export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+export function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, valueFormatter, axisFormatter, className }) {
     const option = {
         tooltip: {
             trigger: 'axis',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -70,13 +72,13 @@ export function AreaChart({ data, xKey, series, height = 300, showLegend = true,
         },
         yAxis: series.some(s => s.secondaryAxis)
             ? [
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
-                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11 }, splitLine: { show: false } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) }, splitLine: { show: false } },
             ]
             : {
                 type: 'value',
                 axisLine: { show: false },
-                axisLabel: { color: '#6c757d', fontSize: 11 },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
                 splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
             },
         series: series.map((s, index) => {

package/dist/components/dashboard/charts/Bar.d.ts

@@ -19,9 +19,13 @@ export interface BarChartProps {
      * Renders a KPI-vs-target bullet (track + actual fill + target marker + achievement %).
      */
     targetKey?: string;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * BarChart - ECharts Bar Chart component
  */
-export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, className }: BarChartProps): import("react").JSX.Element;
+export declare function BarChart({ data, xKey, series, height, showLegend, showGrid, horizontal, targetKey, valueFormatter, axisFormatter, className }: BarChartProps): import("react").JSX.Element;

package/dist/components/dashboard/charts/Bar.js

@@ -2,10 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 /**
  * BarChart - ECharts Bar Chart component
  */
-export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+export function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, valueFormatter, axisFormatter, className }) {
     // Bullet mode: horizontal KPI-vs-target rows (CSS-rendered, not ECharts).
     if (horizontal && targetKey) {
         const actualKey = series[0]?.key;
@@ -25,13 +26,14 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
                     : met
                         ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
                         : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
-                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${target.toLocaleString()}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: actual.toLocaleString() }), _jsx("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), _jsxs("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), _jsxs("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [_jsx("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1 h-4 rounded-full ring-2 ring-[rgb(var(--bg-surface))]", style: { left: `${targetPct}%`, backgroundColor: '#475569' }, title: `Target: ${formatNumber(target)}` })] }), _jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [_jsx("span", { children: formatNumber(actual) }), _jsx("span", { children: `Target ${formatNumber(target)}` })] })] }, `${name}-${idx}`));
             }) }));
     }
     const categoryData = data.map(item => item[xKey]);
     const option = {
         tooltip: {
             trigger: 'item',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.98)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -64,7 +66,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             type: horizontal ? 'value' : 'category',
             data: horizontal ? undefined : categoryData,
             axisLine: { lineStyle: { color: '#dee2e6' } },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11, hideOverlap: true, alignMaxLabel: 'right', formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) } : { color: '#6c757d', fontSize: 11 },
             axisTick: { show: false },
             splitLine: horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
@@ -74,7 +76,7 @@ export function BarChart({ data, xKey, series, height = 300, showLegend = true,
             type: horizontal ? 'category' : 'value',
             data: horizontal ? categoryData : undefined,
             axisLine: { show: false },
-            axisLabel: { color: '#6c757d', fontSize: 11 },
+            axisLabel: horizontal ? { color: '#6c757d', fontSize: 11 } : { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
             splitLine: !horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
             } : { show: false }

package/dist/components/dashboard/charts/FlowMap.js

@@ -6,6 +6,7 @@ import * as echarts from 'echarts/core';
 import { cn } from '../../../lib/utils.js';
 import { INDIA_GEOJSON } from './india-map.js';
 import { getChartTheme } from './theme.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * FlowMap - Geographic flow/route visualization
  *
@@ -161,7 +162,7 @@ export function FlowMap({ markers = [], lines = [], height = 400, markerColor =
                 }
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${value.toLocaleString()}` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Value: ${formatNumber(value)}` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/components/dashboard/charts/Funnel.js

@@ -2,6 +2,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 const FUNNEL_COLORS = ['#5470c6', '#3ba272', '#fac858', '#ee6666', '#73c0de', '#9a60b4', '#fc8452', '#91cc75'];
 /**
  * FunnelChart — centered, tapering stage-bar funnel for conversion/process flows.
@@ -30,6 +31,6 @@ export function FunnelChart({ data, height = 300, sort = 'descending', className
                                 background: `linear-gradient(90deg, ${color}, ${color}cc)`,
                                 transform: isHover ? 'translateY(-1px)' : 'none',
                                 boxShadow: isHover ? `0 4px 14px ${color}55` : `0 1px 2px rgba(0,0,0,0.06)`,
-                            }, title: `${item.name}: ${item.value.toLocaleString()} (${pct.toFixed(1)}%)`, children: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+                            }, title: `${item.name}: ${formatNumber(item.value)} (${pct.toFixed(1)}%)`, children: [_jsx("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), _jsx("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: formatNumber(item.value) })] }) })] }, item.name));
         }) }));
 }

package/dist/components/dashboard/charts/GeoMap.js

@@ -5,6 +5,7 @@ import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
 import { cn } from '../../../lib/utils.js';
 import { INDIA_GEOJSON } from './india-map.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * GeoMap - Geographic scatter/bubble map for India
  * Shows location markers with optional size based on values
@@ -47,7 +48,7 @@ export function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', ma
             formatter: (params) => {
                 if (params.seriesType === 'effectScatter' || params.seriesType === 'scatter') {
                     const value = params.value?.[2];
-                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${value.toLocaleString()} units` : ''}`;
+                    return `<strong>${params.name}</strong>${value ? `<br/>Production: ${formatNumber(value)} units` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

package/dist/components/dashboard/charts/Line.d.ts

@@ -25,9 +25,13 @@ export interface LineChartProps {
     yMin?: number;
     /** Y-axis maximum value */
     yMax?: number;
+    /** How a value reads in the tooltip. Default: the full number, Indian grouping (20,00,000). */
+    valueFormatter?: (value: number) => string;
+    /** How a value reads on the value axis. Default: compact (12,500 · 20 L · 1.4 Cr). */
+    axisFormatter?: (value: number) => string;
     className?: string;
 }
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-export declare function LineChart({ data, xKey, series, height, showLegend, showGrid, smooth, showLabels, yMin, yMax, className }: LineChartProps): import("react").JSX.Element;
+export declare function LineChart({ data, xKey, series, height, showLegend, showGrid, smooth, showLabels, yMin, yMax, valueFormatter, axisFormatter, className }: LineChartProps): import("react").JSX.Element;

package/dist/components/dashboard/charts/Line.js

@@ -3,16 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
 import { getChartTheme, getTooltipConfig, getLegendConfig, getAxisConfig, getGridConfig } from './theme.js';
+import { formatCompactNumber, formatNumber } from '../../../lib/number-format.js';
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-export function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+export function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, valueFormatter, axisFormatter, className }) {
     const theme = getChartTheme();
     const axisConfig = getAxisConfig();
     const option = {
         tooltip: {
             trigger: 'axis',
-            ...getTooltipConfig()
+            ...getTooltipConfig(),
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? formatNumber)(v) : String(v ?? '')),
         },
         legend: showLegend ? getLegendConfig('top') : undefined,
         grid: getGridConfig(showLegend),
@@ -27,7 +29,7 @@ export function LineChart({ data, xKey, series, height = 300, showLegend = true,
             min: yMin,
             max: yMax,
             axisLine: { show: false },
-            axisLabel: axisConfig.axisLabel,
+            axisLabel: { ...axisConfig.axisLabel, formatter: (v) => (axisFormatter ?? formatCompactNumber)(v) },
             splitLine: {
                 show: showGrid,
                 ...axisConfig.splitLine

package/dist/components/dashboard/charts/Pareto.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * ParetoChart - Combined bar and line chart showing values and cumulative percentage
  * Used for identifying the "vital few" from the "trivial many" (80/20 rule)
@@ -28,7 +29,7 @@ export function ParetoChart({ data, height = 300, showLegend = true, barColor =
                 const bar = params.find((p) => p.seriesType === 'bar');
                 const line = params.find((p) => p.seriesType === 'line');
                 return `${bar?.name}<br/>
-          Value: ${bar?.value?.toLocaleString()}<br/>
+          Value: ${formatNumber(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

package/dist/components/dashboard/charts/Sankey.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * SankeyChart - Flow/relationship visualization
  * Great for: Material flow, process flow, cost flow, conversion funnels
@@ -35,9 +36,9 @@ export function SankeyChart({ nodes, links, height = 300, orient = 'horizontal',
             textStyle: { color: '#344767', fontSize: 12 },
             formatter: (params) => {
                 if (params.dataType === 'edge') {
-                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${params.data.value?.toLocaleString()}`;
+                    return `<strong>${params.data.source}</strong> → <strong>${params.data.target}</strong><br/>Value: ${formatNumber(params.data.value)}`;
                 }
-                return `<strong>${params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${params.name}</strong><br/>Value: ${formatNumber(params.value) || '-'}`;
             }
         },
         series: [{
@@ -73,7 +74,7 @@ export function SankeyChart({ nodes, links, height = 300, orient = 'horizontal',
                     color: '#344767',
                     fontSize: 11,
                     fontWeight: 500,
-                    formatter: (p) => `${p.name} (${p.value?.toLocaleString() ?? '-'})`
+                    formatter: (p) => `${p.name} (${formatNumber(p.value) || '-'})`
                 },
                 data: nodesWithColors,
                 links: links.map(link => ({

package/dist/components/dashboard/charts/Sparkline.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 // Convert any color (hex, rgb(), rgba(), space-separated rgb()) to rgba() with given alpha (0–1).
 // Hex+alpha-suffix concat (e.g. color + '40') breaks for non-hex inputs and crashes canvas gradients.
 function withAlpha(color, alpha) {
@@ -97,7 +98,7 @@ export function Sparkline({ data, type = 'line', height = 40, width = '100%', co
             formatter: (params) => {
                 const p = Array.isArray(params) ? params[0] : params;
                 const cat = hasLabels && p.axisValue ? `${p.axisValue}<br/>` : '';
-                return `${cat}<strong>${valuePrefix}${Number(p.value).toLocaleString()}${valueSuffix}</strong>`;
+                return `${cat}<strong>${valuePrefix}${formatNumber(Number(p.value))}${valueSuffix}</strong>`;
             }
         } : undefined,
         grid: {

package/dist/components/dashboard/charts/Treemap.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactECharts from 'echarts-for-react';
 import { cn } from '../../../lib/utils.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * TreemapChart - Hierarchical data visualization
  * Great for: Cost breakdown, category distribution, budget allocation
@@ -22,7 +23,7 @@ export function TreemapChart({ data, height = 300, showBreadcrumb = false, color
                     .map((node) => node.name)
                     .filter((name) => name)
                     .join(' → ');
-                return `<strong>${path || params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${path || params.name}</strong><br/>Value: ${formatNumber(params.value) || '-'}`;
             }
         },
         series: [{

package/dist/components/dashboard/charts/index.d.ts

@@ -36,3 +36,4 @@ export { FlowMap } from './FlowMap.js';
 export type { FlowMapProps, FlowMapLine, FlowMapMarker } from './FlowMap.js';
 export { ChartCard } from './DashboardCard.js';
 export type { ChartCardProps } from './DashboardCard.js';
+export { formatNumber, formatCompactNumber, setNumberLocale, getNumberLocale } from '../../../lib/number-format.js';

package/dist/components/dashboard/charts/index.js

@@ -21,3 +21,5 @@ export { GanttChart } from './Gantt.js';
 export { FlowMap } from './FlowMap.js';
 // Chart Wrapper
 export { ChartCard } from './DashboardCard.js';
+// Number formatting: Indian grouping by default; setNumberLocale() switches it for a whole app
+export { formatNumber, formatCompactNumber, setNumberLocale, getNumberLocale } from '../../../lib/number-format.js';

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiBreakdown - KPI card with list breakdown
  *
@@ -29,11 +30,11 @@ export function KpiBreakdown({ title, total, items, showPercentage = false, load
     };
     const totalValue = typeof total === 'number' ? total :
         items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
-    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [_jsxs("div", { className: cn('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && (_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), _jsx("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [_jsxs("div", { className: cn('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && (_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? formatNumber(total) : total }))] }), _jsx("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
                     const colorClass = getColorClass(item.color);
                     const isCustomColor = item.color?.startsWith('#') || item.color?.startsWith('rgb');
                     const numValue = typeof item.value === 'number' ? item.value : 0;
                     const percentage = totalValue > 0 ? Math.round((numValue / totalValue) * 100) : 0;
-                    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), _jsx("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && (_jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), _jsx("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? formatNumber(item.value) : item.value }), showPercentage && (_jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
                 }) })] }));
 }

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiComparison - KPI card with comparison progress bars
  *
@@ -34,5 +35,5 @@ export function KpiComparison({ title, value, target, status, bars, loading, cla
                 return 'bg-[rgb(var(--color-error))]/10 text-[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', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && (_jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && (_jsxs("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), _jsx("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), _jsx("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: _jsx("div", { className: cn('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), _jsx("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? bar.value.toLocaleString() : bar.value })] }, index))) })] }));
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && (_jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && (_jsxs("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), _jsx("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), _jsx("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: _jsx("div", { className: cn('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), _jsx("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? formatNumber(bar.value) : bar.value })] }, index))) })] }));
 }

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils.js';
 import { KpiCardSkeleton } from './kpi-shell.js';
+import { formatNumber } from '../../../lib/number-format.js';
 /**
  * KpiQuickStats - KPI card with grid of icon stats
  *
@@ -33,6 +34,6 @@ export function KpiQuickStats({ title, stats, columns = 2, loading, className })
     };
     return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-3", children: title }), _jsx("div", { className: cn('grid gap-x-3 gap-y-2', gridClasses[columns]), children: stats.map((stat, index) => {
                     const Icon = stat.icon;
-                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('w-4 h-4', getIconColorClass(stat.iconColor)) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
+                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('w-4 h-4', getIconColorClass(stat.iconColor)) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? formatNumber(stat.value) : stat.value }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
                 }) })] }));
 }

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/DataGrid.js

@@ -489,7 +489,7 @@ enableFilterRow = false, initialColumnFilters, }) {
         }
         return rowSelection;
     }, [enableViewToggle, viewMode, selectedRowIds, filteredData, rowSelection, getRowId, data]);
-    // Helper function to format dates as "12 Oct, 2025"
+    // Helper function to format dates as "12 Oct 2025"
     const formatDateCell = (dateString) => {
         if (!dateString)
             return '-';
@@ -500,7 +500,7 @@ enableFilterRow = false, initialColumnFilters, }) {
             const day = date.getDate();
             const month = date.toLocaleDateString('en-US', { month: 'short' });
             const year = date.getFullYear();
-            return `${day} ${month}, ${year}`;
+            return `${day} ${month} ${year}`;
         }
         catch {
             return dateString;

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

@@ -91,10 +91,10 @@ export function CellRenderer({ cell, cellIndex, row, enableBacchaSearch = false,
         }
     }
     const rowId = row.original.id || row.id;
-    return (_jsx("td", { className: `
-        px-1 py-1 text-xs text-fg-default align-middle
-        ${isBadgeColumn || isPlaceholderValue ? 'text-center' : isNumericContent ? 'text-right' : 'text-left'}
-        ${isCellFrozen || isPinnedRight ? 'sticky z-[5]' : ''}
+    return (_jsx("td", { className: `
+        px-1 py-1 text-xs text-fg-default align-middle
+        ${isBadgeColumn || isPlaceholderValue ? 'text-center' : isNumericContent ? 'text-right' : 'text-left'}
+        ${isCellFrozen || isPinnedRight ? 'sticky z-[5]' : ''}
       `, style: {
             width: `${cell.column.getSize()}px`,
             minWidth: `${cell.column.getSize()}px`,

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

@@ -11,13 +11,13 @@ export function SelectionCell({ checked, indeterminate = false, onChange, disabl
     };
     // Radio button mode (single selection) - always circular regardless of circularCheckboxes prop
     if (mode === 'radio') {
-        return (_jsx("div", { onClick: handleClick, className: `
-          relative rounded-full border-2 cursor-pointer transition-all duration-150
-          flex items-center justify-center flex-shrink-0
-          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        return (_jsx("div", { onClick: handleClick, className: `
+          relative rounded-full border-2 cursor-pointer transition-all duration-150
+          flex items-center justify-center flex-shrink-0
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
           ${checked
                 ? 'border-primary bg-white'
-                : 'border-gray-300 bg-white hover:border-gray-400'}
+                : 'border-gray-300 bg-white hover:border-gray-400'}
         `, style: {
                 boxShadow: checked ? '0 0 0 2px rgba(59, 130, 246, 0.1)' : 'none',
                 width: '14px',
@@ -39,13 +39,13 @@ export function SelectionCell({ checked, indeterminate = false, onChange, disabl
                         : "border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] hover:border-[rgb(var(--color-primary))]", disabled && "opacity-50 cursor-not-allowed"), children: [checked && !indeterminate && (_jsx(Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })), indeterminate && (_jsx("div", { className: "w-2 h-0.5 bg-white rounded" }))] })] }));
     }
     // Circular checkbox (AG Grid style, multi-select with circular prop)
-    return (_jsxs("div", { onClick: handleClick, className: `
-        relative rounded-full border-2 cursor-pointer transition-all duration-150
-        flex items-center justify-center flex-shrink-0
-        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+    return (_jsxs("div", { onClick: handleClick, className: `
+        relative rounded-full border-2 cursor-pointer transition-all duration-150
+        flex items-center justify-center flex-shrink-0
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
         ${checked || indeterminate
             ? 'border-primary bg-primary'
-            : 'border-gray-300 bg-white hover:border-gray-400'}
+            : 'border-gray-300 bg-white hover:border-gray-400'}
       `, style: {
             boxShadow: checked || indeterminate ? '0 0 0 2px rgba(59, 130, 246, 0.1)' : 'none',
             width: '14px',

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/PaginationControls.js

@@ -21,11 +21,11 @@ export function PaginationControls({ pageIndex, pageSize, totalRows, pageSizeOpt
                                 return (_jsx("span", { className: "px-2 text-[rgb(var(--fg-muted))]", children: "..." }, `ellipsis-${index}`));
                             }
                             const isCurrentPage = page === pageIndex;
-                            return (_jsx("button", { onClick: () => onPageChange(page), className: `
-                  min-w-[32px] h-8 px-2 rounded text-sm font-medium transition-colors
+                            return (_jsx("button", { onClick: () => onPageChange(page), className: `
+                  min-w-[32px] h-8 px-2 rounded text-sm font-medium transition-colors
                   ${isCurrentPage
                                     ? 'border border-[rgb(var(--color-primary))] text-[rgb(var(--color-primary))] bg-[rgb(var(--color-primary)/0.08)]'
-                                    : 'text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bd-default))]'}
+                                    : 'text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bd-default))]'}
                 `, children: page + 1 }, page));
                         }) }), _jsx("button", { onClick: () => onPageChange(pageIndex + 1), disabled: !hasNextPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Next Page", children: _jsx(ChevronRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }), _jsx("button", { onClick: () => onPageChange(totalPages - 1), disabled: !hasNextPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Last Page", children: _jsx(ChevronsRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })] }), !isMobile && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-[rgb(var(--fg-default))] flex-shrink-0 order-2 sm:order-3", children: [_jsx("span", { className: "hidden sm:inline", children: "Show:" }), _jsx(Dropdown, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), options: pageSizeOptions.map((size) => ({
                             value: String(size),

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) => {
@@ -151,14 +152,14 @@ export function CardView({ data, columns, onRowClick, selectedRows, onRowSelect,
     return (_jsxs("div", { ref: containerRef, className: "outline-none", tabIndex: 0, onKeyDown: handleKeyDown, children: [_jsx("div", { className: cfg.pad, children: _jsx("div", { className: `grid ${cfg.grid} ${cfg.gap}`, children: _jsx(AnimatePresence, { initial: false, children: data.map((item, index) => {
                             const isFocused = focusedIndex === index;
                             const itemSelected = isSelected(item);
-                            return (_jsx(motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: _jsxs("div", { className: `
-                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
-                    transition-all duration-150
+                            return (_jsx(motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: _jsxs("div", { className: `
+                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
+                    transition-all duration-150
                     ${itemSelected
                                         ? 'border-[rgb(var(--color-primary))] shadow-sm'
-                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
-                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
-                    ${getCardClassName?.(item) ?? ''}
+                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
+                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
+                    ${getCardClassName?.(item) ?? ''}
                   `, children: [_jsx("div", { className: `absolute left-0 top-0 bottom-0 w-[2px] transition-colors duration-150 ${itemSelected ? 'bg-[rgb(var(--color-primary))]' : 'bg-transparent group-hover/card:bg-[rgb(var(--color-primary))]/30'}` }), _jsxs("div", { className: "pl-3 pr-2.5 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [onRowSelect && (_jsx("div", { className: "flex-shrink-0", onClick: (e) => e.stopPropagation(), children: _jsx(SelectionCheckbox, { checked: itemSelected, onChange: (checked) => handleCheckboxChange(item, checked), circular: circularCheckboxes, mode: "checkbox" }) })), _jsxs("div", { className: "flex-1 min-w-0 flex items-baseline gap-1.5", children: [_jsx("p", { className: `${cfg.titleText} font-semibold text-[rgb(var(--fg-default))] truncate leading-tight`, children: displayColumns.length > 0 && getDisplayValue(item, displayColumns[0].accessorKey) }), displayColumns.length > 1 && (_jsx("p", { className: `${cfg.subtitleText} text-[rgb(var(--color-primary))] font-medium truncate flex-shrink-0`, children: getDisplayValue(item, displayColumns[1].accessorKey) }))] }), _jsx("div", { className: "flex-shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150", onClick: (e) => e.stopPropagation(), children: actionsColumn && actionsColumn.cell?.({
                                                                 row: { original: item },
                                                                 getValue: () => null,