@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,8 @@
+//#region src/billing/shared/utils/navigation.ts
+function e(e, t) {
+	return t ? `${e}${e.includes("?") ? "&" : "?"}billingAccountId=${encodeURIComponent(t)}` : e;
+}
+//#endregion
+export { e as withBillingAccountId };
+
+//# sourceMappingURL=navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","names":[],"sources":["../../../../src/billing/shared/utils/navigation.ts"],"sourcesContent":["export function withBillingAccountId(path: string, billingAccountId?: string | null): string {\n  if (!billingAccountId) return path;\n\n  const separator = path.includes('?') ? '&' : '?';\n  return `${path}${separator}billingAccountId=${encodeURIComponent(billingAccountId)}`;\n}\n"],"mappings":";AAAA,SAAgB,EAAqB,GAAc,GAA0C;AAI3F,QAHK,IAGE,GAAG,IADQ,EAAK,SAAS,IAAI,GAAG,MAAM,IAClB,mBAAmB,mBAAmB,EAAiB,KAHpD"}

package/dist/billing/shared/utils/paymentTheme.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Utilities for adapting third-party payment widgets to the current semantic theme.
+ */
+interface PaymentThemePalette {
+    textColor?: string;
+    placeholderColor?: string;
+    mutedColor?: string;
+    errorColor?: string;
+    primaryColor?: string;
+}
+export declare function getPaymentThemePalette(): PaymentThemePalette;
+export declare function getStripeCardElementStyle(fontFamily?: string): {
+    base: Record<string, unknown>;
+    invalid: Record<string, unknown>;
+};
+export declare function getPaymentProviderThemeColor(): string | undefined;
+export {};
+//# sourceMappingURL=paymentTheme.d.ts.map

package/dist/billing/shared/utils/paymentTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paymentTheme.d.ts","sourceRoot":"","sources":["../../../../src/billing/shared/utils/paymentTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD,wBAAgB,sBAAsB,IAAI,mBAAmB,CAQ5D;AAED,wBAAgB,yBAAyB,CAAC,UAAU,SAAiC;;;EA+BpF;AAED,wBAAgB,4BAA4B,IAAI,MAAM,GAAG,SAAS,CAEjE"}

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

