{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expanding-search-dock-shadcnui",
  "type": "registry:component",
  "title": "Expanding Search Dock",
  "description": "Minimal search icon that expands into full input with blur",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/expanding-search-dock.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Search, X } from \"lucide-react\";\nimport { useState } from \"react\";\n\ntype ExpandingSearchDockProps = {\n  onSearch?: (query: string) => void;\n  placeholder?: string;\n};\n\nexport function ExpandingSearchDock({\n  onSearch,\n  placeholder = \"Search...\",\n}: ExpandingSearchDockProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const handleExpand = () => {\n    setIsExpanded(true);\n  };\n\n  const handleCollapse = () => {\n    setIsExpanded(false);\n    setQuery(\"\");\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (onSearch && query) {\n      onSearch(query);\n    }\n  };\n\n  return (\n    <div className=\"relative\">\n      <AnimatePresence mode=\"wait\">\n        {!isExpanded ? (\n          <motion.button\n            key=\"icon\"\n            initial={{ scale: 0, opacity: 0 }}\n            animate={{ scale: 1, opacity: 1 }}\n            exit={{ scale: 0, opacity: 0 }}\n            onClick={handleExpand}\n            className=\"flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card transition-colors hover:bg-muted\"\n          >\n            <Search className=\"h-5 w-5\" />\n          </motion.button>\n        ) : (\n          <motion.form\n            key=\"input\"\n            initial={{ width: 48, opacity: 0 }}\n            animate={{ width: 320, opacity: 1 }}\n            exit={{ width: 48, opacity: 0 }}\n            transition={{\n              type: \"spring\",\n              stiffness: 300,\n              damping: 30,\n            }}\n            onSubmit={handleSubmit}\n            className=\"relative\"\n          >\n            <motion.div\n              initial={{ backdropFilter: \"blur(0px)\" }}\n              animate={{ backdropFilter: \"blur(12px)\" }}\n              className=\"relative flex items-center gap-2 overflow-hidden rounded-full border border-border bg-card/80 backdrop-blur-md\"\n            >\n              <div className=\"ml-4\">\n                <Search className=\"h-4 w-4 text-muted-foreground\" />\n              </div>\n              <input\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={placeholder}\n                autoFocus\n                className=\"h-12 flex-1 bg-transparent pr-4 text-sm outline-none placeholder:text-muted-foreground\"\n              />\n              <motion.button\n                type=\"button\"\n                onClick={handleCollapse}\n                initial={{ scale: 0 }}\n                animate={{ scale: 1 }}\n                whileHover={{ scale: 1.1 }}\n                whileTap={{ scale: 0.9 }}\n                className=\"mr-2 flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted\"\n              >\n                <X className=\"h-4 w-4\" />\n              </motion.button>\n            </motion.div>\n          </motion.form>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/expanding-search-dock-shadcnui.tsx"
    }
  ]
}