@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/NavBar/NavBar.js

@@ -0,0 +1,97 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import { CloseIcon as n } from "../Icon/CloseIcon.js";
+import { MenuIcon as r } from "../Icon/MenuIcon.js";
+import { isNavBarCollapsed as i } from "./isNavBarCollapsed.js";
+import { leavesPageInPlace as a } from "./leavesPageInPlace.js";
+import o from "./NavBar.module.js";
+import { NavBarContext as s } from "./NavBarContext.js";
+import { useLayoutSwitch as c } from "./useLayoutSwitch.js";
+import { clsx as l } from "clsx";
+import { useId as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+// src/components/NavBar/NavBar.tsx
+function h({ "aria-label": h, "aria-labelledby": g, children: _, className: v, collapse: y = "md", end: b, menuLabel: x = "Menu", start: S, ...C }) {
+	let w = u(), T = d(null), E = d(null), D = d(null), [O, k] = f(!1), [A, j] = f([]);
+	function M() {
+		k(!1), j([]);
+	}
+	c({
+		collapse: y,
+		layoutRef: T,
+		navigationRef: E,
+		onSwitch: M
+	});
+	function N(e) {
+		j((t) => t.filter((t) => t !== e));
+	}
+	function P(e, t) {
+		let n = i(t);
+		j((t) => t.includes(e) ? t.filter((t) => t !== e) : n ? [...t, e] : [e]);
+	}
+	function F() {
+		O ? M() : k(!0);
+	}
+	function I(e) {
+		let t = e.target.closest("a");
+		t !== null && !a(e, t) && M();
+	}
+	function L(e) {
+		let t = D.current, n = E.current, r = e.target, a = r === t || n?.contains(r) === !0;
+		e.key === "Escape" && !e.defaultPrevented && O && n !== null && a && i(n) && (e.preventDefault(), M(), t?.focus());
+	}
+	return /* @__PURE__ */ p(s.Provider, {
+		value: {
+			closeSection: N,
+			openSections: A,
+			toggleSection: P
+		},
+		children: /* @__PURE__ */ p(t, {
+			...C,
+			className: l(o.bar, v),
+			"data-collapse": y,
+			children: /* @__PURE__ */ m(t, {
+				className: o.layout,
+				onClick: I,
+				onKeyDown: L,
+				ref: T,
+				children: [
+					e(S) && /* @__PURE__ */ p(t, {
+						className: o.start,
+						children: S
+					}),
+					/* @__PURE__ */ m(t, {
+						as: "button",
+						className: l(o.control, o.toggle),
+						onClick: F,
+						ref: D,
+						type: "button",
+						"aria-controls": w,
+						"aria-expanded": O,
+						children: [p(O ? n : r, {}), x]
+					}),
+					/* @__PURE__ */ p(t, {
+						as: "nav",
+						className: o.navigation,
+						id: w,
+						ref: E,
+						"aria-label": h,
+						"aria-labelledby": g,
+						"data-open": O ? !0 : void 0,
+						children: /* @__PURE__ */ p(t, {
+							as: "ul",
+							className: o.list,
+							role: "list",
+							children: _
+						})
+					}),
+					e(b) && /* @__PURE__ */ p(t, {
+						className: o.end,
+						children: b
+					})
+				]
+			})
+		})
+	});
+}
+export { h as NavBar };

package/dist/components/NavBar/NavBar.module.js

@@ -0,0 +1,22 @@
+import './NavBar.css';// src/components/NavBar/NavBar.module.css
+var e = "sui-bar-YKJoe", t = "sui-layout-h4XLw", n = "sui-start-7Cofw", r = "sui-end-KbxmI", i = "sui-navigation-CUxrs", a = "sui-list-pjBUp", o = "sui-control-ORmQT", s = "sui-section-P9Rex", c = "sui-panel-LFMyY", l = "sui-toggle-4poR7", u = "sui-chevron-PDy4f", d = "sui-panelList-o--Wi", f = "sui-groupList-BACy0", p = "sui-group-nS46Z", m = "sui-groupTitle-e3Nhq", h = "sui-panelLink-PFMpf", g = "sui-title-db-od", _ = "sui-description-FOS-6", v = {
+	bar: e,
+	layout: t,
+	start: n,
+	end: r,
+	navigation: i,
+	list: a,
+	control: o,
+	section: s,
+	panel: c,
+	toggle: l,
+	chevron: u,
+	panelList: d,
+	groupList: f,
+	group: p,
+	groupTitle: m,
+	panelLink: h,
+	title: g,
+	description: _
+};
+export { e as bar, u as chevron, o as control, v as default, _ as description, r as end, p as group, f as groupList, m as groupTitle, t as layout, a as list, i as navigation, c as panel, h as panelLink, d as panelList, s as section, n as start, g as title, l as toggle };

package/dist/components/NavBar/NavBarContext.d.ts

@@ -0,0 +1,21 @@
+/**
+ * State a `NavBar` shares with its entries
+ */
+export interface NavBarContextValue {
+    /**
+     * Closes the section with the given id
+     */
+    closeSection: (id: string) => void;
+    /**
+     * Ids of the open sections
+     */
+    openSections: readonly string[];
+    /**
+     * Opens or closes the section with the given id. On a wide bar, opening it closes any other.
+     */
+    toggleSection: (id: string, button: Element) => void;
+}
+/**
+ * Carries a `NavBar`'s state to its entries; null outside a `NavBar`
+ */
+export declare const NavBarContext: import("react").Context<NavBarContextValue | null>;

package/dist/components/NavBar/NavBarContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/NavBar/NavBarContext.ts
+var t = e(null);
+export { t as NavBarContext };

package/dist/components/NavBar/NavBarItem.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonProps } from "../../links";
+import type { LinkElement } from "../Link";
+interface NavBarItemOwnProps<E extends LinkElement> {
+    /**
+     * What to render: `a`, or a component that renders an anchor, such as a router's link. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * The label
+     */
+    children?: ReactNode;
+    /**
+     * Class names merged with the link's base class
+     */
+    className?: string;
+}
+/**
+ * Props for `NavBarItem`: its own props plus every other prop of the anchor or component given in `as`, except
+ * `dangerouslySetInnerHTML`
+ */
+export type NavBarItemProps<E extends LinkElement = "a"> = E extends LinkElement ? NavBarItemOwnProps<E> & LinkOrButtonProps<E, "dangerouslySetInnerHTML" | keyof NavBarItemOwnProps<E>> : never;
+/**
+ * A top-level link in a `NavBar`. Every prop but `children` goes to the link, not the list item around it, and a
+ * component given in `as` must pass the `className` it is given on to its anchor. Mark the current page with
+ * `aria-current="page"`.
+ *
+ * @example
+ * <NavBarItem href="/articles" aria-current="page">Articles</NavBarItem>
+ */
+export declare function NavBarItem<E extends LinkElement = "a">({ as, children, className, ...rest }: NavBarItemProps<E>): JSX.Element;
+export {};

