@nexub/react 4.4.0 → 4.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0",
+  "version": "4.6.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.",
@@ -205,6 +205,19 @@
         "Decorative (`aria-hidden`). Announce the win in text, for example in a Toast or a status message."
       ]
     },
+    {
+      "slug": "chart-toggle",
+      "name": "Chart Toggle",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Tab / Space: Move between series and switch one on or off."
+      ],
+      "screenReader": [
+        "Each series is a toggle button with `aria-pressed`. The last visible series cannot be switched off."
+      ]
+    },
     {
       "slug": "checkbox-card",
       "name": "Checkbox Card",
@@ -402,6 +415,28 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "funnel",
+      "name": "Funnel",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "The drawing is hidden from assistive tech; a visually hidden table or caption carries every value."
+      ]
+    },
+    {
+      "slug": "gauge",
+      "name": "Gauge",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "The drawing is hidden from assistive tech; a visually hidden table or caption carries every value."
+      ]
+    },
     {
       "slug": "gradient-divider",
       "name": "Gradient Divider",
@@ -429,6 +464,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "heatmap",
+      "name": "Heatmap",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "The drawing is hidden from assistive tech; a visually hidden table or caption carries every value."
+      ]
+    },
     {
       "slug": "helper-text",
       "name": "Helper Text",
@@ -481,6 +527,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "kpi-tile",
+      "name": "KPI Tile",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "The drawing is hidden from assistive tech; a visually hidden table or caption carries every value."
+      ]
+    },
     {
       "slug": "label",
       "name": "Label",

package/dist/components/Chart/Chart.js

@@ -69,14 +69,17 @@ function Frame({
             /* @__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: "absolute inset-0 grid auto-cols-fr grid-flow-col", children: data.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "group/col relative rounded-shape-tooltip transition-colors hover:bg-[color-mix(in_oklab,var(--color-on-surface)_6%,transparent)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 start-1/2 w-px bg-[var(--color-outline)] opacity-0 transition-opacity group-hover/col:opacity-100" }),
+            /* @__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)) })
       ] })

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ChartSeries } from './Chart.js';
+export interface ChartToggleProps {
+    series: ChartSeries[];
+    /** Renders the chart with the series that are switched on. */
+    children: (visible: ChartSeries[]) => React.ReactNode;
+    /** Accessible name for the group of toggles. @default 'Series' */
+    label?: string;
+    className?: string;
+}
+export declare function ChartToggle({ series, children, label, className }: ChartToggleProps): React.JSX.Element;

package/dist/components/Chart/ChartToggle.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const BG = ["bg-chart-1", "bg-chart-2", "bg-chart-3", "bg-chart-4", "bg-chart-5", "bg-chart-6", "bg-chart-7", "bg-chart-8"];
+function ChartToggle({ series, children, label = "Series", className }) {
+  const [hidden, setHidden] = React.useState(() => /* @__PURE__ */ new Set());
+  const coloured = series.map((s, i) => ({ ...s, color: s.color ?? i % 8 + 1 }));
+  const visible = coloured.filter((s) => !hidden.has(s.key));
+  const toggle = (key) => setHidden((prev) => {
+    const next = new Set(prev);
+    if (next.has(key)) next.delete(key);
+    else if (series.length - next.size > 1) next.add(key);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex flex-wrap gap-2", children: coloured.map((s) => {
+      const on = !hidden.has(s.key);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": on,
+          onClick: () => toggle(s.key),
+          className: cn(
+            "nx-state-layer inline-flex h-control-xs items-center gap-1.5 rounded-full border px-2.5 text-label-md",
+            on ? "border-[var(--color-outline-variant)] text-[var(--color-on-surface)]" : "border-dashed border-[var(--color-outline-variant)] text-[var(--color-on-surface-variant)] line-through"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-2.5 rounded-full", on ? BG[(s.color - 1) % 8] : "bg-[var(--color-outline-variant)]") }),
+            s.label ?? s.key
+          ]
+        },
+        s.key
+      );
+    }) }),
+    children(visible)
+  ] });
+}
+export {
+  ChartToggle
+};

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type ChartColor } from './Chart.js';
+export interface GaugeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'color'> {
+    value: number;
+    /** @default 100 */
+    max?: number;
+    /** Accessible name, e.g. "Storage used". */
+    title: string;
+    /** Shown in the middle; defaults to the percentage. */
+    label?: React.ReactNode;
+    color?: ChartColor;
+}
+/** Progress toward a target on a 270° arc. */
+export declare function Gauge({ value, max, title, label, color, className, ...props }: GaugeProps): React.JSX.Element;
+export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Rows of values, e.g. one row per weekday, one column per week. */
+    data: number[][];
+    rowLabels: string[];
+    columnLabels?: string[];
+    title: string;
+    valueFormat?: (value: number) => string;
+}
+/** Intensity over a grid (activity by day and week, load by hour). Seven steps of the sequential palette. */
+export declare function Heatmap({ data, rowLabels, columnLabels, title, valueFormat, className, ...props }: HeatmapProps): React.JSX.Element;
+export interface FunnelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'color'> {
+    data: {
+        label: string;
+        value: number;
+    }[];
+    title: string;
+    valueFormat?: (value: number) => string;
+    color?: ChartColor;
+}
+/** Drop-off through ordered steps, with the conversion from the first step. */
+export declare function Funnel({ data, title, valueFormat, color, className, ...props }: FunnelProps): React.JSX.Element;
+export interface KpiTileProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: React.ReactNode;
+    /** Change versus the previous period, e.g. 0.114 for +11.4%. */
+    change?: number;
+    /** For metrics where down is good (churn, costs). */
+    invert?: boolean;
+    /** Recent values for the sparkline, oldest first. */
+    trend?: number[];
+}
+/** A headline number with its change and a trend line. The change text carries good/bad colour; the trend stays the accent. */
+export declare function KpiTile({ label, value, change, invert, trend, className, ...props }: KpiTileProps): React.JSX.Element;

