xontable 0.1.3 → 0.2.1

package/README.md

@@ -46,6 +46,8 @@ import "xontable/styles";
 - `onChange(nextRows, meta)`: Updated rows with change meta
 - `readOnly`: Disable editing
 - `theme`: `"light" | "dark"`
+- `showStatusBar`: Show validation summary bar
+- `darkThemeColors`: Override dark theme colors
 
 ## Column Definition
 
@@ -65,27 +67,12 @@ type ColumnDef<Row> = {
 };
 ```
 
-## Data Model
-
-Rows are objects:
-
-```ts
-type Row = { id: string; [key: string]: any };
-```
-
-`onChange` receives a **new rows array** whenever edits/paste/fill happen.
-
 ## Editing
 - Single click selects
 - Enter or double-click to edit
 - Typing starts edit with typed character
 - Enter commits, Esc cancels, Tab commits and moves
 
-## Keyboard Navigation
-- Arrow keys move selection
-- Tab / Shift+Tab moves horizontally
-- Shift + arrows extends selection
-
 ## Copy / Paste
 - TSV compatible with Excel/Google Sheets
 - Use Ctrl/Cmd+C to copy selection
@@ -103,11 +90,13 @@ Per-column validation:
 { key: "qty", label: "Qty", type: "number", validator: (v) => v ? null : "Required" }
 ```
 
-Built-in number validation if `type: "number"`.
+## Status Bar
 
-## Select Dropdowns
+```tsx
+<XOnTable showStatusBar />
+```
 
-Static options:
+## Select Dropdowns
 
 ```ts
 { key: "city", label: "City", type: "select", options: [
@@ -115,59 +104,42 @@ Static options:
 ] }
 ```
 
-Async options:
-
-```ts
-{ key: "group", label: "Group", type: "select", getOptions: async () => groupOptions }
-```
-
-Cascading select with `dependsOn`:
-
-```ts
-{ key: "subgroup", label: "Subgroup", type: "select", dependsOn: "group", getOptions: async (row) => options[row.group] }
-```
-
-Invalid values will show validation color.
-
 ## Checkbox Cells
 
 ```ts
 { key: "active", label: "Active", type: "checkbox" }
 ```
 
-Values are `true` / `false`.
-
 ## Column Groups
 
 ```ts
-{ key: "name", label: "Name", group: "User" }
-{ key: "active", label: "Active", group: "User", groupCollapsible: true }
+const columns: ColumnDef<Row>[] = [
+  { key: "name", label: "Name", group: "User" },
+  { key: "active", label: "Active", type: "checkbox", group: "User" },
+  { key: "group", label: "Group", type: "select", group: "Account Details" },
+  { key: "subgroup", label: "Subgroup", type: "select", group: "Account Details" },
+  { key: "city", label: "City", type: "select", group: "Login info" },
+];
 ```
 
-Groups render a top header row and can be collapsed if `groupCollapsible` is true.
-
-## Filters
-Each column header shows a filter icon.
-- Search inside the filter menu
-- Toggle values on/off
-
-## Readonly Mode
+## Theme
 
 ```tsx
-<XOnTable readOnly />
+<XOnTable theme="dark" />
 ```
 
-Readonly keeps selection and scrolling but disables editing.
-
-## Theme
+### Dark Theme Colors (Props)
 
 ```tsx
-<XOnTable theme="dark" />
+<XOnTable
+  theme="dark"
+  darkThemeColors={{ bg: "#111318", headBg: "#1c1f26", accent: "#7aa2ff" }}
+/>
 ```
 
 ## Requirements
 - React 19+
-- Peer deps: `react`, `react-dom`, `lucide-react`
+- Peer deps: `react`, `react-dom`
 
 ## Troubleshooting
 

