@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,346 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { useM3Spring } from "../../motion/use-m3-spring.js";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { useWarnOnce } from "../../utils/warn-once.js";
+import { localeWithDirection } from "../../primitives/locale-with-direction.js";
+import { BadgedBox } from "../badge/Badge.js";
+import { FOCUSABLE_DISABLED_OPTIONS } from "../../utils/focusable-disabled.js";
+import { assertCollectionChildren } from "../../utils/assert-collection-children.js";
+import { useNearestReveal } from "../../utils/nearest-reveal.js";
+import { pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { tabsStyles } from "./tabs-styles.js";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animate, useReducedMotion } from "motion/react";
+import { I18nProvider, mergeProps, useLocale, useObjectRef, useTab, useTabList, useTabPanel } from "react-aria";
+import { Item, useTabListState } from "react-stately";
+/** A tab in {@link Tabs} (a React Stately collection item: identify it with `key`). */
+const Tab = Item;
+/**
+* M3 tabs: a row of tabs with an indicator that slides to the selection, and the selected
+* tab's panel. Primary tabs mark the selection with a content-width indicator and
+* `primary` label; secondary tabs with a full-width indicator. Arrow keys move focus
+* between tabs (mirrored in RTL), Home / End jump to the ends, and Space / Enter selects.
+*
+* @example
+* <Tabs aria-label="Trip">
+*   <Tab key="flights" title="Flights" icon={<FlightIcon />}>Flight details…</Tab>
+*   <Tab key="hotels" title="Hotels" icon={<HotelIcon />}>Hotel details…</Tab>
+* </Tabs>
+*/
+function Tabs(props) {
+	const { className, style, classNames, ref, ...rest } = props;
+	const { root: data, rest: ariaProps } = splitRootProps(rest, { wrapper: true });
+	const rootRef = useObjectRef(ref);
+	const { locale, direction: localeDirection } = useLocale();
+	const [direction, setDirection] = useState(localeDirection);
+	useLayoutEffect(() => {
+		if (rootRef.current) setDirection(getComputedStyle(rootRef.current).direction);
+	}, [rootRef]);
+	const effectiveLocale = direction === localeDirection ? locale : localeWithDirection(locale, direction);
+	return /* @__PURE__ */ jsx("div", {
+		...data,
+		ref: rootRef,
+		style,
+		"data-tokens": mergeDataTokens("md-comp-tabs", data),
+		"data-variant": props.variant ?? "primary",
+		className: tabsStyles().root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(I18nProvider, {
+			locale: effectiveLocale,
+			children: /* @__PURE__ */ jsx(TabsInner, {
+				...ariaProps,
+				classNames,
+				rtl: direction === "rtl"
+			})
+		})
+	});
+}
+/** No disabled keys, for the tab list's arrow keys (disabled tabs stay focusable). */
+const NO_KEYS = /* @__PURE__ */ new Set();
+function TabsInner({ rtl, ...props }) {
+	const { variant, scrollable = false, iconPlacement = "top", align = "stretch", swipeable = false, density, classNames } = props;
+	assertCollectionChildren(props.children, "Tabs", "Tab elements", { nested: false });
+	const { disabled, value, defaultValue, onChange, ...rest } = props;
+	const ariaProps = {
+		...rest,
+		...value !== void 0 && { selectedKey: value },
+		...defaultValue !== void 0 && { defaultSelectedKey: defaultValue },
+		...onChange && { onSelectionChange: onChange },
+		isDisabled: disabled,
+		keyboardActivation: props.keyboardActivation ?? "manual"
+	};
+	const state = useTabListState({
+		...ariaProps,
+		...FOCUSABLE_DISABLED_OPTIONS
+	});
+	const listRef = useRef(null);
+	const scrollerRef = useRef(null);
+	const listState = useMemo(() => ({
+		...state,
+		disabledKeys: NO_KEYS
+	}), [state]);
+	const { tabListProps } = useTabList(ariaProps, listState, listRef);
+	const items = [...state.collection];
+	const hasIcon = items.some((item) => item.props.icon != null);
+	const hasText = items.some((item) => item.props.title != null);
+	const hasPanels = items.some((item) => item.props.children != null);
+	useWarnOnce(hasIcon && items.some((item) => item.props.icon == null), "[@windmorph/react] Give every Tab an icon, or none (M3: tabs in a row are consistent).");
+	const unnamed = items.find((item) => item.props.title == null && !item.props["aria-label"]);
+	useWarnOnce(unnamed !== void 0, "[@windmorph/react] An icon-only Tab needs an aria-label; screen readers have no other name for it.");
+	const layout = hasIcon && hasText ? iconPlacement === "start" ? "icon-start" : "icon-top" : hasIcon ? "icon-only" : "text";
+	const styles = tabsStyles({
+		variant,
+		scrollable,
+		layout,
+		align: scrollable ? "stretch" : align,
+		swipeable
+	});
+	const indicator = useIndicator(listRef, state.selectedKey, variant ?? "primary", state.collection);
+	useScrollToSelection(scrollerRef, listRef, state.selectedKey, scrollable);
+	const [shownKey, setShownKey] = useState(state.selectedKey);
+	const [recolour, setRecolour] = useState(false);
+	if (shownKey !== state.selectedKey) {
+		setShownKey(state.selectedKey);
+		if (shownKey != null) setRecolour(true);
+	}
+	useNearestReveal(listRef);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: scrollerRef,
+		...densityAttribute(density),
+		className: styles.scroller({ class: classNames?.scroller }),
+		children: /* @__PURE__ */ jsxs("div", {
+			...pickDescriptionAria(rest),
+			...tabListProps,
+			ref: listRef,
+			"data-slot": "list",
+			"data-animate": indicator?.animate || void 0,
+			"data-recolour": recolour || void 0,
+			className: styles.list({ class: classNames?.list }),
+			children: [items.map((item, index) => /* @__PURE__ */ jsx(TabButton, {
+				item,
+				index,
+				state,
+				listState,
+				hasPanels,
+				layout,
+				variant: variant ?? "primary",
+				styles,
+				className: classNames?.tab,
+				iconClassName: classNames?.icon,
+				labelClassName: classNames?.label
+			}, item.key)), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "indicator",
+				"data-ready": indicator ? "" : void 0,
+				className: styles.indicator({ class: classNames?.indicator }),
+				style: {
+					gridColumn: `1 / span ${Math.max(items.length, 1)}`,
+					...indicator && {
+						width: indicator.width,
+						translate: `${indicator.x}px 0`
+					}
+				}
+			})]
+		})
+	}), hasPanels && /* @__PURE__ */ jsx(TabPanel, {
+		state,
+		listState,
+		swipeable,
+		rtl,
+		className: styles.panel({ class: classNames?.panel })
+	}, state.selectedKey)] });
+}
+/**
+* Measures the selected tab: its content (primary) or the whole tab (secondary). Again when
+* the tabs change, as tabs added or removed move the selected one without resizing the row,
+* and when the row or the selected tab's content resizes.
+*/
+function useIndicator(listRef, selectedKey, variant, tabs) {
+	const [indicator, setIndicator] = useState(null);
+	const placedKey = useRef(null);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const place = (x, width) => {
+			const animate = placedKey.current != null && placedKey.current !== selectedKey;
+			placedKey.current = selectedKey;
+			setIndicator((last) => last && last.x === x && last.width === width ? last : {
+				x,
+				width,
+				animate
+			});
+		};
+		const measure = () => {
+			const tab = [...list.querySelectorAll("[role=\"tab\"]")].find((el) => el.dataset.key === String(selectedKey));
+			if (!tab) return setIndicator(null);
+			const listRect = list.getBoundingClientRect();
+			const scale = list.offsetWidth > 0 ? listRect.width / list.offsetWidth : 1;
+			const listLeft = listRect.left + parseFloat(getComputedStyle(list).paddingLeft) * scale;
+			const tabRect = tab.getBoundingClientRect();
+			const tabX = (tabRect.left - listLeft) / scale;
+			const tabWidth = tabRect.width / scale;
+			if (variant === "secondary") {
+				place(tabX, tabWidth);
+				return;
+			}
+			const parts = [...tab.querySelectorAll("[data-tab-part]")].map((el) => el.getBoundingClientRect());
+			const contentWidth = parts.length ? (Math.max(...parts.map((r) => r.right)) - Math.min(...parts.map((r) => r.left))) / scale : 0;
+			const width = Math.max(Math.min(contentWidth, tabWidth - 32), 24);
+			place(tabX + (tabWidth - width) / 2, width);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		[...list.querySelectorAll("[role=\"tab\"]")].find((el) => el.dataset.key === String(selectedKey))?.querySelectorAll("[data-tab-part]").forEach((part) => observer.observe(part));
+		return () => observer.disconnect();
+	}, [
+		listRef,
+		selectedKey,
+		variant,
+		tabs
+	]);
+	return indicator;
+}
+/**
+* Scrollable rows centre the selected tab on the default spatial spring (Compose); under
+* reduced motion they scroll there at once.
+*/
+function useScrollToSelection(scrollerRef, listRef, selectedKey, scrollable) {
+	const spring = useM3Spring("spatial", "default");
+	const reducedMotion = useReducedMotion() ?? false;
+	const first = useRef(true);
+	useLayoutEffect(() => {
+		const scroller = scrollerRef.current;
+		const tab = [...listRef.current?.querySelectorAll("[role=\"tab\"]") ?? []].find((el) => el.dataset.key === String(selectedKey));
+		if (!scrollable || !scroller || !tab) return;
+		const rtl = getComputedStyle(scroller).direction === "rtl";
+		const max = scroller.scrollWidth - scroller.clientWidth;
+		const tabRect = tab.getBoundingClientRect();
+		const scrollerRect = scroller.getBoundingClientRect();
+		const delta = tabRect.left + tabRect.width / 2 - (scrollerRect.left + scrollerRect.width / 2);
+		const target = Math.min(Math.max(scroller.scrollLeft + delta, rtl ? -max : 0), rtl ? 0 : max);
+		if (first.current || reducedMotion) {
+			first.current = false;
+			scroller.scrollLeft = target;
+			return;
+		}
+		const controls = animate(scroller.scrollLeft, target, {
+			...spring,
+			onUpdate: (value) => {
+				scroller.scrollLeft = value;
+			}
+		});
+		return () => controls.stop();
+	}, [selectedKey, scrollable]);
+}
+function TabButton({ item, index, state, listState, hasPanels, layout, variant, styles, className, iconClassName, labelClassName }) {
+	const ref = useRef(null);
+	const { tabProps, isPressed } = useTab({ key: item.key }, listState, ref);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: state.disabledKeys.has(item.key),
+		isPressed,
+		isSelected: state.selectedKey === item.key
+	}, ref);
+	const { icon, badge } = item.props;
+	const badgeId = useId();
+	const { "aria-controls": controls, ...ownProps } = tabProps;
+	const badgeOnIcon = badge != null && icon != null && (layout === "icon-top" || item.rendered == null);
+	const badgeNode = badge != null ? /* @__PURE__ */ jsx("span", {
+		id: badgeId,
+		"aria-hidden": "true",
+		className: "contents",
+		children: badge
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		...mergeProps(ownProps, interactionProps),
+		...dataAttributes,
+		"aria-controls": hasPanels ? controls : void 0,
+		"aria-disabled": state.isDisabled || state.disabledKeys.has(item.key) || void 0,
+		"aria-describedby": badge != null ? badgeId : void 0,
+		"data-key": String(item.key),
+		"data-tokens": mergeDataTokens("md-comp-tabs", ownProps),
+		"data-variant": variant,
+		"data-slot": "tab",
+		ref,
+		style: { gridColumnStart: index + 1 },
+		className: styles.tab({ class: className }),
+		children: [icon != null && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-tab-part": "",
+			"data-slot": "icon",
+			className: styles.icon({ class: iconClassName }),
+			children: badgeOnIcon && badgeNode ? /* @__PURE__ */ jsx(BadgedBox, {
+				badge: badgeNode,
+				children: icon
+			}) : icon
+		}), item.rendered != null && (badge != null && !badgeOnIcon ? /* @__PURE__ */ jsxs("span", {
+			"data-tab-part": "",
+			className: styles.text(),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: styles.label({ class: labelClassName }),
+				children: item.rendered
+			}), badgeNode]
+		}) : /* @__PURE__ */ jsx("span", {
+			"data-tab-part": "",
+			className: styles.label({ class: labelClassName }),
+			children: item.rendered
+		}))]
+	});
+}
+/** The next (or previous) enabled tab after the selected one, if any. */
+function adjacentKey(state, forward) {
+	const step = (key) => key == null ? null : forward ? state.collection.getKeyAfter(key) : state.collection.getKeyBefore(key);
+	let key = step(state.selectedKey);
+	while (key != null && state.disabledKeys.has(key)) key = step(key);
+	return key;
+}
+/**
+* A horizontal touch or pen swipe of at least {@link TAB_SWIPE_THRESHOLD} px selects the
+* neighbouring tab: towards the end edge for the previous one, as content follows the
+* finger. Mouse drags are left to text selection.
+*/
+function useSwipeToSelect(state, rtl, enabled) {
+	const start = useRef(null);
+	if (!enabled) return {};
+	return {
+		onPointerDown: (event) => {
+			start.current = event.pointerType === "mouse" ? null : {
+				x: event.clientX,
+				y: event.clientY,
+				id: event.pointerId
+			};
+		},
+		onPointerUp: (event) => {
+			const origin = start.current;
+			start.current = null;
+			if (!origin || origin.id !== event.pointerId || state.isDisabled) return;
+			const dx = event.clientX - origin.x;
+			const dy = event.clientY - origin.y;
+			if (Math.abs(dx) < 56 || Math.abs(dx) <= Math.abs(dy)) return;
+			const key = adjacentKey(state, rtl ? dx > 0 : dx < 0);
+			if (key != null) state.setSelectedKey(key);
+		},
+		onPointerCancel: () => {
+			start.current = null;
+		}
+	};
+}
+function TabPanel({ state, listState, swipeable, rtl, className }) {
+	const ref = useRef(null);
+	const { tabPanelProps } = useTabPanel({}, listState, ref);
+	const swipeProps = useSwipeToSelect(state, rtl, swipeable);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(tabPanelProps, swipeProps),
+		ref,
+		className,
+		children: (state.selectedItem?.props)?.children
+	});
+}
+//#endregion
+export { Tab, Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { animate, useReducedMotion } from 'motion/react';\nimport {\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type JSX,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  I18nProvider,\n  mergeProps,\n  useLocale,\n  useObjectRef,\n  useTab,\n  useTabList,\n  useTabPanel,\n  type AriaTabListProps,\n} from 'react-aria';\nimport { Item, useTabListState, type Key, type Node, type TabListState } from 'react-stately';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport { localeWithDirection } from '../../primitives/locale-with-direction';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { FOCUSABLE_DISABLED_OPTIONS } from '../../utils/focusable-disabled';\nimport { assertCollectionChildren } from '../../utils/assert-collection-children';\nimport { useNearestReveal } from '../../utils/nearest-reveal';\nimport { cn } from '../../utils/cn';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport {\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { BadgedBox, type BadgeProps } from '../badge/Badge';\nimport { tabsStyles, type TabsVariant } from './tabs-styles';\n\n/** How far (px) a horizontal swipe on a swipeable panel travels before it changes tab. */\nexport const TAB_SWIPE_THRESHOLD = 56;\n\n/** Props of a {@link Tab}; the React `key` identifies it for selection. */\nexport interface TabProps {\n  /** The tab's label. Optional for icon-only tabs, which then need `aria-label`. */\n  title?: ReactNode;\n  /** Icon above (or before) the label. Hidden from assistive tech. */\n  icon?: ReactNode;\n  /** The panel shown while this tab is selected. Leave it out for tabs that only navigate. */\n  children?: ReactNode;\n  /** Plain-text label when `title` is not a string. */\n  textValue?: string;\n  /**\n   * A {@link Badge} for news in this tab (at most four characters, \"+\" included). It sits on\n   * a stacked icon, otherwise 4px after the label, and describes the tab to assistive tech.\n   */\n  badge?: ReactElement<BadgeProps>;\n  /** Accessible name for the tab. Required for icon-only tabs, which have no `title`. */\n  'aria-label'?: string;\n}\n\n/** A tab in {@link Tabs} (a React Stately collection item: identify it with `key`). */\nexport const Tab = Item as unknown as (props: TabProps) => JSX.Element;\n\nexport interface TabsClassNames {\n  /** The outer container, merged with `className`. */\n  root?: string;\n  /** The row's scrolling box around `list` (it carries the row's surface when aligned). */\n  scroller?: string;\n  /** The row of tabs (`role=\"tablist\"`). */\n  list?: string;\n  /** Every tab. */\n  tab?: string;\n  /** Each tab's icon. */\n  icon?: string;\n  /** Each tab's label. */\n  label?: string;\n  /** The active indicator under the selected tab. */\n  indicator?: string;\n  /** The selected tab's panel. */\n  panel?: string;\n}\n\nexport interface TabsProps\n  extends\n    Omit<\n      AriaTabListProps<object>,\n      | 'children'\n      | 'orientation'\n      | 'items'\n      | 'isDisabled'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'onSelectionChange'\n    >,\n    Omit<WrapperRootDOMProps, keyof AriaTabListProps<object>> {\n  /** `Tab` elements. */\n  children: ReactNode;\n  /** The selected tab's `key` (controlled). */\n  value?: Key | null;\n  /** The tab selected at first, when uncontrolled. @default the first enabled tab */\n  defaultValue?: Key;\n  /** Called with the newly selected tab's `key`. */\n  onChange?: (key: Key) => void;\n  /** Disables every tab (`disabledKeys` disables some). @default false */\n  disabled?: boolean;\n  /**\n   * The keys of tabs that can't be selected. They stay focusable, so keyboard and screen reader\n   * users find them (WAI-ARIA APG).\n   */\n  disabledKeys?: Iterable<Key>;\n  /**\n   * `primary` tabs sit below the top app bar and switch the page's main content;\n   * `secondary` tabs switch content within one section. @default \"primary\"\n   */\n  variant?: TabsVariant;\n  /** Tabs keep their natural width (at least 90px) and the row scrolls. @default false */\n  scrollable?: boolean;\n  /** Icons above the label (64px tabs) or before it (48px). @default \"top\" */\n  iconPlacement?: 'top' | 'start';\n  /**\n   * Web density, `0` to `-3`, for the tab row (not the panels): each step takes 4px off the\n   * tabs (48px at 0, 36px at -3; 64px to 52px with icons above). Left out, the tabs take the\n   * density of the nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the\n   * reader's choice rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /**\n   * Fixed tabs: `stretch` fills the row; `start` and `center` make every tab as wide as\n   * the widest and place the group at the leading edge or the centre (M3's layout for wide\n   * windows). Ignored when `scrollable`. @default \"stretch\"\n   */\n  align?: 'stretch' | 'start' | 'center';\n  /**\n   * A horizontal swipe on the panel selects the next or previous tab (mirrored in RTL), as\n   * M3 tabs do. Vertical gestures still scroll. Avoid it when the panel holds swipeable\n   * content such as a map or a carousel. @default false\n   */\n  swipeable?: boolean;\n  /**\n   * `manual`: the arrow keys move focus and Space / Enter selects the focused tab, the M3\n   * keyboard pattern. `automatic` selects on focus. @default \"manual\"\n   */\n  keyboardActivation?: 'manual' | 'automatic';\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: TabsClassNames;\n  /** Ref to the root `<div>` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * M3 tabs: a row of tabs with an indicator that slides to the selection, and the selected\n * tab's panel. Primary tabs mark the selection with a content-width indicator and\n * `primary` label; secondary tabs with a full-width indicator. Arrow keys move focus\n * between tabs (mirrored in RTL), Home / End jump to the ends, and Space / Enter selects.\n *\n * @example\n * <Tabs aria-label=\"Trip\">\n *   <Tab key=\"flights\" title=\"Flights\" icon={<FlightIcon />}>Flight details…</Tab>\n *   <Tab key=\"hotels\" title=\"Hotels\" icon={<HotelIcon />}>Hotel details…</Tab>\n * </Tabs>\n */\nexport function Tabs(props: TabsProps) {\n  const { className, style, classNames, ref, ...rest } = props;\n  // The root's DOM attributes; the naming and the rest go to the tab list.\n  const { root: data, rest: ariaProps } = splitRootProps(rest, { wrapper: true });\n  const rootRef = useObjectRef(ref);\n  // React Aria takes arrow-key direction from its locale, not the DOM `dir`; follow the\n  // direction the tabs are actually laid out in.\n  const { locale, direction: localeDirection } = useLocale();\n  const [direction, setDirection] = useState(localeDirection);\n  useLayoutEffect(() => {\n    if (rootRef.current) setDirection(getComputedStyle(rootRef.current).direction as 'ltr' | 'rtl');\n  }, [rootRef]);\n  const effectiveLocale =\n    direction === localeDirection ? locale : localeWithDirection(locale, direction);\n\n  return (\n    <div\n      {...data}\n      ref={rootRef}\n      style={style}\n      data-tokens={mergeDataTokens('md-comp-tabs', data)}\n      data-variant={props.variant ?? 'primary'}\n      className={tabsStyles().root({ class: cn(classNames?.root, className) })}\n    >\n      <I18nProvider locale={effectiveLocale}>\n        <TabsInner\n          {...(ariaProps as Omit<TabsProps, 'className' | 'style' | 'ref'>)}\n          classNames={classNames}\n          rtl={direction === 'rtl'}\n        />\n      </I18nProvider>\n    </div>\n  );\n}\n\n/** No disabled keys, for the tab list's arrow keys (disabled tabs stay focusable). */\nconst NO_KEYS: Set<Key> = new Set();\n\nfunction TabsInner({\n  rtl,\n  ...props\n}: Omit<TabsProps, 'className' | 'style' | 'ref'> & { rtl: boolean }) {\n  const {\n    variant,\n    scrollable = false,\n    iconPlacement = 'top',\n    align = 'stretch',\n    swipeable = false,\n    density,\n    classNames,\n  } = props;\n  // A Tab's children are its panel content, which can be server-rendered: check only the Tabs.\n  assertCollectionChildren(props.children, 'Tabs', 'Tab elements', { nested: false });\n  const { disabled, value, defaultValue, onChange, ...rest } = props;\n  const ariaProps = {\n    ...rest,\n    ...(value !== undefined && { selectedKey: value }),\n    ...(defaultValue !== undefined && { defaultSelectedKey: defaultValue }),\n    ...(onChange && { onSelectionChange: onChange }),\n    isDisabled: disabled,\n    keyboardActivation: props.keyboardActivation ?? 'manual',\n  } as AriaTabListProps<object>;\n  // Disabled tabs stay focusable but can't be selected (WAI-ARIA APG, \"Focusability of disabled\n  // controls\"), so screen reader users find them: React Stately's `selection` behaviour, and\n  // arrow keys that don't skip them (the tab list's keyboard sees no disabled keys).\n  const state = useTabListState({ ...ariaProps, ...FOCUSABLE_DISABLED_OPTIONS });\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  // React Aria keys the tabs' ids to the state object the tab list gets, so the tabs and the\n  // panel get that same object: given another, their ids would be `undefined-tab-…`, the same\n  // in every Tabs on the page.\n  const listState = useMemo(() => ({ ...state, disabledKeys: NO_KEYS }), [state]);\n  const { tabListProps } = useTabList(ariaProps, listState, listRef);\n  const items = [...state.collection];\n  const hasIcon = items.some((item) => (item.props as TabProps).icon != null);\n  const hasText = items.some((item) => (item.props as TabProps).title != null);\n  const hasPanels = items.some((item) => (item.props as TabProps).children != null);\n  // M3: every tab in a row has an icon, or none does; an icon-only tab needs a name.\n  useWarnOnce(\n    hasIcon && items.some((item) => (item.props as TabProps).icon == null),\n    '[@windmorph/react] Give every Tab an icon, or none (M3: tabs in a row are consistent).',\n  );\n  const unnamed = items.find(\n    (item) => (item.props as TabProps).title == null && !(item.props as TabProps)['aria-label'],\n  );\n  useWarnOnce(\n    unnamed !== undefined,\n    '[@windmorph/react] An icon-only Tab needs an aria-label; screen readers have no other name for it.',\n  );\n  const layout =\n    hasIcon && hasText\n      ? iconPlacement === 'start'\n        ? 'icon-start'\n        : 'icon-top'\n      : hasIcon\n        ? 'icon-only'\n        : 'text';\n  const styles = tabsStyles({\n    variant,\n    scrollable,\n    layout,\n    align: scrollable ? 'stretch' : align,\n    swipeable,\n  });\n\n  const indicator = useIndicator(\n    listRef,\n    state.selectedKey,\n    variant ?? 'primary',\n    state.collection,\n  );\n  useScrollToSelection(scrollerRef, listRef, state.selectedKey, scrollable);\n  // The tabs' colours fade only once the selection has changed. Set in the render that\n  // changes it, not with the indicator's placement: that comes from a layout effect whose\n  // measuring commits the new colours first, so the first selection recoloured at once.\n  const [shownKey, setShownKey] = useState(state.selectedKey);\n  const [recolour, setRecolour] = useState(false);\n  if (shownKey !== state.selectedKey) {\n    setShownKey(state.selectedKey);\n    if (shownKey != null) setRecolour(true);\n  }\n  // The row reveals a tab at the nearest position, never centring the page on it.\n  useNearestReveal(listRef);\n\n  return (\n    <>\n      <div\n        ref={scrollerRef}\n        {...densityAttribute(density)}\n        className={styles.scroller({ class: classNames?.scroller })}\n      >\n        <div\n          {...pickDescriptionAria(rest)}\n          {...tabListProps}\n          ref={listRef}\n          data-slot=\"list\"\n          data-animate={indicator?.animate || undefined}\n          data-recolour={recolour || undefined}\n          className={styles.list({ class: classNames?.list })}\n        >\n          {items.map((item, index) => (\n            <TabButton\n              key={item.key}\n              item={item}\n              index={index}\n              state={state}\n              listState={listState}\n              hasPanels={hasPanels}\n              layout={layout}\n              variant={variant ?? 'primary'}\n              styles={styles}\n              className={classNames?.tab}\n              iconClassName={classNames?.icon}\n              labelClassName={classNames?.label}\n            />\n          ))}\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"indicator\"\n            data-ready={indicator ? '' : undefined}\n            className={styles.indicator({ class: classNames?.indicator })}\n            style={{\n              // Span every column so the indicator's origin is the row's left edge in both\n              // directions; translate then positions it.\n              gridColumn: `1 / span ${Math.max(items.length, 1)}`,\n              ...(indicator && { width: indicator.width, translate: `${indicator.x}px 0` }),\n            }}\n          />\n        </div>\n      </div>\n      {hasPanels && (\n        <TabPanel\n          key={state.selectedKey}\n          state={state}\n          listState={listState}\n          swipeable={swipeable}\n          rtl={rtl}\n          className={styles.panel({ class: classNames?.panel })}\n        />\n      )}\n    </>\n  );\n}\n\n/** Where the indicator goes, and whether it moves there (a selection change) or jumps. */\ninterface IndicatorPlacement {\n  x: number;\n  width: number;\n  /**\n   * The selection changed since the last placement, so the indicator slides and the tabs'\n   * colours change in motion. The first placement and resizes (the row's, or the selected\n   * tab's content's, e.g. when a web font loads) put it in place at once: M3 motion explains\n   * a selection, and nothing slides in on mount.\n   */\n  animate: boolean;\n}\n\n/**\n * Measures the selected tab: its content (primary) or the whole tab (secondary). Again when\n * the tabs change, as tabs added or removed move the selected one without resizing the row,\n * and when the row or the selected tab's content resizes.\n */\nfunction useIndicator(\n  listRef: React.RefObject<HTMLDivElement | null>,\n  selectedKey: React.Key | null,\n  variant: TabsVariant,\n  tabs: unknown,\n) {\n  const [indicator, setIndicator] = useState<IndicatorPlacement | null>(null);\n  const placedKey = useRef<React.Key | null>(null);\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const place = (x: number, width: number) => {\n      const animate = placedKey.current != null && placedKey.current !== selectedKey;\n      placedKey.current = selectedKey;\n      // An unchanged place keeps the last placement, so a re-measure never cuts a slide short.\n      setIndicator((last) =>\n        last && last.x === x && last.width === width ? last : { x, width, animate },\n      );\n    };\n    const measure = () => {\n      const tab = [...list.querySelectorAll<HTMLElement>('[role=\"tab\"]')].find(\n        (el) => el.dataset.key === String(selectedKey),\n      );\n      if (!tab) return setIndicator(null);\n      // Measured in the list's own pixels: an ancestor scaling in (a dialog opening) shrinks\n      // the client rects, and no resize follows when it ends, so divide its scale out.\n      const listRect = list.getBoundingClientRect();\n      const scale = list.offsetWidth > 0 ? listRect.width / list.offsetWidth : 1;\n      // Grid items sit in the content box, so measure from inside the start padding\n      // (52px on scrollable rows; on the right in RTL, where paddingLeft is 0).\n      const listLeft = listRect.left + parseFloat(getComputedStyle(list).paddingLeft) * scale;\n      const tabRect = tab.getBoundingClientRect();\n      const tabX = (tabRect.left - listLeft) / scale;\n      const tabWidth = tabRect.width / scale;\n      if (variant === 'secondary') {\n        place(tabX, tabWidth);\n        return;\n      }\n      // Compose: the content width less the 16px padding each side, at least 24px.\n      const parts = [...tab.querySelectorAll('[data-tab-part]')].map((el) =>\n        el.getBoundingClientRect(),\n      );\n      const contentWidth = parts.length\n        ? (Math.max(...parts.map((r) => r.right)) - Math.min(...parts.map((r) => r.left))) / scale\n        : 0;\n      const width = Math.max(Math.min(contentWidth, tabWidth - 32), 24);\n      place(tabX + (tabWidth - width) / 2, width);\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(list);\n    // The selected tab's content can resize without the row, e.g. when a web font loads.\n    const selected = [...list.querySelectorAll<HTMLElement>('[role=\"tab\"]')].find(\n      (el) => el.dataset.key === String(selectedKey),\n    );\n    selected?.querySelectorAll('[data-tab-part]').forEach((part) => observer.observe(part));\n    return () => observer.disconnect();\n  }, [listRef, selectedKey, variant, tabs]);\n  return indicator;\n}\n\n/**\n * Scrollable rows centre the selected tab on the default spatial spring (Compose); under\n * reduced motion they scroll there at once.\n */\nfunction useScrollToSelection(\n  scrollerRef: React.RefObject<HTMLDivElement | null>,\n  listRef: React.RefObject<HTMLDivElement | null>,\n  selectedKey: React.Key | null,\n  scrollable: boolean,\n) {\n  const spring = useM3Spring('spatial', 'default');\n  const reducedMotion = useReducedMotion() ?? false;\n  const first = useRef(true);\n  useLayoutEffect(() => {\n    const scroller = scrollerRef.current;\n    const tab = [...(listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? [])].find(\n      (el) => el.dataset.key === String(selectedKey),\n    );\n    if (!scrollable || !scroller || !tab) return;\n    const rtl = getComputedStyle(scroller).direction === 'rtl';\n    const max = scroller.scrollWidth - scroller.clientWidth;\n    const tabRect = tab.getBoundingClientRect();\n    const scrollerRect = scroller.getBoundingClientRect();\n    const delta = tabRect.left + tabRect.width / 2 - (scrollerRect.left + scrollerRect.width / 2);\n    // RTL scroll positions run from 0 down to −max.\n    const target = Math.min(Math.max(scroller.scrollLeft + delta, rtl ? -max : 0), rtl ? 0 : max);\n    if (first.current || reducedMotion) {\n      first.current = false;\n      scroller.scrollLeft = target;\n      return;\n    }\n    const controls = animate(scroller.scrollLeft, target, {\n      ...spring,\n      onUpdate: (value) => {\n        scroller.scrollLeft = value;\n      },\n    });\n    return () => controls.stop();\n    // The spring only matters for the next selection change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedKey, scrollable]);\n}\n\ninterface TabButtonProps {\n  item: Node<object>;\n  index: number;\n  state: TabListState<object>;\n  /** The state the tab list was given, which React Aria keys the tabs' ids to. */\n  listState: TabListState<object>;\n  hasPanels: boolean;\n  layout: 'text' | 'icon-top' | 'icon-start' | 'icon-only';\n  variant: TabsVariant;\n  styles: ReturnType<typeof tabsStyles>;\n  className?: string | undefined;\n  iconClassName?: string | undefined;\n  labelClassName?: string | undefined;\n}\n\nfunction TabButton({\n  item,\n  index,\n  state,\n  listState,\n  hasPanels,\n  layout,\n  variant,\n  styles,\n  className,\n  iconClassName,\n  labelClassName,\n}: TabButtonProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { tabProps, isPressed } = useTab({ key: item.key }, listState, ref);\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    {\n      isDisabled: state.disabledKeys.has(item.key),\n      isPressed,\n      isSelected: state.selectedKey === item.key,\n    },\n    ref,\n  );\n  const { icon, badge } = item.props as TabProps;\n  const badgeId = useId();\n  // Without panels there is nothing for aria-controls to point at.\n  const { 'aria-controls': controls, ...ownProps } = tabProps;\n  // On a stacked icon the badge overlaps it (`BadgedBox`); otherwise it follows the label.\n  const badgeOnIcon =\n    badge != null && icon != null && (layout === 'icon-top' || item.rendered == null);\n  // The badge describes the tab rather than adding to its name.\n  // Wrapped rather than cloned: a badge can arrive as a lazy server reference without props.\n  const badgeNode =\n    badge != null ? (\n      <span id={badgeId} aria-hidden=\"true\" className=\"contents\">\n        {badge}\n      </span>\n    ) : null;\n  return (\n    <div\n      {...mergeProps(ownProps, interactionProps)}\n      {...dataAttributes}\n      aria-controls={hasPanels ? controls : undefined}\n      aria-disabled={state.isDisabled || state.disabledKeys.has(item.key) || undefined}\n      aria-describedby={badge != null ? badgeId : undefined}\n      data-key={String(item.key)}\n      // Each tab resolves its own tokens, so its selection picks its colours.\n      data-tokens={mergeDataTokens('md-comp-tabs', ownProps)}\n      data-variant={variant}\n      data-slot=\"tab\"\n      ref={ref}\n      style={{ gridColumnStart: index + 1 }}\n      className={styles.tab({ class: className })}\n    >\n      {icon != null && (\n        <span\n          aria-hidden=\"true\"\n          data-tab-part=\"\"\n          data-slot=\"icon\"\n          className={styles.icon({ class: iconClassName })}\n        >\n          {badgeOnIcon && badgeNode ? <BadgedBox badge={badgeNode}>{icon}</BadgedBox> : icon}\n        </span>\n      )}\n      {item.rendered != null &&\n        (badge != null && !badgeOnIcon ? (\n          <span data-tab-part=\"\" className={styles.text()}>\n            <span className={styles.label({ class: labelClassName })}>{item.rendered}</span>\n            {badgeNode}\n          </span>\n        ) : (\n          <span data-tab-part=\"\" className={styles.label({ class: labelClassName })}>\n            {item.rendered}\n          </span>\n        ))}\n    </div>\n  );\n}\n\n/** The next (or previous) enabled tab after the selected one, if any. */\nfunction adjacentKey(state: TabListState<object>, forward: boolean) {\n  const step = (key: Key | null) =>\n    key == null\n      ? null\n      : forward\n        ? state.collection.getKeyAfter(key)\n        : state.collection.getKeyBefore(key);\n  let key = step(state.selectedKey);\n  while (key != null && state.disabledKeys.has(key)) key = step(key);\n  return key;\n}\n\n/**\n * A horizontal touch or pen swipe of at least {@link TAB_SWIPE_THRESHOLD} px selects the\n * neighbouring tab: towards the end edge for the previous one, as content follows the\n * finger. Mouse drags are left to text selection.\n */\nfunction useSwipeToSelect(\n  state: TabListState<object>,\n  rtl: boolean,\n  enabled: boolean,\n): HTMLAttributes<HTMLDivElement> {\n  const start = useRef<{ x: number; y: number; id: number } | null>(null);\n  if (!enabled) return {};\n  return {\n    onPointerDown: (event: PointerEvent<HTMLDivElement>) => {\n      start.current =\n        event.pointerType === 'mouse'\n          ? null\n          : { x: event.clientX, y: event.clientY, id: event.pointerId };\n    },\n    onPointerUp: (event: PointerEvent<HTMLDivElement>) => {\n      const origin = start.current;\n      start.current = null;\n      if (!origin || origin.id !== event.pointerId || state.isDisabled) return;\n      const dx = event.clientX - origin.x;\n      const dy = event.clientY - origin.y;\n      if (Math.abs(dx) < TAB_SWIPE_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) return;\n      const key = adjacentKey(state, rtl ? dx > 0 : dx < 0);\n      if (key != null) state.setSelectedKey(key);\n    },\n    onPointerCancel: () => {\n      start.current = null;\n    },\n  };\n}\n\nfunction TabPanel({\n  state,\n  listState,\n  swipeable,\n  rtl,\n  className,\n}: {\n  state: TabListState<object>;\n  /** The state the tab list was given, which React Aria keys the panel's ids to. */\n  listState: TabListState<object>;\n  swipeable: boolean;\n  rtl: boolean;\n  className?: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { tabPanelProps } = useTabPanel({}, listState, ref);\n  const swipeProps = useSwipeToSelect(state, rtl, swipeable);\n  return (\n    <div {...mergeProps(tabPanelProps, swipeProps)} ref={ref} className={className}>\n      {(state.selectedItem?.props as TabProps | undefined)?.children}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/tabs/tabs-styles.d.ts

@@ -0,0 +1,198 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/tabs/tabs-styles.d.ts
+/** Variant definitions for {@link Tabs}; extend them to add variants. */
+export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    primary: {
+      tab: string[];
+      indicator: string;
+    };
+    secondary: {
+      tab: string[];
+      indicator: string;
+    };
+  };
+  scrollable: {
+    true: {
+      scroller: string;
+      list: string;
+      tab: string;
+    };
+    false: {
+      list: string;
+    };
+  };
+  swipeable: {
+    true: {
+      panel: string;
+    };
+    false: {};
+  };
+  align: {
+    stretch: {};
+    start: {
+      scroller: string[];
+      list: string;
+    };
+    center: {
+      scroller: string[];
+      list: string;
+    };
+  };
+  layout: {
+    text: {
+      tab: string;
+    };
+    'icon-top': {
+      tab: string;
+    };
+    'icon-start': {
+      tab: string;
+    };
+    'icon-only': {
+      tab: string;
+    };
+  };
+}, {
+  root: string;
+  scroller: string;
+  list: string[];
+  tab: string[];
+  icon: string[];
+  label: string;
+  text: string;
+  indicator: string[];
+  panel: string;
+}, undefined, {
+  variant: {
+    primary: {
+      tab: string[];
+      indicator: string;
+    };
+    secondary: {
+      tab: string[];
+      indicator: string;
+    };
+  };
+  scrollable: {
+    true: {
+      scroller: string;
+      list: string;
+      tab: string;
+    };
+    false: {
+      list: string;
+    };
+  };
+  swipeable: {
+    true: {
+      panel: string;
+    };
+    false: {};
+  };
+  align: {
+    stretch: {};
+    start: {
+      scroller: string[];
+      list: string;
+    };
+    center: {
+      scroller: string[];
+      list: string;
+    };
+  };
+  layout: {
+    text: {
+      tab: string;
+    };
+    'icon-top': {
+      tab: string;
+    };
+    'icon-start': {
+      tab: string;
+    };
+    'icon-only': {
+      tab: string;
+    };
+  };
+}, {
+  root: string;
+  scroller: string;
+  list: string[];
+  tab: string[];
+  icon: string[];
+  label: string;
+  text: string;
+  indicator: string[];
+  panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    primary: {
+      tab: string[];
+      indicator: string;
+    };
+    secondary: {
+      tab: string[];
+      indicator: string;
+    };
+  };
+  scrollable: {
+    true: {
+      scroller: string;
+      list: string;
+      tab: string;
+    };
+    false: {
+      list: string;
+    };
+  };
+  swipeable: {
+    true: {
+      panel: string;
+    };
+    false: {};
+  };
+  align: {
+    stretch: {};
+    start: {
+      scroller: string[];
+      list: string;
+    };
+    center: {
+      scroller: string[];
+      list: string;
+    };
+  };
+  layout: {
+    text: {
+      tab: string;
+    };
+    'icon-top': {
+      tab: string;
+    };
+    'icon-start': {
+      tab: string;
+    };
+    'icon-only': {
+      tab: string;
+    };
+  };
+}, {
+  root: string;
+  scroller: string;
+  list: string[];
+  tab: string[];
+  icon: string[];
+  label: string;
+  text: string;
+  indicator: string[];
+  panel: string;
+}>>;
+/**
+ * The variants of {@link tabsStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type TabsStyleProps = VariantProps<typeof tabsStyles>;
+export type TabsVariant = NonNullable<TabsStyleProps['variant']>;
+//#endregion
+//# sourceMappingURL=tabs-styles.d.ts.map