@protobase/ui 0.0.0-stage → 0.1.0

package/dist/app/use-related-records.js

@@ -0,0 +1,31 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { humanize } from "../live/naming.js";
+import { fetchLabels } from "../live/relation-labels.js";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+//#region src/app/use-related-records.ts
+/** One entry per relation the record holds, named by the record it points at. The tenant is left out. */
+const useRelatedRecords = (model, view, resources, views, record, basePath) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const relations = Object.values(model.fields).filter((field) => field.type === "relation" && field.relation && field.name !== model.tenant && record[field.name] != null && resources[field.relation.resource]?.primaryKey.length === 1);
+	const labels = useQueries({ queries: relations.map((field) => {
+		const target = resources[field.relation.resource];
+		const id = String(record[field.name]);
+		return {
+			queryKey: keys.relatedLabel(target.name, id),
+			queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
+		};
+	}) });
+	return {
+		hrefs: Object.fromEntries(relations.map((field) => [field.name, `/${field.relation.resource}/${encodeURIComponent(String(record[field.name]))}`])),
+		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data])),
+		records: relations.map((field, index) => ({
+			kind: view?.fields[field.name]?.label ?? humanize(field.name),
+			label: labels[index]?.data ?? String(record[field.name]),
+			href: `${basePath}/${field.relation.resource}/${encodeURIComponent(String(record[field.name]))}`
+		}))
+	};
+};
+//#endregion
+export { useRelatedRecords };

package/dist/app/user-menu-from-meta.js

@@ -0,0 +1,36 @@
+import { humanize } from "../live/naming.js";
+import { iconFor } from "./icons.js";
+import { menuIcon } from "./menu-icons.js";
+import { ExternalLink, LayoutDashboard } from "lucide-react";
+//#region src/app/user-menu-from-meta.ts
+/** The resources and pages the user menu holds; the sidebar leaves them out. */
+const userMenuResources = (meta) => new Set((meta.userMenu?.items ?? []).flatMap((item) => item.kind === "resource" ? [item.resource] : item.kind === "page" ? [item.page] : []));
+/** The profile menu's items from `/meta`: resources and pages open in the app (marked active while open), links open a new tab. */
+const userMenuFromMeta = (meta, basePath, activeResource) => (meta.userMenu?.items ?? []).map((item, index) => {
+	if (item.kind === "link") return {
+		id: `link-${index}`,
+		label: item.label,
+		icon: menuIcon(item.icon, ExternalLink),
+		href: item.href,
+		external: true
+	};
+	if (item.kind === "page") {
+		const page = meta.pages[item.page];
+		return {
+			id: item.page,
+			label: item.label ?? page?.title ?? humanize(item.page),
+			icon: menuIcon(item.icon ?? page?.icon, LayoutDashboard),
+			href: `${basePath}/${item.page}`,
+			active: item.page === activeResource
+		};
+	}
+	return {
+		id: item.resource,
+		label: item.label ?? meta.views[item.resource]?.names?.plural ?? humanize(item.resource),
+		icon: menuIcon(item.icon, iconFor(item.resource)),
+		href: `${basePath}/${item.resource}`,
+		active: item.resource === activeResource
+	};
+});
+//#endregion
+export { userMenuFromMeta, userMenuResources };

package/dist/app-shell/app-shell.d.ts

@@ -0,0 +1,4 @@
+import "./nav.js";
+import "./profile-menu.js";
+import "./global-search.js";
+import { ReactNode } from "react";

