{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "dependencies": [
    "@base-ui/react",
    "@phosphor-icons/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/command.tsx",
      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { createContext, useContext } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { itemGroupLabel, itemRow, popupDivider, popupSurface } from \"@/lib/recipes\";\n\nimport { Check } from \"@phosphor-icons/react/dist/ssr\";\ntype Density = \"compact\" | \"comfortable\";\n\nconst CommandDensityContext = createContext<Density>(\"comfortable\");\n\nconst CommandCloseContext = createContext<(() => void) | null>(null);\n\n/** Command palette / searchable list built on Base UI Autocomplete (inline mode). */\nexport function Command(\n  props: React.ComponentProps<typeof AutocompletePrimitive.Root>,\n): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Root\n      data-slot=\"command\"\n      inline\n      autoHighlight={false}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandInputProps\n  extends Omit<React.ComponentProps<typeof AutocompletePrimitive.Input>, \"prefix\"> {\n  prefix?: React.ReactNode;\n  /** Trailing node (Kbd hint, chip). Consumers wire click behavior themselves. */\n  action?: React.ReactNode;\n}\n\nexport function CommandInput({\n  className,\n  prefix,\n  action,\n  ...props\n}: CommandInputProps): React.ReactElement {\n  return (\n    <span\n      className=\"relative inline-flex w-full items-center bg-transparent text-ink-muted\"\n      data-slot=\"command-input-wrapper\"\n    >\n      {prefix && (\n        <span className=\"flex shrink-0 items-center ps-4 pe-2 [&_svg]:size-4 [&_svg]:shrink-0\">\n          {prefix}\n        </span>\n      )}\n      <AutocompletePrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"h-12 w-full flex-1 border-none bg-transparent text-small text-ink placeholder:text-ink-subtle outline-none ring-0 focus:outline-none focus:ring-0\",\n          prefix ? \"ps-0\" : \"ps-4\",\n          action ? \"pe-2\" : \"pe-4\",\n          className,\n        )}\n        {...props}\n      />\n      {action && (\n        <span\n          className=\"flex shrink-0 items-center gap-1.5 pe-3 text-mini text-ink-muted\"\n          data-slot=\"command-input-action\"\n        >\n          {action}\n        </span>\n      )}\n    </span>\n  );\n}\n\nexport function CommandList({\n  className,\n  density = \"comfortable\",\n  children,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof AutocompletePrimitive.List>,\n  \"children\"\n> & {\n  density?: Density;\n  children?: React.ReactNode;\n}): React.ReactElement {\n  return (\n    <CommandDensityContext.Provider value={density}>\n      <AutocompletePrimitive.List\n        data-slot=\"command-list\"\n        className={cn(\"max-h-[min(330px,60vh)] overflow-y-auto p-1\", className)}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.List>\n    </CommandDensityContext.Provider>\n  );\n}\n\n/**\n * Base UI's Autocomplete.Empty root stays mounted for aria-live; padding must live on\n * an inner wrapper so the root doesn't reserve vertical space when items exist.\n */\nexport function CommandEmpty({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty data-slot=\"command-empty\" {...props}>\n      <div\n        className={cn(\n          \"px-3 py-6 text-center text-mini text-ink-muted\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AutocompletePrimitive.Empty>\n  );\n}\n\nexport function CommandItem({\n  className,\n  selected,\n  description,\n  prefix,\n  suffix,\n  children,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof AutocompletePrimitive.Item>,\n  \"prefix\" | \"suffix\"\n> & {\n  selected?: boolean;\n  description?: React.ReactNode;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n}): React.ReactElement {\n  const density = useContext(CommandDensityContext);\n\n  // Selected check replaces the suffix: they share the trailing slot.\n  const trailing = selected ? (\n    <Check\n      className=\"ms-auto size-3.5 shrink-0 text-ink-muted\"\n    />\n  ) : suffix ? (\n    <span className=\"ms-auto flex items-center\">{suffix}</span>\n  ) : null;\n\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"command-item\"\n      data-selected={selected ? \"\" : undefined}\n      className={cn(\n        itemRow.base,\n        \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        density === \"compact\"\n          ? itemRow.compact\n          : \"min-h-11 px-3 py-2.5 text-small [&_svg:not([class*='size-'])]:size-[18px]\",\n        className,\n      )}\n      {...props}\n    >\n      {description != null ? (\n        <span className=\"flex w-full flex-col\">\n          <span className=\"flex items-center gap-2\">\n            {prefix}\n            {children}\n            {trailing}\n          </span>\n          <span className=\"mt-0.5 truncate text-mini text-ink-muted\">\n            {description}\n          </span>\n        </span>\n      ) : (\n        <span className=\"flex items-center gap-2\">\n          {prefix}\n          {children}\n          {trailing}\n        </span>\n      )}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function CommandGroup(\n  props: React.ComponentProps<typeof AutocompletePrimitive.Group>,\n): React.ReactElement {\n  return <AutocompletePrimitive.Group data-slot=\"command-group\" {...props} />;\n}\n\nexport function CommandSection({\n  title,\n  label,\n  children,\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof AutocompletePrimitive.Group>, \"children\"> & {\n  title?: React.ReactNode;\n  /** @deprecated Use `title`. */\n  label?: React.ReactNode;\n  children: React.ReactNode;\n}): React.ReactElement {\n  const heading = title ?? label;\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"py-1 first:pt-0 last:pb-0\", className)}\n      data-slot=\"command-section\"\n      {...props}\n    >\n      {heading != null && <CommandGroupLabel>{heading}</CommandGroupLabel>}\n      {children}\n    </AutocompletePrimitive.Group>\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>): React.ReactElement {\n  const density = useContext(CommandDensityContext);\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-slot=\"command-group-label\"\n      className={cn(\n        itemGroupLabel.base,\n        density === \"compact\" ? itemGroupLabel.compact : \"px-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection(\n  props: React.ComponentProps<typeof AutocompletePrimitive.Collection>,\n): React.ReactElement {\n  return <AutocompletePrimitive.Collection {...props} />;\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Separator>): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(popupDivider, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps\n  extends React.ComponentProps<typeof AutocompletePrimitive.Root> {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/** Floating command palette. Escape and outside clicks dismiss. */\nexport function CommandDialog({\n  open,\n  onOpenChange,\n  children,\n  ...commandProps\n}: CommandDialogProps): React.ReactElement | null {\n  const close = () => onOpenChange?.(false);\n\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) close();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          data-slot=\"command-dialog-overlay\"\n          className={cn(\n            \"fixed inset-0 z-[80] bg-white/40 dark:bg-black/40\",\n            \"transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-standard)]\",\n            \"data-starting-style:opacity-0 data-ending-style:opacity-0\",\n          )}\n        />\n        <DialogPrimitive.Popup\n          data-slot=\"command-dialog\"\n          className={cn(\n            popupSurface,\n            \"fixed left-1/2 top-1/2 z-[80] flex w-[calc(100vw-1rem)] max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden max-h-[calc(100dvh-2rem)] sm:max-h-[70vh]\",\n            \"transition-[opacity,scale] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]\",\n            \"data-starting-style:opacity-0 data-starting-style:scale-97\",\n            \"data-ending-style:opacity-0 data-ending-style:scale-97\",\n          )}\n        >\n          <CommandCloseContext.Provider value={close}>\n            <Command {...commandProps}>{children}</Command>\n          </CommandCloseContext.Provider>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport { AutocompletePrimitive };\n",
      "type": "registry:ui",
      "target": "components/ui/command.tsx"
    }
  ],
  "type": "registry:ui"
}