{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morph-price",
  "type": "registry:component",
  "title": "Morph price",
  "description": "A price display with a monthly or yearly toggle where the old amount springs out and the new price springs in. A compact pricing interaction for plan cards.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/pricing-toggle.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/morph-price.tsx",
      "type": "registry:ui",
      "target": "components/ui/morph-price.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { PricingToggle } from \"@/components/ui/pricing-toggle\"\n\nfunction MorphPrice({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const [cadence, setCadence] = React.useState<\"monthly\" | \"yearly\">(\"yearly\")\n  const price = cadence === \"yearly\" ? \"39\" : \"49\"\n  return (\n    <div data-slot=\"morph-price\" data-tier=\"premium\" className={cn(\"flex flex-col items-center gap-6 rounded-2xl border border-border bg-surface p-8\", className)}>\n      <PricingToggle value={cadence} onChange={setCadence} />\n      <div className=\"flex items-end gap-1\">\n        <span className=\"text-2xl font-medium text-fg\">$</span>\n        <AnimatePresence mode=\"wait\">\n          <motion.span\n            key={price}\n            initial={reduce ? false : { y: 16 }}\n            animate={{ y: 0 }}\n            exit={reduce ? undefined : { y: -16 }}\n            transition={{ type: \"spring\", stiffness: 280, damping: 24 }}\n            className=\"text-6xl font-medium tracking-[-0.034em] tabular-nums text-fg\"\n          >\n            {price}\n          </motion.span>\n        </AnimatePresence>\n        <span className=\"pb-2 text-sm text-fg-muted\">/ seat</span>\n      </div>\n      <p className=\"text-sm text-fg-muted\">{cadence === \"yearly\" ? \"Billed yearly · save 20%\" : \"Billed monthly\"}</p>\n    </div>\n  )\n}\nexport { MorphPrice }\n"
    }
  ]
}