@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.7

package/dist/lib/components/panel/footer/preferences/user-settings/family-center/index.js

@@ -0,0 +1,24 @@
+import { CustomTabs } from "../../../tabs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/preferences/user-settings/family-center/index.tsx
+var FamilyCenterSettings = () => {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CustomTabs, { tabs: [
+		{
+			id: "activity",
+			label: "Activity",
+			content: /* @__PURE__ */ jsx("p", { children: "View your project overview and recent activity." })
+		},
+		{
+			id: "family",
+			label: "My Family",
+			content: /* @__PURE__ */ jsx("p", { children: "Track your metrics and analyze performance data." })
+		},
+		{
+			id: "settings",
+			label: "Settings",
+			content: /* @__PURE__ */ jsx("p", { children: "Track your metrics and analyze performance settings data." })
+		}
+	] }) });
+};
+//#endregion
+export { FamilyCenterSettings };

package/dist/lib/components/panel/footer/preferences/user-settings/profiles/index.d.ts

@@ -0,0 +1,3 @@
+declare const ProfileSettings: () => import("react").JSX.Element;
+export { ProfileSettings };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/panel/footer/preferences/user-settings/profiles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/lib/components/panel/footer/preferences/user-settings/profiles/index.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe,mCAuGpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/lib/components/panel/footer/preferences/user-settings/profiles/index.js

