@flanksource/clicky-ui 0.1.0 → 0.2.1

package/dist/data/AnsiHtml.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+const ANSI_COLORS = {
+  "30": "color:#1e1e1e",
+  "31": "color:#cd3131",
+  "32": "color:#0dbc79",
+  "33": "color:#e5e510",
+  "34": "color:#2472c8",
+  "35": "color:#bc3fbc",
+  "36": "color:#11a8cd",
+  "37": "color:#e5e5e5",
+  "90": "color:#666",
+  "91": "color:#f14c4c",
+  "92": "color:#23d18b",
+  "93": "color:#f5f543",
+  "94": "color:#3b8eea",
+  "95": "color:#d670d6",
+  "96": "color:#29b8db",
+  "97": "color:#fff",
+  "1": "font-weight:bold",
+  "2": "opacity:0.7",
+  "3": "font-style:italic",
+  "4": "text-decoration:underline"
+};
+function parseAnsi(raw) {
+  const spans = [];
+  const re = /\x1b\[([0-9;]*)m/g;
+  let last = 0;
+  let styles = [];
+  let match;
+  while ((match = re.exec(raw)) !== null) {
+    if (match.index > last) {
+      spans.push({ text: raw.slice(last, match.index), style: styles.join(";") });
+    }
+    const codes = (match[1] ?? "").split(";").filter(Boolean);
+    for (const code of codes) {
+      if (code === "0" || code === "") {
+        styles = [];
+      } else {
+        const rule = ANSI_COLORS[code];
+        if (rule) styles.push(rule);
+      }
+    }
+    last = match.index + match[0].length;
+  }
+  if (last < raw.length) {
+    spans.push({ text: raw.slice(last), style: styles.join(";") });
+  }
+  return spans;
+}
+function spanToStyle(style) {
+  const out = {};
+  for (const rule of style.split(";")) {
+    const [k, v] = rule.split(":");
+    if (!k || !v) continue;
+    const key = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    out[key] = v;
+  }
+  return out;
+}
+function AnsiHtml({ text, className, as = "pre" }) {
+  const spans = parseAnsi(text);
+  const children = spans.map(
+    (s, i) => s.style ? /* @__PURE__ */ jsx("span", { style: spanToStyle(s.style), children: s.text }, i) : /* @__PURE__ */ jsx("span", { children: s.text }, i)
+  );
+  if (as === "span") return /* @__PURE__ */ jsx("span", { className, children });
+  return /* @__PURE__ */ jsx("pre", { className, children });
+}
+export {
+  AnsiHtml
+};
+//# sourceMappingURL=AnsiHtml.js.map

package/dist/data/AnsiHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnsiHtml.js","sources":["../../src/data/AnsiHtml.tsx"],"sourcesContent":["const ANSI_COLORS: Record<string, string> = {\n  \"30\": \"color:#1e1e1e\",\n  \"31\": \"color:#cd3131\",\n  \"32\": \"color:#0dbc79\",\n  \"33\": \"color:#e5e510\",\n  \"34\": \"color:#2472c8\",\n  \"35\": \"color:#bc3fbc\",\n  \"36\": \"color:#11a8cd\",\n  \"37\": \"color:#e5e5e5\",\n  \"90\": \"color:#666\",\n  \"91\": \"color:#f14c4c\",\n  \"92\": \"color:#23d18b\",\n  \"93\": \"color:#f5f543\",\n  \"94\": \"color:#3b8eea\",\n  \"95\": \"color:#d670d6\",\n  \"96\": \"color:#29b8db\",\n  \"97\": \"color:#fff\",\n  \"1\": \"font-weight:bold\",\n  \"2\": \"opacity:0.7\",\n  \"3\": \"font-style:italic\",\n  \"4\": \"text-decoration:underline\",\n};\n\ntype Span = { text: string; style: string };\n\nfunction parseAnsi(raw: string): Span[] {\n  const spans: Span[] = [];\n  // eslint-disable-next-line no-control-regex\n  const re = /\\x1b\\[([0-9;]*)m/g;\n  let last = 0;\n  let styles: string[] = [];\n  let match: RegExpExecArray | null;\n\n  while ((match = re.exec(raw)) !== null) {\n    if (match.index > last) {\n      spans.push({ text: raw.slice(last, match.index), style: styles.join(\";\") });\n    }\n    const codes = (match[1] ?? \"\").split(\";\").filter(Boolean);\n    for (const code of codes) {\n      if (code === \"0\" || code === \"\") {\n        styles = [];\n      } else {\n        const rule = ANSI_COLORS[code];\n        if (rule) styles.push(rule);\n      }\n    }\n    last = match.index + match[0].length;\n  }\n\n  if (last < raw.length) {\n    spans.push({ text: raw.slice(last), style: styles.join(\";\") });\n  }\n\n  return spans;\n}\n\nfunction spanToStyle(style: string): React.CSSProperties {\n  const out: Record<string, string> = {};\n  for (const rule of style.split(\";\")) {\n    const [k, v] = rule.split(\":\");\n    if (!k || !v) continue;\n    const key = k.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());\n    out[key] = v;\n  }\n  return out as React.CSSProperties;\n}\n\nexport type AnsiHtmlProps = {\n  text: string;\n  className?: string;\n  as?: \"pre\" | \"span\";\n};\n\nexport function AnsiHtml({ text, className, as = \"pre\" }: AnsiHtmlProps) {\n  const spans = parseAnsi(text);\n  const children = spans.map((s, i) =>\n    s.style ? (\n      <span key={i} style={spanToStyle(s.style)}>\n        {s.text}\n      </span>\n    ) : (\n      <span key={i}>{s.text}</span>\n    ),\n  );\n  if (as === \"span\") return <span className={className}>{children}</span>;\n  return <pre className={className}>{children}</pre>;\n}\n"],"names":[],"mappings":";AAAA,MAAM,cAAsC;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAIA,SAAS,UAAU,KAAqB;AACtC,QAAM,QAAgB,CAAA;AAEtB,QAAM,KAAK;AACX,MAAI,OAAO;AACX,MAAI,SAAmB,CAAA;AACvB,MAAI;AAEJ,UAAQ,QAAQ,GAAG,KAAK,GAAG,OAAO,MAAM;AACtC,QAAI,MAAM,QAAQ,MAAM;AACtB,YAAM,KAAK,EAAE,MAAM,IAAI,MAAM,MAAM,MAAM,KAAK,GAAG,OAAO,OAAO,KAAK,GAAG,GAAG;AAAA,IAC5E;AACA,UAAM,SAAS,MAAM,CAAC,KAAK,IAAI,MAAM,GAAG,EAAE,OAAO,OAAO;AACxD,eAAW,QAAQ,OAAO;AACxB,UAAI,SAAS,OAAO,SAAS,IAAI;AAC/B,iBAAS,CAAA;AAAA,MACX,OAAO;AACL,cAAM,OAAO,YAAY,IAAI;AAC7B,YAAI,KAAM,QAAO,KAAK,IAAI;AAAA,MAC5B;AAAA,IACF;AACA,WAAO,MAAM,QAAQ,MAAM,CAAC,EAAE;AAAA,EAChC;AAEA,MAAI,OAAO,IAAI,QAAQ;AACrB,UAAM,KAAK,EAAE,MAAM,IAAI,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,GAAG,EAAA,CAAG;AAAA,EAC/D;AAEA,SAAO;AACT;AAEA,SAAS,YAAY,OAAoC;AACvD,QAAM,MAA8B,CAAA;AACpC,aAAW,QAAQ,MAAM,MAAM,GAAG,GAAG;AACnC,UAAM,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,GAAG;AAC7B,QAAI,CAAC,KAAK,CAAC,EAAG;AACd,UAAM,MAAM,EAAE,QAAQ,aAAa,CAAC,GAAG,MAAc,EAAE,aAAa;AACpE,QAAI,GAAG,IAAI;AAAA,EACb;AACA,SAAO;AACT;AAQO,SAAS,SAAS,EAAE,MAAM,WAAW,KAAK,SAAwB;AACvE,QAAM,QAAQ,UAAU,IAAI;AAC5B,QAAM,WAAW,MAAM;AAAA,IAAI,CAAC,GAAG,MAC7B,EAAE,QACA,oBAAC,QAAA,EAAa,OAAO,YAAY,EAAE,KAAK,GACrC,UAAA,EAAE,QADM,CAEX,wBAEC,QAAA,EAAc,UAAA,EAAE,QAAN,CAAW;AAAA,EAAA;AAG1B,MAAI,OAAO,OAAQ,QAAO,oBAAC,QAAA,EAAK,WAAuB,UAAS;AAChE,SAAO,oBAAC,OAAA,EAAI,WAAuB,SAAA,CAAS;AAC9C;"}

