@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,54 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/snackbar/snackbar-tokens.ts
+/** The tokens of {@link Snackbar}: `--md-comp-snackbar-<part>`. */
+const snackbarTokenSet = defineComponentTokens({
+	name: "md-comp-snackbar",
+	tokens: {
+		"container-color": {
+			value: color("inverse-surface"),
+			description: "The container.",
+			compose: "SnackbarTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"container-shape": {
+			value: corner("extra-small"),
+			description: "The corners.",
+			compose: "SnackbarTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"container-elevation": {
+			value: elevation(3),
+			description: "The shadow.",
+			compose: "SnackbarTokens.ContainerElevation",
+			paints: { property: "box-shadow" }
+		},
+		"supporting-text-color": {
+			value: color("inverse-on-surface"),
+			description: "The message.",
+			compose: "SnackbarTokens.SupportingTextColor",
+			paints: { property: "color" }
+		},
+		"action-label-text-color": {
+			value: color("inverse-primary"),
+			description: "The action, a text button.",
+			compose: "SnackbarTokens.ActionLabelTextColor",
+			paints: {
+				property: "color",
+				slot: "action"
+			}
+		},
+		"icon-color": {
+			value: color("inverse-on-surface"),
+			description: "The dismiss icon button.",
+			compose: "SnackbarTokens.IconColor",
+			paints: {
+				property: "color",
+				slot: "dismiss"
+			}
+		}
+	}
+});
+//#endregion
+export { snackbarTokenSet };
+
+//# sourceMappingURL=snackbar-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar-tokens.js","names":[],"sources":["../../../src/components/snackbar/snackbar-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * Snackbar's component tokens, M3's `md.comp.snackbar.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's SnackbarTokens defaults.\n * `snackbar-styles.ts` reads one private variable per part. The action and dismiss buttons'\n * hover, focus and pressed layers follow their colours; sizes and padding stay classes.\n */\n\n/** The tokens of {@link Snackbar}: `--md-comp-snackbar-<part>`. */\nexport const snackbarTokenSet = defineComponentTokens({\n  name: 'md-comp-snackbar',\n  tokens: {\n    'container-color': {\n      value: color('inverse-surface'),\n      description: 'The container.',\n      compose: 'SnackbarTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'container-shape': {\n      value: corner('extra-small'),\n      description: 'The corners.',\n      compose: 'SnackbarTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'container-elevation': {\n      value: elevation(3),\n      description: 'The shadow.',\n      compose: 'SnackbarTokens.ContainerElevation',\n      paints: { property: 'box-shadow' },\n    },\n    'supporting-text-color': {\n      value: color('inverse-on-surface'),\n      description: 'The message.',\n      compose: 'SnackbarTokens.SupportingTextColor',\n      paints: { property: 'color' },\n    },\n    'action-label-text-color': {\n      value: color('inverse-primary'),\n      description: 'The action, a text button.',\n      compose: 'SnackbarTokens.ActionLabelTextColor',\n      paints: { property: 'color', slot: 'action' },\n    },\n    'icon-color': {\n      value: color('inverse-on-surface'),\n      description: 'The dismiss icon button.',\n      compose: 'SnackbarTokens.IconColor',\n      paints: { property: 'color', slot: 'dismiss' },\n    },\n  },\n});\n"],"mappings":";;;AAUA,MAAa,mBAAmB,sBAAsB;CACpD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,iBAAiB;GAC9B,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,mBAAmB;GACjB,OAAO,OAAO,aAAa;GAC3B,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,yBAAyB;EAC/C;EACA,uBAAuB;GACrB,OAAO,UAAU,CAAC;GAClB,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,aAAa;EACnC;EACA,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,QAAQ;EAC9B;EACA,2BAA2B;GACzB,OAAO,MAAM,iBAAiB;GAC9B,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAS;EAC9C;EACA,cAAc;GACZ,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;CACF;AACF,CAAC"}

package/dist/components/split-button/SplitButton.d.ts

