@luxfi/ui 7.4.11 → 7.4.13

package/src/strategy-builder.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -163,6 +162,26 @@ const STRATEGY_PRESETS: StrategyPreset[] = [
   },
 ];
 
+// ---------------------------------------------------------------------------
+// Shared native-control shape — same tokens input.tsx's own control uses.
+// `<select>`/`<input>` render no gui Text of their own, so every text-facing
+// property (colour, size, family) rides the `style` escape hatch here rather
+// than a typed prop: View's typed props are the same regardless of what tag
+// `render` points at, and none of them cover text — only Text has those.
+// ---------------------------------------------------------------------------
+
+const MONO = 'monospace';
+
+const CONTROL_BOX = {
+  backgroundColor: 'var(--color-input-bg)',
+  borderWidth: 1,
+  borderColor: 'var(--color-input-border)',
+  outlineWidth: 0,
+  focusStyle: { borderColor: 'var(--color-input-border-focus)' },
+} as const;
+
+const CONTROL_INK = { color: 'var(--color-input-fg)' };
+
 // ---------------------------------------------------------------------------
 // LegRow
 // ---------------------------------------------------------------------------
@@ -183,100 +202,153 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
   };
 
   return (
-    <div className="flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5">
-      <span className="text-[10px] font-mono text-zinc-500 w-4 shrink-0">
-        {index + 1}
-      </span>
+    <XStack
+      alignItems="center"
+      gap={ 8 }
+      borderRadius={ 6 }
+      backgroundColor={ 'var(--color-tag-subtle-bg)' as never }
+      paddingHorizontal={ 8 }
+      paddingVertical={ 6 }
+    >
+      <Text fontSize={ 10 } style={ { fontFamily: MONO } as never } flexShrink={ 0 } width={ 16 } color={ 'var(--color-text-secondary)' as never }>
+        { index + 1 }
+      </Text>
 
       {/* Action */}
-      <button
-        type="button"
-        className={cn(
-          'px-2 py-0.5 rounded text-xs font-semibold transition-colors',
-          leg.action === 'buy'
-            ? 'bg-emerald-900/60 text-emerald-400'
-            : 'bg-red-900/60 text-red-400',
-        )}
-        onClick={() => update({ action: leg.action === 'buy' ? 'sell' : 'buy' })}
+      <XStack
+        unstyled
+        render={ <button type="button"/> }
+        onClick={ () => update({ action: leg.action === 'buy' ? 'sell' : 'buy' }) }
+        paddingHorizontal={ 8 }
+        paddingVertical={ 2 }
+        borderRadius={ 4 }
+        borderWidth={ 0 }
+        cursor="pointer"
+        transition="quick"
+        backgroundColor={ (leg.action === 'buy'
+          ? 'color-mix(in srgb, var(--color-status-good) 20%, transparent)'
+          : 'color-mix(in srgb, var(--color-status-bad) 20%, transparent)') as never }
       >
-        {leg.action === 'buy' ? 'BUY' : 'SELL'}
-      </button>
-
-      {/* Type */}
-      <button
-        type="button"
-        className={cn(
-          'px-2 py-0.5 rounded text-xs font-medium transition-colors',
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === 'call'
-            ? 'bg-[var(--secondary)] text-[var(--foreground)]'
-            : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
-        )}
-        onClick={() => update({ type: leg.type === 'call' ? 'put' : 'call' })}
+        <Text fontSize={ 12 } fontWeight="600" color={ (leg.action === 'buy' ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never }>
+          { leg.action === 'buy' ? 'BUY' : 'SELL' }
+        </Text>
+      </XStack>
+
+      {/* Type — call vs put is a rank difference, not a hue difference. */}
+      <XStack
+        unstyled
+        render={ <button type="button"/> }
+        onClick={ () => update({ type: leg.type === 'call' ? 'put' : 'call' }) }
+        paddingHorizontal={ 8 }
+        paddingVertical={ 2 }
+        borderRadius={ 4 }
+        borderWidth={ 0 }
+        cursor="pointer"
+        transition="quick"
+        backgroundColor={ (leg.type === 'call' ? 'var(--secondary)' : 'var(--muted)') as never }
       >
-        {leg.type === 'call' ? 'CALL' : 'PUT'}
-      </button>
-
-      {/* Strike */}
-      <select
-        value={leg.strike}
-        onChange={(e) => update({ strike: Number(e.target.value) })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]"
+        <Text fontSize={ 12 } fontWeight="500" color={ (leg.type === 'call' ? 'var(--foreground)' : 'var(--muted-foreground)') as never }>
+          { leg.type === 'call' ? 'CALL' : 'PUT' }
+        </Text>
+      </XStack>
+
+      {/* Strike. `value`/`onChange` are native <select> attributes, not gui
+          style props — View's prop set is fixed regardless of what `render`
+          points at, so anything the host tag itself needs (not a style) lives
+          on the `render` element, same as `type="button"` does for buttons. */}
+      <View
+        unstyled
+        render={ <select value={ leg.strike } onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => update({ strike: Number(e.target.value) }) }/> as never }
+        { ...CONTROL_BOX }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        minWidth={ 72 }
+        style={ { ...CONTROL_INK, fontFamily: MONO, fontSize: 12 } as never }
       >
-        {strikes.map((s) => (
-          <option key={s} value={s}>
-            {s.toFixed(2)}
+        { strikes.map((s) => (
+          <option key={ s } value={ s }>
+            { s.toFixed(2) }
           </option>
-        ))}
-      </select>
+        )) }
+      </View>
 
       {/* Expiration */}
-      <select
-        value={leg.expiration}
-        onChange={(e) => update({ expiration: e.target.value })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]"
+      <View
+        unstyled
+        render={ <select value={ leg.expiration } onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => update({ expiration: e.target.value }) }/> as never }
+        { ...CONTROL_BOX }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        minWidth={ 80 }
+        style={ { ...CONTROL_INK, fontSize: 12 } as never }
       >