package/dist/components/NavBar/NavBarItem.js

@@ -0,0 +1,18 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./NavBar.module.js";
+import { renderNavBarLink as n } from "./renderNavBarLink.js";
+import { useNavBarContext as r } from "./useNavBarContext.js";
+import { clsx as i } from "clsx";
+import { c as a } from "react/compiler-runtime";
+import { jsx as o } from "react/jsx-runtime";
+// src/components/NavBar/NavBarItem.tsx
+function s(s) {
+	let c = a(3), { as: l, children: u, className: d, ...f } = s;
+	r("NavBarItem");
+	let p = e, m = n(l, i(t.control, d), u, f), h;
+	return c[0] !== p || c[1] !== m ? (h = /* @__PURE__ */ o(p, {
+		as: "li",
+		children: m
+	}), c[0] = p, c[1] = m, c[2] = h) : h = c[2], h;
+}
+export { s as NavBarItem };

package/dist/components/NavBar/NavBarMenu.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `NavBarMenu`: its own props plus every `li` prop except `dangerouslySetInnerHTML`
+ */
+export interface NavBarMenuProps extends Omit<BoxProps<"li">, "as" | "children" | "dangerouslySetInnerHTML"> {
+    /**
+     * The panel's links: `NavBarMenuItem`s, or `NavBarMenuGroup`s holding them
+     */
+    children: ReactNode;
+    /**
+     * How many columns the panel lays its links or groups out in on a wide bar. Defaults to 1.
+     */
+    columns?: 1 | 2 | 3;
+    /**
+     * The text of the button that opens the panel
+     */
+    label: ReactNode;
+}
+/**
+ * A section of a `NavBar`: a button that opens a panel of links below it. A click, Enter or Space opens and closes
+ * it. On a wide bar one section is open at a time, and Escape, a click outside or focus leaving closes it. On a
+ * collapsed bar the panel opens in place, pushing what follows down, and Escape closes it. Choosing a link closes it.
+ * Escape returns focus to the button.
+ *
+ * @example
+ * <NavBarMenu columns={2} label="Topics">
+ *   <NavBarMenuItem description="Typography, colour, systems" href="/topics/design">Design</NavBarMenuItem>
+ *   <NavBarMenuItem description="Front-end, performance, tooling" href="/topics/engineering">Engineering</NavBarMenuItem>
+ * </NavBarMenu>
+ */
+export declare function NavBarMenu({ children, className, columns, label, onBlur, onKeyDown, onPointerDown, ...rest }: NavBarMenuProps): JSX.Element;

