indas-ui 0.1.2 → 0.1.4

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/rows/DraggableRow.js

@@ -17,15 +17,15 @@ navigationState = {}, columnSearches = {}, isColumnSearchActive = {}, onColumnSe
         transition,
         opacity: isDragging ? 0.5 : 1,
     };
-    return (_jsxs("tr", { ref: setNodeRef, style: style, className: `
-        cursor-pointer group
-        transition-colors duration-150 ease-out
-        ${isDragging ? 'shadow-lg z-50' : ''}
+    return (_jsxs("tr", { ref: setNodeRef, style: style, className: `
+        cursor-pointer group
+        transition-colors duration-150 ease-out
+        ${isDragging ? 'shadow-lg z-50' : ''}
         ${isHighlighted
             ? 'border-2 border-[rgb(var(--color-primary))] bg-gradient-to-r from-[rgb(var(--color-primary))]/10 to-[rgb(var(--color-primary))]/20 shadow-lg relative'
             : isSelected
                 ? 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_8%,rgb(var(--bg-surface)))] shadow-sm hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_15%,rgb(var(--bg-surface)))]'
-                : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
-        ${className ?? ''}
+                : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
+        ${className ?? ''}
       `, onClick: onRowClick, onDoubleClick: onRowDoubleClick, onContextMenu: onRowContextMenu, children: [showDragHandle && (_jsx("td", { className: "text-center align-middle cursor-grab active:cursor-grabbing", style: { width: '1.875rem', minWidth: '1.875rem', maxWidth: '1.875rem' }, ...attributes, ...listeners, children: _jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx(GripVertical, { className: "h-4 w-4 text-gray-400" }) }) })), row.getVisibleCells().map((cell, cellIndex) => (_jsx(CellRenderer, { cell: cell, cellIndex: cellIndex, row: row, enableBacchaSearch: enableBacchaSearch, mainColumnsArray: mainColumnsArray, frozenColumnsState: frozenColumnsState, navigationState: navigationState, columnSearches: columnSearches, isColumnSearchActive: isColumnSearchActive, onColumnSearch: onColumnSearch, onClearColumnSearch: onClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id)))] }));
 }

package/dist/components/datagrid/search/InlineSearchCell.js

@@ -86,10 +86,10 @@ export function InlineSearchCell({ value, columnId, rowId, onSearch, onClearSear
         return (_jsx(_Fragment, { children: parts.map((part, index) => part.toLowerCase() === highlight.toLowerCase() ? (_jsx("mark", { className: "bg-yellow-200 text-yellow-900 px-0.5 rounded", children: part }, index)) : (_jsx("span", { children: part }, index))) }));
     };
     const displayValue = value?.toString() || '';
-    return (_jsxs("div", { ref: cellRef, tabIndex: 0, className: `bacchasearch relative group cursor-pointer outline-none inline-flex items-center w-full ${className}`, onClick: handleCellClick, children: [_jsx("span", { className: `
-          text-xs flex-1 rounded transition-colors
-          ${isSearchActive ? 'bg-[rgb(var(--color-primary)/0.1)]' : 'hover:bg-[rgb(var(--color-primary)/0.05)]'}
-          ${isTyping ? 'ring-1 ring-[rgb(var(--color-primary)/0.3)] bg-[rgb(var(--color-primary)/0.15)]' : ''}
+    return (_jsxs("div", { ref: cellRef, tabIndex: 0, className: `bacchasearch relative group cursor-pointer outline-none inline-flex items-center w-full ${className}`, onClick: handleCellClick, children: [_jsx("span", { className: `
+          text-xs flex-1 rounded transition-colors
+          ${isSearchActive ? 'bg-[rgb(var(--color-primary)/0.1)]' : 'hover:bg-[rgb(var(--color-primary)/0.05)]'}
+          ${isTyping ? 'ring-1 ring-[rgb(var(--color-primary)/0.3)] bg-[rgb(var(--color-primary)/0.15)]' : ''}
         `, children: isSearchActive && searchTerm ?
                     renderHighlightedText(displayValue, searchTerm) :
                     displayValue }), _jsx(Search, { className: `h-3 w-3 text-[rgb(var(--fg-muted))] ml-0.5 flex-shrink-0 transition-opacity ${isTyping ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}` }), (isTyping || isSearchActive) && (_jsx("div", { className: "absolute -top-0.5 -right-0.5", children: _jsx("div", { className: `h-1.5 w-1.5 rounded-full ${isTyping ? 'bg-[rgb(var(--color-success))]' : 'bg-[rgb(var(--color-primary))]'}` }) })), isTyping && localSearchTerm && (_jsxs("div", { className: "absolute -bottom-5 left-0 bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] text-xs px-1.5 py-0.5 rounded shadow-lg border border-[rgb(var(--bd-default))] z-10 whitespace-nowrap", children: ["\"", localSearchTerm, "\""] }))] }));

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/draft/AutoSaveIndicator.js

