{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "pricing-matrix-plan-cards",
  "title": "Pricing — Per-Plan Comparison",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/pricing-matrix-plan-cards/pricing-matrix-plan-cards.component.ts",
      "content": "// Plan-first comparison that renders each plan as its own card of included and\n// excluded capabilities, the layout a wide matrix should degrade to on a phone.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Check, LucideAngularModule, Minus } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface PricingPlanCard {\n  name: string\n  price: string\n  cadence: string\n  included: number[]\n  note: string\n  featured?: boolean\n}\n\n// One capability list, three plans referencing it by index — a capability can\n// never appear on one card and silently vanish from another.\nconst capabilities = [\n  'Certified metric definitions',\n  'Connected warehouses',\n  'Query budget per team',\n  'Row-level access control',\n  'SCIM provisioning',\n  'Audit log export',\n  'Embedded dashboards',\n  'Data residency choice',\n  'Customer-managed keys',\n  'Named support engineer',\n]\n\nconst plans: PricingPlanCard[] = [\n  { name: 'Team', price: '$0', cadence: 'while in beta', included: [0, 1], note: 'For one team proving it out.' },\n  {\n    name: 'Business',\n    price: '$1,400',\n    cadence: 'per month',\n    included: [0, 1, 2, 3, 4, 5, 6],\n    note: 'For finance and analytics running together.',\n    featured: true,\n  },\n  {\n    name: 'Enterprise',\n    price: 'Custom',\n    cadence: 'annual',\n    included: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n    note: 'For regulated estates and multi-region.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pricing-matrix-plan-cards, [ui-pricing-matrix-plan-cards]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"pricing-matrix-plan-cards\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">Plans</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What each plan actually includes</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            The same list on every card, with what is missing shown rather than omitted.\n          </p>\n        </div>\n\n        <div class=\"mt-10 grid gap-4 lg:grid-cols-3\">\n          @for (plan of plans; track plan.name) {\n            <div ui-card [class]=\"plan.featured ? 'border-primary' : ''\">\n              <div ui-card-content class=\"flex h-full flex-col p-6\">\n                <div class=\"flex items-center justify-between gap-3\">\n                  <p class=\"text-sm font-semibold\">{{ plan.name }}</p>\n                  @if (plan.featured) {\n                    <span ui-badge variant=\"secondary\">Most chosen</span>\n                  }\n                </div>\n\n                <p class=\"font-display mt-4 text-3xl font-bold tracking-tight\">{{ plan.price }}</p>\n                <p class=\"text-muted-foreground mt-1 text-xs\">{{ plan.cadence }}</p>\n                <p class=\"text-muted-foreground mt-3 text-sm leading-relaxed\">{{ plan.note }}</p>\n\n                <ui-separator class=\"my-5\" />\n\n                <ul class=\"space-y-2.5\">\n                  @for (capability of capabilities; track capability) {\n                    <li [class]=\"capabilityClass(plan, $index)\">\n                      @if (isIncluded(plan, $index)) {\n                        <lucide-icon [img]=\"Check\" class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      } @else {\n                        <lucide-icon\n                          [img]=\"Minus\"\n                          class=\"text-muted-foreground/40 mt-0.5 size-4 shrink-0\"\n                          aria-hidden=\"true\"\n                        />\n                      }\n                      <span>{{ capability }}</span>\n                    </li>\n                  }\n                </ul>\n\n                <button ui-button [variant]=\"plan.featured ? 'default' : 'outline'\" class=\"mt-auto pt-0 [&]:mt-8\">\n                  {{ ctaLabel(plan) }}\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiPricingMatrixPlanCardsComponent {\n  protected readonly Check = Check\n  protected readonly Minus = Minus\n\n  readonly capabilities = capabilities\n  readonly plans = plans\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  isIncluded(plan: PricingPlanCard, index: number): boolean {\n    return plan.included.includes(index)\n  }\n\n  capabilityClass(plan: PricingPlanCard, index: number): string {\n    return cn('flex items-start gap-2.5 text-sm', !this.isIncluded(plan, index) && 'text-muted-foreground/60')\n  }\n\n  ctaLabel(plan: PricingPlanCard): string {\n    return plan.name === 'Enterprise' ? 'Talk to us' : `Start on ${plan.name}`\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/pricing-matrix-plan-cards/pricing-matrix-plan-cards.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/pricing-matrix-plan-cards/index.ts",
      "content": "export { UiPricingMatrixPlanCardsComponent, type PricingPlanCard } from './pricing-matrix-plan-cards.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/pricing-matrix-plan-cards/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Plan-first comparison that renders each plan as its own card of included and excluded capabilities, the layout a wide matrix should degrade to on a phone.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}