@luxfi/ui 7.4.11 → 7.4.12

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. */