@rozie-ui/data-table-solid 0.1.0

package/src/internal/middleware.ts

@@ -0,0 +1,54 @@
+/**
+ * middleware.ts — pure construction of the Floating UI middleware stack from the
+ * Popover's first-class props.
+ *
+ * This is the one piece of BRANCHY engine glue in Popover.rozie (offset always on,
+ * flip/shift opt-out via `disableFlip`/`disableShift`, arrow opt-in via `arrow` +
+ * an element). Extracted to `src/internal/` so it can be unit-tested in isolation
+ * (codegen vendors `src/internal/` into every leaf via copyInternal, excluding
+ * `*.test.ts`).
+ *
+ * It takes the Floating UI middleware FACTORIES as arguments (rather than importing
+ * `@floating-ui/dom` itself) so the unit test can pass lightweight stand-ins and
+ * assert ORDER + presence without pulling the real engine — and so the vendored
+ * copy in each leaf has zero engine import of its own (the leaf's Popover.* owns
+ * the single engine import).
+ *
+ * Floating UI ordering contract: offset → flip → shift → arrow. `offset` first so
+ * the gap is measured before collision detection; `arrow` last so it reads the
+ * final resolved placement.
+ */
+
+export interface MiddlewareFactories {
+  offset: (value: number) => unknown;
+  flip: () => unknown;
+  shift: () => unknown;
+  arrow: (opts: { element: Element }) => unknown;
+}
+
+export interface MiddlewareConfig {
+  offset: number;
+  disableFlip: boolean;
+  disableShift: boolean;
+  arrow: boolean;
+  arrowEl: Element | null;
+}
+
+/**
+ * Build the ordered middleware array for `computePosition`. Pure — no engine
+ * import, no DOM read beyond the passed-in arrow element.
+ */
+export function buildMiddleware(
+  factories: MiddlewareFactories,
+  config: MiddlewareConfig,
+): unknown[] {
+  const mw: unknown[] = [factories.offset(config.offset)];
+  if (!config.disableFlip) mw.push(factories.flip());
+  if (!config.disableShift) mw.push(factories.shift());
+  // The arrow middleware needs a real element to position; opt-in only when both
+  // the `arrow` prop is set AND the arrow element has mounted.
+  if (config.arrow && config.arrowEl) {
+    mw.push(factories.arrow({ element: config.arrowEl }));
+  }
+  return mw;
+}

package/src/themes/base.css

