@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/layout/app-bar/app-bar.css

@@ -0,0 +1,197 @@
+.puzzle-app-bar {
+  position: var(--puzzle-app-bar-sticky, sticky);
+  z-index: var(--puzzle-z-index-navigation, 250);
+  width: 100%;
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-background);
+  border-bottom: 1px solid var(--puzzle-color-border);
+  flex-shrink: 0;
+  top: 0;
+}
+
+.puzzle-app-bar__inner {
+  align-items: center;
+  gap: var(--puzzle-space-4, 1rem);
+  padding: var(--puzzle-space-4, 1rem);
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  display: grid;
+  position: relative;
+}
+
+.puzzle-app-bar__brand {
+  justify-self: start;
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.puzzle-app-bar__title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.puzzle-app-bar__navigation {
+  grid-area: 1 / 2;
+  justify-self: center;
+}
+
+.puzzle-app-bar__list {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-app-bar__link {
+  border-radius: var(--puzzle-radius-md, .5rem);
+  min-height: 2.5rem;
+  color: var(--puzzle-color-text-muted);
+  white-space: nowrap;
+  transition: color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  align-items: center;
+  padding: .5rem .75rem;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.puzzle-app-bar__link:hover, .puzzle-app-bar__link[aria-current="page"] {
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+}
+
+.puzzle-app-bar__actions {
+  justify-self: end;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  grid-area: 1 / 3;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-app-bar__trailing {
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-app-bar__menu-button {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  width: 2.75rem;
+  height: 2.75rem;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: none;
+}
+
+.puzzle-app-bar__menu-button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.puzzle-app-bar__drawer .puzzle-app-bar__menu-button span {
+  font: inherit;
+  font-size: 1.75rem;
+  line-height: var(--puzzle-font-line-height-none, 1);
+}
+
+.puzzle-app-bar__mobile {
+  display: none;
+}
+
+.puzzle-app-bar__drawer {
+  width: min(22rem, 100vw - 2.5rem);
+}
+
+.puzzle-app-bar__drawer > .puzzle-drawer__resize-bar {
+  display: none;
+}
+
+.puzzle-app-bar__drawer-navigation {
+  width: 100%;
+}
+
+.puzzle-app-bar__drawer .puzzle-app-bar__list {
+  align-items: stretch;
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-app-bar__drawer .puzzle-app-bar__link {
+  width: 100%;
+  padding: var(--puzzle-space-3, .75rem);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: inherit;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.puzzle-app-bar__drawer .puzzle-app-bar__link:hover {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-app-bar a:focus-visible, .puzzle-app-bar button:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+@media (width <= 1023px) {
+  .puzzle-app-bar__navigation {
+    display: none;
+  }
+
+  .puzzle-app-bar__inner {
+    justify-content: space-between;
+    display: flex;
+  }
+
+  .puzzle-app-bar__actions {
+    align-items: center;
+    gap: var(--puzzle-space-2, .5rem);
+    margin-left: auto;
+    display: flex;
+  }
+
+  .puzzle-app-bar__mobile {
+    display: block;
+  }
+
+  .puzzle-app-bar__list {
+    align-items: stretch;
+    gap: var(--puzzle-space-1, .25rem);
+    flex-direction: column;
+  }
+
+  .puzzle-app-bar__link {
+    white-space: normal;
+    width: 100%;
+  }
+
+  .puzzle-app-bar__menu-button {
+    display: inline-flex;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-app-bar__link, .puzzle-app-bar__navigation {
+    transition: none;
+  }
+}

package/dist/components/layout/app-bar/index.cjs

@@ -0,0 +1,150 @@
+"use client";
+const require_index = require("../../navigation/link/index.cjs");
+const require_index$1 = require("../../overlays/drawer/index.cjs");
+;/* empty css              */
+const require_index$2 = require("../stack/index.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/layout/app-bar/index.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+const AppBar = ({ logo, title, logoHref = "/", navigationItems = [], customNavigationItems = [], renderCustomNavigationItems, trailingComponents, sticky = false, ariaLabel = "Main navigation", className }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const appBarRef = (0, react.useRef)(null);
+	const navigationId = `puzzle-app-bar-nav-${(0, react.useId)()}`;
+	const hasBrand = logo != null || title != null;
+	const hasCustomNavigation = customNavigationItems.length > 0 && renderCustomNavigationItems != null;
+	const hasNavigation = navigationItems.length > 0 || hasCustomNavigation;
+	const style = { "--puzzle-app-bar-sticky": sticky ? "sticky" : "relative" };
+	useIsomorphicLayoutEffect(() => {
+		if (!sticky) return;
+		const appBar = appBarRef.current;
+		if (!appBar) return;
+		const pageLayout = appBar.closest("[data-puzzle-page-layout]");
+		const parent = appBar.parentElement;
+		const isPageHeader = parent?.classList.contains("puzzle-page-layout__header") && parent.parentElement === pageLayout;
+		if (pageLayout && parent !== pageLayout && !isPageHeader) return;
+		const scope = pageLayout ?? appBar.ownerDocument.documentElement;
+		const property = "--puzzle-sticky-offset";
+		const previousValue = scope.style.getPropertyValue(property);
+		const previousPriority = scope.style.getPropertyPriority(property);
+		const updateOffset = () => {
+			scope.style.setProperty(property, `${appBar.getBoundingClientRect().height}px`);
+		};
+		updateOffset();
+		const observer = new ((appBar.ownerDocument.defaultView?.ResizeObserver) ?? ResizeObserver)(updateOffset);
+		observer.observe(appBar);
+		return () => {
+			observer.disconnect();
+			if (previousValue) scope.style.setProperty(property, previousValue, previousPriority);
+			else scope.style.removeProperty(property);
+		};
+	}, [sticky]);
+	const renderNavigationItems = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+		className: "puzzle-app-bar__list",
+		children: [navigationItems.map(({ label, href, current, external }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Link, {
+			className: "puzzle-app-bar__link",
+			href,
+			"aria-current": current ? "page" : void 0,
+			...external ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : {},
+			onClick: () => setOpen(false),
+			children: label
+		}) }, href)), hasCustomNavigation && customNavigationItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: renderCustomNavigationItems(item, index) }, index))]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+		ref: appBarRef,
+		className: (0, _puzzle_ui_core.cn)("puzzle-app-bar", className),
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "puzzle-app-bar__inner",
+			children: [
+				hasBrand && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Link, {
+					className: "puzzle-app-bar__brand",
+					href: logoHref,
+					"aria-label": title ?? "Home",
+					children: [logo, title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-app-bar__title",
+						children: title
+					})]
+				}),
+				hasNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+					className: "puzzle-app-bar__navigation",
+					"aria-label": ariaLabel,
+					children: renderNavigationItems()
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "puzzle-app-bar__actions",
+					children: [trailingComponents != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-app-bar__trailing",
+						children: trailingComponents
+					}), hasNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "puzzle-app-bar__menu-button",
+						type: "button",
+						"aria-label": "Open navigation",
+						"aria-expanded": open,
+						"aria-controls": navigationId,
+						onClick: () => setOpen(true),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" })
+						})
+					})]
+				})
+			]
+		}), hasNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: navigationId,
+			className: "puzzle-app-bar__mobile",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Drawer, {
+				position: "right",
+				open,
+				onOpenChange: setOpen,
+				className: "puzzle-app-bar__drawer",
+				"aria-label": ariaLabel,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.Stack, {
+						direction: "row",
+						alignH: "between",
+						alignV: "center",
+						children: [hasBrand && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Link, {
+							className: "puzzle-app-bar__brand",
+							href: logoHref,
+							"aria-label": title ?? "Home",
+							children: [logo, title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "puzzle-app-bar__title",
+								children: title
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "puzzle-app-bar__menu-button",
+							type: "button",
+							"aria-label": "Close navigation",
+							"aria-expanded": open,
+							"aria-controls": navigationId,
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"aria-hidden": "true",
+								children: "×"
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+						className: "puzzle-app-bar__drawer-navigation",
+						"aria-label": ariaLabel,
+						children: renderNavigationItems()
+					})
+				]
+			})
+		})]
+	});
+};
+exports.AppBar = AppBar;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/layout/app-bar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useEffect","useLayoutEffect","useState","useRef","useId","Link","cn","Drawer","Stack"],"sources":["../../../../src/components/layout/app-bar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport {\n  useEffect,\n  useLayoutEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { Drawer } from \"../../overlays/drawer\";\nimport \"./app-bar.css\";\nimport { Stack } from \"../stack\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype AppBarNavigationItem = {\n  label: string;\n  href: string;\n  current?: boolean;\n  external?: boolean;\n};\n\ntype AppBarProps<T = never> = {\n  logo?: ReactNode;\n  title?: string;\n  logoHref?: string;\n  navigationItems?: AppBarNavigationItem[];\n  customNavigationItems?: T[];\n  renderCustomNavigationItems?: (item: T, index: number) => ReactNode;\n  trailingComponents?: ReactNode;\n  sticky?: boolean;\n  ariaLabel?: string;\n  className?: string;\n};\n\nconst AppBar = <T,>({\n  logo,\n  title,\n  logoHref = \"/\",\n  navigationItems = [],\n  customNavigationItems = [],\n  renderCustomNavigationItems,\n  trailingComponents,\n  sticky = false,\n  ariaLabel = \"Main navigation\",\n  className,\n}: AppBarProps<T>) => {\n  const [open, setOpen] = useState(false);\n  const appBarRef = useRef<HTMLElement | null>(null);\n\n  const navigationId = `puzzle-app-bar-nav-${useId()}`;\n\n  const hasBrand = logo != null || title != null;\n  const hasCustomNavigation =\n    customNavigationItems.length > 0 && renderCustomNavigationItems != null;\n  const hasNavigation = navigationItems.length > 0 || hasCustomNavigation;\n\n  const style = {\n    \"--puzzle-app-bar-sticky\": sticky ? \"sticky\" : \"relative\",\n  } as CSSProperties;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!sticky) return;\n\n    const appBar = appBarRef.current;\n    if (!appBar) return;\n\n    const pageLayout = appBar.closest<HTMLElement>(\"[data-puzzle-page-layout]\");\n\n    // AppBars inside previews must not overwrite the page offset.\n    const parent = appBar.parentElement;\n    const isPageHeader =\n      parent?.classList.contains(\"puzzle-page-layout__header\") &&\n      parent.parentElement === pageLayout;\n\n    if (pageLayout && parent !== pageLayout && !isPageHeader) return;\n\n    const scope = pageLayout ?? appBar.ownerDocument.documentElement;\n    const property = \"--puzzle-sticky-offset\";\n\n    const previousValue = scope.style.getPropertyValue(property);\n    const previousPriority = scope.style.getPropertyPriority(property);\n\n    const updateOffset = () => {\n      scope.style.setProperty(\n        property,\n        `${appBar.getBoundingClientRect().height}px`,\n      );\n    };\n\n    updateOffset();\n\n    const ObserverImpl =\n      appBar.ownerDocument.defaultView?.ResizeObserver ?? ResizeObserver;\n    const observer = new ObserverImpl(updateOffset);\n    observer.observe(appBar);\n\n    return () => {\n      observer.disconnect();\n\n      if (previousValue) {\n        scope.style.setProperty(property, previousValue, previousPriority);\n      } else {\n        scope.style.removeProperty(property);\n      }\n    };\n  }, [sticky]);\n\n  const renderNavigationItems = () => (\n    <ul className=\"puzzle-app-bar__list\">\n      {navigationItems.map(({ label, href, current, external }) => (\n        <li key={href}>\n          <Link\n            className=\"puzzle-app-bar__link\"\n            href={href}\n            aria-current={current ? \"page\" : undefined}\n            {...(external\n              ? {\n                  target: \"_blank\",\n                  rel: \"noopener noreferrer\",\n                }\n              : {})}\n            onClick={() => setOpen(false)}\n          >\n            {label}\n          </Link>\n        </li>\n      ))}\n\n      {hasCustomNavigation &&\n        customNavigationItems.map((item, index) => (\n          <li key={index}>{renderCustomNavigationItems(item, index)}</li>\n        ))}\n    </ul>\n  );\n\n  return (\n    <header\n      ref={appBarRef}\n      className={cn(\"puzzle-app-bar\", className)}\n      style={style}\n    >\n      <div className=\"puzzle-app-bar__inner\">\n        {hasBrand && (\n          <Link\n            className=\"puzzle-app-bar__brand\"\n            href={logoHref}\n            aria-label={title ?? \"Home\"}\n          >\n            {logo}\n            {title && <span className=\"puzzle-app-bar__title\">{title}</span>}\n          </Link>\n        )}\n\n        {hasNavigation && (\n          <nav className=\"puzzle-app-bar__navigation\" aria-label={ariaLabel}>\n            {renderNavigationItems()}\n          </nav>\n        )}\n\n        <div className=\"puzzle-app-bar__actions\">\n          {trailingComponents != null && (\n            <div className=\"puzzle-app-bar__trailing\">{trailingComponents}</div>\n          )}\n\n          {hasNavigation && (\n            <button\n              className=\"puzzle-app-bar__menu-button\"\n              type=\"button\"\n              aria-label=\"Open navigation\"\n              aria-expanded={open}\n              aria-controls={navigationId}\n              onClick={() => setOpen(true)}\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"M4 6h16M4 12h16M4 18h16\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      {hasNavigation && (\n        <div id={navigationId} className=\"puzzle-app-bar__mobile\">\n          <Drawer\n            position=\"right\"\n            open={open}\n            onOpenChange={setOpen}\n            className=\"puzzle-app-bar__drawer\"\n            aria-label={ariaLabel}\n          >\n            <Stack direction=\"row\" alignH=\"between\" alignV=\"center\">\n              {hasBrand && (\n                <Link\n                  className=\"puzzle-app-bar__brand\"\n                  href={logoHref}\n                  aria-label={title ?? \"Home\"}\n                >\n                  {logo}\n                  {title && (\n                    <span className=\"puzzle-app-bar__title\">{title}</span>\n                  )}\n                </Link>\n              )}\n              <button\n                className=\"puzzle-app-bar__menu-button\"\n                type=\"button\"\n                aria-label=\"Close navigation\"\n                aria-expanded={open}\n                aria-controls={navigationId}\n                onClick={() => setOpen(false)}\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            </Stack>\n            <hr />\n            <nav\n              className=\"puzzle-app-bar__drawer-navigation\"\n              aria-label={ariaLabel}\n            >\n              {renderNavigationItems()}\n            </nav>\n          </Drawer>\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport { AppBar, type AppBarNavigationItem, type AppBarProps };\n"],"mappings":"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"}

package/dist/components/layout/app-bar/index.d.cts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+type AppBarNavigationItem = {
+  label: string;
+  href: string;
+  current?: boolean;
+  external?: boolean;
+};
+type AppBarProps<T = never> = {
+  logo?: ReactNode;
+  title?: string;
+  logoHref?: string;
+  navigationItems?: AppBarNavigationItem[];
+  customNavigationItems?: T[];
+  renderCustomNavigationItems?: (item: T, index: number) => ReactNode;
+  trailingComponents?: ReactNode;
+  sticky?: boolean;
+  ariaLabel?: string;
+  className?: string;
+};
+declare const AppBar: <T>({ logo, title, logoHref, navigationItems, customNavigationItems, renderCustomNavigationItems, trailingComponents, sticky, ariaLabel, className }: AppBarProps<T>) => import("react").JSX.Element;
+export { AppBar, type AppBarNavigationItem, type AppBarProps };

package/dist/components/layout/app-bar/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+type AppBarNavigationItem = {
+  label: string;
+  href: string;
+  current?: boolean;
+  external?: boolean;
+};
+type AppBarProps<T = never> = {
+  logo?: ReactNode;
+  title?: string;
+  logoHref?: string;
+  navigationItems?: AppBarNavigationItem[];
+  customNavigationItems?: T[];
+  renderCustomNavigationItems?: (item: T, index: number) => ReactNode;
+  trailingComponents?: ReactNode;
+  sticky?: boolean;
+  ariaLabel?: string;
+  className?: string;
+};
+declare const AppBar: <T>({ logo, title, logoHref, navigationItems, customNavigationItems, renderCustomNavigationItems, trailingComponents, sticky, ariaLabel, className }: AppBarProps<T>) => import("react").JSX.Element;
+export { AppBar, type AppBarNavigationItem, type AppBarProps };

package/dist/components/layout/app-bar/index.js

@@ -0,0 +1,150 @@
+"use client";
+import { Link } from "../../navigation/link/index.js";
+import { Drawer } from "../../overlays/drawer/index.js";
+import "./app-bar.css";
+import { Stack } from "../stack/index.js";
+import { cn } from "@puzzle-ui/core";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/app-bar/index.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const AppBar = ({ logo, title, logoHref = "/", navigationItems = [], customNavigationItems = [], renderCustomNavigationItems, trailingComponents, sticky = false, ariaLabel = "Main navigation", className }) => {
+	const [open, setOpen] = useState(false);
+	const appBarRef = useRef(null);
+	const navigationId = `puzzle-app-bar-nav-${useId()}`;
+	const hasBrand = logo != null || title != null;
+	const hasCustomNavigation = customNavigationItems.length > 0 && renderCustomNavigationItems != null;
+	const hasNavigation = navigationItems.length > 0 || hasCustomNavigation;
+	const style = { "--puzzle-app-bar-sticky": sticky ? "sticky" : "relative" };
+	useIsomorphicLayoutEffect(() => {
+		if (!sticky) return;
+		const appBar = appBarRef.current;
+		if (!appBar) return;
+		const pageLayout = appBar.closest("[data-puzzle-page-layout]");
+		const parent = appBar.parentElement;
+		const isPageHeader = parent?.classList.contains("puzzle-page-layout__header") && parent.parentElement === pageLayout;
+		if (pageLayout && parent !== pageLayout && !isPageHeader) return;
+		const scope = pageLayout ?? appBar.ownerDocument.documentElement;
+		const property = "--puzzle-sticky-offset";
+		const previousValue = scope.style.getPropertyValue(property);
+		const previousPriority = scope.style.getPropertyPriority(property);
+		const updateOffset = () => {
+			scope.style.setProperty(property, `${appBar.getBoundingClientRect().height}px`);
+		};
+		updateOffset();
+		const observer = new ((appBar.ownerDocument.defaultView?.ResizeObserver) ?? ResizeObserver)(updateOffset);
+		observer.observe(appBar);
+		return () => {
+			observer.disconnect();
+			if (previousValue) scope.style.setProperty(property, previousValue, previousPriority);
+			else scope.style.removeProperty(property);
+		};
+	}, [sticky]);
+	const renderNavigationItems = () => /* @__PURE__ */ jsxs("ul", {
+		className: "puzzle-app-bar__list",
+		children: [navigationItems.map(({ label, href, current, external }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+			className: "puzzle-app-bar__link",
+			href,
+			"aria-current": current ? "page" : void 0,
+			...external ? {
+				target: "_blank",
+				rel: "noopener noreferrer"
+			} : {},
+			onClick: () => setOpen(false),
+			children: label
+		}) }, href)), hasCustomNavigation && customNavigationItems.map((item, index) => /* @__PURE__ */ jsx("li", { children: renderCustomNavigationItems(item, index) }, index))]
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		ref: appBarRef,
+		className: cn("puzzle-app-bar", className),
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "puzzle-app-bar__inner",
+			children: [
+				hasBrand && /* @__PURE__ */ jsxs(Link, {
+					className: "puzzle-app-bar__brand",
+					href: logoHref,
+					"aria-label": title ?? "Home",
+					children: [logo, title && /* @__PURE__ */ jsx("span", {
+						className: "puzzle-app-bar__title",
+						children: title
+					})]
+				}),
+				hasNavigation && /* @__PURE__ */ jsx("nav", {
+					className: "puzzle-app-bar__navigation",
+					"aria-label": ariaLabel,
+					children: renderNavigationItems()
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "puzzle-app-bar__actions",
+					children: [trailingComponents != null && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-app-bar__trailing",
+						children: trailingComponents
+					}), hasNavigation && /* @__PURE__ */ jsx("button", {
+						className: "puzzle-app-bar__menu-button",
+						type: "button",
+						"aria-label": "Open navigation",
+						"aria-expanded": open,
+						"aria-controls": navigationId,
+						onClick: () => setOpen(true),
+						children: /* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+						})
+					})]
+				})
+			]
+		}), hasNavigation && /* @__PURE__ */ jsx("div", {
+			id: navigationId,
+			className: "puzzle-app-bar__mobile",
+			children: /* @__PURE__ */ jsxs(Drawer, {
+				position: "right",
+				open,
+				onOpenChange: setOpen,
+				className: "puzzle-app-bar__drawer",
+				"aria-label": ariaLabel,
+				children: [
+					/* @__PURE__ */ jsxs(Stack, {
+						direction: "row",
+						alignH: "between",
+						alignV: "center",
+						children: [hasBrand && /* @__PURE__ */ jsxs(Link, {
+							className: "puzzle-app-bar__brand",
+							href: logoHref,
+							"aria-label": title ?? "Home",
+							children: [logo, title && /* @__PURE__ */ jsx("span", {
+								className: "puzzle-app-bar__title",
+								children: title
+							})]
+						}), /* @__PURE__ */ jsx("button", {
+							className: "puzzle-app-bar__menu-button",
+							type: "button",
+							"aria-label": "Close navigation",
+							"aria-expanded": open,
+							"aria-controls": navigationId,
+							onClick: () => setOpen(false),
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "×"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("hr", {}),
+					/* @__PURE__ */ jsx("nav", {
+						className: "puzzle-app-bar__drawer-navigation",
+						"aria-label": ariaLabel,
+						children: renderNavigationItems()
+					})
+				]
+			})
+		})]
+	});
+};
+export { AppBar };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/app-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/app-bar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Link } from \"../../navigation/link\";\nimport {\n  useEffect,\n  useLayoutEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { Drawer } from \"../../overlays/drawer\";\nimport \"./app-bar.css\";\nimport { Stack } from \"../stack\";\n\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype AppBarNavigationItem = {\n  label: string;\n  href: string;\n  current?: boolean;\n  external?: boolean;\n};\n\ntype AppBarProps<T = never> = {\n  logo?: ReactNode;\n  title?: string;\n  logoHref?: string;\n  navigationItems?: AppBarNavigationItem[];\n  customNavigationItems?: T[];\n  renderCustomNavigationItems?: (item: T, index: number) => ReactNode;\n  trailingComponents?: ReactNode;\n  sticky?: boolean;\n  ariaLabel?: string;\n  className?: string;\n};\n\nconst AppBar = <T,>({\n  logo,\n  title,\n  logoHref = \"/\",\n  navigationItems = [],\n  customNavigationItems = [],\n  renderCustomNavigationItems,\n  trailingComponents,\n  sticky = false,\n  ariaLabel = \"Main navigation\",\n  className,\n}: AppBarProps<T>) => {\n  const [open, setOpen] = useState(false);\n  const appBarRef = useRef<HTMLElement | null>(null);\n\n  const navigationId = `puzzle-app-bar-nav-${useId()}`;\n\n  const hasBrand = logo != null || title != null;\n  const hasCustomNavigation =\n    customNavigationItems.length > 0 && renderCustomNavigationItems != null;\n  const hasNavigation = navigationItems.length > 0 || hasCustomNavigation;\n\n  const style = {\n    \"--puzzle-app-bar-sticky\": sticky ? \"sticky\" : \"relative\",\n  } as CSSProperties;\n\n  useIsomorphicLayoutEffect(() => {\n    if (!sticky) return;\n\n    const appBar = appBarRef.current;\n    if (!appBar) return;\n\n    const pageLayout = appBar.closest<HTMLElement>(\"[data-puzzle-page-layout]\");\n\n    // AppBars inside previews must not overwrite the page offset.\n    const parent = appBar.parentElement;\n    const isPageHeader =\n      parent?.classList.contains(\"puzzle-page-layout__header\") &&\n      parent.parentElement === pageLayout;\n\n    if (pageLayout && parent !== pageLayout && !isPageHeader) return;\n\n    const scope = pageLayout ?? appBar.ownerDocument.documentElement;\n    const property = \"--puzzle-sticky-offset\";\n\n    const previousValue = scope.style.getPropertyValue(property);\n    const previousPriority = scope.style.getPropertyPriority(property);\n\n    const updateOffset = () => {\n      scope.style.setProperty(\n        property,\n        `${appBar.getBoundingClientRect().height}px`,\n      );\n    };\n\n    updateOffset();\n\n    const ObserverImpl =\n      appBar.ownerDocument.defaultView?.ResizeObserver ?? ResizeObserver;\n    const observer = new ObserverImpl(updateOffset);\n    observer.observe(appBar);\n\n    return () => {\n      observer.disconnect();\n\n      if (previousValue) {\n        scope.style.setProperty(property, previousValue, previousPriority);\n      } else {\n        scope.style.removeProperty(property);\n      }\n    };\n  }, [sticky]);\n\n  const renderNavigationItems = () => (\n    <ul className=\"puzzle-app-bar__list\">\n      {navigationItems.map(({ label, href, current, external }) => (\n        <li key={href}>\n          <Link\n            className=\"puzzle-app-bar__link\"\n            href={href}\n            aria-current={current ? \"page\" : undefined}\n            {...(external\n              ? {\n                  target: \"_blank\",\n                  rel: \"noopener noreferrer\",\n                }\n              : {})}\n            onClick={() => setOpen(false)}\n          >\n            {label}\n          </Link>\n        </li>\n      ))}\n\n      {hasCustomNavigation &&\n        customNavigationItems.map((item, index) => (\n          <li key={index}>{renderCustomNavigationItems(item, index)}</li>\n        ))}\n    </ul>\n  );\n\n  return (\n    <header\n      ref={appBarRef}\n      className={cn(\"puzzle-app-bar\", className)}\n      style={style}\n    >\n      <div className=\"puzzle-app-bar__inner\">\n        {hasBrand && (\n          <Link\n            className=\"puzzle-app-bar__brand\"\n            href={logoHref}\n            aria-label={title ?? \"Home\"}\n          >\n            {logo}\n            {title && <span className=\"puzzle-app-bar__title\">{title}</span>}\n          </Link>\n        )}\n\n        {hasNavigation && (\n          <nav className=\"puzzle-app-bar__navigation\" aria-label={ariaLabel}>\n            {renderNavigationItems()}\n          </nav>\n        )}\n\n        <div className=\"puzzle-app-bar__actions\">\n          {trailingComponents != null && (\n            <div className=\"puzzle-app-bar__trailing\">{trailingComponents}</div>\n          )}\n\n          {hasNavigation && (\n            <button\n              className=\"puzzle-app-bar__menu-button\"\n              type=\"button\"\n              aria-label=\"Open navigation\"\n              aria-expanded={open}\n              aria-controls={navigationId}\n              onClick={() => setOpen(true)}\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"M4 6h16M4 12h16M4 18h16\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      {hasNavigation && (\n        <div id={navigationId} className=\"puzzle-app-bar__mobile\">\n          <Drawer\n            position=\"right\"\n            open={open}\n            onOpenChange={setOpen}\n            className=\"puzzle-app-bar__drawer\"\n            aria-label={ariaLabel}\n          >\n            <Stack direction=\"row\" alignH=\"between\" alignV=\"center\">\n              {hasBrand && (\n                <Link\n                  className=\"puzzle-app-bar__brand\"\n                  href={logoHref}\n                  aria-label={title ?? \"Home\"}\n                >\n                  {logo}\n                  {title && (\n                    <span className=\"puzzle-app-bar__title\">{title}</span>\n                  )}\n                </Link>\n              )}\n              <button\n                className=\"puzzle-app-bar__menu-button\"\n                type=\"button\"\n                aria-label=\"Close navigation\"\n                aria-expanded={open}\n                aria-controls={navigationId}\n                onClick={() => setOpen(false)}\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            </Stack>\n            <hr />\n            <nav\n              className=\"puzzle-app-bar__drawer-navigation\"\n              aria-label={ariaLabel}\n            >\n              {renderNavigationItems()}\n            </nav>\n          </Drawer>\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport { AppBar, type AppBarNavigationItem, type AppBarProps };\n"],"mappings":"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"}