@alfakit/react 0.0.0-stage → 0.1.0

package/dist/layouts/app-layout.d.ts

@@ -0,0 +1,11 @@
+import { BreadcrumbSchema, Width } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/layouts/app-layout.d.ts
+export interface AppLayoutProps {
+  children: ReactNode;
+  breadcrumbs?: BreadcrumbSchema[];
+  maxContentWidth?: Width | string;
+}
+export declare function AppLayout({ children, breadcrumbs, maxContentWidth }: AppLayoutProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=app-layout.d.ts.map

package/dist/layouts/app-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-layout.d.ts","names":[],"sources":["../../src/layouts/app-layout.tsx"],"mappings":";;;iBAgDiB;EACf,UAAU;EACV,cAAc;EACd,kBAAkB;;wBAuBJ,YAAY,UAAU,aAAa,mBAAmB,iCAAc,IAAA"}

package/dist/layouts/app-layout.js

@@ -0,0 +1,104 @@
+import { useAlfakitProps, useRegistry } from "../context.js";
+import { cn } from "../lib/utils.js";
+import { Slot } from "../components/panel/slot.js";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "../components/ui/sidebar.js";
+import { TopbarLocaleSwitcher } from "../components/panel/locale-switcher.js";
+import { AppSidebar } from "../components/panel/app-sidebar.js";
+import { BottomNav } from "../components/panel/bottom-nav.js";
+import { Topbar } from "../components/panel/topbar.js";
+import { TopNavLayout } from "./top-nav-layout.js";
+import { hasMobilePreset, hasTopbar, sidebarDefaultOpen, sidebarWidthStyle } from "@alfakit/core";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layouts/app-layout.tsx
+const MAX_WIDTHS = {
+	"3xs": "max-w-3xs",
+	"2xs": "max-w-2xs",
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	"2xl": "max-w-2xl",
+	"3xl": "max-w-3xl",
+	"4xl": "max-w-4xl",
+	"5xl": "max-w-5xl",
+	"6xl": "max-w-6xl",
+	"7xl": "max-w-7xl",
+	none: "max-w-none",
+	min: "max-w-min",
+	max: "max-w-max",
+	fit: "max-w-fit",
+	prose: "max-w-prose",
+	container: "container",
+	"screen-sm": "max-w-(--breakpoint-sm)",
+	"screen-md": "max-w-(--breakpoint-md)",
+	"screen-lg": "max-w-(--breakpoint-lg)",
+	"screen-xl": "max-w-(--breakpoint-xl)",
+	"screen-2xl": "max-w-(--breakpoint-2xl)",
+	full: "max-w-full",
+	screen: "max-w-screen"
+};
+/** Sidebar + topbar shell used by every authenticated page. */
+/**
+* Stands in for the top bar on phones when the panel has `topbar(false)`: the sidebar
+* toggle has to stay reachable.
+*/
+function MobileTopbar() {
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "topbar",
+		"data-variant": "mobile",
+		className: "bg-background/80 sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b px-4 backdrop-blur md:hidden",
+		children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ms-1" }), /* @__PURE__ */ jsx("div", {
+			className: "ms-auto flex items-center gap-1",
+			children: /* @__PURE__ */ jsx(TopbarLocaleSwitcher, {})
+		})]
+	});
+}
+function AppLayout({ children, breadcrumbs, maxContentWidth }) {
+	const props = useAlfakitProps();
+	const registry = useRegistry();
+	const layout = props.alfakit.theme?.design?.layout ?? "sidebar";
+	const Sidebar = registry.resolve("panel:sidebar") ?? AppSidebar;
+	const Bar = registry.resolve("panel:topbar") ?? Topbar;
+	const Bottom = registry.resolve("panel:bottom-nav") ?? BottomNav;
+	const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? "7xl";
+	if (layout === "topbar") return /* @__PURE__ */ jsx(TopNavLayout, {
+		breadcrumbs,
+		maxContentWidth,
+		children
+	});
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		defaultOpen: sidebarDefaultOpen(props.alfakitSidebarOpen, layout),
+		style: sidebarWidthStyle(props.alfakit),
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "body.start" }),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.start" }),
+			createElement(Sidebar),
+			/* @__PURE__ */ jsxs(SidebarInset, { children: [
+				/* @__PURE__ */ jsx(Slot, { name: "topbar.before" }),
+				hasTopbar(props.alfakit) ? createElement(Bar, { breadcrumbs }) : /* @__PURE__ */ jsx(MobileTopbar, {}),
+				/* @__PURE__ */ jsx(Slot, { name: "topbar.after" }),
+				/* @__PURE__ */ jsx(Slot, { name: "content.before" }),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "content",
+					className: cn("mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6", MAX_WIDTHS[width] ?? "max-w-7xl"),
+					children: [
+						/* @__PURE__ */ jsx(Slot, { name: "content.start" }),
+						children,
+						/* @__PURE__ */ jsx(Slot, { name: "content.end" })
+					]
+				}),
+				/* @__PURE__ */ jsx(Slot, { name: "content.after" }),
+				/* @__PURE__ */ jsx(Slot, { name: "footer" })
+			] }),
+			hasMobilePreset(props.alfakit) && createElement(Bottom),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.end" }),
+			/* @__PURE__ */ jsx(Slot, { name: "body.end" })
+		]
+	});
+}
+//#endregion
+export { AppLayout, MAX_WIDTHS, MobileTopbar };
+
+//# sourceMappingURL=app-layout.js.map

