{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-widget",
  "type": "registry:component",
  "title": "Pricing Widget",
  "description": "An animated pricing widget with smooth transitions and dynamic value updates.",
  "dependencies": [
    "@number-flow/react",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/pricing-widget.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { Check } from 'lucide-react';\nimport NumberFlow from '@number-flow/react';\n\nexport type BillingCycle = 'monthly' | 'yearly';\n\nexport interface PricingPlan {\n  id: string;\n  title: string;\n  price: number;\n  popular: boolean;\n}\n\ninterface PricingWidgetProps {\n  initialBilling?: BillingCycle;\n  initialActivePlanId?: string;\n  plansData?: Record<BillingCycle, PricingPlan[]>;\n}\n\nconst SPRING: Transition = {\n  stiffness: 260,\n  damping: 22,\n};\n\nconst DEFAULT_DATA: Record<BillingCycle, PricingPlan[]> = {\n  monthly: [\n    { id: 'free', title: 'Free', price: 0.0, popular: false },\n    { id: 'starter', title: 'Starter', price: 9.99, popular: true },\n    { id: 'pro', title: 'Pro', price: 19.99, popular: false },\n  ],\n  yearly: [\n    { id: 'free', title: 'Free', price: 0.0, popular: false },\n    { id: 'starter', title: 'Starter', price: 7.49, popular: true },\n    { id: 'pro', title: 'Pro', price: 17.49, popular: false },\n  ],\n};\n\nexport const PricingWidget: FC<PricingWidgetProps> = ({\n  initialBilling = 'monthly',\n  initialActivePlanId = 'starter',\n  plansData = DEFAULT_DATA,\n}) => {\n  const [billing, setBilling] = useState<BillingCycle>(initialBilling);\n  const [active, setActive] = useState<string>(initialActivePlanId);\n\n  return (\n    <div className=\"w-[380px] rounded-[32px] border-[1.6px] border-[#E5E5E9] bg-[#FEFEFE] p-4 shadow-xl transition-colors dark:border-zinc-800 dark:bg-zinc-900\">\n      <div className=\"relative mb-4 flex rounded-full border border-[#f4f4fbdc] bg-[#F4F4FB] px-2 py-2 dark:border-zinc-700 dark:bg-zinc-800\">\n        <motion.div\n          layout\n          transition={SPRING}\n          className=\"absolute inset-y-1 my-[0.5px] w-[48%] rounded-full border border-[#fefefed9] bg-[#FEFEFE] shadow-sm dark:border-zinc-600 dark:bg-zinc-700\"\n          animate={{ x: billing === 'monthly' ? '0%' : '100%' }}\n        />\n        {(['monthly', 'yearly'] as const).map((t) => (\n          <button\n            key={t}\n            onClick={() => setBilling(t)}\n            className=\"relative z-10 w-1/2 py-1 text-base font-bold text-black transition-colors focus:outline-none dark:text-zinc-200\"\n          >\n            {t === 'monthly' ? 'Monthly' : 'Yearly'}\n          </button>\n        ))}\n      </div>\n\n      <div className=\"space-y-3\">\n        {plansData[billing].map((item) => {\n          const isActive = active === item.id;\n          return (\n            <motion.button\n              layout\n              key={item.id}\n              onClick={() => setActive(item.id)}\n              className=\"relative flex h-[82px] w-full items-center justify-between rounded-[24px] border-[1.6px] border-[#E5E5E9] bg-white px-4 text-left transition-all focus:outline-none dark:border-zinc-800 dark:bg-zinc-900\"\n            >\n              {isActive && (\n                <motion.div\n                  layoutId=\"active-border\"\n                  transition={SPRING}\n                  className=\"pointer-events-none absolute inset-0 z-20 rounded-[24px] border-[2.5px] border-black dark:border-white\"\n                />\n              )}\n\n              <div className=\"relative z-10\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-[18px] font-bold transition-colors dark:text-white\">\n                    {item.title}\n                  </span>\n                  {item.popular && (\n                    <span className=\"rounded-xl bg-[#F3EDB4] px-2.5 py-0.5 text-[14px] font-bold text-[#49411A]\">\n                      Popular\n                    </span>\n                  )}\n                </div>\n                <motion.p className=\"flex items-center gap-1 text-sm font-bold text-[#040404] transition-colors dark:text-zinc-400\">\n                  <NumberFlow\n                    value={item.price}\n                    format={{ style: 'currency', currency: 'USD' }}\n                  />\n                  <motion.span layout className=\"font-semibold text-[#858489]\">\n                    {' '}\n                    / month\n                  </motion.span>\n                </motion.p>\n              </div>\n\n              <div className=\"relative z-10 flex h-[24px] w-[24px] items-center justify-center rounded-full border-[1.6px] border-[#E5E5E9] dark:border-zinc-700\">\n                <AnimatePresence>\n                  {isActive && (\n                    <motion.div\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0 }}\n                      transition={SPRING}\n                      className=\"flex h-full w-full items-center justify-center rounded-full bg-black dark:bg-white\"\n                    >\n                      <Check size={14} className=\"text-white dark:text-black\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n            </motion.button>\n          );\n        })}\n      </div>\n\n      <button className=\"mt-5 w-full rounded-full bg-[#020203] py-3 font-semibold text-[#F7F7F9] transition-all hover:opacity-90 dark:bg-white dark:text-black\">\n        Get Started\n      </button>\n    </div>\n  );\n};\n"
    }
  ]
}