@luxfi/ui 7.4.11 → 7.4.13

package/src/switch.tsx

@@ -1,32 +1,23 @@
-import { Switch as GuiSwitch } from '@hanzo/gui';
+import { Label, Switch as GuiSwitch, Text, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 const NOOP = () => { /* noop */ };
 
 // ─── Size mappings ────────────────────────────────────────────────────
 // Paint and box size only. Thumb travel is NOT a hardcoded translate any more:
 // gui measures the track and the knob and moves the knob by the difference, so
 // the switch stays correct at any size and on native.
-const SIZE_CLASSES = {
-  sm: {
-    root: 'h-4 w-7',
-    thumb: 'h-3 w-3',
-    label: 'text-xs',
-  },
-  md: {
-    root: 'h-5 w-9',
-    thumb: 'h-4 w-4',
-    label: 'text-sm',
-  },
-  lg: {
-    root: 'h-6 w-11',
-    thumb: 'h-5 w-5',
-    label: 'text-base',
-  },
+const SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 },
 } as const;
 
+const TRACK_ON = 'var(--color-text-primary)' as never;
+const TRACK_OFF = 'var(--color-switch-bg)' as never;
+const OUTLINE = 'var(--color-gray-500)' as never;
+const WHITE = 'var(--color-white)' as never;
+
 // ─── Props ────────────────────────────────────────────────────────────
 export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'dir'> {
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
@@ -59,7 +50,6 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
       disabled = false,
       size = 'md',
       direction,
-      className,
       ...rest
     } = props;
 
@@ -80,78 +70,87 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
       [ isControlled, onCheckedChange ],
     );
 
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === 'rtl';
 
     return (
-      <label
-        ref={ rootRef }
-        className={ cn(
-          'inline-flex items-center cursor-pointer select-none gap-2',
-          isRtl && 'flex-row-reverse',
-          disabled && 'opacity-50 cursor-not-allowed',
-          className,
-        ) }
-        onChange={ onChange }
+      <Label
+        ref={ rootRef as never }
+        unstyled
+        flexDirection={ isRtl ? 'row-reverse' : 'row' }
+        alignItems="center"
+        gap={ 8 }
+        cursor={ disabled ? 'not-allowed' : 'pointer' }
+        userSelect="none"
+        opacity={ disabled ? 0.5 : 1 }
+        onChange={ onChange as never }
         data-disabled={ disabled || undefined }
-        { ...rest }
+        { ...(rest as object) }
       >
         <GuiSwitch
           unstyled
           checked={ checkedState }
           onCheckedChange={ handleCheckedChange }
           disabled={ disabled }
-          className={ cn(
-            'relative inline-flex shrink-0 items-center rounded-full',
-            'bg-gray-300 dark:bg-gray-600',
-            'data-[state=checked]:bg-gray-800 dark:bg-white',
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-            'transition-colors duration-200',
-            sizeClasses.root,
-          ) }
+          position="relative"
+          flexShrink={ 0 }
+          alignItems="center"
+          width={ s.width }
+          height={ s.height }
+          borderRadius={ 9999 }
+          backgroundColor={ checkedState ? TRACK_ON : TRACK_OFF }
+          transition="quick"
+          focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: OUTLINE, outlineOffset: 2 }}
         >
           { trackLabel && (
-            <span className="absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none">
+            <Text
+              position="absolute"
+              width="100%"
+              textAlign="center"
+              fontSize={ 8 }
+              fontWeight="700"
+              color={ WHITE }
+              pointerEvents="none"
+            >
               { checkedState ? trackLabel.on : trackLabel.off }
-            </span>
+            </Text>
           ) }
           <GuiSwitch.Thumb
             unstyled
             data-thumb
             transition="quicker"
-            className={ cn(
-              'block rounded-full bg-white shadow-sm',
-              sizeClasses.thumb,
-            ) }
+            width={ s.thumb }
+            height={ s.thumb }
+            borderRadius={ 9999 }
+            backgroundColor={ WHITE }
+            boxShadow="0 1px 2px 0 rgba(0,0,0,0.05)"
           >
             { thumbLabel && (
-              <span className="flex items-center justify-center h-full w-full text-[8px]">
+              <Text width="100%" height="100%" textAlign="center" fontSize={ 8 }>
                 { checkedState ? thumbLabel.on : thumbLabel.off }
-              </span>
+              </Text>
             ) }
           </GuiSwitch.Thumb>
         </GuiSwitch>
         { /* Hidden native input for form compat and ref forwarding */ }
