{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-account",
  "type": "registry:component",
  "title": "Sidebar account",
  "description": "The signed-in person at the foot of the sidebar, under a hairline: avatar, name and email; the row opens the account menu (settings, theme, sign out).",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils",
    "@wibo/avatar",
    "@wibo/dropdown-menu",
    "@wibo/sidebar"
  ],
  "files": [
    {
      "path": "src/shell/sidebar-account.tsx",
      "type": "registry:component",
      "content": "import type { ReactNode } from \"react\";\nimport { ChevronsUpDown, LogOut, Moon, Settings, Sun } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage, initials } from \"@/components/ui/avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useRail } from \"@/components/sidebar\";\n\ninterface SidebarAccountProps {\n  /** The signed-in person's display name (the first line). */\n  name: string;\n  /** Second line, muted: usually the email. */\n  email?: string;\n  /** Picture URL; initials of `name` otherwise. */\n  image?: string;\n  /** Accessible name of the row, for example \"Account\". */\n  label?: string;\n  /** Extra lines under the name and email in the menu head: role, second-factor state. */\n  details?: ReactNode;\n  /** Opens the person's settings. Without it the entry is not shown. */\n  onOpenSettings?: () => void;\n  settingsLabel?: string;\n  /** The current theme. With `onToggleTheme`, the menu offers the other one and stays open on toggle. */\n  theme?: \"light\" | \"dark\";\n  onToggleTheme?: () => void;\n  toDarkLabel?: string;\n  toLightLabel?: string;\n  onSignOut?: () => void;\n  signOutLabel?: string;\n  /** Disables sign-out while it runs. */\n  signingOut?: boolean;\n  /** Extra menu items, placed after the settings entry. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * The signed-in person at the foot of the sidebar, under a hairline that sets\n * them apart from the navigation above (the footer's rows included): a\n * rounded-square avatar with initials, the name and the email on two lines,\n * and an up-down chevron. The row is the menu trigger; the menu opens upwards\n * with the settings entry, the theme switch and sign-out. On the icon rail\n * only the avatar stays and the menu opens to the right. Place it last in\n * `SidebarFooter`.\n */\nfunction SidebarAccount({\n  name,\n  email,\n  image,\n  label = \"Account\",\n  details,\n  onOpenSettings,\n  settingsLabel = \"Settings\",\n  theme,\n  onToggleTheme,\n  toDarkLabel = \"Dark theme\",\n  toLightLabel = \"Light theme\",\n  onSignOut,\n  signOutLabel = \"Sign out\",\n  signingOut = false,\n  children,\n  className,\n}: SidebarAccountProps) {\n  const rail = useRail();\n  const themeItem =\n    onToggleTheme && theme ? (\n      <DropdownMenuItem\n        onSelect={(event) => {\n          // Keep the menu open: the page repaints behind it.\n          event.preventDefault();\n          onToggleTheme();\n        }}\n      >\n        {theme === \"dark\" ? <Sun aria-hidden=\"true\" /> : <Moon aria-hidden=\"true\" />}\n        {theme === \"dark\" ? toLightLabel : toDarkLabel}\n      </DropdownMenuItem>\n    ) : null;\n\n  return (\n    <div data-slot=\"sidebar-account-section\" className=\"border-t border-sidebar-border pt-2\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"sidebar-account\"\n            data-sidebar-row=\"\"\n            aria-label={label}\n            className={cn(\n              \"press-item group/account relative flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/50 data-[state=open]:bg-sidebar-active in-data-[indicator=off]:hover:bg-sidebar-hover\",\n              rail && \"justify-center px-0\",\n              className,\n            )}\n          >\n            <Avatar size=\"sm\">\n              {image ? <AvatarImage src={image} alt=\"\" /> : null}\n              <AvatarFallback>{initials(name) || \"?\"}</AvatarFallback>\n            </Avatar>\n            {rail ? (\n              <span className=\"sr-only\">{name}</span>\n            ) : (\n              <>\n                <span className=\"flex min-w-0 flex-1 flex-col\">\n                  <span className=\"truncate text-label leading-5 font-medium text-foreground\">{name}</span>\n                  {email ? <span className=\"truncate text-xs text-muted-foreground\">{email}</span> : null}\n                </span>\n                <ChevronsUpDown\n                  aria-hidden=\"true\"\n                  className=\"size-3.5 shrink-0 text-muted-foreground transition-colors duration-150 group-hover/account:text-foreground\"\n                />\n              </>\n            )}\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          side={rail ? \"right\" : \"top\"}\n          align={rail ? \"end\" : \"start\"}\n          sideOffset={6}\n          className={cn(\"min-w-56\", !rail && \"w-(--radix-dropdown-menu-trigger-width)\")}\n        >\n          <DropdownMenuLabel className=\"grid gap-0.5 pt-2\">\n            <span className=\"truncate text-label font-medium text-foreground\">{name}</span>\n            {email ? <span className=\"truncate text-xs font-normal text-muted-foreground\">{email}</span> : null}\n            {details ? <span className=\"grid gap-0.5 text-xs font-normal whitespace-normal text-muted-foreground\">{details}</span> : null}\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          {onOpenSettings ? (\n            <DropdownMenuItem onSelect={onOpenSettings}>\n              <Settings aria-hidden=\"true\" />\n              {settingsLabel}\n            </DropdownMenuItem>\n          ) : null}\n          {children}\n          {themeItem}\n          {onSignOut ? (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem disabled={signingOut} onSelect={onSignOut}>\n                <LogOut aria-hidden=\"true\" />\n                {signOutLabel}\n              </DropdownMenuItem>\n            </>\n          ) : null}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\nexport { SidebarAccount };\nexport type { SidebarAccountProps };\n"
    }
  ]
}