@luxfi/ui 7.4.14 → 8.0.0

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.d.ts

@@ -1,13 +1,12 @@
-import React__default from 'react';
-
+import React from 'react';
 type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
 type TextareaVariant = 'outline' | 'filled' | 'unstyled';
-interface TextareaProps extends Omit<React__default.ComponentPropsWithRef<'textarea'>, 'size'> {
+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;
 }
-declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
-
-export { Textarea, type TextareaProps };
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=textarea.d.ts.map

package/dist/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../src/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACtD,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC1F,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC;IAEnC,oFAAoF;IACpF,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAWD,eAAO,MAAM,QAAQ,wGAuBpB,CAAC"}

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/dist/toaster.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 type ToastType = 'info' | 'warning' | 'success' | 'error' | 'loading';
 interface ToastOptions {
     readonly id?: string | number;
@@ -15,7 +14,7 @@ interface ToastOptions {
         readonly status: string;
     }) => void;
 }
-declare const toaster: {
+export declare const toaster: {
     readonly create: (opts: ToastOptions) => string | number;
     readonly success: (opts: ToastOptions) => string | number;
     readonly error: (opts: ToastOptions) => string | number;
@@ -23,6 +22,6 @@ declare const toaster: {
     readonly update: (id: string | number, opts: ToastOptions) => void;
     readonly remove: (id: string | number) => void;
 };
-declare const Toaster: React.FC;
-
-export { Toaster, toaster };
+export declare const Toaster: React.FC;
+export {};
+//# sourceMappingURL=toaster.d.ts.map

package/dist/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC3E,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E;AA0CD,eAAO,MAAM,OAAO;4BAbE,YAAY,KAAG,MAAM,GAAG,MAAM;6BAelC,YAAY;2BACd,YAAY;6BACV,YAAY;0BATV,MAAM,GAAG,MAAM,QAAQ,YAAY,KAAG,IAAI;0BAf1C,MAAM,GAAG,MAAM,KAAG,IAAI;CA2BhC,CAAC;AA2DX,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAW3B,CAAC"}

package/dist/tooltip.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-interface TooltipProps {
+export interface TooltipProps {
     selected?: boolean;
     showArrow?: boolean;
     portalled?: boolean;
@@ -33,6 +32,5 @@ interface TooltipProps {
     closeOnClick?: boolean;
     closeOnPointerDown?: boolean;
 }
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
-
-export { Tooltip, type TooltipProps };
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC;QACpK,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE;YAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;YAAC,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KACpD,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,qFAuJnB,CAAC"}

package/dist/use-narrow.d.ts

@@ -1,12 +1,11 @@
 /** Below this the UI is a phone: menus become sheets, drawers drag. */
-declare const NARROW_PX = 640;
+export declare const NARROW_PX = 640;
 /** Below this the pointer is a finger: hover-only affordances are suppressed. */
-declare const TOUCH_PX = 1024;
+export declare const TOUCH_PX = 1024;
 /** True while the viewport is narrower than `px`. */
-declare function useBelow(px: number): boolean;
+export declare function useBelow(px: number): boolean;
 /** Phone-sized: present menus as sheets. */
-declare const useIsNarrow: () => boolean;
+export declare const useIsNarrow: () => boolean;
 /** Touch-sized: no hover, so hover-only affordances must not be the only path. */
-declare const useIsTouch: () => boolean;
-
-export { NARROW_PX, TOUCH_PX, useBelow, useIsNarrow, useIsTouch };
+export declare const useIsTouch: () => boolean;
+//# sourceMappingURL=use-narrow.d.ts.map

package/dist/use-narrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-narrow.d.ts","sourceRoot":"","sources":["../src/use-narrow.ts"],"names":[],"mappings":"AAgBA,uEAAuE;AACvE,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,iFAAiF;AACjF,eAAO,MAAM,QAAQ,OAAO,CAAC;AAE7B,qDAAqD;AACrD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAU5C;AAED,4CAA4C;AAC5C,eAAO,MAAM,WAAW,QAAO,OAA8B,CAAC;AAE9D,kFAAkF;AAClF,eAAO,MAAM,UAAU,QAAO,OAA6B,CAAC"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export { cn, type ClassValue } from '@hanzo/ui';
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/utils.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
+var ui = require('@hanzo/ui');
 
-// src/utils.ts
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 
-exports.cn = cn;
+
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return ui.cn; }
+});

package/dist/utils.d.ts

@@ -1,5 +1,13 @@
-import { ClassValue } from 'clsx';
-
-declare function cn(...inputs: ClassValue[]): string;
-
-export { cn };
+/**
+ * `cn` — re-exported from @hanzo/ui, which is where the one implementation now
+ * lives.
+ *
+ * There were two of them in this package (here and utils/cn.ts), both calling
+ * `twMerge(clsx(...))`. twMerge exists to resolve conflicts BETWEEN Tailwind
+ * utilities, and there are none left to resolve: this package renders through
+ * @hanzo/gui style props, and a class name here is only a stable handle a host
+ * may select on. So it was resolving conflicts in a vocabulary nothing writes,
+ * at the cost of two dependencies.
+ */
+export { cn, type ClassValue } from '@hanzo/ui';
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/utils.js

@@ -1,9 +1 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-// src/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-export { cn };
+export { cn } from '@hanzo/ui';

package/dist/vite.d.ts

@@ -24,6 +24,6 @@ interface LuxUiVitePlugin {
         };
     };
 }
