{
  "name": "pricing/three-column",
  "type": "registry:component",
  "description": "Pricing table with highlighted middle tier",
  "files": [
    {
      "path": "example/Pricing/SectionPricing_ThreeColumn.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\nimport { Icon } from 'astro-icon/components';\nimport { addOffer } from '@/lib/jsonld-context';\n\ninterface Plan {\n  type?: 'primary' | 'secondary';\n  title: string;\n  description?: string;\n  monthlyPrice: string;\n  yearlyPrice?: string;\n  yearlyDiscountText?: string;\n  period?: string;\n  features: string[];\n  popular?: boolean;\n  ctaText?: string;\n}\n\nconst hasYearlyPricing = true;\nconst title = 'Individual Plans 4';\nconst subtitle = 'Choose the perfect plan for your needs. Upgrade or downgrade at any time.';\nconst badgeText = 'Pricing';\nconst instanceId = Math.random().toString(36).slice(2, 8);\n\nconst plans: Plan[] = [\n  {\n    title: 'Hobby',\n    description: 'Includes',\n    monthlyPrice: 'Free',\n    yearlyPrice: 'Free',\n    features: ['Pro two-week trial', 'Limited agent requests', 'Limited tab completions'],\n    ctaText: 'Download',\n  },\n  {\n    type: 'secondary',\n    title: 'Pro',\n    description: 'Everything in Hobby, plus',\n    monthlyPrice: '$20',\n    yearlyPrice: '$16',\n    yearlyDiscountText: '20% off',\n    features: [\n      'Extended limits on agent',\n      'Unlimited tab completions',\n      'Access to Background Agents',\n      'Access to Bug Bot',\n      'Access to maximum context windows',\n    ],\n    popular: true,\n    ctaText: 'Get Pro',\n  },\n  {\n    title: 'Ultra',\n    description: 'Everything in Pro, plus',\n    monthlyPrice: '$200',\n    yearlyPrice: '$160',\n    yearlyDiscountText: '20% off',\n    features: ['20x usage on all OpenAI, Claude, Gemini models', 'Priority access to new features'],\n    ctaText: 'Get Ultra',\n  },\n];\n\nfor (const plan of plans) {\n  addOffer({\n    name: plan.title,\n    monthlyPrice: plan.monthlyPrice,\n    yearlyPrice: plan.yearlyPrice,\n    features: plan.features,\n  });\n}\n---\n\n<section\n  class=\"pricing-section pricing-component-base relative\"\n  data-scheme=\"shift\"\n>\n  <BackgroundEffect\n    gradientType=\"var(--gradient-top-fade-linear)\"\n    patternType=\"none\"\n    noiseType=\"none\"\n  />\n\n  <div class=\"container\">\n    <div class=\"mb-10 text-center\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        {badgeText}\n      </div>\n      <h2 class=\"h2 mb-4\">{title}</h2>\n      <p\n        class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\"\n\n      >\n        {subtitle}\n      </p>\n    </div>\n\n    <div class=\"pricing-grid\">\n      {\n        hasYearlyPricing && (\n          <fieldset class=\"pricing-toggle-container\">\n            <legend class=\"sr-only\">Billing cycle</legend>\n            <div class=\"pricing-toggle-wrapper\">\n              <label class=\"pricing-toggle-btn monthly-btn px-4 py-2\">\n                <input\n                  name={`billing-${instanceId}`}\n                  type=\"radio\"\n                  value=\"monthly\"\n                  class=\"pricing-toggle-input\"\n                  checked\n                />\n                MONTHLY\n              </label>\n              <label class=\"pricing-toggle-btn yearly-btn px-4 py-2\">\n                <input\n                  name={`billing-${instanceId}`}\n                  type=\"radio\"\n                  value=\"yearly\"\n                  class=\"pricing-toggle-input\"\n                />\n                YEARLY\n              </label>\n            </div>\n          </fieldset>\n        )\n      }\n\n      <div class=\"pricing-cards-container\">\n        {\n          plans.map((plan) => {\n            const type = plan.type ?? \"primary\";\n            const period = plan.period ?? \"/mo\";\n            const scheme =\n              type === \"secondary\" ? \"card-secondary\" : \"card-primary\";\n\n            return (\n              <article\n                class=\"pricing-card-wrapper\"\n                data-popular={plan.popular ?? false}\n              >\n                <div\n                  class={`pricing-card rounded-card card-base p-4 ${type === \"secondary\" ? \"pricing-card-secondary\" : \"\"}`.trim()}\n                  data-type={type}\n                  data-scheme={scheme}\n                >\n                  {plan.yearlyDiscountText && (\n                    <div class=\"price-badge yearly-badge\">\n                      {plan.yearlyDiscountText}\n                    </div>\n                  )}\n\n                  <div class=\"pricing-header\">\n                    <h3 class=\"pricing-title\">{plan.title}</h3>\n                    {plan.description && (\n                      <p class=\"pricing-description\">{plan.description}</p>\n                    )}\n                  </div>\n\n                  <div class=\"pricing-price\">\n                    <div class=\"price-main price-block price--monthly\">\n                      <span class=\"price-amount\">{plan.monthlyPrice}</span>\n                      <span class=\"price-period\">{period}</span>\n                    </div>\n\n                    {plan.yearlyPrice && (\n                      <div\n                        class=\"price-main price-block price--yearly\"\n                        style=\"display: none;\"\n                      >\n                        <span class=\"price-amount\">{plan.yearlyPrice}</span>\n                        <span class=\"price-period\">{period}</span>\n                      </div>\n                    )}\n                  </div>\n\n                  <ul class=\"pricing-features\">\n                    {plan.features.map((feature) => (\n                      <li class=\"feature-item\">\n                        <Icon name=\"lucide:check\" class=\"feature-icon\" />\n                        {feature}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              </article>\n            );\n          })\n        }\n      </div>\n    </div>\n  </div>\n</section>\n\n<style>\n  @reference \"tailwindcss\";\n\n  .pricing-section {\n    width: 100%;\n  }\n\n  .pricing-grid .pricing-cards-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    @apply gap-2;\n    align-items: stretch;\n    justify-items: stretch;\n  }\n\n  .pricing-toggle-container {\n    display: flex;\n    justify-content: center;\n    @apply mb-12;\n  }\n\n  .pricing-toggle-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--sp-bg);\n    border-radius: var(--sp-radius-card);\n    padding: 4px;\n    border: 1px solid color-mix(in srgb, var(--sp-fg) 15%, transparent);\n    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--sp-fg) 10%, transparent);\n  }\n\n  .pricing-toggle-input {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    padding: 0;\n    border: none;\n    background: none;\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n\n  .pricing-toggle-btn {\n    width: 120px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--sp-font-heading);\n    font-size: 0.75rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border: none;\n    background: transparent;\n    color: color-mix(in srgb, var(--sp-fg) 60%, transparent);\n    cursor: pointer;\n    border-radius: calc(var(--sp-radius-card) - 4px);\n    transition:\n      background-color 0.3s ease,\n      box-shadow 0.3s ease;\n    white-space: nowrap;\n  }\n\n  .pricing-toggle-btn:has(.pricing-toggle-input:checked) {\n    background: color-mix(in srgb, var(--sp-fg) 10%, var(--sp-bg));\n    color: var(--sp-fg);\n    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--sp-fg) 10%, transparent);\n  }\n\n  .pricing-toggle-btn:has(.pricing-toggle-input:focus-visible) {\n    outline: 2px solid var(--sp-accent);\n    outline-offset: 2px;\n  }\n\n  .pricing-cards-container {\n    transition: all 0.3s ease;\n  }\n\n  .pricing-card-wrapper {\n    display: flex;\n    width: 100%;\n  }\n\n  .pricing-card {\n    padding: 24px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    background: var(--sp-bg);\n  }\n\n  .pricing-card[data-type=\"secondary\"] {\n    color: var(--sp-fg);\n  }\n\n  .pricing-header {\n    position: relative;\n    z-index: 1;\n    @apply mb-4;\n  }\n\n  .pricing-title {\n    font-family: var(--sp-font-heading);\n    font-weight: 600;\n    color: var(--sp-fg);\n    @apply mb-1;\n  }\n\n  .pricing-description {\n    font-family: var(--sp-font-base);\n    font-size: 0.875rem;\n    color: var(--sp-fg-sub);\n    line-height: 1.5;\n    @apply mb-1;\n  }\n\n  .pricing-card[data-type=\"secondary\"] .pricing-description,\n  .pricing-card[data-type=\"secondary\"] .price-period,\n  .pricing-card[data-type=\"secondary\"] .feature-item {\n    color: var(--sp-fg);\n  }\n\n  .pricing-card[data-type=\"secondary\"] .price-badge {\n    background: var(--sp-fg);\n    color: var(--sp-bg);\n  }\n\n  .pricing-price {\n    position: relative;\n    z-index: 1;\n    @apply mb-4;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .price-main {\n    display: flex;\n    align-items: baseline;\n  }\n\n  .price-badge {\n    display: inline-block;\n    background: var(--sp-accent);\n    color: var(--sp-bg);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-family: var(--sp-font-base);\n    font-size: 0.75rem;\n    font-weight: 600;\n    width: fit-content;\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    z-index: 2;\n  }\n\n  .price-amount {\n    font-family: var(--sp-font-heading);\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: var(--sp-fg);\n    line-height: 1;\n  }\n\n  .price-period {\n    font-family: var(--sp-font-base);\n    font-size: 1rem;\n    color: var(--sp-fg-sub);\n    @apply ml-1;\n  }\n\n  .pricing-features {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    text-align: left;\n    flex-grow: 1;\n    margin-top: auto;\n  }\n\n  .feature-item {\n    display: flex;\n    align-items: flex-start;\n    @apply mb-2;\n    font-family: var(--sp-font-base);\n    font-size: 0.875rem;\n    color: var(--sp-fg-sub);\n    line-height: 1.5;\n  }\n\n  .feature-icon {\n    width: 1rem;\n    height: 1rem;\n    color: var(--sp-success);\n    @apply mr-2;\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .pricing-component-base:has(\n      input.pricing-toggle-input[value=\"yearly\"]:checked\n    )\n    :global(.price--monthly) {\n    display: none !important;\n  }\n\n  .pricing-component-base:has(\n      input.pricing-toggle-input[value=\"yearly\"]:checked\n    )\n    :global(.price--yearly) {\n    display: flex !important;\n  }\n\n  @media (max-width: 1024px) {\n    .pricing-grid .pricing-cards-container {\n      grid-template-columns: 1fr;\n      @apply gap-2;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .pricing-card {\n      padding: 18px;\n    }\n\n    .feature-item {\n      @apply mb-1.5;\n    }\n\n    .pricing-toggle-wrapper {\n      gap: 2px;\n      padding: 3px;\n    }\n\n    .pricing-toggle-btn {\n      width: 100px;\n      height: 32px;\n      font-size: 0.6875rem;\n    }\n\n    .pricing-cards-container {\n      grid-template-columns: 1fr;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "card"
  ]
}