package/dist/XOnTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XOnTable.d.ts","sourceRoot":"","sources":["../src/XOnTable.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,2CAkIlF"}
+{"version":3,"file":"XOnTable.d.ts","sourceRoot":"","sources":["../src/XOnTable.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,2CA8IlF"}

package/dist/XOnTable.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import "./styles/xontable.css";
-import { SelectMenu, XOnTableGrid } from "./components";
+import { SelectMenu, XOnTableGrid, XOnTableStatusBar } from "./components";
 import { useAutoRows, useClipboardCatcher, useColumnFilters, useColumnGroups, useColumnResize, useEditorOverlay, useFillHandle, useGridKeydown, useOutsideClick, useRangeSelection, useSelectOptions, useTableModel } from "./hooks";
 const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
 export function XOnTable(props) {
-    const { columns, rows, rowIdKey = "id", onChange, readOnly = false, theme = "light" } = props;
+    const { columns, rows, rowIdKey = "id", onChange, readOnly = false, theme = "light", showStatusBar = false, darkThemeColors } = props;
     const activeCellRef = React.useRef(null);
     const [editingRowId, setEditingRowId] = React.useState(null);
     const { normalizedRows, handleChange, createRow } = useAutoRows(columns, rows, rowIdKey, onChange, editingRowId);
@@ -15,7 +15,7 @@ export function XOnTable(props) {
     const selection = useRangeSelection();
     const [copiedBounds, setCopiedBounds] = React.useState(null);
     React.useEffect(() => { resetWidths(); }, [columns, resetWidths]);
-    const { data, active, setActive, getValue, updateCells, moveActive, rowCount, colCount, hasError, getError, setCellErrorView, undo, redo } = useTableModel({
+    const { data, active, setActive, getValue, updateCells, moveActive, rowCount, colCount, hasError, getError, setCellErrorView, errorList, undo, redo } = useTableModel({
         columns: visibleColumns.map((v) => v.col),
         rows: normalizedRows,
         rowFilter: filters.rowFilter,
@@ -171,12 +171,24 @@ export function XOnTable(props) {
         onGridKeyDown(e);
     }, [active.c, active.r, onGridKeyDown, selection]);
     useOutsideClick({ isOpen: filters.filterOpenKey != null, onClose: filters.closeFilter });
-    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: "xontable-surface", tabIndex: 0, onFocus: (e) => {
+    const darkVars = theme === "dark" && darkThemeColors ? {
+        "--xontable-dark-bg": darkThemeColors.bg, "--xontable-dark-border": darkThemeColors.border, "--xontable-dark-text": darkThemeColors.text,
+        "--xontable-dark-cell-bg": darkThemeColors.cellBg, "--xontable-dark-head-bg": darkThemeColors.headBg, "--xontable-dark-rownum-bg": darkThemeColors.rownumBg,
+        "--xontable-dark-group-bg": darkThemeColors.groupBg, "--xontable-dark-zebra-bg": darkThemeColors.zebraBg, "--xontable-dark-active-head-bg": darkThemeColors.activeHeadBg,
+        "--xontable-dark-range": darkThemeColors.range, "--xontable-dark-copy": darkThemeColors.copy, "--xontable-dark-accent": darkThemeColors.accent,
+        "--xontable-dark-select": darkThemeColors.select, "--xontable-dark-invalid-bg": darkThemeColors.invalidBg, "--xontable-dark-invalid-border": darkThemeColors.invalidBorder,
+        "--xontable-dark-editor-bg": darkThemeColors.editorBg, "--xontable-dark-editor-text": darkThemeColors.editorText,
+        "--xontable-dark-readonly-bg": darkThemeColors.readonlyBg, "--xontable-dark-readonly-border": darkThemeColors.readonlyBorder,
+        "--xontable-dark-readonly-head-bg": darkThemeColors.readonlyHeadBg, "--xontable-dark-readonly-rownum-bg": darkThemeColors.readonlyRownumBg,
+        "--xontable-dark-readonly-zebra-bg": darkThemeColors.readonlyZebraBg,
+    } : undefined;
+    const onSelectError = React.useCallback((r, c) => { setActive({ r, c }); selection.startSelection({ r, c }); focusClipboard(); }, [focusClipboard, selection, setActive]);
+    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, style: darkVars, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: `xontable-surface${filters.filterOpenKey ? " is-filter-open" : ""}`, tabIndex: 0, onFocus: (e) => {
                     const target = e.target;
                     if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
                         return;
                     focusClipboard();
                 }, onKeyDown: onGridKeyDownWithCopy, children: _jsx(XOnTableGrid, { columns: visibleColumns, groups: groupHeaders.some((g) => g.label) ? groupHeaders : undefined, rowNumberWidth: 44, data: data, rowIdKey: rowIdKey, active: active, activeCol: active.c, isEditing: isEditing, readOnly: readOnly, selectionBounds: selection.getBounds(), copiedBounds: copiedBounds, getColWidth: getColWidth, getValue: getValue, hasError: hasError, getError: getError, isPreview: isPreview, activeCellRef: activeCellRef, onCellMouseDown: (r, c, ev) => { ev.preventDefault(); setActive({ r, c }); selection.startSelection({ r, c }); setCopiedBounds(null); focusClipboard(); if (filters.filterOpenKey)
                         filters.closeFilter(); }, onCellMouseEnter: (r, c) => { if (selection.isSelecting)
-                        selection.updateSelection({ r, c }); }, onCellDoubleClick: (r, c) => { setActive({ r, c }); startEditCell(); }, onCheckboxToggle: toggleCheckbox, onSelectOpen: openSelectAt, onFillStart: (r, c, ev) => { ev.preventDefault(); ev.stopPropagation(); startDrag(r, c); }, onResizeStart: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); startResize(c, ev.clientX); }, onResizeDoubleClick: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); autoFitCol(c); }, onGroupToggle: toggleGroup, filterOpenKey: filters.filterOpenKey, filterSearch: filters.filterSearch, getFilterOptions: filters.getFilterOptions, isFilterChecked: filters.isFilterChecked, isFilterAllChecked: filters.isAllChecked, onFilterOpen: filters.openFilter, onFilterSearch: filters.setFilterSearch, onFilterToggle: filters.toggleFilterValue, onFilterToggleAll: filters.toggleAll }) }), isEditing && editorRect && (_jsx("input", { ref: editorRef, className: "xontable-editor", name: "xontable-editor", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onEditorKeyDown, onBlur: () => { commitEdit(); validateSelect(active.r, active.c, draft, activeRow); }, style: { position: "fixed", left: editorRect.left, top: editorRect.top, width: editorRect.width, height: editorRect.height } })), _jsx(SelectMenu, { isOpen: Boolean(isEditing && activeCol?.type === "select"), rect: editorRect, options: activeRow && activeCol ? getOptions(activeRow, activeCol) : [], loading: Boolean(activeRow && activeCol && isLoading(activeRow, activeCol)), filter: draft, onSelect: (v) => { setDraft(v); commitEdit(v); validateSelect(active.r, active.c, v, activeRow); } })] }));
+                        selection.updateSelection({ r, c }); }, onCellDoubleClick: (r, c) => { setActive({ r, c }); startEditCell(); }, onCheckboxToggle: toggleCheckbox, onSelectOpen: openSelectAt, onFillStart: (r, c, ev) => { ev.preventDefault(); ev.stopPropagation(); startDrag(r, c); }, onResizeStart: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); startResize(c, ev.clientX); }, onResizeDoubleClick: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); autoFitCol(c); }, onGroupToggle: toggleGroup, filterOpenKey: filters.filterOpenKey, filterSearch: filters.filterSearch, getFilterOptions: filters.getFilterOptions, isFilterChecked: filters.isFilterChecked, isFilterAllChecked: filters.isAllChecked, onFilterOpen: filters.openFilter, onFilterSearch: filters.setFilterSearch, onFilterToggle: filters.toggleFilterValue, onFilterToggleAll: filters.toggleAll }) }), showStatusBar && _jsx(XOnTableStatusBar, { errors: errorList, columns: visibleColumns, onSelect: onSelectError }), isEditing && editorRect && (_jsx("input", { ref: editorRef, className: "xontable-editor", name: "xontable-editor", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onEditorKeyDown, onBlur: () => { commitEdit(); validateSelect(active.r, active.c, draft, activeRow); }, style: { position: "fixed", left: editorRect.left, top: editorRect.top, width: editorRect.width, height: editorRect.height } })), _jsx(SelectMenu, { isOpen: Boolean(isEditing && activeCol?.type === "select"), rect: editorRect, options: activeRow && activeCol ? getOptions(activeRow, activeCol) : [], loading: Boolean(activeRow && activeCol && isLoading(activeRow, activeCol)), filter: draft, onSelect: (v) => { setDraft(v); commitEdit(v); validateSelect(active.r, active.c, v, activeRow); } })] }));
 }

