@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/fab-menu/FabMenu.d.ts

@@ -0,0 +1,156 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { IconTransition } from "../../primitives/icon-faces-styles.js";
+import { FabElevation } from "../fab/fab-styles.js";
+import { FabMenuColor, FabMenuSize } from "./fab-menu-styles.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/components/fab-menu/FabMenu.d.ts
+type AccessibleName = {
+  /** Accessible name for the button, also its tooltip. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+  /** The id of the element that names the button. */
+  'aria-labelledby'?: string;
+} | {
+  /** Accessible name for the button, also its tooltip. */
+  'aria-label'?: string;
+  /** The id of the element that names the button. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+export interface FabMenuClassNames {
+  /** The outer container, merged with `className`. */
+  root?: string;
+  /** The box that keeps the FAB's size while the button shrinks inside it. */
+  anchor?: string;
+  /** The FAB that opens and closes the menu. */
+  button?: string;
+  /** The button's icon. */
+  icon?: string;
+  /** The list of items (`presentation="list"`). */
+  list?: string;
+  /** The menu (`presentation="menu"`). */
+  menu?: string;
+  /** The built-in plain tooltip shown on the closed button (`tooltip`). */
+  tooltip?: string;
+}
+/**
+ * `list`: the expressive stack of pills that opens upwards from the button, for compact
+ * and medium windows. `menu`: the FAB opens a standard {@link Menu} 4px above it, as M3
+ * asks for on the web and in large windows.
+ */
+export type FabMenuPresentation = 'list' | 'menu';
+interface FabMenuOwnProps {
+  /** Whether the menu is open (controlled). */
+  open?: boolean;
+  /** Whether the menu starts open (uncontrolled). @default false */
+  defaultOpen?: boolean;
+  /** Called when the menu opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** The button's icon while closed, usually "add". Hidden from assistive tech. */
+  icon: ReactElement;
+  /** The button's icon while open, usually "close". Defaults to `icon`. */
+  openIcon?: ReactElement;
+  /**
+   * How the button hands over from `icon` to `openIcon`: `swap` halfway through the morph
+   * (the M3 spec and Compose), or `rotate`, where the outgoing icon turns 90° and fades
+   * out while the incoming one turns in and fades in. `rotate` goes beyond the M3 spec; it
+   * matches Google's Expressive showcase motion. It mirrors in RTL, and reduced motion keeps
+   * only the crossfade. Only used with `openIcon`. @default "swap"
+   */
+  iconTransition?: IconTransition;
+  /** The FAB size the button starts at; open, it is always the 56px close button. @default "default" */
+  size?: FabMenuSize;
+  /** The button's and items' colour scheme, from M3's FAB menu colour sets. @default "primary" */
+  color?: FabMenuColor;
+  /**
+   * The button's and items' elevation, as on `Fab`: level 3 by default (the spec), `lowered`
+   * level 1, or `flat` level 0. @default "default"
+   */
+  elevation?: FabElevation;
+  /**
+   * How the items show: `list`, the expressive stack of pills above the button, or `menu`,
+   * a standard menu 4px above it (M3's choice for the web and large windows).
+   * @default "list"
+   */
+  presentation?: FabMenuPresentation;
+  /**
+   * While closed, shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3
+   * asks of FABs on the web. Open, the button is the close button and has no tooltip. It
+   * steps aside inside your own `TooltipTrigger`. @default true
+   */
+  tooltip?: boolean;
+  /**
+   * Shows the button. Hiding it closes the menu, shrinks the button towards its centre and
+   * fades it out; showing it expands it back (the FAB's appear / disappear motion). A
+   * hidden menu is `inert`. @default true
+   */
+  visible?: boolean;
+  /**
+   * Plays the appearing animation when the menu mounts. Change its `key` on a page or tab
+   * change to replay it. @default false
+   */
+  appear?: boolean;
+  /** Two to six `FabMenuItem` elements, top to bottom. */
+  children: ReactNode;
+  /** Classes for each part, by slot. */
+  classNames?: FabMenuClassNames;
+}
+export type FabMenuProps = FabMenuOwnProps & AccessibleName & Omit<ComponentPropsWithRef<'div'>, keyof FabMenuOwnProps | 'aria-label' | 'aria-labelledby' | 'color'>;
+/**
+ * M3 Expressive FAB menu: a FAB that opens two to six related actions above it. The button
+ * shrinks into a 56px close button while the items (`FabMenuItem`) appear one after
+ * another from the button upwards, each springing out to its full width; on short windows
+ * they scroll behind the close button. Under reduced motion the button changes at once and
+ * the items fade in and out together. Position the menu on the window's trailing edge
+ * with `className` (`fixed end-4 bottom-4`, and `end-6 bottom-6` in large windows). Keep it
+ * out of normal flow: `fixed`, or at the bottom of a box. In flow, the open list pushes the
+ * button down and can scroll the page.
+ *
+ * The button is named by `aria-label`, which it shows in a tooltip while closed, and reports
+ * `aria-expanded`. Tab or ↓ moves from the button to the top item; ↑ / ↓ move between
+ * items and back to the button. Escape, an outside press, focus leaving the menu or
+ * choosing an item closes it. With `presentation="menu"` the
+ * button opens a standard `Menu` instead, with menu semantics and keyboard support.
+ *
+ * @example
+ * <FabMenu icon={<AddIcon />} openIcon={<CloseIcon />} aria-label="Create" className="fixed end-4 bottom-4">
+ *   <FabMenuItem icon={<ReplyIcon />} onPress={reply}>Reply</FabMenuItem>
+ *   <FabMenuItem icon={<ArchiveIcon />} onPress={archive}>Archive</FabMenuItem>
+ * </FabMenu>
+ */
+export declare function FabMenu({ open, defaultOpen, onOpenChange, icon, openIcon, iconTransition, size, color, elevation, presentation, tooltip, visible, appear, children, classNames, className, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }: FabMenuProps): import("react").JSX.Element;
+export interface FabMenuItemClassNames {
+  /** The item's button, link or menu item, merged with `className`. */
+  root?: string;
+  /** The row holding the icon and the label. */
+  content?: string;
+  /** The icon. */
+  icon?: string;
+  /** The item's label text. */
+  label?: string;
+}
+interface FabMenuItemOwnProps {
+  /**
+   * The item's icon. Hidden from assistive tech; the label names the item. M3 asks for an
+   * icon on every item, since it tells the items apart; leave it out only if necessary.
+   */
+  icon?: ReactElement;
+  /** The label, which M3 always requires. */
+  children: ReactNode;
+  /**
+   * Runs when the item is chosen, in either presentation. (`onPress` works only in the
+   * list, since a menu item has no press event.)
+   */
+  onAction?: () => void;
+  /** Classes for each part, by slot. */
+  classNames?: FabMenuItemClassNames;
+}
+type OmitItem<T> = Omit<T, keyof FabMenuItemOwnProps | 'disabled' | 'toggle'>;
+export type FabMenuItemProps = FabMenuItemOwnProps & (OmitItem<ButtonBaseActionProps> | OmitItem<ButtonBaseLinkProps>);
+/**
+ * An action in a {@link FabMenu}: a 56px pill with an icon and a label (or, with
+ * `presentation="menu"`, a menu item). Choosing it calls `onAction` (and, in the list,
+ * `onPress`), or follows `href`, and closes the menu.
+ */
+export declare function FabMenuItem({ icon, children, classNames, className, style, onPress, onAction, ...rest }: FabMenuItemProps): import("react").JSX.Element;
+//#endregion
+export type { IconTransition };
+//# sourceMappingURL=FabMenu.d.ts.map

