@rozie-ui/data-table-solid 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/README.md +20 -10
  2. package/dist/index.cjs +3162 -1095
  3. package/dist/index.d.cts +69 -1
  4. package/dist/index.d.mts +69 -1
  5. package/dist/index.mjs +3086 -1019
  6. package/dist/source/index.jsx +6377 -0
  7. package/package.json +8 -3
  8. package/src/Column.tsx +1 -1
  9. package/src/DataTable.tsx +1233 -135
  10. package/src/EditorCheckbox.tsx +38 -4
  11. package/src/EditorDate.tsx +79 -8
  12. package/src/EditorNumber.tsx +52 -6
  13. package/src/EditorSelect.tsx +51 -6
  14. package/src/EditorText.tsx +34 -5
  15. package/src/FilterNumberRange.tsx +79 -12
  16. package/src/FilterSelect.tsx +18 -3
  17. package/src/FilterText.tsx +48 -9
  18. package/src/GroupBar.tsx +75 -3
  19. package/src/helpers/columnDefUtils.ts +73 -1
  20. package/src/helpers/dateValue.ts +55 -0
  21. package/src/index.ts +1 -1
  22. package/src/themes/base.css +96 -75
  23. package/src/themes/bootstrap.css +59 -34
  24. package/src/themes/material.css +53 -32
  25. package/src/themes/shadcn.css +58 -33
package/src/themes/bootstrap.css CHANGED
@@ -6,43 +6,68 @@
6
6
  * `data-bs-theme="dark"` and any custom `$primary` build automatically. Falls
7
7
  * back to Bootstrap's default light palette when the vars are absent.
8
8
  *
9
- * Import this AFTER base.css (base.css wires the public tokens onto the internal
10
- * `--rdt-*` the component reads):
9
+ * Import it together with base.css (which supplies the wiring for every token this file
10
+ * does not map):
11
11
  *
12
- * import '@rozie-ui/data-table-react/themes/base.css';
13
- * import '@rozie-ui/data-table-react/themes/bootstrap.css';
12
+ * import '@rozie-ui/data-table-solid/themes/base.css';
13
+ * import '@rozie-ui/data-table-solid/themes/bootstrap.css';
14
14
  *
