"use client" /** * @name Pricing 05 * @description Grouped feature comparison table with expandable sections. * Categorized features organized by collapsible groups. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-card, pricing-plans, pricing-plan, * pricing-plan-name, pricing-plan-badge, pricing-plan-price, * pricing-plan-period, pricing-groups, pricing-group, pricing-group-header, * pricing-group-icon, pricing-group-name, pricing-features, pricing-feature, * pricing-feature-name, pricing-feature-value, pricing-feature-check, * pricing-feature-x, pricing-footer, pricing-cta * @variant comparison-grouped * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Check, X, ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface PlanConfig { /** Unique identifier for list key */ id: string /** Plan name */ name: string /** Plan price */ price: string /** Billing period */ period: string /** Whether this is the popular/recommended plan */ popular?: boolean } interface FeatureConfig { /** Unique identifier for list key */ id: string /** Feature name */ name: string /** Feature values per plan (boolean or string) */ values: Record } interface FeatureGroupConfig { /** Unique identifier for list key */ id: string /** Group name */ name: string /** Features in this group */ features: FeatureConfig[] } interface Pricing05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Plans to compare */ plans?: PlanConfig[] /** Feature groups */ featureGroups?: FeatureGroupConfig[] /** Callback when a plan is selected */ onSelect?: (planId: string) => void /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PLANS: PlanConfig[] = [ { id: "starter", name: "Starter", price: "$0", period: "/month" }, { id: "pro", name: "Pro", price: "$29", period: "/month", popular: true }, { id: "enterprise", name: "Enterprise", price: "Custom", period: "" }, ] const DEFAULT_FEATURE_GROUPS: FeatureGroupConfig[] = [ { id: "group-core", name: "Core Features", features: [ { id: "feat-projects", name: "Projects", values: { starter: "3", pro: "Unlimited", enterprise: "Unlimited" } }, { id: "feat-users", name: "Users", values: { starter: "1", pro: "10", enterprise: "Unlimited" } }, { id: "feat-storage", name: "Storage", values: { starter: "1GB", pro: "50GB", enterprise: "500GB" } }, ], }, { id: "group-collab", name: "Collaboration", features: [ { id: "feat-sharing", name: "Team sharing", values: { starter: false, pro: true, enterprise: true } }, { id: "feat-comments", name: "Comments", values: { starter: false, pro: true, enterprise: true } }, { id: "feat-realtime", name: "Real-time editing", values: { starter: false, pro: true, enterprise: true } }, ], }, { id: "group-security", name: "Security & Compliance", features: [ { id: "feat-sso", name: "SSO", values: { starter: false, pro: false, enterprise: true } }, { id: "feat-audit", name: "Audit logs", values: { starter: false, pro: true, enterprise: true } }, { id: "feat-hipaa", name: "HIPAA compliance", values: { starter: false, pro: false, enterprise: true } }, ], }, { id: "group-support", name: "Support", features: [ { id: "feat-email", name: "Email support", values: { starter: true, pro: true, enterprise: true } }, { id: "feat-priority", name: "Priority support", values: { starter: false, pro: true, enterprise: true } }, { id: "feat-manager", name: "Dedicated manager", values: { starter: false, pro: false, enterprise: true } }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Pricing05({ heading = "Compare All Features", description = "Find the perfect plan with our detailed feature comparison", plans = DEFAULT_PLANS, featureGroups = DEFAULT_FEATURE_GROUPS, onSelect, className, idBase, }: Pricing05Props) { const headingId = `${idBase ?? "pricing-05"}-heading` const [expandedGroups, setExpandedGroups] = React.useState( featureGroups.map((g) => g.id) ) const toggleGroup = (id: string) => { setExpandedGroups((prev) => prev.includes(id) ? prev.filter((n) => n !== id) : [...prev, id] ) } return (

{/* Header */}

{heading}

{description}

{/* Plan Headers */}

{plans.map((plan) => (

{plan.name} {plan.popular && ( Popular )}

{plan.price} {plan.period}

))}

{/* Feature Groups */}

{featureGroups.map((group) => { const isExpanded = expandedGroups.includes(group.id) return (

{/* Group Header */} {/* Features */} {isExpanded && (

{group.features.map((feature, index) => (

{feature.name}

{plans.map((plan) => { const value = feature.values[plan.id] return (

{typeof value === "boolean" ? ( value ? (

) })}

))}

)}

) })}

{/* Footer with CTAs */}

{plans.map((plan) => (

))}

) } export default Pricing05 export { Pricing05, type Pricing05Props, type PlanConfig, type FeatureConfig, type FeatureGroupConfig }