package/dist/components/fab-menu/FabMenu.js

@@ -0,0 +1,291 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TriggerContext } from "../../primitives/TriggerContext.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { IconFaces } from "../../primitives/IconFaces.js";
+import { MenuTrigger } from "../menu/menu-trigger.js";
+import { FabTooltip } from "../fab/FabTooltip.js";
+import { Menu, MenuItem } from "../menu/Menu.js";
+import { staggerSteps } from "./fab-menu-stagger.js";
+import { fabMenuStyles } from "./fab-menu-styles.js";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import { mergeProps, useFocusWithin, useInteractOutside, useObjectRef } from "react-aria";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/fab-menu/FabMenu.tsx
+const FabMenuContext = createContext(null);
+const ItemIndexContext = createContext(0);
+const ITEM_SELECTOR = "[data-fab-menu-item]:not([inert])";
+/**
+* M3 Expressive FAB menu: a FAB that opens two to six related actions above it. The button
+* shrinks into a 56px close button while the items (`FabMenuItem`) appear one after
+* another from the button upwards, each springing out to its full width; on short windows
+* they scroll behind the close button. Under reduced motion the button changes at once and
+* the items fade in and out together. Position the menu on the window's trailing edge
+* with `className` (`fixed end-4 bottom-4`, and `end-6 bottom-6` in large windows). Keep it
+* out of normal flow: `fixed`, or at the bottom of a box. In flow, the open list pushes the
+* button down and can scroll the page.
+*
+* The button is named by `aria-label`, which it shows in a tooltip while closed, and reports
+* `aria-expanded`. Tab or ↓ moves from the button to the top item; ↑ / ↓ move between
+* items and back to the button. Escape, an outside press, focus leaving the menu or
+* choosing an item closes it. With `presentation="menu"` the
+* button opens a standard `Menu` instead, with menu semantics and keyboard support.
+*
+* @example
+* <FabMenu icon={<AddIcon />} openIcon={<CloseIcon />} aria-label="Create" className="fixed end-4 bottom-4">
+*   <FabMenuItem icon={<ReplyIcon />} onPress={reply}>Reply</FabMenuItem>
+*   <FabMenuItem icon={<ArchiveIcon />} onPress={archive}>Archive</FabMenuItem>
+* </FabMenu>
+*/
+function FabMenu({ open, defaultOpen = false, onOpenChange, icon, openIcon, iconTransition, size, color, elevation, presentation = "list", tooltip = true, visible = true, appear = false, children, classNames, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }) {
+	const [isOpenState, setOpen] = useControlledState(open, defaultOpen, onOpenChange);
+	const isOpen = isOpenState && visible;
+	const items = Children.toArray(children).filter(isValidElement);
+	const total = items.length;
+	if (process.env.NODE_ENV !== "production" && (total < 2 || total > 6)) console.warn(`[@windmorph/react] A FabMenu holds 2 to 6 items (M3); this one has ${total}. Use a FAB for a single action.`);
+	const isMenu = presentation === "menu";
+	const styles = fabMenuStyles({
+		size,
+		color,
+		elevation
+	});
+	const menuColor = color ?? "primary";
+	const listId = useId();
+	const rootRef = useObjectRef(ref);
+	const buttonRef = useRef(null);
+	const listRef = useRef(null);
+	useEffect(() => {
+		if (!visible && isOpenState) setOpen(false);
+	}, [
+		visible,
+		isOpenState,
+		setOpen
+	]);
+	const reducedMotion = useReducedMotion() ?? false;
+	const target = isOpen ? total : 0;
+	const [staggered, setStaggered] = useState(target);
+	const count = reducedMotion ? target : staggered;
+	const countRef = useRef(count);
+	useEffect(() => {
+		if (reducedMotion) {
+			countRef.current = target;
+			return;
+		}
+		const timers = staggerSteps(countRef.current, target).map(({ at, count: next }) => setTimeout(() => {
+			countRef.current = next;
+			setStaggered(next);
+		}, at));
+		return () => timers.forEach(clearTimeout);
+	}, [target, reducedMotion]);
+	const { isPresent, exitProps } = usePresence(isOpen || count > 0);
+	const close = () => {
+		if (listRef.current?.contains(document.activeElement)) buttonRef.current?.focus();
+		setOpen(false);
+	};
+	useInteractOutside({
+		ref: rootRef,
+		onInteractOutside: close,
+		isDisabled: !isOpen || isMenu
+	});
+	const { focusWithinProps } = useFocusWithin({ onBlurWithin: (event) => {
+		if (!isOpen || isMenu) return;
+		const next = event.relatedTarget;
+		if (next instanceof Node && !rootRef.current?.contains(next)) setOpen(false);
+	} });
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (isOpen && list) list.scrollTop = list.scrollHeight;
+	}, [isOpen]);
+	const focusItem = (from, step) => {
+		const all = [...listRef.current?.querySelectorAll(ITEM_SELECTOR) ?? []];
+		const index = all.indexOf(from);
+		((index === -1 ? all[0] : all[index + step]) ?? buttonRef.current)?.focus();
+	};
+	const onKeyDown = (event) => {
+		if (!isOpen || isMenu) return;
+		const onButton = event.target === buttonRef.current;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			buttonRef.current?.focus();
+			setOpen(false);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			focusItem(event.target, 1);
+		} else if (event.key === "ArrowUp" && !onButton) {
+			event.preventDefault();
+			focusItem(event.target, -1);
+		}
+	};
+	const context = {
+		styles,
+		firstVisible: total - count,
+		count: total,
+		close,
+		onLastExit: exitProps.onTransitionEnd
+	};
+	const toggle = /* @__PURE__ */ jsx(ButtonBase, {
+		ref: buttonRef,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...isMenu ? {} : {
+			"aria-expanded": isOpen,
+			"aria-controls": isPresent ? listId : void 0,
+			onPress: () => setOpen(!isOpen)
+		},
+		"data-open": isOpen && !isMenu || void 0,
+		"data-slot": "button",
+		"data-tokens": "md-comp-fab",
+		"data-color": `${menuColor}-container`,
+		className: styles.button({ class: classNames?.button }),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: styles.icon({ class: classNames?.icon }),
+			children: openIcon ? /* @__PURE__ */ jsx(IconFaces, {
+				icon,
+				alternateIcon: openIcon,
+				alternate: isOpen && !isMenu,
+				transition: iconTransition
+			}) : icon
+		})
+	});
+	const button = /* @__PURE__ */ jsx("span", {
+		"data-hidden": visible ? void 0 : true,
+		"data-appear": appear || void 0,
+		className: styles.anchor({ class: classNames?.anchor }),
+		children: tooltip && ariaLabel ? /* @__PURE__ */ jsx(FabTooltip, {
+			available: !isOpen,
+			label: ariaLabel,
+			className: classNames?.tooltip,
+			children: toggle
+		}) : toggle
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rest, focusWithinProps),
+		ref: rootRef,
+		inert: !visible || void 0,
+		"data-tokens": mergeDataTokens("md-comp-fab-menu", rest),
+		"data-color": menuColor,
+		"data-item-color": `${menuColor}-container`,
+		"data-open": isOpen || void 0,
+		"data-presentation": presentation,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		onKeyDown: (event) => {
+			rest.onKeyDown?.(event);
+			onKeyDown(event);
+		},
+		children: isMenu ? /* @__PURE__ */ jsxs(MenuTrigger, {
+			open: isOpen,
+			onOpenChange: setOpen,
+			children: [button, /* @__PURE__ */ jsx(Menu, {
+				placement: "top-end",
+				offset: 4,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				classNames: { panel: styles.menu({ class: classNames?.menu }) },
+				children: items.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+					leadingIcon: item.props.icon,
+					...menuItemAction(item.props),
+					className: item.props.className,
+					children: item.props.children
+				}, item.key ?? void 0))
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [button, /* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			id: listId,
+			hidden: !isPresent,
+			className: styles.list({ class: classNames?.list }),
+			children: /* @__PURE__ */ jsx(TriggerContext, {
+				value: null,
+				children: /* @__PURE__ */ jsx(FabMenuContext, {
+					value: context,
+					children: items.map((item, index) => /* @__PURE__ */ jsx(ItemIndexContext, {
+						value: index,
+						children: item
+					}, item.key))
+				})
+			})
+		})] })
+	});
+}
+/**
+* A `FabMenuItem`'s action for a `MenuItem`. Menu items are React Stately collection items,
+* which keep any prop; React Aria's `useMenuItem` runs an item's `onAction` and opens its
+* `href` through the router.
+*/
+function menuItemAction({ onAction, href }) {
+	return {
+		onAction,
+		href
+	};
+}
+/**
+* An action in a {@link FabMenu}: a 56px pill with an icon and a label (or, with
+* `presentation="menu"`, a menu item). Choosing it calls `onAction` (and, in the list,
+* `onPress`), or follows `href`, and closes the menu.
+*/
+function FabMenuItem({ icon, children, classNames, className, style, onPress, onAction, ...rest }) {
+	const menu = useContext(FabMenuContext);
+	if (!menu) throw new Error("FabMenuItem must be rendered inside a FabMenu");
+	const index = useContext(ItemIndexContext);
+	const visible = index >= menu.firstVisible;
+	const isLast = index === menu.count - 1;
+	const { styles } = menu;
+	const contentRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const measure = () => setWidth(content.offsetWidth);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (visible && content) setWidth(content.offsetWidth);
+	}, [visible]);
+	const props = {
+		...rest,
+		inert: !visible,
+		"data-visible": visible || void 0,
+		"data-fab-menu-item": "",
+		"data-slot": "item",
+		style: {
+			...style,
+			width: visible ? width : 0
+		},
+		className: styles.item({ class: cn(classNames?.root, className) }),
+		onPress: (event) => {
+			onPress?.(event);
+			onAction?.();
+			menu.close();
+		},
+		onTransitionEnd: isLast ? menu.onLastExit : void 0
+	};
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...props,
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: contentRef,
+			className: styles.itemContent({ class: classNames?.content }),
+			children: [icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "item-icon",
+				className: styles.itemIcon({ class: classNames?.icon }),
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: classNames?.label,
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { FabMenu, FabMenuItem };
+
+//# sourceMappingURL=FabMenu.js.map

package/dist/components/fab-menu/FabMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FabMenu.js","names":[],"sources":["../../../src/components/fab-menu/FabMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type TransitionEvent,\n} from 'react';\nimport { useReducedMotion } from 'motion/react';\nimport { mergeProps, useFocusWithin, useInteractOutside, useObjectRef } from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n} from '../../primitives/ButtonBase';\nimport { IconFaces } from '../../primitives/IconFaces';\nimport type { IconTransition } from '../../primitives/icon-faces-styles';\nimport { TriggerContext } from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { cn } from '../../utils/cn';\nimport { Menu, MenuItem, MenuTrigger, type MenuItemProps } from '../menu/Menu';\nimport type { FabElevation } from '../fab/fab-styles';\nimport { FabTooltip } from '../fab/FabTooltip';\nimport { staggerSteps } from './fab-menu-stagger';\nimport { fabMenuStyles, type FabMenuColor, type FabMenuSize } from './fab-menu-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\ntype Styles = ReturnType<typeof fabMenuStyles>;\n\ninterface FabMenuContextValue {\n  styles: Styles;\n  /** Items at or below this index (counted from the top) are shown. */\n  firstVisible: number;\n  count: number;\n  close: () => void;\n  onLastExit: (event: TransitionEvent<HTMLElement>) => void;\n}\n\nexport type { IconTransition };\n\nconst FabMenuContext = createContext<FabMenuContextValue | null>(null);\nconst ItemIndexContext = createContext(0);\n\ntype AccessibleName =\n  | {\n      /** Accessible name for the button, also its tooltip. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n      /** The id of the element that names the button. */\n      'aria-labelledby'?: string;\n    }\n  | {\n      /** Accessible name for the button, also its tooltip. */\n      'aria-label'?: string;\n      /** The id of the element that names the button. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\nexport interface FabMenuClassNames {\n  /** The outer container, merged with `className`. */\n  root?: string;\n  /** The box that keeps the FAB's size while the button shrinks inside it. */\n  anchor?: string;\n  /** The FAB that opens and closes the menu. */\n  button?: string;\n  /** The button's icon. */\n  icon?: string;\n  /** The list of items (`presentation=\"list\"`). */\n  list?: string;\n  /** The menu (`presentation=\"menu\"`). */\n  menu?: string;\n  /** The built-in plain tooltip shown on the closed button (`tooltip`). */\n  tooltip?: string;\n}\n\n/**\n * `list`: the expressive stack of pills that opens upwards from the button, for compact\n * and medium windows. `menu`: the FAB opens a standard {@link Menu} 4px above it, as M3\n * asks for on the web and in large windows.\n */\nexport type FabMenuPresentation = 'list' | 'menu';\n\ninterface FabMenuOwnProps {\n  /** Whether the menu is open (controlled). */\n  open?: boolean;\n  /** Whether the menu starts open (uncontrolled). @default false */\n  defaultOpen?: boolean;\n  /** Called when the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** The button's icon while closed, usually \"add\". Hidden from assistive tech. */\n  icon: ReactElement;\n  /** The button's icon while open, usually \"close\". Defaults to `icon`. */\n  openIcon?: ReactElement;\n  /**\n   * How the button hands over from `icon` to `openIcon`: `swap` halfway through the morph\n   * (the M3 spec and Compose), or `rotate`, where the outgoing icon turns 90° and fades\n   * out while the incoming one turns in and fades in. `rotate` goes beyond the M3 spec; it\n   * matches Google's Expressive showcase motion. It mirrors in RTL, and reduced motion keeps\n   * only the crossfade. Only used with `openIcon`. @default \"swap\"\n   */\n  iconTransition?: IconTransition;\n  /** The FAB size the button starts at; open, it is always the 56px close button. @default \"default\" */\n  size?: FabMenuSize;\n  /** The button's and items' colour scheme, from M3's FAB menu colour sets. @default \"primary\" */\n  color?: FabMenuColor;\n  /**\n   * The button's and items' elevation, as on `Fab`: level 3 by default (the spec), `lowered`\n   * level 1, or `flat` level 0. @default \"default\"\n   */\n  elevation?: FabElevation;\n  /**\n   * How the items show: `list`, the expressive stack of pills above the button, or `menu`,\n   * a standard menu 4px above it (M3's choice for the web and large windows).\n   * @default \"list\"\n   */\n  presentation?: FabMenuPresentation;\n  /**\n   * While closed, shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3\n   * asks of FABs on the web. Open, the button is the close button and has no tooltip. It\n   * steps aside inside your own `TooltipTrigger`. @default true\n   */\n  tooltip?: boolean;\n  /**\n   * Shows the button. Hiding it closes the menu, shrinks the button towards its centre and\n   * fades it out; showing it expands it back (the FAB's appear / disappear motion). A\n   * hidden menu is `inert`. @default true\n   */\n  visible?: boolean;\n  /**\n   * Plays the appearing animation when the menu mounts. Change its `key` on a page or tab\n   * change to replay it. @default false\n   */\n  appear?: boolean;\n  /** Two to six `FabMenuItem` elements, top to bottom. */\n  children: ReactNode;\n  /** Classes for each part, by slot. */\n  classNames?: FabMenuClassNames;\n}\n\nexport type FabMenuProps = FabMenuOwnProps &\n  AccessibleName &\n  Omit<\n    ComponentPropsWithRef<'div'>,\n    keyof FabMenuOwnProps | 'aria-label' | 'aria-labelledby' | 'color'\n  >;\n\nconst ITEM_SELECTOR = '[data-fab-menu-item]:not([inert])';\n\n/**\n * M3 Expressive FAB menu: a FAB that opens two to six related actions above it. The button\n * shrinks into a 56px close button while the items (`FabMenuItem`) appear one after\n * another from the button upwards, each springing out to its full width; on short windows\n * they scroll behind the close button. Under reduced motion the button changes at once and\n * the items fade in and out together. Position the menu on the window's trailing edge\n * with `className` (`fixed end-4 bottom-4`, and `end-6 bottom-6` in large windows). Keep it\n * out of normal flow: `fixed`, or at the bottom of a box. In flow, the open list pushes the\n * button down and can scroll the page.\n *\n * The button is named by `aria-label`, which it shows in a tooltip while closed, and reports\n * `aria-expanded`. Tab or ↓ moves from the button to the top item; ↑ / ↓ move between\n * items and back to the button. Escape, an outside press, focus leaving the menu or\n * choosing an item closes it. With `presentation=\"menu\"` the\n * button opens a standard `Menu` instead, with menu semantics and keyboard support.\n *\n * @example\n * <FabMenu icon={<AddIcon />} openIcon={<CloseIcon />} aria-label=\"Create\" className=\"fixed end-4 bottom-4\">\n *   <FabMenuItem icon={<ReplyIcon />} onPress={reply}>Reply</FabMenuItem>\n *   <FabMenuItem icon={<ArchiveIcon />} onPress={archive}>Archive</FabMenuItem>\n * </FabMenu>\n */\nexport function FabMenu({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  icon,\n  openIcon,\n  iconTransition,\n  size,\n  color,\n  elevation,\n  presentation = 'list',\n  tooltip = true,\n  visible = true,\n  appear = false,\n  children,\n  classNames,\n  className,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...rest\n}: FabMenuProps) {\n  const [isOpenState, setOpen] = useControlledState(open, defaultOpen, onOpenChange);\n  const isOpen = isOpenState && visible;\n  const items = Children.toArray(children).filter(isValidElement<FabMenuItemProps>);\n  const total = items.length;\n  if (process.env.NODE_ENV !== 'production' && (total < 2 || total > 6)) {\n    console.warn(\n      `[@windmorph/react] A FabMenu holds 2 to 6 items (M3); this one has ${total}. Use a FAB for a single action.`,\n    );\n  }\n  const isMenu = presentation === 'menu';\n  const styles = fabMenuStyles({ size, color, elevation });\n  const menuColor = color ?? 'primary';\n  const listId = useId();\n  const rootRef = useObjectRef(ref);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  // Hiding the button closes the menu.\n  useEffect(() => {\n    if (!visible && isOpenState) setOpen(false);\n  }, [visible, isOpenState, setOpen]);\n\n  // The visible item count steps through Compose's stagger spring (fab-menu-stagger.ts);\n  // under reduced motion every item shows and hides with the menu, in the same render.\n  const reducedMotion = useReducedMotion() ?? false;\n  const target = isOpen ? total : 0;\n  const [staggered, setStaggered] = useState(target);\n  const count = reducedMotion ? target : staggered;\n  const countRef = useRef(count);\n  useEffect(() => {\n    if (reducedMotion) {\n      countRef.current = target;\n      return;\n    }\n    const steps = staggerSteps(countRef.current, target);\n    const timers = steps.map(({ at, count: next }) =>\n      setTimeout(() => {\n        countRef.current = next;\n        setStaggered(next);\n      }, at),\n    );\n    return () => timers.forEach(clearTimeout);\n  }, [target, reducedMotion]);\n\n  // The list stays laid out until the last item has faded.\n  const { isPresent, exitProps } = usePresence(isOpen || count > 0);\n\n  const close = () => {\n    if (listRef.current?.contains(document.activeElement)) buttonRef.current?.focus();\n    setOpen(false);\n  };\n\n  useInteractOutside({ ref: rootRef, onInteractOutside: close, isDisabled: !isOpen || isMenu });\n\n  // Tabbing out of the open menu closes it, as an outside press does, so the open list never\n  // covers what takes focus next (M3: don't obscure the focus indicator; 2026-10-15). Focus\n  // leaving the window (no new target) keeps it open. Always tracked, so focus that came in\n  // while it was closed (the button, then Enter) closes it too as it leaves (2026-10-17).\n  const { focusWithinProps } = useFocusWithin({\n    onBlurWithin: (event) => {\n      if (!isOpen || isMenu) return;\n      const next = event.relatedTarget;\n      if (next instanceof Node && !rootRef.current?.contains(next)) setOpen(false);\n    },\n  });\n\n  // A list taller than the window scrolls; it opens showing the items nearest the button.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    if (isOpen && list) list.scrollTop = list.scrollHeight;\n  }, [isOpen]);\n\n  const focusItem = (from: Element, step: 1 | -1) => {\n    const all = [...(listRef.current?.querySelectorAll<HTMLElement>(ITEM_SELECTOR) ?? [])];\n    const index = all.indexOf(from as HTMLElement);\n    const next = index === -1 ? all[0] : all[index + step];\n    (next ?? buttonRef.current)?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isOpen || isMenu) return;\n    const onButton = event.target === buttonRef.current;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      buttonRef.current?.focus();\n      setOpen(false);\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem(event.target as Element, 1);\n    } else if (event.key === 'ArrowUp' && !onButton) {\n      event.preventDefault();\n      focusItem(event.target as Element, -1);\n    }\n  };\n\n  const context: FabMenuContextValue = {\n    styles,\n    firstVisible: total - count,\n    count: total,\n    close,\n    onLastExit: exitProps.onTransitionEnd,\n  };\n\n  const toggle = (\n    <ButtonBase\n      ref={buttonRef}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...(isMenu\n        ? {}\n        : {\n            'aria-expanded': isOpen,\n            'aria-controls': isPresent ? listId : undefined,\n            onPress: () => setOpen(!isOpen),\n          })}\n      data-open={(isOpen && !isMenu) || undefined}\n      data-slot=\"button\"\n      // Closed, the button is a FAB of the menu's container colour, painted by its tokens.\n      data-tokens=\"md-comp-fab\"\n      data-color={`${menuColor}-container`}\n      className={styles.button({ class: classNames?.button })}\n    >\n      <span aria-hidden=\"true\" className={styles.icon({ class: classNames?.icon })}>\n        {openIcon ? (\n          <IconFaces\n            icon={icon}\n            alternateIcon={openIcon}\n            alternate={isOpen && !isMenu}\n            transition={iconTransition}\n          />\n        ) : (\n          icon\n        )}\n      </span>\n    </ButtonBase>\n  );\n\n  const button = (\n    <span\n      data-hidden={visible ? undefined : true}\n      data-appear={appear || undefined}\n      className={styles.anchor({ class: classNames?.anchor })}\n    >\n      {tooltip && ariaLabel ? (\n        <FabTooltip available={!isOpen} label={ariaLabel} className={classNames?.tooltip}>\n          {toggle}\n        </FabTooltip>\n      ) : (\n        toggle\n      )}\n    </span>\n  );\n\n  return (\n    <div\n      {...mergeProps(rest, focusWithinProps)}\n      ref={rootRef}\n      inert={!visible || undefined}\n      // The component tokens' hook (fab-menu-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-fab-menu', rest)}\n      data-color={menuColor}\n      data-item-color={`${menuColor}-container`}\n      data-open={isOpen || undefined}\n      data-presentation={presentation}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      // The app's own handler runs first, then the menu's keys.\n      onKeyDown={(event) => {\n        rest.onKeyDown?.(event);\n        onKeyDown(event);\n      }}\n    >\n      {isMenu ? (\n        <MenuTrigger open={isOpen} onOpenChange={setOpen}>\n          {button}\n          <Menu\n            placement=\"top-end\"\n            offset={4}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            classNames={{ panel: styles.menu({ class: classNames?.menu }) }}\n          >\n            {items.map((item) => (\n              <MenuItem\n                key={item.key ?? undefined}\n                leadingIcon={item.props.icon}\n                {...menuItemAction(item.props)}\n                className={item.props.className}\n              >\n                {item.props.children}\n              </MenuItem>\n            ))}\n          </Menu>\n        </MenuTrigger>\n      ) : (\n        <>\n          {button}\n          <div\n            ref={listRef}\n            id={listId}\n            hidden={!isPresent}\n            className={styles.list({ class: classNames?.list })}\n          >\n            {/* An enclosing trigger (e.g. a TooltipTrigger) is for the button, not the items. */}\n            <TriggerContext value={null}>\n              <FabMenuContext value={context}>\n                {items.map((item, index) => (\n                  <ItemIndexContext key={item.key} value={index}>\n                    {item}\n                  </ItemIndexContext>\n                ))}\n              </FabMenuContext>\n            </TriggerContext>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * A `FabMenuItem`'s action for a `MenuItem`. Menu items are React Stately collection items,\n * which keep any prop; React Aria's `useMenuItem` runs an item's `onAction` and opens its\n * `href` through the router.\n */\nfunction menuItemAction({ onAction, href }: FabMenuItemProps): Partial<MenuItemProps> {\n  return { onAction, href } as Partial<MenuItemProps>;\n}\n\nexport interface FabMenuItemClassNames {\n  /** The item's button, link or menu item, merged with `className`. */\n  root?: string;\n  /** The row holding the icon and the label. */\n  content?: string;\n  /** The icon. */\n  icon?: string;\n  /** The item's label text. */\n  label?: string;\n}\n\ninterface FabMenuItemOwnProps {\n  /**\n   * The item's icon. Hidden from assistive tech; the label names the item. M3 asks for an\n   * icon on every item, since it tells the items apart; leave it out only if necessary.\n   */\n  icon?: ReactElement;\n  /** The label, which M3 always requires. */\n  children: ReactNode;\n  /**\n   * Runs when the item is chosen, in either presentation. (`onPress` works only in the\n   * list, since a menu item has no press event.)\n   */\n  onAction?: () => void;\n  /** Classes for each part, by slot. */\n  classNames?: FabMenuItemClassNames;\n}\n\ntype OmitItem<T> = Omit<T, keyof FabMenuItemOwnProps | 'disabled' | 'toggle'>;\n\nexport type FabMenuItemProps = FabMenuItemOwnProps &\n  (OmitItem<ButtonBaseActionProps> | OmitItem<ButtonBaseLinkProps>);\n\n/**\n * An action in a {@link FabMenu}: a 56px pill with an icon and a label (or, with\n * `presentation=\"menu\"`, a menu item). Choosing it calls `onAction` (and, in the list,\n * `onPress`), or follows `href`, and closes the menu.\n */\nexport function FabMenuItem({\n  icon,\n  children,\n  classNames,\n  className,\n  style,\n  onPress,\n  onAction,\n  ...rest\n}: FabMenuItemProps) {\n  const menu = useContext(FabMenuContext);\n  if (!menu) throw new Error('FabMenuItem must be rendered inside a FabMenu');\n  const index = useContext(ItemIndexContext);\n  const visible = index >= menu.firstVisible;\n  const isLast = index === menu.count - 1;\n  const { styles } = menu;\n\n  // The item's width springs between 0 and its content's natural width.\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [width, setWidth] = useState(0);\n  useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (!content) return;\n    const measure = () => setWidth(content.offsetWidth);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n    return () => observer.disconnect();\n  }, []);\n  // The list is hidden while the menu is closed, where the content measures 0; measure it\n  // again as the item shows, before paint, so it never shows a frame at width 0.\n  useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (visible && content) setWidth(content.offsetWidth);\n  }, [visible]);\n\n  const props = {\n    ...rest,\n    inert: !visible,\n    'data-visible': visible || undefined,\n    'data-fab-menu-item': '',\n    'data-slot': 'item',\n    style: { ...style, width: visible ? width : 0 },\n    className: styles.item({ class: cn(classNames?.root, className) }),\n    onPress: (event: Parameters<NonNullable<ButtonBaseActionProps['onPress']>>[0]) => {\n      onPress?.(event);\n      onAction?.();\n      menu.close();\n    },\n    onTransitionEnd: isLast ? menu.onLastExit : undefined,\n  };\n\n  return (\n    <ButtonBase {...(props as ButtonBaseActionProps)}>\n      <span ref={contentRef} className={styles.itemContent({ class: classNames?.content })}>\n        {icon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"item-icon\"\n            className={styles.itemIcon({ class: classNames?.icon })}\n          >\n            {icon}\n          </span>\n        )}\n        <span className={classNames?.label}>{children}</span>\n      </span>\n    </ButtonBase>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fab-menu/fab-menu-stagger.js

@@ -0,0 +1,51 @@
+import { SPRINGS } from "../../tokens/motion.js";
+//#region src/components/fab-menu/fab-menu-stagger.ts
+const STAGGER_SPRING = SPRINGS.expressive.effects.slow;
+/** Normalised step response (0 → 1, starting at rest) of a spring at `seconds`. */
+function springStep({ dampingRatio, stiffness }, seconds) {
+	const omega = Math.sqrt(stiffness);
+	if (dampingRatio >= 1) return 1 - (1 + omega * seconds) * Math.exp(-omega * seconds);
+	const decay = dampingRatio * omega;
+	const omegaD = omega * Math.sqrt(1 - dampingRatio * dampingRatio);
+	return 1 - Math.exp(-decay * seconds) * (Math.cos(omegaD * seconds) + decay / omegaD * Math.sin(omegaD * seconds));
+}
+/** Milliseconds until the (monotonic) step response first reaches `fraction`. */
+function timeToReach(fraction, spring) {
+	if (fraction <= 0) return 0;
+	let lo = 0;
+	let hi = .05;
+	while (springStep(spring, hi) < fraction) hi *= 2;
+	for (let i = 0; i < 50; i++) {
+		const mid = (lo + hi) / 2;
+		if (springStep(spring, mid) < fraction) lo = mid;
+		else hi = mid;
+	}
+	return Math.round(hi * 1e3);
+}
+/**
+* When the visible count steps while springing from `from` to `to` items, starting at rest.
+* Opening shows the item nearest the button first; closing hides the farthest first.
+*/
+function staggerSteps(from, to, spring = STAGGER_SPRING) {
+	const steps = [];
+	const span = Math.abs(to - from);
+	if (span === 0) return steps;
+	const end = timeToReach((span - 1) / span, spring);
+	if (to > from) for (let m = from + 1; m < to; m++) steps.push({
+		at: timeToReach((m - from) / span, spring),
+		count: m
+	});
+	else for (let m = from; m > to + 1; m--) steps.push({
+		at: timeToReach((from - m) / span, spring),
+		count: m - 1
+	});
+	steps.push({
+		at: end,
+		count: to
+	});
+	return steps;
+}
+//#endregion
+export { springStep, staggerSteps };
+
+//# sourceMappingURL=fab-menu-stagger.js.map

package/dist/components/fab-menu/fab-menu-stagger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-stagger.js","names":[],"sources":["../../../src/components/fab-menu/fab-menu-stagger.ts"],"sourcesContent":["import { SPRINGS, type SpringToken } from '../../tokens/motion';\n\n/*\n * Compose's FloatingActionButtonMenu animates the number of visible items as an Int on the\n * slow effects spring (identical in both motion schemes) with a visibility threshold of 1\n * item. The Int is the truncated spring value, and the spring ends (snapping to its\n * target) once it is within one item of it. Each item then animates its own width and\n * opacity. These functions give the times at which the visible count steps.\n */\n\nconst STAGGER_SPRING = SPRINGS.expressive.effects.slow;\n\n/** Normalised step response (0 → 1, starting at rest) of a spring at `seconds`. */\nexport function springStep({ dampingRatio, stiffness }: SpringToken, seconds: number): number {\n  const omega = Math.sqrt(stiffness);\n  if (dampingRatio >= 1) {\n    // Critically damped (effects springs): 1 − (1 + ωt)e^(−ωt).\n    return 1 - (1 + omega * seconds) * Math.exp(-omega * seconds);\n  }\n  const decay = dampingRatio * omega;\n  const omegaD = omega * Math.sqrt(1 - dampingRatio * dampingRatio);\n  return (\n    1 -\n    Math.exp(-decay * seconds) *\n      (Math.cos(omegaD * seconds) + (decay / omegaD) * Math.sin(omegaD * seconds))\n  );\n}\n\n/** Milliseconds until the (monotonic) step response first reaches `fraction`. */\nfunction timeToReach(fraction: number, spring: SpringToken): number {\n  if (fraction <= 0) return 0;\n  let lo = 0;\n  let hi = 0.05;\n  while (springStep(spring, hi) < fraction) hi *= 2;\n  for (let i = 0; i < 50; i++) {\n    const mid = (lo + hi) / 2;\n    if (springStep(spring, mid) < fraction) lo = mid;\n    else hi = mid;\n  }\n  return Math.round(hi * 1000);\n}\n\nexport interface StaggerStep {\n  /** Milliseconds after the change. */\n  at: number;\n  /** Visible items (counted from the button upwards) from this time on. */\n  count: number;\n}\n\n/**\n * When the visible count steps while springing from `from` to `to` items, starting at rest.\n * Opening shows the item nearest the button first; closing hides the farthest first.\n */\nexport function staggerSteps(from: number, to: number, spring = STAGGER_SPRING): StaggerStep[] {\n  const steps: StaggerStep[] = [];\n  const span = Math.abs(to - from);\n  if (span === 0) return steps;\n  // The spring ends within one item of the target, then snaps to it.\n  const end = timeToReach((span - 1) / span, spring);\n  if (to > from) {\n    // The truncated value reaches m when from + span·s ≥ m.\n    for (let m = from + 1; m < to; m++) {\n      steps.push({ at: timeToReach((m - from) / span, spring), count: m });\n    }\n  } else {\n    // The truncated value drops below m (to m − 1) once from − span·s < m.\n    for (let m = from; m > to + 1; m--) {\n      steps.push({ at: timeToReach((from - m) / span, spring), count: m - 1 });\n    }\n  }\n  steps.push({ at: end, count: to });\n  return steps;\n}\n"],"mappings":";;AAUA,MAAM,iBAAiB,QAAQ,WAAW,QAAQ;;AAGlD,SAAgB,WAAW,EAAE,cAAc,aAA0B,SAAyB;CAC5F,MAAM,QAAQ,KAAK,KAAK,SAAS;CACjC,IAAI,gBAAgB,GAElB,OAAO,KAAK,IAAI,QAAQ,WAAW,KAAK,IAAI,CAAC,QAAQ,OAAO;CAE9D,MAAM,QAAQ,eAAe;CAC7B,MAAM,SAAS,QAAQ,KAAK,KAAK,IAAI,eAAe,YAAY;CAChE,OACE,IACA,KAAK,IAAI,CAAC,QAAQ,OAAO,KACtB,KAAK,IAAI,SAAS,OAAO,IAAK,QAAQ,SAAU,KAAK,IAAI,SAAS,OAAO;AAEhF;;AAGA,SAAS,YAAY,UAAkB,QAA6B;CAClE,IAAI,YAAY,GAAG,OAAO;CAC1B,IAAI,KAAK;CACT,IAAI,KAAK;CACT,OAAO,WAAW,QAAQ,EAAE,IAAI,UAAU,MAAM;CAChD,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK;EAC3B,MAAM,OAAO,KAAK,MAAM;EACxB,IAAI,WAAW,QAAQ,GAAG,IAAI,UAAU,KAAK;OACxC,KAAK;CACZ;CACA,OAAO,KAAK,MAAM,KAAK,GAAI;AAC7B;;;;;AAaA,SAAgB,aAAa,MAAc,IAAY,SAAS,gBAA+B;CAC7F,MAAM,QAAuB,CAAC;CAC9B,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI;CAC/B,IAAI,SAAS,GAAG,OAAO;CAEvB,MAAM,MAAM,aAAa,OAAO,KAAK,MAAM,MAAM;CACjD,IAAI,KAAK,MAEP,KAAK,IAAI,IAAI,OAAO,GAAG,IAAI,IAAI,KAC7B,MAAM,KAAK;EAAE,IAAI,aAAa,IAAI,QAAQ,MAAM,MAAM;EAAG,OAAO;CAAE,CAAC;MAIrE,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,GAAG,KAC7B,MAAM,KAAK;EAAE,IAAI,aAAa,OAAO,KAAK,MAAM,MAAM;EAAG,OAAO,IAAI;CAAE,CAAC;CAG3E,MAAM,KAAK;EAAE,IAAI;EAAK,OAAO;CAAG,CAAC;CACjC,OAAO;AACT"}