@humain/ui 2.1.63 → 2.1.65

package/dist/index228.js

@@ -1,203 +1,277 @@
 "use client";
 import { cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { Input } from "./index33.js";
-import { Separator } from "./index51.js";
-import { renderActionElement } from "./index226.js";
-import { Eye, EyeOff } from "lucide-react";
+import { useControllableState } from "./index12.js";
+import { createSafeContext } from "./index21.js";
+import { Switch } from "./index42.js";
+import { Kbd } from "./index106.js";
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./index212.js";
+import { cva } from "class-variance-authority";
+import { ChevronRight, LogOut } from "lucide-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/pages/_auth/auth-page-utils.tsx
-function AuthForm({ children, className, ...props }) {
-	return /* @__PURE__ */ jsx("form", {
-		className: cn("flex flex-col gap-4", className),
-		...props,
-		children
+//#region src/components/templates/NavAccountMenu/NavAccountMenu.tsx
+var [NavAccountMenuContext, useNavAccountMenuContext] = createSafeContext("NavAccountMenu");
+function NavAccountMenu({ type = "card", open: controlledOpen, defaultOpen = false, onOpenChange, children }) {
+	const [open, handleOpenChange] = useControllableState({
+		value: controlledOpen,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
 	});
-}
-function AuthPasswordInput({ endIcon, visibilityLabel = "password", ...props }) {
-	const [isVisible, setIsVisible] = React.useState(false);
-	const label = `${isVisible ? "Hide" : "Show"} ${visibilityLabel}`;
-	const toggle = /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label,
-		"aria-pressed": isVisible,
-		title: label,
-		onClick: () => setIsVisible((value) => !value),
-		className: "pointer-events-auto inline-flex size-5 items-center justify-center rounded-sm text-text-quaternary transition-colors duration-150 ease-smooth hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-		children: /* @__PURE__ */ jsx(isVisible ? EyeOff : Eye, {
-			"aria-hidden": true,
-			className: "size-4"
+	const contextValue = React.useMemo(() => ({
+		type,
+		open,
+		onOpenChange: handleOpenChange
+	}), [
+		type,
+		open,
+		handleOpenChange
+	]);
+	return /* @__PURE__ */ jsx(NavAccountMenuContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(PopoverRoot, {
+			open,
+			onOpenChange: handleOpenChange,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "nav-account-menu",
+				children
+			})
 		})
 	});
-	return /* @__PURE__ */ jsx(Input, {
-		...props,
-		type: isVisible ? "text" : "password",
-		endIcon: endIcon ? /* @__PURE__ */ jsxs("span", {
-			className: "pointer-events-auto inline-flex items-center gap-2",
-			children: [endIcon, toggle]
-		}) : toggle
+}
+var triggerVariants = cva("flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", {
+	variants: { type: {
+		card: "bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2",
+		simple: "border border-border px-2 py-3 hover:bg-surface-2 rounded-lg"
+	} },
+	defaultVariants: { type: "card" }
+});
+function NavAccountMenuTrigger({ avatar, name, email, badge, showLogoutButton, onLogout, compact = false, className }) {
+	const { type, open } = useNavAccountMenuContext();
+	const handleLogoutClick = (e) => {
+		e.stopPropagation();
+		onLogout?.();
+	};
+	const avatarContent = avatar ? /* @__PURE__ */ jsx("div", {
+		className: "shrink-0",
+		children: avatar
+	}) : null;
+	const accountDetails = !compact ? /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-sm font-semibold text-foreground",
+				children: name
+			}), badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: badge
+			})]
+		}), email && /* @__PURE__ */ jsx("span", {
+			className: "truncate text-sm text-muted-foreground",
+			children: email
+		})]
+	}) : null;
+	if (type === "simple" && showLogoutButton && !compact) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "nav-account-menu-trigger",
+		className: cn(triggerVariants({ type }), "group/trigger", className),
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-haspopup": "true",
+				className: "flex min-w-0 flex-1 items-center gap-4 text-left outline-none"
+			}),
+			children: [avatarContent, accountDetails]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleLogoutClick,
+			className: "shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+			"aria-label": "Sign out",
+			children: /* @__PURE__ */ jsx(LogOut, { className: "size-5" })
+		})]
+	});
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "nav-account-menu-trigger",
+			"aria-haspopup": "true",
+			"aria-label": compact ? `${name} account menu` : void 0,
+			className: cn(triggerVariants({ type }), "group/trigger", compact ? "w-auto justify-center" : "max-w-[280px]", className)
+		}),
+		children: [avatarContent, !compact && /* @__PURE__ */ jsxs(Fragment, { children: [accountDetails, /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none", open ? "rotate-180" : "rtl:rotate-180") })] })]
 	});
 }
-function AuthPrimaryButton({ children, loading }) {
-	return /* @__PURE__ */ jsx(Button, {
-		appearance: "solid",
-		loading,
-		shape: "rounded",
-		size: "md",
-		type: "submit",
-		className: "w-full",
-		children
+function NavAccountMenuContent({ side = "right", align = "end", sideOffset = 8, children, className }) {
+	return /* @__PURE__ */ jsx(PopoverPopup, {
+		side,
+		align,
+		sideOffset,
+		"aria-label": "Account menu",
+		"data-slot": "nav-account-menu-content",
+		className: cn("w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden", "shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]", "data-open:animate-in data-closed:animate-out", "data-closed:fade-out-0 data-open:fade-in-0", "data-closed:zoom-out-95 data-open:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "duration-200 motion-reduce:animate-none", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col py-2",
+			role: "menu",
+			"aria-label": "Account menu",
+			children
+		})
 	});
 }
-function getNonNativeActionProps({ disabled: _disabled, ref: _ref, role: _role, tabIndex: _tabIndex, type: _type, ...props }) {
-	return props;
+function NavAccountMenuHeader({ title, subtitle, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "nav-account-menu-header",
+		className: cn("px-6 pb-3 delight-fade-in", className),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-base font-semibold text-foreground",
+			children: title
+		}), subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", {
+			className: "mt-2 text-sm text-muted-foreground",
+			children: subtitle
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "mt-2",
+			children: subtitle
+		}))]
+	});
 }
