@flanksource/clicky-ui 0.1.0 → 0.2.1

package/dist/data/Badge.js

@@ -0,0 +1,667 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border border-transparent font-medium whitespace-nowrap align-middle",
+  {
+    variants: {
+      tone: {
+        neutral: "",
+        success: "",
+        danger: "",
+        warning: "",
+        info: ""
+      },
+      variant: {
+        soft: "",
+        solid: "",
+        outline: "bg-transparent"
+      },
+      size: {
+        xxs: "min-h-4 px-1.5 py-0.5 text-[9px] leading-none",
+        xs: "min-h-[18px] px-1.5 py-0.5 text-[10px] leading-none",
+        sm: "h-4 px-1.5 py-0 text-[10px] leading-none",
+        md: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      }
+    },
+    compoundVariants: [
+      { tone: "neutral", variant: "soft", class: "bg-muted text-foreground" },
+      { tone: "neutral", variant: "solid", class: "bg-foreground text-background" },
+      { tone: "neutral", variant: "outline", class: "border-border text-foreground" },
+      {
+        tone: "success",
+        variant: "soft",
+        class: "bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-green-300"
+      },
+      { tone: "success", variant: "solid", class: "bg-green-500 text-white" },
+      {
+        tone: "success",
+        variant: "outline",
+        class: "border-green-500 text-green-700 dark:text-green-400"
+      },
+      {
+        tone: "danger",
+        variant: "soft",
+        class: "bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-300"
+      },
+      { tone: "danger", variant: "solid", class: "bg-red-500 text-white" },
+      {
+        tone: "danger",
+        variant: "outline",
+        class: "border-red-500 text-red-700 dark:text-red-400"
+      },
+      {
+        tone: "warning",
+        variant: "soft",
+        class: "bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300"
+      },
+      { tone: "warning", variant: "solid", class: "bg-yellow-400 text-yellow-950" },
+      {
+        tone: "warning",
+        variant: "outline",
+        class: "border-yellow-500 text-yellow-700 dark:text-yellow-400"
+      },
+      {
+        tone: "info",
+        variant: "soft",
+        class: "bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300"
+      },
+      { tone: "info", variant: "solid", class: "bg-blue-500 text-white" },
+      {
+        tone: "info",
+        variant: "outline",
+        class: "border-blue-500 text-blue-700 dark:text-blue-400"
+      }
+    ],
+    defaultVariants: {
+      tone: "neutral",
+      variant: "soft",
+      size: "md"
+    }
+  }
+);
+const LEGACY_VARIANTS = /* @__PURE__ */ new Set(["soft", "solid", "outline"]);
+const RICH_VARIANTS = /* @__PURE__ */ new Set([
+  "status",
+  "metric",
+  "custom",
+  "outlined",
+  "label"
+]);
+const RICH_SIZE_CLASSES = {
+  xxs: {
+    frame: "min-h-4",
+    segment: "px-1.5 py-0.5",
+    text: "text-[10px] leading-4",
+    icon: "h-3 w-3",
+    gap: "gap-1"
+  },
+  xs: {
+    frame: "min-h-[18px]",
+    segment: "px-2 py-0.5",
+    text: "text-[11px] leading-4",
+    icon: "h-3.5 w-3.5",
+    gap: "gap-1"
+  },
+  sm: {
+    frame: "min-h-5",
+    segment: "px-2 py-0.5",
+    text: "text-xs leading-4",
+    icon: "h-3.5 w-3.5",
+    gap: "gap-1.5"
+  },
+  md: {
+    frame: "min-h-6",
+    segment: "px-2.5 py-1",
+    text: "text-sm leading-4",
+    icon: "h-4 w-4",
+    gap: "gap-1.5"
+  },
+  lg: {
+    frame: "min-h-7",
+    segment: "px-3 py-1.5",
+    text: "text-base leading-5",
+    icon: "h-5 w-5",
+    gap: "gap-2"
+  }
+};
+const STATUS_STYLES = {
+  success: {
+    soft: "bg-emerald-500/12 text-emerald-700 border-emerald-200",
+    outlined: "bg-background text-emerald-700 border-emerald-300"
+  },
+  error: {
+    soft: "bg-rose-500/12 text-rose-700 border-rose-200",
+    outlined: "bg-background text-rose-700 border-rose-300"
+  },
+  warning: {
+    soft: "bg-amber-400/15 text-amber-800 border-amber-200",
+    outlined: "bg-background text-amber-800 border-amber-300"
+  },
+  info: {
+    soft: "bg-sky-500/12 text-sky-700 border-sky-200",
+    outlined: "bg-background text-sky-700 border-sky-300"
+  }
+};
+function isLegacyVariant(variant) {
+  return variant != null && LEGACY_VARIANTS.has(variant);
+}
+function isCssColor(value) {
+  return value != null && /^(#|rgb|hsl|oklch|var\(|color\()/i.test(value);
+}
+function toneToStatus(tone) {
+  switch (tone) {
+    case "success":
+      return "success";
+    case "danger":
+      return "error";
+    case "warning":
+      return "warning";
+    case "info":
+      return "info";
+    default:
+      return void 0;
+  }
+}
+function getShapeClasses(shape) {
+  switch (shape) {
+    case "rounded":
+      return "rounded-md";
+    case "square":
+      return "rounded-sm";
+    default:
+      return "rounded-full";
+  }
+}
+function isRichVariant(variant) {
+  return variant != null && RICH_VARIANTS.has(variant);
+}
+function applyColorValue(value, property, style, classes) {
+  if (value == null) return;
+  if (isCssColor(value)) {
+    style[property] = value;
+    return;
+  }
+  classes.push(value);
+}
+function normalizeMaxWidth(maxWidth) {
+  if (maxWidth == null) return void 0;
+  if (typeof maxWidth === "number") {
+    return `${Math.max(1, Math.floor(maxWidth))}ch`;
+  }
+  return maxWidth;
+}
+function deriveCharacterBudget(maxWidth, fallback = 24) {
+  if (typeof maxWidth === "number" && Number.isFinite(maxWidth) && maxWidth > 0) {
+    return Math.max(4, Math.floor(maxWidth));
+  }
+  if (typeof maxWidth === "string") {
+    const trimmed = maxWidth.trim();
+    const chMatch = trimmed.match(/^(\d+(?:\.\d+)?)ch$/i);
+    if (chMatch) return Math.max(4, Math.floor(Number(chMatch[1])));
+    const numericMatch = trimmed.match(/^(\d+(?:\.\d+)?)$/);
+    if (numericMatch) return Math.max(4, Math.floor(Number(numericMatch[1])));
+  }
+  return fallback;
+}
+function shouldExposeFullTextTitle({
+  maxWidth,
+  truncate,
+  wrap
+}) {
+  return maxWidth != null || truncate != null || wrap;
+}
+function toPlainText(node) {
+  if (node == null || typeof node === "boolean") return null;
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    const pieces = Children.toArray(node).map(toPlainText);
+    return pieces.every((piece) => piece != null) ? pieces.join("") : null;
+  }
+  if (isValidElement(node)) {
+    return toPlainText(node.props.children);
+  }
+  return null;
+}
+function truncateSuffix(text, budget) {
+  if (text.length <= budget) return text;
+  if (budget <= 1) return "…";
+  return `${text.slice(0, budget - 1)}…`;
+}
+function truncatePrefix(text, budget) {
+  if (text.length <= budget) return text;
+  if (budget <= 1) return "…";
+  return `…${text.slice(-(budget - 1))}`;
+}
+function truncateMiddle(text, budget) {
+  if (text.length <= budget) return text;
+  if (budget <= 3) return truncateSuffix(text, budget);
+  const available = budget - 1;
+  const head = Math.max(1, Math.ceil(available / 2));
+  const tail = Math.max(1, available - head);
+  return `${text.slice(0, head)}…${text.slice(-tail)}`;
+}
+function truncateSegmentStart(text, budget) {
+  if (text.length <= budget) return text;
+  if (budget <= 2) return truncateSuffix(text, budget);
+  return `${text.slice(0, budget - 1)}…`;
+}
+function truncateSegmentEnd(text, budget) {
+  if (text.length <= budget) return text;
+  if (budget <= 2) return truncatePrefix(text, budget);
+  return `…${text.slice(-(budget - 1))}`;
+}
+function summarizeMiddlePathSegment(segment) {
+  if (segment == null || segment.length === 0) return "…";
+  if (segment.length <= 2) return `${segment}…`;
+  return `${segment[0]}…`;
+}
+function compressStructuredText(head, middle, tail, budget, separator) {
+  const pieces = [head];
+  if (middle) pieces.push(middle);
+  pieces.push(tail);
+  const preferred = pieces.join(separator);
+  if (preferred.length <= budget) return preferred;
+  const separatorCount = pieces.length - 1;
+  const reserved = separator.length * separatorCount + (middle ? middle.length : 0);
+  const available = Math.max(4, budget - reserved);
+  const headBudget = Math.max(3, Math.min(head.length, Math.floor(available * 0.4)));
+  const tailBudget = Math.max(4, available - headBudget);
+  const compactHead = truncateSegmentStart(head, headBudget);
+  const compactTail = truncateSegmentEnd(tail, tailBudget);
+  const compactPieces = [compactHead];
+  if (middle) compactPieces.push(middle);
+  compactPieces.push(compactTail);
+  const compact = compactPieces.join(separator);
+  return compact.length <= budget ? compact : truncateMiddle(preferred, budget);
+}
+function getStructuredBudget(budget) {
+  return Math.max(budget, 32);
+}
+function truncatePath(text, budget) {
+  const smartBudget = getStructuredBudget(budget);
+  const hasLeadingSlash = text.startsWith("/");
+  const segments = text.split("/").filter(Boolean);
+  if (segments.length < 2) return truncateMiddle(text, smartBudget);
+  const head = `${hasLeadingSlash ? "/" : ""}${segments[0]}`;
+  const tail = segments[segments.length - 1] ?? text;
+  const middle = segments.length > 2 ? summarizeMiddlePathSegment(segments.slice(1, -1).join("/")) : void 0;
+  return compressStructuredText(head, middle, tail, smartBudget, "/");
+}
+function truncateUrl(text, budget) {
+  const smartBudget = getStructuredBudget(budget);
+  try {
+    const url = new URL(text);
+    const host = url.host;
+    const pathSegments = url.pathname.split("/").filter(Boolean);
+    if (pathSegments.length === 0) {
+      if (host.length <= smartBudget) return host;
+      return truncateMiddle(`${host}${url.search}${url.hash}`, smartBudget);
+    }
+    if (pathSegments.length === 1) {
+      const singlePath = `${host}/${pathSegments[0] ?? host}`;
+      if (singlePath.length <= smartBudget) return singlePath;
+      const hostOnly = `${host}/…`;
+      return hostOnly.length <= smartBudget ? hostOnly : truncateMiddle(singlePath, smartBudget);
+    }
+    const tail = pathSegments[pathSegments.length - 1] ?? host;
+    const firstSegment = pathSegments[0] ?? "";
+    const summarizedMiddle = pathSegments.length > 2 ? summarizeMiddlePathSegment(pathSegments.slice(1, -1).join("/")) : void 0;
+    const candidates = [
+      [host, firstSegment, summarizedMiddle, tail].filter(Boolean).join("/"),
+      `${host}/…/${tail}`,
+      `${host}/…`
+    ];
+    const candidate = candidates.find((entry) => entry.length <= smartBudget);
+    return candidate ?? truncateMiddle(`${host}/${tail}`, smartBudget);
+  } catch {
+    return truncateMiddle(text, smartBudget);
+  }
+}
+function isLikelyUrl(text) {
+  return /^[a-z][a-z\d+\-.]*:\/\//i.test(text) || text.startsWith("//");
+}
+function isLikelyImage(text) {
+  if (/\s/.test(text) || isLikelyUrl(text) || text.startsWith("/")) return false;
+  if (!text.includes("/")) return false;
+  const tail = text.slice(text.lastIndexOf("/") + 1);
+  return tail.includes(":") || tail.includes("@sha256:");
+}
+function splitImageTail(segment) {
+  const digestIndex = segment.indexOf("@sha256:");
+  if (digestIndex >= 0) {
+    return {
+      name: segment.slice(0, digestIndex),
+      suffix: segment.slice(digestIndex)
+    };
+  }
+  const tagIndex = segment.lastIndexOf(":");
+  if (tagIndex > 0) {
+    return {
+      name: segment.slice(0, tagIndex),
+      suffix: segment.slice(tagIndex)
+    };
+  }
+  return { name: segment, suffix: "" };
+}
+function truncateImage(text, budget) {
+  const smartBudget = getStructuredBudget(budget);
+  const segments = text.split("/").filter(Boolean);
+  if (segments.length < 2) return truncateMiddle(text, smartBudget);
+  const tailSegment = segments[segments.length - 1] ?? text;
+  const tailParts = splitImageTail(tailSegment);
+  const tailNameOnly = `…${tailParts.name}`;
+  if (tailNameOnly.length <= smartBudget) return tailNameOnly;
+  if (segments.length === 2) {
+    return compressStructuredText(
+      segments[0] ?? text,
+      void 0,
+      tailParts.name || tailSegment,
+      smartBudget,
+      "/"
+    );
+  }
+  const head = `${segments[0]}/${segments[1] ?? ""}`.replace(/\/$/, "");
+  const tail = tailParts.suffix.length > 0 && smartBudget >= tailSegment.length ? tailSegment : tailParts.name || tailSegment;
+  const middle = segments.length > 3 ? summarizeMiddlePathSegment(segments.slice(2, -1).join("/")) : segments.length === 3 ? "…" : void 0;
+  return compressStructuredText(head, middle, tail, smartBudget, "/");
+}
+function truncateArn(text, budget) {
+  const smartBudget = getStructuredBudget(budget);
+  const parts = text.split(":");
+  if (parts.length < 6) return truncateMiddle(text, smartBudget);
+  const service = parts[2] ?? parts[1] ?? "arn";
+  const resource = parts.slice(5).join(":");
+  const resourceSegments = resource.split(/[/:]/).filter(Boolean);
+  const resourceType = resourceSegments.length > 1 ? resourceSegments[0] : void 0;
+  const resourceName = resourceSegments[resourceSegments.length - 1] ?? resource;
+  const resourceNameTail = resourceName.includes("-") && resourceName.split("-").length > 2 ? resourceName.split("-").slice(-2).join("-") : resourceName;
+  const typedTail = resourceType != null && resourceType !== resourceNameTail ? `${resourceType}/${resourceNameTail}` : resourceNameTail;
+  const preferred = `${service}:…${typedTail}`;
+  if (preferred.length <= smartBudget) return preferred;
+  const separatorBudget = 2;
+  const resourceBudget = Math.max(
+    4,
+    Math.min(resourceNameTail.length, smartBudget - separatorBudget - 2)
+  );
+  const serviceBudget = Math.max(2, smartBudget - resourceBudget - separatorBudget);
+  return `${truncateSegmentStart(service, serviceBudget)}:…${truncateMiddle(resourceNameTail, resourceBudget)}`;
+}
+function detectTruncateStyle(text) {
+  if (text.startsWith("arn:")) return "arn";
+  if (isLikelyUrl(text)) return "url";
+  if (isLikelyImage(text)) return "image";
+  if (text.includes("/")) return "path";
+  return "suffix";
+}
+function truncateText(text, truncate, maxWidth) {
+  const budget = deriveCharacterBudget(maxWidth);
+  const mode = truncate === "auto" ? detectTruncateStyle(text) : truncate;
+  switch (mode) {
+    case "prefix":
+      return truncatePrefix(text, budget);
+    case "suffix":
+      return truncateSuffix(text, budget);
+    case "arn":
+      return truncateArn(text, budget);
+    case "image":
+      return truncateImage(text, budget);
+    case "path":
+      return truncatePath(text, budget);
+    case "url":
+      return truncateUrl(text, budget);
+    default:
+      return truncateSuffix(text, budget);
+  }
+}
+function resolveDisplayNode(node, truncate, maxWidth, alwaysTitle = false) {
+  const fullText = toPlainText(node);
+  if (fullText == null || truncate == null) {
+    return {
+      content: node,
+      fullText,
+      title: alwaysTitle ? fullText ?? void 0 : void 0
+    };
+  }
+  const content = truncateText(fullText, truncate, maxWidth);
+  return {
+    content,
+    fullText,
+    title: alwaysTitle || content !== fullText ? fullText : void 0
+  };
+}
+function copyTextToClipboard(text) {
+  var _a;
+  const clipboard = (_a = globalThis.navigator) == null ? void 0 : _a.clipboard;
+  if ((clipboard == null ? void 0 : clipboard.writeText) == null) return;
+  void clipboard.writeText(text).catch(() => void 0);
+}
+function renderRoot({
+  href,
+  target,
+  rel,
+  className,
+  style,
+  content,
+  canCopy,
+  copyText
+}) {
+  if (href != null) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target,
+        rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+        className,
+        style,
+        children: content
+      }
+    );
+  }
+  if (canCopy && copyText != null) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className,
+        style,
+        onClick: () => copyTextToClipboard(copyText),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className, style, children: content });
+}
+function Badge({
+  tone,
+  variant,
+  size = "md",
+  icon,
+  count,
+  children,
+  className,
+  status,
+  label,
+  value,
+  color,
+  textColor,
+  borderColor,
+  shape,
+  href,
+  target = "_self",
+  rel,
+  wrap = false,
+  maxWidth,
+  truncate,
+  clickToCopy,
+  labelClassName,
+  valueClassName
+}) {
+  const richSignals = label != null || value != null || status != null || shape != null || href != null || wrap === true || color != null || textColor != null || borderColor != null || labelClassName != null || valueClassName != null;
+  const resolvedVariant = variant ?? (richSignals ? "metric" : "soft");
+  const normalizedMaxWidth = normalizeMaxWidth(maxWidth);
+  const shouldWrapText = wrap && truncate == null;
+  const showFullTextTitle = shouldExposeFullTextTitle({ maxWidth, truncate, wrap });
+  const textBehaviorClasses = shouldWrapText ? "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]" : normalizedMaxWidth != null || truncate != null ? "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" : "whitespace-nowrap";
+  if (isLegacyVariant(resolvedVariant)) {
+    const legacyStyle = {};
+    if (normalizedMaxWidth != null) {
+      legacyStyle.maxWidth = normalizedMaxWidth;
+    }
+    const legacyChildren = resolveDisplayNode(children, truncate, maxWidth, showFullTextTitle);
+    const legacyCopyText = legacyChildren.fullText ?? (count !== void 0 ? String(count) : void 0);
+    const canCopy2 = href == null && (clickToCopy ?? true) && legacyCopyText != null;
+    return renderRoot({
+      href,
+      target,
+      rel,
+      canCopy: canCopy2,
+      copyText: legacyCopyText,
+      className: cn(
+        badgeVariants({ tone, variant: resolvedVariant, size }),
+        (normalizedMaxWidth != null || shouldWrapText || truncate != null) && "min-w-0 max-w-full",
+        shouldWrapText && "whitespace-normal",
+        canCopy2 && "cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        className
+      ),
+      style: legacyStyle,
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-[1em]" }),
+        count !== void 0 && /* @__PURE__ */ jsx("span", { children: count }),
+        children != null && /* @__PURE__ */ jsx("span", { className: textBehaviorClasses, title: legacyChildren.title, children: legacyChildren.content })
+      ] })
+    });
+  }
+  if (!isRichVariant(resolvedVariant)) {
+    return null;
+  }
+  const semanticStatus = status ?? toneToStatus(tone) ?? "info";
+  const sizeClasses = RICH_SIZE_CLASSES[size];
+  const richLabel = label ?? children;
+  const richValue = value ?? (richLabel == null && count !== void 0 ? count : void 0);
+  const resolvedLabel = richValue == null ? resolveDisplayNode(richLabel, truncate, maxWidth, showFullTextTitle) : {
+    content: richLabel,
+    fullText: toPlainText(richLabel),
+    title: showFullTextTitle ? toPlainText(richLabel) ?? void 0 : void 0
+  };
+  const resolvedValue = richValue != null ? resolveDisplayNode(richValue, truncate, maxWidth, showFullTextTitle) : { content: richValue, fullText: void 0, title: void 0 };
+  const copyText = resolvedValue.fullText ?? resolvedLabel.fullText ?? (count !== void 0 ? String(count) : void 0);
+  const canCopy = href == null && (clickToCopy ?? true) && copyText != null;
+  const shapeClass = getShapeClasses(shape ?? "pill");
+  const wrapperStyle = {};
+  const wrapperClasses = [
+    "inline-flex align-middle items-stretch border font-medium shadow-none",
+    sizeClasses.frame,
+    sizeClasses.text,
+    normalizedMaxWidth != null || shouldWrapText || truncate != null ? "min-w-0 max-w-full" : "",
+    shapeClass,
+    shouldWrapText ? "whitespace-normal" : "whitespace-nowrap",
+    href ? "transition-opacity hover:opacity-80" : "",
+    canCopy ? "cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1" : ""
+  ];
+  if (normalizedMaxWidth != null) {
+    wrapperStyle.maxWidth = normalizedMaxWidth;
+  }
+  if (resolvedVariant === "status") {
+    wrapperClasses.push(STATUS_STYLES[semanticStatus].soft);
+  } else if (resolvedVariant === "metric") {
+    wrapperClasses.push("bg-muted/60 text-foreground border-border");
+  } else if (resolvedVariant === "outlined") {
+    if (status != null || toneToStatus(tone) != null) {
+      wrapperClasses.push(STATUS_STYLES[semanticStatus].outlined);
+    } else {
+      wrapperClasses.push("bg-background text-foreground border-border");
+    }
+  } else if (resolvedVariant === "custom") {
+    wrapperClasses.push("border-transparent bg-accent text-accent-foreground");
+  } else {
+    wrapperClasses.push("border-border bg-background text-foreground");
+  }
+  if (resolvedVariant === "custom" || resolvedVariant === "outlined" && status == null && toneToStatus(tone) == null) {
+    applyColorValue(color, "backgroundColor", wrapperStyle, wrapperClasses);
+    applyColorValue(textColor, "color", wrapperStyle, wrapperClasses);
+    applyColorValue(borderColor, "borderColor", wrapperStyle, wrapperClasses);
+  }
+  if (resolvedVariant !== "label" && borderColor != null && status == null && toneToStatus(tone) == null) {
+    applyColorValue(borderColor, "borderColor", wrapperStyle, wrapperClasses);
+  }
+  const iconEl = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("shrink-0", sizeClasses.icon) }) : null;
+  if (resolvedVariant === "label") {
+    const labelClasses2 = [
+      "inline-flex items-center self-stretch",
+      richValue != null ? "shrink-0" : "min-w-0",
+      sizeClasses.segment,
+      sizeClasses.gap,
+      richValue != null ? "border-r border-border/70" : ""
+    ];
+    const valueClasses2 = [
+      "inline-flex min-w-0 items-center self-stretch text-foreground",
+      richLabel != null || iconEl != null ? "flex-1" : "",
+      sizeClasses.segment
+    ];
+    const labelStyle = {};
+    if (richLabel != null || iconEl != null) {
+      labelClasses2.push("bg-secondary text-secondary-foreground");
+      applyColorValue(color, "backgroundColor", labelStyle, labelClasses2);
+      applyColorValue(textColor, "color", labelStyle, labelClasses2);
+    }
+    applyColorValue(borderColor, "borderColor", wrapperStyle, wrapperClasses);
+    return renderRoot({
+      href,
+      target,
+      rel,
+      canCopy,
+      copyText,
+      className: cn(wrapperClasses, className),
+      style: wrapperStyle,
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        (richLabel != null || iconEl != null) && /* @__PURE__ */ jsxs("span", { className: cn(labelClasses2, labelClassName), style: labelStyle, children: [
+          iconEl,
+          richLabel != null && /* @__PURE__ */ jsx("span", { className: textBehaviorClasses, title: resolvedLabel.title, children: resolvedLabel.content })
+        ] }),
+        richValue != null && /* @__PURE__ */ jsx("span", { className: cn(valueClasses2, valueClassName), children: /* @__PURE__ */ jsx("span", { className: textBehaviorClasses, title: resolvedValue.title, children: resolvedValue.content }) })
+      ] })
+    });
+  }
+  const labelClasses = [
+    "inline-flex items-center",
+    richValue != null ? "shrink-0" : "min-w-0",
+    sizeClasses.segment,
+    sizeClasses.gap,
+    richValue != null ? "border-r border-current/10" : ""
+  ];
+  const valueClasses = [
+    "inline-flex min-w-0 items-center font-semibold",
+    richLabel != null || iconEl != null ? "flex-1" : "",
+    sizeClasses.segment
+  ];
+  if (resolvedVariant === "metric") {
+    labelClasses.push("text-muted-foreground");
+    valueClasses.push("text-foreground");
+  }
+  return renderRoot({
+    href,
+    target,
+    rel,
+    canCopy,
+    copyText,
+    className: cn(wrapperClasses, className),
+    style: wrapperStyle,
+    content: /* @__PURE__ */ jsxs(Fragment, { children: [
+      (richLabel != null || iconEl != null) && /* @__PURE__ */ jsxs("span", { className: cn(labelClasses, labelClassName), children: [
+        iconEl,
+        richLabel != null && /* @__PURE__ */ jsx("span", { className: textBehaviorClasses, title: resolvedLabel.title, children: resolvedLabel.content })
+      ] }),
+      richValue != null && /* @__PURE__ */ jsx("span", { className: cn(valueClasses, valueClassName), children: /* @__PURE__ */ jsx("span", { className: textBehaviorClasses, title: resolvedValue.title, children: resolvedValue.content }) })
+    ] })
+  });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=Badge.js.map