@luxfi/ui 7.3.1 → 7.4.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { AppProvider } from './provider.js';
 export { cn } from './utils.js';
+export { Conf, LUX_BRAND, LuxBrand, PARS_GOLD, default as config, default as guiConfig, luxThemes } from './lux.config.js';
 export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, useAccordion } from './accordion.js';
 export { Alert, AlertProps } from './alert.js';
 export { Avatar, AvatarGroup, AvatarProps } from './avatar.js';
@@ -44,13 +45,16 @@ export { PnlDiagram, PnlDiagramProps } from './pnl-diagram.js';
 export { OptionPosition, OptionPositionCard, OptionPositionCardProps } from './option-position.js';
 export { ExpirationOption, ExpirationSelector, ExpirationSelectorProps } from './expiration-selector.js';
 export { BankAlert, BankAlertProps, BankAlertText, BankButton, BankButtonProps, BankButtonText, BankCard, BankCardProps, BankDivider, BankField, BankHeading, BankHeadingProps, BankInput, BankInputProps, BankPage, BankPageProps, BankPinBox, BankPinBoxProps, BankText, BankTextProps, bankColors } from './bank.js';
-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';

package/dist/index.js

@@ -1,24 +1,22 @@
 "use client";
-import { styled, View, Text, createGui } from '@hanzogui/core';
+import { createGui, styled, View, TooltipGroup, Tooltip as Tooltip$1, Dialog, Popover, Text, GuiProvider } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React30 from 'react';
 import React30__default from 'react';
+import { defaultConfig } from '@hanzogui/config/v5';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway, useDebounce } from '@uidotdev/usehooks';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { Dialog } from '@hanzogui/dialog';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { debounce, throttle } from 'es-toolkit';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { LuCheck, LuChevronRight } from 'react-icons/lu';
-import { Popover } from '@hanzogui/popover';
 import * as RadixProgress from '@radix-ui/react-progress';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
@@ -28,21 +26,70 @@ import * as RadixTabs from '@radix-ui/react-tabs';
 import { toast, Toaster as Toaster$1 } from 'sonner';
 
 // src/provider.tsx
-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 }) => {
-  React30__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__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__ */ 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 }) });
 };
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -2819,13 +2866,21 @@ var INPUT_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
 var Input = React30__default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React30__default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }
@@ -3972,8 +4027,8 @@ var Rating = React30.forwardRef(
     ] });
   }
 );
-function createListCollection(config) {
-  return { items: config.items };
+function createListCollection(config2) {
+  return { items: config2.items };
 }
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -5367,13 +5422,21 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React30__default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React30__default.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
       }
     );
   }
@@ -6987,4 +7050,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, createListCollection, toaster, useAccordion, useColorMode, useColorModeValue };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, config, createListCollection, lux_config_default as guiConfig, luxThemes, toaster, useAccordion, useColorMode, useColorModeValue };

package/dist/input.cjs

@@ -38,13 +38,21 @@ var INPUT_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
 var Input = 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(
       "input",
       {
         ref,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }

package/dist/input.d.cts

@@ -5,6 +5,14 @@ type InputVariant = 'outline' | 'filled' | 'unstyled';
 interface InputProps extends Omit<React__default.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;
 }
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 

package/dist/input.d.ts

@@ -5,6 +5,14 @@ type InputVariant = 'outline' | 'filled' | 'unstyled';
 interface InputProps extends Omit<React__default.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;
 }
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 

package/dist/input.js

@@ -32,13 +32,21 @@ var INPUT_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
 var Input = 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(
       "input",
       {
         ref,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }

package/dist/lux.config.cjs

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var gui = require('@hanzo/gui');
+var v5 = require('@hanzogui/config/v5');
+
+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;
+
+exports.LUX_BRAND = LUX_BRAND;
+exports.PARS_GOLD = PARS_GOLD;
+exports.config = config;
+exports.default = lux_config_default;
+exports.luxThemes = luxThemes;