@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/panel/tenant-menu.js

@@ -0,0 +1,196 @@
+import { usePanel, useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { TenantName } from "./nav-label.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { SidebarMenuButton } from "../ui/sidebar.js";
+import { MenuItemEntries, MenuItemEntry } from "./menu-item.js";
+import { filterTenants, initials, tenantNameText } from "@alfakit/core";
+import { Link, router } from "@inertiajs/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon, SearchIcon, SettingsIcon } from "lucide-react";
+//#region src/components/panel/tenant-menu.tsx
+/**
+* The tenant switcher: a sidebar header button, or a compact button in the top bar of the
+* `topbar` layout (`variant="topbar"`), where the store name shows from `lg` up.
+*/
+function TenantMenu({ variant = "sidebar" }) {
+	const t = useT();
+	const { tenancy, brandName } = usePanel();
+	const [search, setSearch] = useState("");
+	if (!tenancy || !tenancy.current) return null;
+	const current = tenancy.current;
+	const tenants = tenancy.searchable ? filterTenants(tenancy.tenants, search) : tenancy.tenants;
+	const hasSwitcher = tenancy.switcher !== false && tenancy.tenants.length > 0;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: variant === "topbar" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "tenant-menu",
+			className: "hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium",
+			children: [
+				/* @__PURE__ */ jsxs(Avatar, {
+					className: "size-6 rounded-md",
+					children: [current.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+						src: current.avatar,
+						alt: ""
+					}), /* @__PURE__ */ jsx(AvatarFallback, {
+						className: "rounded-md text-[10px]",
+						children: initials(tenantNameText(current))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "sr-only min-w-0 truncate lg:not-sr-only lg:grid lg:text-start lg:leading-tight",
+					children: [current.label && /* @__PURE__ */ jsxs("span", {
+						"data-slot": "tenant-menu-label",
+						className: "text-muted-foreground text-[10px]",
+						children: [current.label, " "]
+					}), /* @__PURE__ */ jsx(TenantName, {
+						tenant: current,
+						className: "truncate"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.tenant-menu.toggle-button",
+					fallback: ChevronsUpDownIcon,
+					className: "text-muted-foreground size-4 shrink-0"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			size: "lg",
+			className: "data-[state=open]:bg-sidebar-accent",
+			children: [
+				/* @__PURE__ */ jsxs(Avatar, {
+					className: "size-8 rounded-lg",
+					children: [current.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+						src: current.avatar,
+						alt: tenantNameText(current)
+					}), /* @__PURE__ */ jsx(AvatarFallback, {
+						className: "rounded-lg",
+						children: initials(tenantNameText(current))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid flex-1 text-start text-sm leading-tight",
+					children: [
+						current.label && /* @__PURE__ */ jsx("span", {
+							"data-slot": "tenant-menu-label",
+							className: "text-muted-foreground truncate text-xs",
+							children: current.label
+						}),
+						/* @__PURE__ */ jsx(TenantName, {
+							tenant: current,
+							className: "truncate font-medium"
+						}),
+						!current.label && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate text-xs",
+							children: brandName
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.tenant-menu.toggle-button",
+					fallback: ChevronsUpDownIcon,
+					className: "ms-auto size-4"
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "min-w-56 rounded-lg",
+		side: "bottom",
+		align: "start",
+		sideOffset: 4,
+		children: [
+			hasSwitcher && /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-muted-foreground text-xs",
+				children: t("tenancy.switch", {}, "Switch")
+			}),
+			hasSwitcher && tenancy.searchable && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "tenant-menu-search",
+				className: "relative px-1 pb-1",
+				children: [/* @__PURE__ */ jsx(SearchIcon, {
+					className: "text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-3.5 -translate-y-1/2",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("input", {
+					type: "search",
+					value: search,
+					onChange: (event) => setSearch(event.target.value),
+					onKeyDown: (event) => event.stopPropagation(),
+					placeholder: t("tenancy.search", {}, "Search"),
+					"aria-label": t("tenancy.search", {}, "Search"),
+					className: "border-input focus-visible:ring-ring/50 h-8 w-full rounded-md border bg-transparent ps-7 pe-2 text-sm outline-none focus-visible:ring-[3px]"
+				})]
+			}),
+			hasSwitcher && tenancy.searchable && tenants.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground px-2 py-1.5 text-sm",
+				children: t("no_results", {}, "No results.")
+			}),
+			tenants.map((tenant) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: () => router.visit(tenant.url),
+				children: [
+					/* @__PURE__ */ jsxs(Avatar, {
+						className: "size-6 rounded-sm",
+						children: [tenant.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+							src: tenant.avatar,
+							alt: tenantNameText(tenant)
+						}), /* @__PURE__ */ jsx(AvatarFallback, {
+							className: "rounded-sm text-[10px]",
+							children: initials(tenantNameText(tenant))
+						})]
+					}),
+					/* @__PURE__ */ jsx(TenantName, {
+						tenant,
+						className: "flex-1 truncate"
+					}),
+					String(tenant.id) === String(current.id) && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+				]
+			}, String(tenant.id))),
+			hasSwitcher && (tenancy.registrationUrl || tenancy.profileUrl || tenancy.menu?.length) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			tenancy.profile ? /* @__PURE__ */ jsx(MenuItemEntry, {
+				item: tenancy.profile,
+				menu: "tenantMenu"
+			}) : tenancy.profileUrl && /* @__PURE__ */ jsx(DropdownMenuItem, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Link, {
+					href: tenancy.profileUrl,
+					className: "w-full",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::panels.tenant-menu.profile-button",
+							fallback: SettingsIcon
+						}),
+						" ",
+						t("tenancy.profile", {}, "Settings")
+					]
+				})
+			}),
+			tenancy.menu && /* @__PURE__ */ jsx(MenuItemEntries, {
+				items: tenancy.menu,
+				menu: "tenantMenu"
+			}),
+			tenancy.registration ? /* @__PURE__ */ jsx(MenuItemEntry, {
+				item: tenancy.registration,
+				menu: "tenantMenu"
+			}) : tenancy.registrationUrl && /* @__PURE__ */ jsx(DropdownMenuItem, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Link, {
+					href: tenancy.registrationUrl,
+					className: "w-full",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::panels.tenant-menu.registration-button",
+							fallback: PlusIcon
+						}),
+						" ",
+						t("tenancy.register", {}, "New")
+					]
+				})
+			})
+		]
+	})] });
+}
+//#endregion
+export { TenantMenu };
+
+//# sourceMappingURL=tenant-menu.js.map

