indas-ui 0.1.3 → 0.1.5

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

@@ -1,4 +1,3 @@
-'use client';
 // ECharts Components
 export { AreaChart } from './Area.js';
 export { BarChart } from './Bar.js';
@@ -21,3 +20,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/index.js

@@ -1,4 +1,3 @@
-'use client';
 // Main Components
 export { FilterBar, computeForecast, projectForecast, FORECAST_METHODS } from './FilterBar.js';
 export { DashboardTooltip } from './Tooltip.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/dashboard/kpi/index.js

@@ -1,4 +1,3 @@
-'use client';
 // KPI Components
 export { KpiShell, ACCENT_MAP } from './kpi-shell.js';
 export { KpiComparison } from './KpiComparison.js';

package/dist/components/dashboard/time-range.d.ts

@@ -5,7 +5,18 @@ export declare const fiscalWeekRange: (fyStart: number, wk: number) => {
     to: Date;
 } | null;
 export declare const fiscalWeekCount: (fyStart: number) => number;
-export declare const rangeFromSelection: (sel: TimeFilterSelection | undefined, fyStart: number) => {
+/**
+ * The dates a selection covers.
+ *
+ * Quick picks (This / Last …) count from `today`: "This week" is the week holding today, "Last
+ * month" the calendar month before this one, "This quarter" the fiscal quarter holding today.
+ * They used to anchor to the financial year's first period, so "This week" meant Week 1 in April.
+ * A "This …" range runs to today, since nothing after today has happened yet.
+ *
+ * A numbered pick (W27, month "9", Q3, a year "2025") is that period of the financial year
+ * starting `fyStart`. Year "all" is all time, from the earliest date a book could hold to today.
+ */
+export declare const rangeFromSelection: (sel: TimeFilterSelection | undefined, fyStart: number, today?: Date) => {
     from: Date;
     to: Date;
 };

package/dist/components/dashboard/time-range.js

@@ -37,44 +37,77 @@ export const fiscalWeekCount = (fyStart) => {
         wk++;
     return wk;
 };
-// "this" anchors to the FY's first period (W1 / Apr / Q1), per fiscal reporting.
-export const rangeFromSelection = (sel, fyStart) => {
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+// Monday of the week holding `d` (weeks run Monday to Sunday, as the fiscal weeks do).
+const mondayOf = (d) => addDays(d, -((d.getDay() + 6) % 7));
+/**
+ * The dates a selection covers.
+ *
+ * Quick picks (This / Last …) count from `today`: "This week" is the week holding today, "Last
+ * month" the calendar month before this one, "This quarter" the fiscal quarter holding today.
+ * They used to anchor to the financial year's first period, so "This week" meant Week 1 in April.
+ * A "This …" range runs to today, since nothing after today has happened yet.
+ *
+ * A numbered pick (W27, month "9", Q3, a year "2025") is that period of the financial year
+ * starting `fyStart`. Year "all" is all time, from the earliest date a book could hold to today.
+ */
+export const rangeFromSelection = (sel, fyStart, today = new Date()) => {
+    const t = startOfDay(today);
     const fyOpen = new Date(fyStart, 3, 1);
     const fyClose = new Date(fyStart + 1, 2, 31);
     const yearOf = (mo) => (mo >= 3 ? fyStart : fyStart + 1);
     const monthRange = (mo) => ({ from: new Date(yearOf(mo), mo, 1), to: new Date(yearOf(mo), mo + 1, 0) });
     const type = sel?.type || 'Month';
     if (type === 'Day') {
-        const now = new Date();
-        const y = now.getFullYear(), m = now.getMonth(), d = now.getDate();
         const pick = sel?.days?.[0] || 'today';
-        if (pick === 'yesterday') {
-            const dt = new Date(y, m, d - 1);
-            return { from: dt, to: dt };
-        }
-        if (pick === 'last7')
-            return { from: new Date(y, m, d - 6), to: new Date(y, m, d) };
-        if (pick === 'last14')
-            return { from: new Date(y, m, d - 13), to: new Date(y, m, d) };
-        if (pick === 'last30')
-            return { from: new Date(y, m, d - 29), to: new Date(y, m, d) };
-        return { from: new Date(y, m, d), to: new Date(y, m, d) };
+        if (pick === 'yesterday')
+            return { from: addDays(t, -1), to: addDays(t, -1) };
+        const span = { last7: 7, last14: 14, last30: 30 }[pick];
+        return span ? { from: addDays(t, -(span - 1)), to: t } : { from: t, to: t };
     }
     if (type === 'Week') {
-        const pick = sel?.weeks?.[0] || 'W1';
+        const pick = sel?.weeks?.[0] || 'this';
+        const monday = mondayOf(t);
+        if (pick === 'this')
+            return { from: monday, to: t };
+        if (pick === 'last')
+            return { from: addDays(monday, -7), to: addDays(monday, -1) };
+        // "Last 2 weeks" is this week and the one before it, to today.
+        const weeks = { last2: 2, last4: 4 }[pick];
+        if (weeks)
+            return { from: addDays(monday, -7 * (weeks - 1)), to: t };
         const wk = /^W\d+$/i.test(pick) ? parseInt(pick.slice(1)) : 1;
         return fiscalWeekRange(fyStart, wk) || { from: fyOpen, to: fyClose };
     }
     if (type === 'Quarter') {
-        const pick = sel?.quarters?.[0];
-        const qNum = pick && /^q[1-4]$/i.test(pick) ? parseInt(pick.slice(1)) - 1 : 0;
+        const pick = sel?.quarters?.[0] || 'this';
+        // The fiscal quarter holding today: Apr–Jun is Q1.
+        const qStart = new Date(t.getFullYear(), t.getMonth() - (((t.getMonth() - 3 + 12) % 12) % 3), 1);
+        if (pick === 'this')
+            return { from: qStart, to: t };
+        if (pick === 'last')
+            return { from: new Date(qStart.getFullYear(), qStart.getMonth() - 3, 1), to: addDays(qStart, -1) };
+        const qNum = /^q[1-4]$/i.test(pick) ? parseInt(pick.slice(1)) - 1 : 0;
         const startMonth = (3 + qNum * 3) % 12;
         const sy = yearOf(startMonth);
         return { from: new Date(sy, startMonth, 1), to: new Date(sy, startMonth + 3, 0) };
     }
-    if (type === 'Year')
-        return { from: fyOpen, to: fyClose };
-    const picks = (sel?.months || []).filter(s => /^\d{1,2}$/.test(s)).map(s => parseInt(s));
+    if (type === 'Year') {
+        const pick = sel?.years?.[0] || 'this';
+        if (pick === 'all')
+            return { from: new Date(1970, 0, 1), to: t };
+        if (pick === 'last')
+            return { from: new Date(fyStart - 1, 3, 1), to: new Date(fyStart, 2, 31) };
+        const fy = /^\d{4}$/.test(pick) ? parseInt(pick) : fyStart;
+        return { from: new Date(fy, 3, 1), to: new Date(fy + 1, 2, 31) };
+    }
+    const months = sel?.months || [];
+    if (months.includes('this'))
+        return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: t };
+    if (months.includes('last'))
+        return { from: new Date(t.getFullYear(), t.getMonth() - 1, 1), to: new Date(t.getFullYear(), t.getMonth(), 0) };
+    const picks = months.filter(s => /^\d{1,2}$/.test(s)).map(s => parseInt(s));
     if (picks.length > 0) {
         const ranges = picks.map(monthRange);
         return {
@@ -82,7 +115,7 @@ export const rangeFromSelection = (sel, fyStart) => {
             to: ranges.reduce((a, b) => (b.to > a.to ? b : a)).to,
         };
     }
-    return monthRange(3);
+    return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: t };
 };
 // Header subtitle for the selected period. Week/Day show their day span in brackets;
 // Quarter/Year show fiscal labels. `t` translates the period words.
@@ -99,17 +132,28 @@ export const buildContextLabel = (sel, fyStart, dateFrom, dateTo, t) => {
         return `${pick} (${dayRange})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Week') {
-        const w = sel.weeks?.[0];
-        const wk = w && /^W\d+$/i.test(w) ? w.slice(1) : '1';
+        const w = sel.weeks?.[0] || 'this';
+        const quick = { this: 'This Week', last: 'Last Week', last2: 'Last 2 Weeks', last4: 'Last 4 Weeks' }[w];
+        if (quick)
+            return `${t(quick)} (${dayRange})`;
+        const wk = /^W\d+$/i.test(w) ? w.slice(1) : '1';
         return `${t('Week')} ${wk} (${dayRange})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Quarter') {
-        const q = sel.quarters?.[0];
-        const label = q && /^q[1-4]$/i.test(q) ? `Q${q.slice(1)}` : 'Q1';
+        const q = sel.quarters?.[0] || 'this';
+        const label = q === 'this' ? t('This Quarter') : q === 'last' ? t('Last Quarter') : /^q[1-4]$/i.test(q) ? `Q${q.slice(1)}` : 'Q1';
         return `${label} (${fmtMon(from)} – ${fmtMon(to)})`;
     }
     if (!dateFrom && !dateTo && sel?.type === 'Year') {
-        return `${t('FY')} ${fyStart}-${fyStart + 1}`;
+        const y = sel.years?.[0] || 'this';
+        if (y === 'all')
+            return t('All Time');
+        const fy = y === 'last' ? fyStart - 1 : /^\d{4}$/.test(y) ? parseInt(y) : fyStart;
+        return `${t('FY')} ${fy}-${fy + 1}`;
+    }
+    const m0 = sel?.months?.[0];
+    if (!dateFrom && !dateTo && sel?.type === 'Month' && (m0 === 'this' || m0 === 'last')) {
+        return `${t(m0 === 'this' ? 'This Month' : 'Last Month')} (${dayRange})`;
     }
     const sameMonth = from.getFullYear() === to.getFullYear() && from.getMonth() === to.getMonth();
     if (sameMonth)

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

@@ -1,2 +1 @@
-'use client';
 export { BooleanCell } from './BooleanCell.js';

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

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

package/dist/components/datagrid/controls/menu/grouping/index.js

@@ -1,2 +1 @@
-'use client';
 export { GroupingSection } from './GroupingSection.js';

package/dist/components/datagrid/controls/menu/index.js

@@ -1,4 +1,3 @@
-'use client';
 export { ActionsMenu } from './ActionsMenu.js';
 export { ViewSection } from './view/ViewSection.js';
 export { ExportSection } from './export/ExportSection.js';

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

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

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

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../../../ui/index.j
 import { Button } from '../../../../ui/index.js';
 import { Dropdown } from '../../../../index.js';
 import { Badge } from '../../../../ui/index.js';
+import { formatNumber } from '../../../../../lib/number-format.js';
 const CHART_COLORS = [
     '#3b82f6', // Blue
     '#ef4444', // Red
@@ -341,7 +342,7 @@ export function DataVisualization({ data, columns, title = "Data Insights" }) {
     if (data.length === 0) {
         return (_jsx(Card, { className: "p-8", children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx(BarChart3, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), _jsx("h3", { className: "text-lg font-medium mb-2", children: "No Data Available" }), _jsx("p", { className: "text-sm", children: "Add some data to view visualizations" })] }) }));
     }
