indas-ui 0.1.8 → 0.1.9

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

@@ -56,11 +56,11 @@ export function BoxPlotChart({ data, height = 300, showLegend = false, color = '
             formatter: (params) => {
                 if (params.seriesType === 'boxplot') {
                     const [min, q1, median, q3, max] = params.data;
-                    return `<strong>${categories[params.dataIndex]}</strong><br/>
-            Max: ${max}<br/>
-            Q3: ${q3}<br/>
-            Median: ${median}<br/>
-            Q1: ${q1}<br/>
+                    return `<strong>${categories[params.dataIndex]}</strong><br/>
+            Max: ${max}<br/>
+            Q3: ${q3}<br/>
+            Median: ${median}<br/>
+            Q1: ${q1}<br/>
             Min: ${min}`;
                 }
                 return `Outlier: ${params.data[1]}`;

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

@@ -97,36 +97,36 @@ export function GanttChart({ tasks, height = 400, showProgress = true, showToday
                     return '';
                 const duration = getDuration(task.startDate, task.endDate);
                 const progress = task.progress ?? 0;
-                return `
-          <div style="padding: 8px; min-width: 180px;">
-            <div style="font-weight: 600; margin-bottom: 6px; color: ${theme.textColorStrong};">${task.name}</div>
-            <div style="display: grid; gap: 4px; font-size: 12px;">
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Start:</span>
-                <span style="font-weight: 500;">${formatDate(task.startDate)}</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">End:</span>
-                <span style="font-weight: 500;">${formatDate(task.endDate)}</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Duration:</span>
-                <span style="font-weight: 500;">${duration} day${duration !== 1 ? 's' : ''}</span>
-              </div>
-              ${showProgress ? `
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Progress:</span>
-                <span style="font-weight: 500; color: ${progress >= 100 ? theme.success : progress >= 50 ? theme.warning : theme.info};">${progress}%</span>
-              </div>
-              ` : ''}
-              ${task.category ? `
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Category:</span>
-                <span style="font-weight: 500;">${task.category}</span>
-              </div>
-              ` : ''}
-            </div>
-          </div>
+                return `
+          <div style="padding: 8px; min-width: 180px;">
+            <div style="font-weight: 600; margin-bottom: 6px; color: ${theme.textColorStrong};">${task.name}</div>
+            <div style="display: grid; gap: 4px; font-size: 12px;">
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Start:</span>
+                <span style="font-weight: 500;">${formatDate(task.startDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">End:</span>
+                <span style="font-weight: 500;">${formatDate(task.endDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Duration:</span>
+                <span style="font-weight: 500;">${duration} day${duration !== 1 ? 's' : ''}</span>
+              </div>
+              ${showProgress ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Progress:</span>
+                <span style="font-weight: 500; color: ${progress >= 100 ? theme.success : progress >= 50 ? theme.warning : theme.info};">${progress}%</span>
+              </div>
+              ` : ''}
+              ${task.category ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Category:</span>
+                <span style="font-weight: 500;">${task.category}</span>
+              </div>
+              ` : ''}
+            </div>
+          </div>
         `;
             }
         },

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

@@ -28,8 +28,8 @@ export function ParetoChart({ data, height = 300, showLegend = true, barColor =
             formatter: (params) => {
                 const bar = params.find((p) => p.seriesType === 'bar');
                 const line = params.find((p) => p.seriesType === 'line');
-                return `${bar?.name}<br/>
-          Value: ${formatNumber(bar?.value)}<br/>
+                return `${bar?.name}<br/>
+          Value: ${formatNumber(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

package/dist/components/datagrid/DataGrid.js

@@ -1530,15 +1530,15 @@ enableFilterRow = false, initialColumnFilters, }) {
                                                                                             e.preventDefault();
                                                                                             onRowContextMenu(row.original, e);
                                                                                         }
-                                                                                    }, style: getRowProps?.(row.original)?.style, className: `
-                                  cursor-pointer group
-                                  transition-colors duration-150 ease-out
+                                                                                    }, style: getRowProps?.(row.original)?.style, className: `
+                                  cursor-pointer group
+                                  transition-colors duration-150 ease-out
                                   ${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)))]'}
-                                  ${getRowProps?.(row.original)?.className ?? ''}
+                                                                                            : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
+                                  ${getRowProps?.(row.original)?.className ?? ''}
                                 `, children: 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: handleColumnSearch, onClearColumnSearch: handleClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id))) }, row.id));
                                                                             }), rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length, style: {
                                                                                         height: `${rowVirtualizer.getTotalSize() -
@@ -1554,15 +1554,15 @@ enableFilterRow = false, initialColumnFilters, }) {
                                                                                     e.preventDefault();
                                                                                     onRowContextMenu(row.original, e);
                                                                                 }
