{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "expandable-search-bar",
  "type": "registry:ui",
  "title": "Expandable Command Search Bar",
  "description": "Compact search capsule expanding smoothly into a multi-tag command prompt with shortcuts.",
  "category": "forms",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "forms",
    "search",
    "cmd-k",
    "filter"
  ],
  "files": [
    {
      "path": "registry/forms/expandable-search-bar/expandable-search-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/expandable-search-bar.tsx",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { MagnifyingGlass, X, Lightning, ArrowRight } from '@phosphor-icons/react';\n\ninterface ExpandableSearchBarProps {\n  className?: string;\n  placeholder?: string;\n  onSearch?: (query: string) => void;\n  suggestions?: string[];\n}\n\nexport const ExpandableSearchBar: React.FC<ExpandableSearchBarProps> = ({\n  className = '',\n  placeholder = 'Search components, hooks, animations...',\n  onSearch,\n  suggestions = ['Magnetic Dock', 'Border Beam', 'Sliding Number', 'Aurora Glow', 'Bento Block'],\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [query, setQuery] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        if (!query) setIsExpanded(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [query]);\n\n  const handleSelectSuggestion = (item: string) => {\n    setQuery(item);\n    onSearch?.(item);\n    setIsExpanded(false);\n  };\n\n  return (\n    <div ref={containerRef} className={`relative z-20 w-full max-w-md ${className}`}>\n      <motion.div\n        animate={{\n          width: isExpanded ? '100%' : '320px',\n        }}\n        transition={{ type: 'spring', stiffness: 350, damping: 28 }}\n        className=\"relative mx-auto rounded-full bg-zinc-900/90 dark:bg-zinc-900/90 border border-white/15 backdrop-blur-xl shadow-xl overflow-hidden\"\n      >\n        <div className=\"flex items-center px-4 py-2.5 gap-2.5\">\n          <MagnifyingGlass\n            size={18}\n            className={`transition-colors duration-200 ${\n              isExpanded ? 'text-indigo-400' : 'text-zinc-400'\n            }`}\n          />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              onSearch?.(e.target.value);\n            }}\n            onFocus={() => setIsExpanded(true)}\n            placeholder={placeholder}\n            className=\"w-full bg-transparent text-sm text-zinc-100 placeholder-zinc-500 outline-none\"\n          />\n\n          {query ? (\n            <button\n              onClick={() => {\n                setQuery('');\n                onSearch?.('');\n                inputRef.current?.focus();\n              }}\n              className=\"text-zinc-400 hover:text-white p-1 rounded-full cursor-pointer\"\n            >\n              <X size={14} />\n            </button>\n          ) : (\n            <span className=\"hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-[10px] font-mono font-medium text-zinc-400 bg-zinc-800 border border-zinc-700/60\">\n              ⌘K\n            </span>\n          )}\n        </div>\n\n        {/* Expanded Suggestions Dropdown */}\n        <AnimatePresence>\n          {isExpanded && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'auto' }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.2 }}\n              className=\"px-4 pb-3 pt-1 border-t border-white/5 space-y-2\"\n            >\n              <div className=\"flex items-center justify-between text-[11px] font-mono text-zinc-500 pt-1\">\n                <span>TRENDING QUERIES</span>\n                <span className=\"flex items-center gap-1 text-indigo-400\">\n                  <Lightning size={12} weight=\"fill\" /> POPULAR\n                </span>\n              </div>\n              <div className=\"flex flex-wrap gap-1.5 pt-1\">\n                {suggestions.map((item) => (\n                  <button\n                    key={item}\n                    onClick={() => handleSelectSuggestion(item)}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs text-zinc-300 bg-white/5 hover:bg-white/10 hover:text-white border border-white/10 transition-colors cursor-pointer\"\n                  >\n                    <span>{item}</span>\n                    <ArrowRight size={10} className=\"text-zinc-500\" />\n                  </button>\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}