@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/nav/nav.js

@@ -1,5 +1,5 @@
 import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
-import { Button } from "../button/button.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
 import { Tooltip as Tooltip$1 } from "../tooltip/tooltip.js";
 import { NavContext } from "./nav-context.js";
 import { EntryShell, entryAttributes } from "./nav-item-view.js";
@@ -7,14 +7,18 @@ import nav_module_default from "./nav.module.js";
 import { c } from "react/compiler-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { use, useState } from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { Collapsible } from "@base-ui/react/collapsible";
 // src/components/nav/nav.tsx
 var useOrientation = () => use(NavContext)?.orientation ?? "vertical";
+var useNav = () => {
+	return useRequiredContext(NavContext, "Nav.Hint must be rendered inside <Nav.Root>.");
+};
+/** The `<nav>`, holding the one hint its entries share. */
 var Root = (t0) => {
-	const $ = c(24);
+	const $ = c(18);
 	let children;
 	let className;
 	let props;
@@ -65,70 +69,201 @@ var Root = (t0) => {
 		$[14] = t4;
 	} else t4 = $[14];
 	let t5;
-	if ($[15] !== orientation) {
-		t5 = (t6) => {
-			const { payload } = t6;
+	if ($[15] !== t2 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavContext, {
+			value: t2,
+			children: t4
+		});
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+};
+/**
+* The one tooltip every entry with a `label` names itself through, so the hint
+* travels between entries rather than one closing as the next opens. Mount it
+* inside `Root` where the entries show no label, such as a collapsed rail.
+*
+* @example
+* <Nav.Root aria-label="Main">
+* 	<Nav.List>…</Nav.List>
+* 	{collapsed ? <Nav.Hint /> : null}
+* </Nav.Root>
+*/
+var Hint = (t0) => {
+	const $ = c(6);
+	const { className } = t0;
+	const { orientation, hint } = useNav();
+	let t1;
+	if ($[0] !== className || $[1] !== orientation) {
+		t1 = (t2) => {
+			const { payload } = t2;
 			return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 				side: orientation === "vertical" ? "right" : "bottom",
 				className: nav_module_default.hintPositioner,
-				children: /* @__PURE__ */ jsx(Tooltip$1.Popup, { children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
-					className: nav_module_default.hintViewport,
-					children: payload
-				}) })
+				children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+					className,
+					children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
+						className: nav_module_default.hintViewport,
+						children: payload
+					})
+				})
 			}) });
 		};
-		$[15] = orientation;
-		$[16] = t5;
-	} else t5 = $[16];
-	let t6;
-	if ($[17] !== hint || $[18] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Tooltip$1.Root, {
+		$[0] = className;
+		$[1] = orientation;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== hint || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tooltip$1.Root, {
 			handle: hint,
-			children: t5
-		});
-		$[17] = hint;
-		$[18] = t5;
-		$[19] = t6;
-	} else t6 = $[19];
-	let t7;
-	if ($[20] !== t2 || $[21] !== t4 || $[22] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(NavContext, {
-			value: t2,
-			children: [t4, t6]
+			children: t1
 		});
-		$[20] = t2;
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	return t7;
+		$[3] = hint;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 };
-var ACTIVE_ENTRY = ":scope > li:has(> [aria-current=\"page\"]), :scope > li:has(> [data-active=\"true\"])";
 /**
-* The entries. In a horizontal nav a pill slides to the entry marked
-* `aria-current="page"` or `data-active="true"`.
+* Lets a horizontal `List` scroll sideways once it outgrows its room.
+*
+* @example
+* <Nav.Scroller>
+* 	<Nav.List>…</Nav.List>
+* </Nav.Scroller>
 */