@@ -0,0 +1,102 @@
+/*
+ * @rozie-ui/data-table — base token reference.
+ *
+ * Every COSMETIC value the table renders flows through a `--rozie-data-table-*`
+ * PUBLIC token. The component's scoped `<style>` reads short internal `--rdt-*`
+ * tokens with inline `var(--rdt-x, <fallback>)` defaults, so the table renders
+ * ZERO-CONFIG without importing this file — it already paints a sensible default.
+ * Importing this file simply makes the full public token surface explicit in one
+ * place and wires each public `--rozie-data-table-*` token onto the internal
+ * `--rdt-*` the component consumes, so a design-system bridge (shadcn / material /
+ * bootstrap) can re-skin the whole table by remapping ONLY the public tokens.
+ *
+ * NOTE the split (CONTEXT "Claude's Discretion" + the slider D-08 precedent): the
+ * STRUCTURAL rules — `border-collapse`, the keyed-r-for layout, `position: sticky`
+ * for the header + pinned columns, the resize-handle positioning, the
+ * `<details>` disclosure box — are behavior-critical and live in the component's
+ * scoped `<style>` (per-leaf, NOT consumer-overridable). Only the values below
+ * flow through tokens.
+ *
+ * Override any token at any ancestor scope (`:root`, `.dark`, a wrapper, or the
+ * `.rozie-data-table` / `.rozie-data-table-wrap` element). See
+ * themes/shadcn.css, themes/material.css and themes/bootstrap.css for the
+ * design-system bridges.
+ */
+.rozie-data-table-wrap,
+.rozie-data-table {
+  /* ── palette (the few values most consumers will set) ───────────────────── */
+  --rozie-data-table-fg: inherit;
+  --rozie-data-table-accent: #0066cc;
+  --rozie-data-table-border-color: rgba(0, 0, 0, 0.08);
+  --rozie-data-table-control-border-color: rgba(0, 0, 0, 0.2);
+  --rozie-data-table-radius: 4px;
+
+  /* ── typography / cell metrics ──────────────────────────────────────────── */
+  --rozie-data-table-font: 14px system-ui, sans-serif;
+  --rozie-data-table-cell-padding: 0.5rem 0.75rem;
+
+  /* ── header ─────────────────────────────────────────────────────────────── */
+  /* OPAQUE (was rgba(0,0,0,0.03)): a translucent header lets the scrolling body bleed
+     through in sticky mode. #f7f7f7 ≈ the old 3%-black tint over white, but solid —
+     matching the opaque header backgrounds the design-system themes already ship. */
+  --rozie-data-table-header-bg: #f7f7f7;
+  --rozie-data-table-header-weight: 600;
+
+  /* ── sort indicator ─────────────────────────────────────────────────────── */
+  --rozie-data-table-sort-indicator-opacity: 0.7;
+
+  /* ── resize handle (req-9) ──────────────────────────────────────────────── */
+  --rozie-data-table-resize-grip-color: rgba(0, 0, 0, 0.12);
+  --rozie-data-table-resize-grip-active: var(--rozie-data-table-accent);
+
+  /* ── pin controls (req-11) ──────────────────────────────────────────────── */
+  --rozie-data-table-pin-active-bg: rgba(0, 0, 0, 0.1);
+
+  /* ── column-visibility menu (req-8) ─────────────────────────────────────── */
+  --rozie-data-table-menu-bg: #fff;
+  --rozie-data-table-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+  /* ── selection checkboxes (req-7) ───────────────────────────────────────── */
+  --rozie-data-table-select-accent: var(--rozie-data-table-accent);
+
+  /* ── disabled pagination controls ──────────────────────────────────────── */
+  --rozie-data-table-disabled-opacity: 0.4;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * Wire the PUBLIC tokens onto the INTERNAL `--rdt-*` the component reads. A
+   * bridge only needs to remap the public tokens above; these passthroughs do
+   * the rest. (The component still renders zero-config without this file via its
+   * own inline `var(--rdt-x, <fallback>)` defaults.)
+   * ───────────────────────────────────────────────────────────────────────── */
+  --rdt-font: var(--rozie-data-table-font);
+  --rdt-color: var(--rozie-data-table-fg);
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
+  --rdt-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-header-bg: var(--rozie-data-table-header-bg);
+  --rdt-header-weight: var(--rozie-data-table-header-weight);
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
+
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-filter-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-btn-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-size-radius: var(--rozie-data-table-radius);
+
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
+
+  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
+
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
+
+  --rdt-select-accent: var(--rozie-data-table-select-accent);
+}

package/src/themes/bootstrap.css