package/dist/app-shell/app-shell.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/cn.js";
+import { useIsDesktop } from "../lib/use-media-query.js";
+import { Drawer } from "./drawer.js";
+import { Sidebar } from "./sidebar.js";
+import { TopBar } from "./top-bar.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/app-shell.tsx
+const drawerId = "app-drawer";
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, onNavigate, onSignOut, search, className, children }) => {
+	const desktop = useIsDesktop();
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	useEffect(() => {
+		if (desktop) setDrawerOpen(false);
+	}, [desktop]);
+	const sidebar = (mode) => /* @__PURE__ */ jsx(Sidebar, {
+		mode,
+		activeItem,
+		user,
+		workspace,
+		forceExpanded,
+		profileMenuOpen,
+		groups: navGroups,
+		userMenu,
+		onNavigate,
+		onSignOut
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className),
+		children: [
+			desktop ? sidebar(sidebarMode) : /* @__PURE__ */ jsx(Drawer, {
+				id: drawerId,
+				open: drawerOpen,
+				onClose: () => setDrawerOpen(false),
+				children: sidebar("text-large")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx(TopBar, {
+					breadcrumb,
+					onNavigate,
+					actions,
+					onMenu: desktop ? void 0 : () => setDrawerOpen(true),
+					menuOpen: drawerOpen,
+					menuControls: drawerId,
+					search
+				}), /* @__PURE__ */ jsx("main", {
+					className: "flex min-h-0 flex-1 flex-col",
+					children
+				})]
+			}),
+			rightPanel
+		]
+	});
+};
+//#endregion
+export { AppShell };

package/dist/app-shell/breadcrumb.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/app-shell/breadcrumb.tsx
+const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+/** The trail of where you are; the last crumb, the current page, shows on phones too. */
+const Breadcrumb = ({ parts, onNavigate }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Breadcrumb",
+	className: "flex min-w-0 items-center gap-1.5 text-[13px]",
+	children: parts.map((part, index) => {
+		const last = index === parts.length - 1;
+		const { label, href } = typeof part === "string" ? {
+			label: part,
+			href: void 0
+		} : part;
+		const text = cn("truncate", last ? "font-semibold" : "text-muted-foreground");
+		return /* @__PURE__ */ jsxs("span", {
+			className: cn("min-w-0 items-center gap-1.5", last ? "flex" : "hidden md:flex"),
+			children: [index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "hidden size-3.5 shrink-0 text-faint-foreground md:block" }), href ? /* @__PURE__ */ jsx("a", {
+				href,
+				"aria-current": last ? "page" : void 0,
+				onClick: (event) => {
+					if (!onNavigate || !inApp(event)) return;
+					event.preventDefault();
+					onNavigate(href);
+				},
+				className: cn(text, "rounded-sm hover:text-foreground hover:underline"),
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: text,
+				children: label
+			})]
+		}, `${index}-${label}`);
+	})
+});
+//#endregion
+export { Breadcrumb };

package/dist/app-shell/drawer.js

@@ -0,0 +1,30 @@
+import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/drawer.tsx
+/** The sidebar on small screens: slides over the page, traps focus, closes on Escape, backdrop tap or navigation. */
+const Drawer = ({ id, open, onClose, children }) => {
+	const panel = useRef(null);
+	useFocusTrap(panel, open, onClose);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50 md:hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 bg-foreground/40",
+			onClick: onClose,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("div", {
+			ref: panel,
+			id,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Navigation",
+			tabIndex: -1,
+			className: "absolute inset-y-0 left-0 flex w-60 max-w-[85vw] bg-sidebar shadow-pop outline-none",
+			onClick: (event) => event.target.closest("a") && onClose(),
+			children
+		})]
+	});
+};
+//#endregion
+export { Drawer };

package/dist/app-shell/global-search.d.ts

@@ -0,0 +1 @@
+import "react";

package/dist/app-shell/global-search.js

