{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "author": "@fma-ui/ui",
  "description": "A searchable list of commands or actions, filtered live as you type. Export CommandDialog wraps it in a Dialog for a full command-palette (⌘K) pattern. Pass `CommandEmpty` through `CommandList`'s `renderEmptyState`, not as a child: the list only accepts items, groups and separators.",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0",
    "react-aria-components@^1.21.1"
  ],
  "registryDependencies": [
    "@fma-ui/dialog",
    "@fma-ui/input-group"
  ],
  "files": [
    {
      "path": "src/core/command/command.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\nimport { CheckIcon, SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n  Autocomplete,\n  type AutocompleteProps,\n  Collection,\n  composeRenderProps,\n  Header,\n  Input,\n  type InputProps,\n  Menu,\n  MenuItem,\n  type MenuItemProps,\n  type MenuProps,\n  MenuSection,\n  type MenuSectionProps,\n  SearchField,\n  Separator,\n  type SeparatorProps,\n  useFilter,\n} from \"react-aria-components\";\nimport { Dialog, DialogDescription, DialogHeader, DialogTitle } from \"@/core/dialog/dialog\";\nimport { InputGroup, InputGroupAddon } from \"@/core/input-group/input-group\";\n\nfunction Command({\n  className,\n  dir,\n  style,\n  ...props\n}: Omit<AutocompleteProps, \"className\" | \"style\"> & {\n  className?: string;\n  dir?: React.HTMLAttributes<HTMLDivElement>[\"dir\"];\n  style?: React.CSSProperties;\n}) {\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  return (\n    <div\n      data-slot=\"command\"\n      dir={dir}\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n        className,\n      )}\n      style={style}\n    >\n      <Autocomplete {...props} filter={props.filter || contains}>\n        {props.children}\n      </Autocomplete>\n    </div>\n  );\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  open,\n  onOpenChange,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof Dialog>,\n  \"children\" | \"className\" | \"isOpen\" | \"onOpenChange\"\n> & {\n  title?: string;\n  description?: string;\n  open?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <Dialog\n      isOpen={open}\n      onOpenChange={onOpenChange}\n      className={cn(\"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\", className)}\n      showCloseButton={showCloseButton}\n      isDismissable\n      {...props}\n    >\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      {children}\n    </Dialog>\n  );\n}\n\nfunction CommandInput({ className, ...props }: InputProps) {\n  return (\n    <SearchField\n      autoFocus\n      aria-label={props.placeholder || \"Search\"}\n      data-slot=\"command-input-wrapper\"\n      className=\"p-1 pb-0\"\n    >\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <Input\n          {...props}\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-search-cancel-button]:hidden\",\n            className,\n          )}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </SearchField>\n  );\n}\n\nfunction CommandList<T extends object>({ className, ...props }: MenuProps<T>) {\n  return (\n    <Menu\n      {...props}\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup<T extends object>({\n  className,\n  children,\n  items,\n  heading,\n  ...props\n}: MenuSectionProps<T> & { heading?: string }) {\n  return (\n    <MenuSection\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {heading && <Header cmdk-group-heading=\"\">{heading}</Header>}\n      <Collection items={items}>{children}</Collection>\n    </MenuSection>\n  );\n}\n\nfunction CommandSeparator({ className, ...props }: SeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem<T extends object>({\n  className,\n  children,\n  textValue,\n  ...props\n}: MenuItemProps<T>) {\n  return (\n    <MenuItem\n      {...props}\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-focused:bg-accent data-focused:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-accent data-selected:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-focused:*:[svg]:text-accent-foreground data-selected:*:[svg]:text-accent-foreground\",\n        className,\n      )}\n      textValue={textValue || (typeof children === \"string\" ? children : undefined)}\n    >\n      {composeRenderProps(children, (children) => (\n        <>\n          {children}\n          <CheckIcon className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n        </>\n      ))}\n    </MenuItem>\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-focused/command-item:text-foreground group-data-selected/command-item:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:component",
      "target": "components/fma-ui/command.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "customized",
    "tags": [
      "react-aria",
      "search",
      "command-palette",
      "overlay"
    ]
  },
  "categories": [
    "overlay"
  ],
  "type": "registry:ui"
}