@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/navigation/NavItem.d.ts

@@ -0,0 +1,54 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { BadgeProps } from "../badge/Badge.js";
+import "./nav-item-styles.js";
+import { ReactElement, ReactNode, RefObject } from "react";
+//#region src/components/navigation/NavItem.d.ts
+export interface NavItemClassNames {
+  /** The item's button or link, merged with `className`. */
+  root?: string;
+  /** The pill around the icon that holds the active indicator and the state layer. */
+  pill?: string;
+  /** The active indicator: the filled pill shown on the current destination. */
+  indicator?: string;
+  /** The state layer over the pill (hover, focus and press). */
+  stateLayer?: string;
+  /** The icon. */
+  icon?: string;
+  /** The label text. */
+  label?: string;
+  /** The badge's wrapper: on the icon, or after the label in the expanded rail. */
+  badge?: string;
+}
+export interface NavItemOwnProps {
+  /** The icon. Hidden from assistive tech; the label names the item. */
+  icon: ReactElement;
+  /** Icon shown while selected, e.g. a filled variant. */
+  selectedIcon?: ReactElement;
+  /** The label. */
+  children: ReactNode;
+  /** Marks the current destination (`aria-current="page"`). */
+  selected?: boolean;
+  /**
+   * A `Badge` for dynamic information, such as a count. It overlaps the icon's top end, or
+   * sits after the label in the expanded rail. It describes the item to assistive tech
+   * with its text, or with `badgeLabel`.
+   */
+  badge?: ReactElement<BadgeProps>;
+  /**
+   * What the badge means, read after the item's name, e.g. "3 new messages". Defaults to
+   * the badge's `label` or text; a small (dot) badge reads its `labels.newNotification`
+   * ("New notification"), as M3 asks of badges without a count.
+   */
+  badgeLabel?: string;
+  /**
+   * Called when the current destination is pressed again. M3: re-selecting the active
+   * destination resets the page's scroll position to the top, so scroll to the top here.
+   */
+  onReselect?: () => void;
+  /** Classes for each part, by slot. */
+  classNames?: NavItemClassNames;
+}
+type OmitItem<T> = Omit<T, keyof NavItemOwnProps | 'toggle'>;
+export type NavItemProps = NavItemOwnProps & (OmitItem<ButtonBaseActionProps> | OmitItem<ButtonBaseLinkProps>);
+//#endregion
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/components/navigation/NavItem.js