package/dist/data/Avatar.d.ts

@@ -0,0 +1,32 @@
+import { SyntheticEvent } from 'react';
+import { SizeToken } from '../lib/size';
+export type AvatarVariant = "duotone" | "solid" | "stamp" | "mono";
+export type AvatarKind = "user" | "group";
+export type AvatarProps = {
+    src?: string;
+    alt: string;
+    initials?: string;
+    /**
+     * Named size token (xs..xl). The rendered px is resolved through the active
+     * density (`compact` shrinks, `spacious` grows). Size also drives typographic
+     * adjustments: `xs` shows a single initial; `sm` uses a lighter weight so the
+     * monogram stays quiet in dense list rows.
+     */
+    size?: SizeToken;
+    rounded?: "full" | "md";
+    kind?: AvatarKind;
+    variant?: AvatarVariant;
+    title?: string;
+    href?: string;
+    /**
+     * Selects the palette color for the initial-fallback. Defaults to `alt` so
+     * repeated rendering of the same identity stays consistent. Pass the full
+     * "owner/name" for repo avatars so two repos named "cli" under different
+     * orgs render with different colors.
+     */
+    colorKey?: string;
+    onError?: (e: SyntheticEvent<HTMLImageElement>) => void;
+    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;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +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"}

package/dist/data/Avatar.js

@@ -0,0 +1,201 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { fnv1a32 } from "../lib/palette.js";
+import { resolveSize } from "../lib/size.js";
+import { useDensityValue } from "../hooks/use-density.js";
+function hueForKey(key) {
+  return 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, size) {
+  const minimum = size <= 16 ? 7 : size <= 20 ? 8 : 9;
+  switch (variant) {
+    case "stamp":
+      return Math.max(minimum, Math.round(size * 0.34));
+    case "mono":
+      return Math.max(minimum, Math.round(size * 0.36));
+    case "solid":
+    case "duotone":
+    default:
+      return Math.max(minimum, Math.round(size * 0.38));
+  }
+}
+function Avatar({
+  src,
+  alt,
+  initials,
+  size = "sm",
+  rounded,
+  kind = "user",
+  variant = "duotone",
+  title,
+  href,
+  colorKey,
+  onError,
+  className
+}) {
+  const density = useDensityValue();
+  const px = resolveSize(size, 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 === "xs" || size === "sm" ? 1 : 2;
+  const text = resolveInitials(alt, initials, maxLetters);
+  const base = 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 === "sm") return 500;
+    return 600;
+  };
+  const content = src ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      title: title ?? alt,
+      width: px,
+      height: px,
+      "data-avatar-kind": kind,
+      "data-avatar-variant": variant,
+      "data-avatar-size": size,
+      className: cn(base, "bg-muted object-cover", className),
+      style: frameStyle,
+      loading: "lazy",
+      onError
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": alt,
+      "data-avatar-kind": kind,
+      "data-avatar-variant": variant,
+      "data-avatar-size": size,
+      className: 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__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex shrink-0",
+        onClick: (e) => e.stopPropagation(),
+        children: content
+      }
+    );
+  }
+  return content;
+}
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/data/Avatar.js.map