@@ -0,0 +1,145 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { Kbd } from "../primitives/kbd.js";
+import { Spinner } from "../primitives/spinner.js";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+//#region src/app-shell/global-search.tsx
+/** Moves the highlighted result by `delta`, wrapping around; from nothing (`-1`) it goes to the first or the last. */
+const moveActive = (active, count, delta) => {
+	if (count === 0) return -1;
+	if (active < 0) return delta === 1 ? 0 : count - 1;
+	return (active + delta + count) % count;
+};
+/** A click the browser should handle itself: a new tab or window, or a download. */
+const opensElsewhere = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+/**
+* A search box with grouped results under it, each a link: arrows move through them, Enter or a click opens one and
+* closes the list, keeping the text, so focusing the box again shows the same results. Escape clears, then leaves.
+*/
+const GlobalSearch = ({ search, className = "w-96", autoFocus, showShortcut = true, ref }) => {
+	const listId = useId();
+	const input = useRef(null);
+	const [focused, setFocused] = useState(false);
+	const [active, setActive] = useState(-1);
+	const hits = search.groups.flatMap((group) => group.hits);
+	const open = focused && (search.query !== "" || search.loading);
+	const optionId = (index) => `${listId}-${index}`;
+	const setInput = (node) => {
+		input.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const choose = (href) => {
+		search.onSelect(href);
+		setActive(-1);
+		input.current?.blur();
+	};
+	const clear = () => {
+		search.onTextChange("");
+		setActive(-1);
+		input.current?.focus();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive((current) => moveActive(current, hits.length, event.key === "ArrowDown" ? 1 : -1));
+		} else if (event.key === "Enter") {
+			const hit = hits[active] ?? hits[0];
+			if (!hit) return;
+			event.preventDefault();
+			choose(hit.href);
+		} else if (event.key === "Escape") {
+			if (search.text) search.onTextChange("");
+			else event.currentTarget.blur();
+			setActive(-1);
+		}
+	};
+	let position = -1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref: setInput,
+			wrapperClassName: "w-full bg-surface shadow-none",
+			leading: search.loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+			trailing: search.text ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Clear search",
+				className: "-mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: clear,
+				children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+			}) : showShortcut ? /* @__PURE__ */ jsx("span", {
+				className: "hidden md:inline-flex",
+				children: /* @__PURE__ */ jsx(Kbd, { children: "⌘K" })
+			}) : void 0,
+			placeholder: search.placeholder,
+			"aria-label": "Global search",
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-activedescendant": open && hits[active] ? optionId(active) : void 0,
+			autoFocus,
+			value: search.text,
+			onChange: (event) => {
+				search.onTextChange(event.target.value);
+				setActive(-1);
+			},
+			onFocus: () => setFocused(true),
+			onBlur: () => setFocused(false),
+			onKeyDown
+		}), open && /* @__PURE__ */ jsxs("div", {
+			id: listId,
+			role: "listbox",
+			"aria-label": "Search results",
+			className: "absolute right-0 top-full z-40 mt-1 max-h-96 w-full min-w-72 overflow-y-auto rounded-lg border bg-background py-1 text-[13px] shadow-pop",
+			children: [search.groups.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "px-3 py-2 text-muted-foreground",
+				children: search.loading ? "Searching" : `No matches for “${search.query}”`
+			}), search.groups.map((group) => /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": group.label,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-faint-foreground",
+						children: group.label
+					}),
+					group.failed && /* @__PURE__ */ jsxs("p", {
+						className: "px-3 py-1.5 text-danger-text",
+						children: ["Could not search ", group.label.toLowerCase()]
+					}),
+					group.hits.map((hit) => {
+						position += 1;
+						const index = position;
+						return /* @__PURE__ */ jsxs("a", {
+							id: optionId(index),
+							href: hit.href,
+							tabIndex: -1,
+							role: "option",
+							"aria-selected": index === active,
+							className: cn("block px-3 py-1.5", index === active ? "bg-primary-soft text-primary-text" : "hover:bg-muted"),
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: (event) => {
+								if (opensElsewhere(event)) return;
+								event.preventDefault();
+								choose(hit.href);
+							},
+							onMouseEnter: () => setActive(index),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "block truncate font-semibold",
+								children: hit.title
+							}), hit.subtitle && /* @__PURE__ */ jsx("span", {
+								className: cn("block truncate text-xs", index === active ? "text-primary-text/80" : "text-muted-foreground"),
+								children: hit.subtitle
+							})]
+						}, hit.id);
+					})
+				]
+			}, group.id))]
+		})]
+	});
+};
+//#endregion
+export { GlobalSearch, moveActive };

package/dist/app-shell/index.d.ts

