@metrifox/react-sdk 0.0.20-beta.3 → 0.0.20-beta.4

package/dist/index.d.ts

@@ -1,20 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType } from 'react';
 
+/** Plans block: same shape as customer portal theme.plans. */
+interface PricingTablePlansTheme {
+    currentPlanCard?: CurrentSubscriptionCard;
+    planCards?: CardTheme;
+    planFeatures?: FeatureListTheme;
+    planButton?: PlanButtonTheme;
+    planToggle?: IntervalToggleTheme;
+    planTags?: PlanTagsTheme;
+}
+/** Same order and shape as customer portal for consistency. Supports both plans: {} and top-level keys. */
 interface PricingTableTheme {
-    card?: CardTheme;
-    button?: ButtonTheme;
-    featureList?: FeatureListTheme;
-    tabs?: TabsTheme;
-    intervalToggle?: IntervalToggleTheme;
+    plans?: PricingTablePlansTheme;
     currentPlanCard?: CurrentSubscriptionCard;
-    freeTrialTag?: FreeTrialTheme;
+    planCards?: CardTheme;
+    planFeatures?: FeatureListTheme;
+    planButton?: PlanButtonTheme;
+    planToggle?: IntervalToggleTheme;
+    planTags?: PlanTagsTheme;
+    tabs?: TabsTheme;
     checkoutBar?: CheckoutBarTheme;
 }
 interface CardTheme {
     background?: string;
-    borderColor?: string;
-    descriptionColor?: string;
+    border?: {
+        color?: string;
+        width?: string;
+        radius?: string;
+    };
     header?: CardHeaderTheme;
     description?: CardDescriptionTheme;
     price?: CardPriceTheme;
@@ -35,7 +49,8 @@ interface CardPriceTheme {
     background?: string;
     borderColor?: string;
 }
-interface ButtonTheme {
+/** Matches customer portal plans.planButton; optional extras for standalone pricing table. */
+interface PlanButtonTheme {
     background?: string;
     textColor?: string;
     secondaryBackground?: string;
@@ -61,10 +76,13 @@ interface IntervalToggleTheme {
 interface CurrentSubscriptionCard {
     header: CardHeaderTheme;
     gradientColor?: string;
+    description?: CardDescriptionTheme;
+    borderRadius?: string;
 }
-interface FreeTrialTheme {
-    background?: string;
-    textColor?: string;
+/** Matches customer portal plans.planTags. */
+interface PlanTagsTheme {
+    freeTrialBackground?: string;
+    freeTrialText?: string;
 }
 interface CheckoutBarTheme {
     background?: string;
@@ -100,11 +118,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;
@@ -304,11 +337,19 @@ type CustomerPortalTheme = {
                 textColor?: string;
             };
             gradientColor?: string;
+            description?: {
+                textColor?: string;
+                textButtonColor?: string;
+            };
+            borderRadius?: string;
         };
         planCards?: {
             background?: string;
-            borderColor?: string;
-            descriptionColor?: string;
+            border?: {
+                color?: string;
+                width?: string;
+                radius?: string;
+            };
             header?: {
                 background?: string;
                 textColor?: string;
@@ -734,12 +775,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: () => {