@@ -0,0 +1,109 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps } from "../../primitives/ButtonBase.js";
+import { MenuProps } from "../menu/Menu.js";
+import { SplitButtonSize, SplitButtonVariant } from "./split-button-styles.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode, Ref } from "react";
+import { PressEvent } from "react-aria";
+//#region src/components/split-button/SplitButton.d.ts
+export interface SplitButtonClassNames {
+  /** The group holding both buttons; merged with `className`. */
+  root?: string;
+  /** The leading (main action) button. */
+  leading?: string;
+  /** Inner wrapper of the leading button, around its icon and label. */
+  content?: string;
+  /** The leading button's label text. */
+  label?: string;
+  /** The leading button's icon. */
+  icon?: string;
+  /** The trailing (menu) button. */
+  trailing?: string;
+  /** Inner wrapper of the trailing button, around its icon. */
+  trailingContent?: string;
+  /** The trailing button's chevron, which turns while the menu is open. */
+  menuIcon?: string;
+}
+/** Words a {@link SplitButton} announces. */
+export interface SplitButtonLabels {
+  /**
+   * The trailing button's name; name it for what the menu holds ("More send options").
+   * @default "More options"
+   */
+  menu: string;
+}
+interface SplitButtonOwnProps {
+  /** The M3 style of both buttons: filled, tonal, outlined or elevated. @default "filled" */
+  variant?: SplitButtonVariant;
+  /** Height, padding and label size of both buttons, from extra small to extra large. @default "sm" */
+  size?: SplitButtonSize;
+  /** Icon before the label, or on its own with `leadingLabel`. Hidden from assistive tech. */
+  leadingIcon?: ReactElement;
+  /** Words the split button announces, with English defaults. */
+  labels?: Partial<SplitButtonLabels>;
+  /**
+   * The `<Menu>` the trailing button opens, 4px below it and aligned with its end edge
+   * unless the menu sets its own `placement` or `offset`. Leave it out to open something
+   * else: the trailing button then takes an enclosing trigger (a `DialogTrigger`, a
+   * `RichTooltipTrigger`, …), or reports presses through `onTrailingPress` and `onOpenChange`.
+   */
+  menu?: ReactElement<MenuProps>;
+  /** Called when the trailing button is pressed. Without a menu or trigger it also toggles `open`. */
+  onTrailingPress?: (event: PressEvent) => void;
+  /** Ref to the trailing button, e.g. to anchor a custom overlay to it. */
+  trailingRef?: Ref<HTMLButtonElement>;
+  /** Whether the trailing button's menu or overlay is open (controlled). */
+  open?: boolean;
+  /** Whether the menu starts open (uncontrolled). @default false */
+  defaultOpen?: boolean;
+  /** Called with the new state when the menu or overlay opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Disables both buttons. @default false */
+  disabled?: boolean;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: SplitButtonClassNames;
+}
+/** The leading button shows a label, an icon and a label, or an icon alone. */
+type LeadingContent = {
+  /** The leading button's label. */
+  children: ReactNode;
+  leadingLabel?: undefined;
+} | {
+  children?: undefined;
+  leadingIcon: ReactElement;
+  /** Accessible name of an icon-only leading button. */
+  leadingLabel: string;
+};
+/** The leading button's own attributes; the rest of the DOM props go to the wrapper. */
+interface LeadingActionProps extends Pick<ButtonBaseActionProps, 'onPress' | 'onPressStart' | 'onPressEnd'> {
+  /** The leading button's `type`, e.g. `submit` to send the form it's in. @default "button" */
+  type?: ButtonBaseActionProps['type'];
+}
+interface LeadingLinkProps extends Pick<ButtonBaseLinkProps, 'onPress'> {
+  /** Makes the leading button a link (`<a>`) to this URL. */
+  href: string;
+  /** The leading link's `target`, e.g. `_blank`. */
+  target?: ButtonBaseLinkProps['target'];
+  /** The leading link's `rel`, e.g. `noopener`. */
+  rel?: ButtonBaseLinkProps['rel'];
+}
+type LeadingProps = LeadingActionProps | LeadingLinkProps;
+export type SplitButtonProps = SplitButtonOwnProps & LeadingContent & LeadingProps & Omit<ComponentPropsWithRef<'div'>, keyof SplitButtonOwnProps | 'children' | 'leadingLabel' | 'onPress' | 'onPressStart' | 'onPressEnd' | 'type'>;
+/**
+ * M3 Expressive split button: a leading action and a trailing button that opens a menu
+ * of related actions (or another overlay). Five sizes (`xs`–`xl`) in the filled, tonal,
+ * outlined and elevated styles. While the menu is open the trailing button becomes round
+ * and its chevron turns over. The wrapper is a `group`; `className`, `style`, `data-*` and
+ * `aria-*` go on it, and leading-button props (`onPress`, `href`, …) go to the leading button.
+ *
+ * @example
+ * <SplitButton
+ *   leadingIcon={<SendIcon />}
+ *   onPress={send}
+ *   labels={{ menu: 'More send options' }}
+ *   menu={<Menu onAction={schedule}><MenuItem key="later">Send later</MenuItem></Menu>}
+ * >
+ *   Send
+ * </SplitButton>
+ */
+export declare function SplitButton(props: SplitButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SplitButton.d.ts.map

package/dist/components/split-button/SplitButton.js

@@ -0,0 +1,195 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TriggerContext } from "../../primitives/TriggerContext.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { MenuTrigger } from "../menu/menu-trigger.js";
+import { splitButtonStyles } from "./split-button-styles.js";
+import { cloneElement, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/split-button/SplitButton.tsx
+/** Material Symbols "keyboard_arrow_down" (Apache-2.0). */
+function ArrowDownIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" })
+	});
+}
+const DEFAULT_LABELS = { menu: "More options" };
+/**
+* M3 Expressive split button: a leading action and a trailing button that opens a menu
+* of related actions (or another overlay). Five sizes (`xs`–`xl`) in the filled, tonal,
+* outlined and elevated styles. While the menu is open the trailing button becomes round
+* and its chevron turns over. The wrapper is a `group`; `className`, `style`, `data-*` and
+* `aria-*` go on it, and leading-button props (`onPress`, `href`, …) go to the leading button.
+*
+* @example
+* <SplitButton
+*   leadingIcon={<SendIcon />}
+*   onPress={send}
+*   labels={{ menu: 'More send options' }}
+*   menu={<Menu onAction={schedule}><MenuItem key="later">Send later</MenuItem></Menu>}
+* >
+*   Send
+* </SplitButton>
+*/
+function SplitButton(props) {
+	const { variant = "filled", size = "sm", children, leadingIcon, leadingLabel, labels, menu, onTrailingPress, trailingRef, open, defaultOpen, onOpenChange, disabled, classNames, className, onPress, ...rest } = props;
+	const { href, target, rel, type, onPressStart, onPressEnd, ...root } = rest;
+	const outerTrigger = useContext(TriggerContext);
+	const [isOpen, setOpen] = useControlledState(open, defaultOpen ?? false, onOpenChange);
+	const styles = splitButtonStyles({
+		variant,
+		size
+	});
+	const hasTouchTarget = size === "xs" || size === "sm";
+	const halfTokens = {
+		"data-tokens": "md-comp-button",
+		"data-variant": variant
+	};
+	const leadingProps = {
+		...halfTokens,
+		"data-slot": "leading",
+		disabled,
+		onPress,
+		onPressStart,
+		onPressEnd,
+		"aria-label": leadingLabel,
+		className: styles.leading({ class: classNames?.leading }),
+		...href !== void 0 ? {
+			href,
+			target,
+			rel
+		} : { type }
+	};
+	const trailingProps = {
+		tokenAttributes: halfTokens,
+		label: labels?.menu ?? DEFAULT_LABELS.menu,
+		disabled,
+		hasTouchTarget,
+		buttonRef: trailingRef,
+		className: styles.trailing({ class: classNames?.trailing }),
+		contentClassName: styles.trailingContent({ class: classNames?.trailingContent }),
+		iconClassName: styles.menuIcon({ class: classNames?.menuIcon })
+	};
+	let trailing;
+	if (menu) trailing = /* @__PURE__ */ jsxs(MenuTrigger, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(OpenOnMouseRelease, { children: /* @__PURE__ */ jsx(TrailingButton, {
+			...trailingProps,
+			open: isOpen,
+			onPress: onTrailingPress
+		}) }), cloneElement(menu, {
+			placement: menu.props.placement ?? "bottom-end",
+			offset: menu.props.offset ?? 4,
+			containerPadding: menu.props.containerPadding ?? 0
+		})]
+	});
+	else if (outerTrigger) trailing = /* @__PURE__ */ jsx(TrailingButton, {
+		...trailingProps,
+		open: outerTrigger["aria-expanded"] === true,
+		onPress: onTrailingPress
+	});
+	else trailing = /* @__PURE__ */ jsx(TrailingButton, {
+		...trailingProps,
+		open: isOpen,
+		"aria-expanded": isOpen,
+		onPress: (event) => {
+			setOpen(!isOpen);
+			onTrailingPress?.(event);
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		...root,
+		"data-tokens": mergeDataTokens("md-comp-split-button", root),
+		"data-variant": variant,
+		"data-size": size,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(ButtonBase, {
+				...leadingProps,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: styles.content({ class: classNames?.content }),
+					children: [
+						hasTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
+						leadingIcon && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: styles.icon({ class: classNames?.icon }),
+							children: leadingIcon
+						}),
+						children != null && /* @__PURE__ */ jsx("span", {
+							className: styles.label({ class: classNames?.label }),
+							children
+						})
+					]
+				})
+			})
+		}), trailing]
+	});
+}
+/**
+* A menu trigger opens on pointer down for a mouse (React Aria, like native menus). The
+* split button opens it on release instead, so the trailing button's pressed shape shows
+* while it's held, as the spec draws it ("Pressed" before "Selected"; 2026-10-13). A
+* release outside the button doesn't open it. Keyboard and touch are unchanged.
+*/
+function OpenOnMouseRelease({ children }) {
+	const trigger = useContext(TriggerContext);
+	const value = useMemo(() => {
+		if (!trigger) return null;
+		const { onPressStart, onPress } = trigger;
+		return {
+			...trigger,
+			onPressStart: (event) => {
+				if (event.pointerType !== "mouse") onPressStart?.(event);
+			},
+			onPress: (event) => {
+				if (event.pointerType === "mouse") {
+					event.target.closest("button")?.focus({ preventScroll: true });
+					onPressStart?.(event);
+				}
+				onPress?.(event);
+			}
+		};
+	}, [trigger]);
+	return /* @__PURE__ */ jsx(TriggerContext, {
+		value,
+		children
+	});
+}
+/**
+* The trailing button. An enclosing trigger (the menu's or another overlay's) adds its
+* press handler and `aria-expanded` through `TriggerContext`.
+*/
+function TrailingButton({ tokenAttributes, label, open, disabled, hasTouchTarget, buttonRef, onPress, "aria-expanded": ariaExpanded, className, contentClassName, iconClassName }) {
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...tokenAttributes,
+		"data-slot": "trailing",
+		ref: buttonRef,
+		"aria-label": label,
+		"aria-expanded": ariaExpanded,
+		"data-open": open || void 0,
+		disabled,
+		onPress,
+		className,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: contentClassName,
+			children: [hasTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-motion": "standard",
+				className: iconClassName,
+				children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+			})]
+		})
+	});
+}
+//#endregion
+export { SplitButton };
+
+//# sourceMappingURL=SplitButton.js.map

