@nexub/react 4.5.0 → 4.7.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.0",
+  "version": "4.7.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",

package/dist/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import type { ToneValue } from '@nexub/core';
 export type { ToneValue };
 export { toneTextClasses } from '../../utils/control.js';
 export declare const buttonVariants: (props?: ({
-    variant?: "accent" | "text" | "link" | "outline" | "glass" | "ghost" | "subtle" | "filled" | "tonal" | "outlined" | "hero" | "primary" | "secondary" | "destructive" | null | undefined;
+    variant?: "accent" | "text" | "link" | "outline" | "primary" | "glass" | "ghost" | "subtle" | "filled" | "tonal" | "outlined" | "hero" | "secondary" | "destructive" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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/index.d.ts

@@ -1,4 +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,10 @@
 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,

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useScopedSeed.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * 4.7: recolours one element (and everything inside it) from a brand seed, like
+ * <ThemeProvider seed> but scoped, e.g. to preview a customer's brand on one
+ * card or section. Writes the seeded role variables through the CSSOM (strict-
+ * CSP safe) and removes them when the seed is cleared or the component unmounts.
+ * Lazy-loads @nexub/tokens/seed, so the colour library stays out of the main bundle.
+ */
+export declare function useScopedSeed<T extends HTMLElement>(ref: React.RefObject<T | null>, seed: string | null | undefined, options?: {
+    target?: 'primary' | 'tertiary';
+}): void;

package/dist/hooks/useScopedSeed.js

@@ -0,0 +1,24 @@
+"use client";
+import * as React from "react";
+function useScopedSeed(ref, seed, options = {}) {
+  const { target = "primary" } = options;
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || !seed) return;
+    let applied = [];
+    let cancelled = false;
+    import("@nexub/tokens/seed").then(({ createSeedTheme }) => {
+      if (cancelled) return;
+      const vars = createSeedTheme(seed, { target });
+      for (const [k, v] of Object.entries(vars)) el.style.setProperty(k, v);
+      applied = Object.keys(vars);
+    });
+    return () => {
+      cancelled = true;
+      for (const k of applied) el.style.removeProperty(k);
+    };
+  }, [ref, seed, target]);
+}
+export {
+  useScopedSeed
+};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { cn } from './utils/cn.js';
 export type { Size } from './utils/control.js';
 export { startViewTransition } from './utils/viewTransition.js';
+export { useScopedSeed } from './hooks/useScopedSeed.js';
 export { useControllableState } from './hooks/useControllableState.js';
 export { useDisclosure } from './hooks/useDisclosure.js';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
@@ -48,6 +49,8 @@ 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';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { cn } from "./utils/cn.js";
 import { startViewTransition } from "./utils/viewTransition.js";
+import { useScopedSeed } from "./hooks/useScopedSeed.js";
 import { useControllableState } from "./hooks/useControllableState.js";
 import { useDisclosure } from "./hooks/useDisclosure.js";
 import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
@@ -28,6 +29,7 @@ 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";
@@ -138,6 +140,7 @@ export {
   CardLink,
   Celebrate,
   ChartLegend,
+  ChartToggle,
   CheckList,
   CheckListItem,
   Checkbox,
@@ -295,6 +298,7 @@ export {
   useNexubMessages,
   usePointerSheen,
   usePrefersReducedMotion,
+  useScopedSeed,
   useTheme,
   useToastStore
 };