50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T89fc,"use client"; /** * @author: @dorianbaffier * @description: Account Menu * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Check, ChevronLeft, ChevronRight, ChevronsUpDown, CreditCard, LogOut, Monitor, Moon, Plus, Settings, Sun, User, } from "lucide-react"; import { animate, motion, type Transition, useMotionTemplate, useMotionValue, useReducedMotion, } from "motion/react"; import { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type PointerEvent, type ReactNode, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface Account { id: string; name: string; email: string; /** Shown in the avatar. Defaults to the first letters of `name`. */ initials?: string; /** Plain label shown in the menu header, such as "Pro". */ plan?: string; } export type AccountStatus = "online" | "away" | "busy"; export type AccountTheme = "light" | "dark" | "system"; export interface ProfileMenuItem { label: string; icon?: ReactNode; /** Quiet text on the right, such as a plan name or a shortcut. */ value?: string; /** Renders the item as a link. Without it the item is a button. */ href?: string; /** Opens `href` in a new tab. */ external?: boolean; onSelect?: () => void; } interface ProfileDropdownProps extends Omit, "onChange"> { accounts?: Account[]; defaultAccountId?: string; onAccountChange?: (account: Account) => void; onAddAccount?: () => void; /** Menu entries between the settings rows and Switch account. */ items?: ProfileMenuItem[]; /** Controlled theme. Leave it out to keep the choice in local state. */ theme?: AccountTheme; defaultTheme?: AccountTheme; onThemeChange?: (theme: AccountTheme) => void; status?: AccountStatus; defaultStatus?: AccountStatus; onStatusChange?: (status: AccountStatus) => void; /** Called once Sign out has been held for `holdDuration` ms. */ onSignOut?: () => void; holdDuration?: number; } const SAMPLE_ACCOUNTS: Account[] = [ { id: "personal", name: "Maya Ortega", email: "maya@ortega.me", plan: "Pro" }, { id: "studio", name: "Fieldwork Studio", email: "team@fieldwork.studio", plan: "Team", }, { id: "side", name: "Night Shift", email: "hello@nightshift.dev", plan: "Free", }, ]; const SAMPLE_ITEMS: ProfileMenuItem[] = [ { label: "Profile", icon: }, { label: "Settings", icon: , value: "⌘," }, { label: "Billing", icon: }, ]; const STATUSES: { id: AccountStatus; label: string; name: string; dot: string; }[] = [ { id: "online", label: "Online", name: "Online", dot: "bg-emerald-500" }, { id: "away", label: "Away", name: "Away", dot: "bg-amber-400" }, { id: "busy", label: "DND", name: "Do not disturb", dot: "bg-red-500" }, ]; const THEMES = [ { id: "light", label: "Light", Icon: Sun }, { id: "dark", label: "Dark", Icon: Moon }, { id: "system", label: "System", Icon: Monitor }, ] as const; const AVATAR_TONES = [ "bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900", "bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-100", "bg-zinc-100 text-zinc-500 ring-1 ring-zinc-200 ring-inset dark:bg-zinc-800 dark:text-zinc-300 dark:ring-zinc-700", ]; const WHITESPACE = /\s+/; const PANEL_W = 288; const RADIUS = 16; const SPRING: Transition = { type: "spring", duration: 0.3, bounce: 0 }; const INDICATOR_SPRING: Transition = { type: "spring", duration: 0.25, bounce: 0, }; const INSTANT: Transition = { duration: 0 }; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const NAV_KEYS = new Set([ "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End", ]); const ITEM_CLASS = "flex w-full cursor-default items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-left text-sm text-zinc-700 outline-none transition-colors duration-100 focus:bg-zinc-100 focus:text-zinc-950 dark:text-zinc-300 dark:focus:bg-zinc-800 dark:focus:text-zinc-50"; type Phase = "closed" | "open" | "closing"; type Page = "main" | "accounts"; type Via = "pointer" | "keyboard"; function initialsOf(account: Account) { if (account.initials) { return account.initials; } return account.name .split(WHITESPACE) .slice(0, 2) .map((part) => part[0] ?? "") .join("") .toUpperCase(); } function viaOf(event: MouseEvent): Via { // A click fired by Enter or Space carries no pointer detail. return event.detail === 0 ? "keyboard" : "pointer"; } function menuItems(root: HTMLElement | null) { if (!root) { return []; } return Array.from(root.querySelectorAll("[data-menu-item]")); } function sideTarget(items: HTMLElement[], current: HTMLElement, step: number) { const row = items.filter((item) => item.dataset.row === current.dataset.row); if (row.length < 2) { return; } const index = row.indexOf(current); return row[(index + step + row.length) % row.length]; } function rowTarget(items: HTMLElement[], current: HTMLElement, step: number) { const rows = [...new Set(items.map((item) => item.dataset.row))]; const index = rows.indexOf(current.dataset.row); const next = rows[(index + step + rows.length) % rows.length]; const candidates = items.filter((item) => item.dataset.row === next); return ( candidates.find((item) => item.getAttribute("aria-checked") === "true") ?? candidates[0] ); } /** Where arrow keys move focus: rows go up and down, radios left and right. */ function nextTarget( items: HTMLElement[], active: Element | null, key: string ): HTMLElement | undefined { if (key === "Home") { return items[0]; } if (key === "End") { return items.at(-1); } const current = items.find((item) => item === active); if (!current) { return key === "ArrowUp" ? items.at(-1) : items[0]; } if (key === "ArrowLeft" || key === "ArrowRight") { return sideTarget(items, current, key === "ArrowRight" ? 1 : -1); } return rowTarget(items, current, key === "ArrowDown" ? 1 : -1); } function useControllable( value: T | undefined, fallback: T, onChange?: (next: T) => void ) { const [local, setLocal] = useState(fallback); const set = (next: T) => { setLocal(next); onChange?.(next); }; return [value ?? local, set] as const; } function Avatar({ account, tone, status, className, }: { account: Account; tone: number; status?: AccountStatus; className?: string; }) { const dot = STATUSES.find((entry) => entry.id === status)?.dot; return ( {initialsOf(account)} {dot ? ( ) : null} ); } /** * The avatar, name and email. Rendered in the trigger while the menu is * closed and in the menu header while it is open; shared layout ids let the * three pieces travel between the two places. */ function Identity({ uid, shared, account, tone, status, transition, stacked, }: { uid: string; shared: boolean; account: Account; tone: number; status: AccountStatus; transition: Transition; stacked: boolean; }) { const hidden = shared ? undefined : "invisible"; return ( ); } function Separator() { return (

); } function HoldSignOut({ duration, onComplete, }: { duration: number; onComplete: (via: Via) => void; }) { const [holding, setHolding] = useState(false); const [done, setDone] = useState(false); const [nudge, setNudge] = useState(false); const timer = useRef(undefined); const nudgeTimer = useRef(undefined); useEffect( () => () => { window.clearTimeout(timer.current); window.clearTimeout(nudgeTimer.current); }, [] ); const start = (via: Via) => { if (timer.current !== undefined || done) { return; } window.clearTimeout(nudgeTimer.current); setNudge(false); setHolding(true); timer.current = window.setTimeout(() => { timer.current = undefined; setHolding(false); setDone(true); onComplete(via); }, duration); }; const cancel = () => { if (timer.current === undefined) { return; } window.clearTimeout(timer.current); timer.current = undefined; setHolding(false); setNudge(true); nudgeTimer.current = window.setTimeout(() => setNudge(false), 1400); }; const label = ( <> Sign out {nudge ? "Keep holding" : "Hold"} ); return ( ); } function StatusRow({ status, onChange, }: { status: AccountStatus; onChange: (status: AccountStatus) => void; }) { return (

Status {STATUSES.map((entry) => { const checked = entry.id === status; return ( ); })}

); } function ThemeRow({ uid, theme, onChange, reduced, }: { uid: string; theme: AccountTheme; onChange: (theme: AccountTheme) => void; reduced: boolean; }) { return (

Theme {THEMES.map(({ id, label, Icon }) => { const checked = id === theme; return ( ); })}

); } function LinkItem({ item, index, onSelect, }: { item: ProfileMenuItem; index: number; onSelect: (event: MouseEvent, run?: () => void) => void; }) { const inner = ( <> {item.icon} {item.label} {item.value ? ( {item.value} ) : null} ); const common = { className: ITEM_CLASS, "data-menu-item": "", "data-row": `item-${index}`, onClick: (event: MouseEvent) => onSelect(event, item.onSelect), role: "menuitem", tabIndex: -1, } as const; if (item.href) { return ( {inner} ); } return ( ); } export default function ProfileDropdown({ accounts = SAMPLE_ACCOUNTS, defaultAccountId, onAccountChange, onAddAccount, items = SAMPLE_ITEMS, theme: themeProp, defaultTheme = "system", onThemeChange, status: statusProp, defaultStatus = "online", onStatusChange, onSignOut, holdDuration = 1200, className, ...props }: ProfileDropdownProps) { const uid = useId(); const reduced = useReducedMotion() === true; const [phase, setPhase] = useState("closed"); const [instant, setInstant] = useState(false); const [page, setPage] = useState("main"); const [openSeq, setOpenSeq] = useState(0); const [accountId, setAccountId] = useState( defaultAccountId ?? accounts[0]?.id ); const [theme, setTheme] = useControllable( themeProp, defaultTheme, onThemeChange ); const [status, setStatus] = useControllable( statusProp, defaultStatus, onStatusChange ); const wrapperRef = useRef(null); const triggerRef = useRef(null); const mainRef = useRef(null); const accountsRef = useRef(null); const phaseRef = useRef("closed"); phaseRef.current = phase; const openIntent = useRef<{ focus: "first" | "last" | "menu"; resume: boolean; }>({ focus: "menu", resume: false }); const pageFocus = useRef<"first" | "switch" | null>(null); const closeSeq = useRef(0); const targetH = useRef(0); // The panel's visible box. The two surface layers (border and fill) and the // content all clip to it, so the menu grows out of the trigger's own // rectangle without any layout work per frame. const w = useMotionValue(0); const h = useMotionValue(0); const pageX = useMotionValue(0); const bodyOpacity = useMotionValue(1); const outerClip = useMotionTemplate`inset(0px 0px calc(100% - ${h}px) calc(100% - ${w}px) round ${RADIUS}px)`; const innerClip = useMotionTemplate`inset(1px 1px calc(100% - ${h}px + 1px) calc(100% - ${w}px + 1px) round ${RADIUS - 1}px)`; const pageTransform = useMotionTemplate`translate3d(${pageX}px, 0, 0)`; const account = accounts.find((entry) => entry.id === accountId) ?? accounts[0] ?? { id: "guest", name: "Guest", email: "" }; const tone = Math.max(0, accounts.indexOf(account)); const others = accounts.filter((entry) => entry.id !== account.id); const sharedTransition = instant ? INSTANT : SPRING; const sharedInPanel = phase === "open"; const menuId = `${uid}-menu`; const pageEl = (target: Page) => target === "main" ? mainRef.current : accountsRef.current; const openMenu = (via: Via, focus: "first" | "last" | "menu") => { if (phaseRef.current === "open") { return; } openIntent.current = { focus, resume: phaseRef.current === "closing" }; closeSeq.current += 1; setInstant(via === "keyboard" || reduced); setPage("main"); setPhase("open"); setOpenSeq((seq) => seq + 1); }; const closeMenu = (via: Via, returnFocus: boolean) => { if (phaseRef.current !== "open") { return; } const trigger = triggerRef.current; if (returnFocus) { trigger?.focus({ preventScroll: true }); } if (via === "keyboard" || reduced || !trigger) { setInstant(true); setPhase("closed"); return; } setInstant(false); setPhase("closing"); const seq = ++closeSeq.current; animate(bodyOpacity, 0, { duration: 0.12, ease: EASE_OUT }); animate(w, trigger.offsetWidth, SPRING); animate(h, trigger.offsetHeight, SPRING).then(() => { if (closeSeq.current === seq) { setPhase("closed"); } }); }; const goTo = (target: Page) => { pageFocus.current = target === "accounts" ? "first" : "switch"; setPage(target); }; const select = (event: MouseEvent, run?: () => void) => { run?.(); closeMenu(viaOf(event), true); }; // Opening: size the clip to the trigger, then spring it out to the menu. // A keyboard open skips straight to the end. // biome-ignore lint/correctness/useExhaustiveDependencies: runs once per open useLayoutEffect(() => { const trigger = triggerRef.current; const main = mainRef.current; if (openSeq === 0 || phaseRef.current !== "open" || !trigger || !main) { return; } pageX.jump(0); targetH.current = main.offsetHeight; if (instant) { w.jump(PANEL_W); h.jump(targetH.current); bodyOpacity.jump(1); } else { if (!openIntent.current.resume) { w.jump(trigger.offsetWidth); h.jump(trigger.offsetHeight); bodyOpacity.jump(0); } animate(w, PANEL_W, SPRING); animate(h, targetH.current, SPRING); animate(bodyOpacity, 1, { duration: 0.2, delay: 0.05, ease: EASE_OUT }); } const list = menuItems(main); const targets = { first: list[0], last: list.at(-1), menu: main.querySelector("[role=menu]"), }; targets[openIntent.current.focus]?.focus({ preventScroll: true }); }, [openSeq]); // Switching pages: push sideways and spring the height to the new page. // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on page useEffect(() => { const el = pageEl(page); if (phaseRef.current !== "open" || !el) { return; } const x = page === "main" ? 0 : -PANEL_W; targetH.current = el.offsetHeight; if (reduced) { pageX.jump(x); h.jump(targetH.current); } else { animate(pageX, x, SPRING); animate(h, targetH.current, SPRING); } const intent = pageFocus.current; pageFocus.current = null; if (intent === "first") { const list = menuItems(el); const checked = list.find( (item) => item.getAttribute("aria-checked") === "true" ); (checked ?? list[0])?.focus({ preventScroll: true }); } else if (intent === "switch") { el.querySelector("[data-switch]")?.focus({ preventScroll: true, }); } }, [page]); // Keep the height in step if a page's content changes size while open. // biome-ignore lint/correctness/useExhaustiveDependencies: observers read refs useEffect(() => { if (phase !== "open") { return; } const observer = new ResizeObserver(() => { const el = pageEl(page); if (!el || phaseRef.current !== "open") { return; } const next = el.offsetHeight; if (Math.abs(next - targetH.current) < 0.5) { return; } targetH.current = next; animate(h, next, reduced ? INSTANT : SPRING); }); for (const el of [mainRef.current, accountsRef.current]) { if (el) { observer.observe(el); } } return () => observer.disconnect(); }, [phase, page]); // A press anywhere outside closes, with the morph. // biome-ignore lint/correctness/useExhaustiveDependencies: closeMenu reads refs useEffect(() => { if (phase !== "open") { return; } const onDown = (event: globalThis.PointerEvent) => { if (!wrapperRef.current?.contains(event.target as Node)) { closeMenu("pointer", false); } }; document.addEventListener("pointerdown", onDown, true); return () => document.removeEventListener("pointerdown", onDown, true); }, [phase]); const onPanelKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" || event.key === "Tab") { event.preventDefault(); closeMenu("keyboard", true); return; } if (page === "accounts" && event.key === "Backspace") { event.preventDefault(); goTo("main"); return; } if (!NAV_KEYS.has(event.key)) { return; } event.preventDefault(); const active = document.activeElement; const target = nextTarget(menuItems(pageEl(page)), active, event.key); if (target) { target.focus({ preventScroll: true }); } else if (page === "accounts" && event.key === "ArrowLeft") { goTo("main"); } else if ( event.key === "ArrowRight" && active instanceof HTMLElement && active.dataset.switch !== undefined ) { goTo("accounts"); } }; // Hovering an item focuses it, so pointer and keyboard share one highlight. const onPanelPointerMove = (event: PointerEvent) => { if (event.pointerType !== "mouse") { return; } const item = (event.target as HTMLElement).closest( "[data-menu-item]" ); if (item && document.activeElement !== item) { item.focus({ preventScroll: true }); } }; return (

{phase === "closed" ? null : (

{account.plan ? ( {account.plan} ) : null}

)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/profile-dropdown.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/profile-dropdown.tsx"}],"className":"h-[70svh] min-h-80"}]]}]