@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/toolbar/toolbar-tokens.d.ts

@@ -0,0 +1,27 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/toolbar/toolbar-tokens.d.ts
+/**
+ * The tokens of {@link DockedToolbar}, scoped by `data-color`:
+ * `--md-comp-toolbar-docked-container-color` (standard) and
+ * `--md-comp-toolbar-vibrant-container-color`. M3's tables have no vibrant docked token, so
+ * the vibrant docked toolbar takes M3's colour-scheme token for vibrant toolbars
+ * (`md.comp.toolbar.vibrant.container.color`) and can be re-coloured like the rest
+ * (2026-10-17; before, it was a class).
+ */
+export declare const dockedToolbarTokenSet: ComponentTokenSet<never>;
+/**
+ * The tokens of {@link FloatingToolbar}: `--md-comp-toolbar-floating-<part>` and
+ * `--md-comp-toolbar-floating-{standard,vibrant}-container-color`. With a FAB they paint the
+ * toolbar's own surface beside it.
+ */
+export declare const floatingToolbarTokenSet: ComponentTokenSet<"container-shape">;
+/**
+ * The tokens of {@link ToolbarFab}: `--md-comp-toolbar-floating-fab-container-shape` and
+ * `--md-comp-toolbar-floating-fab-{standard,vibrant}-{container,icon}-color`, M3's names,
+ * picked by the FAB's `data-color` (2026-10-17; they were classes). Elevation follows the
+ * `elevation` prop.
+ */
+export declare const toolbarFabTokenSet: ComponentTokenSet<"container-shape">;
+//#endregion
+//# sourceMappingURL=toolbar-tokens.d.ts.map

package/dist/components/toolbar/toolbar-tokens.js

@@ -0,0 +1,117 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/toolbar/toolbar-tokens.ts
+/**
+* The tokens of {@link DockedToolbar}, scoped by `data-color`:
+* `--md-comp-toolbar-docked-container-color` (standard) and
+* `--md-comp-toolbar-vibrant-container-color`. M3's tables have no vibrant docked token, so
+* the vibrant docked toolbar takes M3's colour-scheme token for vibrant toolbars
+* (`md.comp.toolbar.vibrant.container.color`) and can be re-coloured like the rest
+* (2026-10-17; before, it was a class).
+*/
+const dockedToolbarTokenSet = defineComponentTokens({
+	name: "md-comp-toolbar-docked",
+	tokens: {},
+	scopes: { color: {
+		standard: {
+			prefix: "md-comp-toolbar-docked",
+			tokens: { "container-color": {
+				value: color("surface-container"),
+				description: "The standard toolbar.",
+				compose: "DockedToolbarTokens.ContainerColor",
+				paints: { property: "background-color" }
+			} }
+		},
+		vibrant: {
+			prefix: "md-comp-toolbar-vibrant",
+			tokens: { "container-color": {
+				value: color("primary-container"),
+				description: "The vibrant toolbar.",
+				paints: { property: "background-color" }
+			} }
+		}
+	} }
+});
+/**
+* The tokens of {@link FloatingToolbar}: `--md-comp-toolbar-floating-<part>` and
+* `--md-comp-toolbar-floating-{standard,vibrant}-container-color`. With a FAB they paint the
+* toolbar's own surface beside it.
+*/
+const floatingToolbarTokenSet = defineComponentTokens({
+	name: "md-comp-toolbar-floating",
+	tokens: { "container-shape": {
+		value: corner("full"),
+		description: "The corners.",
+		compose: "FloatingToolbarTokens.ContainerShape",
+		paints: { property: "border-top-left-radius" }
+	} },
+	scopes: { color: {
+		standard: {
+			prefix: "md-comp-toolbar-floating-standard",
+			tokens: { "container-color": {
+				value: color("surface-container"),
+				description: "The standard toolbar.",
+				compose: "FloatingToolbarTokens.StandardContainerColor",
+				paints: { property: "background-color" }
+			} }
+		},
+		vibrant: {
+			prefix: "md-comp-toolbar-floating-vibrant",
+			tokens: { "container-color": {
+				value: color("primary-container"),
+				description: "The vibrant toolbar.",
+				compose: "FloatingToolbarTokens.VibrantContainerColor",
+				paints: { property: "background-color" }
+			} }
+		}
+	} }
+});
+/**
+* The tokens of {@link ToolbarFab}: `--md-comp-toolbar-floating-fab-container-shape` and
+* `--md-comp-toolbar-floating-fab-{standard,vibrant}-{container,icon}-color`, M3's names,
+* picked by the FAB's `data-color` (2026-10-17; they were classes). Elevation follows the
+* `elevation` prop.
+*/
+const toolbarFabTokenSet = defineComponentTokens({
+	name: "md-comp-toolbar-floating-fab",
+	tokens: { "container-shape": {
+		value: corner("large"),
+		description: "The corners.",
+		paints: { property: "border-top-left-radius" }
+	} },
+	scopes: { color: {
+		standard: {
+			prefix: "md-comp-toolbar-floating-fab-standard",
+			tokens: {
+				"container-color": {
+					value: color("primary-container"),
+					description: "The FAB beside a standard toolbar.",
+					paints: { property: "background-color" }
+				},
+				"icon-color": {
+					value: color("on-primary-container"),
+					description: "Its icon.",
+					paints: { property: "color" }
+				}
+			}
+		},
+		vibrant: {
+			prefix: "md-comp-toolbar-floating-fab-vibrant",
+			tokens: {
+				"container-color": {
+					value: color("tertiary-container"),
+					description: "The FAB beside a vibrant toolbar.",
+					paints: { property: "background-color" }
+				},
+				"icon-color": {
+					value: color("on-tertiary-container"),
+					description: "Its icon.",
+					paints: { property: "color" }
+				}
+			}
+		}
+	} }
+});
+//#endregion
+export { dockedToolbarTokenSet, floatingToolbarTokenSet, toolbarFabTokenSet };
+
+//# sourceMappingURL=toolbar-tokens.js.map

