{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-palette-shadcnui",
  "type": "registry:component",
  "title": "Command Palette",
  "description": "Command palette with search and keyboard navigation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/search/command-palette.tsx",
      "content": "\"use client\";\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type Transition,\n  type Variants,\n} from \"framer-motion\";\nimport { File, Search, Settings, User, X } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\n\ntype Command = {\n  icon: typeof File;\n  label: string;\n  shortcut: string;\n  description: string;\n};\n\nconst commands: Command[] = [\n  {\n    icon: File,\n    label: \"New File\",\n    shortcut: \"⌘N\",\n    description: \"Spin up a glassmorphic canvas\",\n  },\n  {\n    icon: Settings,\n    label: \"Workspace Settings\",\n    shortcut: \"⌘,\",\n    description: \"Fine-tune tokens, motion, and themes\",\n  },\n  {\n    icon: User,\n    label: \"Team Directory\",\n    shortcut: \"⌘P\",\n    description: \"Invite collaborators to your motion library\",\n  },\n  {\n    icon: Search,\n    label: \"Global Command\",\n    shortcut: \"⌘K\",\n    description: \"Jump anywhere with palette search\",\n  },\n];\n\nconst overlayTransition: Transition = { duration: 0.24, ease: \"easeOut\" };\n\nexport function CommandPalette() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const shouldReduceMotion = useReducedMotion();\n\n  const filteredCommands = useMemo(\n    () =>\n      commands.filter((cmd) =>\n        cmd.label.toLowerCase().includes(query.toLowerCase())\n      ),\n    [query]\n  );\n\n  const panelVariants: Variants = shouldReduceMotion\n    ? {\n        initial: { opacity: 0, y: 0, scale: 1 },\n        animate: { opacity: 1, y: 0, scale: 1 },\n        exit: { opacity: 0, y: 0, scale: 1 },\n      }\n    : {\n        initial: { opacity: 0, scale: 0.96, y: 20, filter: \"blur(6px)\" },\n        animate: {\n          opacity: 1,\n          scale: 1,\n          y: 0,\n          filter: \"blur(0px)\",\n          transition: { duration: 0.28, ease: [0.18, 0.89, 0.32, 1.12] },\n        },\n        exit: {\n          opacity: 0,\n          scale: 0.97,\n          y: 12,\n          filter: \"blur(8px)\",\n          transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n        },\n      };\n\n  return (\n    <div className=\"relative\">\n      <motion.button\n        type=\"button\"\n        onClick={() => setIsOpen(true)}\n        className=\"group flex items-center gap-3 rounded-full border border-border/60 bg-card/80 px-4 py-2.5 text-sm text-[var(--muted-foreground)] shadow-[0_12px_30px_-15px_rgba(15,23,42,0.6)] backdrop-blur-lg transition-shadow duration-300 hover:shadow-[0_18px_45px_-20px_rgba(15,23,42,0.7)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        whileHover={shouldReduceMotion ? undefined : { scale: 1.02 }}\n        whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}\n      >\n        <Search className=\"h-4 w-4 text-primary\" aria-hidden />\n        <span className=\"font-medium\">Search commands…</span>\n        <kbd className=\"ml-auto rounded-full border border-border/60 bg-white/5 px-2 py-0.5 text-xs text-[var(--muted-foreground)]\">\n          ⌘K\n        </kbd>\n      </motion.button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              aria-hidden\n              className=\"fixed inset-0 z-[60] bg-black/60 backdrop-blur\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={overlayTransition}\n              onClick={() => setIsOpen(false)}\n            />\n\n            <div className=\"fixed inset-0 z-[65] flex items-start justify-center px-4 pt-24 sm:px-6\">\n              <motion.div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label=\"Command palette\"\n                {...panelVariants}\n                className=\"relative w-full max-w-xl overflow-hidden rounded-3xl border border-border/60 bg-card/90 backdrop-blur-2xl\"\n                onClick={(event) => event.stopPropagation()}\n              >\n                <div\n                  aria-hidden\n                  className=\"pointer-events-none absolute inset-0\"\n                >\n                  <motion.div\n                    className=\"absolute -top-20 left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-primary/20 blur-[150px]\"\n                    animate={\n                      shouldReduceMotion\n                        ? undefined\n                        : {\n                            opacity: [0.25, 0.55, 0.25],\n                            scale: [0.92, 1.08, 0.98],\n                          }\n                    }\n                    transition={\n                      shouldReduceMotion\n                        ? undefined\n                        : { duration: 8, repeat: Infinity, ease: \"easeInOut\" }\n                    }\n                  />\n                  <motion.div\n                    className=\"absolute bottom-[-30%] right-[-5%] h-72 w-72 rounded-full bg-emerald-400/20 blur-[160px]\"\n                    animate={\n                      shouldReduceMotion\n                        ? undefined\n                        : { opacity: [0.2, 0.5, 0.2], rotate: [0, 12, 0] }\n                    }\n                    transition={\n                      shouldReduceMotion\n                        ? undefined\n                        : { duration: 10, repeat: Infinity, ease: \"linear\" }\n                    }\n                  />\n                </div>\n\n                <div className=\"relative flex items-center gap-3 border-b border-border/60 px-5 py-4\">\n                  <Search className=\"h-5 w-5 text-primary\" aria-hidden />\n                  <input\n                    type=\"text\"\n                    value={query}\n                    onChange={(event) => setQuery(event.target.value)}\n                    placeholder=\"Search the glassmorphism toolkit…\"\n                    className=\"flex-1 bg-transparent text-sm text-[var(--muted-foreground)] outline-none placeholder:text-[var(--muted-foreground)]\"\n                    autoFocus\n                  />\n                  <motion.button\n                    type=\"button\"\n                    onClick={() => setIsOpen(false)}\n                    className=\"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/60 bg-white/5 text-[var(--muted-foreground)] transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary\"\n                    whileHover={\n                      shouldReduceMotion\n                        ? undefined\n                        : { rotate: 90, scale: 1.05 }\n                    }\n                    whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}\n                  >\n                    <X className=\"h-4 w-4\" aria-hidden />\n                    <span className=\"sr-only\">Close command palette</span>\n                  </motion.button>\n                </div>\n\n                <motion.div\n                  className=\"relative max-h-96 overflow-y-auto px-3 py-3\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ duration: 0.3 }}\n                >\n                  {filteredCommands.length === 0 ? (\n                    <div className=\"rounded-2xl border border-border/60 bg-white/5 p-6 text-center text-sm text-[var(--muted-foreground)] backdrop-blur\">\n                      No commands found. Try a different search term.\n                    </div>\n                  ) : (\n                    <ul className=\"space-y-2\" role=\"list\">\n                      {filteredCommands.map((cmd, index) => {\n                        const Icon = cmd.icon;\n                        return (\n                          <motion.li\n                            key={cmd.label}\n                            initial={{\n                              opacity: shouldReduceMotion ? 1 : 0,\n                              y: shouldReduceMotion ? 0 : 12,\n                            }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={\n                              shouldReduceMotion\n                                ? { duration: 0 }\n                                : {\n                                    delay: 0.04 * index,\n                                    duration: 0.24,\n                                    ease: \"easeOut\",\n                                  }\n                            }\n                          >\n                            <button\n                              type=\"button\"\n                              className=\"group flex w-full items-center justify-between rounded-2xl border border-transparent bg-white/5 px-4 py-4 text-left transition-colors duration-200 hover:border-border hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70\"\n                            >\n                              <div className=\"flex items-center gap-3\">\n                                <span className=\"flex h-9 w-9 items-center justify-center rounded-xl border border-border/40 bg-white/5 text-primary shadow-sm backdrop-blur\">\n                                  <Icon className=\"h-4 w-4\" aria-hidden />\n                                </span>\n                                <div className=\"flex flex-col\">\n                                  <span className=\"text-sm font-medium text-[var(--muted-foreground)]\">\n                                    {cmd.label}\n                                  </span>\n                                  <span className=\"text-xs text-[var(--muted-foreground)]\">\n                                    {cmd.description}\n                                  </span>\n                                </div>\n                              </div>\n                              <kbd className=\"rounded-full border border-border/40 bg-white/5 px-2 py-1 text-xs text-[var(--muted-foreground)] shadow-sm\">\n                                {cmd.shortcut}\n                              </kbd>\n                            </button>\n                          </motion.li>\n                        );\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n              </motion.div>\n            </div>\n          </>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/command-palette-shadcnui.tsx"
    }
  ]
}