@luxfi/ui 7.4.12 → 7.4.13

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/radio.tsx

@@ -64,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 }

package/src/rating.tsx

@@ -1,15 +1,15 @@
+import { Text, View, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
-// Inline star icons
-const StarFilledIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+// Inline star icons — fixed at the one size Rating ever draws them (20px, the
+// star buttons' own width/height), so there is nothing left to parameterize.
+const StarFilledIcon = () => (
+  <svg width={ 20 } height={ 20 } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
   </svg>
 );
-const StarOutlineIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+const StarOutlineIcon = () => (
+  <svg width={ 20 } height={ 20 } viewBox="0 0 20 20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" strokeWidth="1.5"/>
   </svg>
 );
@@ -48,32 +48,34 @@ export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
     }, []);
 
     return (
-      <div ref={ ref } className={ cn('inline-flex items-center gap-1', className) } { ...rest }>
-        <div className="inline-flex items-center" onMouseLeave={ handleMouseLeave }>
+      <XStack ref={ ref as never } display="inline-flex" alignItems="center" gap={ 4 } className={ className } { ...(rest as object) }>
+        <XStack display="inline-flex" alignItems="center" onMouseLeave={ handleMouseLeave }>
           { Array.from({ length: count }).map((_, index) => {
             const filled = index < highlightedIndex;
             const starIndex = index + 1;
 
             return (
-              <button
+              <View
                 key={ index }
-                type="button"
+                render={ <button type="button"/> }
                 tabIndex={ readOnly ? -1 : 0 }
                 aria-label={ `Rate ${ starIndex } of ${ count }` }
-                className={ cn(
-                  'inline-flex items-center justify-center w-5 h-5 text-current',
-                  readOnly ? 'cursor-default' : 'cursor-pointer',
-                ) }
+                display="inline-flex"
+                alignItems="center"
+                justifyContent="center"
+                width={ 20 }
+                height={ 20 }
+                cursor={ readOnly ? 'default' : 'pointer' }
                 onClick={ handleClick(starIndex) }
                 onMouseEnter={ handleMouseEnter(index) }
               >
-                { filled ? <StarFilledIcon className="w-5 h-5"/> : <StarOutlineIcon className="w-5 h-5"/> }
-              </button>
+                { filled ? <StarFilledIcon/> : <StarOutlineIcon/> }
+              </View>
             );
           }) }
-        </div>
-        { label && <span className="text-sm">{ label }</span> }
-      </div>
+        </XStack>
+        { label && <Text fontSize={ 14 }>{ label }</Text> }
+      </XStack>
     );
   },
 );

package/src/slider.tsx

@@ -87,7 +87,6 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
 
         <GuiSlider
           ref={ ref as never }
-          unstyled
           position="relative"
           flexDirection="row"
           width="100%"

package/src/strategy-builder.tsx

@@ -163,20 +163,25 @@ const STRATEGY_PRESETS: StrategyPreset[] = [
 ];
 
 // ---------------------------------------------------------------------------
-// Shared control shape — same tokens input.tsx's native text control uses.
+// 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 = { fontFamily: 'monospace' } as never;
+const MONO = 'monospace';
 
