@luxfi/ui 7.4.11 → 7.4.13

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

@@ -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,31 @@ 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 +104,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 +113,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 +147,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>
   );
 }