{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "Command from the Get IT Done design system.",
  "dependencies": [
    "@radix-ui/react-dialog@^1.3.1",
    "cmdk@^1.1.1",
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/dangling-controls.json",
    "https://zero-design.itdone.de/r/dialog.json",
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/command.tsx",
      "content": "'use client';\n\nimport { type DialogProps } from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\nimport { ArrowRight, Search } from 'lucide-react';\nimport { Fragment, ReactNode, forwardRef, useCallback, useRef } from 'react';\n\nimport { useDanglingControls } from '@/lib/dangling-controls';\nimport { cn } from '@/lib/utils';\nimport { usePreset } from '@/components/ui/labels-context';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\n\nconst Command = forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-surface bg-popover text-popover-foreground',\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\n// Dialog props plus the cmdk root props (shouldFilter, filter, loop, value, label ...), forwarded to Command.\ninterface CommandDialogProps\n  extends DialogProps,\n    Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive>, 'children' | 'className' | keyof DialogProps> {\n  // Extra classes for the Command root.\n  commandClassName?: string;\n}\n\nconst CommandDialog = ({ children, open, defaultOpen, onOpenChange, modal, commandClassName, ...commandProps }: CommandDialogProps) => {\n  return (\n    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command {...commandProps} className={cn(\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\", commandClassName)}>\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst CommandInput = forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n    icon?: ReactNode;\n    /** Trailing shortcut hint, e.g. `<CommandKbd>⌘/</CommandKbd>`. */\n    shortcut?: ReactNode;\n  }\n>(({ className, icon, shortcut, ...props }, ref) => {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const setRefs = useCallback(\n    (node: HTMLInputElement | null) => {\n      inner.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    },\n    [ref],\n  );\n  useDanglingControls(\n    inner,\n    (node) => node.closest('[cmdk-root]'),\n    // cmdk keeps aria-expanded true; it follows the list instead.\n    (node, exists) => node.setAttribute('aria-expanded', String(exists)),\n  );\n  return (\n    <div className=\"flex items-center border-b border-solid border-hairline px-3\" cmdk-input-wrapper=\"\">\n      {icon ? icon : <Search className=\"mr-2 h-4 w-4 shrink-0 text-muted-foreground\" />}\n      <CommandPrimitive.Input\n        ref={setRefs}\n        className={cn(\n          'flex h-11 w-full rounded-control bg-transparent py-3 text-sm max-sm:text-[max(16px,var(--typo-input-text-size,1rem))] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-disabled',\n          className,\n        )}\n        {...props}\n      />\n      {shortcut}\n    </div>\n  );\n});\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={cn('overflow-y-auto overflow-x-hidden p-1', className)} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />);\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-[6px] [&_[cmdk-group-heading]]:text-muted-foreground !block',\n        zero ? '[&_[cmdk-group-heading]]:typography-kpi-label-strong' : '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\n// Not the cmdk separator: it forces role=\"separator\", which is not allowed as a direct child of the listbox (aria-required-children). The decorative line is hidden from assistive technology and follows the same rule as cmdk (hidden while searching).\nconst CommandSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { alwaysRender?: boolean }>(\n  ({ className, alwaysRender, ...props }, ref) => {\n    const idle = useCommandState((state) => !state.search);\n    if (!alwaysRender && !idle) return null;\n    return <div ref={ref} role=\"none\" cmdk-separator=\"\" className={cn('-mx-1 h-px bg-border-subtle', className)} {...props} />;\n  },\n);\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      className={cn(\n        'relative',\n        'flex',\n        'cursor-pointer',\n        'select-none',\n        'items-center',\n        zero ? 'h-row-compact gap-3 rounded-control px-3 typography-ui font-regular' : 'gap-[10px] rounded-item px-2 py-[6px] text-sm font-medium',\n        'outline-none',\n        'hover:bg-muted',\n        'aria-selected:bg-muted',\n        'data-[disabled=true]:pointer-events-none',\n        'data-[disabled=true]:opacity-disabled',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\n// Key chip for a shortcut (Figma \"_Command shortcut\"). Decorative: the item carries the accessible name.\nconst CommandKbd = ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (\n  <kbd\n    aria-hidden\n    className={cn(\n      'typography-micro inline-flex h-5 min-w-icon-lg items-center justify-center rounded-item bg-muted px-1 font-sans text-text-muted',\n      className,\n    )}\n    {...props}\n  />\n);\nCommandKbd.displayName = 'CommandKbd';\n\n// Keys of one shortcut, joined by an arrow for sequences: `<CommandKeys keys={['⌘K', 'P']} />`.\nconst CommandKeys = ({ keys, className }: { keys: string[]; className?: string }) => (\n  <span className={cn('ml-auto flex items-center gap-1', className)}>\n    {keys.map((key, index) => (\n      <Fragment key={`${key}-${index}`}>\n        {index > 0 && <ArrowRight aria-hidden className=\"h-icon-2xs w-icon-2xs text-icon-subtle\" />}\n        <CommandKbd>{key}</CommandKbd>\n      </Fragment>\n    ))}\n  </span>\n);\nCommandKeys.displayName = 'CommandKeys';\n\n// Two-line item body: title with supporting text underneath (Figma Text=Stacked).\nconst CommandItemText = ({\n  title,\n  description,\n  className,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n  className?: string;\n}) => (\n  <span className={cn('flex min-w-0 flex-col', className)}>\n    <span className=\"typography-ui-medium truncate text-text-default\">{title}</span>\n    {description && <span className=\"typography-ui-sm truncate text-text-subtle-on-muted\">{description}</span>}\n  </span>\n);\nCommandItemText.displayName = 'CommandItemText';\n\n// Empty result with a message and optional follow-up actions (Figma Type=Empty state).\nconst CommandEmptyState = ({\n  title,\n  description,\n  actions,\n  className,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n}) => (\n  <div role=\"status\" className={cn('flex flex-col items-center gap-2 px-6 py-8 text-center', className)}>\n    <p className=\"typography-ui-semibold m-0 text-text-default\">{title}</p>\n    {description && <p className=\"typography-ui m-0 text-text-subtle\">{description}</p>}\n    {actions && <div className=\"mt-2 flex items-center gap-2\">{actions}</div>}\n  </div>\n);\nCommandEmptyState.displayName = 'CommandEmptyState';\n\nexport {\n  CommandEmptyState,\n  CommandItemText,\n  CommandKbd,\n  CommandKeys,\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}