@luxfi/ui 7.4.11 → 7.4.13

package/src/expiration-selector.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -48,31 +47,62 @@ interface ExpirationPillProps {
   readonly onClick: () => void;
 }
 
+// Resting and selected are the same two states every selectable pill in this
+// package uses (tabs, menu rows): a solid fill when selected, a bordered card
+// otherwise. Stacks carry no `color` of their own (only Text does — same
+// reason they carry no `fontSize`), so ink is computed per-state below and
+// set directly on each Text rather than left to cascade from the button.
+const SHAPE = {
+  selected: {
+    borderColor: 'transparent',
+    backgroundColor: 'var(--color-selected-control-bg)',
+  },
+  resting: {
+    borderColor: 'var(--color-border-divider)',
+    backgroundColor: 'var(--card)',
+    hoverStyle: { borderColor: 'var(--color-hover)' },
+  },
+} as const;
+
 function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dateColor = isSelected ? 'var(--color-selected-control-text)' : 'var(--color-text-secondary)';
+
+  // Near-expiry is a notice, and a notice in Lux is the loudest neutral — it
+  // only shows while resting; a selected pill's own fill already carries the
+  // emphasis.
+  const dteColor = exp.dte <= 7 && !isSelected
+    ? 'var(--color-status-warn)'
+    : isSelected ? 'var(--color-selected-control-text)' : 'var(--muted-foreground)';
+
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        'flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0',
-        'border text-xs',
-        isSelected
-          ? 'border-blue-500/60 bg-blue-900/30 text-blue-300'
-          : 'border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200',
-      )}
+    <YStack
+      unstyled
+      render={ <button type="button"/> }
+      onClick={ onClick }
+      alignItems="center"
+      gap={ 2 }
+      borderRadius={ 6 }
+      paddingHorizontal={ 12 }
+      paddingVertical={ 6 }
+      flexShrink={ 0 }
+      borderWidth={ 1 }
+      borderStyle="solid"
+      cursor="pointer"
+      { ...(shape as object) }
     >
-      <span className="font-medium whitespace-nowrap">
-        {formatExpDate(exp.date)}
-      </span>
-      <span className={cn(
-        'font-mono tabular-nums text-[10px]',
-        isSelected ? 'text-[var(--foreground)]' : 'text-[var(--muted-foreground)]',
-        // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-        exp.dte <= 7 && !isSelected && 'text-[var(--color-status-warn)]',
-      )}>
-        {exp.dte}d
-      </span>
-    </button>
+      <Text fontSize={ 12 } fontWeight="500" style={ { whiteSpace: 'nowrap' } as never } color={ dateColor as never }>
+        { formatExpDate(exp.date) }
+      </Text>
+      <Text
+        fontVariant={ ['tabular-nums'] as never }
+        style={ { fontFamily: 'monospace' } as never }
+        fontSize={ 10 }
+        color={ dteColor as never }
+      >
+        { exp.dte }d
+      </Text>
+    </YStack>
   );
 }
 
