@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  dividerStyles,\n  labeledDividerStyles,\n  type DividerInset,\n  type DividerOrientation,\n} from './divider-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface DividerProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  /**\n   * A full-width horizontal line, or a vertical line the full height of a flex row.\n   * @default \"horizontal\"\n   */\n  orientation?: DividerOrientation;\n  /** Leave 16px at the start, or at both ends. @default \"none\" */\n  inset?: DividerInset;\n  /**\n   * M3 dividers are decorative, so by default the line is hidden from assistive tech\n   * (`role=\"none\"`). Set `decorative={false}` where the line marks a real break between\n   * groups of content, to expose it as a `separator`. @default true\n   */\n  decorative?: boolean;\n}\n\n/**\n * M3 divider: a 1px `outline-variant` line, horizontal (full width) or vertical (full\n * height of a flex row), optionally inset. It's decorative (M3: \"Dividers are decorative\n * elements\") unless `decorative={false}` makes it a `separator`.\n *\n * @example\n * <Divider />\n * <Divider orientation=\"vertical\" inset=\"middle\" />\n */\nexport function Divider({\n  orientation = 'horizontal',\n  inset,\n  decorative = true,\n  className,\n  ...rest\n}: DividerProps) {\n  return (\n    <div\n      {...rest}\n      // The component token's hook (divider-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-divider', rest)}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={decorative || orientation === 'horizontal' ? undefined : 'vertical'}\n      className={dividerStyles({ orientation, inset, class: className })}\n    />\n  );\n}\n\nexport interface LabeledDividerClassNames {\n  /** The wrapper around the line and the text. */\n  root?: string;\n  /** The line. */\n  divider?: string;\n  /** The supporting text. */\n  label?: string;\n}\n\nexport interface LabeledDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  /** The supporting text below the line, e.g. a section's name. */\n  children: ReactNode;\n  /** Leave 16px at the start, or at both ends, of the line and the text. @default \"none\" */\n  inset?: DividerInset;\n  /**\n   * The line is hidden from assistive tech, not the text; `decorative={false}` exposes it\n   * as a `separator`. @default true\n   */\n  decorative?: boolean;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: LabeledDividerClassNames;\n}\n\n/**\n * M3 divider with supporting text: a horizontal divider with a short text 4px below it,\n * 8px clear at the end and below, such as the name of the section that follows.\n *\n * @example\n * <LabeledDivider inset=\"start\">Earlier this week</LabeledDivider>\n */\nexport function LabeledDivider({\n  children,\n  inset,\n  decorative = true,\n  classNames,\n  className,\n  ...rest\n}: LabeledDividerProps) {\n  const styles = labeledDividerStyles({ inset });\n  return (\n    <div {...rest} className={styles.root({ class: cn(classNames?.root, className) })}>\n      <Divider inset={inset} decorative={decorative} className={classNames?.divider} />\n      <div className={styles.label({ class: classNames?.label })}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmCA,SAAgB,QAAQ,EACtB,cAAc,cACd,OACA,aAAa,MACb,WACA,GAAG,QACY;CACf,OACE,oBAAC,OAAD;EACE,GAAI;EAEJ,eAAa,gBAAgB,mBAAmB,IAAI;EACpD,MAAM,aAAa,SAAS;EAC5B,oBAAkB,cAAc,gBAAgB,eAAe,KAAA,IAAY;EAC3E,WAAW,cAAc;GAAE;GAAa;GAAO,OAAO;EAAU,CAAC;CAClE,CAAA;AAEL;;;;;;;;AAgCA,SAAgB,eAAe,EAC7B,UACA,OACA,aAAa,MACb,YACA,WACA,GAAG,QACmB;CACtB,MAAM,SAAS,qBAAqB,EAAE,MAAM,CAAC;CAC7C,OACE,qBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EAAhF,UAAA,CACE,oBAAC,SAAD;GAAgB;GAAmB;GAAY,WAAW,YAAY;EAAU,CAAA,GAChF,oBAAC,OAAD;GAAK,WAAW,OAAO,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAAI;EAAc,CAAA,CACxE;;AAET"}

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

