@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/Message.js

@@ -1,286 +1,2 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-Ba9THQKz.js";
-import { Button } from "./Button.js";
-import { Tooltip } from "./Tooltip.js";
-import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { Streamdown } from "streamdown";
-//#region src/components/Message.tsx
-/**
-* A chat message row. Aligns and styles itself based on {@link from}.
-* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
-*
-* Compose with {@link MessageContent} for the bubble, {@link MessageActions}
-* for toolbar actions, and {@link MessageBranch} for multi-version responses.
-*
-* @example
-* ```tsx
-* <Message from="assistant">
-*   <MessageContent>Hello there!</MessageContent>
-*   <MessageActions>
-*     <MessageAction label="Copy" tooltip="Copy to clipboard">
-*       <CopyIcon />
-*     </MessageAction>
-*   </MessageActions>
-* </Message>
-* ```
-*
-* @see {@link https://elements.ai-sdk.dev/components/message | AI Elements Message}
-*/
-function Message({ className, from = "assistant", children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message", className),
-		"data-from": from,
-		...props,
-		children
-	});
-}
-/**
-* The visible bubble/body of a message. Styled differently based on the
-* parent {@link Message}'s `from` attribute.
-*/
-function MessageContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message__content", className),
-		...props,
-		children
-	});
-}
-const streamdownPlugins = {
-	cjk,
-	code,
-	math,
-	mermaid
-};
-const messageResponseComponents = { img: "img" };
-const MessageResponse = React.memo(function MessageResponse({ className, components, ...props }) {
-	const mergedComponents = components ? {
-		...messageResponseComponents,
-		...components
-	} : messageResponseComponents;
-	return /* @__PURE__ */ jsx(Streamdown, {
-		className: cx("message__response", className),
-		components: mergedComponents,
-		plugins: streamdownPlugins,
-		...props
-	});
-});
-/**
-* A `file` part inside a message: images render inline (click to zoom),
-* anything else becomes a download chip. Covers both directions — files the
-* user attached and files the agent emitted.
-*/
-function MessageAttachment({ part, className, ...props }) {
-	const name = part.filename ?? (part.mediaType || "attachment");
-	if (part.mediaType.startsWith("image/")) return /* @__PURE__ */ jsx(AttachmentPreview, {
-		url: part.url,
-		filename: part.filename,
-		children: /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			color: "neutral",
-			className: cx("message__attachment-zoom", className),
-			"aria-label": `Preview ${name}`,
-			...props,
-			children: /* @__PURE__ */ jsx("img", {
-				className: "message__attachment-image",
-				src: part.url,
-				alt: part.filename ?? "Attached image"
-			})
-		})
-	});
-	return /* @__PURE__ */ jsxs("a", {
-		className: cx("message__attachment", className),
-		href: part.url,
-		download: part.filename,
-		...props,
-		children: [/* @__PURE__ */ jsx(FileIcon, { className: "message__attachment-icon" }), /* @__PURE__ */ jsx("span", {
-			className: "message__attachment-name",
-			children: name
-		})]
-	});
-}
-/**
-* Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
-* alongside or beneath a message.
-*/
-function MessageActions({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message__actions", className),
-		role: "group",
-		...props,
-		children
-	});
-}
-/**
-* A single icon button inside {@link MessageActions}. Always has an accessible
-* name; shows a tooltip on hover/focus when {@link tooltip} is set.
-*/
-function MessageAction({ className, label, tooltip, variant = "ghost", color = "neutral", size = "icon-xs", children, ref, ...props }) {
-	const button = /* @__PURE__ */ jsx(Button, {
-		ref,
-		type: "button",
-		variant,
-		color,
-		size,
-		className: cx("message__action", className),
-		"aria-label": label ?? tooltip,
-		...props,
-		children
-	});
-	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: button }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip })
-	}) })] });
-}
-/**
-* Horizontal container that places children in a row with space between —
-* typically a {@link MessageBranchSelector} on one side and
-* {@link MessageActions} on the other.
-*/
-function MessageToolbar({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message__toolbar", className),
-		...props,
-		children
-	});
-}
-const MessageBranchContext = React.createContext(null);
-function useMessageBranch(component) {
-	const ctx = React.useContext(MessageBranchContext);
-	if (!ctx) throw new Error(`${component} must be used inside a <MessageBranch>.`);
-	return ctx;
-}
-/**
-* Container for a message response with multiple versions. Tracks which
-* branch is active and exposes navigation through {@link MessageBranchSelector},
-* {@link MessageBranchPrevious}, {@link MessageBranchNext}, and {@link MessageBranchPage}.
-*/
-function MessageBranch({ className, defaultBranch = 0, branch, onBranchChange, children, ref, ...props }) {
-	const [internalIndex, setInternalIndex] = React.useState(defaultBranch);
-	const [branchCount, setBranchCount] = React.useState(0);
-	const isControlled = branch !== void 0;
-	const branchIndex = isControlled ? branch : internalIndex;
-	const setBranchIndex = React.useCallback((next) => {
-		if (!isControlled) setInternalIndex(next);
-		onBranchChange?.(next);
-	}, [isControlled, onBranchChange]);
-	const ctx = React.useMemo(() => ({
-		branchIndex,
-		branchCount,
-		setBranchIndex,
-		registerCount: setBranchCount
-	}), [
-		branchCount,
-		branchIndex,
-		setBranchIndex
-	]);
-	return /* @__PURE__ */ jsx(MessageBranchContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("message__branch", className),
-			...props,
-			children
-		})
-	});
-}
-/**
-* Renders only the active branch's child. Expects siblings to represent
-* alternative versions of the same response.
-*/
-function MessageBranchContent({ className, children, ref, ...props }) {
-	const { branchIndex, registerCount } = useMessageBranch("MessageBranchContent");
-	const items = React.Children.toArray(children);
-	React.useEffect(() => {
-		registerCount(items.length);
-	}, [items.length, registerCount]);
-	const safeIndex = items.length === 0 ? 0 : Math.min(Math.max(branchIndex, 0), items.length - 1);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message__branch-content", className),
-		...props,
-		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
-			className: "message__branch-panel",
-			hidden: index !== safeIndex,
-			children: item
-		}, React.isValidElement(item) && item.key != null ? item.key : index))
-	});
-}
-/**
-* Inline group containing branch navigation controls (previous / page /
-* next). Hidden automatically when there is only one branch.
-*/
-function MessageBranchSelector({ className, children, ref, ...props }) {
-	const { branchCount } = useMessageBranch("MessageBranchSelector");
-	if (branchCount <= 1) return null;
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("message__branch-selector", className),
-		...props,
-		children
-	});
-}
-/** Button that selects the previous branch. Disabled at the first branch. */
-function MessageBranchPrevious({ className, label = "Previous response", variant = "ghost", color = "neutral", size = "icon-xs", children, onClick, ref, ...props }) {
-	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchPrevious");
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		type: "button",
-		variant,
-		color,
-		size,
-		disabled: branchCount <= 1,
-		className: cx("message__branch-prev", className),
-		"aria-label": label,
-		onClick: (event) => {
-			onClick?.(event);
-			if (!event.defaultPrevented) setBranchIndex(branchIndex > 0 ? branchIndex - 1 : branchCount - 1);
-		},
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-	});
-}
-/** Button that selects the next branch. Disabled at the last branch. */
-function MessageBranchNext({ className, label = "Next response", variant = "ghost", color = "neutral", size = "icon-xs", children, onClick, ref, ...props }) {
-	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchNext");
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		type: "button",
-		variant,
-		color,
-		size,
-		disabled: branchCount <= 1,
-		className: cx("message__branch-next", className),
-		"aria-label": label,
-		onClick: (event) => {
-			onClick?.(event);
-			if (!event.defaultPrevented) setBranchIndex(branchIndex < branchCount - 1 ? branchIndex + 1 : 0);
-		},
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
-	});
-}
-/** Page indicator (e.g. "1 / 3") for the current branch selection. */
-function MessageBranchPage({ className, format, ref, ...props }) {
-	const { branchIndex, branchCount } = useMessageBranch("MessageBranchPage");
-	const label = format ? format(branchIndex + 1, branchCount) : `${branchIndex + 1} / ${branchCount}`;
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("message__branch-page", className),
-		"aria-live": "polite",
-		...props,
-		children: label
-	});
-}
-//#endregion
+import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-BkMdE3bS.js";
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/MessageScroller.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { t as ArrowDownIcon } from "../icons-Ba9THQKz.js";
+import { t as ArrowDownIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ModelSelector.d.ts

@@ -5,7 +5,19 @@ import Cloudflare from "cloudflare";
 import { AiModelsSearchObject } from "@cloudflare/workers-types";
 
 //#region src/components/ModelSelector.d.ts
-type CloudflareModelSelectorModels = readonly Cloudflare.AI.ModelListResponse[] | readonly AiModelsSearchObject[] | readonly string[];
+type CloudflareModelSelectorModels = readonly Cloudflare.AI.ModelListResponse[] | readonly CloudflareModelCatalogEntry[] | readonly AiModelsSearchObject[] | readonly string[];
+interface CloudflareModelCatalogEntry {
+  readonly model_id: string;
+  readonly name?: string;
+  readonly description?: string;
+  readonly task?: string;
+  readonly private?: boolean;
+}
+interface CloudflareModelCatalogListParams {
+  readonly account_id: string;
+  readonly task?: string;
+  readonly per_page?: number;
+}
 interface CloudflareModelSelectorOption {
   readonly id: string;
   readonly provider: string;
@@ -36,7 +48,7 @@ declare function readCloudflareModelId(entry: unknown): string | null;
 declare function getCloudflareModelProvider(modelId: string): string;
 declare function formatCloudflareModelProvider(provider: string): string;
 declare function normalizeCloudflareModelSelectorModels(models: CloudflareModelSelectorModels): CloudflareModelSelectorOption[];
-declare function listCloudflareModelSelectorOptions(client: Cloudflare, params: Cloudflare.AI.ModelListParams): Promise<CloudflareModelSelectorOption[]>;
+declare function listCloudflareModelSelectorOptions(client: Cloudflare, params: CloudflareModelCatalogListParams): Promise<CloudflareModelSelectorOption[]>;
 interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Controlled dialog open state. */
   open?: boolean;
@@ -244,4 +256,4 @@ declare function ModelSelectorShortcut({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
+export { CloudflareModelCatalogEntry, CloudflareModelCatalogListParams, CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-DVgVBdvw.js";
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-SlJNgwKY.js";
 export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/NaniteScene.d.ts

@@ -6,6 +6,15 @@ type NaniteSceneProps = {
   readonly className?: string; /** Accessible title when the illustration communicates state. */
   readonly title?: string;
 };
+type NaniteMarkProps = {
+  /** Selects one of the established Nanite body colors. */readonly index?: number; /** Additional class names for layout only. */
+  readonly className?: string;
+};
+/** Compact decorative Nanite identity mark for dense agent and task UI. */
+declare function NaniteMark({
+  index,
+  className
+}: NaniteMarkProps): import("react").JSX.Element;
 /**
  * Decorative Nanites illustration used in setup, status, and empty states.
  * Pass a title when the illustration communicates state; otherwise it remains
@@ -30,4 +39,4 @@ declare function NaniteScene({
   title
 }: NaniteSceneProps): import("react").JSX.Element;
 //#endregion
-export { NaniteScene, NaniteSceneProps, NaniteSceneVariant };
+export { NaniteMark, NaniteMarkProps, NaniteScene, NaniteSceneProps, NaniteSceneVariant };

package/dist/components/NaniteScene.js

@@ -22,6 +22,41 @@ const TRIO_XS = [
 	100,
 	160
 ];
+/** Compact decorative Nanite identity mark for dense agent and task UI. */
+function NaniteMark({ index = 0, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: ["nanite-mark", className].filter(Boolean).join(" "),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "-18 -34 36 54",
+			focusable: "false",
+			fill: "none",
+			children: [/* @__PURE__ */ jsx(NaniteBody, { index }), /* @__PURE__ */ jsxs("g", {
+				className: "nanite-mark__hat",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						d: "M -9 -22 Q -9 -31 0 -31 Q 9 -31 9 -22 Z",
+						fill: HAT_SHELL
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "-12",
+						y: "-23",
+						width: "24",
+						height: "3.5",
+						rx: "1.5",
+						fill: HAT_BRIM
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "0",
+						cy: "-28",
+						r: "2",
+						fill: HAT_BULB
+					})
+				]
+			})]
+		})
+	});
+}
 /**
 * Decorative Nanites illustration used in setup, status, and empty states.
 * Pass a title when the illustration communicates state; otherwise it remains
@@ -402,4 +437,4 @@ function Nanite({ index, cx, cy, scale }) {
 	});
 }
 //#endregion
-export { NaniteScene };
+export { NaniteMark, NaniteScene };

package/dist/components/Pricing.d.ts

@@ -0,0 +1,37 @@
+//#region src/components/Pricing.d.ts
+type PricingBillingPeriod = "monthly" | "yearly";
+/** A feature presented within a pricing plan. */
+interface PlanFeature {
+  name: string;
+  included: boolean;
+  tooltip?: string;
+  limit?: string;
+}
+/** A purchasable plan presented by the pricing surfaces. */
+interface Plan {
+  id: string;
+  name: string;
+  description: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  features: PlanFeature[];
+  popular?: boolean;
+  cta?: string;
+}
+/** A question and answer presented by PricingFAQ. */
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+/** A threshold and monthly price presented by PricingUsageCalculator. */
+interface UsageTier {
+  limit: number;
+  price: number;
+  label: string;
+}
+declare function getPlanPrice(plan: Plan, billingPeriod: PricingBillingPeriod): number;
+declare function getPlanYearlySavings(plan: Plan): number;
+declare function formatPricingUsage(value: number): string;
+declare function getUsagePrice(usageTiers: readonly UsageTier[], usage: number): number;
+//#endregion
+export { FAQItem, Plan, PlanFeature, PricingBillingPeriod, UsageTier, formatPricingUsage, getPlanPrice, getPlanYearlySavings, getUsagePrice };

