@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/PreviewCard.js

@@ -0,0 +1,156 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
+//#region src/components/PreviewCard.tsx
+/**
+* Root component that manages preview card state.
+*
+* @example
+* ```tsx
+* <PreviewCard.Root>
+*   <PreviewCard.Trigger href="/profile">
+*     View Profile
+*   </PreviewCard.Trigger>
+*   <PreviewCard.Portal>
+*     <PreviewCard.Positioner>
+*       <PreviewCard.Popup>
+*         <img src="/avatar.jpg" alt="User avatar" />
+*         <h3>John Doe</h3>
+*         <p>Software Engineer</p>
+*       </PreviewCard.Popup>
+*     </PreviewCard.Positioner>
+*   </PreviewCard.Portal>
+* </PreviewCard.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
+*/
+const PreviewCardRoot = (props) => {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Root, { ...props });
+};
+/**
+* Link element that triggers the preview card on hover.
+*/
+function PreviewCardTrigger({ className = "", ref, ...props }) {
+	const classes = ["preview-card__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
+		ref,
+		"data-slot": "hover-card-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Renders preview card content in a portal.
+*/
+const PreviewCardPortal = (props) => {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
+		"data-slot": "hover-card-portal",
+		...props
+	});
+};
+/**
+* Optional backdrop behind the preview card.
+*/
+function PreviewCardBackdrop({ className = "", ref, ...props }) {
+	const classes = ["preview-card__backdrop", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Backdrop, {
+		ref,
+		"data-slot": "hover-card-backdrop",
+		className: classes,
+		...props
+	});
+}
+/**
+* Positions the preview card relative to the trigger.
+*/
+function PreviewCardPositioner({ className = "", ref, ...props }) {
+	const classes = ["preview-card__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
+		ref,
+		"data-slot": "hover-card-positioner",
+		className: classes,
+		...props
+	});
+}
+/**
+* Container for preview card content.
+*/
+function PreviewCardPopup({ className = "", ref, ...props }) {
+	const classes = ["preview-card__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
+		ref,
+		"data-slot": "hover-card-content",
+		className: classes,
+		...props
+	});
+}
+function PreviewCardContent({ anchor, positionMethod, side, sideOffset = 4, align = "center", alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCardPortal, { children: /* @__PURE__ */ jsx(PreviewCardPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(PreviewCardPopup, { ...props })
+	}) });
+}
+/**
+* Decorative arrow pointing to the trigger.
+*/
+function PreviewCardArrow({ className = "", ref, ...props }) {
+	const classes = ["preview-card__arrow", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
+		ref,
+		"data-slot": "hover-card-arrow",
+		className: classes,
+		...props
+	});
+}
+/**
+* A popup that appears when a link is hovered, showing a preview for sighted users.
+* Useful for showing user profiles, link previews, or additional context.
+*
+* @example
+* ```tsx
+* // Basic preview card
+* <PreviewCard.Root>
+*   <PreviewCard.Trigger href="/users/john">
+*     @johndoe
+*   </PreviewCard.Trigger>
+*   <PreviewCard.Portal>
+*     <PreviewCard.Positioner sideOffset={8}>
+*       <PreviewCard.Popup>
+*         <PreviewCard.Arrow />
+*         <div className="preview-content">
+*           <img src="/john-avatar.jpg" alt="" />
+*           <h4>John Doe</h4>
+*           <p>Software Engineer at Acme Corp</p>
+*         </div>
+*       </PreviewCard.Popup>
+*     </PreviewCard.Positioner>
+*   </PreviewCard.Portal>
+* </PreviewCard.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
+*/
+const PreviewCard = {
+	Root: PreviewCardRoot,
+	Trigger: PreviewCardTrigger,
+	Content: PreviewCardContent,
+	Portal: PreviewCardPortal,
+	Backdrop: PreviewCardBackdrop,
+	Positioner: PreviewCardPositioner,
+	Popup: PreviewCardPopup,
+	Arrow: PreviewCardArrow
+};
+//#endregion
+export { PreviewCard };

package/dist/components/PricingPage.d.ts

