"use client" /** * @name Pricing 07 * @description Build your own plan calculator with customizable options. * Interactive configurator with toggles and quantity selectors. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-builder, pricing-options, pricing-option, * pricing-option-icon, pricing-option-header, pricing-option-name, * pricing-option-description, pricing-option-price, pricing-option-control, * pricing-option-switch, pricing-option-quantity, pricing-quantity-button, * pricing-quantity-value, pricing-summary, pricing-summary-card, * pricing-summary-header, pricing-summary-title, pricing-summary-items, * pricing-summary-item, pricing-summary-item-icon, pricing-summary-total, * pricing-cta, pricing-cta-primary, pricing-cta-secondary * @variant builder * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Layers, Cloud, Users, ShieldCheck, Headphones, Check, Minus, Plus, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface PricingOptionConfig { /** Unique identifier for list key */ id: string /** Option name */ name: string /** Option description */ description: string /** Icon component */ icon: LucideIcon /** Option type (toggle or quantity) */ type: "toggle" | "quantity" /** Base price for toggle options */ basePrice: number /** Price per unit for quantity options */ unitPrice?: number /** Unit label */ unit?: string /** Whether included by default (for toggle) */ included?: boolean /** Default quantity value */ defaultValue?: number /** Minimum quantity */ min?: number /** Maximum quantity */ max?: number } interface Pricing07Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Base plan price */ basePrice?: number /** Customizable options */ options?: PricingOptionConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_OPTIONS: PricingOptionConfig[] = [ { id: "opt-storage", name: "Additional Storage", description: "50GB blocks of extra storage", icon: Cloud, type: "quantity", basePrice: 0, unitPrice: 5, unit: "per 50GB", defaultValue: 0, min: 0, max: 20, }, { id: "opt-seats", name: "Team Seats", description: "Additional team member seats", icon: Users, type: "quantity", basePrice: 0, unitPrice: 10, unit: "per seat", defaultValue: 3, min: 1, max: 100, }, { id: "opt-api", name: "API Access", description: "Full API access with webhooks", icon: Layers, type: "toggle", basePrice: 25, included: false, }, { id: "opt-security", name: "Advanced Security", description: "SSO, audit logs, and compliance", icon: ShieldCheck, type: "toggle", basePrice: 50, included: false, }, { id: "opt-support", name: "Priority Support", description: "24/7 priority phone and chat", icon: Headphones, type: "toggle", basePrice: 75, included: false, }, ] // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface ToggleSwitchProps { checked: boolean onCheckedChange: (checked: boolean) => void } function ToggleSwitch({ checked, onCheckedChange }: ToggleSwitchProps) { return ( ) } // ============================================================================ // COMPONENT // ============================================================================ function Pricing07({ heading = "Build Your Plan", description = "Customize your subscription with only the features you need.", basePrice = 29, options = DEFAULT_OPTIONS, className, idBase, }: Pricing07Props) { const headingId = `${idBase ?? "pricing-07"}-heading` const [selectedOptions, setSelectedOptions] = React.useState>(() => { const initial: Record = {} options.forEach((opt) => { if (opt.type === "toggle") { initial[opt.id] = opt.included || false } else { initial[opt.id] = opt.defaultValue || 0 } }) return initial }) const toggleOption = (id: string) => { setSelectedOptions((prev) => ({ ...prev, [id]: !prev[id], })) } const updateQuantity = (id: string, delta: number) => { const option = options.find((o) => o.id === id) if (!option) return setSelectedOptions((prev) => { const current = (prev[id] as number) || 0 const newValue = Math.max( option.min || 0, Math.min(option.max || 100, current + delta) ) return { ...prev, [id]: newValue } }) } const calculateTotal = () => { let total = basePrice options.forEach((option) => { const value = selectedOptions[option.id] if (option.type === "toggle" && value) { total += option.basePrice } else if (option.type === "quantity" && typeof value === "number") { total += value * (option.unitPrice || 0) } }) return total } const getSelectedItems = () => { const items: { name: string; price: number }[] = [ { name: "Base plan", price: basePrice }, ] options.forEach((option) => { const value = selectedOptions[option.id] if (option.type === "toggle" && value) { items.push({ name: option.name, price: option.basePrice }) } else if (option.type === "quantity" && typeof value === "number" && value > 0) { items.push({ name: `${option.name} (${value} ${option.unit?.split(" ")[1] || "units"})`, price: value * (option.unitPrice || 0), }) } }) return items } const total = calculateTotal() const selectedItems = getSelectedItems() return (

{/* Header */}

{heading}

{description}

{/* Options */}

{options.map((option) => { const IconComponent = option.icon return (

{option.name}

{option.description}

{option.type === "toggle" ? ( +${option.basePrice}/mo ) : ( ${option.unitPrice} {option.unit} )}

{/* Control */}

{option.type === "toggle" ? ( toggleOption(option.id)} /> ) : (

{selectedOptions[option.id]}

)}

) })}

{/* Summary */}

Your Plan

{/* Items */}

${item.price}

Monthly total ${total}

Billed monthly. Cancel anytime.

{/* CTA */}

) } export default Pricing07 export { Pricing07, type Pricing07Props, type PricingOptionConfig }