package/dist/components/NavBar/NavBarMenu.js

@@ -0,0 +1,84 @@
+import { anchorNameFor as e } from "../../overlays/anchorNameFor.js";
+import { Box as t } from "../Box/Box.js";
+import { ChevronDownIcon as n } from "../Icon/ChevronDownIcon.js";
+import { isNavBarCollapsed as r } from "./isNavBarCollapsed.js";
+import i from "./NavBar.module.js";
+import { useNavBarContext as a } from "./useNavBarContext.js";
+import { clsx as o } from "clsx";
+import { useEffect as s, useId as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenu.tsx
+function f({ children: f, className: m, columns: h = 1, label: g, onBlur: _, onKeyDown: v, onPointerDown: y, ...b }) {
+	let { closeSection: x, openSections: S, toggleSection: C } = a("NavBarMenu"), w = c(), T = e(w), E = l(null), D = l(!1), O = S.includes(w);
+	s(() => {
+		let e = E.current?.parentElement;
+		if (!O || e == null) return;
+		let t = (t) => {
+			let n = t.target;
+			!e.contains(n) && !r(e) && x(w);
+		}, n = (t) => {
+			p(e, t.target, D.current) && !r(e) && x(w);
+		}, i = () => {
+			D.current = !1;
+		}, a = e.ownerDocument;
+		return a.addEventListener("focusin", n, !0), a.addEventListener("keydown", i, !0), a.addEventListener("pointerdown", t, !0), () => {
+			a.removeEventListener("focusin", n, !0), a.removeEventListener("keydown", i, !0), a.removeEventListener("pointerdown", t, !0);
+		};
+	}, [
+		x,
+		O,
+		w
+	]);
+	function k(e) {
+		C(w, e.currentTarget);
+	}
+	function A(e) {
+		_?.(e);
+		let t = e.currentTarget;
+		e.relatedTarget === null && setTimeout(() => {
+			O && p(t, t.ownerDocument.activeElement, D.current) && !r(t) && x(w);
+		}, 0);
+	}
+	function j(e) {
+		y?.(e), D.current = !0;
+	}
+	function M(e) {
+		v?.(e), D.current = !1, e.key === "Escape" && O && !e.defaultPrevented && (e.preventDefault(), x(w), E.current?.focus());
+	}
+	return /* @__PURE__ */ d(t, {
+		...b,
+		as: "li",
+		className: o(i.section, m),
+		onBlur: A,
+		onKeyDown: M,
+		onPointerDown: j,
+		children: [/* @__PURE__ */ d(t, {
+			as: "button",
+			className: i.control,
+			onClick: k,
+			ref: E,
+			style: { anchorName: T },
+			type: "button",
+			"aria-controls": w,
+			"aria-expanded": O,
+			children: [g, /* @__PURE__ */ u(n, { className: i.chevron })]
+		}), /* @__PURE__ */ u(t, {
+			className: i.panel,
+			hidden: !O,
+			id: w,
+			style: { positionAnchor: T },
+			"data-columns": h,
+			children: /* @__PURE__ */ u(t, {
+				as: "ul",
+				className: i.panelList,
+				role: "list",
+				children: f
+			})
+		})]
+	});
+}
+function p(e, t, n) {
+	let r = n && t?.contains(e) === !0;
+	return t !== null && !e.contains(t) && !r;
+}
+export { f as NavBarMenu };

package/dist/components/NavBar/NavBarMenuGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+import type { HeadingLevel } from "../Heading";
+/**
+ * Props for `NavBarMenuGroup`: its own props plus every `li` prop except `dangerouslySetInnerHTML` and `title`
+ */
+export interface NavBarMenuGroupProps extends Omit<BoxProps<"li">, "as" | "dangerouslySetInnerHTML" | "title"> {
+    /**
+     * The group's heading level, which the page outline decides: in a site's header before the page's `h1`, usually 2
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * The group's heading, which also names its list
+     */
+    title: ReactNode;
+}
+/**
+ * A headed column of `NavBarMenuItem`s in a `NavBarMenu`'s panel
+ *
+ * @example
+ * <NavBarMenuGroup headingLevel={2} title="Topics">
+ *   <NavBarMenuItem href="/topics/design">Design</NavBarMenuItem>
+ * </NavBarMenuGroup>
+ */
+export declare function NavBarMenuGroup({ children, className, headingLevel, title, ...rest }: NavBarMenuGroupProps): JSX.Element;

package/dist/components/NavBar/NavBarMenuGroup.js

@@ -0,0 +1,40 @@
+import { Box as e } from "../Box/Box.js";
+import { Heading as t } from "../Heading/Heading.js";
+import n from "./NavBar.module.js";
+import { useNavBarContext as r } from "./useNavBarContext.js";
+import { clsx as i } from "clsx";
+import { useId as a } from "react";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenuGroup.tsx
+function l(l) {
+	let u = o(20), d, f, p, m, h;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5]) : ({children: d, className: f, headingLevel: p, title: h, ...m} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h), r("NavBarMenuGroup");
+	let g = a(), _;
+	u[6] === f ? _ = u[7] : (_ = i(n.group, f), u[6] = f, u[7] = _);
+	let v;
+	u[8] !== g || u[9] !== p || u[10] !== h ? (v = /* @__PURE__ */ s(t, {
+		className: n.groupTitle,
+		id: g,
+		level: p,
+		size: "xs",
+		tone: "muted",
+		children: h
+	}), u[8] = g, u[9] = p, u[10] = h, u[11] = v) : v = u[11];
+	let y;
+	u[12] !== d || u[13] !== g ? (y = /* @__PURE__ */ s(e, {
+		as: "ul",
+		className: n.groupList,
+		role: "list",
+		"aria-labelledby": g,
+		children: d
+	}), u[12] = d, u[13] = g, u[14] = y) : y = u[14];
+	let b;
+	return u[15] !== m || u[16] !== _ || u[17] !== v || u[18] !== y ? (b = /* @__PURE__ */ c(e, {
+		...m,
+		as: "li",
+		className: _,
+		children: [v, y]
+	}), u[15] = m, u[16] = _, u[17] = v, u[18] = y, u[19] = b) : b = u[19], b;
+}
+export { l as NavBarMenuGroup };

