{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-switcher",
  "title": "Team Switcher",
  "description": "A team switcher component that allows users to switch teams. Features a sheet modal for creating new teams.",
  "dependencies": [
    "lucide-react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/button",
    "@lumi-ui/combobox",
    "@lumi-ui/field",
    "@lumi-ui/form",
    "@lumi-ui/scroll-area",
    "@lumi-ui/sheet",
    "@lumi-ui/toast",
    "@lumi-ui/textarea",
    "@lumi-ui/kbd"
  ],
  "files": [
    {
      "path": "registry/components/team-switcher.tsx",
      "content": "\"use client\";\n\nimport { PlusIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInputGroupContent,\n  ComboboxItemContent,\n  ComboboxList,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/ui/combobox\";\nimport {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/ui/field\";\nimport { Form } from \"@/registry/ui/form\";\nimport { Input } from \"@/registry/ui/input\";\nimport { Kbd } from \"@/registry/ui/kbd\";\nimport { ScrollArea } from \"@/registry/ui/scroll-area\";\nimport { Separator } from \"@/registry/ui/separator\";\nimport {\n  createSheetHandle,\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/ui/sheet\";\nimport { Textarea } from \"@/registry/ui/textarea\";\nimport { toast } from \"@/registry/ui/toast\";\n\nconst sheetHandle = createSheetHandle();\n\nexport function TeamSwitcher() {\n  const [comboboxOpen, setComboboxOpen] = useState(false);\n\n  return (\n    <>\n      <Combobox\n        defaultValue={teamMembers[0]}\n        items={teamMembers}\n        onOpenChange={setComboboxOpen}\n        open={comboboxOpen}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className=\"data-popup-open:bg-accent data-popup-open:hover:bg-accent data-popup-open:text-accent-foreground w-56 justify-start pl-3\"\n              variant=\"outline\"\n            >\n              <ComboboxValue />\n            </Button>\n          }\n        />\n        <ComboboxContent className=\"h-72\">\n          <div className=\"flex justify-between items-center relative\">\n            <ComboboxInputGroupContent\n              inputClassName=\"border-b-border\"\n              placeholder=\"Find member...\"\n              variant=\"ghost\"\n            />\n            <Button\n              className=\"absolute hidden lg:block right-0.5 rounded-sm text-muted-foreground cursor-pointer\"\n              onClick={() => setComboboxOpen(false)}\n              size=\"icon\"\n              variant=\"unstyled\"\n            >\n              <Kbd className=\"bg-accent text-[10px]\">Esc</Kbd>\n            </Button>\n          </div>\n          <ScrollArea className=\"min-h-0\" gradientScrollFade noScrollBar>\n            <ComboboxEmpty>No member found.</ComboboxEmpty>\n            <ComboboxList>\n              {(member: TeamMember) => (\n                <ComboboxItemContent\n                  indicatorPlacement=\"end\"\n                  key={member.id}\n                  value={member}\n                >\n                  {member.label}\n                </ComboboxItemContent>\n              )}\n            </ComboboxList>\n          </ScrollArea>\n          <Separator />\n          <div className=\"p-2\">\n            <SheetTrigger\n              handle={sheetHandle}\n              onClick={() => setComboboxOpen(false)}\n              render={\n                <Button className=\"w-full\" size=\"sm\">\n                  <PlusIcon /> Create team\n                </Button>\n              }\n            />\n          </div>\n        </ComboboxContent>\n      </Combobox>\n      <Sheet handle={sheetHandle}>\n        <SheetContent inset showCloseButton side=\"right\">\n          <SheetHeader>\n            <SheetTitle>New Team</SheetTitle>\n            <SheetDescription>\n              Unlock collaboration and improved performance.\n            </SheetDescription>\n          </SheetHeader>\n          <Form\n            className=\"h-full justify-between\"\n            onFormSubmit={(values) => {\n              toast.success({\n                title: `${values.team} created!`,\n              });\n              sheetHandle.close();\n            }}\n          >\n            <div className=\"flex gap-4 flex-col\">\n              <Field name=\"team\">\n                <FieldLabel>Team Name</FieldLabel>\n                <Input placeholder=\"acme\" required type=\"text\" />\n                <FieldError />\n              </Field>\n              <Field name=\"description\">\n                <FieldLabel>Description</FieldLabel>\n                <FieldControl\n                  placeholder=\"team description\"\n                  render={<Textarea className=\"min-h-32\" />}\n                />\n              </Field>\n            </div>\n            <SheetFooter>\n              <Button type=\"submit\">Save</Button>\n              <SheetClose render={<Button variant=\"ghost\" />}>\n                Cancel\n              </SheetClose>\n            </SheetFooter>\n          </Form>\n        </SheetContent>\n      </Sheet>\n    </>\n  );\n}\n\ninterface TeamMember {\n  id: string;\n  value: string;\n  role: string;\n  label: string;\n}\n\nconst teamMembers: TeamMember[] = [\n  { id: \"1\", label: \"Alex Davis\", role: \"Product\", value: \"alex.d\" },\n  { id: \"2\", label: \"Sarah King\", role: \"Engineering\", value: \"sarah.k\" },\n  { id: \"3\", label: \"James Wilson\", role: \"Design\", value: \"james.w\" },\n  { id: \"4\", label: \"Maria Garcia\", role: \"Marketing\", value: \"maria.g\" },\n  { id: \"5\", label: \"David Chen\", role: \"Engineering\", value: \"david.c\" },\n  { id: \"6\", label: \"Emma Roberts\", role: \"Product\", value: \"emma.r\" },\n  { id: \"7\", label: \"John Doe\", role: \"Engineering\", value: \"john.d\" },\n  { id: \"8\", label: \"Jane Smith\", role: \"Design\", value: \"jane.s\" },\n  { id: \"9\", label: \"Michael Johnson\", role: \"Marketing\", value: \"michael.j\" },\n  { id: \"10\", label: \"Emily Davis\", role: \"Product\", value: \"emily.d\" },\n];\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "iframeHeight": 800
  },
  "categories": [
    "form-input",
    "dashboard"
  ],
  "type": "registry:component"
}