@flanksource/clicky-ui 0.2.2 → 0.2.3

package/dist/data/Avatar.cjs

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const palette = require("../lib/palette.cjs");
+const size = require("../lib/size.cjs");
+const useDensity = require("../hooks/use-density.cjs");
+function hueForKey(key) {
+  return palette.fnv1a32(key) % 360;
+}
+function resolveInitials(alt, initials, maxLetters) {
+  if (initials == null ? void 0 : initials.trim()) {
+    return initials.trim().slice(0, maxLetters).toUpperCase();
+  }
+  const cleaned = alt.replace(/^@/, "").trim();
+  const lastSegment = cleaned.split(/[\\/]/).filter(Boolean).at(-1) ?? cleaned;
+  const parts = lastSegment.replace(/[^a-zA-Z0-9]+/g, " ").trim().split(/\s+/).filter(Boolean);
+  const letters = parts.map((part) => {
+    var _a;
+    return ((_a = part.match(/[a-zA-Z0-9]/)) == null ? void 0 : _a[0]) ?? "";
+  }).filter(Boolean).slice(0, maxLetters).join("");
+  if (letters) {
+    return letters.toUpperCase();
+  }
+  const compact = cleaned.replace(/[^a-zA-Z0-9]+/g, "");
+  return (compact.slice(0, maxLetters) || "?").toUpperCase();
+}
+function fallbackTone(variant, kind, hue) {
+  if (kind === "group") {
+    switch (variant) {
+      case "solid":
+        return {
+          background: "#d8d4cc",
+          borderColor: "#d8d4cc",
+          color: "#5a574e"
+        };
+      case "stamp":
+        return {
+          background: "#fafaf7",
+          borderColor: "#8d8778",
+          color: "#5a574e",
+          shadow: "2px 2px 0 rgba(90, 87, 78, 0.08)"
+        };
+      case "mono":
+        return {
+          background: "#f5f2eb",
+          borderColor: "#8d8778",
+          color: "#5a574e"
+        };
+      case "duotone":
+      default:
+        return {
+          background: "#f0ede6",
+          borderColor: "#b8b3a7",
+          borderStyle: "dashed",
+          color: "#5a574e"
+        };
+    }
+  }
+  switch (variant) {
+    case "solid":
+      return {
+        background: `oklch(0.55 0.12 ${hue})`,
+        borderColor: `oklch(0.55 0.12 ${hue})`,
+        color: "#fff"
+      };
+    case "stamp":
+      return {
+        background: "#fafaf7",
+        borderColor: `oklch(0.42 0.15 ${hue})`,
+        color: `oklch(0.42 0.15 ${hue})`,
+        shadow: "2px 2px 0 rgba(26, 26, 26, 0.08)"
+      };
+    case "mono":
+      return {
+        background: "#fff",
+        borderColor: "#1a1a1a",
+        color: "#1a1a1a"
+      };
+    case "duotone":
+    default:
+      return {
+        background: `oklch(0.93 0.04 ${hue})`,
+        borderColor: `oklch(0.55 0.14 ${hue} / 0.25)`,
+        color: `oklch(0.35 0.14 ${hue})`
+      };
+  }
+}
+function fontSizeFor(variant, size2) {
+  const minimum = size2 <= 16 ? 7 : size2 <= 20 ? 8 : 9;
+  switch (variant) {
+    case "stamp":
+      return Math.max(minimum, Math.round(size2 * 0.34));
+    case "mono":
+      return Math.max(minimum, Math.round(size2 * 0.36));
+    case "solid":
+    case "duotone":
+    default:
+      return Math.max(minimum, Math.round(size2 * 0.38));
+  }
+}
+function Avatar({
+  src,
+  alt,
+  initials,
+  size: size$1 = "sm",
+  rounded,
+  kind = "user",
+  variant = "duotone",
+  title,
+  href,
+  colorKey,
+  onError,
+  className
+}) {
+  const density = useDensity.useDensityValue();
+  const px = size.resolveSize(size$1, density);
+  const effectiveRounded = rounded ?? (kind === "group" ? "md" : "full");
+  const shape = effectiveRounded === "full" ? "rounded-full" : "rounded-md";
+  const key = colorKey ?? alt;
+  const hue = hueForKey(key);
+  const tone = fallbackTone(variant, kind, hue);
+  const maxLetters = size$1 === "xs" || size$1 === "sm" ? 1 : 2;
+  const text = resolveInitials(alt, initials, maxLetters);
+  const base = utils.cn(
+    "inline-flex shrink-0 select-none items-center justify-center overflow-hidden border",
+    shape
+  );
+  const frameStyle = {
+    width: px,
+    height: px,
+    borderColor: tone.borderColor,
+    borderStyle: tone.borderStyle ?? "solid"
+  };
+  if (variant === "stamp") {
+    frameStyle.transform = "rotate(-4deg)";
+    frameStyle.boxShadow = tone.shadow;
+  }
+  const weightFor = (v) => {
+    if (v === "stamp") return 700;
+    if (size$1 === "sm") return 500;
+    return 600;
+  };
+  const content = src ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      title: title ?? alt,
+      width: px,
+      height: px,
+      "data-avatar-kind": kind,
+      "data-avatar-variant": variant,
+      "data-avatar-size": size$1,
+      className: utils.cn(base, "bg-muted object-cover", className),
+      style: frameStyle,
+      loading: "lazy",
+      onError
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": alt,
+      "data-avatar-kind": kind,
+      "data-avatar-variant": variant,
+      "data-avatar-size": size$1,
+      className: utils.cn(
+        base,
+        variant === "mono" || variant === "stamp" ? "font-mono" : void 0,
+        variant === "mono" ? "tracking-[-0.05em]" : "tracking-[-0.02em]",
+        className
+      ),
+      style: {
+        ...frameStyle,
+        background: tone.background,
+        color: tone.color,
+        fontSize: fontSizeFor(variant, px),
+        fontWeight: weightFor(variant)
+      },
+      title: title ?? alt,
+      children: text
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex shrink-0",
+        onClick: (e) => e.stopPropagation(),
+        children: content
+      }
+    );
+  }
+  return content;
+}
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/data/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../src/data/Avatar.tsx"],"sourcesContent":["import type { CSSProperties, SyntheticEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { fnv1a32 } from \"../lib/palette\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarVariant = \"duotone\" | \"solid\" | \"stamp\" | \"mono\";\nexport type AvatarKind = \"user\" | \"group\";\n\nexport type AvatarProps = {\n  /** Image URL for the avatar. Falls back to initials when loading fails. */\n  src?: string;\n  /** Accessible name and fallback text seed. */\n  alt: string;\n  /** Explicit fallback initials. Defaults to initials derived from `alt`. */\n  initials?: string;\n  /**\n   * Named size token (xs..xl). The rendered px is resolved through the active\n   * density (`compact` shrinks, `spacious` grows). Size also drives typographic\n   * adjustments: `xs` shows a single initial; `sm` uses a lighter weight so the\n   * monogram stays quiet in dense list rows.\n   */\n  size?: SizeToken;\n  /** Border radius style. */\n  rounded?: \"full\" | \"md\";\n  /** Identity type, used to choose fallback palette rules. */\n  kind?: AvatarKind;\n  /** Fallback visual style. */\n  variant?: AvatarVariant;\n  /** Browser tooltip. */\n  title?: string;\n  /** Optional link URL. */\n  href?: string;\n  /**\n   * Selects the palette color for the initial-fallback. Defaults to `alt` so\n   * repeated rendering of the same identity stays consistent. Pass the full\n   * \"owner/name\" for repo avatars so two repos named \"cli\" under different\n   * orgs render with different colors.\n   */\n  colorKey?: string;\n  /** Called when the image fails to load. */\n  onError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Classes applied to the avatar root. */\n  className?: string;\n};\n\ntype AvatarTone = {\n  background: string;\n  borderColor: string;\n  borderStyle?: CSSProperties[\"borderStyle\"];\n  color: string;\n  shadow?: string;\n};\n\nfunction hueForKey(key: string): number {\n  return fnv1a32(key) % 360;\n}\n\nfunction resolveInitials(alt: string, initials: string | undefined, maxLetters: number): string {\n  if (initials?.trim()) {\n    return initials.trim().slice(0, maxLetters).toUpperCase();\n  }\n\n  const cleaned = alt.replace(/^@/, \"\").trim();\n  const lastSegment = cleaned.split(/[\\\\/]/).filter(Boolean).at(-1) ?? cleaned;\n  const parts = lastSegment\n    .replace(/[^a-zA-Z0-9]+/g, \" \")\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean);\n  const letters = parts\n    .map((part) => part.match(/[a-zA-Z0-9]/)?.[0] ?? \"\")\n    .filter(Boolean)\n    .slice(0, maxLetters)\n    .join(\"\");\n\n  if (letters) {\n    return letters.toUpperCase();\n  }\n\n  const compact = cleaned.replace(/[^a-zA-Z0-9]+/g, \"\");\n  return (compact.slice(0, maxLetters) || \"?\").toUpperCase();\n}\n\nfunction fallbackTone(variant: AvatarVariant, kind: AvatarKind, hue: number): AvatarTone {\n  if (kind === \"group\") {\n    switch (variant) {\n      case \"solid\":\n        return {\n          background: \"#d8d4cc\",\n          borderColor: \"#d8d4cc\",\n          color: \"#5a574e\",\n        };\n      case \"stamp\":\n        return {\n          background: \"#fafaf7\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n          shadow: \"2px 2px 0 rgba(90, 87, 78, 0.08)\",\n        };\n      case \"mono\":\n        return {\n          background: \"#f5f2eb\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n        };\n      case \"duotone\":\n      default:\n        return {\n          background: \"#f0ede6\",\n          borderColor: \"#b8b3a7\",\n          borderStyle: \"dashed\",\n          color: \"#5a574e\",\n        };\n    }\n  }\n\n  switch (variant) {\n    case \"solid\":\n      return {\n        background: `oklch(0.55 0.12 ${hue})`,\n        borderColor: `oklch(0.55 0.12 ${hue})`,\n        color: \"#fff\",\n      };\n    case \"stamp\":\n      return {\n        background: \"#fafaf7\",\n        borderColor: `oklch(0.42 0.15 ${hue})`,\n        color: `oklch(0.42 0.15 ${hue})`,\n        shadow: \"2px 2px 0 rgba(26, 26, 26, 0.08)\",\n      };\n    case \"mono\":\n      return {\n        background: \"#fff\",\n        borderColor: \"#1a1a1a\",\n        color: \"#1a1a1a\",\n      };\n    case \"duotone\":\n    default:\n      return {\n        background: `oklch(0.93 0.04 ${hue})`,\n        borderColor: `oklch(0.55 0.14 ${hue} / 0.25)`,\n        color: `oklch(0.35 0.14 ${hue})`,\n      };\n  }\n}\n\nfunction fontSizeFor(variant: AvatarVariant, size: number): number {\n  const minimum = size <= 16 ? 7 : size <= 20 ? 8 : 9;\n\n  switch (variant) {\n    case \"stamp\":\n      return Math.max(minimum, Math.round(size * 0.34));\n    case \"mono\":\n      return Math.max(minimum, Math.round(size * 0.36));\n    case \"solid\":\n    case \"duotone\":\n    default:\n      return Math.max(minimum, Math.round(size * 0.38));\n  }\n}\n\nexport function Avatar({\n  src,\n  alt,\n  initials,\n  size = \"sm\",\n  rounded,\n  kind = \"user\",\n  variant = \"duotone\",\n  title,\n  href,\n  colorKey,\n  onError,\n  className,\n}: AvatarProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n  const effectiveRounded = rounded ?? (kind === \"group\" ? \"md\" : \"full\");\n  const shape = effectiveRounded === \"full\" ? \"rounded-full\" : \"rounded-md\";\n  const key = colorKey ?? alt;\n  const hue = hueForKey(key);\n  const tone = fallbackTone(variant, kind, hue);\n  const maxLetters = size === \"xs\" || size === \"sm\" ? 1 : 2;\n  const text = resolveInitials(alt, initials, maxLetters);\n  const base = cn(\n    \"inline-flex shrink-0 select-none items-center justify-center overflow-hidden border\",\n    shape,\n  );\n  const frameStyle: CSSProperties = {\n    width: px,\n    height: px,\n    borderColor: tone.borderColor,\n    borderStyle: tone.borderStyle ?? \"solid\",\n  };\n\n  if (variant === \"stamp\") {\n    frameStyle.transform = \"rotate(-4deg)\";\n    frameStyle.boxShadow = tone.shadow;\n  }\n\n  const weightFor = (v: AvatarVariant): number => {\n    if (v === \"stamp\") return 700;\n    if (size === \"sm\") return 500;\n    return 600;\n  };\n\n  const content = src ? (\n    <img\n      src={src}\n      alt={alt}\n      title={title ?? alt}\n      width={px}\n      height={px}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(base, \"bg-muted object-cover\", className)}\n      style={frameStyle}\n      loading=\"lazy\"\n      onError={onError}\n    />\n  ) : (\n    <span\n      role=\"img\"\n      aria-label={alt}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(\n        base,\n        variant === \"mono\" || variant === \"stamp\" ? \"font-mono\" : undefined,\n        variant === \"mono\" ? \"tracking-[-0.05em]\" : \"tracking-[-0.02em]\",\n        className,\n      )}\n      style={{\n        ...frameStyle,\n        background: tone.background,\n        color: tone.color,\n        fontSize: fontSizeFor(variant, px),\n        fontWeight: weightFor(variant),\n      }}\n      title={title ?? alt}\n    >\n      {text}\n    </span>\n  );\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex shrink-0\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        {content}\n      </a>\n    );\n  }\n  return content;\n}\n"],"names":["fnv1a32","size","useDensityValue","resolveSize","cn","jsx"],"mappings":";;;;;;;AAsDA,SAAS,UAAU,KAAqB;AACtC,SAAOA,QAAAA,QAAQ,GAAG,IAAI;AACxB;AAEA,SAAS,gBAAgB,KAAa,UAA8B,YAA4B;AAC9F,MAAI,qCAAU,QAAQ;AACpB,WAAO,SAAS,OAAO,MAAM,GAAG,UAAU,EAAE,YAAA;AAAA,EAC9C;AAEA,QAAM,UAAU,IAAI,QAAQ,MAAM,EAAE,EAAE,KAAA;AACtC,QAAM,cAAc,QAAQ,MAAM,OAAO,EAAE,OAAO,OAAO,EAAE,GAAG,EAAE,KAAK;AACrE,QAAM,QAAQ,YACX,QAAQ,kBAAkB,GAAG,EAC7B,KAAA,EACA,MAAM,KAAK,EACX,OAAO,OAAO;AACjB,QAAM,UAAU,MACb,IAAI,CAAC;;AAAS,uBAAK,MAAM,aAAa,MAAxB,mBAA4B,OAAM;AAAA,GAAE,EAClD,OAAO,OAAO,EACd,MAAM,GAAG,UAAU,EACnB,KAAK,EAAE;AAEV,MAAI,SAAS;AACX,WAAO,QAAQ,YAAA;AAAA,EACjB;AAEA,QAAM,UAAU,QAAQ,QAAQ,kBAAkB,EAAE;AACpD,UAAQ,QAAQ,MAAM,GAAG,UAAU,KAAK,KAAK,YAAA;AAC/C;AAEA,SAAS,aAAa,SAAwB,MAAkB,KAAyB;AACvF,MAAI,SAAS,SAAS;AACpB,YAAQ,SAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,UACL,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,OAAO;AAAA,QAAA;AAAA,MAEX,KAAK;AACH,eAAO;AAAA,UACL,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAEZ,KAAK;AACH,eAAO;AAAA,UACL,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,OAAO;AAAA,QAAA;AAAA,MAEX,KAAK;AAAA,MACL;AACE,eAAO;AAAA,UACL,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,aAAa;AAAA,UACb,OAAO;AAAA,QAAA;AAAA,IACT;AAAA,EAEN;AAEA,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,QACL,YAAY,mBAAmB,GAAG;AAAA,QAClC,aAAa,mBAAmB,GAAG;AAAA,QACnC,OAAO;AAAA,MAAA;AAAA,IAEX,KAAK;AACH,aAAO;AAAA,QACL,YAAY;AAAA,QACZ,aAAa,mBAAmB,GAAG;AAAA,QACnC,OAAO,mBAAmB,GAAG;AAAA,QAC7B,QAAQ;AAAA,MAAA;AAAA,IAEZ,KAAK;AACH,aAAO;AAAA,QACL,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,OAAO;AAAA,MAAA;AAAA,IAEX,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,YAAY,mBAAmB,GAAG;AAAA,QAClC,aAAa,mBAAmB,GAAG;AAAA,QACnC,OAAO,mBAAmB,GAAG;AAAA,MAAA;AAAA,EAC/B;AAEN;AAEA,SAAS,YAAY,SAAwBC,OAAsB;AACjE,QAAM,UAAUA,SAAQ,KAAK,IAAIA,SAAQ,KAAK,IAAI;AAElD,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO,KAAK,IAAI,SAAS,KAAK,MAAMA,QAAO,IAAI,CAAC;AAAA,IAClD,KAAK;AACH,aAAO,KAAK,IAAI,SAAS,KAAK,MAAMA,QAAO,IAAI,CAAC;AAAA,IAClD,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,KAAK,IAAI,SAAS,KAAK,MAAMA,QAAO,IAAI,CAAC;AAAA,EAAA;AAEtD;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EAAA,MACAA,SAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,UAAUC,WAAAA,gBAAA;AAChB,QAAM,KAAKC,KAAAA,YAAYF,QAAM,OAAO;AACpC,QAAM,mBAAmB,YAAY,SAAS,UAAU,OAAO;AAC/D,QAAM,QAAQ,qBAAqB,SAAS,iBAAiB;AAC7D,QAAM,MAAM,YAAY;AACxB,QAAM,MAAM,UAAU,GAAG;AACzB,QAAM,OAAO,aAAa,SAAS,MAAM,GAAG;AAC5C,QAAM,aAAaA,WAAS,QAAQA,WAAS,OAAO,IAAI;AACxD,QAAM,OAAO,gBAAgB,KAAK,UAAU,UAAU;AACtD,QAAM,OAAOG,MAAAA;AAAAA,IACX;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAA4B;AAAA,IAChC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa,KAAK;AAAA,IAClB,aAAa,KAAK,eAAe;AAAA,EAAA;AAGnC,MAAI,YAAY,SAAS;AACvB,eAAW,YAAY;AACvB,eAAW,YAAY,KAAK;AAAA,EAC9B;AAEA,QAAM,YAAY,CAAC,MAA6B;AAC9C,QAAI,MAAM,QAAS,QAAO;AAC1B,QAAIH,WAAS,KAAM,QAAO;AAC1B,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,MACdI,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,oBAAkB;AAAA,MAClB,uBAAqB;AAAA,MACrB,oBAAkBJ;AAAAA,MAClB,WAAWG,MAAAA,GAAG,MAAM,yBAAyB,SAAS;AAAA,MACtD,OAAO;AAAA,MACP,SAAQ;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,IAGFC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,uBAAqB;AAAA,MACrB,oBAAkBJ;AAAAA,MAClB,WAAWG,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,UAAU,YAAY,UAAU,cAAc;AAAA,QAC1D,YAAY,SAAS,uBAAuB;AAAA,QAC5C;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY,KAAK;AAAA,QACjB,OAAO,KAAK;AAAA,QACZ,UAAU,YAAY,SAAS,EAAE;AAAA,QACjC,YAAY,UAAU,OAAO;AAAA,MAAA;AAAA,MAE/B,OAAO,SAAS;AAAA,MAEf,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL,MAAI,MAAM;AACR,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,QAEjB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,SAAO;AACT;;"}

