@luxfi/ui 7.4.10 → 7.4.12

package/src/select.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as RadixSelect from '@radix-ui/react-select';
+import { Select as GuiSelect } from '@hanzo/gui';
 import { useDebounce } from '@uidotdev/usehooks';
 import * as React from 'react';
 
@@ -229,15 +229,14 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
 
     return (
       <SelectInternalContext.Provider value={ ctxValue }>
-        <RadixSelect.Root
+        <GuiSelect
           value={ currentValue[0] ?? '' }
           defaultValue={ defaultValueArr?.[0] }
           onValueChange={ handleRadixValueChange }
           open={ isOpen }
           onOpenChange={ handleOpenChange }
-          disabled={ disabled || readOnly }
+          disablePreventBodyScroll
           name={ name }
-          required={ required }
         >
           <div
             ref={ ref }
@@ -250,7 +249,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
           >
             { children }
           </div>
-        </RadixSelect.Root>
+        </GuiSelect>
       </SelectInternalContext.Provider>
     );
   },
@@ -263,7 +262,7 @@ export const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
 export interface SelectControlProps {
   children?: React.ReactNode;
   noIndicator?: boolean;
-  triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+  triggerProps?: React.ComponentProps<typeof GuiSelect.Trigger> & {
     asChild?: boolean;
     px?: string | number;
     className?: string;
@@ -286,9 +285,10 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
     const { asChild, px: _px, className: triggerClassName, ...radixTriggerProps } = triggerProps ?? {};
 
     const trigger = (
-      <RadixSelect.Trigger
-        ref={ ref }
+      <GuiSelect.Trigger
+        ref={ ref as never }
         asChild={ asChild }
+        unstyled
         className={ cn(
           'group peer inline-flex items-center gap-2 cursor-pointer',
           'rounded-lg text-sm transition-colors outline-none',
@@ -314,7 +314,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, SelectControlPr
             ) }
           </>
         ) }
-      </RadixSelect.Trigger>
+      </GuiSelect.Trigger>
     );
 
     if (loading) {
@@ -376,39 +376,33 @@ export interface SelectContentProps {
 }
 
 export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(
-  function SelectContent(props, ref) {
-    const { portalled = true, portalRef, children, className, ...rest } = props;
+  function SelectContent(props, _ref) {
+    // `portalled` and `portalRef` stay in the type because callers pass them,
+    // but gui's Select.Content owns its own layering — it mounts through the
+    // engine's portal and z-index stack whatever we say. There is no second
+    // way to place it, so there is nothing here to switch on.
+    const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
 
-    const content = (
-      <RadixSelect.Content
-        ref={ ref }
-        position="popper"
-        sideOffset={ 4 }
-        className={ cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-lg',
-          'bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]',
-          'border border-[var(--color-border-divider)]',
-          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-          className,
-        ) }
-        { ...rest }
-      >
-        <RadixSelect.Viewport className="p-1">
-          { children }
-        </RadixSelect.Viewport>
-      </RadixSelect.Content>
-    );
+    // One counter per render, walked over the rows below.
+    let n = 0;
+    const counter = () => n++;
 
-    if (portalled) {
-      return (
-        <RadixSelect.Portal container={ portalRef?.current ?? undefined }>
-          { content }
-        </RadixSelect.Portal>
-      );
-    }
-
-    return content;
+    return (
+      // Content is the focus scope — it takes no style props at all. The
+      // Viewport is the box you can see, so the surface is declared there.
+      <GuiSelect.Content { ...rest }>
+        <GuiSelect.Viewport
+          className={ cn(
+            'min-w-[8rem] overflow-hidden rounded-lg p-1',
+            'bg-[var(--color-popover-bg)] shadow-[var(--shadow-popover)]',
+            'border border-[var(--color-border-divider)]',
+            className,
+          ) }
+        >
+          { stampIndices(children, counter) }
+        </GuiSelect.Viewport>
+      </GuiSelect.Content>
+    );
   },
 );
 
@@ -420,17 +414,44 @@ export interface SelectItemProps {
   item: SelectOption;
   children?: React.ReactNode;
   className?: string;
+
+  /**
+   * The row's position in the list. gui's Select is positional — it keeps its
+   * own map of index to value to drive type-ahead, the active descendant and
+   * scrolling, so a row without one is a row the keyboard cannot reach. It is
+   * stamped by `SelectContent` rather than asked of the caller, because the
+   * caller writing `<SelectItem item={x}/>` has no idea what its own ordinal is
+   * and would have to be told twice.
+   */
+  index?: number;
 }
 
+/**
+ * Number every `SelectItem` beneath a node, depth first, in render order.
+ *
+ * Depth first because rows are routinely nested — inside a `SelectItemGroup`,
+ * inside the `React.Fragment` that pairs a row with its `afterElement`. A
+ * shallow pass over the content's direct children would number the groups and
+ * leave every actual row at index 0, which reads as a list whose keyboard
+ * silently only ever lands on the first entry.
+ */
+const stampIndices = (children: React.ReactNode, next: () => number): React.ReactNode =>
+  React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === SelectItem) return React.cloneElement(child, { index: next() } as never);
+    const kids = (child.props as { children?: React.ReactNode }).children;
+    return kids === undefined ? child : React.cloneElement(child, undefined, stampIndices(kids, next));
+  });
+
 export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
   function SelectItem(props, ref) {
-    const { item, children, className, ...rest } = props;
+    const { item, children, className, index, ...rest } = props;
 
     return (
-      <RadixSelect.Item
-        ref={ ref }
+      <GuiSelect.Item
+        ref={ ref as never }
+        index={ index ?? 0 }
         value={ item.value }
-        textValue={ item.label }
         className={ cn(
           'relative flex cursor-pointer select-none items-center gap-2',
           'rounded-md px-3 py-2 text-sm outline-none',
@@ -443,13 +464,13 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
         { ...rest }
       >
         { item.icon }
-        <RadixSelect.ItemText>
-          { children }
-        </RadixSelect.ItemText>
-        <RadixSelect.ItemIndicator className="ml-auto shrink-0">
+        <GuiSelect.ItemText>
+          { children ?? item.label }
+        </GuiSelect.ItemText>
+        <GuiSelect.ItemIndicator className="ml-auto shrink-0">
           <CheckIcon className="h-5 w-5"/>
-        </RadixSelect.ItemIndicator>
-      </RadixSelect.Item>
+        </GuiSelect.ItemIndicator>
+      </GuiSelect.Item>
     );
   },
 );
@@ -529,14 +550,14 @@ export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueText
     // Radix SelectValue renders the selected value or placeholder.
     // We override with our custom content.
     return (
-      <RadixSelect.Value
-        ref={ ref }
+      <GuiSelect.Value
+        ref={ ref as never }
         placeholder={ placeholderText }
         className={ cn('flex flex-col justify-center min-w-0 truncate', className) }
         { ...rest }
       >
         { content }
-      </RadixSelect.Value>
+      </GuiSelect.Value>
     );
   },
 );
