@olwiba/ui 0.2.8 → 0.2.10

package/dist/index.d.ts

@@ -770,8 +770,17 @@ interface PricingSectionProps {
     cadences?: PricingCadence[];
     /** Which cadence opens selected. Defaults to the first in `cadences`. */
     defaultCadence?: string;
+    /**
+     * Called when a plan's CTA is pressed, with the cadence currently selected —
+     * which is the half the caller can't otherwise know, since the toggle's state
+     * lives in here. Without it the CTA is inert: `PricingCard` takes an
+     * `onSelect` and this section had never passed one.
+     */
+    onSelectPlan?: (plan: PricingPlan, cadence?: string) => void;
+    /** Marks one plan as busy (e.g. its checkout is being created). */
+    pendingPlanName?: string;
 }
-declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, cadences, defaultCadence, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
+declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, cadences, defaultCadence, onSelectPlan, pendingPlanName, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
 
 interface TestimonialsSectionProps {
     title?: string;

package/dist/index.js

@@ -2324,7 +2324,9 @@ function PricingSection({
   highlightedBadgeLabel = "Founding member",
   renderPlanFooter,
   cadences,
-  defaultCadence
+  defaultCadence,
+  onSelectPlan,
+  pendingPlanName
 }) {
   const [annual, setAnnual] = React35.useState(false);
   const isOneTime = mode === "one-time";
@@ -2361,7 +2363,12 @@ function PricingSection({
           ),
           children: [
             entry.label,
-            saveBadges[entry.key] && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: saveBadges[entry.key] })
+            saveBadges[entry.key] && // `default` (primary), not `secondary`: the toggle is
+            // `bg-muted` with a `bg-background` active tab, and a
+            // secondary badge is the same grey as both — the
+            // saving is the incentive, so it has to carry brand
+            // colour to read at all.
+            /* @__PURE__ */ jsx(Badge$1, { variant: "default", className: "text-xs", children: saveBadges[entry.key] })
           ]
         },
         entry.key
@@ -2391,7 +2398,7 @@ function PricingSection({
             ),
             children: [
               "Annual",
-              saveBadge && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: saveBadge })
+              saveBadge && /* @__PURE__ */ jsx(Badge$1, { variant: "default", className: "text-xs", children: saveBadge })
             ]
           }
         )
@@ -2410,12 +2417,13 @@ function PricingSection({
           period,
           description: plan.description,
           features: plan.features,
-          cta: plan.cta,
+          cta: pendingPlanName === plan.name ? "Redirecting\u2026" : plan.cta,
           highlighted: plan.highlighted,
           disabled: plan.disabled,
-          ctaDisabled: plan.ctaDisabled,
+          ctaDisabled: plan.ctaDisabled || pendingPlanName === plan.name,
           badge: badge2,
-          footer: renderPlanFooter?.(plan)
+          footer: renderPlanFooter?.(plan),
+          onSelect: onSelectPlan ? () => onSelectPlan(plan, useCadences ? activeCadence : void 0) : void 0
         },
         plan.name
       );