-        {expirations.map((exp) => (
-          <option key={exp} value={exp}>
-            {exp}
+        { expirations.map((exp) => (
+          <option key={ exp } value={ exp }>
+            { exp }
           </option>
-        ))}
-      </select>
+        )) }
+      </View>
 
       {/* Quantity */}
-      <input
-        type="number"
-        min={1}
-        max={999}
-        value={leg.quantity}
-        onChange={(e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })}
-        className="bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
+      <View
+        unstyled
+        render={ (
+          <input
+            type="number"
+            min={ 1 }
+            max={ 999 }
+            value={ leg.quantity }
+            onChange={ (e: React.ChangeEvent<HTMLInputElement>) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }) }
+          />
+        ) as never }
+        { ...CONTROL_BOX }
+        borderRadius={ 4 }
+        paddingHorizontal={ 6 }
+        paddingVertical={ 2 }
+        width={ 48 }
+        style={ { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: 'center' } as never }
       />
 
       {/* Premium (read-only if provided) */}
-      {leg.premium !== undefined && (
-        <span className={cn(
-          'font-mono tabular-nums text-xs ml-auto',
-          leg.premium >= 0 ? 'text-emerald-400' : 'text-red-400',
-        )}>
-          {leg.premium >= 0 ? '+' : ''}{leg.premium.toFixed(2)}
-        </span>
-      )}
-
-      {/* Remove */}
-      {removable && (
-        <button
-          type="button"
-          onClick={() => onRemove(index)}
-          className="ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors"
-          aria-label="Remove leg"
+      { leg.premium !== undefined && (
+        <Text
+          fontSize={ 12 }
+          style={ { fontFamily: MONO } as never }
+          fontVariant={ ['tabular-nums'] as never }
+          marginLeft="auto"
+          color={ (leg.premium >= 0 ? 'var(--color-status-good)' : 'var(--color-status-bad)') as never }
+        >
+          { leg.premium >= 0 ? '+' : '' }{ leg.premium.toFixed(2) }
+        </Text>
+      ) }
+
+      {/* Remove. The icon's `currentColor` needs a real ancestor CSS colour —
+          not a gui prop (Stacks have none) — so it rides `style`. The
+          hover→red retint from the original Tailwind isn't reachable without
+          either a new named class (out of scope) or component-local hover
+          state, so resting colour is kept and a same-family opacity shift
+          substitutes for hover feedback. */ }
+      { removable && (
+        <XStack
+          unstyled
+          render={ <button type="button" aria-label="Remove leg"/> }
+          onClick={ () => onRemove(index) }
+          marginLeft="auto"
+          padding={ 2 }
+          borderWidth={ 0 }
+          cursor="pointer"
+          transition="quick"
+          style={ { color: 'var(--color-text-secondary)' } as never }
+          hoverStyle={ { opacity: 0.7 } as never }
         >
-          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          <svg width={ 14 } height={ 14 } viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
           </svg>
-        </button>
-      )}
-    </div>
+        </XStack>
+      ) }
+    </XStack>
   );
 }
 
