@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/panel/app-sidebar.js

@@ -0,0 +1,302 @@
+import { useDirection, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { Slot } from "./slot.js";
+import { NavLabel } from "./nav-label.js";
+import { NewTabHint } from "../../lib/new-tab-hint.js";
+import { NotificationsMenu } from "../notifications/notifications-menu.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarRail } from "../ui/sidebar.js";
+import { GlobalSearch } from "./global-search.js";
+import { TenantMenu } from "./tenant-menu.js";
+import { UserMenu } from "./user-menu.js";
+import { PREFETCH_CACHE_FOR, flattenNavigationItems, hasActiveNavigationItem, navigationItemText } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+//#region src/components/panel/app-sidebar.tsx
+function Brand({ className }) {
+	const panel = usePanel();
+	return /* @__PURE__ */ jsx(Link, {
+		href: panel.url ?? "/",
+		className: cn("flex items-center gap-2 overflow-hidden", className),
+		children: panel.brandLogo ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
+			src: panel.brandLogo,
+			alt: panel.brandName,
+			style: { height: panel.brandLogoHeight ?? "1.75rem" },
+			className: cn("max-w-full object-contain", panel.darkModeBrandLogo && "dark:hidden")
+		}), panel.darkModeBrandLogo && /* @__PURE__ */ jsx("img", {
+			src: panel.darkModeBrandLogo,
+			alt: panel.brandName,
+			style: { height: panel.brandLogoHeight ?? "1.75rem" },
+			className: "hidden max-w-full object-contain dark:block"
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold",
+			children: panel.brandName.charAt(0)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate text-sm font-semibold group-data-[collapsible=icon]:hidden",
+			children: panel.brandName
+		})] })
+	});
+}
+function NavBadge({ item }) {
+	const t = useT();
+	if (item.badgePending) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "badge",
+		"aria-busy": "true",
+		"aria-label": t("loading", {}, "Loading"),
+		className: "bg-muted-foreground/20 ms-auto inline-block h-4 w-5 animate-pulse rounded-md"
+	});
+	if (item.badge === void 0 || item.badge === null) return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		className: cn("ms-auto px-1.5 py-0", colorClass(badgeColorClasses, item.badgeColor, "gray")),
+		title: item.badgeTooltip,
+		children: item.badge
+	});
+}
+/**
+* A navigation link: an Inertia link, or a plain anchor for `openUrlInNewTab()`. Used as an
+* `asChild` target, so it must pass on the classes, data attributes and handlers it receives.
+*/
+function NavLink({ item, children, ...props }) {
+	const attributes = {
+		...props,
+		...extraProps(item.extraAttributes, props.className)
+	};
+	return item.openInNewTab ? /* @__PURE__ */ jsxs("a", {
+		...attributes,
+		href: item.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: [children, /* @__PURE__ */ jsx(NewTabHint, {})]
+	}) : /* @__PURE__ */ jsx(Link, {
+		...attributes,
+		href: item.url ?? "#",
+		prefetch: true,
+		cacheFor: PREFETCH_CACHE_FOR,
+		children
+	});
+}
+/** Child items (any depth) with their own badges, new-tab links and nested children. */
+function NavSubItem({ item }) {
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs(Collapsible, {
+		defaultOpen: item.active,
+		className: "group/nav-sub",
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
+				asChild: true,
+				isActive: item.active,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					...extraProps(item.extraAttributes, "w-full"),
+					children: [
+						item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+						/* @__PURE__ */ jsx(NavLabel, { item }),
+						/* @__PURE__ */ jsx(NavBadge, { item }),
+						/* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto transition-transform duration-200 group-data-[state=open]/nav-sub:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-sub:rotate-90" })
+					]
+				})
+			})
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.children.map((child) => /* @__PURE__ */ jsx(NavSubItem, { item: child }, child.label)) }) })]
+	}) });
+	return /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, {
+		asChild: true,
+		isActive: item.active,
+		children: /* @__PURE__ */ jsxs(NavLink, {
+			item,
+			children: [
+				item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+				/* @__PURE__ */ jsx(NavLabel, { item }),
+				/* @__PURE__ */ jsx(NavBadge, { item })
+			]
+		})
+	}) });
+}
+function NavItem({ item }) {
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsx(Collapsible, {
+		asChild: true,
+		defaultOpen: item.active,
+		className: "group/collapsible",
+		children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				tooltip: navigationItemText(item),
+				isActive: item.active,
+				...extraProps(item.extraAttributes),
+				children: [
+					item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+					/* @__PURE__ */ jsx(NavLabel, { item }),
+					/* @__PURE__ */ jsx(NavBadge, { item }),
+					/* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/collapsible:rotate-90" })
+				]
+			})
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.children.map((child) => /* @__PURE__ */ jsx(NavSubItem, { item: child }, child.label)) }) })] })
+	});
+	return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: true,
+		isActive: item.active,
+		tooltip: navigationItemText(item),
+		children: /* @__PURE__ */ jsxs(NavLink, {
+			item,
+			children: [
+				item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+				/* @__PURE__ */ jsx(NavLabel, { item }),
+				/* @__PURE__ */ jsx(NavBadge, { item })
+			]
+		})
+	}) });
+}
+/** A group's items in its flyout menu, children indented under their parent. */
+function FlyoutItems({ items }) {
+	return flattenNavigationItems(items).map(({ item, depth }, index) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+		asChild: true,
+		"data-active": item.active ? "true" : void 0,
+		children: /* @__PURE__ */ jsxs(NavLink, {
+			item,
+			"aria-current": item.active ? "page" : void 0,
+			className: cn("data-[active=true]:bg-accent data-[active=true]:font-medium", depth === 1 && "ps-6", depth > 1 && "ps-9"),
+			children: [
+				item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+				/* @__PURE__ */ jsx(NavLabel, {
+					item,
+					className: "truncate"
+				}),
+				/* @__PURE__ */ jsx(NavBadge, { item })
+			]
+		})
+	}, `${depth}-${item.label}-${index}`));
+}
+/**
+* In the icon-only (collapsed) sidebar, a group with an icon is one button that opens its
+* items in a flyout menu, like Filament. Hidden while the sidebar is expanded.
+*/
+function NavGroupFlyout({ group }) {
+	const direction = useDirection();
+	const active = hasActiveNavigationItem(group.items);
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		className: "hidden group-data-[collapsible=icon]:flex",
+		"data-nav-flyout": "",
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, {
+			dir: direction,
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+					isActive: active,
+					children: [/* @__PURE__ */ jsx(Icon, { name: group.icon }), /* @__PURE__ */ jsx("span", { children: group.label })]
+				})
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				side: direction === "rtl" ? "left" : "right",
+				align: "start",
+				className: "min-w-56",
+				children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }), /* @__PURE__ */ jsx(FlyoutItems, { items: group.items })]
+			})]
+		}) })
+	});
+}
+function NavGroup({ group }) {
+	const attributes = extraProps(group.extraSidebarAttributes);
+	const flyout = Boolean(group.label && group.icon);
+	const content = /* @__PURE__ */ jsx(SidebarGroupContent, {
+		className: cn(flyout && "group-data-[collapsible=icon]:hidden"),
+		children: /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(NavItem, { item }, item.label)) })
+	});
+	const flyoutMenu = flyout ? /* @__PURE__ */ jsx(NavGroupFlyout, { group }) : null;
+	if (!group.label) return /* @__PURE__ */ jsx(SidebarGroup, {
+		...attributes,
+		children: content
+	});
+	if (!group.collapsible) return /* @__PURE__ */ jsxs(SidebarGroup, {
+		...attributes,
+		children: [
+			/* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [group.icon && /* @__PURE__ */ jsx(Icon, {
+				name: group.icon,
+				className: "me-1.5"
+			}), group.label] }),
+			content,
+			flyoutMenu
+		]
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		defaultOpen: !group.collapsed || group.items.some((item) => item.active),
+		className: "group/nav-group",
+		children: /* @__PURE__ */ jsxs(SidebarGroup, {
+			...attributes,
+			children: [
+				/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(SidebarGroupLabel, {
+						asChild: true,
+						className: "hover:bg-sidebar-accent w-full cursor-pointer justify-between",
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5",
+								children: [group.icon && /* @__PURE__ */ jsx(Icon, { name: group.icon }), group.label]
+							}), /* @__PURE__ */ jsx(Icon, {
+								name: "alfakit::panels.sidebar.group.collapse-button",
+								fallback: ChevronRightIcon,
+								className: "size-3.5 transition-transform group-data-[state=open]/nav-group:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-group:rotate-90"
+							})]
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(CollapsibleContent, { children: content }),
+				flyoutMenu
+			]
+		})
+	});
+}
+function AppSidebar() {
+	const panel = usePanel();
+	const direction = useDirection();
+	const t = useT();
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		side: direction === "rtl" ? "right" : "left",
+		collapsible: panel.theme?.design?.layout === "rail" ? "icon" : panel.sidebarFullyCollapsibleOnDesktop ? "offcanvas" : panel.sidebarCollapsibleOnDesktop ? "icon" : "none",
+		variant: panel.theme?.sidebar === "flush" ? "sidebar" : panel.theme?.sidebar ?? "inset",
+		children: [
+			/* @__PURE__ */ jsxs(SidebarHeader, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.start" }),
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.logo.before" }),
+				/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: panel.tenancy?.current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Slot, { name: "tenant-menu.before" }),
+					/* @__PURE__ */ jsx(TenantMenu, {}),
+					/* @__PURE__ */ jsx(Slot, { name: "tenant-menu.after" })
+				] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
+					size: "lg",
+					asChild: true,
+					children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Brand, {}) })
+				}) }) }),
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.logo.after" }),
+				panel.databaseNotifications?.position === "sidebar" && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(NotificationsMenu, { variant: "sidebar" }) }) }),
+				panel.globalSearch?.position === "sidebar" && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(GlobalSearch, { variant: "sidebar" }) }) }),
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.header" })
+			] }),
+			/* @__PURE__ */ jsxs(SidebarContent, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.nav.start" }),
+				/* @__PURE__ */ jsx("nav", {
+					"aria-label": t("sidebar", {}, "Sidebar"),
+					className: "contents",
+					children: panel.navigation.map((group, index) => /* @__PURE__ */ jsx(NavGroup, { group }, group.label ?? `group-${index}`))
+				}),
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.nav.end" })
+			] }),
+			/* @__PURE__ */ jsxs(SidebarFooter, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.footer" }),
+				panel.userMenu?.position !== "topbar" && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(UserMenu, {}) }) }),
+				/* @__PURE__ */ jsx(Slot, { name: "sidebar.end" })
+			] }),
+			/* @__PURE__ */ jsx(SidebarRail, {})
+		]
+	});
+}
+//#endregion
+export { AppSidebar, Brand };
+
+//# sourceMappingURL=app-sidebar.js.map

