@luxfi/ui 7.4.13 → 7.4.15

package/dist/lux.config.js

@@ -1,5 +1,6 @@
 "use client";
 import { createGui } from '@hanzo/gui';
+import { config as config$1 } from '@hanzo/ui/gui-config';
 import { defaultConfig } from '@hanzogui/config/v5';
 import { animations } from '@hanzogui/config/v5-css';
 
@@ -54,6 +55,7 @@ var luxThemes = {
 };
 var config = createGui({
   ...defaultConfig,
+  ...config$1,
   animations,
   settings: {
     ...defaultConfig.settings,

package/dist/option-position.cjs

@@ -153,8 +153,16 @@ function ActionButton({ onClick, children }) {
       paddingVertical: 4,
       backgroundColor: "var(--color-button-subtle-bg)",
       cursor: "pointer",
-      hoverStyle: { color: "var(--color-hover)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "500", color: "var(--color-button-subtle-fg)", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Text,
+        {
+          fontSize: 12,
+          fontWeight: "500",
+          color: "var(--color-button-subtle-fg)",
+          hoverStyle: { color: "var(--color-hover)" },
+          children
+        }
+      )
     }
   );
 }

package/dist/option-position.js

@@ -131,8 +131,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
+        }
+      )
     }
   );
 }

package/dist/provider.cjs

@@ -4,6 +4,7 @@
 var gui = require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
 var React = require('react');
+var guiConfig = require('@hanzo/ui/gui-config');
 var v5 = require('@hanzogui/config/v5');
 var v5Css = require('@hanzogui/config/v5-css');
 var jsxRuntime = require('react/jsx-runtime');