@@ -555,12 +576,12 @@ export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupP
   function SelectItemGroup(props, ref) {
     const { children, label, className, ...rest } = props;
     return (
-      <RadixSelect.Group ref={ ref } className={ cn('py-1', className) } { ...rest }>
-        <RadixSelect.Label className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]">
+      <GuiSelect.Group ref={ ref as never } className={ cn('py-1', className) } { ...rest }>
+        <GuiSelect.Label className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]">
           { label }
-        </RadixSelect.Label>
+        </GuiSelect.Label>
         { children }
-      </RadixSelect.Group>
+      </GuiSelect.Group>
     );
   },
 );
@@ -569,8 +590,8 @@ export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupP
 // SelectLabel / SelectItemText
 // ---------------------------------------------------------------------------
 
-export const SelectLabel = RadixSelect.Label;
-export const SelectItemText = RadixSelect.ItemText;
+export const SelectLabel = GuiSelect.Label;
+export const SelectItemText = GuiSelect.ItemText;
 
 // ---------------------------------------------------------------------------
 // Select (composite)

package/src/separator.tsx

@@ -1,8 +1,6 @@
 import { Separator as GuiSeparator } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
 type Orientation = 'horizontal' | 'vertical';
 type Variant = 'solid' | 'dashed' | 'dotted';
 type Size = 'xs' | 'sm' | 'md' | 'lg';
@@ -13,50 +11,31 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
   readonly size?: Size;
 }
 
-const VARIANT_CLASSES: Record<Variant, string> = {
-  solid: 'border-solid',
-  dashed: 'border-dashed',
-  dotted: 'border-dotted',
-};
-
-const HORIZONTAL_SIZE_CLASSES: Record<Size, string> = {
-  xs: 'border-t-[0.5px]',
-  sm: 'border-t',
-  md: 'border-t-2',
-  lg: 'border-t-[3px]',
-};
-
-const VERTICAL_SIZE_CLASSES: Record<Size, string> = {
-  xs: 'border-l-[0.5px]',
-  sm: 'border-l',
-  md: 'border-l-2',
-  lg: 'border-l-[3px]',
-};
+/** Border weight by size — the rule is one edge, so the weight is one number. */
+const WEIGHT: Record<Size, number> = { xs: 0.5, sm: 1, md: 2, lg: 3 };
 
 // gui's Separator wearing the Lux border scale. `vertical` is the primitive's
-// own orientation variant, so it lays out correctly on native too; the Tailwind
-// classes only carry border weight and dash pattern.
+// own orientation variant, so it lays out correctly on native too; weight and
+// dash pattern are props rather than classes for the same reason.
 export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
   function Separator(
-    { orientation = 'horizontal', variant = 'solid', size = 'sm', className, ...rest },
+    { orientation = 'horizontal', variant = 'solid', size = 'sm', ...rest },
     ref,
   ) {
-    const isVertical = orientation === 'vertical';
+    const vertical = orientation === 'vertical';
 
     return (
       <GuiSeparator
         ref={ ref as never }
-        vertical={ isVertical }
+        vertical={ vertical }
         role="separator"
         aria-orientation={ orientation }
-        className={ cn(
-          'border-[var(--color-border-divider)]',
-          'border-0',
-          VARIANT_CLASSES[variant],
-          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
-          isVertical ? 'self-stretch h-auto w-0' : 'w-full',
-          className,
-        ) }
+        borderWidth={ 0 }
+        borderStyle={ variant }
+        borderColor={ 'var(--color-border-divider)' as never }
+        { ...(vertical ?
+          { borderLeftWidth: WEIGHT[size], alignSelf: 'stretch', height: 'auto', width: 0 } :
+          { borderTopWidth: WEIGHT[size], width: '100%' }) }
         { ...(rest as object) }
       />
     );

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>
   );
 }