@@ -360,108 +432,134 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
     }, [onSubmit, strategyType, legs, netPremium]);
 
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? 'var(--color-status-good)' : netPremium < 0 ? 'var(--color-status-bad)' : 'var(--color-text-secondary)';
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3',
-          className,
-        )}
-        {...rest}
+      <YStack
+        ref={ ref as never }
+        gap={ 12 }
+        borderRadius={ 8 }
+        borderWidth={ 1 }
+        borderColor={ 'var(--color-border-divider)' as never }
+        backgroundColor={ 'var(--card)' as never }
+        padding={ 12 }
+        className={ className }
+        { ...(rest as object) }
       >
         {/* Header */}
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+        <XStack alignItems="center" justifyContent="space-between" gap={ 12 }>
+          <XStack alignItems="center" gap={ 8 }>
+            <Text fontSize={ 12 } fontWeight="600" textTransform="uppercase" letterSpacing={ 0.6 } color={ 'var(--color-text-secondary)' as never }>
               Strategy
-            </span>
-            <span className="text-sm font-medium text-zinc-200">
-              {underlying}
-            </span>
-          </div>
-          <span className="text-[10px] text-zinc-500">
-            Spot: <span className="font-mono tabular-nums text-zinc-300">{spotPrice.toFixed(2)}</span>
-          </span>
-        </div>
+            </Text>
+            <Text fontSize={ 14 } fontWeight="500" color={ 'var(--color-text-primary)' as never }>
+              { underlying }
+            </Text>
+          </XStack>
+          <Text fontSize={ 10 } color={ 'var(--color-text-secondary)' as never }>
+            Spot: <Text style={ { fontFamily: MONO } as never } fontVariant={ ['tabular-nums'] as never } color={ 'var(--color-text-primary)' as never }>{ spotPrice.toFixed(2) }</Text>
+          </Text>
+        </XStack>
 
         {/* Strategy selector */}
-        <div className="flex items-center gap-2">
-          <select
-            value={strategyType}
-            onChange={handleStrategyChange}
-            className="flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500"
+        <XStack alignItems="center" gap={ 8 }>
+          <View
+            unstyled
+            render={ <select value={ strategyType } onChange={ handleStrategyChange }/> as never }
+            flex={ 1 }
+            { ...CONTROL_BOX }
+            borderRadius={ 6 }
+            paddingHorizontal={ 10 }
+            paddingVertical={ 6 }
+            style={ { ...CONTROL_INK, fontSize: 14 } as never }
           >
-            {STRATEGY_PRESETS.map((preset) => (
-              <option key={preset.value} value={preset.value}>
-                {preset.label}
+            { STRATEGY_PRESETS.map((preset) => (
+              <option key={ preset.value } value={ preset.value }>
+                { preset.label }
               </option>
-            ))}
-          </select>
-        </div>
+            )) }
+          </View>
+        </XStack>
 
-        {currentPreset && (
-          <p className="text-[11px] text-zinc-500 -mt-1">
-            {currentPreset.description}
-          </p>
-        )}
+        { currentPreset && (
+          <Text fontSize={ 11 } marginTop={ -4 } color={ 'var(--color-text-secondary)' as never }>
+            { currentPreset.description }
+          </Text>
+        ) }
 
         {/* Legs */}
