@luxfi/ui 7.4.11 → 7.4.13

package/src/avatar.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { Avatar as GuiAvatar } from '@hanzo/gui';
+import { Avatar as GuiAvatar, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
+import { ink } from './ink';
 
 type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 
@@ -12,19 +12,29 @@ type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarVariant = 'solid' | 'subtle' | 'outline';
 
-const SIZE_CLASSES: Record<AvatarSize, string> = {
-  xs: 'h-6 w-6 text-[10px]',
-  sm: 'h-8 w-8 text-xs',
-  md: 'h-10 w-10 text-sm',
-  lg: 'h-12 w-12 text-base',
-  xl: 'h-16 w-16 text-lg',
-  '2xl': 'h-20 w-20 text-xl',
+const SIZE: Record<AvatarSize, { width: number; height: number; fontSize: number }> = {
+  xs: { width: 24, height: 24, fontSize: 10 },
+  sm: { width: 32, height: 32, fontSize: 12 },
+  md: { width: 40, height: 40, fontSize: 14 },
+  lg: { width: 48, height: 48, fontSize: 16 },
+  xl: { width: 64, height: 64, fontSize: 18 },
+  '2xl': { width: 80, height: 80, fontSize: 20 },
 };
 
-const VARIANT_CLASSES: Record<AvatarVariant, string> = {
-  solid: 'bg-gray-500 text-white',
-  subtle: 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200',
-  outline: 'border-2 border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-200',
+// The ring colour matches the page ground rather than staying a fixed white,
+// so a stack of overlapping avatars reads as cut out of the page in both
+// themes — the same job `ring-white dark:ring-gray-900` did.
+const RING = 'var(--color-bg-body)' as never;
+
+const VARIANT: Record<AvatarVariant, Record<string, unknown>> = {
+  solid: { backgroundColor: 'var(--color-gray-500)' as never, color: 'var(--color-white)' as never },
+  subtle: { backgroundColor: 'var(--color-badge-gray-bg)' as never, color: 'var(--color-badge-gray-fg)' as never },
+  outline: {
+    borderWidth: 2,
+    borderColor: 'var(--color-input-border)' as never,
+    backgroundColor: 'transparent',
+    color: 'var(--color-text-secondary)' as never,
+  },
 };
 
 const DEFAULT_SIZE: AvatarSize = 'md';
@@ -69,7 +79,6 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
       icon,
       fallback,
       children,
-      className,
       size: sizeProp,
       variant: variantProp,
       borderless,
@@ -85,14 +94,16 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <GuiAvatar
         ref={ ref as never }
-        unstyled
-        className={ cn(
-          'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle',
-          SIZE_CLASSES[size],
-          VARIANT_CLASSES[variant],
-          !isBorderless && 'ring-2 ring-white dark:ring-gray-900',
-          className,
-        ) }
+        position="relative"
+        display="inline-flex"
+        flexShrink={ 0 }
+        alignItems="center"
+        justifyContent="center"
+        overflow="hidden"
+        borderRadius={ 9999 }
+        { ...SIZE[size] }
+        { ...VARIANT[variant] }
+        boxShadow={ isBorderless ? undefined : `0 0 0 2px ${ RING }` }
         { ...(rest as object) }
       >
         <AvatarFallback name={ name } icon={ icon }>
@@ -100,7 +111,10 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
         </AvatarFallback>
         { src != null && (
           <GuiAvatar.Image
-            className="h-full w-full rounded-[inherit] object-cover"
+            width="100%"
+            height="100%"
+            borderRadius={ 9999 }
+            objectFit="cover"
             src={ src }
             srcSet={ srcSet }
             loading={ loading }
@@ -122,20 +136,18 @@ interface AvatarFallbackInternalProps extends React.ComponentPropsWithoutRef<'sp
 
 const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackInternalProps>(
   function AvatarFallback(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
+    const { name, icon, children, ...rest } = props;
     return (
       <GuiAvatar.Fallback
         ref={ ref as never }
-        unstyled
-        className={ cn(
-          'flex h-full w-full items-center justify-center font-medium',
-          className,
-        ) }
+        display="flex"
+        width="100%"
+        height="100%"
+        alignItems="center"
+        justifyContent="center"
         { ...(rest as object) }
       >
-        { children }
-        { name != null && children == null && <>{ getInitials(name) }</> }
-        { name == null && children == null && icon }
+        { ink(children ?? (name != null ? getInitials(name) : icon), undefined, { fontWeight: '500' }) }
       </GuiAvatar.Fallback>
     );
   },
@@ -162,18 +174,22 @@ interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
 
 export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   function AvatarGroup(props, ref) {
-    const { size, variant, borderless, className, ...rest } = props;
+    const { size, variant, borderless, children, ...rest } = props;
     const contextValue = React.useMemo(
       () => ({ size, variant, borderless }),
       [ size, variant, borderless ],
     );
     return (
       <AvatarGroupContext.Provider value={ contextValue }>
-        <div
-          ref={ ref }
-          className={ cn('flex -space-x-3', className) }
-          { ...rest }
-        />
+        { /* `-space-x-3`'s sibling-margin trick, done by cloning: each avatar
+             after the first overlaps the one before it by 12px. */ }
+        <XStack ref={ ref as never } { ...(rest as object) }>
+          { React.Children.map(children, (child, index) => (
+            index === 0 || !React.isValidElement(child) ?
+              child :
+              React.cloneElement(child as React.ReactElement<{ marginLeft?: number }>, { marginLeft: -12 })
+          )) }
+        </XStack>
       </AvatarGroupContext.Provider>
     );
   },

package/src/badge.tsx

@@ -1,7 +1,6 @@
+import { Text, XStack } from '@hanzo/gui';
 import React from 'react';
 
-import { cn } from './utils';
-
 import { Skeleton } from './skeleton';
 import { Tooltip } from './tooltip';
 
@@ -21,37 +20,45 @@ type ColorPalette =
   'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' |
   'bright_purple' | 'bright_pink';
 
-const BASE_CLASSES = 'inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text';
-
-const SIZE_CLASSES = {
-  sm: 'text-xs p-1 h-[18px] min-h-[18px]',
-  md: 'text-sm px-1 py-0.5 min-h-6',
-  lg: 'text-sm px-2 py-1 min-h-7 font-semibold',
-} as const;
-
-const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
-  gray: 'bg-badge-gray-bg text-badge-gray-fg',
-  green: 'bg-badge-green-bg text-badge-green-fg',
-  red: 'bg-badge-red-bg text-badge-red-fg',
-  purple: 'bg-badge-purple-bg text-badge-purple-fg',
-  orange: 'bg-badge-orange-bg text-badge-orange-fg',
-  blue: 'bg-badge-blue-bg text-badge-blue-fg',
-  yellow: 'bg-badge-yellow-bg text-badge-yellow-fg',
-  teal: 'bg-badge-teal-bg text-badge-teal-fg',
-  cyan: 'bg-badge-cyan-bg text-badge-cyan-fg',
-  pink: 'bg-badge-pink-bg text-badge-pink-fg',
-  purple_alt: 'bg-badge-purple-alt-bg text-badge-purple-alt-fg',
-  blue_alt: 'bg-badge-blue-alt-bg text-badge-blue-alt-fg',
-  bright_gray: 'bg-badge-bright-gray-bg text-badge-bright-gray-fg',
-  bright_green: 'bg-badge-bright-green-bg text-badge-bright-green-fg',
-  bright_red: 'bg-badge-bright-red-bg text-badge-bright-red-fg',
-  bright_blue: 'bg-badge-bright-blue-bg text-badge-bright-blue-fg',
-  bright_yellow: 'bg-badge-bright-yellow-bg text-badge-bright-yellow-fg',
-  bright_teal: 'bg-badge-bright-teal-bg text-badge-bright-teal-fg',
-  bright_cyan: 'bg-badge-bright-cyan-bg text-badge-bright-cyan-fg',
-  bright_orange: 'bg-badge-bright-orange-bg text-badge-bright-orange-fg',
-  bright_purple: 'bg-badge-bright-purple-bg text-badge-bright-purple-fg',
-  bright_pink: 'bg-badge-bright-pink-bg text-badge-bright-pink-fg',
+type BadgeSize = 'sm' | 'md' | 'lg';
+
+/** The chip itself — layout only. `color`/`fontSize` are Text props, not View props. */
+const SIZE: Record<BadgeSize, Record<string, number>> = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 },
+};
+
+/** The label inside it — same three sizes, the typography half. */
+const SIZE_TEXT: Record<BadgeSize, { fontSize: number; fontWeight: '500' | '600' }> = {
+  sm: { fontSize: 12, fontWeight: '500' },
+  md: { fontSize: 14, fontWeight: '500' },
+  lg: { fontSize: 14, fontWeight: '600' },
+};
+
+const COLOR_PALETTE: Record<ColorPalette, { bg: string; fg: string }> = {
+  gray: { bg: 'var(--color-badge-gray-bg)', fg: 'var(--color-badge-gray-fg)' },
+  green: { bg: 'var(--color-badge-green-bg)', fg: 'var(--color-badge-green-fg)' },
+  red: { bg: 'var(--color-badge-red-bg)', fg: 'var(--color-badge-red-fg)' },
+  purple: { bg: 'var(--color-badge-purple-bg)', fg: 'var(--color-badge-purple-fg)' },
+  orange: { bg: 'var(--color-badge-orange-bg)', fg: 'var(--color-badge-orange-fg)' },
+  blue: { bg: 'var(--color-badge-blue-bg)', fg: 'var(--color-badge-blue-fg)' },
+  yellow: { bg: 'var(--color-badge-yellow-bg)', fg: 'var(--color-badge-yellow-fg)' },
+  teal: { bg: 'var(--color-badge-teal-bg)', fg: 'var(--color-badge-teal-fg)' },
+  cyan: { bg: 'var(--color-badge-cyan-bg)', fg: 'var(--color-badge-cyan-fg)' },
+  pink: { bg: 'var(--color-badge-pink-bg)', fg: 'var(--color-badge-pink-fg)' },
+  purple_alt: { bg: 'var(--color-badge-purple-alt-bg)', fg: 'var(--color-badge-purple-alt-fg)' },
+  blue_alt: { bg: 'var(--color-badge-blue-alt-bg)', fg: 'var(--color-badge-blue-alt-fg)' },
+  bright_gray: { bg: 'var(--color-badge-bright-gray-bg)', fg: 'var(--color-badge-bright-gray-fg)' },
+  bright_green: { bg: 'var(--color-badge-bright-green-bg)', fg: 'var(--color-badge-bright-green-fg)' },
+  bright_red: { bg: 'var(--color-badge-bright-red-bg)', fg: 'var(--color-badge-bright-red-fg)' },
+  bright_blue: { bg: 'var(--color-badge-bright-blue-bg)', fg: 'var(--color-badge-bright-blue-fg)' },
+  bright_yellow: { bg: 'var(--color-badge-bright-yellow-bg)', fg: 'var(--color-badge-bright-yellow-fg)' },
+  bright_teal: { bg: 'var(--color-badge-bright-teal-bg)', fg: 'var(--color-badge-bright-teal-fg)' },
+  bright_cyan: { bg: 'var(--color-badge-bright-cyan-bg)', fg: 'var(--color-badge-bright-cyan-fg)' },
+  bright_orange: { bg: 'var(--color-badge-bright-orange-bg)', fg: 'var(--color-badge-bright-orange-fg)' },
+  bright_purple: { bg: 'var(--color-badge-bright-purple-bg)', fg: 'var(--color-badge-bright-purple-fg)' },
+  bright_pink: { bg: 'var(--color-badge-bright-pink-bg)', fg: 'var(--color-badge-bright-pink-fg)' },
 };
 
 export interface BadgeProps
@@ -106,8 +113,17 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
     if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * S }px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
 
+    const palette = COLOR_PALETTE[colorPalette];
+
     const child = children ? (
-      <span className="overflow-hidden text-ellipsis">{ children }</span>
+      // `ellipsis` is gui Text's own built-in variant for single-line
+      // truncation — it expands to the same overflow/text-overflow/
+      // white-space/max-width rule Tailwind's `text-ellipsis` did, but
+      // through the component's own variants (guaranteed to compile),
+      // rather than naming each longhand as a separate style prop.
+      <Text ellipsis { ...SIZE_TEXT[size] } color={ palette.fg as never }>
+        { children }
+      </Text>
     ) : null;
 
     const childrenElement = truncated ? (
@@ -117,21 +133,26 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
     ) : child;
 
     const badgeElement = (
-      <span
-        ref={ ref as React.Ref<HTMLSpanElement> }
-        className={ cn(
-          BASE_CLASSES,
-          SIZE_CLASSES[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className,
-        ) }
+      <XStack
+        ref={ ref as never }
+        render={ <span/> }
+        display="inline-flex"
+        alignItems="center"
+        alignSelf="flex-start"
+        borderRadius={ 2 }
+        gap={ 4 }
+        maxWidth="100%"
+        userSelect="text"
+        { ...SIZE[size] }
+        backgroundColor={ palette.bg as never }
+        className={ className }
         style={ badgeStyle }
-        { ...rest }
+        { ...(rest as object) }
       >
         { startElement }
         { childrenElement }
         { endElement }
-      </span>
+      </XStack>
     );
 
     if (loading) {

package/src/checkbox.tsx

@@ -1,8 +1,6 @@
-import { Checkbox as GuiCheckbox } from '@hanzo/gui';
+import { Checkbox as GuiCheckbox, Label, Text, View, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 /** Tri-state, as the Chakra/Radix contract consumers already code against. */
 type CheckedState = boolean | 'indeterminate';
 
@@ -40,7 +38,6 @@ const CheckboxGroupBase = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
       onValueChange,
       orientation = 'vertical',
       name: _name,
-      className,
       ...rest
     } = props;
 
@@ -74,18 +71,16 @@ const CheckboxGroupBase = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
 
     return (
       <CheckboxGroupContext.Provider value={ ctx }>
-        <div
-          ref={ ref }
+        <View
+          ref={ ref as never }
           role="group"
-          className={ cn(
-            'flex',
-            orientation === 'vertical' ? 'flex-col gap-3' : 'flex-row gap-8',
-            className,
-          ) }
-          { ...rest }
+          display="flex"
+          flexDirection={ orientation === 'vertical' ? 'column' : 'row' }
+          gap={ orientation === 'vertical' ? 12 : 32 }
+          { ...(rest as object) }
         >
           { children }
-        </div>
+        </View>
       </CheckboxGroupContext.Provider>
     );
   },
@@ -110,43 +105,28 @@ export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'labe
   required?: boolean;
 }
 
-const SIZE_CLASSES = {
-  sm: {
-    root: 'gap-1.5',
-    control: 'h-3.5 w-3.5 rounded-sm',
-    label: 'text-xs',
-    icon: 'h-3 w-3',
-  },
-  md: {
-    root: 'gap-2',
-    control: 'h-4 w-4 rounded',
-    label: 'text-sm',
-    icon: 'h-3.5 w-3.5',
-  },
+const SIZE = {
+  sm: { rootGap: 6, control: 14, radius: 2, label: 12, icon: 12 },
+  md: { rootGap: 8, control: 16, radius: 4, label: 14, icon: 14 },
 } as const;
 
-const CheckIcon = ({ className }: { readonly className?: string }) => (
-  <svg
-    className={ className }
-    viewBox="0 0 12 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+const INK = 'var(--color-text-primary)' as never;
+const ON_INK = 'var(--color-bg-body)' as never;
+const RESTING_BORDER = 'var(--color-input-border)' as never;
+const OUTLINE = 'var(--color-gray-500)' as never;
+
+const CheckIcon = ({ size, color }: { readonly size: number; readonly color: string }) => (
+  <svg width={ size } height={ size } viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z"
-      fill="currentColor"
+      fill={ color }
     />
   </svg>
 );
 
-const IndeterminateIcon = ({ className }: { readonly className?: string }) => (
-  <svg
-    className={ className }
-    viewBox="0 0 12 2"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M0 0H12V2H0V0Z" fill="currentColor"/>
+const IndeterminateIcon = ({ size, color }: { readonly size: number; readonly color: string }) => (
+  <svg width={ size } height={ size } viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H12V2H0V0Z" fill={ color }/>
   </svg>
 );
 
@@ -167,7 +147,6 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
       size = 'md',
       name,
       required,
-      className,
       ...rest
     } = props;
 
@@ -237,25 +216,28 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
       [ readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange ],
     );
 
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
+    const isChecked = checkedState !== false;
 
     return (
-      <label
-        ref={ rootRef }
-        className={ cn(
-          'inline-flex items-center cursor-pointer select-none',
-          sizeClasses.root,
-          disabled && 'opacity-50 cursor-not-allowed',
-          readOnly && 'cursor-default',
-          className,
-        ) }
-        onChange={ onChange }
+      <Label
+        ref={ rootRef as never }
+        unstyled
+        flexDirection="row"
+        alignItems="center"
+        gap={ s.rootGap }
+        cursor={ disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer' }
+        userSelect="none"
+        opacity={ disabled ? 0.5 : 1 }
+        onChange={ onChange as never }
         data-disabled={ disabled || undefined }
         data-readonly={ readOnly || undefined }
-        { ...rest }
+        { ...(rest as object) }
       >
         { /* gui's Checkbox — role=checkbox + aria-checked from its headless core,
-             a real Pressable on native. Paint stays in the Lux classes. */ }
+             a real Pressable on native. Checked state is already tracked above,
+             so the fill is a consequence of that state rather than a
+             `data-[state=checked]` selector. */ }
         <GuiCheckbox
           unstyled
           checked={ checkedState }
@@ -264,47 +246,46 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
           name={ name }
           value={ value }
           required={ required }
-          className={ cn(
-            'inline-flex items-center justify-center shrink-0',
-            'border-2 border-current/30',
-            'data-[state=checked]:bg-gray-800 data-[state=checked]:text-white',
-            'dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black',
-            'data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white',
-            'dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black',
-            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-            'transition-colors duration-150',
-            sizeClasses.control,
-          ) }
+          flexShrink={ 0 }
+          alignItems="center"
+          justifyContent="center"
+          width={ s.control }
+          height={ s.control }
+          borderRadius={ s.radius }
+          borderWidth={ 2 }
+          borderColor={ isChecked ? INK : RESTING_BORDER }
+          backgroundColor={ isChecked ? INK : 'transparent' }
+          transition="quicker"
+          focusStyle={{ outlineWidth: 2, outlineStyle: 'solid', outlineColor: OUTLINE, outlineOffset: 2 }}
         >
           { icon ?? (
-            <GuiCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
-              { checkedState === 'indeterminate' ? (
-                <IndeterminateIcon className={ sizeClasses.icon }/>
-              ) : (
-                <CheckIcon className={ sizeClasses.icon }/>
-              ) }
+            <GuiCheckbox.Indicator alignItems="center" justifyContent="center" width={ s.icon } height={ s.icon }>
+              { checkedState === 'indeterminate' ?
+                <IndeterminateIcon size={ s.icon } color={ ON_INK }/> :
+                <CheckIcon size={ s.icon } color={ ON_INK }/> }
             </GuiCheckbox.Indicator>
           ) }
         </GuiCheckbox>
         { /* Hidden native input for form compatibility and ref forwarding */ }
-        <input
-          ref={ setHiddenInputRef }
-          type="checkbox"
-          className="sr-only"
-          checked={ checkedState === true }
-          disabled={ disabled }
-          readOnly={ readOnly }
-          name={ name }
-          value={ value }
-          tabIndex={ -1 }
-          aria-hidden
-          onChange={ NOOP }
-          { ...inputProps }
-        />
+        <VisuallyHidden>
+          <input
+            ref={ setHiddenInputRef }
+            type="checkbox"
+            checked={ checkedState === true }
+            disabled={ disabled }
+            readOnly={ readOnly }
+            name={ name }
+            value={ value }
+            tabIndex={ -1 }
+            aria-hidden
+            onChange={ NOOP }
+            { ...inputProps }
+          />
+        </VisuallyHidden>
         { children != null && (
-          <span className={ cn(sizeClasses.label) }>{ children }</span>
+          <Text fontSize={ s.label }>{ children }</Text>
         ) }
-      </label>
+      </Label>
     );
   },
 );

package/src/close-button.tsx

@@ -36,12 +36,6 @@ const CloseButtonFrame = styled(View, {
   } as const,
 });
 
-const CLOSE_BUTTON_CLASSES = [
-  'text-[var(--closeButton-fg,currentColor)]',
-  'hover:text-[var(--hover-color,currentColor)]',
-  'disabled:opacity-40',
-].join(' ');
-
 export interface CloseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
   readonly variant?: 'plain';
   readonly size?: 'md';
@@ -56,12 +50,13 @@ export const CloseButton = React.forwardRef<
   return (
     <CloseButtonFrame
       ref={ref as any}
-      className={[CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(' ')}
+      className={className}
       {...(rest as any)}
     >
       {children ?? (
         <svg
-          className="size-5"
+          width={20}
+          height={20}
           viewBox="0 0 20 20"
           fill="none"
           aria-hidden="true"

package/src/empty-state.tsx

@@ -1,9 +1,8 @@
+import { Text, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // Inline constants
-const apos = '\u2019'; // right single quotation mark (typographic apostrophe)
+const apos = '’'; // right single quotation mark (typographic apostrophe)
 
 function upperFirst(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -23,6 +22,8 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   icon?: React.ReactNode;
 }
 
+const MUTED = 'var(--color-text-secondary)' as never;
+
 export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
   function EmptyState(props, ref) {
     const { title, description, term, type = 'query', icon, children, className, ...rest } = props;
@@ -70,28 +71,31 @@ export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
     })();
 
     return (
-      <div
-        ref={ ref }
-        className={ cn('flex items-center justify-center py-10', className) }
-        { ...rest }
+      <XStack
+        ref={ ref as never }
+        alignItems="center"
+        justifyContent="center"
+        paddingVertical={ 40 }
+        className={ className }
+        { ...(rest as object) }
       >
-        <div className="flex flex-col items-center gap-5">
+        <YStack alignItems="center" gap={ 20 }>
           { iconContent && (
-            <div className="flex items-center justify-center">{ iconContent }</div>
+            <XStack alignItems="center" justifyContent="center">{ iconContent }</XStack>
           ) }
           { descriptionContent ? (
-            <div className="flex flex-col items-center gap-2 text-center">
-              <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
-              <span className="text-sm text-text-secondary">
+            <YStack alignItems="center" gap={ 8 }>
+              <Text fontSize={ 18 } fontWeight="600" textAlign="center" color={ MUTED }>{ titleContent }</Text>
+              <Text fontSize={ 14 } textAlign="center" color={ MUTED }>
                 { descriptionContent }
-              </span>
-            </div>
+              </Text>
+            </YStack>
           ) : (
-            <span className="text-lg font-semibold text-text-secondary">{ titleContent }</span>
+            <Text fontSize={ 18 } fontWeight="600" textAlign="center" color={ MUTED }>{ titleContent }</Text>
           ) }
           { children }
-        </div>
-      </div>
+        </YStack>
+      </XStack>
     );
   },
 );