@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/PricingPage.js

@@ -1,80 +1,12 @@
-import { Accordion } from "./Accordion.js";
-import { Separator } from "./Separator.js";
-import { Button } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
-import { AlertDialog } from "./AlertDialog.js";
-import { Badge } from "./Badge.js";
-import { Slider } from "./Slider.js";
-import { Card } from "./Card.js";
-import { Checkbox } from "./Checkbox.js";
-import { Switch } from "./Switch.js";
-import { Label } from "./Label.js";
-import { ToggleGroup } from "./ToggleGroup.js";
-import { Progress } from "./Progress.js";
+import { getPlanPrice } from "./Pricing.js";
+import { PricingBillingToggle } from "./PricingBillingToggle.js";
+import { PricingConfirmationDialog } from "./PricingConfirmationDialog.js";
+import { PricingFAQ } from "./PricingFAQ.js";
+import { PricingPlanCard } from "./PricingPlanCard.js";
+import { PricingUsageCalculator } from "./PricingUsageCalculator.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PricingPage.tsx
-const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
-	width: "16",
-	height: "16",
-	viewBox: "0 0 16 16",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: /* @__PURE__ */ jsx("path", {
-		d: "M13.5 4.5L6.5 11.5L3 8",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})
-});
-const MinusIcon = () => /* @__PURE__ */ jsx("svg", {
-	width: "16",
-	height: "16",
-	viewBox: "0 0 16 16",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: /* @__PURE__ */ jsx("path", {
-		d: "M3 8H13",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round"
-	})
-});
-const InfoIcon = () => /* @__PURE__ */ jsxs("svg", {
-	width: "14",
-	height: "14",
-	viewBox: "0 0 14 14",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "7",
-		cy: "7",
-		r: "6",
-		stroke: "currentColor",
-		strokeWidth: "1.5"
-	}), /* @__PURE__ */ jsx("path", {
-		d: "M7 6V10M7 4.5V4",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		strokeLinecap: "round"
-	})]
-});
-function getSavings(plan) {
-	const yearlyTotal = plan.yearlyPrice * 12;
-	return plan.monthlyPrice * 12 - yearlyTotal;
-}
-function formatNumber(num) {
-	if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
-	if (num >= 1e3) return `${(num / 1e3).toFixed(0)}K`;
-	return num.toString();
-}
 /**
 * A comprehensive pricing page component that demonstrates all pricing-related
 * components working together.
@@ -98,16 +30,9 @@ function formatNumber(num) {
 */
 function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, faq, showUsageCalculator = false, usageTiers = [], maxUsage = 1e5, usageUnit = "API calls", onSelectPlan, onConfirmUpgrade, className = "", billingToggleVariant, productIds, currentProductId, isSubscribed = false, checkoutUrl = "/api/checkout", switchPlanUrl = "/api/switch-plan", portalUrl = "/api/portal", isLoggedIn = false, loginUrl = "/auth/login", hasPolarAccount = false, onCheckout, onSwitchPlan, onPortalRedirect }) {
 	const [billingPeriod, setBillingPeriod] = React.useState("monthly");
-	const [useSwitchToggle, setUseSwitchToggle] = React.useState(true);
-	const showSwitch = billingToggleVariant ? billingToggleVariant === "switch" : useSwitchToggle;
 	const [selectedPlan, setSelectedPlan] = React.useState(null);
 	const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false);
 	const [switching, setSwitching] = React.useState(false);
