{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "licence-key",
  "type": "registry:component",
  "title": "Licence Key",
  "description": "Interactive micro-interaction component for licence keys.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/licence-key.tsx",
      "type": "registry:component",
      "content": "import { AnimatePresence, motion, MotionConfig } from 'motion/react';\nimport { useState } from 'react';\n\nconst springConfig = {\n  type: 'spring',\n  visualDuration: 0.35,\n  bounce: 0.3,\n} as const;\n\nexport default function LicenceKey() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [value, setValue] = useState('');\n\n  const PLACEHOLDER_TEXT = 'License Key';\n\n  return (\n    <MotionConfig transition={springConfig}>\n      <div className=\"flex h-screen w-full items-center justify-center\">\n        <motion.div\n          className=\"relative h-16 cursor-pointer rounded-full bg-zinc-100 text-lg dark:bg-zinc-900 dark:text-white dark:ring-1 dark:ring-zinc-800\"\n          animate={{ width: isOpen ? '400px' : '230px' }}\n          onClick={() => {\n            if (!isOpen) {\n              setIsOpen(true);\n            }\n          }}\n        >\n          <div className=\"flex h-full w-full items-center justify-center gap-1 pr-3 pl-4 font-semibold overflow-hidden relative\">\n            <AnimatePresence mode=\"popLayout\">\n              {!isOpen && (\n                <motion.span\n                  key=\"close\"\n                  initial={{ opacity: 0, filter: 'blur(4px)' }}\n                  animate={{\n                    opacity: 1,\n                    filter: 'blur(0px)',\n                    transition: {\n                      type: 'spring',\n                      visualDuration: 0.2,\n                      bounce: 0,\n                      delay: 0.05,\n                    },\n                  }}\n                  exit={{ opacity: 0, filter: 'blur(4px)' }}\n                  transition={{\n                    type: 'spring',\n                    visualDuration: 0.2,\n                    bounce: 0,\n                  }}\n                >\n                  I have a{' '}\n                </motion.span>\n              )}\n            </AnimatePresence>\n\n            {!isOpen && (\n              <motion.span layoutId=\"placeholder\">\n                {PLACEHOLDER_TEXT}\n              </motion.span>\n            )}\n\n            <AnimatePresence mode=\"popLayout\" anchorX=\"right\">\n              {isOpen && (\n                <div\n                  key=\"open\"\n                  className=\"flex flex-1 items-center justify-start\"\n                >\n                  <motion.span\n                    layoutId=\"placeholder\"\n                    className=\"pointer-events-none absolute text-lg font-medium text-zinc-400 dark:text-zinc-500\"\n                    initial={{ opacity: 0 }}\n                    animate={{\n                      opacity: value.length === 0 ? 1 : 0,\n                    }}\n                    exit={{\n                      opacity: 0,\n                      filter: 'blur(4px)',\n                    }}\n                    transition={{\n                      type: 'spring',\n                      visualDuration: 0.25,\n                      bounce: 0.1,\n                    }}\n                  >\n                    {PLACEHOLDER_TEXT}\n                  </motion.span>\n\n                  <motion.input\n                    autoFocus\n                    initial={{\n                      opacity: 0,\n                      width: 0,\n                    }}\n                    animate={{\n                      opacity: 1,\n                      width: 'auto',\n                    }}\n                    exit={{\n                      opacity: 0,\n                        width: 0,\n                      filter:\"blur(4px)\"\n                    }}\n                    value={value}\n                    onChange={(e) => setValue(e.target.value)}\n                    className=\"flex-1 bg-transparent focus-visible:ring-0 focus-visible:outline-none\"\n                  />\n\n                  <motion.button\n                    initial={{ opacity: 0, filter: 'blur(2px)' }}\n                    animate={{ opacity: 1, filter: 'blur(0px)' }}\n                    exit={{ opacity: 0, filter: 'blur(2px)' }}\n                    transition={{\n                      type: 'spring',\n                      duration: 0.3,\n                      bounce: 0.1,\n                    }}\n                    className=\"cursor-pointer rounded-full bg-zinc-800 px-4 py-2 text-white ring-1 ring-zinc-800 dark:bg-white dark:text-zinc-900 dark:ring-white\"\n                    onClick={() => setIsOpen(false)}\n                  >\n                    Activate\n                  </motion.button>\n                </div>\n              )}\n            </AnimatePresence>\n          </div>\n        </motion.div>\n      </div>\n    </MotionConfig>\n  );\n}\n"
    }
  ]
}