@@ -0,0 +1,90 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/divider/divider-styles.d.ts
+/** Variant definitions for {@link Divider}; extend them to add variants. */
+export declare const dividerStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: "h-px w-full";
+    vertical: "w-px self-stretch";
+  };
+  inset: {
+    none: "";
+    start: "";
+    middle: "";
+  };
+}, undefined, string[], {
+  orientation: {
+    horizontal: "h-px w-full";
+    vertical: "w-px self-stretch";
+  };
+  inset: {
+    none: "";
+    start: "";
+    middle: "";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: "h-px w-full";
+    vertical: "w-px self-stretch";
+  };
+  inset: {
+    none: "";
+    start: "";
+    middle: "";
+  };
+}, undefined>>;
+/**
+ * Variant definitions for {@link LabeledDivider}: a divider with supporting text 4px below
+ * it, the text 8px clear of the end and 8px clear below (m3.material.io's divider
+ * measurements); the line itself runs the full width (2026-10-15: the end padding was on the
+ * root, which shortened the line by 8px). The spec
+ * names no type role for the text; it uses `label-small` in `on-surface-variant`.
+ */
+export declare const labeledDividerStyles: import("tailwind-variants").TVReturnType<{
+  inset: {
+    none: {};
+    start: {
+      label: string;
+    };
+    middle: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+}, undefined, {
+  inset: {
+    none: {};
+    start: {
+      label: string;
+    };
+    middle: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  inset: {
+    none: {};
+    start: {
+      label: string;
+    };
+    middle: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+}>>;
+/**
+ * The variants of {@link dividerStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type DividerStyleProps = VariantProps<typeof dividerStyles>;
+export type DividerOrientation = NonNullable<DividerStyleProps['orientation']>;
+export type DividerInset = NonNullable<DividerStyleProps['inset']>;
+//#endregion
+//# sourceMappingURL=divider-styles.d.ts.map

package/dist/components/divider/divider-styles.js

@@ -0,0 +1,66 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/divider/divider-styles.ts
+/** Variant definitions for {@link Divider}; extend them to add variants. */
+const dividerStyles = tv({
+	base: ["m-0 shrink-0 border-0 bg-[var(--_md-comp-divider-color)] bg-clip-content", "forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none"],
+	variants: {
+		orientation: {
+			horizontal: "h-px w-full",
+			vertical: "w-px self-stretch"
+		},
+		inset: {
+			none: "",
+			start: "",
+			middle: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			inset: "start",
+			class: "ps-[16px]"
+		},
+		{
+			orientation: "horizontal",
+			inset: "middle",
+			class: "ps-[16px] pe-[16px]"
+		},
+		{
+			orientation: "vertical",
+			inset: "start",
+			class: "pt-[16px]"
+		},
+		{
+			orientation: "vertical",
+			inset: "middle",
+			class: "pt-[16px] pb-[16px]"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		inset: "none"
+	}
+});
+/**
+* Variant definitions for {@link LabeledDivider}: a divider with supporting text 4px below
+* it, the text 8px clear of the end and 8px clear below (m3.material.io's divider
+* measurements); the line itself runs the full width (2026-10-15: the end padding was on the
+* root, which shortened the line by 8px). The spec
+* names no type role for the text; it uses `label-small` in `on-surface-variant`.
+*/
+const labeledDividerStyles = tv({
+	slots: {
+		root: "flex min-w-0 flex-col gap-[4px] pb-[8px]",
+		label: "pe-[8px] text-label-small text-on-surface-variant"
+	},
+	variants: { inset: {
+		none: {},
+		start: { label: "ps-[16px]" },
+		middle: { label: "ps-[16px] pe-[24px]" }
+	} },
+	defaultVariants: { inset: "none" }
+});
+//#endregion
+export { dividerStyles, labeledDividerStyles };
+
+//# sourceMappingURL=divider-styles.js.map

package/dist/components/divider/divider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-styles.js","names":[],"sources":["../../../src/components/divider/divider-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Divider.kt, DividerTokens): 1px of `outline-variant`.\n * Insets follow m3.material.io (16px at the start, or at both ends for a middle inset);\n * Compose leaves them to padding. The line is the element's background clipped to its\n * content box, so the inset is padding and the root keeps no margins (§10). Its colour comes\n * from the divider's component token (`divider-tokens.ts`, `--md-comp-divider-color`); the root\n * carries `data-tokens=\"md-comp-divider\"`, and a consumer class (`bg-primary`) still wins.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link Divider}; extend them to add variants. */\nexport const dividerStyles = tv({\n  base: [\n    'm-0 shrink-0 border-0 bg-[var(--_md-comp-divider-color)] bg-clip-content',\n    // The line is a background, which forced colours drop.\n    'forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n  ],\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-full',\n      vertical: 'w-px self-stretch',\n    },\n    inset: { none: '', start: '', middle: '' },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'start', class: 'ps-[16px]' },\n    { orientation: 'horizontal', inset: 'middle', class: 'ps-[16px] pe-[16px]' },\n    { orientation: 'vertical', inset: 'start', class: 'pt-[16px]' },\n    { orientation: 'vertical', inset: 'middle', class: 'pt-[16px] pb-[16px]' },\n  ],\n  defaultVariants: { orientation: 'horizontal', inset: 'none' },\n});\n\n/**\n * Variant definitions for {@link LabeledDivider}: a divider with supporting text 4px below\n * it, the text 8px clear of the end and 8px clear below (m3.material.io's divider\n * measurements); the line itself runs the full width (2026-10-15: the end padding was on the\n * root, which shortened the line by 8px). The spec\n * names no type role for the text; it uses `label-small` in `on-surface-variant`.\n */\nexport const labeledDividerStyles = tv({\n  slots: {\n    root: 'flex min-w-0 flex-col gap-[4px] pb-[8px]',\n    label: 'pe-[8px] text-label-small text-on-surface-variant',\n  },\n  variants: {\n    inset: {\n      none: {},\n      start: { label: 'ps-[16px]' },\n      middle: { label: 'ps-[16px] pe-[24px]' },\n    },\n  },\n  defaultVariants: { inset: 'none' },\n});\n\n/**\n * The variants of {@link dividerStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DividerStyleProps = VariantProps<typeof dividerStyles>;\nexport type DividerOrientation = NonNullable<DividerStyleProps['orientation']>;\nexport type DividerInset = NonNullable<DividerStyleProps['inset']>;\n"],"mappings":";;;AAaA,MAAa,gBAAgB,GAAG;CAC9B,MAAM,CACJ,4EAEA,sEACF;CACA,UAAU;EACR,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,OAAO;GAAE,MAAM;GAAI,OAAO;GAAI,QAAQ;EAAG;CAC3C;CACA,kBAAkB;EAChB;GAAE,aAAa;GAAc,OAAO;GAAS,OAAO;EAAY;EAChE;GAAE,aAAa;GAAc,OAAO;GAAU,OAAO;EAAsB;EAC3E;GAAE,aAAa;GAAY,OAAO;GAAS,OAAO;EAAY;EAC9D;GAAE,aAAa;GAAY,OAAO;GAAU,OAAO;EAAsB;CAC3E;CACA,iBAAiB;EAAE,aAAa;EAAc,OAAO;CAAO;AAC9D,CAAC;;;;;;;;AASD,MAAa,uBAAuB,GAAG;CACrC,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,UAAU,EACR,OAAO;EACL,MAAM,CAAC;EACP,OAAO,EAAE,OAAO,YAAY;EAC5B,QAAQ,EAAE,OAAO,sBAAsB;CACzC,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/divider/divider-tokens.d.ts
+/** The tokens of {@link Divider}: `--md-comp-divider-<part>`. */
+export declare const dividerTokenSet: ComponentTokenSet<"color">;
+//#endregion
+//# sourceMappingURL=divider-tokens.d.ts.map

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

@@ -0,0 +1,16 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/divider/divider-tokens.ts
+/** The tokens of {@link Divider}: `--md-comp-divider-<part>`. */
+const dividerTokenSet = defineComponentTokens({
+	name: "md-comp-divider",
+	tokens: { color: {
+		value: color("outline-variant"),
+		description: "The line.",
+		compose: "DividerTokens.Color",
+		paints: { property: "background-color" }
+	} }
+});
+//#endregion
+export { dividerTokenSet };
+
+//# sourceMappingURL=divider-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider-tokens.js","names":[],"sources":["../../../src/components/divider/divider-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * Divider's component token, M3's `md.comp.divider.color` (checked against m3.material.io's\n * token tables, 2026-10-14), with Compose's DividerTokens default. `divider-styles.ts` reads\n * it as one private variable. The thickness stays a class.\n */\n\n/** The tokens of {@link Divider}: `--md-comp-divider-<part>`. */\nexport const dividerTokenSet = defineComponentTokens({\n  name: 'md-comp-divider',\n  tokens: {\n    color: {\n      value: color('outline-variant'),\n      description: 'The line.',\n      compose: 'DividerTokens.Color',\n      paints: { property: 'background-color' },\n    },\n  },\n});\n"],"mappings":";;;AASA,MAAa,kBAAkB,sBAAsB;CACnD,MAAM;CACN,QAAQ,EACN,OAAO;EACL,OAAO,MAAM,iBAAiB;EAC9B,aAAa;EACb,SAAS;EACT,QAAQ,EAAE,UAAU,mBAAmB;CACzC,EACF;AACF,CAAC"}

package/dist/components/fab/Fab.d.ts

@@ -0,0 +1,130 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { ExtendedFabSize, FabColor, FabElevation, FabSize } from "./fab-styles.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/fab/Fab.d.ts
+/** FABs have no disabled or toggle state in M3. */
+type FabBaseKeys = 'children' | 'disabled' | 'toggle';
+interface FabCommonProps {
+  /** The colour style: a container colour or its solid form. @default "primary-container" */
+  color?: FabColor;
+  /**
+   * `default` is level 3 (hover 4); `lowered` is level 1 (hover 2), for FABs on surfaces
+   * that already sit above the page; `flat` is level 0, for a FAB nested in another
+   * component such as the navigation rail. @default "default"
+   */
+  elevation?: FabElevation;
+  /**
+   * Shows the FAB. Hiding it shrinks it towards its centre and fades it out; showing it
+   * expands it back, so it can disappear and reappear around a page or tab change. A
+   * hidden FAB is `inert`. @default true
+   */
+  visible?: boolean;
+  /**
+   * Plays the appearing animation when the FAB mounts. Change the FAB's `key` on a page
+   * or tab change to replay it. @default false
+   */
+  appear?: boolean;
+}
+type AccessibleName = {
+  /** The FAB's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */
+  'aria-label': string;
+  /** The id of an element that names the FAB, instead of `aria-label`. */
+  'aria-labelledby'?: string;
+} | {
+  /** The FAB's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */
+  'aria-label'?: string;
+  /** The id of an element that names the FAB, instead of `aria-label`. */
+  'aria-labelledby': string;
+};
+export interface FabClassNames {
+  /** The FAB element itself; merged with `className`. */
+  root?: string;
+  /** The icon. */
+  icon?: string;
+  /** The built-in plain tooltip that shows the label (`tooltip`). */
+  tooltip?: string;
+}
+interface FabOwnProps extends FabCommonProps {
+  /**
+   * Container size: `default` (56px), `md` (medium, 80px) or `lg` (large, 96px). The small FAB is
+   * deprecated in M3 Expressive. @default "default"
+   */
+  size?: FabSize;
+  /** The icon. Hidden from assistive tech; `aria-label` names the FAB. */
+  icon: ReactElement;
+  /**
+   * Shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of
+   * FABs on the web. Turn it off when you wrap the FAB in your own `TooltipTrigger`.
+   * @default true
+   */
+  tooltip?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: FabClassNames;
+}
+type OmitFab<T> = Omit<T, keyof FabOwnProps | FabBaseKeys | 'aria-label' | 'aria-labelledby'>;
+export type FabProps = FabOwnProps & AccessibleName & (OmitFab<ButtonBaseActionProps> | OmitFab<ButtonBaseLinkProps>);
+/**
+ * M3 Expressive floating action button: default (56px), medium (80px) and large (96px),
+ * six colour styles, three elevations, a tooltip from its label, and an animated
+ * `visible` state.
+ *
+ * @example
+ * <Fab icon={<EditIcon />} aria-label="Compose" onPress={compose} className="fixed end-4 bottom-4" />
+ */
+export declare function Fab({ size, color, elevation, visible, appear, tooltip, icon, classNames, className, ...base }: FabProps): import("react").JSX.Element;
+export interface ExtendedFabClassNames {
+  /** The FAB element itself; merged with `className`. */
+  root?: string;
+  /** Inner wrapper around the icon and label. */
+  content?: string;
+  /** The leading icon. */
+  icon?: string;
+  /** The label's clipping wrapper, which collapses with the FAB. */
+  label?: string;
+  /** The label text. */
+  text?: string;
+  /** The built-in plain tooltip shown while collapsed (`tooltip`). */
+  tooltip?: string;
+}
+interface ExtendedFabOwnProps extends FabCommonProps {
+  /** Container height and label size: small (56px), medium (80px) or large (96px). @default "sm" */
+  size?: ExtendedFabSize;
+  /** Leading icon. Needed for the collapsed state, which shows the icon only. */
+  icon?: ReactElement;
+  /** The visible label; it also names the FAB, including while collapsed. */
+  children: Exclude<ReactNode, null | undefined | boolean>;
+  /**
+   * A name that replaces the label, only to add detail. Start it with the visible label's
+   * first word ("Create a new invite" for "Create"), as M3 asks, so voice control can name
+   * the FAB; it warns once in development when the first words differ.
+   */
+  'aria-label'?: string;
+  /** The id of an element that names the FAB instead of its label. */
+  'aria-labelledby'?: string;
+  /**
+   * Shows the label. Collapsing animates the FAB to a square showing only the icon
+   * (e.g. while the page scrolls). @default true
+   */
+  expanded?: boolean;
+  /**
+   * While collapsed, shows the label (or `aria-label`) in a plain tooltip on hover and
+   * keyboard focus, as M3 asks of icon-only FABs on the web. Expanded, the label is visible
+   * and there is no tooltip. It steps aside inside your own `TooltipTrigger`. @default true
+   */
+  tooltip?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: ExtendedFabClassNames;
+}
+type OmitExtended<T> = Omit<T, keyof ExtendedFabOwnProps | FabBaseKeys>;
+export type ExtendedFabProps = ExtendedFabOwnProps & (OmitExtended<ButtonBaseActionProps> | OmitExtended<ButtonBaseLinkProps>);
+/**
+ * M3 Expressive extended FAB: small (56px), medium (80px) and large (96px), with an icon
+ * and a label that collapses and expands with `expanded`. Its visible label names it, so
+ * it has a tooltip only while collapsed to the icon (M3's FAB rule).
+ *
+ * @example
+ * <ExtendedFab icon={<EditIcon />} expanded={!isScrolling} onPress={compose}>Compose</ExtendedFab>
+ */
+export declare function ExtendedFab({ size, color, elevation, visible, appear, icon, expanded, tooltip, classNames, className, children, ...base }: ExtendedFabProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Fab.d.ts.map

package/dist/components/fab/Fab.js

@@ -0,0 +1,137 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.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 { useNaturalSize } from "../../utils/natural-size.js";
+import { FabTooltip } from "./FabTooltip.js";
+import { extendedFabStyles, fabStyles } from "./fab-styles.js";
+import { isValidElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fab/Fab.tsx
+/** The text of a label, through elements and arrays (empty for anything else). */
+function textOf(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(textOf).join("");
+	if (isValidElement(node)) return textOf(node.props.children);
+	return "";
+}
+/** A text's first word, lower-cased, or undefined when it has none. */
+function firstWord(text) {
+	return text?.match(/[\p{L}\p{N}]+/u)?.[0]?.toLocaleLowerCase();
+}
+/** The `data-*` and `inert` attributes that drive the show / hide motion. */
+function visibilityProps(visible, appear) {
+	return {
+		"data-hidden": visible ? void 0 : true,
+		"data-appear": appear || void 0,
+		inert: !visible || void 0
+	};
+}
+/**
+* M3 Expressive floating action button: default (56px), medium (80px) and large (96px),
+* six colour styles, three elevations, a tooltip from its label, and an animated
+* `visible` state.
+*
+* @example
+* <Fab icon={<EditIcon />} aria-label="Compose" onPress={compose} className="fixed end-4 bottom-4" />
+*/
+function Fab({ size, color, elevation, visible = true, appear = false, tooltip = true, icon, classNames, className, ...base }) {
+	const styles = fabStyles({
+		size,
+		color,
+		elevation
+	});
+	const baseProps = {
+		...base,
+		...visibilityProps(visible, appear),
+		className: styles.root({ class: cn(classNames?.root, className) })
+	};
+	const fab = /* @__PURE__ */ jsx(ButtonBase, {
+		...baseProps,
+		"data-tokens": mergeDataTokens("md-comp-fab", base),
+		"data-color": color ?? "primary-container",
+		"data-size": size ?? "default",
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: styles.icon({ class: classNames?.icon }),
+			children: 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
+	})] });
+}
+/**
+* M3 Expressive extended FAB: small (56px), medium (80px) and large (96px), with an icon
+* and a label that collapses and expands with `expanded`. Its visible label names it, so
+* it has a tooltip only while collapsed to the icon (M3's FAB rule).
+*
+* @example
+* <ExtendedFab icon={<EditIcon />} expanded={!isScrolling} onPress={compose}>Compose</ExtendedFab>
+*/
+function ExtendedFab({ size, color, elevation, visible = true, appear = false, icon, expanded = true, tooltip = true, classNames, className, children, ...base }) {
+	if (process.env.NODE_ENV !== "production" && !expanded && !icon) console.warn("[@windmorph/react] An ExtendedFab without an icon cannot collapse; it stays expanded.");
+	useWarnOnce(useContext(ToolbarContext)?.kind === "floating", "[@windmorph/react] Pair a FloatingToolbar with a FAB (ToolbarFab), not an extended FAB (M3).");
+	const labelWord = firstWord(base["aria-label"]);
+	const visibleWord = firstWord(textOf(children));
+	useWarnOnce(labelWord !== void 0 && visibleWord !== void 0 && labelWord !== visibleWord, `[@windmorph/react] An ExtendedFab's aria-label should start with its visible label's first word ("${visibleWord}"), as M3 asks, so voice control can name it.`);
+	const collapsed = !expanded && Boolean(icon);
+	const [labelRef, labelWidth, labelResized] = useNaturalSize("width", Boolean(icon));
+	const styles = extendedFabStyles({
+		size,
+		color,
+		elevation,
+		hasIcon: Boolean(icon)
+	});
+	const baseProps = {
+		...base,
+		...visibilityProps(visible, appear),
+		className: styles.root({ class: cn(classNames?.root, className) })
+	};
+	const fab = /* @__PURE__ */ jsx(ButtonBase, {
+		...baseProps,
+		"data-tokens": mergeDataTokens("md-comp-extended-fab", base),
+		"data-color": color ?? "primary-container",
+		"data-size": size ?? "sm",
+		"data-expanded": !collapsed,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: styles.content({ class: classNames?.content }),
+			children: [icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: styles.icon({ class: classNames?.icon }),
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				"data-collapsed": collapsed || void 0,
+				"data-resized": labelResized || void 0,
+				style: labelWidth === void 0 ? void 0 : { width: collapsed ? 0 : labelWidth },
+				className: styles.collapse(),
+				children: /* @__PURE__ */ jsx("span", {
+					ref: labelRef,
+					className: styles.label({ class: classNames?.label }),
+					children: /* @__PURE__ */ jsx("span", {
+						className: styles.text({ class: classNames?.text }),
+						children
+					})
+				})
+			})]
+		})
+	});
+	if (!tooltip || !icon) return fab;
+	return /* @__PURE__ */ jsx(FabTooltip, {
+		available: collapsed,
+		label: base["aria-label"] ?? children,
+		className: classNames?.tooltip,
+		children: fab
+	});
+}
+//#endregion
+export { ExtendedFab, Fab };
+
+//# sourceMappingURL=Fab.js.map

