{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "pricing-matrix-plan-cards",
  "title": "Pricing — Per-Plan Comparison",
  "type": "registry:block",
  "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",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/pricing-matrix-plan-cards/pricing-matrix-plan-cards.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { Check, Minus } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/separator/separator'\n\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 = [\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/**\n * <uip-pricing-matrix-plan-cards> — the registry PricingMatrixPlanCards block\n * as a web component.\n *\n * Class strings are React's PricingMatrixPlanCards verbatim. The section is\n * static (React holds no state); inclusion is derived from the shared\n * capability list exactly like React.\n */\nexport class UipPricingMatrixPlanCards extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'pricing-matrix-plan-cards')\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"pricing-matrix-plan-cards\" class=\"bg-background\">\n        <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n          <div class=\"max-w-2xl\">\n            <uip-badge variant=\"secondary\">Plans</uip-badge>\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            ${plans.map(\n              (plan) => html`\n                <uip-card class=${plan.featured ? 'border-primary' : ''}>\n                  <uip-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                      ${plan.featured ? html`<uip-badge variant=\"secondary\">Most chosen</uip-badge>` : ''}\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                    <uip-separator class=\"[&::part(base)]:my-5\"></uip-separator>\n\n                    <ul class=\"space-y-2.5\">\n                      ${capabilities.map((capability, index) => {\n                        const included = plan.included.includes(index)\n                        return html`\n                          <li\n                            class=${`flex items-start gap-2.5 text-sm ${included ? '' : 'text-muted-foreground/60'}`}\n                          >\n                            ${included\n                              ? icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')\n                              : icon(Minus, 'minus', 'text-muted-foreground/40 mt-0.5 size-4 shrink-0')}\n                            <span>${capability}</span>\n                          </li>\n                        `\n                      })}\n                    </ul>\n\n                    <uip-button variant=${plan.featured ? 'default' : 'outline'} class=\"mt-auto pt-0 [&]:mt-8\">\n                      ${plan.name === 'Enterprise' ? 'Talk to us' : `Start on ${plan.name}`}\n                    </uip-button>\n                  </uip-card-content>\n                </uip-card>\n              `,\n            )}\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-pricing-matrix-plan-cards') ||\n  customElements.define('uip-pricing-matrix-plan-cards', UipPricingMatrixPlanCards)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-pricing-matrix-plan-cards': UipPricingMatrixPlanCards\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/pricing-matrix-plan-cards/pricing-matrix-plan-cards.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/separator.json"
  ]
}