@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,142 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/tooltip/tooltip-styles.d.ts
+/** Variant definitions for {@link Tooltip}; extend them to add variants. */
+export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      positioner?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      caret?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      positioner?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      caret?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  caret: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      positioner?: import("tailwind-variants").ClassValue;
+      panel?: import("tailwind-variants").ClassValue;
+      caret?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  caret: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  caret: string[];
+}>>;
+/** Variant definitions for {@link RichTooltip}; extend them to add variants. */
+export declare const richTooltipStyles: import("tailwind-variants").TVReturnType<{
+  subhead: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+  action: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+}, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  title: string;
+  text: string;
+  actions: string;
+  caret: string[];
+}, undefined, {
+  subhead: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+  action: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+}, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  title: string;
+  text: string;
+  actions: string;
+  caret: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  subhead: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+  action: {
+    true: {
+      text: string;
+    };
+    false: {
+      panel: string;
+      root: string;
+    };
+  };
+}, {
+  positioner: string;
+  panel: string[];
+  /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+  root: string[];
+  title: string;
+  text: string;
+  actions: string;
+  caret: string[];
+}>>;
+/**
+ * The variants of {@link richTooltipStyles}, 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 RichTooltipStyleProps = VariantProps<typeof richTooltipStyles>;
+//#endregion
+//# sourceMappingURL=tooltip-styles.d.ts.map

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

@@ -0,0 +1,81 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tooltip/tooltip-styles.ts
+const motion = [
+	"opacity-100 [clip-path:inset(-16px)]",
+	"[transition-property:opacity,clip-path] motion-reduce:[transition-property:opacity]",
+	"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]",
+	"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]",
+	"starting:opacity-0 data-exiting:opacity-0",
+	"data-[placement=top]:starting:[clip-path:inset(100%_-16px_-16px_-16px)] data-[placement=top]:data-exiting:[clip-path:inset(100%_-16px_-16px_-16px)]",
+	"data-[placement=bottom]:starting:[clip-path:inset(-16px_-16px_100%_-16px)] data-[placement=bottom]:data-exiting:[clip-path:inset(-16px_-16px_100%_-16px)]",
+	"data-[placement=left]:starting:[clip-path:inset(-16px_-16px_-16px_100%)] data-[placement=left]:data-exiting:[clip-path:inset(-16px_-16px_-16px_100%)]",
+	"data-[placement=right]:starting:[clip-path:inset(-16px_100%_-16px_-16px)] data-[placement=right]:data-exiting:[clip-path:inset(-16px_100%_-16px_-16px)]"
+];
+const plainPanel = [
+	"relative min-h-[24px] w-max min-w-[40px] max-w-[200px] px-[8px] py-[4px]",
+	"rounded-[var(--_md-comp-plain-tooltip-container-shape)] bg-[var(--_md-comp-plain-tooltip-container-color)]",
+	"font-plain text-body-small text-[color:var(--_md-comp-plain-tooltip-supporting-text-color)]",
+	"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]",
+	...motion
+];
+const richPanel = [
+	"relative flex min-h-[24px] w-max min-w-[40px] max-w-[min(320px,100vw_-_16px)] flex-col px-[16px] outline-none",
+	"rounded-[var(--_md-comp-rich-tooltip-container-shape)] bg-[var(--_md-comp-rich-tooltip-container-color)]",
+	"font-plain text-[color:var(--_md-comp-rich-tooltip-supporting-text-color)]",
+	"shadow-[shadow:var(--_md-comp-rich-tooltip-container-elevation)]",
+	"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]",
+	...motion
+];
+/** Variant definitions for {@link Tooltip}; extend them to add variants. */
+const tooltipStyles = tv({ slots: {
+	positioner: "z-(--md-sys-z-tooltip)",
+	panel: plainPanel,
+	/** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+	root: plainPanel,
+	caret: [
+		"size-0 border-x-[8px] border-t-[8px] border-x-transparent",
+		"border-t-[color:var(--_md-comp-plain-tooltip-container-color)]",
+		"forced-colors:hidden"
+	]
+} });
+/** Variant definitions for {@link RichTooltip}; extend them to add variants. */
+const richTooltipStyles = tv({
+	slots: {
+		positioner: "z-(--md-sys-z-tooltip)",
+		panel: richPanel,
+		/** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */
+		root: richPanel,
+		title: "pt-[13px] text-title-small text-[color:var(--_md-comp-rich-tooltip-subhead-color)]",
+		text: "text-body-medium",
+		actions: "flex min-h-[36px] items-center pb-[8px]",
+		caret: [
+			"size-0 border-x-[8px] border-t-[8px] border-x-transparent",
+			"border-t-[color:var(--_md-comp-rich-tooltip-container-color)]",
+			"forced-colors:hidden"
+		]
+	},
+	variants: {
+		subhead: {
+			true: { text: "pt-[9px]" },
+			false: {
+				panel: "pt-[12px]",
+				root: "pt-[12px]"
+			}
+		},
+		action: {
+			true: { text: "pb-[16px]" },
+			false: {
+				panel: "pb-[8px]",
+				root: "pb-[8px]"
+			}
+		}
+	},
+	defaultVariants: {
+		subhead: false,
+		action: false
+	}
+});
+//#endregion
+export { richTooltipStyles, tooltipStyles };
+
+//# sourceMappingURL=tooltip-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../src/components/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Tooltip.kt, BasicTooltip.kt, Plain / RichTooltipTokens):\n *\n * - Plain: `inverse-surface`, `body-small` `inverse-on-surface`, 8px × 4px padding, at least\n *   40×24px, at most 200px wide, 4px corners, no elevation.\n * - Rich: `surface-container` at level 2, 12px corners, 16px side padding, at most 320px\n *   wide. Subhead `title-small` with its first baseline 28px from the top; supporting text\n *   `body-medium` (both `on-surface-variant`) with its first baseline 24px below the subhead.\n *   Without a subhead the text starts 12px down, and without an action it ends 8px from the\n *   bottom (the spec's 12 / 8px padding); with an action it has 16px under it, and the action\n *   row is at least 36px tall with 8px under it.\n * - Both take their natural width (`w-max`) up to the maximum, so React Aria measures it and\n *   shifts the box inside the 8px screen margin rather than squeezing it against the edge; a\n *   rich tooltip never gets wider than the window less those margins.\n * - Both sit 4px from the anchor. They expand along the axis facing the anchor (a clip-path\n *   reveal from the anchor's side) on the fast spatial spring while fading on fast effects:\n *   the spec avoids scale motion. The clip rests 16px outside the box, so the shadow and the\n *   optional 16×8px caret show. Reduced motion keeps only the fade.\n *\n * The colours, corners and the rich tooltip's shadow come from the component tokens\n * (`tooltip-tokens.ts`, `--md-comp-plain-tooltip-*` and `--md-comp-rich-tooltip-*`); each\n * surface carries its set's `data-tokens`, and the parts read one private variable each. A\n * consumer class (`bg-primary`) still wins; a caret keeps the token colour unless\n * `classNames.caret` sets its own.\n *\n * Each tooltip is two boxes: a `positioner`, the outermost element, which React Aria places\n * (its inline `position`, `top` / `left` or `bottom` / `right`) and which takes the consumer's\n * `className`; and the `panel` inside it, the visible surface. A consumer inset (`bottom-4`)\n * would combine with React Aria's and stretch the positioner, so the positioner's\n * `data-overlay-placement` resets every inset React Aria leaves unset (styles/utilities.css);\n * the panel keeps its natural size either way. The panel is `relative` so the caret follows it.\n * The `root` slot is a deprecated alias of `panel` (the slot's earlier name), with exactly\n * its classes, kept for one release.\n *\n * Baselines are converted to padding from Roboto Flex metrics (the 20px line puts the\n * baseline ~15px down): subhead 13px, text 9px. Every class is written out in full so\n * Tailwind can find it.\n */\n\nconst motion = [\n  'opacity-100 [clip-path:inset(-16px)]',\n  '[transition-property:opacity,clip-path] motion-reduce:[transition-property:opacity]',\n  '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]',\n  'starting:opacity-0 data-exiting:opacity-0',\n  // Expand from the anchor's side, along one axis.\n  'data-[placement=top]:starting:[clip-path:inset(100%_-16px_-16px_-16px)] data-[placement=top]:data-exiting:[clip-path:inset(100%_-16px_-16px_-16px)]',\n  'data-[placement=bottom]:starting:[clip-path:inset(-16px_-16px_100%_-16px)] data-[placement=bottom]:data-exiting:[clip-path:inset(-16px_-16px_100%_-16px)]',\n  'data-[placement=left]:starting:[clip-path:inset(-16px_-16px_-16px_100%)] data-[placement=left]:data-exiting:[clip-path:inset(-16px_-16px_-16px_100%)]',\n  'data-[placement=right]:starting:[clip-path:inset(-16px_100%_-16px_-16px)] data-[placement=right]:data-exiting:[clip-path:inset(-16px_100%_-16px_-16px)]',\n];\n\nconst plainPanel = [\n  'relative min-h-[24px] w-max min-w-[40px] max-w-[200px] px-[8px] py-[4px]',\n  'rounded-[var(--_md-comp-plain-tooltip-container-shape)] bg-[var(--_md-comp-plain-tooltip-container-color)]',\n  'font-plain text-body-small text-[color:var(--_md-comp-plain-tooltip-supporting-text-color)]',\n  'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n  ...motion,\n];\n\nconst richPanel = [\n  'relative flex min-h-[24px] w-max min-w-[40px] max-w-[min(320px,100vw_-_16px)] flex-col px-[16px] outline-none',\n  'rounded-[var(--_md-comp-rich-tooltip-container-shape)] bg-[var(--_md-comp-rich-tooltip-container-color)]',\n  'font-plain text-[color:var(--_md-comp-rich-tooltip-supporting-text-color)]',\n  'shadow-[shadow:var(--_md-comp-rich-tooltip-container-elevation)]',\n  'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n  ...motion,\n];\n\n/** Variant definitions for {@link Tooltip}; extend them to add variants. */\nexport const tooltipStyles = tv({\n  slots: {\n    positioner: 'z-(--md-sys-z-tooltip)',\n    panel: plainPanel,\n    /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */\n    root: plainPanel,\n    caret: [\n      'size-0 border-x-[8px] border-t-[8px] border-x-transparent',\n      'border-t-[color:var(--_md-comp-plain-tooltip-container-color)]',\n      // Forced colours paint the transparent side borders too, turning the caret into a bar.\n      'forced-colors:hidden',\n    ],\n  },\n});\n\n/** Variant definitions for {@link RichTooltip}; extend them to add variants. */\nexport const richTooltipStyles = tv({\n  slots: {\n    positioner: 'z-(--md-sys-z-tooltip)',\n    panel: richPanel,\n    /** @deprecated Use `panel`; kept for one release. The same classes as `panel`. */\n    root: richPanel,\n    title: 'pt-[13px] text-title-small text-[color:var(--_md-comp-rich-tooltip-subhead-color)]',\n    text: 'text-body-medium',\n    actions: 'flex min-h-[36px] items-center pb-[8px]',\n    caret: [\n      'size-0 border-x-[8px] border-t-[8px] border-x-transparent',\n      'border-t-[color:var(--_md-comp-rich-tooltip-container-color)]',\n      // Forced colours paint the transparent side borders too, turning the caret into a bar.\n      'forced-colors:hidden',\n    ],\n  },\n  variants: {\n    subhead: {\n      // The text's first baseline 24px below the subhead's.\n      true: { text: 'pt-[9px]' },\n      false: { panel: 'pt-[12px]', root: 'pt-[12px]' },\n    },\n    action: {\n      true: { text: 'pb-[16px]' },\n      false: { panel: 'pb-[8px]', root: 'pb-[8px]' },\n    },\n  },\n  defaultVariants: { subhead: false, action: false },\n});\n\n/**\n * The variants of {@link richTooltipStyles}, 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 RichTooltipStyleProps = VariantProps<typeof richTooltipStyles>;\n"],"mappings":";;AAyCA,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;AACF;AAEA,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA,GAAG;AACL;AAEA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA,GAAG;AACL;;AAGA,MAAa,gBAAgB,GAAG,EAC9B,OAAO;CACL,YAAY;CACZ,OAAO;;CAEP,MAAM;CACN,OAAO;EACL;EACA;EAEA;CACF;AACF,EACF,CAAC;;AAGD,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,YAAY;EACZ,OAAO;;EAEP,MAAM;EACN,OAAO;EACP,MAAM;EACN,SAAS;EACT,OAAO;GACL;GACA;GAEA;EACF;CACF;CACA,UAAU;EACR,SAAS;GAEP,MAAM,EAAE,MAAM,WAAW;GACzB,OAAO;IAAE,OAAO;IAAa,MAAM;GAAY;EACjD;EACA,QAAQ;GACN,MAAM,EAAE,MAAM,YAAY;GAC1B,OAAO;IAAE,OAAO;IAAY,MAAM;GAAW;EAC/C;CACF;CACA,iBAAiB;EAAE,SAAS;EAAO,QAAQ;CAAM;AACnD,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/tooltip/tooltip-tokens.d.ts
+/** The tokens of {@link Tooltip}: `--md-comp-plain-tooltip-<part>`. */
+export declare const plainTooltipTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "supporting-text-color">;
+/** The tokens of {@link RichTooltip}: `--md-comp-rich-tooltip-<part>`. */
+export declare const richTooltipTokenSet: ComponentTokenSet<"container-color" | "container-elevation" | "container-shape" | "supporting-text-color" | "subhead-color">;
+//#endregion
+//# sourceMappingURL=tooltip-tokens.d.ts.map

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

@@ -0,0 +1,72 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/tooltip/tooltip-tokens.ts
+/** The tokens of {@link Tooltip}: `--md-comp-plain-tooltip-<part>`. */
+const plainTooltipTokenSet = defineComponentTokens({
+	name: "md-comp-plain-tooltip",
+	tokens: {
+		"container-color": {
+			value: color("inverse-surface"),
+			description: "The container and its caret.",
+			compose: "PlainTooltipTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"container-shape": {
+			value: corner("extra-small"),
+			description: "The corners.",
+			compose: "PlainTooltipTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"supporting-text-color": {
+			value: color("inverse-on-surface"),
+			description: "The label.",
+			compose: "PlainTooltipTokens.SupportingTextColor",
+			paints: { property: "color" }
+		}
+	}
+});
+/** The tokens of {@link RichTooltip}: `--md-comp-rich-tooltip-<part>`. */
+const richTooltipTokenSet = defineComponentTokens({
+	name: "md-comp-rich-tooltip",
+	tokens: {
+		"container-color": {
+			value: color("surface-container"),
+			description: "The container and its caret.",
+			compose: "RichTooltipTokens.ContainerColor",
+			paints: { property: "background-color" }
+		},
+		"container-shape": {
+			value: corner("medium"),
+			description: "The corners.",
+			compose: "RichTooltipTokens.ContainerShape",
+			paints: { property: "border-top-left-radius" }
+		},
+		"container-elevation": {
+			value: elevation(2),
+			description: "The shadow.",
+			compose: "RichTooltipTokens.ContainerElevation",
+			paints: { property: "box-shadow" }
+		},
+		"subhead-color": {
+			value: color("on-surface-variant"),
+			description: "The subhead (`title`).",
+			compose: "RichTooltipTokens.SubheadColor",
+			paints: {
+				property: "color",
+				slot: "subhead"
+			}
+		},
+		"supporting-text-color": {
+			value: color("on-surface-variant"),
+			description: "The supporting text.",
+			compose: "RichTooltipTokens.SupportingTextColor",
+			paints: {
+				property: "color",
+				slot: "text"
+			}
+		}
+	}
+});
+//#endregion
+export { plainTooltipTokenSet, richTooltipTokenSet };
+
+//# sourceMappingURL=tooltip-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-tokens.js","names":[],"sources":["../../../src/components/tooltip/tooltip-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * The tooltips' component tokens, M3's `md.comp.plain-tooltip.*` and `md.comp.rich-tooltip.*`\n * names (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * PlainTooltipTokens and RichTooltipTokens defaults. Each tooltip's surface carries its set's\n * `data-tokens` (so they apply however the tooltip's module loads), and `tooltip-styles.ts`\n * reads one private variable per part; the caret takes the container colour. The rich\n * tooltip's action is a text button with its own tokens. Sizes and padding stay classes.\n */\n\n/** The tokens of {@link Tooltip}: `--md-comp-plain-tooltip-<part>`. */\nexport const plainTooltipTokenSet = defineComponentTokens({\n  name: 'md-comp-plain-tooltip',\n  tokens: {\n    'container-color': {\n      value: color('inverse-surface'),\n      description: 'The container and its caret.',\n      compose: 'PlainTooltipTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'container-shape': {\n      value: corner('extra-small'),\n      description: 'The corners.',\n      compose: 'PlainTooltipTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'supporting-text-color': {\n      value: color('inverse-on-surface'),\n      description: 'The label.',\n      compose: 'PlainTooltipTokens.SupportingTextColor',\n      paints: { property: 'color' },\n    },\n  },\n});\n\n/** The tokens of {@link RichTooltip}: `--md-comp-rich-tooltip-<part>`. */\nexport const richTooltipTokenSet = defineComponentTokens({\n  name: 'md-comp-rich-tooltip',\n  tokens: {\n    'container-color': {\n      value: color('surface-container'),\n      description: 'The container and its caret.',\n      compose: 'RichTooltipTokens.ContainerColor',\n      paints: { property: 'background-color' },\n    },\n    'container-shape': {\n      value: corner('medium'),\n      description: 'The corners.',\n      compose: 'RichTooltipTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius' },\n    },\n    'container-elevation': {\n      value: elevation(2),\n      description: 'The shadow.',\n      compose: 'RichTooltipTokens.ContainerElevation',\n      paints: { property: 'box-shadow' },\n    },\n    'subhead-color': {\n      value: color('on-surface-variant'),\n      description: 'The subhead (`title`).',\n      compose: 'RichTooltipTokens.SubheadColor',\n      paints: { property: 'color', slot: 'subhead' },\n    },\n    'supporting-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The supporting text.',\n      compose: 'RichTooltipTokens.SupportingTextColor',\n      paints: { property: 'color', slot: 'text' },\n    },\n  },\n});\n"],"mappings":";;;AAYA,MAAa,uBAAuB,sBAAsB;CACxD,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,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,QAAQ;EAC9B;CACF;AACF,CAAC;;AAGD,MAAa,sBAAsB,sBAAsB;CACvD,MAAM;CACN,QAAQ;EACN,mBAAmB;GACjB,OAAO,MAAM,mBAAmB;GAChC,aAAa;GACb,SAAS;GACT,QAAQ,EAAE,UAAU,mBAAmB;EACzC;EACA,mBAAmB;GACjB,OAAO,OAAO,QAAQ;GACtB,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,iBAAiB;GACf,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAU;EAC/C;EACA,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAO;EAC5C;CACF;AACF,CAAC"}

package/dist/components/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1,42 @@
+import { TooltipPlacement } from "./tooltip-placement.js";
+import { DOMAttributes, HTMLAttributes, ReactNode, RefObject } from "react";
+import { OverlayTriggerState } from "react-stately";
+//#region src/components/tooltip/tooltip-trigger.d.ts
+export interface TooltipTriggerProps {
+  /** The trigger (a library button or anything reading `TriggerContext`), then a `<Tooltip>`. */
+  children: ReactNode;
+  /** Milliseconds of hover before showing (Compose shows at once). @default 0 */
+  delay?: number;
+  /** Milliseconds before hiding after the pointer leaves or a touch lifts (the spec's 1.5s). @default 1500 */
+  closeDelay?: number;
+  /**
+   * Side of the anchor the tooltip prefers; it flips when there's no room. Inside a
+   * `TooltipPlacementContext`, the context's side is the default (`"bottom"` in app bars).
+   * @default "top", or "bottom" in app bars
+   */
+  placement?: TooltipPlacement;
+  /** Distance from the anchor in px: 4 for an anchor with a visual boundary, 8 for text. @default 4 */
+  offset?: number;
+  /** Never show the tooltip. @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 plain {@link Tooltip} while its trigger is hovered or keyboard-focused, or after a
+ * touch long press. The tooltip describes the trigger (`aria-describedby`), stays while the
+ * pointer is over it and for 1.5s after it leaves, and Escape hides it.
+ *
+ * @example
+ * <TooltipTrigger>
+ *   <IconButton icon={<StarIcon />} aria-label="Favourite" />
+ *   <Tooltip>Add to favourites</Tooltip>
+ * </TooltipTrigger>
+ */
+export declare function TooltipTrigger({ children, delay, closeDelay, placement: placementProp, offset, disabled, open, defaultOpen, onOpenChange }: TooltipTriggerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=tooltip-trigger.d.ts.map

package/dist/components/tooltip/tooltip-trigger.js

@@ -0,0 +1,115 @@
+"use client";
+import { TriggerContext, useTriggerProps } from "../../primitives/TriggerContext.js";
+import { TooltipPlacementContext } from "./tooltip-placement.js";
+import { Children, createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useLongPress, useTooltipTrigger } from "react-aria";
+import { useTooltipTriggerState } from "react-stately";
+/** "Both plain and rich tooltips disappear 1.5 seconds after navigating away." */
+const CLOSE_DELAY = 1500;
+/**
+* The spec's touch trigger: "tap and hold the element on mobile". A touch long press opens
+* the tooltip (without pressing the button), and it closes 1.5s after the finger lifts.
+*/
+function useTouchLongPress(open, close, isDisabled) {
+	const release = useRef(null);
+	useEffect(() => () => {
+		if (release.current) window.removeEventListener("pointerup", release.current);
+	}, []);
+	const { longPressProps } = useLongPress({
+		isDisabled,
+		pointerType: "touch",
+		onLongPress: () => {
+			open();
+			if (release.current) window.removeEventListener("pointerup", release.current);
+			const onRelease = () => {
+				release.current = null;
+				close();
+			};
+			release.current = onRelease;
+			window.addEventListener("pointerup", onRelease, { once: true });
+		}
+	});
+	return { onPointerDown: longPressProps.onPointerDown };
+}
+const TooltipContext = createContext(null);
+/**
+* Shows a plain {@link Tooltip} while its trigger is hovered or keyboard-focused, or after a
+* touch long press. The tooltip describes the trigger (`aria-describedby`), stays while the
+* pointer is over it and for 1.5s after it leaves, and Escape hides it.
+*
+* @example
+* <TooltipTrigger>
+*   <IconButton icon={<StarIcon />} aria-label="Favourite" />
+*   <Tooltip>Add to favourites</Tooltip>
+* </TooltipTrigger>
+*/
+function TooltipTrigger({ children, delay = 0, closeDelay = CLOSE_DELAY, placement: placementProp, offset = 4, disabled, open, defaultOpen, onOpenChange }) {
+	const contextPlacement = useContext(TooltipPlacementContext);
+	const placement = placementProp ?? contextPlacement ?? "top";
+	const options = {
+		delay,
+		closeDelay,
+		isDisabled: disabled,
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	};
+	const state = useTooltipTriggerState(options);
+	const triggerRef = useRef(null);
+	const { triggerProps, tooltipProps } = useTooltipTrigger(options, state, triggerRef);
+	const longPressProps = useTouchLongPress(() => state.open(true), () => state.close(), disabled);
+	const triggerValue = useTriggerProps({
+		...mergeProps(triggerProps, longPressProps),
+		ref: triggerRef
+	});
+	const [trigger, ...tooltip] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(TooltipContext, {
+		value: {
+			state,
+			triggerRef,
+			tooltipProps,
+			placement,
+			offset
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), tooltip]
+	});
+}
+const RichContext = createContext(null);
+/**
+* Whether the caller is inside a `TooltipTrigger` or `RichTooltipTrigger`, so its trigger
+* already has a tooltip. Icon buttons, which show their label as a tooltip by default, use
+* it to step aside for a tooltip the app wrapped them in.
+*/
+function useInTooltipTrigger() {
+	const plain = useContext(TooltipContext);
+	const rich = useContext(RichContext);
+	return plain !== null || rich !== null;
+}
+/**
+* For a built-in tooltip that repeats its trigger's accessible name (an icon button's or a
+* FAB's label): the tooltip isn't linked as a description, or screen readers would announce
+* the name twice ("Search, button, Search"). The tooltip still shows; only the enclosing
+* trigger's `aria-describedby` is dropped (2026-10-13; FABs 2026-10-15). A tooltip that
+* says something else than the name keeps describing its trigger.
+*/
+function WithoutDescription({ children }) {
+	const trigger = useContext(TriggerContext);
+	const value = useMemo(() => {
+		if (!trigger) return null;
+		const own = { ...trigger };
+		delete own["aria-describedby"];
+		return own;
+	}, [trigger]);
+	return /* @__PURE__ */ jsx(TriggerContext, {
+		value,
+		children
+	});
+}
+//#endregion
+export { CLOSE_DELAY, RichContext, TooltipContext, TooltipTrigger, WithoutDescription, useInTooltipTrigger, useTouchLongPress };
+
+//# sourceMappingURL=tooltip-trigger.js.map

package/dist/components/tooltip/tooltip-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.js","names":[],"sources":["../../../src/components/tooltip/tooltip-trigger.tsx"],"sourcesContent":["'use client';\n\n/*\n * The trigger side of the tooltips: the state, the trigger's props and the contexts the\n * tooltips read. It holds none of the tooltip's own rendering (positioning, the overlay, the\n * motion), so components that show a tooltip only on hover or focus (`IconButton`, `Fab`,\n * `Toolbar`'s FAB, the pickers) import this and load the tooltip itself on demand\n * (`LazyTooltip`).\n */\n\nimport {\n  Children,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type DOMAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { mergeProps, useLongPress, useTooltipTrigger } from 'react-aria';\nimport {\n  useTooltipTriggerState,\n  type OverlayTriggerState,\n  type TooltipTriggerState,\n} from 'react-stately';\nimport {\n  TriggerContext,\n  useTriggerProps,\n  type TriggerContextValue,\n} from '../../primitives/TriggerContext';\nimport { TooltipPlacementContext, type TooltipPlacement } from './tooltip-placement';\n\n/**\n * The spec: 4px from an anchor with a visual boundary (a button), 8px from one without (text).\n * A caret (8px) sits in the gap.\n */\nexport const DEFAULT_OFFSET = 4;\n\n/** \"Both plain and rich tooltips disappear 1.5 seconds after navigating away.\" */\nexport const CLOSE_DELAY = 1500;\n\n/**\n * The spec's touch trigger: \"tap and hold the element on mobile\". A touch long press opens\n * the tooltip (without pressing the button), and it closes 1.5s after the finger lifts.\n */\nexport function useTouchLongPress(\n  open: () => void,\n  close: () => void,\n  isDisabled: boolean | undefined,\n): DOMAttributes<HTMLElement> {\n  const release = useRef<(() => void) | null>(null);\n  useEffect(\n    () => () => {\n      if (release.current) window.removeEventListener('pointerup', release.current);\n    },\n    [],\n  );\n  const { longPressProps } = useLongPress({\n    isDisabled,\n    pointerType: 'touch',\n    onLongPress: () => {\n      open();\n      if (release.current) window.removeEventListener('pointerup', release.current);\n      const onRelease = () => {\n        release.current = null;\n        close();\n      };\n      release.current = onRelease;\n      window.addEventListener('pointerup', onRelease, { once: true });\n    },\n  });\n  // Only the pointer side: its keyboard handling would compete with the trigger's own.\n  return { onPointerDown: longPressProps.onPointerDown };\n}\n\n/* ------------------------------------------------------------------ Plain */\n\n/** What a `TooltipTrigger` gives its `Tooltip`. */\nexport interface TooltipContextValue {\n  state: TooltipTriggerState;\n  triggerRef: RefObject<HTMLElement | null>;\n  tooltipProps: HTMLAttributes<HTMLElement>;\n  placement: TooltipPlacement;\n  offset: number;\n}\n\nexport const TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport interface TooltipTriggerProps {\n  /** The trigger (a library button or anything reading `TriggerContext`), then a `<Tooltip>`. */\n  children: ReactNode;\n  /** Milliseconds of hover before showing (Compose shows at once). @default 0 */\n  delay?: number;\n  /** Milliseconds before hiding after the pointer leaves or a touch lifts (the spec's 1.5s). @default 1500 */\n  closeDelay?: number;\n  /**\n   * Side of the anchor the tooltip prefers; it flips when there's no room. Inside a\n   * `TooltipPlacementContext`, the context's side is the default (`\"bottom\"` in app bars).\n   * @default \"top\", or \"bottom\" in app bars\n   */\n  placement?: TooltipPlacement;\n  /** Distance from the anchor in px: 4 for an anchor with a visual boundary, 8 for text. @default 4 */\n  offset?: number;\n  /** Never show the tooltip. @default false */\n  disabled?: boolean;\n  /** Whether the tooltip is shown (controlled). */\n  open?: boolean;\n  /** Whether the tooltip starts shown when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the tooltip shows or hides. */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Shows a plain {@link Tooltip} while its trigger is hovered or keyboard-focused, or after a\n * touch long press. The tooltip describes the trigger (`aria-describedby`), stays while the\n * pointer is over it and for 1.5s after it leaves, and Escape hides it.\n *\n * @example\n * <TooltipTrigger>\n *   <IconButton icon={<StarIcon />} aria-label=\"Favourite\" />\n *   <Tooltip>Add to favourites</Tooltip>\n * </TooltipTrigger>\n */\nexport function TooltipTrigger({\n  children,\n  delay = 0,\n  closeDelay = CLOSE_DELAY,\n  placement: placementProp,\n  offset = DEFAULT_OFFSET,\n  disabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n}: TooltipTriggerProps) {\n  const contextPlacement = useContext(TooltipPlacementContext);\n  const placement = placementProp ?? contextPlacement ?? 'top';\n  const options = {\n    delay,\n    closeDelay,\n    isDisabled: disabled,\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  };\n  const state = useTooltipTriggerState(options);\n  const triggerRef = useRef<HTMLElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(options, state, triggerRef);\n  const longPressProps = useTouchLongPress(\n    () => state.open(true),\n    () => state.close(),\n    disabled,\n  );\n  const triggerValue = useTriggerProps({\n    ...(mergeProps(triggerProps, longPressProps) as TriggerContextValue),\n    ref: triggerRef,\n  });\n  const [trigger, ...tooltip] = Children.toArray(children);\n  return (\n    <TooltipContext value={{ state, triggerRef, tooltipProps, placement, offset }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {tooltip}\n    </TooltipContext>\n  );\n}\n\n/* ------------------------------------------------------------------- Rich */\n\n/** What a `RichTooltipTrigger` gives its `RichTooltip`. */\nexport type RichContextValue = {\n  triggerRef: RefObject<HTMLElement | null>;\n  placement: TooltipPlacement;\n  offset: number;\n} & (\n  | { persistent: true; state: OverlayTriggerState; overlayProps: HTMLAttributes<HTMLElement> }\n  | { persistent: false; state: TooltipTriggerState; tooltipProps: HTMLAttributes<HTMLElement> }\n);\n\nexport const RichContext = createContext<RichContextValue | null>(null);\n\n/**\n * Whether the caller is inside a `TooltipTrigger` or `RichTooltipTrigger`, so its trigger\n * already has a tooltip. Icon buttons, which show their label as a tooltip by default, use\n * it to step aside for a tooltip the app wrapped them in.\n */\nexport function useInTooltipTrigger(): boolean {\n  const plain = useContext(TooltipContext);\n  const rich = useContext(RichContext);\n  return plain !== null || rich !== null;\n}\n\n/**\n * For a built-in tooltip that repeats its trigger's accessible name (an icon button's or a\n * FAB's label): the tooltip isn't linked as a description, or screen readers would announce\n * the name twice (\"Search, button, Search\"). The tooltip still shows; only the enclosing\n * trigger's `aria-describedby` is dropped (2026-10-13; FABs 2026-10-15). A tooltip that\n * says something else than the name keeps describing its trigger.\n */\nexport function WithoutDescription({ children }: { children: ReactNode }) {\n  const trigger = useContext(TriggerContext);\n  const value = useMemo(() => {\n    if (!trigger) return null;\n    const own: Record<string, unknown> = { ...trigger };\n    delete own['aria-describedby'];\n    return own as TriggerContextValue;\n  }, [trigger]);\n  return <TriggerContext value={value}>{children}</TriggerContext>;\n}\n"],"mappings":";;;;;;;;AA0CA,MAAa,cAAc;;;;;AAM3B,SAAgB,kBACd,MACA,OACA,YAC4B;CAC5B,MAAM,UAAU,OAA4B,IAAI;CAChD,sBACc;EACV,IAAI,QAAQ,SAAS,OAAO,oBAAoB,aAAa,QAAQ,OAAO;CAC9E,GACA,CAAC,CACH;CACA,MAAM,EAAE,mBAAmB,aAAa;EACtC;EACA,aAAa;EACb,mBAAmB;GACjB,KAAK;GACL,IAAI,QAAQ,SAAS,OAAO,oBAAoB,aAAa,QAAQ,OAAO;GAC5E,MAAM,kBAAkB;IACtB,QAAQ,UAAU;IAClB,MAAM;GACR;GACA,QAAQ,UAAU;GAClB,OAAO,iBAAiB,aAAa,WAAW,EAAE,MAAM,KAAK,CAAC;EAChE;CACF,CAAC;CAED,OAAO,EAAE,eAAe,eAAe,cAAc;AACvD;AAaA,MAAa,iBAAiB,cAA0C,IAAI;;;;;;;;;;;;AAsC5E,SAAgB,eAAe,EAC7B,UACA,QAAQ,GACR,aAAa,aACb,WAAW,eACX,SAAA,GACA,UACA,MACA,aACA,gBACsB;CACtB,MAAM,mBAAmB,WAAW,uBAAuB;CAC3D,MAAM,YAAY,iBAAiB,oBAAoB;CACvD,MAAM,UAAU;EACd;EACA;EACA,YAAY;EACZ,QAAQ;EACR;EACA;CACF;CACA,MAAM,QAAQ,uBAAuB,OAAO;CAC5C,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,EAAE,cAAc,iBAAiB,kBAAkB,SAAS,OAAO,UAAU;CACnF,MAAM,iBAAiB,wBACf,MAAM,KAAK,IAAI,SACf,MAAM,MAAM,GAClB,QACF;CACA,MAAM,eAAe,gBAAgB;EACnC,GAAI,WAAW,cAAc,cAAc;EAC3C,KAAK;CACP,CAAC;CACD,MAAM,CAAC,SAAS,GAAG,WAAW,SAAS,QAAQ,QAAQ;CACvD,OACE,qBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAO;GAAY;GAAc;GAAW;EAAO;EAA5E,UAAA,CACE,oBAAC,gBAAD;GAAgB,OAAO;GAAe,UAAA;EAAwB,CAAA,GAC7D,OACa;;AAEpB;AAcA,MAAa,cAAc,cAAuC,IAAI;;;;;;AAOtE,SAAgB,sBAA+B;CAC7C,MAAM,QAAQ,WAAW,cAAc;CACvC,MAAM,OAAO,WAAW,WAAW;CACnC,OAAO,UAAU,QAAQ,SAAS;AACpC;;;;;;;;AASA,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,MAAM,UAAU,WAAW,cAAc;CACzC,MAAM,QAAQ,cAAc;EAC1B,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,MAA+B,EAAE,GAAG,QAAQ;EAClD,OAAO,IAAI;EACX,OAAO;CACT,GAAG,CAAC,OAAO,CAAC;CACZ,OAAO,oBAAC,gBAAD;EAAuB;EAAQ;CAAyB,CAAA;AACjE"}

package/dist/composites/button-group/ButtonGroup.d.ts

@@ -0,0 +1,116 @@
+import { VariantProps } from "../../utils/tv.js";
+import { ButtonShape, ButtonSize, ButtonVariant } from "../../components/button/button-styles.js";
+import { buttonGroupStyles } from "./button-group-styles.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/composites/button-group/ButtonGroup.d.ts
+export type ButtonGroupVariant = NonNullable<VariantProps<typeof buttonGroupStyles>['variant']>;
+export type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
+/** Text the group adds for assistive tech and its tooltip; translate it for your locale. */
+export interface ButtonGroupLabels {
+  /** The overflow indicator's name and tooltip. @default "More options" */
+  more: string;
+}
+export interface ButtonGroupClassNames {
+  /** The group's outer element; `className` is merged here too. */
+  root?: string;
+  /** The overflow indicator, the "More options" icon button (`overflow`). */
+  overflowButton?: string;
+  /** The overflow indicator's menu of folded buttons (`overflow`). */
+  overflowMenu?: string;
+}
+export interface ButtonGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+  /**
+   * `standard` spaces the buttons apart (18 / 12 / 8px by size); `connected` joins them 2px
+   * apart with shared inner corners across the container's width (the M3 Expressive
+   * replacement for segmented buttons). A standard group grows a pressed button into its
+   * neighbours' space; a connected one only changes its shape unless `expandedRatio` is set.
+   * @default "standard"
+   */
+  variant?: ButtonGroupVariant;
+  /**
+   * Size shared by every button and icon button in the group; it also sets the spacing.
+   * Unset, the buttons keep their own (or an enclosing toolbar's) size.
+   * @default "sm"
+   */
+  size?: ButtonSize;
+  /**
+   * Shape shared by the buttons. A `square` connected group gives its outer corners the
+   * size of its inner ones (4 / 8 / 8 / 16 / 20px). Unset, the buttons keep their own.
+   * @default "round"
+   */
+  shape?: ButtonShape;
+  /**
+   * Variant shared by every `Button` in the group. `filled`, `tonal` and `outlined` reach
+   * the `IconButton`s too, so a group never mixes colour styles; a button's own `variant`
+   * wins. Unset, the buttons keep their own.
+   * @default "filled"
+   */
+  buttonVariant?: ButtonVariant;
+  /** Disables every button in the group. @default false */
+  disabled?: boolean;
+  /**
+   * Lets toggle buttons with a `value` act as one selection. `single` behaves like
+   * radio buttons, `multiple` like checkboxes. @default "none"
+   */
+  selectionMode?: ButtonGroupSelectionMode;
+  /** Controlled selection: the `value`s of the selected toggle buttons. */
+  selectedKeys?: Iterable<string>;
+  /** Initial selection when uncontrolled. */
+  defaultSelectedKeys?: Iterable<string>;
+  /** Called with the selected toggle buttons' `value`s when the selection changes. */
+  onSelectionChange?: (keys: Set<string>) => void;
+  /**
+   * The last selected button can be deselected, leaving none. `false` keeps at least one
+   * selected. @default true
+   */
+  deselectable?: boolean;
+  /**
+   * How much a pressed button grows, as a fraction of its width; its neighbours shrink by the
+   * same amount and the group keeps its width. `0` turns it off. Standard groups default to
+   * 0.15. Connected groups default to 0 (the spec: they "don't affect adjacent buttons", as
+   * in Compose's connected sample); set a ratio to opt in, as Compose can by combining a
+   * button group's `animateWidth` with the connected shapes. Under reduced motion there's
+   * no bump. @default 0.15, or 0 when `variant` is "connected"
+   */
+  expandedRatio?: number;
+  /**
+   * Folds the trailing buttons that don't fit into a menu behind a trailing "More options"
+   * icon button (M3: "Buttons at the trailing edge of the button group can be customized to
+   * collapse into an overflow menu at smaller breakpoints"). The group then fills its
+   * container's width and re-measures as it resizes. Each folded button becomes a menu
+   * item with its label (an icon button's `aria-label`) and icon; disabled buttons stay
+   * disabled, and toggles show their selection. Choosing an item presses the button.
+   * @default false
+   */
+  overflow?: boolean;
+  /**
+   * Text for assistive tech, e.g. the overflow indicator's name.
+   * @default { more: "More options" }
+   */
+  labels?: Partial<ButtonGroupLabels>;
+  /** Classes for each part. `classNames.root` is merged with `className`. */
+  classNames?: ButtonGroupClassNames;
+  children?: ReactNode;
+}
+/**
+ * M3 Expressive button group. Shares size, shape, variant and disabled with its `Button`
+ * and `IconButton` children. A standard group grows a pressed button while its neighbours
+ * shrink; a `connected` group joins the buttons with shared inner corners and, by default,
+ * only changes the pressed button's shape (`expandedRatio` opts it into the bump). Tab reaches the group and the arrow keys move
+ * between its buttons, wrapping, with Home and End (a `toolbar`). With `selectionMode`, toggle
+ * buttons that have a `value` form a single or multiple selection; a single selection is a
+ * radio group, whose arrow keys select as they move.
+ *
+ * Children must be direct `Button` / `IconButton` elements so each gets its position.
+ *
+ * @example
+ * <ButtonGroup variant="connected" selectionMode="single" defaultSelectedKeys={['week']}
+ *   aria-label="Calendar view">
+ *   <Button toggle value="day">Day</Button>
+ *   <Button toggle value="week">Week</Button>
+ *   <Button toggle value="month">Month</Button>
+ * </ButtonGroup>
+ */
+export declare function ButtonGroup(props: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ButtonGroup.d.ts.map