@luxfi/ui 7.4.11 → 7.4.13

package/dist/tag.js

@@ -1,15 +1,13 @@
 "use client";
+import { styled, View, TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
 import * as React4 from 'react';
+import { Children, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View, TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/tag.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
 var CloseButtonFrame = styled(View, {
   name: "LuxCloseButton",
@@ -40,23 +38,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -72,6 +66,9 @@ var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -255,6 +252,14 @@ React4.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React4.useState(false);
@@ -359,14 +364,21 @@ var Tooltip = React4.forwardRef(
             {
               ref,
               unstyled: true,
-              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)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -375,12 +387,13 @@ var Tooltip = React4.forwardRef(
                   Tooltip$1.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -393,25 +406,24 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var 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";
-var TAG_VARIANT_CLASSES = {
-  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"
+var TAG_VARIANT = {
+  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 } }
+};
+var TAG_VARIANT_FG = {
+  subtle: "var(--color-tag-subtle-fg)",
+  clickable: "var(--color-tag-clickable-fg)",
+  filter: void 0,
+  select: "var(--color-tag-select-fg)"
 };
-var TAG_SIZE_CLASSES = {
-  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"
+var TAG_SIZE = {
+  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 }
 };
-var 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(" ");
-var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
+var TAG_SIZE_FONT = { sm: 12, md: 14, lg: 14 };
 var Tag = React4.forwardRef(
   function Tag2(props, ref) {
     const {
@@ -431,46 +443,81 @@ var Tag = React4.forwardRef(
       className,
       ...rest
     } = props;
-    const labelElement = label ? /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-text-secondary)]", children: [
+    const resolvedVariant = variant ?? "subtle";
+    const resolvedSize = size ?? "md";
+    const isSelected = Boolean(selected) && !loading;
+    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;
+    const textHoverColor = !isSelected && resolvedVariant === "select" ? "var(--color-hover)" : void 0;
+    const labelElement = label ? /* @__PURE__ */ jsxs(Text, { fontSize: TAG_SIZE_FONT[resolvedSize], fontWeight: "500", color: "var(--color-text-secondary)", children: [
       label,
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline", children: [
-      labelElement,
-      children
-    ] });
+    const labelSpan = (
+      // `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.
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          ellipsis: true,
+          fontWeight: "500",
+          fontSize: TAG_SIZE_FONT[resolvedSize],
+          color,
+          hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+          children: [
+            labelElement,
+            children
+          ]
+        }
+      )
+    );
     const contentElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxs(
-      "span",
+      XStack,
       {
         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 },
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        verticalAlign: "top",
+        maxWidth: "100%",
+        userSelect: "text",
+        ...TAG_SIZE[resolvedSize],
+        backgroundColor,
+        hoverStyle,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineOffset: 2,
+          outlineColor: "var(--color-gray-500)",
+          outlineStyle: "solid"
+        },
+        cursor: disabled ? "not-allowed" : TAG_VARIANT[resolvedVariant].cursor,
+        ...disabled ? { opacity: 0.4, pointerEvents: "none" } : {},
+        ...isSelected && { "data-selected": true },
         ...disabled && { "data-disabled": true },
+        className,
         ...rest,
         children: [
-          startElement && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center empty:hidden", children: startElement }),
+          startElement && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: startElement }),
           contentElement,
-          endElement && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...endElementProps,
-              className: cn(
-                "shrink-0 inline-flex items-center justify-center",
-                endElementProps?.className
-              ),
-              children: endElement
-            }
-          ),
-          closable && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
+          endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return /* @__PURE__ */ jsx(
+              XStack,
+              {
+                ...endElementRest,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                className: endClassName,
+                children: endElement
+              }
+            );
+          })(),
+          closable && /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose }) })
         ]
       }
     ) });

package/dist/tooltip.cjs

