{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-interaction",
  "title": "Pricing Interaction",
  "description": "An interactive pricing switcher with animated numbers, selectable plans, and monthly/yearly billing modes.",
  "dependencies": [
    "react",
    "@number-flow/react"
  ],
  "files": [
    {
      "path": "registry/gammaui/pricing-interaction.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport NumberFlow from \"@number-flow/react\"\n\nexport default function PricingInteraction() {\n  const [active, setActive] = React.useState(0)\n  const [period, setPeriod] = React.useState(0)\n  const handleChangePlan = (index: number) => {\n    setActive(index)\n  }\n  const handleChangePeriod = (index: number) => {\n    setPeriod(index)\n    if (index === 0) {\n      setStarter(9.99)\n      setPro(19.99)\n    } else {\n      setStarter(7.49)\n      setPro(17.49)\n    }\n  }\n  const [starter, setStarter] = React.useState(9.99)\n  const [pro, setPro] = React.useState(19.99)\n  return (\n    <main className=\"relative flex w-full items-center justify-center p-4\">\n      <div className=\"flex w-full max-w-sm flex-col items-center gap-3 rounded-4xl border-2 p-3 shadow-md\">\n        <div className=\"relative flex w-full items-center rounded-full bg-slate-100 p-1.5 dark:bg-zinc-900\">\n          <button\n            className=\"z-20 w-full rounded-full p-1.5 font-semibold text-slate-800 dark:text-white\"\n            onClick={() => handleChangePeriod(0)}\n          >\n            Monthly\n          </button>\n          <button\n            className=\"z-20 w-full rounded-full p-1.5 font-semibold text-slate-800 dark:text-white\"\n            onClick={() => handleChangePeriod(1)}\n          >\n            Yearly\n          </button>\n          <div\n            className=\"items-cnter absolute inset-0 z-10 flex w-1/2 justify-center p-1.5\"\n            style={{\n              transform: `translateX(${period * 100}%)`,\n              transition: \"transform 0.3s\",\n            }}\n          >\n            <div className=\"h-full w-full rounded-full bg-white shadow-sm dark:bg-black\" />\n          </div>\n        </div>\n        <div className=\"relative flex w-full flex-col items-center justify-center gap-3\">\n          <div\n            className=\"flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4\"\n            onClick={() => handleChangePlan(0)}\n          >\n            <div className=\"flex flex-col items-start\">\n              <p className=\"text-xl font-semibold text-black dark:text-white\">\n                Free\n              </p>\n              <p className=\"text-md text-slate-500 dark:text-zinc-600\">\n                <span className=\"font-medium text-black dark:text-white\">\n                  $0.00\n                </span>\n                /month\n              </p>\n            </div>\n            <div\n              className=\"mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1\"\n              style={{\n                borderColor: `${active === 0 ? \"#000\" : \"#64748b\"}`,\n                transition: \"border-color 0.3s\",\n              }}\n            >\n              <div\n                className=\"bg-primary size-3 rounded-full\"\n                style={{\n                  opacity: `${active === 0 ? 1 : 0}`,\n                  transition: \"opacity 0.3s\",\n                }}\n              ></div>\n            </div>\n          </div>\n          <div\n            className=\"flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4\"\n            onClick={() => handleChangePlan(1)}\n          >\n            <div className=\"flex flex-col items-start\">\n              <p className=\"flex items-center gap-2 text-xl font-semibold text-black dark:text-white\">\n                Starter{\" \"}\n                <span className=\"block rounded-lg bg-yellow-100 px-2 py-1 text-sm text-yellow-950\">\n                  Popular\n                </span>\n              </p>\n              <p className=\"text-md flex text-slate-500 dark:text-zinc-600\">\n                <span className=\"flex items-center font-medium text-black dark:text-white\">\n                  $ <NumberFlow className=\"font-medium\" value={starter} />\n                </span>\n                /month\n              </p>\n            </div>\n            <div\n              className=\"mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1\"\n              style={{\n                borderColor: `${active === 1 ? \"#000\" : \"#64748b\"}`,\n                transition: \"border-color 0.3s\",\n              }}\n            >\n              <div\n                className=\"bg-primary size-3 rounded-full\"\n                style={{\n                  opacity: `${active === 1 ? 1 : 0}`,\n                  transition: \"opacity 0.3s\",\n                }}\n              ></div>\n            </div>\n          </div>\n          <div\n            className=\"flex w-full cursor-pointer justify-between rounded-2xl border-2 p-4\"\n            onClick={() => handleChangePlan(2)}\n          >\n            <div className=\"flex flex-col items-start\">\n              <p className=\"text-xl font-semibold text-black dark:text-white\">\n                Pro\n              </p>\n              <p className=\"text-md flex text-slate-500 dark:text-zinc-600\">\n                <span className=\"flex items-center font-medium text-black dark:text-white\">\n                  $ <NumberFlow className=\"font-medium\" value={pro} />\n                </span>\n                /month\n              </p>\n            </div>\n            <div\n              className=\"mt-0.5 flex size-6 items-center justify-center rounded-full border-2 border-slate-500 p-1\"\n              style={{\n                borderColor: `${active === 2 ? \"#000\" : \"#64748b\"}`,\n                transition: \"border-color 0.3s\",\n              }}\n            >\n              <div\n                className=\"bg-primary size-3 rounded-full\"\n                style={{\n                  opacity: `${active === 2 ? 1 : 0}`,\n                  transition: \"opacity 0.3s\",\n                }}\n              ></div>\n            </div>\n          </div>\n          <div\n            className={`absolute top-0 h-[88px] w-full rounded-2xl border-[3px] border-black dark:border-zinc-700`}\n            style={{\n              transform: `translateY(${active * 88 + 12 * active}px)`,\n              transition: \"transform 0.3s\",\n            }}\n          ></div>\n        </div>\n        <button className=\"w-full rounded-full bg-black p-3 text-lg text-white transition-transform duration-300 active:scale-95 dark:bg-zinc-900\">\n          Get Started\n        </button>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}