-                                                                            }, rowHeight: rowHeight, style: getRowProps?.(row.original)?.style, className: `
-                                      cursor-pointer group
-                                      transition-colors duration-150 ease-out
+                                                                            }, rowHeight: rowHeight, style: getRowProps?.(row.original)?.style, className: `
+                                      cursor-pointer group
+                                      transition-colors duration-150 ease-out
                                       ${isHighlighted
                                                                                 ? 'border-2 border-primary bg-gradient-to-r from-primary/10 to-primary/20 shadow-lg relative z-10'
                                                                                 : isSelected
                                                                                     ? 'bg-[rgb(var(--bg-selected))] shadow-sm hover:bg-[rgb(var(--bg-hover))]'
-                                                                                    : 'hover:bg-[rgb(var(--bg-hover))]'}
-                                      ${getRowProps?.(row.original)?.className ?? ''}
+                                                                                    : 'hover:bg-[rgb(var(--bg-hover))]'}
+                                      ${getRowProps?.(row.original)?.className ?? ''}
                                     `, children: 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: handleColumnSearch, onClearColumnSearch: handleClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id))) }, row.id));
                                                                     })) })) }));
                                                         })() }), enableSummary && summaryConfig && (_jsx(SummaryRow, { table: table, data: processedData, config: summaryConfig, enableRowSelection: enableRowSelection, showDragHandle: isRowReorderingActive }))] }), !loading && table.getRowModel().rows.length === 0 && (_jsx("div", { className: "absolute left-0 right-0 bottom-0 flex items-center justify-center pointer-events-none z-10", style: { top: '44px' }, children: _jsx("span", { className: "text-[rgb(var(--fg-muted))] text-sm", children: "No data available" }) }))] }) }));

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

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

package/dist/components/modals/Modal.js

@@ -115,6 +115,12 @@ function Modal({ open, onOpenChange, ...props }) {
     const childRegistry = React.useCallback((delta) => {
         childOpenCountRef.current += delta;
     }, []);
+    // The sentinel outlives one run of the effect below: React Strict Mode runs it, cleans it up and
+    // runs it again at once in development. Retracting in that cleanup meant a `history.back()` that
+    // landed after the replay had pushed a new sentinel, popped that one, and read as a back press:
+    // every modal on a phone closed itself a moment after opening. So the cleanup only marks it for
+    // retraction, a replay in the same tick takes it back, and the retraction happens a microtask later.
+    const sentinelRef = React.useRef(null);
     React.useEffect(() => {
         if (!open)
             return;
@@ -125,8 +131,17 @@ function Modal({ open, onOpenChange, ...props }) {
         // Push a sentinel tagged with THIS modal's identity, so we can tell our own
         // dismissal apart from a nested child retracting its entry. Without the id
         // the parent closes too when a child modal applies or cancels.
-        const id = ++modalSentinelSeq;
-        window.history.pushState({ __modal: true, __modalId: id }, '');
+        let sentinel = sentinelRef.current;
+        if (sentinel?.retracting) {
+            sentinel.retracting = false;
+        }
+        else {
+            sentinel = { id: ++modalSentinelSeq, retracting: false };
+            sentinelRef.current = sentinel;
+            window.history.pushState({ __modal: true, __modalId: sentinel.id }, '');
+        }
+        const mine = sentinel;
+        const id = mine.id;
         let selfPopped = false;
         const onPopState = () => {
             // React only when OUR sentinel is the one that just left the stack.
@@ -150,12 +165,21 @@ function Modal({ open, onOpenChange, ...props }) {
             // Closing normally (Apply / Cancel / X) — retract our own sentinel so the
             // history stack doesn't grow. If the back button already popped it,
             // calling back() again would navigate the real page away.
-            if (selfPopped)
+            if (selfPopped) {
+                sentinelRef.current = null;
                 return;
-            const state = window.history.state;
-            if (state && state.__modal && state.__modalId === id) {
-                window.history.back();
             }
+            mine.retracting = true;
+            queueMicrotask(() => {
+                if (!mine.retracting)
+                    return;
+                if (sentinelRef.current === mine)
+                    sentinelRef.current = null;
+                const state = window.history.state;
+                if (state && state.__modal && state.__modalId === id) {
+                    window.history.back();
+                }
+            });
         };
     }, [open]);
     return (_jsx(ModalHasOpenChildContext.Provider, { value: childOpenCountRef, children: _jsx(ModalDepthContext.Provider, { value: depth, children: _jsx(ModalChildRegistryContext.Provider, { value: childRegistry, children: _jsx(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, ...props }) }) }) }));

package/dist/components/ui/chart.js

@@ -26,16 +26,16 @@ const ChartStyle = ({ id, config }) => {
     }
     return (_jsx("style", { dangerouslySetInnerHTML: {
             __html: Object.entries(THEMES)
-                .map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
                 const color = itemConfig.theme?.[theme] ||
                     itemConfig.color;
                 return color ? `  --color-${key}: ${color};` : null;
             })
-                .join('\n')}
-}
+                .join('\n')}
+}
 `)
                 .join('\n'),
         } }));