@@ -0,0 +1,32 @@
+//#region src/billing/shared/utils/paymentTheme.ts
+function e(e) {
+	if (!(typeof window > "u")) return window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || void 0;
+}
+function t() {
+	return {
+		textColor: e("--color-text-primary"),
+		placeholderColor: e("--color-text-placeholder"),
+		mutedColor: e("--color-text-secondary"),
+		errorColor: e("--color-status-error-bg"),
+		primaryColor: e("--color-action-primary-bg")
+	};
+}
+function n(e = "Inter, system-ui, sans-serif") {
+	let n = t(), r = {
+		fontSize: "16px",
+		fontFamily: e
+	};
+	n.textColor && (r.color = n.textColor), n.placeholderColor && (r["::placeholder"] = { color: n.placeholderColor }), n.mutedColor && (r.iconColor = n.mutedColor);
+	let i = {};
+	return n.errorColor && (i.color = n.errorColor, i.iconColor = n.errorColor), {
+		base: r,
+		invalid: i
+	};
+}
+function r() {
+	return t().primaryColor;
+}
+//#endregion
+export { r as getPaymentProviderThemeColor, t as getPaymentThemePalette, n as getStripeCardElementStyle };
+
+//# sourceMappingURL=paymentTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paymentTheme.js","names":[],"sources":["../../../../src/billing/shared/utils/paymentTheme.ts"],"sourcesContent":["/**\n * Utilities for adapting third-party payment widgets to the current semantic theme.\n */\n\ninterface PaymentThemePalette {\n  textColor?: string;\n  placeholderColor?: string;\n  mutedColor?: string;\n  errorColor?: string;\n  primaryColor?: string;\n}\n\nfunction readCssVar(name: string): string | undefined {\n  if (typeof window === 'undefined') {\n    return undefined;\n  }\n\n  const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || undefined;\n}\n\nexport function getPaymentThemePalette(): PaymentThemePalette {\n  return {\n    textColor: readCssVar('--color-text-primary'),\n    placeholderColor: readCssVar('--color-text-placeholder'),\n    mutedColor: readCssVar('--color-text-secondary'),\n    errorColor: readCssVar('--color-status-error-bg'),\n    primaryColor: readCssVar('--color-action-primary-bg'),\n  };\n}\n\nexport function getStripeCardElementStyle(fontFamily = 'Inter, system-ui, sans-serif') {\n  const palette = getPaymentThemePalette();\n\n  const base: Record<string, unknown> = {\n    fontSize: '16px',\n    fontFamily,\n  };\n\n  if (palette.textColor) {\n    base.color = palette.textColor;\n  }\n\n  if (palette.placeholderColor) {\n    base['::placeholder'] = { color: palette.placeholderColor };\n  }\n\n  if (palette.mutedColor) {\n    base.iconColor = palette.mutedColor;\n  }\n\n  const invalid: Record<string, unknown> = {};\n\n  if (palette.errorColor) {\n    invalid.color = palette.errorColor;\n    invalid.iconColor = palette.errorColor;\n  }\n\n  return {\n    base,\n    invalid,\n  };\n}\n\nexport function getPaymentProviderThemeColor(): string | undefined {\n  return getPaymentThemePalette().primaryColor;\n}\n"],"mappings":";AAYA,SAAS,EAAW,GAAkC;AAChD,cAAO,SAAW,KAKtB,QADc,OAAO,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,EAAK,CAAC,MAAM,IAC7E,KAAA;;AAGlB,SAAgB,IAA8C;AAC5D,QAAO;EACL,WAAW,EAAW,uBAAuB;EAC7C,kBAAkB,EAAW,2BAA2B;EACxD,YAAY,EAAW,yBAAyB;EAChD,YAAY,EAAW,0BAA0B;EACjD,cAAc,EAAW,4BAA4B;EACtD;;AAGH,SAAgB,EAA0B,IAAa,gCAAgC;CACrF,IAAM,IAAU,GAAwB,EAElC,IAAgC;EACpC,UAAU;EACV;EACD;AAUD,CARI,EAAQ,cACV,EAAK,QAAQ,EAAQ,YAGnB,EAAQ,qBACV,EAAK,mBAAmB,EAAE,OAAO,EAAQ,kBAAkB,GAGzD,EAAQ,eACV,EAAK,YAAY,EAAQ;CAG3B,IAAM,IAAmC,EAAE;AAO3C,QALI,EAAQ,eACV,EAAQ,QAAQ,EAAQ,YACxB,EAAQ,YAAY,EAAQ,aAGvB;EACL;EACA;EACD;;AAGH,SAAgB,IAAmD;AACjE,QAAO,GAAwB,CAAC"}

package/dist/billing/shared/utils/status.d.ts

@@ -0,0 +1,28 @@
+import { SubscriptionStatus, InvoiceStatus, PaymentStatus, ChargeStatus, RefundStatus, QuotaStatus, TransactionStatus, CreditTransactionStatus } from '../types';
+import { SemanticStatus } from './tokens';
+
+export type StatusColor = SemanticStatus;
+export declare function getSubscriptionStatusColor(status: SubscriptionStatus): StatusColor;
+export declare function getInvoiceStatusColor(status: InvoiceStatus): StatusColor;
+export declare function getPaymentStatusColor(status: PaymentStatus): StatusColor;
+export declare function getChargeStatusColor(status: ChargeStatus): StatusColor;
+export declare function getRefundStatusColor(status: RefundStatus): StatusColor;
+export declare function getQuotaStatusColor(status: QuotaStatus): StatusColor;
+export declare function getTransactionStatusColor(status: TransactionStatus): StatusColor;
+export declare function getCreditTransactionStatusColor(status: CreditTransactionStatus): StatusColor;
+/**
+ * Get combined badge classes for a status.
+ */
+export declare function getStatusBadgeClasses(color: StatusColor): string;
+export declare function getQuotaStatusFromPercentage(percentage: number): QuotaStatus;
+export declare function getQuotaProgressColor(percentage: number): string;
+export declare function getQuotaProgressBgColor(percentage: number): string;
+export declare function isActiveSubscription(status: SubscriptionStatus): boolean;
+export declare function isPaidInvoice(status: InvoiceStatus): boolean;
+export declare function isOpenInvoice(status: InvoiceStatus): boolean;
+export declare function isSuccessfulPayment(status: PaymentStatus): boolean;
+export declare function isPendingPayment(status: PaymentStatus): boolean;
+export declare function isHealthyQuota(status: QuotaStatus): boolean;
+export declare function isQuotaAtRisk(status: QuotaStatus): boolean;
+export declare function isQuotaExhausted(status: QuotaStatus): boolean;
+//# sourceMappingURL=status.d.ts.map

