@hexclave/dashboard-ui-components 1.0.61 → 1.0.62

package/dist/components/badge.d.ts

@@ -6,7 +6,8 @@ type DesignBadgeContentMode = "both" | "text" | "icon";
 type DesignBadgeProps = {
   label: string;
   color: DesignBadgeColor;
-  icon?: React.ElementType;
+  icon?: React.ElementType; /** Extra classes merged onto the rendered icon, e.g. `animate-spin` for an in-progress status. */
+  iconClassName?: string;
   size?: DesignBadgeSize; /** What to display: "both" (default), "text" (label only), or "icon" (icon only; requires icon prop). */
   contentMode?: DesignBadgeContentMode;
 };
@@ -30,6 +31,7 @@ declare function DesignBadge({
   label,
   color,
   icon,
+  iconClassName,
   size,
   contentMode
 }: DesignBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/components/badge.tsx"],"mappings":";KAIY,gBAAA;AAAA,KACA,eAAA;;KAoBA,sBAAA;AAAA,KAEA,gBAAA;EACV,KAAA;EACA,KAAA,EAAO,gBAAA;EACP,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,IAAA,GAAO,eAAA,EA1BkB;EA4BzB,WAAA,GAAc,sBAAA;AAAA;;;;AARkB;AAElC;;;;;;;;;;;;iBAiDgB,WAAA;EACd,KAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,+BAAgB,GAAA,CAAA,OAAA"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/components/badge.tsx"],"mappings":";KAIY,gBAAA;AAAA,KACA,eAAA;;KAoBA,sBAAA;AAAA,KAEA,gBAAA;EACV,KAAA;EACA,KAAA,EAAO,gBAAA;EACP,IAAA,GAAO,KAAA,CAAM,WAAA;EAEb,aAAA;EACA,IAAA,GAAO,eAAA,EARG;EAUV,WAAA,GAAc,sBAAA;AAAA;;AAVkB;AAElC;;;;;;;;;;;;;;iBAmDgB,WAAA;EACd,KAAA;EACA,KAAA;EACA,IAAA;EACA,aAAA;EACA,IAAA;EACA;AAAA,GACC,gBAAA,+BAAgB,GAAA,CAAA,OAAA"}

package/dist/components/badge.js

