@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/shared/components/StatCard.js

@@ -1,37 +1,15 @@
-import { getTrendTokens as e } from "../utils/tokens.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { MetricCard as e } from "../ui/MetricCard.js";
+import "../ui/index.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/billing/shared/components/StatCard.tsx
-var r = ({ label: r, value: i, icon: a, trend: o, className: s = "" }) => {
-	let c = o ? e(o.isPositive) : null;
-	return /* @__PURE__ */ n("div", {
-		className: `border border-border rounded-lg bg-card p-4 ${s}`,
-		children: [
-			/* @__PURE__ */ n("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ t("p", {
-					className: "text-sm font-medium text-muted-foreground",
-					children: r
-				}), a && /* @__PURE__ */ t("div", {
-					className: "text-muted-foreground",
-					children: a
-				})]
-			}),
-			/* @__PURE__ */ t("p", {
-				className: "text-2xl font-bold text-foreground mt-2",
-				children: i
-			}),
-			o && c && /* @__PURE__ */ n("p", {
-				className: `text-xs mt-1 ${c.text}`,
-				children: [
-					o.isPositive ? "+" : "",
-					o.value,
-					"%"
-				]
-			})
-		]
-	});
-};
+var n = ({ label: n, value: r, icon: i, trend: a, className: o = "" }) => /* @__PURE__ */ t(e, {
+	label: n,
+	value: r,
+	icon: i,
+	trend: a,
+	className: o
+});
 //#endregion
-export { r as StatCard };
+export { n as StatCard };
 
 //# sourceMappingURL=StatCard.js.map

