@luxfi/ui 7.4.11 → 7.4.13

package/dist/avatar.js

@@ -1,25 +1,35 @@
 "use client";
-import { Avatar as Avatar$1 } from '@hanzo/gui';
+import { Avatar as Avatar$1, Text, XStack } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Children, createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SIZE_CLASSES = {
-  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"
+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 SIZE = {
+  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 }
 };
-var VARIANT_CLASSES = {
-  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"
+var RING = "var(--color-bg-body)";
+var VARIANT = {
+  solid: { backgroundColor: "var(--color-gray-500)", color: "var(--color-white)" },
+  subtle: { backgroundColor: "var(--color-badge-gray-bg)", color: "var(--color-badge-gray-fg)" },
+  outline: {
+    borderWidth: 2,
+    borderColor: "var(--color-input-border)",
+    backgroundColor: "transparent",
+    color: "var(--color-text-secondary)"
+  }
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
@@ -38,7 +48,6 @@ var Avatar = React.forwardRef(
       icon,
       fallback,
       children,
-      className,
       size: sizeProp,
       variant: variantProp,
       borderless,
@@ -51,21 +60,26 @@ var Avatar = React.forwardRef(
       Avatar$1,
       {
         ref,
-        unstyled: true,
-        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 ? void 0 : `0 0 0 2px ${RING}`,
         ...rest,
         children: [
           /* @__PURE__ */ jsx(AvatarFallback, { name, icon, children: fallback }),
           src != null && /* @__PURE__ */ jsx(
             Avatar$1.Image,
             {
-              className: "h-full w-full rounded-[inherit] object-cover",
+              width: "100%",
+              height: "100%",
+              borderRadius: 9999,
+              objectFit: "cover",
               src,
               srcSet,
               loading,
@@ -80,22 +94,18 @@ var Avatar = React.forwardRef(
 );
 var AvatarFallback = React.forwardRef(
   function AvatarFallback2(props, ref) {
-    const { name, icon, children, className, ...rest } = props;
-    return /* @__PURE__ */ jsxs(
+    const { name, icon, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
       Avatar$1.Fallback,
       {
         ref,
-        unstyled: true,
-        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,
-        children: [
-          children,
-          name != null && children == null && /* @__PURE__ */ jsx(Fragment, { children: getInitials(name) }),
-          name == null && children == null && icon
-        ]
+        children: ink(children ?? (name != null ? getInitials(name) : icon), void 0, { fontWeight: "500" })
       }
     );
   }
@@ -108,19 +118,12 @@ function getInitials(name) {
 }
 var AvatarGroup = React.forwardRef(
   function AvatarGroup2(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 /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex -space-x-3", className),
-        ...rest
-      }
-    ) });
+    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(XStack, { ref, ...rest, children: React.Children.map(children, (child, index) => index === 0 || !React.isValidElement(child) ? child : React.cloneElement(child, { marginLeft: -12 })) }) });
   }
 );
 

package/dist/badge.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var gui = require('@hanzo/gui');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -215,6 +215,14 @@ React3__namespace.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React3.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React3.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React3.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React3__namespace.useState(false);
@@ -319,14 +327,21 @@ var Tooltip = React3__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,
@@ -335,12 +350,13 @@ var Tooltip = React3__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)"
+                })
               ]
             }
           )
@@ -352,35 +368,39 @@ var Tooltip = React3__namespace.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var 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"
+var SIZE = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
+};
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
 };
-var COLOR_PALETTE_CLASSES = {
-  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"
+var COLOR_PALETTE = {
+  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)" }
 };
 var S2 = 4;
 var Badge = React3__namespace.default.forwardRef(
@@ -415,18 +435,31 @@ var Badge = React3__namespace.default.forwardRef(
     }
     if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const child = children ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const palette = COLOR_PALETTE[colorPalette];
+    const child = children ? (
+      // `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.
+      /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+    ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      gui.XStack,
       {
         ref,
-        className: cn(
-          BASE_CLASSES,
-          SIZE_CLASSES[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className
-        ),
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        backgroundColor: palette.bg,
+        className,
         style: badgeStyle,
         ...rest,
         children: [

package/dist/badge.js

@@ -1,10 +1,10 @@
 "use client";
+import { TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '@hanzo/gui';
 import * as React3 from 'react';
-import React3__default from 'react';
+import React3__default, { Children, createElement } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/badge.tsx
@@ -194,6 +194,14 @@ React3.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] = React3.useState(false);
@@ -298,14 +306,21 @@ var Tooltip = React3.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,
@@ -314,12 +329,13 @@ var Tooltip = React3.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)"
+                })
               ]
             }
           )
@@ -331,35 +347,39 @@ var Tooltip = React3.forwardRef(
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var 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"
+var SIZE = {
+  sm: { padding: 4, height: 18, minHeight: 18 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
+  lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
+};
+var SIZE_TEXT = {
+  sm: { fontSize: 12, fontWeight: "500" },
+  md: { fontSize: 14, fontWeight: "500" },
+  lg: { fontSize: 14, fontWeight: "600" }
 };
-var COLOR_PALETTE_CLASSES = {
-  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"
+var COLOR_PALETTE = {
+  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)" }
 };
 var S2 = 4;
 var Badge = React3__default.forwardRef(
@@ -394,18 +414,31 @@ var Badge = React3__default.forwardRef(
     }
     if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * S2}px` : _mr;
     const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const child = children ? /* @__PURE__ */ jsx("span", { className: "overflow-hidden text-ellipsis", children }) : null;
+    const palette = COLOR_PALETTE[colorPalette];
+    const child = children ? (
+      // `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.
+      /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: palette.fg, children })
+    ) : null;
     const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
     const badgeElement = /* @__PURE__ */ jsxs(
-      "span",
+      XStack,
       {
         ref,
-        className: cn(
-          BASE_CLASSES,
-          SIZE_CLASSES[size],
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className
-        ),
+        render: /* @__PURE__ */ jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        backgroundColor: palette.bg,
+        className,
         style: badgeStyle,
         ...rest,
         children: [