@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,209 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { IconTransition } from "../../primitives/icon-faces-styles.js";
+import { FabElevation } from "../fab/fab-styles.js";
+import { DockedToolbarArrangement, DockedToolbarColor, FloatingToolbarColor, ToolbarExitEdge, ToolbarOrientation } from "./toolbar-styles.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/components/toolbar/Toolbar.d.ts
+type Naming = {
+  /** Accessible name for the toolbar. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the toolbar. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+type DivProps<Own> = Omit<ComponentPropsWithRef<'div'>, keyof Own | 'aria-label' | 'aria-labelledby' | 'color'>;
+export interface DockedToolbarClassNames {
+  /** The toolbar's container, merged with `className`. */
+  root?: string;
+}
+interface DockedToolbarOwnProps {
+  /**
+   * Centre the items 32px apart (M3's default), or spread them across the toolbar, which
+   * M3 recommends in compact windows. @default "centered"
+   */
+  arrangement?: DockedToolbarArrangement;
+  /**
+   * The container colour: `standard` (`surface-container`) or `vibrant`
+   * (`primary-container`), as the floating toolbar's. @default "standard"
+   */
+  color?: DockedToolbarColor;
+  /**
+   * Shows the toolbar. Hiding it slides it off the bottom of the window, e.g. while the
+   * page scrolls (`useToolbarScrollExit`). A hidden toolbar is `inert`. @default true
+   */
+  visible?: boolean;
+  /** The toolbar's controls, e.g. icon buttons, buttons or a FAB. */
+  children: ReactNode;
+  /** Classes for each part, by slot. */
+  classNames?: DockedToolbarClassNames;
+}
+export type DockedToolbarProps = DockedToolbarOwnProps & Naming & DivProps<DockedToolbarOwnProps>;
+/**
+ * M3 Expressive docked toolbar: a full-width 64px bar of actions, usually along the bottom
+ * of the window (it replaces the bottom app bar). Tab and the arrow keys move between its
+ * controls (M3).
+ *
+ * @example
+ * <DockedToolbar aria-label="Message actions" className="fixed inset-x-0 bottom-0">
+ *   <IconButton icon={<ArchiveIcon />} aria-label="Archive" />
+ *   <IconButton icon={<DeleteIcon />} aria-label="Delete" />
+ * </DockedToolbar>
+ */
+export declare function DockedToolbar(props: DockedToolbarProps): import("react").JSX.Element;
+export interface FloatingToolbarClassNames {
+  /** The outer container, merged with `className`. */
+  root?: string;
+  /** The main content group. */
+  items?: string;
+  /** The group of `leading` controls. */
+  leading?: string;
+  /** The group of `trailing` controls. */
+  trailing?: string;
+  /** The toolbar's surface when it has a FAB. */
+  surface?: string;
+  /** The box the FAB fills (56px, 80px while collapsed). */
+  fab?: string;
+}
+interface FloatingToolbarBaseProps {
+  /** Lay the controls out in a row, or in a column at a window edge. @default "horizontal" */
+  orientation?: ToolbarOrientation;
+  /**
+   * The container colour: `standard` (`surface-container`) or `vibrant`
+   * (`primary-container`). @default "standard"
+   */
+  color?: FloatingToolbarColor;
+  /**
+   * Level 1 elevation, which M3 gives floating toolbars by default. Remove it when the
+   * content beneath is visually distinct. @default true
+   */
+  elevated?: boolean;
+  /**
+   * Shows the leading and trailing content, or (with a FAB) the toolbar itself. Collapse
+   * it while the page scrolls, e.g. with `useToolbarScrollExpansion`. Collapsed controls
+   * stay in the tab order and the accessibility tree, and keyboard focus inside the
+   * toolbar expands it, so every control stays reachable. @default true
+   */
+  expanded?: boolean;
+  /**
+   * Shows the toolbar. Hiding it slides it off `exitEdge`, e.g. while the page scrolls
+   * (`useToolbarScrollExit`). A hidden toolbar is `inert`. Don't combine it with
+   * collapsing: M3 says a toolbar shouldn't both collapse and leave the screen.
+   * @default true
+   */
+  visible?: boolean;
+  /** The window edge a hidden toolbar slides past (logical). @default "bottom" */
+  exitEdge?: ToolbarExitEdge;
+  /** The main controls, always shown. */
+  children: ReactNode;
+  /** Classes for each part, by slot. */
+  classNames?: FloatingToolbarClassNames;
+}
+type FloatingToolbarContent = {
+  /** Controls before the main content, hidden while collapsed. */
+  leading?: ReactNode;
+  /** Controls after the main content, hidden while collapsed. */
+  trailing?: ReactNode;
+  fab?: undefined;
+  fabPlacement?: undefined;
+} | {
+  leading?: undefined;
+  trailing?: undefined;
+  /**
+   * A FAB beside the toolbar, usually a {@link ToolbarFab}. Collapsing hides the
+   * toolbar and grows the FAB from 56px to 80px.
+   */
+  fab: ReactElement;
+  /**
+   * Side of the toolbar the FAB sits on. `top` is the same as `start` and `bottom` as
+   * `end`, so the value can stay put when the orientation changes. @default "end"
+   */
+  fabPlacement?: 'start' | 'end' | 'top' | 'bottom';
+};
+type FloatingToolbarOwnProps = FloatingToolbarBaseProps & FloatingToolbarContent;
+export type FloatingToolbarProps = FloatingToolbarOwnProps & Naming & DivProps<FloatingToolbarBaseProps & Record<'leading' | 'trailing' | 'fab' | 'fabPlacement', unknown>>;
+/**
+ * M3 Expressive floating toolbar: a pill of controls that floats above the content,
+ * horizontal or vertical, in standard or vibrant colours. Leading and trailing content
+ * collapse with `expanded`; or pair it with a FAB, and collapsing hides the toolbar while
+ * the FAB grows. Tab and the arrow keys move between its
+ * controls (M3).
+ *
+ * @example
+ * <FloatingToolbar aria-label="Formatting" expanded={expanded} className="fixed bottom-4 start-1/2"
+ *   leading={<IconButton icon={<UndoIcon />} aria-label="Undo" />}>
+ *   <IconButton toggle icon={<BoldIcon />} aria-label="Bold" />
+ * </FloatingToolbar>
+ *
+ * <FloatingToolbar aria-label="Actions" fab={<ToolbarFab icon={<AddIcon />} aria-label="New" />}>
+ *   <IconButton icon={<SearchIcon />} aria-label="Search" />
+ * </FloatingToolbar>
+ */
+export declare function FloatingToolbar(props: FloatingToolbarProps): import("react").JSX.Element;
+export interface ToolbarFabClassNames {
+  /** The FAB's button, merged with `className`. */
+  root?: string;
+  /** The icon. */
+  icon?: string;
+  /** The built-in plain tooltip that shows the label (`tooltip`). */
+  tooltip?: string;
+}
+type AccessibleName = {
+  /** Accessible name for the FAB, also its tooltip. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+  /** The id of the element that names the FAB. */
+  'aria-labelledby'?: string;
+} | {
+  /** Accessible name for the FAB, also its tooltip. */
+  'aria-label'?: string;
+  /** The id of the element that names the FAB. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+interface ToolbarFabOwnProps {
+  /**
+   * The icon (while the toolbar is collapsed, when `expandedIcon` is set). Hidden from
+   * assistive tech; `aria-label` names the FAB.
+   */
+  icon: ReactElement;
+  /**
+   * The icon while the toolbar is expanded, e.g. "close" for a FAB that collapses the
+   * toolbar. Without it, the FAB always shows `icon`.
+   */
+  expandedIcon?: ReactElement;
+  /**
+   * How the FAB hands over between `icon` and `expandedIcon`: `swap` halfway through the
+   * toolbar's expand / collapse spring, 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 `expandedIcon`. @default "swap"
+   */
+  iconTransition?: IconTransition;
+  /**
+   * The FAB's colour scheme. Defaults to the toolbar's colour: `primary-container`
+   * (standard) or `tertiary-container` (vibrant).
+   * @default the toolbar's color, or "standard" outside a toolbar
+   */
+  color?: FloatingToolbarColor;
+  /**
+   * Shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of FABs
+   * on the web. @default true
+   */
+  tooltip?: boolean;
+  /**
+   * As on `Fab`: level 2 by default (hover 3), `lowered` level 1, or `flat` level 0.
+   * @default "default"
+   */
+  elevation?: FabElevation;
+  /** Classes for each part, by slot. */
+  classNames?: ToolbarFabClassNames;
+}
+type OmitToolbarFab<T> = Omit<T, keyof ToolbarFabOwnProps | 'children' | 'disabled' | 'toggle' | 'aria-label' | 'aria-labelledby'>;
+export type ToolbarFabProps = ToolbarFabOwnProps & AccessibleName & (OmitToolbarFab<ButtonBaseActionProps> | OmitToolbarFab<ButtonBaseLinkProps>);
+/**
+ * The FAB of a {@link FloatingToolbar} (Compose's `StandardFloatingActionButton` /
+ * `VibrantFloatingActionButton`): it fills the toolbar's FAB box, 56px or 80px while the
+ * toolbar is collapsed, with 16px corners at level 2. With `expandedIcon` it shows that
+ * icon while the toolbar is expanded and `icon` while it is collapsed.
+ */
+export declare function ToolbarFab({ icon, expandedIcon, iconTransition, color, tooltip, elevation, classNames, className, ...base }: ToolbarFabProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/components/toolbar/Toolbar.js

@@ -0,0 +1,282 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { ButtonContext, standardIconButtons } from "../button/ButtonContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { iconFacesStyles } from "../../primitives/icon-faces-styles.js";
+import { IconFaces } from "../../primitives/IconFaces.js";
+import { useWarnOnce } from "../../utils/warn-once.js";
+import { ToolbarContext } from "../../primitives/ToolbarContext.js";
+import { TooltipTrigger, WithoutDescription } from "../tooltip/tooltip-trigger.js";
+import { LazyTooltip } from "../tooltip/lazy-tooltip.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { toolbarKeyDown } from "../../utils/toolbar-keys.js";
+import { useNaturalSize } from "../../utils/natural-size.js";
+import { dockedToolbarStyles, floatingToolbarStyles, toolbarCollapseAnchor, toolbarFabStyles } from "./toolbar-styles.js";
+import { useContext, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, mergeRefs, useFocusRing, useObjectRef, useToolbar } from "react-aria";
+//#region src/components/toolbar/Toolbar.tsx
+const DOCKED = {
+	standard: {
+		kind: "docked",
+		color: "standard"
+	},
+	vibrant: {
+		kind: "docked",
+		color: "vibrant"
+	}
+};
+/** The `data-*` and `inert` attributes of a toolbar that has exited the screen. */
+const exitProps = (visible) => ({
+	"data-hidden": visible ? void 0 : true,
+	inert: !visible || void 0
+});
+/** Applies React Aria's toolbar behaviour (role, arrow keys) with the DOM's direction. */
+function useToolbarRoot(ref, directionRef, props) {
+	const merged = useMemo(() => mergeRefs(ref, directionRef), [ref, directionRef]);
+	const rootRef = useObjectRef(merged);
+	const { toolbarProps: aria } = useToolbar(props, rootRef);
+	const { orientation } = props;
+	const nested = aria.onKeyDownCapture === void 0;
+	return {
+		rootRef,
+		toolbarProps: {
+			...aria,
+			onFocusCapture: void 0,
+			onBlurCapture: void 0,
+			onKeyDownCapture: nested ? void 0 : (event) => void toolbarKeyDown(event, orientation)
+		}
+	};
+}
+/**
+* M3 Expressive docked toolbar: a full-width 64px bar of actions, usually along the bottom
+* of the window (it replaces the bottom app bar). Tab and the arrow keys move between its
+* controls (M3).
+*
+* @example
+* <DockedToolbar aria-label="Message actions" className="fixed inset-x-0 bottom-0">
+*   <IconButton icon={<ArchiveIcon />} aria-label="Archive" />
+*   <IconButton icon={<DeleteIcon />} aria-label="Delete" />
+* </DockedToolbar>
+*/
+function DockedToolbar(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(DockedToolbarRoot, {
+		...props,
+		directionRef
+	}) });
+}
+function DockedToolbarRoot({ arrangement, color = "standard", visible = true, children, classNames, className, ref, directionRef, ...rest }) {
+	const { rootRef, toolbarProps } = useToolbarRoot(ref, directionRef, {
+		...rest,
+		orientation: "horizontal"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rest, toolbarProps),
+		...exitProps(visible),
+		ref: rootRef,
+		"data-tokens": mergeDataTokens("md-comp-toolbar-docked", rest),
+		"data-color": color,
+		className: dockedToolbarStyles({
+			arrangement,
+			color
+		}).root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ToolbarContext, {
+			value: DOCKED[color],
+			children: /* @__PURE__ */ jsx(ButtonContext, {
+				value: standardIconButtons,
+				children
+			})
+		})
+	});
+}
+/**
+* M3 Expressive floating toolbar: a pill of controls that floats above the content,
+* horizontal or vertical, in standard or vibrant colours. Leading and trailing content
+* collapse with `expanded`; or pair it with a FAB, and collapsing hides the toolbar while
+* the FAB grows. Tab and the arrow keys move between its
+* controls (M3).
+*
+* @example
+* <FloatingToolbar aria-label="Formatting" expanded={expanded} className="fixed bottom-4 start-1/2"
+*   leading={<IconButton icon={<UndoIcon />} aria-label="Undo" />}>
+*   <IconButton toggle icon={<BoldIcon />} aria-label="Bold" />
+* </FloatingToolbar>
+*
+* <FloatingToolbar aria-label="Actions" fab={<ToolbarFab icon={<AddIcon />} aria-label="New" />}>
+*   <IconButton icon={<SearchIcon />} aria-label="Search" />
+* </FloatingToolbar>
+*/
+function FloatingToolbar(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(FloatingToolbarRoot, {
+		...props,
+		directionRef
+	}) });
+}
+function FloatingToolbarRoot({ orientation = "horizontal", color = "standard", elevated = true, expanded: expandedProp = true, visible = true, exitEdge, leading, trailing, fab, fabPlacement, children, classNames, className, style, ref, directionRef, ...rest }) {
+	const { rootRef, toolbarProps } = useToolbarRoot(ref, directionRef, {
+		...rest,
+		orientation
+	});
+	const { isFocusVisible, focusProps } = useFocusRing({ within: true });
+	const [focusInCollapsed, setFocusInCollapsed] = useState(false);
+	const expanded = expandedProp || isFocusVisible || focusInCollapsed;
+	const collapsedFocusProps = {
+		onFocus: (event) => {
+			if (!expanded && isInCollapsed(event.target)) setFocusInCollapsed(true);
+		},
+		onBlur: (event) => {
+			if (!isInCollapsed(event.relatedTarget)) setFocusInCollapsed(false);
+		}
+	};
+	const hasFab = fab != null;
+	const styles = floatingToolbarStyles({
+		orientation,
+		color,
+		elevated,
+		exitEdge: exitEdge ?? "bottom",
+		hasFab,
+		fabAt: fabPlacement === "start" || fabPlacement === "top" ? "start" : "end"
+	});
+	const [contentRef, toolbarSize, toolbarResized] = useNaturalSize(orientation === "horizontal" ? "width" : "height", hasFab);
+	const context = useMemo(() => ({
+		kind: "floating",
+		color,
+		expanded,
+		orientation
+	}), [
+		color,
+		expanded,
+		orientation
+	]);
+	useWarnOnce(!visible && !expandedProp, "[@windmorph/react] A FloatingToolbar shouldn't both collapse and leave the screen (M3): use `expanded` or `visible`, not both.");
+	const collapsible = (slot, content) => content != null && /* @__PURE__ */ jsx(ToolbarCollapsible, {
+		slot,
+		expanded,
+		orientation,
+		styles,
+		className: classNames?.[slot],
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(rest, toolbarProps, focusProps, collapsedFocusProps),
+		...exitProps(visible),
+		ref: rootRef,
+		"data-tokens": mergeDataTokens("md-comp-toolbar-floating", rest),
+		"data-color": color,
+		"data-expanded": expanded,
+		style: toolbarSize === void 0 ? style : {
+			"--m3-toolbar-size": `${toolbarSize}px`,
+			...style
+		},
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ToolbarContext, {
+			value: context,
+			children: /* @__PURE__ */ jsx(ButtonContext, {
+				value: standardIconButtons,
+				children: hasFab ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					className: styles.toolbarSlot(),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-collapsed": !expanded || void 0,
+						"data-toolbar-collapsible": "",
+						"data-resized": toolbarResized || void 0,
+						className: styles.surface({ class: classNames?.surface }),
+						children: /* @__PURE__ */ jsx("div", {
+							ref: contentRef,
+							className: styles.content({ class: classNames?.items }),
+							children
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles.fabSlot(),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-collapsed": !expanded || void 0,
+						className: styles.fabBox({ class: classNames?.fab }),
+						children: fab
+					})
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					collapsible("leading", leading),
+					/* @__PURE__ */ jsx("div", {
+						className: styles.items({ class: classNames?.items }),
+						children
+					}),
+					collapsible("trailing", trailing)
+				] })
+			})
+		})
+	});
+}
+/**
+* Leading or trailing content: its box animates its width (or height) in px between 0 and
+* the content's measured size, so expanding shows the spatial spring's overshoot.
+*/
+function ToolbarCollapsible({ slot, expanded, orientation, styles, className, children }) {
+	const axis = orientation === "horizontal" ? "width" : "height";
+	const [ref, size, resized] = useNaturalSize(axis);
+	return /* @__PURE__ */ jsx("div", {
+		"data-collapsed": !expanded || void 0,
+		"data-toolbar-collapsible": "",
+		"data-resized": resized || void 0,
+		style: size === void 0 ? void 0 : { [axis]: expanded ? size : 0 },
+		className: styles.collapse(),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-collapsed": !expanded || void 0,
+			className: styles.clip({ class: toolbarCollapseAnchor({
+				slot,
+				orientation
+			}) }),
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				className: styles.items({ class: cn(styles.collapsibleItems(), className) }),
+				children
+			})
+		})
+	});
+}
+/** Whether an element sits in collapsible content (leading, trailing or the FAB's toolbar). */
+function isInCollapsed(element) {
+	return element instanceof Element && element.closest("[data-toolbar-collapsible]") !== null;
+}
+/**
+* The FAB of a {@link FloatingToolbar} (Compose's `StandardFloatingActionButton` /
+* `VibrantFloatingActionButton`): it fills the toolbar's FAB box, 56px or 80px while the
+* toolbar is collapsed, with 16px corners at level 2. With `expandedIcon` it shows that
+* icon while the toolbar is expanded and `icon` while it is collapsed.
+*/
+function ToolbarFab({ icon, expandedIcon, iconTransition, color, tooltip = true, elevation, classNames, className, ...base }) {
+	const toolbar = useContext(ToolbarContext);
+	const fabColor = color ?? toolbar?.color ?? "standard";
+	const styles = toolbarFabStyles({
+		color: fabColor,
+		elevation
+	});
+	const baseProps = {
+		...base,
+		className: styles.root({ class: cn(classNames?.root, className) })
+	};
+	const fab = /* @__PURE__ */ jsx(ButtonBase, {
+		...baseProps,
+		"data-tokens": mergeDataTokens("md-comp-toolbar-floating-fab", base),
+		"data-color": fabColor,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: styles.icon({ class: cn(expandedIcon && iconFacesStyles().cell(), classNames?.icon) }),
+			children: expandedIcon ? /* @__PURE__ */ jsx(IconFaces, {
+				icon,
+				alternateIcon: expandedIcon,
+				alternate: toolbar?.expanded ?? true,
+				transition: iconTransition
+			}) : icon
+		})
+	});
+	const label = base["aria-label"];
+	if (!tooltip || !label) return fab;
+	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(WithoutDescription, { children: fab }), /* @__PURE__ */ jsx(LazyTooltip, {
+		classNames: { panel: classNames?.tooltip },
+		children: label
+	})] });
+}
+//#endregion
+export { DockedToolbar, FloatingToolbar, ToolbarFab };
+
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeProps, mergeRefs, useFocusRing, useObjectRef, useToolbar } from 'react-aria';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseProps,\n} from '../../primitives/ButtonBase';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport { IconFaces } from '../../primitives/IconFaces';\nimport { iconFacesStyles, type IconTransition } from '../../primitives/icon-faces-styles';\nimport { ButtonContext, standardIconButtons } from '../button/ButtonContext';\nimport { cn } from '../../utils/cn';\nimport { toolbarKeyDown } from '../../utils/toolbar-keys';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport type { FabElevation } from '../fab/fab-styles';\nimport { LazyTooltip } from '../tooltip/lazy-tooltip';\nimport { TooltipTrigger, WithoutDescription } from '../tooltip/tooltip-trigger';\nimport { ToolbarContext } from '../../primitives/ToolbarContext';\nimport {\n  dockedToolbarStyles,\n  floatingToolbarStyles,\n  toolbarCollapseAnchor,\n  toolbarFabStyles,\n  type DockedToolbarArrangement,\n  type DockedToolbarColor,\n  type FloatingToolbarColor,\n  type ToolbarExitEdge,\n  type ToolbarOrientation,\n} from './toolbar-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { useNaturalSize } from '../../utils/natural-size';\n\nconst DOCKED = {\n  standard: { kind: 'docked', color: 'standard' },\n  vibrant: { kind: 'docked', color: 'vibrant' },\n} as const;\n\n/** The `data-*` and `inert` attributes of a toolbar that has exited the screen. */\nconst exitProps = (visible: boolean) => ({\n  'data-hidden': visible ? undefined : true,\n  inert: !visible || undefined,\n});\n\ntype Naming =\n  | {\n      /** Accessible name for the toolbar. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the toolbar. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\ntype DivProps<Own> = Omit<\n  ComponentPropsWithRef<'div'>,\n  keyof Own | 'aria-label' | 'aria-labelledby' | 'color'\n>;\n\n/** Applies React Aria's toolbar behaviour (role, arrow keys) with the DOM's direction. */\nfunction useToolbarRoot(\n  ref: Ref<HTMLDivElement> | undefined,\n  directionRef: RefCallback<HTMLElement>,\n  props: { orientation: ToolbarOrientation; 'aria-label'?: string; 'aria-labelledby'?: string },\n) {\n  const merged = useMemo(\n    () => mergeRefs<HTMLDivElement>(ref, directionRef as RefCallback<HTMLDivElement>),\n    [ref, directionRef],\n  );\n  const rootRef = useObjectRef<HTMLDivElement>(merged);\n  const { toolbarProps: aria } = useToolbar(props, rootRef);\n  /*\n   * M3, not the WAI-ARIA single-tab-stop pattern (2026-10-13): \"Tab or Arrows: Navigate\n   * between interactive elements\". Tab and Shift+Tab are left to the browser, so they move\n   * through every control in order and then out of the toolbar; React Aria's focus restoring\n   * is dropped too, so Tab enters at the first control and Shift+Tab at the last. The arrow\n   * keys follow the APG toolbar (2026-10-15): along the orientation, flipped in RTL, they\n   * wrap at the ends, and Home and End reach the first and last control; a text field keeps\n   * them for its caret. A toolbar nested in another leaves its keys to the outer one.\n   */\n  const { orientation } = props;\n  const nested = aria.onKeyDownCapture === undefined;\n  const toolbarProps: HTMLAttributes<HTMLElement> = {\n    ...aria,\n    onFocusCapture: undefined,\n    onBlurCapture: undefined,\n    onKeyDownCapture: nested ? undefined : (event) => void toolbarKeyDown(event, orientation),\n  };\n  return { rootRef, toolbarProps };\n}\n\nexport interface DockedToolbarClassNames {\n  /** The toolbar's container, merged with `className`. */\n  root?: string;\n}\n\ninterface DockedToolbarOwnProps {\n  /**\n   * Centre the items 32px apart (M3's default), or spread them across the toolbar, which\n   * M3 recommends in compact windows. @default \"centered\"\n   */\n  arrangement?: DockedToolbarArrangement;\n  /**\n   * The container colour: `standard` (`surface-container`) or `vibrant`\n   * (`primary-container`), as the floating toolbar's. @default \"standard\"\n   */\n  color?: DockedToolbarColor;\n  /**\n   * Shows the toolbar. Hiding it slides it off the bottom of the window, e.g. while the\n   * page scrolls (`useToolbarScrollExit`). A hidden toolbar is `inert`. @default true\n   */\n  visible?: boolean;\n  /** The toolbar's controls, e.g. icon buttons, buttons or a FAB. */\n  children: ReactNode;\n  /** Classes for each part, by slot. */\n  classNames?: DockedToolbarClassNames;\n}\n\nexport type DockedToolbarProps = DockedToolbarOwnProps & Naming & DivProps<DockedToolbarOwnProps>;\n\n/**\n * M3 Expressive docked toolbar: a full-width 64px bar of actions, usually along the bottom\n * of the window (it replaces the bottom app bar). Tab and the arrow keys move between its\n * controls (M3).\n *\n * @example\n * <DockedToolbar aria-label=\"Message actions\" className=\"fixed inset-x-0 bottom-0\">\n *   <IconButton icon={<ArchiveIcon />} aria-label=\"Archive\" />\n *   <IconButton icon={<DeleteIcon />} aria-label=\"Delete\" />\n * </DockedToolbar>\n */\nexport function DockedToolbar(props: DockedToolbarProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <DockedToolbarRoot {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction DockedToolbarRoot({\n  arrangement,\n  color = 'standard',\n  visible = true,\n  children,\n  classNames,\n  className,\n  ref,\n  directionRef,\n  ...rest\n}: DockedToolbarProps & { directionRef: RefCallback<HTMLElement> }) {\n  const { rootRef, toolbarProps } = useToolbarRoot(ref, directionRef, {\n    ...rest,\n    orientation: 'horizontal',\n  });\n  return (\n    <div\n      {...mergeProps(rest, toolbarProps)}\n      {...exitProps(visible)}\n      ref={rootRef}\n      data-tokens={mergeDataTokens('md-comp-toolbar-docked', rest)}\n      data-color={color}\n      className={dockedToolbarStyles({ arrangement, color }).root({\n        class: cn(classNames?.root, className),\n      })}\n    >\n      <ToolbarContext value={DOCKED[color]}>\n        <ButtonContext value={standardIconButtons}>{children}</ButtonContext>\n      </ToolbarContext>\n    </div>\n  );\n}\n\nexport interface FloatingToolbarClassNames {\n  /** The outer container, merged with `className`. */\n  root?: string;\n  /** The main content group. */\n  items?: string;\n  /** The group of `leading` controls. */\n  leading?: string;\n  /** The group of `trailing` controls. */\n  trailing?: string;\n  /** The toolbar's surface when it has a FAB. */\n  surface?: string;\n  /** The box the FAB fills (56px, 80px while collapsed). */\n  fab?: string;\n}\n\ninterface FloatingToolbarBaseProps {\n  /** Lay the controls out in a row, or in a column at a window edge. @default \"horizontal\" */\n  orientation?: ToolbarOrientation;\n  /**\n   * The container colour: `standard` (`surface-container`) or `vibrant`\n   * (`primary-container`). @default \"standard\"\n   */\n  color?: FloatingToolbarColor;\n  /**\n   * Level 1 elevation, which M3 gives floating toolbars by default. Remove it when the\n   * content beneath is visually distinct. @default true\n   */\n  elevated?: boolean;\n  /**\n   * Shows the leading and trailing content, or (with a FAB) the toolbar itself. Collapse\n   * it while the page scrolls, e.g. with `useToolbarScrollExpansion`. Collapsed controls\n   * stay in the tab order and the accessibility tree, and keyboard focus inside the\n   * toolbar expands it, so every control stays reachable. @default true\n   */\n  expanded?: boolean;\n  /**\n   * Shows the toolbar. Hiding it slides it off `exitEdge`, e.g. while the page scrolls\n   * (`useToolbarScrollExit`). A hidden toolbar is `inert`. Don't combine it with\n   * collapsing: M3 says a toolbar shouldn't both collapse and leave the screen.\n   * @default true\n   */\n  visible?: boolean;\n  /** The window edge a hidden toolbar slides past (logical). @default \"bottom\" */\n  exitEdge?: ToolbarExitEdge;\n  /** The main controls, always shown. */\n  children: ReactNode;\n  /** Classes for each part, by slot. */\n  classNames?: FloatingToolbarClassNames;\n}\n\ntype FloatingToolbarContent =\n  | {\n      /** Controls before the main content, hidden while collapsed. */\n      leading?: ReactNode;\n      /** Controls after the main content, hidden while collapsed. */\n      trailing?: ReactNode;\n      fab?: undefined;\n      fabPlacement?: undefined;\n    }\n  | {\n      leading?: undefined;\n      trailing?: undefined;\n      /**\n       * A FAB beside the toolbar, usually a {@link ToolbarFab}. Collapsing hides the\n       * toolbar and grows the FAB from 56px to 80px.\n       */\n      fab: ReactElement;\n      /**\n       * Side of the toolbar the FAB sits on. `top` is the same as `start` and `bottom` as\n       * `end`, so the value can stay put when the orientation changes. @default \"end\"\n       */\n      fabPlacement?: 'start' | 'end' | 'top' | 'bottom';\n    };\n\ntype FloatingToolbarOwnProps = FloatingToolbarBaseProps & FloatingToolbarContent;\n\nexport type FloatingToolbarProps = FloatingToolbarOwnProps &\n  Naming &\n  DivProps<\n    FloatingToolbarBaseProps & Record<'leading' | 'trailing' | 'fab' | 'fabPlacement', unknown>\n  >;\n\n/**\n * M3 Expressive floating toolbar: a pill of controls that floats above the content,\n * horizontal or vertical, in standard or vibrant colours. Leading and trailing content\n * collapse with `expanded`; or pair it with a FAB, and collapsing hides the toolbar while\n * the FAB grows. Tab and the arrow keys move between its\n * controls (M3).\n *\n * @example\n * <FloatingToolbar aria-label=\"Formatting\" expanded={expanded} className=\"fixed bottom-4 start-1/2\"\n *   leading={<IconButton icon={<UndoIcon />} aria-label=\"Undo\" />}>\n *   <IconButton toggle icon={<BoldIcon />} aria-label=\"Bold\" />\n * </FloatingToolbar>\n *\n * <FloatingToolbar aria-label=\"Actions\" fab={<ToolbarFab icon={<AddIcon />} aria-label=\"New\" />}>\n *   <IconButton icon={<SearchIcon />} aria-label=\"Search\" />\n * </FloatingToolbar>\n */\nexport function FloatingToolbar(props: FloatingToolbarProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <FloatingToolbarRoot {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction FloatingToolbarRoot({\n  orientation = 'horizontal',\n  color = 'standard',\n  elevated = true,\n  expanded: expandedProp = true,\n  visible = true,\n  exitEdge,\n  leading,\n  trailing,\n  fab,\n  fabPlacement,\n  children,\n  classNames,\n  className,\n  style,\n  ref,\n  directionRef,\n  ...rest\n}: FloatingToolbarProps & { directionRef: RefCallback<HTMLElement> }) {\n  const { rootRef, toolbarProps } = useToolbarRoot(ref, directionRef, { ...rest, orientation });\n  // Keyboard focus inside expands the toolbar. So does any focus that lands on collapsed\n  // content (only the keyboard or assistive tech can reach it), so collapsed controls stay\n  // reachable. Pointer focus on the always-shown controls doesn't.\n  const { isFocusVisible, focusProps } = useFocusRing({ within: true });\n  const [focusInCollapsed, setFocusInCollapsed] = useState(false);\n  const expanded = expandedProp || isFocusVisible || focusInCollapsed;\n  const collapsedFocusProps = {\n    onFocus: (event: FocusEvent<HTMLElement>) => {\n      if (!expanded && isInCollapsed(event.target)) setFocusInCollapsed(true);\n    },\n    onBlur: (event: FocusEvent<HTMLElement>) => {\n      if (!isInCollapsed(event.relatedTarget)) setFocusInCollapsed(false);\n    },\n  };\n  const hasFab = fab != null;\n  const fabAt = fabPlacement === 'start' || fabPlacement === 'top' ? 'start' : 'end';\n  const styles = floatingToolbarStyles({\n    orientation,\n    color,\n    elevated,\n    exitEdge: exitEdge ?? 'bottom',\n    hasFab,\n    fabAt,\n  });\n  // The toolbar content's natural length, so the slot keeps the expanded size and the\n  // surface can animate between it and 0.\n  const [contentRef, toolbarSize, toolbarResized] = useNaturalSize<HTMLDivElement>(\n    orientation === 'horizontal' ? 'width' : 'height',\n    hasFab,\n  );\n  const context = useMemo(\n    () => ({ kind: 'floating', color, expanded, orientation }) as const,\n    [color, expanded, orientation],\n  );\n  // Once per toolbar, however often it collapses and leaves while scrolling.\n  useWarnOnce(\n    !visible && !expandedProp,\n    \"[@windmorph/react] A FloatingToolbar shouldn't both collapse and leave the screen (M3): use `expanded` or `visible`, not both.\",\n  );\n\n  const collapsible = (slot: 'leading' | 'trailing', content: ReactNode) =>\n    content != null && (\n      <ToolbarCollapsible\n        slot={slot}\n        expanded={expanded}\n        orientation={orientation}\n        styles={styles}\n        className={classNames?.[slot]}\n      >\n        {content}\n      </ToolbarCollapsible>\n    );\n\n  return (\n    <div\n      {...mergeProps(rest, toolbarProps, focusProps, collapsedFocusProps)}\n      {...exitProps(visible)}\n      ref={rootRef}\n      data-tokens={mergeDataTokens('md-comp-toolbar-floating', rest)}\n      data-color={color}\n      data-expanded={expanded}\n      style={\n        toolbarSize === undefined\n          ? style\n          : ({ '--m3-toolbar-size': `${toolbarSize}px`, ...style } as CSSProperties)\n      }\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <ToolbarContext value={context}>\n        <ButtonContext value={standardIconButtons}>\n          {hasFab ? (\n            <>\n              <div className={styles.toolbarSlot()}>\n                <div\n                  data-collapsed={!expanded || undefined}\n                  data-toolbar-collapsible=\"\"\n                  data-resized={toolbarResized || undefined}\n                  className={styles.surface({ class: classNames?.surface })}\n                >\n                  <div ref={contentRef} className={styles.content({ class: classNames?.items })}>\n                    {children}\n                  </div>\n                </div>\n              </div>\n              <div className={styles.fabSlot()}>\n                <div\n                  data-collapsed={!expanded || undefined}\n                  className={styles.fabBox({ class: classNames?.fab })}\n                >\n                  {fab}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {collapsible('leading', leading)}\n              <div className={styles.items({ class: classNames?.items })}>{children}</div>\n              {collapsible('trailing', trailing)}\n            </>\n          )}\n        </ButtonContext>\n      </ToolbarContext>\n    </div>\n  );\n}\n\n/**\n * Leading or trailing content: its box animates its width (or height) in px between 0 and\n * the content's measured size, so expanding shows the spatial spring's overshoot.\n */\nfunction ToolbarCollapsible({\n  slot,\n  expanded,\n  orientation,\n  styles,\n  className,\n  children,\n}: {\n  slot: 'leading' | 'trailing';\n  expanded: boolean;\n  orientation: ToolbarOrientation;\n  styles: ReturnType<typeof floatingToolbarStyles>;\n  className?: string;\n  children: ReactNode;\n}) {\n  const axis = orientation === 'horizontal' ? 'width' : 'height';\n  const [ref, size, resized] = useNaturalSize<HTMLDivElement>(axis);\n  return (\n    <div\n      data-collapsed={!expanded || undefined}\n      data-toolbar-collapsible=\"\"\n      data-resized={resized || undefined}\n      style={size === undefined ? undefined : { [axis]: expanded ? size : 0 }}\n      className={styles.collapse()}\n    >\n      <div\n        data-collapsed={!expanded || undefined}\n        className={styles.clip({ class: toolbarCollapseAnchor({ slot, orientation }) })}\n      >\n        <div\n          ref={ref}\n          className={styles.items({ class: cn(styles.collapsibleItems(), className) })}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/** Whether an element sits in collapsible content (leading, trailing or the FAB's toolbar). */\nfunction isInCollapsed(element: EventTarget | null) {\n  return element instanceof Element && element.closest('[data-toolbar-collapsible]') !== null;\n}\n\nexport interface ToolbarFabClassNames {\n  /** The FAB's button, merged with `className`. */\n  root?: string;\n  /** The icon. */\n  icon?: string;\n  /** The built-in plain tooltip that shows the label (`tooltip`). */\n  tooltip?: string;\n}\n\ntype AccessibleName =\n  | {\n      /** Accessible name for the FAB, also its tooltip. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n      /** The id of the element that names the FAB. */\n      'aria-labelledby'?: string;\n    }\n  | {\n      /** Accessible name for the FAB, also its tooltip. */\n      'aria-label'?: string;\n      /** The id of the element that names the FAB. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\ninterface ToolbarFabOwnProps {\n  /**\n   * The icon (while the toolbar is collapsed, when `expandedIcon` is set). Hidden from\n   * assistive tech; `aria-label` names the FAB.\n   */\n  icon: ReactElement;\n  /**\n   * The icon while the toolbar is expanded, e.g. \"close\" for a FAB that collapses the\n   * toolbar. Without it, the FAB always shows `icon`.\n   */\n  expandedIcon?: ReactElement;\n  /**\n   * How the FAB hands over between `icon` and `expandedIcon`: `swap` halfway through the\n   * toolbar's expand / collapse spring, or `rotate`, where the outgoing icon turns 90° and\n   * fades out while the incoming one turns in and fades in. `rotate` goes beyond the M3\n   * spec; it matches Google's Expressive showcase motion. It mirrors in RTL, and reduced\n   * motion keeps only the crossfade. Only used with `expandedIcon`. @default \"swap\"\n   */\n  iconTransition?: IconTransition;\n  /**\n   * The FAB's colour scheme. Defaults to the toolbar's colour: `primary-container`\n   * (standard) or `tertiary-container` (vibrant).\n   * @default the toolbar's color, or \"standard\" outside a toolbar\n   */\n  color?: FloatingToolbarColor;\n  /**\n   * Shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of FABs\n   * on the web. @default true\n   */\n  tooltip?: boolean;\n  /**\n   * As on `Fab`: level 2 by default (hover 3), `lowered` level 1, or `flat` level 0.\n   * @default \"default\"\n   */\n  elevation?: FabElevation;\n  /** Classes for each part, by slot. */\n  classNames?: ToolbarFabClassNames;\n}\n\ntype OmitToolbarFab<T> = Omit<\n  T,\n  keyof ToolbarFabOwnProps | 'children' | 'disabled' | 'toggle' | 'aria-label' | 'aria-labelledby'\n>;\n\nexport type ToolbarFabProps = ToolbarFabOwnProps &\n  AccessibleName &\n  (OmitToolbarFab<ButtonBaseActionProps> | OmitToolbarFab<ButtonBaseLinkProps>);\n\n/**\n * The FAB of a {@link FloatingToolbar} (Compose's `StandardFloatingActionButton` /\n * `VibrantFloatingActionButton`): it fills the toolbar's FAB box, 56px or 80px while the\n * toolbar is collapsed, with 16px corners at level 2. With `expandedIcon` it shows that\n * icon while the toolbar is expanded and `icon` while it is collapsed.\n */\nexport function ToolbarFab({\n  icon,\n  expandedIcon,\n  iconTransition,\n  color,\n  tooltip = true,\n  elevation,\n  classNames,\n  className,\n  ...base\n}: ToolbarFabProps) {\n  const toolbar = useContext(ToolbarContext);\n  const fabColor = color ?? toolbar?.color ?? 'standard';\n  const styles = toolbarFabStyles({ color: fabColor, elevation });\n  const baseProps = {\n    ...base,\n    className: styles.root({ class: cn(classNames?.root, className) }),\n  } as ButtonBaseProps;\n  const fab = (\n    <ButtonBase\n      {...baseProps}\n      // The component tokens' hooks (toolbar-tokens.ts), also public styling hooks for apps.\n      data-tokens={mergeDataTokens('md-comp-toolbar-floating-fab', base)}\n      data-color={fabColor}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={styles.icon({\n          class: cn(expandedIcon && iconFacesStyles().cell(), classNames?.icon),\n        })}\n      >\n        {expandedIcon ? (\n          <IconFaces\n            icon={icon}\n            alternateIcon={expandedIcon}\n            alternate={toolbar?.expanded ?? true}\n            transition={iconTransition}\n          />\n        ) : (\n          icon\n        )}\n      </span>\n    </ButtonBase>\n  );\n  const label = base['aria-label'];\n  if (!tooltip || !label) return fab;\n  return (\n    <TooltipTrigger>\n      {/* The tooltip repeats the name, so it isn't also the FAB's description. */}\n      <WithoutDescription>{fab}</WithoutDescription>\n      <LazyTooltip classNames={{ panel: classNames?.tooltip }}>{label}</LazyTooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":"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"}