@luxfi/ui 7.4.10 → 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/textarea.tsx

@@ -1,33 +1,11 @@
 import { TextArea as GuiTextArea } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
+import { CONTROL, VARIANT } from './input';
 
-const TEXTAREA_BASE = [
-  'w-full appearance-none outline-none transition-colors resize-y',
-  'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
-  'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
-  'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
-  'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
-  'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
-  'disabled:opacity-40 disabled:cursor-not-allowed',
-  'read-only:opacity-70',
-  'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
-].join(' ');
-
-const TEXTAREA_SIZE_CLASSES: Record<string, string> = {
-  xs: 'px-2 py-1 text-xs rounded',
-  sm: 'px-3 py-2 text-sm rounded-md',
-  md: 'px-4 py-2 text-base rounded-md',
-  lg: 'px-4 py-3 text-lg rounded-lg',
-  '2xl': 'px-4 py-3 text-xl rounded-lg',
-};
-
-const TEXTAREA_VARIANT_CLASSES: Record<string, string> = {
-  outline: 'border border-solid',
-  filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
-  unstyled: 'border-0 bg-transparent p-0',
-};
+// gui's TextArea — multiline TextInput on native, `<textarea>` on web. The
+// frame, the variants and the placeholder rule are the Input's: a textarea is a
+// text control that wraps, not a second design.
 
 type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
 type TextareaVariant = 'outline' | 'filled' | 'unstyled';
@@ -35,12 +13,20 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'size'> {
   readonly size?: TextareaSize;
   readonly variant?: TextareaVariant;
+
   /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
   readonly onChangeText?: (text: string) => void;
 }
 
-// gui's TextArea — multiline TextInput on native, `<textarea>` on web — wearing
-// the Lux size/variant classes.
+/** Same ramp as Input, but a textarea is sized by padding, not by height. */
+const SIZE: Record<TextareaSize, Record<string, number>> = {
+  xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, borderRadius: 4 },
+  sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, borderRadius: 6 },
+  md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 16, borderRadius: 6 },
+  lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: 18, borderRadius: 8 },
+  '2xl': { paddingHorizontal: 16, paddingVertical: 12, fontSize: 20, borderRadius: 8 },
+};
+
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
     const handleChange = React.useCallback(
@@ -50,11 +36,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       },
       [ onChange, onChangeText ],
     );
+
     return (
       <GuiTextArea
         ref={ ref as never }
         unstyled
-        className={ cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className) }
+        className={ className ? `lux-control ${ className }` : 'lux-control' }
+        { ...CONTROL }
+        { ...SIZE[size] }
+        { ...VARIANT[variant] }
         { ...(rest as object) }
         onChange={ handleChange as never }
       />

package/src/toaster.tsx

@@ -1,89 +1,73 @@
 'use client';
 
-import type React from 'react';
-import { Toaster as SonnerToaster, toast } from 'sonner';
+import { Text, Toast, ToastProvider, ToastViewport, XStack, YStack } from '@hanzo/gui';
+import * as React from 'react';
+
+// Toasts, on the gui engine.
+//
+// The published surface is imperative — `toaster.error({ title })` from
+// anywhere, including code that is not a component — while gui's toast is a
+// hook (`useToastController`) that only a descendant of a provider can call.
+// The bridge is a module-level store: callers push onto it, `<Toaster/>`
+// subscribes with `useSyncExternalStore` and renders one gui `Toast` per entry.
+// That is the whole adaptation, and it is why `sonner` is gone rather than
+// wrapped — a second toast implementation would have been a second way to do
+// the same thing.
 
 const SECOND = 1_000;
 const DURATION = 10 * SECOND;
 
+type ToastType = 'info' | 'warning' | 'success' | 'error' | 'loading';
+
 interface ToastOptions {
   readonly id?: string | number;
   readonly title?: string;
   readonly description?: string;
-  readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+  readonly type?: ToastType;
   readonly duration?: number;
   readonly action?: { readonly label: string; readonly onClick: () => void };
   readonly onStatusChange?: (details: { readonly status: string }) => void;
 }
 
-function mapOptions(opts: ToastOptions): Parameters<typeof toast>[1] {
-  const external: Parameters<typeof toast>[1] = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration,
-  };
-
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick,
-    };
-  }
-
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: 'unmounted' });
-    external.onAutoClose = () => cb({ status: 'unmounted' });
-  }
-
-  return external;
+interface Entry extends ToastOptions {
+  readonly id: string | number;
 }
 
-function create(opts: ToastOptions): string | number {
-  const external = mapOptions(opts);
-  const title = opts.title ?? '';
-
-  switch (opts.type) {
-    case 'success':
-      return toast.success(title, external);
-    case 'error':
-      return toast.error(title, external);
-    case 'warning':
-      return toast.warning(title, external);
-    case 'loading':
-      return toast.loading(title, external);
-    case 'info':
-    default:
-      return toast.info(title, external);
-  }
-}
+// ── the store ──────────────────────────────────────────────────────────────
 