@@ -0,0 +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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"}

package/dist/data/AvatarBadge.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode } from 'react';
+import { AvatarKind, AvatarVariant } from './Avatar';
+import { IconTone } from './Icon';
+import { SizeToken } from '../lib/size';
+export type AvatarBadgeProps = {
+    alt: string;
+    label?: ReactNode;
+    initials?: string;
+    avatarKind?: AvatarKind;
+    avatarVariant?: AvatarVariant;
+    size?: SizeToken;
+    title?: string;
+    statusIcon?: string;
+    statusTone?: IconTone;
+    statusTitle?: string;
+    comment?: ReactNode;
+    borderColor?: string;
+    className?: string;
+    badgeClassName?: string;
+    labelClassName?: string;
+    commentClassName?: string;
+    style?: CSSProperties;
+    badgeStyle?: CSSProperties;
+};
+export declare function AvatarBadge({ alt, label, initials, avatarKind, avatarVariant, size, title, statusIcon, statusTone, statusTitle, comment, borderColor, className, badgeClassName, labelClassName, commentClassName, style, badgeStyle, }: AvatarBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarBadge.d.ts.map

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

@@ -0,0 +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"}

package/dist/data/AvatarBadge.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Avatar } from "./Avatar.js";
+import { Icon } from "./Icon.js";
+import { cn } from "../lib/utils.js";
+import { resolveSize } from "../lib/size.js";
+import { useDensityValue } from "../hooks/use-density.js";
+function AvatarBadge({
+  alt,
+  label = alt,
+  initials,
+  avatarKind = "user",
+  avatarVariant = "duotone",
+  size = "lg",
+  title,
+  statusIcon,
+  statusTone = "neutral",
+  statusTitle,
+  comment,
+  borderColor,
+  className,
+  badgeClassName,
+  labelClassName,
+  commentClassName,
+  style,
+  badgeStyle
+}) {
+  const density = useDensityValue();
+  const px = resolveSize(size, density);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex max-w-[50ch] min-w-0 flex-col items-start", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: 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__ */ jsx(
+                Avatar,
+                {
+                  alt,
+                  kind: avatarKind,
+                  size,
+                  title: title ?? alt,
+                  variant: avatarVariant,
+                  className: "relative z-10 -ml-px shrink-0",
+                  ...initials !== void 0 ? { initials } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: 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__ */ jsx(
+                Icon,
+                {
+                  name: statusIcon,
+                  style: "badge",
+                  size,
+                  tone: statusTone,
+                  className: "relative z-10 -mr-px shrink-0",
+                  ...statusTitle !== void 0 ? { title: statusTitle } : {}
+                }
+              )
+            ]
+          }
+        ),
+        comment && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: 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
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AvatarBadge
+};
+//# sourceMappingURL=AvatarBadge.js.map

