{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-01",
  "description": "Sidebar with collapsible icons and sections.",
  "registryDependencies": [
    "@lumi-ui/sidebar",
    "@lumi-ui/separator",
    "@lumi-ui/scroll-area",
    "@lumi-ui/dropdown-menu",
    "@lumi-ui/dialog",
    "@lumi-ui/chart",
    "@lumi-ui/tabs",
    "@lumi-ui/input",
    "@lumi-ui/sheet",
    "@lumi-ui/form",
    "@lumi-ui/field",
    "@lumi-ui/button",
    "@lumi-ui/combobox",
    "@lumi-ui/collapsible",
    "@lumi-ui/toggle-group",
    "@lumi-ui/toast",
    "@lumi-ui/card",
    "@lumi-ui/breadcrumb",
    "@lumi-ui/kbd"
  ],
  "files": [
    {
      "path": "registry/blocks/sidebar-01/page.tsx",
      "content": "import { cookies } from \"next/headers\";\nimport type { Layout } from \"react-resizable-panels\";\nimport { AppSidebar } from \"@/registry/blocks/sidebar-01/components/app-sidebar\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/ui/breadcrumb\";\nimport { Separator } from \"@/registry/ui/separator\";\nimport {\n  MainContent,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/ui/sidebar\";\n\nconst GROUP_ID = \"main-layout-persistence\";\n\nexport default async function Page() {\n  const cookieStore = await cookies();\n  const layoutCookie = cookieStore.get(GROUP_ID);\n\n  const defaultLayout: Layout = layoutCookie\n    ? JSON.parse(layoutCookie.value)\n    : undefined;\n  return (\n    <SidebarProvider\n      collapsibleType=\"icon\"\n      defaultLayout={defaultLayout}\n      groupId={GROUP_ID}\n    >\n      <AppSidebar />\n      <MainContent className=\"flex flex-col\">\n        <header className=\"flex h-12 bg-background z-10 sticky top-0 items-center gap-2 p-2 sm:p-4\">\n          <SidebarTrigger />\n          <Separator className=\"mr-2 h-4\" orientation=\"vertical\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Dashboard</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Financial Performance</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </MainContent>\n    </SidebarProvider>\n  );\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/blocks/sidebar-01/components/app-sidebar.tsx",
      "content": "\"use client\";\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  MapIcon,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarSeparator,\n} from \"@/registry/ui/sidebar\";\nimport { NavMain } from \"./nav-main\";\nimport { NavProjects } from \"./nav-projects\";\nimport { NavUser } from \"./nav-user\";\nimport { SearchCombobox } from \"./search-combobox\";\nimport { TeamSwitcher } from \"./team-switcher\";\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n      title: \"Playground\",\n      url: \"#\",\n    },\n    {\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n      title: \"Models\",\n      url: \"#\",\n    },\n    {\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n      title: \"Documentation\",\n      url: \"#\",\n    },\n    {\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n      title: \"Settings\",\n      url: \"#\",\n    },\n  ],\n  projects: [\n    {\n      icon: Frame,\n      name: \"Design Engineering\",\n      url: \"#\",\n    },\n    {\n      icon: PieChart,\n      name: \"Sales & Marketing\",\n      url: \"#\",\n    },\n    {\n      icon: MapIcon,\n      name: \"Travel\",\n      url: \"#\",\n    },\n  ],\n  teams: [\n    {\n      logo: GalleryVerticalEnd,\n      name: \"Acme Inc\",\n      plan: \"Enterprise\",\n    },\n    {\n      logo: AudioWaveform,\n      name: \"Acme Corp.\",\n      plan: \"Startup\",\n    },\n    {\n      logo: Command,\n      name: \"Evil Corp.\",\n      plan: \"Free\",\n    },\n  ],\n  user: {\n    email: \"m@example.com\",\n    name: \"Lumi UI\",\n  },\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <TeamSwitcher />\n        <SearchCombobox />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarSeparator className=\"mx-0\" />\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-01/components/nav-main.tsx",
      "content": "\"use client\";\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/ui/collapsible\";\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/ui/sidebar\";\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string;\n    url: string;\n    icon?: LucideIcon;\n    isActive?: boolean;\n    items?: {\n      title: string;\n      url: string;\n    }[];\n  }[];\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.title}>\n            <Collapsible defaultOpen={item.isActive}>\n              <CollapsibleTrigger\n                className=\"group/collapsible data-[panel-open]:bg-sidebar-accent data-[panel-open]:text-sidebar-accent-foreground\"\n                render={\n                  <SidebarMenuButton\n                    tooltip={{\n                      children: item.title,\n                      side: \"right\",\n                    }}\n                  >\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto text-muted-foreground transition-[transform,colors] duration-200 group-data-[panel-open]/collapsible:rotate-90 group-data-[panel-open]/collapsible:text-foreground group-hover/collapsible:text-sidebar-foreground\" />\n                  </SidebarMenuButton>\n                }\n              />\n              <CollapsiblePanel>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton\n                        render={\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        }\n                      />\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsiblePanel>\n            </Collapsible>\n          </SidebarMenuItem>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-01/components/nav-projects.tsx",
      "content": "\"use client\";\n\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  createDialogHandle,\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/ui/dialog\";\nimport {\n  createDropdownMenuHandle,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/ui/sidebar\";\nimport { toast } from \"@/registry/ui/toast\";\n\ninterface Project {\n  name: string;\n  url: string;\n  icon: LucideIcon;\n}\n\nconst projectMenuHandle = createDropdownMenuHandle<Project>();\nconst deleteProjectDialogHandle = createDialogHandle<Project>();\n\nexport function NavProjects({ projects }: { projects: Project[] }) {\n  const { isMobile } = useSidebar();\n\n  return (\n    <>\n      <SidebarGroup className=\"group-data-[state=collapsed]:hidden\">\n        <SidebarGroupLabel>Projects</SidebarGroupLabel>\n        <SidebarMenu>\n          {projects.map((item) => (\n            <SidebarMenuItem key={item.name}>\n              <SidebarMenuButton\n                render={\n                  <a href={item.url}>\n                    <item.icon />\n                    <span>{item.name}</span>\n                    <SidebarMenuAction\n                      render={\n                        <DropdownMenuTrigger\n                          handle={projectMenuHandle}\n                          id={item.name}\n                          payload={item}\n                        />\n                      }\n                      showOnHover\n                    >\n                      <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                    </SidebarMenuAction>\n                  </a>\n                }\n              ></SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroup>\n      <DropdownMenu handle={projectMenuHandle}>\n        {({ payload: project }) => {\n          return (\n            <DropdownMenuContent\n              align={isMobile ? \"end\" : \"start\"}\n              className=\"w-48 rounded-lg\"\n              side={isMobile ? \"bottom\" : \"right\"}\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuGroupLabel>{project?.name}</DropdownMenuGroupLabel>\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => {\n                    if (project) {\n                      deleteProjectDialogHandle.openWithPayload(project);\n                    }\n                  }}\n                  variant={\"destructive\"}\n                >\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          );\n        }}\n      </DropdownMenu>\n      <Dialog handle={deleteProjectDialogHandle}>\n        {({ payload: project }) => {\n          return (\n            <DialogContent layout=\"center\">\n              <DialogHeader>\n                <DialogTitle>\n                  Delete\n                  <span className=\"ml-2 text-destructive/80\">\n                    {project?.name}\n                  </span>\n                </DialogTitle>\n                <DialogDescription>\n                  Are you sure you want to delete this project? This action\n                  cannot be undone.\n                </DialogDescription>\n              </DialogHeader>\n              <DialogFooter>\n                <DialogClose\n                  render={<Button variant=\"outline\">Cancel</Button>}\n                />\n                <DialogClose\n                  onClick={() =>\n                    toast.promise(\n                      new Promise<void>((resolve, reject) => {\n                        setTimeout(() => {\n                          const shouldSucceed = Math.random() > 0.1;\n                          if (shouldSucceed) {\n                            resolve();\n                          } else {\n                            reject(\n                              new Error(`Failed to delete ${project?.name}.`),\n                            );\n                          }\n                        }, 1500);\n                      }),\n                      {\n                        error: (err: Error) => {\n                          return { description: err.message, title: \"Error\" };\n                        },\n                        loading: { title: `Deleting ${project?.name}...` },\n                        success: () => {\n                          return {\n                            description: \"Drag/swipe to dismiss\",\n                            title: `${project?.name} deleted`,\n                          };\n                        },\n                      },\n                    )\n                  }\n                  render={<Button variant=\"destructive\">Delete</Button>}\n                />\n              </DialogFooter>\n            </DialogContent>\n          );\n        }}\n      </Dialog>\n    </>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-01/components/nav-user.tsx",
      "content": "\"use client\";\n\nimport {\n  BookIcon,\n  ChevronsUpDown,\n  HouseIcon,\n  LogOut,\n  PenIcon,\n  Settings,\n  SmileIcon,\n  UserIcon,\n} from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/ui/sidebar\";\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string;\n    email: string;\n  };\n}) {\n  const { isCollapsed } = useSidebar();\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                className=\"data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground\"\n                size=\"lg\"\n              >\n                {isCollapsed ? (\n                  <UserIcon className=\"size-4 mx-auto\" />\n                ) : (\n                  <>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">{user.name}</span>\n                      <span className=\"truncate text-xs\">{user.email}</span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto size-4\" />\n                  </>\n                )}\n              </SidebarMenuButton>\n            }\n          />\n          <DropdownMenuContent\n            align=\"start\"\n            matchAnchorWidth={!isCollapsed}\n            sideOffset={4}\n          >\n            <DropdownMenuItem className=\"justify-between\">\n              <div className=\"grid text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n\n              <Settings />\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"justify-between py-2\">\n                Feedback\n                <SmileIcon />\n              </DropdownMenuItem>\n              <DropdownMenuItem className=\"justify-between py-2\">\n                Homepage\n                <HouseIcon />\n              </DropdownMenuItem>\n              <DropdownMenuItem className=\"justify-between py-2\">\n                Changelog\n                <PenIcon />\n              </DropdownMenuItem>\n              <DropdownMenuItem className=\"justify-between py-2\">\n                Doc\n                <BookIcon />\n              </DropdownMenuItem>\n              <DropdownMenuItem className=\"justify-between py-2\">\n                Log out\n                <LogOut />\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-01/components/search-combobox.tsx",
      "content": "\"use client\";\n\nimport {\n  CpuIcon,\n  EyeIcon,\n  SearchIcon,\n  Settings2Icon,\n  SparklesIcon,\n  TvMinimalIcon,\n  UserIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInputGroupContent,\n  ComboboxItemContent,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"@/registry/ui/combobox\";\nimport { Kbd } from \"@/registry/ui/kbd\";\nimport { Separator } from \"@/registry/ui/separator\";\nimport { SidebarMenuButton, useSidebar } from \"@/registry/ui/sidebar\";\n\nexport function SearchCombobox() {\n  const [open, setOpen] = useState(false);\n  const { isCollapsed } = useSidebar();\n\n  return (\n    <Combobox\n      defaultValue={teamMembers[0]}\n      items={teamMembers}\n      onOpenChange={setOpen}\n      open={open}\n    >\n      <ComboboxTrigger\n        render={\n          <SidebarMenuButton\n            className={cn(\"cursor-text\", !isCollapsed && \"border\")}\n            tooltip={{\n              children: \"Search\",\n            }}\n          >\n            <SearchIcon className=\"size-4\" />\n            <span className=\"hidden flex-1 text-left md:flex text-sm\">\n              Find..\n            </span>\n          </SidebarMenuButton>\n        }\n      />\n      <ComboboxContent\n        align=\"start\"\n        className={cn(isCollapsed && \"w-64\")}\n        matchAnchorWidth={!isCollapsed}\n        side={isCollapsed ? \"right\" : \"bottom\"}\n        sideOffset={isCollapsed ? 2 : -32}\n      >\n        <div className=\"flex justify-between items-center relative\">\n          <ComboboxInputGroupContent\n            addonIcon={<SearchIcon />}\n            inputSize=\"lg\"\n            placeholder=\"Find...\"\n            variant=\"ghost\"\n          />\n          <Button\n            className=\"absolute hidden lg:block right-2 rounded-sm text-muted-foreground cursor-pointer\"\n            onClick={() => setOpen(false)}\n            size=\"icon\"\n            variant=\"unstyled\"\n          >\n            <Kbd className=\"bg-accent\">Esc</Kbd>\n          </Button>\n        </div>\n        <Separator />\n        <ComboboxEmpty>No member found.</ComboboxEmpty>\n        <ComboboxList>\n          {(member: TeamMember) => (\n            <ComboboxItemContent\n              className=\"py-2 cursor-pointer\"\n              indicatorIcon={null}\n              indicatorPlacement=\"none\"\n              key={member.id}\n              render={\n                <a className=\"inline-flex w-full\" href=\"#\">\n                  <span>{IconMap[member.iconName]}</span>\n                  <span className=\"flex flex-col ml-2 flex-1\">\n                    {member.label}\n                    <span className=\"text-xs text-muted-foreground truncate\">\n                      {member.description}\n                    </span>\n                  </span>\n                </a>\n              }\n              value={member}\n            />\n          )}\n        </ComboboxList>\n        <Separator />\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n\ninterface TeamMember {\n  id: string;\n  value: string;\n  description: string;\n  label: string;\n  iconName: IconName;\n}\ntype IconName = keyof typeof IconMap;\n\nconst IconMap = {\n  cpu: <CpuIcon className=\"size-4\" />,\n  eye: <EyeIcon className=\"size-4\" />,\n  settings: <Settings2Icon className=\"size-4\" />,\n  sparkles: <SparklesIcon className=\"size-4\" />,\n  tv: <TvMinimalIcon className=\"size-4\" />,\n  user: <UserIcon className=\"size-4\" />,\n} as const;\n\nconst teamMembers: TeamMember[] = [\n  {\n    description: \"Run apps safely\",\n    iconName: \"cpu\",\n    id: \"1\",\n    label: \"Sandboxes\",\n    value: \"sandboxes\",\n  },\n  {\n    description: \"View usage\",\n    iconName: \"eye\",\n    id: \"2\",\n    label: \"Observability\",\n    value: \"observability\",\n  },\n  {\n    description: \"Explore AI models\",\n    iconName: \"tv\",\n    id: \"3\",\n    label: \"AI Gateway\",\n    value: \"ai-gateway\",\n  },\n  {\n    description: \"Build and Deployment\",\n    iconName: \"settings\",\n    id: \"4\",\n    label: \"Build Machines\",\n    value: \"build-machines\",\n  },\n  {\n    description: \"what did we deploy today?\",\n    iconName: \"sparkles\",\n    id: \"5\",\n    label: \"Navigation Assistant\",\n    value: \"navigation-assistant\",\n  },\n];\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-01/components/team-switcher.tsx",
      "content": "\"use client\";\n\nimport { ChevronsUpDown, PlusIcon, UserSearch } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\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 { Field, FieldError, FieldLabel } from \"@/registry/ui/field\";\nimport { Form } from \"@/registry/ui/form\";\nimport { Input } from \"@/registry/ui/input\";\nimport { Kbd } from \"@/registry/ui/kbd\";\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 { SidebarMenuButton, useSidebar } from \"@/registry/ui/sidebar\";\nimport { toast } from \"@/registry/ui/toast\";\n\nconst sheetHandle = createSheetHandle();\n\nexport function TeamSwitcher() {\n  const [comboboxOpen, setComboboxOpen] = useState(false);\n  const { isCollapsed } = useSidebar();\n  return (\n    <>\n      <Combobox\n        defaultValue={teamMembers[0]}\n        items={teamMembers}\n        onOpenChange={setComboboxOpen}\n        open={comboboxOpen}\n      >\n        <ComboboxTrigger\n          render={\n            <SidebarMenuButton className=\"data-[popup-open]:bg-sidebar-accent data-[popup-open]:text-sidebar-accent-foreground\">\n              <div\n                className={cn(\n                  \"grid flex-1 text-left text-sm leading-tight\",\n                  isCollapsed && \"hidden\",\n                )}\n              >\n                <span className=\"truncate font-semibold\">\n                  <ComboboxValue />\n                </span>\n              </div>\n              {isCollapsed ? (\n                <UserSearch className=\"mx-auto\" />\n              ) : (\n                <ChevronsUpDown className=\"ml-auto\" />\n              )}\n            </SidebarMenuButton>\n          }\n        />\n\n        <ComboboxContent\n          matchAnchorWidth={!isCollapsed}\n          side={isCollapsed ? \"right\" : \"bottom\"}\n        >\n          <div className=\"flex justify-between items-center relative\">\n            <ComboboxInputGroupContent\n              placeholder=\"Find member...\"\n              variant=\"ghost\"\n            />\n            <Button\n              className=\"absolute hidden lg:block right-2 rounded-sm text-muted-foreground cursor-pointer\"\n              onClick={() => setComboboxOpen(false)}\n              size=\"icon\"\n              variant=\"unstyled\"\n            >\n              <Kbd className=\"bg-accent\">Esc</Kbd>\n            </Button>\n          </div>\n          <Separator />\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          <Separator />\n          <div className=\"p-2\">\n            <SheetTrigger\n              handle={sheetHandle}\n              onClick={() => setComboboxOpen(false)}\n              render={\n                <Button className=\"my-1 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 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                <Input placeholder=\"team description\" />\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];\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "iframeHeight": 1200
  },
  "categories": [
    "sidebar",
    "dashboard"
  ],
  "type": "registry:block"
}