@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

package/dist/billing/shared/ui/MetricCard.js

@@ -1,44 +1,51 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 import { cn as r } from "@burdenoff/fe-libs/shared/utils";
+import { GlassCard as i } from "@burdenoff/fe-libs/ui";
 //#region src/billing/shared/ui/MetricCard.tsx
-function i({ label: i, value: a, icon: o, trend: s, onClick: c, isActive: l = !1, className: u, ...d }) {
-	let f = r("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left", c && "w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", l && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", u), p = /* @__PURE__ */ n(e, { children: [
+function a({ label: a, value: o, icon: s, trend: c, onClick: l, isActive: u = !1, className: d, ...f }) {
+	let p = r("p-5 text-left", l && "w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", u && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", d), m = /* @__PURE__ */ n(e, { children: [
 		/* @__PURE__ */ n("div", {
 			className: "flex items-start justify-between gap-3",
 			children: [/* @__PURE__ */ t("p", {
 				className: "text-sm text-text-secondary",
-				children: i
-			}), o && /* @__PURE__ */ t("span", {
+				children: a
+			}), s && /* @__PURE__ */ t("span", {
 				className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-				children: o
+				children: s
 			})]
 		}),
 		/* @__PURE__ */ t("p", {
 			className: "mt-2 text-2xl font-semibold tabular-nums text-text-primary",
-			children: a
+			children: o
 		}),
-		s && /* @__PURE__ */ n("p", {
-			className: r("mt-1 text-xs font-medium tabular-nums", s.isPositive ? "text-status-success-text" : "text-status-error-text"),
+		c && /* @__PURE__ */ n("p", {
+			className: r("mt-1 text-xs font-medium tabular-nums", c.isPositive ? "text-status-success-text" : "text-status-error-text"),
 			children: [
-				s.isPositive ? "+" : "",
-				s.value,
+				c.isPositive ? "+" : "",
+				c.value,
 				"%"
 			]
 		})
 	] });
-	return c ? /* @__PURE__ */ t("button", {
-		type: "button",
-		onClick: c,
-		className: f,
-		...d,
-		children: p
-	}) : /* @__PURE__ */ t("div", {
-		className: f,
-		...d,
-		children: p
+	return l ? /* @__PURE__ */ t(i, {
+		treatment: "metric",
+		role: "button",
+		tabIndex: 0,
+		onClick: l,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l());
+		},
+		className: r(p, "cursor-pointer"),
+		...f,
+		children: m
+	}) : /* @__PURE__ */ t(i, {
+		treatment: "metric",
+		className: p,
+		...f,
+		children: m
 	});
 }
 //#endregion
-export { i as MetricCard };
+export { a as MetricCard };
 
 //# sourceMappingURL=MetricCard.js.map

package/dist/billing/shared/ui/MetricCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../src/billing/shared/ui/MetricCard.tsx"],"sourcesContent":["/**\n * Boff UI — MetricCard primitive\n *\n * Stat/metric card following the Boff UI recipe: small muted label, large\n * tabular-nums value, optional trend, and an optional icon in an accent-soft\n * tile. One question per card. Can render as a button when `onClick` is\n * provided (used by the usage dashboard's filterable stats).\n *\n * Visual-only primitive.\n */\n\nimport type { ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface MetricCardTrend {\n  value: number;\n  isPositive: boolean;\n}\n\ninterface MetricCardProps {\n  label: ReactNode;\n  value: ReactNode;\n  icon?: ReactNode;\n  trend?: MetricCardTrend;\n  /** When provided, renders an interactive button (with selected ring when active). */\n  onClick?: () => void;\n  isActive?: boolean;\n  className?: string;\n  /** Passthrough for data-tour and other data-* hooks. */\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport function MetricCard({\n  label,\n  value,\n  icon,\n  trend,\n  onClick,\n  isActive = false,\n  className,\n  ...rest\n}: MetricCardProps) {\n  const base = cn(\n    'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left',\n    onClick &&\n      'w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n    isActive && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n    className\n  );\n\n  const inner = (\n    <>\n      <div className=\"flex items-start justify-between gap-3\">\n        <p className=\"text-sm text-text-secondary\">{label}</p>\n        {icon && (\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n            {icon}\n          </span>\n        )}\n      </div>\n      <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n      {trend && (\n        <p\n          className={cn(\n            'mt-1 text-xs font-medium tabular-nums',\n            trend.isPositive ? 'text-status-success-text' : 'text-status-error-text'\n          )}\n        >\n          {trend.isPositive ? '+' : ''}\n          {trend.value}%\n        </p>\n      )}\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} className={base} {...rest}>\n        {inner}\n      </button>\n    );\n  }\n\n  return (\n    <div className={base} {...rest}>\n      {inner}\n    </div>\n  );\n}\n"],"mappings":";;;AAgCA,SAAgB,EAAW,EACzB,UACA,UACA,SACA,UACA,YACA,cAAW,IACX,cACA,GAAG,KACe;CAClB,IAAM,IAAO,EACX,2FACA,KACE,uNACF,KAAY,8DACZ,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA+B;IAAU,CAAA,EACrD,KACC,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEL;;EACN,kBAAC,KAAD;GAAG,WAAU;aAA8D;GAAU,CAAA;EACpF,KACC,kBAAC,KAAD;GACE,WAAW,EACT,yCACA,EAAM,aAAa,6BAA6B,yBACjD;aAJH;IAMG,EAAM,aAAa,MAAM;IACzB,EAAM;IAAM;IACX;;EAEL,EAAA,CAAA;AAWL,QARI,IAEA,kBAAC,UAAD;EAAQ,MAAK;EAAkB;EAAS,WAAW;EAAM,GAAI;YAC1D;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;EAAM,GAAI;YACvB;EACG,CAAA"}
+{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../src/billing/shared/ui/MetricCard.tsx"],"sourcesContent":["/**\n * Boff UI — MetricCard primitive\n *\n * Stat/metric card following the Boff UI recipe: small muted label, large\n * tabular-nums value, optional trend, and an optional icon in an accent-soft\n * tile. One question per card. Can render as a button when `onClick` is\n * provided (used by the usage dashboard's filterable stats).\n *\n * Visual-only primitive.\n */\n\nimport type { ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\ninterface MetricCardTrend {\n  value: number;\n  isPositive: boolean;\n}\n\ninterface MetricCardProps {\n  label: ReactNode;\n  value: ReactNode;\n  icon?: ReactNode;\n  trend?: MetricCardTrend;\n  /** When provided, renders an interactive button (with selected ring when active). */\n  onClick?: () => void;\n  isActive?: boolean;\n  className?: string;\n  /** Passthrough for data-tour and other data-* hooks. */\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport function MetricCard({\n  label,\n  value,\n  icon,\n  trend,\n  onClick,\n  isActive = false,\n  className,\n  ...rest\n}: MetricCardProps) {\n  const base = cn(\n    'p-5 text-left',\n    onClick &&\n      'w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n    isActive && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n    className\n  );\n\n  const inner = (\n    <>\n      <div className=\"flex items-start justify-between gap-3\">\n        <p className=\"text-sm text-text-secondary\">{label}</p>\n        {icon && (\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n            {icon}\n          </span>\n        )}\n      </div>\n      <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n      {trend && (\n        <p\n          className={cn(\n            'mt-1 text-xs font-medium tabular-nums',\n            trend.isPositive ? 'text-status-success-text' : 'text-status-error-text'\n          )}\n        >\n          {trend.isPositive ? '+' : ''}\n          {trend.value}%\n        </p>\n      )}\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <GlassCard\n        treatment=\"metric\"\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick();\n          }\n        }}\n        className={cn(base, 'cursor-pointer')}\n        {...rest}\n      >\n        {inner}\n      </GlassCard>\n    );\n  }\n\n  return (\n    <GlassCard treatment=\"metric\" className={base} {...rest}>\n      {inner}\n    </GlassCard>\n  );\n}\n"],"mappings":";;;;AAiCA,SAAgB,EAAW,EACzB,UACA,UACA,SACA,UACA,YACA,cAAW,IACX,cACA,GAAG,KACe;CAClB,IAAM,IAAO,EACX,iBACA,KACE,uGACF,KAAY,8DACZ,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA+B;IAAU,CAAA,EACrD,KACC,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEL;;EACN,kBAAC,KAAD;GAAG,WAAU;aAA8D;GAAU,CAAA;EACpF,KACC,kBAAC,KAAD;GACE,WAAW,EACT,yCACA,EAAM,aAAa,6BAA6B,yBACjD;aAJH;IAMG,EAAM,aAAa,MAAM;IACzB,EAAM;IAAM;IACX;;EAEL,EAAA,CAAA;AAwBL,QArBI,IAEA,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACD;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,GAAS;;EAGb,WAAW,EAAG,GAAM,iBAAiB;EACrC,GAAI;YAEH;EACS,CAAA,GAKd,kBAAC,GAAD;EAAW,WAAU;EAAS,WAAW;EAAM,GAAI;YAChD;EACS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-billing",
-  "version": "2026.624.3",
+  "version": "2026.625.2",
   "description": "Billing microfrontend for Burdenoff products",
   "type": "module",
   "files": [
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.1.4",
-    "@burdenoff/fe-libs": "2026.528.2",
+    "@burdenoff/fe-libs": "2026.625.2",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",