package/dist/components/fab/Fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fab.js","names":[],"sources":["../../../src/components/fab/Fab.tsx"],"sourcesContent":["'use client';\n\nimport { isValidElement, useContext, type ReactElement, type ReactNode } from 'react';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseProps,\n} from '../../primitives/ButtonBase';\nimport { ToolbarContext } from '../../primitives/ToolbarContext';\nimport { cn } from '../../utils/cn';\nimport { useNaturalSize } from '../../utils/natural-size';\nimport { useWarnOnce } from '../../utils/warn-once';\nimport { LazyTooltip } from '../tooltip/lazy-tooltip';\nimport { TooltipTrigger, WithoutDescription } from '../tooltip/tooltip-trigger';\nimport { FabTooltip } from './FabTooltip';\nimport {\n  extendedFabStyles,\n  fabStyles,\n  type ExtendedFabSize,\n  type FabColor,\n  type FabElevation,\n  type FabSize,\n} from './fab-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** FABs have no disabled or toggle state in M3. */\ntype FabBaseKeys = 'children' | 'disabled' | 'toggle';\n\ninterface FabCommonProps {\n  /** The colour style: a container colour or its solid form. @default \"primary-container\" */\n  color?: FabColor;\n  /**\n   * `default` is level 3 (hover 4); `lowered` is level 1 (hover 2), for FABs on surfaces\n   * that already sit above the page; `flat` is level 0, for a FAB nested in another\n   * component such as the navigation rail. @default \"default\"\n   */\n  elevation?: FabElevation;\n  /**\n   * Shows the FAB. Hiding it shrinks it towards its centre and fades it out; showing it\n   * expands it back, so it can disappear and reappear around a page or tab change. A\n   * hidden FAB is `inert`. @default true\n   */\n  visible?: boolean;\n  /**\n   * Plays the appearing animation when the FAB mounts. Change the FAB's `key` on a page\n   * or tab change to replay it. @default false\n   */\n  appear?: boolean;\n}\n\n/** The text of a label, through elements and arrays (empty for anything else). */\nfunction textOf(node: ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(textOf).join('');\n  if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children);\n  return '';\n}\n\n/** A text's first word, lower-cased, or undefined when it has none. */\nfunction firstWord(text: string | undefined): string | undefined {\n  return text?.match(/[\\p{L}\\p{N}]+/u)?.[0]?.toLocaleLowerCase();\n}\n\n/** The `data-*` and `inert` attributes that drive the show / hide motion. */\nfunction visibilityProps(visible: boolean, appear: boolean) {\n  return {\n    'data-hidden': visible ? undefined : true,\n    'data-appear': appear || undefined,\n    inert: !visible || undefined,\n  };\n}\n\ntype AccessibleName =\n  | {\n      /** The FAB's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */\n      'aria-label': string;\n      /** The id of an element that names the FAB, instead of `aria-label`. */\n      'aria-labelledby'?: string;\n    }\n  | {\n      /** The FAB's accessible name, also shown in its tooltip. Required without `aria-labelledby`. */\n      'aria-label'?: string;\n      /** The id of an element that names the FAB, instead of `aria-label`. */\n      'aria-labelledby': string;\n    };\n\nexport interface FabClassNames {\n  /** The FAB element itself; 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\ninterface FabOwnProps extends FabCommonProps {\n  /**\n   * Container size: `default` (56px), `md` (medium, 80px) or `lg` (large, 96px). The small FAB is\n   * deprecated in M3 Expressive. @default \"default\"\n   */\n  size?: FabSize;\n  /** The icon. Hidden from assistive tech; `aria-label` names the FAB. */\n  icon: ReactElement;\n  /**\n   * Shows `aria-label` in a plain tooltip on hover and keyboard focus, as M3 asks of\n   * FABs on the web. Turn it off when you wrap the FAB in your own `TooltipTrigger`.\n   * @default true\n   */\n  tooltip?: boolean;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: FabClassNames;\n}\n\ntype OmitFab<T> = Omit<T, keyof FabOwnProps | FabBaseKeys | 'aria-label' | 'aria-labelledby'>;\n\nexport type FabProps = FabOwnProps &\n  AccessibleName &\n  (OmitFab<ButtonBaseActionProps> | OmitFab<ButtonBaseLinkProps>);\n\n/**\n * M3 Expressive floating action button: default (56px), medium (80px) and large (96px),\n * six colour styles, three elevations, a tooltip from its label, and an animated\n * `visible` state.\n *\n * @example\n * <Fab icon={<EditIcon />} aria-label=\"Compose\" onPress={compose} className=\"fixed end-4 bottom-4\" />\n */\nexport function Fab({\n  size,\n  color,\n  elevation,\n  visible = true,\n  appear = false,\n  tooltip = true,\n  icon,\n  classNames,\n  className,\n  ...base\n}: FabProps) {\n  const styles = fabStyles({ size, color, elevation });\n  const baseProps = {\n    ...base,\n    ...visibilityProps(visible, appear),\n    className: styles.root({ class: cn(classNames?.root, className) }),\n  } as ButtonBaseProps;\n  const fab = (\n    <ButtonBase\n      {...baseProps}\n      // The component tokens' hooks (fab-tokens.ts), also public styling hooks for apps.\n      data-tokens={mergeDataTokens('md-comp-fab', base)}\n      data-color={color ?? 'primary-container'}\n      data-size={size ?? 'default'}\n    >\n      <span aria-hidden=\"true\" className={styles.icon({ class: classNames?.icon })}>\n        {icon}\n      </span>\n    </ButtonBase>\n  );\n  const label = base['aria-label'];\n  if (!tooltip || !label) return fab;\n  return (\n    <TooltipTrigger>\n      <WithoutDescription>{fab}</WithoutDescription>\n      <LazyTooltip classNames={{ panel: classNames?.tooltip }}>{label}</LazyTooltip>\n    </TooltipTrigger>\n  );\n}\n\nexport interface ExtendedFabClassNames {\n  /** The FAB element itself; merged with `className`. */\n  root?: string;\n  /** Inner wrapper around the icon and label. */\n  content?: string;\n  /** The leading icon. */\n  icon?: string;\n  /** The label's clipping wrapper, which collapses with the FAB. */\n  label?: string;\n  /** The label text. */\n  text?: string;\n  /** The built-in plain tooltip shown while collapsed (`tooltip`). */\n  tooltip?: string;\n}\n\ninterface ExtendedFabOwnProps extends FabCommonProps {\n  /** Container height and label size: small (56px), medium (80px) or large (96px). @default \"sm\" */\n  size?: ExtendedFabSize;\n  /** Leading icon. Needed for the collapsed state, which shows the icon only. */\n  icon?: ReactElement;\n  /** The visible label; it also names the FAB, including while collapsed. */\n  children: Exclude<ReactNode, null | undefined | boolean>;\n  /**\n   * A name that replaces the label, only to add detail. Start it with the visible label's\n   * first word (\"Create a new invite\" for \"Create\"), as M3 asks, so voice control can name\n   * the FAB; it warns once in development when the first words differ.\n   */\n  'aria-label'?: string;\n  /** The id of an element that names the FAB instead of its label. */\n  'aria-labelledby'?: string;\n  /**\n   * Shows the label. Collapsing animates the FAB to a square showing only the icon\n   * (e.g. while the page scrolls). @default true\n   */\n  expanded?: boolean;\n  /**\n   * While collapsed, shows the label (or `aria-label`) in a plain tooltip on hover and\n   * keyboard focus, as M3 asks of icon-only FABs on the web. Expanded, the label is visible\n   * and there is no tooltip. It steps aside inside your own `TooltipTrigger`. @default true\n   */\n  tooltip?: boolean;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: ExtendedFabClassNames;\n}\n\ntype OmitExtended<T> = Omit<T, keyof ExtendedFabOwnProps | FabBaseKeys>;\n\nexport type ExtendedFabProps = ExtendedFabOwnProps &\n  (OmitExtended<ButtonBaseActionProps> | OmitExtended<ButtonBaseLinkProps>);\n\n/**\n * M3 Expressive extended FAB: small (56px), medium (80px) and large (96px), with an icon\n * and a label that collapses and expands with `expanded`. Its visible label names it, so\n * it has a tooltip only while collapsed to the icon (M3's FAB rule).\n *\n * @example\n * <ExtendedFab icon={<EditIcon />} expanded={!isScrolling} onPress={compose}>Compose</ExtendedFab>\n */\nexport function ExtendedFab({\n  size,\n  color,\n  elevation,\n  visible = true,\n  appear = false,\n  icon,\n  expanded = true,\n  tooltip = true,\n  classNames,\n  className,\n  children,\n  ...base\n}: ExtendedFabProps) {\n  if (process.env.NODE_ENV !== 'production' && !expanded && !icon) {\n    console.warn(\n      '[@windmorph/react] An ExtendedFab without an icon cannot collapse; it stays expanded.',\n    );\n  }\n  // Once per FAB, not on every render.\n  useWarnOnce(\n    useContext(ToolbarContext)?.kind === 'floating',\n    '[@windmorph/react] Pair a FloatingToolbar with a FAB (ToolbarFab), not an extended FAB (M3).',\n  );\n  // M3: \"The accessibility label must include the same first word as the visible label\",\n  // so voice control users can say what they see (2026-10-15).\n  const labelWord = firstWord(base['aria-label']);\n  const visibleWord = firstWord(textOf(children));\n  useWarnOnce(\n    labelWord !== undefined && visibleWord !== undefined && labelWord !== visibleWord,\n    `[@windmorph/react] An ExtendedFab's aria-label should start with its visible label's first word (\"${visibleWord}\"), as M3 asks, so voice control can name it.`,\n  );\n  const collapsed = !expanded && Boolean(icon);\n  const [labelRef, labelWidth, labelResized] = useNaturalSize<HTMLSpanElement>(\n    'width',\n    Boolean(icon),\n  );\n  const styles = extendedFabStyles({ size, color, elevation, hasIcon: Boolean(icon) });\n  const baseProps = {\n    ...base,\n    ...visibilityProps(visible, appear),\n    className: styles.root({ class: cn(classNames?.root, className) }),\n  } as ButtonBaseProps;\n  const fab = (\n    <ButtonBase\n      {...baseProps}\n      // The component tokens' hooks (fab-tokens.ts), also public styling hooks for apps.\n      data-tokens={mergeDataTokens('md-comp-extended-fab', base)}\n      data-color={color ?? 'primary-container'}\n      data-size={size ?? 'sm'}\n      data-expanded={!collapsed}\n    >\n      <span className={styles.content({ class: classNames?.content })}>\n        {icon && (\n          <span aria-hidden=\"true\" className={styles.icon({ class: classNames?.icon })}>\n            {icon}\n          </span>\n        )}\n        <span\n          data-collapsed={collapsed || undefined}\n          data-resized={labelResized || undefined}\n          style={labelWidth === undefined ? undefined : { width: collapsed ? 0 : labelWidth }}\n          className={styles.collapse()}\n        >\n          <span ref={labelRef} className={styles.label({ class: classNames?.label })}>\n            <span className={styles.text({ class: classNames?.text })}>{children}</span>\n          </span>\n        </span>\n      </span>\n    </ButtonBase>\n  );\n  if (!tooltip || !icon) return fab;\n  return (\n    <FabTooltip\n      available={collapsed}\n      label={base['aria-label'] ?? children}\n      className={classNames?.tooltip}\n    >\n      {fab}\n    </FabTooltip>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fab/FabTooltip.js

@@ -0,0 +1,36 @@
+"use client";
+import { TooltipTrigger, WithoutDescription, useInTooltipTrigger } from "../tooltip/tooltip-trigger.js";
+import { LazyTooltip } from "../tooltip/lazy-tooltip.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fab/FabTooltip.tsx
+/**
+* The plain tooltip M3 asks of an icon-only FAB on the web, for FABs that are icon-only
+* some of the time. It stays mounted either way, so toggling never remounts the FAB (which
+* would drop focus and cut its motion short), and an open tooltip closes once it stops
+* being available. Inside an app's own `TooltipTrigger` or `RichTooltipTrigger` it steps
+* aside, so there's never a second tooltip.
+*/
+function FabTooltip({ available, label, className, children }) {
+	const inTooltipTrigger = useInTooltipTrigger();
+	const [isOpen, setOpen] = useState(false);
+	const [wasAvailable, setWasAvailable] = useState(available);
+	if (available !== wasAvailable) {
+		setWasAvailable(available);
+		if (!available) setOpen(false);
+	}
+	if (inTooltipTrigger) return children;
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		disabled: !available,
+		open: available && isOpen,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(WithoutDescription, { children }), /* @__PURE__ */ jsx(LazyTooltip, {
+			classNames: { panel: className },
+			children: label
+		})]
+	});
+}
+//#endregion
+export { FabTooltip };
+
+//# sourceMappingURL=FabTooltip.js.map

