indas-ui 0.1.2 → 0.1.4

package/dist/cjs/components/chat/ai-messages.js

@@ -16,6 +16,7 @@ const utils_1 = require("../../lib/utils.js");
 const lucide_react_1 = require("lucide-react");
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const number_format_1 = require("../../lib/number-format.js");
 // Individual Message Bubble Component
 function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, renderBotContent }) {
     const isUser = message.role === 'user';
@@ -164,7 +165,7 @@ function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedb
                                                 return full;
                                             });
                                             return processed;
-                                        })() }) })) })) })) }), !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "w-3.5 h-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3.5 h-3.5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", message.tokens.prompt.toLocaleString(), "  R: ", message.tokens.completion.toLocaleString(), "  T: ", message.tokens.total.toLocaleString()] }))] }))] })] }));
+                                        })() }) })) })) })) }), !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "w-3.5 h-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3.5 h-3.5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", (0, number_format_1.formatNumber)(message.tokens.prompt), "  R: ", (0, number_format_1.formatNumber)(message.tokens.completion), "  T: ", (0, number_format_1.formatNumber)(message.tokens.total)] }))] }))] })] }));
 }
 // Synthia thinking phrases — the fun ones
 const SYNTHIA_THINKING = [
@@ -266,6 +267,6 @@ function Messages({ messages, isLoading = false, onExport, onShare, onSelectItem
                         }, { prompt: 0, completion: 0, total: 0 });
                         if (totals.total === 0)
                             return (0, jsx_runtime_1.jsx)("div", {});
-                        return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", totals.prompt.toLocaleString(), " \u00B7 C:", totals.completion.toLocaleString(), " \u00B7 T:", totals.total.toLocaleString(), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                        return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", (0, number_format_1.formatNumber)(totals.prompt), " \u00B7 C:", (0, number_format_1.formatNumber)(totals.completion), " \u00B7 T:", (0, number_format_1.formatNumber)(totals.total), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                     })() : (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [onExport && ((0, jsx_runtime_1.jsxs)("button", { onClick: onExport, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Export"] })), onShare && ((0, jsx_runtime_1.jsxs)("button", { onClick: onShare, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-4 h-4" }), "Share"] }))] })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-5xl mx-auto px-3 sm:px-4 py-6 space-y-6 animate-[fadeInUp_0.28s_ease-out]", children: [messages.map((message) => ((0, jsx_runtime_1.jsx)(Message, { message: message, onSelectItem: onSelectItem, onEditMessage: onEditMessage, onRegenerateAi: onRegenerateAi, onFeedback: onFeedback, botAvatar: botAvatar, renderBotContent: renderBotContent }, message.id))), isLoading && (0, jsx_runtime_1.jsx)(TypingIndicator, { lastUserMessage: messages.filter(m => m.role === 'user').at(-1)?.content }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }, fadeKey) })] }));
 }

package/dist/cjs/components/chat/chat.js

@@ -21,6 +21,7 @@ const multimodal_input_1 = require("./multimodal-input.js");
 const chat_prompt_navigator_1 = require("./chat-prompt-navigator.js");
 const date_picker_1 = require("../forms/date-picker/index.js");
 const utils_2 = require("../../lib/utils.js");
