{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-10",
  "title": "Status picker",
  "description": "Ghost trigger with a colored status dot, issue-tracker style.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-10.tsx",
      "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { useState } from 'react'\n\nconst statuses = [\n  { value: 'backlog', label: 'Backlog', color: 'bg-muted-foreground' },\n  { value: 'todo', label: 'Todo', color: 'bg-blue-500' },\n  { value: 'in-progress', label: 'In Progress', color: 'bg-amber-500' },\n  { value: 'done', label: 'Done', color: 'bg-emerald-500' },\n  { value: 'canceled', label: 'Canceled', color: 'bg-rose-500' },\n]\n\nexport function Command10() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState('in-progress')\n  const selected = statuses.find((status) => status.value === value)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <Button variant=\"ghost\" size=\"sm\" className=\"font-normal\">\n            <span\n              className={cn(\n                'size-2 rounded-full',\n                selected ? selected.color : 'bg-muted-foreground',\n              )}\n            />\n            {selected ? selected.label : 'Set status'}\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-48 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Set status...\" />\n          <CommandList>\n            <CommandEmpty>No status found.</CommandEmpty>\n            <CommandGroup>\n              {statuses.map((status) => (\n                <CommandItem\n                  key={status.value}\n                  value={status.value}\n                  data-checked={value === status.value}\n                  onSelect={(current) => {\n                    setValue(current)\n                    setOpen(false)\n                  }}\n                >\n                  <span className={cn('size-2 rounded-full', status.color)} />\n                  {status.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-10.tsx"
    }
  ],
  "type": "registry:block"
}