package/dist/billing/shared/components/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","names":[],"sources":["../../../../src/billing/shared/components/StatCard.tsx"],"sourcesContent":["/**\n * Shared Stat Card Component\n * Displays a metric with label and value\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { getTrendTokens } from '../utils/tokens';\n\ninterface StatCardProps {\n  label: string;\n  value: string | number;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    isPositive: boolean;\n  };\n  className?: string;\n}\n\nexport const StatCard: FC<StatCardProps> = ({ label, value, icon, trend, className = '' }) => {\n  const trendTokens = trend ? getTrendTokens(trend.isPositive) : null;\n\n  return (\n    <div className={`border border-border rounded-lg bg-card p-4 ${className}`}>\n      <div className=\"flex items-center justify-between\">\n        <p className=\"text-sm font-medium text-muted-foreground\">{label}</p>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n      </div>\n      <p className=\"text-2xl font-bold text-foreground mt-2\">{value}</p>\n      {trend && trendTokens && (\n        <p className={`text-xs mt-1 ${trendTokens.text}`}>\n          {trend.isPositive ? '+' : ''}\n          {trend.value}%\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;AAmBA,IAAa,KAA+B,EAAE,UAAO,UAAO,SAAM,UAAO,eAAY,SAAS;CAC5F,IAAM,IAAc,IAAQ,EAAe,EAAM,WAAW,GAAG;AAE/D,QACE,kBAAC,OAAD;EAAK,WAAW,+CAA+C;YAA/D;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAA6C;KAAU,CAAA,EACnE,KAAQ,kBAAC,OAAD;KAAK,WAAU;eAAyB;KAAW,CAAA,CACxD;;GACN,kBAAC,KAAD;IAAG,WAAU;cAA2C;IAAU,CAAA;GACjE,KAAS,KACR,kBAAC,KAAD;IAAG,WAAW,gBAAgB,EAAY;cAA1C;KACG,EAAM,aAAa,MAAM;KACzB,EAAM;KAAM;KACX;;GAEF"}
+{"version":3,"file":"StatCard.js","names":[],"sources":["../../../../src/billing/shared/components/StatCard.tsx"],"sourcesContent":["/**\n * Shared Stat Card Component\n * Displays a metric with label and value\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { MetricCard } from '../ui';\n\ninterface StatCardProps {\n  label: string;\n  value: string | number;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    isPositive: boolean;\n  };\n  className?: string;\n}\n\nexport const StatCard: FC<StatCardProps> = ({ label, value, icon, trend, className = '' }) => {\n  return <MetricCard label={label} value={value} icon={icon} trend={trend} className={className} />;\n};\n"],"mappings":";;;;AAmBA,IAAa,KAA+B,EAAE,UAAO,UAAO,SAAM,UAAO,eAAY,SAC5E,kBAAC,GAAD;CAAmB;CAAc;CAAa;CAAa;CAAkB;CAAa,CAAA"}

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

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as t } from "@burdenoff/fe-libs/shared/utils";
+//#region src/billing/shared/ui/Card.tsx
+function n({ children: n, className: r, interactive: i = !1, selected: a = !1, as: o, onClick: s, ...c }) {
+	return /* @__PURE__ */ e(o ?? "div", {
+		onClick: s,
+		className: t("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1", i && "transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5", a && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", s && "cursor-pointer text-left", r),
+		...c,
+		children: n
+	});
+}
+//#endregion
+export { n as Card };
+
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/billing/shared/ui/Card.tsx"],"sourcesContent":["/**\n * Boff UI — Card primitive\n *\n * The workhorse surface for the billing MFE. Renders the canonical Boff UI\n * card recipe: `rounded-card border border-border-subtle bg-bg-surface\n * shadow-elevation-1`. Set `interactive` for the hover-lift treatment and\n * `selected` for the accent-soft selected state.\n *\n * Visual-only primitive — no business logic.\n */\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface CardProps {\n  children: ReactNode;\n  className?: string;\n  /** Apply hover lift + stronger border/elevation (use for clickable cards). */\n  interactive?: boolean;\n  /** Apply the accent-soft selected ring/wash. */\n  selected?: boolean;\n  /** Render as a different element (e.g. 'section', 'article'). Defaults to 'div'. */\n  as?: ElementType;\n  onClick?: () => void;\n  /** Passthrough for data-tour and other data-* hooks. */\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport function Card({\n  children,\n  className,\n  interactive = false,\n  selected = false,\n  as,\n  onClick,\n  ...rest\n}: CardProps) {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      onClick={onClick}\n      className={cn(\n        'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1',\n        interactive &&\n          'transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5',\n        selected && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n        onClick && 'cursor-pointer text-left',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,EAAK,EACnB,aACA,cACA,iBAAc,IACd,cAAW,IACX,OACA,YACA,GAAG,KACS;AAEZ,QACE,kBAFgB,KAAM,OAEtB;EACW;EACT,WAAW,EACT,6EACA,KACE,0IACF,KAAY,8DACZ,KAAW,4BACX,EACD;EACD,GAAI;EAEH;EACS,CAAA"}

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

@@ -0,0 +1,44 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { cn as r } from "@burdenoff/fe-libs/shared/utils";
+//#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 hover:-translate-y-0.5 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: [
+		/* @__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", {
+				className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+				children: o
+			})]
+		}),
+		/* @__PURE__ */ t("p", {
+			className: "mt-2 text-2xl font-semibold tabular-nums text-text-primary",
+			children: a
+		}),
+		s && /* @__PURE__ */ n("p", {
+			className: r("mt-1 text-xs font-medium", s.isPositive ? "text-status-success-text" : "text-status-error-text"),
+			children: [
+				s.isPositive ? "+" : "",
+				s.value,
+				"%"
+			]
+		})
+	] });
+	return c ? /* @__PURE__ */ t("button", {
+		type: "button",
+		onClick: c,
+		className: f,
+		...d,
+		children: p
+	}) : /* @__PURE__ */ t("div", {
+		className: f,
+		...d,
+		children: p
+	});
+}
+//#endregion
+export { i as MetricCard };
+
+//# sourceMappingURL=MetricCard.js.map

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