@@ -0,0 +1,37 @@
+/*
+ * @rozie-ui/data-table — Bootstrap 5 bridge.
+ *
+ * Maps the public `--rozie-data-table-*` tokens onto Bootstrap's `--bs-*` CSS
+ * variables (Bootstrap 5.2+). Reading them live means the table follows
+ * `data-bs-theme="dark"` and any custom `$primary` build automatically. Falls
+ * back to Bootstrap's default light palette when the vars are absent.
+ *
+ * Import this AFTER base.css (base.css wires the public tokens onto the internal
+ * `--rdt-*` the component reads):
+ *
+ *   import '@rozie-ui/data-table-react/themes/base.css';
+ *   import '@rozie-ui/data-table-react/themes/bootstrap.css';
+ */
+.rozie-data-table-wrap,
+.rozie-data-table {
+  --rozie-data-table-fg: var(--bs-body-color, #212529);
+  --rozie-data-table-accent: var(--bs-primary, #0d6efd);
+  --rozie-data-table-border-color: var(--bs-border-color, #dee2e6);
+  --rozie-data-table-control-border-color: var(--bs-border-color, #dee2e6);
+  --rozie-data-table-radius: var(--bs-border-radius, 0.375rem);
+
+  --rozie-data-table-header-bg: var(--bs-tertiary-bg, #f8f9fa);
+  --rozie-data-table-header-weight: 600;
+
+  --rozie-data-table-resize-grip-color: var(--bs-border-color, #dee2e6);
+  --rozie-data-table-resize-grip-active: var(--bs-primary, #0d6efd);
+
+  --rozie-data-table-pin-active-bg: var(--bs-secondary-bg, #e9ecef);
+
+  --rozie-data-table-menu-bg: var(--bs-body-bg, #fff);
+  --rozie-data-table-menu-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+  --rozie-data-table-disabled-opacity: 0.5;
+
+  --rozie-data-table-select-accent: var(--bs-primary, #0d6efd);
+}

package/src/themes/material.css

@@ -0,0 +1,35 @@
+/*
+ * @rozie-ui/data-table — Material Design 3 bridge.
+ *
+ * Maps the public `--rozie-data-table-*` tokens onto the MD3 system color roles
+ * (`--md-sys-color-*`) emitted by material-web / @material/material-color-utilities
+ * theme builders. Falls back to the baseline M3 light palette when those vars are
+ * absent, so it renders correctly even without a generated theme.
+ *
+ * Import this AFTER base.css (base.css wires the public tokens onto the internal
+ * `--rdt-*` the component reads):
+ *
+ *   import '@rozie-ui/data-table-react/themes/base.css';
+ *   import '@rozie-ui/data-table-react/themes/material.css';
+ */
+.rozie-data-table-wrap,
+.rozie-data-table {
+  --rozie-data-table-fg: var(--md-sys-color-on-surface, #1d1b20);
+  --rozie-data-table-accent: var(--md-sys-color-primary, #6750a4);
+  --rozie-data-table-border-color: var(--md-sys-color-outline-variant, #cac4d0);
+  --rozie-data-table-control-border-color: var(--md-sys-color-outline, #79747e);
+  --rozie-data-table-radius: 4px;
+
+  --rozie-data-table-header-bg: var(--md-sys-color-surface-container-highest, #e6e0e9);
+  --rozie-data-table-header-weight: 500;
+
+  --rozie-data-table-resize-grip-color: var(--md-sys-color-outline-variant, #cac4d0);
+  --rozie-data-table-resize-grip-active: var(--md-sys-color-primary, #6750a4);
+
+  --rozie-data-table-pin-active-bg: var(--md-sys-color-secondary-container, #e8def8);
+
+  --rozie-data-table-menu-bg: var(--md-sys-color-surface-container, #f3edf7);
+  --rozie-data-table-menu-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
+
+  --rozie-data-table-select-accent: var(--md-sys-color-primary, #6750a4);
+}

package/src/themes/shadcn.css

@@ -0,0 +1,41 @@
+/*
+ * @rozie-ui/data-table — shadcn/ui (Radix) bridge.
+ *
+ * Maps the public `--rozie-data-table-*` tokens onto the shadcn/ui CSS variables
+ * defined on `:root` / `.dark` (the classic HSL-channel convention:
+ * `--background: 0 0% 100%` consumed as `hsl(var(--background))`). Because it
+ * reads those vars live, the table automatically follows light/dark theme
+ * switches and accent changes.
+ *
+ *   import '@rozie-ui/data-table-react/themes/shadcn.css';
+ *
+ * Import this AFTER base.css (base.css wires the public tokens onto the internal
+ * `--rdt-*` the component reads; this file only remaps the public tokens):
+ *
+ *   import '@rozie-ui/data-table-react/themes/base.css';
+ *   import '@rozie-ui/data-table-react/themes/shadcn.css';
+ *
+ * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
+ * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
+ */
+.rozie-data-table-wrap,
+.rozie-data-table {
+  --rozie-data-table-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));
+  --rozie-data-table-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
+  --rozie-data-table-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
+  --rozie-data-table-control-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
+  --rozie-data-table-radius: var(--radius, 0.5rem);
+
+  --rozie-data-table-header-bg: hsl(var(--muted, 210 40% 96.1%));
+  --rozie-data-table-header-weight: 600;
+
+  --rozie-data-table-resize-grip-color: hsl(var(--border, 214.3 31.8% 91.4%));
+  --rozie-data-table-resize-grip-active: hsl(var(--primary, 222.2 47.4% 11.2%));
+
+  --rozie-data-table-pin-active-bg: hsl(var(--accent, 210 40% 96.1%));
+
+  --rozie-data-table-menu-bg: hsl(var(--popover, 0 0% 100%));
+  --rozie-data-table-menu-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+
+  --rozie-data-table-select-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
+}