{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "share-access-2",
  "title": "People Picker",
  "description": "People Picker for Share Access.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "input",
    "select",
    "separator"
  ],
  "files": [
    {
      "path": "registry/intents/collaboration/share-access/share-access-2.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Plus } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\ntype Person = {\n  id: string\n  name: string\n  email: string\n  avatar: string\n  role: string\n  owner?: boolean\n}\n\nconst INITIAL: Person[] = [\n  {\n    id: 'ada',\n    name: 'Ada Lovelace',\n    email: 'ada@acme.com',\n    avatar:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop&crop=faces',\n    role: 'owner',\n    owner: true,\n  },\n  {\n    id: 'grace',\n    name: 'Grace Hopper',\n    email: 'grace@acme.com',\n    avatar:\n      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=128&h=128&fit=crop&crop=faces',\n    role: 'editor',\n  },\n  {\n    id: 'alan',\n    name: 'Alan Turing',\n    email: 'alan@acme.com',\n    avatar:\n      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=128&h=128&fit=crop&crop=faces',\n    role: 'viewer',\n  },\n]\n\nexport function ShareAccess2() {\n  const [people, setPeople] = useState<Person[]>(INITIAL)\n  const [email, setEmail] = useState('')\n  const [inviteRole, setInviteRole] = useState('viewer')\n\n  const invite = () => {\n    const value = email.trim()\n    if (!value) return\n    const name = value.split('@')[0].replace(/[._]/g, ' ')\n    setPeople((prev) => [\n      ...prev,\n      {\n        id: value,\n        name: name.replace(/\\b\\w/g, (c) => c.toUpperCase()),\n        email: value,\n        avatar: '',\n        role: inviteRole,\n      },\n    ])\n    setEmail('')\n  }\n\n  const setRole = (id: string, role: string) =>\n    role === 'remove'\n      ? setPeople((prev) => prev.filter((p) => p.id !== id))\n      : setPeople((prev) => prev.map((p) => (p.id === id ? { ...p, role } : p)))\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Share with people</CardTitle>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          <Input\n            type=\"email\"\n            placeholder=\"Add by email\"\n            className=\"min-w-[12rem] flex-1\"\n            value={email}\n            onChange={(e) => setEmail(e.target.value)}\n            onKeyDown={(e) => e.key === 'Enter' && invite()}\n          />\n          <div className=\"flex gap-2\">\n            <Select\n              value={inviteRole}\n              onValueChange={(value) => setInviteRole(value ?? '')}\n            >\n              <SelectTrigger className=\"w-28\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectGroup>\n                  <SelectItem value=\"viewer\">Viewer</SelectItem>\n                  <SelectItem value=\"editor\">Editor</SelectItem>\n                </SelectGroup>\n              </SelectContent>\n            </Select>\n            <Button size=\"icon\" onClick={invite} aria-label=\"Invite\">\n              <Plus className=\"size-4\" />\n            </Button>\n          </div>\n        </div>\n\n        <Separator />\n\n        <div className=\"flex flex-col gap-3\">\n          {people.map((person) => (\n            <div key={person.id} className=\"flex items-center gap-3\">\n              <Avatar className=\"size-8\">\n                <AvatarImage src={person.avatar} alt={person.name} />\n                <AvatarFallback className=\"bg-muted text-xs\">\n                  {person.name\n                    .split(' ')\n                    .map((n) => n[0])\n                    .join('')\n                    .slice(0, 2)\n                    .toUpperCase()}\n                </AvatarFallback>\n              </Avatar>\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                <span className=\"truncate text-sm font-medium\">\n                  {person.name}\n                </span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {person.email}\n                </span>\n              </div>\n              {person.owner ? (\n                <span className=\"text-muted-foreground text-xs\">Owner</span>\n              ) : (\n                <Select\n                  value={person.role}\n                  onValueChange={(v) => setRole(person.id, v ?? '')}\n                >\n                  <SelectTrigger size=\"sm\" className=\"w-28 shrink-0\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"viewer\">Viewer</SelectItem>\n                      <SelectItem value=\"editor\">Editor</SelectItem>\n                      <SelectItem value=\"remove\" className=\"text-destructive\">\n                        Remove\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              )}\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/share-access/share-access-2.tsx"
    }
  ],
  "type": "registry:block"
}