+const number_format_1 = require("../../lib/number-format.js");
 function buildSendPayload(ctx, message, autoTitle) {
     if (ctx.mode === 'new') {
         return { message, conversationId: undefined, newChat: true, title: autoTitle };
@@ -1022,7 +1023,7 @@ function Chat({ mode = 'fullpage', externalMuted, title = 'Chat', sidebarTitle,
                                 }, { prompt: 0, completion: 0, total: 0 });
                                 if (totals.total === 0)
                                     return null;
-                                return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", totals.prompt.toLocaleString(), " \u00B7 Response: ", totals.completion.toLocaleString(), " \u00B7 Total: ", totals.total.toLocaleString(), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                                return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["Prompt: ", (0, number_format_1.formatNumber)(totals.prompt), " \u00B7 Response: ", (0, number_format_1.formatNumber)(totals.completion), " \u00B7 Total: ", (0, number_format_1.formatNumber)(totals.total), " tokens \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
                             })(), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-3 flex items-center gap-0.5", children: [headerActions, (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsMuted(!isMuted), className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: isMuted ? "Unmute sounds" : "Mute sounds", children: isMuted ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { className: "w-3.5 h-3.5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { className: "w-3.5 h-3.5" }) }), messages.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleExport, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Export'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-3.5 h-3.5" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleShare, className: "w-7 h-7 flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-md transition-colors", title: t('Share'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-3.5 h-3.5" }) })] })), fullpagePath && mode === 'modal' && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                             const target = currentConversationId
                                                 ? `${fullpagePath}?c=${currentConversationId}`

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

@@ -8,6 +8,7 @@ exports.AreaChart = AreaChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../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) {
@@ -37,10 +38,11 @@ function withAlpha(color, alpha) {
 /**
  * AreaChart - ECharts Area Chart component
  */
-function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = true, className }) {
+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 ?? number_format_1.formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -76,13 +78,13 @@ function AreaChart({ data, xKey, series, height = 300, showLegend = true, showGr
         },
         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 ?? number_format_1.formatCompactNumber)(v) }, splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } } },
+                { type: 'value', axisLine: { show: false }, axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) }, splitLine: { show: false } },
             ]
             : {
                 type: 'value',
                 axisLine: { show: false },
-                axisLabel: { color: '#6c757d', fontSize: 11 },
+                axisLabel: { color: '#6c757d', fontSize: 11, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) },
                 splitLine: { show: showGrid, lineStyle: { color: '#f0f0f0', type: 'dashed' } }
             },
         series: series.map((s, index) => {

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

@@ -8,10 +8,11 @@ exports.BarChart = BarChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * BarChart - ECharts Bar Chart component
  */
-function BarChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, horizontal = false, targetKey, className }) {
+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;
@@ -31,13 +32,14 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
                     : met
                         ? 'linear-gradient(90deg, #34d399 0%, #10b981 100%)'
                         : 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)';
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), (0, jsx_runtime_1.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()}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { children: actual.toLocaleString() }), (0, jsx_runtime_1.jsx)("span", { children: `Target ${target.toLocaleString()}` })] })] }, `${name}-${idx}`));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))] truncate", children: name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold tabular-nums shrink-0", style: { color: barColor }, children: [achievement.toFixed(0), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-2.5 rounded-full bg-[rgb(var(--bg-subtle))] overflow-visible", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 rounded-full transition-all duration-300", style: { width: `${actualPct}%`, background: barGradient } }), (0, jsx_runtime_1.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: ${(0, number_format_1.formatNumber)(target)}` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-[0.65rem] text-[rgb(var(--fg-muted))] tabular-nums", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, number_format_1.formatNumber)(actual) }), (0, jsx_runtime_1.jsx)("span", { children: `Target ${(0, number_format_1.formatNumber)(target)}` })] })] }, `${name}-${idx}`));
             }) }));
     }
     const categoryData = data.map(item => item[xKey]);
     const option = {
         tooltip: {
             trigger: 'item',
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? number_format_1.formatNumber)(v) : String(v ?? '')),
             backgroundColor: 'rgba(255, 255, 255, 0.98)',
             borderColor: '#e9ecef',
             borderWidth: 1,
@@ -70,7 +72,7 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
             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 ?? number_format_1.formatCompactNumber)(v) } : { color: '#6c757d', fontSize: 11 },
             axisTick: { show: false },
             splitLine: horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
@@ -80,7 +82,7 @@ function BarChart({ data, xKey, series, height = 300, showLegend = true, showGri
             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 ?? number_format_1.formatCompactNumber)(v) },
             splitLine: !horizontal && showGrid ? {
                 lineStyle: { color: '#f0f0f0', type: 'dashed' }
             } : { show: false }

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

@@ -45,6 +45,7 @@ const echarts = __importStar(require("echarts/core"));
 const utils_1 = require("../../../lib/utils.js");
 const india_map_1 = require("./india-map.js");
 const theme_1 = require("./theme.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * FlowMap - Geographic flow/route visualization
  *
@@ -200,7 +201,7 @@ function FlowMap({ markers = [], lines = [], height = 400, markerColor = '#5470c
                 }
                 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: ${(0, number_format_1.formatNumber)(value)}` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

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

@@ -5,6 +5,7 @@ exports.FunnelChart = FunnelChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../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.
@@ -33,6 +34,6 @@ 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: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: item.value.toLocaleString() })] }) })] }, item.name));
+                            }, title: `${item.name}: ${(0, number_format_1.formatNumber)(item.value)} (${pct.toFixed(1)}%)`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-semibold text-white truncate", children: item.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-white/90 tabular-nums shrink-0", children: (0, number_format_1.formatNumber)(item.value) })] }) })] }, item.name));
         }) }));
 }

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