-const CONTROL = {
+const CONTROL_BOX = {
   backgroundColor: 'var(--color-input-bg)',
   borderWidth: 1,
   borderColor: 'var(--color-input-border)',
-  color: 'var(--color-input-fg)',
   outlineWidth: 0,
   focusStyle: { borderColor: 'var(--color-input-border-focus)' },
 } as const;
 
+const CONTROL_INK = { color: 'var(--color-input-fg)' };
+
 // ---------------------------------------------------------------------------
 // LegRow
 // ---------------------------------------------------------------------------
@@ -205,7 +210,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
       paddingHorizontal={ 8 }
       paddingVertical={ 6 }
     >
-      <Text fontSize={ 10 } style={ MONO } flexShrink={ 0 } width={ 16 } color={ 'var(--color-text-secondary)' as never }>
+      <Text fontSize={ 10 } style={ { fontFamily: MONO } as never } flexShrink={ 0 } width={ 16 } color={ 'var(--color-text-secondary)' as never }>
         { index + 1 }
       </Text>
 
@@ -247,19 +252,19 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
         </Text>
       </XStack>
 
-      {/* Strike */}
+      {/* 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) }) }
-        { ...CONTROL }
-        style={ MONO }
-        fontSize={ 12 }
+        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 }>
@@ -271,15 +276,13 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
       {/* Expiration */}
       <View
         unstyled
-        render={ <select/> }
-        value={ leg.expiration }
-        onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => update({ expiration: e.target.value }) }
-        { ...CONTROL }
-        fontSize={ 12 }
+        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 }>
@@ -291,26 +294,28 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
       {/* Quantity */}
       <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) }) }
-        { ...CONTROL }
-        style={ MONO }
-        fontSize={ 12 }
+        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 }
-        textAlign="center"
+        style={ { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: 'center' } as never }
       />
 
       {/* Premium (read-only if provided) */}
       { leg.premium !== undefined && (
         <Text
           fontSize={ 12 }
-          style={ MONO }
+          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 }
@@ -319,7 +324,12 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
         </Text>
       ) }
 
-      {/* Remove */}
+      {/* 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
@@ -330,8 +340,8 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
           borderWidth={ 0 }
           cursor="pointer"
           transition="quick"
-          color={ 'var(--color-text-secondary)' as never }
-          hoverStyle={ { color: 'var(--color-status-bad)' } as never }
+          style={ { color: 'var(--color-text-secondary)' } as never }
+          hoverStyle={ { opacity: 0.7 } as never }
         >
           <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"/>
@@ -447,7 +457,7 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
             </Text>
           </XStack>
           <Text fontSize={ 10 } color={ 'var(--color-text-secondary)' as never }>
-            Spot: <Text style={ MONO } fontVariant={ ['tabular-nums'] as never } color={ 'var(--color-text-primary)' as never }>{ spotPrice.toFixed(2) }</Text>
+            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>
 
@@ -455,15 +465,13 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
         <XStack alignItems="center" gap={ 8 }>
           <View
             unstyled
-            render={ <select/> }
-            value={ strategyType }
-            onChange={ handleStrategyChange }
+            render={ <select value={ strategyType } onChange={ handleStrategyChange }/> as never }
             flex={ 1 }
-            { ...CONTROL }
-            fontSize={ 14 }
+            { ...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 }>
@@ -495,7 +503,9 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
           )) }
         </YStack>
 
-        {/* Add leg button (custom only) */}
+        {/* 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
@@ -509,15 +519,14 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
             paddingVertical={ 4 }
             cursor="pointer"
             transition="quick"
-            style={ { borderStyle: 'dashed' } as never }
             borderColor={ 'var(--color-border-divider)' as never }
-            color={ 'var(--color-text-secondary)' as never }
-            hoverStyle={ { borderColor: 'var(--color-hover)', color: 'var(--color-hover)' } as never }
+            hoverStyle={ { borderColor: 'var(--color-hover)' } as never }
+            style={ { color: 'var(--color-text-secondary)', borderStyle: 'dashed' } as never }
           >
             <svg width={ 12 } height={ 12 } viewBox="0 0 24 24" fill="none">
               <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
             </svg>
-            <Text unstyled fontSize={ 12 }>Add Leg</Text>
+            <Text fontSize={ 12 } color={ 'var(--color-text-secondary)' as never }>Add Leg</Text>
           </XStack>
         ) }
 
@@ -525,7 +534,7 @@ export const StrategyBuilder = React.forwardRef<HTMLDivElement, StrategyBuilderP
         <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={ MONO } fontVariant={ ['tabular-nums'] as never } color={ netColor as never }>
+            <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>