@nexub/react 3.9.0 → 4.1.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.0",
+  "version": "4.1.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -114,7 +114,7 @@
       "slug": "bar-chart",
       "name": "Bar Chart",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": [
@@ -298,7 +298,7 @@
       "slug": "donut-chart",
       "name": "Donut Chart",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": [
@@ -461,7 +461,7 @@
       "slug": "line-chart",
       "name": "Line Chart",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": [
@@ -513,7 +513,7 @@
       "slug": "money-input",
       "name": "Money Input",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -540,7 +540,7 @@
       "slug": "motion-float",
       "name": "Float",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -549,7 +549,7 @@
       "slug": "motion-marquee",
       "name": "Marquee",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -558,7 +558,7 @@
       "slug": "motion-reveal",
       "name": "Reveal",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -585,7 +585,7 @@
       "slug": "navigation-rail",
       "name": "Navigation Rail",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -748,7 +748,7 @@
       "slug": "sheet",
       "name": "Sheet",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -775,7 +775,7 @@
       "slug": "sparkline",
       "name": "Sparkline",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": [
@@ -796,7 +796,7 @@
       "slug": "split-button",
       "name": "Split Button",
       "package": "@nexub/react",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -970,7 +970,7 @@
       "slug": "cta-band",
       "name": "CTABand",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -992,7 +992,7 @@
       "slug": "faq",
       "name": "FAQ",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1001,7 +1001,7 @@
       "slug": "feature-split",
       "name": "FeatureSplit",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1019,7 +1019,7 @@
       "slug": "hero",
       "name": "Hero",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1028,7 +1028,7 @@
       "slug": "how-it-works",
       "name": "HowItWorks",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1055,7 +1055,7 @@
       "slug": "logo-strip",
       "name": "LogoStrip",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1064,7 +1064,7 @@
       "slug": "marketing-footer",
       "name": "MarketingFooter",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1073,7 +1073,7 @@
       "slug": "marketing-nav",
       "name": "MarketingNav",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1100,7 +1100,7 @@
       "slug": "pricing-table",
       "name": "PricingTable",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1109,7 +1109,7 @@
       "slug": "product-grid",
       "name": "ProductGrid",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1118,7 +1118,7 @@
       "slug": "section-header",
       "name": "SectionHeader",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1136,7 +1136,7 @@
       "slug": "stat-band",
       "name": "StatBand",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []
@@ -1163,7 +1163,7 @@
       "slug": "testimonial-grid",
       "name": "TestimonialGrid",
       "package": "@nexub/marketing",
-      "automated": "not covered",
+      "automated": "pass",
       "exceptions": [],
       "keyboard": [],
       "screenReader": []

package/dist/components/Chart/Chart.d.ts

@@ -4,13 +4,15 @@ export type ChartColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export interface ChartSeries {
     /** Key of the value in each data row. */
     key: string;
-    /** Name shown in the legend and the data table. Defaults to `key`. */
+    /** Name shown in the legend, the tooltip and the data table. Defaults to `key`. */
     label?: string;
     /** Palette colour, 1–8. Defaults to the series' position. */
     color?: ChartColor;
 }
 /** Rounds up to 1, 2, 2.5 or 5 × 10ⁿ so the four gridlines get round labels. */
 export declare function niceMax(max: number): number;
+/** The axis range for a set of values: [0, nice max], or [−nice, +nice] when some are negative. */
+export declare function niceDomain(values: number[]): [number, number];
 declare const PLOT_HEIGHT: {
     readonly sm: "h-32";
     readonly md: "h-48";
@@ -33,7 +35,7 @@ interface CartesianProps<T> extends Omit<React.HTMLAttributes<HTMLElement>, 'tit
     series: ChartSeries[];
     /** Accessible name of the chart, e.g. "Revenue by month". */
     title: string;
-    /** Formats axis labels, the hover text and the data table. */
+    /** Formats axis labels, the tooltip and the data table. */
     valueFormat?: (value: number) => string;
     /** Height of the plot area. */
     size?: keyof typeof PLOT_HEIGHT;
@@ -44,13 +46,13 @@ export interface BarChartProps<T> extends CartesianProps<T> {
     /** Stack the series in one bar per category instead of side by side. */
     stacked?: boolean;
 }
-/** Bars per category, grouped or stacked. Values must be 0 or more. */
+/** Bars per category, grouped or stacked. Negative values grow down from the zero line. */
 export declare function BarChart<T extends object>({ stacked, ...props }: BarChartProps<T>): React.JSX.Element;
 export interface LineChartProps<T> extends CartesianProps<T> {
-    /** Fill the area under each line. */
+    /** Fill the area under each line (down to the zero line). */
     area?: boolean;
 }
-/** One line per series across the categories. Values must be 0 or more. */
+/** One line per series across the categories. Negative values go below the zero line. */
 export declare function LineChart<T extends object>({ area, ...props }: LineChartProps<T>): React.JSX.Element;
 export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
     data: {

package/dist/components/Chart/Chart.js

@@ -11,6 +11,13 @@ function niceMax(max) {
   const step = [1, 2, 2.5, 5, 10].find((s) => s * pow >= max);
   return step * pow;
 }
+function niceDomain(values) {
+  const lo = Math.min(0, ...values);
+  const hi = Math.max(0, ...values);
+  if (lo === 0) return [0, niceMax(hi)];
+  if (hi === 0) return [-niceMax(-lo), 0];
+  return [-niceMax(-lo), niceMax(hi)];
+}
 const defaultFormat = (n) => n.toLocaleString();
 const PLOT_HEIGHT = { sm: "h-32", md: "h-48", lg: "h-64" };
 const VB_W = 300;
@@ -21,6 +28,7 @@ function ChartLegend({ items, className, ...props }) {
     item.label
   ] }, item.label)) });
 }
