@luxfi/ui 7.4.11 → 7.4.13

package/src/pin-input.tsx

@@ -1,7 +1,6 @@
+import { Input as GuiInput, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 export interface PinInputProps {
   readonly rootRef?: React.Ref<HTMLDivElement>;
   readonly count?: number;
@@ -19,21 +18,31 @@ export interface PinInputProps {
   readonly className?: string;
 }
 
-const INPUT_BASE = [
-  'w-10 h-10',
-  'text-center text-sm font-medium',
-  'border-2 rounded-md',
-  'outline-none appearance-none',
-  'bg-[var(--color-input-bg)] text-[var(--color-input-fg)]',
-  'border-[var(--color-input-border)]',
-  'placeholder:text-[var(--color-input-placeholder)]',
-  'hover:border-[var(--color-input-border-hover)]',
-  'focus:border-[var(--color-input-border-focus)] focus:shadow-md',
-  'disabled:opacity-40',
-].join(' ');
-
-const INPUT_FILLED = 'border-[var(--color-input-border)]';
-const INPUT_INVALID = 'border-[var(--color-border-error)] hover:border-[var(--color-border-error)]';
+// One box's frame. Colour and focus/hover/disabled states are the same
+// `--color-input-*` tokens `Input` itself uses — a pin box is a text control,
+// just a square one. `::placeholder` and the invalid border are the existing
+// `.lux-control` rule in tokens.css (a pseudo-element and a selector, neither
+// of which a prop reaches); `data-invalid` is what wires this box into it.
+const BOX = {
+  width: 40,
+  height: 40,
+  textAlign: 'center' as const,
+  fontSize: 14,
+  fontWeight: 500 as const,
+  borderRadius: 6,
+  borderWidth: 2,
+  borderStyle: 'solid' as const,
+  outlineWidth: 0,
+  backgroundColor: 'var(--color-input-bg)' as never,
+  color: 'var(--color-input-fg)' as never,
+  borderColor: 'var(--color-input-border)' as never,
+  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)',
+  },
+  disabledStyle: { opacity: 0.4 },
+};
 
 export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
   function PinInput(props, ref) {
@@ -142,10 +151,10 @@ export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
       handleKeyDown(index, e);
     }, [ handleKeyDown ]);
 
-    const bgStyle = bgColor ? { backgroundColor: `var(--color-${ bgColor.replace(/\./g, '-') })` } : undefined;
+    const boxBackground = bgColor ? `var(--color-${ bgColor.replace(/\./g, '-') })` as never : BOX.backgroundColor;
 
     return (
-      <div ref={ rootRef } className={ cn('inline-flex items-center', attached ? 'gap-0' : 'gap-2', className) }>
+      <XStack ref={ rootRef as never } alignItems="center" gap={ attached ? 0 : 8 } className={ className }>
         { /* Hidden input for form submission */ }
         <input
           ref={ ref }
@@ -155,9 +164,10 @@ export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
           { ...inputProps }
         />
         { Array.from({ length: count }).map((_, index) => (
-          <input
+          <GuiInput
             key={ index }
-            ref={ setInputRef(index) }
+            ref={ setInputRef(index) as never }
+            unstyled
             type="text"
             inputMode="numeric"
             autoComplete={ otp ? 'one-time-code' : 'off' }
@@ -166,14 +176,12 @@ export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
             placeholder={ placeholder }
             disabled={ disabled }
             aria-invalid={ invalid || undefined }
+            data-invalid={ invalid || undefined }
             value={ values[index] || '' }
-            className={ cn(
-              INPUT_BASE,
-              values[index] && INPUT_FILLED,
-              invalid && INPUT_INVALID,
-              attached && index > 0 && '-ml-0.5',
-            ) }
-            style={ bgStyle }
+            className="lux-control"
+            { ...BOX }
+            backgroundColor={ boxBackground }
+            marginLeft={ attached && index > 0 ? -2 : undefined }
             onInput={ onInputAtIndex(index) }
             onKeyDown={ onKeyDownAtIndex(index) }
             onPaste={ handlePaste }
@@ -181,7 +189,7 @@ export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
             onChange={ handleNoop }
           />
         )) }
-      </div>
+      </XStack>
     );
   },
 );