@@ -0,0 +1,182 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { useM3Spring } from "../../motion/use-m3-spring.js";
+import { setRippleOrigin, useRippleHold } from "../../primitives/use-m3-interaction.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { BadgedBox } from "../badge/Badge.js";
+import { navItemStyles } from "./nav-item-styles.js";
+import { isValidElement, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animate, useReducedMotion } from "motion/react";
+//#region src/components/navigation/NavItem.tsx
+/**
+* Slides the current item's pill from the previous current item's, on the fast spatial
+* spring, changing width on the way when their labels differ. `lastIndicatorRef` holds the
+* last current pill for every item in one list; without it the pill doesn't slide, and under
+* reduced motion it fades in place.
+*/
+function useSlidingIndicator(selected, lastIndicatorRef) {
+	const indicatorRef = useRef(null);
+	const wasSelected = useRef(selected);
+	const spring = useM3Spring("spatial", "fast");
+	const reducedMotion = useReducedMotion();
+	useLayoutEffect(() => {
+		const indicator = indicatorRef.current;
+		const changed = wasSelected.current !== selected;
+		wasSelected.current = selected;
+		if (!lastIndicatorRef || !selected || !indicator) return;
+		const previous = lastIndicatorRef.current;
+		lastIndicatorRef.current = indicator;
+		if (!changed || reducedMotion || !previous?.isConnected || previous === indicator) return;
+		indicator.style.transform = "";
+		indicator.style.width = "";
+		const from = previous.getBoundingClientRect();
+		const to = indicator.getBoundingClientRect();
+		const offset = from.top - to.top;
+		if (offset === 0) return;
+		indicator.style.transform = `translateY(${offset}px)`;
+		if (from.width === to.width) {
+			animate(indicator, { y: [offset, 0] }, spring);
+			return;
+		}
+		indicator.style.width = `${from.width}px`;
+		animate(indicator, {
+			y: [offset, 0],
+			width: [from.width, to.width]
+		}, spring).then(() => {
+			indicator.style.width = "";
+		});
+	}, [
+		selected,
+		lastIndicatorRef,
+		reducedMotion,
+		spring
+	]);
+	return indicatorRef;
+}
+/**
+* What a badge tells assistive tech about its item: its `label`, its text, or, for a small
+* badge (no children), "New notification" (`labels.newNotification`).
+*/
+function badgeDescription(badge) {
+	if (!isValidElement(badge)) return null;
+	const { label, labels, children } = badge.props;
+	if (label != null) return label;
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (children == null || children === false) return labels?.newNotification ?? "New notification";
+	return null;
+}
+/** Shared navigation item: a link (`href`) or button with the M3 pill indicator. */
+function NavItem({ layout, enterLabel, lastIndicatorRef, icon, selectedIcon, children, selected, badge, badgeLabel, onReselect, classNames, className, ...base }) {
+	const styles = navItemStyles({
+		layout,
+		enterLabel,
+		slide: Boolean(lastIndicatorRef)
+	});
+	const indicatorRef = useSlidingIndicator(Boolean(selected), lastIndicatorRef);
+	const descriptionId = useId();
+	const inline = layout === "rail-start" || layout === "bar-start";
+	const badgeAfterLabel = layout === "rail-start";
+	const description = badgeLabel ?? badgeDescription(badge);
+	const label = /* @__PURE__ */ jsx("span", {
+		"data-nav-label": "",
+		"data-slot": "label",
+		className: styles.label({ class: classNames?.label }),
+		children
+	});
+	const iconFaces = selectedIcon ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"data-shown": !selected || void 0,
+		className: styles.iconFace(),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		"data-shown": selected || void 0,
+		className: styles.iconFace(),
+		children: selectedIcon
+	})] }) : icon;
+	const action = base;
+	const stateLayerRef = useRef(null);
+	const [pressed, setPressed] = useState(false);
+	const rippling = useRippleHold(pressed && !action.disabled);
+	return /* @__PURE__ */ jsxs(ButtonBase, {
+		...action,
+		onPress: (event) => {
+			action.onPress?.(event);
+			if (selected) onReselect?.();
+		},
+		onPressChange: (isPressed) => {
+			action.onPressChange?.(isPressed);
+			setPressed(isPressed);
+		},
+		onPointerDown: (event) => {
+			action.onPointerDown?.(event);
+			if (stateLayerRef.current && !action.disabled && event.button === 0) setRippleOrigin(stateLayerRef.current, event.clientX, event.clientY);
+		},
+		onKeyDown: (event) => {
+			action.onKeyDown?.(event);
+			if (stateLayerRef.current && !action.disabled && (event.key === "Enter" || event.key === " ")) setRippleOrigin(stateLayerRef.current);
+		},
+		"data-nav-item": "",
+		"aria-current": selected ? "page" : void 0,
+		"aria-describedby": [action["aria-describedby"], badge && description != null ? descriptionId : void 0].filter(Boolean).join(" ") || void 0,
+		"data-current": selected || void 0,
+		"data-tokens": mergeDataTokens(layout.startsWith("rail") ? "md-comp-nav-rail" : "md-comp-nav-bar", action),
+		"data-layout": layout,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "pill",
+				className: styles.pill({ class: classNames?.pill }),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						ref: indicatorRef,
+						"aria-hidden": "true",
+						"data-slot": "indicator",
+						className: styles.indicator({ class: classNames?.indicator })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						ref: stateLayerRef,
+						"aria-hidden": "true",
+						"data-rippling": rippling || void 0,
+						"data-disabled": action.disabled || void 0,
+						className: styles.stateLayer({ class: classNames?.stateLayer })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: styles.content(),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "icon",
+								className: styles.icon({ class: classNames?.icon }),
+								children: badge && !badgeAfterLabel ? /* @__PURE__ */ jsx(BadgedBox, {
+									badge,
+									className: styles.badgedBox({ class: classNames?.badge }),
+									children: /* @__PURE__ */ jsx("span", {
+										className: styles.iconStack(),
+										children: iconFaces
+									})
+								}) : iconFaces
+							}),
+							inline && label,
+							badge && badgeAfterLabel && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: styles.badge({ class: classNames?.badge }),
+								children: badge
+							})
+						]
+					})
+				]
+			}),
+			!inline && label,
+			badge && description != null && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				hidden: true,
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+export { NavItem };
+
+//# sourceMappingURL=NavItem.js.map