package/dist/components/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","names":[],"sources":["../../../src/components/split-button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport {\n  cloneElement,\n  useContext,\n  useMemo,\n  type ComponentPropsWithRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport type { PressEvent } from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n} from '../../primitives/ButtonBase';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { TriggerContext, type TriggerContextValue } from '../../primitives/TriggerContext';\nimport { cn } from '../../utils/cn';\nimport type { MenuProps } from '../menu/Menu';\nimport { MenuTrigger } from '../menu/menu-trigger';\nimport {\n  splitButtonStyles,\n  type SplitButtonSize,\n  type SplitButtonVariant,\n} from './split-button-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** Material Symbols \"keyboard_arrow_down\" (Apache-2.0). */\nfunction ArrowDownIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\" />\n    </svg>\n  );\n}\n\nexport interface SplitButtonClassNames {\n  /** The group holding both buttons; merged with `className`. */\n  root?: string;\n  /** The leading (main action) button. */\n  leading?: string;\n  /** Inner wrapper of the leading button, around its icon and label. */\n  content?: string;\n  /** The leading button's label text. */\n  label?: string;\n  /** The leading button's icon. */\n  icon?: string;\n  /** The trailing (menu) button. */\n  trailing?: string;\n  /** Inner wrapper of the trailing button, around its icon. */\n  trailingContent?: string;\n  /** The trailing button's chevron, which turns while the menu is open. */\n  menuIcon?: string;\n}\n\n/** Words a {@link SplitButton} announces. */\nexport interface SplitButtonLabels {\n  /**\n   * The trailing button's name; name it for what the menu holds (\"More send options\").\n   * @default \"More options\"\n   */\n  menu: string;\n}\n\nconst DEFAULT_LABELS: SplitButtonLabels = { menu: 'More options' };\n\ninterface SplitButtonOwnProps {\n  /** The M3 style of both buttons: filled, tonal, outlined or elevated. @default \"filled\" */\n  variant?: SplitButtonVariant;\n  /** Height, padding and label size of both buttons, from extra small to extra large. @default \"sm\" */\n  size?: SplitButtonSize;\n  /** Icon before the label, or on its own with `leadingLabel`. Hidden from assistive tech. */\n  leadingIcon?: ReactElement;\n  /** Words the split button announces, with English defaults. */\n  labels?: Partial<SplitButtonLabels>;\n  /**\n   * The `<Menu>` the trailing button opens, 4px below it and aligned with its end edge\n   * unless the menu sets its own `placement` or `offset`. Leave it out to open something\n   * else: the trailing button then takes an enclosing trigger (a `DialogTrigger`, a\n   * `RichTooltipTrigger`, …), or reports presses through `onTrailingPress` and `onOpenChange`.\n   */\n  menu?: ReactElement<MenuProps>;\n  /** Called when the trailing button is pressed. Without a menu or trigger it also toggles `open`. */\n  onTrailingPress?: (event: PressEvent) => void;\n  /** Ref to the trailing button, e.g. to anchor a custom overlay to it. */\n  trailingRef?: Ref<HTMLButtonElement>;\n  /** Whether the trailing button's menu or overlay is open (controlled). */\n  open?: boolean;\n  /** Whether the menu starts open (uncontrolled). @default false */\n  defaultOpen?: boolean;\n  /** Called with the new state when the menu or overlay opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Disables both buttons. @default false */\n  disabled?: boolean;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: SplitButtonClassNames;\n}\n\n/** The leading button shows a label, an icon and a label, or an icon alone. */\ntype LeadingContent =\n  | {\n      /** The leading button's label. */\n      children: ReactNode;\n      leadingLabel?: undefined;\n    }\n  | {\n      children?: undefined;\n      leadingIcon: ReactElement;\n      /** Accessible name of an icon-only leading button. */\n      leadingLabel: string;\n    };\n\n/** The leading button's own attributes; the rest of the DOM props go to the wrapper. */\ninterface LeadingActionProps extends Pick<\n  ButtonBaseActionProps,\n  'onPress' | 'onPressStart' | 'onPressEnd'\n> {\n  /** The leading button's `type`, e.g. `submit` to send the form it's in. @default \"button\" */\n  type?: ButtonBaseActionProps['type'];\n}\n\ninterface LeadingLinkProps extends Pick<ButtonBaseLinkProps, 'onPress'> {\n  /** Makes the leading button a link (`<a>`) to this URL. */\n  href: string;\n  /** The leading link's `target`, e.g. `_blank`. */\n  target?: ButtonBaseLinkProps['target'];\n  /** The leading link's `rel`, e.g. `noopener`. */\n  rel?: ButtonBaseLinkProps['rel'];\n}\n\ntype LeadingProps = LeadingActionProps | LeadingLinkProps;\n\nexport type SplitButtonProps = SplitButtonOwnProps &\n  LeadingContent &\n  LeadingProps &\n  Omit<\n    ComponentPropsWithRef<'div'>,\n    | keyof SplitButtonOwnProps\n    | 'children'\n    | 'leadingLabel'\n    | 'onPress'\n    | 'onPressStart'\n    | 'onPressEnd'\n    | 'type'\n  >;\n\n/**\n * M3 Expressive split button: a leading action and a trailing button that opens a menu\n * of related actions (or another overlay). Five sizes (`xs`–`xl`) in the filled, tonal,\n * outlined and elevated styles. While the menu is open the trailing button becomes round\n * and its chevron turns over. The wrapper is a `group`; `className`, `style`, `data-*` and\n * `aria-*` go on it, and leading-button props (`onPress`, `href`, …) go to the leading button.\n *\n * @example\n * <SplitButton\n *   leadingIcon={<SendIcon />}\n *   onPress={send}\n *   labels={{ menu: 'More send options' }}\n *   menu={<Menu onAction={schedule}><MenuItem key=\"later\">Send later</MenuItem></Menu>}\n * >\n *   Send\n * </SplitButton>\n */\nexport function SplitButton(props: SplitButtonProps) {\n  const {\n    variant = 'filled',\n    size = 'sm',\n    children,\n    leadingIcon,\n    leadingLabel,\n    labels,\n    menu,\n    onTrailingPress,\n    trailingRef,\n    open,\n    defaultOpen,\n    onOpenChange,\n    disabled,\n    classNames,\n    className,\n    onPress,\n    ...rest\n  } = props;\n  const { href, target, rel, type, onPressStart, onPressEnd, ...root } = rest as typeof rest & {\n    href?: string;\n    target?: string;\n    rel?: string;\n    type?: ButtonBaseActionProps['type'];\n    onPressStart?: ButtonBaseActionProps['onPressStart'];\n    onPressEnd?: ButtonBaseActionProps['onPressEnd'];\n  };\n  const outerTrigger = useContext(TriggerContext);\n  const [isOpen, setOpen] = useControlledState(open, defaultOpen ?? false, onOpenChange);\n  const styles = splitButtonStyles({ variant, size });\n  const hasTouchTarget = size === 'xs' || size === 'sm';\n  // The halves are buttons: they read Button's colour tokens (button-tokens.ts).\n  const halfTokens = { 'data-tokens': 'md-comp-button', 'data-variant': variant };\n  const leadingAttributes = { ...halfTokens, 'data-slot': 'leading' };\n  const leadingProps = {\n    ...leadingAttributes,\n    disabled,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    'aria-label': leadingLabel,\n    className: styles.leading({ class: classNames?.leading }),\n    ...(href !== undefined ? { href, target, rel } : { type }),\n  } as ButtonBaseActionProps | ButtonBaseLinkProps;\n\n  const trailingProps = {\n    tokenAttributes: halfTokens,\n    label: labels?.menu ?? DEFAULT_LABELS.menu,\n    disabled,\n    hasTouchTarget,\n    buttonRef: trailingRef,\n    className: styles.trailing({ class: classNames?.trailing }),\n    contentClassName: styles.trailingContent({ class: classNames?.trailingContent }),\n    iconClassName: styles.menuIcon({ class: classNames?.menuIcon }),\n  };\n\n  let trailing: ReactNode;\n  if (menu) {\n    trailing = (\n      <MenuTrigger open={isOpen} onOpenChange={setOpen}>\n        <OpenOnMouseRelease>\n          <TrailingButton {...trailingProps} open={isOpen} onPress={onTrailingPress} />\n        </OpenOnMouseRelease>\n        {cloneElement(menu, {\n          placement: menu.props.placement ?? 'bottom-end',\n          offset: menu.props.offset ?? 4,\n          // Aligned with the trailing button even against the window's edge.\n          containerPadding: menu.props.containerPadding ?? 0,\n        })}\n      </MenuTrigger>\n    );\n  } else if (outerTrigger) {\n    // An enclosing trigger (dialog, sheet, rich tooltip) opens its overlay from here.\n    trailing = (\n      <TrailingButton\n        {...trailingProps}\n        open={outerTrigger['aria-expanded'] === true}\n        onPress={onTrailingPress}\n      />\n    );\n  } else {\n    trailing = (\n      <TrailingButton\n        {...trailingProps}\n        open={isOpen}\n        aria-expanded={isOpen}\n        onPress={(event) => {\n          setOpen(!isOpen);\n          onTrailingPress?.(event);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div\n      // A group of its two buttons, so assistive tech reads them together and an app may name\n      // it (`aria-label`, which ARIA prohibits on a generic `div`).\n      role=\"group\"\n      {...root}\n      // The component tokens' hooks (split-button-tokens.ts); `data-variant` and `data-size`\n      // are also public styling hooks for apps.\n      data-tokens={mergeDataTokens('md-comp-split-button', root)}\n      data-variant={variant}\n      data-size={size}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {/* The leading button must not pick up the trailing button's trigger props. */}\n      <TriggerContext value={null}>\n        <ButtonBase {...leadingProps}>\n          <span className={styles.content({ class: classNames?.content })}>\n            {hasTouchTarget && <TouchTarget />}\n            {leadingIcon && (\n              <span aria-hidden=\"true\" className={styles.icon({ class: classNames?.icon })}>\n                {leadingIcon}\n              </span>\n            )}\n            {children != null && (\n              <span className={styles.label({ class: classNames?.label })}>{children}</span>\n            )}\n          </span>\n        </ButtonBase>\n      </TriggerContext>\n      {trailing}\n    </div>\n  );\n}\n\n/**\n * A menu trigger opens on pointer down for a mouse (React Aria, like native menus). The\n * split button opens it on release instead, so the trailing button's pressed shape shows\n * while it's held, as the spec draws it (\"Pressed\" before \"Selected\"; 2026-10-13). A\n * release outside the button doesn't open it. Keyboard and touch are unchanged.\n */\nfunction OpenOnMouseRelease({ children }: { children: ReactNode }) {\n  const trigger = useContext(TriggerContext);\n  const value = useMemo<TriggerContextValue | null>(() => {\n    if (!trigger) return null;\n    const { onPressStart, onPress } = trigger;\n    return {\n      ...trigger,\n      onPressStart: (event) => {\n        if (event.pointerType !== 'mouse') onPressStart?.(event);\n      },\n      onPress: (event) => {\n        if (event.pointerType === 'mouse') {\n          // Focus the trigger first, so closing the menu returns focus to it.\n          (event.target as Element).closest<HTMLElement>('button')?.focus({ preventScroll: true });\n          onPressStart?.(event);\n        }\n        onPress?.(event);\n      },\n    };\n  }, [trigger]);\n  return <TriggerContext value={value}>{children}</TriggerContext>;\n}\n\ninterface TrailingButtonProps {\n  /** Button's token hooks: `data-tokens` and `data-variant`. */\n  tokenAttributes: { 'data-tokens': string; 'data-variant': string };\n  label: string;\n  open: boolean;\n  disabled?: boolean;\n  hasTouchTarget: boolean;\n  buttonRef?: Ref<HTMLButtonElement>;\n  onPress?: (event: PressEvent) => void;\n  'aria-expanded'?: boolean;\n  className: string;\n  contentClassName: string;\n  iconClassName: string;\n}\n\n/**\n * The trailing button. An enclosing trigger (the menu's or another overlay's) adds its\n * press handler and `aria-expanded` through `TriggerContext`.\n */\nfunction TrailingButton({\n  tokenAttributes,\n  label,\n  open,\n  disabled,\n  hasTouchTarget,\n  buttonRef,\n  onPress,\n  'aria-expanded': ariaExpanded,\n  className,\n  contentClassName,\n  iconClassName,\n}: TrailingButtonProps) {\n  return (\n    <ButtonBase\n      {...tokenAttributes}\n      data-slot=\"trailing\"\n      ref={buttonRef}\n      aria-label={label}\n      aria-expanded={ariaExpanded}\n      data-open={open || undefined}\n      disabled={disabled}\n      onPress={onPress}\n      className={className}\n    >\n      <span className={contentClassName}>\n        {hasTouchTarget && <TouchTarget />}\n        {/* M3: the trailing button always shows this icon, since it turns over when open. */}\n        <span aria-hidden=\"true\" data-motion=\"standard\" className={iconClassName}>\n          <ArrowDownIcon />\n        </span>\n      </span>\n    </ButtonBase>\n  );\n}\n"],"mappings":"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"}

package/dist/components/split-button/split-button-styles.d.ts

@@ -0,0 +1,214 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/split-button/split-button-styles.d.ts
+/** Variant definitions for {@link SplitButton}; extend them to add variants. */
+export declare const splitButtonStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    readonly filled: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly elevated: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly tonal: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly outlined: {
+      readonly leading: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+      readonly trailing: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    sm: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    md: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    lg: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    xl: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+  };
+}, {
+  root: string;
+  leading: string[];
+  content: string;
+  trailingContent: string;
+  label: string;
+  icon: string;
+  trailing: string[];
+  menuIcon: string[];
+}, undefined, {
+  variant: {
+    readonly filled: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly elevated: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly tonal: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly outlined: {
+      readonly leading: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+      readonly trailing: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    sm: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    md: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    lg: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    xl: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+  };
+}, {
+  root: string;
+  leading: string[];
+  content: string;
+  trailingContent: string;
+  label: string;
+  icon: string;
+  trailing: string[];
+  menuIcon: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    readonly filled: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly elevated: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly tonal: {
+      readonly leading: string;
+      readonly trailing: string;
+    };
+    readonly outlined: {
+      readonly leading: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+      readonly trailing: "[--m3-button-border:1px] border-(length:--m3-button-border) border-solid border-[color:var(--_md-comp-button-outline-color)] bg-[var(--_md-comp-button-container-color)] text-[color:var(--_md-comp-button-label-text-color)] shadow-[shadow:var(--_md-comp-button-container-elevation)] data-disabled:not-data-selected:border-outline-variant/10";
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    sm: {
+      root: string;
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    md: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    lg: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+    xl: {
+      leading: string[];
+      content: string;
+      icon: string;
+      trailing: string[];
+      menuIcon: string;
+    };
+  };
+}, {
+  root: string;
+  leading: string[];
+  content: string;
+  trailingContent: string;
+  label: string;
+  icon: string;
+  trailing: string[];
+  menuIcon: string[];
+}>>;
+/**
+ * The variants of {@link splitButtonStyles}, 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 SplitButtonStyleProps = VariantProps<typeof splitButtonStyles>;
+export type SplitButtonVariant = NonNullable<SplitButtonStyleProps['variant']>;
+export type SplitButtonSize = NonNullable<SplitButtonStyleProps['size']>;
+//#endregion
+//# sourceMappingURL=split-button-styles.d.ts.map