package/dist/components/panel/tenant-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tenant-menu.js","names":[],"sources":["../../../src/components/panel/tenant-menu.tsx"],"sourcesContent":["import { filterTenants, initials, tenantNameText } from '@alfakit/core'\nimport { Link, router } from '@inertiajs/react'\nimport { CheckIcon, ChevronsUpDownIcon, PlusIcon, SearchIcon, SettingsIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { SidebarMenuButton } from '../ui/sidebar'\nimport { MenuItemEntries, MenuItemEntry } from './menu-item'\nimport { TenantName } from './nav-label'\n\n/**\n * The tenant switcher: a sidebar header button, or a compact button in the top bar of the\n * `topbar` layout (`variant=\"topbar\"`), where the store name shows from `lg` up.\n */\nexport function TenantMenu({ variant = 'sidebar' }: { variant?: 'sidebar' | 'topbar' }) {\n  const t = useT()\n  const { tenancy, brandName } = usePanel()\n  const [search, setSearch] = useState('')\n\n  if (!tenancy || !tenancy.current) {\n    return null\n  }\n\n  const current = tenancy.current\n  // `tenantSwitcher(false)` sends no tenants; `searchableTenantMenu()` adds a search field.\n  const tenants = tenancy.searchable ? filterTenants(tenancy.tenants, search) : tenancy.tenants\n  const hasSwitcher = tenancy.switcher !== false && tenancy.tenants.length > 0\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        {variant === 'topbar' ? (\n          <button\n            type=\"button\"\n            data-slot=\"tenant-menu\"\n            className=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n          >\n            <Avatar className=\"size-6 rounded-md\">\n              {current.avatar && <AvatarImage src={current.avatar} alt=\"\" />}\n              <AvatarFallback className=\"rounded-md text-[10px]\">\n                {initials(tenantNameText(current))}\n              </AvatarFallback>\n            </Avatar>\n            <span className=\"sr-only min-w-0 truncate lg:not-sr-only lg:grid lg:text-start lg:leading-tight\">\n              {current.label && (\n                <span data-slot=\"tenant-menu-label\" className=\"text-muted-foreground text-[10px]\">\n                  {current.label}{' '}\n                </span>\n              )}\n              <TenantName tenant={current} className=\"truncate\" />\n            </span>\n            <Icon\n              name=\"alfakit::panels.tenant-menu.toggle-button\"\n              fallback={ChevronsUpDownIcon}\n              className=\"text-muted-foreground size-4 shrink-0\"\n            />\n          </button>\n        ) : (\n          <SidebarMenuButton size=\"lg\" className=\"data-[state=open]:bg-sidebar-accent\">\n            <Avatar className=\"size-8 rounded-lg\">\n              {current.avatar && <AvatarImage src={current.avatar} alt={tenantNameText(current)} />}\n              <AvatarFallback className=\"rounded-lg\">\n                {initials(tenantNameText(current))}\n              </AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-start text-sm leading-tight\">\n              {/* `HasCurrentTenantLabel`: a caption above the name instead of the brand. */}\n              {current.label && (\n                <span\n                  data-slot=\"tenant-menu-label\"\n                  className=\"text-muted-foreground truncate text-xs\"\n                >\n                  {current.label}\n                </span>\n              )}\n              <TenantName tenant={current} className=\"truncate font-medium\" />\n              {!current.label && (\n                <span className=\"text-muted-foreground truncate text-xs\">{brandName}</span>\n              )}\n            </div>\n            <Icon\n              name=\"alfakit::panels.tenant-menu.toggle-button\"\n              fallback={ChevronsUpDownIcon}\n              className=\"ms-auto size-4\"\n            />\n          </SidebarMenuButton>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"min-w-56 rounded-lg\"\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={4}\n      >\n        {hasSwitcher && (\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n            {t('tenancy.switch', {}, 'Switch')}\n          </DropdownMenuLabel>\n        )}\n        {hasSwitcher && tenancy.searchable && (\n          <div data-slot=\"tenant-menu-search\" className=\"relative px-1 pb-1\">\n            <SearchIcon\n              className=\"text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-3.5 -translate-y-1/2\"\n              aria-hidden=\"true\"\n            />\n            <input\n              type=\"search\"\n              value={search}\n              onChange={(event) => setSearch(event.target.value)}\n              // Keep the menu's type-ahead from taking the keys.\n              onKeyDown={(event) => event.stopPropagation()}\n              placeholder={t('tenancy.search', {}, 'Search')}\n              aria-label={t('tenancy.search', {}, 'Search')}\n              className=\"border-input focus-visible:ring-ring/50 h-8 w-full rounded-md border bg-transparent ps-7 pe-2 text-sm outline-none focus-visible:ring-[3px]\"\n            />\n          </div>\n        )}\n        {hasSwitcher && tenancy.searchable && tenants.length === 0 && (\n          <p className=\"text-muted-foreground px-2 py-1.5 text-sm\">\n            {t('no_results', {}, 'No results.')}\n          </p>\n        )}\n        {tenants.map((tenant) => (\n          <DropdownMenuItem key={String(tenant.id)} onSelect={() => router.visit(tenant.url)}>\n            <Avatar className=\"size-6 rounded-sm\">\n              {tenant.avatar && <AvatarImage src={tenant.avatar} alt={tenantNameText(tenant)} />}\n              <AvatarFallback className=\"rounded-sm text-[10px]\">\n                {initials(tenantNameText(tenant))}\n              </AvatarFallback>\n            </Avatar>\n            <TenantName tenant={tenant} className=\"flex-1 truncate\" />\n            {String(tenant.id) === String(current.id) && <CheckIcon className=\"size-4\" />}\n          </DropdownMenuItem>\n        ))}\n        {hasSwitcher && (tenancy.registrationUrl || tenancy.profileUrl || tenancy.menu?.length) && (\n          <DropdownMenuSeparator />\n        )}\n        {tenancy.profile ? (\n          <MenuItemEntry item={tenancy.profile} menu=\"tenantMenu\" />\n        ) : (\n          tenancy.profileUrl && (\n            <DropdownMenuItem asChild>\n              <Link href={tenancy.profileUrl} className=\"w-full\">\n                <Icon name=\"alfakit::panels.tenant-menu.profile-button\" fallback={SettingsIcon} />{' '}\n                {t('tenancy.profile', {}, 'Settings')}\n              </Link>\n            </DropdownMenuItem>\n          )\n        )}\n        {tenancy.menu && <MenuItemEntries items={tenancy.menu} menu=\"tenantMenu\" />}\n        {tenancy.registration ? (\n          <MenuItemEntry item={tenancy.registration} menu=\"tenantMenu\" />\n        ) : (\n          tenancy.registrationUrl && (\n            <DropdownMenuItem asChild>\n              <Link href={tenancy.registrationUrl} className=\"w-full\">\n                <Icon name=\"alfakit::panels.tenant-menu.registration-button\" fallback={PlusIcon} />{' '}\n                {t('tenancy.register', {}, 'New')}\n              </Link>\n            </DropdownMenuItem>\n          )\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}

package/dist/components/panel/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/panel/theme-toggle.d.ts
+export declare function ThemeToggle(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/panel/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","names":[],"sources":["../../../src/components/panel/theme-toggle.tsx"],"mappings":";wBAcgB,+BAAW,IAAA"}

package/dist/components/panel/theme-toggle.js

@@ -0,0 +1,84 @@
+import { usePanel, useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { hasThemeSwitcher, panelAppearance, setAppearance } from "@alfakit/core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+//#region src/components/panel/theme-toggle.tsx
+function ThemeToggle() {
+	const t = useT();
+	const panel = usePanel();
+	const [appearance, setLocal] = useState(() => typeof window === "undefined" ? panel.darkMode.default ?? "system" : panelAppearance(panel));
+	if (!hasThemeSwitcher(panel)) return null;
+	const change = (value) => {
+		const next = value;
+		setLocal(next);
+		setAppearance(next, panel);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			"aria-label": t("toggle_theme", {}, "Toggle theme"),
+			children: appearance === "dark" ? /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.theme-switcher.dark-button",
+				fallback: MoonIcon
+			}) : appearance === "light" ? /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.theme-switcher.light-button",
+				fallback: SunIcon
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.theme-switcher.system-button",
+				fallback: MonitorIcon
+			})
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+			value: appearance,
+			onValueChange: change,
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: "light",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::panels.theme-switcher.light-button",
+							fallback: SunIcon
+						}),
+						" ",
+						t("light", {}, "Light")
+					]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: "dark",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::panels.theme-switcher.dark-button",
+							fallback: MoonIcon
+						}),
+						" ",
+						t("dark", {}, "Dark")
+					]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: "system",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::panels.theme-switcher.system-button",
+							fallback: MonitorIcon
+						}),
+						" ",
+						t("system", {}, "System")
+					]
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+export { ThemeToggle };
+
+//# sourceMappingURL=theme-toggle.js.map