package/src/pnl-diagram.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 import type { StrategyLeg } from './strategy-builder';
 
 // ---------------------------------------------------------------------------
@@ -207,17 +206,24 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
     );
 
     return (
-      <div
-        ref={ref}
-        className={cn('w-full', className)}
-        {...rest}
+      <View
+        ref={ref as never}
+        unstyled
+        width="100%"
+        className={className}
+        {...(rest as object)}
       >
-        <div ref={containerRef} className="w-full h-full min-h-[200px]">
+        <View unstyled ref={containerRef as never} width="100%" height="100%" minHeight={200}>
+          {/* This <svg> and everything inside it is the chart itself — left exactly as
+              it was: every fill/stroke/d/viewBox below is an SVG presentation attribute,
+              not Tailwind, and out of scope for a className→prop conversion. The one
+              change is `select-none`, a real Tailwind utility (not a presentation
+              attribute), moved to an equivalent inline style with no visual effect. */}
           <svg
             width={width}
             height={height}
             viewBox={`0 0 ${width} ${height}`}
-            className="select-none"
+            style={{ userSelect: 'none' }}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
           >
@@ -425,39 +431,41 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
               );
             })}
           </svg>
-        </div>
+        </View>
 
         {/* Legend */}
-        <div className="flex flex-wrap items-center gap-4 px-2 pt-1">
-          <div className="flex items-center gap-1.5">
-            <div className="h-0.5 w-4 bg-zinc-200 rounded" />
-            <span className="text-[10px] text-zinc-400">Combined</span>
-          </div>
+        <XStack flexWrap="wrap" alignItems="center" gap={16} paddingHorizontal={8} paddingTop={4}>
+          <XStack alignItems="center" gap={6}>
+            <View height={2} width={16} borderRadius={4} backgroundColor={'var(--color-gray-200)' as never} />
+            <Text fontSize={10} color={'var(--color-text-secondary)' as never}>Combined</Text>
+          </XStack>
           {legs.map((leg, i) => (
-            <div key={i} className="flex items-center gap-1.5">
-              <div
-                className="h-0.5 w-4 rounded"
+            <XStack key={i} alignItems="center" gap={6}>
+              <View
+                height={2}
+                width={16}
+                borderRadius={4}
                 style={{
                   backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                   opacity: 0.6,
                   backgroundImage: `repeating-linear-gradient(90deg, transparent, transparent 2px, ${LEG_COLORS[i % LEG_COLORS.length]}00 2px, ${LEG_COLORS[i % LEG_COLORS.length]}00 5px)`,
-                }}
+                } as never}
               />
-              <span className="text-[10px] text-zinc-500">
+              <Text fontSize={10} color={'var(--color-text-secondary)' as never}>
                 {leg.action === 'buy' ? 'B' : 'S'} {leg.quantity} {leg.strike} {leg.type === 'call' ? 'C' : 'P'}
-              </span>
-            </div>
+              </Text>
+            </XStack>
           ))}
           {breakevens.length > 0 && (
-            <div className="flex items-center gap-1.5">
-              <div className="h-1.5 w-1.5 rounded-full" style={{ background: BREAKEVEN_COLOR }} />
-              <span className="text-[10px] text-zinc-500">
+            <XStack alignItems="center" gap={6}>
+              <View width={6} height={6} borderRadius={9999} style={{ background: BREAKEVEN_COLOR } as never} />
+              <Text fontSize={10} color={'var(--color-text-secondary)' as never}>
                 BE: {breakevens.map((b) => b.toFixed(1)).join(', ')}
-              </span>
-            </div>
+              </Text>
+            </XStack>
           )}
-        </div>
-      </div>
+        </XStack>
+      </View>
     );
   },
 );

package/src/progress-circle.tsx

@@ -1,5 +1,7 @@
+import { View } from '@hanzo/gui';
 import * as React from 'react';
 
+import { ink } from './ink';
 import { cn } from './utils';
 
 // ---------------------------------------------------------------------------