package/dist/components/NavBar/NavBarMenuItem.d.ts

@@ -0,0 +1,36 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonProps } from "../../links";
+import type { LinkElement } from "../Link";
+interface NavBarMenuItemOwnProps<E extends LinkElement> {
+    /**
+     * What to render: `a`, or a component that renders an anchor, such as a router's link. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * The title, which names the link
+     */
+    children?: ReactNode;
+    /**
+     * Class names merged with the link's base class
+     */
+    className?: string;
+    /**
+     * A line of muted text below the title, which describes the link
+     */
+    description?: ReactNode;
+}
+/**
+ * Props for `NavBarMenuItem`: its own props plus every other prop of the anchor or component given in `as`, except
+ * `dangerouslySetInnerHTML`
+ */
+export type NavBarMenuItemProps<E extends LinkElement = "a"> = E extends LinkElement ? NavBarMenuItemOwnProps<E> & LinkOrButtonProps<E, "dangerouslySetInnerHTML" | keyof NavBarMenuItemOwnProps<E>> : never;
+/**
+ * A link in a `NavBarMenu`'s panel, with an optional description below its title. Every prop but `children` and
+ * `description` goes to the link, and a component given in `as` must pass the `className` and ARIA attributes it is
+ * given on to its anchor. Mark the current page with `aria-current="page"`.
+ *
+ * @example
+ * <NavBarMenuItem description="Typography, colour, systems" href="/topics/design">Design</NavBarMenuItem>
+ */
+export declare function NavBarMenuItem<E extends LinkElement = "a">({ as, children, className, description, ...rest }: NavBarMenuItemProps<E>): JSX.Element;
+export {};