@@ -0,0 +1,209 @@
+import * as React from "react";
+
+//#region src/components/PricingPage.d.ts
+/**
+ * Plan feature definition
+ */
+interface PlanFeature {
+  name: string;
+  included: boolean;
+  tooltip?: string;
+  limit?: string;
+}
+/**
+ * Plan definition for the pricing page
+ */
+interface Plan {
+  id: string;
+  name: string;
+  description: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  features: PlanFeature[];
+  popular?: boolean;
+  cta?: string;
+}
+/**
+ * FAQ item definition
+ */
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+/**
+ * Usage tier for calculator
+ */
+interface UsageTier {
+  limit: number;
+  price: number;
+  label: string;
+}
+interface PricingPageProps {
+  /**
+   * The title of the pricing page
+   * @default 'Simple, transparent pricing'
+   */
+  title?: string;
+  /**
+   * The subtitle/description
+   */
+  subtitle?: string;
+  /**
+   * Array of plan definitions
+   */
+  plans: Plan[];
+  /**
+   * FAQ items to display
+   */
+  faq?: FAQItem[];
+  /**
+   * Whether to show the usage calculator
+   * @default false
+   */
+  showUsageCalculator?: boolean;
+  /**
+   * Usage tiers for the calculator
+   */
+  usageTiers?: UsageTier[];
+  /**
+   * Maximum usage value for the slider
+   * @default 100000
+   */
+  maxUsage?: number;
+  /**
+   * Usage unit label
+   * @default 'API calls'
+   */
+  usageUnit?: string;
+  /**
+   * Callback when a plan is selected
+   */
+  onSelectPlan?: (planId: string, billingPeriod: "monthly" | "yearly") => void;
+  /**
+   * Callback when upgrade is confirmed
+   */
+  onConfirmUpgrade?: (planId: string, billingPeriod: "monthly" | "yearly") => void;
+  /**
+   * Additional class name
+   */
+  className?: string;
+  /**
+   * Style variant for the billing period toggle.
+   * When set, hides the style switcher checkbox.
+   * @default undefined (shows style switcher for demos)
+   */
+  billingToggleVariant?: "switch" | "buttons";
+  /**
+   * Maps plan ID → Polar product IDs for checkout.
+   * When provided, clicking a plan triggers a checkout redirect.
+   */
+  productIds?: Record<string, {
+    monthly: string;
+    yearly: string;
+  }>;
+  /**
+   * The Polar product ID of the user's current plan, or null if not subscribed.
+   */
+  currentProductId?: string | null;
+  /**
+   * Whether the user has an active subscription.
+   */
+  isSubscribed?: boolean;
+  /**
+   * URL for the checkout API endpoint.
+   * @default '/api/checkout'
+   */
+  checkoutUrl?: string;
+  /**
+   * URL for the switch-plan API endpoint (used for existing subscribers).
+   * @default '/api/switch-plan'
+   */
+  switchPlanUrl?: string;
+  /**
+   * URL for the customer portal (used when subscription can't be updated inline).
+   * @default '/api/portal'
+   */
+  portalUrl?: string;
+  /**
+   * Whether the user is logged in. When false, clicking a paid plan
+   * redirects to the login page instead of checkout.
+   */
+  isLoggedIn?: boolean;
+  /**
+   * URL to redirect unauthenticated users to.
+   * @default '/auth/login'
+   */
+  loginUrl?: string;
+  /**
+   * Whether the user has a real Polar customer account (has been through checkout before).
+   * When true, plan changes go through the customer portal instead of fresh checkout.
+   * @default false
+   */
+  hasPolarAccount?: boolean;
+  /**
+   * Custom checkout handler. When provided, called instead of `window.location.href = checkoutUrl`.
+   * Should return the redirect URL or navigate directly.
+   */
+  onCheckout?: (productId: string) => Promise<void>;
+  /**
+   * Custom switch-plan handler. When provided, called instead of `fetch(switchPlanUrl)`.
+   * Should return the response status to determine next action.
+   */
+  onSwitchPlan?: (productId: string) => Promise<{
+    ok: boolean;
+    status: number;
+  }>;
+  /**
+   * Custom portal redirect handler. When provided, called instead of `window.location.href = portalUrl`.
+   */
+  onPortalRedirect?: () => Promise<void>;
+}
+/**
+ * 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)}
+ * />
+ * ```
+ */
+declare function PricingPage({
+  title,
+  subtitle,
+  plans,
+  faq,
+  showUsageCalculator,
+  usageTiers,
+  maxUsage,
+  usageUnit,
+  onSelectPlan,
+  onConfirmUpgrade,
+  className,
+  billingToggleVariant,
+  productIds,
+  currentProductId,
+  isSubscribed,
+  checkoutUrl,
+  switchPlanUrl,
+  portalUrl,
+  isLoggedIn,
+  loginUrl,
+  hasPolarAccount,
+  onCheckout,
+  onSwitchPlan,
+  onPortalRedirect
+}: PricingPageProps): React.JSX.Element;
+//#endregion
+export { FAQItem, Plan, PlanFeature, PricingPage, PricingPageProps, UsageTier };