{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-favicon-search",
  "title": "Favicon Search Demo",
  "description": "Demo showing the FaviconSearch input — type a website URL and the brand logo animates in.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@unlumen-ui/favicon-search"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/favicon-search/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { ArrowRight01Icon as ArrowRight } from \"hugeicons-react\";\nimport {\n  FaviconSearch,\n  extractDomain,\n  getFaviconUrl,\n} from \"@/components/unlumen-ui/favicon-search\";\n\nexport const FaviconSearchDemo = () => {\n  const [value, setValue] = React.useState(\"\");\n  const [submitted, setSubmitted] = React.useState<string | null>(null);\n  const [submittedDomain, setSubmittedDomain] = React.useState<string | null>(\n    null,\n  );\n\n  const handleSearch = (val: string, domain: string | null) => {\n    if (!domain) return;\n    setSubmitted(val);\n    setSubmittedDomain(domain);\n  };\n\n  const handleChange = (val: string) => {\n    setValue(val);\n    if (!val) {\n      setSubmitted(null);\n      setSubmittedDomain(null);\n    }\n  };\n\n  return (\n    <div className=\"flex min-h-[340px] w-full items-center justify-center p-8\">\n      <div className=\"w-full max-w-sm space-y-3\">\n        {/* Heading */}\n        <div className=\"space-y-1\">\n          <h2 className=\"text-xl font-medium tracking-tight text-foreground\">\n            Enter your Website\n          </h2>\n        </div>\n\n        {/* Search input */}\n        <div className=\"space-y-2\">\n          <FaviconSearch\n            value={value}\n            onChange={handleChange}\n            onSearch={handleSearch}\n            placeholder=\"ui.shadcn.com\"\n            className=\"w-full\"\n          />\n        </div>\n\n        {/* Result card */}\n        <AnimatePresence mode=\"wait\">\n          {submittedDomain && (\n            <motion.div\n              key={submittedDomain}\n              initial={{ opacity: 0, y: 12, scale: 0.97 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: -8, scale: 0.97 }}\n              transition={{ type: \"spring\", stiffness: 360, damping: 28 }}\n              className=\"rounded-xl border border-border bg-muted/40 p-4 flex items-center gap-3\"\n            >\n              <motion.img\n                src={getFaviconUrl(submittedDomain, 64)}\n                alt={submittedDomain}\n                width={36}\n                height={36}\n                className=\"size-9 rounded-lg object-contain shrink-0 shadow-sm\"\n                initial={{ scale: 0.6, opacity: 0, rotate: -8 }}\n                animate={{ scale: 1, opacity: 1, rotate: 0 }}\n                transition={{\n                  type: \"spring\",\n                  stiffness: 400,\n                  damping: 24,\n                  delay: 0.05,\n                }}\n              />\n              <div className=\"flex-1 min-w-0\">\n                <p className=\"text-sm font-medium text-foreground truncate\">\n                  {submittedDomain}\n                </p>\n                <p className=\"text-xs text-muted-foreground mt-0.5 truncate\">\n                  {submitted}\n                </p>\n              </div>\n              <ArrowRight className=\"size-4 text-muted-foreground shrink-0\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}