@luxfi/ui 7.3.2 → 7.4.2

package/dist/white-label.d.ts

@@ -0,0 +1,59 @@
+declare const LUX_BRAND: {
+    readonly lux: "#7000FF";
+    readonly zoo: "#6C5EFB";
+    readonly hanzo: "#EA580C";
+    readonly pars: "#1C3879";
+    readonly bootnode: "#3B82F6";
+};
+declare const PARS_GOLD = "#C8A45C";
+type LuxBrand = keyof typeof LUX_BRAND;
+type Org = LuxBrand;
+interface OrgIdentity {
+    /** Org id — also the gui child-theme suffix (`dark_lux`, `dark_zoo`, …). */
+    readonly org: Org;
+    /** Display name for chrome (header, title, sign-in copy). */
+    readonly name: string;
+    /** Canonical apex domain. */
+    readonly domain: string;
+    /** IAM/OIDC host. The issuer is `https://` + this. */
+    readonly iamDomain: string;
+    /** Brand accent hex — the same value the gui child-theme row is built from. */
+    readonly accent: string;
+    /** Foreground used on top of the accent. */
+    readonly accentForeground: string;
+}
+declare const ORGS: Readonly<Record<Org, OrgIdentity>>;
+declare const DEFAULT_ORG: Org;
+interface WhiteLabel extends OrgIdentity {
+    /** Hostname the identity was resolved from, port stripped, lowercased. */
+    readonly host: string;
+    /** App slug taken from the hostname — `mpc.lux.cloud` → `mpc`. */
+    readonly app: string;
+    /** gui child-theme row to hand GuiProvider — `dark_lux`, `dark_zoo`, … */
+    readonly theme: string;
+    /** OIDC issuer — `https://lux.id`. */
+    readonly issuer: string;
+    /** IAM client id, `<org>-<app>` per the fleet naming scheme — `lux-mpc`. */
+    readonly clientId: string;
+}
+/**
+ * Resolve the full white-label identity from a Host header value.
+ *
+ * Pure and total: an unknown or missing host falls back to the Lux row rather
+ * than throwing, so a preview URL or a health probe never blanks the UI.
+ *
+ *   resolveWhiteLabel('mpc.lux.cloud')  // org lux,  clientId lux-mpc,   issuer https://lux.id
+ *   resolveWhiteLabel('zoo.network')    // org zoo,  clientId zoo-network, issuer https://zoo.id
+ *   resolveWhiteLabel('id.pars.id')     // org pars, clientId pars-id,   issuer https://pars.id
+ */
+declare function resolveWhiteLabel(host?: string | null): WhiteLabel;
+/**
+ * The current host in a browser, or '' during SSR / prerender.
+ * Server code must pass `req.headers.host` to resolveWhiteLabel explicitly —
+ * there is no ambient request here, and guessing would bake in a brand.
+ */
+declare function currentHost(): string;
+/** Identity for the org id itself, for the rare surface that is not host-routed. */
+declare function orgIdentity(org: Org): OrgIdentity;
+
+export { DEFAULT_ORG, LUX_BRAND, type LuxBrand, type Org, type OrgIdentity, PARS_GOLD, type WhiteLabel, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };

package/dist/white-label.js

