@luxfi/ui 7.4.13 → 7.4.15

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoo
 export { Alert, AlertProps } from './alert.js';
 export { Avatar, AvatarGroup, AvatarProps } from './avatar.js';
 export { Badge, BadgeProps } from './badge.js';
-export { Button, ButtonGroup, ButtonGroupProps, ButtonGroupRadio, ButtonGroupRadioProps, ButtonProps, buttonVariants } from './button.js';
+export { Button, ButtonGroup, ButtonGroupProps, ButtonGroupRadio, ButtonGroupRadioProps, ButtonProps } from './button.js';
 export { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from './checkbox.js';
 export { CloseButton, CloseButtonProps } from './close-button.js';
 export { CollapsibleDetails, CollapsibleList } from './collapsible.js';
@@ -54,7 +54,7 @@ import '@tanstack/react-query';
 import 'react';
 import 'clsx';
 import '@hanzogui/web';
-import '@hanzogui/themes/v5';
+import '@hanzogui/config/v5';
 import '@hanzo/gui';
 import 'react/jsx-runtime';
 import '@hanzogui/core';

package/dist/index.js

@@ -3,6 +3,7 @@ import { createGui, styled, View, Sheet, Dialog, XStack, YStack, Text, Avatar as
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React32 from 'react';
 import React32__default, { Children, createElement } from 'react';
+import { config as config$1 } from '@hanzo/ui/gui-config';
 import { defaultConfig } from '@hanzogui/config/v5';
 import { animations } from '@hanzogui/config/v5-css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -174,6 +175,7 @@ var luxThemes = {
 };
 var config = createGui({
   ...defaultConfig,
+  ...config$1,
   animations,
   settings: {
     ...defaultConfig.settings,
@@ -2222,17 +2224,6 @@ var Button = React32.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES = {
-  "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
-  xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
-  sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
-  md: "px-3 h-10 min-w-10 text-base rounded-md gap-2"
-};
-function buttonVariants(opts) {
-  const v = opts?.variant ?? "solid";
-  const s = opts?.size ?? "md";
-  return [BASE_CLASSES, VARIANT_CLASSES[v] ?? "", SIZE_CLASSES[s] ?? ""].filter(Boolean).join(" ");
-}
 var ButtonGroup = React32.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
@@ -3258,9 +3249,18 @@ var Field = React32.forwardRef(
 );
 var TAG = { "1": H1, "2": H2, "3": H3 };
 var RAMP = {
-  "1": { fontSize: 18, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
-  "2": { fontSize: 16, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 24, lineHeight: 32 } },
-  "3": { fontSize: 14, lineHeight: 20, fontWeight: "600", $lg: { fontSize: 18, lineHeight: 24, fontWeight: "500" } }
+  // Tokens, not numbers. `$n` publishes as `var(--text-*, <px>)` through the
+  // shared config, and @hanzo/design multiplies `--text-*` by `--type-scale` —
+  // so these three lines are what lets a person's type-size setting reach a
+  // heading at all. Written as `18` they would render identically today and
+  // never move again.
+  //
+  // lineHeight is deliberately absent: gui derives it from the resolved size,
+  // so it scales WITH the text. A fixed 24 next to an adjustable size is how
+  // you get 32px text in a 24px box.
+  "1": { fontSize: "$6", $lg: { fontSize: "$10", letterSpacing: -0.5 } },
+  "2": { fontSize: "$5", $lg: { fontSize: "$8" } },
+  "3": { fontSize: "$3", fontWeight: "600", $lg: { fontSize: "$6", fontWeight: "500" } }
 };
 var Heading = React32__default.forwardRef(
   function Heading2({ level, ...rest }, ref) {
@@ -3628,11 +3628,11 @@ var Image = React32__default.forwardRef(
   }
 );
 var SIZE5 = {
-  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
-  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
-  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
-  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
-  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
+  xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
 };
 var VARIANT3 = {
   outline: { borderWidth: 1, borderStyle: "solid" },
@@ -5859,11 +5859,11 @@ var Tag = React32.forwardRef(
   }
 );
 var SIZE10 = {
-  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
-  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
-  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
-  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
-  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 }
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: "$1", borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: "$3", borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: "$5", borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$6", borderRadius: 8 },
+  "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$7", borderRadius: 8 }
 };
 var Textarea = React32__default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -7263,8 +7263,16 @@ function ActionButton({ onClick, children }) {
       paddingVertical: 4,
       backgroundColor: "var(--color-button-subtle-bg)",
       cursor: "pointer",
-      hoverStyle: { color: "var(--color-hover)" },
-      children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: "var(--color-button-subtle-fg)", children })
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: 12,
+          fontWeight: "500",
+          color: "var(--color-button-subtle-fg)",
+          hoverStyle: { color: "var(--color-hover)" },
+          children
+        }
+      )
     }
   );
 }
