{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-tier-comparison-matrix",
  "title": "Pricing Tier Comparison Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-tier-comparison-matrix/PricingTierComparisonMatrix.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Check, Minus, ShieldCheck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ntype BillingCycle = 'monthly' | 'annual'\n\nconst billing = ref<BillingCycle>('annual')\n\ninterface Plan {\n  id: string\n  name: string\n  description: string\n  monthlyPrice: number\n  annualPrice: number\n  highlight: boolean\n  badge?: string\n  ctaText: string\n  ctaVariant: 'default' | 'outline' | 'secondary'\n}\n\nconst plans: Plan[] = [\n  {\n    id: 'community',\n    name: 'Community OSS',\n    description: 'For indie hackers and developers building open source products.',\n    monthlyPrice: 0,\n    annualPrice: 0,\n    highlight: false,\n    ctaText: 'Start Building Free',\n    ctaVariant: 'outline',\n  },\n  {\n    id: 'pro',\n    name: 'Pro Team',\n    description: 'For growing startup engineering teams that require high velocity.',\n    monthlyPrice: 29,\n    annualPrice: 24,\n    highlight: true,\n    badge: 'Most Popular',\n    ctaText: 'Claim Pro License',\n    ctaVariant: 'default',\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise Scale',\n    description: 'Dedicated registry syncing, SSO, SOC2 compliance audits, and SLA.',\n    monthlyPrice: 119,\n    annualPrice: 99,\n    highlight: false,\n    ctaText: 'Talk to Sales',\n    ctaVariant: 'outline',\n  },\n]\n\ninterface FeatureComparisonRow {\n  category: string\n  features: {\n    name: string\n    tooltip: string\n    community: boolean | string\n    pro: boolean | string\n    enterprise: boolean | string\n  }[]\n}\n\nconst comparisonData: FeatureComparisonRow[] = [\n  {\n    category: 'Registry & Core Primitives',\n    features: [\n      {\n        name: 'Full AST Component Source Access',\n        tooltip: 'Raw SFC and TSX source files copied directly into your repository.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Dual-Framework Parity (Vue + React)',\n        tooltip: 'Identical DOM semantics and CVA tokens across both ecosystems.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n      {\n        name: 'Curated Marketing & SaaS Blocks',\n        tooltip: 'Access to 450+ production-grade unbundled layout blocks.',\n        community: '100+ Blocks',\n        pro: 'All 450+ Blocks',\n        enterprise: 'All Blocks + Custom',\n      },\n      {\n        name: 'Tailwind CSS v4 OKLCH Token System',\n        tooltip: 'Hardware-calibrated color spaces and spring curves.',\n        community: true,\n        pro: true,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: 'Enterprise & Security Compliance',\n    features: [\n      {\n        name: 'Private Registry Mirroring',\n        tooltip: 'Host your organization’s customized internal registry behind a firewall.',\n        community: false,\n        pro: '1 Private Repo',\n        enterprise: 'Unlimited Private Hubs',\n      },\n      {\n        name: 'SOC2 & ISO 27001 Audit Packs',\n        tooltip: 'Pre-certified security documentation and architecture proofs.',\n        community: false,\n        pro: false,\n        enterprise: true,\n      },\n      {\n        name: 'Guaranteed 99.99% Registry CDN SLA',\n        tooltip: 'Global multi-region edge distribution uptime guarantee.',\n        community: false,\n        pro: '99.9% SLA',\n        enterprise: '99.99% High Availability',\n      },\n      {\n        name: 'Dedicated Design Engineering Support',\n        tooltip: 'Direct Slack / Discord channel with core design system maintainers.',\n        community: false,\n        pro: 'Priority Email',\n        enterprise: 'Dedicated Slack Channel',\n      },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section\n    data-slot=\"pricing-tier-comparison-matrix\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-7xl space-y-16\">\n      <!-- Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <ShieldCheck class=\"text-primary size-3.5\" />\n          Predictable Pricing\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Zero seat taxes. Own your source code forever.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Choose the tier that fits your engineering team's delivery scale and compliance needs.\n        </p>\n\n        <!-- Billing Toggle -->\n        <div class=\"flex items-center justify-center gap-3 pt-4\">\n          <span\n            class=\"font-mono text-xs\"\n            :class=\"billing === 'monthly' ? 'text-foreground font-bold' : 'text-muted-foreground'\"\n          >\n            Monthly\n          </span>\n          <div class=\"border-border bg-card relative flex items-center rounded-full border p-1\">\n            <button\n              type=\"button\"\n              class=\"relative z-10 rounded-full px-3 py-1 font-mono text-xs transition-colors\"\n              :class=\"\n                billing === 'monthly'\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground'\n              \"\n              @click=\"billing = 'monthly'\"\n            >\n              Monthly\n            </button>\n            <button\n              type=\"button\"\n              class=\"relative z-10 flex items-center gap-1.5 rounded-full px-3 py-1 font-mono text-xs transition-colors\"\n              :class=\"\n                billing === 'annual'\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground'\n              \"\n              @click=\"billing = 'annual'\"\n            >\n              <span>Annual</span>\n              <span class=\"bg-success rounded-full px-1.5 py-0.5 text-xs font-bold text-white\">Save 20%</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Pricing Plan Cards Grid (3 Columns) -->\n      <div class=\"grid grid-cols-1 items-stretch gap-6 md:grid-cols-3\">\n        <Card\n          v-for=\"plan in plans\"\n          :key=\"plan.id\"\n          class=\"border-border bg-card relative flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl transition-colors sm:p-8\"\n          :class=\"\n            plan.highlight\n              ? 'border-primary/80 ring-primary/20 scale-[1.02] shadow-sm ring-2'\n              : 'hover:border-border/80'\n          \"\n        >\n          <!-- Top Badge -->\n          <div v-if=\"plan.badge\" class=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n            <Badge class=\"px-3 py-0.5 font-mono text-xs tracking-wider uppercase shadow-md\">\n              {{ plan.badge }}\n            </Badge>\n          </div>\n\n          <div class=\"space-y-4\">\n            <div>\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">{{ plan.name }}</h3>\n              <p class=\"text-muted-foreground mt-1 min-h-[36px] text-xs\">{{ plan.description }}</p>\n            </div>\n\n            <!-- Price display -->\n            <div class=\"flex items-baseline gap-1.5 font-mono\">\n              <span class=\"text-foreground text-4xl font-bold\">\n                ${{ billing === 'annual' ? plan.annualPrice : plan.monthlyPrice }}\n              </span>\n              <span class=\"text-muted-foreground text-xs\">/ month</span>\n            </div>\n            <p class=\"text-muted-foreground font-mono text-xs\">\n              {{\n                billing === 'annual' && plan.annualPrice > 0\n                  ? 'Billed annually ($' + plan.annualPrice * 12 + '/yr)'\n                  : 'Billed monthly'\n              }}\n            </p>\n          </div>\n\n          <Button :variant=\"plan.ctaVariant\" class=\"h-10 w-full gap-1.5 font-mono text-xs shadow-xs\">\n            <span>{{ plan.ctaText }}</span>\n            <ArrowRight class=\"size-3.5\" />\n          </Button>\n        </Card>\n      </div>\n\n      <!-- Deep Feature Comparison Matrix Table -->\n      <div class=\"space-y-6\">\n        <div class=\"text-center\">\n          <h3 class=\"text-foreground font-mono text-xl font-bold\">Detailed Feature Comparison</h3>\n          <p class=\"text-muted-foreground mt-1 text-xs\">Full granular matrix of capabilities and entitlements.</p>\n        </div>\n\n        <Card class=\"border-border bg-card overflow-hidden rounded-2xl text-left shadow-sm\">\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full border-collapse text-left text-xs\">\n              <thead>\n                <tr class=\"border-border bg-muted/40 text-muted-foreground border-b font-mono\">\n                  <th class=\"w-1/2 p-4 font-semibold\">Capability</th>\n                  <th class=\"p-4 text-center font-semibold\">Community</th>\n                  <th class=\"text-primary p-4 text-center font-bold font-semibold\">Pro Team</th>\n                  <th class=\"p-4 text-center font-semibold\">Enterprise</th>\n                </tr>\n              </thead>\n              <tbody>\n                <template v-for=\"(section, sIdx) in comparisonData\" :key=\"sIdx\">\n                  <tr class=\"bg-muted/20 border-border/80 border-b\">\n                    <td\n                      colspan=\"4\"\n                      class=\"text-muted-foreground p-3 px-4 font-mono text-xs font-bold tracking-wider uppercase\"\n                    >\n                      {{ section.category }}\n                    </td>\n                  </tr>\n                  <tr\n                    v-for=\"(row, rIdx) in section.features\"\n                    :key=\"rIdx\"\n                    class=\"border-border/60 hover:bg-muted/10 border-b transition-colors\"\n                  >\n                    <td class=\"p-4\">\n                      <div class=\"text-foreground font-medium\">{{ row.name }}</div>\n                      <div class=\"text-muted-foreground mt-0.5 text-xs\">{{ row.tooltip }}</div>\n                    </td>\n                    <td class=\"p-4 text-center font-mono\">\n                      <template v-if=\"typeof row.community === 'boolean'\">\n                        <Check v-if=\"row.community\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-muted-foreground\">{{ row.community }}</span>\n                    </td>\n                    <td class=\"p-4 text-center font-mono font-semibold\">\n                      <template v-if=\"typeof row.pro === 'boolean'\">\n                        <Check v-if=\"row.pro\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-primary\">{{ row.pro }}</span>\n                    </td>\n                    <td class=\"p-4 text-center font-mono\">\n                      <template v-if=\"typeof row.enterprise === 'boolean'\">\n                        <Check v-if=\"row.enterprise\" class=\"text-success mx-auto size-4\" />\n                        <Minus v-else class=\"text-muted-foreground/40 mx-auto size-4\" />\n                      </template>\n                      <span v-else class=\"text-foreground font-semibold\">{{ row.enterprise }}</span>\n                    </td>\n                  </tr>\n                </template>\n              </tbody>\n            </table>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PricingTierComparisonMatrix.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}