package/dist/components/XOnTableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XOnTableHeader.d.ts","sourceRoot":"","sources":["../../src/components/XOnTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3G,KAAK,WAAW,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAClD,OAAO,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAC5C,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,2CAiDtF"}
+{"version":3,"file":"XOnTableHeader.d.ts","sourceRoot":"","sources":["../../src/components/XOnTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3G,KAAK,WAAW,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAClD,OAAO,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAC5C,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,2CAgEtF"}

package/dist/components/XOnTableHeader.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Filter, Minus, Plus } from "lucide-react";
 import { ColumnFilterMenu } from "./ColumnFilterMenu";
 export function XOnTableHeader(props) {
     const { columns, groups, rowNumberWidth, activeCol, getColWidth, onResizeStart, onResizeDoubleClick, onGroupToggle, filterOpenKey, filterSearch, getFilterOptions, isFilterChecked, isFilterAllChecked, onFilterOpen, onFilterSearch, onFilterToggle, onFilterToggleAll } = props;
-    return (_jsxs(_Fragment, { children: [groups && groups.length > 0 && (_jsxs("div", { className: "xontable-row xontable-group-row", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-group-cell", style: { width: rowNumberWidth } }), groups.map((g) => (_jsxs("div", { className: "xontable-cell xontable-group-cell", style: { width: g.width }, children: [_jsx("span", { className: "xontable-group-label", children: g.label }), g.collapsible && (_jsx("button", { type: "button", className: "xontable-group-toggle", onClick: () => onGroupToggle(g.key), title: g.collapsed ? "Expand" : "Collapse", children: g.collapsed ? _jsx(Plus, { size: 12 }) : _jsx(Minus, { size: 12 }) }))] }, g.key)))] })), _jsxs("div", { className: "xontable-row xontable-head", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-head-cell", style: { width: rowNumberWidth } }), columns.map(({ col, idx }, c) => (_jsxs("div", { className: ["xontable-cell", "xontable-head-cell", c === activeCol ? "is-active-col-head" : ""].join(" "), style: { width: getColWidth(c) }, children: [_jsx("span", { className: "xontable-head-label", children: col.label }), idx != null && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "xontable-filter-btn", onClick: () => onFilterOpen(col.key), title: "Filter", children: _jsx(Filter, { size: 14 }) }), _jsx("div", { className: "xontable-col-resizer", onMouseDown: (ev) => onResizeStart(c, ev), onDoubleClick: (ev) => onResizeDoubleClick(c, ev), title: "Drag to resize" }), _jsx(ColumnFilterMenu, { isOpen: filterOpenKey === col.key, search: filterSearch, options: getFilterOptions(col.key), allChecked: isFilterAllChecked(col.key), isChecked: (v) => isFilterChecked(col.key, v), onSearchChange: onFilterSearch, onToggle: (v) => onFilterToggle(col.key, v), onToggleAll: () => onFilterToggleAll(col.key) })] }))] }, col.key + String(idx ?? c))))] })] }));
+    const FilterIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5h18M6 11h12M10 17h4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+    const PlusIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+    const MinusIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+    return (_jsxs(_Fragment, { children: [groups && groups.length > 0 && (_jsxs("div", { className: "xontable-row xontable-group-row", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-group-cell", style: { width: rowNumberWidth } }), groups.map((g) => (_jsxs("div", { className: "xontable-cell xontable-group-cell", style: { width: g.width }, children: [_jsx("span", { className: "xontable-group-label", children: g.label }), g.collapsible && (_jsx("button", { type: "button", className: "xontable-group-toggle", onClick: () => onGroupToggle(g.key), title: g.collapsed ? "Expand" : "Collapse", children: g.collapsed ? _jsx(PlusIcon, {}) : _jsx(MinusIcon, {}) }))] }, g.key)))] })), _jsxs("div", { className: "xontable-row xontable-head", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-head-cell", style: { width: rowNumberWidth } }), columns.map(({ col, idx }, c) => (_jsxs("div", { className: ["xontable-cell", "xontable-head-cell", c === activeCol ? "is-active-col-head" : ""].join(" "), style: { width: getColWidth(c) }, children: [_jsx("span", { className: "xontable-head-label", children: col.label }), idx != null && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "xontable-filter-btn", onClick: () => onFilterOpen(col.key), title: "Filter", children: _jsx(FilterIcon, {}) }), _jsx("div", { className: "xontable-col-resizer", onMouseDown: (ev) => onResizeStart(c, ev), onDoubleClick: (ev) => onResizeDoubleClick(c, ev), title: "Drag to resize" }), _jsx(ColumnFilterMenu, { isOpen: filterOpenKey === col.key, search: filterSearch, options: getFilterOptions(col.key), allChecked: isFilterAllChecked(col.key), isChecked: (v) => isFilterChecked(col.key, v), onSearchChange: onFilterSearch, onToggle: (v) => onFilterToggle(col.key, v), onToggleAll: () => onFilterToggleAll(col.key) })] }))] }, col.key + String(idx ?? c))))] })] }));
 }