+const valueOf = (row, key) => Number(row[key]) || 0;
 function Frame({
   data,
   index,
@@ -29,33 +37,46 @@ function Frame({
   valueFormat = defaultFormat,
   size = "md",
   legend,
-  max,
+  domain,
   className,
   children,
   ...props
 }) {
   const labels = series.map((s) => s.label ?? s.key);
+  const [lo, hi] = domain;
   const ticks = [1, 0.75, 0.5, 0.25, 0];
+  const zero = VB_H - (0 - lo) / (hi - lo) * VB_H;
   return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 flex flex-col gap-3", className), ...props, children: [
     (legend ?? series.length > 1) && /* @__PURE__ */ jsx(ChartLegend, { "aria-hidden": "true", items: series.map((s, i) => ({ label: labels[i], color: s.color })) }),
     /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-between text-end text-label-sm tabular-nums text-[var(--color-on-surface-muted)]", PLOT_HEIGHT[size]), children: ticks.map((t) => /* @__PURE__ */ jsx("span", { className: "flex h-0 items-center justify-end", children: valueFormat(max * t) }, t)) }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-between text-end text-label-sm tabular-nums text-[var(--color-on-surface-muted)]", PLOT_HEIGHT[size]), children: ticks.map((t) => /* @__PURE__ */ jsx("span", { className: "flex h-0 items-center justify-end", children: valueFormat(lo + (hi - lo) * t) }, t)) }),
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", className: cn("w-full overflow-visible rtl:-scale-x-100", PLOT_HEIGHT[size]), children: [
-          ticks.map((t) => /* @__PURE__ */ jsx(
-            "line",
-            {
-              x1: "0",
-              x2: VB_W,
-              y1: VB_H * (1 - t),
-              y2: VB_H * (1 - t),
-              strokeWidth: "1",
-              vectorEffect: "non-scaling-stroke",
-              className: t === 0 ? "stroke-[var(--color-outline)]" : "stroke-[var(--color-outline-variant)]"
-            },
-            t
-          )),
-          children
+        /* @__PURE__ */ jsxs("div", { className: cn("relative", PLOT_HEIGHT[size]), children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", className: "size-full overflow-visible rtl:-scale-x-100", children: [
+            ticks.map((t) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "0",
+                x2: VB_W,
+                y1: VB_H * (1 - t),
+                y2: VB_H * (1 - t),
+                strokeWidth: "1",
+                vectorEffect: "non-scaling-stroke",
+                className: "stroke-[var(--color-outline-variant)]"
+              },
+              t
+            )),
+            /* @__PURE__ */ jsx("line", { x1: "0", x2: VB_W, y1: zero, y2: zero, strokeWidth: "1", vectorEffect: "non-scaling-stroke", className: "stroke-[var(--color-outline)]" }),
+            children
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid auto-cols-fr grid-flow-col", children: data.map((row, i) => /* @__PURE__ */ jsx("div", { className: "group/col relative rounded-shape-tooltip transition-colors hover:bg-[color-mix(in_oklab,var(--color-on-surface)_6%,transparent)]", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-1 start-1/2 z-10 min-w-max -translate-x-1/2 rounded-shape-tooltip bg-[var(--color-inverse-surface)] px-3 py-2 text-label-md text-[var(--color-inverse-on-surface)] opacity-0 shadow-elevation-2 transition-opacity group-hover/col:opacity-100 rtl:translate-x-1/2", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold", children: String(row[index]) }),
+            series.map((s, j) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 tabular-nums", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", BG[colorIndex(s.color, j)]) }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: labels[j] }),
+              /* @__PURE__ */ jsx("span", { className: "ps-3", children: valueFormat(valueOf(row, s.key)) })
+            ] }, s.key))
+          ] }) }, i)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-flow-col text-center text-label-sm text-[var(--color-on-surface-muted)]", children: data.map((row, i) => /* @__PURE__ */ jsx("span", { className: "truncate px-0.5", children: String(row[index]) }, i)) })
       ] })
