@techsio/ui-kit 0.37.1 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.37.1",
+  "version": "0.39.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -78,10 +78,19 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
+    "@tanstack/charts": "^0.6.5",
+    "@tanstack/charts-scales": "^0.6.5",
+    "@tanstack/react-charts": "^0.6.5",
+    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-virtual": "^3.14.8",
     "@zag-js/accordion": "^1.41.2",
     "@zag-js/carousel": "^1.41.2",
     "@zag-js/checkbox": "^1.41.2",
@@ -104,6 +113,8 @@
     "@zag-js/tooltip": "^1.41.2",
     "@zag-js/tree-view": "^1.41.2",
     "better-themes": "^1.1.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "libphonenumber-js": "^1.13.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
@@ -129,6 +140,8 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@techsio/storybook-a11y-reporter": "0.1.3",
     "@techsio/storybook-better-a11y": "0.1.3",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
     "@typescript-eslint/parser": "^8.47.0",
     "eslint": "^9.39.1",
     "eslint-plugin-tailwindcss": "beta",

package/src/tokens/components/components.css

@@ -19,6 +19,7 @@
 @import "./molecules/_accordion.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
+@import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";
@@ -39,6 +40,7 @@
 @import "./molecules/_tree-view.css";
 
 @import "./organisms/_table.css";
+@import "./organisms/_data-table.css";
 @import "./organisms/_footer.css";
 @import "./organisms/_header.css";
 @import "./organisms/_gallery.css";

package/src/tokens/components/molecules/_chart.css

@@ -0,0 +1,98 @@
+/*
+ * Chart — PROTOTYPE tokens (not yet exported from Figma; once the MVP look is
+ * signed off, mirror these into Figma via the figma-token-binding skill).
+ *
+ * Series palette: six fixed-order categorical hues for data identity. The
+ * exact primitive steps were chosen so the SAME values pass the dataviz
+ * six-checks validator (lightness band, chroma floor, adjacent-pair CVD
+ * separation, normal-vision floor, >=3:1 surface contrast) on BOTH the light
+ * (white) and dark (gray-950) chart surfaces — hence no light-dark() split.
+ *
+ * `--color-primary` (blue-300/sky-300) is deliberately NOT series-1: it sits
+ * outside the chart lightness band in light mode. Brand themes that want
+ * branded charts should override `--color-chart-series-*` with steps that
+ * re-pass the validator, not alias the brand accent directly.
+ */
+
+@theme static {
+  /* Reference layer — series identity, assigned in fixed order. The palette is
+   * six entries and TanStack indexes it modulo its length (scales.js), so a 7th
+   * distinct series wraps back onto series-1 rather than erroring. Keep charts
+   * to <=6 series; Chart warns in dev when a dataset exceeds that.
+   *
+   * Note: `--color-blue-500` is re-declared by figma/variables.css, which is
+   * imported after this file — series-1 therefore resolves to the Figma step
+   * (chroma 0.188), not Tailwind's default (chroma 0.214). Series 2-6 have no
+   * Figma counterpart and resolve to Tailwind defaults. Re-run the dataviz
+   * validator against these *resolved* values before treating the set as
+   * signed off. */
+  --color-chart-series-1: var(--color-blue-500);
+  --color-chart-series-2: var(--color-orange-600);
+  --color-chart-series-3: var(--color-emerald-600);
+  --color-chart-series-4: var(--color-violet-500);
+  --color-chart-series-5: var(--color-rose-500);
+  --color-chart-series-6: var(--color-cyan-600);
+
+  /* Derived layer — chart chrome and tooltip surface. Axis/tick/legend text
+   * renders at small sizes inside the SVG, so it wears primary ink rather than
+   * the secondary tone.
+   *
+   * Caveat on the contrast math: TanStack composites this color before it
+   * paints — tick/legend labels at fillOpacity 0.68, axis lines at
+   * strokeOpacity 0.28 (scene.js). So the *rendered* label is fg-primary at 68%
+   * over the surface, not fg-primary itself, and it does not reach the repo's
+   * 90 Lc gold gate on its own. Fixing that properly means compensating for the
+   * library opacity (or overriding it), not swapping this token — tracked in
+   * https://github.com/TechsioCZ/new-engine/issues/608 rather than silently
+   * claimed as passing. */
+  --color-chart-fg: var(--color-fg-primary);
+  --color-chart-tooltip-bg: var(--color-tooltip-bg);
+  --color-chart-tooltip-fg: var(--color-tooltip-fg);
+  --color-chart-tooltip-border: var(--color-tooltip-border-outline);
+  --radius-chart-tooltip: var(--radius-tooltip);
+  --text-chart-tooltip: var(--text-tooltip-md);
+  --padding-chart-tooltip: var(--padding-tooltip-md);
+  --border-width-chart-tooltip: var(--border-width-tooltip);
+  --font-chart-tooltip: var(--font-body);
+  --font-weight-chart-tooltip: var(--font-weight-medium);
+}
+
+/*
+ * Bridge our series tokens into TanStack Charts' categorical palette
+ * variables (`--ts-chart-1..6`). Axis text, muted labels and grid lines
+ * inherit `currentColor`, so the host also carries `text-chart-fg`.
+ */
+@utility chart-base {
+  --ts-chart-1: var(--color-chart-series-1);
+  --ts-chart-2: var(--color-chart-series-2);
+  --ts-chart-3: var(--color-chart-series-3);
+  --ts-chart-4: var(--color-chart-series-4);
+  --ts-chart-5: var(--color-chart-series-5);
+  --ts-chart-6: var(--color-chart-series-6);
+}
+
+/*
+ * Surface styling for the library's native HTML tooltip element.
+ *
+ * `!important` is load-bearing, not defensive: TanStack's `createTooltip()`
+ * writes background/color/border/border-radius/padding and a `font` shorthand
+ * directly onto `element.style`, then only *appends* this class. Inline styles
+ * beat class rules, so without `!important` every declaration below is dead and
+ * the tooltip renders in the system `Canvas`/`CanvasText` colors — visible as an
+ * unthemed tooltip under the neo/cyber brands and in dark mode. The `font`
+ * shorthand also resets font-size, so that too must win.
+ */
+@utility chart-tooltip {
+  background: var(--color-chart-tooltip-bg) !important;
+  color: var(--color-chart-tooltip-fg) !important;
+  border: var(--border-width-chart-tooltip) solid
+    var(--color-chart-tooltip-border) !important;
+  border-radius: var(--radius-chart-tooltip) !important;
+  padding: var(--padding-chart-tooltip) !important;
+  /* The inline `font` shorthand sets family, weight, size and line-height in
+   * one go, so countering only the size would leave the chart tooltip in
+   * system-ui while every other tooltip in the library uses --font-body. */
+  font-family: var(--font-chart-tooltip) !important;
+  font-size: var(--text-chart-tooltip) !important;
+  font-weight: var(--font-weight-chart-tooltip) !important;
+}

