@luxfi/ui 7.3.1 → 7.4.0

package/dist/dialog.d.ts

@@ -1,3 +1,6 @@
+import * as _hanzo_gui from '@hanzo/gui';
+import * as _hanzogui_web from '@hanzogui/web';
+import * as _hanzogui_core from '@hanzogui/core';
 import * as React from 'react';
 
 type DialogSize = 'sm' | 'md' | 'full' | 'cover';
@@ -49,17 +52,67 @@ declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & Reac
 interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogBackdrop: any;
-declare const DialogTitle: any;
-declare const DialogDescription: any;
+declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>, "forceMount" | "scope"> & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    forceMount?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {
+    open?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | _hanzogui_web.SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DialogTitle: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
+declare const DialogDescription: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_web.TextNonStyleProps, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiTextElement, _hanzogui_web.TextNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: _hanzogui_web.FontSizeTokens | undefined;
+}, _hanzogui_web.StaticConfigPublic>;
 interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
-declare const DialogTrigger: any;
+declare const DialogTrigger: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {}>, "scope"> & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {}, _hanzogui_web.StaticConfigPublic>;
 /**
  * `DialogActionTrigger` renders its child and closes the dialog on click.
  * This mirrors the Chakra `Dialog.ActionTrigger` behavior which wraps
  * children in a close action.
  */
-declare const DialogActionTrigger: any;
+declare const DialogActionTrigger: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetFinalProps<_hanzogui_core.RNViewNonStyleProps, _hanzogui_web.StackStyleBase, {}>, "scope" | "displayWhenAdapted"> & {
+    displayWhenAdapted?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.GuiElement, _hanzogui_core.RNViewNonStyleProps & {
+    displayWhenAdapted?: boolean;
+} & {
+    scope?: _hanzo_gui.DialogScopes;
+}, _hanzogui_web.StackStyleBase, {}, _hanzogui_web.StaticConfigPublic>;
 
 export { DialogActionTrigger, DialogBackdrop, DialogBody, type DialogBodyProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogRoot, type DialogRootProps, DialogTitle, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.js

@@ -1,9 +1,8 @@
 "use client";
-import { Dialog } from '@hanzogui/dialog';
+import { styled, View, Dialog } from '@hanzo/gui';
 import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/dialog.tsx

package/dist/drawer.cjs

@@ -5,7 +5,7 @@ var RadixDialog = require('@radix-ui/react-dialog');
 var React2 = 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');
 
 function _interopNamespace(e) {
@@ -34,7 +34,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",

package/dist/drawer.js

@@ -3,7 +3,7 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/drawer.tsx

package/dist/icon-button.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -218,7 +218,7 @@ React__namespace.forwardRef(
     )) });
   }
 );