package/dist/data/AvatarBadge.js.map

@@ -0,0 +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;"}

package/dist/data/Badge.d.ts

@@ -0,0 +1,44 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+export declare const badgeVariants: (props?: ({
+    tone?: "neutral" | "danger" | "warning" | "success" | "info" | null | undefined;
+    variant?: "outline" | "solid" | "soft" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xxs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type LegacyBadgeVariantProps = VariantProps<typeof badgeVariants>;
+export type BadgeTone = NonNullable<LegacyBadgeVariantProps["tone"]>;
+export type LegacyBadgeVariant = NonNullable<LegacyBadgeVariantProps["variant"]>;
+export type BadgeSize = NonNullable<LegacyBadgeVariantProps["size"]>;
+export type BadgeStatus = "success" | "error" | "warning" | "info";
+export type BadgeShape = "pill" | "rounded" | "square";
+export type BadgeTruncate = "prefix" | "suffix" | "arn" | "image" | "path" | "url" | "auto";
+export type RichBadgeVariant = "status" | "metric" | "custom" | "outlined" | "label";
+export type BadgeVariant = LegacyBadgeVariant | RichBadgeVariant;
+export type BadgeProps = {
+    tone?: BadgeTone;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    icon?: string;
+    count?: number;
+    children?: ReactNode;
+    className?: string;
+    status?: BadgeStatus;
+    label?: ReactNode;
+    value?: ReactNode;
+    color?: string;
+    textColor?: string;
+    borderColor?: string;
+    shape?: BadgeShape;
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
+    wrap?: boolean;
+    maxWidth?: string | number;
+    truncate?: BadgeTruncate;
+    clickToCopy?: boolean;
+    labelClassName?: string;
+    valueClassName?: string;
+};
+export declare function Badge({ tone, variant, size, icon, count, children, className, status, label, value, color, textColor, borderColor, shape, href, target, rel, wrap, maxWidth, truncate, clickToCopy, labelClassName, valueClassName, }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/data/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,aAAa;;;;8EAmFzB,CAAC;AAEF,KAAK,uBAAuB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AACrE,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AACjF,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC5F,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACrF,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAiFjE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAgbF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,EACL,IAAI,EACJ,MAAgB,EAChB,GAAG,EACH,IAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,GACf,EAAE,UAAU,kDAqPZ"}