{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "assign-picker",
  "type": "registry:ui",
  "title": "Assign picker",
  "description": "Assignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/assign-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/assign-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\n\ntype Person = { id: string; name: string }\n\n/** A list of teammates to assign something to; one option is highlighted and keyboard focusable. */\ntype AssignPickerProps = {\n  people?: Person[]\n  /** Controlled selection. Leave undefined for an uncontrolled picker. */\n  value?: string\n  /** Initial selection for the uncontrolled picker. */\n  defaultValue?: string\n  onChange?: (id: string) => void\n  className?: string\n}\n\nconst SAMPLE_PEOPLE: Person[] = [\n  { id: \"maya\", name: \"Maya Chen\" },\n  { id: \"theo\", name: \"Theo Okafor\" },\n  { id: \"priya\", name: \"Priya Raman\" },\n  { id: \"sam\", name: \"Sam Lowe\" },\n  { id: \"ada\", name: \"Ada Novak\" },\n]\n\nfunction AssignPicker({\n  people = SAMPLE_PEOPLE,\n  value,\n  defaultValue = \"theo\",\n  onChange,\n  className,\n}: AssignPickerProps) {\n  const [inner, setInner] = React.useState(defaultValue)\n  const current = value ?? inner\n  return (\n    <div data-slot=\"assign-picker\" role=\"listbox\" aria-label=\"Assignee\" className={cn(\"w-56 rounded-xl border border-border bg-raised p-1\", className)}>\n      {people.map((p) => {\n        const on = p.id === current\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={on}\n            className={cn(\n              \"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm outline-none hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\",\n              on && \"bg-sunken\"\n            )}\n            onClick={() => {\n              if (value === undefined) setInner(p.id)\n              onChange?.(p.id)\n            }}\n          >\n            <Avatar className=\"size-6\">\n              <AvatarFallback className=\"text-[9px]\">{p.name.slice(0, 2).toUpperCase()}</AvatarFallback>\n            </Avatar>\n            {p.name}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\nexport { AssignPicker }\nexport type { AssignPickerProps, Person as AssignPickerPerson }\n"
    }
  ]
}