package/dist/data/Avatar.d.ts

@@ -3,8 +3,11 @@ import { SizeToken } from '../lib/size';
 export type AvatarVariant = "duotone" | "solid" | "stamp" | "mono";
 export type AvatarKind = "user" | "group";
 export type AvatarProps = {
+    /** Image URL for the avatar. Falls back to initials when loading fails. */
     src?: string;
+    /** Accessible name and fallback text seed. */
     alt: string;
+    /** Explicit fallback initials. Defaults to initials derived from `alt`. */
     initials?: string;
     /**
      * Named size token (xs..xl). The rendered px is resolved through the active
@@ -13,10 +16,15 @@ export type AvatarProps = {
      * monogram stays quiet in dense list rows.
      */
     size?: SizeToken;
+    /** Border radius style. */
     rounded?: "full" | "md";
+    /** Identity type, used to choose fallback palette rules. */
     kind?: AvatarKind;
+    /** Fallback visual style. */
     variant?: AvatarVariant;
+    /** Browser tooltip. */
     title?: string;
+    /** Optional link URL. */
     href?: string;
     /**
      * Selects the palette color for the initial-fallback. Defaults to `alt` so
@@ -25,7 +33,9 @@ export type AvatarProps = {
      * orgs render with different colors.
      */
     colorKey?: string;
+    /** Called when the image fails to load. */
     onError?: (e: SyntheticEvent<HTMLImageElement>) => void;
+    /** Classes applied to the avatar root. */
     className?: string;
 };
 export declare function Avatar({ src, alt, initials, size, rounded, kind, variant, title, href, colorKey, onError, className, }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/data/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/data/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsHF,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAW,EACX,OAAO,EACP,IAAa,EACb,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,WAAW,2CAuFb"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/data/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsHF,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAW,EACX,OAAO,EACP,IAAa,EACb,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,WAAW,2CAuFb"}