@@ -0,0 +1,124 @@
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
+};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
+}
+function orgIdentity(org) {
+  return ORGS[org];
+}
+
+export { DEFAULT_ORG, LUX_BRAND, PARS_GOLD, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.3.2",
-  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
+  "version": "7.4.2",
+  "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
   "type": "module",
   "license": "MIT",
   "author": {
@@ -35,6 +35,46 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./gui": {
+      "types": "./dist/gui.d.ts",
+      "import": "./dist/gui.js",
+      "require": "./dist/gui.cjs"
+    },
+    "./white-label": {
+      "types": "./dist/white-label.d.ts",
+      "import": "./dist/white-label.js",
+      "require": "./dist/white-label.cjs"
+    },
+    "./iam": {
+      "types": "./dist/iam.d.ts",
+      "import": "./dist/iam.js",
+      "require": "./dist/iam.cjs"
+    },
+    "./identity": {
+      "types": "./dist/identity.d.ts",
+      "import": "./dist/identity.js",
+      "require": "./dist/identity.cjs"
+    },
+    "./chrome": {
+      "types": "./dist/chrome.d.ts",
+      "import": "./dist/chrome.js",
+      "require": "./dist/chrome.cjs"
+    },
+    "./use-narrow": {
+      "types": "./dist/use-narrow.d.ts",
+      "import": "./dist/use-narrow.js",
+      "require": "./dist/use-narrow.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "import": "./dist/next.js",
+      "require": "./dist/next.cjs"
+    },
     "./tokens.css": "./tokens.css",
     "./accordion": {
       "types": "./dist/accordion.d.ts",
@@ -111,6 +151,11 @@
       "import": "./dist/icon-button.js",
       "require": "./dist/icon-button.cjs"
     },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/icons.cjs"
+    },
     "./image": {
       "types": "./dist/image.d.ts",
       "import": "./dist/image.js",
@@ -250,14 +295,11 @@
     "build": "tsup",
     "build:check": "tsc --noEmit",
     "clean": "rm -rf dist",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "harness": "vite --config harness/vite.config.ts",
+    "test": "playwright test"
   },
   "dependencies": {
-    "@hanzogui/core": "^3.0.6",
-    "@hanzogui/dialog": "^3.0.2",
-    "@hanzogui/popover": "^3.0.2",
-    "@hanzogui/text": "^3.0.2",
-    "@hanzogui/tooltip": "^3.0.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -271,24 +313,60 @@
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@tanstack/react-query": "^5.76.0",
     "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.31.0",
-    "react-icons": "^5.4.0",
+    "lucide-react": "^1.27.0",
     "sonner": "^2.0.0",
-    "tailwind-merge": "^3.0.0",
-    "@tanstack/react-query": "^5.76.0"
+    "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "@hanzogui/core": "^3.0.6",
-    "react": ">=18",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@hanzo/gui": "^7.3.0",
+    "@hanzogui/colors": "^7.3.0",
+    "@hanzogui/config": "^7.3.0",
+    "@hanzogui/core": "^7.3.0",
+    "@hanzogui/lucide-icons-2": "^7.3.0",
+    "@hanzogui/themes": "^7.3.0",
+    "@hanzogui/web": "^7.3.0",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "@hanzogui/themes": {
+      "optional": true
+    },
+    "@hanzogui/colors": {
+      "optional": true
+    },
+    "@hanzogui/lucide-icons-2": {
+      "optional": true
+    },
+    "@hanzogui/core": {
+      "optional": true
+    },
+    "@hanzogui/web": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@hanzogui/core": "^3.0.6",
+    "@hanzo/gui": "7.3.0",
+    "@hanzogui/colors": "7.3.0",
+    "@hanzogui/config": "7.3.0",
+    "@hanzogui/core": "7.3.0",
+    "@hanzogui/themes": "7.3.0",
+    "@hanzogui/web": "7.3.0",
+    "@playwright/test": "^1.58",
+    "@tailwindcss/vite": "^4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native-web": "^0.21.0",
+    "tailwindcss": "^4",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^8"
   }
-}
+}

package/src/avatar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as RadixAvatar from '@radix-ui/react-avatar';
+import { Avatar as GuiAvatar } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -80,9 +80,12 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
 
+    // gui's Avatar — the same load/fallback state machine, but as a gui
+    // primitive, so it themes and lays out identically on native.
     return (
-      <RadixAvatar.Root
-        ref={ ref }
+      <GuiAvatar
+        ref={ ref as never }
+        unstyled
         className={ cn(
           'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle',
           SIZE_CLASSES[size],
@@ -90,20 +93,22 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
           !isBorderless && 'ring-2 ring-white dark:ring-gray-900',
           className,
         ) }
-        { ...rest }
+        { ...(rest as object) }
       >
         <AvatarFallback name={ name } icon={ icon }>
           { fallback }
         </AvatarFallback>
-        <RadixAvatar.Image
-          className="h-full w-full rounded-[inherit] object-cover"
-          src={ src }
-          srcSet={ srcSet }
-          loading={ loading }
-          alt={ name ?? '' }
-        />
+        { src != null && (
+          <GuiAvatar.Image
+            className="h-full w-full rounded-[inherit] object-cover"
+            src={ src }
+            srcSet={ srcSet }
+            loading={ loading }
+            alt={ name ?? '' }
+          />
+        ) }
         { children }
-      </RadixAvatar.Root>
+      </GuiAvatar>
     );
   },
 );
