{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "type": "registry:item",
  "title": "Command",
  "description": "A command palette component.",
  "files": [
    {
      "path": "registry/brook/ui/command/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\";\nimport styles from \"./command.module.css\";\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 <Dialog.Backdrop className={cn(styles.backdrop, className)} data-slot=\"command-dialog-backdrop\" {...props} />;\n}\n\nfunction CommandDialogPopup({\n  className,\n  backdropClassName,\n  children,\n  ...props\n}: Dialog.Popup.Props & { backdropClassName?: string; children?: React.ReactNode }) {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop className={backdropClassName} />\n      <Dialog.Popup className={cn(styles.dialogPopup, className)} data-slot=\"command-dialog-popup\" {...props}>\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(styles.root, 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 className={styles.inputWrapper} data-slot=\"command-input-wrapper\">\n      <Autocomplete.Input\n        autoFocus\n        className={cn(styles.input, className)}\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 <Autocomplete.List className={cn(styles.list, className)} data-slot=\"command-list\" {...props} />;\n}\n\nfunction CommandEmpty({ className, children, ...props }: React.ComponentProps<typeof Autocomplete.Empty>) {\n  return (\n    <Autocomplete.Empty className={cn(styles.empty, className)} data-slot=\"command-empty\" {...props}>\n      {children || \"No results found.\"}\n    </Autocomplete.Empty>\n  );\n}\n\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof Autocomplete.Group>) {\n  return <Autocomplete.Group className={cn(styles.group, className)} data-slot=\"command-group\" {...props} />;\n}\n\nfunction CommandGroupLabel({ className, ...props }: React.ComponentProps<typeof Autocomplete.GroupLabel>) {\n  return (\n    <Autocomplete.GroupLabel className={cn(styles.groupLabel, className)} data-slot=\"command-group-label\" {...props} />\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 <Autocomplete.Item className={cn(styles.item, className)} data-slot=\"command-item\" {...props} />;\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof Autocomplete.Separator>) {\n  return (\n    <Autocomplete.Separator className={cn(styles.separator, className)} data-slot=\"command-separator\" {...props} />\n  );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.footer, className)} data-slot=\"command-footer\" {...props} />;\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return <kbd className={cn(styles.shortcut, className)} data-slot=\"command-shortcut\" {...props} />;\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"
    },
    {
      "path": "registry/brook/ui/command/command.module.css",
      "content": ".root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  color: var(--foreground);\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dialog-z);\n  background-color: var(--dialog-overlay);\n  transition: opacity 150ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n  }\n}\n\n.dialogPopup {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: 101;\n  transform: translate(-50%, -50%);\n  max-width: 560px;\n  width: calc(100% - 2rem);\n  border-radius: var(--radius);\n  border: none;\n  box-shadow:\n    0 0 0 0.5px oklch(from var(--border) l c h / 0.5),\n    var(--shadow-lg);\n  background-color: var(--background);\n  transition: all 150ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n\n  @media (max-width: 640px) {\n    width: calc(100% - 2rem);\n    max-width: none;\n  }\n}\n\n.inputWrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  box-shadow: inset 0 -0.5px 0 0 oklch(from var(--border) l c h / 0.5);\n}\n\n.input {\n  display: flex;\n  height: 1.5rem;\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  font-size: 0.875rem;\n  outline: none;\n  color: var(--foreground);\n  caret-color: var(--primary);\n\n  &::placeholder {\n    color: var(--muted-foreground);\n\n    @media (max-width: 640px) {\n      font-size: 0.9375rem;\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (max-width: 640px) {\n    font-size: 0.9375rem;\n  }\n}\n\n.list {\n  max-height: 300px;\n  overflow: auto;\n  padding: 0.25rem;\n  scrollbar-width: thin;\n  scrollbar-color: oklch(from var(--border) l c h / 0.5) transparent;\n  outline: none;\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: oklch(from var(--border) l c h / 0.5);\n    border-radius: 3px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: oklch(from var(--border) l c h / 0.7);\n  }\n\n  @media (max-width: 640px) {\n    max-height: 250px;\n    padding: 0.375rem;\n  }\n}\n\n.item {\n  display: flex;\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n  min-height: 2.5rem;\n  padding: 0.625rem 0.375rem;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: normal;\n  gap: 0.5rem;\n  outline: none;\n  border-radius: 0;\n  border: 1px solid transparent;\n\n  &:hover,\n  &[data-highlighted] {\n    background-color: var(--mix-card-50-bg);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--primary);\n    outline-offset: 2px;\n    z-index: 1;\n  }\n\n  &[data-disabled] {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  svg {\n    height: 1rem;\n    width: 1rem;\n    flex-shrink: 0;\n    color: var(--muted-foreground);\n\n    @media (max-width: 640px) {\n      height: 1.125rem;\n      width: 1.125rem;\n    }\n  }\n\n  @media (max-width: 640px) {\n    min-height: 2.75rem;\n    padding: 0.75rem 0.625rem;\n    font-size: 0.9375rem;\n    gap: 0.75rem;\n  }\n}\n\n.group {\n  overflow: hidden;\n  padding: 0.25rem 0;\n  color: var(--foreground);\n}\n\n.groupLabel {\n  padding: 0.5rem 0.5rem 0.25rem;\n  font-size: 0.71875rem;\n  font-weight: 500;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n\n  @media (max-width: 640px) {\n    font-size: 0.8125rem;\n    padding: 0.5rem 0.625rem 0.25rem;\n  }\n}\n\n.empty {\n  padding: 1.5rem;\n  text-align: center;\n  color: var(--muted-foreground);\n  font-size: 0.875rem;\n\n  @media (max-width: 640px) {\n    padding: 1.75rem 1rem;\n    font-size: 0.9375rem;\n  }\n}\n\n.separator {\n  height: 0.5px;\n  width: 100%;\n  background-color: oklch(from var(--border) l c h / 0.4);\n  margin: 0.25rem 0;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  border-top: 0.5px solid oklch(from var(--border) l c h / 0.5);\n  background-color: oklch(from var(--muted) l c h / 0.2);\n  flex-shrink: 0;\n}\n\n.shortcut {\n  margin-left: auto;\n  padding: 0.125rem 0.25rem;\n  background-color: var(--background);\n  border: 0.5px solid oklch(from var(--border) l c h / 0.5);\n  font-size: 0.75rem;\n  font-family: monospace;\n  color: var(--muted-foreground);\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n\n  svg {\n    flex-shrink: 0;\n  }\n\n  @media (max-width: 640px) {\n    font-size: 0.8125rem;\n    padding: 0.1875rem 0.375rem;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/command/command.module.css"
    }
  ]
}