@luxfi/ui 7.3.1 → 7.4.0

package/dist/provider.js

@@ -1,25 +1,75 @@
 "use client";
-import { createGui } from '@hanzogui/core';
+import { createGui, GuiProvider } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 export { QueryClient, useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import React from 'react';
+import { defaultConfig } from '@hanzogui/config/v5';
 import { jsx } from 'react/jsx-runtime';
 
-var _guiInitialized = false;
-function ensureGui() {
-  if (_guiInitialized) return;
-  if (typeof window === "undefined") return;
-  createGui({ settings: { autocompleteSpecificTokens: "except-special" } });
-  _guiInitialized = true;
-}
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879"
+};
+var PARS_GOLD = "#C8A45C";
+var TRUE_BLACK = "#000000";
+var darkBase = {
+  ...defaultConfig.themes.dark,
+  background: TRUE_BLACK,
+  backgroundHover: "#0A0A0A",
+  backgroundPress: "#141414",
+  backgroundFocus: "#0A0A0A"
+};
+var brandTheme = (accent, extra = {}) => ({
+  ...darkBase,
+  accentBackground: accent,
+  accentColor: "#FFFFFF",
+  borderColorHover: accent,
+  colorHover: accent,
+  ...extra
+});
+var luxThemes = {
+  dark: darkBase,
+  dark_lux: brandTheme(LUX_BRAND.lux),
+  dark_zoo: brandTheme(LUX_BRAND.zoo),
+  dark_hanzo: brandTheme(LUX_BRAND.hanzo),
+  dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD })
+};
+var config = createGui({
+  ...defaultConfig,
+  settings: {
+    ...defaultConfig.settings,
+    onlyAllowShorthands: false
+  },
+  themes: {
+    ...defaultConfig.themes,
+    ...luxThemes
+  }
+});
+var lux_config_default = config;
 var defaultQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
 });
-var AppProvider = ({ children, queryClient }) => {
-  React.useEffect(() => {
-    ensureGui();
+var FONT_BODY_RESET_ID = "lux-ui-font-body-reset";
+var FONT_BODY_RESET_CSS = "body .font_body{line-height:1.5}";
+var useFontBodyReset = () => {
+  React.useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(FONT_BODY_RESET_ID)) return;
+    const style = document.createElement("style");
+    style.id = FONT_BODY_RESET_ID;
+    style.textContent = FONT_BODY_RESET_CSS;
+    document.head.appendChild(style);
   }, []);
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
+};
+var AppProvider = ({
+  children,
+  queryClient,
+  defaultTheme = "dark_lux"
+}) => {
+  useFontBodyReset();
+  return /* @__PURE__ */ jsx(GuiProvider, { config: lux_config_default, defaultTheme, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) });
 };
 
 export { AppProvider };

package/dist/tag.cjs

@@ -4,9 +4,8 @@
 var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
