"use client" /** * @name Pricing 06 * @description Per-seat pricing calculator with volume discounts. * Interactive slider to calculate team pricing based on seat count. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-calculator, pricing-calculator-header, * pricing-calculator-title, pricing-calculator-icon, pricing-slider-section, * pricing-slider-label, pricing-slider, pricing-slider-marks, pricing-result, * pricing-result-price, pricing-result-breakdown, pricing-discounts, * pricing-discount-item, pricing-features, pricing-feature, pricing-feature-icon, * pricing-cta, pricing-cta-primary, pricing-cta-secondary * @variant calculator * * @registryDependencies button * @dependencies lucide-react */ import * as React from "react" import { Users, Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface PricingTierConfig { /** Unique identifier for list key */ id: string /** Minimum number of seats for this tier */ minSeats: number /** Maximum number of seats for this tier */ maxSeats: number /** Price per seat in this tier */ pricePerSeat: number } interface Pricing06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Pricing tiers with volume discounts */ tiers?: PricingTierConfig[] /** Features included in all plans */ features?: string[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_TIERS: PricingTierConfig[] = [ { id: "tier-1", minSeats: 1, maxSeats: 10, pricePerSeat: 15 }, { id: "tier-2", minSeats: 11, maxSeats: 50, pricePerSeat: 12 }, { id: "tier-3", minSeats: 51, maxSeats: 100, pricePerSeat: 10 }, { id: "tier-4", minSeats: 101, maxSeats: 500, pricePerSeat: 8 }, ] const DEFAULT_FEATURES = [ "All core features included", "Unlimited projects", "Priority support", "API access", "Custom integrations", ] // ============================================================================ // COMPONENT // ============================================================================ function Pricing06({ heading = "Team Pricing", description = "Pay only for the seats you need. Volume discounts included.", tiers = DEFAULT_TIERS, features = DEFAULT_FEATURES, className, idBase, }: Pricing06Props) { const headingId = `${idBase ?? "pricing-06"}-heading` const [seats, setSeats] = React.useState(25) const currentTier = tiers.find( (t) => seats >= t.minSeats && seats <= t.maxSeats ) || tiers[tiers.length - 1] const monthlyTotal = seats * currentTier.pricePerSeat const yearlyTotal = monthlyTotal * 12 * 0.8 // 20% annual discount return (

{/* Header */}

{heading}

{description}

{/* Slider */}

Team size {seats} seats

setSeats(Number(e.target.value))} min={1} max={500} step={1} className="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted accent-foreground [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-foreground [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-foreground" /> {/* Tier marks */}

1 10 50 100 500+

{/* Price Result */}

${monthlyTotal} /month

${currentTier.pricePerSeat}/seat × {seats} seats

${Math.round(yearlyTotal / 12)}/month when billed yearly (save 20%)

{/* Volume Discount Info */}

Volume discounts:

{tiers.map((tier) => (

{tier.minSeats}-{tier.maxSeats === 500 ? "500+" : tier.maxSeats} seats ${tier.pricePerSeat}/seat

))}

{/* Features */}

Included in all plans:

{/* CTA */}

) } export default Pricing06 export { Pricing06, type Pricing06Props, type PricingTierConfig }

{heading}

How many team members?