-declare function luxUi(options?: LuxUiViteOptions): LuxUiVitePlugin;
-
-export { type LuxUiViteOptions, luxUi };
+export declare function luxUi(options?: LuxUiViteOptions): LuxUiVitePlugin;
+export type { LuxUiViteOptions };
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAkBA,UAAU,gBAAgB;IACxB;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC1C;AAED,iFAAiF;AACjF,UAAU,eAAe;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM;QACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC;QAClE,YAAY,EAAE;YAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC;KAC1C,CAAC;CACH;AAiBD,wBAAgB,KAAK,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAgBrE;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/white-label.d.ts

@@ -1,14 +1,14 @@
-declare const LUX_BRAND: {
+export declare const LUX_BRAND: {
     readonly lux: "#7000FF";
     readonly zoo: "#6C5EFB";
     readonly hanzo: "#EA580C";
     readonly pars: "#1C3879";
     readonly bootnode: "#3B82F6";
 };
-declare const PARS_GOLD = "#C8A45C";
-type LuxBrand = keyof typeof LUX_BRAND;
-type Org = LuxBrand;
-interface OrgIdentity {
+export declare const PARS_GOLD = "#C8A45C";
+export type LuxBrand = keyof typeof LUX_BRAND;
+export type Org = LuxBrand;
+export interface OrgIdentity {
     /** Org id — also the gui child-theme suffix (`dark_lux`, `dark_zoo`, …). */
     readonly org: Org;
     /** Display name for chrome (header, title, sign-in copy). */
@@ -23,8 +23,8 @@ interface OrgIdentity {
     readonly accentForeground: string;
 }
 declare const ORGS: Readonly<Record<Org, OrgIdentity>>;
-declare const DEFAULT_ORG: Org;
-interface WhiteLabel extends OrgIdentity {
+export declare const DEFAULT_ORG: Org;
+export interface WhiteLabel extends OrgIdentity {
     /** Hostname the identity was resolved from, port stripped, lowercased. */
     readonly host: string;
     /** App slug taken from the hostname — `mpc.lux.cloud` → `mpc`. */
@@ -46,14 +46,14 @@ interface WhiteLabel extends OrgIdentity {
  *   resolveWhiteLabel('zoo.cloud')       // org zoo,  clientId zoo-cloud, issuer https://zoolabs.id
  *   resolveWhiteLabel('cloud.pars.network') // org pars, clientId pars-app, issuer https://pars.id
  */
-declare function resolveWhiteLabel(host?: string | null): WhiteLabel;
+export declare function resolveWhiteLabel(host?: string | null): WhiteLabel;
 /**
  * The current host in a browser, or '' during SSR / prerender.
  * Server code must pass `req.headers.host` to resolveWhiteLabel explicitly —
  * there is no ambient request here, and guessing would bake in a brand.
  */
-declare function currentHost(): string;
+export declare function currentHost(): string;
 /** Identity for the org id itself, for the rare surface that is not host-routed. */
-declare function orgIdentity(org: Org): OrgIdentity;
-
-export { DEFAULT_ORG, LUX_BRAND, type LuxBrand, type Org, type OrgIdentity, PARS_GOLD, type WhiteLabel, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };
+export declare function orgIdentity(org: Org): OrgIdentity;
+export { ORGS as orgs };
+//# sourceMappingURL=white-label.d.ts.map

package/dist/white-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"white-label.d.ts","sourceRoot":"","sources":["../src/white-label.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS;;;;;;CAQZ,CAAC;AAEX,eAAO,MAAM,SAAS,YAAY,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,MAAM,MAAM,GAAG,GAAG,QAAQ,CAAC;AAE3B,MAAM,WAAW,WAAW;IAC1B,4EAA4E;IAC5E,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACnC;AAGD,QAAA,MAAM,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAmD5C,CAAC;AAkCF,eAAO,MAAM,WAAW,EAAE,GAAW,CAAC;AAEtC,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,UAAU,CAclE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,WAAW,CAEjD;AAED,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.14",
+  "version": "8.0.0",
   "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -296,30 +296,24 @@
       "types": "./dist/*.d.ts"
     }
   },
-  "scripts": {
-    "build": "tsup",
-    "build:check": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "dev": "tsup --watch",
-    "harness": "vite --config harness/vite.config.ts",
-    "test": "playwright test"
-  },
   "dependencies": {
+    "@hanzogui/config": "^8.1.1",
     "@uidotdev/usehooks": "^2.4.1",
-    "clsx": "^2.1.1",
     "es-toolkit": "^1.31.0",
     "lucide-react": "^1.27.0",
-    "tailwind-merge": "^3.0.0"
+    "@hanzo/ui": "^8.7.5"
   },
   "peerDependencies": {
-    "@hanzo/gui": "^7.3.0",
+    "@hanzo/appearance": "^0.1.4",
+    "@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.7.5",
+    "@hanzogui/colors": "^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 +339,16 @@
     }
   },
   "devDependencies": {
-    "@hanzo/gui": "7.3.0",
+    "@hanzo/appearance": "0.1.4",
+    "@hanzo/design": "^0.5.21",
+    "@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.3.3",
+    "@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",
@@ -363,6 +360,15 @@
     "tailwindcss": "^4",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
-    "vite": "^8"
+    "vite": "^8",
+    "@types/node": "^22.10.6"
+  },
+  "scripts": {
+    "build": "tsup --no-dts && tsc -p tsconfig.json --noEmit false --emitDeclarationOnly --declaration --outDir dist",
+    "build:check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch",
+    "harness": "vite --config harness/vite.config.ts",
+    "test": "playwright test"
   }
-}
+}

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/pin-input.tsx

@@ -39,7 +39,7 @@ const BOX = {
   hoverStyle: { borderColor: 'var(--color-input-border-hover)' as never },
   focusStyle: {
     borderColor: 'var(--color-input-border-focus)' as never,
-    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    boxShadow: 'var(--shadow-md)',
   },
   disabledStyle: { opacity: 0.4 },
 };

package/src/slider.tsx

@@ -119,7 +119,7 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
               borderWidth={ 2 }
               borderColor={ ACTIVE }
               backgroundColor={ WHITE }
-              boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
+              boxShadow="var(--shadow-sm)"
               transition="quick"
               hoverStyle={{ borderColor: ACTIVE_HOVER }}
               focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: ACTIVE, outlineOffset: 2 }}

