{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A shadcn-style command component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react"],
  "registryDependencies": ["combobox"],
  "files": [
    {
      "path": "src/components/ui/command.tsx",
      "content": "\"use client\";\n\nimport type { CollectionItem } from \"@ark-ui/react/combobox\";\nimport { Dialog } from \"@ark-ui/react/dialog\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { SearchIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxGroupedList,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxItem,\n  ComboboxItemGroup,\n  ComboboxItemGroupLabel,\n  ComboboxItemText,\n  ComboboxList,\n  type ComboboxListProps,\n  ComboboxPopup,\n  type ComboboxProps,\n  ComboboxSeparator,\n} from \"@/components/ui/combobox\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * In-flow list: default Floating UI positioning takes the popup out of document\n * flow, so a sibling footer in a flex column can sit on top and steal pointer\n * events. This keeps the list in normal flow (dialog + standalone panel).\n */\nconst commandInlinePositioning: ComboboxProps[\"positioning\"] = {\n  gutter: 0,\n  listeners: false,\n  placement: \"bottom-start\",\n  sameWidth: true,\n  updatePosition: async ({ floatingElement }) => {\n    if (!floatingElement) return;\n    const el = floatingElement;\n    el.style.setProperty(\"position\", \"relative\");\n    el.style.setProperty(\"transform\", \"none\");\n    el.style.setProperty(\"top\", \"auto\");\n    el.style.setProperty(\"left\", \"auto\");\n    el.style.setProperty(\"right\", \"auto\");\n    el.style.setProperty(\"bottom\", \"auto\");\n    el.style.setProperty(\"width\", \"100%\");\n    el.style.setProperty(\"min-width\", \"0\");\n  },\n};\n\nexport const CommandDialog = (props: Dialog.RootProps) => (\n  <Dialog.Root {...props} />\n);\n\nexport const CommandDialogTrigger = ({\n  className,\n  ...props\n}: Dialog.TriggerProps) => (\n  <Dialog.Trigger className={cn(className)} {...props} />\n);\n\nexport const CommandDialogPortal = ({\n  ...props\n}: ComponentProps<typeof Portal>) => <Portal {...props} />;\n\nexport const CommandDialogBackdrop = ({\n  className,\n  ...props\n}: Dialog.BackdropProps) => (\n  <Dialog.Backdrop\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm transition-opacity duration-200 dark:bg-black/50 dark:backdrop-blur-md data-[state=closed]:opacity-0 data-[state=open]:opacity-100 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:dark:bg-black/35\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type CommandDialogPopupProps = Dialog.ContentProps & {\n  backdropClassName?: string;\n  positionerClassName?: string;\n};\n\nexport const CommandDialogPopup = ({\n  backdropClassName,\n  children,\n  className,\n  positionerClassName,\n  ...contentProps\n}: CommandDialogPopupProps) => (\n  <Portal>\n    <CommandDialogBackdrop className={backdropClassName} />\n    <Dialog.Positioner\n      className={cn(\n        \"fixed inset-0 z-50 flex items-start justify-center overscroll-y-none p-4 pt-[min(15vh,8rem)] sm:pt-24\",\n        positionerClassName,\n      )}\n    >\n      <Dialog.Content\n        className={cn(\n          \"relative z-50 flex max-h-[min(calc(100dvh-2rem),32rem)] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none transition-[opacity,transform] duration-150 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=open]:opacity-100\",\n          className,\n        )}\n        {...contentProps}\n      >\n        {children}\n      </Dialog.Content>\n    </Dialog.Positioner>\n  </Portal>\n);\n\nexport const Command = <T extends CollectionItem = CollectionItem>({\n  autoFocus = true,\n  className,\n  closeOnSelect = false,\n  disableLayer = true,\n  inputBehavior = \"autohighlight\",\n  positioning,\n  selectionBehavior = \"clear\",\n  ...props\n}: ComboboxProps<T>) => (\n  <Combobox\n    autoFocus={autoFocus}\n    className={cn(\"flex min-h-0 flex-1 flex-col\", className)}\n    closeOnSelect={closeOnSelect}\n    disableLayer={disableLayer}\n    inputBehavior={inputBehavior}\n    positioning={positioning ?? commandInlinePositioning}\n    selectionBehavior={selectionBehavior}\n    {...props}\n  />\n);\n\nexport const CommandInput = ({\n  className,\n  showClear = false,\n  showIndicator = false,\n  size = \"lg\",\n  startAddon = (\n    <SearchIcon\n      aria-hidden\n      className=\"size-4 text-muted-foreground opacity-80\"\n    />\n  ),\n  ...props\n}: ComboboxInputProps) => (\n  <ComboboxInput\n    className={cn(\n      \"rounded-none border-0 border-border border-b shadow-none has-focus-within:border-border has-focus-within:ring-0 has-focus-within:ring-offset-0\",\n      className,\n    )}\n    showClear={showClear}\n    showIndicator={showIndicator}\n    size={size}\n    startAddon={startAddon}\n    {...props}\n  />\n);\n\nexport const CommandPopup = ({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxPopup>) => (\n  <ComboboxPopup\n    disablePortal\n    className={cn(\n      \"max-h-none min-h-0 w-full flex-1 rounded-none border-0 bg-transparent p-0 shadow-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const CommandList = <T extends CollectionItem = CollectionItem>({\n  className,\n  ...props\n}: ComboboxListProps<T>) => (\n  <ComboboxList\n    className={cn(\n      \"max-h-[min(280px,var(--available-height,50vh))] gap-0 overflow-y-auto overscroll-contain p-1 outline-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const CommandGroupedList = ComboboxGroupedList;\n\nexport const CommandEmpty = ({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxEmpty>) => (\n  <ComboboxEmpty\n    className={cn(\"rounded-none py-6 text-sm\", className)}\n    {...props}\n  />\n);\n\nexport const CommandGroup = ComboboxItemGroup;\n\nexport const CommandGroupLabel = ({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxItemGroupLabel>) => (\n  <ComboboxItemGroupLabel\n    className={cn(\n      \"px-2 py-1.5 text-[0.6875rem] uppercase tracking-wide\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const CommandItem = ({\n  className,\n  ...props\n}: ComponentProps<typeof ComboboxItem>) => (\n  <ComboboxItem\n    className={cn(\n      \"rounded-md px-2 py-2 hover:bg-accent hover:text-accent-foreground\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const CommandItemText = ComboboxItemText;\n\nexport const CommandSeparator = ({\n  className,\n  ...props\n}: ComponentProps<\"div\">) => (\n  <ComboboxSeparator className={cn(\"my-2\", className)} {...props} />\n);\n\nexport const CommandShortcut = ({\n  className,\n  ...props\n}: ComponentProps<\"span\">) => (\n  <span\n    className={cn(\n      \"ml-auto shrink-0 text-muted-foreground text-xs tracking-wide tabular-nums\",\n      className,\n    )}\n    data-slot=\"command-shortcut\"\n    {...props}\n  />\n);\n\nexport const CommandFooter = ({\n  className,\n  ...props\n}: ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex flex-wrap items-center justify-between gap-3 border-border border-t bg-muted/30 px-3 py-2 text-muted-foreground text-xs\",\n      className,\n    )}\n    data-slot=\"command-footer\"\n    {...props}\n  />\n);\n\nexport const CommandPanel = ({\n  className,\n  ...props\n}: ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex max-h-[min(24rem,70vh)] flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-md\",\n      className,\n    )}\n    data-slot=\"command-panel\"\n    {...props}\n  />\n);\n\nexport {\n  useDialog as useCommandDialog,\n  useDialogContext as useCommandDialogContext,\n} from \"@ark-ui/react/dialog\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/command.tsx"
    }
  ],
  "type": "registry:ui"
}