-var IconButtonFrame = core.styled(core.View, {
+var IconButtonFrame = gui.styled(gui.View, {
   name: "LuxIconButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
   role: "button",

package/dist/icon-button.js

@@ -1,5 +1,5 @@
 "use client";
-import { styled, View } from '@hanzogui/core';
+import { styled, View } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';

package/dist/index.cjs

@@ -1,25 +1,23 @@
 "use client";
 'use strict';
 
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
 var React30 = require('react');
+var v5 = require('@hanzogui/config/v5');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var RadixAvatar = require('@radix-ui/react-avatar');
-var tooltip = require('@hanzogui/tooltip');
 var usehooks = require('@uidotdev/usehooks');
 var RadixCheckbox = require('@radix-ui/react-checkbox');
 var Collapsible = require('@radix-ui/react-collapsible');
-var dialog = require('@hanzogui/dialog');
 var RadixDialog = require('@radix-ui/react-dialog');
 var LabelPrimitive = require('@radix-ui/react-label');
 var esToolkit = require('es-toolkit');
 var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var lu = require('react-icons/lu');
-var popover = require('@hanzogui/popover');
 var RadixProgress = require('@radix-ui/react-progress');
 var RadixRadioGroup = require('@radix-ui/react-radio-group');
 var RadixSelect = require('@radix-ui/react-select');
@@ -62,21 +60,70 @@ var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 
 // src/provider.tsx
-var _guiInitialized = false;
-function ensureGui() {
-  if (_guiInitialized) return;
-  if (typeof window === "undefined") return;
-  core.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 = {
+  ...v5.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 = gui.createGui({
+  ...v5.defaultConfig,
+  settings: {
+    ...v5.defaultConfig.settings,
+    onlyAllowShorthands: false
+  },
+  themes: {
+    ...v5.defaultConfig.themes,
+    ...luxThemes
+  }
+});
+var lux_config_default = config;
 var defaultQueryClient = new reactQuery.QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
 });
-var AppProvider = ({ children, queryClient }) => {
-  React30__namespace.default.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 = () => {
+  React30__namespace.default.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__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
+};
+var AppProvider = ({
+  children,
+  queryClient,
+  defaultTheme = "dark_lux"
+}) => {
+  useFontBodyReset();
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.GuiProvider, { config: lux_config_default, defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) });
 };
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -255,7 +302,7 @@ function useAccordion(items) {
   }, [value, onValueChange, scrollToItemFromUrl]);
 }
 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",
@@ -815,8 +862,8 @@ var Tooltip = React30__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,
@@ -826,7 +873,7 @@ var Tooltip = React30__namespace.forwardRef(
         unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            tooltip.Tooltip.Trigger,
+            gui.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
@@ -836,7 +883,7 @@ var Tooltip = React30__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            tooltip.Tooltip.Content,
+            gui.Tooltip.Content,
             {
               ref,
               unstyled: true,
@@ -853,7 +900,7 @@ var Tooltip = React30__namespace.forwardRef(
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip.Arrow,
+                  gui.Tooltip.Arrow,
                   {
                     unstyled: true,
                     className: cn(
@@ -963,7 +1010,7 @@ var Badge = React30__namespace.default.forwardRef(
     return badgeElement;
   }
 );
-var SpinnerFrame = core.styled(core.View, {
+var SpinnerFrame = gui.styled(gui.View, {
   name: "ButtonSpinner",
   render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
   width: 16,
@@ -987,7 +1034,7 @@ function Spinner({ className }) {
     }
   );
 }
-var ButtonFrame = core.styled(core.View, {
+var ButtonFrame = gui.styled(gui.View, {
   name: "LuxButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
   role: "button",
@@ -1995,7 +2042,7 @@ var DialogRoot = ({
   );
   const ctx = React30__namespace.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog,
+    gui.Dialog,
     {
       open,
       defaultOpen,
@@ -2021,9 +2068,9 @@ var DialogContent = React30__namespace.forwardRef(function DialogContent2(props,
     ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
   };
   const { size } = useDialogSizeContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-      dialog.Dialog.Overlay,
+      gui.Dialog.Overlay,
       {
         unstyled: true,
         className: "fixed inset-0 z-[1400] bg-black/80"
@@ -2038,7 +2085,7 @@ var DialogContent = React30__namespace.forwardRef(function DialogContent2(props,
           "overflow-hidden"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          dialog.Dialog.Content,
+          gui.Dialog.Content,
           {
             ref,
             unstyled: true,
@@ -2064,7 +2111,7 @@ var DialogContent = React30__namespace.forwardRef(function DialogContent2(props,
 });
 var DialogCloseTrigger = React30__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
 var DialogHeader = React30__namespace.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
@@ -2081,7 +2128,7 @@ var DialogHeader = React30__namespace.forwardRef(function DialogHeader2(props, r
       children: [
         startElement,
         /* @__PURE__ */ jsxRuntime.jsx(
-          dialog.Dialog.Title,
+          gui.Dialog.Title,
           {
             unstyled: true,
             className: cn(
@@ -2123,11 +2170,11 @@ var DialogFooter = React30__namespace.forwardRef(function DialogFooter2({ classN
     }
   );
 });
-var DialogBackdrop = dialog.Dialog.Overlay;
-var DialogTitle = dialog.Dialog.Title;
-var DialogDescription = dialog.Dialog.Description;
-var DialogTrigger = dialog.Dialog.Trigger;
-var DialogActionTrigger = dialog.Dialog.Close;
+var DialogBackdrop = gui.Dialog.Overlay;
+var DialogTitle = gui.Dialog.Title;
+var DialogDescription = gui.Dialog.Description;
+var DialogTrigger = gui.Dialog.Trigger;
+var DialogActionTrigger = gui.Dialog.Close;
 var DrawerPlacementContext = React30__namespace.createContext("right");
 var DrawerSizeContext = React30__namespace.createContext("md");
 var DrawerRoot = (props) => {
@@ -2480,7 +2527,7 @@ var Heading = React30__namespace.default.forwardRef(
     );
   }
 );
-var IconButtonFrame = core.styled(core.View, {
+var IconButtonFrame = gui.styled(gui.View, {
   name: "LuxIconButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
   role: "button",
@@ -2853,13 +2900,21 @@ var INPUT_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
 var Input = React30__namespace.default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React30__namespace.default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }
@@ -3461,7 +3516,7 @@ var PopoverRoot = (props) => {
   const placement = mergedPositioning.placement ?? "bottom-start";
   const offset = mergedPositioning.offset?.mainAxis ?? 4;
   return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext2.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover,
+    gui.Popover,
     {
       open,
       defaultOpen,
@@ -3475,7 +3530,7 @@ var PopoverRoot = (props) => {
 };
 var PopoverTrigger = React30__namespace.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
 var PopoverContent = React30__namespace.forwardRef(function PopoverContent2(props, ref) {
   const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
@@ -3488,7 +3543,7 @@ var PopoverContent = React30__namespace.forwardRef(function PopoverContent2(prop
     ...paddingTop !== void 0 ? { paddingTop: typeof paddingTop === "number" ? `${paddingTop * 4}px` : paddingTop } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Content,
+    gui.Popover.Content,
     {
       ref,
       unstyled: true,
@@ -3511,7 +3566,7 @@ var PopoverContent = React30__namespace.forwardRef(function PopoverContent2(prop
 var PopoverArrow = React30__namespace.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Arrow,
+    gui.Popover.Arrow,
     {
       ref,
       unstyled: true,
@@ -3523,7 +3578,7 @@ var PopoverArrow = React30__namespace.forwardRef(function PopoverArrow2(props, r
 var PopoverCloseTrigger = React30__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    popover.Popover.Close,
+    gui.Popover.Close,
     {
       unstyled: true,
       className: cn("absolute top-1 right-1", className),
@@ -3539,7 +3594,7 @@ var PopoverCloseTriggerWrapper = React30__namespace.forwardRef(function PopoverC
   if (disabled) {
     return children;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { ref, ...rest, asChild: true, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Close, { ref, ...rest, asChild: true, children });
 });
 var PopoverBody = React30__namespace.forwardRef(function PopoverBody2(props, ref) {
   const {
@@ -4006,8 +4061,8 @@ var Rating = React30__namespace.forwardRef(
     ] });
   }
 );
-function createListCollection(config) {
-  return { items: config.items };
+function createListCollection(config2) {
+  return { items: config2.items };
 }
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -5401,13 +5456,21 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React30__namespace.default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React30__namespace.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
       }
     );
   }
@@ -6791,7 +6854,7 @@ var bankColors = {
   divider: "#222222",
   disabled: "#444444"
 };
-var BankCard = core.styled(core.View, {
+var BankCard = gui.styled(gui.View, {
   name: "BankCard",
   backgroundColor: bankColors.card,
   borderRadius: 24,
@@ -6812,7 +6875,7 @@ var BankCard = core.styled(core.View, {
     size: "md"
   }
 });
-var BankInput = core.styled(core.Text, {
+var BankInput = gui.styled(gui.Text, {
   name: "BankInput",
   render: "input",
   backgroundColor: bankColors.input,
@@ -6848,7 +6911,7 @@ var BankInput = core.styled(core.Text, {
     size: "md"
   }
 });
-var BankButton = core.styled(core.View, {
+var BankButton = gui.styled(gui.View, {
   name: "BankButton",
   render: "button",
   backgroundColor: bankColors.accent,
@@ -6893,7 +6956,7 @@ var BankButton = core.styled(core.View, {
     variant: "primary"
   }
 });
-var BankButtonText = core.styled(core.Text, {
+var BankButtonText = gui.styled(gui.Text, {
   name: "BankButtonText",
   color: "#000000",
   fontSize: 16,
@@ -6907,7 +6970,7 @@ var BankButtonText = core.styled(core.Text, {
     }
   }
 });
-var BankHeading = core.styled(core.Text, {
+var BankHeading = gui.styled(gui.Text, {
   name: "BankHeading",
   color: bankColors.text,
   fontWeight: "700",
@@ -6924,7 +6987,7 @@ var BankHeading = core.styled(core.Text, {
     size: "lg"
   }
 });
-var BankText = core.styled(core.Text, {
+var BankText = gui.styled(gui.Text, {
   name: "BankText",
   color: bankColors.textMuted,
   fontSize: 16,
@@ -6948,13 +7011,13 @@ function BankField({
   error,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(core.View, { gap: 8, width: "100%", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { gap: 8, width: "100%", children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(BankText, { variant: "label", children: label }),
     children,
     error && /* @__PURE__ */ jsxRuntime.jsx(BankText, { variant: "error", children: error })
   ] });
 }
-var BankAlert = core.styled(core.View, {
+var BankAlert = gui.styled(gui.View, {
   name: "BankAlert",
   borderRadius: 12,
   padding: 16,
@@ -6973,7 +7036,7 @@ var BankAlert = core.styled(core.View, {
     }
   }
 });
-var BankAlertText = core.styled(core.Text, {
+var BankAlertText = gui.styled(gui.Text, {
   name: "BankAlertText",
   fontSize: 14,
   variants: {
@@ -6983,7 +7046,7 @@ var BankAlertText = core.styled(core.Text, {
     }
   }
 });
-var BankPinBox = core.styled(core.Text, {
+var BankPinBox = gui.styled(gui.Text, {
   name: "BankPinBox",
   render: "input",
   backgroundColor: bankColors.input,
@@ -7006,13 +7069,13 @@ var BankPinBox = core.styled(core.Text, {
     }
   }
 });
-var BankDivider = core.styled(core.View, {
+var BankDivider = gui.styled(gui.View, {
   name: "BankDivider",
   height: 1,
   width: "100%",
   backgroundColor: bankColors.divider
 });
-var BankPage = core.styled(core.View, {
+var BankPage = gui.styled(gui.View, {
   name: "BankPage",
   backgroundColor: bankColors.bg,
   minHeight: "100vh",
@@ -7081,6 +7144,7 @@ exports.IconButton = IconButton;
 exports.Image = Image2;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
+exports.LUX_BRAND = LUX_BRAND;
 exports.Link = Link;
 exports.LinkBox = LinkBox;
 exports.LinkExternalIcon = LinkExternalIcon;
@@ -7099,6 +7163,7 @@ exports.MenuTrigger = MenuTrigger;
 exports.MenuTriggerItem = MenuTriggerItem;
 exports.OptionChain = OptionChain;
 exports.OptionPositionCard = OptionPositionCard;
+exports.PARS_GOLD = PARS_GOLD;
 exports.PinInput = PinInput;
 exports.PnlDiagram = PnlDiagram;
 exports.PopoverArrow = PopoverArrow;
@@ -7160,7 +7225,10 @@ exports.Tooltip = Tooltip;
 exports.bankColors = bankColors;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
+exports.config = config;
 exports.createListCollection = createListCollection;
+exports.guiConfig = lux_config_default;
+exports.luxThemes = luxThemes;
 exports.toaster = toaster;
 exports.useAccordion = useAccordion;
 exports.useColorMode = useColorMode;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 export { AppProvider } from './provider.cjs';
 export { cn } from './utils.cjs';
+export { Conf, LUX_BRAND, LuxBrand, PARS_GOLD, default as config, default as guiConfig, luxThemes } from './lux.config.cjs';
 export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, useAccordion } from './accordion.cjs';
 export { Alert, AlertProps } from './alert.cjs';
 export { Avatar, AvatarGroup, AvatarProps } from './avatar.cjs';
@@ -44,13 +45,16 @@ export { PnlDiagram, PnlDiagramProps } from './pnl-diagram.cjs';
 export { OptionPosition, OptionPositionCard, OptionPositionCardProps } from './option-position.cjs';
 export { ExpirationOption, ExpirationSelector, ExpirationSelectorProps } from './expiration-selector.cjs';
 export { BankAlert, BankAlertProps, BankAlertText, BankButton, BankButtonProps, BankButtonText, BankCard, BankCardProps, BankDivider, BankField, BankHeading, BankHeadingProps, BankInput, BankInputProps, BankPage, BankPageProps, BankPinBox, BankPinBoxProps, BankText, BankTextProps, bankColors } from './bank.cjs';
-import 'react/jsx-runtime';
 import '@tanstack/react-query';
 import 'react';
 import 'clsx';
+import '@hanzogui/web';
+import '@hanzogui/themes/v5';
 import '@radix-ui/react-accordion';
 import '@radix-ui/react-checkbox';
+import 'react/jsx-runtime';
+import '@hanzo/gui';
+import '@hanzogui/core';
 import '@radix-ui/react-dialog';
 import '@radix-ui/react-select';
 import '@radix-ui/react-tabs';
-import '@hanzogui/core';