@@ -51,7 +51,7 @@ function getShowLabelShowIcon(contentMode, hasIcon) {
 * - `color` is one of: `"blue" | "cyan" | "purple" | "green" | "orange" | "red"`.
 * - `icon` is optional but, if set via `contentMode: "icon"`, is required.
 */
-function DesignBadge({ label, color, icon, size = "md", contentMode = "both" }) {
+function DesignBadge({ label, color, icon, iconClassName, size = "md", contentMode = "both" }) {
 	const Icon = icon;
 	const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);
 	if (!showLabel && !showIcon) throw new Error("DesignBadge must show at least label or icon.");
@@ -60,7 +60,7 @@ function DesignBadge({ label, color, icon, size = "md", contentMode = "both" })
 		className: (0, _hexclave_ui.cn)("inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none", getMapValueOrThrow(badgeStyles, color, "badgeStyles"), sizeClasses),
 		title: !showLabel ? label : void 0,
 		"aria-label": label,
-		children: [showIcon && Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3 w-3" }), showLabel ? label : null]
+		children: [showIcon && Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: (0, _hexclave_ui.cn)("h-3 w-3", iconClassName) }), showLabel ? label : null]
 	});
 }
 //#endregion

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["_exhaustive"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\n/**\n * Small pill used for status tags, roles, categories, and other short\n * labels. Not a variant-based component — pick a semantic `color` and\n * optionally pass an `icon` (as a component type, not a rendered node).\n *\n * ```tsx\n * <DesignBadge label=\"Verified\" color=\"green\" icon={CheckIcon} />\n * <DesignBadge label=\"Beta\" color=\"purple\" />\n * <DesignBadge label=\"Error\" color=\"red\" size=\"sm\" />\n * ```\n *\n * Notes:\n * - Props are `label` + `color`, NOT `variant` + children.\n * - `color` is one of: `\"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\"`.\n * - `icon` is optional but, if set via `contentMode: \"icon\"`, is required.\n */\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAOA,MAAM,8BAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,mHAAmH;CAC5H,CAAC,QAAQ,mHAAmH;CAC5H,CAAC,UAAU,+HAA+H;CAC1I,CAAC,SAAS,qIAAqI;CAC/I,CAAC,UAAU,yHAAyH;CACpI,CAAC,OAAO,6GAA6G;AACvH,CAAC;AAED,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,GAAG;CACzB,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,GAAG,EAAE,EAAE;CAErE,OAAO;AACT;AAcA,SAAS,qBACP,aACA,SAC2C;CAC3C,QAAQ,aAAR;EACE,KAAK,QACH,OAAO;GAAE,WAAW;GAAM,UAAU;EAAQ;EAE9C,KAAK,QACH,OAAO;GAAE,WAAW;GAAM,UAAU;EAAM;EAE5C,KAAK;GACH,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,uEAAuE;GAEzF,OAAO;IAAE,WAAW;IAAO,UAAU;GAAK;EAE5C,SAEE,MAAM,IAAI,MAAM,wBAAwB,OAAOA,WAAW,GAAG;CAEjE;AACF;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,IAAI;CACxE,IAAI,CAAC,aAAa,CAAC,UACjB,MAAM,IAAI,MAAM,+CAA+C;CAEjE,MAAM,cAAc,SAAS,OACzB,4BACA;CAGJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,YAAA,GAAA,aAAA,GAAA,CACE,uGALe,mBAAmB,aAAa,OAAO,aAM3C,GACX,WACF;EACA,OAAO,CAAC,YAAY,QAAQ,KAAA;EAC5B,cAAY;YAPd,CASG,YAAY,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAM,WAAU,UAAW,CAAA,GAC/C,YAAY,QAAQ,IAClB;;AAET"}
+{"version":3,"file":"badge.js","names":["_exhaustive"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  /** Extra classes merged onto the rendered icon, e.g. `animate-spin` for an in-progress status. */\n  iconClassName?: string,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\n/**\n * Small pill used for status tags, roles, categories, and other short\n * labels. Not a variant-based component — pick a semantic `color` and\n * optionally pass an `icon` (as a component type, not a rendered node).\n *\n * ```tsx\n * <DesignBadge label=\"Verified\" color=\"green\" icon={CheckIcon} />\n * <DesignBadge label=\"Beta\" color=\"purple\" />\n * <DesignBadge label=\"Error\" color=\"red\" size=\"sm\" />\n * ```\n *\n * Notes:\n * - Props are `label` + `color`, NOT `variant` + children.\n * - `color` is one of: `\"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\"`.\n * - `icon` is optional but, if set via `contentMode: \"icon\"`, is required.\n */\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  iconClassName,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className={cn(\"h-3 w-3\", iconClassName)} />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAOA,MAAM,8BAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,mHAAmH;CAC5H,CAAC,QAAQ,mHAAmH;CAC5H,CAAC,UAAU,+HAA+H;CAC1I,CAAC,SAAS,qIAAqI;CAC/I,CAAC,UAAU,yHAAyH;CACpI,CAAC,OAAO,6GAA6G;AACvH,CAAC;AAED,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,GAAG;CACzB,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,GAAG,EAAE,EAAE;CAErE,OAAO;AACT;AAgBA,SAAS,qBACP,aACA,SAC2C;CAC3C,QAAQ,aAAR;EACE,KAAK,QACH,OAAO;GAAE,WAAW;GAAM,UAAU;EAAQ;EAE9C,KAAK,QACH,OAAO;GAAE,WAAW;GAAM,UAAU;EAAM;EAE5C,KAAK;GACH,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,uEAAuE;GAEzF,OAAO;IAAE,WAAW;IAAO,UAAU;GAAK;EAE5C,SAEE,MAAM,IAAI,MAAM,wBAAwB,OAAOA,WAAW,GAAG;CAEjE;AACF;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,eACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,IAAI;CACxE,IAAI,CAAC,aAAa,CAAC,UACjB,MAAM,IAAI,MAAM,+CAA+C;CAEjE,MAAM,cAAc,SAAS,OACzB,4BACA;CAGJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,YAAA,GAAA,aAAA,GAAA,CACE,uGALe,mBAAmB,aAAa,OAAO,aAM3C,GACX,WACF;EACA,OAAO,CAAC,YAAY,QAAQ,KAAA;EAC5B,cAAY;YAPd,CASG,YAAY,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAM,YAAA,GAAA,aAAA,GAAA,CAAc,WAAW,aAAa,EAAI,CAAA,GACpE,YAAY,QAAQ,IAClB;;AAET"}

package/dist/dashboard-ui-components.global.js

@@ -34562,6 +34562,7 @@ Defaulting to \`null\`.`;
     label,
     color,
     icon,
+    iconClassName,
     size: size4 = "md",
     contentMode = "both"
   }) {
@@ -34583,7 +34584,7 @@ Defaulting to \`null\`.`;
         title: !showLabel ? label : void 0,
         "aria-label": label,
         children: [
-          showIcon && Icon3 && /* @__PURE__ */ jsx(Icon3, { className: "h-3 w-3" }),
+          showIcon && Icon3 && /* @__PURE__ */ jsx(Icon3, { className: cn("h-3 w-3", iconClassName) }),
           showLabel ? label : null
         ]
       }