// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Pricing 03 * @description A pricing section with monthly/annual toggle. * Shows savings badge and animated price updates. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-toggle, pricing-grid, pricing-card, * pricing-badge, pricing-plan-name, pricing-price, pricing-features, * pricing-cta * @variant toggle * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface PricingFeature { /** Unique identifier for list key */ id: string /** Feature text */ text: string } interface PricingTier { /** Unique identifier for list key */ id: string /** Tier name */ name: string /** Monthly price */ monthlyPrice: number /** Annual price (per month when billed annually) */ annualPrice: number /** Description */ description: string /** Features list */ features: PricingFeature[] /** CTA text */ cta: string /** CTA link */ href?: string /** Is this the highlighted tier? */ highlighted?: boolean /** Highlight badge text */ badge?: string } interface Pricing03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Pricing tiers */ tiers?: PricingTier[] /** Annual discount percentage (for display) */ annualDiscount?: number /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTiers: PricingTier[] = [ { id: "free", name: "Free", monthlyPrice: 0, annualPrice: 0, description: "Get started with the basics at no cost.", features: [ { id: "projects", text: "1 project" }, { id: "analytics", text: "Basic analytics" }, { id: "support", text: "Community support" }, ], cta: "Get Started", href: "#", }, { id: "starter", name: "Starter", monthlyPrice: 19, annualPrice: 15, description: "Perfect for individuals and small projects.", features: [ { id: "projects", text: "Up to 5 projects" }, { id: "analytics", text: "Basic analytics" }, { id: "support", text: "24/7 email support" }, { id: "api", text: "API access" }, ], cta: "Start Free Trial", href: "#", }, { id: "pro", name: "Pro", monthlyPrice: 49, annualPrice: 39, description: "For growing teams with advanced needs.", features: [ { id: "projects", text: "Unlimited projects" }, { id: "analytics", text: "Advanced analytics" }, { id: "support", text: "Priority support" }, { id: "integrations", text: "Custom integrations" }, { id: "collaboration", text: "Team collaboration" }, ], cta: "Start Free Trial", href: "#", highlighted: true, badge: "Most Popular", }, { id: "enterprise", name: "Enterprise", monthlyPrice: 99, annualPrice: 79, description: "For large organizations with custom requirements.", features: [ { id: "pro", text: "Everything in Pro" }, { id: "manager", text: "Dedicated account manager" }, { id: "contracts", text: "Custom contracts" }, { id: "sla", text: "SLA guarantee" }, { id: "sso", text: "SSO & SAML" }, ], cta: "Contact Sales", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Pricing03({ heading = "Simple, transparent pricing", description = "Choose the plan that works best for you. All plans include a 14-day free trial.", tiers = defaultTiers, annualDiscount = 20, className, idBase, }: Pricing03Props) { const [billingPeriod, setBillingPeriod] = React.useState<"monthly" | "annual">( "monthly" ) const headingId = `${idBase ?? "pricing-03"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Billing Toggle */}

Monthly Annual {annualDiscount > 0 && ( Save {annualDiscount}% )}

{/* Pricing Tiers */}

{tiers.map((tier) => { const price = billingPeriod === "monthly" ? tier.monthlyPrice : tier.annualPrice return (

{/* Badge */} {tier.badge && tier.highlighted && ( {tier.badge} )} {/* Tier Info */}

{tier.name}

{price === 0 ? ( Free ) : ( <> ${price} /month )}

{billingPeriod === "annual" && price > 0 && (

Billed annually (${price * 12}/year)

)}

{tier.description}

{/* Features */}

{/* CTA */}

{tier.cta}

) })}

) } export default Pricing03 export { Pricing03, type Pricing03Props, type PricingTier, type PricingFeature }