{
  "name": "pricing-card-one",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "pricing-card-one.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\ntype AnchorOrButton =\n  | ({\n      href: string;\n      onClick?: never;\n    } & React.AnchorHTMLAttributes<HTMLAnchorElement>)\n  | ({\n      href?: undefined;\n      onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    } & React.ButtonHTMLAttributes<HTMLButtonElement>);\n\ntype Tone = 'indigo' | 'blue' | 'emerald' | 'zinc';\ntype Variant = 'outline' | 'elevated' | 'soft';\n\nexport type PricingFeature = {\n  label: React.ReactNode;\n  included?: boolean; // default true\n};\n\nexport type PricingCardOneProps = {\n  icon?: React.ReactNode; // big top icon\n  name: string; // plan name\n  subtitle?: string; // \"the starter choice\"\n  price: number | string; // 5 | \"$5\"\n  currency?: string; // \"$\" (used when price is number)\n  periodLabel?: string; // \"/month\"\n  recommended?: boolean;\n  recommendedLabel?: string;\n\n  features: PricingFeature[];\n\n  /** CTA button/link. If omitted, no button is shown. */\n  cta?: AnchorOrButton & { label?: string; 'aria-label'?: string };\n\n  /** Visuals */\n  tone?: Tone;\n  variant?: Variant;\n  className?: string;\n\n  /** Slot style overrides */\n  badgeClassName?: string;\n  iconClassName?: string;\n  nameClassName?: string;\n  subtitleClassName?: string;\n  priceClassName?: string;\n  periodClassName?: string;\n  featureListClassName?: string;\n  featureItemClassName?: string;\n  ctaClassName?: string;\n};\n\nconst toneMap: Record<\n  Tone,\n  {\n    accent: string; // text color for icon/price\n    ring: string; // ring color for included bullet\n    bulletOkBg: string; // bg for ✓\n    bulletOkFg: string;\n    bulletNoBg: string; // bg for ✕\n    bulletNoFg: string;\n    primaryBtn: string; // filled button\n    primaryBtnHover: string;\n    outlineBtn: string; // outline button text/ring\n  }\n> = {\n  indigo: {\n    accent: 'text-indigo-600',\n    ring: 'ring-indigo-200 dark:ring-indigo-900/50',\n    bulletOkBg: 'bg-indigo-50 dark:bg-indigo-950/40',\n    bulletOkFg: 'text-indigo-600 dark:text-indigo-400',\n    bulletNoBg: 'bg-amber-50 dark:bg-amber-950/40',\n    bulletNoFg: 'text-amber-500',\n    primaryBtn: 'bg-indigo-600 text-white',\n    primaryBtnHover: 'hover:bg-indigo-700',\n    outlineBtn:\n      'text-indigo-600 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-900/50',\n  },\n  blue: {\n    accent: 'text-blue-600',\n    ring: 'ring-blue-200 dark:ring-blue-900/50',\n    bulletOkBg: 'bg-blue-50 dark:bg-blue-950/40',\n    bulletOkFg: 'text-blue-600 dark:text-blue-400',\n    bulletNoBg: 'bg-amber-50 dark:bg-amber-950/40',\n    bulletNoFg: 'text-amber-500',\n    primaryBtn: 'bg-blue-600 text-white',\n    primaryBtnHover: 'hover:bg-blue-700',\n    outlineBtn:\n      'text-blue-600 ring-1 ring-inset ring-blue-200 dark:ring-blue-900/50',\n  },\n  emerald: {\n    accent: 'text-emerald-600',\n    ring: 'ring-emerald-200 dark:ring-emerald-900/50',\n    bulletOkBg: 'bg-emerald-50 dark:bg-emerald-950/40',\n    bulletOkFg: 'text-emerald-600 dark:text-emerald-400',\n    bulletNoBg: 'bg-amber-50 dark:bg-amber-950/40',\n    bulletNoFg: 'text-amber-500',\n    primaryBtn: 'bg-emerald-600 text-white',\n    primaryBtnHover: 'hover:bg-emerald-700',\n    outlineBtn:\n      'text-emerald-600 ring-1 ring-inset ring-emerald-200 dark:ring-emerald-900/50',\n  },\n  zinc: {\n    accent: 'text-zinc-900 dark:text-zinc-50',\n    ring: 'ring-zinc-200 dark:ring-zinc-800',\n    bulletOkBg: 'bg-zinc-100 dark:bg-zinc-800/60',\n    bulletOkFg: 'text-zinc-700 dark:text-zinc-300',\n    bulletNoBg: 'bg-amber-50 dark:bg-amber-950/40',\n    bulletNoFg: 'text-amber-500',\n    primaryBtn: 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900',\n    primaryBtnHover: 'hover:bg-black/80 dark:hover:bg-white',\n    outlineBtn:\n      'text-zinc-700 ring-1 ring-inset ring-zinc-200 dark:text-zinc-300 dark:ring-zinc-800',\n  },\n};\n\nexport default function PricingCardOne({\n  icon,\n  name,\n  subtitle = 'the starter choice',\n  price,\n  currency = '$',\n  periodLabel = '/month',\n  recommended = false,\n  recommendedLabel = 'Recommended',\n  features,\n  cta,\n  tone = 'blue',\n  variant = 'outline',\n  className,\n  badgeClassName,\n  iconClassName,\n  nameClassName,\n  subtitleClassName,\n  priceClassName,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  periodClassName,\n  featureListClassName,\n  featureItemClassName,\n  ctaClassName,\n}: PricingCardOneProps) {\n  const t = toneMap[tone];\n\n  const shell =\n    variant === 'elevated'\n      ? 'bg-white dark:bg-zinc-950 shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-800'\n      : variant === 'soft'\n        ? 'bg-white/70 dark:bg-zinc-900/60 ring-1 ring-zinc-200 dark:ring-zinc-800'\n        : 'bg-white dark:bg-zinc-950 ring-1 ring-zinc-200 dark:ring-zinc-800';\n\n  const priceText =\n    typeof price === 'number' ? (\n      <>\n        <span className='text-5xl leading-none font-bold'>\n          {currency}\n          {price}\n        </span>\n        <span className='ml-1 text-zinc-500 dark:text-zinc-400'>\n          {periodLabel}\n        </span>\n      </>\n    ) : (\n      <>\n        <span className='text-5xl leading-none font-bold'>{price}</span>\n        <span className='ml-1 text-zinc-500 dark:text-zinc-400'>\n          {periodLabel}\n        </span>\n      </>\n    );\n\n  return (\n    <section\n      aria-label={`${name} plan`}\n      className={cn('relative rounded-2xl p-6', shell, className)}\n    >\n      {/* Recommended badge */}\n      {recommended && (\n        <span\n          className={cn(\n            'absolute top-4 right-4 inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white shadow-sm',\n            badgeClassName\n          )}\n        >\n          {recommendedLabel}\n        </span>\n      )}\n\n      {/* Icon */}\n      {icon && (\n        <div\n          className={cn('mb-3 text-5xl', t.accent, iconClassName)}\n          aria-hidden\n        >\n          {icon}\n        </div>\n      )}\n\n      {/* Heading */}\n      <h3\n        className={cn(\n          'text-xl font-semibold text-zinc-900 dark:text-zinc-50',\n          nameClassName\n        )}\n      >\n        {name}\n      </h3>\n      {subtitle && (\n        <p\n          className={cn(\n            'text-sm text-zinc-500 dark:text-zinc-400',\n            subtitleClassName\n          )}\n        >\n          {subtitle}\n        </p>\n      )}\n\n      {/* Price */}\n      <div className={cn('mt-4', t.accent, priceClassName)}>{priceText}</div>\n\n      {/* Features */}\n      <ul className={cn('mt-6 space-y-3', featureListClassName)}>\n        {features.map((f, i) => {\n          const ok = f.included !== false;\n          return (\n            <li\n              key={i}\n              className={cn(\n                'flex items-start gap-3 text-sm',\n                featureItemClassName\n              )}\n            >\n              <span\n                className={cn(\n                  'mt-0.5 inline-grid h-5 w-5 place-items-center rounded-full ring-1',\n                  ok\n                    ? `${t.bulletOkBg} ${t.ring}`\n                    : `${t.bulletNoBg} ring-amber-200 dark:ring-amber-900/40`\n                )}\n                aria-hidden\n              >\n                {ok ? (\n                  <svg\n                    viewBox='0 0 20 20'\n                    className={cn('h-3.5 w-3.5', t.bulletOkFg)}\n                    fill='currentColor'\n                  >\n                    <path d='M16.7 6.3a1 1 0 0 0-1.4-1.4L8 12.2 4.7 8.9a1 1 0 1 0-1.4 1.4L7.3 14a1 1 0 0 0 1.4 0l8-8Z' />\n                  </svg>\n                ) : (\n                  <svg\n                    viewBox='0 0 20 20'\n                    className={cn('h-3.5 w-3.5', t.bulletNoFg)}\n                    fill='currentColor'\n                  >\n                    <path d='M6.2 5 5 6.2 8.8 10 5 13.8 6.2 15 10 11.2 13.8 15 15 13.8 11.2 10 15 6.2 13.8 5 10 8.8z' />\n                  </svg>\n                )}\n              </span>\n              <span className='text-zinc-700 dark:text-zinc-300'>\n                {f.label}\n              </span>\n            </li>\n          );\n        })}\n      </ul>\n\n      {/* CTA */}\n      {cta && (\n        <>\n          {cta.href ? (\n            <a\n              href={cta.href}\n              aria-label={cta['aria-label'] ?? `Choose ${name}`}\n              className={cn(\n                'mt-7 inline-flex w-full items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold transition',\n                recommended\n                  ? `${t.primaryBtn} ${t.primaryBtnHover}`\n                  : `${t.outlineBtn} hover:bg-black/5 dark:hover:bg-white/5`,\n                ctaClassName\n              )}\n              {...(cta as any)}\n            >\n              {cta.label ?? 'Choose Plan'}\n            </a>\n          ) : (\n            <button\n              type='button'\n              aria-label={cta['aria-label'] ?? `Choose ${name}`}\n              onClick={(cta as any).onClick}\n              className={cn(\n                'mt-7 inline-flex w-full items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold transition',\n                recommended\n                  ? `${t.primaryBtn} ${t.primaryBtnHover}`\n                  : `${t.outlineBtn} hover:bg-black/5 dark:hover:bg-white/5`,\n                ctaClassName\n              )}\n            >\n              {cta.label ?? 'Choose Plan'}\n            </button>\n          )}\n        </>\n      )}\n    </section>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}