package/dist/contexts/ThemeContext.js

@@ -50,58 +50,58 @@ export function ThemeProvider({ children, defaultTheme = { variant: 'default', m
  * ```
  */
 export function ThemeScript({ storageKey = THEME_CONFIG.storageKey, defaultTheme = 'default', defaultMode = 'light' }) {
-    const script = `
-    (function() {
-      try {
-        // Get saved theme or use default - no system detection
-        var savedTheme;
-        try {
-          savedTheme = JSON.parse(localStorage.getItem('${storageKey}'));
-        } catch (e) {
-          savedTheme = null;
-        }
-
-        // Force light theme with default variant - this is hardcoded
-        var mode = 'light';
-        var variant = 'default';
-
-        // Always use default light theme, no exceptions
-
-        // Remove any existing theme classes
-        var html = document.documentElement;
-        var classList = html.classList;
-        var classesToRemove = [];
-        for (var i = 0; i < classList.length; i++) {
-          var className = classList[i];
-          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
-            classesToRemove.push(className);
-          }
-        }
-        classesToRemove.forEach(function(className) {
-          html.classList.remove(className);
-        });
-
-        // Add new theme classes
-        html.classList.add('theme-' + variant, mode);
-
-        // CSS variables are handled by CSS classes, no need to set them here
-      } catch (e) {
-        // Fallback: ensure we have default classes
-        var html = document.documentElement;
-        var classList = html.classList;
-        var classesToRemove = [];
-        for (var i = 0; i < classList.length; i++) {
-          var className = classList[i];
-          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
-            classesToRemove.push(className);
-          }
-        }
-        classesToRemove.forEach(function(className) {
-          html.classList.remove(className);
-        });
-        html.classList.add('theme-${defaultTheme}', '${defaultMode}');
-      }
-    })()
+    const script = `
+    (function() {
+      try {
+        // Get saved theme or use default - no system detection
+        var savedTheme;
+        try {
+          savedTheme = JSON.parse(localStorage.getItem('${storageKey}'));
+        } catch (e) {
+          savedTheme = null;
+        }
+
+        // Force light theme with default variant - this is hardcoded
+        var mode = 'light';
+        var variant = 'default';
+
+        // Always use default light theme, no exceptions
+
+        // Remove any existing theme classes
+        var html = document.documentElement;
+        var classList = html.classList;
+        var classesToRemove = [];
+        for (var i = 0; i < classList.length; i++) {
+          var className = classList[i];
+          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
+            classesToRemove.push(className);
+          }
+        }
+        classesToRemove.forEach(function(className) {
+          html.classList.remove(className);
+        });
+
+        // Add new theme classes
+        html.classList.add('theme-' + variant, mode);
+
+        // CSS variables are handled by CSS classes, no need to set them here
+      } catch (e) {
+        // Fallback: ensure we have default classes
+        var html = document.documentElement;
+        var classList = html.classList;
+        var classesToRemove = [];
+        for (var i = 0; i < classList.length; i++) {
+          var className = classList[i];
+          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
+            classesToRemove.push(className);
+          }
+        }
+        classesToRemove.forEach(function(className) {
+          html.classList.remove(className);
+        });
+        html.classList.add('theme-${defaultTheme}', '${defaultMode}');
+      }
+    })()
   `;
     // suppressHydrationWarning: this inline head script is a known target for
     // browser extensions (e.g. ad/popup blockers) that overwrite its content or