{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "add-to-cart-morph",
  "type": "registry:ui",
  "title": "Add-to-cart morph",
  "description": "Connects product selection continuously to a persistent cart confirmation state.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "data-commerce"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/components/add-to-cart-morph/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "medium",
    "signature": "Selected product resolves into cart confirmation",
    "sceneFamily": "editorial-warm",
    "motionRole": "lively",
    "primaryState": "Book product with add entry",
    "assetProvenance": "local-asset"
  },
  "files": [
    {
      "path": "src/registry/components/add-to-cart-morph.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/add-to-cart-morph.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { AnimatePresence, LayoutGroup, motion, useReducedMotion } from \"motion/react\";\n\nexport type AddToCartMorphProps = { product: string; price: string; image: string; imageAlt: string; label?: string; className?: string; onAdd?: () => void };\n\nexport function AddToCartMorph({ product, price, image, imageAlt, label = \"Product selection\", className = \"\", onAdd }: AddToCartMorphProps) {\n  const reduced = useReducedMotion() === true; const id = useId(); const [added, setAdded] = useState(false); const add = () => { setAdded(true); onAdd?.(); };\n  return <section aria-labelledby={id} className={`overflow-hidden rounded-[18px] bg-[#efe5d8] p-3 shadow-[0_16px_40px_-29px_rgba(73,50,32,.55)] ${className}`}><LayoutGroup id={id}><div className=\"relative grid min-h-[290px] grid-cols-[1fr_auto] gap-3 rounded-[13px] bg-[#faf7f2] p-3\"><motion.img layoutId={`${id}-image`} src={image} alt={imageAlt} className=\"col-span-2 h-40 w-full rounded-[10px] object-cover\" /><div><span className=\"font-mono text-[10px] uppercase tracking-[.14em] text-[#8b7058]\">{label}</span><h3 id={id} className=\"mt-1 text-xl font-medium tracking-[-.05em] text-[#32281f]\">{product}</h3><p className=\"mt-1 text-[12px] text-[#746251]\">{price}</p></div><AnimatePresence mode=\"wait\" initial={false}>{added ? <motion.div key=\"cart\" layoutId={`${id}-action`} initial={reduced ? false : { scale: .85, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className=\"grid min-h-11 min-w-11 place-items-center self-end rounded-full bg-[#32281f] px-3 text-[11px] text-white\">✓ <span className=\"ml-1 hidden sm:inline\">In cart</span></motion.div> : <motion.button key=\"add\" layoutId={`${id}-action`} type=\"button\" onClick={add} className=\"min-h-11 self-end rounded-full bg-[#32281f] px-4 text-[11px] text-white outline-none hover:bg-[#504134] focus-visible:ring-2 focus-visible:ring-[#4568FF]\">Add to cart</motion.button>}</AnimatePresence></div></LayoutGroup></section>;\n}\n"
    }
  ]
}