@@ -0,0 +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 hover:-translate-y-0.5 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',\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,8OACF,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,4BACA,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"}

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

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as t } from "@burdenoff/fe-libs/shared/utils";
+//#region src/billing/shared/ui/ProgressBar.tsx
+var n = {
+	success: "bg-status-success-bg",
+	warning: "bg-status-warning-bg",
+	error: "bg-status-error-bg",
+	info: "bg-status-info-bg",
+	neutral: "bg-text-muted",
+	primary: "bg-action-primary-bg"
+};
+function r({ value: r, status: i = "primary", size: a = "md", className: o, "aria-label": s }) {
+	let c = Math.min(100, Math.max(0, r));
+	return /* @__PURE__ */ e("div", {
+		className: t("w-full overflow-hidden rounded-full bg-bg-sunken", a === "sm" ? "h-1.5" : "h-2.5", o),
+		role: "progressbar",
+		"aria-valuenow": Math.round(c),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": s,
+		children: /* @__PURE__ */ e("div", {
+			className: t("h-full rounded-full transition-all duration-300 ease-[var(--motion-easing-out)]", n[i]),
+			style: { width: `${c}%` }
+		})
+	});
+}
+//#endregion
+export { r as ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../../src/billing/shared/ui/ProgressBar.tsx"],"sourcesContent":["/**\n * Boff UI — ProgressBar primitive\n *\n * Quota / usage progress bar with status-driven fill colors. Track uses the\n * sunken surface; the fill maps the billing `SemanticStatus` palette to the\n * canonical status tokens. Clamps the value to 0-100.\n *\n * Visual-only primitive.\n */\n\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\nimport type { SemanticStatus } from '../utils/tokens';\n\nconst FILL_TONE: Record<SemanticStatus, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  error: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-text-muted',\n  primary: 'bg-action-primary-bg',\n};\n\ninterface ProgressBarProps {\n  /** Percentage 0-100. */\n  value: number;\n  /** Status tone for the fill color. Defaults to a neutral/primary fill. */\n  status?: SemanticStatus;\n  /** Bar height: sm = h-1.5, md = h-2.5. */\n  size?: 'sm' | 'md';\n  className?: string;\n  /** Accessible label for the progress meter. */\n  'aria-label'?: string;\n}\n\nexport function ProgressBar({\n  value,\n  status = 'primary',\n  size = 'md',\n  className,\n  'aria-label': ariaLabel,\n}: ProgressBarProps) {\n  const clamped = Math.min(100, Math.max(0, value));\n  return (\n    <div\n      className={cn(\n        'w-full overflow-hidden rounded-full bg-bg-sunken',\n        size === 'sm' ? 'h-1.5' : 'h-2.5',\n        className\n      )}\n      role=\"progressbar\"\n      aria-valuenow={Math.round(clamped)}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={ariaLabel}\n    >\n      <div\n        className={cn(\n          'h-full rounded-full transition-all duration-300 ease-[var(--motion-easing-out)]',\n          FILL_TONE[status]\n        )}\n        style={{ width: `${clamped}%` }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAaA,IAAM,IAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV;AAcD,SAAgB,EAAY,EAC1B,UACA,YAAS,WACT,UAAO,MACP,cACA,cAAc,KACK;CACnB,IAAM,IAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,EAAM,CAAC;AACjD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,oDACA,MAAS,OAAO,UAAU,SAC1B,EACD;EACD,MAAK;EACL,iBAAe,KAAK,MAAM,EAAQ;EAClC,iBAAe;EACf,iBAAe;EACf,cAAY;YAEZ,kBAAC,OAAD;GACE,WAAW,EACT,mFACA,EAAU,GACX;GACD,OAAO,EAAE,OAAO,GAAG,EAAQ,IAAI;GAC/B,CAAA;EACE,CAAA"}

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

@@ -0,0 +1,2 @@
+import "react/jsx-runtime";
+import "@burdenoff/fe-libs/shared/utils";

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

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cn as n } from "@burdenoff/fe-libs/shared/utils";
+//#region src/billing/shared/ui/StatusPill.tsx
+var r = {
+	success: "bg-status-success-bg-subtle text-status-success-text",
+	warning: "bg-status-warning-bg-subtle text-status-warning-text",
+	error: "bg-status-error-bg-subtle text-status-error-text",
+	info: "bg-status-info-bg-subtle text-status-info-text",
+	neutral: "bg-bg-sunken text-text-secondary",
+	primary: "bg-[var(--color-accent-soft)] text-text-link"
+}, i = {
+	success: "bg-status-success-bg",
+	warning: "bg-status-warning-bg",
+	error: "bg-status-error-bg",
+	info: "bg-status-info-bg",
+	neutral: "bg-text-muted",
+	primary: "bg-action-primary-bg"
+};
+function a({ status: a, children: o, dot: s = !1, pulse: c = !1, className: l }) {
+	return /* @__PURE__ */ t("span", {
+		className: n("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", r[a], l),
+		children: [s && /* @__PURE__ */ e("span", { className: n("size-1.5 rounded-full", i[a], c && "animate-pulse") }), o]
+	});
+}
+//#endregion
+export { a as StatusPill };
+
+//# sourceMappingURL=StatusPill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","names":[],"sources":["../../../../src/billing/shared/ui/StatusPill.tsx"],"sourcesContent":["/**\n * Boff UI — StatusPill primitive\n *\n * Subtle status badge following the Boff UI recipe\n * (`bg-status-*-bg-subtle text-status-*-text`, neutral =\n * `bg-bg-sunken text-text-secondary`). Always keeps the text label and an\n * optional dot — never color-only. Maps the billing module's existing\n * `SemanticStatus` palette to the canonical tokens.\n *\n * Visual-only primitive.\n */\n\nimport type { ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\nimport type { SemanticStatus } from '../utils/tokens';\n\nconst PILL_TONE: Record<SemanticStatus, string> = {\n  success: 'bg-status-success-bg-subtle text-status-success-text',\n  warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n  error: 'bg-status-error-bg-subtle text-status-error-text',\n  info: 'bg-status-info-bg-subtle text-status-info-text',\n  neutral: 'bg-bg-sunken text-text-secondary',\n  primary: 'bg-[var(--color-accent-soft)] text-text-link',\n};\n\nconst DOT_TONE: Record<SemanticStatus, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  error: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-text-muted',\n  primary: 'bg-action-primary-bg',\n};\n\ninterface StatusPillProps {\n  status: SemanticStatus;\n  children: ReactNode;\n  /** Show a leading status dot. */\n  dot?: boolean;\n  /** Pulse the dot (e.g. live / offline indicators). */\n  pulse?: boolean;\n  className?: string;\n}\n\nexport function StatusPill({\n  status,\n  children,\n  dot = false,\n  pulse = false,\n  className,\n}: StatusPillProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',\n        PILL_TONE[status],\n        className\n      )}\n    >\n      {dot && (\n        <span className={cn('size-1.5 rounded-full', DOT_TONE[status], pulse && 'animate-pulse')} />\n      )}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;AAgBA,IAAM,IAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV,EAEK,IAA2C;CAC/C,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACV;AAYD,SAAgB,EAAW,EACzB,WACA,aACA,SAAM,IACN,WAAQ,IACR,gBACkB;AAClB,QACE,kBAAC,QAAD;EACE,WAAW,EACT,mFACA,EAAU,IACV,EACD;YALH,CAOG,KACC,kBAAC,QAAD,EAAM,WAAW,EAAG,yBAAyB,EAAS,IAAS,KAAS,gBAAgB,EAAI,CAAA,EAE7F,EACI"}

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

