{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-08",
  "title": "With Avatar",
  "description": "User picker with avatars in trigger and options.",
  "dependencies": [],
  "registryDependencies": [
    "select",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/patterns/select/select-08.tsx",
      "content": "'use client'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\nimport { useState } from 'react'\n\nconst users = [\n  {\n    value: 'sarah',\n    name: 'Sarah Chen',\n    email: 'sarah@example.com',\n    avatar:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80',\n    initials: 'SC',\n  },\n  {\n    value: 'marcus',\n    name: 'Marcus Lee',\n    email: 'marcus@example.com',\n    avatar:\n      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80',\n    initials: 'ML',\n  },\n  {\n    value: 'priya',\n    name: 'Priya Patel',\n    email: 'priya@example.com',\n    avatar:\n      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80',\n    initials: 'PP',\n  },\n]\n\nexport function Select08() {\n  const [value, setValue] = useState(users[0].value)\n  const selected = users.find((user) => user.value === value)\n\n  return (\n    <Select value={value} onValueChange={(value) => setValue(value ?? '')}>\n      <SelectTrigger className=\"w-full max-w-64\">\n        <SelectValue placeholder=\"Select a user\">\n          {selected && (\n            <span className=\"flex items-center gap-2\">\n              <Avatar size=\"sm\">\n                <AvatarImage src={selected.avatar} alt=\"\" />\n                <AvatarFallback>{selected.initials}</AvatarFallback>\n              </Avatar>\n              <span>{selected.name}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          {users.map((user) => (\n            <SelectItem key={user.value} value={user.value}>\n              <Avatar size=\"sm\">\n                <AvatarImage src={user.avatar} alt=\"\" />\n                <AvatarFallback>{user.initials}</AvatarFallback>\n              </Avatar>\n              <span className=\"flex flex-col gap-0.5\">\n                <span className=\"text-sm font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground text-xs font-normal\">\n                  {user.email}\n                </span>\n              </span>\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/select/select-08.tsx"
    }
  ],
  "type": "registry:block"
}