15
- * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
16
- * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
17
- * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
18
- * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
19
- * class selector can never match — so before this change all four bridges were inert on Lit.
20
- * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
21
- * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
22
- * targets via the class selectors below, and on all six by setting the public tokens on any
23
- * ancestor of the table.
15
+ * HOW IT MAPS (2026-09-25). This bridge declares NO public token. It re-declares the lines
16
+ * of base.css's wiring that read a token it maps, with the design system's variable in place
17
+ * of base.css's default: `--rdt-header-bg: var(--rozie-data-table-header-bg, <DS variable>)`.
18
+ * So, on all six targets:
19
+ * - a public `--rozie-data-table-*` token set on any ancestor (or on the table itself) wins,
20
+ * by plain inheritance — nothing on the way to the table declares one;
21
+ * - otherwise the design system's variable is resolved AT the table, so the table follows
22
+ * the nearest theme scope — a `.dark` / `data-bs-theme` wrapper as well as `<html>`;
23
+ * - otherwise the design system's own default below applies.
24
+ * The rule names `.rozie-data-table-wrap`, `.rozie-data-table` and the Lit host element
25
+ * `rozie-data-table` (on Lit the two classes render inside the shadow root, where a document
26
+ * stylesheet cannot reach; the host is outside it, and a document rule for a host beats the
27
+ * component's own `:host` rule). base.css's copy sits under `:where()`, so this file wins in
28
+ * either import order; base.css still supplies every line this file does not map.
24
29
  */
25
- :root,
26
30
  .rozie-data-table-wrap,
27
- .rozie-data-table {
28
- --rozie-data-table-fg: var(--bs-body-color, #212529);
29
- --rozie-data-table-accent: var(--bs-primary, #0d6efd);
30
- --rozie-data-table-border-color: var(--bs-border-color, #dee2e6);
31
- --rozie-data-table-control-border-color: var(--bs-border-color, #dee2e6);
32
- --rozie-data-table-radius: var(--bs-border-radius, 0.375rem);
33
-
34
- --rozie-data-table-header-bg: var(--bs-tertiary-bg, #f8f9fa);
35
- --rozie-data-table-header-weight: 600;
36
-
37
- --rozie-data-table-resize-grip-color: var(--bs-border-color, #dee2e6);
38
- --rozie-data-table-resize-grip-active: var(--bs-primary, #0d6efd);
39
-
40
- --rozie-data-table-pin-active-bg: var(--bs-secondary-bg, #e9ecef);
41
-
42
- --rozie-data-table-menu-bg: var(--bs-body-bg, #fff);
43
- --rozie-data-table-menu-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
44
-
45
- --rozie-data-table-disabled-opacity: 0.5;
31
+ .rozie-data-table,
32
+ rozie-data-table {
33
+ --rdt-color: var(--rozie-data-table-fg, var(--bs-body-color, #212529));
34
+ --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--bs-primary, #0d6efd)));
35
+ --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--bs-border-color, #dee2e6));
36
+ --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--bs-border-color, #dee2e6));
37
+ --rdt-filter-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
38
+ --rdt-header-bg: var(--rozie-data-table-header-bg, var(--bs-tertiary-bg, #f8f9fa));
39
+ --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, var(--bs-border-color, #dee2e6));
40
+ --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, var(--bs-primary, #0d6efd)));
41
+ --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg, var(--bs-secondary-bg, #e9ecef));
42
+ --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg, var(--bs-body-bg, #fff));
43
+ --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
44
+ --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color, var(--bs-border-color, #dee2e6));
45
+ --rdt-colvis-menu-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
46
+ --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color, var(--bs-border-color, #dee2e6));
47
+ --rdt-colvis-summary-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
48
+ --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity, 0.5);
49
+ --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color, var(--bs-border-color, #dee2e6));
50
+ --rdt-page-btn-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
51
+ --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color, var(--bs-border-color, #dee2e6));
52
+ --rdt-page-size-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
53
+ }
46
54
 
47
- --rozie-data-table-select-accent: var(--bs-primary, #0d6efd);
55
+ /* The same mapping as private `--rdt-ds-*` values on the document root, which the Lit
56
+ leaf's own `:host` wiring falls back to when no selector can reach its host (a table
57
+ nested in another shadow root): there the design system's variables are read at the
58
+ document root. Internal: not a stable API. */
59
+ :root {
60
+ --rdt-ds-fg: var(--bs-body-color, #212529);
61
+ --rdt-ds-select-accent: var(--bs-primary, #0d6efd);
62
+ --rdt-ds-border-color: var(--bs-border-color, #dee2e6);
63
+ --rdt-ds-control-border-color: var(--bs-border-color, #dee2e6);
64
+ --rdt-ds-radius: var(--bs-border-radius, 0.375rem);
65
+ --rdt-ds-header-bg: var(--bs-tertiary-bg, #f8f9fa);
66
+ --rdt-ds-header-weight: 600;
67
+ --rdt-ds-resize-grip-color: var(--bs-border-color, #dee2e6);
68
+ --rdt-ds-resize-grip-active: var(--bs-primary, #0d6efd);
69
+ --rdt-ds-pin-active-bg: var(--bs-secondary-bg, #e9ecef);
70
+ --rdt-ds-menu-bg: var(--bs-body-bg, #fff);
71
+ --rdt-ds-menu-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
72
+ --rdt-ds-disabled-opacity: 0.5;
48
73
  }
package/src/themes/material.css CHANGED
@@ -6,41 +6,62 @@
6
6
  * theme builders. Falls back to the baseline M3 light palette when those vars are
7
7
  * absent, so it renders correctly even without a generated theme.
8
8
  *
9
- * Import this AFTER base.css (base.css wires the public tokens onto the internal
10
- * `--rdt-*` the component reads):
9
+ * Import it together with base.css (which supplies the wiring for every token this file
10
+ * does not map):
11
11
  *
12
- * import '@rozie-ui/data-table-react/themes/base.css';
13
- * import '@rozie-ui/data-table-react/themes/material.css';
12
+ * import '@rozie-ui/data-table-solid/themes/base.css';
13
+ * import '@rozie-ui/data-table-solid/themes/material.css';
14
14
  *
15
- * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
16
- * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
17
- * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
18
- * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
19
- * class selector can never match — so before this change all four bridges were inert on Lit.
20
- * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
21
- * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
22
- * targets via the class selectors below, and on all six by setting the public tokens on any
23
- * ancestor of the table.
15
+ * HOW IT MAPS (2026-09-25). This bridge declares NO public token. It re-declares the lines
16
+ * of base.css's wiring that read a token it maps, with the design system's variable in place
17
+ * of base.css's default: `--rdt-header-bg: var(--rozie-data-table-header-bg, <DS variable>)`.
18
+ * So, on all six targets:
19
+ * - a public `--rozie-data-table-*` token set on any ancestor (or on the table itself) wins,
20
+ * by plain inheritance — nothing on the way to the table declares one;
21
+ * - otherwise the design system's variable is resolved AT the table, so the table follows
22
+ * the nearest theme scope — a `.dark` / `data-bs-theme` wrapper as well as `<html>`;
23
+ * - otherwise the design system's own default below applies.
24
+ * The rule names `.rozie-data-table-wrap`, `.rozie-data-table` and the Lit host element
25
+ * `rozie-data-table` (on Lit the two classes render inside the shadow root, where a document
26
+ * stylesheet cannot reach; the host is outside it, and a document rule for a host beats the
27
+ * component's own `:host` rule). base.css's copy sits under `:where()`, so this file wins in
28
+ * either import order; base.css still supplies every line this file does not map.
24
29
  */
25
- :root,
26
30
  .rozie-data-table-wrap,
27
- .rozie-data-table {
28
- --rozie-data-table-fg: var(--md-sys-color-on-surface, #1d1b20);
29
- --rozie-data-table-accent: var(--md-sys-color-primary, #6750a4);
30
- --rozie-data-table-border-color: var(--md-sys-color-outline-variant, #cac4d0);
31
- --rozie-data-table-control-border-color: var(--md-sys-color-outline, #79747e);
32
- --rozie-data-table-radius: 4px;
33
-
34
- --rozie-data-table-header-bg: var(--md-sys-color-surface-container-highest, #e6e0e9);
35
- --rozie-data-table-header-weight: 500;
36
-
37
- --rozie-data-table-resize-grip-color: var(--md-sys-color-outline-variant, #cac4d0);
38
- --rozie-data-table-resize-grip-active: var(--md-sys-color-primary, #6750a4);
39
-
40
- --rozie-data-table-pin-active-bg: var(--md-sys-color-secondary-container, #e8def8);
41
-
42
- --rozie-data-table-menu-bg: var(--md-sys-color-surface-container, #f3edf7);
43
- --rozie-data-table-menu-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
31
+ .rozie-data-table,
32
+ rozie-data-table {
33
+ --rdt-color: var(--rozie-data-table-fg, var(--md-sys-color-on-surface, #1d1b20));
34
+ --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--md-sys-color-primary, #6750a4)));
35
+ --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--md-sys-color-outline-variant, #cac4d0));
36
+ --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--md-sys-color-outline, #79747e));
37
+ --rdt-header-bg: var(--rozie-data-table-header-bg, var(--md-sys-color-surface-container-highest, #e6e0e9));
38
+ --rdt-header-weight: var(--rozie-data-table-header-weight, 500);
39
+ --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, var(--md-sys-color-outline-variant, #cac4d0));
40
+ --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, var(--md-sys-color-primary, #6750a4)));
41
+ --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg, var(--md-sys-color-secondary-container, #e8def8));
42
+ --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg, var(--md-sys-color-surface-container, #f3edf7));
43
+ --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow, 0 2px 6px rgb(0 0 0 / 0.3));
44
+ --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color, var(--md-sys-color-outline-variant, #cac4d0));
45
+ --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color, var(--md-sys-color-outline, #79747e));
46
+ --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color, var(--md-sys-color-outline, #79747e));
47
+ --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color, var(--md-sys-color-outline, #79747e));
48
+ }
44
49
 
45
- --rozie-data-table-select-accent: var(--md-sys-color-primary, #6750a4);
50
+ /* The same mapping as private `--rdt-ds-*` values on the document root, which the Lit
51
+ leaf's own `:host` wiring falls back to when no selector can reach its host (a table
52
+ nested in another shadow root): there the design system's variables are read at the
53
+ document root. Internal: not a stable API. */
54
+ :root {
55
+ --rdt-ds-fg: var(--md-sys-color-on-surface, #1d1b20);
56
+ --rdt-ds-select-accent: var(--md-sys-color-primary, #6750a4);
57
+ --rdt-ds-border-color: var(--md-sys-color-outline-variant, #cac4d0);
58
+ --rdt-ds-control-border-color: var(--md-sys-color-outline, #79747e);
59
+ --rdt-ds-radius: 4px;
60
+ --rdt-ds-header-bg: var(--md-sys-color-surface-container-highest, #e6e0e9);
61
+ --rdt-ds-header-weight: 500;
62
+ --rdt-ds-resize-grip-color: var(--md-sys-color-outline-variant, #cac4d0);
63
+ --rdt-ds-resize-grip-active: var(--md-sys-color-primary, #6750a4);
64
+ --rdt-ds-pin-active-bg: var(--md-sys-color-secondary-container, #e8def8);
65
+ --rdt-ds-menu-bg: var(--md-sys-color-surface-container, #f3edf7);
66
+ --rdt-ds-menu-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
46
67
  }
package/src/themes/shadcn.css CHANGED
@@ -7,46 +7,71 @@
7
7
  * reads those vars live, the table automatically follows light/dark theme
8
8
  * switches and accent changes.
9
9
  *
10
- * import '@rozie-ui/data-table-react/themes/shadcn.css';
10
+ * import '@rozie-ui/data-table-solid/themes/shadcn.css';
11
11
  *
12
- * Import this AFTER base.css (base.css wires the public tokens onto the internal
13
- * `--rdt-*` the component reads; this file only remaps the public tokens):
12
+ * Import it together with base.css (which supplies the wiring for every token this file
13
+ * does not map):
14
14
  *
15
- * import '@rozie-ui/data-table-react/themes/base.css';
16
- * import '@rozie-ui/data-table-react/themes/shadcn.css';
15
+ * import '@rozie-ui/data-table-solid/themes/base.css';
16
+ * import '@rozie-ui/data-table-solid/themes/shadcn.css';
17
17
  *
18
18
  * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
19
19
  * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
20
20
  *
21
- * SCOPE (changed 2026-09-12, F-01). This bridge assigns its tokens at `:root` as well as on
22
- * the table's own classes. A design-system bridge is an app-wide skin by nature, and `:root`
23
- * is the only scope that reaches the Lit leaf: there, `.rozie-data-table-wrap` and
24
- * `.rozie-data-table` both render INSIDE the component's shadow root, where a document-level
25
- * class selector can never match — so before this change all four bridges were inert on Lit.
26
- * Trade-off, stated rather than buried: two tables on one page can no longer take DIFFERENT
27
- * bridges by ancestor class alone. Per-instance overrides still work on the five light-DOM
28
- * targets via the class selectors below, and on all six by setting the public tokens on any
29
- * ancestor of the table.
21
+ * HOW IT MAPS (2026-09-25). This bridge declares NO public token. It re-declares the lines
22
+ * of base.css's wiring that read a token it maps, with the design system's variable in place
23
+ * of base.css's default: `--rdt-header-bg: var(--rozie-data-table-header-bg, <DS variable>)`.
24
+ * So, on all six targets:
25
+ * - a public `--rozie-data-table-*` token set on any ancestor (or on the table itself) wins,
26
+ * by plain inheritance — nothing on the way to the table declares one;
27
+ * - otherwise the design system's variable is resolved AT the table, so the table follows
28
+ * the nearest theme scope — a `.dark` / `data-bs-theme` wrapper as well as `<html>`;
29
+ * - otherwise the design system's own default below applies.
30
+ * The rule names `.rozie-data-table-wrap`, `.rozie-data-table` and the Lit host element
31
+ * `rozie-data-table` (on Lit the two classes render inside the shadow root, where a document
32
+ * stylesheet cannot reach; the host is outside it, and a document rule for a host beats the
33
+ * component's own `:host` rule). base.css's copy sits under `:where()`, so this file wins in
34
+ * either import order; base.css still supplies every line this file does not map.
30
35
  */
31
- :root,
32
36
  .rozie-data-table-wrap,
33
- .rozie-data-table {
34
- --rozie-data-table-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));
35
- --rozie-data-table-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
36
- --rozie-data-table-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
37
- --rozie-data-table-control-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
38
- --rozie-data-table-radius: var(--radius, 0.5rem);
39
-
40
- --rozie-data-table-header-bg: hsl(var(--muted, 210 40% 96.1%));
41
- --rozie-data-table-header-weight: 600;
42
-
43
- --rozie-data-table-resize-grip-color: hsl(var(--border, 214.3 31.8% 91.4%));
44
- --rozie-data-table-resize-grip-active: hsl(var(--primary, 222.2 47.4% 11.2%));
45
-
46
- --rozie-data-table-pin-active-bg: hsl(var(--accent, 210 40% 96.1%));
47
-
48
- --rozie-data-table-menu-bg: hsl(var(--popover, 0 0% 100%));
49
- --rozie-data-table-menu-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
37
+ .rozie-data-table,
38
+ rozie-data-table {
39
+ --rdt-color: var(--rozie-data-table-fg, hsl(var(--foreground, 222.2 47.4% 11.2%)));
40
+ --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, hsl(var(--primary, 222.2 47.4% 11.2%))));
41
+ --rdt-border: 1px solid var(--rozie-data-table-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
42
+ --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
43
+ --rdt-filter-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
44
+ --rdt-header-bg: var(--rozie-data-table-header-bg, hsl(var(--muted, 210 40% 96.1%)));
45
+ --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, hsl(var(--border, 214.3 31.8% 91.4%)));
46
+ --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, hsl(var(--primary, 222.2 47.4% 11.2%))));
47
+ --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg, hsl(var(--accent, 210 40% 96.1%)));
48
+ --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg, hsl(var(--popover, 0 0% 100%)));
49
+ --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow, 0 2px 8px rgb(0 0 0 / 0.12));
50
+ --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
51
+ --rdt-colvis-menu-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
52
+ --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
53
+ --rdt-colvis-summary-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
54
+ --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
55
+ --rdt-page-btn-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
56
+ --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
57
+ --rdt-page-size-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
58
+ }
50
59
 
51
- --rozie-data-table-select-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
60
+ /* The same mapping as private `--rdt-ds-*` values on the document root, which the Lit
61
+ leaf's own `:host` wiring falls back to when no selector can reach its host (a table
62
+ nested in another shadow root): there the design system's variables are read at the
63
+ document root. Internal: not a stable API. */
64
+ :root {
65
+ --rdt-ds-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));
66
+ --rdt-ds-select-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
67
+ --rdt-ds-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
68
+ --rdt-ds-control-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
69
+ --rdt-ds-radius: var(--radius, 0.5rem);
70
+ --rdt-ds-header-bg: hsl(var(--muted, 210 40% 96.1%));
71
+ --rdt-ds-header-weight: 600;
72
+ --rdt-ds-resize-grip-color: hsl(var(--border, 214.3 31.8% 91.4%));
73
+ --rdt-ds-resize-grip-active: hsl(var(--primary, 222.2 47.4% 11.2%));
74
+ --rdt-ds-pin-active-bg: hsl(var(--accent, 210 40% 96.1%));
75
+ --rdt-ds-menu-bg: hsl(var(--popover, 0 0% 100%));
76
+ --rdt-ds-menu-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
52
77
  }