{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-tailwind",
  "type": "registry:item",
  "title": "Command (Tailwind)",
  "description": "A command palette component.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/command.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction CommandDialog({ ...props }: Dialog.Root.Props) {\n  return <Dialog.Root {...props} />;\n}\n\nfunction CommandDialogTrigger({ ...props }: Dialog.Trigger.Props) {\n  return <Dialog.Trigger data-slot=\"command-dialog-trigger\" {...props} />;\n}\n\nconst CommandDialogPortal = Dialog.Portal;\n\nfunction CommandDialogBackdrop({ className, ...props }: Dialog.Backdrop.Props) {\n  return (\n    <Dialog.Backdrop\n      className={cn(\n        \"fixed inset-0 z-[var(--dialog-z)] bg-[var(--dialog-overlay)] transition-opacity duration-150\",\n        \"data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n        className\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialogPopup({ className, children, ...props }: Dialog.Popup.Props & { children?: React.ReactNode }) {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <Dialog.Popup\n        className={cn(\n          \"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-[101]\",\n          \"w-[calc(100%-2rem)] max-w-[560px] rounded-[var(--radius)]\",\n          \"border-none bg-[var(--background)]\",\n          \"shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-lg)]\",\n          \"transition-all duration-150\",\n          \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n          \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n          \"max-sm:w-[calc(100%-2rem)] max-sm:max-w-none\",\n          className\n        )}\n        data-slot=\"command-dialog-popup\"\n        {...props}\n      >\n        {children}\n      </Dialog.Popup>\n    </CommandDialogPortal>\n  );\n}\n\nfunction Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  className,\n  ...props\n}: React.ComponentProps<typeof Autocomplete.Root> & { className?: string }) {\n  return (\n    <div className={cn(\"flex w-full flex-col overflow-hidden text-[var(--foreground)]\", className)} data-slot=\"command\">\n      <Autocomplete.Root\n        autoHighlight={autoHighlight}\n        filter={null}\n        inline\n        keepHighlight={keepHighlight}\n        open\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandInput({\n  className,\n  placeholder = \"Search...\",\n  ...props\n}: React.ComponentProps<typeof Autocomplete.Input>) {\n  return (\n    <div\n      className=\"flex items-center gap-3 p-3 shadow-[inset_0_-0.5px_0_0_oklch(from_var(--border)_l_c_h_/_0.5)]\"\n      data-slot=\"command-input-wrapper\"\n    >\n      <Autocomplete.Input\n        autoFocus\n        className={cn(\n          \"flex h-6 w-full border-none bg-transparent text-sm outline-none\",\n          \"text-[var(--foreground)] caret-[var(--primary)]\",\n          \"placeholder:text-[var(--muted-foreground)]\",\n          \"focus:outline-none\",\n          \"max-sm:text-[0.9375rem] max-sm:placeholder:text-[0.9375rem]\",\n          className\n        )}\n        data-slot=\"command-input\"\n        placeholder={placeholder}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof Autocomplete.List>) {\n  return (\n    <Autocomplete.List\n      className={cn(\n        \"max-h-[300px] overflow-auto p-1 outline-none\",\n        \"scrollbar-thin scrollbar-track-transparent scrollbar-thumb-[oklch(from_var(--border)_l_c_h_/_0.5)]\",\n        \"hover:scrollbar-thumb-[oklch(from_var(--border)_l_c_h_/_0.7)]\",\n        \"[&::-webkit-scrollbar]:w-1.5\",\n        \"[&::-webkit-scrollbar-track]:bg-transparent\",\n        \"[&::-webkit-scrollbar-thumb]:rounded-[3px] [&::-webkit-scrollbar-thumb]:bg-[oklch(from_var(--border)_l_c_h_/_0.5)]\",\n        \"[&::-webkit-scrollbar-thumb:hover]:bg-[oklch(from_var(--border)_l_c_h_/_0.7)]\",\n        \"max-sm:max-h-[250px] max-sm:p-1.5\",\n        className\n      )}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Empty>) {\n  return (\n    <Autocomplete.Empty\n      className={cn(\n        \"p-6 text-center text-[var(--muted-foreground)] text-sm\",\n        \"max-sm:px-4 max-sm:py-7 max-sm:text-[0.9375rem]\",\n        className\n      )}\n      data-slot=\"command-empty\"\n      {...props}\n    >\n      {children || \"No results found.\"}\n    </Autocomplete.Empty>\n  );\n}\n\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof Autocomplete.Group>) {\n  return (\n    <Autocomplete.Group\n      className={cn(\"overflow-hidden py-1 text-[var(--foreground)]\", className)}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroupLabel({ className, ...props }: React.ComponentProps<typeof Autocomplete.GroupLabel>) {\n  return (\n    <Autocomplete.GroupLabel\n      className={cn(\n        \"px-2 pt-2 pb-1 font-medium text-[0.71875rem] text-[var(--muted-foreground)] uppercase tracking-wide\",\n        \"max-sm:px-2.5 max-sm:text-[0.8125rem]\",\n        className\n      )}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandCollection({ ...props }: React.ComponentProps<typeof Autocomplete.Collection>) {\n  return <Autocomplete.Collection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof Autocomplete.Item>) {\n  return (\n    <Autocomplete.Item\n      className={cn(\n        \"flex min-h-[2.5rem] cursor-pointer select-none items-center gap-2 rounded-none border border-transparent\",\n        \"px-[0.375rem] py-[0.625rem] font-normal text-sm leading-[normal] outline-none\",\n        \"hover:bg-[var(--mix-card-50-bg)] data-[highlighted]:bg-[var(--mix-card-50-bg)]\",\n        \"focus-visible:z-[1] focus-visible:outline-2 focus-visible:outline-[var(--primary)] focus-visible:outline-offset-2\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-[var(--muted-foreground)]\",\n        \"max-sm:min-h-[2.75rem] max-sm:gap-3 max-sm:px-2.5 max-sm:py-3 max-sm:text-[0.9375rem]\",\n        \"max-sm:[&_svg]:h-[1.125rem] max-sm:[&_svg]:w-[1.125rem]\",\n        className\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof Autocomplete.Separator>) {\n  return (\n    <Autocomplete.Separator\n      className={cn(\"my-1 h-[0.5px] w-full bg-[oklch(from_var(--border)_l_c_h_/_0.4)]\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex shrink-0 items-center gap-3 border-[oklch(from_var(--border)_l_c_h_/_0.5)] border-t-[0.5px]\",\n        \"bg-[oklch(from_var(--muted)_l_c_h_/_0.2)] px-4 py-3\",\n        className\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      className={cn(\n        \"ml-auto flex items-center gap-1 border-[0.5px] border-[oklch(from_var(--border)_l_c_h_/_0.5)]\",\n        \"bg-[var(--background)] px-1 py-0.5 font-medium font-mono text-[var(--muted-foreground)] text-xs\",\n        \"[&_svg]:shrink-0\",\n        \"max-sm:px-1.5 max-sm:py-[0.1875rem] max-sm:text-[0.8125rem]\",\n        className\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogBackdrop,\n  CommandDialogPopup,\n  CommandDialogPortal,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/command/command.tsx"
    }
  ]
}