@@ -54,14 +54,14 @@ export function AutoSaveIndicator({ enabled, lastSaved, isDirty, isSaving, onOpe
         };
     };
     const status = getStatus();
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), _jsx("button", { onClick: () => onToggleAutoSave?.(!enabled), className: `
-            relative inline-flex h-5 w-9 items-center rounded-full transition-colors
-            ${enabled ? 'bg-[rgb(var(--color-primary))]' : 'bg-[rgb(var(--bg-muted))]'}
-          `, title: enabled ? 'Disable auto-save' : 'Enable auto-save', children: _jsx("span", { className: `
-              inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform
-              ${enabled ? 'translate-x-5' : 'translate-x-1'}
-            ` }) }), _jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), _jsx("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), _jsxs("button", { onClick: onOpenDraftManager, className: `
-          flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors
-          ${status.bg} ${status.color} hover:opacity-80
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Auto-save:" }), _jsx("button", { onClick: () => onToggleAutoSave?.(!enabled), className: `
+            relative inline-flex h-5 w-9 items-center rounded-full transition-colors
+            ${enabled ? 'bg-[rgb(var(--color-primary))]' : 'bg-[rgb(var(--bg-muted))]'}
+          `, title: enabled ? 'Disable auto-save' : 'Enable auto-save', children: _jsx("span", { className: `
+              inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform
+              ${enabled ? 'translate-x-5' : 'translate-x-1'}
+            ` }) }), _jsx("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: enabled ? 'ON' : 'OFF' })] }), _jsx("div", { className: "h-4 w-px bg-[rgb(var(--bd-default))]" }), _jsxs("button", { onClick: onOpenDraftManager, className: `
+          flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors
+          ${status.bg} ${status.color} hover:opacity-80
         `, title: "Click to manage drafts", children: [status.icon, _jsx("span", { className: "text-xs font-medium", children: status.text })] })] }));
 }

package/dist/components/draft/DraftModal.js

@@ -156,10 +156,10 @@ export function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading
     // Early return after all hooks to comply with Rules of Hooks
     if (!open)
         return null;
-    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [_jsxs("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx(FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), _jsx("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), _jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "\n                w-full pl-9 pr-3 py-1.5 rounded-lg text-sm\n                bg-[rgb(var(--bg-default))]\n                border border-[rgb(var(--bd-default))]\n                text-[rgb(var(--fg-default))]\n                placeholder:text-[rgb(var(--fg-muted))]\n                focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]\n              " })] }), _jsx("div", { className: "flex-shrink-0 w-36", children: _jsx(Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-[rgb(var(--bg-muted))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-full border-4 border-[rgb(var(--color-primary)_/_0.2)] border-t-[rgb(var(--color-primary))] animate-spin mx-auto mb-3" }), _jsx("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx(FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), _jsx("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), _jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : (_jsx("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "bg-[rgb(var(--bg-surface))] rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col", children: [_jsxs("div", { className: "px-6 py-3 border-b border-[rgb(var(--bd-default))] flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx(FileText, { className: "w-5 h-5 text-[rgb(var(--color-primary))]" }), _jsx("h2", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: "Saved Drafts" }), _jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", drafts.length, ")"] })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[rgb(var(--fg-muted))]" }), _jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "\r\n                w-full pl-9 pr-3 py-1.5 rounded-lg text-sm\r\n                bg-[rgb(var(--bg-default))]\r\n                border border-[rgb(var(--bd-default))]\r\n                text-[rgb(var(--fg-default))]\r\n                placeholder:text-[rgb(var(--fg-muted))]\r\n                focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]\r\n              " })] }), _jsx("div", { className: "flex-shrink-0 w-36", children: _jsx(Dropdown, { options: SORT_OPTIONS, value: sortBy, onValueChange: (val) => setSortBy(val), size: "sm", autoWidth: true }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-[rgb(var(--bg-muted))] text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-full border-4 border-[rgb(var(--color-primary)_/_0.2)] border-t-[rgb(var(--color-primary))] animate-spin mx-auto mb-3" }), _jsx("p", { className: "text-[rgb(var(--fg-muted))]", children: "Loading drafts..." })] }) })) : filteredAndSortedDrafts.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx(FileText, { className: "w-16 h-16 text-[rgb(var(--fg-muted))] mb-4 opacity-50" }), _jsx("p", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: searchQuery ? 'No matching drafts' : 'No drafts saved yet' }), _jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: searchQuery ? 'Try a different search term' : 'Start by clicking "Save Draft" button' })] })) : (_jsx("div", { className: "space-y-3", children: paginatedDrafts.map((draft) => {
                             const progress = calculateProgress(draft);
                             const preview = draft.previewData || {};
-                            return (_jsx("div", { className: "\n                      group relative p-3 rounded-lg\n                      bg-[rgb(var(--bg-default))]\n                      border border-[rgb(var(--bd-default))]\n                      hover:border-[rgb(var(--color-primary))]\n                      hover:shadow-lg\n                      transition-all duration-200\n                    ", children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [_jsx("span", { children: formatRelativeTime(draft.lastSaved) }), _jsxs("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-[rgb(var(--color-primary)_/_0.1)] text-[rgb(var(--color-primary))] font-medium", children: "AUTO-SAVE" }))] })] }), _jsxs("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsxs("button", { onClick: () => handleLoad(draft.draftId), className: "\n                                px-4 py-2 rounded-lg text-sm font-medium\n                                bg-[rgb(var(--color-primary))]\n                                text-white\n                                hover:opacity-90\n                                transition-opacity\n                                flex items-center gap-2\n                              ", children: [_jsx(Download, { className: "w-4 h-4" }), "Load"] }), _jsx("button", { onClick: () => handleDelete(draft.draftId), disabled: deletingId === draft.draftId, className: "\n                                p-2 rounded-lg\n                                text-[rgb(var(--fg-muted))]\n                                hover:text-red-600\n                                hover:bg-red-50\n                                transition-colors\n                                disabled:opacity-50\n                              ", title: "Delete draft", children: deletingId === draft.draftId ? (_jsx("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && (_jsxs("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { className: "font-medium", children: [progress, "%"] })] }), _jsx("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
+                            return (_jsx("div", { className: "\r\n                      group relative p-3 rounded-lg\r\n                      bg-[rgb(var(--bg-default))]\r\n                      border border-[rgb(var(--bd-default))]\r\n                      hover:border-[rgb(var(--color-primary))]\r\n                      hover:shadow-lg\r\n                      transition-all duration-200\r\n                    ", children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-[rgb(var(--fg-default))] truncate text-base", children: draft.draftName || 'Untitled Draft' }), _jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-[rgb(var(--fg-muted))]", children: [_jsx("span", { children: formatRelativeTime(draft.lastSaved) }), _jsxs("span", { className: "hidden group-hover:inline", children: ["\u2022 ", formatFullDate(draft.lastSaved)] }), draft.isAutoSave && (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-[rgb(var(--color-primary)_/_0.1)] text-[rgb(var(--color-primary))] font-medium", children: "AUTO-SAVE" }))] })] }), _jsxs("div", { className: "flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsxs("button", { onClick: () => handleLoad(draft.draftId), className: "\r\n                                px-4 py-2 rounded-lg text-sm font-medium\r\n                                bg-[rgb(var(--color-primary))]\r\n                                text-white\r\n                                hover:opacity-90\r\n                                transition-opacity\r\n                                flex items-center gap-2\r\n                              ", children: [_jsx(Download, { className: "w-4 h-4" }), "Load"] }), _jsx("button", { onClick: () => handleDelete(draft.draftId), disabled: deletingId === draft.draftId, className: "\r\n                                p-2 rounded-lg\r\n                                text-[rgb(var(--fg-muted))]\r\n                                hover:text-red-600\r\n                                hover:bg-red-50\r\n                                transition-colors\r\n                                disabled:opacity-50\r\n                              ", title: "Delete draft", children: deletingId === draft.draftId ? (_jsx("div", { className: "w-4 h-4 rounded-full border-2 border-red-200 border-t-red-600 animate-spin" })) : (_jsx(Trash2, { className: "w-4 h-4" })) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm", children: [preview.jobName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.jobName }, "job")), preview.clientName && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.clientName }, "client")), preview.category && (_jsx("div", { className: "text-[rgb(var(--fg-muted))] truncate", children: preview.category }, "category")), preview.totalCost !== undefined && preview.totalCost > 0 && (_jsxs("div", { className: "font-medium text-[rgb(var(--color-primary))]", children: [currencySymbol, preview.totalCost.toLocaleString('en-IN')] }, "cost"))] }), progress > 0 && (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-[rgb(var(--fg-muted))] mb-1", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { className: "font-medium", children: [progress, "%"] })] }), _jsx("div", { className: "h-1.5 bg-[rgb(var(--bg-muted))] rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-[rgb(var(--color-primary))] transition-all duration-500 rounded-full", style: { width: `${progress}%` } }) })] }))] }) }) }, draft.draftId));
                         }) })) }), _jsxs("div", { className: "px-6 py-4 border-t border-[rgb(var(--bd-default))] flex justify-between items-center bg-[rgb(var(--bg-muted)_/_0.3)]", children: [_jsx("div", { className: "text-sm text-[rgb(var(--fg-muted))]", children: filteredAndSortedDrafts.length > 0 ? (_jsxs(_Fragment, { children: ["Showing ", ((currentPage - 1) * PAGE_SIZE) + 1, "-", Math.min(currentPage * PAGE_SIZE, filteredAndSortedDrafts.length), " of ", filteredAndSortedDrafts.length, filteredAndSortedDrafts.length !== drafts.length && ` (filtered from ${drafts.length})`] })) : (`0 of ${drafts.length} drafts`) }), totalPages > 1 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => setCurrentPage(p => Math.max(1, p - 1)), disabled: currentPage === 1, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("div", { className: "flex items-center gap-1", children: Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                                         let pageNum;
                                         if (totalPages <= 5) {
@@ -174,11 +174,11 @@ export function DraftModal({ open, onClose, drafts, onLoad, onDelete, isLoading
                                         else {
                                             pageNum = currentPage - 2 + i;
                                         }
-                                        return (_jsx("button", { onClick: () => setCurrentPage(pageNum), className: `
-                        w-8 h-8 rounded text-sm font-medium transition-colors
+                                        return (_jsx("button", { onClick: () => setCurrentPage(pageNum), className: `
+                        w-8 h-8 rounded text-sm font-medium transition-colors
                         ${currentPage === pageNum
                                                 ? 'bg-[rgb(var(--color-primary))] text-white'
-                                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))]'}
+                                                : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))]'}
                       `, children: pageNum }, pageNum));
-                                    }) }), _jsx("button", { onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] })), _jsx("button", { onClick: onClose, className: "\n              px-5 py-2 rounded-lg text-sm font-medium\n              bg-[rgb(var(--bg-default))]\n              text-[rgb(var(--fg-default))]\n              border border-[rgb(var(--bd-default))]\n              hover:bg-[rgb(var(--bg-muted))]\n              transition-colors\n            ", children: "Close" })] })] }) }));
+                                    }) }), _jsx("button", { onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "p-1.5 rounded text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-default))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors", children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] })), _jsx("button", { onClick: onClose, className: "\r\n              px-5 py-2 rounded-lg text-sm font-medium\r\n              bg-[rgb(var(--bg-default))]\r\n              text-[rgb(var(--fg-default))]\r\n              border border-[rgb(var(--bd-default))]\r\n              hover:bg-[rgb(var(--bg-muted))]\r\n              transition-colors\r\n            ", children: "Close" })] })] }) }));
 }

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