@@ -68,46 +89,65 @@ function Frame({
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { scope: "row", children: String(row[index]) }),
-        series.map((s) => /* @__PURE__ */ jsx("td", { children: valueFormat(Number(row[s.key]) || 0) }, s.key))
+        series.map((s) => /* @__PURE__ */ jsx("td", { children: valueFormat(valueOf(row, s.key)) }, s.key))
       ] }, i)) })
     ] })
   ] });
 }
-const valueOf = (row, key) => Math.max(0, Number(row[key]) || 0);
 function BarChart({ stacked = false, ...props }) {
-  const { data, series, index, valueFormat = defaultFormat } = props;
-  const max = niceMax(Math.max(0, ...data.map((row) => stacked ? series.reduce((sum, s) => sum + valueOf(row, s.key), 0) : Math.max(0, ...series.map((s) => valueOf(row, s.key))))));
+  const { data, series } = props;
+  const totals = data.flatMap((row) => {
+    if (!stacked) return series.map((s) => valueOf(row, s.key));
+    const vals = series.map((s) => valueOf(row, s.key));
+    return [vals.filter((v) => v > 0).reduce((a, b) => a + b, 0), vals.filter((v) => v < 0).reduce((a, b) => a + b, 0)];
+  });
+  const domain = niceDomain(totals);
+  const [lo, hi] = domain;
+  const y = (v) => VB_H - (v - lo) / (hi - lo) * VB_H;
   const slot = VB_W / Math.max(1, data.length);
   const groupW = slot * 0.7;
   const barW = stacked ? groupW : groupW / series.length;
-  return /* @__PURE__ */ jsx(Frame, { ...props, max, children: data.map((row, i) => {
-    let base = 0;
+  return /* @__PURE__ */ jsx(Frame, { ...props, domain, children: data.map((row, i) => {
+    let up = 0;
+    let down = 0;
     return /* @__PURE__ */ jsx("g", { children: series.map((s, j) => {
       const v = valueOf(row, s.key);
-      const h = v / max * VB_H;
+      const from = stacked ? v >= 0 ? up : down : 0;
+      const to = from + v;
+      if (stacked) {
+        if (v >= 0) up = to;
+        else down = to;
+      }
+      const top = Math.min(y(from), y(to));
       const x = i * slot + (slot - groupW) / 2 + (stacked ? 0 : j * barW);
-      const y = VB_H - base - h;
-      if (stacked) base += h;
-      return /* @__PURE__ */ jsx("rect", { x, y, width: Math.max(0, barW - (stacked ? 0 : 1)), height: h, className: FILL[colorIndex(s.color, j)], children: /* @__PURE__ */ jsx("title", { children: `${String(row[index])} \xB7 ${s.label ?? s.key}: ${valueFormat(v)}` }) }, s.key);
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x,
+          y: top,
+          width: Math.max(0, barW - (stacked ? 0 : 1)),
+          height: Math.abs(y(to) - y(from)),
+          "data-negative": v < 0 ? "" : void 0,
+          className: cn("nx-chart-bar", FILL[colorIndex(s.color, j)])
+        },
+        s.key
+      );
     }) }, i);
   }) });
 }
 function LineChart({ area = false, ...props }) {
-  const { data, series, index, valueFormat = defaultFormat } = props;
-  const max = niceMax(Math.max(0, ...data.flatMap((row) => series.map((s) => valueOf(row, s.key)))));
+  const { data, series } = props;
+  const domain = niceDomain(data.flatMap((row) => series.map((s) => valueOf(row, s.key))));
+  const [lo, hi] = domain;
   const slot = VB_W / Math.max(1, data.length);
   const x = (i) => i * slot + slot / 2;
-  const y = (v) => VB_H - v / max * VB_H;
-  return /* @__PURE__ */ jsx(Frame, { ...props, max, children: series.map((s, j) => {
+  const y = (v) => VB_H - (v - lo) / (hi - lo) * VB_H;
+  return /* @__PURE__ */ jsx(Frame, { ...props, domain, children: series.map((s, j) => {
     const c = colorIndex(s.color, j);
     const pts = data.map((row, i) => `${x(i)},${y(valueOf(row, s.key))}`);
-    return /* @__PURE__ */ jsxs("g", { children: [
-      area && data.length > 0 && /* @__PURE__ */ jsx("polygon", { points: `${x(0)},${VB_H} ${pts.join(" ")} ${x(data.length - 1)},${VB_H}`, className: cn(FILL[c], "opacity-15") }),
-      /* @__PURE__ */ jsx("polyline", { points: pts.join(" "), fill: "none", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: STROKE[c] }),
-      data.map((row, i) => (
-        // A wide, invisible hit area per point carries the hover text.
-        /* @__PURE__ */ jsx("rect", { x: x(i) - slot / 2, y: "0", width: slot, height: VB_H, className: "fill-transparent", children: /* @__PURE__ */ jsx("title", { children: `${String(row[index])} \xB7 ${s.label ?? s.key}: ${valueFormat(valueOf(row, s.key))}` }) }, i)
-      ))
+    return /* @__PURE__ */ jsxs("g", { className: "nx-chart-line", children: [
+      area && data.length > 0 && /* @__PURE__ */ jsx("polygon", { points: `${x(0)},${y(0)} ${pts.join(" ")} ${x(data.length - 1)},${y(0)}`, className: cn(FILL[c], "opacity-15") }),
+      /* @__PURE__ */ jsx("polyline", { points: pts.join(" "), fill: "none", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: STROKE[c] })
     ] }, s.key);
   }) });
 }
@@ -149,7 +189,7 @@ function Sparkline({ values, label, color = 1, area = false, className, ...props
   const step = values.length > 1 ? VB_W / (values.length - 1) : 0;
   const pts = values.map((v, i) => `${i * step},${VB_H - 4 - (v - min) / span * (VB_H - 8)}`).join(" ");
   const c = colorIndex(color, 0);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       viewBox: `0 0 ${VB_W} ${VB_H}`,
@@ -157,10 +197,10 @@ function Sparkline({ values, label, color = 1, area = false, className, ...props
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       className: cn("h-8 w-24 overflow-visible rtl:-scale-x-100", className),
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs("g", { className: "nx-chart-line", children: [
         area && values.length > 1 && /* @__PURE__ */ jsx("polygon", { points: `0,${VB_H} ${pts} ${VB_W},${VB_H}`, className: cn(FILL[c], "opacity-15") }),
         /* @__PURE__ */ jsx("polyline", { points: pts, fill: "none", strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: STROKE[c] })
-      ]
+      ] })
     }
   );
 }
@@ -170,5 +210,6 @@ export {
   DonutChart,
   LineChart,
   Sparkline,
+  niceDomain,
   niceMax
 };

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

@@ -1,2 +1,2 @@
-export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from './Chart.js';
+export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './Chart.js';
 export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './Chart.js';

package/dist/components/Chart/index.js

@@ -1,9 +1,10 @@
-import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from "./Chart.js";
+import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./Chart.js";
 export {
   BarChart,
   ChartLegend,
   DonutChart,
   LineChart,
   Sparkline,
+  niceDomain,
   niceMax
 };

package/dist/index.d.ts

@@ -36,7 +36,7 @@ export type { NumberInputProps } from './components/NumberInput/index.js';
 export { MoneyInput } from './components/MoneyInput/index.js';
 export type { MoneyInputProps } from './components/MoneyInput/index.js';
 export { Amount } from './components/Amount/index.js';
-export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from './components/Chart/index.js';
+export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './components/Chart/index.js';
 export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './components/Chart/index.js';
 export type { AmountProps } from './components/Amount/index.js';
 export { NumberTicker } from './components/NumberTicker/index.js';

package/dist/index.js

@@ -21,7 +21,7 @@ import { Textarea, textareaVariants } from "./components/Textarea/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { MoneyInput } from "./components/MoneyInput/index.js";
 import { Amount } from "./components/Amount/index.js";
-import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from "./components/Chart/index.js";
+import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./components/Chart/index.js";
 import { NumberTicker } from "./components/NumberTicker/index.js";
 import { SearchInput } from "./components/SearchInput/index.js";
 import { PasswordInput } from "./components/PasswordInput/index.js";
@@ -255,6 +255,7 @@ export {
   labelVariants,
   linkVariants,
   logoVariants,
+  niceDomain,
   niceMax,
   progressFillVariants,
   progressTrackVariants,