{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "⌘K command palette with fuzzy search and a gliding highlight.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/dialog.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { gsap, motionScale, useMergedRef } from \"@/lib/motion\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/registry/cuelark/ui/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return <CommandPrimitive data-slot=\"command\" className={cn(\"flex h-full w-full flex-col overflow-hidden rounded-[inherit] bg-popover text-popover-foreground\", className)} {...props} />;\n}\n\n/** A command palette in a dialog; open it from a ⌘K handler. */\nfunction CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Dialog> & { title?: string; description?: string; className?: string }) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className={cn(\"top-[12vh] mt-0 gap-0 p-0 data-[state=closed]:animate-none\", className)} showClose={false} marks={false} instant>\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command>{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"cue-dash-b flex h-ctl-lg items-center gap-2 px-3\">\n      <SearchIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\"flex h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** One highlight glides to the selected item as you arrow through results (GSAP). */\nfunction CommandList({ className, children, ref, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const highlightRef = React.useRef<HTMLSpanElement>(null);\n  const mergedRef = useMergedRef(listRef, ref);\n\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    const highlight = highlightRef.current;\n    if (!list || !highlight) return;\n    let shown = false;\n    const place = () => {\n      const selected = list.querySelector<HTMLElement>('[cmdk-item][data-selected=\"true\"]');\n      if (!selected) {\n        shown = false;\n        return gsap.set(highlight, { opacity: 0 });\n      }\n      const listBox = list.getBoundingClientRect();\n      const box = selected.getBoundingClientRect();\n      const target = { y: box.top - listBox.top + list.scrollTop, height: box.height, left: box.left - listBox.left, width: box.width, opacity: 1 };\n      if (!shown || !motionScale(list)) gsap.set(highlight, target);\n      else gsap.to(highlight, { ...target, duration: 0.22, ease: \"cue\", overwrite: true });\n      shown = true;\n    };\n    place();\n    const observer = new MutationObserver(place);\n    observer.observe(list, { subtree: true, childList: true, attributes: true, attributeFilter: [\"data-selected\"] });\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <CommandPrimitive.List ref={mergedRef} data-slot=\"command-list\" className={cn(\"relative max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1\", className)} {...props}>\n      <span ref={highlightRef} aria-hidden=\"true\" className=\"pointer-events-none absolute top-0 left-0 rounded-md bg-accent opacity-0\" />\n      {children}\n    </CommandPrimitive.List>\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className={cn(\"py-8 text-center text-sm text-muted-foreground\", className)} {...props} />;\n}\n\n/**\n * cmdk keeps the selected item visible with element.scrollIntoView(), which also scrolls the whole page when the\n * palette is embedded in content (it selects the first item on mount). Keep that scrolling inside the list.\n */\nfunction scrollWithinList(node: HTMLElement | null) {\n  if (!node) return;\n  node.scrollIntoView = () => {\n    const list = node.closest<HTMLElement>(\"[cmdk-list]\");\n    if (!list) return;\n    const l = list.getBoundingClientRect();\n    const r = node.getBoundingClientRect();\n    if (r.top < l.top) list.scrollTop -= l.top - r.top;\n    else if (r.bottom > l.bottom) list.scrollTop += r.bottom - l.bottom;\n  };\n}\n\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      ref={(node) => scrollWithinList(node?.querySelector<HTMLElement>(\"[cmdk-group-heading]\") ?? null)}\n      data-slot=\"command-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:cue-label [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A visual divider. Presentational (not role=\"separator\"), so a listbox only holds options and groups, as ARIA requires. */\nfunction CommandSeparator({ className, alwaysRender, ...props }: React.ComponentProps<\"div\"> & { alwaysRender?: boolean }) {\n  const searching = useCommandState((state) => Boolean(state.search));\n  if (searching && !alwaysRender) return null;\n  return <div role=\"none\" cmdk-separator=\"\" data-slot=\"command-separator\" className={cn(\"cue-dash-b -mx-1 h-px\", className)} {...props} />;\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      ref={scrollWithinList}\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative z-10 flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return <kbd data-slot=\"command-shortcut\" className={cn(\"cue-kbd ms-auto\", className)} {...props} />;\n}\n\nexport { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/command",
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}