package/dist/components/toolbar/toolbar-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-tokens.js","names":[],"sources":["../../../src/components/toolbar/toolbar-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The toolbars' component tokens, M3 Expressive's `md.comp.toolbar.{docked,floating}.*`\n * names (checked against m3.material.io's token tables, 2026-10-14), with the defaults of\n * `toolbar-styles.ts`. The floating toolbar's `data-color` picks the standard or vibrant\n * container. Its elevation follows the `elevated` prop, and the vibrant toolbar's content\n * colours stay classes. The toolbar FAB has a set of its own (`toolbarFabTokenSet`).\n */\n\n/**\n * The tokens of {@link DockedToolbar}, scoped by `data-color`:\n * `--md-comp-toolbar-docked-container-color` (standard) and\n * `--md-comp-toolbar-vibrant-container-color`. M3's tables have no vibrant docked token, so\n * the vibrant docked toolbar takes M3's colour-scheme token for vibrant toolbars\n * (`md.comp.toolbar.vibrant.container.color`) and can be re-coloured like the rest\n * (2026-10-17; before, it was a class).\n */\nexport const dockedToolbarTokenSet = defineComponentTokens({\n  name: 'md-comp-toolbar-docked',\n  tokens: {},\n  scopes: {\n    color: {\n      standard: {\n        prefix: 'md-comp-toolbar-docked',\n        tokens: {\n          'container-color': {\n            value: color('surface-container'),\n            description: 'The standard toolbar.',\n            compose: 'DockedToolbarTokens.ContainerColor',\n            paints: { property: 'background-color' },\n          },\n        },\n      },\n      vibrant: {\n        prefix: 'md-comp-toolbar-vibrant',\n        tokens: {\n          'container-color': {\n            value: color('primary-container'),\n            description: 'The vibrant toolbar.',\n            paints: { property: 'background-color' },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The tokens of {@link FloatingToolbar}: `--md-comp-toolbar-floating-<part>` and\n * `--md-comp-toolbar-floating-{standard,vibrant}-container-color`. With a FAB they paint the\n * toolbar's own surface beside it.\n */\nexport const floatingToolbarTokenSet = defineComponentTokens({\n  name: 'md-comp-toolbar-floating',\n  tokens: {\n    'container-shape': {\n      value: corner('full'),\n      description: 'The corners.',\n      compose: 'FloatingToolbarTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n  },\n  scopes: {\n    color: {\n      standard: {\n        prefix: 'md-comp-toolbar-floating-standard',\n        tokens: {\n          'container-color': {\n            value: color('surface-container'),\n            description: 'The standard toolbar.',\n            compose: 'FloatingToolbarTokens.StandardContainerColor',\n            paints: { property: 'background-color' },\n          },\n        },\n      },\n      vibrant: {\n        prefix: 'md-comp-toolbar-floating-vibrant',\n        tokens: {\n          'container-color': {\n            value: color('primary-container'),\n            description: 'The vibrant toolbar.',\n            compose: 'FloatingToolbarTokens.VibrantContainerColor',\n            paints: { property: 'background-color' },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The tokens of {@link ToolbarFab}: `--md-comp-toolbar-floating-fab-container-shape` and\n * `--md-comp-toolbar-floating-fab-{standard,vibrant}-{container,icon}-color`, M3's names,\n * picked by the FAB's `data-color` (2026-10-17; they were classes). Elevation follows the\n * `elevation` prop.\n */\nexport const toolbarFabTokenSet = defineComponentTokens({\n  name: 'md-comp-toolbar-floating-fab',\n  tokens: {\n    'container-shape': {\n      value: corner('large'),\n      description: 'The corners.',\n      paints: { property: 'border-top-left-radius' },\n    },\n  },\n  scopes: {\n    color: {\n      standard: {\n        prefix: 'md-comp-toolbar-floating-fab-standard',\n        tokens: {\n          'container-color': {\n            value: color('primary-container'),\n            description: 'The FAB beside a standard toolbar.',\n            paints: { property: 'background-color' },\n          },\n          'icon-color': {\n            value: color('on-primary-container'),\n            description: 'Its icon.',\n            paints: { property: 'color' },\n          },\n        },\n      },\n      vibrant: {\n        prefix: 'md-comp-toolbar-floating-fab-vibrant',\n        tokens: {\n          'container-color': {\n            value: color('tertiary-container'),\n            description: 'The FAB beside a vibrant toolbar.',\n            paints: { property: 'background-color' },\n          },\n          'icon-color': {\n            value: color('on-tertiary-container'),\n            description: 'Its icon.',\n            paints: { property: 'color' },\n          },\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,wBAAwB,sBAAsB;CACzD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,OAAO;EACL,UAAU;GACR,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,MAAM,mBAAmB;IAChC,aAAa;IACb,SAAS;IACT,QAAQ,EAAE,UAAU,mBAAmB;GACzC,EACF;EACF;EACA,SAAS;GACP,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,MAAM,mBAAmB;IAChC,aAAa;IACb,QAAQ,EAAE,UAAU,mBAAmB;GACzC,EACF;EACF;CACF,EACF;AACF,CAAC;;;;;;AAOD,MAAa,0BAA0B,sBAAsB;CAC3D,MAAM;CACN,QAAQ,EACN,mBAAmB;EACjB,OAAO,OAAO,MAAM;EACpB,aAAa;EACb,SAAS;EACT,QAAQ,EAAE,UAAU,yBAAyB;CAC/C,EACF;CACA,QAAQ,EACN,OAAO;EACL,UAAU;GACR,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,MAAM,mBAAmB;IAChC,aAAa;IACb,SAAS;IACT,QAAQ,EAAE,UAAU,mBAAmB;GACzC,EACF;EACF;EACA,SAAS;GACP,QAAQ;GACR,QAAQ,EACN,mBAAmB;IACjB,OAAO,MAAM,mBAAmB;IAChC,aAAa;IACb,SAAS;IACT,QAAQ,EAAE,UAAU,mBAAmB;GACzC,EACF;EACF;CACF,EACF;AACF,CAAC;;;;;;;AAQD,MAAa,qBAAqB,sBAAsB;CACtD,MAAM;CACN,QAAQ,EACN,mBAAmB;EACjB,OAAO,OAAO,OAAO;EACrB,aAAa;EACb,QAAQ,EAAE,UAAU,yBAAyB;CAC/C,EACF;CACA,QAAQ,EACN,OAAO;EACL,UAAU;GACR,QAAQ;GACR,QAAQ;IACN,mBAAmB;KACjB,OAAO,MAAM,mBAAmB;KAChC,aAAa;KACb,QAAQ,EAAE,UAAU,mBAAmB;IACzC;IACA,cAAc;KACZ,OAAO,MAAM,sBAAsB;KACnC,aAAa;KACb,QAAQ,EAAE,UAAU,QAAQ;IAC9B;GACF;EACF;EACA,SAAS;GACP,QAAQ;GACR,QAAQ;IACN,mBAAmB;KACjB,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,QAAQ,EAAE,UAAU,mBAAmB;IACzC;IACA,cAAc;KACZ,OAAO,MAAM,uBAAuB;KACpC,aAAa;KACb,QAAQ,EAAE,UAAU,QAAQ;IAC9B;GACF;EACF;CACF,EACF;AACF,CAAC"}

package/dist/components/toolbar/use-toolbar-scroll-expansion.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from "react";
+//#region src/components/toolbar/use-toolbar-scroll-expansion.d.ts
+export interface ToolbarScrollExpansionOptions {
+  /** The scroll container. Defaults to the window. */
+  scrollRef?: RefObject<HTMLElement | null>;
+  /** Scroll distance (px) back towards the top before the toolbar expands. @default 40 */
+  expandThreshold?: number;
+  /** Scroll distance (px) down before the toolbar collapses. @default 40 */
+  collapseThreshold?: number;
+  /**
+   * For content whose start is at the bottom (e.g. a conversation), which reverses the
+   * direction. @default false
+   */
+  reverse?: boolean;
+  /** Whether the toolbar starts expanded, before the content has scrolled. @default true */
+  defaultExpanded?: boolean;
+}
+/**
+ * Collapses a floating toolbar while the content scrolls down and expands it when it
+ * scrolls back up, after a 40px threshold each way (a port of Compose's
+ * `floatingToolbarVerticalNestedScroll`). Pass the result to `FloatingToolbar`'s
+ * `expanded`.
+ *
+ * @example
+ * const expanded = useToolbarScrollExpansion();
+ * <FloatingToolbar aria-label="Actions" expanded={expanded} …>
+ */
+export declare function useToolbarScrollExpansion({ scrollRef, expandThreshold, collapseThreshold, reverse, defaultExpanded }?: ToolbarScrollExpansionOptions): boolean;
+export interface ToolbarScrollExitOptions {
+  /** The scroll container. Defaults to the window. */
+  scrollRef?: RefObject<HTMLElement | null>;
+  /** Scroll distance (px) back towards the top before the toolbar returns. @default 40 */
+  showThreshold?: number;
+  /** Scroll distance (px) down before the toolbar leaves the screen. @default 40 */
+  hideThreshold?: number;
+  /**
+   * For content whose start is at the bottom (e.g. a conversation), which reverses the
+   * direction. @default false
+   */
+  reverse?: boolean;
+  /** Whether the toolbar starts on screen, before the content has scrolled. @default true */
+  defaultVisible?: boolean;
+}
+/**
+ * Slides a docked or floating toolbar off the screen while the content scrolls down, and
+ * brings it back when it scrolls up, after a 40px threshold each way (M3's "animate
+ * offscreen" scroll behaviour, Compose's `exitAlwaysScrollBehavior`). Pass the result to
+ * the toolbar's `visible`. Use it instead of `useToolbarScrollExpansion`, not with it.
+ *
+ * @example
+ * const visible = useToolbarScrollExit();
+ * <DockedToolbar aria-label="Actions" visible={visible} className="fixed inset-x-0 bottom-0">…
+ */
+export declare function useToolbarScrollExit({ scrollRef, showThreshold, hideThreshold, reverse, defaultVisible }?: ToolbarScrollExitOptions): boolean;
+//#endregion
+//# sourceMappingURL=use-toolbar-scroll-expansion.d.ts.map

package/dist/components/toolbar/use-toolbar-scroll-expansion.js

@@ -0,0 +1,86 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/components/toolbar/use-toolbar-scroll-expansion.ts
+/**
+* Turns off after the content scrolls `offThreshold` px away from its start and back on
+* after it scrolls `onThreshold` px back towards it (a port of Compose's
+* `floatingToolbarVerticalNestedScroll`, whose content offset grows as the content scrolls
+* back towards its start).
+*/
+function useScrollToggle({ scrollRef, onThreshold, offThreshold, reverse, initial }) {
+	const [on, setOn] = useState(initial);
+	useEffect(() => {
+		const element = scrollRef?.current;
+		const target = element ?? window;
+		const position = () => element ? element.scrollTop : window.scrollY;
+		const factor = reverse ? -1 : 1;
+		let isOn = initial;
+		let last = position();
+		let contentOffset = 0;
+		let threshold = isOn ? -offThreshold : onThreshold;
+		const onScroll = () => {
+			const current = position();
+			const delta = (last - current) * factor;
+			last = current;
+			contentOffset += delta;
+			if (delta < 0 && contentOffset <= threshold) {
+				threshold = contentOffset + onThreshold;
+				if (isOn) setOn(isOn = false);
+			} else if (delta > 0 && contentOffset >= threshold) {
+				threshold = contentOffset - offThreshold;
+				if (!isOn) setOn(isOn = true);
+			}
+		};
+		target.addEventListener("scroll", onScroll, { passive: true });
+		return () => target.removeEventListener("scroll", onScroll);
+	}, [
+		scrollRef,
+		onThreshold,
+		offThreshold,
+		reverse,
+		initial
+	]);
+	return on;
+}
+/**
+* Collapses a floating toolbar while the content scrolls down and expands it when it
+* scrolls back up, after a 40px threshold each way (a port of Compose's
+* `floatingToolbarVerticalNestedScroll`). Pass the result to `FloatingToolbar`'s
+* `expanded`.
+*
+* @example
+* const expanded = useToolbarScrollExpansion();
+* <FloatingToolbar aria-label="Actions" expanded={expanded} …>
+*/
+function useToolbarScrollExpansion({ scrollRef, expandThreshold = 40, collapseThreshold = 40, reverse = false, defaultExpanded = true } = {}) {
+	return useScrollToggle({
+		scrollRef,
+		onThreshold: expandThreshold,
+		offThreshold: collapseThreshold,
+		reverse,
+		initial: defaultExpanded
+	});
+}
+/**
+* Slides a docked or floating toolbar off the screen while the content scrolls down, and
+* brings it back when it scrolls up, after a 40px threshold each way (M3's "animate
+* offscreen" scroll behaviour, Compose's `exitAlwaysScrollBehavior`). Pass the result to
+* the toolbar's `visible`. Use it instead of `useToolbarScrollExpansion`, not with it.
+*
+* @example
+* const visible = useToolbarScrollExit();
+* <DockedToolbar aria-label="Actions" visible={visible} className="fixed inset-x-0 bottom-0">…
+*/
+function useToolbarScrollExit({ scrollRef, showThreshold = 40, hideThreshold = 40, reverse = false, defaultVisible = true } = {}) {
+	return useScrollToggle({
+		scrollRef,
+		onThreshold: showThreshold,
+		offThreshold: hideThreshold,
+		reverse,
+		initial: defaultVisible
+	});
+}
+//#endregion
+export { useToolbarScrollExit, useToolbarScrollExpansion };
+
+//# sourceMappingURL=use-toolbar-scroll-expansion.js.map

package/dist/components/toolbar/use-toolbar-scroll-expansion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toolbar-scroll-expansion.js","names":[],"sources":["../../../src/components/toolbar/use-toolbar-scroll-expansion.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type RefObject } from 'react';\n\ninterface ScrollToggleOptions {\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Scroll distance (px) back towards the start before the toggle turns on. */\n  onThreshold: number;\n  /** Scroll distance (px) away from the start before the toggle turns off. */\n  offThreshold: number;\n  reverse: boolean;\n  initial: boolean;\n}\n\n/**\n * Turns off after the content scrolls `offThreshold` px away from its start and back on\n * after it scrolls `onThreshold` px back towards it (a port of Compose's\n * `floatingToolbarVerticalNestedScroll`, whose content offset grows as the content scrolls\n * back towards its start).\n */\nfunction useScrollToggle({\n  scrollRef,\n  onThreshold,\n  offThreshold,\n  reverse,\n  initial,\n}: ScrollToggleOptions): boolean {\n  const [on, setOn] = useState(initial);\n\n  useEffect(() => {\n    const element = scrollRef?.current;\n    const target: HTMLElement | Window = element ?? window;\n    const position = () => (element ? element.scrollTop : window.scrollY);\n    const factor = reverse ? -1 : 1;\n    let isOn = initial;\n    let last = position();\n    let contentOffset = 0;\n    let threshold = isOn ? -offThreshold : onThreshold;\n\n    const onScroll = () => {\n      const current = position();\n      const delta = (last - current) * factor;\n      last = current;\n      contentOffset += delta;\n      if (delta < 0 && contentOffset <= threshold) {\n        threshold = contentOffset + onThreshold;\n        if (isOn) setOn((isOn = false));\n      } else if (delta > 0 && contentOffset >= threshold) {\n        threshold = contentOffset - offThreshold;\n        if (!isOn) setOn((isOn = true));\n      }\n    };\n    target.addEventListener('scroll', onScroll, { passive: true });\n    return () => target.removeEventListener('scroll', onScroll);\n  }, [scrollRef, onThreshold, offThreshold, reverse, initial]);\n\n  return on;\n}\n\nexport interface ToolbarScrollExpansionOptions {\n  /** The scroll container. Defaults to the window. */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Scroll distance (px) back towards the top before the toolbar expands. @default 40 */\n  expandThreshold?: number;\n  /** Scroll distance (px) down before the toolbar collapses. @default 40 */\n  collapseThreshold?: number;\n  /**\n   * For content whose start is at the bottom (e.g. a conversation), which reverses the\n   * direction. @default false\n   */\n  reverse?: boolean;\n  /** Whether the toolbar starts expanded, before the content has scrolled. @default true */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Collapses a floating toolbar while the content scrolls down and expands it when it\n * scrolls back up, after a 40px threshold each way (a port of Compose's\n * `floatingToolbarVerticalNestedScroll`). Pass the result to `FloatingToolbar`'s\n * `expanded`.\n *\n * @example\n * const expanded = useToolbarScrollExpansion();\n * <FloatingToolbar aria-label=\"Actions\" expanded={expanded} …>\n */\nexport function useToolbarScrollExpansion({\n  scrollRef,\n  expandThreshold = 40,\n  collapseThreshold = 40,\n  reverse = false,\n  defaultExpanded = true,\n}: ToolbarScrollExpansionOptions = {}): boolean {\n  return useScrollToggle({\n    scrollRef,\n    onThreshold: expandThreshold,\n    offThreshold: collapseThreshold,\n    reverse,\n    initial: defaultExpanded,\n  });\n}\n\nexport interface ToolbarScrollExitOptions {\n  /** The scroll container. Defaults to the window. */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Scroll distance (px) back towards the top before the toolbar returns. @default 40 */\n  showThreshold?: number;\n  /** Scroll distance (px) down before the toolbar leaves the screen. @default 40 */\n  hideThreshold?: number;\n  /**\n   * For content whose start is at the bottom (e.g. a conversation), which reverses the\n   * direction. @default false\n   */\n  reverse?: boolean;\n  /** Whether the toolbar starts on screen, before the content has scrolled. @default true */\n  defaultVisible?: boolean;\n}\n\n/**\n * Slides a docked or floating toolbar off the screen while the content scrolls down, and\n * brings it back when it scrolls up, after a 40px threshold each way (M3's \"animate\n * offscreen\" scroll behaviour, Compose's `exitAlwaysScrollBehavior`). Pass the result to\n * the toolbar's `visible`. Use it instead of `useToolbarScrollExpansion`, not with it.\n *\n * @example\n * const visible = useToolbarScrollExit();\n * <DockedToolbar aria-label=\"Actions\" visible={visible} className=\"fixed inset-x-0 bottom-0\">…\n */\nexport function useToolbarScrollExit({\n  scrollRef,\n  showThreshold = 40,\n  hideThreshold = 40,\n  reverse = false,\n  defaultVisible = true,\n}: ToolbarScrollExitOptions = {}): boolean {\n  return useScrollToggle({\n    scrollRef,\n    onThreshold: showThreshold,\n    offThreshold: hideThreshold,\n    reverse,\n    initial: defaultVisible,\n  });\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAS,gBAAgB,EACvB,WACA,aACA,cACA,SACA,WAC+B;CAC/B,MAAM,CAAC,IAAI,SAAS,SAAS,OAAO;CAEpC,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,SAA+B,WAAW;EAChD,MAAM,iBAAkB,UAAU,QAAQ,YAAY,OAAO;EAC7D,MAAM,SAAS,UAAU,KAAK;EAC9B,IAAI,OAAO;EACX,IAAI,OAAO,SAAS;EACpB,IAAI,gBAAgB;EACpB,IAAI,YAAY,OAAO,CAAC,eAAe;EAEvC,MAAM,iBAAiB;GACrB,MAAM,UAAU,SAAS;GACzB,MAAM,SAAS,OAAO,WAAW;GACjC,OAAO;GACP,iBAAiB;GACjB,IAAI,QAAQ,KAAK,iBAAiB,WAAW;IAC3C,YAAY,gBAAgB;IAC5B,IAAI,MAAM,MAAO,OAAO,KAAM;GAChC,OAAO,IAAI,QAAQ,KAAK,iBAAiB,WAAW;IAClD,YAAY,gBAAgB;IAC5B,IAAI,CAAC,MAAM,MAAO,OAAO,IAAK;GAChC;EACF;EACA,OAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;EAC7D,aAAa,OAAO,oBAAoB,UAAU,QAAQ;CAC5D,GAAG;EAAC;EAAW;EAAa;EAAc;EAAS;CAAO,CAAC;CAE3D,OAAO;AACT;;;;;;;;;;;AA4BA,SAAgB,0BAA0B,EACxC,WACA,kBAAkB,IAClB,oBAAoB,IACpB,UAAU,OACV,kBAAkB,SACe,CAAC,GAAY;CAC9C,OAAO,gBAAgB;EACrB;EACA,aAAa;EACb,cAAc;EACd;EACA,SAAS;CACX,CAAC;AACH;;;;;;;;;;;AA4BA,SAAgB,qBAAqB,EACnC,WACA,gBAAgB,IAChB,gBAAgB,IAChB,UAAU,OACV,iBAAiB,SACW,CAAC,GAAY;CACzC,OAAO,gBAAgB;EACrB;EACA,aAAa;EACb,cAAc;EACd;EACA,SAAS;CACX,CAAC;AACH"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,131 @@
+import { TooltipPlacement, TooltipPlacementContext } from "./tooltip-placement.js";
+import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
+import { RootDOMProps } from "../../utils/root-props.js";
+import { CSSProperties, ReactNode, Ref } from "react";
+//#region src/components/tooltip/Tooltip.d.ts
+export interface TooltipClassNames {
+  /** The visible surface: its colour, corners, padding and size. */
+  panel?: string;
+  /** The caret pointing at the anchor. */
+  caret?: string;
+}
+/**
+ * The outermost element's DOM attributes (`data-*`, `aria-*`, `title`, pointer events). A
+ * `data-tokens` value joins the surface's token set instead, where the tokens resolve.
+ */
+type PopupDOMProps = RootDOMProps & {
+  [data: `data-${string}`]: string | number | boolean | undefined;
+};
+export interface TooltipProps extends PopupDOMProps {
+  /** The label: a few words, with no links or buttons (use a rich tooltip for those). */
+  children: ReactNode;
+  /** Draw a 16×8px caret pointing at the anchor. @default false */
+  caret?: boolean;
+  /**
+   * Goes on the outermost element, which React Aria places against the anchor; the surface
+   * inside keeps its size whatever layout class lands here. Style the surface with
+   * `classNames.panel`.
+   */
+  className?: string;
+  /** Inline styles for the outermost element; React Aria's position wins over them. */
+  style?: CSSProperties;
+  /** Ref to the outermost element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for each part, by slot. */
+  classNames?: TooltipClassNames;
+}
+/** M3 plain tooltip: a short label in `inverse-surface`, inside a {@link TooltipTrigger}. */
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element | null;
+export interface RichTooltipTriggerProps {
+  /** The trigger (a library button), then a `<RichTooltip>`. */
+  children: ReactNode;
+  /**
+   * A persistent rich tooltip opens when the trigger is pressed and stays, even after the
+   * pointer leaves, until the trigger is pressed again, Escape, or a press anywhere outside it
+   * (on another element or on empty space), or focus moving to another element. It's a
+   * non-modal dialog: opening it leaves focus on the trigger, and it comes next in the Tab
+   * order (trigger → its links and buttons → the rest of the page) without trapping focus.
+   * A transient one (the spec's default) works like a plain tooltip: hover, focus
+   * or a touch long press opens it, and it leaves 1.5s after the pointer or focus does.
+   * @default false
+   */
+  persistent?: boolean;
+  /** Bottom right of the anchor in left-to-right layouts (the spec). @default "bottom-start" */
+  placement?: TooltipPlacement;
+  /** Distance from the anchor in px. @default 4 */
+  offset?: number;
+  /** Milliseconds of hover before a transient tooltip shows. @default 0 */
+  delay?: number;
+  /** Milliseconds before a transient tooltip hides after the pointer leaves. @default 1500 */
+  closeDelay?: number;
+  /**
+   * The trigger opens nothing: a transient tooltip ignores hover, focus and long press, and a
+   * persistent one's trigger works as a plain button, without `aria-expanded`. @default false
+   */
+  disabled?: boolean;
+  /** Whether the tooltip is shown (controlled). */
+  open?: boolean;
+  /** Whether the tooltip starts shown when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the tooltip shows or hides. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Shows a {@link RichTooltip} for its trigger. Transient by default (hover, keyboard focus or a
+ * touch long press; it stays while hovered or focused within and leaves 1.5s later), or
+ * `persistent`: opened by a press and kept until the trigger is pressed again, Escape, or a
+ * press anywhere outside it. Focus stays on the trigger, and Tab moves on into the tooltip.
+ * Use `persistent` when the tooltip holds actions keyboard users must reach.
+ */
+export declare function RichTooltipTrigger({ persistent, ...props }: RichTooltipTriggerProps): import("react").JSX.Element;
+export interface RichTooltipClassNames {
+  /** The visible surface: its colour, corners, padding, size and shadow. */
+  panel?: string;
+  /** The subhead. */
+  title?: string;
+  /** The supporting text. */
+  text?: string;
+  /** The row holding the action(s). */
+  actions?: string;
+  /** The caret pointing at the anchor. */
+  caret?: string;
+}
+export interface RichTooltipProps extends Omit<PopupDOMProps, 'title'> {
+  /** Supporting text. */
+  children: ReactNode;
+  /** Subhead; it also names a persistent tooltip. */
+  title?: ReactNode;
+  /** Action(s), usually a text `Button`. */
+  action?: ReactNode;
+  /** Name of a persistent tooltip when there is no `title`. */
+  'aria-label'?: string;
+  /** Draw a 16×8px caret pointing at the anchor. @default false */
+  caret?: boolean;
+  /**
+   * Goes on the outermost element, which React Aria places against the anchor; the surface
+   * inside keeps its size whatever layout class lands here. Style the surface with
+   * `classNames.panel`.
+   */
+  className?: string;
+  /** Inline styles for the outermost element; React Aria's position wins over them. */
+  style?: CSSProperties;
+  /** Ref to the outermost element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for each part, by slot. */
+  classNames?: RichTooltipClassNames;
+}
+/**
+ * M3 rich tooltip: a subhead, supporting text and an optional action on
+ * `surface-container`, inside a {@link RichTooltipTrigger}. A transient one is a
+ * `role="tooltip"` describing its trigger; a persistent one is a non-modal popover dialog.
+ *
+ * @example
+ * <RichTooltipTrigger>
+ *   <Button variant="text">What's this?</Button>
+ *   <RichTooltip title="Grouped tabs">Tabs with the same site stay together.</RichTooltip>
+ * </RichTooltipTrigger>
+ */
+export declare function RichTooltip(props: RichTooltipProps): import("react").JSX.Element | null;
+//#endregion
+export { type TooltipPlacement, TooltipPlacementContext, TooltipTrigger, type TooltipTriggerProps };
+//# sourceMappingURL=Tooltip.d.ts.map