package/src/switch.tsx

@@ -123,7 +123,7 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
             height={ s.thumb }
             borderRadius={ 9999 }
             backgroundColor={ WHITE }
-            boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
+            boxShadow="var(--shadow-sm)"
           >
             { thumbLabel && (
               <Text width="100%" height="100%" textAlign="center" fontSize={ 8 }>

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>(

package/src/utils/cn.ts

@@ -1,7 +1,3 @@
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: Array<ClassValue>): string {
-  return twMerge(clsx(inputs));
-}
+// The one `cn` lives in @hanzo/ui; ../utils re-exports it. This path is kept
+// because call sites import it, and it must not become a second copy.
+export { cn, type ClassValue } from '@hanzo/ui'

package/src/utils.ts

@@ -1,6 +1,12 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
+/**
+ * `cn` — re-exported from @hanzo/ui, which is where the one implementation now
+ * lives.
+ *
+ * There were two of them in this package (here and utils/cn.ts), both calling
+ * `twMerge(clsx(...))`. twMerge exists to resolve conflicts BETWEEN Tailwind
+ * utilities, and there are none left to resolve: this package renders through
+ * @hanzo/gui style props, and a class name here is only a stable handle a host
+ * may select on. So it was resolving conflicts in a vocabulary nothing writes,
+ * at the cost of two dependencies.
+ */
+export { cn, type ClassValue } from '@hanzo/ui'

package/tokens.css

@@ -427,6 +427,12 @@
   --chakra-colors-whiteAlpha-100: var(--color-whiteAlpha-100);
 
   /* --- Shadows --- */
+  /* The two elevation steps small controls need — a switch thumb, a slider
+     handle, a focused pin cell. They were inlined at their LIGHT values in
+     three components, so those rendered a barely-visible black shadow on a
+     black canvas. A shadow is a theme value like any colour. */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
   --shadow-popover: 0px 15px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-drawer: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
@@ -692,6 +698,11 @@
   --color-graph-line: var(--lux-paper-48);
   --color-graph-gradient-start: rgba(255, 255, 255, 0.15);
   --color-graph-gradient-stop: rgba(255, 255, 255, 0);
+  /* On a dark canvas a 5%-black shadow is invisible, so the small steps carry
+     a hairline rim as well as depth — the rim is what actually separates a
+     control from the surface behind it. */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
   --shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
   /* --- Skeleton --- */