@nexub/react 1.8.0 → 1.9.0

package/dist/{chunk-AEBYQKLS.js → chunk-3XX45SUC.js}

@@ -36,6 +36,64 @@ function readGlass(key, fallback) {
   }
   return fallback;
 }
+var CONTRAST_QUERY = "(prefers-contrast: more)";
+function readContrast(root) {
+  const attr = root.getAttribute("data-contrast");
+  if (attr === "standard" || attr === "medium" || attr === "high") return attr;
+  return window.matchMedia(CONTRAST_QUERY).matches ? "high" : "standard";
+}
+function useSeedTheme(seed, target) {
+  React.useEffect(() => {
+    if (!seed) return;
+    const color = seed;
+    const root = document.documentElement;
+    const mq = window.matchMedia(CONTRAST_QUERY);
+    const observer = new MutationObserver(() => update());
+    let applied = [];
+    let create;
+    let done = false;
+    const clear = () => {
+      for (const name of applied) root.style.removeProperty(name);
+      applied = [];
+    };
+    const stop = () => {
+      done = true;
+      observer.disconnect();
+      mq.removeEventListener("change", update);
+    };
+    function update() {
+      if (done || !create) return;
+      let vars;
+      try {
+        vars = create(color, { contrast: readContrast(root), target });
+      } catch (error) {
+        console.error(error);
+        clear();
+        stop();
+        return;
+      }
+      clear();
+      for (const [name, value] of Object.entries(vars)) root.style.setProperty(name, value);
+      applied = Object.keys(vars);
+    }
+    observer.observe(root, { attributes: true, attributeFilter: ["data-contrast"] });
+    mq.addEventListener("change", update);
+    import("@nexub/tokens/seed").then(
+      (mod) => {
+        create = mod.createSeedTheme;
+        update();
+      },
+      (error) => {
+        console.error(error);
+        stop();
+      }
+    );
+    return () => {
+      stop();
+      clear();
+    };
+  }, [seed, target]);
+}
 function writeStorage(key, value) {
   if (typeof window === "undefined") return;
   try {
@@ -48,8 +106,11 @@ function ThemeProvider({
   defaultTheme = "system",
   storageKey = "nexub-theme",
   defaultGlass = "balanced",
-  glassStorageKey = "nexub-glass"
+  glassStorageKey = "nexub-glass",
+  seed,
+  seedTarget = "primary"
 }) {
+  useSeedTheme(seed, seedTarget);
   const [theme, setThemeState] = React.useState(defaultTheme);
   const [systemTheme, setSystemTheme] = React.useState("light");
   const [glass, setGlassState] = React.useState(defaultGlass);

package/dist/components/FormField/index.js

@@ -1,10 +1,10 @@
 'use client';
 import {
   FormField
-} from "../../chunk-G4RLUGE3.js";
-import "../../chunk-ZLW7IBXK.js";
+} from "../../chunk-LYOU2D5N.js";
 import "../../chunk-PGD246WD.js";
 import "../../chunk-QVTVDL6Y.js";
+import "../../chunk-ZLW7IBXK.js";
 import "../../chunk-22BGPRJZ.js";
 import "../../chunk-5W3AOOYS.js";
 import "../../chunk-DEIBF3P7.js";

package/dist/components/ThemeProvider/index.js

@@ -3,7 +3,7 @@ import {
   ThemeProvider,
   ThemeScript,
   useTheme
-} from "../../chunk-AEBYQKLS.js";
+} from "../../chunk-3XX45SUC.js";
 import "../../chunk-NHUQLIHL.js";
 export {
   ThemeProvider,

package/dist/index.d.ts

@@ -1788,8 +1788,22 @@ interface ThemeProviderProps {
     defaultGlass?: GlassMode;
     /** localStorage key for the glass intensity. Defaults to 'nexub-glass'. */
     glassStorageKey?: string;
+    /**
+     * Brand seed colour (`#rgb` / `#rrggbb`) for white-label theming. The accent
+     * family named by `seedTarget` is regenerated from it (same HCT tones as the
+     * built-in roles, so WCAG pairs hold) and set on `<html>` via the CSSOM
+     * (strict-CSP safe), following the current `data-contrast` level.
+     *
+     * Runs on the client after `@nexub/tokens/seed` loads (a lazy chunk with
+     * the colour library), so server-rendered pages paint the default brand
+     * first. To avoid that flash, emit `createSeedThemeCss(seed)` from
+     * `@nexub/tokens/seed` into a server-rendered stylesheet instead.
+     */
+    seed?: string;
+    /** Accent family the seed recolours: 'primary' (default) or 'tertiary' (product brand). */
+    seedTarget?: 'primary' | 'tertiary';
 }
-declare function ThemeProvider({ children, defaultTheme, storageKey, defaultGlass, glassStorageKey, }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, storageKey, defaultGlass, glassStorageKey, seed, seedTarget, }: ThemeProviderProps): React.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 interface ThemeScriptProps {
     /** Must match ThemeProvider's `storageKey`. Defaults to 'nexub-theme'. */

package/dist/index.js

@@ -1,10 +1,8 @@
 'use client';
-import {
-  TopNav
-} from "./chunk-KRHD7VI6.js";
 import {
   Root
 } from "./chunk-ZXLACKEB.js";
+import "./chunk-XYXMPHND.js";
 import {
   Textarea,
   textareaVariants
@@ -13,7 +11,7 @@ import {
   ThemeProvider,
   ThemeScript,
   useTheme
-} from "./chunk-AEBYQKLS.js";
+} from "./chunk-3XX45SUC.js";
 import {
   ThinkingIndicator
 } from "./chunk-ESMIBOF5.js";
@@ -34,7 +32,9 @@ import {
 import {
   Toolbar
 } from "./chunk-2ZBJOUJ7.js";
-import "./chunk-XYXMPHND.js";
+import {
+  TopNav
+} from "./chunk-KRHD7VI6.js";
 import {
   StatusPill,
   statusPillVariants
@@ -180,7 +180,6 @@ import {
 import {
   NavigationRail
 } from "./chunk-5GN2GFW3.js";
-import "./chunk-PICMOOAZ.js";
 import "./chunk-ZT3NWE5U.js";
 import "./chunk-CAOLGXA5.js";
 import {
@@ -195,6 +194,10 @@ import {
   inputWrapperVariants
 } from "./chunk-F7ZA2VA2.js";
 import "./chunk-KLTQJZOX.js";
+import {
+  Heading,
+  headingVariants
+} from "./chunk-SKIJVVBU.js";
 import {
   KeyboardShortcut
 } from "./chunk-W2P2WOAN.js";
@@ -216,10 +219,7 @@ import {
 import "./chunk-ADO2DB6Q.js";
 import {
   FormField
-} from "./chunk-G4RLUGE3.js";
-import {
-  HelperText
-} from "./chunk-ZLW7IBXK.js";
+} from "./chunk-LYOU2D5N.js";
 import {
   Label,
   labelVariants
@@ -234,10 +234,10 @@ import {
   Grid
 } from "./chunk-6JBQAJJD.js";
 import "./chunk-VLQGQFW7.js";
+import "./chunk-PICMOOAZ.js";
 import {
-  Heading,
-  headingVariants
-} from "./chunk-SKIJVVBU.js";
+  HelperText
+} from "./chunk-ZLW7IBXK.js";
 import {
   DateRangePicker
 } from "./chunk-6U5WQERX.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -68,12 +68,12 @@
     "date-fns": "^4.4.0",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.6.1",
-    "@nexub/icons": "1.8.0"
+    "@nexub/icons": "1.9.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^1.8.0"
+    "@nexub/tokens": "^1.9.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
@@ -98,8 +98,8 @@
     "vaul": "1.1.2",
     "vite": "^7.3.7",
     "vitest": "^5.0.5",
-    "@nexub/themes": "1.8.0",
-    "@nexub/tokens": "1.8.0"
+    "@nexub/themes": "1.9.0",
+    "@nexub/tokens": "1.9.0"
   },
   "scripts": {
     "build": "tsup && node scripts/check-dts.mjs",

package/dist/{chunk-G4RLUGE3.js → chunk-LYOU2D5N.js}

@@ -1,13 +1,13 @@
 'use client';
-import {
-  HelperText
-} from "./chunk-ZLW7IBXK.js";
 import {
   Label
 } from "./chunk-PGD246WD.js";
 import {
   FormError
 } from "./chunk-QVTVDL6Y.js";
+import {
+  HelperText
+} from "./chunk-ZLW7IBXK.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";