package/src/tokens/components/organisms/_data-table.css

@@ -0,0 +1,51 @@
+/*
+ * DataTable — nested-row tint.
+ *
+ * `tintNestedRows` shades a row by `row.depth` as an inset box-shadow rather
+ * than a background, so it composes with `striped`'s zebra background instead
+ * of losing the Tailwind-merge conflict against it (two `bg-*` utilities on
+ * one element can't both render; a shadow layers on top of whichever
+ * background is already there). Reuses `--color-table-row-bg-hover`, an
+ * existing Figma-exported Table token, rather than a raw semantic token or a
+ * new one added ahead of the Figma sync this component's other colors are
+ * still waiting on (see the "PROTOTYPE styling" note in data-table.tsx).
+ */
+/*
+ * Verified: box-shadow on a `<tr>` *does* paint under `border-collapse` in
+ * Blink (Chromium 149) — a differential screenshot of a plain vs tinted row in
+ * a collapsed table measures 255,255,255 vs 178,178,178. This has been
+ * reported several times as a no-op; it is not one in Chrome. Not verified in
+ * WebKit/Safari, so if the tint is ever confirmed missing there, the fix is a
+ * `background-image` gradient layer (as `data-table-frozen-cell` uses), which
+ * composes with `striped` without the Tailwind-merge conflict a `background`
+ * would cause.
+ */
+@utility data-table-row-nested-tint {
+  box-shadow: inset 0 0 0 9999px var(--color-table-row-bg-hover);
+}
+
+/*
+ * DataTable — frozen (pinned / sticky-actions) cell surface.
+ *
+ * A frozen cell must be opaque, or the horizontally-scrolled content passes
+ * straight under it. It must *also* show the row's own colour, or striping and
+ * selection stop dead at the frozen column.
+ *
+ * `background: inherit` gives the second without the first: every row-level
+ * tint in this system is an alpha overlay meant to composite over a surface
+ * (`--color-table-row-striped-secondary` is literally `oklch(0 0 0 / 0)`), so
+ * inheriting it yields a see-through cell.
+ *
+ * Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for
+ * the header. The opaque table surface is the background-*color*; the row tint
+ * is painted over it as a gradient image, read from a custom property the row
+ * sets. Custom properties inherit, so the row can drive its cells' tint
+ * without either knowing about the other.
+ */
+@utility data-table-frozen-cell {
+  background-color: var(--color-table-bg);
+  background-image: linear-gradient(
+    var(--dt-row-tint, transparent),
+    var(--dt-row-tint, transparent)
+  );
+}