@@ -7287,18 +7295,17 @@ var GROUP_LABELS = {
 var SHAPE = {
   selected: {
     borderColor: "transparent",
-    backgroundColor: "var(--color-selected-control-bg)",
-    color: "var(--color-selected-control-text)"
+    backgroundColor: "var(--color-selected-control-bg)"
   },
   resting: {
     borderColor: "var(--color-border-divider)",
     backgroundColor: "var(--card)",
-    color: "var(--color-text-secondary)",
-    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+    hoverStyle: { borderColor: "var(--color-hover)" }
   }
 };
 function ExpirationPill({ exp, isSelected, onClick }) {
   const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dateColor = isSelected ? "var(--color-selected-control-text)" : "var(--color-text-secondary)";
   const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxs(
     YStack,
@@ -7317,7 +7324,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
       cursor: "pointer",
       ...shape,
       children: [
-        /* @__PURE__ */ jsx(Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, color: dateColor, children: formatExpDate(exp.date) }),
         /* @__PURE__ */ jsxs(
           Text,
           {
@@ -7632,4 +7639,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, 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, DEFAULT_ORG, 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, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, LoadingBar, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup2 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, 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, DEFAULT_ORG, 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, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, LoadingBar, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup2 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };

package/dist/input.cjs

@@ -11,11 +11,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/input.tsx
 var SIZE = {
-  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
-  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
-  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
-  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
-  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
+  xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
 };
 var VARIANT = {
   outline: { borderWidth: 1, borderStyle: "solid" },

package/dist/input.d.cts

@@ -12,7 +12,7 @@ interface InputProps extends Omit<React__default.ComponentPropsWithRef<'input'>,
      */
     readonly onChangeText?: (text: string) => void;
 }
-declare const SIZE: Record<InputSize, Record<string, number>>;
+declare const SIZE: Record<InputSize, Record<string, unknown>>;
 declare const VARIANT: Record<InputVariant, Record<string, unknown>>;
 /** The frame every text control shares. */
 declare const CONTROL: {

package/dist/input.d.ts

@@ -12,7 +12,7 @@ interface InputProps extends Omit<React__default.ComponentPropsWithRef<'input'>,
      */
     readonly onChangeText?: (text: string) => void;
 }
-declare const SIZE: Record<InputSize, Record<string, number>>;
+declare const SIZE: Record<InputSize, Record<string, unknown>>;
 declare const VARIANT: Record<InputVariant, Record<string, unknown>>;
 /** The frame every text control shares. */
 declare const CONTROL: {

package/dist/input.js

@@ -5,11 +5,11 @@ import { jsx } from 'react/jsx-runtime';
 
 // src/input.tsx
 var SIZE = {
-  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
-  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
-  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
-  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
-  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
+  xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
 };
 var VARIANT = {
   outline: { borderWidth: 1, borderStyle: "solid" },

package/dist/lux.config.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var gui = require('@hanzo/gui');
+var guiConfig = require('@hanzo/ui/gui-config');
 var v5 = require('@hanzogui/config/v5');
 var v5Css = require('@hanzogui/config/v5-css');
 
@@ -58,6 +59,7 @@ var luxThemes = {
 };
 var config = gui.createGui({
   ...v5.defaultConfig,
+  ...guiConfig.config,
   animations: v5Css.animations,
   settings: {
     ...v5.defaultConfig.settings,