package/dist/components/panel/app-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.js","names":[],"sources":["../../../src/components/panel/app-sidebar.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  flattenNavigationItems,\n  hasActiveNavigationItem,\n  navigationItemText,\n  type NavigationGroupSchema,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { ChevronRightIcon } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { NotificationsMenu } from '../notifications/notifications-menu'\nimport { Badge } from '../ui/badge'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from '../ui/sidebar'\nimport { GlobalSearch } from './global-search'\nimport { NavLabel } from './nav-label'\nimport { Slot } from './slot'\nimport { TenantMenu } from './tenant-menu'\nimport { UserMenu } from './user-menu'\n\nexport function Brand({ className }: { className?: string }) {\n  const panel = usePanel()\n\n  return (\n    <Link\n      href={panel.url ?? '/'}\n      className={cn('flex items-center gap-2 overflow-hidden', className)}\n    >\n      {panel.brandLogo ? (\n        <>\n          <img\n            src={panel.brandLogo}\n            alt={panel.brandName}\n            style={{ height: panel.brandLogoHeight ?? '1.75rem' }}\n            className={cn('max-w-full object-contain', panel.darkModeBrandLogo && 'dark:hidden')}\n          />\n          {panel.darkModeBrandLogo && (\n            <img\n              src={panel.darkModeBrandLogo}\n              alt={panel.brandName}\n              style={{ height: panel.brandLogoHeight ?? '1.75rem' }}\n              className=\"hidden max-w-full object-contain dark:block\"\n            />\n          )}\n        </>\n      ) : (\n        <>\n          <span className=\"bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold\">\n            {panel.brandName.charAt(0)}\n          </span>\n          <span className=\"truncate text-sm font-semibold group-data-[collapsible=icon]:hidden\">\n            {panel.brandName}\n          </span>\n        </>\n      )}\n    </Link>\n  )\n}\n\nfunction NavBadge({ item }: { item: NavigationItemSchema }) {\n  const t = useT()\n\n  // `deferNavigationBadges()`: a placeholder until the deferred badges arrive.\n  if (item.badgePending) {\n    return (\n      <span\n        data-slot=\"badge\"\n        aria-busy=\"true\"\n        aria-label={t('loading', {}, 'Loading')}\n        className=\"bg-muted-foreground/20 ms-auto inline-block h-4 w-5 animate-pulse rounded-md\"\n      />\n    )\n  }\n\n  if (item.badge === undefined || item.badge === null) return null\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className={cn('ms-auto px-1.5 py-0', colorClass(badgeColorClasses, item.badgeColor, 'gray'))}\n      title={item.badgeTooltip}\n    >\n      {item.badge}\n    </Badge>\n  )\n}\n\n/**\n * A navigation link: an Inertia link, or a plain anchor for `openUrlInNewTab()`. Used as an\n * `asChild` target, so it must pass on the classes, data attributes and handlers it receives.\n */\nfunction NavLink({\n  item,\n  children,\n  ...props\n}: { item: NavigationItemSchema; children: ReactNode } & Omit<\n  ComponentProps<'a'>,\n  'href' | 'children'\n>) {\n  // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.\n  const attributes = {\n    ...props,\n    ...extraProps(item.extraAttributes, props.className),\n  } as ComponentProps<'a'>\n\n  return item.openInNewTab ? (\n    <a {...attributes} href={item.url} target=\"_blank\" rel=\"noopener noreferrer\">\n      {children}\n      <NewTabHint />\n    </a>\n  ) : (\n    // Slot passes DOM props; Inertia's Link redefines a few event names, so pass them through untyped.\n    <Link\n      {...(attributes as Record<string, unknown>)}\n      href={item.url ?? '#'}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n    >\n      {children}\n    </Link>\n  )\n}\n\n/** Child items (any depth) with their own badges, new-tab links and nested children. */\nfunction NavSubItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <SidebarMenuSubItem>\n        <Collapsible defaultOpen={item.active} className=\"group/nav-sub\">\n          <CollapsibleTrigger asChild>\n            <SidebarMenuSubButton asChild isActive={item.active}>\n              <button type=\"button\" {...extraProps(item.extraAttributes, 'w-full')}>\n                {item.icon && <Icon name={item.icon} />}\n                <NavLabel item={item} />\n                <NavBadge item={item} />\n                <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/nav-sub:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-sub:rotate-90\" />\n              </button>\n            </SidebarMenuSubButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </Collapsible>\n      </SidebarMenuSubItem>\n    )\n  }\n\n  return (\n    <SidebarMenuSubItem>\n      <SidebarMenuSubButton asChild isActive={item.active}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuSubButton>\n    </SidebarMenuSubItem>\n  )\n}\n\nfunction NavItem({ item }: { item: NavigationItemSchema }) {\n  if (item.children && item.children.length > 0) {\n    return (\n      <Collapsible asChild defaultOpen={item.active} className=\"group/collapsible\">\n        <SidebarMenuItem>\n          <CollapsibleTrigger asChild>\n            <SidebarMenuButton\n              tooltip={navigationItemText(item)}\n              isActive={item.active}\n              {...extraProps(item.extraAttributes)}\n            >\n              {item.icon && <Icon name={item.icon} />}\n              <NavLabel item={item} />\n              <NavBadge item={item} />\n              <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => (\n                <NavSubItem key={child.label} item={child} />\n              ))}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    )\n  }\n\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton asChild isActive={item.active} tooltip={navigationItemText(item)}>\n        <NavLink item={item}>\n          {item.icon && <Icon name={item.icon} />}\n          <NavLabel item={item} />\n          <NavBadge item={item} />\n        </NavLink>\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  )\n}\n\n/** A group's items in its flyout menu, children indented under their parent. */\nfunction FlyoutItems({ items }: { items: NavigationItemSchema[] }) {\n  return flattenNavigationItems(items).map(({ item, depth }, index) => (\n    <DropdownMenuItem\n      key={`${depth}-${item.label}-${index}`}\n      asChild\n      data-active={item.active ? 'true' : undefined}\n    >\n      <NavLink\n        item={item}\n        aria-current={item.active ? 'page' : undefined}\n        className={cn(\n          'data-[active=true]:bg-accent data-[active=true]:font-medium',\n          depth === 1 && 'ps-6',\n          depth > 1 && 'ps-9',\n        )}\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"truncate\" />\n        <NavBadge item={item} />\n      </NavLink>\n    </DropdownMenuItem>\n  ))\n}\n\n/**\n * In the icon-only (collapsed) sidebar, a group with an icon is one button that opens its\n * items in a flyout menu, like Filament. Hidden while the sidebar is expanded.\n */\nfunction NavGroupFlyout({ group }: { group: NavigationGroupSchema }) {\n  const direction = useDirection()\n  const active = hasActiveNavigationItem(group.items)\n\n  return (\n    <SidebarMenu className=\"hidden group-data-[collapsible=icon]:flex\" data-nav-flyout=\"\">\n      <SidebarMenuItem>\n        <DropdownMenu dir={direction}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton isActive={active}>\n              <Icon name={group.icon!} />\n              <span>{group.label}</span>\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            side={direction === 'rtl' ? 'left' : 'right'}\n            align=\"start\"\n            className=\"min-w-56\"\n          >\n            <DropdownMenuLabel>{group.label}</DropdownMenuLabel>\n            <FlyoutItems items={group.items} />\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction NavGroup({ group }: { group: NavigationGroupSchema }) {\n  // `NavigationGroup::extraSidebarAttributes()`; `class` is merged with the group's own.\n  const attributes = extraProps(group.extraSidebarAttributes)\n  // A labelled group with an icon collapses into a flyout in the icon-only sidebar.\n  const flyout = Boolean(group.label && group.icon)\n  const content = (\n    <SidebarGroupContent className={cn(flyout && 'group-data-[collapsible=icon]:hidden')}>\n      <SidebarMenu>\n        {group.items.map((item) => (\n          <NavItem key={item.label} item={item} />\n        ))}\n      </SidebarMenu>\n    </SidebarGroupContent>\n  )\n  const flyoutMenu = flyout ? <NavGroupFlyout group={group} /> : null\n\n  if (!group.label) {\n    return <SidebarGroup {...attributes}>{content}</SidebarGroup>\n  }\n\n  if (!group.collapsible) {\n    return (\n      <SidebarGroup {...attributes}>\n        <SidebarGroupLabel>\n          {group.icon && <Icon name={group.icon} className=\"me-1.5\" />}\n          {group.label}\n        </SidebarGroupLabel>\n        {content}\n        {flyoutMenu}\n      </SidebarGroup>\n    )\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={!group.collapsed || group.items.some((item) => item.active)}\n      className=\"group/nav-group\"\n    >\n      <SidebarGroup {...attributes}>\n        <CollapsibleTrigger asChild>\n          <SidebarGroupLabel\n            asChild\n            className=\"hover:bg-sidebar-accent w-full cursor-pointer justify-between\"\n          >\n            <button type=\"button\">\n              <span className=\"flex items-center gap-1.5\">\n                {group.icon && <Icon name={group.icon} />}\n                {group.label}\n              </span>\n              <Icon\n                name=\"alfakit::panels.sidebar.group.collapse-button\"\n                fallback={ChevronRightIcon}\n                className=\"size-3.5 transition-transform group-data-[state=open]/nav-group:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]/nav-group:rotate-90\"\n              />\n            </button>\n          </SidebarGroupLabel>\n        </CollapsibleTrigger>\n        <CollapsibleContent>{content}</CollapsibleContent>\n        {flyoutMenu}\n      </SidebarGroup>\n    </Collapsible>\n  )\n}\n\nexport function AppSidebar() {\n  const panel = usePanel()\n  const direction = useDirection()\n  const t = useT()\n\n  return (\n    <Sidebar\n      side={direction === 'rtl' ? 'right' : 'left'}\n      collapsible={\n        panel.theme?.design?.layout === 'rail'\n          ? 'icon'\n          : panel.sidebarFullyCollapsibleOnDesktop\n            ? 'offcanvas'\n            : panel.sidebarCollapsibleOnDesktop\n              ? 'icon'\n              : 'none'\n      }\n      variant={panel.theme?.sidebar === 'flush' ? 'sidebar' : (panel.theme?.sidebar ?? 'inset')}\n    >\n      <SidebarHeader>\n        <Slot name=\"sidebar.start\" />\n        <Slot name=\"sidebar.logo.before\" />\n        <SidebarMenu>\n          <SidebarMenuItem>\n            {panel.tenancy?.current ? (\n              <>\n                <Slot name=\"tenant-menu.before\" />\n                <TenantMenu />\n                <Slot name=\"tenant-menu.after\" />\n              </>\n            ) : (\n              <SidebarMenuButton size=\"lg\" asChild>\n                <div>\n                  <Brand />\n                </div>\n              </SidebarMenuButton>\n            )}\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <Slot name=\"sidebar.logo.after\" />\n        {/* `databaseNotifications(position: 'sidebar')` or `topbar(false)`. */}\n        {panel.databaseNotifications?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <NotificationsMenu variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        {/* `globalSearch(position: GlobalSearchPosition::Sidebar)` or `topbar(false)`. */}\n        {panel.globalSearch?.position === 'sidebar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <GlobalSearch variant=\"sidebar\" />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.header\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <Slot name=\"sidebar.nav.start\" />\n        <nav aria-label={t('sidebar', {}, 'Sidebar')} className=\"contents\">\n          {panel.navigation.map((group, index) => (\n            <NavGroup key={group.label ?? `group-${index}`} group={group} />\n          ))}\n        </nav>\n        <Slot name=\"sidebar.nav.end\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <Slot name=\"sidebar.footer\" />\n        {/* `userMenu(position: UserMenuPosition::Topbar)` shows it in the top bar instead. */}\n        {panel.userMenu?.position !== 'topbar' && (\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <UserMenu />\n            </SidebarMenuItem>\n          </SidebarMenu>\n        )}\n        <Slot name=\"sidebar.end\" />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n"],"mappings":"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"}

package/dist/components/panel/bottom-nav.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/panel/bottom-nav.d.ts
+/**
+ * The mobile preset's bottom navigation bar (`Panel::mobile()`): the top-level items, with
+ * the rest behind a "More" button that opens a sheet. Hidden from `md` up; replace it
+ * everywhere with `createAlfakit({ components: { 'panel:bottom-nav': … } })`.
+ */
+export declare function BottomNav(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=bottom-nav.d.ts.map

package/dist/components/panel/bottom-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-nav.d.ts","names":[],"sources":["../../../src/components/panel/bottom-nav.tsx"],"mappings":";;;;;;wBAgEgB,6BAAS,IAAA"}

package/dist/components/panel/bottom-nav.js

@@ -0,0 +1,100 @@
+import { usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { NavLabel } from "./nav-label.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { PREFETCH_CACHE_FOR, bottomNavigationItems, isNavigationItemActive, navigationItemUrl } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+//#region src/components/panel/bottom-nav.tsx
+function BottomNavLink({ item, onNavigate }) {
+	const active = isNavigationItemActive(item);
+	const url = navigationItemUrl(item) ?? "#";
+	if (item.openInNewTab) return /* @__PURE__ */ jsxs("a", {
+		...extraProps(item.extraAttributes, "min-w-0"),
+		href: url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"data-slot": "bottom-nav-item",
+		children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, {
+			item,
+			className: "max-w-full truncate"
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Link, {
+		...extraProps(item.extraAttributes, "min-w-0"),
+		href: url,
+		prefetch: true,
+		cacheFor: PREFETCH_CACHE_FOR,
+		"data-slot": "bottom-nav-item",
+		"data-active": active ? "true" : void 0,
+		"aria-current": active ? "page" : void 0,
+		onClick: onNavigate,
+		children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, {
+			item,
+			className: "max-w-full truncate"
+		})]
+	});
+}
+/**
+* The mobile preset's bottom navigation bar (`Panel::mobile()`): the top-level items, with
+* the rest behind a "More" button that opens a sheet. Hidden from `md` up; replace it
+* everywhere with `createAlfakit({ components: { 'panel:bottom-nav': … } })`.
+*/
+function BottomNav() {
+	const panel = usePanel();
+	const t = useT();
+	const [open, setOpen] = useState(false);
+	const { primary, overflow } = bottomNavigationItems(panel.navigation);
+	if (primary.length === 0 && overflow.length === 0) return null;
+	const overflowActive = overflow.some(isNavigationItemActive);
+	return /* @__PURE__ */ jsxs("nav", {
+		"data-slot": "bottom-nav",
+		"aria-label": t("navigation", {}, "Navigation"),
+		className: "md:hidden",
+		children: [primary.map((item) => /* @__PURE__ */ jsx(BottomNavLink, { item }, item.label)), overflow.length > 0 && /* @__PURE__ */ jsxs(Sheet, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-slot": "bottom-nav-item",
+				"data-active": overflowActive ? "true" : void 0,
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				className: "min-w-0 bg-transparent",
+				onClick: () => setOpen(true),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.topbar.open-sidebar-button",
+					fallback: MenuIcon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "max-w-full truncate",
+					children: t("more", {}, "More")
+				})]
+			}), /* @__PURE__ */ jsxs(SheetContent, {
+				side: "bottom",
+				className: "max-h-[80dvh] overflow-y-auto rounded-t-xl p-0",
+				children: [/* @__PURE__ */ jsx(SheetHeader, {
+					className: "border-b",
+					children: /* @__PURE__ */ jsx(SheetTitle, { children: t("more", {}, "More") })
+				}), /* @__PURE__ */ jsx("nav", {
+					"aria-label": t("navigation", {}, "Navigation"),
+					className: "flex flex-col gap-1 p-3 text-sm",
+					children: overflow.flatMap((item) => [item, ...item.children ?? []]).map((item) => /* @__PURE__ */ jsxs(Link, {
+						href: navigationItemUrl(item) ?? "#",
+						onClick: () => setOpen(false),
+						"data-active": isNavigationItemActive(item) ? "true" : void 0,
+						className: cn("hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4"),
+						children: [item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }), /* @__PURE__ */ jsx(NavLabel, { item })]
+					}, item.label))
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { BottomNav };
+
+//# sourceMappingURL=bottom-nav.js.map

package/dist/components/panel/bottom-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-nav.js","names":[],"sources":["../../../src/components/panel/bottom-nav.tsx"],"sourcesContent":["import {\n  PREFETCH_CACHE_FOR,\n  bottomNavigationItems,\n  isNavigationItemActive,\n  navigationItemUrl,\n  type NavigationItemSchema,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { MenuIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet'\nimport { NavLabel } from './nav-label'\n\nfunction BottomNavLink({\n  item,\n  onNavigate,\n}: {\n  item: NavigationItemSchema\n  onNavigate?: () => void\n}) {\n  const active = isNavigationItemActive(item)\n  const url = navigationItemUrl(item) ?? '#'\n\n  if (item.openInNewTab) {\n    return (\n      <a\n        {...extraProps(item.extraAttributes, 'min-w-0')}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        data-slot=\"bottom-nav-item\"\n      >\n        {item.icon && <Icon name={item.icon} />}\n        <NavLabel item={item} className=\"max-w-full truncate\" />\n      </a>\n    )\n  }\n\n  return (\n    <Link\n      {...extraProps(item.extraAttributes, 'min-w-0')}\n      href={url}\n      prefetch\n      cacheFor={PREFETCH_CACHE_FOR}\n      data-slot=\"bottom-nav-item\"\n      data-active={active ? 'true' : undefined}\n      aria-current={active ? 'page' : undefined}\n      onClick={onNavigate}\n    >\n      {item.icon && <Icon name={item.icon} />}\n      <NavLabel item={item} className=\"max-w-full truncate\" />\n    </Link>\n  )\n}\n\n/**\n * The mobile preset's bottom navigation bar (`Panel::mobile()`): the top-level items, with\n * the rest behind a \"More\" button that opens a sheet. Hidden from `md` up; replace it\n * everywhere with `createAlfakit({ components: { 'panel:bottom-nav': … } })`.\n */\nexport function BottomNav() {\n  const panel = usePanel()\n  const t = useT()\n  const [open, setOpen] = useState(false)\n  const { primary, overflow } = bottomNavigationItems(panel.navigation)\n\n  if (primary.length === 0 && overflow.length === 0) {\n    return null\n  }\n\n  const overflowActive = overflow.some(isNavigationItemActive)\n\n  return (\n    <nav\n      data-slot=\"bottom-nav\"\n      aria-label={t('navigation', {}, 'Navigation')}\n      className=\"md:hidden\"\n    >\n      {primary.map((item) => (\n        <BottomNavLink key={item.label} item={item} />\n      ))}\n      {overflow.length > 0 && (\n        <Sheet open={open} onOpenChange={setOpen}>\n          <button\n            type=\"button\"\n            data-slot=\"bottom-nav-item\"\n            data-active={overflowActive ? 'true' : undefined}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            className=\"min-w-0 bg-transparent\"\n            onClick={() => setOpen(true)}\n          >\n            <Icon name=\"alfakit::panels.topbar.open-sidebar-button\" fallback={MenuIcon} />\n            <span className=\"max-w-full truncate\">{t('more', {}, 'More')}</span>\n          </button>\n          <SheetContent side=\"bottom\" className=\"max-h-[80dvh] overflow-y-auto rounded-t-xl p-0\">\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{t('more', {}, 'More')}</SheetTitle>\n            </SheetHeader>\n            <nav\n              aria-label={t('navigation', {}, 'Navigation')}\n              className=\"flex flex-col gap-1 p-3 text-sm\"\n            >\n              {overflow\n                .flatMap((item) => [item, ...(item.children ?? [])])\n                .map((item) => (\n                  <Link\n                    key={item.label}\n                    href={navigationItemUrl(item) ?? '#'}\n                    onClick={() => setOpen(false)}\n                    data-active={isNavigationItemActive(item) ? 'true' : undefined}\n                    className={cn(\n                      'hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4',\n                    )}\n                  >\n                    {item.icon && <Icon name={item.icon} />}\n                    <NavLabel item={item} />\n                  </Link>\n                ))}\n            </nav>\n          </SheetContent>\n        </Sheet>\n      )}\n    </nav>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAS,cAAc,EACrB,MACA,cAIC;CACD,MAAM,SAAS,uBAAuB,IAAI;CAC1C,MAAM,MAAM,kBAAkB,IAAI,KAAK;CAEvC,IAAI,KAAK,cACP,OACE,qBAAC,KAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,QAAO;EACP,KAAI;EACJ,aAAU;EALZ,UAAA,CAOG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACtD;;CAIP,OACE,qBAAC,MAAD;EACE,GAAI,WAAW,KAAK,iBAAiB,SAAS;EAC9C,MAAM;EACN,UAAA;EACA,UAAU;EACV,aAAU;EACV,eAAa,SAAS,SAAS,KAAA;EAC/B,gBAAc,SAAS,SAAS,KAAA;EAChC,SAAS;EARX,UAAA,CAUG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD;GAAgB;GAAM,WAAU;EAAuB,CAAA,CACnD;;AAEV;;;;;;AAOA,SAAgB,YAAY;CAC1B,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,EAAE,SAAS,aAAa,sBAAsB,MAAM,UAAU;CAEpE,IAAI,QAAQ,WAAW,KAAK,SAAS,WAAW,GAC9C,OAAO;CAGT,MAAM,iBAAiB,SAAS,KAAK,sBAAsB;CAE3D,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;EAC5C,WAAU;EAHZ,UAAA,CAKG,QAAQ,KAAK,SACZ,oBAAC,eAAD,EAAsC,KAAO,GAAzB,KAAK,KAAoB,CAC9C,GACA,SAAS,SAAS,KACjB,qBAAC,OAAD;GAAa;GAAM,cAAc;GAAjC,UAAA,CACE,qBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,eAAa,iBAAiB,SAAS,KAAA;IACvC,iBAAc;IACd,iBAAe;IACf,WAAU;IACV,eAAe,QAAQ,IAAI;IAP7B,UAAA,CASE,oBAAC,MAAD;KAAM,MAAK;KAA6C,UAAU;IAAW,CAAA,GAC7E,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA,EAAE,QAAQ,CAAC,GAAG,MAAM;IAAQ,CAAA,CAC7D;GACR,CAAA,GAAA,qBAAC,cAAD;IAAc,MAAK;IAAS,WAAU;IAAtC,UAAA,CACE,oBAAC,aAAD;KAAa,WAAU;KACrB,UAAA,oBAAC,YAAD,EAAA,UAAa,EAAE,QAAQ,CAAC,GAAG,MAAM,EAAc,CAAA;IACpC,CAAA,GACb,oBAAC,OAAD;KACE,cAAY,EAAE,cAAc,CAAC,GAAG,YAAY;KAC5C,WAAU;KAET,UAAA,SACE,SAAS,SAAS,CAAC,MAAM,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,CACnD,KAAK,SACJ,qBAAC,MAAD;MAEE,MAAM,kBAAkB,IAAI,KAAK;MACjC,eAAe,QAAQ,KAAK;MAC5B,eAAa,uBAAuB,IAAI,IAAI,SAAS,KAAA;MACrD,WAAW,GACT,0HACF;MAPF,UAAA,CASG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACtC,oBAAC,UAAD,EAAgB,KAAO,CAAA,CACnB;KAVC,GAAA,KAAK,KAUN,CACP;IACA,CAAA,CACO;GACT,CAAA,CAAA;EAEN,CAAA,CAAA;;AAET"}

package/dist/components/panel/debug-panel-slot.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/panel/debug-panel-slot.d.ts
+/**
+ * Where the top bars put the debug panel: nothing unless the page carries `alfakitDebug`,
+ * otherwise the registered `panel:debug-panel` component or the built-in drawer.
+ */
+export declare function DebugPanelSlot(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+//# sourceMappingURL=debug-panel-slot.d.ts.map

package/dist/components/panel/debug-panel-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-panel-slot.d.ts","names":[],"sources":["../../../src/components/panel/debug-panel-slot.tsx"],"mappings":";;;;;wBAegB,kCAAc,2CAAA"}

package/dist/components/panel/debug-panel-slot.js

@@ -0,0 +1,19 @@
+import { useAlfakitProps, useOptionalRegistry } from "../../context.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { createElement } from "react";
+//#region src/components/panel/debug-panel-slot.tsx
+const DebugPanel = lazyComponent(() => import("./debug-panel.js").then((module) => module.DebugPanel), () => null);
+/**
+* Where the top bars put the debug panel: nothing unless the page carries `alfakitDebug`,
+* otherwise the registered `panel:debug-panel` component or the built-in drawer.
+*/
+function DebugPanelSlot() {
+	const props = useAlfakitProps();
+	const registry = useOptionalRegistry();
+	if (!props.alfakitDebug) return null;
+	return createElement(registry?.resolve("panel:debug-panel") ?? DebugPanel);
+}
+//#endregion
+export { DebugPanelSlot };
+
+//# sourceMappingURL=debug-panel-slot.js.map

package/dist/components/panel/debug-panel-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-panel-slot.js","names":[],"sources":["../../../src/components/panel/debug-panel-slot.tsx"],"sourcesContent":["import { createElement } from 'react'\nimport { useAlfakitProps, useOptionalRegistry } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\n\n// The drawer's code loads only on pages that carry `alfakitDebug` (`Panel::debugPanel()`\n// with `app.debug` on), never with the panel's entry.\nconst DebugPanel = lazyComponent<object>(\n  () => import('./debug-panel').then((module) => module.DebugPanel),\n  () => null,\n)\n\n/**\n * Where the top bars put the debug panel: nothing unless the page carries `alfakitDebug`,\n * otherwise the registered `panel:debug-panel` component or the built-in drawer.\n */\nexport function DebugPanelSlot() {\n  const props = useAlfakitProps()\n  const registry = useOptionalRegistry()\n\n  if (!props.alfakitDebug) {\n    return null\n  }\n\n  return createElement(registry?.resolve('panel:debug-panel') ?? DebugPanel)\n}\n"],"mappings":";;;;AAMA,MAAM,aAAa,oBACX,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,UAAU,SAC1D,IACR;;;;;AAMA,SAAgB,iBAAiB;CAC/B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,WAAW,oBAAoB;CAErC,IAAI,CAAC,MAAM,cACT,OAAO;CAGT,OAAO,cAAc,UAAU,QAAQ,mBAAmB,KAAK,UAAU;AAC3E"}

package/dist/components/panel/debug-panel.d.ts

@@ -0,0 +1,18 @@
+import { DebugPanelSlot } from "./debug-panel-slot.js";
+import { DebugNode } from "@alfakit/core";
+//#region src/components/panel/debug-panel.d.ts
+/**
+ * The developer debug panel: a top bar toggle that opens a drawer with the page's resolved
+ * schema tree (visibility and authorisation per component, closures evaluated), the live
+ * form state, the internal requests captured by `requestJson()` and timings. Rendered only
+ * when the page carries the `alfakitDebug` prop, which PHP adds while `Panel::debugPanel()`
+ * is active and `app.debug` is on. Replace it with `components: { 'panel:debug-panel': … }`.
+ */
+export declare function DebugPanel(): import("react").JSX.Element | null;
+export declare function DebugTreeNode({ node, depth }: {
+  node: DebugNode;
+  depth: number;
+}): import("react").JSX.Element;
+//#endregion
+export { DebugPanelSlot };
+//# sourceMappingURL=debug-panel.d.ts.map

package/dist/components/panel/debug-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-panel.d.ts","names":[],"sources":["../../../src/components/panel/debug-panel.tsx"],"mappings":";;;;;;;;;;wBA8BgB,8BAAU,IAAA;wBA2NV,gBAAgB,MAAM;EAAW,MAAM;EAAW;oBAAe,IAAA"}