package/dist/components/panel/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.js","names":[],"sources":["../../../src/components/panel/theme-toggle.tsx"],"sourcesContent":["import { hasThemeSwitcher, panelAppearance, setAppearance, type Appearance } from '@alfakit/core'\nimport { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\n\nexport function ThemeToggle() {\n  const t = useT()\n  const panel = usePanel()\n  const [appearance, setLocal] = useState<Appearance>(() =>\n    typeof window === 'undefined' ? (panel.darkMode.default ?? 'system') : panelAppearance(panel),\n  )\n\n  // `themeSwitcher(false)` keeps dark mode but hides the switcher.\n  if (!hasThemeSwitcher(panel)) {\n    return null\n  }\n\n  const change = (value: string) => {\n    const next = value as Appearance\n    setLocal(next)\n    setAppearance(next, panel)\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          aria-label={t('toggle_theme', {}, 'Toggle theme')}\n        >\n          {appearance === 'dark' ? (\n            <Icon name=\"alfakit::panels.theme-switcher.dark-button\" fallback={MoonIcon} />\n          ) : appearance === 'light' ? (\n            <Icon name=\"alfakit::panels.theme-switcher.light-button\" fallback={SunIcon} />\n          ) : (\n            <Icon name=\"alfakit::panels.theme-switcher.system-button\" fallback={MonitorIcon} />\n          )}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuRadioGroup value={appearance} onValueChange={change}>\n          <DropdownMenuRadioItem value=\"light\">\n            <Icon name=\"alfakit::panels.theme-switcher.light-button\" fallback={SunIcon} />{' '}\n            {t('light', {}, 'Light')}\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"dark\">\n            <Icon name=\"alfakit::panels.theme-switcher.dark-button\" fallback={MoonIcon} />{' '}\n            {t('dark', {}, 'Dark')}\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"system\">\n            <Icon name=\"alfakit::panels.theme-switcher.system-button\" fallback={MonitorIcon} />{' '}\n            {t('system', {}, 'System')}\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,cAAc;CAC5B,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,YAAY,YAAY,eAC7B,OAAO,WAAW,cAAe,MAAM,SAAS,WAAW,WAAY,gBAAgB,KAAK,CAC9F;CAGA,IAAI,CAAC,iBAAiB,KAAK,GACzB,OAAO;CAGT,MAAM,UAAU,UAAkB;EAChC,MAAM,OAAO;EACb,SAAS,IAAI;EACb,cAAc,MAAM,KAAK;CAC3B;CAEA,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;EACnB,UAAA,oBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,cAAY,EAAE,gBAAgB,CAAC,GAAG,cAAc;GAE/C,UAAA,eAAe,SACd,oBAAC,MAAD;IAAM,MAAK;IAA6C,UAAU;GAAW,CAAA,IAC3E,eAAe,UACjB,oBAAC,MAAD;IAAM,MAAK;IAA8C,UAAU;GAAU,CAAA,IAE7E,oBAAC,MAAD;IAAM,MAAK;IAA+C,UAAU;GAAc,CAAA;EAE9E,CAAA;CACW,CAAA,GACrB,oBAAC,qBAAD;EAAqB,OAAM;EACzB,UAAA,qBAAC,wBAAD;GAAwB,OAAO;GAAY,eAAe;GAA1D,UAAA;IACE,qBAAC,uBAAD;KAAuB,OAAM;KAA7B,UAAA;MACE,oBAAC,MAAD;OAAM,MAAK;OAA8C,UAAU;MAAU,CAAA;MAAE;MAC9E,EAAE,SAAS,CAAC,GAAG,OAAO;KACF;;IACvB,qBAAC,uBAAD;KAAuB,OAAM;KAA7B,UAAA;MACE,oBAAC,MAAD;OAAM,MAAK;OAA6C,UAAU;MAAW,CAAA;MAAE;MAC9E,EAAE,QAAQ,CAAC,GAAG,MAAM;KACA;;IACvB,qBAAC,uBAAD;KAAuB,OAAM;KAA7B,UAAA;MACE,oBAAC,MAAD;OAAM,MAAK;OAA+C,UAAU;MAAc,CAAA;MAAE;MACnF,EAAE,UAAU,CAAC,GAAG,QAAQ;KACJ;;GACD;;CACL,CAAA,CACT,EAAA,CAAA;AAElB"}

package/dist/components/panel/topbar.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbSchema } from "@alfakit/core";
+//#region src/components/panel/topbar.d.ts
+export declare function Breadcrumbs({ items }: {
+  items: BreadcrumbSchema[];
+}): import("react").JSX.Element | null;
+export declare function Topbar({ breadcrumbs }: {
+  breadcrumbs?: BreadcrumbSchema[];
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=topbar.d.ts.map

package/dist/components/panel/topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.d.ts","names":[],"sources":["../../../src/components/panel/topbar.tsx"],"mappings":";;wBAsBgB,cAAc;EAAW,OAAO;oBAAoB,IAAA;wBA+BpD,SAAS;EAAiB,cAAc;oBAAoB,IAAA"}

package/dist/components/panel/topbar.js

@@ -0,0 +1,74 @@
+import { usePanel, useT } from "../../context.js";
+import { Slot } from "./slot.js";
+import { NotificationsMenu } from "../notifications/notifications-menu.js";
+import { Separator } from "../ui/separator.js";
+import { SidebarTrigger } from "../ui/sidebar.js";
+import { GlobalSearch } from "./global-search.js";
+import { TopbarLocaleSwitcher } from "./locale-switcher.js";
+import { UserMenu } from "./user-menu.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { DebugPanelSlot } from "./debug-panel-slot.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { Link } from "@inertiajs/react";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/panel/topbar.tsx
+function Breadcrumbs({ items }) {
+	const t = useT();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(Breadcrumb, {
+		className: "min-w-0",
+		"aria-label": t("breadcrumbs", {}, "Breadcrumb"),
+		children: /* @__PURE__ */ jsx(BreadcrumbList, {
+			className: "flex-nowrap",
+			children: items.map((item, index) => {
+				const last = index === items.length - 1;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
+					className: !last ? "hidden md:inline-flex" : "min-w-0",
+					children: last || !item.url ? /* @__PURE__ */ jsx(BreadcrumbPage, {
+						className: "block truncate",
+						children: item.label
+					}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link, {
+							href: item.url,
+							children: item.label
+						})
+					})
+				}), !last && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })] }, `${item.label}-${index}`);
+			})
+		})
+	});
+}
+function Topbar({ breadcrumbs }) {
+	const panel = usePanel();
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "topbar",
+		className: "bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-20 flex h-14 min-w-0 shrink-0 items-center gap-2 border-b px-4 backdrop-blur",
+		children: [
+			/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ms-1" }),
+			/* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: "me-2 h-4"
+			}),
+			panel.breadcrumbs && breadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }),
+			/* @__PURE__ */ jsx(Slot, { name: "topbar.start" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(Slot, { name: "topbar.end" }),
+					(panel.topNavigation || panel.globalSearch?.position !== "sidebar") && /* @__PURE__ */ jsx(GlobalSearch, {}),
+					panel.databaseNotifications?.position !== "sidebar" && /* @__PURE__ */ jsx(NotificationsMenu, {}),
+					/* @__PURE__ */ jsx(TopbarLocaleSwitcher, {}),
+					/* @__PURE__ */ jsx(ThemeToggle, {}),
+					/* @__PURE__ */ jsx(DebugPanelSlot, {}),
+					(panel.topNavigation || panel.userMenu?.position === "topbar") && /* @__PURE__ */ jsx(UserMenu, { variant: "topbar" })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { Breadcrumbs, Topbar };
+
+//# sourceMappingURL=topbar.js.map

package/dist/components/panel/topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar.js","names":[],"sources":["../../../src/components/panel/topbar.tsx"],"sourcesContent":["import type { BreadcrumbSchema } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { Fragment } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { NotificationsMenu } from '../notifications/notifications-menu'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '../ui/breadcrumb'\nimport { Separator } from '../ui/separator'\nimport { SidebarTrigger } from '../ui/sidebar'\nimport { DebugPanelSlot } from './debug-panel-slot'\nimport { GlobalSearch } from './global-search'\nimport { TopbarLocaleSwitcher } from './locale-switcher'\nimport { Slot } from './slot'\nimport { ThemeToggle } from './theme-toggle'\nimport { UserMenu } from './user-menu'\n\nexport function Breadcrumbs({ items }: { items: BreadcrumbSchema[] }) {\n  const t = useT()\n\n  if (items.length === 0) return null\n\n  return (\n    <Breadcrumb className=\"min-w-0\" aria-label={t('breadcrumbs', {}, 'Breadcrumb')}>\n      <BreadcrumbList className=\"flex-nowrap\">\n        {items.map((item, index) => {\n          const last = index === items.length - 1\n\n          return (\n            <Fragment key={`${item.label}-${index}`}>\n              <BreadcrumbItem className={!last ? 'hidden md:inline-flex' : 'min-w-0'}>\n                {last || !item.url ? (\n                  <BreadcrumbPage className=\"block truncate\">{item.label}</BreadcrumbPage>\n                ) : (\n                  <BreadcrumbLink asChild>\n                    <Link href={item.url}>{item.label}</Link>\n                  </BreadcrumbLink>\n                )}\n              </BreadcrumbItem>\n              {!last && <BreadcrumbSeparator className={'hidden md:block'} />}\n            </Fragment>\n          )\n        })}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n\nexport function Topbar({ breadcrumbs }: { breadcrumbs?: BreadcrumbSchema[] }) {\n  const panel = usePanel()\n\n  return (\n    <header\n      data-slot=\"topbar\"\n      className=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-20 flex h-14 min-w-0 shrink-0 items-center gap-2 border-b px-4 backdrop-blur\"\n    >\n      <SidebarTrigger className=\"-ms-1\" />\n      <Separator orientation=\"vertical\" className=\"me-2 h-4\" />\n      {panel.breadcrumbs && breadcrumbs && <Breadcrumbs items={breadcrumbs} />}\n      <Slot name=\"topbar.start\" />\n      <div className=\"ms-auto flex items-center gap-1\">\n        <Slot name=\"topbar.end\" />\n        {/* `globalSearch(position: Sidebar)` moves the field to the sidebar header. */}\n        {(panel.topNavigation || panel.globalSearch?.position !== 'sidebar') && <GlobalSearch />}\n        {panel.databaseNotifications?.position !== 'sidebar' && <NotificationsMenu />}\n        <TopbarLocaleSwitcher />\n        <ThemeToggle />\n        <DebugPanelSlot />\n        {/* `userMenu(position: Topbar)` moves the menu out of the sidebar footer. */}\n        {(panel.topNavigation || panel.userMenu?.position === 'topbar') && (\n          <UserMenu variant=\"topbar\" />\n        )}\n      </div>\n    </header>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAgB,YAAY,EAAE,SAAwC;CACpE,MAAM,IAAI,KAAK;CAEf,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,YAAD;EAAY,WAAU;EAAU,cAAY,EAAE,eAAe,CAAC,GAAG,YAAY;EAC3E,UAAA,oBAAC,gBAAD;GAAgB,WAAU;GACvB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,OAAO,UAAU,MAAM,SAAS;IAEtC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;KAAgB,WAAW,CAAC,OAAO,0BAA0B;KAC1D,UAAA,QAAQ,CAAC,KAAK,MACb,oBAAC,gBAAD;MAAgB,WAAU;MAAkB,UAAA,KAAK;KAAsB,CAAA,IAEvE,oBAAC,gBAAD;MAAgB,SAAA;MACd,UAAA,oBAAC,MAAD;OAAM,MAAM,KAAK;OAAM,UAAA,KAAK;MAAY,CAAA;KAC1B,CAAA;IAEJ,CAAA,GACf,CAAC,QAAQ,oBAAC,qBAAD,EAAqB,WAAW,kBAAoB,CAAA,CACtD,EAAA,GAXK,GAAG,KAAK,MAAM,GAAG,OAWtB;GAEd,CAAC;EACa,CAAA;CACN,CAAA;AAEhB;AAEA,SAAgB,OAAO,EAAE,eAAqD;CAC5E,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAC,UAAD;EACE,aAAU;EACV,WAAU;EAFZ,UAAA;GAIE,oBAAC,gBAAD,EAAgB,WAAU,QAAS,CAAA;GACnC,oBAAC,WAAD;IAAW,aAAY;IAAW,WAAU;GAAY,CAAA;GACvD,MAAM,eAAe,eAAe,oBAAC,aAAD,EAAa,OAAO,YAAc,CAAA;GACvE,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA;GAC3B,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;MAEvB,MAAM,iBAAiB,MAAM,cAAc,aAAa,cAAc,oBAAC,cAAD,CAAe,CAAA;KACtF,MAAM,uBAAuB,aAAa,aAAa,oBAAC,mBAAD,CAAoB,CAAA;KAC5E,oBAAC,sBAAD,CAAuB,CAAA;KACvB,oBAAC,aAAD,CAAc,CAAA;KACd,oBAAC,gBAAD,CAAiB,CAAA;MAEf,MAAM,iBAAiB,MAAM,UAAU,aAAa,aACpD,oBAAC,UAAD,EAAU,SAAQ,SAAU,CAAA;IAE3B;;EACC;;AAEZ"}

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

@@ -0,0 +1,16 @@
+//#region src/components/panel/user-menu.d.ts
+export declare function UserAvatar({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+/**
+ * Shown instead of the user menu to guests (panels with `guestAccess()`) when the panel
+ * has a login page.
+ */
+export declare function SignInLink({ variant }: {
+  variant?: 'sidebar' | 'topbar';
+}): import("react").JSX.Element | null;
+export declare function UserMenu({ variant }: {
+  variant?: 'sidebar' | 'topbar';
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=user-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu.d.ts","names":[],"sources":["../../../src/components/panel/user-menu.tsx"],"mappings":";wBAsBgB,aAAa;EAAe;oBAAoB,IAAA;;;;;wBAmBhD,aAAa;EAAyB;oBAAgC,IAAA;wBAyBtE,WAAW;EAAyB;oBAAgC,IAAA"}

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

@@ -0,0 +1,151 @@
+import { useDirection, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Slot } from "./slot.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { SidebarMenuButton } from "../ui/sidebar.js";
+import { MenuItemEntries, MenuItemEntry } from "./menu-item.js";
+import { LocaleSubMenu } from "./locale-switcher.js";
+import { PwaMenuItems } from "./pwa.js";
+import { initials } from "@alfakit/core";
+import { Link, router } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon, LogInIcon, LogOutIcon, UserIcon } from "lucide-react";
+//#region src/components/panel/user-menu.tsx
+function UserAvatar({ className }) {
+	const { user } = usePanel();
+	if (!user) return null;
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: cn("size-8 rounded-lg", className),
+		children: [user.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+			src: user.avatar,
+			alt: user.name
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "rounded-lg",
+			"aria-hidden": "true",
+			children: initials(user.name)
+		})]
+	});
+}
+/**
+* Shown instead of the user menu to guests (panels with `guestAccess()`) when the panel
+* has a login page.
+*/
+function SignInLink({ variant = "sidebar" }) {
+	const t = useT();
+	const { user, auth } = usePanel();
+	if (user || !auth?.login) return null;
+	return /* @__PURE__ */ jsxs(Link, {
+		href: auth.login,
+		"data-slot": "sign-in-link",
+		className: cn("focus-visible:ring-ring/50 flex items-center gap-2 rounded-md text-sm font-medium outline-none focus-visible:ring-[3px] [&_svg]:size-4 [&_svg]:shrink-0", variant === "sidebar" ? "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full p-2" : "hover:bg-accent hover:text-accent-foreground h-8 px-3"),
+		children: [/* @__PURE__ */ jsx(LogInIcon, {
+			className: "rtl:rotate-180",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", { children: t("sign_in", {}, "Sign in") })]
+	});
+}
+function UserMenu({ variant = "sidebar" }) {
+	const t = useT();
+	const panel = usePanel();
+	const direction = useDirection();
+	const { user, userMenu } = panel;
+	if (!user) return /* @__PURE__ */ jsx(SignInLink, { variant });
+	if (!userMenu) return null;
+	const trigger = variant === "sidebar" ? /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		size: "lg",
+		className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+		children: [
+			/* @__PURE__ */ jsx(UserAvatar, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid flex-1 text-start text-sm leading-tight",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: user.name
+				}), user.email && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground truncate text-xs",
+					children: user.email
+				})]
+			}),
+			/* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.user-menu.toggle-button",
+				fallback: ChevronsUpDownIcon,
+				className: "ms-auto size-4"
+			})
+		]
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "focus-visible:ring-ring/50 rounded-full outline-none focus-visible:ring-[3px]",
+		"aria-label": user.name,
+		children: /* @__PURE__ */ jsx(UserAvatar, { className: "rounded-full" })
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "min-w-56 rounded-lg",
+		side: variant === "sidebar" ? direction === "rtl" ? "left" : "right" : "bottom",
+		align: "end",
+		sideOffset: 4,
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "p-0 font-normal",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-1 py-1.5 text-start text-sm",
+					children: [/* @__PURE__ */ jsx(UserAvatar, {}), /* @__PURE__ */ jsxs("div", {
+						className: "grid flex-1 leading-tight",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: user.name
+						}), user.email && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate text-xs",
+							children: user.email
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "user-menu.before" }),
+				/* @__PURE__ */ jsx(Slot, { name: "user-menu.profile.before" }),
+				userMenu.profile ? /* @__PURE__ */ jsx(MenuItemEntry, { item: userMenu.profile }) : userMenu.profileUrl && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Link, {
+						href: userMenu.profileUrl,
+						className: "w-full",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								name: "alfakit::panels.user-menu.profile-item",
+								fallback: UserIcon
+							}),
+							" ",
+							t("profile", {}, "Profile")
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(Slot, { name: "user-menu.profile.after" }),
+				/* @__PURE__ */ jsx(MenuItemEntries, { items: userMenu.items }),
+				/* @__PURE__ */ jsx(LocaleSubMenu, {}),
+				/* @__PURE__ */ jsx(PwaMenuItems, {}),
+				/* @__PURE__ */ jsx(Slot, { name: "user-menu.after" })
+			] }),
+			userMenu.logout !== false && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			userMenu.logout ? /* @__PURE__ */ jsx(MenuItemEntry, { item: userMenu.logout }) : userMenu.logout !== false && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: () => router.post(userMenu.logoutUrl),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::panels.user-menu.logout-button",
+						fallback: LogOutIcon
+					}),
+					" ",
+					t("logout", {}, "Sign out")
+				]
+			})
+		]
+	})] });
+}
+//#endregion
+export { SignInLink, UserAvatar, UserMenu };
+
+//# sourceMappingURL=user-menu.js.map