@@ -111,54 +141,42 @@ export const ExpirationSelector = React.forwardRef<HTMLDivElement, ExpirationSel
       })).filter((g) => g.items.length > 0);
 
       return (
-        <div
-          ref={ref}
-          className={cn('flex flex-col gap-2', className)}
-          {...rest}
-        >
-          {grouped.map((group) => (
-            <div key={group.type} className="flex flex-col gap-1">
-              <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1">
-                {group.label}
-              </span>
-              <div className="flex gap-1.5 overflow-x-auto no-scrollbar">
-                {group.items.map((exp) => (
-                  <div key={exp.date} data-selected={exp.date === selected || undefined}>
-                    <ExpirationPill
-                      exp={exp}
-                      isSelected={exp.date === selected}
-                      onClick={() => onSelect(exp.date)}
-                    />
+        <YStack ref={ ref as never } gap={ 8 } className={ className } { ...(rest as object) }>
+          { grouped.map((group) => (
+            <YStack key={ group.type } gap={ 4 }>
+              <Text
+                fontSize={ 10 }
+                fontWeight="600"
+                textTransform="uppercase"
+                letterSpacing={ 0.5 }
+                paddingHorizontal={ 4 }
+                color={ 'var(--color-text-secondary)' as never }
+              >
+                { group.label }
+              </Text>
+              <XStack gap={ 6 } overflowX="auto" overflowY="hidden" className="lux-no-scrollbar">
+                { group.items.map((exp) => (
+                  <div key={ exp.date } data-selected={ exp.date === selected || undefined }>
+                    <ExpirationPill exp={ exp } isSelected={ exp.date === selected } onClick={ () => onSelect(exp.date) }/>
                   </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
+                )) }
+              </XStack>
+            </YStack>
+          )) }
+        </YStack>
       );
     }
 
     return (
-      <div
-        ref={ref}
-        className={cn('flex items-center gap-1', className)}
-        {...rest}
-      >
-        <div
-          ref={scrollRef}
-          className="flex gap-1.5 overflow-x-auto no-scrollbar"
-        >
-          {expirations.map((exp) => (
-            <div key={exp.date} data-selected={exp.date === selected || undefined}>
-              <ExpirationPill
-                exp={exp}
-                isSelected={exp.date === selected}
-                onClick={() => onSelect(exp.date)}
-              />
+      <XStack ref={ ref as never } alignItems="center" gap={ 4 } className={ className } { ...(rest as object) }>
+        <XStack ref={ scrollRef as never } gap={ 6 } overflowX="auto" overflowY="hidden" className="lux-no-scrollbar">
+          { expirations.map((exp) => (
+            <div key={ exp.date } data-selected={ exp.date === selected || undefined }>
+              <ExpirationPill exp={ exp } isSelected={ exp.date === selected } onClick={ () => onSelect(exp.date) }/>
             </div>
-          ))}
-        </div>
-      </div>
+          )) }
+        </XStack>
+      </XStack>
     );
   },
 );

package/src/greeks-display.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { Text, View, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -36,12 +35,12 @@ interface GreekDef {
 // on one achromatic ramp (tokens.css --chart-*, plus --foreground for the sixth),
 // so the panel obeys the brand atom and reskins with the host.
 const GREEKS: GreekDef[] = [
-  { key: 'delta', label: 'Delta', symbol: '\u0394', color: 'text-[var(--foreground)]', barColor: 'bg-[var(--foreground)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'gamma', label: 'Gamma', symbol: '\u0393', color: 'text-[var(--chart-1)]', barColor: 'bg-[var(--chart-1)]', decimals: 4, maxMagnitude: 0.1 },
-  { key: 'theta', label: 'Theta', symbol: '\u0398', color: 'text-[var(--chart-4)]', barColor: 'bg-[var(--chart-4)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'vega', label: 'Vega', symbol: '\u03BD', color: 'text-[var(--chart-2)]', barColor: 'bg-[var(--chart-2)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'rho', label: 'Rho', symbol: '\u03C1', color: 'text-[var(--chart-3)]', barColor: 'bg-[var(--chart-3)]', decimals: 4, maxMagnitude: 1 },
-  { key: 'iv', label: 'IV', symbol: '\u03C3', color: 'text-[var(--chart-5)]', barColor: 'bg-[var(--chart-5)]', decimals: 1, maxMagnitude: 100 },
+  { key: 'delta', label: 'Delta', symbol: 'Δ', color: 'var(--foreground)', barColor: 'var(--foreground)', decimals: 4, maxMagnitude: 1 },
+  { key: 'gamma', label: 'Gamma', symbol: 'Γ', color: 'var(--chart-1)', barColor: 'var(--chart-1)', decimals: 4, maxMagnitude: 0.1 },
+  { key: 'theta', label: 'Theta', symbol: 'Θ', color: 'var(--chart-4)', barColor: 'var(--chart-4)', decimals: 4, maxMagnitude: 1 },
+  { key: 'vega', label: 'Vega', symbol: 'ν', color: 'var(--chart-2)', barColor: 'var(--chart-2)', decimals: 4, maxMagnitude: 1 },
+  { key: 'rho', label: 'Rho', symbol: 'ρ', color: 'var(--chart-3)', barColor: 'var(--chart-3)', decimals: 4, maxMagnitude: 1 },
+  { key: 'iv', label: 'IV', symbol: 'σ', color: 'var(--chart-5)', barColor: 'var(--chart-5)', decimals: 1, maxMagnitude: 100 },
 ];
 
 // ---------------------------------------------------------------------------
@@ -61,35 +60,45 @@ function GreekItem({ def, value, compact }: GreekItemProps) {
     : value.toFixed(def.decimals);
 
   return (
-    <div
-      className={cn(
-        'flex items-center gap-1.5',
-        compact ? 'min-w-0' : 'min-w-[100px]',
-      )}
-    >
-      <span className={cn('text-[10px] font-semibold shrink-0', def.color)}>
-        {def.symbol}
-      </span>
-      {!compact && (
-        <span className="text-[10px] text-zinc-500 shrink-0 w-[34px]">
-          {def.label}
-        </span>
-      )}
-      <span className={cn(
-        'font-mono tabular-nums text-xs text-zinc-200 shrink-0',
-        value < 0 && 'text-red-400',
-      )}>
-        {displayValue}
-      </span>
-      {!compact && (
-        <div className="flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden">
-          <div
-            className={cn('h-full rounded-full transition-all', def.barColor)}
-            style={{ width: `${magnitude * 100}%`, opacity: 0.7 }}
+    <XStack alignItems="center" gap={ 6 } minWidth={ compact ? 0 : 100 }>
+      <Text fontSize={ 10 } fontWeight="600" flexShrink={ 0 } color={ def.color as never }>
+        { def.symbol }
+      </Text>
+      { !compact && (
+        <Text fontSize={ 10 } flexShrink={ 0 } width={ 34 } color={ 'var(--color-text-secondary)' as never }>
+          { def.label }
+        </Text>
+      ) }
+      <Text
+        fontSize={ 12 }
+        flexShrink={ 0 }
+        style={ { fontFamily: 'monospace' } as never }
+        fontVariant={ ['tabular-nums'] as never }
+        color={ (value < 0 ? 'var(--color-status-bad)' : 'var(--color-text-primary)') as never }
+      >
+        { displayValue }
+      </Text>
+      { !compact && (
+        <View
+          flex={ 1 }
+          height={ 4 }
+          borderRadius={ 9999 }
+          minWidth={ 24 }
+          maxWidth={ 48 }
+          overflow="hidden"
+          backgroundColor={ 'var(--color-progress-track)' as never }
+        >
+          <View
+            height="100%"
+            borderRadius={ 9999 }
+            transition="quick"
+            width={ `${ magnitude * 100 }%` as never }
+            opacity={ 0.7 }
+            backgroundColor={ def.barColor as never }
           />
-        </div>
-      )}
-    </div>
+        </View>
+      ) }
+    </XStack>
   );
 }
 
@@ -118,24 +127,23 @@ export const GreeksDisplay = React.forwardRef<HTMLDivElement, GreeksDisplayProps
     const activeGreeks = GREEKS.filter((g) => values[g.key] !== undefined);
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-wrap items-center',
-          compact ? 'gap-3' : 'gap-4',
-          className,
-        )}
-        {...rest}
+      <XStack
+        ref={ ref as never }
+        flexWrap="wrap"
+        alignItems="center"
+        gap={ compact ? 12 : 16 }
+        className={ className }
+        { ...(rest as object) }
       >
-        {activeGreeks.map((g) => (
+        { activeGreeks.map((g) => (
           <GreekItem
-            key={g.key}
-            def={g}
-            value={values[g.key] as number}
-            compact={compact}
+            key={ g.key }
+            def={ g }
+            value={ values[g.key] as number }
+            compact={ compact }
           />
-        ))}
-      </div>
+        )) }
+      </XStack>
     );
   },
 );

package/src/input-group.tsx

@@ -1,7 +1,8 @@
+import { XStack } from '@hanzo/gui';
 import { debounce } from 'es-toolkit';
 import * as React from 'react';
 
-import { cn } from './utils';
+import { ink } from './ink';
 
 import type { InputProps } from './input';
 
@@ -110,22 +111,30 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     const { className: endClassName, ...endRest } = endElementProps ?? {};
 
     return (
-      <div
-        ref={ combinedRef }
-        className={ cn('relative flex w-full items-center', className) }
-        { ...rest }
+      <XStack
+        ref={ combinedRef as never }
+        position="relative"
+        width="100%"
+        alignItems="center"
+        className={ className }
+        { ...(rest as object) }
       >
         { startElement && (
-          <div
-            ref={ startElementRef }
-            className={ cn(
-              'pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
-              startClassName,
-            ) }
-            { ...startRest }
+          <XStack
+            ref={ startElementRef as never }
+            position="absolute"
+            top={ 0 }
+            bottom={ 0 }
+            left={ 0 }
+            zIndex={ 1 }
+            alignItems="center"
+            pointerEvents="none"
+            style={{ color: 'var(--color-icon-secondary)' }}
+            className={ startClassName }
+            { ...(startRest as object) }
           >
-            { startElement }
-          </div>
+            { ink(startElement) }
+          </XStack>
         ) }
         { React.Children.map(children, (child: React.ReactElement<InputProps>) => {
           if (!React.isValidElement(child)) {
@@ -149,18 +158,23 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           });
         }) }
         { endElement && (
-          <div
-            ref={ endElementRef }
-            className={ cn(
-              'pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]',
-              endClassName,
-            ) }
-            { ...endRest }
+          <XStack
+            ref={ endElementRef as never }
+            position="absolute"
+            top={ 0 }
+            bottom={ 0 }
+            right={ 0 }
+            zIndex={ 1 }
+            alignItems="center"
+            pointerEvents="none"
+            style={{ color: 'var(--color-icon-secondary)' }}
+            className={ endClassName }
+            { ...(endRest as object) }
           >
-            { endElement }
-          </div>
+            { ink(endElement) }
+          </XStack>
         ) }
-      </div>
+      </XStack>
     );
   },
 );