{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A command palette component built with Dialog and Autocomplete for searching and executing commands.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "@persianlabsui/scroll-area"
  ],
  "files": [
    {
      "path": "registry/base/ui/command.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Autocomplete as CommandPrimitive } from \"@base-ui/react/autocomplete\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Command palette defaults: always open (it's never a floating popup on its\n * own — CommandDialogPopup or CommandPanel provide the surface), and the\n * first match stays highlighted so Enter/ArrowDown feel instant.\n */\nfunction Command({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Root>) {\n  return (\n    <CommandPrimitive.Root\n      data-slot=\"command\"\n      autoHighlight=\"always\"\n      keepHighlight\n      open\n      {...props}\n    />\n  )\n}\n\nfunction CommandInput({ className, ...props }: CommandPrimitive.Input.Props) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-11 items-center gap-2 border-b border-border px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-11 w-full min-w-0 rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({ className, ...props }: CommandPrimitive.List.Props) {\n  return (\n    <ScrollArea className=\"max-h-80\">\n      <CommandPrimitive.List\n        data-slot=\"command-list\"\n        className={cn(\"flex flex-col gap-0.5 p-1\", className)}\n        {...props}\n      />\n    </ScrollArea>\n  )\n}\n\nfunction CommandCollection(props: CommandPrimitive.Collection.Props) {\n  return <CommandPrimitive.Collection {...props} />\n}\n\nfunction CommandEmpty({ className, ...props }: CommandPrimitive.Empty.Props) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\n        \"py-6 text-center text-sm text-muted-foreground empty:m-0 empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({ className, ...props }: CommandPrimitive.Group.Props) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"flex flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: CommandPrimitive.GroupLabel.Props) {\n  return (\n    <CommandPrimitive.GroupLabel\n      data-slot=\"command-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({ className, ...props }: CommandPrimitive.Item.Props) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-muted data-[highlighted]:text-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 CommandSeparator({\n  className,\n  ...props\n}: CommandPrimitive.Separator.Props) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      dir=\"ltr\"\n      className={cn(\n        \"ms-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-footer\"\n      className={cn(\n        \"hidden items-center justify-between gap-2 border-t border-border bg-muted/50 px-3 py-2 text-xs text-muted-foreground sm:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-panel\"\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * CommandDialogPopup renders through a Portal, so it doesn't inherit `dir`\n * from a nearby wrapper (only from document.documentElement). CommandDialogTrigger\n * measures the ambient direction where it's actually rendered and pushes it\n * here so CommandDialogPopup can apply it explicitly to the portaled popup.\n */\nconst CommandDialogDirContext = React.createContext<{\n  dir: \"ltr\" | \"rtl\"\n  setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction CommandDialog({ ...props }: DialogPrimitive.Root.Props) {\n  const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n  const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n  return (\n    <CommandDialogDirContext.Provider value={contextValue}>\n      <DialogPrimitive.Root data-slot=\"command-dialog\" {...props} />\n    </CommandDialogDirContext.Provider>\n  )\n}\n\nfunction CommandDialogTrigger({\n  className,\n  ...props\n}: DialogPrimitive.Trigger.Props) {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  const { setDir } = React.useContext(CommandDialogDirContext)\n\n  React.useEffect(() => {\n    function update() {\n      if (!ref.current) return\n      setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n    }\n\n    update()\n\n    const observer = new MutationObserver(update)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"dir\"],\n      subtree: true,\n    })\n\n    return () => observer.disconnect()\n  }, [setDir])\n\n  return (\n    <DialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"command-dialog-trigger\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialogPopup({\n  className,\n  portalProps,\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  portalProps?: DialogPrimitive.Portal.Props\n  title?: string\n  description?: string\n}) {\n  const { dir } = React.useContext(CommandDialogDirContext)\n  const closeRef = React.useRef<HTMLButtonElement>(null)\n\n  return (\n    <DialogPrimitive.Portal {...portalProps}>\n      <DialogPrimitive.Backdrop\n        data-slot=\"command-dialog-backdrop\"\n        className=\"fixed inset-0 z-50 bg-black/45 backdrop-blur-md duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\"\n      />\n      <div\n        dir={dir}\n        className=\"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\"\n        // The inner Command is permanently `open`, so its own Escape handling\n        // never actually closes anything — but Base UI still treats it as a\n        // dismiss-blocking child of the dialog and swallows the key before\n        // the dialog's own Escape-to-close ever sees it. Intercepting here,\n        // above the command but still below `document` (where Base UI's\n        // listener lives), closes the dialog directly and stops the event\n        // before it can be swallowed.\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") {\n            event.stopPropagation()\n            closeRef.current?.click()\n          }\n        }}\n      >\n        <DialogPrimitive.Popup\n          data-slot=\"command-dialog-popup\"\n          className={cn(\n            \"row-start-2 flex max-h-[calc(100dvh-2rem)] w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg duration-150 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">\n            {title}\n          </DialogPrimitive.Title>\n          <DialogPrimitive.Description className=\"sr-only\">\n            {description}\n          </DialogPrimitive.Description>\n          <DialogPrimitive.Close\n            ref={closeRef}\n            className=\"hidden\"\n            tabIndex={-1}\n          />\n          {children}\n        </DialogPrimitive.Popup>\n      </div>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}