@@ -0,0 +1,9 @@
+import "./nav.js";
+import "./profile-menu.js";
+import { SidebarMode, sidebarModes } from "./sidebar-mode.js";
+import "./global-search.js";
+import "./app-shell.js";
+import "./page-header.js";
+import "./sidebar.js";
+import "./status-dot.js";
+export type { SidebarMode };

package/dist/app-shell/logo.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/logo.tsx
+const LogoMark = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 24 24",
+	className: cn("size-7 shrink-0", className),
+	"aria-hidden": true,
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "24",
+			rx: "6",
+			className: "fill-primary"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M7 17V7h5.2a3 3 0 0 1 0 6H7",
+			fill: "none",
+			stroke: "white",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12.5 17h4.5",
+			stroke: "white",
+			strokeOpacity: "0.55",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	]
+});
+const Logo = ({ showName, workspace }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2.5 overflow-hidden",
+	children: [/* @__PURE__ */ jsx(LogoMark, {}), showName && /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 leading-tight",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[13px] font-semibold tracking-tight",
+			children: "Protobase"
+		}), workspace && /* @__PURE__ */ jsx("div", {
+			className: "truncate text-[11px] text-muted-foreground",
+			children: workspace
+		})]
+	})]
+});
+//#endregion
+export { Logo, LogoMark };

package/dist/app-shell/nav-open-storage.js

@@ -0,0 +1,10 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/app-shell/nav-open-storage.ts
+const prefix = "protobase:nav-open:";
+const navOpenStorageKey = (itemId) => `${prefix}${itemId}`;
+/** Whether a collapsible sidebar entry was left open in this browser; open until someone closes it. */
+const readNavOpen = (storage, key) => guarded(() => storage.getItem(key) !== "false", true);
+/** Remembers only a closed entry, so the default (open) costs no storage. */
+const writeNavOpen = (storage, key, open) => guarded(() => open ? storage.removeItem(key) : storage.setItem(key, "false"), void 0);
+//#endregion
+export { navOpenStorageKey, readNavOpen, writeNavOpen };

package/dist/app-shell/nav.d.ts

@@ -0,0 +1,2 @@
+import "lucide-react";
+import "@protobase/schema";

package/dist/app-shell/nav.js

@@ -0,0 +1,85 @@
+import { BarChart3, Boxes, Building2, CreditCard, FileText, Package, Receipt, Settings, ShoppingCart, Truck, Users, Warehouse } from "lucide-react";
+//#region src/app-shell/nav.ts
+const navGroups = [
+	{
+		label: "Sales",
+		items: [
+			{
+				id: "orders",
+				label: "Orders",
+				icon: ShoppingCart,
+				count: 12
+			},
+			{
+				id: "customers",
+				label: "Customers",
+				icon: Building2
+			},
+			{
+				id: "invoices",
+				label: "Invoices",
+				icon: FileText,
+				count: 3
+			}
+		]
+	},
+	{
+		label: "Inventory",
+		items: [
+			{
+				id: "products",
+				label: "Products",
+				icon: Package
+			},
+			{
+				id: "stock-moves",
+				label: "Stock moves",
+				icon: Boxes
+			},
+			{
+				id: "warehouses",
+				label: "Warehouses",
+				icon: Warehouse
+			},
+			{
+				id: "shipments",
+				label: "Shipments",
+				icon: Truck
+			}
+		]
+	},
+	{
+		label: "Finance",
+		items: [
+			{
+				id: "payments",
+				label: "Payments",
+				icon: CreditCard
+			},
+			{
+				id: "credit-notes",
+				label: "Credit notes",
+				icon: Receipt
+			},
+			{
+				id: "reports",
+				label: "Reports",
+				icon: BarChart3
+			}
+		]
+	},
+	{
+		label: "Admin",
+		items: [{
+			id: "users",
+			label: "Users",
+			icon: Users
+		}, {
+			id: "settings",
+			label: "Settings",
+			icon: Settings
+		}]
+	}
+];
+//#endregion
+export { navGroups };

package/dist/app-shell/page-header.d.ts

@@ -0,0 +1 @@
+import { ReactNode } from "react";