-function renderActionLink(href) {
-	return function renderLinkAction(props) {
-		return /* @__PURE__ */ jsx("a", {
-			...getNonNativeActionProps(props),
-			href
-		});
-	};
+function NavAccountMenuSection({ label, bordered = false, children, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "nav-account-menu-section",
+		"aria-label": label,
+		className: cn("flex flex-col gap-1 py-1.5", bordered && "border-t border-border", className),
+		children: [label && /* @__PURE__ */ jsx("div", {
+			className: "px-3 pt-1.5 pb-1",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-semibold text-muted-foreground",
+				children: label
+			})
+		}), children]
+	});
 }
-function renderCustomActionElement(action) {
-	return function renderCustomAction(buttonProps) {
-		const props = getNonNativeActionProps(buttonProps);
-		if (!action.render) return /* @__PURE__ */ jsx("button", {
-			type: "button",
-			...props
-		});
-		return React.cloneElement(action.render, {
-			...props,
-			className: cn(props.className, action.render.props.className),
-			onClick: action.onClick ?? action.render.props.onClick ?? props.onClick,
-			children: action.render.props.children ?? props.children ?? action.label
-		});
+function NavAccountMenuItem({ icon, shortcut, destructive = false, disabled = false, onSelect, render, children, className }) {
+	const { onOpenChange } = useNavAccountMenuContext();
+	const handleClick = () => {
+		if (disabled) return;
+		onSelect?.();
+		onOpenChange(false);
 	};
-}
-function renderActionButton(action) {
-	if (action.render) return renderCustomActionElement(action);
-	if (action.href) return renderActionLink(action.href);
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 gap-2 items-center min-w-0",
+			children: [icon && /* @__PURE__ */ jsx("span", {
+				className: cn("shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none", destructive ? "text-destructive" : "text-foreground"),
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("flex-1 text-sm truncate", destructive ? "text-destructive" : "text-secondary-foreground"),
+				children
+			})]
+		}), shortcut && /* @__PURE__ */ jsx(Kbd, {
+			variant: "outline",
+			size: "xs",
+			className: "shrink-0",
+			children: shortcut
+		})]
+	});
+	const baseClassName = cn("group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none", "hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", disabled && "pointer-events-none opacity-50", className);
+	if (render) return render({
+		className: baseClassName,
+		onClick: handleClick,
+		children: content
+	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		children: action.label
+		role: "menuitem",
+		"data-slot": "nav-account-menu-item",
+		className: baseClassName,
+		onClick: handleClick,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		children: content
 	});
 }
-function getPrimaryActionButtonType(action, isPolymorphic) {
-	if (isPolymorphic) return;
-	if (action.onClick) return "button";
-	return "submit";
-}
-function AuthPrimaryActionButton({ action, loading }) {
-	const isPolymorphic = !!(action.href || action.render);
-	return /* @__PURE__ */ jsx(Button, {
-		appearance: "solid",
-		loading: !isPolymorphic ? loading : void 0,
-		nativeButton: isPolymorphic ? false : void 0,
-		render: isPolymorphic ? renderActionButton(action) : void 0,
-		shape: "rounded",
-		size: "md",
-		type: getPrimaryActionButtonType(action, isPolymorphic),
-		onClick: action.onClick,
-		className: "w-full",
-		children: action.label
-	});
-}
-function AuthGhostAction({ action }) {
-	const isPolymorphic = !!(action.href || action.render);
-	return /* @__PURE__ */ jsx(Button, {
-		appearance: "ghost",
-		nativeButton: isPolymorphic ? false : void 0,
-		render: renderActionButton(action),
-		shape: "rounded",
-		size: "md",
-		type: isPolymorphic ? void 0 : "button",
-		onClick: action.onClick,
-		className: "w-full",
-		children: action.label
+function NavAccountMenuAccount({ avatar, name, email, selected = false, onSelect, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "nav-account-menu-account",
+		className: cn("flex items-center px-1.5 py-0 w-full", className),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "menuitemradio",
+			"aria-checked": selected,
+			"aria-label": `Switch to ${name} (${email})`,
+			className: cn("relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none", "hover:bg-muted focus-visible:bg-muted", "transition-colors duration-200 ease-smooth motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", "text-left", selected && "bg-surface-2"),
+			onClick: onSelect,
+			children: [
+				avatar && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: avatar
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold text-foreground truncate",
+						children: name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground truncate",
+						children: email
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none", selected ? "bg-primary border-primary" : "border-border bg-transparent"),
+					children: selected && /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-primary-foreground delight-check-bounce" })
+				})
+			]
+		})
 	});
 }
