@metrifox/react-sdk 0.0.20-beta.0 → 0.0.20-beta.10

package/dist/index.d.ts

@@ -1,20 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType } from 'react';
 
+/**
+ * Pricing Table theme. All properties are optional.
+ * The theme follows the same structure as CustomerPortalTheme:
+ * - Plan-related keys (planCards, planButton, etc.) are nested under `plans`
+ * - Additional top-level keys: `tabs`, `checkoutBar`
+ */
 interface PricingTableTheme {
-    card?: CardTheme;
-    button?: ButtonTheme;
-    featureList?: FeatureListTheme;
+    general?: {
+        fontFamily?: string;
+    };
+    plans?: PricingTablePlansTheme;
     tabs?: TabsTheme;
-    intervalToggle?: IntervalToggleTheme;
-    currentPlanCard?: CurrentSubscriptionCard;
-    freeTrialTag?: FreeTrialTheme;
     checkoutBar?: CheckoutBarTheme;
 }
+interface PricingTablePlansTheme {
+    currentPlanCard?: CurrentSubscriptionCard;
+    planCards?: CardTheme;
+    planFeatures?: FeatureListTheme;
+    planButton?: PlanButtonTheme;
+    planToggle?: IntervalToggleTheme;
+    planTags?: PlanTagsTheme;
+}
 interface CardTheme {
     background?: string;
-    borderColor?: string;
-    descriptionColor?: string;
+    border?: {
+        color?: string;
+        width?: string;
+        radius?: string;
+    };
     header?: CardHeaderTheme;
     description?: CardDescriptionTheme;
     price?: CardPriceTheme;
@@ -31,11 +46,10 @@ interface CardPriceTheme {
     amountColor?: string;
     primaryTextColor?: string;
     secondaryTextColor?: string;
-    textButtonColor?: string;
     background?: string;
     borderColor?: string;
 }
-interface ButtonTheme {
+interface PlanButtonTheme {
     background?: string;
     textColor?: string;
     secondaryBackground?: string;
@@ -61,10 +75,12 @@ interface IntervalToggleTheme {
 interface CurrentSubscriptionCard {
     header: CardHeaderTheme;
     gradientColor?: string;
+    description?: CardDescriptionTheme;
+    borderRadius?: string;
 }
-interface FreeTrialTheme {
-    background?: string;
-    textColor?: string;
+interface PlanTagsTheme {
+    freeTrialBackground?: string;
+    freeTrialText?: string;
 }
 interface CheckoutBarTheme {
     background?: string;
@@ -74,6 +90,12 @@ interface CheckoutBarTheme {
     buttonTextColor?: string;
 }
 
+/**
+ * Customer Portal theme. All properties are optional.
+ * This shape matches what is defined in defaultCustomerPortalTheme and what
+ * customerPortalThemeToCssVars maps to CSS variables. Only theme groups
+ * that exist in the default theme or are supported by the helper are included.
+ */
 type CustomerPortalTheme = {
     general?: {
         linkColor?: string;
@@ -100,11 +122,26 @@ type CustomerPortalTheme = {
             borderColor?: string;
             borderRadius?: string;
         };
-        summary?: {
+        summaryBalance?: {
             background?: string;
             padding?: string;
             borderColor?: string;
             borderRadius?: string;
+            label?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+            value?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
+            unit?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+            };
         };
         header?: {
             fontSize?: string;
@@ -124,7 +161,10 @@ type CustomerPortalTheme = {
         iconBackground?: string;
         iconColor?: string;
         emptyTextColor?: string;
-        usageBarColor?: string;
+        usage?: {
+            barColor?: string;
+            trackColor?: string;
+        };
     };
     buttons?: {
         primary?: {
@@ -154,36 +194,6 @@ type CustomerPortalTheme = {
             };
         };
     };
-    badges?: {
-        active?: {
-            background?: string;
-            textColor?: string;
-            strokeColor?: string;
-        };
-        cancelled?: {
-            background?: string;
-            textColor?: string;
-            strokeColor?: string;
-        };
-        inTrial?: {
-            background?: string;
-            textColor?: string;
-            strokeColor?: string;
-        };
-        deactivated?: {
-            background?: string;
-            textColor?: string;
-            strokeColor?: string;
-        };
-        shared?: {
-            borderRadius?: string;
-            strokeWidth?: string;
-            typography?: {
-                fontSize?: string;
-                fontWeight?: string;
-            };
-        };
-    };
     lineItems?: {
         parentRow?: {
             background?: string;
@@ -240,6 +250,13 @@ type CustomerPortalTheme = {
         rowTextColor?: string;
         borderColor?: string;
         cellPadding?: string;
+        expandIconColor?: string;
+        typography?: {
+            fontSize?: string;
+            fontWeight?: string;
+            headerFontSize?: string;
+            headerFontWeight?: string;
+        };
         pagination?: {
             background?: string;
             activeBackground?: string;
@@ -294,11 +311,15 @@ type CustomerPortalTheme = {
                 textColor?: string;
             };
             gradientColor?: string;
+            borderRadius?: string;
         };
         planCards?: {
             background?: string;
-            borderColor?: string;
-            descriptionColor?: string;
+            border?: {
+                color?: string;
+                width?: string;
+                radius?: string;
+            };
             header?: {
                 background?: string;
                 textColor?: string;
@@ -334,6 +355,29 @@ type CustomerPortalTheme = {
             freeTrialText?: string;
         };
     };
+    /** Used by e.g. subscription line-item actions. Not set in default theme; pass to override. */
+    popover?: {
+        trigger?: {
+            background?: string;
+            iconColor?: string;
+            borderColor?: string;
+            borderRadius?: string;
+        };
+        menu?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            padding?: string;
+            itemHoverBackground?: string;
+            itemDividerColor?: string;
+            typography?: {
+                fontSize?: string;
+                fontWeight?: string;
+                color?: string;
+                dangerColor?: string;
+            };
+        };
+    };
 };
 
 interface Theme {
@@ -702,12 +746,15 @@ declare const PriceCard: ({ plan, interval, featureOrderMap, isPricePage, isCust
     buttonAction?: () => void;
 }) => react_jsx_runtime.JSX.Element | null;
 
-declare const PricingTable: ({ checkoutUsername, productKey, plansOnly, singlePurchasesOnly, showTabHeader, }: {
+declare const PricingTable: ({ checkoutUsername, productKey, plansOnly, singlePurchasesOnly, showTabHeader, theme: themeOverride, currentPlanOfferingKey, }: {
     checkoutUsername: string;
     productKey: string;
     plansOnly?: boolean;
     singlePurchasesOnly?: boolean;
     showTabHeader?: boolean;
+    theme?: PricingTableTheme;
+    /** When set, the plan with this offering_key is rendered as the current plan (shows currentPlanCard theme + gradient). Use in demo/Storybook to preview gradient. */
+    currentPlanOfferingKey?: string;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const useCheckoutUrl: () => {