@@ -119,18 +124,19 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackInternalP
   function AvatarFallback(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return (
-      <RadixAvatar.Fallback
-        ref={ ref }
+      <GuiAvatar.Fallback
+        ref={ ref as never }
+        unstyled
         className={ cn(
           'flex h-full w-full items-center justify-center font-medium',
           className,
         ) }
-        { ...rest }
+        { ...(rest as object) }
       >
         { children }
         { name != null && children == null && <>{ getInitials(name) }</> }
         { name == null && children == null && icon }
-      </RadixAvatar.Fallback>
+      </GuiAvatar.Fallback>
     );
   },
 );

package/src/bank.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import React from 'react'
-import type { GetProps } from '@hanzogui/core'
-import { View, Text, styled } from '@hanzogui/core'
+import type { GetProps } from '@hanzo/gui'
+import { View, Text, styled } from '@hanzo/gui'
 
 // ── Bank Theme Tokens ─────────────────────────────────────────────
 export const bankColors = {

package/src/button.tsx

@@ -1,4 +1,4 @@
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
 
 import { Skeleton } from './skeleton';

package/src/checkbox.tsx

@@ -1,9 +1,11 @@
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-// chakra() HOC removed — pure Radix + Tailwind
+import { Checkbox as GuiCheckbox } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
 
+/** Tri-state, as the Chakra/Radix contract consumers already code against. */
+type CheckedState = boolean | 'indeterminate';
+
 const NOOP = () => { /* noop */ };
 
 // ─── CheckboxGroup context ───────────────────────────────────────────
@@ -98,7 +100,7 @@ export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'labe
   rootRef?: React.Ref<HTMLLabelElement>;
   checked?: boolean | 'indeterminate';
   defaultChecked?: boolean;
-  onCheckedChange?: (checked: RadixCheckbox.CheckedState) => void;
+  onCheckedChange?: (checked: CheckedState) => void;
   onChange?: React.FormEventHandler<HTMLLabelElement>;
   disabled?: boolean;
   readOnly?: boolean;
@@ -189,12 +191,12 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const isInGroup = group !== null && value !== undefined;
     const groupChecked = isInGroup ? group.value.includes(value) : undefined;
 
-    const [ internalChecked, setInternalChecked ] = React.useState<RadixCheckbox.CheckedState>(
+    const [ internalChecked, setInternalChecked ] = React.useState<CheckedState>(
       defaultChecked ?? false,
     );
 
     const isControlled = checkedProp !== undefined || isInGroup;
-    let checkedState: RadixCheckbox.CheckedState;
+    let checkedState: CheckedState;
     if (checkedProp !== undefined) {
       checkedState = checkedProp;
     } else if (isInGroup) {
@@ -204,7 +206,7 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
     }
 
     const handleCheckedChange = React.useCallback(
-      (nextChecked: RadixCheckbox.CheckedState) => {
+      (nextChecked: CheckedState) => {
         if (readOnly) return;
 
         if (!isControlled) {
@@ -252,7 +254,10 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
         data-readonly={ readOnly || undefined }
         { ...rest }
       >
-        <RadixCheckbox.Root
+        { /* gui's Checkbox — role=checkbox + aria-checked from its headless core,
+             a real Pressable on native. Paint stays in the Lux classes. */ }
+        <GuiCheckbox
+          unstyled
           checked={ checkedState }
           onCheckedChange={ handleCheckedChange }
           disabled={ disabled || readOnly }
@@ -272,15 +277,15 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
           ) }
         >
           { icon ?? (
-            <RadixCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
+            <GuiCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
               { checkedState === 'indeterminate' ? (
                 <IndeterminateIcon className={ sizeClasses.icon }/>
               ) : (
                 <CheckIcon className={ sizeClasses.icon }/>
               ) }
-            </RadixCheckbox.Indicator>
+            </GuiCheckbox.Indicator>
           ) }
-        </RadixCheckbox.Root>
+        </GuiCheckbox>
         { /* Hidden native input for form compatibility and ref forwarding */ }
         <input
           ref={ setHiddenInputRef }