package/dist/components/NavBar/NavBarMenuItem.js

@@ -0,0 +1,49 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./NavBar.module.js";
+import { renderNavBarLink as r } from "./renderNavBarLink.js";
+import { useNavBarContext as i } from "./useNavBarContext.js";
+import { clsx as a } from "clsx";
+import { useId as o } from "react";
+import { c as s } from "react/compiler-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+// src/components/NavBar/NavBarMenuItem.tsx
+function d(d) {
+	let f = s(15), { as: p, children: m, className: h, description: g, ..._ } = d;
+	i("NavBarMenuItem");
+	let v = o(), y = o(), { "aria-describedby": b, "aria-label": x, "aria-labelledby": S, ...C } = _, w;
+	f[0] === g ? w = f[1] : (w = e(g), f[0] = g, f[1] = w);
+	let T = w, E;
+	f[2] !== m || f[3] !== v ? (E = /* @__PURE__ */ l(t, {
+		as: "span",
+		className: n.title,
+		id: v,
+		children: m
+	}), f[2] = m, f[3] = v, f[4] = E) : E = f[4];
+	let D;
+	f[5] !== g || f[6] !== y || f[7] !== T ? (D = T && /* @__PURE__ */ l(t, {
+		as: "span",
+		className: n.description,
+		id: y,
+		children: g
+	}), f[5] = g, f[6] = y, f[7] = T, f[8] = D) : D = f[8];
+	let O;
+	f[9] !== E || f[10] !== D ? (O = /* @__PURE__ */ u(c, { children: [E, D] }), f[9] = E, f[10] = D, f[11] = O) : O = f[11];
+	let k = O, A = T ? {
+		"aria-describedby": b === void 0 ? y : `${y} ${b}`,
+		"aria-label": x,
+		"aria-labelledby": S ?? (x === void 0 ? v : void 0)
+	} : {
+		"aria-describedby": b,
+		"aria-label": x,
+		"aria-labelledby": S
+	}, j = t, M = r(p, a(n.panelLink, h), k, {
+		...C,
+		...A
+	}), N;
+	return f[12] !== j || f[13] !== M ? (N = /* @__PURE__ */ l(j, {
+		as: "li",
+		children: M
+	}), f[12] = j, f[13] = M, f[14] = N) : N = f[14], N;
+}
+export { d as NavBarMenuItem };