package/dist/components/panel/user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu.js","names":[],"sources":["../../../src/components/panel/user-menu.tsx"],"sourcesContent":["import { initials } from '@alfakit/core'\nimport { Link, router } from '@inertiajs/react'\nimport { ChevronsUpDownIcon, LogInIcon, LogOutIcon, UserIcon } from 'lucide-react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { SidebarMenuButton } from '../ui/sidebar'\nimport { LocaleSubMenu } from './locale-switcher'\nimport { MenuItemEntries, MenuItemEntry } from './menu-item'\nimport { PwaMenuItems } from './pwa'\nimport { Slot } from './slot'\n\nexport function UserAvatar({ className }: { className?: string }) {\n  const { user } = usePanel()\n\n  if (!user) return null\n\n  return (\n    <Avatar className={cn('size-8 rounded-lg', className)}>\n      {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}\n      <AvatarFallback className=\"rounded-lg\" aria-hidden=\"true\">\n        {initials(user.name)}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\n/**\n * Shown instead of the user menu to guests (panels with `guestAccess()`) when the panel\n * has a login page.\n */\nexport function SignInLink({ variant = 'sidebar' }: { variant?: 'sidebar' | 'topbar' }) {\n  const t = useT()\n  const { user, auth } = usePanel()\n\n  if (user || !auth?.login) {\n    return null\n  }\n\n  return (\n    <Link\n      href={auth.login}\n      data-slot=\"sign-in-link\"\n      className={cn(\n        'focus-visible:ring-ring/50 flex items-center gap-2 rounded-md text-sm font-medium outline-none focus-visible:ring-[3px] [&_svg]:size-4 [&_svg]:shrink-0',\n        variant === 'sidebar'\n          ? 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full p-2'\n          : 'hover:bg-accent hover:text-accent-foreground h-8 px-3',\n      )}\n    >\n      <LogInIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n      <span>{t('sign_in', {}, 'Sign in')}</span>\n    </Link>\n  )\n}\n\nexport function UserMenu({ variant = 'sidebar' }: { variant?: 'sidebar' | 'topbar' }) {\n  const t = useT()\n  const panel = usePanel()\n  const direction = useDirection()\n  const { user, userMenu } = panel\n\n  if (!user) {\n    return <SignInLink variant={variant} />\n  }\n\n  if (!userMenu) {\n    return null\n  }\n\n  const trigger =\n    variant === 'sidebar' ? (\n      <SidebarMenuButton\n        size=\"lg\"\n        className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n      >\n        <UserAvatar />\n        <div className=\"grid flex-1 text-start text-sm leading-tight\">\n          <span className=\"truncate font-medium\">{user.name}</span>\n          {user.email && (\n            <span className=\"text-muted-foreground truncate text-xs\">{user.email}</span>\n          )}\n        </div>\n        <Icon\n          name=\"alfakit::panels.user-menu.toggle-button\"\n          fallback={ChevronsUpDownIcon}\n          className=\"ms-auto size-4\"\n        />\n      </SidebarMenuButton>\n    ) : (\n      <button\n        type=\"button\"\n        className=\"focus-visible:ring-ring/50 rounded-full outline-none focus-visible:ring-[3px]\"\n        aria-label={user.name}\n      >\n        <UserAvatar className=\"rounded-full\" />\n      </button>\n    )\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"min-w-56 rounded-lg\"\n        side={variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'}\n        align=\"end\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"p-0 font-normal\">\n          <div className=\"flex items-center gap-2 px-1 py-1.5 text-start text-sm\">\n            <UserAvatar />\n            <div className=\"grid flex-1 leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              {user.email && (\n                <span className=\"text-muted-foreground truncate text-xs\">{user.email}</span>\n              )}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <Slot name=\"user-menu.before\" />\n          <Slot name=\"user-menu.profile.before\" />\n          {userMenu.profile ? (\n            <MenuItemEntry item={userMenu.profile} />\n          ) : (\n            userMenu.profileUrl && (\n              <DropdownMenuItem asChild>\n                <Link href={userMenu.profileUrl} className=\"w-full\">\n                  <Icon name=\"alfakit::panels.user-menu.profile-item\" fallback={UserIcon} />{' '}\n                  {t('profile', {}, 'Profile')}\n                </Link>\n              </DropdownMenuItem>\n            )\n          )}\n          <Slot name=\"user-menu.profile.after\" />\n          <MenuItemEntries items={userMenu.items} />\n          <LocaleSubMenu />\n          <PwaMenuItems />\n          <Slot name=\"user-menu.after\" />\n        </DropdownMenuGroup>\n        {userMenu.logout !== false && <DropdownMenuSeparator />}\n        {userMenu.logout ? (\n          <MenuItemEntry item={userMenu.logout} />\n        ) : (\n          userMenu.logout !== false && (\n            <DropdownMenuItem onSelect={() => router.post(userMenu.logoutUrl)}>\n              <Icon name=\"alfakit::panels.user-menu.logout-button\" fallback={LogOutIcon} />{' '}\n              {t('logout', {}, 'Sign out')}\n            </DropdownMenuItem>\n          )\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}

package/dist/components/realtime/conflict-banner.d.ts

@@ -0,0 +1,13 @@
+import { PageSchema } from "@alfakit/core";
+//#region src/components/realtime/conflict-banner.d.ts
+/**
+ * Edit pages (`detectConflicts()`): a non-blocking banner when somebody else saved the
+ * record ("Dana saved changes 10 seconds ago", over `Panel::realtime()`) or the server
+ * refused a save, with review (the changed fields against your unsaved values), reload
+ * and keep mine. Replace it with `components: { 'page:conflict-banner': … }`.
+ */
+export declare function ConflictBanner({ page }: {
+  page: PageSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=conflict-banner.d.ts.map

package/dist/components/realtime/conflict-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conflict-banner.d.ts","names":[],"sources":["../../../src/components/realtime/conflict-banner.tsx"],"mappings":";;;;;;;;wBAmBgB,iBAAiB;EAAU,MAAM;oBAAY,IAAA"}