package/dist/layouts/app-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-layout.js","names":[],"sources":["../../src/layouts/app-layout.tsx"],"sourcesContent":["import {\n  hasMobilePreset,\n  hasTopbar,\n  sidebarDefaultOpen,\n  sidebarWidthStyle,\n  type BreadcrumbSchema,\n  type Width,\n} from '@alfakit/core'\nimport { createElement, type CSSProperties, type ReactNode } from 'react'\nimport { AppSidebar } from '../components/panel/app-sidebar'\nimport { BottomNav } from '../components/panel/bottom-nav'\nimport { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'\nimport { Slot } from '../components/panel/slot'\nimport { Topbar } from '../components/panel/topbar'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '../components/ui/sidebar'\nimport { useAlfakitProps, useRegistry } from '../context'\nimport { cn } from '../lib/utils'\nimport { TopNavLayout } from './top-nav-layout'\n\nexport const MAX_WIDTHS: Record<string, string> = {\n  '3xs': 'max-w-3xs',\n  '2xs': 'max-w-2xs',\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  '3xl': 'max-w-3xl',\n  '4xl': 'max-w-4xl',\n  '5xl': 'max-w-5xl',\n  '6xl': 'max-w-6xl',\n  '7xl': 'max-w-7xl',\n  none: 'max-w-none',\n  min: 'max-w-min',\n  max: 'max-w-max',\n  fit: 'max-w-fit',\n  prose: 'max-w-prose',\n  container: 'container',\n  'screen-sm': 'max-w-(--breakpoint-sm)',\n  'screen-md': 'max-w-(--breakpoint-md)',\n  'screen-lg': 'max-w-(--breakpoint-lg)',\n  'screen-xl': 'max-w-(--breakpoint-xl)',\n  'screen-2xl': 'max-w-(--breakpoint-2xl)',\n  full: 'max-w-full',\n  screen: 'max-w-screen',\n}\n\nexport interface AppLayoutProps {\n  children: ReactNode\n  breadcrumbs?: BreadcrumbSchema[]\n  maxContentWidth?: Width | string\n}\n\n/** Sidebar + topbar shell used by every authenticated page. */\n/**\n * Stands in for the top bar on phones when the panel has `topbar(false)`: the sidebar\n * toggle has to stay reachable.\n */\nexport function MobileTopbar() {\n  return (\n    <header\n      data-slot=\"topbar\"\n      data-variant=\"mobile\"\n      className=\"bg-background/80 sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b px-4 backdrop-blur md:hidden\"\n    >\n      <SidebarTrigger className=\"-ms-1\" />\n      <div className=\"ms-auto flex items-center gap-1\">\n        <TopbarLocaleSwitcher />\n      </div>\n    </header>\n  )\n}\n\nexport function AppLayout({ children, breadcrumbs, maxContentWidth }: AppLayoutProps) {\n  const props = useAlfakitProps()\n  const registry = useRegistry()\n  const layout = props.alfakit.theme?.design?.layout ?? 'sidebar'\n  // Replace the sidebar or top bar everywhere with createAlfakit({ components: { 'panel:sidebar': … } }).\n  const Sidebar = registry.resolve('panel:sidebar') ?? AppSidebar\n  const Bar = registry.resolve('panel:topbar') ?? Topbar\n  // The mobile preset's bottom bar (`Panel::mobile()`), hidden from `md` up.\n  const Bottom = registry.resolve('panel:bottom-nav') ?? BottomNav\n  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? '7xl'\n\n  if (layout === 'topbar') {\n    return (\n      <TopNavLayout breadcrumbs={breadcrumbs} maxContentWidth={maxContentWidth}>\n        {children}\n      </TopNavLayout>\n    )\n  }\n\n  return (\n    // The rail layout starts as icons only until the user expands it.\n    <SidebarProvider\n      defaultOpen={sidebarDefaultOpen(props.alfakitSidebarOpen, layout)}\n      style={sidebarWidthStyle(props.alfakit) as CSSProperties | undefined}\n    >\n      <Slot name=\"body.start\" />\n      <Slot name=\"layout.start\" />\n      {createElement(Sidebar)}\n      <SidebarInset>\n        <Slot name=\"topbar.before\" />\n        {/* `topbar(false)`: no top bar, except a slim one with the sidebar toggle on phones. */}\n        {hasTopbar(props.alfakit) ? createElement(Bar, { breadcrumbs }) : <MobileTopbar />}\n        <Slot name=\"topbar.after\" />\n        <Slot name=\"content.before\" />\n        <div\n          data-slot=\"content\"\n          className={cn(\n            'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',\n            MAX_WIDTHS[width] ?? 'max-w-7xl',\n          )}\n        >\n          <Slot name=\"content.start\" />\n          {children}\n          <Slot name=\"content.end\" />\n        </div>\n        <Slot name=\"content.after\" />\n        <Slot name=\"footer\" />\n      </SidebarInset>\n      {hasMobilePreset(props.alfakit) && createElement(Bottom)}\n      <Slot name=\"layout.end\" />\n      <Slot name=\"body.end\" />\n    </SidebarProvider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAa,aAAqC;CAChD,OAAO;CACP,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,OAAO;CACP,WAAW;CACX,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,cAAc;CACd,MAAM;CACN,QAAQ;AACV;;;;;;AAaA,SAAgB,eAAe;CAC7B,OACE,qBAAC,UAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAU;EAHZ,UAAA,CAKE,oBAAC,gBAAD,EAAgB,WAAU,QAAS,CAAA,GACnC,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,sBAAD,CAAuB,CAAA;EACpB,CAAA,CACC;;AAEZ;AAEA,SAAgB,UAAU,EAAE,UAAU,aAAa,mBAAmC;CACpF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,MAAM,QAAQ,OAAO,QAAQ,UAAU;CAEtD,MAAM,UAAU,SAAS,QAAQ,eAAe,KAAK;CACrD,MAAM,MAAM,SAAS,QAAQ,cAAc,KAAK;CAEhD,MAAM,SAAS,SAAS,QAAQ,kBAAkB,KAAK;CACvD,MAAM,QAAQ,mBAAmB,MAAM,QAAQ,mBAAmB;CAElE,IAAI,WAAW,UACb,OACE,oBAAC,cAAD;EAA2B;EAA8B;EACtD;CACW,CAAA;CAIlB,OAEE,qBAAC,iBAAD;EACE,aAAa,mBAAmB,MAAM,oBAAoB,MAAM;EAChE,OAAO,kBAAkB,MAAM,OAAO;EAFxC,UAAA;GAIE,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;GACzB,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA;GAC1B,cAAc,OAAO;GACtB,qBAAC,cAAD,EAAA,UAAA;IACE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;IAE3B,UAAU,MAAM,OAAO,IAAI,cAAc,KAAK,EAAE,YAAY,CAAC,IAAI,oBAAC,cAAD,CAAe,CAAA;IACjF,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA;IAC3B,oBAAC,MAAD,EAAM,MAAK,iBAAkB,CAAA;IAC7B,qBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,gEACA,WAAW,UAAU,WACvB;KALF,UAAA;MAOE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;MAC3B;MACD,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA;KACvB;;IACL,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;IAC5B,oBAAC,MAAD,EAAM,MAAK,SAAU,CAAA;GACT,EAAA,CAAA;GACb,gBAAgB,MAAM,OAAO,KAAK,cAAc,MAAM;GACvD,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;GACzB,oBAAC,MAAD,EAAM,MAAK,WAAY,CAAA;EACR;;AAErB"}

package/dist/layouts/auth-layout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+//#region src/layouts/auth-layout.d.ts
+export interface AuthLayoutProps {
+  children: ReactNode;
+  heading?: string;
+  subheading?: string;
+}
+/** Centered card used by login, registration, password reset and simple profile pages. */
+export declare function AuthLayout({ children, heading, subheading }: AuthLayoutProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=auth-layout.d.ts.map

package/dist/layouts/auth-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-layout.d.ts","names":[],"sources":["../../src/layouts/auth-layout.tsx"],"mappings":";;iBAUiB;EACf,UAAU;EACV;EACA;;;wBAIc,aAAa,UAAU,SAAS,cAAc,kCAAe,IAAA"}

package/dist/layouts/auth-layout.js

@@ -0,0 +1,65 @@
+import { usePanel } from "../context.js";
+import { cn } from "../lib/utils.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Slot } from "../components/panel/slot.js";
+import { LocaleSwitcher } from "../components/panel/locale-switcher.js";
+import { Brand } from "../components/panel/app-sidebar.js";
+import { ThemeToggle } from "../components/panel/theme-toggle.js";
+import { MAX_WIDTHS } from "./app-layout.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layouts/auth-layout.tsx
+/** Centered card used by login, registration, password reset and simple profile pages. */
+function AuthLayout({ children, heading, subheading }) {
+	const width = usePanel()?.simplePageMaxContentWidth ?? "md";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/40 flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10",
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "simple.layout.start" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute end-4 top-4 flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(LocaleSwitcher, {}), /* @__PURE__ */ jsx(ThemeToggle, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex w-full flex-col gap-6", MAX_WIDTHS[width] ?? "max-w-md"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex justify-center",
+						children: /* @__PURE__ */ jsx(Brand, {})
+					}),
+					/* @__PURE__ */ jsx(Slot, { name: "auth.before" }),
+					/* @__PURE__ */ jsxs(Card, { children: [
+						/* @__PURE__ */ jsx(Slot, { name: "simple.page.start" }),
+						(heading || subheading) && /* @__PURE__ */ jsxs(CardHeader, {
+							className: "text-center",
+							children: [heading && /* @__PURE__ */ jsx(CardTitle, {
+								role: "heading",
+								"aria-level": 1,
+								className: "text-xl",
+								children: heading
+							}), subheading && /* @__PURE__ */ jsx(CardDescription, { children: subheading })]
+						}),
+						/* @__PURE__ */ jsxs(CardContent, { children: [
+							/* @__PURE__ */ jsx(Slot, { name: "auth.login.form.before" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.register.form.before" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.password-reset.request.form.before" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.password-reset.reset.form.before" }),
+							children,
+							/* @__PURE__ */ jsx(Slot, { name: "auth.login.form.after" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.register.form.after" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.password-reset.request.form.after" }),
+							/* @__PURE__ */ jsx(Slot, { name: "auth.password-reset.reset.form.after" })
+						] }),
+						/* @__PURE__ */ jsx(Slot, { name: "simple.page.end" })
+					] }),
+					/* @__PURE__ */ jsx(Slot, { name: "auth.after" }),
+					/* @__PURE__ */ jsx(Slot, { name: "footer" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "simple.layout.end" })
+		]
+	});
+}
+//#endregion
+export { AuthLayout };
+
+//# sourceMappingURL=auth-layout.js.map

package/dist/layouts/auth-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-layout.js","names":[],"sources":["../../src/layouts/auth-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { Brand } from '../components/panel/app-sidebar'\nimport { LocaleSwitcher } from '../components/panel/locale-switcher'\nimport { Slot } from '../components/panel/slot'\nimport { ThemeToggle } from '../components/panel/theme-toggle'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'\nimport { usePanel } from '../context'\nimport { cn } from '../lib/utils'\nimport { MAX_WIDTHS } from './app-layout'\n\nexport interface AuthLayoutProps {\n  children: ReactNode\n  heading?: string\n  subheading?: string\n}\n\n/** Centered card used by login, registration, password reset and simple profile pages. */\nexport function AuthLayout({ children, heading, subheading }: AuthLayoutProps) {\n  // `simplePageMaxContentWidth()` on the panel; `md` by default.\n  const width = usePanel()?.simplePageMaxContentWidth ?? 'md'\n\n  return (\n    <div className=\"bg-muted/40 flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <Slot name=\"simple.layout.start\" />\n      <div className=\"absolute end-4 top-4 flex items-center gap-1\">\n        <LocaleSwitcher />\n        <ThemeToggle />\n      </div>\n      <div className={cn('flex w-full flex-col gap-6', MAX_WIDTHS[width] ?? 'max-w-md')}>\n        <div className=\"flex justify-center\">\n          <Brand />\n        </div>\n        <Slot name=\"auth.before\" />\n        <Card>\n          <Slot name=\"simple.page.start\" />\n          {(heading || subheading) && (\n            <CardHeader className=\"text-center\">\n              {heading && (\n                <CardTitle role=\"heading\" aria-level={1} className=\"text-xl\">\n                  {heading}\n                </CardTitle>\n              )}\n              {subheading && <CardDescription>{subheading}</CardDescription>}\n            </CardHeader>\n          )}\n          <CardContent>\n            {/* The server sends each form's slots on its own page only (Slot::pageTypes()). */}\n            <Slot name=\"auth.login.form.before\" />\n            <Slot name=\"auth.register.form.before\" />\n            <Slot name=\"auth.password-reset.request.form.before\" />\n            <Slot name=\"auth.password-reset.reset.form.before\" />\n            {children}\n            <Slot name=\"auth.login.form.after\" />\n            <Slot name=\"auth.register.form.after\" />\n            <Slot name=\"auth.password-reset.request.form.after\" />\n            <Slot name=\"auth.password-reset.reset.form.after\" />\n          </CardContent>\n          <Slot name=\"simple.page.end\" />\n        </Card>\n        <Slot name=\"auth.after\" />\n        <Slot name=\"footer\" />\n      </div>\n      <Slot name=\"simple.layout.end\" />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,WAAW,EAAE,UAAU,SAAS,cAA+B;CAE7E,MAAM,QAAQ,SAAS,CAAC,EAAE,6BAA6B;CAEvD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,MAAD,EAAM,MAAK,sBAAuB,CAAA;GAClC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,aAAD,CAAc,CAAA,CACX;;GACL,qBAAC,OAAD;IAAK,WAAW,GAAG,8BAA8B,WAAW,UAAU,UAAU;IAAhF,UAAA;KACE,oBAAC,OAAD;MAAK,WAAU;MACb,UAAA,oBAAC,OAAD,CAAQ,CAAA;KACL,CAAA;KACL,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA;KAC1B,qBAAC,MAAD,EAAA,UAAA;MACE,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA;OAC9B,WAAW,eACX,qBAAC,YAAD;OAAY,WAAU;OAAtB,UAAA,CACG,WACC,oBAAC,WAAD;QAAW,MAAK;QAAU,cAAY;QAAG,WAAU;QAChD,UAAA;OACQ,CAAA,GAEZ,cAAc,oBAAC,iBAAD,EAAA,UAAkB,WAA4B,CAAA,CACnD;;MAEd,qBAAC,aAAD,EAAA,UAAA;OAEE,oBAAC,MAAD,EAAM,MAAK,yBAA0B,CAAA;OACrC,oBAAC,MAAD,EAAM,MAAK,4BAA6B,CAAA;OACxC,oBAAC,MAAD,EAAM,MAAK,0CAA2C,CAAA;OACtD,oBAAC,MAAD,EAAM,MAAK,wCAAyC,CAAA;OACnD;OACD,oBAAC,MAAD,EAAM,MAAK,wBAAyB,CAAA;OACpC,oBAAC,MAAD,EAAM,MAAK,2BAA4B,CAAA;OACvC,oBAAC,MAAD,EAAM,MAAK,yCAA0C,CAAA;OACrD,oBAAC,MAAD,EAAM,MAAK,uCAAwC,CAAA;MACxC,EAAA,CAAA;MACb,oBAAC,MAAD,EAAM,MAAK,kBAAmB,CAAA;KAC1B,EAAA,CAAA;KACN,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;KACzB,oBAAC,MAAD,EAAM,MAAK,SAAU,CAAA;IAClB;;GACL,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA;EAC7B;;AAET"}