package/dist/data/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/data/Avatar.tsx"],"sourcesContent":["import type { CSSProperties, SyntheticEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { fnv1a32 } from \"../lib/palette\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarVariant = \"duotone\" | \"solid\" | \"stamp\" | \"mono\";\nexport type AvatarKind = \"user\" | \"group\";\n\nexport type AvatarProps = {\n  src?: string;\n  alt: string;\n  initials?: string;\n  /**\n   * Named size token (xs..xl). The rendered px is resolved through the active\n   * density (`compact` shrinks, `spacious` grows). Size also drives typographic\n   * adjustments: `xs` shows a single initial; `sm` uses a lighter weight so the\n   * monogram stays quiet in dense list rows.\n   */\n  size?: SizeToken;\n  rounded?: \"full\" | \"md\";\n  kind?: AvatarKind;\n  variant?: AvatarVariant;\n  title?: string;\n  href?: string;\n  /**\n   * Selects the palette color for the initial-fallback. Defaults to `alt` so\n   * repeated rendering of the same identity stays consistent. Pass the full\n   * \"owner/name\" for repo avatars so two repos named \"cli\" under different\n   * orgs render with different colors.\n   */\n  colorKey?: string;\n  onError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  className?: string;\n};\n\ntype AvatarTone = {\n  background: string;\n  borderColor: string;\n  borderStyle?: CSSProperties[\"borderStyle\"];\n  color: string;\n  shadow?: string;\n};\n\nfunction hueForKey(key: string): number {\n  return fnv1a32(key) % 360;\n}\n\nfunction resolveInitials(alt: string, initials: string | undefined, maxLetters: number): string {\n  if (initials?.trim()) {\n    return initials.trim().slice(0, maxLetters).toUpperCase();\n  }\n\n  const cleaned = alt.replace(/^@/, \"\").trim();\n  const lastSegment = cleaned.split(/[\\\\/]/).filter(Boolean).at(-1) ?? cleaned;\n  const parts = lastSegment\n    .replace(/[^a-zA-Z0-9]+/g, \" \")\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean);\n  const letters = parts\n    .map((part) => part.match(/[a-zA-Z0-9]/)?.[0] ?? \"\")\n    .filter(Boolean)\n    .slice(0, maxLetters)\n    .join(\"\");\n\n  if (letters) {\n    return letters.toUpperCase();\n  }\n\n  const compact = cleaned.replace(/[^a-zA-Z0-9]+/g, \"\");\n  return (compact.slice(0, maxLetters) || \"?\").toUpperCase();\n}\n\nfunction fallbackTone(variant: AvatarVariant, kind: AvatarKind, hue: number): AvatarTone {\n  if (kind === \"group\") {\n    switch (variant) {\n      case \"solid\":\n        return {\n          background: \"#d8d4cc\",\n          borderColor: \"#d8d4cc\",\n          color: \"#5a574e\",\n        };\n      case \"stamp\":\n        return {\n          background: \"#fafaf7\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n          shadow: \"2px 2px 0 rgba(90, 87, 78, 0.08)\",\n        };\n      case \"mono\":\n        return {\n          background: \"#f5f2eb\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n        };\n      case \"duotone\":\n      default:\n        return {\n          background: \"#f0ede6\",\n          borderColor: \"#b8b3a7\",\n          borderStyle: \"dashed\",\n          color: \"#5a574e\",\n        };\n    }\n  }\n\n  switch (variant) {\n    case \"solid\":\n      return {\n        background: `oklch(0.55 0.12 ${hue})`,\n        borderColor: `oklch(0.55 0.12 ${hue})`,\n        color: \"#fff\",\n      };\n    case \"stamp\":\n      return {\n        background: \"#fafaf7\",\n        borderColor: `oklch(0.42 0.15 ${hue})`,\n        color: `oklch(0.42 0.15 ${hue})`,\n        shadow: \"2px 2px 0 rgba(26, 26, 26, 0.08)\",\n      };\n    case \"mono\":\n      return {\n        background: \"#fff\",\n        borderColor: \"#1a1a1a\",\n        color: \"#1a1a1a\",\n      };\n    case \"duotone\":\n    default:\n      return {\n        background: `oklch(0.93 0.04 ${hue})`,\n        borderColor: `oklch(0.55 0.14 ${hue} / 0.25)`,\n        color: `oklch(0.35 0.14 ${hue})`,\n      };\n  }\n}\n\nfunction fontSizeFor(variant: AvatarVariant, size: number): number {\n  const minimum = size <= 16 ? 7 : size <= 20 ? 8 : 9;\n\n  switch (variant) {\n    case \"stamp\":\n      return Math.max(minimum, Math.round(size * 0.34));\n    case \"mono\":\n      return Math.max(minimum, Math.round(size * 0.36));\n    case \"solid\":\n    case \"duotone\":\n    default:\n      return Math.max(minimum, Math.round(size * 0.38));\n  }\n}\n\nexport function Avatar({\n  src,\n  alt,\n  initials,\n  size = \"sm\",\n  rounded,\n  kind = \"user\",\n  variant = \"duotone\",\n  title,\n  href,\n  colorKey,\n  onError,\n  className,\n}: AvatarProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n  const effectiveRounded = rounded ?? (kind === \"group\" ? \"md\" : \"full\");\n  const shape = effectiveRounded === \"full\" ? \"rounded-full\" : \"rounded-md\";\n  const key = colorKey ?? alt;\n  const hue = hueForKey(key);\n  const tone = fallbackTone(variant, kind, hue);\n  const maxLetters = size === \"xs\" || size === \"sm\" ? 1 : 2;\n  const text = resolveInitials(alt, initials, maxLetters);\n  const base = cn(\n    \"inline-flex shrink-0 select-none items-center justify-center overflow-hidden border\",\n    shape,\n  );\n  const frameStyle: CSSProperties = {\n    width: px,\n    height: px,\n    borderColor: tone.borderColor,\n    borderStyle: tone.borderStyle ?? \"solid\",\n  };\n\n  if (variant === \"stamp\") {\n    frameStyle.transform = \"rotate(-4deg)\";\n    frameStyle.boxShadow = tone.shadow;\n  }\n\n  const weightFor = (v: AvatarVariant): number => {\n    if (v === \"stamp\") return 700;\n    if (size === \"sm\") return 500;\n    return 600;\n  };\n\n  const content = src ? (\n    <img\n      src={src}\n      alt={alt}\n      title={title ?? alt}\n      width={px}\n      height={px}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(base, \"bg-muted object-cover\", className)}\n      style={frameStyle}\n      loading=\"lazy\"\n      onError={onError}\n    />\n  ) : (\n    <span\n      role=\"img\"\n      aria-label={alt}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(\n        base,\n        variant === \"mono\" || variant === \"stamp\" ? \"font-mono\" : undefined,\n        variant === \"mono\" ? \"tracking-[-0.05em]\" : \"tracking-[-0.02em]\",\n        className,\n      )}\n      style={{\n        ...frameStyle,\n        background: tone.background,\n        color: tone.color,\n        fontSize: fontSizeFor(variant, px),\n        fontWeight: weightFor(variant),\n      }}\n      title={title ?? alt}\n    >\n      {text}\n    </span>\n  );\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex shrink-0\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        {content}\n      </a>\n    );\n  }\n  return content;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../src/data/Avatar.tsx"],"sourcesContent":["import type { CSSProperties, SyntheticEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { fnv1a32 } from \"../lib/palette\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarVariant = \"duotone\" | \"solid\" | \"stamp\" | \"mono\";\nexport type AvatarKind = \"user\" | \"group\";\n\nexport type AvatarProps = {\n  /** Image URL for the avatar. Falls back to initials when loading fails. */\n  src?: string;\n  /** Accessible name and fallback text seed. */\n  alt: string;\n  /** Explicit fallback initials. Defaults to initials derived from `alt`. */\n  initials?: string;\n  /**\n   * Named size token (xs..xl). The rendered px is resolved through the active\n   * density (`compact` shrinks, `spacious` grows). Size also drives typographic\n   * adjustments: `xs` shows a single initial; `sm` uses a lighter weight so the\n   * monogram stays quiet in dense list rows.\n   */\n  size?: SizeToken;\n  /** Border radius style. */\n  rounded?: \"full\" | \"md\";\n  /** Identity type, used to choose fallback palette rules. */\n  kind?: AvatarKind;\n  /** Fallback visual style. */\n  variant?: AvatarVariant;\n  /** Browser tooltip. */\n  title?: string;\n  /** Optional link URL. */\n  href?: string;\n  /**\n   * Selects the palette color for the initial-fallback. Defaults to `alt` so\n   * repeated rendering of the same identity stays consistent. Pass the full\n   * \"owner/name\" for repo avatars so two repos named \"cli\" under different\n   * orgs render with different colors.\n   */\n  colorKey?: string;\n  /** Called when the image fails to load. */\n  onError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n  /** Classes applied to the avatar root. */\n  className?: string;\n};\n\ntype AvatarTone = {\n  background: string;\n  borderColor: string;\n  borderStyle?: CSSProperties[\"borderStyle\"];\n  color: string;\n  shadow?: string;\n};\n\nfunction hueForKey(key: string): number {\n  return fnv1a32(key) % 360;\n}\n\nfunction resolveInitials(alt: string, initials: string | undefined, maxLetters: number): string {\n  if (initials?.trim()) {\n    return initials.trim().slice(0, maxLetters).toUpperCase();\n  }\n\n  const cleaned = alt.replace(/^@/, \"\").trim();\n  const lastSegment = cleaned.split(/[\\\\/]/).filter(Boolean).at(-1) ?? cleaned;\n  const parts = lastSegment\n    .replace(/[^a-zA-Z0-9]+/g, \" \")\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean);\n  const letters = parts\n    .map((part) => part.match(/[a-zA-Z0-9]/)?.[0] ?? \"\")\n    .filter(Boolean)\n    .slice(0, maxLetters)\n    .join(\"\");\n\n  if (letters) {\n    return letters.toUpperCase();\n  }\n\n  const compact = cleaned.replace(/[^a-zA-Z0-9]+/g, \"\");\n  return (compact.slice(0, maxLetters) || \"?\").toUpperCase();\n}\n\nfunction fallbackTone(variant: AvatarVariant, kind: AvatarKind, hue: number): AvatarTone {\n  if (kind === \"group\") {\n    switch (variant) {\n      case \"solid\":\n        return {\n          background: \"#d8d4cc\",\n          borderColor: \"#d8d4cc\",\n          color: \"#5a574e\",\n        };\n      case \"stamp\":\n        return {\n          background: \"#fafaf7\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n          shadow: \"2px 2px 0 rgba(90, 87, 78, 0.08)\",\n        };\n      case \"mono\":\n        return {\n          background: \"#f5f2eb\",\n          borderColor: \"#8d8778\",\n          color: \"#5a574e\",\n        };\n      case \"duotone\":\n      default:\n        return {\n          background: \"#f0ede6\",\n          borderColor: \"#b8b3a7\",\n          borderStyle: \"dashed\",\n          color: \"#5a574e\",\n        };\n    }\n  }\n\n  switch (variant) {\n    case \"solid\":\n      return {\n        background: `oklch(0.55 0.12 ${hue})`,\n        borderColor: `oklch(0.55 0.12 ${hue})`,\n        color: \"#fff\",\n      };\n    case \"stamp\":\n      return {\n        background: \"#fafaf7\",\n        borderColor: `oklch(0.42 0.15 ${hue})`,\n        color: `oklch(0.42 0.15 ${hue})`,\n        shadow: \"2px 2px 0 rgba(26, 26, 26, 0.08)\",\n      };\n    case \"mono\":\n      return {\n        background: \"#fff\",\n        borderColor: \"#1a1a1a\",\n        color: \"#1a1a1a\",\n      };\n    case \"duotone\":\n    default:\n      return {\n        background: `oklch(0.93 0.04 ${hue})`,\n        borderColor: `oklch(0.55 0.14 ${hue} / 0.25)`,\n        color: `oklch(0.35 0.14 ${hue})`,\n      };\n  }\n}\n\nfunction fontSizeFor(variant: AvatarVariant, size: number): number {\n  const minimum = size <= 16 ? 7 : size <= 20 ? 8 : 9;\n\n  switch (variant) {\n    case \"stamp\":\n      return Math.max(minimum, Math.round(size * 0.34));\n    case \"mono\":\n      return Math.max(minimum, Math.round(size * 0.36));\n    case \"solid\":\n    case \"duotone\":\n    default:\n      return Math.max(minimum, Math.round(size * 0.38));\n  }\n}\n\nexport function Avatar({\n  src,\n  alt,\n  initials,\n  size = \"sm\",\n  rounded,\n  kind = \"user\",\n  variant = \"duotone\",\n  title,\n  href,\n  colorKey,\n  onError,\n  className,\n}: AvatarProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n  const effectiveRounded = rounded ?? (kind === \"group\" ? \"md\" : \"full\");\n  const shape = effectiveRounded === \"full\" ? \"rounded-full\" : \"rounded-md\";\n  const key = colorKey ?? alt;\n  const hue = hueForKey(key);\n  const tone = fallbackTone(variant, kind, hue);\n  const maxLetters = size === \"xs\" || size === \"sm\" ? 1 : 2;\n  const text = resolveInitials(alt, initials, maxLetters);\n  const base = cn(\n    \"inline-flex shrink-0 select-none items-center justify-center overflow-hidden border\",\n    shape,\n  );\n  const frameStyle: CSSProperties = {\n    width: px,\n    height: px,\n    borderColor: tone.borderColor,\n    borderStyle: tone.borderStyle ?? \"solid\",\n  };\n\n  if (variant === \"stamp\") {\n    frameStyle.transform = \"rotate(-4deg)\";\n    frameStyle.boxShadow = tone.shadow;\n  }\n\n  const weightFor = (v: AvatarVariant): number => {\n    if (v === \"stamp\") return 700;\n    if (size === \"sm\") return 500;\n    return 600;\n  };\n\n  const content = src ? (\n    <img\n      src={src}\n      alt={alt}\n      title={title ?? alt}\n      width={px}\n      height={px}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(base, \"bg-muted object-cover\", className)}\n      style={frameStyle}\n      loading=\"lazy\"\n      onError={onError}\n    />\n  ) : (\n    <span\n      role=\"img\"\n      aria-label={alt}\n      data-avatar-kind={kind}\n      data-avatar-variant={variant}\n      data-avatar-size={size}\n      className={cn(\n        base,\n        variant === \"mono\" || variant === \"stamp\" ? \"font-mono\" : undefined,\n        variant === \"mono\" ? \"tracking-[-0.05em]\" : \"tracking-[-0.02em]\",\n        className,\n      )}\n      style={{\n        ...frameStyle,\n        background: tone.background,\n        color: tone.color,\n        fontSize: fontSizeFor(variant, px),\n        fontWeight: weightFor(variant),\n      }}\n      title={title ?? alt}\n    >\n      {text}\n    </span>\n  );\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex shrink-0\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        {content}\n      </a>\n    );\n  }\n  return content;\n}\n"],"names":[],"mappings":"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"}

