@suphark/ui 0.1.1 → 0.3.0

package/src/components/app-shell/app-shell.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@suphark/ui/components/ui/sidebar";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search, X } from "lucide-react";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { AppBrand, type AppBrandProps } from "./app-brand";
+import { AppNav, type AppNavPinProps } from "./app-nav";
+import { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
+import { type AppNavGroup, searchNav } from "./types";
+
+export interface AppShellProps {
+  /** โลโก้/ชื่อแอปมุมบน sidebar */
+  brand: AppBrandProps;
+  /** เมนู (ตัดตามสิทธิ์ด้วย `filterNav` ก่อนส่งเข้ามา) */
+  nav: AppNavGroup[];
+  /** ช่องค้นหาเมนูใต้โลโก้ (supplychain) */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** ปุ่ม pin เมนูขึ้น header (แอปเก็บ state เอง) */
+  pin?: AppNavPinProps;
+  /** ส่วนเพิ่มใน sidebar ใต้โลโก้ เช่น TenantSwitcher / CommandPalette */
+  sidebarHeader?: ReactNode;
+  /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
+  sidebarFooter?: ReactNode;
+  /**
+   * header ของเนื้อหา: `false` = ไม่มี header, `true`/ไม่ส่ง = SidebarTrigger + breadcrumb อัตโนมัติ
+   * ส่ง object เพื่อกำหนดเอง
+   */
+  header?:
+    | boolean
+    | {
+        /** breadcrumb: `false` ปิด, object = ตั้งค่า HeaderBreadcrumbs, ReactNode = ใส่เอง */
+        breadcrumbs?: false | HeaderBreadcrumbsProps | ReactNode;
+        /** กลางบรรทัด (เช่น pinned menus) */
+        center?: ReactNode;
+        /** ขวาสุด: notification, feedback, `<UserMenu variant="header" />` … */
+        actions?: ReactNode;
+        /** แถบเหนือ header เช่น impersonation banner */
+        banner?: ReactNode;
+        className?: string;
+      };
+  /** สีแบรนด์ต่อ tenant (ตั้ง --brand บน wrapper → primary/ring/sidebar-primary ตาม) */
+  brandColor?: string | null;
+  brandForeground?: string | null;
+  /** `icon` (ค่าเริ่มต้น) ยุบเหลือไอคอน · `offcanvas` ซ่อนทั้งแผง · `none` ตรึงตลอด */
+  collapsible?: ComponentProps<typeof Sidebar>["collapsible"];
+  /** เปิด sidebar ตอนโหลด (อ่านจาก cookie `sidebar_state` ฝั่ง server แล้วส่งมาได้) */
+  defaultOpen?: boolean;
+  /** class ของกล่องเนื้อหา (ค่าเริ่มต้น padding ตาม supplychain) */
+  contentClassName?: string;
+  /** จำกัดความกว้างเนื้อหา เช่น `max-w-5xl` (Pi Auth) — ไม่ส่ง = เต็มจอ (supplychain) */
+  contentMaxWidth?: string;
+  children: ReactNode;
+}
+
+/**
+ * โครงแอปมาตรฐาน: sidebar ซ้าย (shadcn Sidebar — ยุบเป็นไอคอนบนเดสก์ท็อป, Sheet บนมือถือ) + header + เนื้อหา
+ * ยกจาก supplychain (main layout + AppSidebar) และ Pi Auth ConsoleShell — ใช้จาก layout.tsx ของแอปได้ทั้ง server/client
+ *
+ * ```tsx
+ * <AppShell brand={{ name: "Pi Auth" }} nav={filterNav(NAV, can)}
+ *   sidebarFooter={<UserMenu user={user} onSignOut={signOut}><ThemeMenuItems /></UserMenu>}>
+ *   {children}
+ * </AppShell>
+ * ```
+ */
+export function AppShell({
+  brand,
+  nav,
+  searchable = false,
+  searchPlaceholder = "ค้นหาเมนู…",
+  pin,
+  sidebarHeader,
+  sidebarFooter,
+  header = true,
+  brandColor,
+  brandForeground,
+  collapsible = "icon",
+  defaultOpen = true,
+  contentClassName,
+  contentMaxWidth,
+  children,
+}: AppShellProps) {
+  const style = brandColor
+    ? ({
+        "--brand": brandColor,
+        ...(brandForeground ? { "--brand-foreground": brandForeground } : {}),
+      } as CSSProperties)
+    : undefined;
+
+  const headerOpts = typeof header === "object" ? header : {};
+  const showHeader = header !== false;
+  const breadcrumbs =
+    headerOpts.breadcrumbs === false ? null : headerOpts.breadcrumbs === undefined ||
+      isBreadcrumbOptions(headerOpts.breadcrumbs) ? (
+      <HeaderBreadcrumbs {...(headerOpts.breadcrumbs ?? {})} />
+    ) : (
+      headerOpts.breadcrumbs
+    );
+
+  return (
+    // base-ui-ok: defaultOpen อ่านจาก cookie ครั้งเดียวตอน mount — หลังจากนั้น Sidebar จัดการ state เอง (ตั้งใจให้ uncontrolled)
+    <SidebarProvider defaultOpen={defaultOpen} style={style}>
+      <ShellSidebar
+        brand={brand}
+        nav={nav}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        pin={pin}
+        sidebarHeader={sidebarHeader}
+        sidebarFooter={sidebarFooter}
+        collapsible={collapsible}
+      />
+
+      <SidebarInset>
+        {showHeader && (
+          <div className="sticky top-0 z-40 shrink-0 bg-background print:static">
+            {headerOpts.banner}
+            <header
+              className={cn(
+                "flex h-auto flex-col border-b px-4 md:h-14 md:flex-row md:items-center print:hidden",
+                headerOpts.className,
+              )}
+            >
+              <div className="flex h-12 min-w-0 flex-1 items-center gap-2 md:h-full">
+                <SidebarTrigger className="-ml-1" />
+                {breadcrumbs && (
+                  <>
+                    <Separator orientation="vertical" className="mr-2 hidden h-4 md:block" />
+                    <div className="min-w-0 flex-1">{breadcrumbs}</div>
+                  </>
+                )}
+              </div>
+              {(headerOpts.center || headerOpts.actions) && (
+                <div className="flex h-10 min-w-0 items-center gap-2 pb-1 md:ml-auto md:h-full md:pb-0">
+                  {headerOpts.center && (
+                    <div className="min-w-0 flex-1 overflow-hidden md:flex-none">
+                      {headerOpts.center}
+                    </div>
+                  )}
+                  {headerOpts.actions && (
+                    <div className="ml-auto flex shrink-0 items-center gap-2">
+                      {headerOpts.actions}
+                    </div>
+                  )}
+                </div>
+              )}
+            </header>
+          </div>
+        )}
+        <div
+          className={cn(
+            "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 print:overflow-visible",
+            contentMaxWidth && cn("mx-auto w-full", contentMaxWidth),
+            contentClassName,
+          )}
+        >
+          {children}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+
+/** แผง sidebar — แยกเพื่อใช้ useSidebar (ล้างคำค้นเมื่อยุบ ไม่ให้เมนูถูกกรองทั้งที่มองไม่เห็นช่องค้นหา) */
+function ShellSidebar({
+  brand,
+  nav,
+  searchable,
+  searchPlaceholder,
+  pin,
+  sidebarHeader,
+  sidebarFooter,
+  collapsible,
+}: Pick<
+  AppShellProps,
+  | "brand"
+  | "nav"
+  | "searchable"
+  | "searchPlaceholder"
+  | "pin"
+  | "sidebarHeader"
+  | "sidebarFooter"
+  | "collapsible"
+>) {
+  const { state, isMobile } = useSidebar();
+  const [query, setQuery] = useState("");
+  const collapsed = state === "collapsed" && !isMobile;
+  useEffect(() => {
+    if (collapsed) setQuery("");
+  }, [collapsed]);
+  const visibleNav = useMemo(() => searchNav(nav, query), [nav, query]);
+  const searching = query.trim().length > 0;
+
+  return (
+    <Sidebar collapsible={collapsible} className="print:hidden">
+      <SidebarHeader>
+        <AppBrand {...brand} />
+        {searchable && (
+          <div className="group-data-[collapsible=icon]:hidden">
+            <InputGroup className="h-8 bg-background shadow-none">
+              <InputGroupAddon>
+                <Search aria-hidden="true" />
+              </InputGroupAddon>
+              <InputGroupInput
+                name="sidebar-search"
+                aria-label={searchPlaceholder}
+                autoComplete="off"
+                placeholder={searchPlaceholder}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+              />
+              {query && (
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    onClick={() => setQuery("")}
+                    aria-label="ล้างคำค้นหาเมนู"
+                    className="size-6 p-0 hover:bg-transparent"
+                  >
+                    <X aria-hidden="true" />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              )}
+            </InputGroup>
+          </div>
+        )}
+        {sidebarHeader}
+      </SidebarHeader>
+      <SidebarContent>
+        <AppNav nav={visibleNav} pin={pin} forceOpen={searching} />
+      </SidebarContent>
+      {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
+      {collapsible !== "none" && <SidebarRail />}
+    </Sidebar>
+  );
+}
+
+function isBreadcrumbOptions(value: unknown): value is HeaderBreadcrumbsProps {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !("$$typeof" in (value as object)) &&
+    !Array.isArray(value)
+  );
+}

package/src/components/app-shell/header-breadcrumbs.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@suphark/ui/components/ui/breadcrumb";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Fragment } from "react";
+
+export interface HeaderBreadcrumbsProps {
+  /** ชื่อแสดงของแต่ละ segment (`{ "po-tracking": "PO Tracking" }`) — ไม่พบ = ตัวแรกพิมพ์ใหญ่ แทน - ด้วยช่องว่าง */
+  labels?: Record<string, string>;
+  homeHref?: string;
+  homeLabel?: string;
+  /** ตัด segment นำหน้าออก เช่น `["console"]` เมื่อทุกหน้าอยู่ใต้ /console */
+  skip?: string[];
+  /** ซ่อน segment ที่ดูเหมือน id (ตัวเลข/uuid/cuid) */
+  hideIds?: boolean;
+}
+
+const ID_LIKE = /^(\d+|[0-9a-f]{8}-[0-9a-f-]{27}|c[a-z0-9]{20,}|[0-9a-z]{16,})$/i;
+
+function labelOf(segment: string, labels?: Record<string, string>) {
+  const known = labels?.[segment];
+  if (known) return known;
+  const decoded = decodeURIComponent(segment);
+  return decoded.charAt(0).toUpperCase() + decoded.slice(1).replace(/-/g, " ");
+}
+
+/** breadcrumb อัตโนมัติจาก pathname (ยกจาก supplychain HeaderBreadcrumbs) */
+export function HeaderBreadcrumbs({
+  labels,
+  homeHref = "/",
+  homeLabel = "Home",
+  skip = [],
+  hideIds = false,
+}: HeaderBreadcrumbsProps) {
+  const pathname = usePathname();
+  const all = pathname.split("/").filter(Boolean);
+  // segments ที่ยังคง href เต็ม แต่ไม่แสดงตัวที่อยู่ใน skip / เป็น id
+  const shown = all
+    .map((segment, index) => ({ segment, href: `/${all.slice(0, index + 1).join("/")}` }))
+    .filter(({ segment }) => !skip.includes(segment) && !(hideIds && ID_LIKE.test(segment)));
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem className="hidden md:block">
+          <BreadcrumbLink render={<Link href={homeHref} />}>{homeLabel}</BreadcrumbLink>
+        </BreadcrumbItem>
+        {shown.length > 0 && <BreadcrumbSeparator className="hidden md:block" />}
+        {shown.map(({ segment, href }, index) => {
+          const isLast = index === shown.length - 1;
+          const label = labelOf(segment, labels);
+          return (
+            <Fragment key={href}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage className="max-w-[160px] truncate md:max-w-none">
+                    {label}
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink render={<Link href={href} />}>{label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator className="hidden md:block" />}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/src/components/app-shell/index.ts

@@ -0,0 +1,14 @@
+export { AppBrand, type AppBrandProps } from "./app-brand";
+export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
+export { AppShell, type AppShellProps } from "./app-shell";
+export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
+export { NavLink } from "./nav-link";
+export {
+  type AppNavGroup,
+  type AppNavItem,
+  filterNav,
+  flattenNav,
+  isNavActive,
+  searchNav,
+} from "./types";
+export { UserMenu, type UserMenuProps, type UserMenuUser } from "./user-menu";

package/src/components/app-shell/nav-link.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ComponentProps, ReactNode } from "react";
+import { isNavActive } from "./types";
+
+/** ลิงก์ที่ไฮไลต์เมื่อ path ปัจจุบันอยู่ใต้ href (prefix match) — ยกจาก Pi Auth */
+export function NavLink({
+  href,
+  children,
+  exact = false,
+  className,
+  activeClassName = "bg-accent text-accent-foreground font-medium",
+  ...props
+}: Omit<ComponentProps<typeof Link>, "href"> & {
+  href: string;
+  children: ReactNode;
+  exact?: boolean;
+  activeClassName?: string;
+}) {
+  const pathname = usePathname();
+  const active = isNavActive(pathname, href, exact);
+  return (
+    <Link
+      href={href}
+      className={cn(className, active && activeClassName)}
+      aria-current={active ? "page" : undefined}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}

package/src/components/app-shell/types.ts

@@ -0,0 +1,92 @@
+import type { CheckPermissionRequirement } from "@suphark/ui/lib/permission";
+import type { ReactNode } from "react";
+
+/**
+ * โมเดลเมนูของ AppShell — ใช้ร่วมกันทุกแอป
+ *
+ * `icon` เป็น ReactNode (เช่น `<UsersIcon />`) ไม่ใช่ component เพื่อให้ประกาศเมนูใน server component
+ * (layout.tsx) แล้วส่งเข้า client component ได้ (function ส่งข้าม boundary ไม่ได้)
+ */
+export interface AppNavItem {
+  title: string;
+  /** ไม่มี href = หัวกลุ่มย่อยที่กางออก (ต้องมี items) */
+  href?: string;
+  icon?: ReactNode;
+  /** เมนูย่อย (รองรับ 2 ชั้น: item → items) */
+  items?: AppNavItem[];
+  /** ไฮไลต์เฉพาะเมื่อ path ตรงทั้งหมด (ค่าเริ่มต้น: prefix match) */
+  exact?: boolean;
+  /** สิทธิ์ที่ต้องมีจึงเห็นเมนูนี้ — ตัดด้วย `filterNav` */
+  permission?: CheckPermissionRequirement;
+  /** ป้ายท้ายเมนู เช่นจำนวนงานค้าง */
+  badge?: ReactNode;
+  /** ฟีเจอร์ทดลอง — แสดงสีอำพัน + ไอคอนขวดทดลอง (ตาม supplychain) */
+  isLabs?: boolean;
+}
+
+export interface AppNavGroup {
+  /** หัวกลุ่ม (ไม่ใส่ = ไม่มีหัว) */
+  title?: string;
+  items: AppNavItem[];
+  permission?: CheckPermissionRequirement;
+}
+
+/**
+ * ตัดเมนูที่ผู้ใช้ไม่มีสิทธิ์ออกทุกชั้น — ไม่ให้กดแล้วเจอหน้า error (หน้าเองยังต้องตรวจสิทธิ์ซ้ำ)
+ * `can` = ตัวตรวจของแอป (เช่น `ctx.can`, หรือ `usePermissionChecker()` ฝั่ง client)
+ */
+export function filterNav(
+  nav: AppNavGroup[],
+  can: (permission: CheckPermissionRequirement) => boolean,
+): AppNavGroup[] {
+  const filterItems = (items: AppNavItem[]): AppNavItem[] =>
+    items
+      .filter((item) => !item.permission || can(item.permission))
+      .map((item) => (item.items ? { ...item, items: filterItems(item.items) } : item))
+      // กลุ่มย่อยที่ลูกโดนตัดหมดและตัวเองไม่มี href → ตัดทิ้ง
+      .filter((item) => item.href || (item.items && item.items.length > 0));
+
+  return nav
+    .filter((group) => !group.permission || can(group.permission))
+    .map((group) => ({ ...group, items: filterItems(group.items) }))
+    .filter((group) => group.items.length > 0);
+}
+
+/** true เมื่อ pathname อยู่ใต้ href (หรือตรงทั้งหมดเมื่อ exact) */
+export function isNavActive(pathname: string, href: string | undefined, exact = false): boolean {
+  if (!href || href === "#") return false;
+  if (exact || href === "/") return pathname === href;
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+/** กรองเมนูตามคำค้น (ช่องค้นหาเมนูใน sidebar) — เก็บ parent ไว้ถ้าลูกตรง */
+export function searchNav(nav: AppNavGroup[], query: string): AppNavGroup[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return nav;
+  const filterItems = (items: AppNavItem[]): AppNavItem[] =>
+    items
+      .map((item) => {
+        if (item.title.toLowerCase().includes(q)) return item;
+        const children = item.items ? filterItems(item.items) : [];
+        return children.length > 0 ? { ...item, items: children } : null;
+      })
+      .filter((item): item is AppNavItem => item !== null);
+  return nav
+    .map((group) => ({ ...group, items: filterItems(group.items) }))
+    .filter((group) => group.items.length > 0);
+}
+
+/** รายการเมนูทั้งหมดแบบแบน (สำหรับ command palette / pinned menus) */
+export function flattenNav(
+  nav: AppNavGroup[],
+): Array<AppNavItem & { href: string; group?: string }> {
+  const out: Array<AppNavItem & { href: string; group?: string }> = [];
+  const walk = (items: AppNavItem[], group?: string) => {
+    for (const item of items) {
+      if (item.href) out.push({ ...item, href: item.href, group });
+      if (item.items) walk(item.items, group);
+    }
+  };
+  for (const g of nav) walk(g.items, g.title);
+  return out;
+}

package/src/components/app-shell/user-menu.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Initials } from "@suphark/ui/components/shared/initials";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronsUpDown, LogOut } from "lucide-react";
+import { type ReactNode, useTransition } from "react";
+
+export interface UserMenuUser {
+  name: string;
+  email?: string | null;
+  /** URL รูป */
+  image?: string | null;
+  /** บรรทัดรอง เช่น ตำแหน่ง · องค์กร */
+  description?: ReactNode;
+}
+
+export interface UserMenuProps {
+  user: UserMenuUser;
+  /**
+   * รายการเมนู (DropdownMenuItem / DropdownMenuGroup / ThemeMenuItems …) — วางระหว่างหัวกับปุ่มออกจากระบบ
+   * แอปเป็นคนใส่เอง เช่น บัญชีผู้ใช้, การแจ้งเตือน, ธีม, สลับภาษา
+   */
+  children?: ReactNode;
+  /** ไม่ส่ง = ไม่มีปุ่มออกจากระบบ */
+  onSignOut?: () => void | Promise<void>;
+  signOutLabel?: ReactNode;
+  /**
+   * `sidebar` = ปุ่มกว้างเต็ม footer ของ sidebar (Pi Auth) · `header` = ปุ่มกะทัดรัดใน header (supplychain)
+   */
+  variant?: "sidebar" | "header";
+  align?: "start" | "end";
+  className?: string;
+}
+
+/** เมนูผู้ใช้ (ยกจาก supplychain NavUser + Pi Auth UserMenu) */
+export function UserMenu({
+  user,
+  children,
+  onSignOut,
+  signOutLabel = "ออกจากระบบ",
+  variant = "sidebar",
+  align = variant === "header" ? "end" : "start",
+  className,
+}: UserMenuProps) {
+  const [pending, start] = useTransition();
+  const description = user.description ?? user.email;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            aria-label={`เปิดเมนูผู้ใช้ ${user.name}`}
+            className={cn(
+              variant === "sidebar"
+                ? "h-auto w-full justify-start gap-2.5 px-2 py-2 text-left group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0"
+                : "h-9 min-w-0 gap-2 px-1.5 data-[state=open]:bg-accent sm:px-2",
+              className,
+            )}
+          />
+        }
+      >
+        <Initials name={user.name} src={user.image} size="sm" />
+        <span
+          className={cn(
+            "min-w-0 flex-1 flex-col text-left leading-tight",
+            variant === "sidebar" ? "flex group-data-[collapsible=icon]:hidden" : "hidden xl:flex",
+          )}
+        >
+          <span className="truncate font-medium text-sm">{user.name}</span>
+          {description && (
+            <span className="truncate text-muted-foreground text-xs">{description}</span>
+          )}
+        </span>
+        <ChevronsUpDown
+          aria-hidden="true"
+          className={cn(
+            "text-muted-foreground",
+            variant === "sidebar" ? "group-data-[collapsible=icon]:hidden" : "hidden xl:block",
+          )}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={variant === "header" ? "bottom" : undefined}
+        sideOffset={variant === "header" ? 8 : 4}
+        className="min-w-60 rounded-lg"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="p-0 font-normal">
+            <div className="flex min-w-0 items-center gap-2 px-2 py-2 text-left text-sm">
+              <Initials name={user.name} src={user.image} size="sm" />
+              <div className="grid min-w-0 flex-1 leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                {user.description && (
+                  <span className="truncate text-muted-foreground text-xs">{user.description}</span>
+                )}
+                {user.email && (
+                  <span className="truncate text-muted-foreground text-xs">{user.email}</span>
+                )}
+              </div>
+            </div>
+          </DropdownMenuLabel>
+        </DropdownMenuGroup>
+        {children && (
+          <>
+            <DropdownMenuSeparator />
+            {children}
+          </>
+        )}
+        {onSignOut && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled={pending} onClick={() => start(() => onSignOut())}>
+              <LogOut aria-hidden="true" />
+              {signOutLabel}
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}