@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/badge/Badge.js

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { badgeStyles, badgedBoxStyles } from "./badge-styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden, useNumberFormatter } from "react-aria";
+//#region src/components/badge/Badge.tsx
+/**
+* M3 badge: a small 6px dot, or a large 16px badge holding a count or a short label, in
+* `error` colours. Place it on an icon with {@link BadgedBox}. It is announced: a count is
+* read, a dot reads "New notification" (`labels`), and `label` replaces either.
+*
+* @example
+* <Badge />
+* <Badge>{3}</Badge>
+* <Badge max={99}>{120}</Badge> // "99+"
+*/
+function Badge({ children, max = 999, label, labels, classNames, className, ...rest }) {
+	const format = useNumberFormatter();
+	const size = children == null || children === false ? "small" : "large";
+	const overflow = typeof children === "string" && [...children].length > 4;
+	const styles = badgeStyles({
+		size,
+		overflow
+	});
+	const content = typeof children === "number" ? children > max ? `${format.format(max)}+` : format.format(children) : children;
+	const announcement = label ?? (size === "small" ? labels?.newNotification ?? "New notification" : null);
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-tokens": mergeDataTokens("md-comp-badge", rest),
+		"data-size": size,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [size === "large" && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": announcement != null || void 0,
+			dir: typeof children === "number" ? "ltr" : void 0,
+			className: styles.label({ class: classNames?.label }),
+			children: content
+		}), announcement != null && /* @__PURE__ */ jsx(VisuallyHidden, {
+			elementType: "span",
+			children: announcement
+		})]
+	});
+}
+/**
+* Places a badge at the top end of its anchor (Compose's `BadgedBox`), e.g. on an icon.
+* The badge's announcement is part of the text around it; an anchor named with its own
+* `aria-label` should say what the badge means.
+*
+* @example
+* <IconButton
+*   aria-label="Messages, 3 unread"
+*   icon={<BadgedBox badge={<Badge>{3}</Badge>}><MailIcon /></BadgedBox>}
+* />
+*/
+function BadgedBox({ badge, children, classNames, className, ...rest }) {
+	const styles = badgedBoxStyles();
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.anchor({ class: classNames?.anchor }),
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			className: styles.hang(),
+			children: badge
+		})]
+	});
+}
+//#endregion
+export { Badge, BadgedBox };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';\nimport { useNumberFormatter, VisuallyHidden } from 'react-aria';\nimport { cn } from '../../utils/cn';\nimport { badgedBoxStyles, badgeStyles } from './badge-styles';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\n/** Words a {@link Badge} announces. */\nexport interface BadgeLabels {\n  /** What a small badge (a dot) announces. @default \"New notification\" */\n  newNotification: string;\n}\n\nexport interface BadgeClassNames {\n  /** The badge itself: the dot, or the large badge's container. */\n  root?: string;\n  /** The large badge's text, which truncates at the badge's maximum width. */\n  label?: string;\n}\n\nexport interface BadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * A count or a short label (large badge); leave it out for the small dot. Numbers are\n   * formatted for the locale and capped at `max` (\"999+\"). M3 allows four characters,\n   * including the \"+\"; text badges stop at 34px wide and truncate longer text.\n   */\n  children?: ReactNode;\n  /** The highest count shown; larger counts show as `max` + \"+\". @default 999 */\n  max?: number;\n  /**\n   * What assistive tech reads instead of the visible content, e.g. \"3 unread messages\".\n   * Without it, a large badge reads its content and a small one `labels.newNotification`.\n   */\n  label?: string;\n  /** Words the badge announces, with English defaults. */\n  labels?: Partial<BadgeLabels>;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: BadgeClassNames;\n}\n\n/**\n * M3 badge: a small 6px dot, or a large 16px badge holding a count or a short label, in\n * `error` colours. Place it on an icon with {@link BadgedBox}. It is announced: a count is\n * read, a dot reads \"New notification\" (`labels`), and `label` replaces either.\n *\n * @example\n * <Badge />\n * <Badge>{3}</Badge>\n * <Badge max={99}>{120}</Badge> // \"99+\"\n */\nexport function Badge({\n  children,\n  max = 999,\n  label,\n  labels,\n  classNames,\n  className,\n  ...rest\n}: BadgeProps) {\n  const format = useNumberFormatter();\n  const size = children == null || children === false ? 'small' : 'large';\n  // M3's limit is four characters, \"+\" included; only longer text is cut.\n  const overflow = typeof children === 'string' && [...children].length > 4;\n  const styles = badgeStyles({ size, overflow });\n  const content =\n    typeof children === 'number'\n      ? children > max\n        ? `${format.format(max)}+`\n        : format.format(children)\n      : children;\n  const announcement =\n    label ?? (size === 'small' ? (labels?.newNotification ?? 'New notification') : null);\n  return (\n    <span\n      {...rest}\n      // The component tokens' hooks (badge-tokens.ts); `data-size` is also a public hook.\n      data-tokens={mergeDataTokens('md-comp-badge', rest)}\n      data-size={size}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {size === 'large' && (\n        <span\n          aria-hidden={announcement != null || undefined}\n          // A count reads left to right in every layout, so \"999+\" never shows as \"+999\".\n          dir={typeof children === 'number' ? 'ltr' : undefined}\n          className={styles.label({ class: classNames?.label })}\n        >\n          {content}\n        </span>\n      )}\n      {announcement != null && <VisuallyHidden elementType=\"span\">{announcement}</VisuallyHidden>}\n    </span>\n  );\n}\n\nexport interface BadgedBoxClassNames {\n  /** The wrapper that positions the badge over its anchor. */\n  root?: string;\n  /** The wrapper around the anchor (`children`). */\n  anchor?: string;\n}\n\nexport interface BadgedBoxProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /** The badge, a {@link Badge}. */\n  badge: ReactElement<BadgeProps>;\n  /** The anchor, usually an icon. */\n  children: ReactNode;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: BadgedBoxClassNames;\n}\n\n/**\n * Places a badge at the top end of its anchor (Compose's `BadgedBox`), e.g. on an icon.\n * The badge's announcement is part of the text around it; an anchor named with its own\n * `aria-label` should say what the badge means.\n *\n * @example\n * <IconButton\n *   aria-label=\"Messages, 3 unread\"\n *   icon={<BadgedBox badge={<Badge>{3}</Badge>}><MailIcon /></BadgedBox>}\n * />\n */\nexport function BadgedBox({ badge, children, classNames, className, ...rest }: BadgedBoxProps) {\n  // The placement follows the badge's own `data-size` in CSS, so a badge that arrives as a\n  // lazy server reference (no props yet) still hangs in the right place.\n  const styles = badgedBoxStyles();\n  return (\n    <span {...rest} className={styles.root({ class: cn(classNames?.root, className) })}>\n      <span className={styles.anchor({ class: classNames?.anchor })}>{children}</span>\n      <span className={styles.hang()}>{badge}</span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmDA,SAAgB,MAAM,EACpB,UACA,MAAM,KACN,OACA,QACA,YACA,WACA,GAAG,QACU;CACb,MAAM,SAAS,mBAAmB;CAClC,MAAM,OAAO,YAAY,QAAQ,aAAa,QAAQ,UAAU;CAEhE,MAAM,WAAW,OAAO,aAAa,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,SAAS;CACxE,MAAM,SAAS,YAAY;EAAE;EAAM;CAAS,CAAC;CAC7C,MAAM,UACJ,OAAO,aAAa,WAChB,WAAW,MACT,GAAG,OAAO,OAAO,GAAG,EAAE,KACtB,OAAO,OAAO,QAAQ,IACxB;CACN,MAAM,eACJ,UAAU,SAAS,UAAW,QAAQ,mBAAmB,qBAAsB;CACjF,OACE,qBAAC,QAAD;EACE,GAAI;EAEJ,eAAa,gBAAgB,iBAAiB,IAAI;EAClD,aAAW;EACX,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EALnE,UAAA,CAOG,SAAS,WACR,oBAAC,QAAD;GACE,eAAa,gBAAgB,QAAQ,KAAA;GAErC,KAAK,OAAO,aAAa,WAAW,QAAQ,KAAA;GAC5C,WAAW,OAAO,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAEnD,UAAA;EACG,CAAA,GAEP,gBAAgB,QAAQ,oBAAC,gBAAD;GAAgB,aAAY;GAAQ,UAAA;EAA6B,CAAA,CACtF;;AAEV;;;;;;;;;;;;AA6BA,SAAgB,UAAU,EAAE,OAAO,UAAU,YAAY,WAAW,GAAG,QAAwB;CAG7F,MAAM,SAAS,gBAAgB;CAC/B,OACE,qBAAC,QAAD;EAAM,GAAI;EAAM,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;EAAjF,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;GAAI;EAAe,CAAA,GAC/E,oBAAC,QAAD;GAAM,WAAW,OAAO,KAAK;GAAI,UAAA;EAAY,CAAA,CACzC;;AAEV"}

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