package/dist/components/navigation/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","names":[],"sources":["../../../src/components/navigation/NavItem.tsx"],"sourcesContent":["'use client';\n\nimport { animate, useReducedMotion } from 'motion/react';\nimport {\n  isValidElement,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { setRippleOrigin, useRippleHold } from '../../primitives/use-m3-interaction';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n} from '../../primitives/ButtonBase';\nimport { cn } from '../../utils/cn';\nimport { BadgedBox, type BadgeProps } from '../badge/Badge';\nimport { navItemStyles, type NavItemLayout } from './nav-item-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface NavItemClassNames {\n  /** The item's button or link, merged with `className`. */\n  root?: string;\n  /** The pill around the icon that holds the active indicator and the state layer. */\n  pill?: string;\n  /** The active indicator: the filled pill shown on the current destination. */\n  indicator?: string;\n  /** The state layer over the pill (hover, focus and press). */\n  stateLayer?: string;\n  /** The icon. */\n  icon?: string;\n  /** The label text. */\n  label?: string;\n  /** The badge's wrapper: on the icon, or after the label in the expanded rail. */\n  badge?: string;\n}\n\nexport interface NavItemOwnProps {\n  /** The icon. Hidden from assistive tech; the label names the item. */\n  icon: ReactElement;\n  /** Icon shown while selected, e.g. a filled variant. */\n  selectedIcon?: ReactElement;\n  /** The label. */\n  children: ReactNode;\n  /** Marks the current destination (`aria-current=\"page\"`). */\n  selected?: boolean;\n  /**\n   * A `Badge` for dynamic information, such as a count. It overlaps the icon's top end, or\n   * sits after the label in the expanded rail. It describes the item to assistive tech\n   * with its text, or with `badgeLabel`.\n   */\n  badge?: ReactElement<BadgeProps>;\n  /**\n   * What the badge means, read after the item's name, e.g. \"3 new messages\". Defaults to\n   * the badge's `label` or text; a small (dot) badge reads its `labels.newNotification`\n   * (\"New notification\"), as M3 asks of badges without a count.\n   */\n  badgeLabel?: string;\n  /**\n   * Called when the current destination is pressed again. M3: re-selecting the active\n   * destination resets the page's scroll position to the top, so scroll to the top here.\n   */\n  onReselect?: () => void;\n  /** Classes for each part, by slot. */\n  classNames?: NavItemClassNames;\n}\n\ntype OmitItem<T> = Omit<T, keyof NavItemOwnProps | 'toggle'>;\n\nexport type NavItemProps = NavItemOwnProps &\n  (OmitItem<ButtonBaseActionProps> | OmitItem<ButtonBaseLinkProps>);\n\n/**\n * Slides the current item's pill from the previous current item's, on the fast spatial\n * spring, changing width on the way when their labels differ. `lastIndicatorRef` holds the\n * last current pill for every item in one list; without it the pill doesn't slide, and under\n * reduced motion it fades in place.\n */\nfunction useSlidingIndicator(\n  selected: boolean,\n  lastIndicatorRef: RefObject<HTMLElement | null> | undefined,\n) {\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n  const wasSelected = useRef(selected);\n  const spring = useM3Spring('spatial', 'fast');\n  const reducedMotion = useReducedMotion();\n  useLayoutEffect(() => {\n    const indicator = indicatorRef.current;\n    const changed = wasSelected.current !== selected;\n    wasSelected.current = selected;\n    if (!lastIndicatorRef || !selected || !indicator) return;\n    const previous = lastIndicatorRef.current;\n    lastIndicatorRef.current = indicator;\n    if (!changed || reducedMotion || !previous?.isConnected || previous === indicator) return;\n    // Measure both pills at rest; an earlier slide may have left a transform or width behind.\n    indicator.style.transform = '';\n    indicator.style.width = '';\n    const from = previous.getBoundingClientRect();\n    const to = indicator.getBoundingClientRect();\n    const offset = from.top - to.top;\n    if (offset === 0) return;\n    // Start from the old place and width now: Motion's first frame comes a frame later.\n    indicator.style.transform = `translateY(${offset}px)`;\n    if (from.width === to.width) {\n      animate(indicator, { y: [offset, 0] }, spring);\n      return;\n    }\n    indicator.style.width = `${from.width}px`;\n    // Width animates in px; once settled the pill sizes itself to its content again.\n    void animate(indicator, { y: [offset, 0], width: [from.width, to.width] }, spring).then(() => {\n      indicator.style.width = '';\n    });\n  }, [selected, lastIndicatorRef, reducedMotion, spring]);\n  return indicatorRef;\n}\n\n/**\n * What a badge tells assistive tech about its item: its `label`, its text, or, for a small\n * badge (no children), \"New notification\" (`labels.newNotification`).\n */\nfunction badgeDescription(badge: ReactElement<BadgeProps> | undefined): string | null {\n  // A badge can arrive as a lazy server reference without props yet (React's dev server\n  // rendering), so read it only from a real element.\n  if (!isValidElement<BadgeProps>(badge)) return null;\n  const { label, labels, children } = badge.props;\n  if (label != null) return label;\n  if (typeof children === 'string' || typeof children === 'number') return String(children);\n  if (children == null || children === false) {\n    return labels?.newNotification ?? 'New notification';\n  }\n  return null;\n}\n\n/** Shared navigation item: a link (`href`) or button with the M3 pill indicator. */\nexport function NavItem({\n  layout,\n  enterLabel,\n  lastIndicatorRef,\n  icon,\n  selectedIcon,\n  children,\n  selected,\n  badge,\n  badgeLabel,\n  onReselect,\n  classNames,\n  className,\n  ...base\n}: NavItemProps & {\n  layout: NavItemLayout;\n  enterLabel?: boolean;\n  /** The list's last current pill, so this item's pill slides from it when it becomes current. */\n  lastIndicatorRef?: RefObject<HTMLElement | null>;\n}) {\n  const styles = navItemStyles({ layout, enterLabel, slide: Boolean(lastIndicatorRef) });\n  const indicatorRef = useSlidingIndicator(Boolean(selected), lastIndicatorRef);\n  const descriptionId = useId();\n  const inline = layout === 'rail-start' || layout === 'bar-start';\n  // M3: badges sit on the icon, except in the expanded rail, where they follow the label.\n  const badgeAfterLabel = layout === 'rail-start';\n  const description = badgeLabel ?? badgeDescription(badge);\n  const label = (\n    <span\n      data-nav-label=\"\"\n      data-slot=\"label\"\n      className={styles.label({ class: classNames?.label })}\n    >\n      {children}\n    </span>\n  );\n  const iconFaces = selectedIcon ? (\n    <>\n      <span data-shown={!selected || undefined} className={styles.iconFace()}>\n        {icon}\n      </span>\n      <span data-shown={selected || undefined} className={styles.iconFace()}>\n        {selectedIcon}\n      </span>\n    </>\n  ) : (\n    icon\n  );\n  const action = base as ButtonBaseActionProps;\n  // M3: a press ripples through the pill. The item is the pressable element, so the pill's\n  // state layer gets its own press state and a ripple origin in its own box.\n  const stateLayerRef = useRef<HTMLSpanElement>(null);\n  const [pressed, setPressed] = useState(false);\n  const rippling = useRippleHold(pressed && !action.disabled);\n  return (\n    <ButtonBase\n      {...action}\n      onPress={(event) => {\n        action.onPress?.(event);\n        if (selected) onReselect?.();\n      }}\n      onPressChange={(isPressed) => {\n        action.onPressChange?.(isPressed);\n        setPressed(isPressed);\n      }}\n      onPointerDown={(event: PointerEvent<HTMLButtonElement>) => {\n        action.onPointerDown?.(event);\n        if (stateLayerRef.current && !action.disabled && event.button === 0) {\n          setRippleOrigin(stateLayerRef.current, event.clientX, event.clientY);\n        }\n      }}\n      onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {\n        action.onKeyDown?.(event);\n        if (\n          stateLayerRef.current &&\n          !action.disabled &&\n          (event.key === 'Enter' || event.key === ' ')\n        ) {\n          setRippleOrigin(stateLayerRef.current);\n        }\n      }}\n      data-nav-item=\"\"\n      aria-current={selected ? 'page' : undefined}\n      aria-describedby={\n        [action['aria-describedby'], badge && description != null ? descriptionId : undefined]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n      data-current={selected || undefined}\n      // The bar's or rail's component tokens, resolved on the item for its state and layout.\n      data-tokens={mergeDataTokens(\n        layout.startsWith('rail') ? 'md-comp-nav-rail' : 'md-comp-nav-bar',\n        action,\n      )}\n      data-layout={layout}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <span data-slot=\"pill\" className={styles.pill({ class: classNames?.pill })}>\n        <span\n          ref={indicatorRef}\n          aria-hidden=\"true\"\n          data-slot=\"indicator\"\n          className={styles.indicator({ class: classNames?.indicator })}\n        />\n        <span\n          ref={stateLayerRef}\n          aria-hidden=\"true\"\n          data-rippling={rippling || undefined}\n          data-disabled={action.disabled || undefined}\n          className={styles.stateLayer({ class: classNames?.stateLayer })}\n        />\n        <span className={styles.content()}>\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className={styles.icon({ class: classNames?.icon })}\n          >\n            {badge && !badgeAfterLabel ? (\n              <BadgedBox badge={badge} className={styles.badgedBox({ class: classNames?.badge })}>\n                <span className={styles.iconStack()}>{iconFaces}</span>\n              </BadgedBox>\n            ) : (\n              iconFaces\n            )}\n          </span>\n          {inline && label}\n          {badge && badgeAfterLabel && (\n            <span aria-hidden=\"true\" className={styles.badge({ class: classNames?.badge })}>\n              {badge}\n            </span>\n          )}\n        </span>\n      </span>\n      {!inline && label}\n      {badge && description != null && (\n        <span id={descriptionId} hidden>\n          {description}\n        </span>\n      )}\n    </ButtonBase>\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/NavigationBar.d.ts

@@ -0,0 +1,64 @@
+import { NavItemProps } from "./NavItem.js";
+import { NavigationBarArrangement } from "./navigation-styles.js";
+import { ComponentPropsWithRef, ReactNode, RefObject } from "react";
+//#region src/components/navigation/NavigationBar.d.ts
+type Naming = {
+  /** Accessible name for the navigation bar. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the navigation bar. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+export interface NavigationBarClassNames {
+  /** The `<nav>` container, merged with `className`. */
+  root?: string;
+  /** Every item in the bar, merged with each item's own classes. */
+  item?: string;
+}
+interface NavigationBarOwnProps {
+  /**
+   * Icons above labels (compact windows) or beside them (the flexible bar in medium
+   * windows). Items beside their icons stack, sharing the width equally, whenever their
+   * labels don't fit on one line side by side (a narrow bar or large text), so no label is
+   * cut off; the bar then carries `data-stacked`. @default "top"
+   */
+  iconPlacement?: 'top' | 'start';
+  /**
+   * Share the width equally, or centre the items. Stacked items centre within side
+   * padding; items beside their icons keep their own width, with the extra space at the
+   * ends. @default "equal", or "centered" when iconPlacement is "start"
+   */
+  arrangement?: NavigationBarArrangement;
+  /**
+   * `hide-on-scroll` slides the bar off the bottom while the page scrolls down and back
+   * on any scroll up. The bar becomes `sticky` at the bottom, so put it last in a
+   * scrolling layout and don't add positioning classes. It stays put under reduced
+   * motion. M3: don't hide the bar on scroll when a screen reader is active, so leave
+   * this off where assistive tech is in use. @default "pinned"
+   */
+  scrollBehavior?: 'pinned' | 'hide-on-scroll';
+  /** With `hide-on-scroll`, the element that scrolls instead of the page. */
+  scrollRef?: RefObject<HTMLElement | null>;
+  /** `NavigationBarItem` elements (3–5 in M3). */
+  children: ReactNode;
+  /** Classes for each part, by slot. */
+  classNames?: NavigationBarClassNames;
+}
+export type NavigationBarProps = NavigationBarOwnProps & Naming & Omit<ComponentPropsWithRef<'nav'>, keyof NavigationBarOwnProps | 'aria-label' | 'aria-labelledby'>;
+/**
+ * M3 Expressive flexible navigation bar: 3–5 destinations along the bottom of compact and
+ * medium windows. Items stack the icon above the label, or (`iconPlacement="start"`) place
+ * it beside the label in a 40px pill. Labels wrap rather than truncate, and the bar grows
+ * to fit them. Tab or the arrow keys move between items.
+ *
+ * @example
+ * <NavigationBar aria-label="Main" className="fixed inset-x-0 bottom-0">
+ *   <NavigationBarItem href="/" icon={<HomeIcon />} selected>Home</NavigationBarItem>
+ * </NavigationBar>
+ */
+export declare function NavigationBar({ iconPlacement, arrangement, scrollBehavior, scrollRef, children, classNames, className, style, ref, onKeyDown, ...rest }: NavigationBarProps): import("react").JSX.Element;
+export type NavigationBarItemProps = NavItemProps;
+/** A destination in a {@link NavigationBar}: a link (`href`) or a button. */
+export declare function NavigationBarItem({ className, ...props }: NavigationBarItemProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=NavigationBar.d.ts.map

package/dist/components/navigation/NavigationBar.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { useWarnOnce } from "../../utils/warn-once.js";
+import { NavItem } from "./NavItem.js";
+import { navigationBarStyles } from "./navigation-styles.js";
+import { onItemArrowKeys } from "./use-item-arrow-keys.js";
+import { useHideOnScroll } from "./use-hide-on-scroll.js";
+import { Children, createContext, isValidElement, useContext, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+//#region src/components/navigation/NavigationBar.tsx
+const BarContext = createContext(null);
+/**
+* M3 Expressive flexible navigation bar: 3–5 destinations along the bottom of compact and
+* medium windows. Items stack the icon above the label, or (`iconPlacement="start"`) place
+* it beside the label in a 40px pill. Labels wrap rather than truncate, and the bar grows
+* to fit them. Tab or the arrow keys move between items.
+*
+* @example
+* <NavigationBar aria-label="Main" className="fixed inset-x-0 bottom-0">
+*   <NavigationBarItem href="/" icon={<HomeIcon />} selected>Home</NavigationBarItem>
+* </NavigationBar>
+*/
+function NavigationBar({ iconPlacement = "top", arrangement = iconPlacement === "start" ? "centered" : "equal", scrollBehavior = "pinned", scrollRef, children, classNames, className, style, ref, onKeyDown, ...rest }) {
+	const navRef = useObjectRef(ref);
+	const hideOnScroll = scrollBehavior === "hide-on-scroll";
+	useHideOnScroll(hideOnScroll, navRef, scrollRef);
+	const stacked = useStackWhenCrowded(navRef, iconPlacement === "start");
+	const layout = stacked ? "top" : iconPlacement;
+	const styles = navigationBarStyles({
+		arrangement: stacked ? "equal" : arrangement,
+		iconPlacement: layout,
+		hideOnScroll
+	});
+	const count = Children.toArray(children).filter(isValidElement).length;
+	useWarnOnce(count > 0 && (count < 3 || count > 5), `[@windmorph/react] A NavigationBar should have 3 to 5 destinations (M3); it has ${count}. Use tabs for two, and a navigation rail for more than five.`);
+	const padding = arrangement === "centered" && iconPlacement === "top" && count <= 6 ? `${(100 - 10 * (count + 3)) / 2}%` : void 0;
+	const arrowKeys = onItemArrowKeys("horizontal");
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		ref: navRef,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			arrowKeys(event);
+		},
+		style: {
+			paddingInline: padding,
+			...style
+		},
+		"data-tokens": mergeDataTokens("md-comp-nav-bar", rest),
+		"data-stacked": stacked || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(BarContext, {
+			value: {
+				iconPlacement: layout,
+				itemClassName: styles.item({ class: classNames?.item })
+			},
+			children
+		})
+	});
+}
+/**
+* An inline item's width besides its label: 4px outside the pill on each side, 16px inside
+* it, a 24px icon and the 4px gap before the label (`nav-item-styles.ts`, `bar-start`).
+*/
+const INLINE_ITEM_CHROME = 68;
+/**
+* Whether inline items must stack because their labels don't fit on one line side by side,
+* as at large text sizes (M3: "Ensure the full label is always visible on-screen at up to 2x
+* text sizing"; 2026-10-15). Each label is measured on one line (the same type role in both
+* layouts, so the answer doesn't change with the layout it picks), again whenever the bar
+* or a label resizes (a narrower window, a larger root text size, a web font loading).
+*/
+function useStackWhenCrowded(navRef, inline) {
+	const [stacked, setStacked] = useState(false);
+	useLayoutEffect(() => {
+		const nav = navRef.current;
+		if (!inline || !nav) {
+			setStacked(false);
+			return;
+		}
+		const labels = () => [...nav.querySelectorAll("[data-nav-label]")];
+		const measure = () => {
+			if (nav.clientWidth === 0) return setStacked(false);
+			let needed = 0;
+			for (const label of labels()) {
+				const wrap = label.style.whiteSpace;
+				label.style.whiteSpace = "nowrap";
+				const badge = label.closest("[data-nav-item]")?.querySelector("[data-size=\"large\"]");
+				const overhang = badge ? Math.max(0, badge.offsetWidth - 12) : 0;
+				needed += label.scrollWidth + INLINE_ITEM_CHROME + overhang;
+				label.style.whiteSpace = wrap;
+			}
+			const style = getComputedStyle(nav);
+			const available = nav.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+			setStacked(needed > available + .5);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(nav);
+		labels().forEach((label) => observer.observe(label));
+		return () => observer.disconnect();
+	}, [navRef, inline]);
+	return inline && stacked;
+}
+/** A destination in a {@link NavigationBar}: a link (`href`) or a button. */
+function NavigationBarItem({ className, ...props }) {
+	const bar = useContext(BarContext);
+	if (!bar) throw new Error("NavigationBarItem must be rendered inside a NavigationBar");
+	return /* @__PURE__ */ jsx(NavItem, {
+		...props,
+		className: cn(bar.itemClassName, className),
+		layout: bar.iconPlacement === "start" ? "bar-start" : "bar-top"
+	});
+}
+//#endregion
+export { NavigationBar, NavigationBarItem };
+
+//# sourceMappingURL=NavigationBar.js.map

package/dist/components/navigation/NavigationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.js","names":[],"sources":["../../../src/components/navigation/NavigationBar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useLayoutEffect,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { cn } from '../../utils/cn';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport { NavItem, type NavItemProps } from './NavItem';\nimport { navigationBarStyles, type NavigationBarArrangement } from './navigation-styles';\nimport { useHideOnScroll } from './use-hide-on-scroll';\nimport { onItemArrowKeys } from './use-item-arrow-keys';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\ninterface BarContextValue {\n  iconPlacement: 'top' | 'start';\n  itemClassName: string;\n}\n\nconst BarContext = createContext<BarContextValue | null>(null);\n\ntype Naming =\n  | {\n      /** Accessible name for the navigation bar. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the navigation bar. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\nexport interface NavigationBarClassNames {\n  /** The `<nav>` container, merged with `className`. */\n  root?: string;\n  /** Every item in the bar, merged with each item's own classes. */\n  item?: string;\n}\n\ninterface NavigationBarOwnProps {\n  /**\n   * Icons above labels (compact windows) or beside them (the flexible bar in medium\n   * windows). Items beside their icons stack, sharing the width equally, whenever their\n   * labels don't fit on one line side by side (a narrow bar or large text), so no label is\n   * cut off; the bar then carries `data-stacked`. @default \"top\"\n   */\n  iconPlacement?: 'top' | 'start';\n  /**\n   * Share the width equally, or centre the items. Stacked items centre within side\n   * padding; items beside their icons keep their own width, with the extra space at the\n   * ends. @default \"equal\", or \"centered\" when iconPlacement is \"start\"\n   */\n  arrangement?: NavigationBarArrangement;\n  /**\n   * `hide-on-scroll` slides the bar off the bottom while the page scrolls down and back\n   * on any scroll up. The bar becomes `sticky` at the bottom, so put it last in a\n   * scrolling layout and don't add positioning classes. It stays put under reduced\n   * motion. M3: don't hide the bar on scroll when a screen reader is active, so leave\n   * this off where assistive tech is in use. @default \"pinned\"\n   */\n  scrollBehavior?: 'pinned' | 'hide-on-scroll';\n  /** With `hide-on-scroll`, the element that scrolls instead of the page. */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** `NavigationBarItem` elements (3–5 in M3). */\n  children: ReactNode;\n  /** Classes for each part, by slot. */\n  classNames?: NavigationBarClassNames;\n}\n\nexport type NavigationBarProps = NavigationBarOwnProps &\n  Naming &\n  Omit<\n    ComponentPropsWithRef<'nav'>,\n    keyof NavigationBarOwnProps | 'aria-label' | 'aria-labelledby'\n  >;\n\n/**\n * M3 Expressive flexible navigation bar: 3–5 destinations along the bottom of compact and\n * medium windows. Items stack the icon above the label, or (`iconPlacement=\"start\"`) place\n * it beside the label in a 40px pill. Labels wrap rather than truncate, and the bar grows\n * to fit them. Tab or the arrow keys move between items.\n *\n * @example\n * <NavigationBar aria-label=\"Main\" className=\"fixed inset-x-0 bottom-0\">\n *   <NavigationBarItem href=\"/\" icon={<HomeIcon />} selected>Home</NavigationBarItem>\n * </NavigationBar>\n */\nexport function NavigationBar({\n  iconPlacement = 'top',\n  arrangement = iconPlacement === 'start' ? 'centered' : 'equal',\n  scrollBehavior = 'pinned',\n  scrollRef,\n  children,\n  classNames,\n  className,\n  style,\n  ref,\n  onKeyDown,\n  ...rest\n}: NavigationBarProps) {\n  const navRef = useObjectRef(ref);\n  const hideOnScroll = scrollBehavior === 'hide-on-scroll';\n  useHideOnScroll(hideOnScroll, navRef, scrollRef);\n  const stacked = useStackWhenCrowded(navRef, iconPlacement === 'start');\n  // Inline items that don't fit on one line become stacked items sharing the width equally.\n  const layout = stacked ? 'top' : iconPlacement;\n  const styles = navigationBarStyles({\n    arrangement: stacked ? 'equal' : arrangement,\n    iconPlacement: layout,\n    hideOnScroll,\n  });\n  const count = Children.toArray(children).filter(isValidElement).length;\n  // M3: a navigation bar holds three to five destinations (fewer: tabs; more: a rail).\n  useWarnOnce(\n    count > 0 && (count < 3 || count > 5),\n    `[@windmorph/react] A NavigationBar should have 3 to 5 destinations (M3); it has ${count}. Use tabs for two, and a navigation rail for more than five.`,\n  );\n  // Compose: centred stacked items sit within (100% − 10% × (n + 3)) / 2 each side, up to 6.\n  const padding =\n    arrangement === 'centered' && iconPlacement === 'top' && count <= 6\n      ? `${(100 - 10 * (count + 3)) / 2}%`\n      : undefined;\n  const arrowKeys = onItemArrowKeys('horizontal');\n  return (\n    <nav\n      {...rest}\n      ref={navRef}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        arrowKeys(event);\n      }}\n      style={{ paddingInline: padding, ...style } as CSSProperties}\n      data-tokens={mergeDataTokens('md-comp-nav-bar', rest)}\n      data-stacked={stacked || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <BarContext\n        value={{ iconPlacement: layout, itemClassName: styles.item({ class: classNames?.item }) }}\n      >\n        {children}\n      </BarContext>\n    </nav>\n  );\n}\n\n/**\n * An inline item's width besides its label: 4px outside the pill on each side, 16px inside\n * it, a 24px icon and the 4px gap before the label (`nav-item-styles.ts`, `bar-start`).\n */\nconst INLINE_ITEM_CHROME = 4 + 16 + 24 + 4 + 16 + 4;\n\n/**\n * Whether inline items must stack because their labels don't fit on one line side by side,\n * as at large text sizes (M3: \"Ensure the full label is always visible on-screen at up to 2x\n * text sizing\"; 2026-10-15). Each label is measured on one line (the same type role in both\n * layouts, so the answer doesn't change with the layout it picks), again whenever the bar\n * or a label resizes (a narrower window, a larger root text size, a web font loading).\n */\nfunction useStackWhenCrowded(navRef: RefObject<HTMLElement | null>, inline: boolean) {\n  const [stacked, setStacked] = useState(false);\n  useLayoutEffect(() => {\n    const nav = navRef.current;\n    if (!inline || !nav) {\n      setStacked(false);\n      return;\n    }\n    const labels = () => [...nav.querySelectorAll<HTMLElement>('[data-nav-label]')];\n    const measure = () => {\n      // Not laid out (hidden, or no layout engine): keep the layout asked for.\n      if (nav.clientWidth === 0) return setStacked(false);\n      let needed = 0;\n      for (const label of labels()) {\n        const wrap = label.style.whiteSpace;\n        label.style.whiteSpace = 'nowrap';\n        // A large badge on the icon takes room past the icon's end edge (12px inside it).\n        const badge = label\n          .closest('[data-nav-item]')\n          ?.querySelector<HTMLElement>('[data-size=\"large\"]');\n        const overhang = badge ? Math.max(0, badge.offsetWidth - 12) : 0;\n        needed += label.scrollWidth + INLINE_ITEM_CHROME + overhang;\n        label.style.whiteSpace = wrap;\n      }\n      const style = getComputedStyle(nav);\n      const available =\n        nav.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n      setStacked(needed > available + 0.5);\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(nav);\n    labels().forEach((label) => observer.observe(label));\n    return () => observer.disconnect();\n  }, [navRef, inline]);\n  return inline && stacked;\n}\n\nexport type NavigationBarItemProps = NavItemProps;\n\n/** A destination in a {@link NavigationBar}: a link (`href`) or a button. */\nexport function NavigationBarItem({ className, ...props }: NavigationBarItemProps) {\n  const bar = useContext(BarContext);\n  if (!bar) throw new Error('NavigationBarItem must be rendered inside a NavigationBar');\n  return (\n    <NavItem\n      {...(props as NavItemProps)}\n      className={cn(bar.itemClassName, className)}\n      layout={bar.iconPlacement === 'start' ? 'bar-start' : 'bar-top'}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/NavigationRail.d.ts

@@ -0,0 +1,91 @@
+import { NavItemProps } from "./NavItem.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/navigation/NavigationRail.d.ts
+type Naming = {
+  /** Accessible name for the navigation rail. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the navigation rail. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+export interface NavigationRailClassNames {
+  /** The `<nav>` container, merged with `className`. */
+  root?: string;
+  /** The in-flow rail's scrolling column, which holds the 44px top inset. */
+  body?: string;
+  /** The content above the items (`header`). */
+  header?: string;
+  /** The list of items. */
+  items?: string;
+  /** The expanded modal rail's sheet. */
+  sheet?: string;
+  /** The scrim behind the expanded modal rail. */
+  scrim?: string;
+}
+interface NavigationRailOwnProps {
+  /** Whether the rail is expanded (controlled). */
+  expanded?: boolean;
+  /** Whether the rail starts expanded (uncontrolled). @default false */
+  defaultExpanded?: boolean;
+  /** Called when the rail expands or collapses. */
+  onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * Expand over the page as a modal sheet with a scrim instead of pushing content.
+   * Pressing outside, Escape or choosing an item collapses it.
+   * @default false
+   */
+  modal?: boolean;
+  /** With `modal`, show nothing while collapsed (the expanded rail slides in). @default false */
+  hideOnCollapse?: boolean;
+  /** Content above the items, e.g. a menu button and a FAB; a function receives the state. */
+  header?: ReactNode | ((state: {
+    expanded: boolean;
+    toggle: () => void;
+  }) => ReactNode);
+  /**
+   * Align the items as a group to the top, or to the middle of the space below the header
+   * (M3 recommends centre on tablets, within easier reach). The header stays at the top.
+   * @default "top"
+   */
+  itemAlignment?: 'top' | 'center';
+  /** Draw a divider on the edge next to the content. @default false */
+  divider?: boolean;
+  /**
+   * How the current item's pill moves to a newly chosen item. `expand` (M3: "the active
+   * indicator expands from the center of the icon") grows it in place. `slide` moves it from
+   * the previously chosen item on the fast spatial spring while the rail is expanded (in
+   * place or modal), as in Google's Expressive showcase; an extension beyond the M3 spec.
+   * The collapsed rail always expands, and reduced motion fades the pill in place.
+   * @default "expand"
+   */
+  indicatorMotion?: 'expand' | 'slide';
+  /** `NavigationRailItem` elements. */
+  children: ReactNode;
+  /** Classes for each part, by slot. */
+  classNames?: NavigationRailClassNames;
+}
+export type NavigationRailProps = NavigationRailOwnProps & Naming & Omit<ComponentPropsWithRef<'nav'>, keyof NavigationRailOwnProps | 'aria-label' | 'aria-labelledby'>;
+/**
+ * M3 Expressive navigation rail: destinations along the start edge. Collapsed (96px) items
+ * show the icon above the label; expanded (220–360px) they show it beside the label and
+ * the rail's width springs open. With `modal`, the expanded rail opens over the page as a
+ * sheet with a scrim, focusing its first interactive element. Put a menu button in
+ * `header` to toggle `expanded`. Tab or the Up / Down arrows move between items, and
+ * labels wrap rather than truncate.
+ *
+ * Icons stay on one line through the middle of the collapsed rail in both states. For a
+ * different collapsed width, set `--m3-rail-collapsed-width` (e.g. the class
+ * `[--m3-rail-collapsed-width:80px]`) rather than a `w-*` class; M3's widths are 96px
+ * (Expressive) and 80px (baseline).
+ *
+ * @example
+ * <NavigationRail aria-label="Main" header={({ toggle }) => <IconButton icon={<MenuIcon />} aria-label="Menu" onPress={toggle} />}>
+ *   <NavigationRailItem href="/inbox" icon={<InboxIcon />} selected>Inbox</NavigationRailItem>
+ * </NavigationRail>
+ */
+export declare function NavigationRail({ expanded, defaultExpanded, onExpandedChange, modal, hideOnCollapse, header, itemAlignment, divider, indicatorMotion, children, classNames, className, style, ...rest }: NavigationRailProps): import("react").JSX.Element;
+export type NavigationRailItemProps = NavItemProps;
+/** A destination in a {@link NavigationRail}: a link (`href`) or a button. */
+export declare function NavigationRailItem({ onPress, ...props }: NavigationRailItemProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=NavigationRail.d.ts.map