-var tooltip = require('@hanzogui/tooltip');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -34,7 +33,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",
@@ -363,8 +362,8 @@ var Tooltip = React3__namespace.forwardRef(
     const isPopover = variant === "popover";
     const placement = mapPlacement(positioning?.placement) ?? "top";
     const offset = positioning?.offset?.mainAxis ?? 4;
-    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      tooltip.Tooltip,
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
@@ -374,7 +373,7 @@ var Tooltip = React3__namespace.forwardRef(
         unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            tooltip.Tooltip.Trigger,
+            gui.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
@@ -384,7 +383,7 @@ var Tooltip = React3__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            tooltip.Tooltip.Content,
+            gui.Tooltip.Content,
             {
               ref,
               unstyled: true,
@@ -401,7 +400,7 @@ var Tooltip = React3__namespace.forwardRef(
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip.Arrow,
+                  gui.Tooltip.Arrow,
                   {
                     unstyled: true,
                     className: cn(

package/dist/tag.js

@@ -2,9 +2,8 @@
 import * as React3 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
+import { styled, View, TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/tag.tsx

package/dist/textarea.cjs

@@ -38,13 +38,21 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React__default.default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React__default.default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         ref,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }

package/dist/textarea.d.cts

@@ -5,6 +5,8 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 interface TextareaProps extends Omit<React__default.ComponentPropsWithRef<'textarea'>, 'size'> {
     readonly size?: TextareaSize;
     readonly variant?: TextareaVariant;
+    /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+    readonly onChangeText?: (text: string) => void;
 }
 declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/textarea.d.ts

@@ -5,6 +5,8 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 interface TextareaProps extends Omit<React__default.ComponentPropsWithRef<'textarea'>, 'size'> {
     readonly size?: TextareaSize;
     readonly variant?: TextareaVariant;
+    /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+    readonly onChangeText?: (text: string) => void;
 }
 declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/textarea.js

@@ -32,13 +32,21 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }

package/dist/tooltip.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var tooltip = require('@hanzogui/tooltip');
+var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 var React = require('react');
 var clsx = require('clsx');
@@ -113,8 +113,8 @@ var Tooltip = React__namespace.forwardRef(
     const isPopover = variant === "popover";
     const placement = mapPlacement(positioning?.placement) ?? "top";
     const offset = positioning?.offset?.mainAxis ?? 4;
-    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      tooltip.Tooltip,
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
@@ -124,7 +124,7 @@ var Tooltip = React__namespace.forwardRef(
         unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            tooltip.Tooltip.Trigger,
+            gui.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
@@ -134,7 +134,7 @@ var Tooltip = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            tooltip.Tooltip.Content,
+            gui.Tooltip.Content,
             {
               ref,
               unstyled: true,
@@ -151,7 +151,7 @@ var Tooltip = React__namespace.forwardRef(
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip.Arrow,
+                  gui.Tooltip.Arrow,
                   {
                     unstyled: true,
                     className: cn(

package/dist/tooltip.js

@@ -1,5 +1,5 @@
 "use client";
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
+import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 import { clsx } from 'clsx';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.3.1",
-  "description": "Radix + Tailwind UI primitives for Lux apps. Drop-in replacements for Chakra compound components.",
+  "version": "7.4.0",
+  "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
   "type": "module",
   "license": "MIT",
   "author": {
@@ -253,11 +253,6 @@
     "dev": "tsup --watch"
   },
   "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",
@@ -277,17 +272,34 @@
     "react-icons": "^5.4.0",
     "sonner": "^2.0.0",
     "tailwind-merge": "^3.0.0",
-    "@tanstack/react-query": "^5.76.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"
   },
   "peerDependencies": {
-    "@hanzogui/core": "^3.0.6",
-    "react": ">=18",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@hanzo/gui": "^7.3.0",
+    "@hanzogui/config": "^7.3.0",
+    "@hanzogui/themes": "^7.3.0",
+    "@hanzogui/colors": "^7.3.0",
+    "@hanzogui/lucide-icons-2": "^7.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@hanzogui/themes": { "optional": true },
+    "@hanzogui/colors": { "optional": true },
+    "@hanzogui/lucide-icons-2": { "optional": true }
   },
   "devDependencies": {
-    "@hanzogui/core": "^3.0.6",
+    "@hanzogui/config": "7.3.0",
+    "@hanzogui/themes": "7.3.0",
+    "@hanzogui/colors": "7.3.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3"
   }

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/close-button.tsx

@@ -1,4 +1,4 @@
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
 
 // eslint-disable-next-line max-len

package/src/dialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog as GuiDialog } from '@hanzogui/dialog';
+import { Dialog as GuiDialog } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';

package/src/icon-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/index.ts

@@ -1,6 +1,12 @@
 export { AppProvider } from './provider';
 export { cn } from './utils';
 
+// Lux gui config — the createGui() result (fed to GuiProvider) + the brand
+// child-theme rows. Exposed so app bundlers (Vite/Next SSR extraction) and
+// escape-hatch consumers can reach the resolved config and brand palette.
+export { default as guiConfig, config, luxThemes, LUX_BRAND, PARS_GOLD } from './lux.config';
+export type { Conf, LuxBrand } from './lux.config';
+
 export {
   AccordionRoot,
   AccordionItem,

package/src/input.tsx

@@ -34,15 +34,31 @@ type InputVariant = 'outline' | 'filled' | 'unstyled';
 export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
   readonly size?: InputSize;
   readonly variant?: InputVariant;
+  /**
+   * Tamagui / React-Native convention: called with the text value on every
+   * change. Bridged to the native `onChange`, so callers using EITHER the web
+   * `onChange(e)` API OR the `onChangeText(text)` API get updates. Without this
+   * bridge, RN/Tamagui-style code (e.g. seed-phrase / PIN entry ported from a
+   * gui-based surface) passes `onChangeText` and the field silently no-ops.
+   */
+  readonly onChangeText?: (text: string) => void;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
+  ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [ onChange, onChangeText ],
+    );
     return (
       <input
         ref={ ref }
         className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
         { ...rest }
+        onChange={ handleChange }
       />
     );
   },

package/src/lux.config.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import { createGui } from '@hanzo/gui';
+import { defaultConfig } from '@hanzogui/config/v5';
+
+// ---------------------------------------------------------------------------
+// Branding = VALUE, not place.
+// The ONE spot brand hex is allowed to live (project rule: never hardcode hex
+// in components). Accents sourced from the work-board brand palette.
+// ---------------------------------------------------------------------------
+export const LUX_BRAND = {
+  lux: '#7000FF',
+  zoo: '#6C5EFB',
+  hanzo: '#EA580C',
+  pars: '#1C3879',
+} as const;
+
+export const PARS_GOLD = '#C8A45C';
+
+export type LuxBrand = keyof typeof LUX_BRAND;
+
+// Shared true-black neutral base: take @hanzogui's resolved dark theme and
+// force a pure-black canvas so every Lux surface sits on the same ground.
+const TRUE_BLACK = '#000000';
+
+const darkBase = {
+  ...defaultConfig.themes.dark,
+  background: TRUE_BLACK,
+  backgroundHover: '#0A0A0A',
+  backgroundPress: '#141414',
+  backgroundFocus: '#0A0A0A',
+} as typeof defaultConfig.themes.dark;
+
+// A brand child-theme row = the true-black base with the brand accent woven
+// into the accent-carrying keys. `<Theme name="lux">` under a dark parent
+// resolves to `dark_lux`.
+const brandTheme = (
+  accent: string,
+  extra: Record<string, string> = {},
+): typeof darkBase =>
+  ({
+    ...darkBase,
+    accentBackground: accent,
+    accentColor: '#FFFFFF',
+    borderColorHover: accent,
+    colorHover: accent,
+    ...extra,
+  }) as typeof darkBase;
+
+export const luxThemes = {
+  dark: darkBase,
+  dark_lux: brandTheme(LUX_BRAND.lux),
+  dark_zoo: brandTheme(LUX_BRAND.zoo),
+  dark_hanzo: brandTheme(LUX_BRAND.hanzo),
+  dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD }),
+};
+
+// One engine, tokens-not-forks: reuse @hanzogui's v5 defaultConfig
+// (tokens / fonts / media / shorthands) and only add the Lux child-theme rows
+// over it. The lone settings override — `onlyAllowShorthands: false` — keeps the
+// harvested exchange primitives (which author with longhand style props like
+// `borderRadius` / `paddingHorizontal`) valid; v5 defaults to shorthands-only.
+export const config = createGui({
+  ...defaultConfig,
+  settings: {
+    ...defaultConfig.settings,
+    onlyAllowShorthands: false,
+  },
+  themes: {
+    ...defaultConfig.themes,
+    ...luxThemes,
+  },
+});
+
+export type Conf = typeof config;
+
+declare module '@hanzo/gui' {
+  interface GuiCustomConfig extends Conf {}
+}
+
+export default config;

package/src/popover.tsx

@@ -1,4 +1,4 @@
-import { Popover as GuiPopover } from '@hanzogui/popover';
+import { Popover as GuiPopover } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';

package/src/provider.tsx

@@ -1,33 +1,69 @@
 'use client';
 
-import { createGui } from '@hanzogui/core';
-import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { GuiProvider } from '@hanzo/gui';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+  useQuery,
+  useMutation,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
 import React from 'react';
 
-// Initialize @hanzogui once — lazy, not at module load (would crash Node/SSR).
-let _guiInitialized = false;
-function ensureGui() {
-  if (_guiInitialized) return;
-  if (typeof window === 'undefined') return;
-  createGui({ settings: { autocompleteSpecificTokens: 'except-special' } });
-  _guiInitialized = true;
-}
+import config from './lux.config';
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 30_000 } },
 });
 
+// --- Tailwind-Preflight baseline reset -------------------------------------
+// @hanzo/gui's GuiProvider scopes its subtree in a Tamagui `font_body` context
+// whose shared CSS rule pins an ABSOLUTE line-height (23px). That cascades into
+// consumer text authored at an arbitrary size with no line-height utility of its
+// own (e.g. `text-[11px]` labels), making each line too tall and reflowing dense
+// layouts. Restore Tailwind Preflight's `line-height: 1.5` baseline at
+// `body .font_body` specificity — proportional, so any element carrying its own
+// text-* / leading utility is unaffected. Shipping it from AppProvider means
+// every Lux surface inherits the fix with no per-app CSS pin. Web-only (there is
+// no `document` on native), injected once via useInsertionEffect (React's
+// primitive for style insertion — runs before the browser paints, so no reflow
+// flash), idempotent by element id.
+const FONT_BODY_RESET_ID = 'lux-ui-font-body-reset';
+const FONT_BODY_RESET_CSS = 'body .font_body{line-height:1.5}';
+
+const useFontBodyReset = (): void => {
+  React.useInsertionEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(FONT_BODY_RESET_ID)) return;
+    const style = document.createElement('style');
+    style.id = FONT_BODY_RESET_ID;
+    style.textContent = FONT_BODY_RESET_CSS;
+    document.head.appendChild(style);
+  }, []);
+};
+
 interface AppProviderProps {
   children: React.ReactNode;
   queryClient?: QueryClient;
+  /** Lux brand child-theme row: dark_lux | dark_zoo | dark_hanzo | dark_pars */
+  defaultTheme?: string;
 }
 