-	const [usage, setUsage] = React.useState(5e4);
-	const isYearly = billingPeriod === "yearly";
-	const getPrice = (plan) => {
-		return isYearly ? plan.yearlyPrice : plan.monthlyPrice;
-	};
 	const yearlySavingsPercent = React.useMemo(() => {
 		const paidPlans = plans.filter((p) => p.monthlyPrice > 0);
 		if (paidPlans.length === 0) return 0;
@@ -125,8 +50,8 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 	const currentPlan = isSubscribed ? plans.find((p) => isCurrentPlan(p)) : void 0;
 	const getSwitchDirection = (target) => {
 		if (!currentPlan) return "upgrade";
-		const currentPrice = getPrice(currentPlan);
-		const targetPrice = getPrice(target);
+		const currentPrice = getPlanPrice(currentPlan, billingPeriod);
+		const targetPrice = getPlanPrice(target, billingPeriod);
 		if (targetPrice > currentPrice) return "upgrade";
 		if (targetPrice < currentPrice) return "downgrade";
 		return "switch";
@@ -135,7 +60,7 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 		if (!productIds) return void 0;
 		const ids = productIds[plan.id];
 		if (!ids) return void 0;
-		return isYearly ? ids.yearly : ids.monthly;
+		return billingPeriod === "yearly" ? ids.yearly : ids.monthly;
 	};
 	const doCheckout = async (productId) => {
 		if (onCheckout) await onCheckout(productId);
@@ -204,301 +129,56 @@ function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, f
 		}
 		setConfirmDialogOpen(false);
 	};
-	const calculateUsagePrice = (currentUsage) => {
-		for (let i = usageTiers.length - 1; i >= 0; i--) if (currentUsage >= usageTiers[i].limit) return usageTiers[i].price;
-		return usageTiers[0]?.price ?? 0;
+	const getPlanAction = (plan) => {
+		if (isCurrentPlan(plan)) return "current";
+		return isSubscribed ? getSwitchDirection(plan) : "select";
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: ["pricing-page", className].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("header", {
 				className: "pricing-page__header",
 				children: [
 					/* @__PURE__ */ jsx("h1", {
 						className: "pricing-page__title",
 						children: title
 					}),
-					subtitle && /* @__PURE__ */ jsx("p", {
+					subtitle ? /* @__PURE__ */ jsx("p", {
 						className: "pricing-page__subtitle",
 						children: subtitle
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "pricing-page__billing-toggle",
-						children: [!billingToggleVariant && /* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__toggle-options",
-							children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-								checked: useSwitchToggle,
-								onCheckedChange: (checked) => setUseSwitchToggle(!!checked),
-								id: "toggle-type",
-								"aria-label": "Use switch style",
-								children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
-							}), /* @__PURE__ */ jsx(Label, {
-								htmlFor: "toggle-type",
-								style: { fontSize: "0.75rem" },
-								children: "Use switch style"
-							})]
-						}), showSwitch ? /* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__switch-container",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: `pricing-page__period-label ${!isYearly ? "pricing-page__period-label--active" : ""}`,
-									children: "Monthly"
-								}),
-								/* @__PURE__ */ jsx(Switch.Root, {
-									checked: isYearly,
-									onCheckedChange: (checked) => setBillingPeriod(checked ? "yearly" : "monthly"),
-									"aria-label": "Toggle yearly billing",
-									children: /* @__PURE__ */ jsx(Switch.Thumb, {})
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: `pricing-page__period-label ${isYearly ? "pricing-page__period-label--active" : ""}`,
-									children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
-										color: "success",
-										size: "sm",
-										style: { marginLeft: "0.5rem" },
-										children: [
-											"Save ",
-											yearlySavingsPercent,
-											"%"
-										]
-									})]
-								})
-							]
-						}) : /* @__PURE__ */ jsxs(ToggleGroup.Root, {
-							value: [billingPeriod],
-							onValueChange: (v) => v.length > 0 && setBillingPeriod(v[0]),
-							children: [/* @__PURE__ */ jsx(ToggleGroup.Item, {
-								value: "monthly",
-								children: "Monthly"
-							}), /* @__PURE__ */ jsxs(ToggleGroup.Item, {
-								value: "yearly",
-								children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
-									color: "success",
-									size: "sm",
-									style: { marginLeft: "0.375rem" },
-									children: [
-										"-",
-										yearlySavingsPercent,
-										"%"
-									]
-								})]
-							})]
-						})]
+					}) : null,
+					/* @__PURE__ */ jsx(PricingBillingToggle, {
+						value: billingPeriod,
+						onValueChange: setBillingPeriod,
+						yearlySavingsPercent,
+						variant: billingToggleVariant
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsx("section", {
 				className: "pricing-page__plans",
-				children: plans.map((plan) => /* @__PURE__ */ jsxs(Card, {
-					hover: true,
-					className: `pricing-page__plan ${plan.popular ? "pricing-page__plan--popular" : ""}`,
-					children: [
-						plan.popular && /* @__PURE__ */ jsx(Badge, {
-							color: "success",
-							className: "pricing-page__popular-badge",
-							children: "Most Popular"
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__plan-header",
-							children: [/* @__PURE__ */ jsx("h2", {
-								className: "pricing-page__plan-name",
-								children: plan.name
-							}), /* @__PURE__ */ jsx("p", {
-								className: "pricing-page__plan-description",
-								children: plan.description
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__plan-price",
-							children: [
-								/* @__PURE__ */ jsxs("span", {
-									className: "pricing-page__price-amount",
-									children: ["$", getPrice(plan)]
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "pricing-page__price-period",
-									children: "/month"
-								}),
-								isYearly && getSavings(plan) > 0 && /* @__PURE__ */ jsxs("span", {
-									className: "pricing-page__price-savings",
-									children: [
-										"Save $",
-										getSavings(plan),
-										"/year"
-									]
-								})
-							]
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: isCurrentPlan(plan) ? "outline" : plan.popular ? "normal" : "outline",
-							className: "pricing-page__plan-cta",
-							onClick: () => handleSelectPlan(plan),
-							disabled: isCurrentPlan(plan),
-							children: isCurrentPlan(plan) ? "Current Plan" : isSubscribed ? getSwitchDirection(plan) === "upgrade" ? "Upgrade" : getSwitchDirection(plan) === "downgrade" ? "Downgrade" : "Switch Plan" : plan.cta || "Get Started"
-						}),
-						/* @__PURE__ */ jsx(Separator, { className: "pricing-page__features-separator" }),
-						/* @__PURE__ */ jsx("ul", {
-							className: "pricing-page__features",
-							children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("li", {
-								className: `pricing-page__feature ${!feature.included ? "pricing-page__feature--disabled" : ""}`,
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										className: `pricing-page__feature-icon ${feature.included ? "pricing-page__feature-icon--included" : ""}`,
-										children: feature.included ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
-									}),
-									/* @__PURE__ */ jsxs("span", {
-										className: "pricing-page__feature-name",
-										children: [feature.name, feature.limit && /* @__PURE__ */ jsxs("span", {
-											className: "pricing-page__feature-limit",
-											children: [
-												"(",
-												feature.limit,
-												")"
-											]
-										})]
-									}),
-									feature.tooltip && /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-										className: "pricing-page__feature-info",
-										"aria-label": `More information about ${feature.name}`,
-										children: /* @__PURE__ */ jsx(InfoIcon, {})
-									}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: feature.tooltip }) }) })] })
-								]
-							}, index))
-						})
-					]
+				"aria-label": "Plans",
+				children: plans.map((plan) => /* @__PURE__ */ jsx(PricingPlanCard, {
+					plan,
+					billingPeriod,
+					action: getPlanAction(plan),
+					onSelect: handleSelectPlan
 				}, plan.id))
 			}),