package/dist/components/Chart/MoreCharts.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { Sparkline } from "./Chart.js";
+const FILL = ["fill-chart-1", "fill-chart-2", "fill-chart-3", "fill-chart-4", "fill-chart-5", "fill-chart-6", "fill-chart-7", "fill-chart-8"];
+const STROKE = ["stroke-chart-1", "stroke-chart-2", "stroke-chart-3", "stroke-chart-4", "stroke-chart-5", "stroke-chart-6", "stroke-chart-7", "stroke-chart-8"];
+const SEQ = ["fill-chart-seq-1", "fill-chart-seq-2", "fill-chart-seq-3", "fill-chart-seq-4", "fill-chart-seq-5", "fill-chart-seq-6", "fill-chart-seq-7"];
+const ci = (c) => ((c ?? 1) - 1) % 8;
+const fmt = (n) => n.toLocaleString();
+function Gauge({ value, max = 100, title, label, color = 1, className, ...props }) {
+  const pct = Math.max(0, Math.min(1, value / max));
+  const r = 15.9155;
+  return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 inline-flex flex-col items-center", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "relative size-36", children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 42 42", className: "size-full rotate-[135deg]", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "21", cy: "21", r, fill: "none", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: "75 25", className: "stroke-[var(--color-surface-container-high)]" }),
+        /* @__PURE__ */ jsx("circle", { cx: "21", cy: "21", r, fill: "none", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: `${pct * 75} ${100 - pct * 75}`, className: STROKE[ci(color)] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-title-lg tabular-nums text-[var(--color-on-surface)]", children: label ?? `${Math.round(pct * 100)}%` })
+    ] }),
+    /* @__PURE__ */ jsx("figcaption", { className: "sr-only", children: `${title}: ${fmt(value)} of ${fmt(max)} (${Math.round(pct * 100)}%)` })
+  ] });
+}
+function Heatmap({ data, rowLabels, columnLabels, title, valueFormat = fmt, className, ...props }) {
+  const flat = data.flat();
+  const lo = Math.min(...flat);
+  const span = Math.max(...flat) - lo || 1;
+  const step = (v) => Math.min(SEQ.length - 1, Math.floor((v - lo) / span * SEQ.length));
+  const cols = Math.max(...data.map((r) => r.length));
+  return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 flex gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex flex-col justify-around text-label-sm text-[var(--color-on-surface-muted)]", children: rowLabels.map((l) => /* @__PURE__ */ jsx("span", { children: l }, l)) }),
+    /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: `0 0 ${cols * 12} ${data.length * 12}`, className: "h-auto min-w-0 flex-1 rtl:-scale-x-100", children: data.map(
+      (row, y) => row.map((v, x) => /* @__PURE__ */ jsx("rect", { x: x * 12 + 1, y: y * 12 + 1, width: "10", height: "10", rx: "2", className: SEQ[step(v)], children: /* @__PURE__ */ jsx("title", { children: `${rowLabels[y]}${columnLabels?.[x] ? `, ${columnLabels[x]}` : ""}: ${valueFormat(v)}` }) }, `${x}-${y}`))
+    ) }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("caption", { children: title }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((row, y) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: rowLabels[y] }),
+        row.map((v, x) => /* @__PURE__ */ jsx("td", { children: valueFormat(v) }, x))
+      ] }, y)) })
+    ] })
+  ] });
+}
+function Funnel({ data, title, valueFormat = fmt, color = 1, className, ...props }) {
+  const top = Math.max(1, data[0]?.value ?? 1);
+  return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 flex flex-col gap-2", className), ...props, children: [
+    data.map((d) => {
+      const pct = Math.max(0, d.value) / top;
+      return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "grid grid-cols-[8rem_1fr_4rem] items-center gap-3 text-body-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[var(--color-on-surface-variant)]", children: d.label }),
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 10", preserveAspectRatio: "none", className: "h-7 w-full", children: /* @__PURE__ */ jsx("rect", { x: (100 - pct * 100) / 2, y: "0", width: pct * 100, height: "10", rx: "1.5", className: FILL[ci(color)] }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-end tabular-nums text-[var(--color-on-surface)]", children: valueFormat(d.value) })
+      ] }, d.label);
+    }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("caption", { children: title }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((d) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: d.label }),
+        /* @__PURE__ */ jsx("td", { children: valueFormat(d.value) }),
+        /* @__PURE__ */ jsxs("td", { children: [
+          Math.round(Math.max(0, d.value) / top * 100),
+          "% of ",
+          data[0]?.label
+        ] })
+      ] }, d.label)) })
+    ] })
+  ] });
+}
+function KpiTile({ label, value, change, invert = false, trend, className, ...props }) {
+  const good = change === void 0 ? void 0 : invert ? change < 0 : change > 0;
+  const pct = change === void 0 ? "" : `${change > 0 ? "+" : change < 0 ? "\u2212" : ""}${Math.abs(change * 100).toFixed(1)}%`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-end justify-between gap-4 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface-elevated)] p-4", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-label-md text-[var(--color-on-surface-variant)]", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-headline-sm tabular-nums text-[var(--color-on-surface)]", children: value }),
+      change !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-label-md tabular-nums", good ? "text-[var(--color-success)]" : change === 0 ? "text-[var(--color-on-surface-variant)]" : "text-[var(--color-error)]"), children: [
+        pct,
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "versus last period" })
+      ] })
+    ] }),
+    trend && trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, { values: trend, area: true, color: 1, className: "h-10 w-28 shrink-0" })
+  ] });
+}
+export {
+  Funnel,
+  Gauge,
+  Heatmap,
+  KpiTile
+};

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