package/dist/components/NavBar/index.d.ts

@@ -0,0 +1,10 @@
+export { NavBar } from "./NavBar";
+export type { NavBarCollapse, NavBarProps } from "./NavBar";
+export { NavBarItem } from "./NavBarItem";
+export type { NavBarItemProps } from "./NavBarItem";
+export { NavBarMenu } from "./NavBarMenu";
+export type { NavBarMenuProps } from "./NavBarMenu";
+export { NavBarMenuGroup } from "./NavBarMenuGroup";
+export type { NavBarMenuGroupProps } from "./NavBarMenuGroup";
+export { NavBarMenuItem } from "./NavBarMenuItem";
+export type { NavBarMenuItemProps } from "./NavBarMenuItem";

package/dist/components/NavBar/isNavBarCollapsed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tells whether the `NavBar` around an element shows its collapsed layout, behind its "Menu" toggle
+ *
+ * @param element the bar's navigation or an element inside it
+ * @returns true while the bar is narrower than its collapse width, or always collapses, and the browser lays it out
+ *   collapsed
+ */
+export declare function isNavBarCollapsed(element: Element): boolean;

package/dist/components/NavBar/isNavBarCollapsed.js

@@ -0,0 +1,5 @@
+// src/components/NavBar/isNavBarCollapsed.ts
+function e(e) {
+	return e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue("--_sui-nav-bar-collapsed").trim() === "1";
+}
+export { e as isNavBarCollapsed };

package/dist/components/NavBar/leavesPageInPlace.d.ts

@@ -0,0 +1,12 @@
+type ModifierKeys = Pick<MouseEvent, "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
+/**
+ * Tells whether a click on a link leaves this page where it was, opening the link in another tab or window or
+ * downloading it
+ *
+ * @param event the click, for the modifier keys held
+ * @param link the link clicked
+ * @returns true for a click with Alt, Ctrl, Meta or Shift held, on a link that opens in another browsing context, or
+ *   on one that downloads its URL; false whenever that can't be established
+ */
+export declare function leavesPageInPlace(event: ModifierKeys, link: HTMLAnchorElement): boolean;
+export {};

package/dist/components/NavBar/leavesPageInPlace.js

@@ -0,0 +1,29 @@
+// src/components/NavBar/leavesPageInPlace.ts
+function e(e, r) {
+	return e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || t(r) || n(r);
+}
+function t(e) {
+	let t = e.hasAttribute("target") ? e.target : e.ownerDocument.querySelector("base[target]")?.getAttribute("target") ?? "", n = t.toLowerCase(), r = e.ownerDocument.defaultView;
+	if (r === null || [
+		"",
+		"_parent",
+		"_self",
+		"_top"
+	].includes(n)) return !1;
+	let i = r;
+	for (;;) {
+		try {
+			if (i.name === t) return !1;
+		} catch {
+			return !1;
+		}
+		if (i.parent === i) return !0;
+		i = i.parent;
+	}
+}
+function n(e) {
+	if (!e.hasAttribute("download") || !URL.canParse(e.href)) return !1;
+	let t = new URL(e.href);
+	return t.protocol === "blob:" || t.protocol === "data:" || t.origin === e.ownerDocument.location.origin;
+}
+export { e as leavesPageInPlace };

package/dist/components/NavBar/renderNavBarLink.d.ts