package/dist/app-shell/page-header.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/page-header.tsx
+const PageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
+	children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+		className: "text-xl font-semibold tracking-tight",
+		children: title
+	}), subtitle && /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: subtitle
+	})] }), /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
+		children: actions
+	})]
+});
+//#endregion
+export { PageHeader };

package/dist/app-shell/profile-menu.d.ts

@@ -0,0 +1,2 @@
+import "../primitives/badge.js";
+import "lucide-react";

package/dist/app-shell/profile-menu.js

@@ -0,0 +1,115 @@
+import { cn } from "../lib/cn.js";
+import { Avatar } from "../primitives/avatar.js";
+import { Badge } from "../primitives/badge.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown, LogOut } from "lucide-react";
+//#region src/app-shell/profile-menu.tsx
+const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
+/** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */
+const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut }) => {
+	const [local, setLocal] = useState(false);
+	const open = controlled ?? local;
+	const root = useRef(null);
+	const [anchor, setAnchor] = useState();
+	useEffect(() => {
+		if (!open || controlled !== void 0) return;
+		const close = (event) => {
+			if (event instanceof KeyboardEvent ? event.key === "Escape" : !root.current?.contains(event.target)) setLocal(false);
+		};
+		document.addEventListener("mousedown", close);
+		document.addEventListener("keydown", close);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("keydown", close);
+		};
+	}, [open, controlled]);
+	const toggle = () => {
+		const rect = root.current?.getBoundingClientRect();
+		if (rect) setAnchor({
+			left: rect.left,
+			bottom: window.innerHeight - rect.top + 8
+		});
+		setLocal(!local);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex min-h-11 w-full items-center gap-2.5 rounded-md p-1 text-left hover:bg-muted md:min-h-0",
+			"aria-label": "Profile menu",
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: toggle,
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				initials: user.initials,
+				hue: user.hue,
+				size: "md",
+				className: "ring-0"
+			}), !compact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 leading-tight",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block truncate text-[13px] font-medium",
+					children: user.name
+				}), /* @__PURE__ */ jsx(Badge, {
+					tone: user.roleTone,
+					dot: false,
+					className: "mt-0.5 h-4 px-1.5 text-[10px]",
+					children: user.role
+				})]
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 shrink-0 text-faint-foreground" })] })]
+		}), open && /* @__PURE__ */ jsxs("div", {
+			role: "menu",
+			className: controlled === void 0 ? "fixed z-[60] w-56 overflow-hidden rounded-lg border bg-background py-1 shadow-pop" : "absolute bottom-full left-0 z-50 mb-2 w-56 overflow-hidden rounded-lg border bg-background py-1 shadow-pop",
+			style: controlled === void 0 && anchor ? {
+				left: anchor.left,
+				bottom: anchor.bottom
+			} : void 0,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "border-b px-3 pb-2 pt-1.5",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-[13px] font-medium",
+						children: user.name
+					}), /* @__PURE__ */ jsx("div", {
+						className: "truncate text-xs text-muted-foreground",
+						children: user.email
+					})]
+				}),
+				items.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn(onSignOut && "border-b"),
+					children: items.map((item) => {
+						const Icon = item.icon;
+						return /* @__PURE__ */ jsxs("a", {
+							role: "menuitem",
+							href: item.href,
+							"aria-current": item.active ? "page" : void 0,
+							...item.external ? {
+								target: "_blank",
+								rel: "noreferrer"
+							} : {},
+							onClick: (event) => {
+								setLocal(false);
+								if (item.external || !onNavigate) return;
+								event.preventDefault();
+								onNavigate(item.href);
+							},
+							className: cn(menuRow, item.active && "bg-muted text-foreground"),
+							children: [/* @__PURE__ */ jsx(Icon, { className: "size-4" }), item.label]
+						}, item.id);
+					})
+				}),
+				onSignOut && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					onClick: onSignOut,
+					className: menuRow,
+					children: [/* @__PURE__ */ jsx(LogOut, { className: "size-4" }), "Sign out"]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ProfileMenu };