@@ -169,6 +170,7 @@ var luxThemes = {
 };
 var config = gui.createGui({
   ...v5.defaultConfig,
+  ...guiConfig.config,
   animations: v5Css.animations,
   settings: {
     ...v5.defaultConfig.settings,

package/dist/provider.js

@@ -3,6 +3,7 @@ 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 { config as config$1 } from '@hanzo/ui/gui-config';
 import { defaultConfig } from '@hanzogui/config/v5';
 import { animations } from '@hanzogui/config/v5-css';
 import { jsx } from 'react/jsx-runtime';
@@ -164,6 +165,7 @@ var luxThemes = {
 };
 var config = createGui({
   ...defaultConfig,
+  ...config$1,
   animations,
   settings: {
     ...defaultConfig.settings,

package/dist/textarea.cjs

@@ -11,11 +11,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/textarea.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" },
@@ -58,11 +58,11 @@ var Input = React__default.default.forwardRef(
 );
 Input.displayName = "Input";
 var SIZE2 = {
-  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 = React__default.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {

package/dist/textarea.js

@@ -5,11 +5,11 @@ import { jsx } from 'react/jsx-runtime';
 
 // src/textarea.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" },
@@ -52,11 +52,11 @@ var Input = React.forwardRef(
 );
 Input.displayName = "Input";
 var SIZE2 = {
-  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 = React.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.13",
+  "version": "7.4.15",
   "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -312,14 +312,16 @@
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "@hanzo/gui": "^7.3.0",
+    "@hanzo/design": "^0.5.1",
+    "@hanzo/gui": "^8.1.1",
     "@hanzo/iam": "^0.13.8",
-    "@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/web": "^7.3.0",
+    "@hanzo/ui": "^8.0.70",
+    "@hanzogui/colors": "^8.1.1",
+    "@hanzogui/config": "^8.1.1",
+    "@hanzogui/core": "^8.1.1",
+    "@hanzogui/lucide-icons-2": "^8.1.1",
+    "@hanzogui/themes": "^8.1.1",
+    "@hanzogui/web": "^8.1.1",
     "@tanstack/react-query": "^5.76.0",
     "react": ">=19",
     "react-dom": ">=19"
@@ -345,13 +347,15 @@
     }
   },
   "devDependencies": {
-    "@hanzo/gui": "7.3.0",
+    "@hanzo/design": "0.5.1",
+    "@hanzo/gui": "8.1.1",
     "@hanzo/iam": "^0.13.8",
-    "@hanzogui/colors": "7.3.0",
-    "@hanzogui/config": "7.3.0",
-    "@hanzogui/core": "7.3.0",
-    "@hanzogui/themes": "7.3.0",
-    "@hanzogui/web": "7.3.0",
+    "@hanzo/ui": "8.0.70",
+    "@hanzogui/colors": "8.1.1",
+    "@hanzogui/config": "8.1.1",
+    "@hanzogui/core": "8.1.1",
+    "@hanzogui/themes": "8.1.1",
+    "@hanzogui/web": "8.1.1",
     "@playwright/test": "^1.58",
     "@tailwindcss/vite": "^4",
     "@types/react": "^19.0.0",

package/src/button.tsx

@@ -369,24 +369,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
-// ---------------------------------------------------------------------------
-// buttonVariants — compatibility shim for consumers that call buttonVariants()
-// Returns the className string for a given variant + size combo.
-// ---------------------------------------------------------------------------
-
-const SIZE_CLASSES: Record<string, string> = {
-  '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',
-};
-
-export function buttonVariants(opts?: { variant?: string; size?: string }): string {
-  const v = opts?.variant ?? 'solid';
-  const s = opts?.size ?? 'md';
-  return [BASE_CLASSES, VARIANT_CLASSES[v] ?? '', SIZE_CLASSES[s] ?? ''].filter(Boolean).join(' ');
-}
-
 // ---------------------------------------------------------------------------
 // ButtonGroup
 // ---------------------------------------------------------------------------

package/src/heading.tsx

@@ -21,9 +21,18 @@ export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
 const TAG = { '1': H1, '2': H2, '3': H3 } as const;
 
 const 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' } },
 } as const;
 
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(

package/src/index.ts

@@ -71,7 +71,6 @@ export {
   Button,
   ButtonGroup,
   ButtonGroupRadio,
-  buttonVariants,
 } from './button';
 export type { ButtonProps, ButtonGroupProps, ButtonGroupRadioProps } from './button';
 

package/src/input.tsx

@@ -26,12 +26,12 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, '
   readonly onChangeText?: (text: string) => void;
 }
 
-export const SIZE: Record<InputSize, Record<string, number>> = {
-  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 },
+export const SIZE: Record<InputSize, Record<string, unknown>> = {
+  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 },
 };
 
 export const VARIANT: Record<InputVariant, Record<string, unknown>> = {

package/src/lux.config.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { createGui } from '@hanzo/gui';
+import { config as hanzoConfig } from '@hanzo/ui/gui-config';
 import { defaultConfig } from '@hanzogui/config/v5';
 import { animations } from '@hanzogui/config/v5-css';
 
@@ -60,8 +61,26 @@ export const luxThemes = {
 // the motion — one wiring for the whole fleet, not one per app.
 // Native surfaces can swap `@hanzogui/config/v5-css` for `/v5-rn` without
 // touching a component: the transition token names are identical.
+// The type ramp comes from @hanzo/ui's shared config, not from v5's literals.
+//
+// That config publishes gui's `$n` font ladder as `var(--text-*, <px>)` rather
+// than as numbers, and @hanzo/design's ramp multiplies `--text-*` by
+// `--type-scale` — the knob @hanzo/appearance writes onto <html>. gui resolves
+// a size in JS and applies it INLINE, and an inline style outranks every
+// stylesheet, so a custom property is the only thing that can reach a
+// `fontSize="$n"` call site at all. Taking v5's ladder instead would render
+// identically today and be frozen forever: a person's type-size setting would
+// have nothing to move.
+//
+// The px literal survives as each var()'s fallback, so a Lux surface that
+// mounts no token layer still renders at the intended size.
+//
+// Only TYPE is on that ramp upstream — `space` and `radius` arrive as numbers,
+// so density is not adjustable yet. That is a gap in the shared config, not
+// something to paper over here with a private scale.
 export const config = createGui({
   ...defaultConfig,
+  ...hanzoConfig,
   animations,
   settings: {
     ...defaultConfig.settings,

package/src/textarea.tsx

@@ -19,12 +19,12 @@ export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textare
 }
 
 /** Same ramp as Input, but a textarea is sized by padding, not by height. */
-const SIZE: Record<TextareaSize, Record<string, number>> = {
-  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 },
+const SIZE: Record<TextareaSize, Record<string, unknown>> = {
+  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 },
 };
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(