@@ -44,6 +44,7 @@ const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const echarts = __importStar(require("echarts/core"));
 const utils_1 = require("../../../lib/utils.js");
 const india_map_1 = require("./india-map.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * GeoMap - Geographic scatter/bubble map for India
  * Shows location markers with optional size based on values
@@ -86,7 +87,7 @@ function GeoMap({ markers = [], height = 400, markerColor = '#5470c6', markerSiz
             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: ${(0, number_format_1.formatNumber)(value)} units` : ''}`;
                 }
                 return `<strong>${params.name}</strong>`;
             }

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

@@ -9,16 +9,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
 const theme_1 = require("./theme.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * LineChart - ECharts Line Chart component (no area fill)
  */
-function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, className }) {
+function LineChart({ data, xKey, series, height = 300, showLegend = true, showGrid = true, smooth = false, showLabels = false, yMin, yMax, valueFormatter, axisFormatter, className }) {
     const theme = (0, theme_1.getChartTheme)();
     const axisConfig = (0, theme_1.getAxisConfig)();
     const option = {
         tooltip: {
             trigger: 'axis',
-            ...(0, theme_1.getTooltipConfig)()
+            ...(0, theme_1.getTooltipConfig)(),
+            valueFormatter: (v) => (typeof v === 'number' ? (valueFormatter ?? number_format_1.formatNumber)(v) : String(v ?? '')),
         },
         legend: showLegend ? (0, theme_1.getLegendConfig)('top') : undefined,
         grid: (0, theme_1.getGridConfig)(showLegend),
@@ -33,7 +35,7 @@ function LineChart({ data, xKey, series, height = 300, showLegend = true, showGr
             min: yMin,
             max: yMax,
             axisLine: { show: false },
-            axisLabel: axisConfig.axisLabel,
+            axisLabel: { ...axisConfig.axisLabel, formatter: (v) => (axisFormatter ?? number_format_1.formatCompactNumber)(v) },
             splitLine: {
                 show: showGrid,
                 ...axisConfig.splitLine

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

@@ -8,6 +8,7 @@ exports.ParetoChart = ParetoChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../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)
@@ -34,7 +35,7 @@ function ParetoChart({ data, height = 300, showLegend = true, barColor = '#5470c
                 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: ${(0, number_format_1.formatNumber)(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

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

@@ -8,6 +8,7 @@ exports.SankeyChart = SankeyChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * SankeyChart - Flow/relationship visualization
  * Great for: Material flow, process flow, cost flow, conversion funnels
@@ -41,9 +42,9 @@ function SankeyChart({ nodes, links, height = 300, orient = 'horizontal', nodeWi
             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: ${(0, number_format_1.formatNumber)(params.data.value)}`;
                 }
-                return `<strong>${params.name}</strong><br/>Value: ${params.value?.toLocaleString() || '-'}`;
+                return `<strong>${params.name}</strong><br/>Value: ${(0, number_format_1.formatNumber)(params.value) || '-'}`;
             }
         },
         series: [{
@@ -79,7 +80,7 @@ function SankeyChart({ nodes, links, height = 300, orient = 'horizontal', nodeWi
                     color: '#344767',
                     fontSize: 11,
                     fontWeight: 500,
-                    formatter: (p) => `${p.name} (${p.value?.toLocaleString() ?? '-'})`
+                    formatter: (p) => `${p.name} (${(0, number_format_1.formatNumber)(p.value) || '-'})`
                 },
                 data: nodesWithColors,
                 links: links.map(link => ({

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

@@ -8,6 +8,7 @@ exports.Sparkline = Sparkline;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../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) {
@@ -103,7 +104,7 @@ function Sparkline({ data, type = 'line', height = 40, width = '100%', color = '
             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}${(0, number_format_1.formatNumber)(Number(p.value))}${valueSuffix}</strong>`;
             }
         } : undefined,
         grid: {

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

@@ -8,6 +8,7 @@ exports.TreemapChart = TreemapChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * TreemapChart - Hierarchical data visualization
  * Great for: Cost breakdown, category distribution, budget allocation
@@ -28,7 +29,7 @@ function TreemapChart({ data, height = 300, showBreadcrumb = false, colors = ['#
                     .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: ${(0, number_format_1.formatNumber)(params.value) || '-'}`;
             }
         },
         series: [{

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

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartCard = exports.FlowMap = exports.GanttChart = exports.Sparkline = exports.SankeyChart = exports.TreemapChart = exports.GeoMap = exports.BoxPlotChart = exports.BubbleChart = exports.ParetoChart = exports.ScatterChart = exports.HeatmapChart = exports.FunnelChart = exports.RadarChart = exports.LineChart = exports.GaugeChart = exports.DonutChart = exports.BarChart = exports.AreaChart = void 0;
+exports.getNumberLocale = exports.setNumberLocale = exports.formatCompactNumber = exports.formatNumber = exports.ChartCard = exports.FlowMap = exports.GanttChart = exports.Sparkline = exports.SankeyChart = exports.TreemapChart = exports.GeoMap = exports.BoxPlotChart = exports.BubbleChart = exports.ParetoChart = exports.ScatterChart = exports.HeatmapChart = exports.FunnelChart = exports.RadarChart = exports.LineChart = exports.GaugeChart = exports.DonutChart = exports.BarChart = exports.AreaChart = void 0;
 // ECharts Components
 var Area_1 = require("./Area.js");
 Object.defineProperty(exports, "AreaChart", { enumerable: true, get: function () { return Area_1.AreaChart; } });
@@ -43,3 +43,9 @@ Object.defineProperty(exports, "FlowMap", { enumerable: true, get: function () {
 // Chart Wrapper
 var DashboardCard_1 = require("./DashboardCard.js");
 Object.defineProperty(exports, "ChartCard", { enumerable: true, get: function () { return DashboardCard_1.ChartCard; } });
+// Number formatting: Indian grouping by default; setNumberLocale() switches it for a whole app
+var number_format_1 = require("../../../lib/number-format.js");
+Object.defineProperty(exports, "formatNumber", { enumerable: true, get: function () { return number_format_1.formatNumber; } });
+Object.defineProperty(exports, "formatCompactNumber", { enumerable: true, get: function () { return number_format_1.formatCompactNumber; } });
+Object.defineProperty(exports, "setNumberLocale", { enumerable: true, get: function () { return number_format_1.setNumberLocale; } });
+Object.defineProperty(exports, "getNumberLocale", { enumerable: true, get: function () { return number_format_1.getNumberLocale; } });

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

@@ -5,6 +5,7 @@ exports.KpiBreakdown = KpiBreakdown;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../lib/utils.js");
 const kpi_shell_1 = require("./kpi-shell.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * KpiBreakdown - KPI card with list breakdown
  *
@@ -32,11 +33,11 @@ function KpiBreakdown({ title, total, items, showPercentage = false, loading, co
     };
     const totalValue = typeof total === 'number' ? total :
         items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && ((0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), (0, jsx_runtime_1.jsx)("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && ((0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? (0, number_format_1.formatNumber)(total) : total }))] }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? (0, number_format_1.formatNumber)(item.value) : item.value }), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
                 }) })] }));
 }

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

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

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

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

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

@@ -5,6 +5,7 @@ exports.KpiRating = KpiRating;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../../lib/utils.js");
+const number_format_1 = require("../../../lib/number-format.js");
 /**
  * KpiRating - KPI card with star rating display
  *
@@ -30,9 +31,9 @@ function KpiRating({ title, score, maxScore = 5, reviewCount, status, statusType
             return 'bg-[rgb(var(--color-warning))]';
         return 'bg-[rgb(var(--color-error))]';
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: item.count.toLocaleString() }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: (0, number_format_1.formatNumber)(item.count) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("svg", { className: (0, utils_1.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: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [reviewCount.toLocaleString(), " reviews"] }))] }), status && ((0, jsx_runtime_1.jsx)("div", { className: "ml-auto text-right", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [change > 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
+                                }) }), reviewCount !== undefined && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [(0, number_format_1.formatNumber)(reviewCount), " reviews"] }))] }), status && ((0, jsx_runtime_1.jsx)("div", { className: "ml-auto text-right", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [change > 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
 }

package/dist/cjs/components/datagrid/DataGrid.js

@@ -525,7 +525,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 '-';
@@ -536,7 +536,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/cjs/components/datagrid/cells/CellRenderer.js

@@ -94,10 +94,10 @@ function CellRenderer({ cell, cellIndex, row, enableBacchaSearch = false, mainCo
         }
     }
     const rowId = row.original.id || row.id;
-    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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/cjs/components/datagrid/cells/SelectionCell.js

@@ -15,13 +15,13 @@ function SelectionCell({ checked, indeterminate = false, onChange, disabled = fa
     };
     // Radio button mode (single selection) - always circular regardless of circularCheckboxes prop
     if (mode === 'radio') {
-        return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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',
@@ -43,13 +43,13 @@ function SelectionCell({ checked, indeterminate = false, onChange, disabled = fa
                         : "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 && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3 h-3 text-white", strokeWidth: 3 })), indeterminate && ((0, jsx_runtime_1.jsx)("div", { className: "w-2 h-0.5 bg-white rounded" }))] })] }));
     }
     // Circular checkbox (AG Grid style, multi-select with circular prop)
-    return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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/cjs/components/datagrid/columns/ColumnContextMenu.js

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

package/dist/cjs/components/datagrid/controls/PaginationControls.js

@@ -25,11 +25,11 @@ function PaginationControls({ pageIndex, pageSize, totalRows, pageSizeOptions =
                                 return ((0, jsx_runtime_1.jsx)("span", { className: "px-2 text-[rgb(var(--fg-muted))]", children: "..." }, `ellipsis-${index}`));
                             }
                             const isCurrentPage = page === pageIndex;
-                            return ((0, jsx_runtime_1.jsx)("button", { onClick: () => onPageChange(page), className: `
-                  min-w-[32px] h-8 px-2 rounded text-sm font-medium transition-colors
+                            return ((0, jsx_runtime_1.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));
                         }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })] }), !isMobile && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-sm text-[rgb(var(--fg-default))] flex-shrink-0 order-2 sm:order-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Show:" }), (0, jsx_runtime_1.jsx)(components_1.Dropdown, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), options: pageSizeOptions.map((size) => ({
                             value: String(size),