{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command","title":"Command","description":"Searchable keyboard-first action collection.","dependencies":[],"registryDependencies":["@siteplane/base","@siteplane/autocomplete","@siteplane/dialog","@siteplane/kbd","@siteplane/separator"],"files":[{"path":"packages/ui/src/components/command/command.tsx","content":"\"use client\";\n\nimport type * as React from \"react\";\n\nimport {\n  DialogPopup,\n  DialogPrimitive as CommandDialogPrimitive,\n} from \"../dialog\";\nimport { KitDialogPopup } from \"../dialog/dialog-internal\";\nimport { Kbd } from \"../kbd\";\nimport { Separator } from \"../separator\";\nimport {\n  type SiteplaneControlSize,\n  useSiteplaneUI,\n} from \"../../system/provider/siteplane-ui-provider\";\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\nimport {\n  Autocomplete,\n  type AutocompletePrimitive,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"../autocomplete\";\nimport {\n  KitAutocompleteInput,\n  KitAutocompleteItem,\n} from \"../autocomplete/autocomplete-internal\";\n\nexport {\n  Dialog as CommandDialog,\n  DialogPortal as CommandDialogPortal,\n  DialogCreateHandle as CommandCreateHandle,\n  DialogTrigger as CommandDialogTrigger,\n  DialogBackdrop as CommandDialogBackdrop,\n  DialogViewport as CommandDialogViewport,\n} from \"../dialog\";\n\nexport function CommandDialogPopup(\n  props: React.ComponentProps<typeof DialogPopup>,\n): React.ReactElement {\n  return (\n    <KitDialogPopup\n      aria-label=\"Command palette\"\n      showCloseButton={false}\n      profile=\"command\"\n      data-slot=\"command-dialog-popup\"\n      {...props}\n    />\n  );\n}\n\nexport const Command: typeof Autocomplete = <ItemValue,>({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: Omit<AutocompletePrimitive.Root.Props<ItemValue>, \"items\"> & {\n  items?: readonly ItemValue[] | undefined;\n}): React.ReactElement => {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n};\n\n/**\n * The search row follows the control size, as the results below it do: 40, 44,\n * 48 and 60 px from sm to xl, the palette's 48 px at the default lg (Lukas,\n * 13 October 2026).\n */\nconst commandInputHeights = {\n  sm: \"h-10\",\n  md: \"h-11\",\n  lg: \"h-12\",\n  xl: \"h-15\",\n} as const satisfies Record<SiteplaneControlSize, string>;\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  size,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  // The row follows the provider; a size given to the input sizes its text.\n  const { controlSize } = useSiteplaneUI();\n  return (\n    <div\n      className={cn(\n        \"sp-command-input\",\n        \"relative flex shrink-0 items-center px-5\",\n        commandInputHeights[controlSize],\n      )}\n      data-size={controlSize}\n      data-slot=\"command-input\"\n    >\n      <KitAutocompleteInput\n        aria-label=\"Search commands\"\n        className={className}\n        placeholder={placeholder}\n        size={size ?? controlSize}\n        profile=\"command\"\n        unstyled\n        {...props}\n      />\n      <Separator className=\"absolute inset-x-0 bottom-0\" />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-1 not-empty:p-1\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"command-panel\", props),\n        \"relative flex min-h-0 flex-1 flex-col overflow-hidden\",\n        className,\n      )}\n      data-slot=\"command-panel\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  // The rows follow the control size (design-rework.css); an xl row writes in\n  // 16 px, so its icon grows to 18 px.\n  const { controlSize } = useSiteplaneUI();\n  return (\n    <KitAutocompleteItem\n      className={cn(\n        controlSize === \"xl\" && \"sm:[&_svg:not([class*='size-'])]:size-4.5\",\n        className,\n      )}\n      data-size={controlSize}\n      profile=\"command\"\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <Kbd\n      className={cn(\"ms-auto\", className)}\n      data-command-shortcut=\"\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"command-footer\", props),\n        \"relative flex shrink-0 items-center justify-between gap-2 px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    >\n      <Separator className=\"absolute inset-x-0 top-0\" />\n      {children}\n    </div>\n  );\n}\n\nexport { CommandDialogPrimitive };\n","type":"registry:ui","target":"~/src/siteplane/components/command/command.tsx"},{"path":"packages/ui/src/components/command/index.ts","content":"export * from \"./command\";\n","type":"registry:ui","target":"~/src/siteplane/components/command/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/command.md","categories":["Navigation"],"meta":{"avoidWhen":["Avoid for a short fixed list of actions; use Menu.","Avoid for text suggestions in a form field; use Autocomplete."],"description":"Searchable keyboard-first action collection.","knownLimitations":["Command registers no global shortcut, runs no command, keeps no history and navigates nothing by itself; the application wires these up."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["command"],"useWhen":["Use for a searchable list of actions that people run with the keyboard, inline or in a dialog."]}}