package/dist/data/AvatarBadge.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Avatar = require("./Avatar.cjs");
+const Icon = require("./Icon.cjs");
+const utils = require("../lib/utils.cjs");
+const size = require("../lib/size.cjs");
+const useDensity = require("../hooks/use-density.cjs");
+function AvatarBadge({
+  alt,
+  label = alt,
+  initials,
+  avatarKind = "user",
+  avatarVariant = "duotone",
+  size: size$1 = "lg",
+  title,
+  statusIcon,
+  statusTone = "neutral",
+  statusTitle,
+  comment,
+  borderColor,
+  className,
+  badgeClassName,
+  labelClassName,
+  commentClassName,
+  style,
+  badgeStyle
+}) {
+  const density = useDensity.useDensityValue();
+  const px = size.resolveSize(size$1, density);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils.cn("inline-flex max-w-[50ch] min-w-0 flex-col items-start", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: utils.cn(
+              "inline-flex max-w-[40ch] min-w-0 items-center gap-2 overflow-visible rounded-full border bg-background shadow-sm",
+              badgeClassName
+            ),
+            style: {
+              height: px,
+              borderColor,
+              ...badgeStyle
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Avatar.Avatar,
+                {
+                  alt,
+                  kind: avatarKind,
+                  size: size$1,
+                  title: title ?? alt,
+                  variant: avatarVariant,
+                  className: "relative z-10 -ml-px shrink-0",
+                  ...initials !== void 0 ? { initials } : {}
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: utils.cn(
+                    "min-w-0 flex-1 truncate font-medium leading-none text-foreground",
+                    labelClassName
+                  ),
+                  style: { fontSize: Math.max(11, Math.round(px * 0.32)) },
+                  title: typeof label === "string" ? label : title ?? alt,
+                  children: label
+                }
+              ),
+              statusIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  ...typeof statusIcon === "string" ? { name: statusIcon } : { icon: statusIcon },
+                  style: "badge",
+                  size: size$1,
+                  tone: statusTone,
+                  className: "relative z-10 -mr-px shrink-0",
+                  ...statusTitle !== void 0 ? { title: statusTitle } : {}
+                }
+              )
+            ]
+          }
+        ),
+        comment && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "mt-1 max-w-[50ch] overflow-hidden text-xs leading-snug text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]",
+              commentClassName
+            ),
+            title: typeof comment === "string" ? comment : void 0,
+            children: comment
+          }
+        )
+      ]
+    }
+  );
+}
+exports.AvatarBadge = AvatarBadge;
+//# sourceMappingURL=AvatarBadge.cjs.map

