@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/PricingPage.js

@@ -0,0 +1,506 @@
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./Accordion.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle } from "./AlertDialog.js";
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+import { Checkbox } from "./Checkbox.js";
+import { Separator } from "./Separator.js";
+import { Switch, SwitchThumb } from "./Switch.js";
+import { Label } from "./Label.js";
+import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
+import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
+import { Progress, ProgressIndicator, ProgressTrack } from "./Progress.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.
+*
+* @example
+* ```tsx
+* <PricingPage
+*   title="Choose your plan"
+*   subtitle="Start free, upgrade when you need more"
+*   plans={[
+*     { id: 'free', name: 'Free', ... },
+*     { id: 'pro', name: 'Pro', popular: true, ... },
+*     { id: 'enterprise', name: 'Enterprise', ... },
+*   ]}
+*   faq={[
+*     { question: 'Can I cancel anytime?', answer: 'Yes...' },
+*   ]}
+*   onSelectPlan={(planId, period) => console.log(planId, period)}
+* />
+* ```
+*/
+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;
+		const totalPercent = paidPlans.reduce((sum, plan) => {
+			return sum + (plan.monthlyPrice - plan.yearlyPrice) / plan.monthlyPrice * 100;
+		}, 0);
+		return Math.round(totalPercent / paidPlans.length);
+	}, [plans]);
+	const isCurrentPlan = (plan) => {
+		if (!currentProductId || !productIds) return false;
+		const ids = productIds[plan.id];
+		if (!ids) return false;
+		return ids.monthly === currentProductId || ids.yearly === currentProductId;
+	};
+	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);
+		if (targetPrice > currentPrice) return "upgrade";
+		if (targetPrice < currentPrice) return "downgrade";
+		return "switch";
+	};
+	const getProductIdForPlan = (plan) => {
+		if (!productIds) return void 0;
+		const ids = productIds[plan.id];
+		if (!ids) return void 0;
+		return isYearly ? ids.yearly : ids.monthly;
+	};
+	const doCheckout = async (productId) => {
+		if (onCheckout) await onCheckout(productId);
+		else window.location.href = `${checkoutUrl}?products=${productId}`;
+	};
+	const doSwitchPlan = async (productId) => {
+		if (onSwitchPlan) return onSwitchPlan(productId);
+		return fetch(switchPlanUrl, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ productId })
+		});
+	};
+	const doPortalRedirect = async () => {
+		if (onPortalRedirect) await onPortalRedirect();
+		else window.location.href = portalUrl;
+	};
+	const handleSelectPlan = (plan) => {
+		if (isCurrentPlan(plan)) return;
+		if (!isLoggedIn && plan.monthlyPrice > 0) {
+			const productId = getProductIdForPlan(plan);
+			const checkoutPath = productId ? `${checkoutUrl}?products=${productId}` : window.location.pathname;
+			window.location.href = `${loginUrl}?redirect=${encodeURIComponent(checkoutPath)}`;
+			return;
+		}
+		setSelectedPlan(plan);
+		setConfirmDialogOpen(true);
+	};
+	const handleConfirmUpgrade = async () => {
+		if (!selectedPlan) {
+			setConfirmDialogOpen(false);
+			return;
+		}
+		onConfirmUpgrade?.(selectedPlan.id, billingPeriod);
+		onSelectPlan?.(selectedPlan.id, billingPeriod);
+		if (productIds) {
+			const productId = getProductIdForPlan(selectedPlan);
+			if (!productId) return;
+			if (isSubscribed) {
+				if (!hasPolarAccount) {
+					await doCheckout(productId);
+					return;
+				}
+				setSwitching(true);
+				try {
+					const res = await doSwitchPlan(productId);
+					if (res.ok) {
+						window.location.reload();
+						return;
+					}
+					if (res.status === 404) {
+						await doCheckout(productId);
+						return;
+					}
+					if (res.status === 409) {
+						await doPortalRedirect();
+						return;
+					}
+				} finally {
+					setSwitching(false);
+				}
+			} else {
+				await doCheckout(productId);
+				return;
+			}
+		}
+		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;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["pricing-page", className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__header",
+				children: [
+					/* @__PURE__ */ jsx("h1", {
+						className: "pricing-page__title",
+						children: title
+					}),
+					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, {
+								checked: useSwitchToggle,
+								onCheckedChange: (checked) => setUseSwitchToggle(!!checked),
+								id: "toggle-type",
+								"aria-label": "Use switch style"
+							}), /* @__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, {
+									checked: isYearly,
+									onCheckedChange: (checked) => setBillingPeriod(checked ? "yearly" : "monthly"),
+									"aria-label": "Toggle yearly billing",
+									children: /* @__PURE__ */ jsx(SwitchThumb, {})
+								}),
+								/* @__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, {
+							value: [billingPeriod],
+							onValueChange: (v) => v.length > 0 && setBillingPeriod(v[0]),
+							children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+								value: "monthly",
+								children: "Monthly"
+							}), /* @__PURE__ */ jsxs(ToggleGroupItem, {
+								value: "yearly",
+								children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
+									color: "success",
+									size: "sm",
+									style: { marginLeft: "0.375rem" },
+									children: [
+										"-",
+										yearlySavingsPercent,
+										"%"
+									]
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				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, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+										className: "pricing-page__feature-info",
+										"aria-label": `More information about ${feature.name}`,
+										children: /* @__PURE__ */ jsx(InfoIcon, {})
+									}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: feature.tooltip }) }) })] })
+								]
+							}, index))
+						})
+					]
+				}, 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, {
+						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(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), /* @__PURE__ */ jsx(SliderThumb, { "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, {
+									"aria-label": `Progress toward ${tier.label}`,
+									value: isActive ? 100 : tier.limit > 0 ? usage / tier.limit * 100 : 0,
+									color: isActive ? "success" : "primary",
+									children: /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+								})]
+							}, 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, {
+					className: "pricing-page__faq-accordion",
+					children: faq.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, {
+						value: `faq-${index}`,
+						children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: item.question }), /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsx("p", { children: item.answer }) })]
+					}, index))
+				})]
+			}),
+			/* @__PURE__ */ jsx(AlertDialog, {
+				open: confirmDialogOpen,
+				onOpenChange: setConfirmDialogOpen,
+				children: /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
+					/* @__PURE__ */ jsx(AlertDialogTitle, { children: isSubscribed && selectedPlan ? `${getSwitchDirection(selectedPlan) === "upgrade" ? "Upgrade" : getSwitchDirection(selectedPlan) === "downgrade" ? "Downgrade" : "Switch"} to ${selectedPlan.name}?` : `Subscribe to ${selectedPlan?.name}?` }),
+					/* @__PURE__ */ jsx(AlertDialogDescription, { 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(AlertDialogClose, {
+							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"
+						})]
+					})
+				] })] })
+			})
+		]
+	});
+}
+//#endregion
+export { PricingPage };