package/dist/components/Pricing.js

@@ -0,0 +1,17 @@
+//#region src/components/Pricing.ts
+function getPlanPrice(plan, billingPeriod) {
+	return billingPeriod === "yearly" ? plan.yearlyPrice : plan.monthlyPrice;
+}
+function getPlanYearlySavings(plan) {
+	return (plan.monthlyPrice - plan.yearlyPrice) * 12;
+}
+function formatPricingUsage(value) {
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(0)}K`;
+	return value.toString();
+}
+function getUsagePrice(usageTiers, usage) {
+	return usageTiers.findLast((tier) => usage >= tier.limit)?.price ?? usageTiers[0]?.price ?? 0;
+}
+//#endregion
+export { formatPricingUsage, getPlanPrice, getPlanYearlySavings, getUsagePrice };

package/dist/components/PricingBillingToggle.d.ts

@@ -0,0 +1,23 @@
+import { PricingBillingPeriod } from "./Pricing.js";
+import * as React from "react";
+
+//#region src/components/PricingBillingToggle.d.ts
+interface PricingBillingToggleProps {
+  value: PricingBillingPeriod;
+  onValueChange: (value: PricingBillingPeriod) => void;
+  yearlySavingsPercent: number;
+  /** Fixes the presentation. Omit only in component demos that expose the style switcher. */
+  variant?: "switch" | "buttons";
+  /** Additional class name for placement in a consuming layout. */
+  className?: string;
+}
+/** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */
+declare function PricingBillingToggle({
+  value,
+  onValueChange,
+  yearlySavingsPercent,
+  variant,
+  className
+}: PricingBillingToggleProps): React.JSX.Element;
+//#endregion
+export { PricingBillingToggle, PricingBillingToggleProps };

package/dist/components/PricingBillingToggle.js

@@ -0,0 +1,86 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Badge } from "./Badge.js";
+import { Checkbox } from "./Checkbox.js";
+import { Switch } from "./Switch.js";
+import { Label } from "./Label.js";
+import { ToggleGroup } from "./ToggleGroup.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PricingBillingToggle.tsx
+/** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */
+function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, variant, className }) {
+	const [demoVariant, setDemoVariant] = React.useState("switch");
+	const demoToggleId = React.useId();
+	const resolvedVariant = variant ?? demoVariant;
+	const isYearly = value === "yearly";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("pricing-page__billing-toggle", className),
+		children: [!variant ? /* @__PURE__ */ jsxs("div", {
+			className: "pricing-page__toggle-options",
+			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+				checked: demoVariant === "switch",
+				onCheckedChange: (checked) => setDemoVariant(checked ? "switch" : "buttons"),
+				id: demoToggleId,
+				children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+			}), /* @__PURE__ */ jsx(Label, {
+				htmlFor: demoToggleId,
+				className: "pricing-page__toggle-label",
+				children: "Use switch style"
+			})]
+		}) : null, resolvedVariant === "switch" ? /* @__PURE__ */ jsxs("div", {
+			className: "pricing-page__switch-container",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "pricing-page__period-label",
+					"data-active": !isYearly || void 0,
+					children: "Monthly"
+				}),
+				/* @__PURE__ */ jsx(Switch.Root, {
+					checked: isYearly,
+					onCheckedChange: (checked) => onValueChange(checked ? "yearly" : "monthly"),
+					"aria-label": "Toggle yearly billing",
+					children: /* @__PURE__ */ jsx(Switch.Thumb, {})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "pricing-page__period-label",
+					"data-active": isYearly || void 0,
+					children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
+						color: "success",
+						size: "sm",
+						className: "pricing-page__billing-badge",
+						children: [
+							"Save ",
+							yearlySavingsPercent,
+							"%"
+						]
+					})]
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(ToggleGroup.Root, {
+			"aria-label": "Billing period",
+			value: [value],
+			onValueChange: (nextValue) => {
+				const nextPeriod = nextValue[0];
+				if (nextPeriod === "monthly" || nextPeriod === "yearly") onValueChange(nextPeriod);
+			},
+			children: [/* @__PURE__ */ jsx(ToggleGroup.Item, {
+				value: "monthly",
+				children: "Monthly"
+			}), /* @__PURE__ */ jsxs(ToggleGroup.Item, {
+				value: "yearly",
+				children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
+					color: "success",
+					size: "sm",
+					className: "pricing-page__billing-badge",
+					children: [
+						"-",
+						yearlySavingsPercent,
+						"%"
+					]
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { PricingBillingToggle };

package/dist/components/PricingConfirmationDialog.d.ts

@@ -0,0 +1,25 @@
+import { Plan, PricingBillingPeriod } from "./Pricing.js";
+import { PricingPlanAction } from "./PricingPlanCard.js";
+
+//#region src/components/PricingConfirmationDialog.d.ts
+interface PricingConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  plan: Plan | null;
+  billingPeriod: PricingBillingPeriod;
+  action?: Exclude<PricingPlanAction, "current" | "select">;
+  switching?: boolean;
+  onConfirm: () => void | Promise<void>;
+}
+/** Confirmation surface for subscribing to or changing a pricing plan. */
+declare function PricingConfirmationDialog({
+  open,
+  onOpenChange,
+  plan,
+  billingPeriod,
+  action,
+  switching,
+  onConfirm
+}: PricingConfirmationDialogProps): import("react").JSX.Element;
+//#endregion
+export { PricingConfirmationDialog, PricingConfirmationDialogProps };

package/dist/components/PricingConfirmationDialog.js

@@ -0,0 +1,57 @@
+import { Button } from "./Button.js";
+import { AlertDialog } from "./AlertDialog.js";
+import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PricingConfirmationDialog.tsx
+function getActionLabel(action) {
+	if (action === "downgrade") return "Downgrade";
+	if (action === "switch") return "Switch";
+	return "Upgrade";
+}
+/** Confirmation surface for subscribing to or changing a pricing plan. */
+function PricingConfirmationDialog({ open, onOpenChange, plan, billingPeriod, action, switching = false, onConfirm }) {
+	const isYearly = billingPeriod === "yearly";
+	const actionLabel = getActionLabel(action);
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		onOpenChange,
+		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: action && plan ? `${actionLabel} to ${plan.name}?` : `Subscribe to ${plan?.name}?` }),
+			/* @__PURE__ */ jsx(AlertDialog.Description, { children: action && plan ? action === "downgrade" ? `You'll be downgraded to the ${plan.name} plan. A prorated credit will be applied to your next invoice.` : `You'll be upgraded to the ${plan.name} plan. The prorated difference will be added to your next invoice.` : `You're about to subscribe to the ${plan?.name} plan at $${plan ? getPlanPrice(plan, billingPeriod) : 0}/month${isYearly ? " (billed yearly)" : ""}.` }),
+			plan ? /* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__confirm-summary",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pricing-page__confirm-row",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						plan.name,
+						" Plan (",
+						isYearly ? "Yearly" : "Monthly",
+						")"
+					] }), /* @__PURE__ */ jsxs("span", { children: [
+						"$",
+						getPlanPrice(plan, billingPeriod),
+						"/mo"
+					] })]
+				}), isYearly ? /* @__PURE__ */ jsxs("div", {
+					className: "pricing-page__confirm-row",
+					"data-savings": true,
+					children: [/* @__PURE__ */ jsx("span", { children: "Annual savings" }), /* @__PURE__ */ jsxs("span", { children: ["-$", getPlanYearlySavings(plan)] })]
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "pricing-page__confirm-actions",
+				children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+					disabled: switching,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					color: "primary",
+					onClick: onConfirm,
+					disabled: switching,
+					children: switching ? "Switching…" : action ? `Confirm ${actionLabel}` : "Confirm"
+				})]
+			})
+		] }) })] })
+	});
+}
+//#endregion
+export { PricingConfirmationDialog };