package/dist/billing/shared/utils/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../src/billing/shared/utils/status.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,cAAc,EAA2C,MAAM,UAAU,CAAC;AAMxF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAMzC,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,kBAAkB,GAAG,WAAW,CAQlF;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,WAAW,CASxE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,WAAW,CASxE;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW,CAQtE;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW,CAQtE;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,CASpE;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,iBAAiB,GAAG,WAAW,CAOhF;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,uBAAuB,GAAG,WAAW,CAQ5F;AAMD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAEhE;AAMD,wBAAgB,4BAA4B,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,CAK5E;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGlE;AAMD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAExE;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAE5D;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAE5D;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAElE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAE/D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAE3D;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAE1D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAE7D"}

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

@@ -0,0 +1,57 @@
+import { getProgressTokens as e, getStatusBadgeTokens as t } from "./tokens.js";
+import { CreditTransactionStatus as n, InvoiceStatus as r, QuotaStatus as i, SubscriptionStatus as a, TransactionStatus as o } from "../types/graphql.js";
+//#region src/billing/shared/utils/status.ts
+function s(e) {
+	return {
+		[a.ACTIVE]: "success",
+		[a.CANCELED]: "error",
+		[a.EXPIRED]: "neutral",
+		[a.UPGRADED]: "info"
+	}[e] || "neutral";
+}
+function c(e) {
+	return {
+		[r.DRAFT]: "neutral",
+		[r.OPEN]: "info",
+		[r.PAID]: "success",
+		[r.VOID]: "neutral",
+		[r.UNCOLLECTIBLE]: "error"
+	}[e] || "neutral";
+}
+function l(e) {
+	return {
+		[i.HEALTHY]: "success",
+		[i.WARNING]: "warning",
+		[i.CRITICAL]: "error",
+		[i.EXHAUSTED]: "error",
+		[i.INACTIVE]: "neutral"
+	}[e] || "neutral";
+}
+function u(e) {
+	return {
+		[o.PENDING]: "warning",
+		[o.SUCCESS]: "success",
+		[o.FAILED]: "error"
+	}[e] || "neutral";
+}
+function d(e) {
+	return {
+		[n.PENDING]: "warning",
+		[n.SUCCESS]: "success",
+		[n.FAILED]: "error",
+		[n.REFUND]: "info"
+	}[e] || "neutral";
+}
+function f(e) {
+	return t(e);
+}
+function p(t) {
+	return e(t).bar;
+}
+function m(t) {
+	return e(t).track;
+}
+//#endregion
+export { d as getCreditTransactionStatusColor, c as getInvoiceStatusColor, m as getQuotaProgressBgColor, p as getQuotaProgressColor, l as getQuotaStatusColor, f as getStatusBadgeClasses, s as getSubscriptionStatusColor, u as getTransactionStatusColor };
+
+//# sourceMappingURL=status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","names":[],"sources":["../../../../src/billing/shared/utils/status.ts"],"sourcesContent":["/**\n * Status utilities for the billing module\n * Provides status colors, icons, and helper functions\n *\n * Uses semantic design tokens from tokens.ts for consistent theming\n */\n\nimport {\n  SubscriptionStatus,\n  InvoiceStatus,\n  PaymentStatus,\n  ChargeStatus,\n  RefundStatus,\n  QuotaStatus,\n  TransactionStatus,\n  CreditTransactionStatus,\n} from '../types';\nimport { type SemanticStatus, getStatusBadgeTokens, getProgressTokens } from './tokens';\n\n// ============================================================================\n// Status Color Types\n// ============================================================================\n\nexport type StatusColor = SemanticStatus;\n\n// ============================================================================\n// Status Color Mappings\n// ============================================================================\n\nexport function getSubscriptionStatusColor(status: SubscriptionStatus): StatusColor {\n  const colors: Record<SubscriptionStatus, StatusColor> = {\n    [SubscriptionStatus.ACTIVE]: 'success',\n    [SubscriptionStatus.CANCELED]: 'error',\n    [SubscriptionStatus.EXPIRED]: 'neutral',\n    [SubscriptionStatus.UPGRADED]: 'info',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getInvoiceStatusColor(status: InvoiceStatus): StatusColor {\n  const colors: Record<InvoiceStatus, StatusColor> = {\n    [InvoiceStatus.DRAFT]: 'neutral',\n    [InvoiceStatus.OPEN]: 'info',\n    [InvoiceStatus.PAID]: 'success',\n    [InvoiceStatus.VOID]: 'neutral',\n    [InvoiceStatus.UNCOLLECTIBLE]: 'error',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getPaymentStatusColor(status: PaymentStatus): StatusColor {\n  const colors: Record<PaymentStatus, StatusColor> = {\n    [PaymentStatus.PENDING]: 'warning',\n    [PaymentStatus.SUCCEEDED]: 'success',\n    [PaymentStatus.FAILED]: 'error',\n    [PaymentStatus.CANCELED]: 'neutral',\n    [PaymentStatus.REFUNDED]: 'info',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getChargeStatusColor(status: ChargeStatus): StatusColor {\n  const colors: Record<ChargeStatus, StatusColor> = {\n    [ChargeStatus.PENDING]: 'warning',\n    [ChargeStatus.SUCCEEDED]: 'success',\n    [ChargeStatus.FAILED]: 'error',\n    [ChargeStatus.REFUNDED]: 'info',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getRefundStatusColor(status: RefundStatus): StatusColor {\n  const colors: Record<RefundStatus, StatusColor> = {\n    [RefundStatus.PENDING]: 'warning',\n    [RefundStatus.SUCCEEDED]: 'success',\n    [RefundStatus.FAILED]: 'error',\n    [RefundStatus.CANCELED]: 'neutral',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getQuotaStatusColor(status: QuotaStatus): StatusColor {\n  const colors: Record<QuotaStatus, StatusColor> = {\n    [QuotaStatus.HEALTHY]: 'success',\n    [QuotaStatus.WARNING]: 'warning',\n    [QuotaStatus.CRITICAL]: 'error',\n    [QuotaStatus.EXHAUSTED]: 'error',\n    [QuotaStatus.INACTIVE]: 'neutral',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getTransactionStatusColor(status: TransactionStatus): StatusColor {\n  const colors: Record<TransactionStatus, StatusColor> = {\n    [TransactionStatus.PENDING]: 'warning',\n    [TransactionStatus.SUCCESS]: 'success',\n    [TransactionStatus.FAILED]: 'error',\n  };\n  return colors[status] || 'neutral';\n}\n\nexport function getCreditTransactionStatusColor(status: CreditTransactionStatus): StatusColor {\n  const colors: Record<CreditTransactionStatus, StatusColor> = {\n    [CreditTransactionStatus.PENDING]: 'warning',\n    [CreditTransactionStatus.SUCCESS]: 'success',\n    [CreditTransactionStatus.FAILED]: 'error',\n    [CreditTransactionStatus.REFUND]: 'info',\n  };\n  return colors[status] || 'neutral';\n}\n\n// ============================================================================\n// CSS Class Mappings (using semantic tokens)\n// ============================================================================\n\n/**\n * Get combined badge classes for a status.\n */\nexport function getStatusBadgeClasses(color: StatusColor): string {\n  return getStatusBadgeTokens(color);\n}\n\n// ============================================================================\n// Quota Status Helpers\n// ============================================================================\n\nexport function getQuotaStatusFromPercentage(percentage: number): QuotaStatus {\n  if (percentage >= 100) return QuotaStatus.EXHAUSTED;\n  if (percentage >= 90) return QuotaStatus.CRITICAL;\n  if (percentage >= 75) return QuotaStatus.WARNING;\n  return QuotaStatus.HEALTHY;\n}\n\nexport function getQuotaProgressColor(percentage: number): string {\n  const tokens = getProgressTokens(percentage);\n  return tokens.bar;\n}\n\nexport function getQuotaProgressBgColor(percentage: number): string {\n  const tokens = getProgressTokens(percentage);\n  return tokens.track;\n}\n\n// ============================================================================\n// Status Checks\n// ============================================================================\n\nexport function isActiveSubscription(status: SubscriptionStatus): boolean {\n  return status === SubscriptionStatus.ACTIVE;\n}\n\nexport function isPaidInvoice(status: InvoiceStatus): boolean {\n  return status === InvoiceStatus.PAID;\n}\n\nexport function isOpenInvoice(status: InvoiceStatus): boolean {\n  return status === InvoiceStatus.OPEN;\n}\n\nexport function isSuccessfulPayment(status: PaymentStatus): boolean {\n  return status === PaymentStatus.SUCCEEDED;\n}\n\nexport function isPendingPayment(status: PaymentStatus): boolean {\n  return status === PaymentStatus.PENDING;\n}\n\nexport function isHealthyQuota(status: QuotaStatus): boolean {\n  return status === QuotaStatus.HEALTHY;\n}\n\nexport function isQuotaAtRisk(status: QuotaStatus): boolean {\n  return status === QuotaStatus.WARNING || status === QuotaStatus.CRITICAL;\n}\n\nexport function isQuotaExhausted(status: QuotaStatus): boolean {\n  return status === QuotaStatus.EXHAUSTED;\n}\n"],"mappings":";;;AA6BA,SAAgB,EAA2B,GAAyC;AAOlF,QANwD;GACrD,EAAmB,SAAS;GAC5B,EAAmB,WAAW;GAC9B,EAAmB,UAAU;GAC7B,EAAmB,WAAW;EAChC,CACa,MAAW;;AAG3B,SAAgB,EAAsB,GAAoC;AAQxE,QAPmD;GAChD,EAAc,QAAQ;GACtB,EAAc,OAAO;GACrB,EAAc,OAAO;GACrB,EAAc,OAAO;GACrB,EAAc,gBAAgB;EAChC,CACa,MAAW;;AAkC3B,SAAgB,EAAoB,GAAkC;AAQpE,QAPiD;GAC9C,EAAY,UAAU;GACtB,EAAY,UAAU;GACtB,EAAY,WAAW;GACvB,EAAY,YAAY;GACxB,EAAY,WAAW;EACzB,CACa,MAAW;;AAG3B,SAAgB,EAA0B,GAAwC;AAMhF,QALuD;GACpD,EAAkB,UAAU;GAC5B,EAAkB,UAAU;GAC5B,EAAkB,SAAS;EAC7B,CACa,MAAW;;AAG3B,SAAgB,EAAgC,GAA8C;AAO5F,QAN6D;GAC1D,EAAwB,UAAU;GAClC,EAAwB,UAAU;GAClC,EAAwB,SAAS;GACjC,EAAwB,SAAS;EACnC,CACa,MAAW;;AAU3B,SAAgB,EAAsB,GAA4B;AAChE,QAAO,EAAqB,EAAM;;AAcpC,SAAgB,EAAsB,GAA4B;AAEhE,QADe,EAAkB,EAAW,CAC9B;;AAGhB,SAAgB,EAAwB,GAA4B;AAElE,QADe,EAAkB,EAAW,CAC9B"}