+var Scroller = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(nav_module_default.scroller, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** The entries, laid out along the nav's orientation. */
 var List = (t0) => {
-	const $ = c(25);
-	let children;
+	const $ = c(13);
 	let className;
 	let props;
 	let ref;
 	if ($[0] !== t0) {
-		({className, children, ref, ...props} = t0);
+		({className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
 	}
 	const orientation = useOrientation();
-	const horizontal = orientation === "horizontal";
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(nav_module_default.list, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== orientation || $[7] !== props || $[8] !== t1) {
+		t2 = {
+			"data-orientation": orientation,
+			className: t1,
+			...props
+		};
+		$[6] = orientation;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== t2) {
+		t3 = {
+			defaultTagName: "ul",
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return useRender(t3);
+};
+var ACTIVE_ENTRY = ":scope > li:has(> [aria-current=\"page\"]), :scope > li:has(> [data-active=\"true\"])";
+/**
+* The pill that slides to the entry marked `aria-current="page"` or
+* `data-active="true"`, inside a horizontal `List`.
+*
+* @example
+* <Nav.List>
+* 	<Nav.Indicator />
+* 	<Nav.Item>…</Nav.Item>
+* </Nav.List>
+*/
+var Indicator = (t0) => {
+	const $ = c(18);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	let t1;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
@@ -140,66 +275,43 @@ var List = (t0) => {
 	} else t1 = $[5];
 	const indicator = useSlidingIndicator(t1);
 	let t2;
-	if ($[6] !== className) {
-		t2 = clsx(nav_module_default.list, className);
-		$[6] = className;
-		$[7] = t2;
-	} else t2 = $[7];
+	if ($[6] !== indicator || $[7] !== ref) {
+		t2 = ref === void 0 ? indicator : [indicator, ref];
+		$[6] = indicator;
+		$[7] = ref;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[8] !== horizontal || $[9] !== indicator) {
-		t3 = horizontal ? /* @__PURE__ */ jsx("li", {
-			ref: indicator,
-			"aria-hidden": "true",
-			className: nav_module_default.indicator
-		}) : null;
-		$[8] = horizontal;
-		$[9] = indicator;
+	if ($[9] !== className) {
+		t3 = clsx(nav_module_default.indicator, className);
+		$[9] = className;
 		$[10] = t3;
 	} else t3 = $[10];
 	let t4;
-	if ($[11] !== children || $[12] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, children] });
-		$[11] = children;
+	if ($[11] !== props || $[12] !== t3) {
+		t4 = {
+			"aria-hidden": true,
+			...props,
+			className: t3
+		};
+		$[11] = props;
 		$[12] = t3;
 		$[13] = t4;
 	} else t4 = $[13];
 	let t5;
-	if ($[14] !== orientation || $[15] !== props || $[16] !== t2 || $[17] !== t4) {
+	if ($[14] !== render || $[15] !== t2 || $[16] !== t4) {
 		t5 = {
-			"data-orientation": orientation,
-			className: t2,
-			...props,
-			children: t4
+			defaultTagName: "li",
+			render,
+			ref: t2,
+			props: t4
 		};
-		$[14] = orientation;
-		$[15] = props;
-		$[16] = t2;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
-	let t6;
-	if ($[19] !== ref || $[20] !== t5) {
-		t6 = {
-			defaultTagName: "ul",
-			ref,
-			props: t5
-		};
-		$[19] = ref;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
-	const list = useRender(t6);
-	let t7;
-	if ($[22] !== horizontal || $[23] !== list) {
-		t7 = horizontal ? /* @__PURE__ */ jsx("div", {
-			className: nav_module_default.scroller,
-			children: list
-		}) : list;
-		$[22] = horizontal;
-		$[23] = list;
-		$[24] = t7;
-	} else t7 = $[24];
-	return t7;
+		$[14] = render;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return useRender(t5);
 };
 var Item = (props) => {
 	const $ = c(2);
@@ -217,74 +329,65 @@ var Item = (props) => {
 * `aria-current="page"` marks the current one.
 */
 var Link = (t0) => {
-	const $ = c(22);
+	const $ = c(18);
 	let className;
 	let label;
-	let labelled;
 	let layout;
 	let props;
 	if ($[0] !== t0) {
-		({layout, labelled, label, className, ...props} = t0);
+		({layout, label, className, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = label;
-		$[3] = labelled;
-		$[4] = layout;
-		$[5] = props;
+		$[3] = layout;
+		$[4] = props;
 	} else {
 		className = $[1];
 		label = $[2];
-		labelled = $[3];
-		layout = $[4];
-		props = $[5];
+		layout = $[3];
+		props = $[4];
 	}
 	const orientation = useOrientation();
 	let t1;
-	if ($[6] !== label || $[7] !== labelled || $[8] !== layout) {
+	if ($[5] !== label || $[6] !== layout) {
 		t1 = entryAttributes({
 			layout,
-			labelled,
 			label
 		});
-		$[6] = label;
-		$[7] = labelled;
-		$[8] = layout;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[5] = label;
+		$[6] = layout;
+		$[7] = t1;
+	} else t1 = $[7];
 	const t2 = orientation === "horizontal" ? nav_module_default.tab : nav_module_default.item;
 	let t3;
-	if ($[10] !== className || $[11] !== t2) {
+	if ($[8] !== className || $[9] !== t2) {
 		t3 = clsx(t2, className);
-		$[10] = className;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[8] = className;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
 	let t4;
-	if ($[13] !== props || $[14] !== t1 || $[15] !== t3) {
+	if ($[11] !== props || $[12] !== t1 || $[13] !== t3) {
 		t4 = /* @__PURE__ */ jsx("a", {
 			...t1,
 			className: t3,
 			...props
 		});
-		$[13] = props;
-		$[14] = t1;
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[17] !== label || $[18] !== labelled || $[19] !== layout || $[20] !== t4) {
+	if ($[15] !== label || $[16] !== t4) {
 		t5 = /* @__PURE__ */ jsx(EntryShell, {
-			layout,
-			labelled,
 			label,
 			element: t4
 		});
-		$[17] = label;
-		$[18] = labelled;
-		$[19] = layout;
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
+		$[15] = label;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
 	return t5;
 };
 /**
@@ -383,55 +486,43 @@ var GroupHeader = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only button that folds the group's subpages open and shut; its children are the chevron. */
+/**
+* The trigger that folds the group's subpages open and shut, rendered as the
+* button it is given.
+*
+* @example
+* <Nav.GroupToggle render={<IconButton label="Show subpages" variant="tertiary"><ExpandIcon /></IconButton>} />
+*/
 var GroupToggle = (t0) => {
-	const $ = c(13);
-	let children;
+	const $ = c(8);
 	let className;
-	let label;
 	let props;
 	if ($[0] !== t0) {
-		({label, children, className, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = label;
-		$[4] = props;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		label = $[3];
-		props = $[4];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[5] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(nav_module_default.groupToggle, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Collapsible.Trigger, {});
-		$[7] = t2;
-	} else t2 = $[7];
-	let t3;
-	if ($[8] !== children || $[9] !== label || $[10] !== props || $[11] !== t1) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			...props,
-			variant: "tertiary",
-			iconOnly: true,
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Trigger, {
 			className: t1,
-			icon: children,
-			label,
-			render: t2
+			...props
 		});
-		$[8] = children;
-		$[9] = label;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t3;
-	} else t3 = $[12];
-	return t3;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /** The fold that opens and shuts the group's `GroupList`. */
 var GroupPanel = (t0) => {
@@ -498,10 +589,11 @@ var GroupList = (t0) => {
 	return t2;
 };
 /**
-* Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs
-* with a pill that slides to the current page, or the app's vertical rail,
-* whose destinations with subpages fold them open in a `Group`. An entry that
-* is not a link is a `NavItemView.Root`.
+* Navigation between pages as `nav > ul > li > a`: a horizontal bar of tabs,
+* in a `Scroller` with an `Indicator` that slides to the current page, or the
+* app's vertical rail, whose destinations with subpages fold them open in a
+* `Group` and whose entries without a visible label are named by the `Hint`.
+* An entry that is not a link is a `NavItemView.Root`.
 *
 * @example
 * const NavLink = createLink(Nav.Link);
@@ -509,7 +601,7 @@ var GroupList = (t0) => {
 * <Nav.Root aria-label="Main">
 * 	<Nav.List>
 * 		<Nav.Item>
-* 			<NavLink to="/" label="Home" activeOptions={{ exact: true }}>
+* 			<NavLink to="/" activeOptions={{ exact: true }}>
 * 				<NavItemView.Icon><HomeIcon /></NavItemView.Icon>
 * 				<NavItemView.Label>Home</NavItemView.Label>
 * 			</NavLink>
@@ -519,7 +611,10 @@ var GroupList = (t0) => {
 */
 var Nav = {
 	Root,
+	Hint,
+	Scroller,
 	List,
+	Indicator,
 	Item,
 	Link,
 	Group,

package/dist/components/nav/nav.module.js

@@ -1,19 +1,21 @@
 import './nav.css';// src/components/nav/nav.module.scss
-var scroller = "_scroller_9ce88_3";
-var list = "_list_9ce88_7";
-var indicator = "_indicator_9ce88_21";
-var tab = "_tab_9ce88_59";
-var iconSlot = "_iconSlot_9ce88_103";
-var item = "_item_9ce88_110";
-var label = "_label_9ce88_166";
-var hintPositioner = "_hintPositioner_9ce88_215";
-var hintViewport = "_hintViewport_9ce88_224";
-var group = "_group_9ce88_237";
-var groupHeader = "_groupHeader_9ce88_241";
-var groupToggle = "_groupToggle_9ce88_257";
-var groupPanel = "_groupPanel_9ce88_268";
-var groupList = "_groupList_9ce88_283";
+var root = "_root_1hb8v_3";
+var scroller = "_scroller_1hb8v_9";
+var list = "_list_1hb8v_13";
+var indicator = "_indicator_1hb8v_27";
+var tab = "_tab_1hb8v_65";
+var iconSlot = "_iconSlot_1hb8v_109";
+var item = "_item_1hb8v_116";
+var label = "_label_1hb8v_216";
+var hintPositioner = "_hintPositioner_1hb8v_222";
+var hintViewport = "_hintViewport_1hb8v_231";
+var group = "_group_1hb8v_244";
+var groupHeader = "_groupHeader_1hb8v_248";
+var groupToggle = "_groupToggle_1hb8v_264";
+var groupPanel = "_groupPanel_1hb8v_278";
+var groupList = "_groupList_1hb8v_293";
 var nav_module_default = {
+	root,
 	scroller,
 	list,
 	indicator,
@@ -29,4 +31,4 @@ var nav_module_default = {
 	groupPanel,
 	groupList
 };
-export { nav_module_default as default, group, groupHeader, groupList, groupPanel, groupToggle, hintPositioner, hintViewport, iconSlot, indicator, item, label, list, scroller, tab };
+export { nav_module_default as default, group, groupHeader, groupList, groupPanel, groupToggle, hintPositioner, hintViewport, iconSlot, indicator, item, label, list, root, scroller, tab };