-    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title }), _jsxs("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [_jsx(BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), _jsxs(Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [_jsx(LineChartIcon, { className: "h-4 w-4 mr-2" }), "Line"] }), _jsxs(Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [_jsx(Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), _jsxs(Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [_jsx(PieChartIcon, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: summaryStats.sum.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), _jsx("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-orange-600", children: summaryStats.min.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-purple-600", children: summaryStats.max.toLocaleString() }), _jsx("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), _jsx(Dropdown, { options: categoricalColumns.map((col) => ({
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title }), _jsxs("p", { className: "text-sm text-gray-600 mt-1", children: ["Visual analysis of ", data.length, " records"] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Button, { variant: selectedChart === 'bar' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('bar'), children: [_jsx(BarChart3, { className: "h-4 w-4 mr-2" }), "Bar"] }), _jsxs(Button, { variant: selectedChart === 'line' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('line'), children: [_jsx(LineChartIcon, { className: "h-4 w-4 mr-2" }), "Line"] }), _jsxs(Button, { variant: selectedChart === 'area' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('area'), children: [_jsx(Activity, { className: "h-4 w-4 mr-2" }), "Area"] }), _jsxs(Button, { variant: selectedChart === 'pie' ? 'primary' : 'outline', size: "sm", onClick: () => setSelectedChart('pie'), children: [_jsx(PieChartIcon, { className: "h-4 w-4 mr-2" }), "Pie"] })] })] }), summaryStats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: formatNumber(summaryStats.sum) }), _jsx("div", { className: "text-xs text-gray-600", children: "Total" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: summaryStats.avg.toFixed(1) }), _jsx("div", { className: "text-xs text-gray-600", children: "Average" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-orange-600", children: formatNumber(summaryStats.min) }), _jsx("div", { className: "text-xs text-gray-600", children: "Minimum" })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsx("div", { className: "text-2xl font-bold text-purple-600", children: formatNumber(summaryStats.max) }), _jsx("div", { className: "text-xs text-gray-600", children: "Maximum" })] }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "Chart Configuration" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "text-sm font-medium mb-2 block", children: ["X-Axis (", selectedChart === 'pie' ? 'Category' : 'Categories', ")"] }), _jsx(Dropdown, { options: categoricalColumns.map((col) => ({
                                                 value: col.key,
                                                 label: col.label,
                                             })), value: xAxisColumn, onValueChange: (value) => setXAxisColumn(typeof value === 'string' ? value : value[0] || ''), placeholder: "Select column" })] }), selectedChart !== 'pie' && (_jsxs("div", { children: [_jsx("label", { className: "text-sm font-medium mb-2 block", children: "Y-Axis (Values)" }), _jsx(Dropdown, { options: numericColumns.map((col) => ({

package/dist/components/datagrid/index.js

@@ -1,4 +1,3 @@
-'use client';
 // Main component
 export { DataGrid } from './DataGrid.js';
 // Controls

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

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

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

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

package/dist/components/forms/date-picker/index.js

@@ -1,4 +1,3 @@
-'use client';
 // DatePicker - Single/Range date selection without time
 export { DatePicker } from './DatePicker.js';
 // DateTimePicker - Single date WITH time selection

package/dist/components/forms/dropdown/index.js

@@ -1,2 +1 @@
-'use client';
 export { Dropdown } from './Dropdown.js';

package/dist/components/forms/file-attachment/index.js

@@ -1,2 +1 @@
-'use client';
 export { FileAttachment } from './FileAttachment.js';

package/dist/components/forms/index.js

@@ -1,4 +1,3 @@
-'use client';
 // Form controls entry: `import { DatePicker } from 'indas-ui/forms'`
 export { Dropdown } from './dropdown/index.js';
 export { DatePicker, DateTimePicker } from './date-picker/index.js';

package/dist/components/forms/remark-input/index.js

@@ -1,2 +1 @@
-'use client';
 export { RemarkInput, RemarkTrail, commitRemarkToTrail } from './RemarkInput.js';