@@ -1,2 +1,6 @@
 export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './Chart.js';
+export { Gauge, Heatmap, Funnel, KpiTile } from './MoreCharts.js';
+export { ChartToggle } from './ChartToggle.js';
+export type { ChartToggleProps } from './ChartToggle.js';
+export type { GaugeProps, HeatmapProps, FunnelProps, KpiTileProps } from './MoreCharts.js';
 export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './Chart.js';

package/dist/components/Chart/index.js

@@ -1,8 +1,15 @@
 import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./Chart.js";
+import { Gauge, Heatmap, Funnel, KpiTile } from "./MoreCharts.js";
+import { ChartToggle } from "./ChartToggle.js";
 export {
   BarChart,
   ChartLegend,
+  ChartToggle,
   DonutChart,
+  Funnel,
+  Gauge,
+  Heatmap,
+  KpiTile,
   LineChart,
   Sparkline,
   niceDomain,

package/dist/index.d.ts

@@ -47,6 +47,10 @@ export type { CelebrateProps } from './components/Celebrate/index.js';
 export { Aurora } from './components/Aurora/index.js';
 export type { AuroraProps } from './components/Aurora/index.js';
 export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from './components/Chart/index.js';
+export { Gauge, Heatmap, Funnel, KpiTile } from './components/Chart/index.js';
+export { ChartToggle } from './components/Chart/index.js';
+export type { ChartToggleProps } from './components/Chart/index.js';
+export type { GaugeProps, HeatmapProps, FunnelProps, KpiTileProps } 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

@@ -27,6 +27,8 @@ import { FloatingInput } from "./components/FloatingInput/index.js";
 import { Celebrate } from "./components/Celebrate/index.js";
 import { Aurora } from "./components/Aurora/index.js";
 import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax, niceDomain } from "./components/Chart/index.js";
+import { Gauge, Heatmap, Funnel, KpiTile } from "./components/Chart/index.js";
+import { ChartToggle } 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";
@@ -137,6 +139,7 @@ export {
   CardLink,
   Celebrate,
   ChartLegend,
+  ChartToggle,
   CheckList,
   CheckListItem,
   Checkbox,
@@ -170,15 +173,19 @@ export {
   FloatingInput,
   FormError,
   FormField,
+  Funnel,
+  Gauge,
   GradientDivider,
   Grid,
   Heading,
+  Heatmap,
   HelperText,
   HoverCard,
   IconButton,
   Input,
   Kbd,
   KeyboardShortcut,
+  KpiTile,
   Label,
   LineChart,
   Link,