@@ -7,11 +9,11 @@ import { cn } from './utils';
 // ---------------------------------------------------------------------------
 
 const SIZE_MAP = {
-  xs: { size: 24, thickness: 4, textClass: 'text-[10px]' },
-  sm: { size: 32, thickness: 5, textClass: 'text-[10px]' },
-  md: { size: 40, thickness: 6, textClass: 'text-xs' },
-  lg: { size: 48, thickness: 7, textClass: 'text-sm' },
-  xl: { size: 64, thickness: 8, textClass: 'text-sm' },
+  xs: { size: 24, thickness: 4, fontSize: 10 },
+  sm: { size: 32, thickness: 5, fontSize: 10 },
+  md: { size: 40, thickness: 6, fontSize: 12 },
+  lg: { size: 48, thickness: 7, fontSize: 14 },
+  xl: { size: 64, thickness: 8, fontSize: 14 },
 } as const;
 
 type Size = keyof typeof SIZE_MAP;
@@ -63,17 +65,23 @@ export const ProgressCircleRoot = React.forwardRef<
 
   return (
     <Ctx.Provider value={ ctx }>
-      <div
-        ref={ ref }
+      <View
+        ref={ ref as never }
         role="progressbar"
         aria-valuenow={ value ?? undefined }
         aria-valuemin={ 0 }
         aria-valuemax={ 100 }
-        className={ cn('relative inline-flex text-sm', className) }
-        { ...rest }
+        position="relative"
+        // `inline-flex` and `fontSize` are not in a Stack's style base — a
+        // Stack has no text props at all, and its `display` enum is narrower
+        // than CSS's (no `inline-*` variants) — so both travel as plain style
+        // here rather than gui props.
+        style={{ display: 'inline-flex', fontSize: 14 }}
+        className={ className }
+        { ...(rest as object) }
       >
-        { children }
-      </div>
+        { ink(children) }
+      </View>
     </Ctx.Provider>
   );
 });
@@ -108,10 +116,7 @@ export const ProgressCircleRing = React.forwardRef<
       width={ size }
       height={ size }
       viewBox={ `0 0 ${ size } ${ size }` }
-      className={ cn(
-        value === null && 'animate-spin',
-        className,
-      ) }
+      className={ value === null ? cn('lux-spin', className) : className }
       { ...rest }
     >
       { /* Track */ }
@@ -122,7 +127,7 @@ export const ProgressCircleRing = React.forwardRef<
         fill="transparent"
         strokeWidth={ thickness }
         stroke={ trackColor ?? 'currentColor' }
-        className={ !trackColor ? 'opacity-20' : undefined }
+        opacity={ !trackColor ? 0.2 : undefined }
       />
       { /* Range */ }
       <circle
@@ -160,21 +165,40 @@ export const ProgressCircleValueText = React.forwardRef<
   const { className, children, ...rest } = props;
   const { value, size: sizeKey } = React.useContext(Ctx);
 
-  const { textClass } = SIZE_MAP[sizeKey];
+  const { fontSize } = SIZE_MAP[sizeKey];
 
   return (
-    <div
-      ref={ ref }
+    <View
+      ref={ ref as never }
       aria-live="polite"
-      className={ cn(
-        'absolute inset-0 flex items-center justify-center',
-        'font-medium tracking-tight tabular-nums leading-none',
-        textClass,
-        className,
-      ) }
-      { ...rest }
+      position="absolute"
+      top={ 0 }
+      left={ 0 }
+      right={ 0 }
+      bottom={ 0 }
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      // A Stack has no text props (fontSize/fontWeight/letterSpacing/lineHeight
+      // /fontVariantNumeric) — a View cannot style text any more than a native
+      // <View> can, only the <Text> inside it. `ink()` below hosts the string
+      // in a real Text, but callers may also pass their own element, so this
+      // stays a style object rather than gui text props: it composes either
+      // way, exactly like the Tailwind classes it replaces did through
+      // inheritance. Tailwind's `leading-none` (line-height: 1, unitless) and
+      // `tracking-tight` (-0.025em) are both relative to font size, so they are
+      // computed per size tier here instead of copied as one constant.
+      style={{
+        fontWeight: 500,
+        fontSize,
+        lineHeight: `${ fontSize }px`,
+        letterSpacing: fontSize * -0.025,
+        fontVariantNumeric: 'tabular-nums',
+      }}
+      className={ className }
+      { ...(rest as object) }
     >
-      { children ?? `${ Math.round(value ?? 0) }%` }
-    </div>
+      { ink(children ?? `${ Math.round(value ?? 0) }%`) }
+    </View>
   );
 });