@@ -0,0 +1,100 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/badge/badge-styles.d.ts
+/** Variant definitions for {@link Badge}; extend them to add colour styles. */
+export declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    small: {
+      root: string;
+    };
+    large: {
+      root: string[];
+    };
+  };
+  /** Text longer than four characters stops at 34px (2.125rem) and truncates. */
+  overflow: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  label: string;
+}, undefined, {
+  size: {
+    small: {
+      root: string;
+    };
+    large: {
+      root: string[];
+    };
+  };
+  /** Text longer than four characters stops at 34px (2.125rem) and truncates. */
+  overflow: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    small: {
+      root: string;
+    };
+    large: {
+      root: string[];
+    };
+  };
+  /** Text longer than four characters stops at 34px (2.125rem) and truncates. */
+  overflow: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  label: string;
+}>>;
+/** Variant definitions for {@link BadgedBox}. */
+export declare const badgedBoxStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      anchor?: import("tailwind-variants").ClassValue;
+      hang?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      anchor?: import("tailwind-variants").ClassValue;
+      hang?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  anchor: string;
+  hang: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      anchor?: import("tailwind-variants").ClassValue;
+      hang?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  anchor: string;
+  hang: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  anchor: string;
+  hang: string[];
+}>>;
+/**
+ * The variants of {@link badgeStyles}, 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 BadgeStyleProps = VariantProps<typeof badgeStyles>;
+//#endregion
+//# sourceMappingURL=badge-styles.d.ts.map

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

@@ -0,0 +1,43 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/badge/badge-styles.ts
+/** Variant definitions for {@link Badge}; extend them to add colour styles. */
+const badgeStyles = tv({
+	slots: {
+		root: ["inline-flex shrink-0 items-center justify-center rounded-corner-full", "bg-[var(--_md-comp-badge-color)] text-[color:var(--_md-comp-badge-label-text-color)]"],
+		label: "min-w-0 truncate"
+	},
+	variants: {
+		size: {
+			small: { root: "size-[6px] forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none" },
+			large: { root: ["min-h-[1rem] min-w-[1rem] ps-[4px] pe-[4px] text-label-small whitespace-nowrap", "forced-colors:outline forced-colors:outline-1 forced-colors:outline-solid forced-colors:outline-[CanvasText]"] }
+		},
+		/** Text longer than four characters stops at 34px (2.125rem) and truncates. */
+		overflow: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		size: "large",
+		overflow: true,
+		class: { root: "max-w-[2.125rem]" }
+	}],
+	defaultVariants: {
+		size: "small",
+		overflow: false
+	}
+});
+/** Variant definitions for {@link BadgedBox}. */
+const badgedBoxStyles = tv({ slots: {
+	root: "inline-grid shrink-0 grid-cols-[100%] grid-rows-[100%] align-middle",
+	anchor: "col-start-1 row-start-1 flex items-center justify-center [&>svg]:size-[24px]",
+	hang: [
+		"col-start-1 row-start-1 flex size-0 items-end self-start justify-self-start",
+		"ms-[calc(100%-6px)] mt-[6px]",
+		"has-[[data-size=large]]:ms-[calc(100%-12px)] has-[[data-size=large]]:mt-[14px]"
+	]
+} });
+//#endregion
+export { badgeStyles, badgedBoxStyles };
+
+//# sourceMappingURL=badge-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-styles.js","names":[],"sources":["../../../src/components/badge/badge-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Badge.kt, BadgeTokens).\n *\n * Small badge: a 6px `error` dot. Large badge: at least 16px (1rem, so it grows with the\n * text), full corners, 4px side padding, `label-small` `on-error`. Counts are capped (\"999+\"). M3 allows up to four\n * characters, including \"+\", within \"16x34dp\": a label of four characters or fewer is never\n * cut (\"999+\" renders about a pixel wider than 34px), and only longer text stops at 34px and\n * truncates.\n *\n * Placement (BadgedBox): a small badge's start edge sits 6px inside the anchor's end and\n * its top on the anchor's top; a large badge starts 12px inside the end with its bottom\n * 14px below the anchor's top. The badge hangs from a zero-size box in the anchor's grid\n * cell (margin-inline-start: 100% − offset, flex-aligned to its bottom), so nothing is\n * positioned and the badge never changes the anchor's size; it mirrors in RTL.\n *\n * The colours come from the badge's component tokens (`badge-tokens.ts`,\n * `--md-comp-badge-color` and `--md-comp-badge-large-*`); the root carries\n * `data-tokens=\"md-comp-badge\"` and `data-size`, and the classes read one private variable per\n * part. A consumer class (`bg-primary`) still wins.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link Badge}; extend them to add colour styles. */\nexport const badgeStyles = tv({\n  slots: {\n    root: [\n      'inline-flex shrink-0 items-center justify-center rounded-corner-full',\n      'bg-[var(--_md-comp-badge-color)] text-[color:var(--_md-comp-badge-label-text-color)]',\n    ],\n    // Only text longer than M3's four characters is cut (see `overflow`).\n    label: 'min-w-0 truncate',\n  },\n  variants: {\n    size: {\n      // Forced colours drop backgrounds: the dot is drawn in `CanvasText`, and the large badge\n      // takes an outline round its digits.\n      small: {\n        root: 'size-[6px] forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none',\n      },\n      large: {\n        root: [\n          // In rem, as the label's 16px line height is (1rem): at a larger text size a digit stays\n          // a circle and the 34px limit grows with the text (2026-10-17).\n          'min-h-[1rem] min-w-[1rem] ps-[4px] pe-[4px] text-label-small whitespace-nowrap',\n          'forced-colors:outline forced-colors:outline-1 forced-colors:outline-solid forced-colors:outline-[CanvasText]',\n        ],\n      },\n    },\n    /** Text longer than four characters stops at 34px (2.125rem) and truncates. */\n    overflow: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [{ size: 'large', overflow: true, class: { root: 'max-w-[2.125rem]' } }],\n  defaultVariants: { size: 'small', overflow: false },\n});\n\n/** Variant definitions for {@link BadgedBox}. */\nexport const badgedBoxStyles = tv({\n  slots: {\n    root: 'inline-grid shrink-0 grid-cols-[100%] grid-rows-[100%] align-middle',\n    // A bare SVG anchor gets Compose's default 24px icon size; wrap other sizes.\n    anchor: 'col-start-1 row-start-1 flex items-center justify-center [&>svg]:size-[24px]',\n    // The zero-size box the badge hangs from; a large badge (its root's `data-size`) hangs\n    // further in and lower.\n    hang: [\n      'col-start-1 row-start-1 flex size-0 items-end self-start justify-self-start',\n      'ms-[calc(100%-6px)] mt-[6px]',\n      'has-[[data-size=large]]:ms-[calc(100%-12px)] has-[[data-size=large]]:mt-[14px]',\n    ],\n  },\n});\n\n/**\n * The variants of {@link badgeStyles}, 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 BadgeStyleProps = VariantProps<typeof badgeStyles>;\n"],"mappings":";;;AA0BA,MAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM,CACJ,wEACA,sFACF;EAEA,OAAO;CACT;CACA,UAAU;EACR,MAAM;GAGJ,OAAO,EACL,MAAM,kFACR;GACA,OAAO,EACL,MAAM,CAGJ,kFACA,8GACF,EACF;EACF;;EAEA,UAAU;GACR,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAAC;EAAE,MAAM;EAAS,UAAU;EAAM,OAAO,EAAE,MAAM,mBAAmB;CAAE,CAAC;CACzF,iBAAiB;EAAE,MAAM;EAAS,UAAU;CAAM;AACpD,CAAC;;AAGD,MAAa,kBAAkB,GAAG,EAChC,OAAO;CACL,MAAM;CAEN,QAAQ;CAGR,MAAM;EACJ;EACA;EACA;CACF;AACF,EACF,CAAC"}

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

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

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