@@ -0,0 +1,103 @@
+"use client";
+import { useUser } from "../../../../../../store/users/useUserStore.js";
+import { useState } from "react";
+import { Button, Input, Tabs } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/preferences/user-settings/profiles/index.tsx
+var ProfileSettings = () => {
+	const { user, updateUser, clearUser } = useUser();
+	const [changes, setChanges] = useState({});
+	const form = {
+		firstName: changes.firstName ?? user?.firstName ?? "",
+		lastName: changes.lastName ?? user?.lastName ?? "",
+		email: changes.email ?? user?.email ?? ""
+	};
+	const isChanged = form.firstName !== user?.firstName || form.lastName !== user?.lastName || form.email !== user?.email;
+	const handleChange = (key, value) => {
+		setChanges((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	};
+	const handleSave = () => {
+		updateUser(form);
+		setChanges({});
+	};
+	const handleDelete = () => {
+		clearUser();
+	};
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Tabs, {
+		className: "w-full",
+		variant: "secondary",
+		defaultSelectedKey: "main-profile",
+		children: [
+			/* @__PURE__ */ jsx(Tabs.ListContainer, { children: /* @__PURE__ */ jsxs(Tabs.List, {
+				"aria-label": "Options",
+				children: [/* @__PURE__ */ jsxs(Tabs.Tab, {
+					id: "main-profile",
+					children: ["Main Profiles", /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+				}), /* @__PURE__ */ jsxs(Tabs.Tab, {
+					id: "per-profile",
+					children: ["Space Profiles", /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+				})]
+			}) }),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "pt-6",
+				id: "main-profile",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "max-w-xl space-y-6",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "text-xl font-semibold",
+							children: "Profile"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-6",
+							children: [
+								/* @__PURE__ */ jsx(Input, {
+									placeholder: "First Name",
+									value: form.firstName,
+									onChange: (e) => handleChange("firstName", e.target.value),
+									className: "mt-1 w-full rounded-lg"
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									placeholder: "Last Name",
+									value: form.lastName,
+									onChange: (e) => handleChange("lastName", e.target.value),
+									className: "mt-1 w-full rounded-lg"
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									placeholder: "Email",
+									type: "email",
+									value: form.email,
+									onChange: (e) => handleChange("email", e.target.value),
+									className: "mt-1 w-full rounded-lg"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between pt-4",
+							children: [/* @__PURE__ */ jsx(Button, {
+								isDisabled: !isChanged,
+								onPress: handleSave,
+								children: "Save Changes"
+							}), /* @__PURE__ */ jsx(Button, {
+								className: "rounded-xl",
+								variant: "danger",
+								onPress: handleDelete,
+								children: "Delete Account"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Tabs.Panel, {
+				className: "pt-4",
+				id: "per-profile",
+				children: /* @__PURE__ */ jsx("p", { children: "Per-server profile settings here" })
+			})
+		]
+	}) });
+};
+//#endregion
+export { ProfileSettings };

package/dist/lib/components/panel/footer/tabs.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface TabItem {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface Props {
+    tabs: TabItem[];
+}
+declare const CustomTabs: ({ tabs }: Props) => React.JSX.Element;
+export { CustomTabs };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/lib/components/panel/footer/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,OAAO;IACf,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,EAAE,CAAA;CAChB;AAED,QAAA,MAAM,UAAU,GAAI,UAAU,KAAK,sBAoBlC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/lib/components/panel/footer/tabs.js

@@ -0,0 +1,23 @@
+import "react";
+import { Tabs } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/tabs.tsx
+var CustomTabs = ({ tabs }) => {
+	return /* @__PURE__ */ jsxs(Tabs, {
+		className: "w-full",
+		variant: "secondary",
+		children: [/* @__PURE__ */ jsx(Tabs.ListContainer, { children: /* @__PURE__ */ jsx(Tabs.List, {
+			"aria-label": "Options",
+			children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+				id: tab.id,
+				children: [tab.label, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+			}, tab.id))
+		}) }), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			className: "pt-4",
+			id: tab.id,
+			children: tab.content
+		}, tab.id))]
+	});
+};
+//#endregion
+export { CustomTabs };

package/dist/lib/components/panel/footer/types.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react';
+export interface UserInfo {
+    id: string;
+    name: string;
+    avatar?: string;
+    isOnline?: boolean;
+}
+export type UserStatus = 'active' | 'away' | 'idle' | 'busy' | 'dnd';
+export interface UserStatusOption {
+    id: UserStatus;
+    label: string;
+    icon: string;
+    color?: string;
+}
+export interface SuggestedStatusOption {
+    id: string;
+    label: string;
+    emoji: string;
+}
+export interface StatusTimingOption {
+    id: string;
+    label: string;
+}
+export type UserSettingsEntryPoint = 'account' | 'profiles';
+export interface FooterActionsProps {
+    user: UserInfo;
+    showAI?: boolean;
+    showControlCenter?: boolean;
+    controlCenter?: ReactElement;
+    showNotifications?: boolean;
+    showUserInfo?: boolean;
+    notificationCount?: number;
+    onAI?: () => void;
+    onNotificationsClick?: () => void;
+    onUserClick?: (user: UserInfo, entryPoint?: UserSettingsEntryPoint) => void;
+    toolbarAction?: ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/panel/footer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,UAAU,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,UAAU,CAAA;AAE3D,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAA;IAEd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAA;IAE3E,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/lib/components/panel/footer/user-menu.d.ts

@@ -0,0 +1,10 @@
+import { UserInfo } from './types';
+type Props = {
+    user: UserInfo;
+    onLogout: () => void;
+    onProfile?: () => void;
+    onPreferences?: () => void;
+};
+declare const UserMenu: ({ user, onLogout, onProfile, onPreferences }: Props) => import("react").JSX.Element;
+export { UserMenu };
+//# sourceMappingURL=user-menu.d.ts.map

package/dist/lib/components/panel/footer/user-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/footer/user-menu.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAGV,QAAQ,EAGT,MAAM,SAAS,CAAA;AAEhB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAsGD,QAAA,MAAM,QAAQ,GAAI,8CAA8C,KAAK,gCAuNpE,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/lib/components/panel/footer/user-menu.js

@@ -0,0 +1,290 @@
+import { ACCOUNT_BUBBLE_MEDIA_QUERY, APPLICATION_MENU_SHEET_MEDIA_QUERY } from "../responsive.js";
+import { MenuSheet } from "../../menu/sheet.js";
+import { DEFAULT_STATUS_OPTION, STATUS_OPTIONS, STATUS_TIMING_OPTIONS, SUGGESTED_STATUS_OPTIONS, isColorStatus } from "./data.js";
+import { useState } from "react";
+import { Avatar, Badge, Button, Dropdown, Separator, Tooltip, useMediaQuery } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AltArrowLeft, AltArrowRight, CheckRead, Logout2, Settings } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/user-menu.tsx
+var StatusVisual = ({ status }) => {
+	if (isColorStatus(status.id)) return /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${status.color ?? ""}` });
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-xs",
+		children: status.icon
+	});
+};
+var useAccountSections = (user) => {
+	const [userStatus, setUserStatus] = useState("active");
+	const [selectedStatus, setSelectedStatus] = useState();
+	const [selectedTiming, setSelectedTiming] = useState();
+	const currentStatus = STATUS_OPTIONS.find((status) => status.id === userStatus) ?? DEFAULT_STATUS_OPTION;
+	return {
+		currentStatus,
+		tooltipText: selectedStatus ? `${selectedStatus.emoji} ${selectedStatus.label}${selectedTiming ? ` • ${selectedTiming.label}` : ""}` : `${user.name} - ${currentStatus.icon} ${currentStatus.label}`,
+		accountSections: [
+			{
+				id: "availability",
+				title: "Availability",
+				label: currentStatus.label,
+				selected: userStatus,
+				options: STATUS_OPTIONS.map((status) => ({
+					id: status.id,
+					label: status.label,
+					visual: /* @__PURE__ */ jsx(StatusVisual, { status })
+				})),
+				onSelect: (key) => {
+					const status = STATUS_OPTIONS.find((option) => option.id === key);
+					if (status) setUserStatus(status.id);
+				}
+			},
+			{
+				id: "custom-status",
+				title: "Custom status",
+				label: selectedStatus ? `${selectedStatus.emoji} ${selectedStatus.label}` : "Update your status",
+				selected: selectedStatus?.id,
+				options: [...SUGGESTED_STATUS_OPTIONS.map((status) => ({
+					id: status.id,
+					label: `${status.emoji} ${status.label}`
+				})), {
+					id: "clear",
+					label: "Clear status"
+				}],
+				onSelect: (key) => {
+					if (key === "clear") {
+						setSelectedStatus(void 0);
+						setSelectedTiming(void 0);
+						return;
+					}
+					const status = SUGGESTED_STATUS_OPTIONS.find((option) => option.id === key);
+					if (status) {
+						setSelectedStatus(status);
+						setSelectedTiming(STATUS_TIMING_OPTIONS[0]);
+					}
+				}
+			},
+			...selectedStatus ? [{
+				id: "duration",
+				title: "Status duration",
+				label: selectedTiming?.label ?? "Select duration",
+				selected: selectedTiming?.id,
+				options: STATUS_TIMING_OPTIONS.map((timing) => ({
+					id: timing.id,
+					label: timing.label
+				})),
+				onSelect: (key) => {
+					const timing = STATUS_TIMING_OPTIONS.find((option) => option.id === key);
+					if (timing) setSelectedTiming(timing);
+				}
+			}] : []
+		]
+	};
+};
+var UserMenu = ({ user, onLogout, onProfile, onPreferences }) => {
+	const small = useMediaQuery(APPLICATION_MENU_SHEET_MEDIA_QUERY, { initializeWithValue: false });
+	const bubble = useMediaQuery(ACCOUNT_BUBBLE_MEDIA_QUERY, { initializeWithValue: false });
+	const [open, setOpen] = useState(false);
+	const [section, setSection] = useState(null);
+	const { currentStatus, tooltipText, accountSections } = useAccountSections(user);
+	const activeSection = accountSections.find((item) => item.id === section);
+	const changeOpen = (value) => {
+		setOpen(value);
+		if (!value) setSection(null);
+	};
+	const Trigger = small ? Button : Dropdown.Trigger;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:bg-default-100 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left",
+			onClick: () => {
+				setOpen(false);
+				onProfile?.();
+			},
+			children: [/* @__PURE__ */ jsxs(Avatar, {
+				size: "sm",
+				children: [user.avatar ? /* @__PURE__ */ jsx(Avatar.Image, {
+					src: user.avatar,
+					alt: user.name
+				}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.name?.[0] })]
+			}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: "block font-medium",
+				children: user.name
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "text-muted flex items-center gap-1 text-xs",
+				children: [/* @__PURE__ */ jsx(StatusVisual, { status: currentStatus }), currentStatus.label]
+			})] })]
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		small ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-2",
+			children: [
+				accountSections.map((item) => /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: "h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start",
+					onPress: () => setSection(item.id),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-start",
+						children: item.label
+					}), /* @__PURE__ */ jsx(AltArrowRight, {
+						size: 16,
+						"aria-hidden": "true"
+					})]
+				}, item.id)),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: "h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start",
+					onPress: () => {
+						setOpen(false);
+						onPreferences?.();
+					},
+					children: [/* @__PURE__ */ jsx(Settings, {
+						size: 18,
+						"aria-hidden": "true"
+					}), "Preferences"]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: "text-danger h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start",
+					onPress: () => {
+						setOpen(false);
+						onLogout();
+					},
+					children: [/* @__PURE__ */ jsx(Logout2, {
+						size: 18,
+						"aria-hidden": "true"
+					}), "Logout"]
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Dropdown.Menu, {
+			"aria-label": "Account actions",
+			children: [
+				accountSections.map((item) => /* @__PURE__ */ jsxs(Dropdown.SubmenuTrigger, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+					id: item.id,
+					textValue: item.label,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: item.label
+					}), /* @__PURE__ */ jsx(Dropdown.SubmenuIndicator, {})]
+				}), /* @__PURE__ */ jsx(Dropdown.Popover, {
+					className: "z-90 w-64 max-w-[calc(100vw-2rem)]",
+					children: /* @__PURE__ */ jsx(Dropdown.Menu, {
+						"aria-label": item.title,
+						selectionMode: "single",
+						selectedKeys: item.selected ? [item.selected] : [],
+						onAction: (key) => item.onSelect(String(key)),
+						children: item.options.map((option) => /* @__PURE__ */ jsxs(Dropdown.Item, {
+							id: option.id,
+							textValue: option.label,
+							className: option.id === "clear" ? "text-danger" : "",
+							children: [
+								option.visual,
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1",
+									children: option.label
+								}),
+								/* @__PURE__ */ jsx(Dropdown.ItemIndicator, {})
+							]
+						}, option.id))
+					})
+				})] }, item.id)),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsxs(Dropdown.Item, {
+					id: "preferences",
+					onAction: () => {
+						setOpen(false);
+						onPreferences?.();
+					},
+					children: [/* @__PURE__ */ jsx(Settings, {
+						size: 18,
+						"aria-hidden": "true"
+					}), "Preferences"]
+				}),
+				/* @__PURE__ */ jsxs(Dropdown.Item, {
+					id: "logout",
+					variant: "danger",
+					onAction: () => {
+						setOpen(false);
+						onLogout();
+					},
+					children: [/* @__PURE__ */ jsx(Logout2, {
+						size: 18,
+						"aria-hidden": "true"
+					}), "Logout"]
+				})
+			]
+		})
+	] });
+	const trigger = /* @__PURE__ */ jsxs(Tooltip, {
+		delay: 0,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Trigger, {
+			onPress: small ? () => setOpen(true) : void 0,
+			"aria-label": `Open ${user.name || "user"} menu`,
+			className: `button button--ghost relative flex h-12 w-12 items-center justify-center ${bubble ? "rounded-full" : "rounded-xl"}`,
+			children: /* @__PURE__ */ jsxs(Badge.Anchor, { children: [/* @__PURE__ */ jsxs(Avatar, {
+				size: "sm",
+				className: "h-6 w-6 rounded-md",
+				children: [user.avatar ? /* @__PURE__ */ jsx(Avatar.Image, {
+					src: user.avatar,
+					alt: user.name
+				}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.name?.[0] })]
+			}), /* @__PURE__ */ jsx(Badge, {
+				placement: "bottom-right",
+				size: "sm",
+				className: "border-background flex items-center justify-center border",
+				children: /* @__PURE__ */ jsx(StatusVisual, { status: currentStatus })
+			})] })
+		}) }), /* @__PURE__ */ jsx(Tooltip.Content, {
+			placement: bubble ? "bottom" : "right",
+			children: tooltipText
+		})]
+	});
+	return small ? /* @__PURE__ */ jsxs(Fragment, { children: [trigger, /* @__PURE__ */ jsx(MenuSheet, {
+		title: "Account",
+		hideTitle: true,
+		isOpen: open,
+		onOpenChange: changeOpen,
+		children: activeSection ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: "h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start",
+				onPress: () => setSection(null),
+				"aria-label": "Back to account menu",
+				children: [/* @__PURE__ */ jsx(AltArrowLeft, {
+					size: 18,
+					"aria-hidden": "true"
+				}), activeSection.title]
+			}), activeSection.options.map((option) => /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: `h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start ${option.id === "clear" ? "text-danger" : ""}`,
+				"aria-pressed": activeSection.selected === option.id,
+				onPress: () => {
+					activeSection.onSelect(option.id);
+					setSection(null);
+				},
+				children: [
+					option.visual,
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 text-start",
+						children: option.label
+					}),
+					activeSection.selected === option.id && /* @__PURE__ */ jsx(CheckRead, {
+						size: 16,
+						"aria-hidden": "true"
+					})
+				]
+			}, option.id))]
+		}) : content
+	})] }) : /* @__PURE__ */ jsxs(Dropdown, {
+		isOpen: open,
+		onOpenChange: changeOpen,
+		children: [trigger, /* @__PURE__ */ jsx(Dropdown.Popover, {
+			placement: bubble ? "bottom end" : "right",
+			offset: 8,
+			className: "w-72 max-w-[calc(100vw-2rem)]",
+			children: content
+		})]
+	});
+};
+//#endregion
+export { UserMenu };

package/dist/lib/components/panel/header/application-menu-sheet.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+export type ApplicationMenuProps = {
+    onClose: () => void;
+    onSearch: () => void;
+    navigationLabel: string;
+    onToggleNavigation?: () => void;
+    showHistoryNavigation: boolean;
+    showMenuUtilities: boolean;
+    showBookamarks: boolean;
+    showStorage: boolean;
+};
+type Props = ApplicationMenuProps & {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactElement<{
+        onPress?: () => void;
+    }>;
+};
+export declare const ApplicationMenuSheet: ({ isOpen, onOpenChange, trigger, onClose, onSearch, navigationLabel, onToggleNavigation, showHistoryNavigation, showMenuUtilities, showBookamarks, showStorage }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=application-menu-sheet.d.ts.map

package/dist/lib/components/panel/header/application-menu-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-menu-sheet.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/header/application-menu-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAA;AAiBnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,qBAAqB,EAAE,OAAO,CAAA;IAC9B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,cAAc,EAAE,OAAO,CAAA;IACvB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,KAAK,KAAK,GAAG,oBAAoB,GAAG;IAClC,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,YAAY,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;CAChD,CAAA;AAKD,eAAO,MAAM,oBAAoB,GAAI,kKAYlC,KAAK,gCA6LP,CAAA"}