{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-toggle",
  "title": "Pricing Toggle",
  "description": "Monthly/annual toggle with animated price swap using Framer Motion",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/pricing-toggle.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { motion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface PricingToggleProps {\n  monthlyLabel?: string\n  annualLabel?: string\n  discount?: string\n  onChange?: (isAnnual: boolean) => void\n  defaultAnnual?: boolean\n  className?: string\n}\n\nexport function PricingToggle({\n  monthlyLabel = \"Monthly\",\n  annualLabel = \"Annual\",\n  discount = \"Save 20%\",\n  onChange,\n  defaultAnnual = false,\n  className,\n}: PricingToggleProps) {\n  const [isAnnual, setIsAnnual] = useState(defaultAnnual)\n\n  const toggle = (annual: boolean) => {\n    setIsAnnual(annual)\n    onChange?.(annual)\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-3\", className)}>\n      <button\n        onClick={() => toggle(false)}\n        className={cn(\n          \"text-sm font-medium transition-colors duration-150\",\n          !isAnnual ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n        )}\n      >\n        {monthlyLabel}\n      </button>\n\n      <button\n        role=\"switch\"\n        aria-checked={isAnnual}\n        onClick={() => toggle(!isAnnual)}\n        className={cn(\n          \"relative h-6 w-11 rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          isAnnual ? \"bg-primary\" : \"bg-input\",\n        )}\n      >\n        <motion.span\n          className=\"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm\"\n          animate={{ x: isAnnual ? 20 : 2 }}\n          transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n          style={{ position: \"absolute\", top: 2 }}\n        />\n      </button>\n\n      <button\n        onClick={() => toggle(true)}\n        className={cn(\n          \"flex items-center gap-1.5 text-sm font-medium transition-colors duration-150\",\n          isAnnual ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n        )}\n      >\n        {annualLabel}\n        {discount && (\n          <AnimatePresence>\n            {isAnnual && (\n              <motion.span\n                initial={{ opacity: 0, scale: 0.8 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.8 }}\n                className=\"rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400\"\n              >\n                {discount}\n              </motion.span>\n            )}\n          </AnimatePresence>\n        )}\n      </button>\n    </div>\n  )\n}\n\nexport interface AnimatedPriceProps {\n  monthly: string | number\n  annual: string | number\n  isAnnual: boolean\n  currency?: string\n  period?: boolean\n}\n\nexport function AnimatedPrice({\n  monthly,\n  annual,\n  isAnnual,\n  currency = \"$\",\n  period = true,\n}: AnimatedPriceProps) {\n  const current = isAnnual ? annual : monthly\n\n  return (\n    <div className=\"flex items-baseline gap-1\">\n      <span className=\"text-sm font-medium text-muted-foreground\">{currency}</span>\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={String(current)}\n          initial={{ opacity: 0, y: -8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: 8 }}\n          transition={{ duration: 0.15 }}\n          className=\"text-4xl font-extrabold tracking-tight text-foreground\"\n        >\n          {current}\n        </motion.span>\n      </AnimatePresence>\n      {period && (\n        <span className=\"text-sm font-medium text-muted-foreground\">\n          /{isAnnual ? \"yr\" : \"mo\"}\n        </span>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/pricing-toggle.tsx"
    }
  ],
  "type": "registry:ui"
}