package/dist/components/Progress.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+
+//#region src/components/Progress.d.ts
+type ProgressColor = "primary" | "success" | "warning" | "destructive";
+interface ProgressProps extends Omit<React.ComponentPropsWithRef<typeof Progress$1.Root>, "className"> {
+  className?: string;
+  /**
+   * The semantic color of the progress bar.
+   * @default 'primary'
+   */
+  color?: ProgressColor;
+}
+interface ProgressTrackProps extends Omit<React.ComponentPropsWithRef<typeof Progress$1.Track>, "className"> {
+  className?: string;
+}
+interface ProgressIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Progress$1.Indicator>, "className"> {
+  className?: string;
+}
+/**
+ * A progress indicator component for showing completion status.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={60}>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ * </Progress>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
+ */
+declare function Progress({
+  color,
+  className,
+  children,
+  ref,
+  ...props
+}: ProgressProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ProgressTrack({
+  className,
+  ref,
+  ...props
+}: ProgressTrackProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ProgressIndicator({
+  className,
+  ref,
+  ...props
+}: ProgressIndicatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Progress, ProgressColor, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressTrack, ProgressTrackProps };

package/dist/components/Progress.js

@@ -0,0 +1,51 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/components/Progress.tsx
+/**
+* A progress indicator component for showing completion status.
+*
+* @example
+* ```tsx
+* <Progress value={60}>
+*   <ProgressTrack>
+*     <ProgressIndicator />
+*   </ProgressTrack>
+* </Progress>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
+*/
+function Progress({ color = "primary", className = "", children, ref, ...props }) {
+	const classes = [
+		"progress",
+		`progress--${color}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		ref,
+		"data-slot": "progress",
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+	});
+}
+function ProgressTrack({ className = "", ref, ...props }) {
+	const classes = ["progress__track", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+function ProgressIndicator({ className = "", ref, ...props }) {
+	const classes = ["progress__indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		ref,
+		"data-slot": "progress-indicator",
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Progress, ProgressIndicator, ProgressTrack };