@@ -0,0 +1,40 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/badge/badge-tokens.ts
+/** The tokens of {@link Badge}: `--md-comp-badge-<part>` and `--md-comp-badge-large-<part>`. */
+const badgeTokenSet = defineComponentTokens({
+	name: "md-comp-badge",
+	tokens: {},
+	scopes: { size: {
+		small: {
+			prefix: "md-comp-badge",
+			tokens: { color: {
+				value: color("error"),
+				description: "The small badge, a dot.",
+				compose: "BadgeTokens.Color",
+				paints: { property: "background-color" }
+			} },
+			fixed: { "label-text-color": color("on-error") }
+		},
+		large: {
+			prefix: "md-comp-badge-large",
+			tokens: {
+				color: {
+					value: color("error"),
+					description: "The large badge, holding a count or short text.",
+					compose: "BadgeTokens.LargeColor",
+					paints: { property: "background-color" }
+				},
+				"label-text-color": {
+					value: color("on-error"),
+					description: "The large badge's label.",
+					compose: "BadgeTokens.LargeLabelTextColor",
+					paints: { property: "color" }
+				}
+			}
+		}
+	} }
+});
+//#endregion
+export { badgeTokenSet };
+
+//# sourceMappingURL=badge-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-tokens.js","names":[],"sources":["../../../src/components/badge/badge-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * Badge's component tokens, M3's `md.comp.badge.*` names (checked against m3.material.io's\n * token tables, 2026-10-14), with Compose's BadgeTokens defaults. The badge's `data-size`\n * (`small`, the dot, or `large`, with a label) picks the public names; `badge-styles.ts`\n * reads one private variable per part. Sizes and the full corners stay classes.\n */\n\n/** The tokens of {@link Badge}: `--md-comp-badge-<part>` and `--md-comp-badge-large-<part>`. */\nexport const badgeTokenSet = defineComponentTokens({\n  name: 'md-comp-badge',\n  tokens: {},\n  scopes: {\n    size: {\n      small: {\n        prefix: 'md-comp-badge',\n        tokens: {\n          color: {\n            value: color('error'),\n            description: 'The small badge, a dot.',\n            compose: 'BadgeTokens.Color',\n            paints: { property: 'background-color' },\n          },\n        },\n        // The dot shows no text; its colour matches the large badge's default.\n        fixed: { 'label-text-color': color('on-error') },\n      },\n      large: {\n        prefix: 'md-comp-badge-large',\n        tokens: {\n          color: {\n            value: color('error'),\n            description: 'The large badge, holding a count or short text.',\n            compose: 'BadgeTokens.LargeColor',\n            paints: { property: 'background-color' },\n          },\n          'label-text-color': {\n            value: color('on-error'),\n            description: \"The large badge's label.\",\n            compose: 'BadgeTokens.LargeLabelTextColor',\n            paints: { property: 'color' },\n          },\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;;AAUA,MAAa,gBAAgB,sBAAsB;CACjD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,MAAM;EACJ,OAAO;GACL,QAAQ;GACR,QAAQ,EACN,OAAO;IACL,OAAO,MAAM,OAAO;IACpB,aAAa;IACb,SAAS;IACT,QAAQ,EAAE,UAAU,mBAAmB;GACzC,EACF;GAEA,OAAO,EAAE,oBAAoB,MAAM,UAAU,EAAE;EACjD;EACA,OAAO;GACL,QAAQ;GACR,QAAQ;IACN,OAAO;KACL,OAAO,MAAM,OAAO;KACpB,aAAa;KACb,SAAS;KACT,QAAQ,EAAE,UAAU,mBAAmB;IACzC;IACA,oBAAoB;KAClB,OAAO,MAAM,UAAU;KACvB,aAAa;KACb,SAAS;KACT,QAAQ,EAAE,UAAU,QAAQ;IAC9B;GACF;EACF;CACF,EACF;AACF,CAAC"}