@@ -4,8 +4,6 @@
 var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 var React2 = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -29,6 +27,14 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/tooltip.tsx
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React2.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React2.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React2.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React2__namespace.useState(false);
@@ -42,9 +48,6 @@ function useBelow(px) {
   return below;
 }
 var useIsTouch = () => useBelow(TOUCH_PX);
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
@@ -136,14 +139,21 @@ var Tooltip = React2__namespace.forwardRef(
             {
               ref,
               unstyled: true,
-              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)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -152,12 +162,13 @@ var Tooltip = React2__namespace.forwardRef(
                   gui.Tooltip.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )

package/dist/tooltip.js

@@ -1,12 +1,19 @@
 "use client";
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
+import { TooltipGroup, Tooltip as Tooltip$1, Text } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React2 from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/tooltip.tsx
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React2.useState(false);
@@ -20,9 +27,6 @@ function useBelow(px) {
   return below;
 }
 var useIsTouch = () => useBelow(TOUCH_PX);
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
@@ -114,14 +118,21 @@ var Tooltip = React2.forwardRef(
             {
               ref,
               unstyled: true,
-              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)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -130,12 +141,13 @@ var Tooltip = React2.forwardRef(
                   Tooltip$1.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.11",
+  "version": "7.4.13",
   "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",

package/src/alert.tsx

@@ -1,15 +1,15 @@
+import { Text, View, XStack, YStack } from '@hanzo/gui';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // Inline info icon (filled circle with i)
-const IndicatorIcon = ({ className }: { readonly className?: string }) => (
-  <svg className={ className } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+const IndicatorIcon = () => (
+  <svg width={ 20 } height={ 20 } viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path fillRule="evenodd" clipRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z"/>
   </svg>
 );
 
 import { CloseButton } from './close-button';
+import { ink } from './ink';
 import { Skeleton } from './skeleton';
 
 /* ------------------------------------------------------------------ */
@@ -19,27 +19,38 @@ import { Skeleton } from './skeleton';
 type AlertStatus = 'info' | 'warning' | 'warning_table' | 'success' | 'error';
 
 /* ------------------------------------------------------------------ */
-/*  Class maps (replaced CVA)                                          */
+/*  Style maps (replaced CVA)                                          */
 /* ------------------------------------------------------------------ */
 
-const ALERT_BASE = 'w-full flex items-start relative rounded text-[var(--color-alert-fg)]';
-
-const STATUS_CLASSES: Record<AlertStatus, string> = {
-  info: 'bg-[var(--color-alert-bg-info)]',
-  warning: 'bg-[var(--color-alert-bg-warning)]',
-  warning_table: 'bg-[var(--color-alert-bg-warning-table)]',
-  success: 'bg-[var(--color-alert-bg-success)]',
-  error: 'bg-[var(--color-alert-bg-error)]',
+/** The frame every alert shares, regardless of status or size. */
+const ALERT_BASE = {
+  width: '100%',
+  position: 'relative',
+  alignItems: 'flex-start',
+  borderRadius: 4,
+  gap: 8,
+  paddingVertical: 8,
+} as const;
+
+/** Foreground is constant across every status — only the background moves. */
+const ALERT_FG = 'var(--color-alert-fg)' as never;
+
+const STATUS_BG: Record<AlertStatus, string> = {
+  info: 'var(--color-alert-bg-info)',
+  warning: 'var(--color-alert-bg-warning)',
+  warning_table: 'var(--color-alert-bg-warning-table)',
+  success: 'var(--color-alert-bg-success)',
+  error: 'var(--color-alert-bg-error)',
 };
 
-const SIZE_CLASSES: Record<string, string> = {
-  sm: 'gap-2 px-2 py-2 text-xs',
-  md: 'gap-2 px-3 py-2 text-base',
+const SIZE: Record<'sm' | 'md', { paddingHorizontal: number; fontSize: number }> = {
+  sm: { paddingHorizontal: 8, fontSize: 12 },
+  md: { paddingHorizontal: 12, fontSize: 16 },
 };
 
-const INDICATOR_SIZE_CLASSES: Record<string, string> = {
-  sm: 'w-5 h-5 my-0',
-  md: 'w-5 h-5 my-[2px]',
+const INDICATOR_SIZE: Record<'sm' | 'md', { marginVertical: number }> = {
+  sm: { marginVertical: 0 },
+  md: { marginVertical: 2 },
 };
 
 /* ------------------------------------------------------------------ */
@@ -107,10 +118,9 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
     const [ isOpen, setIsOpen ] = React.useState(true);
 
     const resolvedSize = size ?? 'md';
+    const fontSize = SIZE[resolvedSize].fontSize;
 
-    const defaultIcon = (
-      <IndicatorIcon className="w-5 h-5"/>
-    );
+    const defaultIcon = <IndicatorIcon/>;
 
     const iconElement = (() => {
       if (startElement !== undefined) {
@@ -122,12 +132,23 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       }
 
       return (
-        <span className={ cn(
-          'inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full',
-          INDICATOR_SIZE_CLASSES[resolvedSize],
-        ) }>
+        <XStack
+          alignItems="center"
+          justifyContent="center"
+          flexShrink={ 0 }
+          width={ 20 }
+          height={ 20 }
+          { ...INDICATOR_SIZE[resolvedSize] }
+          // The default icon and a caller's custom `icon` both use
+          // `fill="currentColor"`; `.lux-icon` (tokens.css) is the existing
+          // descendant-selector rule that sizes an arbitrary child svg to the
+          // box (20px default) instead of its own intrinsic size — no prop
+          // reaches a child element, so this is shared, not reinvented here.
+          className="lux-icon"
+          style={{ color: ALERT_FG }}
+        >
           { icon || defaultIcon }
-        </span>
+        </XStack>
       );
     })();
 
@@ -156,37 +177,49 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       ...(descColumnGap !== undefined ? { columnGap: typeof descColumnGap === 'number' ? `${ descColumnGap * 4 }px` : descColumnGap } : {}),
     };
 
+    // Row when inline (text sits beside the title), column otherwise.
+    const ContentFrame = inline ? XStack : YStack;
+
     return (
       <Skeleton loading={ loading }>
-        <div
-          ref={ ref }
-          className={ cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className) }
+        <XStack
+          ref={ ref as never }
+          { ...ALERT_BASE }
+          paddingHorizontal={ SIZE[resolvedSize].paddingHorizontal }
+          backgroundColor={ STATUS_BG[status] as never }
+          className={ className }
           style={ alertStyle }
-          { ...alertRest }
+          { ...(alertRest as object) }
         >
           { iconElement }
           { children ? (
-            <div className={ cn('flex flex-1', inline ? 'inline-flex flex-row items-center' : 'flex flex-col') }>
-              { title && <div className="font-semibold">{ title }</div> }
-              <div
-                className={ cn('inline-flex flex-wrap', descClassName) }
+            <ContentFrame flex={ 1 } alignItems={ inline ? 'center' : undefined }>
+              { title && (
+                <Text fontWeight="600" fontSize={ fontSize } color={ ALERT_FG }>
+                  { title }
+                </Text>
+              ) }
+              <XStack
+                flexWrap="wrap"
+                className={ descClassName }
                 style={ Object.keys(descStyle).length > 0 ? descStyle : undefined }
-                { ...descRest }
+                { ...(descRest as object) }
               >
-                { children }
-              </div>
-            </div>
+                { ink(children, undefined, { fontSize, color: ALERT_FG }) }
+              </XStack>
+            </ContentFrame>
           ) : (
-            <div className="font-semibold flex-1">{ title }</div>
+            <Text flex={ 1 } fontWeight="600" fontSize={ fontSize } color={ ALERT_FG }>
+              { title }
+            </Text>
           ) }
           { endElement }
           { closable && (
-            <CloseButton
-              className="relative self-start"
-              onClick={ handleClose }
-            />
+            <View position="relative" alignSelf="flex-start">
+              <CloseButton onClick={ handleClose }/>
+            </View>
           ) }
-        </div>
+        </XStack>
       </Skeleton>
     );
   },