-export const AppProvider = ({ children, queryClient }: AppProviderProps) => {
-  React.useEffect(() => { ensureGui(); }, []);
+// AppProvider wraps GuiProvider (the @hanzogui engine, fed the Lux config) +
+// tanstack QueryClientProvider. One provider for every Lux surface.
+export const AppProvider = ({
+  children,
+  queryClient,
+  defaultTheme = 'dark_lux',
+}: AppProviderProps): React.ReactElement => {
+  useFontBodyReset();
   return (
-    <QueryClientProvider client={ queryClient ?? defaultQueryClient }>
-      { children }
-    </QueryClientProvider>
+    <GuiProvider config={config} defaultTheme={defaultTheme as never}>
+      <QueryClientProvider client={queryClient ?? defaultQueryClient}>
+        {children}
+      </QueryClientProvider>
+    </GuiProvider>
   );
 };
 

package/src/textarea.tsx

@@ -34,15 +34,25 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'size'> {
   readonly size?: TextareaSize;
   readonly variant?: TextareaVariant;
+  /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+  readonly onChangeText?: (text: string) => void;
 }
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
+  ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [ onChange, onChangeText ],
+    );
     return (
       <textarea
         ref={ ref }
         className={ cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className) }
         { ...rest }
+        onChange={ handleChange }
       />
     );
   },

package/src/tooltip.tsx

@@ -1,7 +1,7 @@
 import {
   Tooltip as GuiTooltip,
   TooltipGroup as GuiTooltipGroup,
-} from '@hanzogui/tooltip';
+} from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 
@@ -30,7 +30,7 @@ function useIsMobile(): boolean {
 /** Map placement string to @hanzogui Popper placement prop. */
 function mapPlacement(p: string | undefined): string | undefined {
   if (!p) return undefined;
-  // @hanzogui/popper uses same placement strings as floating-ui
+  // @hanzo/gui uses same placement strings as floating-ui
   return p;
 }