@hexclave/dashboard-ui-components 1.0.60 → 1.0.62

package/dist/esm/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/esm/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/esm/components/badge.js

@@ -50,7 +50,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.");
@@ -59,7 +59,7 @@ function DesignBadge({ label, color, icon, size = "md", contentMode = "both" })
 		className: 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__ */ jsx(Icon, { className: "h-3 w-3" }), showLabel ? label : null]
+		children: [showIcon && Icon && /* @__PURE__ */ jsx(Icon, { className: cn("h-3 w-3", iconClassName) }), showLabel ? label : null]
 	});
 }
 //#endregion

package/dist/esm/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,qBAAC,OAAD;EACE,WAAW,GACT,uGALe,mBAAmB,aAAa,OAAO,aAM3C,GACX,WACF;EACA,OAAO,CAAC,YAAY,QAAQ,KAAA;EAC5B,cAAY;YAPd,CASG,YAAY,QAAQ,oBAAC,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,qBAAC,OAAD;EACE,WAAW,GACT,uGALe,mBAAmB,aAAa,OAAO,aAM3C,GACX,WACF;EACA,OAAO,CAAC,YAAY,QAAQ,KAAA;EAC5B,cAAY;YAPd,CASG,YAAY,QAAQ,oBAAC,MAAD,EAAM,WAAW,GAAG,WAAW,aAAa,EAAI,CAAA,GACpE,YAAY,QAAQ,IAClB;;AAET"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexclave/dashboard-ui-components",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "repository": "https://github.com/hexclave/hexclave",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.0",
-    "@hexclave/ui": "1.0.60",
-    "@hexclave/shared": "1.0.60"
+    "@hexclave/ui": "1.0.62",
+    "@hexclave/shared": "1.0.62"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/components/badge.tsx

@@ -29,6 +29,8 @@ export type DesignBadgeProps = {
   label: string,
   color: DesignBadgeColor,
   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,
@@ -78,6 +80,7 @@ export function DesignBadge({
   label,
   color,
   icon,
+  iconClassName,
   size = "md",
   contentMode = "both",
 }: DesignBadgeProps) {
@@ -101,7 +104,7 @@ export function DesignBadge({
       title={!showLabel ? label : undefined}
       aria-label={label}
     >
-      {showIcon && Icon && <Icon className="h-3 w-3" />}
+      {showIcon && Icon && <Icon className={cn("h-3 w-3", iconClassName)} />}
       {showLabel ? label : null}
     </div>
   );