@@ -0,0 +1,12 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkElement } from "../Link";
+/**
+ * Renders the link a `NavBar` entry's `as` names
+ *
+ * @param as the anchor or component to render, or undefined for an anchor
+ * @param className the entry's class names
+ * @param content what the link holds
+ * @param props every other prop the entry was given for its link
+ * @returns the link
+ */
+export declare function renderNavBarLink(as: LinkElement | undefined, className: string, content: ReactNode, props: object): JSX.Element;

package/dist/components/NavBar/renderNavBarLink.js

@@ -0,0 +1,16 @@
+import { Box as e } from "../Box/Box.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/NavBar/renderNavBarLink.tsx
+function n(n, r, i, a) {
+	return n === void 0 || n === "a" ? /* @__PURE__ */ t(e, {
+		...a,
+		as: "a",
+		className: r,
+		children: i
+	}) : /* @__PURE__ */ t(n, {
+		...a,
+		className: r,
+		children: i
+	});
+}
+export { n as renderNavBarLink };

package/dist/components/NavBar/useLayoutSwitch.d.ts

@@ -0,0 +1,26 @@
+import type { RefObject } from "react";
+interface UseLayoutSwitchOptions {
+    /**
+     * The bar's collapse width, a change of which can switch the layout with no resize
+     */
+    collapse: string;
+    /**
+     * The bar's layout, whose resizes are watched
+     */
+    layoutRef: RefObject<HTMLElement | null>;
+    /**
+     * The bar's navigation, whose layout is read
+     */
+    navigationRef: RefObject<HTMLElement | null>;
+    /**
+     * Called each time the bar switches between its wide and collapsed layouts
+     */
+    onSwitch: () => void;
+}
+/**
+ * Reports a `NavBar` switching between its wide and collapsed layouts, from a resize or a new collapse width
+ *
+ * @param options the bar's collapse width, its layout and navigation, and what to call on a switch
+ */
+export declare function useLayoutSwitch({ collapse, layoutRef, navigationRef, onSwitch }: UseLayoutSwitchOptions): void;
+export {};

package/dist/components/NavBar/useLayoutSwitch.js

@@ -0,0 +1,25 @@
+import { isNavBarCollapsed as e } from "./isNavBarCollapsed.js";
+import { useEffect as t, useEffectEvent as n, useRef as r } from "react";
+import { c as i } from "react/compiler-runtime";
+// src/components/NavBar/useLayoutSwitch.ts
+function a(a) {
+	let o = i(8), { collapse: s, layoutRef: c, navigationRef: l, onSwitch: u } = a, d = r(null), f = n(u), p;
+	o[0] !== c || o[1] !== l || o[2] !== f ? (p = () => {
+		let t = c.current, n = l.current;
+		if (t === null || n === null) return;
+		let r = () => {
+			let t = e(n);
+			d.current !== null && d.current !== t && f(), d.current = t;
+		};
+		if (r(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(r);
+		return i.observe(t), () => i.disconnect();
+	}, o[0] = c, o[1] = l, o[2] = f, o[3] = p) : p = o[3];
+	let m;
+	o[4] !== s || o[5] !== c || o[6] !== l ? (m = [
+		s,
+		c,
+		l
+	], o[4] = s, o[5] = c, o[6] = l, o[7] = m) : m = o[7], t(p, m);
+}
+export { a as useLayoutSwitch };

package/dist/components/NavBar/useNavBarContext.d.ts

@@ -0,0 +1,9 @@
+import type { NavBarContextValue } from "./NavBarContext";
+/**
+ * Reads the state of the surrounding `NavBar`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `NavBar`'s state
+ * @throws MissingContextError when the part is not inside a `NavBar`
+ */
+export declare function useNavBarContext(part: string): NavBarContextValue;

package/dist/components/NavBar/useNavBarContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { NavBarContext as t } from "./NavBarContext.js";
+import { useContext as n } from "react";
+// src/components/NavBar/useNavBarContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "NavBar");
+	return i;
+}
+export { r as useNavBarContext };