@@ -93,20 +93,14 @@ export function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode
     const normalizeDateToMidnight = (date) => {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
     };
-    const formatDate = (date) => {
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = MONTHS[date.getMonth()].slice(0, 3);
-        const year = date.getFullYear();
-        return `${day} ${month}, ${year}`;
-    };
+    // "1 Sep 2026": built by hand rather than with toLocaleDateString, whose en-GB and en-IN
+    // locales spell September "Sept". parseDate reads it back with or without a comma.
+    const formatDateNoYear = (date) => `${date.getDate()} ${MONTHS[date.getMonth()].slice(0, 3)}`;
+    const formatDate = (date) => `${formatDateNoYear(date)} ${date.getFullYear()}`;
     const formatDateShort = (date) => {
         if (!date)
             return '--';
-        return date.toLocaleDateString('en-GB', {
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric'
-        });
+        return formatDate(date);
     };
     const formatDisplayValue = () => {
         if (!value)
@@ -664,9 +658,9 @@ export function DatePicker({ id, 'aria-label': ariaLabel, value, onChange, mode
     }
     // Default popover mode
     return (_jsxs("div", { className: cn('relative w-full', className), ref: containerRef, children: [label && (_jsx("label", { className: "block text-sm font-medium text-[rgb(var(--fg-muted))] mb-2", children: label })), _jsxs(Popover.Root, { open: !disabled && isOpen, onOpenChange: (open) => !disabled && setIsOpen(open), children: [_jsx(Popover.Trigger, { asChild: true, disabled: disabled, children: iconOnly ? (_jsxs("button", { type: "button", className: cn('relative flex items-center gap-1 text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors p-0.5 flex-shrink-0', (selectedRange.from || selectedRange.to) && 'text-[rgb(var(--color-primary))]', className), title: selectedRange.from || selectedRange.to
-                                ? `Date filter: ${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}` : ''}`
+                                ? `Date filter: ${selectedRange.from ? formatDate(new Date(selectedRange.from)) : ''}${selectedRange.to ? ` – ${formatDate(new Date(selectedRange.to))}` : ''}`
                                 : 'Select date range', children: [_jsx(CalendarDays, { className: "h-3.5 w-3.5 flex-shrink-0" }), _jsx("span", { className: "hidden sm:inline text-xs", children: selectedRange.from || selectedRange.to
-                                        ? `${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}`
+                                        ? `${selectedRange.from ? formatDateNoYear(new Date(selectedRange.from)) : ''}${selectedRange.to ? ` – ${formatDateNoYear(new Date(selectedRange.to))}` : ''}`
                                         : 'Date' }), (selectedRange.from || selectedRange.to) && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : (_jsx("div", { className: "relative", ref: inputWrapperRef, onClick: (e) => e.preventDefault(), children: _jsx(Input, { id: id, "aria-label": ariaLabel, value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: cn('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), _jsx(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: _jsxs(Popover.Content, { ref: calendarRef, className: cn("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
                                 // Prevent closing when interacting with nested Radix portals (like Dropdowns)
                                 const target = e.target;

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

@@ -40,7 +40,7 @@ export function DateTimePicker({ value, onChange, placeholder = 'Select date & t
         return returnFormat === 'string' ? date.toISOString() : date;
     };
     const formatDisplayValue = (date) => {
-        const day = date.getDate().toString().padStart(2, '0');
+        const day = date.getDate();
         const month = MONTHS[date.getMonth()].slice(0, 3);
         const year = date.getFullYear();
         let timeStr = '';
@@ -54,7 +54,7 @@ export function DateTimePicker({ value, onChange, placeholder = 'Select date & t
         else {
             timeStr = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
         }
-        return `${day} ${month}, ${year} ${timeStr}`;
+        return `${day} ${month} ${year} ${timeStr}`;
     };
     const handleDateClick = (date) => {
         setSelectedDate(date);

package/dist/components/layout/footer.js

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

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

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

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

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

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

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

package/dist/lib/number-format.js

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

package/dist/lib/utils.js

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

package/dist/styles/index.css

@@ -1,5 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './tokens.css';

package/package.json

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