{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "project-status-picker",
  "title": "Project Status Picker",
  "description": "A compact status selector optimized for efficiency. Features custom hotkey logic for instant selection, rich item rendering with status colors, and contextual tooltips. Inspired by Linear.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/button",
    "@lumi-ui/combobox",
    "@lumi-ui/tooltip",
    "@lumi-ui/separator"
  ],
  "files": [
    {
      "path": "registry/components/project-status-picker.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/ui/combobox\";\nimport { Separator } from \"@/registry/ui/separator\";\nimport {\n  createTooltipHandle,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/ui/tooltip\";\nimport {\n  Check,\n  CheckCircle2,\n  Circle,\n  CircleDashed,\n  CircleDot,\n  XCircle,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst projectStatusTooltipHandle = createTooltipHandle();\n\nexport function ProjectStatusPicker() {\n  const [open, setOpen] = React.useState(false);\n  const [projectStatus, setProjectStatus] =\n    React.useState<ProjectStatus | null>(statuses[0]);\n  const handleInputKeyDown = (e: React.KeyboardEvent) => {\n    if (/^[1-5]$/.test(e.key)) {\n      e.preventDefault();\n      const index = parseInt(e.key, 10) - 1;\n      const statusToSelect = statuses[index];\n\n      if (statusToSelect) {\n        setProjectStatus(statusToSelect);\n        setOpen(false);\n      }\n    }\n  };\n\n  return (\n    <>\n      <Combobox\n        autoHighlight\n        items={statuses}\n        itemToStringLabel={(status: ProjectStatus) => status.label}\n        onOpenChange={setOpen}\n        onValueChange={(val) => {\n          setProjectStatus(val);\n        }}\n        open={open}\n        value={projectStatus}\n      >\n        <ComboboxTrigger\n          render={\n            <TooltipTrigger\n              handle={projectStatusTooltipHandle}\n              render={\n                <Button\n                  className=\"text-xs data-popup-open:bg-accent dark:data-popup-open:bg-accent/30 min-w-24 rounded-sm\"\n                  size=\"sm\"\n                  variant=\"glow\"\n                >\n                  <ComboboxValue>\n                    {(item) => {\n                      if (!item) return <span>Select status</span>;\n                      const Icon = item.icon;\n                      return (\n                        <>\n                          <Icon className={`size-4 ${item.color}`} />\n                          <span>{item.label}</span>\n                        </>\n                      );\n                    }}\n                  </ComboboxValue>\n                </Button>\n              }\n            />\n          }\n        />\n        <ComboboxContent className=\"rounded-sm\" matchAnchorWidth={false}>\n          <ComboboxInput\n            className=\"px-3 placeholder:text-xs caret-primary\"\n            inputSize=\"sm\"\n            onKeyDown={handleInputKeyDown}\n            placeholder=\"Press 1-5 to change status\"\n            variant=\"ghost\"\n          />\n          <Separator />\n          <ComboboxEmpty>No matching statuses.</ComboboxEmpty>\n          <ComboboxList>\n            {(status: ProjectStatus) => (\n              <ComboboxItem\n                className={cn(\n                  \"flex items-center justify-between text-sm px-4\",\n                  \"data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:before:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1.5 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm\",\n                )}\n                key={status.value}\n                value={status}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <status.icon className={cn(\"size-3.5\", status.color)} />\n                  <span className=\"font-medium\">{status.label}</span>\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  {projectStatus?.value === status.value && (\n                    <Check className=\"size-3.5 text-muted-foreground\" />\n                  )}\n                  <span className=\"font-mono text-xs text-muted-foreground/70\">\n                    {status.count}\n                  </span>\n                </div>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Tooltip\n        disabled={open}\n        disableHoverablePopup\n        handle={projectStatusTooltipHandle}\n      >\n        <TooltipContent\n          className=\"bg-accent text-accent-foreground border border-primary/10 rounded-sm\"\n          showArrow={false}\n          side=\"bottom\"\n          sideOffset={6}\n        >\n          <p>Change project status</p>\n        </TooltipContent>\n      </Tooltip>\n    </>\n  );\n}\n\ntype ProjectStatus = {\n  value: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n  color: string;\n  count: number;\n};\n\nconst statuses: ProjectStatus[] = [\n  {\n    color: \"text-orange-500\",\n    count: 1,\n    icon: CircleDashed,\n    label: \"Backlog\",\n    value: \"backlog\",\n  },\n  {\n    color: \"text-zinc-500\",\n    count: 2,\n    icon: Circle,\n    label: \"Planned\",\n    value: \"planned\",\n  },\n  {\n    color: \"text-yellow-500\",\n    count: 3,\n    icon: CircleDot,\n    label: \"In Progress\",\n    value: \"in-progress\",\n  },\n  {\n    color: \"text-blue-500\",\n    count: 4,\n    icon: CheckCircle2,\n    label: \"Completed\",\n    value: \"completed\",\n  },\n  {\n    color: \"text-zinc-500\",\n    count: 5,\n    icon: XCircle,\n    label: \"Canceled\",\n    value: \"canceled\",\n  },\n];\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "iframeHeight": 500
  },
  "categories": [
    "form-input",
    "dashboard"
  ],
  "type": "registry:component"
}