@luxfi/ui 7.4.11 → 7.4.12

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.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;
 
@@ -91,11 +72,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 +98,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>
     );
   },
 );

package/src/slider.tsx

@@ -1,8 +1,6 @@
-import { Slider as GuiSlider } from '@hanzo/gui';
+import { Slider as GuiSlider, Text, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 export interface SliderProps {
   readonly marks?: Array<number | { readonly value: number; readonly label: React.ReactNode }>;
   readonly label?: React.ReactNode;
@@ -20,6 +18,12 @@ export interface SliderProps {
   readonly className?: string;
 }
 
+const MUTED = 'var(--color-text-secondary)' as never;
+const TRACK = 'var(--color-border-divider)' as never;
+const ACTIVE = 'var(--color-link-primary)' as never;
+const ACTIVE_HOVER = 'var(--color-link-primary-hover)' as never;
+const WHITE = 'var(--color-white)' as never;
+
 // gui's Slider: pointer, touch and keyboard from one implementation, with the
 // drag handled as a pan gesture by the engine rather than by mouse events — so it
 // works under a finger, not only under a cursor. `role=slider` and the arrow-key
@@ -64,30 +68,32 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
     }, [ onValueCommit ]);
 
     return (
-      <div className={ cn('flex flex-col gap-1', className) }>
+      <YStack className={ className } gap={ 4 }>
         { label && !showValue && (
-          <label className="text-sm font-medium text-text-secondary">
+          <Text fontSize={ 14 } fontWeight="500" color={ MUTED }>
             { label }
-          </label>
+          </Text>
         ) }
         { label && showValue && (
-          <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-text-secondary">
+          <XStack alignItems="center" justifyContent="space-between">
+            <Text fontSize={ 14 } fontWeight="500" color={ MUTED }>
               { label }
-            </label>
-            <span className="text-sm text-text-secondary">
+            </Text>
+            <Text fontSize={ 14 } color={ MUTED }>
               { (value ?? defaultValue ?? [])?.join(', ') }
-            </span>
-          </div>
+            </Text>
+          </XStack>
         ) }
 
         <GuiSlider
           ref={ ref as never }
           unstyled
-          className={ cn(
-            'relative flex w-full touch-none select-none items-center',
-            hasMarkLabel && 'mb-6',
-          ) }
+          position="relative"
+          flexDirection="row"
+          width="100%"
+          userSelect="none"
+          alignItems="center"
+          marginBottom={ hasMarkLabel ? 24 : 0 }
           value={ value }
           defaultValue={ defaultValue }
           min={ min }
@@ -99,14 +105,8 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
           onValueChange={ handleValueChange }
           onSlideEnd={ handleSlideEnd }
         >
-          <GuiSlider.Track
-            unstyled
-            className="relative grow h-1.5 rounded-full bg-border-divider"
-          >
-            <GuiSlider.TrackActive
-              unstyled
-              className="absolute h-full rounded-full bg-link-primary"
-            />
+          <GuiSlider.Track unstyled position="relative" flexGrow={ 1 } height={ 6 } borderRadius={ 9999 } backgroundColor={ TRACK }>
+            <GuiSlider.TrackActive unstyled position="absolute" height="100%" borderRadius={ 9999 } backgroundColor={ ACTIVE }/>
           </GuiSlider.Track>
 
           { resolvedValue?.map((_, index) => (
@@ -114,20 +114,23 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
               key={ index }
               index={ index }
               unstyled
-              className={ cn(
-                'block h-5 w-5',
-                'rounded-full border-2 border-link-primary bg-white',
-                'shadow-sm transition-colors',
-                'hover:border-link-primary-hover',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2',
-                'disabled:pointer-events-none disabled:opacity-50',
-              ) }
+              width={ 20 }
+              height={ 20 }
+              borderRadius={ 9999 }
+              borderWidth={ 2 }
+              borderColor={ ACTIVE }
+              backgroundColor={ WHITE }
+              boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
+              transition="quick"
+              hoverStyle={{ borderColor: ACTIVE_HOVER }}
+              focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: ACTIVE, outlineOffset: 2 }}
+              disabledStyle={{ pointerEvents: 'none', opacity: 0.5 }}
             />
           )) }
         </GuiSlider>
 
         <SliderMarks marks={ marks } min={ min } max={ max }/>
-      </div>
+      </YStack>
     );
   },
 );
@@ -145,24 +148,20 @@ function SliderMarks(props: SliderMarksProps): React.ReactNode {
   const range = max - min;
 
   return (
-    <div className="relative w-full h-4">
+    <View position="relative" width="100%" height={ 16 }>
       { marks.map((mark, index) => {
         const percent = ((mark.value - min) / range) * 100;
         return (
-          <div
-            key={ index }
-            className="absolute flex flex-col items-center -translate-x-1/2"
-            style={{ left: `${ percent }%` }}
-          >
-            <div className="h-1.5 w-0.5 bg-border-divider"/>
+          <View key={ index } position="absolute" left={ `${ percent }%` as never } alignItems="center">
+            <View width={ 2 } height={ 6 } backgroundColor={ TRACK }/>
             { mark.label != null && (
-              <span className="mt-0.5 text-xs text-text-secondary whitespace-nowrap">
+              <Text marginTop={ 2 } fontSize={ 12 } color={ MUTED }>
                 { mark.label }
-              </span>
+              </Text>
             ) }
-          </div>
+          </View>
         );
       }) }
-    </div>
+    </View>
   );
 }