-function update(id: string | number, opts: ToastOptions): void {
-  const title = opts.title ?? '';
-
-  // Sonner does not have a dedicated update method.
-  // Re-calling a typed toast with the same id replaces it in-place.
-  const external = mapOptions({ ...opts, id });
-
-  switch (opts.type) {
-    case 'success':
-      toast.success(title, external);
-      break;
-    case 'error':
-      toast.error(title, external);
-      break;
-    case 'warning':
-      toast.warning(title, external);
-      break;
-    case 'loading':
-      toast.loading(title, external);
-      break;
-    case 'info':
-    default:
-      toast.info(title, external);
-      break;
-  }
-}
+let entries: ReadonlyArray<Entry> = [];
+const listeners = new Set<() => void>();
+let counter = 0;
+
+const emit = () => listeners.forEach((l) => l());
+
+const subscribe = (l: () => void) => {
+  listeners.add(l);
+  return () => { listeners.delete(l); };
+};
+
+/** `useSyncExternalStore` compares by identity, so the array is replaced, never mutated. */
+const snapshot = () => entries;
+
+const remove = (id: string | number): void => {
+  const found = entries.find((e) => e.id === id);
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+  found?.onStatusChange?.({ status: 'unmounted' });
+};
+
+const create = (opts: ToastOptions): string | number => {
+  const id = opts.id ?? `toast-${ ++counter }`;
+  const entry: Entry = { ...opts, id };
+  entries = [ ...entries.filter((e) => e.id !== id), entry ];
+  emit();
+  return id;
+};
+
+const update = (id: string | number, opts: ToastOptions): void => {
+  entries = entries.map((e) => (e.id === id ? { ...e, ...opts, id } : e));
+  emit();
+};
 
 export const toaster = {
   create,
@@ -91,27 +75,75 @@ export const toaster = {
   error: (opts: ToastOptions) => create({ ...opts, type: 'error' }),
   loading: (opts: ToastOptions) => create({ ...opts, type: 'loading' }),
   update,
-  remove: (id: string | number) => toast.dismiss(id),
+  remove,
 } as const;
 
+// ── presentation ───────────────────────────────────────────────────────────
+
+/** Border colour carries the severity; the surface stays the popover surface. */
+const EDGE: Record<ToastType, string> = {
+  success: 'var(--color-status-good)',
+  error: 'var(--color-status-bad)',
+  warning: 'var(--color-status-warn)',
+  loading: 'var(--color-border-divider)',
+  info: 'var(--color-border-divider)',
+};
+
+const One = ({ entry }: { entry: Entry }) => (
+  <Toast
+    key={ entry.id }
+    duration={ entry.duration ?? DURATION }
+    onOpenChange={ (open: boolean) => { if (!open) remove(entry.id); } }
+    unstyled
+    flexDirection="column"
+    gap={ 4 }
+    padding={ 12 }
+    borderRadius={ 8 }
+    borderWidth={ 1 }
+    borderColor={ EDGE[entry.type ?? 'info'] as never }
+    backgroundColor={ 'var(--color-popover-bg)' as never }
+    transition="quick"
+    enterStyle={{ opacity: 0, y: -8 }}
+    exitStyle={{ opacity: 0, y: -8 }}
+  >
+    { entry.title ? (
+      <Toast.Title unstyled fontSize={ 14 } fontWeight="600" color={ 'var(--color-text-primary)' as never }>
+        { entry.title }
+      </Toast.Title>
+    ) : null }
+    { entry.description ? (
+      <Toast.Description unstyled fontSize={ 13 } color={ 'var(--color-text-secondary)' as never }>
+        { entry.description }
+      </Toast.Description>
+    ) : null }
+    { /* Toast.Action is the accessible affordance and takes no styling of its
+         own; the look belongs to the Text it wraps. */ }
+    { entry.action ? (
+      <XStack marginTop={ 4 }>
+        <Toast.Action altText={ entry.action.label } onPress={ entry.action.onClick }>
+          <Text
+            cursor="pointer"
+            fontSize={ 13 }
+            fontWeight="500"
+            color={ 'var(--color-link-primary)' as never }
+          >
+            { entry.action.label }
+          </Text>
+        </Toast.Action>
+      </XStack>
+    ) : null }
+  </Toast>
+);
+
 export const Toaster: React.FC = () => {
+  const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+
   return (
-    <SonnerToaster
-      position="top-right"
-      richColors
-      closeButton
-      duration={ DURATION }
-      offset={{ top: 12, right: 12, bottom: 12, left: 12 }}
-      mobileOffset={{ top: 16, right: 16, bottom: 16, left: 16 }}
-      toastOptions={{
-        className: 'font-sans',
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: 'var(--color-text-primary)',
-          backgroundColor: 'var(--color-bg-primary)',
-          borderColor: 'var(--color-border-divider)',
-        },
-      }}
-    />
+    <ToastProvider>
+      <YStack>
+        { list.map((entry) => <One key={ entry.id } entry={ entry }/>) }
+      </YStack>
+      <ToastViewport position="absolute" top={ 12 } right={ 12 }/>
+    </ToastProvider>
   );
 };

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>