-        <div className="flex flex-col gap-1.5">
-          {legs.map((leg, i) => (
+        <YStack gap={ 6 }>
+          { legs.map((leg, i) => (
             <LegRow
-              key={i}
-              leg={leg}
-              index={i}
-              strikes={strikes}
-              expirations={expirations}
-              removable={strategyType === 'custom' && legs.length > 1}
-              onChange={handleLegChange}
-              onRemove={handleLegRemove}
+              key={ i }
+              leg={ leg }
+              index={ i }
+              strikes={ strikes }
+              expirations={ expirations }
+              removable={ strategyType === 'custom' && legs.length > 1 }
+              onChange={ handleLegChange }
+              onRemove={ handleLegRemove }
             />
-          ))}
-        </div>
-
-        {/* Add leg button (custom only) */}
-        {strategyType === 'custom' && legs.length < 4 && (
-          <button
-            type="button"
-            onClick={handleAddLeg}
-            className="flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors"
+          )) }
+        </YStack>
+
+        {/* Add leg button (custom only). Resting ink rides `style` so the
+            icon's `currentColor` and the label both resolve it; hover keeps
+            the border re-tint (a valid Stack prop) as the interactive cue. */}
+        { strategyType === 'custom' && legs.length < 4 && (
+          <XStack
+            unstyled
+            render={ <button type="button"/> }
+            onClick={ handleAddLeg }
+            alignItems="center"
+            justifyContent="center"
+            gap={ 4 }
+            borderRadius={ 6 }
+            borderWidth={ 1 }
+            paddingVertical={ 4 }
+            cursor="pointer"
+            transition="quick"
+            borderColor={ 'var(--color-border-divider)' as never }
+            hoverStyle={ { borderColor: 'var(--color-hover)' } as never }
+            style={ { color: 'var(--color-text-secondary)', borderStyle: 'dashed' } as never }
           >
-            <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none">
-              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            <svg width={ 12 } height={ 12 } viewBox="0 0 24 24" fill="none">
+              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
             </svg>
-            Add Leg
-          </button>
-        )}
+            <Text fontSize={ 12 } color={ 'var(--color-text-secondary)' as never }>Add Leg</Text>
+          </XStack>
+        ) }
 
         {/* Net premium + submit */}
-        <div className="flex items-center justify-between pt-1 border-t border-zinc-800">
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-500">Net:</span>
-            <span className={cn(
-              'font-mono tabular-nums text-sm font-semibold',
-              netPremium > 0 ? 'text-emerald-400' : netPremium < 0 ? 'text-red-400' : 'text-zinc-400',
-            )}>
-              {netPremium > 0 ? 'Credit ' : netPremium < 0 ? 'Debit ' : ''}
-              {netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : '-'}
-            </span>
-          </div>
-          <button
-            type="button"
-            onClick={handleSubmit}
-            disabled={legs.length === 0}
-            className={cn(
-              'px-4 py-1.5 rounded-md text-xs font-semibold transition-colors',
-              'bg-blue-600 text-white hover:bg-blue-500',
-              'disabled:opacity-40 disabled:cursor-not-allowed',
-            )}
+        <XStack alignItems="center" justifyContent="space-between" paddingTop={ 4 } borderTopWidth={ 1 } borderColor={ 'var(--color-border-divider)' as never }>
+          <XStack alignItems="center" gap={ 8 }>
+            <Text fontSize={ 12 } color={ 'var(--color-text-secondary)' as never }>Net:</Text>
+            <Text fontSize={ 14 } fontWeight="600" style={ { fontFamily: MONO } as never } fontVariant={ ['tabular-nums'] as never } color={ netColor as never }>
+              { netPremium > 0 ? 'Credit ' : netPremium < 0 ? 'Debit ' : '' }
+              { netPremium !== 0 ? `$${ Math.abs(netPremium).toFixed(2) }` : '-' }
+            </Text>
+          </XStack>
+          <XStack
+            unstyled
+            render={ <button type="button"/> }
+            onClick={ handleSubmit }
+            disabled={ legs.length === 0 }
+            paddingHorizontal={ 16 }
+            paddingVertical={ 6 }
+            borderRadius={ 6 }
+            borderWidth={ 0 }
+            cursor="pointer"
+            transition="quick"
+            backgroundColor={ 'var(--color-button-solid-bg)' as never }
+            hoverStyle={ { backgroundColor: 'var(--color-hover)' } as never }
+            disabledStyle={ { opacity: 0.4, cursor: 'not-allowed' } as never }
           >
-            Review Order
-          </button>
-        </div>
-      </div>
+            <Text fontSize={ 12 } fontWeight="600" color={ 'var(--color-button-solid-text)' as never }>
+              Review Order
+            </Text>
+          </XStack>
+        </XStack>
+      </YStack>
     );
   },
 );