-			showUsageCalculator && usageTiers.length > 0 && /* @__PURE__ */ jsxs(Card, {
-				className: "pricing-page__calculator",
-				children: [
-					/* @__PURE__ */ jsx("h2", {
-						className: "pricing-page__calculator-title",
-						children: "Estimate your usage"
-					}),
-					/* @__PURE__ */ jsxs("p", {
-						className: "pricing-page__calculator-description",
-						children: ["Adjust the slider to see pricing based on your expected ", usageUnit]
-					}),
-					/* @__PURE__ */ jsxs(Slider.Root, {
-						value: usage,
-						onValueChange: (v) => setUsage(Array.isArray(v) ? v[0] : v),
-						min: 0,
-						max: maxUsage,
-						step: Math.ceil(maxUsage / 100),
-						className: "pricing-page__calculator-slider",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "pricing-page__calculator-labels",
-								children: [/* @__PURE__ */ jsxs(Label, { children: ["Monthly ", usageUnit] }), /* @__PURE__ */ jsx("span", {
-									className: "pricing-page__calculator-value",
-									children: formatNumber(usage)
-								})]
-							}),
-							/* @__PURE__ */ jsx(Slider.Control, { children: /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Indicator, {}), /* @__PURE__ */ jsx(Slider.Thumb, { "aria-label": `Monthly ${usageUnit}` })] }) }),
-							/* @__PURE__ */ jsxs("div", {
-								className: "pricing-page__calculator-range",
-								children: [/* @__PURE__ */ jsx("span", { children: "0" }), /* @__PURE__ */ jsx("span", { children: formatNumber(maxUsage) })]
-							})
-						]
-					}),
-					/* @__PURE__ */ jsx(Separator, { style: { margin: "1.5rem 0" } }),
-					/* @__PURE__ */ jsxs("div", {
-						className: "pricing-page__calculator-result",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "pricing-page__calculator-result-label",
-							children: "Estimated monthly cost"
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__calculator-result-price",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: "pricing-page__calculator-amount",
-								children: ["$", calculateUsagePrice(usage)]
-							}), /* @__PURE__ */ jsx("span", {
-								className: "pricing-page__calculator-period",
-								children: "/month"
-							})]
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "pricing-page__tiers",
-						children: usageTiers.map((tier, index) => {
-							const isActive = usage >= tier.limit;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "pricing-page__tier",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "pricing-page__tier-info",
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "pricing-page__tier-label",
-										children: tier.label
-									}), /* @__PURE__ */ jsxs("span", {
-										className: "pricing-page__tier-price",
-										children: [
-											"$",
-											tier.price,
-											"/mo"
-										]
-									})]
-								}), /* @__PURE__ */ jsx(Progress.Root, {
-									"aria-label": `Progress toward ${tier.label}`,
-									value: isActive ? 100 : tier.limit > 0 ? usage / tier.limit * 100 : 0,
-									color: isActive ? "success" : "primary",
-									children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Indicator, {}) })
-								})]
-							}, index);
-						})
-					})
-				]
-			}),
-			faq && faq.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "pricing-page__faq",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "pricing-page__faq-title",
-					children: "Frequently Asked Questions"
-				}), /* @__PURE__ */ jsx(Accordion.Root, {
-					className: "pricing-page__faq-accordion",
-					children: faq.map((item, index) => /* @__PURE__ */ jsxs(Accordion.Item, {
-						value: `faq-${index}`,
-						children: [/* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: item.question }) }), /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx("p", { children: item.answer }) })]
-					}, index))
-				})]
-			}),
-			/* @__PURE__ */ jsx(AlertDialog.Root, {
+			showUsageCalculator && usageTiers.length > 0 ? /* @__PURE__ */ jsx(PricingUsageCalculator, {
+				usageTiers,
+				maxUsage,
+				usageUnit
+			}) : null,
+			faq ? /* @__PURE__ */ jsx(PricingFAQ, { items: faq }) : null,
+			/* @__PURE__ */ jsx(PricingConfirmationDialog, {
 				open: confirmDialogOpen,
 				onOpenChange: setConfirmDialogOpen,
-				children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, { children: [
-					/* @__PURE__ */ jsx(AlertDialog.Title, { children: isSubscribed && selectedPlan ? `${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"} to ${selectedPlan.name}?` : `Subscribe to ${selectedPlan?.name}?` }),
-					/* @__PURE__ */ jsx(AlertDialog.Description, { children: isSubscribed && selectedPlan ? getSwitchDirection(selectedPlan) === "downgrade" ? `You'll be downgraded to the ${selectedPlan.name} plan. A prorated credit will be applied to your next invoice.` : `You'll be upgraded to the ${selectedPlan.name} plan. The prorated difference will be added to your next invoice.` : `You're about to subscribe to the ${selectedPlan?.name} plan at $${selectedPlan ? getPrice(selectedPlan) : 0}/month${isYearly ? " (billed yearly)" : ""}.` }),
-					selectedPlan && /* @__PURE__ */ jsxs("div", {
-						className: "pricing-page__confirm-summary",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__confirm-row",
-							children: [/* @__PURE__ */ jsxs("span", { children: [
-								selectedPlan.name,
-								" Plan (",
-								isYearly ? "Yearly" : "Monthly",
-								")"
-							] }), /* @__PURE__ */ jsxs("span", { children: [
-								"$",
-								getPrice(selectedPlan),
-								"/mo"
-							] })]
-						}), isYearly && /* @__PURE__ */ jsxs("div", {
-							className: "pricing-page__confirm-row pricing-page__confirm-row--savings",
-							children: [/* @__PURE__ */ jsx("span", { children: "Annual savings" }), /* @__PURE__ */ jsxs("span", { children: ["-$", getSavings(selectedPlan)] })]
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "pricing-page__confirm-actions",
-						children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
-							disabled: switching,
-							children: "Cancel"
-						}), /* @__PURE__ */ jsx(Button, {
-							color: "primary",
-							onClick: handleConfirmUpgrade,
-							disabled: switching,
-							children: switching ? "Switching…" : isSubscribed && selectedPlan ? `Confirm ${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"}` : "Confirm"
-						})]
-					})
-				] }) })] })
+				plan: selectedPlan,
+				billingPeriod,
+				action: isSubscribed && selectedPlan ? getSwitchDirection(selectedPlan) : void 0,
+				switching,
+				onConfirm: handleConfirmUpgrade
 			})
 		]
 	});