package/dist/components/XOnTableStatusBar.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnDef } from "../types";
+type ErrorItem = {
+    r: number;
+    c: number;
+    message: string;
+};
+type StatusBarProps<Row extends Record<string, any>> = {
+    errors: ErrorItem[];
+    columns: Array<{
+        col: ColumnDef<Row>;
+        idx: number | null;
+    }>;
+    onSelect: (r: number, c: number) => void;
+};
+export declare function XOnTableStatusBar<Row extends Record<string, any>>(props: StatusBarProps<Row>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=XOnTableStatusBar.d.ts.map

package/dist/components/XOnTableStatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XOnTableStatusBar.d.ts","sourceRoot":"","sources":["../../src/components/XOnTableStatusBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,KAAK,cAAc,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACrD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAC5D,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAsB5F"}

package/dist/components/XOnTableStatusBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function XOnTableStatusBar(props) {
+    const { errors, columns, onSelect } = props;
+    const total = errors.length;
+    const visible = errors.slice(0, 3);
+    const countLabel = total ? "Errors" : "No errors";
+    return (_jsxs("div", { className: "xontable-status", children: [_jsxs("span", { className: ["xontable-status-count", total ? "is-error" : ""].join(" "), children: [_jsx("span", { className: "xontable-status-num", children: total }), _jsx("span", { className: "xontable-status-label", children: countLabel })] }), visible.map((e, idx) => {
+                const col = columns[e.c]?.col;
+                const label = col?.label ?? `Col ${e.c + 1}`;
+                return (_jsx("button", { type: "button", className: ["xontable-status-item", "is-error", `is-chip-${idx % 3}`].join(" "), onClick: () => onSelect(e.r, e.c), title: e.message, children: `Row ${e.r + 1}, ${label}: ${e.message}` }, `${e.r}:${e.c}`));
+            })] }));
+}

package/dist/components/index.d.ts

@@ -2,4 +2,5 @@ export { ColumnFilterMenu } from "./ColumnFilterMenu";
 export { SelectMenu } from "./SelectMenu";
 export { XOnTableGrid } from "./XOnTableGrid";
 export { XOnTableHeader } from "./XOnTableHeader";
+export { XOnTableStatusBar } from "./XOnTableStatusBar";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/index.js

@@ -2,3 +2,4 @@ export { ColumnFilterMenu } from "./ColumnFilterMenu";
 export { SelectMenu } from "./SelectMenu";
 export { XOnTableGrid } from "./XOnTableGrid";
 export { XOnTableHeader } from "./XOnTableHeader";
+export { XOnTableStatusBar } from "./XOnTableStatusBar";

package/dist/hooks/useTableModel.d.ts

@@ -24,6 +24,11 @@ export declare function useTableModel<Row extends Record<string, any>>(options:
     hasError: (r: number, c: number) => boolean;
     getError: (r: number, c: number) => string | null;
     setCellErrorView: (r: number, c: number, msg: string | null) => void;
+    errorList: {
+        r: number;
+        c: number;
+        message: string;
+    }[];
     undo: () => void;
     redo: () => void;
 };

package/dist/hooks/useTableModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableModel.d.ts","sourceRoot":"","sources":["../../src/hooks/useTableModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjE,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvD,KAAK,iBAAiB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACxD,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAIF,wBAAgB,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC;;;;;kBAsB3D,MAAM,KAAK,MAAM;2BAgBR,UAAU,EAAE,QAAQ,YAAY;qBAoBtC,MAAM,MAAM,MAAM;;;kBAmBjB,MAAM,KAAK,MAAM;kBAIjB,MAAM,KAAK,MAAM;0BApDb,MAAM,KAAK,MAAM,OAAO,MAAM,GAAG,IAAI;;;EAwE/E"}
+{"version":3,"file":"useTableModel.d.ts","sourceRoot":"","sources":["../../src/hooks/useTableModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjE,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC;AAEvD,KAAK,iBAAiB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACxD,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAIF,wBAAgB,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC;;;;;kBAsB3D,MAAM,KAAK,MAAM;2BAgBR,UAAU,EAAE,QAAQ,YAAY;qBAoBtC,MAAM,MAAM,MAAM;;;kBAmBjB,MAAM,KAAK,MAAM;kBAIjB,MAAM,KAAK,MAAM;0BApDb,MAAM,KAAK,MAAM,OAAO,MAAM,GAAG,IAAI;;;;;;;;EAmF/E"}

package/dist/hooks/useTableModel.js

@@ -32,7 +32,7 @@ export function useTableModel(options) {
         const v = row && col ? row[col.key] : "";
         return v == null ? "" : String(v);
     }, [columns, view.map]);
-    const { validateCell, setCellError, hasError, getError } = useValidation(columns, getRow, getValue);
+    const { validateCell, setCellError, hasError, getError, errors } = useValidation(columns, getRow, getValue);
     const setCellErrorView = useCallback((r, c, msg) => {
         const real = view.map[r];
         if (real == null)
@@ -116,6 +116,16 @@ export function useTableModel(options) {
         const real = view.map[r];
         return real == null ? null : getError(real, c);
     }, [getError, view.map]);
+    const errorList = useMemo(() => {
+        const map = new Map();
+        view.map.forEach((real, idx) => { if (real != null)
+            map.set(real, idx); });
+        return Object.entries(errors).flatMap(([key, message]) => {
+            const [r, c] = key.split(":").map(Number);
+            const vr = map.get(r);
+            return vr == null || Number.isNaN(c) ? [] : [{ r: vr, c, message }];
+        });
+    }, [errors, view.map]);
     return {
         data: view.list,
         rawData: dataRef.current,
@@ -129,6 +139,7 @@ export function useTableModel(options) {
         hasError: hasErrorView,
         getError: getErrorView,
         setCellErrorView,
+        errorList,
         undo,
         redo,
     };

package/dist/styles/xontable.base.css

@@ -1,5 +1,6 @@
 .xontable-wrap { display: block; width: 100%; height: 100%; border: 1px solid #e3e5ea; border-radius: 8px; overflow: hidden; background: #fff; --xontable-range: #1a73e8; --xontable-copy: #1a1a1a; }
-.xontable-surface { outline: none; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface { outline: none; width: 100%; height: 100%; min-height: 220px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface.is-filter-open { overflow-x: auto; overflow-y: visible; }
 .xontable-surface::-webkit-scrollbar { width: 8px; height: 8px; }
 .xontable-surface::-webkit-scrollbar-thumb { background: #b9c1cd; border-radius: 999px; }
 .xontable-surface::-webkit-scrollbar-track { background: transparent; }
@@ -44,8 +45,8 @@
 }
 .xontable-head-cell.is-active-col-head,
 .xontable-rownum-cell.is-active-rownum { background: #cfe3ff; }
-.xontable-cell.is-invalid { background: #ffe5e5; border: 1px solid #d92d2d; box-shadow: inset 0 0 0 1px #d92d2d; }
-.xontable-cell.is-invalid:hover { background: #ffd6d6; }
+.xontable-cell.is-invalid { background: #fff1f1; border: 1px solid #f3b1b1; box-shadow: inset 0 0 0 0 #f3b1b1; }
+.xontable-cell.is-invalid:hover { background: #ffe7e7; }
 .xontable-cell.is-fill-preview { background: #e8f0fe; }
 .xontable-fill-handle { position: absolute; width: 14px; height: 14px; right: -7px; bottom: -7px; background: #0b65d4; border: 1px solid #fff; border-radius: 4px; cursor: crosshair; }
 .xontable-editor { box-sizing: border-box; border: 2px solid #1a73e8; padding: 2px 6px 2px 8px; font: inherit; background: #fff; outline: none; line-height: 1.2; }
@@ -53,6 +54,19 @@
 .xontable-select-menu { background: #fff; border: 1px solid #e1e4ea; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); border-radius: 4px; padding: 4px 0; z-index: 30; max-height: 220px; overflow: auto; }
 .xontable-select-item { width: 100%; text-align: left; padding: 6px 10px; border: 0; background: transparent; cursor: pointer; font-size: 12px; }
 .xontable-select-item:hover, .xontable-select-item.is-active { background: #e9f1ff; }
+.xontable-status { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; border-top: 1px solid #e6e8ee; background: #f9fafb; color: #374151; }
+.xontable-status-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: 999px; }
+.xontable-status-count.is-error { background: #fff1f2; color: #b91c1c; }
+.xontable-status-num { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #3730a3; color: #fff; font-size: 11px; }
+.xontable-status-count.is-error .xontable-status-num { background: #dc2626; }
+.xontable-status-label { letter-spacing: 0.2px; }
+.xontable-status-item { border: 1px solid #e6e8ee; background: #fff; color: #1f2937; cursor: pointer; padding: 2px 6px; border-radius: 999px; text-align: left; white-space: nowrap; }
+.xontable-status-item.is-error { background: #ffe7e7; border-color: #dc2626; color: #a10d0d; }
+.xontable-status-item:hover { background: #eef2ff; border-color: #c7d2fe; }
+.xontable-status-item.is-error:hover { background: #ffdada; border-color: #f2a0a0; }
+.xontable-status-item.is-chip-0 { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
+.xontable-status-item.is-chip-1 { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
+.xontable-status-item.is-chip-2 { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
 
 .xontable-wrap.is-readonly { background: #fff; border-color: #e4e7ec; }
 .xontable-wrap.is-readonly .xontable { color: #222; }
@@ -68,4 +82,4 @@
 .xontable-wrap.is-readonly .xontable-fill-handle { display: none; }
 .xontable-wrap.is-readonly .xontable-select-trigger { display: none; }
 .xontable-wrap.is-readonly .xontable-checkbox { accent-color: #49b86e; }
-.xontable-wrap.is-readonly .xontable-cell.is-invalid { background: #ffecec; border-color: #e07a7a; box-shadow: inset 0 0 0 1px #e07a7a; }
+.xontable-wrap.is-readonly .xontable-cell.is-invalid { background: #fff1f1; border-color: #f4c2c2; box-shadow: inset 0 0 0 0 #f4c2c2; }

package/dist/styles/xontable.filter.css

@@ -63,3 +63,18 @@
   gap: 6px;
   font-size: 12px;
 }
+
+.xontable-wrap.theme-dark .xontable-filter-menu {
+  background: var(--xontable-dark-head-bg, #2b2d31);
+  border-color: var(--xontable-dark-border, #3a3a3a);
+  color: var(--xontable-dark-text, #e6e6e6);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+.xontable-wrap.theme-dark .xontable-filter-search {
+  background: var(--xontable-dark-cell-bg, #1e1f22);
+  border-color: var(--xontable-dark-border, #3a3a3a);
+  color: var(--xontable-dark-text, #e6e6e6);
+}
+.xontable-wrap.theme-dark .xontable-filter-item span {
+  color: var(--xontable-dark-text, #e6e6e6);
+}

package/dist/styles/xontable.theme.css

@@ -1,42 +1,54 @@
-.xontable-wrap.theme-dark { border-color: #3a3a3a; background: #1e1f22; --xontable-range: #8ab4f8; --xontable-copy: #e6e6e6; }
-.xontable-wrap.theme-dark .xontable { color: #e6e6e6; background: transparent; }
+.xontable-wrap.theme-dark { border-color: var(--xontable-dark-border, #3a3a3a); background: var(--xontable-dark-bg, #1e1f22); --xontable-range: var(--xontable-dark-range, #8ab4f8); --xontable-copy: var(--xontable-dark-copy, #e6e6e6); }
+.xontable-wrap.theme-dark .xontable { color: var(--xontable-dark-text, #e6e6e6); background: transparent; }
 
 .xontable-wrap.theme-dark .xontable-cell {
-  border-color: #3a3a3a;
-  background: #1e1f22;
+  border-color: var(--xontable-dark-border, #3a3a3a);
+  background: var(--xontable-dark-cell-bg, #1e1f22);
 }
 .xontable-wrap.theme-dark .xontable-surface { scrollbar-color: #4b5563 transparent; }
 .xontable-wrap.theme-dark .xontable-surface::-webkit-scrollbar-thumb { background: #4b5563; }
-.xontable-wrap.theme-dark .xontable-select-trigger::after { border-top-color: #b6bcc5; }
-.xontable-wrap.theme-dark .xontable-checkbox { accent-color: #8ab4f8; }
+.xontable-wrap.theme-dark .xontable-select-trigger::after { border-top-color: var(--xontable-dark-select, #b6bcc5); }
+.xontable-wrap.theme-dark .xontable-checkbox { accent-color: var(--xontable-dark-accent, #8ab4f8); }
 
 .xontable-wrap.theme-dark .xontable-cell.is-range { background: #1f3526; }
-.xontable-wrap.theme-dark .xontable-cell.is-invalid { background: #4a1f1f; border-color: #e05b5b; box-shadow: inset 0 0 0 1px #e05b5b; }
+.xontable-wrap.theme-dark .xontable-cell.is-invalid { background: var(--xontable-dark-invalid-bg, #3a1f1f); border-color: var(--xontable-dark-invalid-border, #efb1b1); box-shadow: inset 0 0 0 0 var(--xontable-dark-invalid-border, #efb1b1); }
 .xontable-wrap.theme-dark .xontable-cell.is-copied { outline: 1px dotted #7ad27a; outline-offset: -1px; }
-.xontable-wrap.theme-dark .xontable-editor { background: #1e1f22; color: #e6e6e6; border-color: #8ab4f8; }
+.xontable-wrap.theme-dark .xontable-editor { background: var(--xontable-dark-editor-bg, #1e1f22); color: var(--xontable-dark-editor-text, #e6e6e6); border-color: var(--xontable-dark-accent, #8ab4f8); }
 
 .xontable-wrap.theme-dark .xontable-row.is-zebra .xontable-cell {
-  background: #232428;
+  background: var(--xontable-dark-zebra-bg, #232428);
 }
 
 .xontable-wrap.theme-dark .xontable-head-cell,
 .xontable-wrap.theme-dark .xontable-rownum-cell,
 .xontable-wrap.theme-dark .xontable-group-cell {
-  background: #2b2d31;
-  color: #e6e6e6;
+  background: var(--xontable-dark-head-bg, #2b2d31);
+  color: var(--xontable-dark-text, #e6e6e6);
 }
 
 .xontable-wrap.theme-dark .xontable-head-cell.is-active-col-head,
 .xontable-wrap.theme-dark .xontable-rownum-cell.is-active-rownum {
-  background: #344769;
+  background: var(--xontable-dark-active-head-bg, #344769);
 }
+.xontable-wrap.theme-dark .xontable-status { background: var(--xontable-dark-head-bg, #2b2d31); border-top-color: var(--xontable-dark-border, #3a3a3a); color: var(--xontable-dark-text, #e6e6e6); }
+.xontable-wrap.theme-dark .xontable-status-count { background: #2a3552; color: #c7d2fe; }
+.xontable-wrap.theme-dark .xontable-status-count.is-error { background: #3a1f1f; color: #fca5a5; }
+.xontable-wrap.theme-dark .xontable-status-num { background: #374151; color: #fff; }
+.xontable-wrap.theme-dark .xontable-status-count.is-error .xontable-status-num { background: #dc2626; }
+.xontable-wrap.theme-dark .xontable-status-item { color: var(--xontable-dark-text, #e6e6e6); background: #1e222b; border-color: var(--xontable-dark-border, #3a3a3a); }
+.xontable-wrap.theme-dark .xontable-status-item:hover { background: #2a3552; border-color: #3b4a6b; }
+.xontable-wrap.theme-dark .xontable-status-item.is-error { background: #3a1f1f; border-color: #dc2626; color: #fca5a5; }
+.xontable-wrap.theme-dark .xontable-status-item.is-chip-0 { background: #23304a; border-color: #3b4a6b; color: #c7d2fe; }
+.xontable-wrap.theme-dark .xontable-status-item.is-chip-1 { background: #1d2f28; border-color: #2f5f4a; color: #6ee7b7; }
+.xontable-wrap.theme-dark .xontable-status-item.is-chip-2 { background: #2b251d; border-color: #6b4a2f; color: #fdba74; }
 
-.xontable-wrap.theme-dark.is-readonly { border-color: #2c2f36; background: #1b1c1f; }
-.xontable-wrap.theme-dark.is-readonly .xontable { color: #e6e6e6; }
-.xontable-wrap.theme-dark.is-readonly .xontable-cell { border-bottom-color: #2f333b; background: #1b1c1f; }
+.xontable-wrap.theme-dark.is-readonly { border-color: var(--xontable-dark-readonly-border, #2c2f36); background: var(--xontable-dark-readonly-bg, #1b1c1f); }
+.xontable-wrap.theme-dark.is-readonly .xontable { color: var(--xontable-dark-text, #e6e6e6); }
+.xontable-wrap.theme-dark.is-readonly .xontable-cell { border-bottom-color: #2f333b; background: var(--xontable-dark-readonly-bg, #1b1c1f); }
 .xontable-wrap.theme-dark.is-readonly .xontable-head-cell,
 .xontable-wrap.theme-dark.is-readonly .xontable-rownum-cell,
-.xontable-wrap.theme-dark.is-readonly .xontable-group-cell { background: #23252b; color: #e6e6e6; }
-.xontable-wrap.theme-dark.is-readonly .xontable-row.is-zebra .xontable-cell { background: #202329; }
-.xontable-wrap.theme-dark.is-readonly .xontable-row.is-zebra .xontable-rownum-cell { background: #1e2025; }
-.xontable-wrap.theme-dark.is-readonly .xontable-cell.is-active { outline-color: #8ab4f8; }
+.xontable-wrap.theme-dark.is-readonly .xontable-group-cell { background: var(--xontable-dark-readonly-head-bg, #23252b); color: var(--xontable-dark-text, #e6e6e6); }
+.xontable-wrap.theme-dark.is-readonly .xontable-rownum-cell { background: var(--xontable-dark-readonly-rownum-bg, #23252b); }
+.xontable-wrap.theme-dark.is-readonly .xontable-row.is-zebra .xontable-cell { background: var(--xontable-dark-readonly-zebra-bg, #202329); }
+.xontable-wrap.theme-dark.is-readonly .xontable-row.is-zebra .xontable-rownum-cell { background: var(--xontable-dark-readonly-zebra-bg, #1e2025); }
+.xontable-wrap.theme-dark.is-readonly .xontable-cell.is-active { outline-color: var(--xontable-dark-accent, #8ab4f8); }

package/dist/types.d.ts

@@ -32,6 +32,31 @@ export type XOnTableProps<Row extends Record<string, any> = any> = {
     rowIdKey?: keyof Row;
     readOnly?: boolean;
     theme?: "light" | "dark";
+    showStatusBar?: boolean;
+    darkThemeColors?: Partial<{
+        bg: string;
+        border: string;
+        text: string;
+        cellBg: string;
+        headBg: string;
+        rownumBg: string;
+        groupBg: string;
+        zebraBg: string;
+        activeHeadBg: string;
+        range: string;
+        copy: string;
+        accent: string;
+        select: string;
+        invalidBg: string;
+        invalidBorder: string;
+        editorBg: string;
+        editorText: string;
+        readonlyBg: string;
+        readonlyBorder: string;
+        readonlyHeadBg: string;
+        readonlyRownumBg: string;
+        readonlyZebraBg: string;
+    }>;
     onChange?: (rows: Row[], meta: XOnTableMeta) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5E,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IACjE,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5E,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,IAAI;IACjE,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;QACxB,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,MAAM,CAAC;QACvB,gBAAgB,EAAE,MAAM,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACtD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xontable",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -26,8 +26,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "lucide-react": "^0.468.0"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "typescript": "^5.9.3"