@luxfi/ui 7.4.15 → 8.1.0

package/dist/tag.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
 type TagVariant = 'subtle' | 'clickable' | 'filter' | 'select';
 type TagSize = 'sm' | 'md' | 'lg';
-interface TagProps extends Omit<React.ComponentPropsWithRef<'span'>, 'size'> {
+export interface TagProps extends Omit<React.ComponentPropsWithRef<'span'>, 'size'> {
     readonly variant?: TagVariant;
     readonly size?: TagSize;
     readonly startElement?: React.ReactNode;
@@ -16,6 +15,6 @@ interface TagProps extends Omit<React.ComponentPropsWithRef<'span'>, 'size'> {
     readonly selected?: boolean;
     readonly disabled?: boolean;
 }
-declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-
-export { Tag, type TagProps };
+export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=tag.d.ts.map

package/dist/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../src/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,KAAK,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/D,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BlC,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACjF,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,GAAG,+FAqHf,CAAC"}

package/dist/tag.js

@@ -3,8 +3,7 @@ import { styled, View, TooltipGroup, Tooltip as Tooltip$1, Text, XStack } from '
 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 { Box, sx, cn } from '@hanzo/ui';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/tag.tsx
@@ -66,158 +65,26 @@ var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
     }
   );
 });
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SHIM_PROPS = [
-  "w",
-  "h",
-  "minW",
-  "maxW",
-  "display",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "fontWeight",
-  "textStyle",
-  "borderRadius",
-  "alignSelf",
-  "alignItems",
-  "justifyContent",
-  "color",
-  "mt",
-  "mb",
-  "ml",
-  "mr",
-  "height",
-  "overflow",
-  "whiteSpace",
-  "textOverflow",
-  "textTransform",
-  "gap",
-  "gridTemplateColumns",
-  "minWidth",
-  "boxSize",
-  "py",
-  "px",
-  "p",
-  "hideBelow",
-  "fontSize",
-  "flexWrap",
-  "wordBreak",
-  "lineHeight",
-  "marginRight",
-  "position",
-  "background"
-];
-var S = 4;
-function dim(v) {
-  if (v == null) return void 0;
-  if (typeof v === "number") return `${v * S}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object") {
-    const o = v;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return void 0;
-}
-function sp(v) {
-  if (v === void 0) return void 0;
-  return typeof v === "number" ? `${v * S}px` : v;
-}
-function shimToStyle(props) {
-  const s = {};
-  if (props.w !== void 0) s.width = dim(props.w);
-  if (props.h !== void 0) s.height = dim(props.h);
-  if (props.minW !== void 0) s.minWidth = dim(props.minW);
-  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
-  if (props.display !== void 0) s.display = props.display;
-  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
-  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
-  if (props.color !== void 0) s.color = props.color;
-  if (props.mt !== void 0) s.marginTop = sp(props.mt);
-  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
-  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
-  if (props.mr !== void 0) s.marginRight = sp(props.mr);
-  if (props.height !== void 0) s.height = props.height;
-  if (props.overflow !== void 0) s.overflow = props.overflow;
-  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
-  if (props.gap !== void 0) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
-  if (props.boxSize !== void 0) {
-    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
-    s.width = v;
-    s.height = v;
-  }
-  if (props.py !== void 0) {
-    const v = sp(props.py);
-    s.paddingTop = v;
-    s.paddingBottom = v;
-  }
-  if (props.px !== void 0) {
-    const v = sp(props.px);
-    s.paddingLeft = v;
-    s.paddingRight = v;
-  }
-  if (props.p !== void 0) s.padding = sp(props.p);
-  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
-  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
-  if (props.position !== void 0) s.position = props.position;
-  if (props.background !== void 0) s.background = props.background;
-  return s;
-}
-function stripShims(props) {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out;
-}
 var SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React4.forwardRef(
   function Skeleton2(props, ref) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
     if (!loading) {
       if (asChild && React4.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React4.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
+      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
     }
     return /* @__PURE__ */ jsx(
-      Component,
+      "div",
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
-        style: mergedStyle,
-        ...htmlRest,
+        ...sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
         children
       }
     );
@@ -232,7 +99,7 @@ React4.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -242,11 +109,11 @@ React4.forwardRef(
 React4.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
       Skeleton,
       {
         loading,
-        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
       },
       index
     )) });

package/dist/tags.cjs

@@ -0,0 +1,385 @@
+"use client";
+'use strict';
+
+var React3 = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var gui = require('@hanzo/gui');
+var jsxRuntime = require('react/jsx-runtime');
+var usehooks = require('@uidotdev/usehooks');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
+var Skeleton = React3__namespace.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = true, asChild, className, children, style, ...rest } = props;
+    if (!loading) {
+      if (asChild && React3__namespace.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className, style, ...rest, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-loading": true,
+        ...ui.sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+React3__namespace.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        ...ui.sx("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React3__namespace.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        loading,
+        ...ui.sx(ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
+      },
+      index
+    )) });
+  }
+);
+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);
+  React3__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsTouch = () => useBelow(TOUCH_PX);
+function mapPlacement(p) {
+  if (!p) return void 0;
+  return p;
+}
+var Tooltip = React3__namespace.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow: showArrowProp,
+      onOpenChange,
+      variant,
+      selected,
+      children,
+      disabled,
+      disableOnMobile,
+      content,
+      contentProps,
+      defaultOpen = false,
+      triggerProps,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
+      positioning
+    } = props;
+    const [open, setOpen] = React3__namespace.useState(defaultOpen);
+    const timeoutRef = React3__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React3__namespace.useCallback((nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.({ open: nextOpen });
+    }, [onOpenChange]);
+    const handleOpenChangeManual = React3__namespace.useCallback((nextOpen) => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(nextOpen);
+        onOpenChange?.({ open: nextOpen });
+      }, nextOpen ? openDelay : closeDelay);
+    }, [closeDelay, openDelay, onOpenChange]);
+    const handleClickAway = React3__namespace.useCallback(() => {
+      if (open) handleOpenChangeManual(false);
+    }, [open, handleOpenChangeManual]);
+    const triggerRef = usehooks.useClickAway(handleClickAway);
+    const handleTriggerClick = React3__namespace.useCallback(() => {
+      handleOpenChangeManual(!open);
+    }, [handleOpenChangeManual, open]);
+    const handleContentClick = React3__namespace.useCallback((event) => {
+      event.stopPropagation();
+      if (interactive) {
+        const closestLink = event.target?.closest("a");
+        if (closestLink) {
+          handleOpenChangeManual(false);
+        }
+      }
+    }, [interactive, handleOpenChangeManual]);
+    React3__namespace.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    if (disabled || disableOnMobile && isMobile) return children;
+    const defaultShowArrow = variant === "popover" ? false : true;
+    const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
+    const isPopover = variant === "popover";
+    const placement = mapPlacement(positioning?.placement) ?? "top";
+    const offset = positioning?.offset?.mainAxis ?? 4;
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Tooltip,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        delay: { open: openDelay, close: closeDelay },
+        placement,
+        offset,
+        unstyled: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            gui.Tooltip.Trigger,
+            {
+              ref: triggerRef,
+              asChild: true,
+              ...isMobile ? { onClick: handleTriggerClick } : {},
+              ...triggerProps,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            gui.Tooltip.Content,
+            {
+              ref,
+              unstyled: true,
+              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,
+              children: [
+                showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  gui.Tooltip.Arrow,
+                  {
+                    unstyled: true,
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
+                  }
+                ),
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+function TruncatedTextTooltip({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
+}
+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 = {
+  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 TONE = {
+  subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
+  solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
+  outline: (p) => ({
+    backgroundColor: "transparent",
+    color: p.fg,
+    borderWidth: 1,
+    borderColor: p.fg
+  })
+};
+var Badge = React3__namespace.default.forwardRef(
+  function Badge2(props, ref) {
+    const {
+      loading,
+      startElement,
+      children,
+      truncated = false,
+      endElement,
+      variant = "subtle",
+      size = "md",
+      colorPalette = "gray",
+      className,
+      style: badgeStyle,
+      ...rest
+    } = props;
+    const palette = COLOR_PALETTE[colorPalette];
+    const tone = TONE[variant](palette);
+    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: tone.color, children })
+    ) : null;
+    const childrenElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
+    const badgeElement = /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.XStack,
+      {
+        ref,
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        borderRadius: 2,
+        gap: 4,
+        maxWidth: "100%",
+        userSelect: "text",
+        ...SIZE[size],
+        ...tone,
+        className,
+        style: badgeStyle,
+        ...rest,
+        children: [
+          startElement,
+          childrenElement,
+          endElement
+        ]
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, asChild: true, children: badgeElement });
+    }
+    return badgeElement;
+  }
+);
+var TONE2 = {
+  default: "gray",
+  secondary: "gray",
+  outline: "gray",
+  destructive: "red"
+};
+var Tags = React3__namespace.forwardRef(
+  ({ className, tags, onRemove, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        ref,
+        className: ui.cn("flex flex-wrap gap-2", className),
+        ...props,
+        children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Badge,
+          {
+            colorPalette: TONE2[variant],
+            ...ui.sx(ui.cn("gap-1", onRemove && "pr-1")),
+            children: [
+              tag.label,
+              onRemove && /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Box,
+                {
+                  tag: "button",
+                  type: "button",
+                  onClick: () => onRemove(tag.id),
+                  className: "ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { style: ui.css("h-3 w-3") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { tag: "span", className: "sr-only", children: [
+                      "Remove ",
+                      tag.label
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          tag.id
+        ))
+      }
+    );
+  }
+);
+Tags.displayName = "Tags";
+
+exports.Tags = Tags;

package/dist/tags.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface Tag {
+    id: string;
+    label: string;
+}
+export interface TagsProps extends React.HTMLAttributes<HTMLDivElement> {
+    tags: Tag[];
+    onRemove?: (id: string) => void;
+    variant?: "default" | "secondary" | "outline" | "destructive";
+}
+declare const Tags: React.ForwardRefExoticComponent<TagsProps & React.RefAttributes<HTMLDivElement>>;
+export { Tags };
+//# sourceMappingURL=tags.d.ts.map

package/dist/tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../src/tags.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,aAAa,CAAA;CAC9D;AAED,QAAA,MAAM,IAAI,kFA8BT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}