package/dist/layouts/blank-layout.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/layouts/blank-layout.d.ts
+export declare function BlankLayout({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=blank-layout.d.ts.map

package/dist/layouts/blank-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blank-layout.d.ts","names":[],"sources":["../../src/layouts/blank-layout.tsx"],"mappings":";;wBAEgB,cAAc;EAAc,UAAU;oBAAW,IAAA"}

package/dist/layouts/blank-layout.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/blank-layout.tsx
+function BlankLayout({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-h-svh",
+		children
+	});
+}
+//#endregion
+export { BlankLayout };
+
+//# sourceMappingURL=blank-layout.js.map

package/dist/layouts/blank-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blank-layout.js","names":[],"sources":["../../src/layouts/blank-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport function BlankLayout({ children }: { children: ReactNode }) {\n  return <div className=\"min-h-svh\">{children}</div>\n}\n"],"mappings":";;AAEA,SAAgB,YAAY,EAAE,YAAqC;CACjE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAa;CAAc,CAAA;AACnD"}

package/dist/layouts/fullscreen-layout.d.ts

@@ -0,0 +1,16 @@
+import { PageSchema } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/layouts/fullscreen-layout.d.ts
+export interface FullscreenLayoutProps {
+  children: ReactNode;
+  page?: PageSchema;
+}
+/**
+ * `$layout = 'fullscreen'`: the whole viewport for an app screen (point of sale, kiosk,
+ * board). No sidebar or topbar; an optional slim header keeps the brand, the page title,
+ * notifications, the user menu and a way back to the panel. Toasts, modals and the debug
+ * panel work as on every other page. Replace it with `components: { 'layout:fullscreen': … }`.
+ */
+export declare function FullscreenLayout({ children, page }: FullscreenLayoutProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=fullscreen-layout.d.ts.map

package/dist/layouts/fullscreen-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-layout.d.ts","names":[],"sources":["../../src/layouts/fullscreen-layout.tsx"],"mappings":";;;iBAgBiB;EACf,UAAU;EACV,OAAO;;;;;;;;wBASO,mBAAmB,UAAU,QAAQ,wCAAqB,IAAA"}

package/dist/layouts/fullscreen-layout.js

@@ -0,0 +1,107 @@
+import { useT } from "../context.js";
+import { Icon } from "../lib/icons.js";
+import { Button } from "../components/ui/button.js";
+import { Slot } from "../components/panel/slot.js";
+import { NotificationsMenu } from "../components/notifications/notifications-menu.js";
+import { Separator } from "../components/ui/separator.js";
+import { TopbarLocaleSwitcher } from "../components/panel/locale-switcher.js";
+import { UserMenu } from "../components/panel/user-menu.js";
+import { Brand } from "../components/panel/app-sidebar.js";
+import { DebugPanelSlot } from "../components/panel/debug-panel-slot.js";
+import { ThemeToggle } from "../components/panel/theme-toggle.js";
+import { Link } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LogOutIcon } from "lucide-react";
+//#region src/layouts/fullscreen-layout.tsx
+/**
+* `$layout = 'fullscreen'`: the whole viewport for an app screen (point of sale, kiosk,
+* board). No sidebar or topbar; an optional slim header keeps the brand, the page title,
+* notifications, the user menu and a way back to the panel. Toasts, modals and the debug
+* panel work as on every other page. Replace it with `components: { 'layout:fullscreen': … }`.
+*/
+function FullscreenLayout({ children, page }) {
+	const t = useT();
+	const header = page?.fullscreen?.header !== false;
+	const exitUrl = page?.fullscreen?.exitUrl;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-layout": "fullscreen",
+		className: "bg-background flex h-svh min-h-0 flex-col",
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "body.start" }),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.start" }),
+			header ? /* @__PURE__ */ jsxs("header", {
+				"data-slot": "topbar",
+				"data-variant": "fullscreen",
+				className: "bg-background flex h-12 shrink-0 items-center gap-3 border-b px-3 md:px-4",
+				children: [
+					/* @__PURE__ */ jsx(Slot, { name: "topbar.logo.before" }),
+					/* @__PURE__ */ jsx(Brand, { className: "hidden shrink-0 sm:flex" }),
+					/* @__PURE__ */ jsx(Slot, { name: "topbar.logo.after" }),
+					/* @__PURE__ */ jsx(Separator, {
+						orientation: "vertical",
+						className: "hidden h-4 sm:block"
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "min-w-0 truncate text-sm font-semibold",
+						children: page?.heading ?? page?.title
+					}),
+					/* @__PURE__ */ jsx(Slot, { name: "topbar.start" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ms-auto flex shrink-0 items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Slot, { name: "topbar.end" }),
+							/* @__PURE__ */ jsx(NotificationsMenu, {}),
+							/* @__PURE__ */ jsx(TopbarLocaleSwitcher, {}),
+							/* @__PURE__ */ jsx(ThemeToggle, {}),
+							/* @__PURE__ */ jsx(DebugPanelSlot, {}),
+							/* @__PURE__ */ jsx(UserMenu, { variant: "topbar" }),
+							exitUrl && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Link, {
+									href: exitUrl,
+									"data-slot": "fullscreen-exit",
+									children: [
+										/* @__PURE__ */ jsx(Icon, {
+											name: "alfakit::panels.widgets.account.logout-button",
+											fallback: LogOutIcon,
+											className: "rtl:rotate-180",
+											"aria-hidden": "true"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "hidden sm:inline",
+											children: t("exit_fullscreen", {}, "Exit")
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "sr-only sm:hidden",
+											children: t("exit_fullscreen", {}, "Exit")
+										})
+									]
+								})
+							})
+						]
+					})
+				]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "fixed end-3 bottom-3 z-40",
+				children: /* @__PURE__ */ jsx(DebugPanelSlot, {})
+			}),
+			/* @__PURE__ */ jsxs("main", {
+				"data-slot": "content",
+				className: "flex min-h-0 w-full min-w-0 flex-1 flex-col",
+				children: [
+					/* @__PURE__ */ jsx(Slot, { name: "content.start" }),
+					children,
+					/* @__PURE__ */ jsx(Slot, { name: "content.end" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "layout.end" }),
+			/* @__PURE__ */ jsx(Slot, { name: "body.end" })
+		]
+	});
+}
+//#endregion
+export { FullscreenLayout };
+
+//# sourceMappingURL=fullscreen-layout.js.map