-function AuthInlineAction({ prefix, action }) {
-	return /* @__PURE__ */ jsxs("p", {
-		className: "text-center text-md leading-normal text-secondary-foreground",
-		children: [/* @__PURE__ */ jsxs("span", { children: [prefix, " "] }), renderActionElement(action, "font-medium text-foreground transition-colors duration-150 ease-smooth hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background")]
+function NavAccountMenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx("hr", {
+		"data-slot": "nav-account-menu-separator",
+		className: cn("h-px border-0 bg-border mx-5", className)
 	});
 }
-function AuthSocialDivider({ label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-4",
-		children: [
-			/* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
-			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0 text-md text-foreground",
-				children: label
-			}),
-			/* @__PURE__ */ jsx(Separator, { className: "flex-1" })
-		]
+function NavAccountMenuFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "nav-account-menu-footer",
+		className: cn("flex items-center justify-center px-5 pt-4", className),
+		children
 	});
 }
-function AuthSsoActions({ actions }) {
-	if (!actions?.length) return null;
+function NavAccountMenuThemeSwitch({ variant = "theme-gradient", size = "sm", checked, onCheckedChange, label, className }) {
+	const switchId = React.useId();
+	const labelId = label ? `${switchId}-label` : void 0;
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex flex-col gap-3",
-		children: actions.map((action, index) => {
-			const isPolymorphic = !!(action.href || action.render);
-			return /* @__PURE__ */ jsx(Button, {
-				appearance: "outline",
-				nativeButton: isPolymorphic ? false : void 0,
-				render: renderActionButton(action),
-				shape: "rounded",
-				size: "default",
-				type: isPolymorphic ? void 0 : "button",
-				onClick: action.onClick,
-				className: "w-full",
-				children: action.label
-			}, `${String(action.label)}-${index}`);
+		"data-slot": "nav-account-menu-theme-switch",
+		className: cn("flex items-center px-1.5 py-0", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2.5 p-2",
+			children: [/* @__PURE__ */ jsx(Switch, {
+				id: switchId,
+				variant,
+				size,
+				checked,
+				onCheckedChange,
+				"aria-labelledby": labelId,
+				"aria-label": label ? void 0 : "Theme selector"
+			}), label && /* @__PURE__ */ jsx("label", {
+				htmlFor: switchId,
+				id: labelId,
+				className: "cursor-pointer text-sm text-secondary-foreground",
+				children: label
+			})]
 		})
 	});
 }
-var defaultLoginAside = {
-	title: /* @__PURE__ */ jsxs(Fragment, { children: [
-		"Welcome back!",
-		/* @__PURE__ */ jsx("br", {}),
-		"Please sign in to your Create Studio account"
-	] }),
-	description: "Thank you for registering! Please check your inbox and click the verification link to activate your account.",
-	cardTitle: "Please enter your login details",
-	cardDescription: "Stay connected with Shadcn Studio Subscribe now for the latest updates and news."
-};
-var defaultRegisterAside = {
-	title: "Create your account to get started.",
-	description: "Your account will allow you to securely save your progress, customize your preferences, and stay connected across all your devices.",
-	cardTitle: "We're excited to have you join our community",
-	cardDescription: "Your account will allow you to securely save your progress, customize your preferences."
-};
-var defaultForgotPasswordAside = {
-	title: "Don't worry, it happens! Resetting your password is quick and easy.",
-	description: "Just enter your registered email address below, and we'll send you a secure link to reset your password. Follow the instructions in the email, and you'll be back in your account in no time!",
-	cardTitle: "Follow the instructions",
-	cardDescription: "If you don't see the email in your inbox, be sure to check your spam or junk folder."
-};
-var defaultResetPasswordAside = {
-	title: "You're just one step away from regaining access to your account.",
-	description: "Please create a new password below. Make sure it's strong and secure, combining letters, numbers, and special characters.",
-	cardTitle: "Reset Your Password",
-	cardDescription: "You're just one step away from regaining access to your account."
-};
-var defaultTwoFactorAside = {
-	title: "Enable Two-Factor Authentication (2FA)",
-	description: "Enhance the security of your account by enabling Two-Factor Authentication (2FA). With 2FA, you'll add an extra layer of protection.",
-	cardTitle: "Keeps your information safe",
-	cardDescription: "To get started, choose your preferred verification method and follow the instructions."
-};
-var defaultVerifyEmailAside = {
-	title: "Ensure you entered the correct email address",
-	description: "Thank you for signing up! To complete your registration and secure your account, we need to verify your email address.",
-	cardTitle: "Verify Your Email Address",
-	cardDescription: "Verifying your email helps us keep your account secure and ensures you won't miss important updates."
-};
+NavAccountMenu.displayName = "NavAccountMenu";
+NavAccountMenuTrigger.displayName = "NavAccountMenuTrigger";
+NavAccountMenuContent.displayName = "NavAccountMenuContent";
+NavAccountMenuHeader.displayName = "NavAccountMenuHeader";
+NavAccountMenuSection.displayName = "NavAccountMenuSection";
+NavAccountMenuItem.displayName = "NavAccountMenuItem";
+NavAccountMenuAccount.displayName = "NavAccountMenuAccount";
+NavAccountMenuSeparator.displayName = "NavAccountMenuSeparator";
+NavAccountMenuFooter.displayName = "NavAccountMenuFooter";
+NavAccountMenuThemeSwitch.displayName = "NavAccountMenuThemeSwitch";
 //#endregion
-export { AuthForm, AuthGhostAction, AuthInlineAction, AuthPasswordInput, AuthPrimaryActionButton, AuthPrimaryButton, AuthSocialDivider, AuthSsoActions, defaultForgotPasswordAside, defaultLoginAside, defaultRegisterAside, defaultResetPasswordAside, defaultTwoFactorAside, defaultVerifyEmailAside };
+export { NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, triggerVariants as navAccountMenuTriggerVariants };
 
 //# sourceMappingURL=index228.js.map

package/dist/index228.js.map

@@ -1 +1 @@
-{"version":3,"file":"index228.js","names":[],"sources":["../src/components/pages/_auth/auth-page-utils.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { Input, type InputProps } from '@/components/atoms/forms/Input';\nimport { Separator } from '@/components/atoms/layout/Separator';\nimport type {\n  AuthPageAction,\n  AuthPageAsideConfig,\n} from '@/components/templates/AuthPageLayout';\nimport { renderActionElement } from '@/components/templates/AuthPageLayout';\nimport { cn } from '@/lib/utils';\n\nexport interface AuthFormProps\n  extends Omit<React.ComponentProps<'form'>, 'children'> {\n  children: React.ReactNode;\n}\n\ntype ActionButtonRenderProps = React.ComponentProps<'button'>;\ntype ActionButtonType = React.ComponentProps<'button'>['type'];\ntype ActionButtonRender = (\n  props: ActionButtonRenderProps,\n) => React.ReactElement;\ntype ActionRenderTargetProps = Omit<\n  ActionButtonRenderProps,\n  'disabled' | 'ref' | 'role' | 'tabIndex' | 'type'\n>;\ntype ActionAnchorProps = Omit<React.ComponentProps<'a'>, 'href'>;\n\ninterface AuthPrimaryButtonProps {\n  children: React.ReactNode;\n  loading?: boolean;\n}\n\ninterface AuthActionButtonProps {\n  action: AuthPageAction;\n  loading?: boolean;\n}\n\ninterface AuthActionProps {\n  action: AuthPageAction;\n}\n\ninterface AuthInlineActionProps {\n  prefix: React.ReactNode;\n  action: AuthPageAction;\n}\n\ninterface AuthSocialDividerProps {\n  label: React.ReactNode;\n}\n\ninterface AuthSsoActionsProps {\n  actions?: AuthPageAction[];\n}\n\ninterface AuthPasswordInputProps extends InputProps {\n  visibilityLabel?: string;\n}\n\nexport function AuthForm({\n  children,\n  className,\n  ...props\n}: AuthFormProps): React.ReactElement {\n  return (\n    <form className={cn('flex flex-col gap-4', className)} {...props}>\n      {children}\n    </form>\n  );\n}\n\nexport function AuthPasswordInput({\n  endIcon,\n  visibilityLabel = 'password',\n  ...props\n}: AuthPasswordInputProps): React.ReactElement {\n  const [isVisible, setIsVisible] = React.useState(false);\n  const label = `${isVisible ? 'Hide' : 'Show'} ${visibilityLabel}`;\n  const VisibilityIcon = isVisible ? EyeOff : Eye;\n  const toggle = (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={isVisible}\n      title={label}\n      onClick={() => setIsVisible((value) => !value)}\n      className=\"pointer-events-auto inline-flex size-5 items-center justify-center rounded-sm text-text-quaternary transition-colors duration-150 ease-smooth hover:text-secondary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    >\n      <VisibilityIcon aria-hidden className=\"size-4\" />\n    </button>\n  );\n\n  return (\n    <Input\n      {...props}\n      type={isVisible ? 'text' : 'password'}\n      endIcon={\n        endIcon ? (\n          <span className=\"pointer-events-auto inline-flex items-center gap-2\">\n            {endIcon}\n            {toggle}\n          </span>\n        ) : (\n          toggle\n        )\n      }\n    />\n  );\n}\n\nexport function AuthPrimaryButton({\n  children,\n  loading,\n}: AuthPrimaryButtonProps): React.ReactElement {\n  return (\n    <Button\n      appearance=\"solid\"\n      loading={loading}\n      shape=\"rounded\"\n      size=\"md\"\n      type=\"submit\"\n      className=\"w-full\"\n    >\n      {children}\n    </Button>\n  );\n}\n\nfunction getNonNativeActionProps({\n  disabled: _disabled,\n  ref: _ref,\n  role: _role,\n  tabIndex: _tabIndex,\n  type: _type,\n  ...props\n}: ActionButtonRenderProps): ActionRenderTargetProps {\n  return props;\n}\n\nfunction renderActionLink(href: string): ActionButtonRender {\n  return function renderLinkAction(\n    props: ActionButtonRenderProps,\n  ): React.ReactElement {\n    const anchorProps = getNonNativeActionProps(props) as ActionAnchorProps;\n    return <a {...anchorProps} href={href} />;\n  };\n}\n\nfunction renderCustomActionElement(action: AuthPageAction): ActionButtonRender {\n  return function renderCustomAction(\n    buttonProps: ActionButtonRenderProps,\n  ): React.ReactElement {\n    const props = getNonNativeActionProps(buttonProps);\n    if (!action.render) {\n      return <button type=\"button\" {...props} />;\n    }\n\n    return React.cloneElement(action.render, {\n      ...props,\n      className: cn(props.className, action.render.props.className),\n      onClick: action.onClick ?? action.render.props.onClick ?? props.onClick,\n      children: action.render.props.children ?? props.children ?? action.label,\n    });\n  };\n}\n\nfunction renderActionButton(\n  action: AuthPageAction,\n): React.ReactElement | ActionButtonRender {\n  if (action.render) {\n    return renderCustomActionElement(action);\n  }\n\n  if (action.href) {\n    return renderActionLink(action.href);\n  }\n\n  return <button type=\"button\">{action.label}</button>;\n}\n\nfunction getPrimaryActionButtonType(\n  action: AuthPageAction,\n  isPolymorphic: boolean,\n): ActionButtonType {\n  if (isPolymorphic) {\n    return undefined;\n  }\n\n  if (action.onClick) {\n    return 'button';\n  }\n\n  return 'submit';\n}\n\nexport function AuthPrimaryActionButton({\n  action,\n  loading,\n}: AuthActionButtonProps): React.ReactElement {\n  const isPolymorphic = !!(action.href || action.render);\n  const supportsLoading = !isPolymorphic;\n\n  return (\n    <Button\n      appearance=\"solid\"\n      loading={supportsLoading ? loading : undefined}\n      nativeButton={isPolymorphic ? false : undefined}\n      render={isPolymorphic ? renderActionButton(action) : undefined}\n      shape=\"rounded\"\n      size=\"md\"\n      type={getPrimaryActionButtonType(action, isPolymorphic)}\n      onClick={action.onClick}\n      className=\"w-full\"\n    >\n      {action.label}\n    </Button>\n  );\n}\n\nexport function AuthGhostAction({\n  action,\n}: AuthActionProps): React.ReactElement {\n  const isPolymorphic = !!(action.href || action.render);\n\n  return (\n    <Button\n      appearance=\"ghost\"\n      nativeButton={isPolymorphic ? false : undefined}\n      render={renderActionButton(action)}\n      shape=\"rounded\"\n      size=\"md\"\n      type={isPolymorphic ? undefined : 'button'}\n      onClick={action.onClick}\n      className=\"w-full\"\n    >\n      {action.label}\n    </Button>\n  );\n}\n\nexport function AuthInlineAction({\n  prefix,\n  action,\n}: AuthInlineActionProps): React.ReactElement {\n  const className =\n    'font-medium text-foreground transition-colors duration-150 ease-smooth hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';\n\n  return (\n    <p className=\"text-center text-md leading-normal text-secondary-foreground\">\n      <span>{prefix} </span>\n      {renderActionElement(action, className)}\n    </p>\n  );\n}\n\nexport function AuthSocialDivider({\n  label,\n}: AuthSocialDividerProps): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Separator className=\"flex-1\" />\n      <span className=\"shrink-0 text-md text-foreground\">{label}</span>\n      <Separator className=\"flex-1\" />\n    </div>\n  );\n}\n\nexport function AuthSsoActions({\n  actions,\n}: AuthSsoActionsProps): React.ReactElement | null {\n  if (!actions?.length) return null;\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      {actions.map((action, index) => {\n        const isPolymorphic = !!(action.href || action.render);\n\n        return (\n          <Button\n            key={`${String(action.label)}-${index}`}\n            appearance=\"outline\"\n            nativeButton={isPolymorphic ? false : undefined}\n            render={renderActionButton(action)}\n            shape=\"rounded\"\n            size=\"default\"\n            type={isPolymorphic ? undefined : 'button'}\n            onClick={action.onClick}\n            className=\"w-full\"\n          >\n            {action.label}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport const defaultLoginAside: AuthPageAsideConfig = {\n  title: (\n    <>\n      Welcome back!\n      <br />\n      Please sign in to your Create Studio account\n    </>\n  ),\n  description:\n    'Thank you for registering! Please check your inbox and click the verification link to activate your account.',\n  cardTitle: 'Please enter your login details',\n  cardDescription:\n    'Stay connected with Shadcn Studio Subscribe now for the latest updates and news.',\n};\n\nexport const defaultRegisterAside: AuthPageAsideConfig = {\n  title: 'Create your account to get started.',\n  description:\n    'Your account will allow you to securely save your progress, customize your preferences, and stay connected across all your devices.',\n  cardTitle: \"We're excited to have you join our community\",\n  cardDescription:\n    'Your account will allow you to securely save your progress, customize your preferences.',\n};\n\nexport const defaultForgotPasswordAside: AuthPageAsideConfig = {\n  title: \"Don't worry, it happens! Resetting your password is quick and easy.\",\n  description:\n    \"Just enter your registered email address below, and we'll send you a secure link to reset your password. Follow the instructions in the email, and you'll be back in your account in no time!\",\n  cardTitle: 'Follow the instructions',\n  cardDescription:\n    \"If you don't see the email in your inbox, be sure to check your spam or junk folder.\",\n};\n\nexport const defaultResetPasswordAside: AuthPageAsideConfig = {\n  title: \"You're just one step away from regaining access to your account.\",\n  description:\n    \"Please create a new password below. Make sure it's strong and secure, combining letters, numbers, and special characters.\",\n  cardTitle: 'Reset Your Password',\n  cardDescription:\n    \"You're just one step away from regaining access to your account.\",\n};\n\nexport const defaultTwoFactorAside: AuthPageAsideConfig = {\n  title: 'Enable Two-Factor Authentication (2FA)',\n  description:\n    \"Enhance the security of your account by enabling Two-Factor Authentication (2FA). With 2FA, you'll add an extra layer of protection.\",\n  cardTitle: 'Keeps your information safe',\n  cardDescription:\n    'To get started, choose your preferred verification method and follow the instructions.',\n};\n\nexport const defaultVerifyEmailAside: AuthPageAsideConfig = {\n  title: 'Ensure you entered the correct email address',\n  description:\n    'Thank you for signing up! To complete your registration and secure your account, we need to verify your email address.',\n  cardTitle: 'Verify Your Email Address',\n  cardDescription:\n    \"Verifying your email helps us keep your account secure and ensures you won't miss important updates.\",\n};\n"],"mappings":"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"}
+{"version":3,"file":"index228.js","names":[],"sources":["../src/components/templates/NavAccountMenu/NavAccountMenu.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight, LogOut } from 'lucide-react';\nimport * as React from 'react';\nimport { Switch } from '@/components/atoms/forms/Switch/Switch';\nimport { Kbd } from '@/components/molecules/data/Kbd';\nimport {\n  PopoverRoot as PopoverBase,\n  PopoverPopup as PopoverContentBase,\n  PopoverTrigger as PopoverTriggerBase,\n} from '@/components/organisms/overlays/Popover';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// Context for NavAccountMenu\n// ============================================\n\ninterface NavAccountMenuContextValue {\n  type: 'card' | 'simple';\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst [NavAccountMenuContext, useNavAccountMenuContext] =\n  createSafeContext<NavAccountMenuContextValue>('NavAccountMenu');\n\n// ============================================\n// NavAccountMenu (Root)\n// ============================================\n\nexport interface NavAccountMenuProps {\n  /** Trigger variant style */\n  type?: 'card' | 'simple';\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Initial open state for uncontrolled mode */\n  defaultOpen?: boolean;\n  /** Children (trigger + content) */\n  children: React.ReactNode;\n}\n\nfunction NavAccountMenu({\n  type = 'card',\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: NavAccountMenuProps) {\n  const [open, handleOpenChange] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const contextValue = React.useMemo(\n    () => ({\n      type,\n      open,\n      onOpenChange: handleOpenChange,\n    }),\n    [type, open, handleOpenChange],\n  );\n\n  return (\n    <NavAccountMenuContext.Provider value={contextValue}>\n      <PopoverBase open={open} onOpenChange={handleOpenChange}>\n        <div data-slot=\"nav-account-menu\">{children}</div>\n      </PopoverBase>\n    </NavAccountMenuContext.Provider>\n  );\n}\n\n// ============================================\n// NavAccountMenuTrigger\n// ============================================\n\nconst triggerVariants = cva(\n  'flex items-center gap-4 w-full text-left cursor-pointer transition-colors duration-200 ease-smooth outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n  {\n    variants: {\n      type: {\n        card: 'bg-surface-1 border border-border rounded-xl shadow-xs p-3 hover:bg-surface-2',\n        simple: 'border border-border px-2 py-3 hover:bg-surface-2 rounded-lg',\n      },\n    },\n    defaultVariants: {\n      type: 'card',\n    },\n  },\n);\n\nexport interface NavAccountMenuTriggerProps\n  extends VariantProps<typeof triggerVariants> {\n  /** Avatar element (use Avatar component) */\n  avatar?: React.ReactNode;\n  /** User display name */\n  name: string;\n  /** User email address */\n  email?: string;\n  /** Optional badge after name (e.g., \"External\" tag) */\n  badge?: React.ReactNode;\n  /** Show logout button instead of chevron (for 'simple' type) */\n  showLogoutButton?: boolean;\n  /** Logout callback for simple variant */\n  onLogout?: () => void;\n  /** Show only avatar without name/email - useful for collapsed sidebar */\n  compact?: boolean;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuTrigger({\n  avatar,\n  name,\n  email,\n  badge,\n  showLogoutButton,\n  onLogout,\n  compact = false,\n  className,\n}: NavAccountMenuTriggerProps) {\n  const { type, open } = useNavAccountMenuContext();\n\n  const handleLogoutClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onLogout?.();\n  };\n\n  const avatarContent = avatar ? (\n    <div className=\"shrink-0\">{avatar}</div>\n  ) : null;\n  const accountDetails = !compact ? (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"min-w-0 truncate text-sm font-semibold text-foreground\">\n          {name}\n        </span>\n        {badge && <span className=\"shrink-0\">{badge}</span>}\n      </div>\n      {email && (\n        <span className=\"truncate text-sm text-muted-foreground\">{email}</span>\n      )}\n    </div>\n  ) : null;\n\n  if (type === 'simple' && showLogoutButton && !compact) {\n    return (\n      <div\n        data-slot=\"nav-account-menu-trigger\"\n        className={cn(triggerVariants({ type }), 'group/trigger', className)}\n      >\n        <PopoverTriggerBase\n          render={\n            <button\n              type=\"button\"\n              aria-haspopup=\"true\"\n              className=\"flex min-w-0 flex-1 items-center gap-4 text-left outline-none\"\n            />\n          }\n        >\n          {avatarContent}\n          {accountDetails}\n        </PopoverTriggerBase>\n        <button\n          type=\"button\"\n          onClick={handleLogoutClick}\n          className=\"shrink-0 rounded-md p-1.5 text-text-quaternary transition-colors duration-200 ease-smooth hover:bg-muted hover:text-secondary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\"\n          aria-label=\"Sign out\"\n        >\n          <LogOut className=\"size-5\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PopoverTriggerBase\n      render={\n        <button\n          type=\"button\"\n          data-slot=\"nav-account-menu-trigger\"\n          aria-haspopup=\"true\"\n          aria-label={compact ? `${name} account menu` : undefined}\n          className={cn(\n            triggerVariants({ type }),\n            'group/trigger',\n            compact ? 'w-auto justify-center' : 'max-w-[280px]',\n            className,\n          )}\n        />\n      }\n    >\n      {avatarContent}\n      {!compact && (\n        <>\n          {accountDetails}\n          <ChevronRight\n            className={cn(\n              'size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none',\n              open ? 'rotate-180' : 'rtl:rotate-180',\n            )}\n          />\n        </>\n      )}\n    </PopoverTriggerBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuContent\n// ============================================\n\nexport interface NavAccountMenuContentProps {\n  /** Popover side positioning */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Popover alignment */\n  align?: 'start' | 'center' | 'end';\n  /** Side offset */\n  sideOffset?: number;\n  /** Children */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuContent({\n  side = 'right',\n  align = 'end',\n  sideOffset = 8,\n  children,\n  className,\n}: NavAccountMenuContentProps) {\n  return (\n    <PopoverContentBase\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      aria-label=\"Account menu\"\n      data-slot=\"nav-account-menu-content\"\n      className={cn(\n        'w-[300px] max-w-[calc(100vw-2rem)] p-0 gap-0 bg-popover border border-border rounded-[14px] overflow-hidden',\n        'shadow-[0px_12px_16px_-4px_color-mix(in_srgb,var(--foreground)_8%,transparent),0px_4px_6px_-2px_color-mix(in_srgb,var(--foreground)_3%,transparent),0px_2px_2px_-1px_color-mix(in_srgb,var(--foreground)_4%,transparent)]',\n        'data-open:animate-in data-closed:animate-out',\n        'data-closed:fade-out-0 data-open:fade-in-0',\n        'data-closed:zoom-out-95 data-open:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        'duration-200 motion-reduce:animate-none',\n        className,\n      )}\n    >\n      <div className=\"flex flex-col py-2\" role=\"menu\" aria-label=\"Account menu\">\n        {children}\n      </div>\n    </PopoverContentBase>\n  );\n}\n\n// ============================================\n// NavAccountMenuHeader\n// ============================================\n\nexport interface NavAccountMenuHeaderProps {\n  /** Header title (e.g. \"Profile\") */\n  title: string;\n  /** Subtitle text or custom React node (e.g. \"Last login 22 May, 2026 11:30pm\") */\n  subtitle?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuHeader({\n  title,\n  subtitle,\n  className,\n}: NavAccountMenuHeaderProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-header\"\n      className={cn('px-6 pb-3 delight-fade-in', className)}\n    >\n      <p className=\"text-base font-semibold text-foreground\">{title}</p>\n      {subtitle &&\n        (typeof subtitle === 'string' ? (\n          <p className=\"mt-2 text-sm text-muted-foreground\">{subtitle}</p>\n        ) : (\n          <div className=\"mt-2\">{subtitle}</div>\n        ))}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSection\n// ============================================\n\nexport interface NavAccountMenuSectionProps {\n  /** Optional section header label */\n  label?: string;\n  /** Show top border separator between sections */\n  bordered?: boolean;\n  /** Section content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSection({\n  label,\n  bordered = false,\n  children,\n  className,\n}: NavAccountMenuSectionProps) {\n  return (\n    <section\n      data-slot=\"nav-account-menu-section\"\n      aria-label={label}\n      className={cn(\n        'flex flex-col gap-1 py-1.5',\n        bordered && 'border-t border-border',\n        className,\n      )}\n    >\n      {label && (\n        <div className=\"px-3 pt-1.5 pb-1\">\n          <span className=\"text-xs font-semibold text-muted-foreground\">\n            {label}\n          </span>\n        </div>\n      )}\n      {children}\n    </section>\n  );\n}\n\n// ============================================\n// NavAccountMenuItem\n// ============================================\n\n/**\n * Props passed to the render function for custom menu item rendering.\n */\nexport interface NavAccountMenuItemRenderProps {\n  /** Combined className for styling */\n  className: string;\n  /** Click handler that closes menu and triggers onSelect */\n  onClick: () => void;\n  /** Menu item content (icon, label, shortcut) */\n  children: React.ReactNode;\n}\n\n/**\n * Render prop type for polymorphic rendering.\n * Accepts a function that receives props and returns an element.\n */\ntype NavAccountMenuItemRenderFn = (\n  props: NavAccountMenuItemRenderProps,\n) => React.ReactElement;\n\nexport interface NavAccountMenuItemProps {\n  /** Left icon (20px) */\n  icon?: React.ReactNode;\n  /** Keyboard shortcut display */\n  shortcut?: string;\n  /** Destructive styling (red) */\n  destructive?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /**\n   * Render prop for polymorphic rendering.\n   * Use this to render the menu item as a different element (e.g., link).\n   * @example\n   * <NavAccountMenuItem\n   *   icon={<User01 />}\n   *   render={(props) => <a {...props} href=\"/profile\" />}\n   * >\n   *   View profile\n   * </NavAccountMenuItem>\n   */\n  render?: NavAccountMenuItemRenderFn;\n  /** Label text */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuItem({\n  icon,\n  shortcut,\n  destructive = false,\n  disabled = false,\n  onSelect,\n  render,\n  children,\n  className,\n}: NavAccountMenuItemProps) {\n  const { onOpenChange } = useNavAccountMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onSelect?.();\n    onOpenChange(false);\n  };\n\n  const content = (\n    <div className=\"flex flex-1 gap-2 items-center overflow-hidden p-2 rounded-md transition-[background-color] duration-200 ease-smooth delight-selection-press motion-reduce:transition-none\">\n      <div className=\"flex flex-1 gap-2 items-center min-w-0\">\n        {icon && (\n          <span\n            className={cn(\n              'shrink-0 [&>svg]:size-4 transition-transform duration-200 ease-smooth group-hover/menuitem:translate-x-0.5 motion-reduce:transition-none',\n              destructive ? 'text-destructive' : 'text-foreground',\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span\n          className={cn(\n            'flex-1 text-sm truncate',\n            destructive ? 'text-destructive' : 'text-secondary-foreground',\n          )}\n        >\n          {children}\n        </span>\n      </div>\n      {shortcut && (\n        <Kbd variant=\"outline\" size=\"xs\" className=\"shrink-0\">\n          {shortcut}\n        </Kbd>\n      )}\n    </div>\n  );\n\n  const baseClassName = cn(\n    'group/menuitem flex items-center px-1.5 py-0 w-full text-left cursor-pointer outline-none',\n    'hover:[&>div]:bg-muted focus-visible:[&>div]:bg-muted',\n    'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n    disabled && 'pointer-events-none opacity-50',\n    className,\n  );\n\n  if (render) {\n    return render({\n      className: baseClassName,\n      onClick: handleClick,\n      children: content,\n    });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      data-slot=\"nav-account-menu-item\"\n      className={baseClassName}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-disabled={disabled || undefined}\n    >\n      {content}\n    </button>\n  );\n}\n\n// ============================================\n// NavAccountMenuAccount\n// ============================================\n\nexport interface NavAccountMenuAccountProps {\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Account display name */\n  name: string;\n  /** Account email */\n  email: string;\n  /** Whether this account is currently selected */\n  selected?: boolean;\n  /** Selection callback */\n  onSelect?: () => void;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuAccount({\n  avatar,\n  name,\n  email,\n  selected = false,\n  onSelect,\n  className,\n}: NavAccountMenuAccountProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-account\"\n      className={cn('flex items-center px-1.5 py-0 w-full', className)}\n    >\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={selected}\n        aria-label={`Switch to ${name} (${email})`}\n        className={cn(\n          'relative flex flex-1 gap-2 items-center overflow-hidden px-2 py-1.5 rounded-md cursor-pointer outline-none',\n          'hover:bg-muted focus-visible:bg-muted',\n          'transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n          'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n          'text-left',\n          selected && 'bg-surface-2',\n        )}\n        onClick={onSelect}\n      >\n        {avatar && <div className=\"shrink-0\">{avatar}</div>}\n        <div className=\"flex flex-col min-w-0 flex-1\">\n          <span className=\"text-sm font-semibold text-foreground truncate\">\n            {name}\n          </span>\n          <span className=\"text-sm text-muted-foreground truncate\">\n            {email}\n          </span>\n        </div>\n        {/* Radio indicator */}\n        <div\n          aria-hidden=\"true\"\n          className={cn(\n            'size-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-colors duration-200 ease-smooth motion-reduce:transition-none',\n            selected\n              ? 'bg-primary border-primary'\n              : 'border-border bg-transparent',\n          )}\n        >\n          {selected && (\n            <div className=\"size-1.5 rounded-full bg-primary-foreground delight-check-bounce\" />\n          )}\n        </div>\n      </button>\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuSeparator\n// ============================================\n\nexport interface NavAccountMenuSeparatorProps {\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuSeparator({ className }: NavAccountMenuSeparatorProps) {\n  return (\n    <hr\n      data-slot=\"nav-account-menu-separator\"\n      className={cn('h-px border-0 bg-border mx-5', className)}\n    />\n  );\n}\n\n// ============================================\n// NavAccountMenuFooter\n// ============================================\n\nexport interface NavAccountMenuFooterProps {\n  /** Footer content (typically buttons) */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuFooter({\n  children,\n  className,\n}: NavAccountMenuFooterProps) {\n  return (\n    <div\n      data-slot=\"nav-account-menu-footer\"\n      className={cn('flex items-center justify-center px-5 pt-4', className)}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// NavAccountMenuThemeSwitch (uses Switch theme variant)\n// ============================================\n\nexport interface NavAccountMenuThemeSwitchProps {\n  /** Switch theme variant to render */\n  variant?:\n    | 'theme-gradient'\n    | 'theme-switch'\n    | 'theme-pill'\n    | 'theme-segmented';\n  /** Switch size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Controlled checked state (dark = checked) */\n  checked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Optional label displayed next to the switch (e.g. \"Light Mode\") */\n  label?: string;\n  /** Additional className */\n  className?: string;\n}\n\nfunction NavAccountMenuThemeSwitch({\n  variant = 'theme-gradient',\n  size = 'sm',\n  checked,\n  onCheckedChange,\n  label,\n  className,\n}: NavAccountMenuThemeSwitchProps) {\n  const switchId = React.useId();\n  const labelId = label ? `${switchId}-label` : undefined;\n\n  return (\n    <div\n      data-slot=\"nav-account-menu-theme-switch\"\n      className={cn('flex items-center px-1.5 py-0', className)}\n    >\n      <div className=\"flex items-center gap-2.5 p-2\">\n        <Switch\n          id={switchId}\n          variant={variant}\n          size={size}\n          checked={checked}\n          onCheckedChange={onCheckedChange}\n          aria-labelledby={labelId}\n          aria-label={label ? undefined : 'Theme selector'}\n        />\n        {label && (\n          <label\n            htmlFor={switchId}\n            id={labelId}\n            className=\"cursor-pointer text-sm text-secondary-foreground\"\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Display Names\n// ============================================\n\nNavAccountMenu.displayName = 'NavAccountMenu';\nNavAccountMenuTrigger.displayName = 'NavAccountMenuTrigger';\nNavAccountMenuContent.displayName = 'NavAccountMenuContent';\nNavAccountMenuHeader.displayName = 'NavAccountMenuHeader';\nNavAccountMenuSection.displayName = 'NavAccountMenuSection';\nNavAccountMenuItem.displayName = 'NavAccountMenuItem';\nNavAccountMenuAccount.displayName = 'NavAccountMenuAccount';\nNavAccountMenuSeparator.displayName = 'NavAccountMenuSeparator';\nNavAccountMenuFooter.displayName = 'NavAccountMenuFooter';\nNavAccountMenuThemeSwitch.displayName = 'NavAccountMenuThemeSwitch';\n\n// ============================================\n// Exports\n// ============================================\n\nexport {\n  NavAccountMenu,\n  NavAccountMenuAccount,\n  NavAccountMenuContent,\n  NavAccountMenuFooter,\n  NavAccountMenuHeader,\n  NavAccountMenuItem,\n  NavAccountMenuSection,\n  NavAccountMenuSeparator,\n  NavAccountMenuThemeSwitch,\n  NavAccountMenuTrigger,\n  triggerVariants as navAccountMenuTriggerVariants,\n};\n"],"mappings":"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"}