{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-11",
  "title": "Pick teammates",
  "description": "Scrollable avatar rows with selection; Invite footer.",
  "dependencies": [],
  "registryDependencies": [
    "dialog",
    "button",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/patterns/dialog/dialog-11.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { CheckIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport { cn } from '@/lib/utils'\n\nconst teammates = [\n  {\n    id: 'sarah',\n    name: 'Sarah Chen',\n    role: 'Design lead',\n    avatar:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80',\n    initials: 'SC',\n  },\n  {\n    id: 'marcus',\n    name: 'Marcus Lee',\n    role: 'Engineering',\n    avatar:\n      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80',\n    initials: 'ML',\n  },\n  {\n    id: 'priya',\n    name: 'Priya Patel',\n    role: 'Product',\n    avatar:\n      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80',\n    initials: 'PP',\n  },\n  {\n    id: 'jordan',\n    name: 'Jordan Kim',\n    role: 'Marketing',\n    avatar:\n      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80',\n    initials: 'JK',\n  },\n  {\n    id: 'emma',\n    name: 'Emma Wilson',\n    role: 'Support',\n    avatar:\n      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=200&q=80',\n    initials: 'EW',\n  },\n]\n\nexport function Dialog11() {\n  const [selected, setSelected] = useState<string[]>(['sarah', 'marcus'])\n\n  function toggle(id: string) {\n    setSelected((prev) =>\n      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],\n    )\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger\n        render={<Button variant=\"outline\">Invite teammates</Button>}\n      />\n      <DialogContent className=\"flex flex-col gap-0 overflow-hidden p-0 sm:max-w-md\">\n        <DialogHeader className=\"px-6 pt-6\">\n          <DialogTitle>Add to project</DialogTitle>\n          <DialogDescription>\n            Select teammates to invite. They will receive an email with edit\n            access.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"max-h-[min(50vh,14rem)] overflow-y-auto px-3 pb-2\">\n          <ul className=\"flex flex-col gap-1 pt-1\">\n            {teammates.map((person) => {\n              const isSelected = selected.includes(person.id)\n              return (\n                <li key={person.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => toggle(person.id)}\n                    className={cn(\n                      'hover:bg-muted/60 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',\n                      isSelected && 'bg-muted/40',\n                    )}\n                  >\n                    <Avatar>\n                      <AvatarImage src={person.avatar} alt=\"\" />\n                      <AvatarFallback>{person.initials}</AvatarFallback>\n                    </Avatar>\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"truncate text-sm font-medium\">\n                        {person.name}\n                      </p>\n                      <p className=\"text-muted-foreground truncate text-xs\">\n                        {person.role}\n                      </p>\n                    </div>\n                    <div\n                      className={cn(\n                        'flex size-4 shrink-0 items-center justify-center rounded-full border',\n                        isSelected &&\n                          'bg-primary border-primary text-primary-foreground',\n                      )}\n                    >\n                      {isSelected ? (\n                        <CheckIcon className=\"size-2.5 stroke-[3]\" />\n                      ) : null}\n                    </div>\n                  </button>\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n        <DialogFooter className=\"border-t px-6 py-4\">\n          <DialogClose render={<Button variant=\"outline\">Cancel</Button>} />\n          <Button>Invite {selected.length}</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/dialog/dialog-11.tsx"
    }
  ],
  "type": "registry:block"
}