-        <input
-          ref={ ref }
-          type="checkbox"
-          className="sr-only"
-          checked={ checkedState }
-          disabled={ disabled }
-          tabIndex={ -1 }
-          aria-hidden
-          onChange={ NOOP }
-          { ...inputProps }
-        />
+        <VisuallyHidden>
+          <input
+            ref={ ref }
+            type="checkbox"
+            checked={ checkedState }
+            disabled={ disabled }
+            tabIndex={ -1 }
+            aria-hidden
+            onChange={ NOOP }
+            { ...inputProps }
+          />
+        </VisuallyHidden>
         { children != null && (
-          <span
-            { ...labelProps }
-            className={ cn(sizeClasses.label, labelProps?.className) }
-          >
+          <Text { ...(labelProps as object) } fontSize={ s.label }>
             { children }
-          </span>
+          </Text>
         ) }
-      </label>
+      </Label>
     );
   },
 );

package/src/tag.tsx

@@ -1,7 +1,6 @@
+import { Text, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 import { CloseButton } from './close-button';
 import { Skeleton } from './skeleton';
 import { Tooltip } from './tooltip';
@@ -21,29 +20,29 @@ function TruncatedTextTooltip({ label, children }: { readonly label: React.React
 type TagVariant = 'subtle' | 'clickable' | 'filter' | 'select';
 type TagSize = 'sm' | 'md' | 'lg';
 
-const TAG_BASE = 'inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500';
-
-const TAG_VARIANT_CLASSES: Record<TagVariant, string> = {
-  subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
-  clickable: 'cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76',
-  filter: 'bg-[var(--color-tag-filter-bg)]',
-  select: 'cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76',
+/** The chip — background, cursor, and the hover opacity `clickable`/`select` get. */
+const TAG_VARIANT: Record<TagVariant, { backgroundColor: string; cursor?: string; hoverStyle?: Record<string, unknown> }> = {
+  subtle: { backgroundColor: 'var(--color-tag-subtle-bg)' },
+  clickable: { backgroundColor: 'var(--color-tag-clickable-bg)', cursor: 'pointer', hoverStyle: { opacity: 0.76 } },
+  filter: { backgroundColor: 'var(--color-tag-filter-bg)' },
+  select: { backgroundColor: 'var(--color-tag-select-bg)', cursor: 'pointer', hoverStyle: { opacity: 0.76 } },
 };
 
-const TAG_SIZE_CLASSES: Record<TagSize, string> = {
-  sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
-  md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
-  lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
+/** The label inside it — same four variants, the colour half (`filter` has none). */
+const TAG_VARIANT_FG: Record<TagVariant, string | undefined> = {
+  subtle: 'var(--color-tag-subtle-fg)',
+  clickable: 'var(--color-tag-clickable-fg)',
+  filter: undefined,
+  select: 'var(--color-tag-select-fg)',
 };
 
-const TAG_SELECTED_CLASSES = [
-  'bg-[var(--color-tag-select-selected-bg)]',
-  'text-[var(--color-tag-select-selected-fg)]',
-  'hover:text-[var(--color-tag-select-selected-fg)]',
-  'hover:opacity-76',
-].join(' ');
+const TAG_SIZE: Record<TagSize, Record<string, number>> = {
+  sm: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 20, gap: 4 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24, gap: 4 },
+  lg: { paddingHorizontal: 6, paddingVertical: 6, minHeight: 32, minWidth: 32, gap: 4 },
+};
 
-const TAG_DISABLED_CLASSES = 'opacity-40 pointer-events-none cursor-not-allowed';
+const TAG_SIZE_FONT: Record<TagSize, number> = { sm: 12, md: 14, lg: 14 };
 
 export interface TagProps extends Omit<React.ComponentPropsWithRef<'span'>, 'size'> {
   readonly variant?: TagVariant;
@@ -80,14 +79,39 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       ...rest
     } = props;
 
+    const resolvedVariant = variant ?? 'subtle';
+    const resolvedSize = size ?? 'md';
+    const isSelected = Boolean(selected) && !loading;
+
+    // `selected` overrides the variant's own colours; `disabled` only dims —
+    // neither is known until render, so resolve the final tokens here rather
+    // than lean on a class-merge order that no longer exists.
+    const backgroundColor = isSelected ? 'var(--color-tag-select-selected-bg)' : TAG_VARIANT[resolvedVariant].backgroundColor;
+    const color = isSelected ? 'var(--color-tag-select-selected-fg)' : TAG_VARIANT_FG[resolvedVariant];
+    const hoverStyle = isSelected ? { opacity: 0.76 } : TAG_VARIANT[resolvedVariant].hoverStyle;
+    // Unselected `select` rows preview the selected look on hover; once
+    // selected the hover colour equals the resting colour, i.e. no change.
+    const textHoverColor = !isSelected && resolvedVariant === 'select' ? 'var(--color-hover)' : undefined;
+
     const labelElement = label ? (
-      <span className="text-[var(--color-text-secondary)]">{ label }:{ nbsp }</span>
+      <Text fontSize={ TAG_SIZE_FONT[resolvedSize] } fontWeight="500" color={ 'var(--color-text-secondary)' as never }>
+        { label }:{ nbsp }
+      </Text>
     ) : null;
 
     const labelSpan = (
-      <span className="line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline">
+      // `ellipsis` is Text's own built-in single-line-truncation variant —
+      // the same rule Tailwind's `line-clamp-1`/`text-ellipsis` drew, through
+      // the component's variants rather than three separate style props.
+      <Text
+        ellipsis
+        fontWeight="500"
+        fontSize={ TAG_SIZE_FONT[resolvedSize] }
+        color={ color as never }
+        hoverStyle={ textHoverColor ? { color: textHoverColor as never } : undefined }
+      >
         { labelElement }{ children }
-      </span>
+      </Text>
     );
 
     const contentElement = truncated ? (
@@ -98,43 +122,57 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
 
     return (
       <Skeleton loading={ loading } asChild>
-        <span
-          ref={ ref }
-          className={ cn(
-            TAG_BASE,
-            TAG_VARIANT_CLASSES[variant ?? 'subtle'],
-            TAG_SIZE_CLASSES[size ?? 'md'],
-            selected && !loading && TAG_SELECTED_CLASSES,
-            disabled && TAG_DISABLED_CLASSES,
-            className,
-          ) }
-          { ...(selected && !loading && { 'data-selected': true }) }
+        <XStack
+          ref={ ref as never }
+          render={ <span/> }
+          display="inline-flex"
+          alignItems="center"
+          verticalAlign="top"
+          maxWidth="100%"
+          userSelect="text"
+          { ...TAG_SIZE[resolvedSize] }
+          backgroundColor={ backgroundColor as never }
+          hoverStyle={ hoverStyle }
+          focusVisibleStyle={{
+            outlineWidth: 2,
+            outlineOffset: 2,
+            outlineColor: 'var(--color-gray-500)' as never,
+            outlineStyle: 'solid',
+          }}
+          // One cursor, decided once: disabled outranks the variant's.
+          cursor={ disabled ? 'not-allowed' : TAG_VARIANT[resolvedVariant].cursor }
+          { ...(disabled ? { opacity: 0.4, pointerEvents: 'none' } : {}) }
+          { ...(isSelected && { 'data-selected': true }) }
           { ...(disabled && { 'data-disabled': true }) }
-          { ...rest }
+          className={ className }
+          { ...(rest as object) }
         >
           { startElement && (
-            <span className="shrink-0 inline-flex items-center justify-center empty:hidden">
+            <XStack flexShrink={ 0 } alignItems="center" justifyContent="center">
               { startElement }
-            </span>
+            </XStack>
           ) }
           { contentElement }
-          { endElement && (
-            <span
-              { ...endElementProps }
-              className={ cn(
-                'shrink-0 inline-flex items-center justify-center',
-                endElementProps?.className,
-              ) }
-            >
-              { endElement }
-            </span>
-          ) }
+          { endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return (
+              <XStack
+                { ...(endElementRest as object) }
+                flexShrink={ 0 }
+                alignItems="center"
+                justifyContent="center"
+                className={ endClassName }
+              >
+                { endElement }
+              </XStack>
+            );
+          })() }
           { closable && (
-            <span className="shrink-0 inline-flex items-center justify-center">
+            <XStack flexShrink={ 0 } alignItems="center" justifyContent="center">
               <CloseButton onClick={ onClose }/>
-            </span>
+            </XStack>
           ) }
-        </span>
+        </XStack>
       </Skeleton>
     );
   },

package/src/tooltip.tsx

@@ -5,8 +5,8 @@ import {
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 
+import { ink } from './ink';
 import { useIsTouch } from './use-narrow';
-import { cn } from './utils';
 
 /** Map placement string to @hanzogui Popper placement prop. */
 function mapPlacement(p: string | undefined): string | undefined {
@@ -161,14 +161,21 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
           <GuiTooltip.Content
             ref={ ref }
             unstyled
-            className={ cn(
-              'z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm',
-              'animate-in fade-in-0 zoom-in-95',
-              isPopover && 'bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]',
-              isPopover && 'shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm',
-              !isPopover && 'bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs',
-              contentProps?.className,
-            ) }
+            zIndex={ 9999 }
+            overflow="hidden"
+            borderRadius={ 8 }
+            paddingHorizontal={ 12 }
+            paddingVertical={ 8 }
+            maxWidth={ isPopover ? 384 : 320 }
+            backgroundColor={ (isPopover ? 'var(--color-popover-bg)' : 'var(--color-tooltip-bg)') as never }
+            transition="quick"
+            enterStyle={{ opacity: 0, scale: 0.95 }}
+            exitStyle={{ opacity: 0, scale: 0.95 }}
+            { ...(isPopover ? {
+              borderWidth: 1,
+              borderColor: 'var(--color-border-divider)' as never,
+              shadowColor: 'var(--shadow-popover)' as never,
+            } : {}) }
             onClick={ interactive ? handleContentClick : undefined }
             { ...(selected ? { 'data-selected': true } : {}) }
             { ...contentProps as any }
@@ -176,12 +183,13 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
             { showArrow && (
               <GuiTooltip.Arrow
                 unstyled
-                className={ cn(
-                  isPopover ? 'fill-[var(--color-popover-bg)]' : 'fill-[var(--color-tooltip-bg)]',
-                ) }
+                backgroundColor={ (isPopover ? 'var(--color-popover-bg)' : 'var(--color-tooltip-bg)') as never }
               />
             ) }
-            { content }
+            { ink(content, undefined, {
+              fontSize: 14,
+              color: (isPopover ? 'var(--color-text-primary)' : 'var(--color-tooltip-fg)') as never,
+            }) }
           </GuiTooltip.Content>
         </GuiTooltip>
       </GuiTooltipGroup>

package/tokens.css

@@ -890,6 +890,15 @@
    they do not loop. The spinner rotates forever, so it is CSS. */
 .lux-spin { animation: lux-spin 0.8s linear infinite }
 
+/* A scrolling strip with no visible scrollbar. The scrollbar is a
+   pseudo-element on the box, so this is the only place it can be said. */
+/* One-line truncation. `text-overflow` and `white-space` are not in gui's Text
+   style base, and the three declarations only mean anything together. */
+.lux-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+
+.lux-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none }
+.lux-no-scrollbar::-webkit-scrollbar { display: none }
+
 /* Size the ICON inside a control. A descendant selector has no prop form, so
    the control publishes its icon size and this rule applies it. */
 .lux-icon svg { width: var(--icon-size, 20px); height: var(--icon-size, 20px) }
@@ -943,6 +952,15 @@
   user-select: none;
 }
 
+/* A skeleton wrapping real content (asChild, or loading with children already
+   mounted) must mask it — an <img> or an icon doesn't pick up `color:
+   transparent` above. `visibility` rather than `display:none` so the masked
+   subtree keeps its layout instead of collapsing it, which is the zero-CLS
+   promise this component makes. A descendant selector has no prop form. */
+.lux-skeleton * {
+  visibility: hidden;
+}
+
 /* The one moving part. Fixed, 2px, above everything, out of flow — so it
    cannot shift layout and cannot tint content. Mount it while any request
    is in flight; unmount it when they land. One per page. */