{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "dependencies": [
    "lucide-react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/dialog.json",
    "https://taki-ui.com/r/list-box.json",
    "https://taki-ui.com/r/modal.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/command.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { SearchIcon } from \"lucide-react\"\nimport {\n  Autocomplete,\n  Collection,\n  Header,\n  Input,\n  ListBoxSection,\n  ListLayout,\n  Menu,\n  MenuItem,\n  MenuSection,\n  Section,\n  Separator,\n  TextField,\n  useFilter,\n  Virtualizer,\n  type SeparatorProps,\n  type TextFieldProps,\n} from \"react-aria-components\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Modal } from \"@/registry/new-york/ui/modal\"\n\nimport { ListBox, ListBoxItem } from \"./list-box\"\n\ninterface CommandContextValue {\n  filter: (string: string, substring: string) => boolean\n  value?: string\n  onValueChange?: (value: string) => void\n}\n\nconst CommandContext = React.createContext<CommandContextValue | null>(null)\n\nfunction useCommandContext() {\n  const context = React.useContext(CommandContext)\n  if (!context) {\n    throw new Error(\n      \"Command components must be used within a Command component\"\n    )\n  }\n  return context\n}\n\ninterface CommandProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string\n  onValueChange?: (value: string) => void\n  filter?: CommandContextValue[\"filter\"]\n  filterBehavior?: \"contains\" | \"startsWith\"\n}\n\nfunction Command({\n  className,\n  value,\n  onValueChange,\n  filterBehavior = \"contains\",\n  children,\n  ...props\n}: CommandProps) {\n  const { contains, startsWith } = useFilter({ sensitivity: \"base\" })\n  const filter = filterBehavior === \"contains\" ? contains : startsWith\n\n  const contextValue = React.useMemo(\n    () => ({ filter, value, onValueChange }),\n    [filter, value, onValueChange]\n  )\n\n  return (\n    <CommandContext.Provider value={contextValue}>\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n          className\n        )}\n        {...props}\n      >\n        <Autocomplete filter={filter}>{children}</Autocomplete>\n      </div>\n    </CommandContext.Provider>\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogTrigger> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogTrigger {...props}>\n      <Modal>\n        <Dialog className={cn(\"w-[600px] overflow-hidden p-0\", className)}>\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{description}</DialogDescription>\n          </DialogHeader>\n          <Command className=\"[&_[data-slot=command-group-heading]]:text-muted-foreground [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:font-medium [&_[data-slot=command-group]]:px-2 [&_[data-slot=command-group]:not([hidden])_~[data-slot=command-group]]:pt-0 [&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input-wrapper]_svg]:h-5 [&_[data-slot=command-input-wrapper]_svg]:w-5 [&_[data-slot=command-input]]:h-12 [&_[data-slot=command-item]]:px-2 [&_[data-slot=command-item]]:py-3 [&_[data-slot=command-item]_svg]:h-5 [&_[data-slot=command-item]_svg]:w-5\">\n            {children}\n          </Command>\n        </Dialog>\n      </Modal>\n    </DialogTrigger>\n  )\n}\n\ninterface CommandInputProps\n  extends Omit<TextFieldProps, \"children\">,\n    Omit<React.ComponentProps<typeof Input>, \"className\"> {\n  inputClassName?: string\n  wrapperClassName?: string\n}\n\nfunction CommandInput({\n  inputClassName,\n  wrapperClassName,\n  placeholder = \"Type a command or search...\",\n  ...props\n}: CommandInputProps) {\n  const { filter } = useCommandContext()\n\n  return (\n    <TextField\n      aria-label=\"Search commands\"\n      className={cn(\n        \"flex h-9 items-center gap-2 border-b px-3\",\n        wrapperClassName\n      )}\n      data-slot=\"command-input-wrapper\"\n      {...props}\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <Input\n        placeholder={placeholder}\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          inputClassName\n        )}\n        data-slot=\"command-input\"\n      />\n    </TextField>\n  )\n}\n\ninterface CommandListProps extends React.ComponentProps<typeof Menu> {\n  emptyMessage?: React.ReactNode\n  enableVirtualization?: boolean\n}\n\nfunction CommandList({\n  className,\n  children,\n  emptyMessage,\n  enableVirtualization = false,\n  ...props\n}: CommandListProps) {\n  if (!enableVirtualization) {\n    return (\n      <Menu\n        data-slot=\"command-list\"\n        className={cn(\n          \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto outline-hidden\",\n          className\n        )}\n        renderEmptyState={() =>\n          emptyMessage && <CommandEmpty>{emptyMessage}</CommandEmpty>\n        }\n        {...props}\n      >\n        <Collection>{children}</Collection>\n      </Menu>\n    )\n  }\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={{\n        estimatedRowHeight: 36,\n        estimatedHeadingHeight: 32,\n        gap: 0,\n        padding: 4,\n      }}\n    >\n      <Menu\n        data-slot=\"command-list\"\n        className={cn(\n          \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto outline-hidden\",\n          className\n        )}\n        renderEmptyState={() =>\n          emptyMessage && <CommandEmpty>{emptyMessage}</CommandEmpty>\n        }\n        {...props}\n      >\n        <Collection>{children}</Collection>\n      </Menu>\n    </Virtualizer>\n  )\n}\n\ninterface CommandEmptyProps {\n  children: React.ReactNode\n  className?: string\n}\n\nfunction CommandEmpty({ children, className }: CommandEmptyProps) {\n  return (\n    <div\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n    >\n      {children}\n    </div>\n  )\n}\n\ninterface CommandGroupProps\n  extends Omit<\n    React.ComponentProps<typeof ListBoxSection<object>>,\n    \"children\"\n  > {\n  heading?: string\n  children: React.ReactNode\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: CommandGroupProps) {\n  return (\n    <MenuSection\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground overflow-hidden p-1\", className)}\n      {...props}\n    >\n      {heading && (\n        <Header\n          data-slot=\"command-group-heading\"\n          className=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\"\n        >\n          {heading}\n        </Header>\n      )}\n      <Collection>{children}</Collection>\n    </MenuSection>\n  )\n}\n\nfunction CommandSeparator({ className, ...props }: SeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\ninterface CommandItemProps\n  extends Omit<React.ComponentProps<typeof MenuItem>, \"children\"> {\n  children: React.ReactNode\n}\n\nfunction CommandItem({ className, children, ...props }: CommandItemProps) {\n  return (\n    <MenuItem\n      data-slot=\"command-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </MenuItem>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}