package/dist/components/fab/FabTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FabTooltip.js","names":[],"sources":["../../../src/components/fab/FabTooltip.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ReactElement, type ReactNode } from 'react';\nimport { LazyTooltip } from '../tooltip/lazy-tooltip';\nimport {\n  TooltipTrigger,\n  useInTooltipTrigger,\n  WithoutDescription,\n} from '../tooltip/tooltip-trigger';\n\ninterface FabTooltipProps {\n  /** Whether the tooltip can show: an extended FAB while collapsed, a FAB menu while closed. */\n  available: boolean;\n  label: ReactNode;\n  /** Classes for the tooltip's surface (its `classNames.panel`). */\n  className?: string | undefined;\n  /** The FAB, a library button that reads `TriggerContext`. */\n  children: ReactElement;\n}\n\n/**\n * The plain tooltip M3 asks of an icon-only FAB on the web, for FABs that are icon-only\n * some of the time. It stays mounted either way, so toggling never remounts the FAB (which\n * would drop focus and cut its motion short), and an open tooltip closes once it stops\n * being available. Inside an app's own `TooltipTrigger` or `RichTooltipTrigger` it steps\n * aside, so there's never a second tooltip.\n */\nexport function FabTooltip({ available, label, className, children }: FabTooltipProps) {\n  const inTooltipTrigger = useInTooltipTrigger();\n  const [isOpen, setOpen] = useState(false);\n  const [wasAvailable, setWasAvailable] = useState(available);\n  // Closes it for good when it stops being available, so it doesn't reopen by itself when\n  // it becomes available again (state adjusted during render, not in an effect).\n  if (available !== wasAvailable) {\n    setWasAvailable(available);\n    if (!available) setOpen(false);\n  }\n  if (inTooltipTrigger) return children;\n  return (\n    <TooltipTrigger disabled={!available} open={available && isOpen} onOpenChange={setOpen}>\n      {/* The label is the FAB's name, so the tooltip doesn't describe it too. */}\n      <WithoutDescription>{children}</WithoutDescription>\n      <LazyTooltip classNames={{ panel: className }}>{label}</LazyTooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,WAAW,EAAE,WAAW,OAAO,WAAW,YAA6B;CACrF,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS;CAG1D,IAAI,cAAc,cAAc;EAC9B,gBAAgB,SAAS;EACzB,IAAI,CAAC,WAAW,QAAQ,KAAK;CAC/B;CACA,IAAI,kBAAkB,OAAO;CAC7B,OACE,qBAAC,gBAAD;EAAgB,UAAU,CAAC;EAAW,MAAM,aAAa;EAAQ,cAAc;EAA/E,UAAA,CAEE,oBAAC,oBAAD,EAAqB,SAA6B,CAAA,GAClD,oBAAC,aAAD;GAAa,YAAY,EAAE,OAAO,UAAU;GAAI,UAAA;EAAmB,CAAA,CACrD;;AAEpB"}