@luxfi/ui 7.4.0 → 7.4.3

package/dist/white-label.js

@@ -0,0 +1,134 @@
+// 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 issuer is `zoolabs.id` — the one row where it is not `<org>.id`,
+    // and the one every hand-rolled branding map gets wrong. `id.zoo.network`
+    // ANSWERS, which is why it keeps being copied around, but it is an alias:
+    // its own discovery document advertises
+    //   issuer                  https://zoolabs.id
+    //   authorization_endpoint  https://zoolabs.id/v1/iam/oauth/authorize
+    //   jwks_uri                https://zoolabs.id/v1/iam/.well-known/jwks
+    // so a client configured on the alias validates `iss` against a string the
+    // IdP never emits and rejects every token it is given — the exact shape of
+    // the lux.id outage. `zoo.id` is not an IdP at all (no discovery document).
+    iamDomain: "zoolabs.id",
+    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"],
+  ["lux.market", "lux"],
+  ["lux.exchange", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoolabs.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars", "app"],
+  ["pars.network", "pars", "app"],
+  ["parsdao.org", "pars", "app"],
+  ["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, pinned) {
+  if (pinned) return pinned;
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  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,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.0",
+  "version": "7.4.3",
   "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -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,7 +295,9 @@
     "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": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -266,41 +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",
-    "@hanzo/gui": "^7.3.0",
-    "@hanzogui/config": "^7.3.0",
-    "@hanzogui/core": "^7.3.0",
-    "@hanzogui/web": "^7.3.0"
+    "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
     "@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/colors": "^7.3.0",
-    "@hanzogui/lucide-icons-2": "^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/themes": {
+      "optional": true
+    },
+    "@hanzogui/colors": {
+      "optional": true
+    },
+    "@hanzogui/lucide-icons-2": {
+      "optional": true
+    },
+    "@hanzogui/core": {
+      "optional": true
+    },
+    "@hanzogui/web": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@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/colors": "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/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 }