@flanksource/clicky-ui 0.2.18 → 0.2.20

package/dist/data/Icon.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const utils = require("../lib/utils.cjs");
 const size = require("../lib/size.cjs");
 const useDensity = require("../hooks/use-density.cjs");
+const iconFallback = require("./icon-fallback.cjs");
 const TONE_CLASSES = {
   emerald: "text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30",
   amber: "text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30",
@@ -14,10 +15,6 @@ const TONE_CLASSES = {
   neutral: "text-foreground ring-border"
 };
 const DEFAULT_PLAIN_ICON_SIZE = "1em";
-let fallbackIcon = null;
-function setFallbackIconProvider(component) {
-  fallbackIcon = component;
-}
 function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
   const transform = [
     typeof rotate === "number" ? `rotate(${rotate}deg)` : typeof rotate === "string" ? rotate : "",
@@ -37,6 +34,7 @@ function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip
   );
 }
 function renderRuntimeGlyph(name, glyphWidth, glyphHeight, glyphClassName, title) {
+  const fallbackIcon = iconFallback.getFallbackIconProvider();
   if (fallbackIcon) {
     const Fallback = fallbackIcon;
     const glyphSize = typeof glyphWidth === "number" ? glyphWidth : glyphHeight;
@@ -136,5 +134,4 @@ function LabelIcon({
 }
 exports.Icon = Icon;
 exports.LabelIcon = LabelIcon;
-exports.setFallbackIconProvider = setFallbackIconProvider;
 //# sourceMappingURL=Icon.cjs.map

package/dist/data/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ComponentType, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\n// LabelIconSpec is the icon a label may carry: an iconify/runtime name (resolved\n// via the fallback provider) or a fully-rendered node the caller supplies.\nexport type LabelIconSpec = string | ReactNode;\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30\",\n  amber: \"text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30\",\n  rose: \"text-rose-700 ring-rose-200/80 dark:text-rose-400 dark:ring-rose-500/30\",\n  slate: \"text-slate-700 ring-slate-200/80 dark:text-slate-300 dark:ring-slate-500/30\",\n  sky: \"text-sky-700 ring-sky-200/80 dark:text-sky-400 dark:ring-sky-500/30\",\n  violet: \"text-violet-700 ring-violet-200/80 dark:text-violet-400 dark:ring-violet-500/30\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\n/**\n * Optional secondary icon provider for user-supplied runtime names.\n * Built-in/default icons should pass an imported component via `icon`.\n */\nexport type FallbackIconProps = {\n  /** Runtime icon name to resolve. */\n  name?: string;\n  /** Classes applied by Icon. */\n  className?: string;\n  /** Requested glyph size. */\n  size?: string | number;\n  /** Accessible label. */\n  alt?: string;\n};\n\ntype FallbackIconComponent = ComponentType<FallbackIconProps>;\n\nlet fallbackIcon: FallbackIconComponent | null = null;\n\n/**\n * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon\n * (or any compatible component) to resolve user-supplied runtime names.\n */\nexport function setFallbackIconProvider(component: FallbackIconComponent | null): void {\n  fallbackIcon = component;\n}\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\n/**\n * LabelIcon renders a label's leading glyph from a {@link LabelIconSpec}: a\n * string is treated as a runtime icon name (resolved by the registered fallback\n * provider), any other ReactNode is rendered as-is. Returns null for an absent\n * or empty spec so callers can spread it unconditionally before a label.\n */\nexport function LabelIcon({\n  icon,\n  className,\n}: {\n  icon?: LabelIconSpec;\n  className?: string;\n}): JSX.Element | null {\n  if (icon == null || icon === \"\" || icon === false) return null;\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} className={cn(\"shrink-0\", className)} />;\n  }\n  return <>{icon}</>;\n}\n"],"names":["jsx","cn","size","useDensityValue","resolveSize"],"mappings":";;;;;;AA8DA,MAAM,eAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,0BAA0B;AAmBhC,IAAI,eAA6C;AAM1C,SAAS,wBAAwB,WAA+C;AACrF,iBAAe;AACjB;AAEA,SAAS,oBACP,cACA,YACA,aACA,QACA,MACA,QACA,gBACA,OACa;AACb,QAAM,YAAY;AAAA,IAChB,OAAO,WAAW,WAAW,UAAU,MAAM,SAAS,OAAO,WAAW,WAAW,SAAS;AAAA,IAC5F,SAAS,gBAAgB,SAAS,SAAS,eAAe;AAAA,IAC1D,SAAS,cAAc,SAAS,SAAS,eAAe;AAAA,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,iBAAiB,EAAE,WAAW,eAAA,IAAmB,CAAA;AAAA,MACrD,GAAI,cAAc,OAAO,EAAE,OAAO,WAAA,IAAe,CAAA;AAAA,MACjD,GAAI,eAAe,OAAO,EAAE,QAAQ,YAAA,IAAgB,CAAA;AAAA,MACpD,GAAI,UAAU,OAAO,EAAE,eAAe,CAAC,MAAA,IAAU,CAAA;AAAA,MACjD,GAAI,QAAQ,EAAE,OAAO,MAAM,UAAU,EAAE,eAAe,KAAA;AAAA,MACtD,GAAI,YAAY,EAAE,OAAO,EAAE,UAAA,EAAU,IAAM,CAAA;AAAA,IAAC;AAAA,EAAA;AAGnD;AAEA,SAAS,mBACP,MACA,YACA,aACA,gBACA,OACa;AACb,MAAI,cAAc;AAChB,UAAM,WAAW;AACjB,UAAM,YAAY,OAAO,eAAe,WAAW,aAAa;AAChE,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAI,iBAAiB,EAAE,WAAW,eAAA,IAAmB,CAAA;AAAA,QACrD,GAAI,aAAa,OAAO,EAAE,MAAM,UAAA,IAAc,CAAA;AAAA,QAC9C,GAAI,QAAQ,EAAE,KAAK,UAAU,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,EAGrC;AAEA,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO,SAAS;AAAA,MAChB,MAAM,QAAQ,QAAQ;AAAA,MACtB,cAAY;AAAA,MACZ,eAAa,QAAQ,SAAY;AAAA,MACjC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEX,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;AAEO,SAAS,KAAK;AAAA,EACnB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EAAA,MACRC;AAAAA,EACA,OAAO;AACT,GAAc;AACZ,QAAM,UAAUC,WAAAA,gBAAA;AAChB,QAAM,SAASD,UAAQ,OAAOE,KAAAA,YAAYF,QAAM,OAAO,IAAI;AAC3D,QAAM,YAAY,UAAU,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,GAAG,CAAC,IAAI;AAC3E,QAAM,mBAAmB,UAAU,UAAU,YAAa,UAAU;AACpE,QAAM,gBAAgB,SAAS,UAAU;AACzC,QAAM,iBAAiB,UAAU;AAEjC,QAAM,iBAAiBD,MAAAA;AAAAA,IACrB;AAAA,IACA,UAAU,UAAU,YAAY;AAAA,EAAA;AAElC,QAAM,aAAa,UAAU,UAAU,QAAQ;AAE/C,QAAM,eAAe,eACjB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IAEF,mBAAmB,MAAM,eAAe,gBAAgB,gBAAgB,UAAU;AAEtF,MAAI,UAAU,SAAS;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,aACJ,UAAU,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAEvD,SACED,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,MAAM,QAAQ,QAAQ;AAAA,MACtB,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AACF,GAGuB;AACrB,MAAI,QAAQ,QAAQ,SAAS,MAAM,SAAS,MAAO,QAAO;AAC1D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAOD,2BAAAA,IAAC,QAAK,MAAM,MAAM,WAAWC,SAAG,YAAY,SAAS,GAAG;AAAA,EACjE;AACA,+DAAU,UAAA,KAAA,CAAK;AACjB;;;;"}
+{"version":3,"file":"Icon.cjs","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\nimport { getFallbackIconProvider } from \"./icon-fallback\";\n\n// LabelIconSpec is the icon a label may carry: an iconify/runtime name (resolved\n// via the fallback provider) or a fully-rendered node the caller supplies.\nexport type LabelIconSpec = string | ReactNode;\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30\",\n  amber: \"text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30\",\n  rose: \"text-rose-700 ring-rose-200/80 dark:text-rose-400 dark:ring-rose-500/30\",\n  slate: \"text-slate-700 ring-slate-200/80 dark:text-slate-300 dark:ring-slate-500/30\",\n  sky: \"text-sky-700 ring-sky-200/80 dark:text-sky-400 dark:ring-sky-500/30\",\n  violet: \"text-violet-700 ring-violet-200/80 dark:text-violet-400 dark:ring-violet-500/30\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const fallbackIcon = getFallbackIconProvider();\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\n/**\n * LabelIcon renders a label's leading glyph from a {@link LabelIconSpec}: a\n * string is treated as a runtime icon name (resolved by the registered fallback\n * provider), any other ReactNode is rendered as-is. Returns null for an absent\n * or empty spec so callers can spread it unconditionally before a label.\n */\nexport function LabelIcon({\n  icon,\n  className,\n}: {\n  icon?: LabelIconSpec;\n  className?: string;\n}): JSX.Element | null {\n  if (icon == null || icon === \"\" || icon === false) return null;\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} className={cn(\"shrink-0\", className)} />;\n  }\n  return <>{icon}</>;\n}\n"],"names":["jsx","getFallbackIconProvider","cn","size","useDensityValue","resolveSize"],"mappings":"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"}

package/dist/data/Icon.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { SizeToken } from '../lib/size';
 export type LabelIconSpec = string | ReactNode;
 export type IconStyle = "plain" | "badge";
@@ -45,26 +45,6 @@ export type IconProps = CommonIconProps & ({
     name: string;
     icon?: never;
 });
-/**
- * Optional secondary icon provider for user-supplied runtime names.
- * Built-in/default icons should pass an imported component via `icon`.
- */
-export type FallbackIconProps = {
-    /** Runtime icon name to resolve. */
-    name?: string;
-    /** Classes applied by Icon. */
-    className?: string;
-    /** Requested glyph size. */
-    size?: string | number;
-    /** Accessible label. */
-    alt?: string;
-};
-type FallbackIconComponent = ComponentType<FallbackIconProps>;
-/**
- * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon
- * (or any compatible component) to resolve user-supplied runtime names.
- */
-export declare function setFallbackIconProvider(component: FallbackIconComponent | null): void;
 export declare function Icon({ icon: ImportedIcon, name, className, width, height, rotate, flip, inline, title, style, size, tone, }: IconProps): import("react/jsx-runtime").JSX.Element;
 /**
  * LabelIcon renders a label's leading glyph from a {@link LabelIconSpec}: a

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/data/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAK1D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7F,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAE9C,KAAK,eAAe,GAAG;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GACrC,CACI;IACE,sCAAsC;IACtC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACE,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CACJ,CAAC;AAcJ;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,qBAAqB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAI9D;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,IAAI,CAErF;AAwED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAe,EACf,IAAI,EACJ,IAAgB,GACjB,EAAE,SAAS,2CAiDX;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAMrB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/data/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAM1D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7F,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAE9C,KAAK,eAAe,GAAG;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,eAAe,GACrC,CACI;IACE,sCAAsC;IACtC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACE,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CACJ,CAAC;AAqFJ,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAe,EACf,IAAI,EACJ,IAAgB,GACjB,EAAE,SAAS,2CAiDX;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAMrB"}

package/dist/data/Icon.js

@@ -2,6 +2,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { resolveSize } from "../lib/size.js";
 import { useDensityValue } from "../hooks/use-density.js";
+import { getFallbackIconProvider } from "./icon-fallback.js";
 const TONE_CLASSES = {
   emerald: "text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30",
   amber: "text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30",
@@ -12,10 +13,6 @@ const TONE_CLASSES = {
   neutral: "text-foreground ring-border"
 };
 const DEFAULT_PLAIN_ICON_SIZE = "1em";
-let fallbackIcon = null;
-function setFallbackIconProvider(component) {
-  fallbackIcon = component;
-}
 function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
   const transform = [
     typeof rotate === "number" ? `rotate(${rotate}deg)` : typeof rotate === "string" ? rotate : "",
@@ -35,6 +32,7 @@ function renderImportedGlyph(ImportedIcon, glyphWidth, glyphHeight, rotate, flip
   );
 }
 function renderRuntimeGlyph(name, glyphWidth, glyphHeight, glyphClassName, title) {
+  const fallbackIcon = getFallbackIconProvider();
   if (fallbackIcon) {
     const Fallback = fallbackIcon;
     const glyphSize = typeof glyphWidth === "number" ? glyphWidth : glyphHeight;
@@ -134,7 +132,6 @@ function LabelIcon({
 }
 export {
   Icon,
-  LabelIcon,
-  setFallbackIconProvider
+  LabelIcon
 };
 //# sourceMappingURL=Icon.js.map

package/dist/data/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ComponentType, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\n\n// LabelIconSpec is the icon a label may carry: an iconify/runtime name (resolved\n// via the fallback provider) or a fully-rendered node the caller supplies.\nexport type LabelIconSpec = string | ReactNode;\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30\",\n  amber: \"text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30\",\n  rose: \"text-rose-700 ring-rose-200/80 dark:text-rose-400 dark:ring-rose-500/30\",\n  slate: \"text-slate-700 ring-slate-200/80 dark:text-slate-300 dark:ring-slate-500/30\",\n  sky: \"text-sky-700 ring-sky-200/80 dark:text-sky-400 dark:ring-sky-500/30\",\n  violet: \"text-violet-700 ring-violet-200/80 dark:text-violet-400 dark:ring-violet-500/30\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\n/**\n * Optional secondary icon provider for user-supplied runtime names.\n * Built-in/default icons should pass an imported component via `icon`.\n */\nexport type FallbackIconProps = {\n  /** Runtime icon name to resolve. */\n  name?: string;\n  /** Classes applied by Icon. */\n  className?: string;\n  /** Requested glyph size. */\n  size?: string | number;\n  /** Accessible label. */\n  alt?: string;\n};\n\ntype FallbackIconComponent = ComponentType<FallbackIconProps>;\n\nlet fallbackIcon: FallbackIconComponent | null = null;\n\n/**\n * Register a secondary glyph provider. Pass the flanksource Icon/ResourceIcon\n * (or any compatible component) to resolve user-supplied runtime names.\n */\nexport function setFallbackIconProvider(component: FallbackIconComponent | null): void {\n  fallbackIcon = component;\n}\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\n/**\n * LabelIcon renders a label's leading glyph from a {@link LabelIconSpec}: a\n * string is treated as a runtime icon name (resolved by the registered fallback\n * provider), any other ReactNode is rendered as-is. Returns null for an absent\n * or empty spec so callers can spread it unconditionally before a label.\n */\nexport function LabelIcon({\n  icon,\n  className,\n}: {\n  icon?: LabelIconSpec;\n  className?: string;\n}): JSX.Element | null {\n  if (icon == null || icon === \"\" || icon === false) return null;\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} className={cn(\"shrink-0\", className)} />;\n  }\n  return <>{icon}</>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Icon.js","sources":["../../src/data/Icon.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { resolveSize, type SizeToken } from \"../lib/size\";\nimport { useDensityValue } from \"../hooks/use-density\";\nimport { getFallbackIconProvider } from \"./icon-fallback\";\n\n// LabelIconSpec is the icon a label may carry: an iconify/runtime name (resolved\n// via the fallback provider) or a fully-rendered node the caller supplies.\nexport type LabelIconSpec = string | ReactNode;\n\nexport type IconStyle = \"plain\" | \"badge\";\n\nexport type IconTone = \"emerald\" | \"amber\" | \"rose\" | \"slate\" | \"sky\" | \"violet\" | \"neutral\";\n\nexport type StaticIconComponent = ElementType;\n\ntype CommonIconProps = {\n  /** Classes applied to the glyph or badge wrapper. */\n  className?: string;\n  /** Explicit glyph width. */\n  width?: string | number;\n  /** Explicit glyph height. */\n  height?: string | number;\n  /** CSS rotate value or degrees. */\n  rotate?: string | number;\n  /** Flip direction for imported glyphs. */\n  flip?: string;\n  /** Forward inline rendering semantics to imported glyphs. */\n  inline?: boolean;\n  /** Accessible title for the glyph. */\n  title?: string;\n  /**\n   * Presentation style. `plain` (default) renders the icon inline.\n   * `badge` wraps the icon in a circular chip (white background, ring, shadow)\n   * sized by `size` — use in stage/approval cells so the chip scales with a\n   * neighbouring avatar.\n   */\n  style?: IconStyle;\n  /**\n   * Named size token (xxs..xxl). Drives the badge diameter and glyph. The\n   * glyph is always ~50% of the badge diameter so it scales consistently\n   * across sizes. For `style=\"plain\"` it sets width/height when neither is\n   * provided.\n   */\n  size?: SizeToken;\n  /** Semantic color for `style=\"badge\"`. Ignored for plain icons. */\n  tone?: IconTone;\n};\n\nexport type IconProps = CommonIconProps &\n  (\n    | {\n        /** Imported static icon component. */\n        icon: StaticIconComponent;\n        name?: never;\n      }\n    | {\n        /** Runtime icon name resolved by the fallback provider. */\n        name: string;\n        icon?: never;\n      }\n  );\n\nconst TONE_CLASSES: Record<IconTone, string> = {\n  emerald: \"text-emerald-700 ring-emerald-200/80 dark:text-emerald-400 dark:ring-emerald-500/30\",\n  amber: \"text-amber-700 ring-amber-200/80 dark:text-amber-400 dark:ring-amber-500/30\",\n  rose: \"text-rose-700 ring-rose-200/80 dark:text-rose-400 dark:ring-rose-500/30\",\n  slate: \"text-slate-700 ring-slate-200/80 dark:text-slate-300 dark:ring-slate-500/30\",\n  sky: \"text-sky-700 ring-sky-200/80 dark:text-sky-400 dark:ring-sky-500/30\",\n  violet: \"text-violet-700 ring-violet-200/80 dark:text-violet-400 dark:ring-violet-500/30\",\n  neutral: \"text-foreground ring-border\",\n};\n\nconst DEFAULT_PLAIN_ICON_SIZE = \"1em\";\n\nfunction renderImportedGlyph(\n  ImportedIcon: StaticIconComponent,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  rotate: string | number | undefined,\n  flip: string | undefined,\n  inline: boolean | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const transform = [\n    typeof rotate === \"number\" ? `rotate(${rotate}deg)` : typeof rotate === \"string\" ? rotate : \"\",\n    flip === \"horizontal\" || flip === \"both\" ? \"scaleX(-1)\" : \"\",\n    flip === \"vertical\" || flip === \"both\" ? \"scaleY(-1)\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <ImportedIcon\n      {...(glyphClassName ? { className: glyphClassName } : {})}\n      {...(glyphWidth != null ? { width: glyphWidth } : {})}\n      {...(glyphHeight != null ? { height: glyphHeight } : {})}\n      {...(inline != null ? { \"aria-hidden\": !title } : {})}\n      {...(title ? { title, role: \"img\" } : { \"aria-hidden\": true })}\n      {...(transform ? { style: { transform } } : {})}\n    />\n  );\n}\n\nfunction renderRuntimeGlyph(\n  name: string,\n  glyphWidth: number | string | undefined,\n  glyphHeight: number | string | undefined,\n  glyphClassName: string | undefined,\n  title: string | undefined,\n): JSX.Element {\n  const fallbackIcon = getFallbackIconProvider();\n  if (fallbackIcon) {\n    const Fallback = fallbackIcon;\n    const glyphSize = typeof glyphWidth === \"number\" ? glyphWidth : glyphHeight;\n    return (\n      <Fallback\n        name={name}\n        {...(glyphClassName ? { className: glyphClassName } : {})}\n        {...(glyphSize != null ? { size: glyphSize } : {})}\n        {...(title ? { alt: title } : {})}\n      />\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-sm border border-dashed border-muted-foreground/50 text-[0.65em] leading-none text-muted-foreground\",\n        glyphClassName,\n      )}\n      title={title ?? name}\n      role={title ? \"img\" : undefined}\n      aria-label={title}\n      aria-hidden={title ? undefined : true}\n      style={{\n        width: glyphWidth,\n        height: glyphHeight,\n      }}\n    >\n      ?\n    </span>\n  );\n}\n\nexport function Icon({\n  icon: ImportedIcon,\n  name,\n  className,\n  width,\n  height,\n  rotate,\n  flip,\n  inline,\n  title,\n  style = \"plain\",\n  size,\n  tone = \"neutral\",\n}: IconProps) {\n  const density = useDensityValue();\n  const pxSize = size != null ? resolveSize(size, density) : undefined;\n  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : undefined;\n  const defaultGlyphSize = style === \"badge\" ? glyphSize : (pxSize ?? DEFAULT_PLAIN_ICON_SIZE);\n  const resolvedWidth = width ?? height ?? defaultGlyphSize;\n  const resolvedHeight = height ?? resolvedWidth;\n\n  const glyphClassName = cn(\n    \"inline-block shrink-0 align-[-0.125em]\",\n    style === \"plain\" ? className : undefined,\n  );\n  const glyphTitle = style === \"plain\" ? title : undefined;\n\n  const renderedIcon = ImportedIcon\n    ? renderImportedGlyph(\n        ImportedIcon,\n        resolvedWidth,\n        resolvedHeight,\n        rotate,\n        flip,\n        inline,\n        glyphClassName,\n        glyphTitle,\n      )\n    : renderRuntimeGlyph(name, resolvedWidth, resolvedHeight, glyphClassName, glyphTitle);\n\n  if (style === \"plain\") {\n    return renderedIcon;\n  }\n\n  const badgeStyle: CSSProperties | undefined =\n    pxSize != null ? { width: pxSize, height: pxSize } : undefined;\n\n  return (\n    <span\n      title={title}\n      aria-label={title}\n      role={title ? \"img\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-inset\",\n        TONE_CLASSES[tone],\n        className,\n      )}\n      style={badgeStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\n/**\n * LabelIcon renders a label's leading glyph from a {@link LabelIconSpec}: a\n * string is treated as a runtime icon name (resolved by the registered fallback\n * provider), any other ReactNode is rendered as-is. Returns null for an absent\n * or empty spec so callers can spread it unconditionally before a label.\n */\nexport function LabelIcon({\n  icon,\n  className,\n}: {\n  icon?: LabelIconSpec;\n  className?: string;\n}): JSX.Element | null {\n  if (icon == null || icon === \"\" || icon === false) return null;\n  if (typeof icon === \"string\") {\n    return <Icon name={icon} className={cn(\"shrink-0\", className)} />;\n  }\n  return <>{icon}</>;\n}\n"],"names":[],"mappings":"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"}

package/dist/data/MatrixTable.cjs

@@ -40,13 +40,13 @@ function MatrixTable({
           /* @__PURE__ */ jsxRuntime.jsx("col", {}),
           columns.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: columnWidth } }, index))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: utils.cn("bg-muted/40", !angledHeaders && "border-b border-border", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: utils.cn(!angledHeaders && "border-b border-border", headerClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "th",
             {
               scope: "col",
               className: utils.cn(
-                "sticky left-0 top-0 z-30 min-w-44 border-r border-border bg-muted text-left font-medium",
+                "sticky left-0 top-0 z-30 min-w-44 border-r border-border text-left font-medium",
                 headerCellPadding,
                 angledHeaders ? "align-bottom" : utils.cn("border-b border-border", columnClassName),
                 headerClassName
@@ -61,7 +61,7 @@ function MatrixTable({
                 scope: "col",
                 title: columnTitle(column),
                 className: utils.cn(
-                  "sticky top-0 z-20 overflow-visible border-b border-border bg-muted p-0 align-bottom",
+                  "sticky top-0 z-20 overflow-visible border-b border-border p-0 align-bottom",
                   columnClassName,
                   headerClassName
                 ),
@@ -117,7 +117,7 @@ function MatrixTable({
               {
                 scope: "col",
                 className: utils.cn(
-                  "sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border bg-muted text-center text-xs font-medium text-muted-foreground",
+                  "sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border text-center text-xs font-medium text-muted-foreground",
                   headerCellPadding,
                   columnClassName,
                   headerClassName

package/dist/data/MatrixTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MatrixTable.cjs","sources":["../../src/data/MatrixTable.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MatrixTableRow = {\n  key: string;\n  label: ReactNode;\n  cells: ReactNode[];\n};\n\nexport type MatrixTableProps = {\n  columns: ReactNode[];\n  rows: MatrixTableRow[];\n  corner?: ReactNode;\n  emptyMessage?: ReactNode;\n  angledHeaders?: boolean;\n  density?: \"default\" | \"compact\";\n  columnWidth?: number;\n  headerHeight?: number;\n  // maxHeight caps the scroll viewport so the body scrolls under frozen\n  // headers (Excel-style freeze panes). Accepts any CSS length; number => px.\n  maxHeight?: number | string;\n  className?: string;\n  columnClassName?: string;\n  rowLabelClassName?: string;\n  cellClassName?: string;\n  // headerClassName is appended to the header row and every header cell (corner\n  // + columns). Use it to override the default gray header background, e.g.\n  // \"bg-transparent\", since tailwind-merge lets the later class win.\n  headerClassName?: string;\n};\n\nexport function MatrixTable({\n  columns,\n  rows,\n  corner,\n  emptyMessage = \"No data\",\n  angledHeaders = false,\n  density = \"default\",\n  columnWidth = 48,\n  headerHeight = 120,\n  maxHeight,\n  className,\n  columnClassName,\n  rowLabelClassName,\n  cellClassName,\n  headerClassName,\n}: MatrixTableProps) {\n  if (rows.length === 0 || columns.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const textWidth = Math.round(headerHeight * 1.41);\n  const diagonalOverhang = Math.round(headerHeight * 0.71);\n  const compact = density === \"compact\";\n  const headerCellPadding = compact ? \"px-density-2 py-density-1\" : \"px-density-3 py-density-2\";\n  const rowLabelPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n  const bodyCellPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n\n  return (\n    <div\n      className={cn(\"overflow-auto rounded-md border border-border\", className)}\n      style={{\n        ...(angledHeaders ? { paddingRight: diagonalOverhang } : undefined),\n        ...(maxHeight !== undefined ? { maxHeight } : undefined),\n      }}\n    >\n      <table className={cn(\"w-max border-collapse\", compact ? \"text-xs\" : \"text-sm\")}>\n        {angledHeaders && (\n          <colgroup>\n            <col />\n            {columns.map((_, index) => (\n              <col key={index} style={{ width: columnWidth }} />\n            ))}\n          </colgroup>\n        )}\n        <thead>\n          <tr className={cn(\"bg-muted/40\", !angledHeaders && \"border-b border-border\", headerClassName)}>\n            <th\n              scope=\"col\"\n              className={cn(\n                \"sticky left-0 top-0 z-30 min-w-44 border-r border-border bg-muted text-left font-medium\",\n                headerCellPadding,\n                angledHeaders ? \"align-bottom\" : cn(\"border-b border-border\", columnClassName),\n                headerClassName,\n              )}\n            >\n              {corner}\n            </th>\n            {columns.map((column, index) =>\n              angledHeaders ? (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  title={columnTitle(column)}\n                  className={cn(\n                    \"sticky top-0 z-20 overflow-visible border-b border-border bg-muted p-0 align-bottom\",\n                    columnClassName,\n                    headerClassName,\n                  )}\n                  style={{\n                    width: columnWidth,\n                    minWidth: columnWidth,\n                    maxWidth: columnWidth,\n                    height: headerHeight,\n                  }}\n                >\n                  <div\n                    className=\"absolute bottom-0 border-b border-border\"\n                    style={{\n                      left: columnWidth,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  />\n                  {index === 0 && (\n                    <div\n                      className=\"absolute bottom-0 border-b border-border\"\n                      style={{\n                        left: 0,\n                        width: textWidth,\n                        transform: \"rotate(-45deg)\",\n                        transformOrigin: \"0 100%\",\n                      }}\n                    />\n                  )}\n                  <div\n                    className=\"absolute bottom-2 overflow-hidden text-ellipsis whitespace-nowrap pl-1 text-left text-xs font-medium leading-none text-muted-foreground\"\n                    style={{\n                      left: columnWidth / 2,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  >\n                    {column}\n                  </div>\n                </th>\n              ) : (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  className={cn(\n                    \"sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border bg-muted text-center text-xs font-medium text-muted-foreground\",\n                    headerCellPadding,\n                    columnClassName,\n                    headerClassName,\n                  )}\n                >\n                  {column}\n                </th>\n              ),\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => (\n            <tr key={row.key} className=\"border-b border-border last:border-b-0\">\n              <th\n                scope=\"row\"\n                className={cn(\n                  \"sticky left-0 z-10 border-r border-border bg-background text-left font-medium\",\n                  rowLabelPadding,\n                  rowLabelClassName,\n                )}\n              >\n                {row.label}\n              </th>\n              {columns.map((_, index) => (\n                <td\n                  key={index}\n                  className={cn(\n                    angledHeaders\n                      ? \"p-0 text-center align-middle\"\n                      : cn(bodyCellPadding, \"text-center align-middle\"),\n                    cellClassName,\n                  )}\n                  style={\n                    angledHeaders\n                      ? {\n                          width: columnWidth,\n                          minWidth: columnWidth,\n                          maxWidth: columnWidth,\n                        }\n                      : undefined\n                  }\n                >\n                  {row.cells[index] ?? null}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction columnTitle(column: ReactNode) {\n  if (typeof column === \"string\" || typeof column === \"number\") {\n    return String(column);\n  }\n  return undefined;\n}\n"],"names":["jsx","cn","jsxs"],"mappings":"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"}
+{"version":3,"file":"MatrixTable.cjs","sources":["../../src/data/MatrixTable.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MatrixTableRow = {\n  key: string;\n  label: ReactNode;\n  cells: ReactNode[];\n};\n\nexport type MatrixTableProps = {\n  columns: ReactNode[];\n  rows: MatrixTableRow[];\n  corner?: ReactNode;\n  emptyMessage?: ReactNode;\n  angledHeaders?: boolean;\n  density?: \"default\" | \"compact\";\n  columnWidth?: number;\n  headerHeight?: number;\n  // maxHeight caps the scroll viewport so the body scrolls under frozen\n  // headers (Excel-style freeze panes). Accepts any CSS length; number => px.\n  maxHeight?: number | string;\n  className?: string;\n  columnClassName?: string;\n  rowLabelClassName?: string;\n  cellClassName?: string;\n  // headerClassName is appended to the header row and every header cell (corner\n  // + columns). The header has no background by default; use this to add one,\n  // e.g. \"bg-muted\", since tailwind-merge lets the later class win.\n  headerClassName?: string;\n};\n\nexport function MatrixTable({\n  columns,\n  rows,\n  corner,\n  emptyMessage = \"No data\",\n  angledHeaders = false,\n  density = \"default\",\n  columnWidth = 48,\n  headerHeight = 120,\n  maxHeight,\n  className,\n  columnClassName,\n  rowLabelClassName,\n  cellClassName,\n  headerClassName,\n}: MatrixTableProps) {\n  if (rows.length === 0 || columns.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const textWidth = Math.round(headerHeight * 1.41);\n  const diagonalOverhang = Math.round(headerHeight * 0.71);\n  const compact = density === \"compact\";\n  const headerCellPadding = compact ? \"px-density-2 py-density-1\" : \"px-density-3 py-density-2\";\n  const rowLabelPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n  const bodyCellPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n\n  return (\n    <div\n      className={cn(\"overflow-auto rounded-md border border-border\", className)}\n      style={{\n        ...(angledHeaders ? { paddingRight: diagonalOverhang } : undefined),\n        ...(maxHeight !== undefined ? { maxHeight } : undefined),\n      }}\n    >\n      <table className={cn(\"w-max border-collapse\", compact ? \"text-xs\" : \"text-sm\")}>\n        {angledHeaders && (\n          <colgroup>\n            <col />\n            {columns.map((_, index) => (\n              <col key={index} style={{ width: columnWidth }} />\n            ))}\n          </colgroup>\n        )}\n        <thead>\n          <tr className={cn(!angledHeaders && \"border-b border-border\", headerClassName)}>\n            <th\n              scope=\"col\"\n              className={cn(\n                \"sticky left-0 top-0 z-30 min-w-44 border-r border-border text-left font-medium\",\n                headerCellPadding,\n                angledHeaders ? \"align-bottom\" : cn(\"border-b border-border\", columnClassName),\n                headerClassName,\n              )}\n            >\n              {corner}\n            </th>\n            {columns.map((column, index) =>\n              angledHeaders ? (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  title={columnTitle(column)}\n                  className={cn(\n                    \"sticky top-0 z-20 overflow-visible border-b border-border p-0 align-bottom\",\n                    columnClassName,\n                    headerClassName,\n                  )}\n                  style={{\n                    width: columnWidth,\n                    minWidth: columnWidth,\n                    maxWidth: columnWidth,\n                    height: headerHeight,\n                  }}\n                >\n                  <div\n                    className=\"absolute bottom-0 border-b border-border\"\n                    style={{\n                      left: columnWidth,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  />\n                  {index === 0 && (\n                    <div\n                      className=\"absolute bottom-0 border-b border-border\"\n                      style={{\n                        left: 0,\n                        width: textWidth,\n                        transform: \"rotate(-45deg)\",\n                        transformOrigin: \"0 100%\",\n                      }}\n                    />\n                  )}\n                  <div\n                    className=\"absolute bottom-2 overflow-hidden text-ellipsis whitespace-nowrap pl-1 text-left text-xs font-medium leading-none text-muted-foreground\"\n                    style={{\n                      left: columnWidth / 2,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  >\n                    {column}\n                  </div>\n                </th>\n              ) : (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  className={cn(\n                    \"sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border text-center text-xs font-medium text-muted-foreground\",\n                    headerCellPadding,\n                    columnClassName,\n                    headerClassName,\n                  )}\n                >\n                  {column}\n                </th>\n              ),\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => (\n            <tr key={row.key} className=\"border-b border-border last:border-b-0\">\n              <th\n                scope=\"row\"\n                className={cn(\n                  \"sticky left-0 z-10 border-r border-border bg-background text-left font-medium\",\n                  rowLabelPadding,\n                  rowLabelClassName,\n                )}\n              >\n                {row.label}\n              </th>\n              {columns.map((_, index) => (\n                <td\n                  key={index}\n                  className={cn(\n                    angledHeaders\n                      ? \"p-0 text-center align-middle\"\n                      : cn(bodyCellPadding, \"text-center align-middle\"),\n                    cellClassName,\n                  )}\n                  style={\n                    angledHeaders\n                      ? {\n                          width: columnWidth,\n                          minWidth: columnWidth,\n                          maxWidth: columnWidth,\n                        }\n                      : undefined\n                  }\n                >\n                  {row.cells[index] ?? null}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction columnTitle(column: ReactNode) {\n  if (typeof column === \"string\" || typeof column === \"number\") {\n    return String(column);\n  }\n  return undefined;\n}\n"],"names":["jsx","cn","jsxs"],"mappings":"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"}

package/dist/data/MatrixTable.js

@@ -38,13 +38,13 @@ function MatrixTable({
           /* @__PURE__ */ jsx("col", {}),
           columns.map((_, index) => /* @__PURE__ */ jsx("col", { style: { width: columnWidth } }, index))
         ] }),
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: cn("bg-muted/40", !angledHeaders && "border-b border-border", headerClassName), children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: cn(!angledHeaders && "border-b border-border", headerClassName), children: [
           /* @__PURE__ */ jsx(
             "th",
             {
               scope: "col",
               className: cn(
-                "sticky left-0 top-0 z-30 min-w-44 border-r border-border bg-muted text-left font-medium",
+                "sticky left-0 top-0 z-30 min-w-44 border-r border-border text-left font-medium",
                 headerCellPadding,
                 angledHeaders ? "align-bottom" : cn("border-b border-border", columnClassName),
                 headerClassName
@@ -59,7 +59,7 @@ function MatrixTable({
                 scope: "col",
                 title: columnTitle(column),
                 className: cn(
-                  "sticky top-0 z-20 overflow-visible border-b border-border bg-muted p-0 align-bottom",
+                  "sticky top-0 z-20 overflow-visible border-b border-border p-0 align-bottom",
                   columnClassName,
                   headerClassName
                 ),
@@ -115,7 +115,7 @@ function MatrixTable({
               {
                 scope: "col",
                 className: cn(
-                  "sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border bg-muted text-center text-xs font-medium text-muted-foreground",
+                  "sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border text-center text-xs font-medium text-muted-foreground",
                   headerCellPadding,
                   columnClassName,
                   headerClassName

package/dist/data/MatrixTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MatrixTable.js","sources":["../../src/data/MatrixTable.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MatrixTableRow = {\n  key: string;\n  label: ReactNode;\n  cells: ReactNode[];\n};\n\nexport type MatrixTableProps = {\n  columns: ReactNode[];\n  rows: MatrixTableRow[];\n  corner?: ReactNode;\n  emptyMessage?: ReactNode;\n  angledHeaders?: boolean;\n  density?: \"default\" | \"compact\";\n  columnWidth?: number;\n  headerHeight?: number;\n  // maxHeight caps the scroll viewport so the body scrolls under frozen\n  // headers (Excel-style freeze panes). Accepts any CSS length; number => px.\n  maxHeight?: number | string;\n  className?: string;\n  columnClassName?: string;\n  rowLabelClassName?: string;\n  cellClassName?: string;\n  // headerClassName is appended to the header row and every header cell (corner\n  // + columns). Use it to override the default gray header background, e.g.\n  // \"bg-transparent\", since tailwind-merge lets the later class win.\n  headerClassName?: string;\n};\n\nexport function MatrixTable({\n  columns,\n  rows,\n  corner,\n  emptyMessage = \"No data\",\n  angledHeaders = false,\n  density = \"default\",\n  columnWidth = 48,\n  headerHeight = 120,\n  maxHeight,\n  className,\n  columnClassName,\n  rowLabelClassName,\n  cellClassName,\n  headerClassName,\n}: MatrixTableProps) {\n  if (rows.length === 0 || columns.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const textWidth = Math.round(headerHeight * 1.41);\n  const diagonalOverhang = Math.round(headerHeight * 0.71);\n  const compact = density === \"compact\";\n  const headerCellPadding = compact ? \"px-density-2 py-density-1\" : \"px-density-3 py-density-2\";\n  const rowLabelPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n  const bodyCellPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n\n  return (\n    <div\n      className={cn(\"overflow-auto rounded-md border border-border\", className)}\n      style={{\n        ...(angledHeaders ? { paddingRight: diagonalOverhang } : undefined),\n        ...(maxHeight !== undefined ? { maxHeight } : undefined),\n      }}\n    >\n      <table className={cn(\"w-max border-collapse\", compact ? \"text-xs\" : \"text-sm\")}>\n        {angledHeaders && (\n          <colgroup>\n            <col />\n            {columns.map((_, index) => (\n              <col key={index} style={{ width: columnWidth }} />\n            ))}\n          </colgroup>\n        )}\n        <thead>\n          <tr className={cn(\"bg-muted/40\", !angledHeaders && \"border-b border-border\", headerClassName)}>\n            <th\n              scope=\"col\"\n              className={cn(\n                \"sticky left-0 top-0 z-30 min-w-44 border-r border-border bg-muted text-left font-medium\",\n                headerCellPadding,\n                angledHeaders ? \"align-bottom\" : cn(\"border-b border-border\", columnClassName),\n                headerClassName,\n              )}\n            >\n              {corner}\n            </th>\n            {columns.map((column, index) =>\n              angledHeaders ? (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  title={columnTitle(column)}\n                  className={cn(\n                    \"sticky top-0 z-20 overflow-visible border-b border-border bg-muted p-0 align-bottom\",\n                    columnClassName,\n                    headerClassName,\n                  )}\n                  style={{\n                    width: columnWidth,\n                    minWidth: columnWidth,\n                    maxWidth: columnWidth,\n                    height: headerHeight,\n                  }}\n                >\n                  <div\n                    className=\"absolute bottom-0 border-b border-border\"\n                    style={{\n                      left: columnWidth,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  />\n                  {index === 0 && (\n                    <div\n                      className=\"absolute bottom-0 border-b border-border\"\n                      style={{\n                        left: 0,\n                        width: textWidth,\n                        transform: \"rotate(-45deg)\",\n                        transformOrigin: \"0 100%\",\n                      }}\n                    />\n                  )}\n                  <div\n                    className=\"absolute bottom-2 overflow-hidden text-ellipsis whitespace-nowrap pl-1 text-left text-xs font-medium leading-none text-muted-foreground\"\n                    style={{\n                      left: columnWidth / 2,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  >\n                    {column}\n                  </div>\n                </th>\n              ) : (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  className={cn(\n                    \"sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border bg-muted text-center text-xs font-medium text-muted-foreground\",\n                    headerCellPadding,\n                    columnClassName,\n                    headerClassName,\n                  )}\n                >\n                  {column}\n                </th>\n              ),\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => (\n            <tr key={row.key} className=\"border-b border-border last:border-b-0\">\n              <th\n                scope=\"row\"\n                className={cn(\n                  \"sticky left-0 z-10 border-r border-border bg-background text-left font-medium\",\n                  rowLabelPadding,\n                  rowLabelClassName,\n                )}\n              >\n                {row.label}\n              </th>\n              {columns.map((_, index) => (\n                <td\n                  key={index}\n                  className={cn(\n                    angledHeaders\n                      ? \"p-0 text-center align-middle\"\n                      : cn(bodyCellPadding, \"text-center align-middle\"),\n                    cellClassName,\n                  )}\n                  style={\n                    angledHeaders\n                      ? {\n                          width: columnWidth,\n                          minWidth: columnWidth,\n                          maxWidth: columnWidth,\n                        }\n                      : undefined\n                  }\n                >\n                  {row.cells[index] ?? null}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction columnTitle(column: ReactNode) {\n  if (typeof column === \"string\" || typeof column === \"number\") {\n    return String(column);\n  }\n  return undefined;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MatrixTable.js","sources":["../../src/data/MatrixTable.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type MatrixTableRow = {\n  key: string;\n  label: ReactNode;\n  cells: ReactNode[];\n};\n\nexport type MatrixTableProps = {\n  columns: ReactNode[];\n  rows: MatrixTableRow[];\n  corner?: ReactNode;\n  emptyMessage?: ReactNode;\n  angledHeaders?: boolean;\n  density?: \"default\" | \"compact\";\n  columnWidth?: number;\n  headerHeight?: number;\n  // maxHeight caps the scroll viewport so the body scrolls under frozen\n  // headers (Excel-style freeze panes). Accepts any CSS length; number => px.\n  maxHeight?: number | string;\n  className?: string;\n  columnClassName?: string;\n  rowLabelClassName?: string;\n  cellClassName?: string;\n  // headerClassName is appended to the header row and every header cell (corner\n  // + columns). The header has no background by default; use this to add one,\n  // e.g. \"bg-muted\", since tailwind-merge lets the later class win.\n  headerClassName?: string;\n};\n\nexport function MatrixTable({\n  columns,\n  rows,\n  corner,\n  emptyMessage = \"No data\",\n  angledHeaders = false,\n  density = \"default\",\n  columnWidth = 48,\n  headerHeight = 120,\n  maxHeight,\n  className,\n  columnClassName,\n  rowLabelClassName,\n  cellClassName,\n  headerClassName,\n}: MatrixTableProps) {\n  if (rows.length === 0 || columns.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const textWidth = Math.round(headerHeight * 1.41);\n  const diagonalOverhang = Math.round(headerHeight * 0.71);\n  const compact = density === \"compact\";\n  const headerCellPadding = compact ? \"px-density-2 py-density-1\" : \"px-density-3 py-density-2\";\n  const rowLabelPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n  const bodyCellPadding = compact ? \"px-density-2 py-1\" : \"px-density-3 py-density-2\";\n\n  return (\n    <div\n      className={cn(\"overflow-auto rounded-md border border-border\", className)}\n      style={{\n        ...(angledHeaders ? { paddingRight: diagonalOverhang } : undefined),\n        ...(maxHeight !== undefined ? { maxHeight } : undefined),\n      }}\n    >\n      <table className={cn(\"w-max border-collapse\", compact ? \"text-xs\" : \"text-sm\")}>\n        {angledHeaders && (\n          <colgroup>\n            <col />\n            {columns.map((_, index) => (\n              <col key={index} style={{ width: columnWidth }} />\n            ))}\n          </colgroup>\n        )}\n        <thead>\n          <tr className={cn(!angledHeaders && \"border-b border-border\", headerClassName)}>\n            <th\n              scope=\"col\"\n              className={cn(\n                \"sticky left-0 top-0 z-30 min-w-44 border-r border-border text-left font-medium\",\n                headerCellPadding,\n                angledHeaders ? \"align-bottom\" : cn(\"border-b border-border\", columnClassName),\n                headerClassName,\n              )}\n            >\n              {corner}\n            </th>\n            {columns.map((column, index) =>\n              angledHeaders ? (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  title={columnTitle(column)}\n                  className={cn(\n                    \"sticky top-0 z-20 overflow-visible border-b border-border p-0 align-bottom\",\n                    columnClassName,\n                    headerClassName,\n                  )}\n                  style={{\n                    width: columnWidth,\n                    minWidth: columnWidth,\n                    maxWidth: columnWidth,\n                    height: headerHeight,\n                  }}\n                >\n                  <div\n                    className=\"absolute bottom-0 border-b border-border\"\n                    style={{\n                      left: columnWidth,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  />\n                  {index === 0 && (\n                    <div\n                      className=\"absolute bottom-0 border-b border-border\"\n                      style={{\n                        left: 0,\n                        width: textWidth,\n                        transform: \"rotate(-45deg)\",\n                        transformOrigin: \"0 100%\",\n                      }}\n                    />\n                  )}\n                  <div\n                    className=\"absolute bottom-2 overflow-hidden text-ellipsis whitespace-nowrap pl-1 text-left text-xs font-medium leading-none text-muted-foreground\"\n                    style={{\n                      left: columnWidth / 2,\n                      width: textWidth,\n                      transform: \"rotate(-45deg)\",\n                      transformOrigin: \"0 100%\",\n                    }}\n                  >\n                    {column}\n                  </div>\n                </th>\n              ) : (\n                <th\n                  key={index}\n                  scope=\"col\"\n                  className={cn(\n                    \"sticky top-0 z-20 min-w-24 whitespace-nowrap border-b border-border text-center text-xs font-medium text-muted-foreground\",\n                    headerCellPadding,\n                    columnClassName,\n                    headerClassName,\n                  )}\n                >\n                  {column}\n                </th>\n              ),\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => (\n            <tr key={row.key} className=\"border-b border-border last:border-b-0\">\n              <th\n                scope=\"row\"\n                className={cn(\n                  \"sticky left-0 z-10 border-r border-border bg-background text-left font-medium\",\n                  rowLabelPadding,\n                  rowLabelClassName,\n                )}\n              >\n                {row.label}\n              </th>\n              {columns.map((_, index) => (\n                <td\n                  key={index}\n                  className={cn(\n                    angledHeaders\n                      ? \"p-0 text-center align-middle\"\n                      : cn(bodyCellPadding, \"text-center align-middle\"),\n                    cellClassName,\n                  )}\n                  style={\n                    angledHeaders\n                      ? {\n                          width: columnWidth,\n                          minWidth: columnWidth,\n                          maxWidth: columnWidth,\n                        }\n                      : undefined\n                  }\n                >\n                  {row.cells[index] ?? null}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction columnTitle(column: ReactNode) {\n  if (typeof column === \"string\" || typeof column === \"number\") {\n    return String(column);\n  }\n  return undefined;\n}\n"],"names":[],"mappings":"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"}

package/dist/data/RadialGauge.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const arcToneClass = {
+  neutral: "text-foreground",
+  success: "text-green-500",
+  warning: "text-yellow-500",
+  danger: "text-red-500",
+  info: "text-blue-500"
+};
+function RadialGauge({
+  value,
+  max = 100,
+  size = 28,
+  thickness = 3,
+  tone = "neutral",
+  center,
+  label,
+  title,
+  className
+}) {
+  const clamped = Math.max(0, Math.min(max, value));
+  const pct = max > 0 ? clamped / max : 0;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - pct);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils.cn("inline-flex items-center gap-1.5", className),
+      title,
+      role: "meter",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex shrink-0", style: { width: size, height: size }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, className: "-rotate-90", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "text-muted-foreground/20",
+                stroke: "currentColor",
+                fill: "none",
+                strokeWidth: thickness,
+                r: radius,
+                cx: size / 2,
+                cy: size / 2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: utils.cn("transition-[stroke-dashoffset] duration-500", arcToneClass[tone]),
+                stroke: "currentColor",
+                fill: "none",
+                strokeWidth: thickness,
+                strokeLinecap: "round",
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+                r: radius,
+                cx: size / 2,
+                cy: size / 2
+              }
+            )
+          ] }),
+          center != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: center })
+        ] }),
+        label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+exports.RadialGauge = RadialGauge;
+//# sourceMappingURL=RadialGauge.cjs.map

package/dist/data/RadialGauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.cjs","sources":["../../src/data/RadialGauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GaugeTone } from \"./Gauge\";\n\nexport type RadialGaugeProps = {\n  /** Current value. Clamped to [0, max]. */\n  value: number;\n  /** Value that fills the ring completely. */\n  max?: number;\n  /** Outer diameter in pixels. */\n  size?: number;\n  /** Ring thickness in pixels. */\n  thickness?: number;\n  /** Arc color. Defaults to neutral. */\n  tone?: GaugeTone;\n  /** Content rendered centered inside the ring (icon, number, …). */\n  center?: ReactNode;\n  /** Text rendered to the right of the ring. */\n  label?: ReactNode;\n  /** Native tooltip / accessible title. */\n  title?: string;\n  /** Classes applied to the root flex row. */\n  className?: string;\n};\n\nconst arcToneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-500\",\n  warning: \"text-yellow-500\",\n  danger: \"text-red-500\",\n  info: \"text-blue-500\",\n};\n\nexport function RadialGauge({\n  value,\n  max = 100,\n  size = 28,\n  thickness = 3,\n  tone = \"neutral\",\n  center,\n  label,\n  title,\n  className,\n}: RadialGaugeProps) {\n  const clamped = Math.max(0, Math.min(max, value));\n  const pct = max > 0 ? clamped / max : 0;\n  const radius = (size - thickness) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference * (1 - pct);\n\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      title={title}\n      role=\"meter\"\n      aria-valuenow={clamped}\n      aria-valuemin={0}\n      aria-valuemax={max}\n    >\n      <span className=\"relative inline-flex shrink-0\" style={{ width: size, height: size }}>\n        <svg width={size} height={size} className=\"-rotate-90\">\n          <circle\n            className=\"text-muted-foreground/20\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            strokeWidth={thickness}\n            r={radius}\n            cx={size / 2}\n            cy={size / 2}\n          />\n          <circle\n            className={cn(\"transition-[stroke-dashoffset] duration-500\", arcToneClass[tone])}\n            stroke=\"currentColor\"\n            fill=\"none\"\n            strokeWidth={thickness}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={offset}\n            r={radius}\n            cx={size / 2}\n            cy={size / 2}\n          />\n        </svg>\n        {center != null && (\n          <span className=\"absolute inset-0 flex items-center justify-center\">{center}</span>\n        )}\n      </span>\n      {label != null && <span className=\"text-xs text-muted-foreground\">{label}</span>}\n    </span>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAyBA,MAAM,eAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AAChD,QAAM,MAAM,MAAM,IAAI,UAAU,MAAM;AACtC,QAAM,UAAU,OAAO,aAAa;AACpC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAS,iBAAiB,IAAI;AAEpC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA,GAAG,oCAAoC,SAAS;AAAA,MAC3D;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,UAAA;AAAA,QAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAC5E,UAAA;AAAA,UAAAA,gCAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,cACxC,UAAA;AAAA,YAAAE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,GAAG;AAAA,gBACH,IAAI,OAAO;AAAA,gBACX,IAAI,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAEbA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD,MAAAA,GAAG,+CAA+C,aAAa,IAAI,CAAC;AAAA,gBAC/E,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,eAAc;AAAA,gBACd,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAG;AAAA,gBACH,IAAI,OAAO;AAAA,gBACX,IAAI,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,GACF;AAAA,UACC,UAAU,QACTC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAA,CAAO;AAAA,QAAA,GAEhF;AAAA,QACC,SAAS,QAAQA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/E;;"}

package/dist/data/RadialGauge.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { GaugeTone } from './Gauge';
+export type RadialGaugeProps = {
+    /** Current value. Clamped to [0, max]. */
+    value: number;
+    /** Value that fills the ring completely. */
+    max?: number;
+    /** Outer diameter in pixels. */
+    size?: number;
+    /** Ring thickness in pixels. */
+    thickness?: number;
+    /** Arc color. Defaults to neutral. */
+    tone?: GaugeTone;
+    /** Content rendered centered inside the ring (icon, number, …). */
+    center?: ReactNode;
+    /** Text rendered to the right of the ring. */
+    label?: ReactNode;
+    /** Native tooltip / accessible title. */
+    title?: string;
+    /** Classes applied to the root flex row. */
+    className?: string;
+};
+export declare function RadialGauge({ value, max, size, thickness, tone, center, label, title, className, }: RadialGaugeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadialGauge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.d.ts","sourceRoot":"","sources":["../../src/data/RadialGauge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAS,EACT,IAAS,EACT,SAAa,EACb,IAAgB,EAChB,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,2CA+ClB"}

package/dist/data/RadialGauge.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const arcToneClass = {
+  neutral: "text-foreground",
+  success: "text-green-500",
+  warning: "text-yellow-500",
+  danger: "text-red-500",
+  info: "text-blue-500"
+};
+function RadialGauge({
+  value,
+  max = 100,
+  size = 28,
+  thickness = 3,
+  tone = "neutral",
+  center,
+  label,
+  title,
+  className
+}) {
+  const clamped = Math.max(0, Math.min(max, value));
+  const pct = max > 0 ? clamped / max : 0;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - pct);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1.5", className),
+      title,
+      role: "meter",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", style: { width: size, height: size }, children: [
+          /* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "-rotate-90", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "text-muted-foreground/20",
+                stroke: "currentColor",
+                fill: "none",
+                strokeWidth: thickness,
+                r: radius,
+                cx: size / 2,
+                cy: size / 2
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: cn("transition-[stroke-dashoffset] duration-500", arcToneClass[tone]),
+                stroke: "currentColor",
+                fill: "none",
+                strokeWidth: thickness,
+                strokeLinecap: "round",
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+                r: radius,
+                cx: size / 2,
+                cy: size / 2
+              }
+            )
+          ] }),
+          center != null && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: center })
+        ] }),
+        label != null && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+export {
+  RadialGauge
+};
+//# sourceMappingURL=RadialGauge.js.map

package/dist/data/RadialGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.js","sources":["../../src/data/RadialGauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { GaugeTone } from \"./Gauge\";\n\nexport type RadialGaugeProps = {\n  /** Current value. Clamped to [0, max]. */\n  value: number;\n  /** Value that fills the ring completely. */\n  max?: number;\n  /** Outer diameter in pixels. */\n  size?: number;\n  /** Ring thickness in pixels. */\n  thickness?: number;\n  /** Arc color. Defaults to neutral. */\n  tone?: GaugeTone;\n  /** Content rendered centered inside the ring (icon, number, …). */\n  center?: ReactNode;\n  /** Text rendered to the right of the ring. */\n  label?: ReactNode;\n  /** Native tooltip / accessible title. */\n  title?: string;\n  /** Classes applied to the root flex row. */\n  className?: string;\n};\n\nconst arcToneClass: Record<GaugeTone, string> = {\n  neutral: \"text-foreground\",\n  success: \"text-green-500\",\n  warning: \"text-yellow-500\",\n  danger: \"text-red-500\",\n  info: \"text-blue-500\",\n};\n\nexport function RadialGauge({\n  value,\n  max = 100,\n  size = 28,\n  thickness = 3,\n  tone = \"neutral\",\n  center,\n  label,\n  title,\n  className,\n}: RadialGaugeProps) {\n  const clamped = Math.max(0, Math.min(max, value));\n  const pct = max > 0 ? clamped / max : 0;\n  const radius = (size - thickness) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference * (1 - pct);\n\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      title={title}\n      role=\"meter\"\n      aria-valuenow={clamped}\n      aria-valuemin={0}\n      aria-valuemax={max}\n    >\n      <span className=\"relative inline-flex shrink-0\" style={{ width: size, height: size }}>\n        <svg width={size} height={size} className=\"-rotate-90\">\n          <circle\n            className=\"text-muted-foreground/20\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            strokeWidth={thickness}\n            r={radius}\n            cx={size / 2}\n            cy={size / 2}\n          />\n          <circle\n            className={cn(\"transition-[stroke-dashoffset] duration-500\", arcToneClass[tone])}\n            stroke=\"currentColor\"\n            fill=\"none\"\n            strokeWidth={thickness}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={offset}\n            r={radius}\n            cx={size / 2}\n            cy={size / 2}\n          />\n        </svg>\n        {center != null && (\n          <span className=\"absolute inset-0 flex items-center justify-center\">{center}</span>\n        )}\n      </span>\n      {label != null && <span className=\"text-xs text-muted-foreground\">{label}</span>}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAyBA,MAAM,eAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AAChD,QAAM,MAAM,MAAM,IAAI,UAAU,MAAM;AACtC,QAAM,UAAU,OAAO,aAAa;AACpC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAS,iBAAiB,IAAI;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC3D;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,UAAA;AAAA,QAAA,qBAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAA,GAC5E,UAAA;AAAA,UAAA,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,cACxC,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,GAAG;AAAA,gBACH,IAAI,OAAO;AAAA,gBACX,IAAI,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAEb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,+CAA+C,aAAa,IAAI,CAAC;AAAA,gBAC/E,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,eAAc;AAAA,gBACd,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAG;AAAA,gBACH,IAAI,OAAO;AAAA,gBACX,IAAI,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,GACF;AAAA,UACC,UAAU,QACT,oBAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAA,CAAO;AAAA,QAAA,GAEhF;AAAA,QACC,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/E;"}