package/dist/components/button/Button.d.ts

@@ -0,0 +1,91 @@
+import { ButtonBaseActionProps, ButtonBaseLinkProps, ButtonBaseToggleProps } from "../../primitives/ButtonBase.js";
+import { ButtonShape, ButtonSize, ButtonVariant } from "./button-styles.js";
+import { ButtonLabels } from "./button-pending.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/button/Button.d.ts
+export interface ButtonClassNames {
+  /** The button element itself; merged with `className`. */
+  root?: string;
+  /** Inner wrapper around the icons and label. */
+  content?: string;
+  /** The label text. */
+  label?: string;
+  /** The leading icon. */
+  icon?: string;
+  /** The slot holding the loading indicator while `pending`, centred over the hidden content. */
+  pendingIndicator?: string;
+}
+interface PendingProps {
+  /**
+   * Shows a loading indicator in place of the content while an action runs, and blocks
+   * presses. The button keeps its width, its colours and keyboard focus; its accessible name
+   * gains `labels.pending`, and a focused button announces it. The indicator appears after
+   * 200ms, so a quick action doesn't flash. Use it for actions that take a moment, not for
+   * every button in a list. A submit button doesn't submit again while pending.
+   * @default false
+   */
+  pending?: boolean;
+  /**
+   * Replaces the loading indicator shown while `pending`, e.g. a `CircularProgressIndicator`
+   * for a wait that may pass five seconds. It's centred over the content and takes the content
+   * colour; a progress indicator also loses its track, as M3 asks inside a button.
+   */
+  pendingIndicator?: ReactElement;
+}
+/** A toggle's state is its selection: it has no pending state. */
+interface NoPendingProps {
+  /** Toggle buttons have no pending state. */
+  pending?: never;
+  /** Toggle buttons have no pending state. */
+  pendingIndicator?: never;
+}
+interface ButtonOwnProps {
+  /** The M3 style: filled, tonal, outlined, elevated or text. @default "filled" */
+  variant?: ButtonVariant;
+  /** Height, padding and label size, from extra small to extra large. @default "sm" */
+  size?: ButtonSize;
+  /** Fully round corners, or square ones (still rounded, but less). @default "round" */
+  shape?: ButtonShape;
+  /**
+   * Icon before the label, e.g. a Material Symbols SVG. Decorative; the label names the
+   * button. M3 allows one icon, on the leading side ("Don't use two icons in the same
+   * button"), so there's no trailing icon.
+   */
+  leadingIcon?: ReactElement;
+  /** The visible label. Required: buttons without text are `IconButton`s. */
+  children: Exclude<ReactNode, null | undefined | boolean>;
+  /** Classes for each part. `classNames.root` is merged with `className`. */
+  classNames?: ButtonClassNames;
+  /** Words the button announces. */
+  labels?: Partial<ButtonLabels>;
+}
+export interface ButtonActionProps extends ButtonOwnProps, PendingProps, Omit<ButtonBaseActionProps, keyof ButtonOwnProps | keyof PendingProps> {}
+export interface ButtonLinkProps extends ButtonOwnProps, PendingProps, Omit<ButtonBaseLinkProps, keyof ButtonOwnProps | keyof PendingProps> {}
+export interface ButtonToggleProps extends Omit<ButtonOwnProps, 'variant'>, NoPendingProps, Omit<ButtonBaseToggleProps, keyof ButtonOwnProps | keyof NoPendingProps> {
+  /** Text buttons have no toggle form. @default "filled" */
+  variant?: Exclude<ButtonVariant, 'text'>;
+  /**
+   * Leading icon shown while selected, e.g. the filled form of `leadingIcon` (M3: "use an
+   * outlined icon when unselected, and a filled version of the icon when selected").
+   * @default leadingIcon
+   */
+  selectedLeadingIcon?: ReactElement;
+}
+export type ButtonProps = ButtonActionProps | ButtonLinkProps | ButtonToggleProps;
+/**
+ * M3 Expressive button: five variants, five sizes (XS–XL), round or square shape,
+ * an optional toggle form, and a press morph that squares the corners while pressed.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is set. `className` and `style` go on
+ * that element, and consumer classes always win.
+ *
+ * @example
+ * <Button variant="tonal" size="md" leadingIcon={<EditIcon />} onPress={edit}>Edit</Button>
+ * <Button toggle leadingIcon={<StarIcon />} selectedLeadingIcon={<StarFilledIcon />}
+ *   selected={starred} onSelectedChange={setStarred}>Starred</Button>
+ * <Button href="/docs" variant="text">Docs</Button>
+ * <Button type="submit" pending={isPending}>Save</Button>
+ */
+export declare function Button({ variant: variantProp, size: sizeProp, shape: shapeProp, disabled: disabledProp, leadingIcon, pendingIndicator, labels, classNames, className, children, ...rest }: ButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/button/Button.js

@@ -0,0 +1,96 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../../primitives/ButtonBase.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { buttonStyles } from "./button-styles.js";
+import { ButtonContext } from "./ButtonContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { pendingClasses, useButtonPending } from "./button-pending.js";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button/Button.tsx
+/**
+* M3 Expressive button: five variants, five sizes (XS–XL), round or square shape,
+* an optional toggle form, and a press morph that squares the corners while pressed.
+*
+* Renders a `<button>`, or an `<a>` when `href` is set. `className` and `style` go on
+* that element, and consumer classes always win.
+*
+* @example
+* <Button variant="tonal" size="md" leadingIcon={<EditIcon />} onPress={edit}>Edit</Button>
+* <Button toggle leadingIcon={<StarIcon />} selectedLeadingIcon={<StarFilledIcon />}
+*   selected={starred} onSelectedChange={setStarred}>Starred</Button>
+* <Button href="/docs" variant="text">Docs</Button>
+* <Button type="submit" pending={isPending}>Save</Button>
+*/
+function Button({ variant: variantProp, size: sizeProp, shape: shapeProp, disabled: disabledProp, leadingIcon, pendingIndicator, labels, classNames, className, children, ...rest }) {
+	const { selectedLeadingIcon, ...base } = rest;
+	const context = useContext(ButtonContext);
+	const toggle = base.toggle === true;
+	let variant = variantProp ?? context.variant ?? "filled";
+	if (toggle && variant === "text") {
+		if (process.env.NODE_ENV !== "production") console.warn("[@windmorph/react] Text buttons have no toggle form; using \"filled\".");
+		variant = "filled";
+	}
+	const size = sizeProp ?? context.size ?? "sm";
+	const styles = buttonStyles({
+		variant,
+		size,
+		shape: shapeProp ?? context.shape ?? "round",
+		toggle,
+		connected: context.connected ?? "none"
+	});
+	const tokenAttributes = {
+		"data-tokens": mergeDataTokens("md-comp-button", base),
+		"data-variant": variant,
+		"data-size": size
+	};
+	const pending = useButtonPending({
+		pending: base.pending,
+		pendingIndicator,
+		labels,
+		size,
+		ariaLabel: base["aria-label"],
+		ariaLabelledby: base["aria-labelledby"],
+		ref: base.ref,
+		indicatorClassName: cn(pendingClasses.indicator, classNames?.pendingIndicator)
+	});
+	const baseProps = {
+		...base,
+		...tokenAttributes,
+		...pending.rootProps,
+		disabled: disabledProp ?? context.disabled ?? false,
+		className: styles.root({ class: cn(classNames?.root, className) })
+	};
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...baseProps,
+		children: ({ isSelected }) => {
+			const icon = isSelected && selectedLeadingIcon ? selectedLeadingIcon : leadingIcon;
+			const faces = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: styles.icon({ class: classNames?.icon }),
+				children: icon
+			}), /* @__PURE__ */ jsxs("span", {
+				className: styles.label({ class: classNames?.label }),
+				children: [children, pending.nameSuffix]
+			})] });
+			return /* @__PURE__ */ jsxs("span", {
+				...pending.contentProps,
+				className: styles.content({ class: cn(pending.takesPending && pendingClasses.content, classNames?.content) }),
+				children: [
+					(size === "xs" || size === "sm") && /* @__PURE__ */ jsx(TouchTarget, {}),
+					pending.takesPending ? /* @__PURE__ */ jsx("span", {
+						className: cn(pendingClasses.faces, pendingClasses.replaced),
+						children: faces
+					}) : faces,
+					pending.indicator,
+					pending.hiddenName
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, type ReactElement, type ReactNode, type Ref } from 'react';\nimport {\n  ButtonBase,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseProps,\n  type ButtonBaseToggleProps,\n} from '../../primitives/ButtonBase';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { cn } from '../../utils/cn';\nimport {\n  buttonStyles,\n  type ButtonShape,\n  type ButtonSize,\n  type ButtonVariant,\n} from './button-styles';\nimport { ButtonContext } from './ButtonContext';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pendingClasses, useButtonPending, type ButtonLabels } from './button-pending';\n\nexport interface ButtonClassNames {\n  /** The button element itself; merged with `className`. */\n  root?: string;\n  /** Inner wrapper around the icons and label. */\n  content?: string;\n  /** The label text. */\n  label?: string;\n  /** The leading icon. */\n  icon?: string;\n  /** The slot holding the loading indicator while `pending`, centred over the hidden content. */\n  pendingIndicator?: string;\n}\n\ninterface PendingProps {\n  /**\n   * Shows a loading indicator in place of the content while an action runs, and blocks\n   * presses. The button keeps its width, its colours and keyboard focus; its accessible name\n   * gains `labels.pending`, and a focused button announces it. The indicator appears after\n   * 200ms, so a quick action doesn't flash. Use it for actions that take a moment, not for\n   * every button in a list. A submit button doesn't submit again while pending.\n   * @default false\n   */\n  pending?: boolean;\n  /**\n   * Replaces the loading indicator shown while `pending`, e.g. a `CircularProgressIndicator`\n   * for a wait that may pass five seconds. It's centred over the content and takes the content\n   * colour; a progress indicator also loses its track, as M3 asks inside a button.\n   */\n  pendingIndicator?: ReactElement;\n}\n\n/** A toggle's state is its selection: it has no pending state. */\ninterface NoPendingProps {\n  /** Toggle buttons have no pending state. */\n  pending?: never;\n  /** Toggle buttons have no pending state. */\n  pendingIndicator?: never;\n}\n\ninterface ButtonOwnProps {\n  /** The M3 style: filled, tonal, outlined, elevated or text. @default \"filled\" */\n  variant?: ButtonVariant;\n  /** Height, padding and label size, from extra small to extra large. @default \"sm\" */\n  size?: ButtonSize;\n  /** Fully round corners, or square ones (still rounded, but less). @default \"round\" */\n  shape?: ButtonShape;\n  /**\n   * Icon before the label, e.g. a Material Symbols SVG. Decorative; the label names the\n   * button. M3 allows one icon, on the leading side (\"Don't use two icons in the same\n   * button\"), so there's no trailing icon.\n   */\n  leadingIcon?: ReactElement;\n  /** The visible label. Required: buttons without text are `IconButton`s. */\n  children: Exclude<ReactNode, null | undefined | boolean>;\n  /** Classes for each part. `classNames.root` is merged with `className`. */\n  classNames?: ButtonClassNames;\n  /** Words the button announces. */\n  labels?: Partial<ButtonLabels>;\n}\n\nexport interface ButtonActionProps\n  extends\n    ButtonOwnProps,\n    PendingProps,\n    Omit<ButtonBaseActionProps, keyof ButtonOwnProps | keyof PendingProps> {}\n\nexport interface ButtonLinkProps\n  extends\n    ButtonOwnProps,\n    PendingProps,\n    Omit<ButtonBaseLinkProps, keyof ButtonOwnProps | keyof PendingProps> {}\n\nexport interface ButtonToggleProps\n  extends\n    Omit<ButtonOwnProps, 'variant'>,\n    NoPendingProps,\n    Omit<ButtonBaseToggleProps, keyof ButtonOwnProps | keyof NoPendingProps> {\n  /** Text buttons have no toggle form. @default \"filled\" */\n  variant?: Exclude<ButtonVariant, 'text'>;\n  /**\n   * Leading icon shown while selected, e.g. the filled form of `leadingIcon` (M3: \"use an\n   * outlined icon when unselected, and a filled version of the icon when selected\").\n   * @default leadingIcon\n   */\n  selectedLeadingIcon?: ReactElement;\n}\n\nexport type ButtonProps = ButtonActionProps | ButtonLinkProps | ButtonToggleProps;\n\n/**\n * M3 Expressive button: five variants, five sizes (XS–XL), round or square shape,\n * an optional toggle form, and a press morph that squares the corners while pressed.\n *\n * Renders a `<button>`, or an `<a>` when `href` is set. `className` and `style` go on\n * that element, and consumer classes always win.\n *\n * @example\n * <Button variant=\"tonal\" size=\"md\" leadingIcon={<EditIcon />} onPress={edit}>Edit</Button>\n * <Button toggle leadingIcon={<StarIcon />} selectedLeadingIcon={<StarFilledIcon />}\n *   selected={starred} onSelectedChange={setStarred}>Starred</Button>\n * <Button href=\"/docs\" variant=\"text\">Docs</Button>\n * <Button type=\"submit\" pending={isPending}>Save</Button>\n */\nexport function Button({\n  variant: variantProp,\n  size: sizeProp,\n  shape: shapeProp,\n  disabled: disabledProp,\n  leadingIcon,\n  pendingIndicator,\n  labels,\n  classNames,\n  className,\n  children,\n  ...rest\n}: ButtonProps) {\n  // Only toggle props carry `selectedLeadingIcon`; the others read it as undefined.\n  const { selectedLeadingIcon, ...base } = rest as typeof rest & {\n    selectedLeadingIcon?: ReactElement;\n  };\n  const context = useContext(ButtonContext);\n  const toggle = base.toggle === true;\n  let variant = variantProp ?? context.variant ?? 'filled';\n  if (toggle && variant === 'text') {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn('[@windmorph/react] Text buttons have no toggle form; using \"filled\".');\n    }\n    variant = 'filled';\n  }\n  const size = sizeProp ?? context.size ?? 'sm';\n  const styles = buttonStyles({\n    variant,\n    size,\n    shape: shapeProp ?? context.shape ?? 'round',\n    toggle,\n    connected: context.connected ?? 'none',\n  });\n\n  // Destructuring a union merges its members, so TypeScript loses the pairing of\n  // `href`/`toggle` with their `ref` types. `base` still holds exactly one member's props.\n  // The component tokens' hooks (button-tokens.ts), also public styling hooks for apps.\n  const tokenAttributes = {\n    'data-tokens': mergeDataTokens('md-comp-button', base),\n    'data-variant': variant,\n    'data-size': size,\n  };\n  const pending = useButtonPending<HTMLElement>({\n    pending: base.pending,\n    pendingIndicator,\n    labels,\n    size,\n    ariaLabel: base['aria-label'],\n    ariaLabelledby: base['aria-labelledby'],\n    ref: base.ref as Ref<HTMLElement> | undefined,\n    indicatorClassName: cn(pendingClasses.indicator, classNames?.pendingIndicator),\n  });\n  const baseProps = {\n    ...base,\n    ...tokenAttributes,\n    ...pending.rootProps,\n    disabled: disabledProp ?? context.disabled ?? false,\n    className: styles.root({ class: cn(classNames?.root, className) }),\n  } as ButtonBaseProps;\n\n  return (\n    <ButtonBase {...baseProps}>\n      {({ isSelected }) => {\n        const icon = isSelected && selectedLeadingIcon ? selectedLeadingIcon : leadingIcon;\n        const faces = (\n          <>\n            {icon && (\n              <span aria-hidden=\"true\" className={styles.icon({ class: classNames?.icon })}>\n                {icon}\n              </span>\n            )}\n            <span className={styles.label({ class: classNames?.label })}>\n              {children}\n              {pending.nameSuffix}\n            </span>\n          </>\n        );\n        return (\n          <span\n            {...pending.contentProps}\n            className={styles.content({\n              class: cn(pending.takesPending && pendingClasses.content, classNames?.content),\n            })}\n          >\n            {(size === 'xs' || size === 'sm') && <TouchTarget />}\n            {pending.takesPending ? (\n              <span className={cn(pendingClasses.faces, pendingClasses.replaced)}>{faces}</span>\n            ) : (\n              faces\n            )}\n            {pending.indicator}\n            {pending.hiddenName}\n          </span>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6HA,SAAgB,OAAO,EACrB,SAAS,aACT,MAAM,UACN,OAAO,WACP,UAAU,cACV,aACA,kBACA,QACA,YACA,WACA,UACA,GAAG,QACW;CAEd,MAAM,EAAE,qBAAqB,GAAG,SAAS;CAGzC,MAAM,UAAU,WAAW,aAAa;CACxC,MAAM,SAAS,KAAK,WAAW;CAC/B,IAAI,UAAU,eAAe,QAAQ,WAAW;CAChD,IAAI,UAAU,YAAY,QAAQ;EAChC,IAAI,QAAQ,IAAI,aAAa,cAC3B,QAAQ,KAAK,wEAAsE;EAErF,UAAU;CACZ;CACA,MAAM,OAAO,YAAY,QAAQ,QAAQ;CACzC,MAAM,SAAS,aAAa;EAC1B;EACA;EACA,OAAO,aAAa,QAAQ,SAAS;EACrC;EACA,WAAW,QAAQ,aAAa;CAClC,CAAC;CAKD,MAAM,kBAAkB;EACtB,eAAe,gBAAgB,kBAAkB,IAAI;EACrD,gBAAgB;EAChB,aAAa;CACf;CACA,MAAM,UAAU,iBAA8B;EAC5C,SAAS,KAAK;EACd;EACA;EACA;EACA,WAAW,KAAK;EAChB,gBAAgB,KAAK;EACrB,KAAK,KAAK;EACV,oBAAoB,GAAG,eAAe,WAAW,YAAY,gBAAgB;CAC/E,CAAC;CACD,MAAM,YAAY;EAChB,GAAG;EACH,GAAG;EACH,GAAG,QAAQ;EACX,UAAU,gBAAgB,QAAQ,YAAY;EAC9C,WAAW,OAAO,KAAK,EAAE,OAAO,GAAG,YAAY,MAAM,SAAS,EAAE,CAAC;CACnE;CAEA,OACE,oBAAC,YAAD;EAAY,GAAI;EACZ,WAAA,EAAE,iBAAiB;GACnB,MAAM,OAAO,cAAc,sBAAsB,sBAAsB;GACvE,MAAM,QACJ,qBAAA,YAAA,EAAA,UAAA,CACG,QACC,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,OAAO,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IACxE,UAAA;GACG,CAAA,GAER,qBAAC,QAAD;IAAM,WAAW,OAAO,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IAA1D,UAAA,CACG,UACA,QAAQ,UACL;GACN,CAAA,CAAA,EAAA,CAAA;GAEJ,OACE,qBAAC,QAAD;IACE,GAAI,QAAQ;IACZ,WAAW,OAAO,QAAQ,EACxB,OAAO,GAAG,QAAQ,gBAAgB,eAAe,SAAS,YAAY,OAAO,EAC/E,CAAC;IAJH,UAAA;MAMI,SAAS,QAAQ,SAAS,SAAS,oBAAC,aAAD,CAAc,CAAA;KAClD,QAAQ,eACP,oBAAC,QAAD;MAAM,WAAW,GAAG,eAAe,OAAO,eAAe,QAAQ;MAAI,UAAA;KAAY,CAAA,IAEjF;KAED,QAAQ;KACR,QAAQ;IACL;;EAEV;CACU,CAAA;AAEhB"}

package/dist/components/button/ButtonContext.d.ts

@@ -0,0 +1,30 @@
+import { Density } from "../../tokens/density.js";
+import { ToggleGroupStateContext } from "../../primitives/ButtonBase.js";
+import { ButtonShape, ButtonSize, ButtonVariant } from "./button-styles.js";
+import { IconButtonVariant } from "../icon-button/icon-button-styles.js";
+//#region src/components/button/ButtonContext.d.ts
+/** Props a parent (such as a button group) shares with its buttons. A button's own props win. */
+export interface ButtonContextValue {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  disabled?: boolean;
+  /**
+   * Default style of the `IconButton`s inside, where M3 calls for one other than the
+   * filled default (e.g. `standard` in toolbars and app bars). An icon button's own
+   * `variant` wins.
+   */
+  iconButtonVariant?: IconButtonVariant;
+  /**
+   * Density of the `IconButton`s inside, for a container that keeps its own size whatever the
+   * density (an app bar, a toolbar, a search bar): `0` keeps their M3 size there. An icon
+   * button's own `density` wins.
+   */
+  density?: Density;
+  /** Position in a connected button group; set per child by `ButtonGroup`. */
+  connected?: 'leading' | 'middle' | 'trailing';
+}
+export declare const ButtonContext: import("react").Context<ButtonContextValue>;
+//#endregion
+export { ToggleGroupStateContext };
+//# sourceMappingURL=ButtonContext.d.ts.map

package/dist/components/button/ButtonContext.js

@@ -0,0 +1,18 @@
+"use client";
+import { ToggleGroupStateContext } from "../../primitives/ButtonBase.js";
+import { createContext } from "react";
+//#region src/components/button/ButtonContext.ts
+const ButtonContext = createContext({});
+/**
+* The context of a container whose icon buttons are `standard` by default, as M3 shows
+* them in toolbars, app bars and search bars. These containers keep their size at every
+* density, so their icon buttons stay at density 0 too.
+*/
+const standardIconButtons = {
+	iconButtonVariant: "standard",
+	density: 0
+};
+//#endregion
+export { ButtonContext, ToggleGroupStateContext, standardIconButtons };
+
+//# sourceMappingURL=ButtonContext.js.map

package/dist/components/button/ButtonContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContext.js","names":[],"sources":["../../../src/components/button/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from 'react';\nimport type { Density } from '../../tokens/density';\nimport type { IconButtonVariant } from '../icon-button/icon-button-styles';\nimport type { ButtonShape, ButtonSize, ButtonVariant } from './button-styles';\n\n/** Props a parent (such as a button group) shares with its buttons. A button's own props win. */\nexport interface ButtonContextValue {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  shape?: ButtonShape;\n  disabled?: boolean;\n  /**\n   * Default style of the `IconButton`s inside, where M3 calls for one other than the\n   * filled default (e.g. `standard` in toolbars and app bars). An icon button's own\n   * `variant` wins.\n   */\n  iconButtonVariant?: IconButtonVariant;\n  /**\n   * Density of the `IconButton`s inside, for a container that keeps its own size whatever the\n   * density (an app bar, a toolbar, a search bar): `0` keeps their M3 size there. An icon\n   * button's own `density` wins.\n   */\n  density?: Density;\n  /** Position in a connected button group; set per child by `ButtonGroup`. */\n  connected?: 'leading' | 'middle' | 'trailing';\n}\n\nexport const ButtonContext = createContext<ButtonContextValue>({});\n\n/** Selection state shared by toggle buttons in a selection group (see `ButtonGroup`). */\nexport { ToggleGroupStateContext } from '../../primitives/ButtonBase';\n\n/**\n * The context of a container whose icon buttons are `standard` by default, as M3 shows\n * them in toolbars, app bars and search bars. These containers keep their size at every\n * density, so their icon buttons stay at density 0 too.\n */\nexport const standardIconButtons: ButtonContextValue = {\n  iconButtonVariant: 'standard',\n  density: 0,\n};\n"],"mappings":";;;;AA6BA,MAAa,gBAAgB,cAAkC,CAAC,CAAC;;;;;;AAUjE,MAAa,sBAA0C;CACrD,mBAAmB;CACnB,SAAS;AACX"}

package/dist/components/button/DensityZeroButtons.js

@@ -0,0 +1,25 @@
+"use client";
+import { ButtonContext } from "./ButtonContext.js";
+import { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/DensityZeroButtons.tsx
+/**
+* Keeps the icon buttons inside at density 0, for a part that keeps its own size at every
+* density (a navigation rail's header, a dialog's or sheet's header). The rest of the
+* enclosing `ButtonContext` carries through, and an icon button's own `density` wins.
+*/
+function DensityZeroButtons({ children }) {
+	const parent = useContext(ButtonContext);
+	const value = useMemo(() => ({
+		...parent,
+		density: 0
+	}), [parent]);
+	return /* @__PURE__ */ jsx(ButtonContext, {
+		value,
+		children
+	});
+}
+//#endregion
+export { DensityZeroButtons };
+
+//# sourceMappingURL=DensityZeroButtons.js.map

package/dist/components/button/DensityZeroButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DensityZeroButtons.js","names":[],"sources":["../../../src/components/button/DensityZeroButtons.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useMemo, type ReactNode } from 'react';\nimport { ButtonContext } from './ButtonContext';\n\n/**\n * Keeps the icon buttons inside at density 0, for a part that keeps its own size at every\n * density (a navigation rail's header, a dialog's or sheet's header). The rest of the\n * enclosing `ButtonContext` carries through, and an icon button's own `density` wins.\n */\nexport function DensityZeroButtons({ children }: { children: ReactNode }) {\n  const parent = useContext(ButtonContext);\n  const value = useMemo(() => ({ ...parent, density: 0 as const }), [parent]);\n  return <ButtonContext value={value}>{children}</ButtonContext>;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,MAAM,SAAS,WAAW,aAAa;CACvC,MAAM,QAAQ,eAAe;EAAE,GAAG;EAAQ,SAAS;CAAW,IAAI,CAAC,MAAM,CAAC;CAC1E,OAAO,oBAAC,eAAD;EAAsB;EAAQ;CAAwB,CAAA;AAC/D"}

package/dist/components/button/button-pending.d.ts

@@ -0,0 +1,10 @@
+import "./button-styles.js";
+import { ReactElement, Ref } from "react";
+//#region src/components/button/button-pending.d.ts
+/** Words a `Button` or `IconButton` announces. */
+export interface ButtonLabels {
+  /** Added to the accessible name while `pending` ("Save, Loading"). @default "Loading" */
+  pending: string;
+}
+//#endregion
+//# sourceMappingURL=button-pending.d.ts.map