package/src/progress.tsx

@@ -1,16 +1,14 @@
 import { Progress as GuiProgress } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
-const SIZE_CLASSES = {
-  sm: 'h-1',
-  md: 'h-2',
-  lg: 'h-3',
-  xl: 'h-4',
+const SIZE = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
 } as const;
 
-type Size = keyof typeof SIZE_CLASSES;
+type Size = keyof typeof SIZE;
 
 interface TrackProps {
   readonly borderStartRadius?: number | string;
@@ -47,7 +45,6 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
       size = 'md',
       color,
       trackProps,
-      className,
       style,
       w,
       flex,
@@ -69,6 +66,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     };
 
     const rootStyle: React.CSSProperties = {
+      position: 'relative',
       ...style,
       ...(w !== undefined && { width: w === 'full' ? '100%' : w }),
       ...(flex !== undefined && { flex }),
@@ -77,7 +75,6 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     return (
       <div
         ref={ ref }
-        className={ cn('relative', className) }
         style={ rootStyle }
         { ...rest }
       >
@@ -85,26 +82,25 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
           value={ percent }
           max={ 100 }
           unstyled
-          className={ cn(
-            'w-full overflow-hidden rounded-full',
-            'bg-[var(--color-progress-track)]',
-            SIZE_CLASSES[size],
-            trackProps?.className,
-          ) }
+          className={ trackProps?.className }
+          width="100%"
+          overflow="hidden"
+          borderRadius={ 9999 }
+          height={ SIZE[size] }
+          backgroundColor={ 'var(--color-progress-track)' as never }
           style={ trackStyle as never }
         >
           { /* gui drives the fill off `value` — it sizes the indicator to 200%
                and translates it — and eases it with the config's transition
-               driver. Geometry from the primitive, paint from the Lux classes,
+               driver. Geometry from the primitive, paint from these props,
                so the bar is a consequence of state rather than a hand-written
                width + CSS transition. */ }
           <GuiProgress.Indicator
             unstyled
             transition="slow"
-            className={ cn(
-              'h-full rounded-full',
-              !color && 'bg-[var(--color-progress-indicator)]',
-            ) }
+            height="100%"
+            borderRadius={ 9999 }
+            backgroundColor={ (color ? undefined : 'var(--color-progress-indicator)') as never }
             style={{
               ...(color && { backgroundColor: `var(--color-${ color.replace('.', '-') }, ${ color })` }),
             } as never}

package/src/radio.tsx

@@ -1,37 +1,19 @@
-import { RadioGroup as GuiRadioGroup } from '@hanzo/gui';
+import { Label, RadioGroup as GuiRadioGroup, Text, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
-// ─── Size classes ───────────────────────────────────────────────────
-const SIZE_CLASSES = {
-  xs: {
-    root: 'gap-1.5',
-    control: 'h-3 w-3',
-    indicator: 'h-1.5 w-1.5',
-    label: 'text-xs',
-  },
-  sm: {
-    root: 'gap-1.5',
-    control: 'h-3.5 w-3.5',
-    indicator: 'h-1.5 w-1.5',
-    label: 'text-xs',
-  },
-  md: {
-    root: 'gap-2',
-    control: 'h-4 w-4',
-    indicator: 'h-2 w-2',
-    label: 'text-sm',
-  },
-  lg: {
-    root: 'gap-2.5',
-    control: 'h-5 w-5',
-    indicator: 'h-2.5 w-2.5',
-    label: 'text-base',
-  },
+// ─── Size mappings ──────────────────────────────────────────────────
+const SIZE = {
+  xs: { rootGap: 6, control: 12, indicator: 6, label: 12 },
+  sm: { rootGap: 6, control: 14, indicator: 6, label: 12 },
+  md: { rootGap: 8, control: 16, indicator: 8, label: 14 },
+  lg: { rootGap: 10, control: 20, indicator: 10, label: 16 },
 } as const;
 
-type RadioSize = keyof typeof SIZE_CLASSES;
+type RadioSize = keyof typeof SIZE;
+
+const INK = 'var(--color-text-primary)' as never;
+const RESTING_BORDER = 'var(--color-input-border)' as never;
+const OUTLINE = 'var(--color-gray-500)' as never;
 
 // ─── Size context ───────────────────────────────────────────────────
 const RadioSizeContext = React.createContext<RadioSize>('md');
@@ -65,7 +47,6 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       value,
       onValueChange,
       size = 'md',
-      className,
       ...rest
     } = props;
 
@@ -83,7 +64,6 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
              from its headless core, real Pressables on native. */ }
         <GuiRadioGroup
           ref={ ref as never }
-          unstyled
           name={ name }
           required={ required }
           disabled={ disabled || readOnly }
@@ -91,11 +71,9 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
           defaultValue={ defaultValue }
           value={ value ?? undefined }
           onValueChange={ handleValueChange }
-          className={ cn(
-            'flex',
-            orientation === 'vertical' ? 'flex-col gap-3' : 'flex-row gap-6',
-            className,
-          ) }
+          display="flex"
+          flexDirection={ orientation === 'vertical' ? 'column' : 'row' }
+          gap={ orientation === 'vertical' ? 12 : 24 }
           { ...(rest as object) }
         >
           { children }
@@ -119,59 +97,61 @@ export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>
 
 const RadioBase = React.forwardRef<HTMLInputElement, RadioProps>(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const { children, inputProps, rootRef, value, disabled, ...rest } = props;
     const size = React.useContext(RadioSizeContext);
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
 
     return (
-      <label
-        ref={ rootRef }
-        className={ cn(
-          'inline-flex items-center cursor-pointer select-none',
-          sizeClasses.root,
-          disabled && 'opacity-50 cursor-not-allowed',
-          className,
-        ) }
+      <Label
+        ref={ rootRef as never }
+        unstyled
+        flexDirection="row"
+        alignItems="center"
+        gap={ s.rootGap }
+        cursor={ disabled ? 'not-allowed' : 'pointer' }
+        userSelect="none"
+        opacity={ disabled ? 0.5 : 1 }
         data-disabled={ disabled || undefined }
-        { ...rest }
+        { ...(rest as object) }
       >
         <GuiRadioGroup.Item
           unstyled
           value={ value }
           disabled={ disabled }
-          className={ cn(
-            'inline-flex items-center justify-center shrink-0 rounded-full',
-            'border-2 border-current/30',
-            'data-[state=checked]:border-gray-800 dark:border-white',
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-            'transition-colors duration-150',
-            sizeClasses.control,
-          ) }
+          flexShrink={ 0 }
+          alignItems="center"
+          justifyContent="center"
+          width={ s.control }
+          height={ s.control }
+          borderRadius={ 9999 }
+          borderWidth={ 2 }
+          borderColor={ RESTING_BORDER }
+          transition="quicker"
+          focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: OUTLINE, outlineOffset: 2 }}
         >
-          <GuiRadioGroup.Indicator
-            unstyled
-            className={ cn(
-              'block rounded-full bg-gray-800 dark:bg-white',
-              sizeClasses.indicator,
-            ) }
-          />
+          { /* gui only mounts this when the item is the group's selected
+               value — the primitive's own headless state, not a prop this
+               file tracks — so the dot is the correct+sufficient "selected"
+               signal without needing the item's checked state here too. */ }
+          <GuiRadioGroup.Indicator unstyled borderRadius={ 9999 } width={ s.indicator } height={ s.indicator } backgroundColor={ INK }/>
         </GuiRadioGroup.Item>
         { /* Hidden native input for form compatibility and ref forwarding */ }
-        <input
-          ref={ ref }
-          type="radio"
-          className="sr-only"
-          value={ value }
-          disabled={ disabled }
-          tabIndex={ -1 }
-          aria-hidden
-          onChange={ NOOP }
-          { ...inputProps }
-        />
+        <VisuallyHidden>
+          <input
+            ref={ ref }
+            type="radio"
+            value={ value }
+            disabled={ disabled }
+            tabIndex={ -1 }
+            aria-hidden
+            onChange={ NOOP }
+            { ...inputProps }
+          />
+        </VisuallyHidden>
         { children != null && (
-          <span className={ sizeClasses.label }>{ children }</span>
+          <Text fontSize={ s.label }>{ children }</Text>
         ) }
-      </label>
+      </Label>
     );
   },
 );