package/dist/data/AvatarBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBadge.cjs","sources":["../../src/data/AvatarBadge.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { Avatar, type AvatarKind, type AvatarVariant } from \"./Avatar\";\nimport { Icon, type IconTone, type StaticIconComponent } from \"./Icon\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarBadgeProps = {\n  alt: string;\n  label?: ReactNode;\n  initials?: string;\n  avatarKind?: AvatarKind;\n  avatarVariant?: AvatarVariant;\n  size?: SizeToken;\n  title?: string;\n  statusIcon?: string | StaticIconComponent;\n  statusTone?: IconTone;\n  statusTitle?: string;\n  comment?: ReactNode;\n  borderColor?: string;\n  className?: string;\n  badgeClassName?: string;\n  labelClassName?: string;\n  commentClassName?: string;\n  style?: CSSProperties;\n  badgeStyle?: CSSProperties;\n};\n\nexport function AvatarBadge({\n  alt,\n  label = alt,\n  initials,\n  avatarKind = \"user\",\n  avatarVariant = \"duotone\",\n  size = \"lg\",\n  title,\n  statusIcon,\n  statusTone = \"neutral\",\n  statusTitle,\n  comment,\n  borderColor,\n  className,\n  badgeClassName,\n  labelClassName,\n  commentClassName,\n  style,\n  badgeStyle,\n}: AvatarBadgeProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n\n  return (\n    <span\n      className={cn(\"inline-flex max-w-[50ch] min-w-0 flex-col items-start\", className)}\n      style={style}\n    >\n      <span\n        className={cn(\n          \"inline-flex max-w-[40ch] min-w-0 items-center gap-2 overflow-visible rounded-full border bg-background shadow-sm\",\n          badgeClassName,\n        )}\n        style={{\n          height: px,\n          borderColor,\n          ...badgeStyle,\n        }}\n      >\n        <Avatar\n          alt={alt}\n          kind={avatarKind}\n          size={size}\n          title={title ?? alt}\n          variant={avatarVariant}\n          className=\"relative z-10 -ml-px shrink-0\"\n          {...(initials !== undefined ? { initials } : {})}\n        />\n        <span\n          className={cn(\n            \"min-w-0 flex-1 truncate font-medium leading-none text-foreground\",\n            labelClassName,\n          )}\n          style={{ fontSize: Math.max(11, Math.round(px * 0.32)) }}\n          title={typeof label === \"string\" ? label : (title ?? alt)}\n        >\n          {label}\n        </span>\n        {statusIcon && (\n          <Icon\n            {...(typeof statusIcon === \"string\" ? { name: statusIcon } : { icon: statusIcon })}\n            style=\"badge\"\n            size={size}\n            tone={statusTone}\n            className=\"relative z-10 -mr-px shrink-0\"\n            {...(statusTitle !== undefined ? { title: statusTitle } : {})}\n          />\n        )}\n      </span>\n      {comment && (\n        <span\n          className={cn(\n            \"mt-1 max-w-[50ch] overflow-hidden text-xs leading-snug text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]\",\n            commentClassName,\n          )}\n          title={typeof comment === \"string\" ? comment : undefined}\n        >\n          {comment}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"names":["size","useDensityValue","resolveSize","jsxs","cn","jsx","Avatar","Icon"],"mappings":";;;;;;;;AA4BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAAA,MAChBA,SAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UAAUC,WAAAA,gBAAA;AAChB,QAAM,KAAKC,KAAAA,YAAYF,QAAM,OAAO;AAEpC,SACEG,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA,GAAG,yDAAyD,SAAS;AAAA,MAChF;AAAA,MAEA,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,GAAG;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAAC,2BAAAA;AAAAA,gBAACC,OAAAA;AAAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,MAAM;AAAA,kBAAA,MACNN;AAAAA,kBACA,OAAO,SAAS;AAAA,kBAChB,SAAS;AAAA,kBACT,WAAU;AAAA,kBACT,GAAI,aAAa,SAAY,EAAE,aAAa,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,cAEhDK,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,MAAAA;AAAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,OAAO,EAAE,UAAU,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,CAAC,EAAA;AAAA,kBACrD,OAAO,OAAO,UAAU,WAAW,QAAS,SAAS;AAAA,kBAEpD,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,cACCC,2BAAAA;AAAAA,gBAACE,KAAAA;AAAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,eAAe,WAAW,EAAE,MAAM,eAAe,EAAE,MAAM,WAAA;AAAA,kBACrE,OAAM;AAAA,kBAAA,MACNP;AAAAA,kBACA,MAAM;AAAA,kBACN,WAAU;AAAA,kBACT,GAAI,gBAAgB,SAAY,EAAE,OAAO,YAAA,IAAgB,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,YAC7D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,WACCK,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO,OAAO,YAAY,WAAW,UAAU;AAAA,YAE9C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/AvatarBadge.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AvatarKind, AvatarVariant } from './Avatar';
-import { IconTone } from './Icon';
+import { IconTone, StaticIconComponent } from './Icon';
 import { SizeToken } from '../lib/size';
 export type AvatarBadgeProps = {
     alt: string;
@@ -10,7 +10,7 @@ export type AvatarBadgeProps = {
     avatarVariant?: AvatarVariant;
     size?: SizeToken;
     title?: string;
-    statusIcon?: string;
+    statusIcon?: string | StaticIconComponent;
     statusTone?: IconTone;
     statusTitle?: string;
     comment?: ReactNode;

package/dist/data/AvatarBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.d.ts","sourceRoot":"","sources":["../../src/data/AvatarBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAW,EACX,QAAQ,EACR,UAAmB,EACnB,aAAyB,EACzB,IAAW,EACX,KAAK,EACL,UAAU,EACV,UAAsB,EACtB,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,UAAU,GACX,EAAE,gBAAgB,2CA+DlB"}
+{"version":3,"file":"AvatarBadge.d.ts","sourceRoot":"","sources":["../../src/data/AvatarBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAQ,KAAK,QAAQ,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAEvE,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IAC1C,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAW,EACX,QAAQ,EACR,UAAmB,EACnB,aAAyB,EACzB,IAAW,EACX,KAAK,EACL,UAAU,EACV,UAAsB,EACtB,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,UAAU,GACX,EAAE,gBAAgB,2CA+DlB"}

package/dist/data/AvatarBadge.js

@@ -72,7 +72,7 @@ function AvatarBadge({
               statusIcon && /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  name: statusIcon,
+                  ...typeof statusIcon === "string" ? { name: statusIcon } : { icon: statusIcon },
                   style: "badge",
                   size,
                   tone: statusTone,

package/dist/data/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","sources":["../../src/data/AvatarBadge.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { Avatar, type AvatarKind, type AvatarVariant } from \"./Avatar\";\nimport { Icon, type IconTone } from \"./Icon\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarBadgeProps = {\n  alt: string;\n  label?: ReactNode;\n  initials?: string;\n  avatarKind?: AvatarKind;\n  avatarVariant?: AvatarVariant;\n  size?: SizeToken;\n  title?: string;\n  statusIcon?: string;\n  statusTone?: IconTone;\n  statusTitle?: string;\n  comment?: ReactNode;\n  borderColor?: string;\n  className?: string;\n  badgeClassName?: string;\n  labelClassName?: string;\n  commentClassName?: string;\n  style?: CSSProperties;\n  badgeStyle?: CSSProperties;\n};\n\nexport function AvatarBadge({\n  alt,\n  label = alt,\n  initials,\n  avatarKind = \"user\",\n  avatarVariant = \"duotone\",\n  size = \"lg\",\n  title,\n  statusIcon,\n  statusTone = \"neutral\",\n  statusTitle,\n  comment,\n  borderColor,\n  className,\n  badgeClassName,\n  labelClassName,\n  commentClassName,\n  style,\n  badgeStyle,\n}: AvatarBadgeProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n\n  return (\n    <span\n      className={cn(\"inline-flex max-w-[50ch] min-w-0 flex-col items-start\", className)}\n      style={style}\n    >\n      <span\n        className={cn(\n          \"inline-flex max-w-[40ch] min-w-0 items-center gap-2 overflow-visible rounded-full border bg-background shadow-sm\",\n          badgeClassName,\n        )}\n        style={{\n          height: px,\n          borderColor,\n          ...badgeStyle,\n        }}\n      >\n        <Avatar\n          alt={alt}\n          kind={avatarKind}\n          size={size}\n          title={title ?? alt}\n          variant={avatarVariant}\n          className=\"relative z-10 -ml-px shrink-0\"\n          {...(initials !== undefined ? { initials } : {})}\n        />\n        <span\n          className={cn(\n            \"min-w-0 flex-1 truncate font-medium leading-none text-foreground\",\n            labelClassName,\n          )}\n          style={{ fontSize: Math.max(11, Math.round(px * 0.32)) }}\n          title={typeof label === \"string\" ? label : (title ?? alt)}\n        >\n          {label}\n        </span>\n        {statusIcon && (\n          <Icon\n            name={statusIcon}\n            style=\"badge\"\n            size={size}\n            tone={statusTone}\n            className=\"relative z-10 -mr-px shrink-0\"\n            {...(statusTitle !== undefined ? { title: statusTitle } : {})}\n          />\n        )}\n      </span>\n      {comment && (\n        <span\n          className={cn(\n            \"mt-1 max-w-[50ch] overflow-hidden text-xs leading-snug text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]\",\n            commentClassName,\n          )}\n          title={typeof comment === \"string\" ? comment : undefined}\n        >\n          {comment}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA4BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UAAU,gBAAA;AAChB,QAAM,KAAK,YAAY,MAAM,OAAO;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,yDAAyD,SAAS;AAAA,MAChF;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,GAAG;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,MAAM;AAAA,kBACN;AAAA,kBACA,OAAO,SAAS;AAAA,kBAChB,SAAS;AAAA,kBACT,WAAU;AAAA,kBACT,GAAI,aAAa,SAAY,EAAE,aAAa,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,cAEhD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,OAAO,EAAE,UAAU,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,CAAC,EAAA;AAAA,kBACrD,OAAO,OAAO,UAAU,WAAW,QAAS,SAAS;AAAA,kBAEpD,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,OAAM;AAAA,kBACN;AAAA,kBACA,MAAM;AAAA,kBACN,WAAU;AAAA,kBACT,GAAI,gBAAgB,SAAY,EAAE,OAAO,YAAA,IAAgB,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,YAC7D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO,OAAO,YAAY,WAAW,UAAU;AAAA,YAE9C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"AvatarBadge.js","sources":["../../src/data/AvatarBadge.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { Avatar, type AvatarKind, type AvatarVariant } from \"./Avatar\";\nimport { Icon, type IconTone, type StaticIconComponent } from \"./Icon\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\nexport type AvatarBadgeProps = {\n  alt: string;\n  label?: ReactNode;\n  initials?: string;\n  avatarKind?: AvatarKind;\n  avatarVariant?: AvatarVariant;\n  size?: SizeToken;\n  title?: string;\n  statusIcon?: string | StaticIconComponent;\n  statusTone?: IconTone;\n  statusTitle?: string;\n  comment?: ReactNode;\n  borderColor?: string;\n  className?: string;\n  badgeClassName?: string;\n  labelClassName?: string;\n  commentClassName?: string;\n  style?: CSSProperties;\n  badgeStyle?: CSSProperties;\n};\n\nexport function AvatarBadge({\n  alt,\n  label = alt,\n  initials,\n  avatarKind = \"user\",\n  avatarVariant = \"duotone\",\n  size = \"lg\",\n  title,\n  statusIcon,\n  statusTone = \"neutral\",\n  statusTitle,\n  comment,\n  borderColor,\n  className,\n  badgeClassName,\n  labelClassName,\n  commentClassName,\n  style,\n  badgeStyle,\n}: AvatarBadgeProps) {\n  const density = useDensityValue();\n  const px = resolveSize(size, density);\n\n  return (\n    <span\n      className={cn(\"inline-flex max-w-[50ch] min-w-0 flex-col items-start\", className)}\n      style={style}\n    >\n      <span\n        className={cn(\n          \"inline-flex max-w-[40ch] min-w-0 items-center gap-2 overflow-visible rounded-full border bg-background shadow-sm\",\n          badgeClassName,\n        )}\n        style={{\n          height: px,\n          borderColor,\n          ...badgeStyle,\n        }}\n      >\n        <Avatar\n          alt={alt}\n          kind={avatarKind}\n          size={size}\n          title={title ?? alt}\n          variant={avatarVariant}\n          className=\"relative z-10 -ml-px shrink-0\"\n          {...(initials !== undefined ? { initials } : {})}\n        />\n        <span\n          className={cn(\n            \"min-w-0 flex-1 truncate font-medium leading-none text-foreground\",\n            labelClassName,\n          )}\n          style={{ fontSize: Math.max(11, Math.round(px * 0.32)) }}\n          title={typeof label === \"string\" ? label : (title ?? alt)}\n        >\n          {label}\n        </span>\n        {statusIcon && (\n          <Icon\n            {...(typeof statusIcon === \"string\" ? { name: statusIcon } : { icon: statusIcon })}\n            style=\"badge\"\n            size={size}\n            tone={statusTone}\n            className=\"relative z-10 -mr-px shrink-0\"\n            {...(statusTitle !== undefined ? { title: statusTitle } : {})}\n          />\n        )}\n      </span>\n      {comment && (\n        <span\n          className={cn(\n            \"mt-1 max-w-[50ch] overflow-hidden text-xs leading-snug text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]\",\n            commentClassName,\n          )}\n          title={typeof comment === \"string\" ? comment : undefined}\n        >\n          {comment}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA4BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UAAU,gBAAA;AAChB,QAAM,KAAK,YAAY,MAAM,OAAO;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,yDAAyD,SAAS;AAAA,MAChF;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,GAAG;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,MAAM;AAAA,kBACN;AAAA,kBACA,OAAO,SAAS;AAAA,kBAChB,SAAS;AAAA,kBACT,WAAU;AAAA,kBACT,GAAI,aAAa,SAAY,EAAE,aAAa,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,cAEhD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,OAAO,EAAE,UAAU,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,CAAC,EAAA;AAAA,kBACrD,OAAO,OAAO,UAAU,WAAW,QAAS,SAAS;AAAA,kBAEpD,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEF,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,eAAe,WAAW,EAAE,MAAM,eAAe,EAAE,MAAM,WAAA;AAAA,kBACrE,OAAM;AAAA,kBACN;AAAA,kBACA,MAAM;AAAA,kBACN,WAAU;AAAA,kBACT,GAAI,gBAAgB,SAAY,EAAE,OAAO,YAAA,IAAgB,CAAA;AAAA,gBAAC;AAAA,cAAA;AAAA,YAC7D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,OAAO,OAAO,YAAY,WAAW,UAAU;AAAA,YAE9C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}