package/dist/layouts/fullscreen-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-layout.js","names":[],"sources":["../../src/layouts/fullscreen-layout.tsx"],"sourcesContent":["import type { PageSchema } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { LogOutIcon } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { NotificationsMenu } from '../components/notifications/notifications-menu'\nimport { Brand } from '../components/panel/app-sidebar'\nimport { DebugPanelSlot } from '../components/panel/debug-panel-slot'\nimport { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'\nimport { Slot } from '../components/panel/slot'\nimport { ThemeToggle } from '../components/panel/theme-toggle'\nimport { UserMenu } from '../components/panel/user-menu'\nimport { Button } from '../components/ui/button'\nimport { Separator } from '../components/ui/separator'\nimport { useT } from '../context'\nimport { Icon } from '../lib/icons'\n\nexport interface FullscreenLayoutProps {\n  children: ReactNode\n  page?: PageSchema\n}\n\n/**\n * `$layout = 'fullscreen'`: the whole viewport for an app screen (point of sale, kiosk,\n * board). No sidebar or topbar; an optional slim header keeps the brand, the page title,\n * notifications, the user menu and a way back to the panel. Toasts, modals and the debug\n * panel work as on every other page. Replace it with `components: { 'layout:fullscreen': … }`.\n */\nexport function FullscreenLayout({ children, page }: FullscreenLayoutProps) {\n  const t = useT()\n  const header = page?.fullscreen?.header !== false\n  const exitUrl = page?.fullscreen?.exitUrl\n\n  return (\n    <div data-layout=\"fullscreen\" className=\"bg-background flex h-svh min-h-0 flex-col\">\n      <Slot name=\"body.start\" />\n      <Slot name=\"layout.start\" />\n      {header ? (\n        <header\n          data-slot=\"topbar\"\n          data-variant=\"fullscreen\"\n          className=\"bg-background flex h-12 shrink-0 items-center gap-3 border-b px-3 md:px-4\"\n        >\n          <Slot name=\"topbar.logo.before\" />\n          <Brand className=\"hidden shrink-0 sm:flex\" />\n          <Slot name=\"topbar.logo.after\" />\n          <Separator orientation=\"vertical\" className=\"hidden h-4 sm:block\" />\n          <h1 className=\"min-w-0 truncate text-sm font-semibold\">{page?.heading ?? page?.title}</h1>\n          <Slot name=\"topbar.start\" />\n          <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n            <Slot name=\"topbar.end\" />\n            <NotificationsMenu />\n            <TopbarLocaleSwitcher />\n            <ThemeToggle />\n            <DebugPanelSlot />\n            <UserMenu variant=\"topbar\" />\n            {exitUrl && (\n              <Button variant=\"ghost\" size=\"sm\" asChild>\n                <Link href={exitUrl} data-slot=\"fullscreen-exit\">\n                  <Icon\n                    name=\"alfakit::panels.widgets.account.logout-button\"\n                    fallback={LogOutIcon}\n                    className=\"rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                  />\n                  <span className=\"hidden sm:inline\">{t('exit_fullscreen', {}, 'Exit')}</span>\n                  <span className=\"sr-only sm:hidden\">{t('exit_fullscreen', {}, 'Exit')}</span>\n                </Link>\n              </Button>\n            )}\n          </div>\n        </header>\n      ) : (\n        <div className=\"fixed end-3 bottom-3 z-40\">\n          <DebugPanelSlot />\n        </div>\n      )}\n      <main data-slot=\"content\" className=\"flex min-h-0 w-full min-w-0 flex-1 flex-col\">\n        <Slot name=\"content.start\" />\n        {children}\n        <Slot name=\"content.end\" />\n      </main>\n      <Slot name=\"layout.end\" />\n      <Slot name=\"body.end\" />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,iBAAiB,EAAE,UAAU,QAA+B;CAC1E,MAAM,IAAI,KAAK;CACf,MAAM,SAAS,MAAM,YAAY,WAAW;CAC5C,MAAM,UAAU,MAAM,YAAY;CAElC,OACE,qBAAC,OAAD;EAAK,eAAY;EAAa,WAAU;EAAxC,UAAA;GACE,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;GACzB,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA;GAC1B,SACC,qBAAC,UAAD;IACE,aAAU;IACV,gBAAa;IACb,WAAU;IAHZ,UAAA;KAKE,oBAAC,MAAD,EAAM,MAAK,qBAAsB,CAAA;KACjC,oBAAC,OAAD,EAAO,WAAU,0BAA2B,CAAA;KAC5C,oBAAC,MAAD,EAAM,MAAK,oBAAqB,CAAA;KAChC,oBAAC,WAAD;MAAW,aAAY;MAAW,WAAU;KAAuB,CAAA;KACnE,oBAAC,MAAD;MAAI,WAAU;MAA0C,UAAA,MAAM,WAAW,MAAM;KAAU,CAAA;KACzF,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA;KAC3B,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;OACzB,oBAAC,mBAAD,CAAoB,CAAA;OACpB,oBAAC,sBAAD,CAAuB,CAAA;OACvB,oBAAC,aAAD,CAAc,CAAA;OACd,oBAAC,gBAAD,CAAiB,CAAA;OACjB,oBAAC,UAAD,EAAU,SAAQ,SAAU,CAAA;OAC3B,WACC,oBAAC,QAAD;QAAQ,SAAQ;QAAQ,MAAK;QAAK,SAAA;QAChC,UAAA,qBAAC,MAAD;SAAM,MAAM;SAAS,aAAU;SAA/B,UAAA;UACE,oBAAC,MAAD;WACE,MAAK;WACL,UAAU;WACV,WAAU;WACV,eAAY;UACb,CAAA;UACD,oBAAC,QAAD;WAAM,WAAU;WAAoB,UAAA,EAAE,mBAAmB,CAAC,GAAG,MAAM;UAAQ,CAAA;UAC3E,oBAAC,QAAD;WAAM,WAAU;WAAqB,UAAA,EAAE,mBAAmB,CAAC,GAAG,MAAM;UAAQ,CAAA;SACxE;;OACA,CAAA;MAEP;;IACC;GAER,CAAA,IAAA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,gBAAD,CAAiB,CAAA;GACd,CAAA;GAEP,qBAAC,QAAD;IAAM,aAAU;IAAU,WAAU;IAApC,UAAA;KACE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;KAC3B;KACD,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA;IACtB;;GACN,oBAAC,MAAD,EAAM,MAAK,aAAc,CAAA;GACzB,oBAAC,MAAD,EAAM,MAAK,WAAY,CAAA;EACpB;;AAET"}

package/dist/layouts/top-nav-layout.d.ts

@@ -0,0 +1,15 @@
+import { BreadcrumbSchema, Width } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/layouts/top-nav-layout.d.ts
+export interface TopNavLayoutProps {
+  children: ReactNode;
+  breadcrumbs?: BreadcrumbSchema[];
+  maxContentWidth?: Width | string;
+}
+/**
+ * Navigation across the top instead of a sidebar (`layout: 'topbar'`). Ungrouped items are
+ * links; labelled groups and items with children open as dropdowns.
+ */
+export declare function TopNavLayout({ children, breadcrumbs, maxContentWidth }: TopNavLayoutProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=top-nav-layout.d.ts.map

package/dist/layouts/top-nav-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-nav-layout.d.ts","names":[],"sources":["../../src/layouts/top-nav-layout.tsx"],"mappings":";;;iBAsCiB;EACf,UAAU;EACV,cAAc;EACd,kBAAkB;;;;;;wBAkKJ,eAAe,UAAU,aAAa,mBAAmB,oCAAiB,IAAA"}