package/dist/billing/shared/utils/tokens.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Semantic Design Tokens for Billing Module
+ *
+ * Maps semantic status colors to fe-libs design tokens.
+ * This ensures consistent theming across all micro-frontends.
+ *
+ * Token Reference (from fe-libs):
+ * - Status: --color-status-{success|warning|error|info}-{bg|bgSubtle|text|border}
+ * - Action: --color-action-{primary|secondary|danger}-{bg|bgHover|text}
+ * - Text: --color-text-{primary|secondary|muted}
+ * - Background: --color-bg-{canvas|surface|elevated|sunken}
+ */
+export type SemanticStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary';
+export interface StatusTokenClasses {
+    /** Background for subtle/badge usage */
+    bg: string;
+    /** Text color */
+    text: string;
+    /** Border color */
+    border: string;
+    /** Dot/indicator color */
+    dot: string;
+    /** Icon color */
+    icon: string;
+}
+/**
+ * Semantic status color classes using design tokens
+ * These map to CSS custom properties defined in fe-libs
+ */
+export declare const statusTokens: Record<SemanticStatus, StatusTokenClasses>;
+/**
+ * Get status token classes for a given status
+ */
+export declare function getStatusTokens(status: SemanticStatus): StatusTokenClasses;
+/**
+ * Get combined badge classes for a status
+ */
+export declare function getStatusBadgeTokens(status: SemanticStatus): string;
+export declare const trendTokens: {
+    positive: {
+        text: string;
+        icon: string;
+    };
+    negative: {
+        text: string;
+        icon: string;
+    };
+    neutral: {
+        text: string;
+        icon: string;
+    };
+};
+/**
+ * Get trend indicator classes
+ */
+export declare function getTrendTokens(isPositive: boolean | null): {
+    text: string;
+    icon: string;
+};
+export declare const progressTokens: {
+    healthy: {
+        bar: string;
+        track: string;
+    };
+    warning: {
+        bar: string;
+        track: string;
+    };
+    critical: {
+        bar: string;
+        track: string;
+    };
+};
+/**
+ * Get progress bar colors based on percentage
+ */
+export declare function getProgressTokens(percentage: number): {
+    bar: string;
+    track: string;
+};
+export declare const categoryTokens: {
+    plan: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    addon: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    credits: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+};
+/**
+ * Get category badge classes
+ */
+export declare function getCategoryTokens(category: 'plan' | 'addon' | 'credits'): {
+    bg: string;
+    text: string;
+    border: string;
+} | {
+    bg: string;
+    text: string;
+    border: string;
+} | {
+    bg: string;
+    text: string;
+    border: string;
+};
+export declare const alertTokens: {
+    success: {
+        container: string;
+        text: string;
+        icon: string;
+    };
+    warning: {
+        container: string;
+        text: string;
+        icon: string;
+    };
+    error: {
+        container: string;
+        text: string;
+        icon: string;
+    };
+    info: {
+        container: string;
+        text: string;
+        icon: string;
+    };
+};
+/**
+ * Get alert/banner classes
+ */
+export declare function getAlertTokens(type: 'success' | 'warning' | 'error' | 'info'): {
+    container: string;
+    text: string;
+    icon: string;
+} | {
+    container: string;
+    text: string;
+    icon: string;
+} | {
+    container: string;
+    text: string;
+    icon: string;
+} | {
+    container: string;
+    text: string;
+    icon: string;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/billing/shared/utils/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/billing/shared/utils/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,cAAc,EAAE,kBAAkB,CA2CnE,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAE1E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAGnE;AAMD,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;;;EAGxD;AAMD,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAa1B,CAAC;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM;;;EAInD;AAMD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;CAgB1B,CAAC;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS;;;;;;;;;;;;EAEvE;AAMD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;CAqBvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM;;;;;;;;;;;;;;;;EAE5E"}

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

@@ -0,0 +1,128 @@
+//#region src/billing/shared/utils/tokens.ts
+var e = {
+	success: {
+		bg: "bg-status-success-bg-subtle",
+		text: "text-status-success-text",
+		border: "border-status-success-border",
+		dot: "bg-status-success-bg",
+		icon: "text-status-success-bg"
+	},
+	warning: {
+		bg: "bg-status-warning-bg-subtle",
+		text: "text-status-warning-text",
+		border: "border-status-warning-border",
+		dot: "bg-status-warning-bg",
+		icon: "text-status-warning-bg"
+	},
+	error: {
+		bg: "bg-status-error-bg-subtle",
+		text: "text-status-error-text",
+		border: "border-status-error-border",
+		dot: "bg-status-error-bg",
+		icon: "text-status-error-bg"
+	},
+	info: {
+		bg: "bg-status-info-bg-subtle",
+		text: "text-status-info-text",
+		border: "border-status-info-border",
+		dot: "bg-status-info-bg",
+		icon: "text-status-info-bg"
+	},
+	neutral: {
+		bg: "bg-status-neutral-bg-subtle",
+		text: "text-status-neutral-text",
+		border: "border-status-neutral-border",
+		dot: "bg-status-neutral-bg",
+		icon: "text-status-neutral-text"
+	},
+	primary: {
+		bg: "bg-primary/10",
+		text: "text-primary",
+		border: "border-primary/20",
+		dot: "bg-primary",
+		icon: "text-primary"
+	}
+};
+function t(t) {
+	return e[t] || e.neutral;
+}
+function n(e) {
+	let n = t(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"
+	},
+	warning: {
+		bar: "bg-status-warning-bg",
+		track: "bg-status-warning-bg-subtle"
+	},
+	critical: {
+		bar: "bg-status-error-bg",
+		track: "bg-status-error-bg-subtle"
+	}
+};
+function o(e) {
+	return e >= 90 ? a.critical : e >= 75 ? a.warning : a.healthy;
+}
+var s = {
+	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"
+	},
+	credits: {
+		bg: "bg-status-warning-bg-subtle",
+		text: "text-status-warning-text",
+		border: "border-status-warning-border"
+	}
+}, c = {
+	success: {
+		container: "bg-status-success-bg-subtle border-status-success-border",
+		text: "text-status-success-text",
+		icon: "text-status-success-bg"
+	},
+	warning: {
+		container: "bg-status-warning-bg-subtle border-status-warning-border",
+		text: "text-status-warning-text",
+		icon: "text-status-warning-bg"
+	},
+	error: {
+		container: "bg-status-error-bg-subtle border-status-error-border",
+		text: "text-status-error-text",
+		icon: "text-status-error-bg"
+	},
+	info: {
+		container: "bg-status-info-bg-subtle border-status-info-border",
+		text: "text-status-info-text",
+		icon: "text-status-info-bg"
+	}
+};
+//#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 };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +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"}