{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "author": "SAASTRO <https://saastro.io>",
  "description": "Lista con buscador y teclado sobre Base UI Autocomplete. Misma API que el command de shadcn, sin cmdk (que trae Radix).",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@saastro/dialog"
  ],
  "files": [
    {
      "path": "registry/default/ui/command.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\n// Command sobre Base UI Autocomplete, con la API del command.tsx de shadcn\n// (cmdk) en lo que usa @saastro/forms: `shouldFilter`, `CommandInput` con\n// `onValueChange`, `CommandItem` con `value` + `onSelect(value)`. cmdk trae\n// @radix-ui/react-dialog de dependencia; éste no trae nada de Radix.\n//\n// Los items se declaran como children (igual que en cmdk): cada CommandItem\n// se registra en el contexto y el filtro lo decide Command, no Base UI. Por\n// eso el Root va en `mode=\"none\"` (Base UI no filtra) e `inline open` (la\n// lista vive en el sitio, sin popup propio).\n\ntype CommandFilter = (\n  value: string,\n  search: string,\n  keywords?: string[],\n) => number;\n\nconst defaultFilter: CommandFilter = (value, search, keywords) => {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return 1;\n  const haystack = [value, ...(keywords ?? [])].join(\" \").toLowerCase();\n  return haystack.includes(needle) ? 1 : 0;\n};\n\ntype RegisteredItem = { value: string; keywords?: string[] };\n\ntype CommandContextValue = {\n  search: string;\n  isVisible: (item: RegisteredItem) => boolean;\n  register: (id: string, item: RegisteredItem) => () => void;\n  visibleCount: number;\n  setInputHandler: (handler: ((search: string) => void) | undefined) => void;\n  setControlledSearch: (search: string | undefined) => void;\n};\n\nconst CommandContext = React.createContext<CommandContextValue | null>(null);\n\nfunction useCommand(part: string) {\n  const ctx = React.useContext(CommandContext);\n  // Sin `<…>` en el texto: Semgrep (html-in-template-string) lo marca en cada\n  // consumidor, y un `// nosemgrep` allí lo borra el siguiente `shadcn add --overwrite`.\n  if (!ctx) throw new Error(`${part} tiene que ir dentro de Command`);\n  return ctx;\n}\n\ntype CommandProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  /** Si es false, Command no filtra: se pintan todos los items (búsqueda en servidor). */\n  shouldFilter?: boolean;\n  /** Devuelve > 0 si el item casa con la búsqueda. Por defecto, subcadena sin mayúsculas. */\n  filter?: CommandFilter;\n  /** Etiqueta accesible de la lista. */\n  label?: string;\n};\n\nfunction Command({\n  className,\n  shouldFilter = true,\n  filter = defaultFilter,\n  label,\n  children,\n  ...props\n}: CommandProps) {\n  const [search, setSearch] = React.useState(\"\");\n  const [controlledSearch, setControlledSearch] = React.useState<\n    string | undefined\n  >();\n  const [items, setItems] = React.useState<ReadonlyMap<string, RegisteredItem>>(\n    () => new Map(),\n  );\n  const inputHandler = React.useRef<((search: string) => void) | undefined>(\n    undefined,\n  );\n\n  const effectiveSearch = controlledSearch ?? search;\n\n  const register = React.useCallback((id: string, item: RegisteredItem) => {\n    setItems((prev) => {\n      const next = new Map(prev);\n      next.set(id, item);\n      return next;\n    });\n    return () =>\n      setItems((prev) => {\n        const next = new Map(prev);\n        next.delete(id);\n        return next;\n      });\n  }, []);\n\n  const isVisible = React.useCallback(\n    (item: RegisteredItem) =>\n      !shouldFilter || filter(item.value, effectiveSearch, item.keywords) > 0,\n    [shouldFilter, filter, effectiveSearch],\n  );\n\n  let visibleCount = 0;\n  for (const item of items.values()) if (isVisible(item)) visibleCount++;\n\n  const ctx = React.useMemo<CommandContextValue>(\n    () => ({\n      search: effectiveSearch,\n      isVisible,\n      register,\n      visibleCount,\n      setInputHandler: (handler) => {\n        inputHandler.current = handler;\n      },\n      setControlledSearch,\n    }),\n    [effectiveSearch, isVisible, register, visibleCount],\n  );\n\n  return (\n    <CommandContext.Provider value={ctx}>\n      <AutocompletePrimitive.Root\n        inline\n        open\n        mode=\"none\"\n        autoHighlight=\"always\"\n        value={effectiveSearch}\n        onValueChange={(value, details) => {\n          // En cmdk la búsqueda solo la cambia quien teclea. Base UI 1.8, en\n          // inline, no escribe el item elegido en el input (medido: solo\n          // llega `input-change`); el guard es por si una versión lo hace.\n          if (details.reason === \"item-press\") return;\n          setSearch(value);\n          inputHandler.current?.(value);\n        }}\n      >\n        <div\n          data-slot=\"command\"\n          aria-label={label}\n          className={cn(\n            \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </AutocompletePrimitive.Root>\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}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-group-heading]:px-2 **:data-[slot=command-group-heading]:font-medium **:data-[slot=command-input-wrapper]:h-12 **:data-[slot=command-input]:h-12 **:data-[slot=command-item]:px-2 **:data-[slot=command-item]:py-3\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\ntype CommandInputProps = Omit<\n  AutocompletePrimitive.Input.Props,\n  \"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n  /** Búsqueda controlada, como en cmdk. */\n  value?: string;\n  /** Se llama con el texto que teclea el usuario (no al elegir un item). */\n  onValueChange?: (search: string) => void;\n};\n\nfunction CommandInput({\n  className,\n  value,\n  onValueChange,\n  ...props\n}: CommandInputProps) {\n  const { setInputHandler, setControlledSearch } = useCommand(\"CommandInput\");\n\n  React.useEffect(() => {\n    setInputHandler(onValueChange);\n    return () => setInputHandler(undefined);\n  }, [onValueChange, setInputHandler]);\n\n  React.useEffect(() => {\n    setControlledSearch(value);\n  }, [value, setControlledSearch]);\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <AutocompletePrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props) {\n  return (\n    <AutocompletePrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { visibleCount } = useCommand(\"CommandEmpty\");\n  if (visibleCount > 0) return null;\n  return (\n    <div\n      data-slot=\"command-empty\"\n      role=\"presentation\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: AutocompletePrimitive.Group.Props & { heading?: React.ReactNode }) {\n  return (\n    <AutocompletePrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        // Como en cmdk: un grupo sin items visibles no se pinta.\n        \"overflow-hidden p-1 text-foreground not-has-data-[slot=command-item]:hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {heading != null && (\n        <AutocompletePrimitive.GroupLabel\n          data-slot=\"command-group-heading\"\n          className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n        >\n          {heading}\n        </AutocompletePrimitive.GroupLabel>\n      )}\n      {children}\n    </AutocompletePrimitive.Group>\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  alwaysRender = false,\n  ...props\n}: AutocompletePrimitive.Separator.Props & { alwaysRender?: boolean }) {\n  const { search } = useCommand(\"CommandSeparator\");\n  if (search && !alwaysRender) return null;\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\ntype CommandItemProps = Omit<\n  AutocompletePrimitive.Item.Props,\n  \"value\" | \"onSelect\"\n> & {\n  /** Lo que se filtra y lo que recibe `onSelect`, tal cual (sin pasar a minúsculas). */\n  value: string;\n  keywords?: string[];\n  onSelect?: (value: string) => void;\n};\n\nfunction CommandItem({\n  className,\n  value,\n  keywords,\n  onSelect,\n  onClick,\n  ...props\n}: CommandItemProps) {\n  const { register, isVisible } = useCommand(\"CommandItem\");\n  const id = React.useId();\n  const keywordsKey = keywords?.join(\"\\u0000\");\n\n  React.useLayoutEffect(\n    () => register(id, { value, keywords }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [id, value, keywordsKey, register],\n  );\n\n  if (!isVisible({ value, keywords })) return null;\n\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"command-item\"\n      value={value}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!props.disabled) onSelect?.(value);\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-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 CommandShortcut({\n  className,\n  ...props\n}: 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\",\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:ui",
      "target": "@ui/command.tsx"
    }
  ],
  "meta": {
    "group": "Forms",
    "iframeHeight": "420px"
  },
  "docs": "Primitivo sobre Base UI Autocomplete (inline). Sustituye al command de shadcn sin cmdk: `Command shouldFilter`, `CommandInput onValueChange`, `CommandItem value onSelect(value)`. El filtro por defecto es subcadena sobre `value` y `keywords`, no el fuzzy de cmdk. El resaltado es `data-highlighted`, no `data-selected=true`. Compuesto: va en isla `.tsx`, nunca en .astro.",
  "categories": [
    "ui",
    "forms"
  ],
  "type": "registry:ui"
}