@@ -0,0 +1,5 @@
+import "./Card.js";
+import "./SectionHeader.js";
+import "./StatusPill.js";
+import "./MetricCard.js";
+import "./ProgressBar.js";

package/dist/billing/shared/utils/tokens.js

@@ -36,11 +36,11 @@ var e = {
 		icon: "text-status-neutral-text"
 	},
 	primary: {
-		bg: "bg-primary/10",
-		text: "text-primary",
-		border: "border-primary/20",
-		dot: "bg-primary",
-		icon: "text-primary"
+		bg: "bg-[var(--color-accent-soft)]",
+		text: "text-text-link",
+		border: "border-border-strong",
+		dot: "bg-action-primary-bg",
+		icon: "text-text-link"
 	}
 };
 function t(t) {
@@ -51,23 +51,6 @@ function n(e) {
 	return `${n.bg} ${n.text} ${n.border} border`;
 }
 var r = {
-	positive: {
-		text: "text-status-success-text",
-		icon: "text-status-success-bg"
-	},
-	negative: {
-		text: "text-status-error-text",
-		icon: "text-status-error-bg"
-	},
-	neutral: {
-		text: "text-status-neutral-text",
-		icon: "text-status-neutral-text"
-	}
-};
-function i(e) {
-	return e === null ? r.neutral : e ? r.positive : r.negative;
-}
-var a = {
 	healthy: {
 		bar: "bg-status-success-bg",
 		track: "bg-status-success-bg-subtle"
@@ -81,26 +64,26 @@ var a = {
 		track: "bg-status-error-bg-subtle"
 	}
 };
-function o(e) {
-	return e >= 90 ? a.critical : e >= 75 ? a.warning : a.healthy;
+function i(e) {
+	return e >= 90 ? r.critical : e >= 75 ? r.warning : r.healthy;
 }
-var s = {
+var a = {
 	plan: {
 		bg: "bg-status-info-bg-subtle",
 		text: "text-status-info-text",
 		border: "border-status-info-border"
 	},
 	addon: {
-		bg: "bg-primary/10",
-		text: "text-primary",
-		border: "border-primary/20"
+		bg: "bg-[var(--color-accent-soft)]",
+		text: "text-text-link",
+		border: "border-border-strong"
 	},
 	credits: {
 		bg: "bg-status-warning-bg-subtle",
 		text: "text-status-warning-text",
 		border: "border-status-warning-border"
 	}
-}, c = {
+}, o = {
 	success: {
 		container: "bg-status-success-bg-subtle border-status-success-border",
 		text: "text-status-success-text",
@@ -123,6 +106,6 @@ var s = {
 	}
 };
 //#endregion
-export { c as alertTokens, s as categoryTokens, o as getProgressTokens, n as getStatusBadgeTokens, t as getStatusTokens, i as getTrendTokens, a as progressTokens, e as statusTokens, r as trendTokens };
+export { o as alertTokens, a as categoryTokens, i as getProgressTokens, n as getStatusBadgeTokens, t as getStatusTokens, r as progressTokens, e as statusTokens };
 
 //# sourceMappingURL=tokens.js.map

package/dist/billing/shared/utils/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../../../../src/billing/shared/utils/tokens.ts"],"sourcesContent":["/**\n * Semantic Design Tokens for Billing Module\n *\n * Maps semantic status colors to fe-libs design tokens.\n * This ensures consistent theming across all micro-frontends.\n *\n * Token Reference (from fe-libs):\n * - Status: --color-status-{success|warning|error|info}-{bg|bgSubtle|text|border}\n * - Action: --color-action-{primary|secondary|danger}-{bg|bgHover|text}\n * - Text: --color-text-{primary|secondary|muted}\n * - Background: --color-bg-{canvas|surface|elevated|sunken}\n */\n\n// ============================================================================\n// Status Color Token Mappings\n// ============================================================================\n\nexport type SemanticStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary';\n\nexport interface StatusTokenClasses {\n  /** Background for subtle/badge usage */\n  bg: string;\n  /** Text color */\n  text: string;\n  /** Border color */\n  border: string;\n  /** Dot/indicator color */\n  dot: string;\n  /** Icon color */\n  icon: string;\n}\n\n/**\n * Semantic status color classes using design tokens\n * These map to CSS custom properties defined in fe-libs\n */\nexport const statusTokens: Record<SemanticStatus, StatusTokenClasses> = {\n  success: {\n    bg: 'bg-status-success-bg-subtle',\n    text: 'text-status-success-text',\n    border: 'border-status-success-border',\n    dot: 'bg-status-success-bg',\n    icon: 'text-status-success-bg',\n  },\n  warning: {\n    bg: 'bg-status-warning-bg-subtle',\n    text: 'text-status-warning-text',\n    border: 'border-status-warning-border',\n    dot: 'bg-status-warning-bg',\n    icon: 'text-status-warning-bg',\n  },\n  error: {\n    bg: 'bg-status-error-bg-subtle',\n    text: 'text-status-error-text',\n    border: 'border-status-error-border',\n    dot: 'bg-status-error-bg',\n    icon: 'text-status-error-bg',\n  },\n  info: {\n    bg: 'bg-status-info-bg-subtle',\n    text: 'text-status-info-text',\n    border: 'border-status-info-border',\n    dot: 'bg-status-info-bg',\n    icon: 'text-status-info-bg',\n  },\n  neutral: {\n    bg: 'bg-status-neutral-bg-subtle',\n    text: 'text-status-neutral-text',\n    border: 'border-status-neutral-border',\n    dot: 'bg-status-neutral-bg',\n    icon: 'text-status-neutral-text',\n  },\n  primary: {\n    bg: 'bg-primary/10',\n    text: 'text-primary',\n    border: 'border-primary/20',\n    dot: 'bg-primary',\n    icon: 'text-primary',\n  },\n};\n\n/**\n * Get status token classes for a given status\n */\nexport function getStatusTokens(status: SemanticStatus): StatusTokenClasses {\n  return statusTokens[status] || statusTokens.neutral;\n}\n\n/**\n * Get combined badge classes for a status\n */\nexport function getStatusBadgeTokens(status: SemanticStatus): string {\n  const tokens = getStatusTokens(status);\n  return `${tokens.bg} ${tokens.text} ${tokens.border} border`;\n}\n\n// ============================================================================\n// Trend/Change Indicators\n// ============================================================================\n\nexport const trendTokens = {\n  positive: {\n    text: 'text-status-success-text',\n    icon: 'text-status-success-bg',\n  },\n  negative: {\n    text: 'text-status-error-text',\n    icon: 'text-status-error-bg',\n  },\n  neutral: {\n    text: 'text-status-neutral-text',\n    icon: 'text-status-neutral-text',\n  },\n};\n\n/**\n * Get trend indicator classes\n */\nexport function getTrendTokens(isPositive: boolean | null) {\n  if (isPositive === null) return trendTokens.neutral;\n  return isPositive ? trendTokens.positive : trendTokens.negative;\n}\n\n// ============================================================================\n// Progress Bar Colors\n// ============================================================================\n\nexport const progressTokens = {\n  healthy: {\n    bar: 'bg-status-success-bg',\n    track: 'bg-status-success-bg-subtle',\n  },\n  warning: {\n    bar: 'bg-status-warning-bg',\n    track: 'bg-status-warning-bg-subtle',\n  },\n  critical: {\n    bar: 'bg-status-error-bg',\n    track: 'bg-status-error-bg-subtle',\n  },\n};\n\n/**\n * Get progress bar colors based on percentage\n */\nexport function getProgressTokens(percentage: number) {\n  if (percentage >= 90) return progressTokens.critical;\n  if (percentage >= 75) return progressTokens.warning;\n  return progressTokens.healthy;\n}\n\n// ============================================================================\n// Category/Type Badge Colors\n// ============================================================================\n\nexport const categoryTokens = {\n  plan: {\n    bg: 'bg-status-info-bg-subtle',\n    text: 'text-status-info-text',\n    border: 'border-status-info-border',\n  },\n  addon: {\n    bg: 'bg-primary/10',\n    text: 'text-primary',\n    border: 'border-primary/20',\n  },\n  credits: {\n    bg: 'bg-status-warning-bg-subtle',\n    text: 'text-status-warning-text',\n    border: 'border-status-warning-border',\n  },\n};\n\n/**\n * Get category badge classes\n */\nexport function getCategoryTokens(category: 'plan' | 'addon' | 'credits') {\n  return categoryTokens[category] || categoryTokens.plan;\n}\n\n// ============================================================================\n// Alert/Banner Colors\n// ============================================================================\n\nexport const alertTokens = {\n  success: {\n    container: 'bg-status-success-bg-subtle border-status-success-border',\n    text: 'text-status-success-text',\n    icon: 'text-status-success-bg',\n  },\n  warning: {\n    container: 'bg-status-warning-bg-subtle border-status-warning-border',\n    text: 'text-status-warning-text',\n    icon: 'text-status-warning-bg',\n  },\n  error: {\n    container: 'bg-status-error-bg-subtle border-status-error-border',\n    text: 'text-status-error-text',\n    icon: 'text-status-error-bg',\n  },\n  info: {\n    container: 'bg-status-info-bg-subtle border-status-info-border',\n    text: 'text-status-info-text',\n    icon: 'text-status-info-bg',\n  },\n};\n\n/**\n * Get alert/banner classes\n */\nexport function getAlertTokens(type: 'success' | 'warning' | 'error' | 'info') {\n  return alertTokens[type];\n}\n"],"mappings":";AAoCA,IAAa,IAA2D;CACtE,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,MAAM;EACJ,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACF;AAKD,SAAgB,EAAgB,GAA4C;AAC1E,QAAO,EAAa,MAAW,EAAa;;AAM9C,SAAgB,EAAqB,GAAgC;CACnE,IAAM,IAAS,EAAgB,EAAO;AACtC,QAAO,GAAG,EAAO,GAAG,GAAG,EAAO,KAAK,GAAG,EAAO,OAAO;;AAOtD,IAAa,IAAc;CACzB,UAAU;EACR,MAAM;EACN,MAAM;EACP;CACD,UAAU;EACR,MAAM;EACN,MAAM;EACP;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACP;CACF;AAKD,SAAgB,EAAe,GAA4B;AAEzD,QADI,MAAe,OAAa,EAAY,UACrC,IAAa,EAAY,WAAW,EAAY;;AAOzD,IAAa,IAAiB;CAC5B,SAAS;EACP,KAAK;EACL,OAAO;EACR;CACD,SAAS;EACP,KAAK;EACL,OAAO;EACR;CACD,UAAU;EACR,KAAK;EACL,OAAO;EACR;CACF;AAKD,SAAgB,EAAkB,GAAoB;AAGpD,QAFI,KAAc,KAAW,EAAe,WACxC,KAAc,KAAW,EAAe,UACrC,EAAe;;AAOxB,IAAa,IAAiB;CAC5B,MAAM;EACJ,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACF,EAaY,IAAc;CACzB,SAAS;EACP,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,OAAO;EACL,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,MAAM;EACJ,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACF"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../../../../src/billing/shared/utils/tokens.ts"],"sourcesContent":["/**\n * Semantic Design Tokens for Billing Module\n *\n * Maps semantic status colors to fe-libs design tokens.\n * This ensures consistent theming across all micro-frontends.\n *\n * Token Reference (from fe-libs):\n * - Status: --color-status-{success|warning|error|info}-{bg|bgSubtle|text|border}\n * - Action: --color-action-{primary|secondary|danger}-{bg|bgHover|text}\n * - Text: --color-text-{primary|secondary|muted}\n * - Background: --color-bg-{canvas|surface|elevated|sunken}\n */\n\n// ============================================================================\n// Status Color Token Mappings\n// ============================================================================\n\nexport type SemanticStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary';\n\nexport interface StatusTokenClasses {\n  /** Background for subtle/badge usage */\n  bg: string;\n  /** Text color */\n  text: string;\n  /** Border color */\n  border: string;\n  /** Dot/indicator color */\n  dot: string;\n  /** Icon color */\n  icon: string;\n}\n\n/**\n * Semantic status color classes using design tokens\n * These map to CSS custom properties defined in fe-libs\n */\nexport const statusTokens: Record<SemanticStatus, StatusTokenClasses> = {\n  success: {\n    bg: 'bg-status-success-bg-subtle',\n    text: 'text-status-success-text',\n    border: 'border-status-success-border',\n    dot: 'bg-status-success-bg',\n    icon: 'text-status-success-bg',\n  },\n  warning: {\n    bg: 'bg-status-warning-bg-subtle',\n    text: 'text-status-warning-text',\n    border: 'border-status-warning-border',\n    dot: 'bg-status-warning-bg',\n    icon: 'text-status-warning-bg',\n  },\n  error: {\n    bg: 'bg-status-error-bg-subtle',\n    text: 'text-status-error-text',\n    border: 'border-status-error-border',\n    dot: 'bg-status-error-bg',\n    icon: 'text-status-error-bg',\n  },\n  info: {\n    bg: 'bg-status-info-bg-subtle',\n    text: 'text-status-info-text',\n    border: 'border-status-info-border',\n    dot: 'bg-status-info-bg',\n    icon: 'text-status-info-bg',\n  },\n  neutral: {\n    bg: 'bg-status-neutral-bg-subtle',\n    text: 'text-status-neutral-text',\n    border: 'border-status-neutral-border',\n    dot: 'bg-status-neutral-bg',\n    icon: 'text-status-neutral-text',\n  },\n  primary: {\n    bg: 'bg-[var(--color-accent-soft)]',\n    text: 'text-text-link',\n    border: 'border-border-strong',\n    dot: 'bg-action-primary-bg',\n    icon: 'text-text-link',\n  },\n};\n\n/**\n * Get status token classes for a given status\n */\nexport function getStatusTokens(status: SemanticStatus): StatusTokenClasses {\n  return statusTokens[status] || statusTokens.neutral;\n}\n\n/**\n * Get combined badge classes for a status\n */\nexport function getStatusBadgeTokens(status: SemanticStatus): string {\n  const tokens = getStatusTokens(status);\n  return `${tokens.bg} ${tokens.text} ${tokens.border} border`;\n}\n\n// ============================================================================\n// Trend/Change Indicators\n// ============================================================================\n\nexport const trendTokens = {\n  positive: {\n    text: 'text-status-success-text',\n    icon: 'text-status-success-bg',\n  },\n  negative: {\n    text: 'text-status-error-text',\n    icon: 'text-status-error-bg',\n  },\n  neutral: {\n    text: 'text-status-neutral-text',\n    icon: 'text-status-neutral-text',\n  },\n};\n\n/**\n * Get trend indicator classes\n */\nexport function getTrendTokens(isPositive: boolean | null) {\n  if (isPositive === null) return trendTokens.neutral;\n  return isPositive ? trendTokens.positive : trendTokens.negative;\n}\n\n// ============================================================================\n// Progress Bar Colors\n// ============================================================================\n\nexport const progressTokens = {\n  healthy: {\n    bar: 'bg-status-success-bg',\n    track: 'bg-status-success-bg-subtle',\n  },\n  warning: {\n    bar: 'bg-status-warning-bg',\n    track: 'bg-status-warning-bg-subtle',\n  },\n  critical: {\n    bar: 'bg-status-error-bg',\n    track: 'bg-status-error-bg-subtle',\n  },\n};\n\n/**\n * Get progress bar colors based on percentage\n */\nexport function getProgressTokens(percentage: number) {\n  if (percentage >= 90) return progressTokens.critical;\n  if (percentage >= 75) return progressTokens.warning;\n  return progressTokens.healthy;\n}\n\n// ============================================================================\n// Category/Type Badge Colors\n// ============================================================================\n\nexport const categoryTokens = {\n  plan: {\n    bg: 'bg-status-info-bg-subtle',\n    text: 'text-status-info-text',\n    border: 'border-status-info-border',\n  },\n  addon: {\n    bg: 'bg-[var(--color-accent-soft)]',\n    text: 'text-text-link',\n    border: 'border-border-strong',\n  },\n  credits: {\n    bg: 'bg-status-warning-bg-subtle',\n    text: 'text-status-warning-text',\n    border: 'border-status-warning-border',\n  },\n};\n\n/**\n * Get category badge classes\n */\nexport function getCategoryTokens(category: 'plan' | 'addon' | 'credits') {\n  return categoryTokens[category] || categoryTokens.plan;\n}\n\n// ============================================================================\n// Alert/Banner Colors\n// ============================================================================\n\nexport const alertTokens = {\n  success: {\n    container: 'bg-status-success-bg-subtle border-status-success-border',\n    text: 'text-status-success-text',\n    icon: 'text-status-success-bg',\n  },\n  warning: {\n    container: 'bg-status-warning-bg-subtle border-status-warning-border',\n    text: 'text-status-warning-text',\n    icon: 'text-status-warning-bg',\n  },\n  error: {\n    container: 'bg-status-error-bg-subtle border-status-error-border',\n    text: 'text-status-error-text',\n    icon: 'text-status-error-bg',\n  },\n  info: {\n    container: 'bg-status-info-bg-subtle border-status-info-border',\n    text: 'text-status-info-text',\n    icon: 'text-status-info-bg',\n  },\n};\n\n/**\n * Get alert/banner classes\n */\nexport function getAlertTokens(type: 'success' | 'warning' | 'error' | 'info') {\n  return alertTokens[type];\n}\n"],"mappings":";AAoCA,IAAa,IAA2D;CACtE,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,MAAM;EACJ,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACL,MAAM;EACP;CACF;AAKD,SAAgB,EAAgB,GAA4C;AAC1E,QAAO,EAAa,MAAW,EAAa;;AAM9C,SAAgB,EAAqB,GAAgC;CACnE,IAAM,IAAS,EAAgB,EAAO;AACtC,QAAO,GAAG,EAAO,GAAG,GAAG,EAAO,KAAK,GAAG,EAAO,OAAO;;AAkCtD,IAAa,IAAiB;CAC5B,SAAS;EACP,KAAK;EACL,OAAO;EACR;CACD,SAAS;EACP,KAAK;EACL,OAAO;EACR;CACD,UAAU;EACR,KAAK;EACL,OAAO;EACR;CACF;AAKD,SAAgB,EAAkB,GAAoB;AAGpD,QAFI,KAAc,KAAW,EAAe,WACxC,KAAc,KAAW,EAAe,UACrC,EAAe;;AAOxB,IAAa,IAAiB;CAC5B,MAAM;EACJ,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACN,QAAQ;EACT;CACF,EAaY,IAAc;CACzB,SAAS;EACP,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,OAAO;EACL,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,MAAM;EACJ,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-billing",
-  "version": "2026.614.1",
+  "version": "2026.623.2",
   "description": "Billing microfrontend for Burdenoff products",
   "type": "module",
   "files": [