package/dist/components/PricingPlanCard.d.ts

@@ -0,0 +1,22 @@
+import { Plan, PricingBillingPeriod } from "./Pricing.js";
+
+//#region src/components/PricingPlanCard.d.ts
+type PricingPlanAction = "current" | "upgrade" | "downgrade" | "switch" | "select";
+interface PricingPlanCardProps {
+  plan: Plan;
+  billingPeriod: PricingBillingPeriod;
+  action?: PricingPlanAction;
+  onSelect?: (plan: Plan) => void;
+  /** Additional class name for placement in a consuming layout. */
+  className?: string;
+}
+/** A single plan card with shared Badge, Button, Separator, and Tooltip primitives. */
+declare function PricingPlanCard({
+  plan,
+  billingPeriod,
+  action,
+  onSelect,
+  className
+}: PricingPlanCardProps): import("react").JSX.Element;
+//#endregion
+export { PricingPlanAction, PricingPlanCard, PricingPlanCardProps };

package/dist/components/PricingPlanCard.js

@@ -0,0 +1,109 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { O as MinusIcon, S as InfoIcon, o as CheckIcon } from "../icons-CpfUer49.js";
+import { Button } from "./Button.js";
+import { Separator } from "./Separator.js";
+import { Tooltip } from "./Tooltip.js";
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PricingPlanCard.tsx
+function getPlanActionLabel(plan, action) {
+	if (action === "current") return "Current Plan";
+	if (action === "upgrade") return "Upgrade";
+	if (action === "downgrade") return "Downgrade";
+	if (action === "switch") return "Switch Plan";
+	return plan.cta ?? "Get Started";
+}
+/** A single plan card with shared Badge, Button, Separator, and Tooltip primitives. */
+function PricingPlanCard({ plan, billingPeriod, action = "select", onSelect, className }) {
+	const price = getPlanPrice(plan, billingPeriod);
+	const yearlySavings = getPlanYearlySavings(plan);
+	return /* @__PURE__ */ jsxs(Card, {
+		hover: true,
+		className: cx("pricing-page__plan", className),
+		"data-popular": plan.popular || void 0,
+		children: [
+			plan.popular ? /* @__PURE__ */ jsx(Badge, {
+				color: "success",
+				className: "pricing-page__popular-badge",
+				children: "Most Popular"
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__plan-header",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "pricing-page__plan-name",
+					children: plan.name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "pricing-page__plan-description",
+					children: plan.description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__plan-price",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__price-amount",
+						children: ["$", price]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pricing-page__price-period",
+						children: "/month"
+					}),
+					billingPeriod === "yearly" && yearlySavings > 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__price-savings",
+						children: [
+							"Save $",
+							yearlySavings,
+							"/year"
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: action === "current" || !plan.popular ? "outline" : "normal",
+				className: "pricing-page__plan-cta",
+				onClick: () => onSelect?.(plan),
+				disabled: action === "current",
+				children: getPlanActionLabel(plan, action)
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "pricing-page__features-separator" }),
+			/* @__PURE__ */ jsx("ul", {
+				className: "pricing-page__features",
+				children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", {
+					className: "pricing-page__feature",
+					"data-included": feature.included || void 0,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "pricing-page__feature-icon",
+							"aria-hidden": "true",
+							children: feature.included ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "pricing-page__feature-name",
+							children: [feature.name, feature.limit ? /* @__PURE__ */ jsxs("span", {
+								className: "pricing-page__feature-limit",
+								children: [
+									"(",
+									feature.limit,
+									")"
+								]
+							}) : null]
+						}),
+						feature.tooltip ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								color: "neutral",
+								size: "icon-sm",
+								"aria-label": `More information about ${feature.name}`
+							}),
+							children: /* @__PURE__ */ jsx(InfoIcon, { size: 14 })
+						}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: feature.tooltip }) }) })] }) : null
+					]
+				}, feature.name))
+			})
+		]
+	});
+}
+//#endregion
+export { PricingPlanCard };

package/dist/components/PricingUsageCalculator.d.ts

@@ -0,0 +1,22 @@
+import { UsageTier } from "./Pricing.js";
+import * as React from "react";
+
+//#region src/components/PricingUsageCalculator.d.ts
+interface PricingUsageCalculatorProps {
+  usageTiers: readonly UsageTier[];
+  maxUsage?: number;
+  usageUnit?: string;
+  defaultUsage?: number;
+  /** Additional class name for placement in a consuming layout. */
+  className?: string;
+}
+/** Self-contained usage estimator composed from Card, Slider, Progress, and Separator. */
+declare function PricingUsageCalculator({
+  usageTiers,
+  maxUsage,
+  usageUnit,
+  defaultUsage,
+  className
+}: PricingUsageCalculatorProps): React.JSX.Element;
+//#endregion
+export { PricingUsageCalculator, PricingUsageCalculatorProps };