@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,99 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tabs/tabs-styles.ts
+/** Variant definitions for {@link Tabs}; extend them to add variants. */
+const tabsStyles = tv({
+	slots: {
+		root: "flex min-w-0 flex-col",
+		scroller: "",
+		list: [
+			"group/tabs grid grid-rows-[auto] bg-[var(--_md-comp-tabs-container-color)]",
+			"shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]",
+			"forced-colors:border-b forced-colors:border-[CanvasText]"
+		],
+		tab: [
+			"row-start-1 flex min-w-0 cursor-pointer items-center justify-center px-[16px] select-none",
+			"font-plain text-title-small",
+			"state-layer focus-ring-inset",
+			"not-data-selected:data-hovered:text-on-surface not-data-selected:data-focus-visible:text-on-surface not-data-selected:data-pressed:text-on-surface",
+			"data-disabled:cursor-default data-disabled:text-on-surface/38",
+			"forced-colors:data-selected:text-[Highlight]",
+			"[--m3-tab-icon-color:var(--_md-comp-tabs-with-icon-inactive-icon-color)] data-selected:[--m3-tab-icon-color:var(--_md-comp-tabs-with-icon-active-icon-color)]",
+			"not-data-selected:data-hovered:[--m3-tab-icon-color:currentColor] not-data-selected:data-focus-visible:[--m3-tab-icon-color:currentColor] not-data-selected:data-pressed:[--m3-tab-icon-color:currentColor]",
+			"data-disabled:[--m3-tab-icon-color:currentColor]",
+			"group-data-recolour/tabs:[--m3-transition-property:color] [--m3-transition-delay:0s]",
+			"[--m3-transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] [--m3-transition-easing:var(--md-sys-motion-spring-effects-fast-easing)]",
+			"data-selected:[--m3-transition-duration:var(--md-sys-motion-spring-effects-default-duration)] data-selected:[--m3-transition-easing:var(--md-sys-motion-spring-effects-default-easing)]"
+		],
+		icon: ["inline-flex size-[24px] shrink-0 items-center justify-center text-[color:var(--m3-tab-icon-color)] [&>svg]:size-full", "[transition-property:var(--m3-transition-property,none)] [transition-duration:var(--m3-transition-duration,0s)] [transition-timing-function:var(--m3-transition-easing,linear)]"],
+		label: "line-clamp-2 text-center",
+		text: "inline-flex min-w-0 items-center gap-[4px]",
+		indicator: [
+			"pointer-events-none row-start-1 self-end [justify-self:left] bg-[var(--_md-comp-tabs-active-indicator-color)] opacity-0 data-ready:opacity-100",
+			"forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none",
+			"[transition-property:none] group-data-animate/tabs:[transition-property:translate,width]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+		],
+		panel: "focus-ring-inset"
+	},
+	variants: {
+		variant: {
+			primary: {
+				tab: [
+					"text-[color:var(--_md-comp-tabs-with-label-text-inactive-label-text-color)]",
+					"data-selected:text-[color:var(--_md-comp-tabs-with-label-text-active-label-text-color)]",
+					"[--m3-state-layer-color:var(--md-sys-color-on-surface)] data-selected:[--m3-state-layer-color:var(--md-sys-color-primary)]"
+				],
+				indicator: "h-[3px] rounded-t-[3px]"
+			},
+			secondary: {
+				tab: [
+					"text-[color:var(--_md-comp-tabs-inactive-label-text-color)]",
+					"data-selected:text-[color:var(--_md-comp-tabs-active-label-text-color)]",
+					"[--m3-state-layer-color:var(--md-sys-color-on-surface)]"
+				],
+				indicator: "h-[2px]"
+			}
+		},
+		scrollable: {
+			true: {
+				scroller: "overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
+				list: "w-max min-w-full auto-cols-max ps-[52px]",
+				tab: "min-w-[90px]"
+			},
+			false: { list: "auto-cols-fr" }
+		},
+		swipeable: {
+			true: { panel: "touch-pan-y" },
+			false: {}
+		},
+		align: {
+			stretch: {},
+			start: {
+				scroller: ["bg-[var(--_md-comp-tabs-container-color)] shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]", "forced-colors:border-b forced-colors:border-[CanvasText]"],
+				list: "w-max max-w-full forced-colors:border-b-0"
+			},
+			center: {
+				scroller: ["bg-[var(--_md-comp-tabs-container-color)] shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]", "forced-colors:border-b forced-colors:border-[CanvasText]"],
+				list: "mx-auto w-max max-w-full forced-colors:border-b-0"
+			}
+		},
+		layout: {
+			text: { tab: "min-h-[calc(48px+var(--md-sys-density,0)*4px)]" },
+			"icon-top": { tab: "min-h-[calc(64px+var(--md-sys-density,0)*4px)] flex-col justify-center gap-[2px]" },
+			"icon-start": { tab: "min-h-[calc(48px+var(--md-sys-density,0)*4px)] flex-row gap-[8px]" },
+			"icon-only": { tab: "min-h-[calc(48px+var(--md-sys-density,0)*4px)]" }
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		scrollable: false,
+		layout: "text",
+		align: "stretch",
+		swipeable: false
+	}
+});
+//#endregion
+export { tabsStyles };
+
+//# sourceMappingURL=tabs-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-styles.js","names":[],"sources":["../../../src/components/tabs/tabs-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Tab.kt, TabRow.kt, Primary / SecondaryNavigationTab\n * tokens):\n *\n * - `surface` row with a 1px `outline-variant` divider; tabs are 48px, `title-small`, 16px\n *   side padding, 24px icons.\n * - With an icon above the label a tab is 64px: the M3 token\n *   (`IconAndLabelTextContainerHeight`), which Material Web uses with the icon, a 2px gap\n *   and the label centred. Compose's `Tab.kt` (and MDC's `TabLayout`) still hard-code\n *   72dp, the Material Design 1 value, so here the token wins.\n * - Labels are `on-surface-variant` (`on-surface` on hover / focus / press) and the\n *   selected label is `primary` (primary tabs) or `on-surface` (secondary). Compose's `Tab`\n *   defaults the unselected colour to the selected one; the token colours are used.\n * - Selection recolours on the default effects spring, deselection on fast effects. The\n *   state layer is `on-surface`, and `primary` on a selected primary tab.\n * - Indicator (m3.material.io specs, 2026-10-13): `primary`, 3px high on primary tabs with\n *   only its top corners rounded (3, 3, 0, 0), as wide as the content (min 24px); 2px high\n *   on secondary tabs, the whole tab wide. It slides on the default spatial spring, and\n *   follows the selected tab's content when that resizes on its own (a web font loading).\n * - Only a selection change animates: the row's `data-animate` turns on the indicator's\n *   slide, and `data-recolour` (set in the render that changes the selection, 2026-10-15)\n *   the tabs' colour fades. The first placement, the default selection and resizes appear in\n *   place, so nothing slides or fades in on mount.\n * - Forced colours (2026-10-15): the indicator keeps its fill as `Highlight`\n *   (`forced-color-adjust: none`), the divider becomes a 1px `CanvasText` border (an inset\n *   shadow is dropped there), and the selected label is `Highlight`.\n * - Scrollable rows: tabs at least 90px wide, 52px start inset.\n * - Fixed rows aligned `start` or `center` are only as wide as their tabs, each as wide as\n *   the widest (a `max-content` grid of `1fr` columns), with the row's divider kept full\n *   width on the scroller.\n * - Badges: 4px after an inline label; on a stacked icon through `BadgedBox`.\n * - Web density (`--md-sys-density`, 0 to -3): each step takes 4px off a tab, 48 → 36px and\n *   64 → 52px with the icon above, as Material Components Web's tab bar density did (48px,\n *   4px a step; stacked 72px). The tabs sit side by side in one row, so a 48px target would\n *   reach outside the row: like dense menu items, they keep full-height, non-overlapping\n *   targets above WCAG 2.5.8's 24px, and density stays the reader's choice.\n *\n * The indicator shares the tab row's first grid cell (no positioning) and is moved with\n * `translate`.\n *\n * The row, divider, indicator and resting label and icon colours come from the tabs'\n * component tokens (`tabs-tokens.ts`, `--md-comp-{primary,secondary}-navigation-tab-*`); the\n * root and each tab carry `data-tokens=\"md-comp-tabs\"` and `data-variant`. An icon takes its\n * tab's colour through `--m3-tab-icon-color`: the icon token at rest and when selected, the\n * label's colour while hovered, focused, pressed or disabled. A consumer class still wins in\n * `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link Tabs}; extend them to add variants. */\nexport const tabsStyles = tv({\n  slots: {\n    root: 'flex min-w-0 flex-col',\n    scroller: '',\n    list: [\n      'group/tabs grid grid-rows-[auto] bg-[var(--_md-comp-tabs-container-color)]',\n      'shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]',\n      'forced-colors:border-b forced-colors:border-[CanvasText]',\n    ],\n    tab: [\n      'row-start-1 flex min-w-0 cursor-pointer items-center justify-center px-[16px] select-none',\n      'font-plain text-title-small',\n      'state-layer focus-ring-inset',\n      'not-data-selected:data-hovered:text-on-surface not-data-selected:data-focus-visible:text-on-surface not-data-selected:data-pressed:text-on-surface',\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n      'forced-colors:data-selected:text-[Highlight]',\n      // The icon's colour: its token at rest and selected, else the label's.\n      '[--m3-tab-icon-color:var(--_md-comp-tabs-with-icon-inactive-icon-color)] data-selected:[--m3-tab-icon-color:var(--_md-comp-tabs-with-icon-active-icon-color)]',\n      'not-data-selected:data-hovered:[--m3-tab-icon-color:currentColor] not-data-selected:data-focus-visible:[--m3-tab-icon-color:currentColor] not-data-selected:data-pressed:[--m3-tab-icon-color:currentColor]',\n      'data-disabled:[--m3-tab-icon-color:currentColor]',\n      // Colour: in on default effects, out on fast effects, when the selection changes.\n      'group-data-recolour/tabs:[--m3-transition-property:color] [--m3-transition-delay:0s]',\n      '[--m3-transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] [--m3-transition-easing:var(--md-sys-motion-spring-effects-fast-easing)]',\n      'data-selected:[--m3-transition-duration:var(--md-sys-motion-spring-effects-default-duration)] data-selected:[--m3-transition-easing:var(--md-sys-motion-spring-effects-default-easing)]',\n    ],\n    icon: [\n      'inline-flex size-[24px] shrink-0 items-center justify-center text-[color:var(--m3-tab-icon-color)] [&>svg]:size-full',\n      // Recolours with its tab's label.\n      '[transition-property:var(--m3-transition-property,none)] [transition-duration:var(--m3-transition-duration,0s)] [transition-timing-function:var(--m3-transition-easing,linear)]',\n    ],\n    label: 'line-clamp-2 text-center',\n    // The label and an inline badge, 4px apart.\n    text: 'inline-flex min-w-0 items-center gap-[4px]',\n    indicator: [\n      'pointer-events-none row-start-1 self-end [justify-self:left] bg-[var(--_md-comp-tabs-active-indicator-color)] opacity-0 data-ready:opacity-100',\n      'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n      '[transition-property:none] group-data-animate/tabs:[transition-property:translate,width]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    panel: 'focus-ring-inset',\n  },\n  variants: {\n    variant: {\n      primary: {\n        tab: [\n          'text-[color:var(--_md-comp-tabs-with-label-text-inactive-label-text-color)]',\n          'data-selected:text-[color:var(--_md-comp-tabs-with-label-text-active-label-text-color)]',\n          // The state layer follows the label: `primary` on the selected tab, `on-surface` on\n          // the others (M3's primary tab tokens; 2026-10-15).\n          '[--m3-state-layer-color:var(--md-sys-color-on-surface)] data-selected:[--m3-state-layer-color:var(--md-sys-color-primary)]',\n        ],\n        indicator: 'h-[3px] rounded-t-[3px]',\n      },\n      secondary: {\n        tab: [\n          'text-[color:var(--_md-comp-tabs-inactive-label-text-color)]',\n          'data-selected:text-[color:var(--_md-comp-tabs-active-label-text-color)]',\n          '[--m3-state-layer-color:var(--md-sys-color-on-surface)]',\n        ],\n        indicator: 'h-[2px]',\n      },\n    },\n    scrollable: {\n      true: {\n        scroller: 'overflow-x-auto overscroll-x-contain [scrollbar-width:none]',\n        list: 'w-max min-w-full auto-cols-max ps-[52px]',\n        tab: 'min-w-[90px]',\n      },\n      false: { list: 'auto-cols-fr' },\n    },\n    // A swipeable panel takes horizontal gestures and leaves vertical ones to scrolling.\n    swipeable: { true: { panel: 'touch-pan-y' }, false: {} },\n    align: {\n      stretch: {},\n      start: {\n        scroller: [\n          'bg-[var(--_md-comp-tabs-container-color)] shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]',\n          'forced-colors:border-b forced-colors:border-[CanvasText]',\n        ],\n        list: 'w-max max-w-full forced-colors:border-b-0',\n      },\n      center: {\n        scroller: [\n          'bg-[var(--_md-comp-tabs-container-color)] shadow-[inset_0_-1px_0_var(--_md-comp-tabs-divider-color)]',\n          'forced-colors:border-b forced-colors:border-[CanvasText]',\n        ],\n        list: 'mx-auto w-max max-w-full forced-colors:border-b-0',\n      },\n    },\n    // 48px tabs (64px with the icon above), 4px less per density step.\n    layout: {\n      text: { tab: 'min-h-[calc(48px+var(--md-sys-density,0)*4px)]' },\n      'icon-top': {\n        tab: 'min-h-[calc(64px+var(--md-sys-density,0)*4px)] flex-col justify-center gap-[2px]',\n      },\n      'icon-start': { tab: 'min-h-[calc(48px+var(--md-sys-density,0)*4px)] flex-row gap-[8px]' },\n      'icon-only': { tab: 'min-h-[calc(48px+var(--md-sys-density,0)*4px)]' },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    scrollable: false,\n    layout: 'text',\n    align: 'stretch',\n    swipeable: false,\n  },\n});\n\n/**\n * The variants of {@link tabsStyles}, 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 TabsStyleProps = VariantProps<typeof tabsStyles>;\nexport type TabsVariant = NonNullable<TabsStyleProps['variant']>;\n"],"mappings":";;;AAqDA,MAAa,aAAa,GAAG;CAC3B,OAAO;EACL,MAAM;EACN,UAAU;EACV,MAAM;GACJ;GACA;GACA;EACF;EACA,KAAK;GACH;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF;EACA,MAAM,CACJ,wHAEA,iLACF;EACA,OAAO;EAEP,MAAM;EACN,WAAW;GACT;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP,KAAK;KACH;KACA;KAGA;IACF;IACA,WAAW;GACb;GACA,WAAW;IACT,KAAK;KACH;KACA;KACA;IACF;IACA,WAAW;GACb;EACF;EACA,YAAY;GACV,MAAM;IACJ,UAAU;IACV,MAAM;IACN,KAAK;GACP;GACA,OAAO,EAAE,MAAM,eAAe;EAChC;EAEA,WAAW;GAAE,MAAM,EAAE,OAAO,cAAc;GAAG,OAAO,CAAC;EAAE;EACvD,OAAO;GACL,SAAS,CAAC;GACV,OAAO;IACL,UAAU,CACR,wGACA,0DACF;IACA,MAAM;GACR;GACA,QAAQ;IACN,UAAU,CACR,wGACA,0DACF;IACA,MAAM;GACR;EACF;EAEA,QAAQ;GACN,MAAM,EAAE,KAAK,iDAAiD;GAC9D,YAAY,EACV,KAAK,mFACP;GACA,cAAc,EAAE,KAAK,oEAAoE;GACzF,aAAa,EAAE,KAAK,iDAAiD;EACvE;CACF;CACA,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,WAAW;CACb;AACF,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/tabs/tabs-tokens.d.ts
+/** The tokens of {@link Tabs}: `--md-comp-{primary,secondary}-navigation-tab-<part>`. */
+export declare const tabsTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=tabs-tokens.d.ts.map

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

@@ -0,0 +1,121 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/tabs/tabs-tokens.ts
+const paintsContainer = {
+	property: "background-color",
+	slot: "list"
+};
+const paintsDivider = {
+	property: "box-shadow",
+	slot: "list"
+};
+const paintsIndicator = {
+	property: "background-color",
+	slot: "indicator"
+};
+const paintsActiveLabel = {
+	property: "color",
+	state: "selected"
+};
+const paintsInactiveLabel = {
+	property: "color",
+	slot: "tab"
+};
+const paintsActiveIcon = {
+	property: "color",
+	slot: "icon",
+	state: "selected"
+};
+const paintsInactiveIcon = {
+	property: "color",
+	slot: "icon"
+};
+/** The parts every variant declares, with their defaults and Compose names. */
+function common(set, active) {
+	return {
+		"container-color": {
+			value: color("surface"),
+			description: "The tab row.",
+			compose: `${set}NavigationTabTokens.ContainerColor`,
+			paints: paintsContainer
+		},
+		"divider-color": {
+			value: color("outline-variant"),
+			description: "The 1px divider along the row's bottom edge.",
+			compose: `${set}NavigationTabTokens.DividerColor`,
+			paints: paintsDivider
+		},
+		"active-indicator-color": {
+			value: color("primary"),
+			description: "The selected tab's indicator.",
+			compose: `${set}NavigationTabTokens.ActiveIndicatorColor`,
+			paints: paintsIndicator
+		},
+		"with-icon-active-icon-color": {
+			value: color(active),
+			description: "The selected tab's icon.",
+			compose: `${set}NavigationTabTokens.ActiveIconColor`,
+			paints: paintsActiveIcon
+		},
+		"with-icon-inactive-icon-color": {
+			value: color("on-surface-variant"),
+			description: "An unselected tab’s icon, at rest.",
+			compose: `${set}NavigationTabTokens.InactiveIconColor`,
+			paints: paintsInactiveIcon
+		}
+	};
+}
+/** The tokens of {@link Tabs}: `--md-comp-{primary,secondary}-navigation-tab-<part>`. */
+const tabsTokenSet = defineComponentTokens({
+	name: "md-comp-tabs",
+	tokens: {},
+	scopes: { variant: {
+		primary: {
+			prefix: "md-comp-primary-navigation-tab",
+			tokens: {
+				...common("Primary", "primary"),
+				"with-label-text-active-label-text-color": {
+					value: color("primary"),
+					description: "The selected tab's label.",
+					compose: "PrimaryNavigationTabTokens.ActiveLabelTextColor",
+					paints: paintsActiveLabel
+				},
+				"with-label-text-inactive-label-text-color": {
+					value: color("on-surface-variant"),
+					description: "An unselected tab’s label, at rest.",
+					compose: "PrimaryNavigationTabTokens.InactiveLabelTextColor",
+					paints: paintsInactiveLabel
+				}
+			},
+			fixed: {
+				"active-label-text-color": color("primary"),
+				"inactive-label-text-color": color("on-surface-variant")
+			}
+		},
+		secondary: {
+			prefix: "md-comp-secondary-navigation-tab",
+			tokens: {
+				...common("Secondary", "on-surface"),
+				"active-label-text-color": {
+					value: color("on-surface"),
+					description: "The selected tab's label.",
+					compose: "SecondaryNavigationTabTokens.ActiveLabelTextColor",
+					paints: paintsActiveLabel
+				},
+				"inactive-label-text-color": {
+					value: color("on-surface-variant"),
+					description: "An unselected tab’s label, at rest.",
+					compose: "SecondaryNavigationTabTokens.InactiveLabelTextColor",
+					paints: paintsInactiveLabel
+				}
+			},
+			fixed: {
+				"with-label-text-active-label-text-color": color("on-surface"),
+				"with-label-text-inactive-label-text-color": color("on-surface-variant")
+			}
+		}
+	} }
+});
+//#endregion
+export { tabsTokenSet };
+
+//# sourceMappingURL=tabs-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tokens.js","names":[],"sources":["../../../src/components/tabs/tabs-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens, type ComponentToken } from '../../tokens/component';\n\n/*\n * The tabs' component tokens, M3's `md.comp.{primary,secondary}-navigation-tab.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with the defaults of\n * `tabs-styles.ts`. The tabs' root and each tab carry `data-tokens=\"md-comp-tabs\"` and\n * `data-variant`, so a tab's own state (`data-selected`) picks its colours. Hover, focus,\n * press and disabled colours stay classes.\n *\n * M3 names the primary tab's label colours `with-label-text-*` and the secondary tab's\n * plainly, so each variant reads its own label parts and declares the other's as fixed.\n */\n\nconst paintsContainer = { property: 'background-color', slot: 'list' } as const;\n// The divider is an inset shadow along the list's bottom edge.\nconst paintsDivider = { property: 'box-shadow', slot: 'list' } as const;\nconst paintsIndicator = { property: 'background-color', slot: 'indicator' } as const;\nconst paintsActiveLabel = { property: 'color', state: 'selected' } as const;\nconst paintsInactiveLabel = { property: 'color', slot: 'tab' } as const;\nconst paintsActiveIcon = { property: 'color', slot: 'icon', state: 'selected' } as const;\nconst paintsInactiveIcon = { property: 'color', slot: 'icon' } as const;\n\n/** The parts every variant declares, with their defaults and Compose names. */\nfunction common(\n  set: 'Primary' | 'Secondary',\n  active: 'primary' | 'on-surface',\n): Record<string, ComponentToken> {\n  return {\n    'container-color': {\n      value: color('surface'),\n      description: 'The tab row.',\n      compose: `${set}NavigationTabTokens.ContainerColor`,\n      paints: paintsContainer,\n    },\n    'divider-color': {\n      value: color('outline-variant'),\n      description: \"The 1px divider along the row's bottom edge.\",\n      compose: `${set}NavigationTabTokens.DividerColor`,\n      paints: paintsDivider,\n    },\n    'active-indicator-color': {\n      value: color('primary'),\n      description: \"The selected tab's indicator.\",\n      compose: `${set}NavigationTabTokens.ActiveIndicatorColor`,\n      paints: paintsIndicator,\n    },\n    'with-icon-active-icon-color': {\n      value: color(active),\n      description: \"The selected tab's icon.\",\n      compose: `${set}NavigationTabTokens.ActiveIconColor`,\n      paints: paintsActiveIcon,\n    },\n    'with-icon-inactive-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'An unselected tab’s icon, at rest.',\n      compose: `${set}NavigationTabTokens.InactiveIconColor`,\n      paints: paintsInactiveIcon,\n    },\n  };\n}\n\n/** The tokens of {@link Tabs}: `--md-comp-{primary,secondary}-navigation-tab-<part>`. */\nexport const tabsTokenSet = defineComponentTokens({\n  name: 'md-comp-tabs',\n  tokens: {},\n  scopes: {\n    variant: {\n      primary: {\n        prefix: 'md-comp-primary-navigation-tab',\n        tokens: {\n          ...common('Primary', 'primary'),\n          'with-label-text-active-label-text-color': {\n            value: color('primary'),\n            description: \"The selected tab's label.\",\n            compose: 'PrimaryNavigationTabTokens.ActiveLabelTextColor',\n            paints: paintsActiveLabel,\n          },\n          'with-label-text-inactive-label-text-color': {\n            value: color('on-surface-variant'),\n            description: 'An unselected tab’s label, at rest.',\n            compose: 'PrimaryNavigationTabTokens.InactiveLabelTextColor',\n            paints: paintsInactiveLabel,\n          },\n        },\n        fixed: {\n          'active-label-text-color': color('primary'),\n          'inactive-label-text-color': color('on-surface-variant'),\n        },\n      },\n      secondary: {\n        prefix: 'md-comp-secondary-navigation-tab',\n        tokens: {\n          ...common('Secondary', 'on-surface'),\n          'active-label-text-color': {\n            value: color('on-surface'),\n            description: \"The selected tab's label.\",\n            compose: 'SecondaryNavigationTabTokens.ActiveLabelTextColor',\n            paints: paintsActiveLabel,\n          },\n          'inactive-label-text-color': {\n            value: color('on-surface-variant'),\n            description: 'An unselected tab’s label, at rest.',\n            compose: 'SecondaryNavigationTabTokens.InactiveLabelTextColor',\n            paints: paintsInactiveLabel,\n          },\n        },\n        fixed: {\n          'with-label-text-active-label-text-color': color('on-surface'),\n          'with-label-text-inactive-label-text-color': color('on-surface-variant'),\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;AAaA,MAAM,kBAAkB;CAAE,UAAU;CAAoB,MAAM;AAAO;AAErE,MAAM,gBAAgB;CAAE,UAAU;CAAc,MAAM;AAAO;AAC7D,MAAM,kBAAkB;CAAE,UAAU;CAAoB,MAAM;AAAY;AAC1E,MAAM,oBAAoB;CAAE,UAAU;CAAS,OAAO;AAAW;AACjE,MAAM,sBAAsB;CAAE,UAAU;CAAS,MAAM;AAAM;AAC7D,MAAM,mBAAmB;CAAE,UAAU;CAAS,MAAM;CAAQ,OAAO;AAAW;AAC9E,MAAM,qBAAqB;CAAE,UAAU;CAAS,MAAM;AAAO;;AAG7D,SAAS,OACP,KACA,QACgC;CAChC,OAAO;EACL,mBAAmB;GACjB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;EACV;EACA,iBAAiB;GACf,OAAO,MAAM,iBAAiB;GAC9B,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;EACV;EACA,0BAA0B;GACxB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;EACV;EACA,+BAA+B;GAC7B,OAAO,MAAM,MAAM;GACnB,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;EACV;EACA,iCAAiC;GAC/B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS,GAAG,IAAI;GAChB,QAAQ;EACV;CACF;AACF;;AAGA,MAAa,eAAe,sBAAsB;CAChD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,SAAS;EACP,SAAS;GACP,QAAQ;GACR,QAAQ;IACN,GAAG,OAAO,WAAW,SAAS;IAC9B,2CAA2C;KACzC,OAAO,MAAM,SAAS;KACtB,aAAa;KACb,SAAS;KACT,QAAQ;IACV;IACA,6CAA6C;KAC3C,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;IACV;GACF;GACA,OAAO;IACL,2BAA2B,MAAM,SAAS;IAC1C,6BAA6B,MAAM,oBAAoB;GACzD;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ;IACN,GAAG,OAAO,aAAa,YAAY;IACnC,2BAA2B;KACzB,OAAO,MAAM,YAAY;KACzB,aAAa;KACb,SAAS;KACT,QAAQ;IACV;IACA,6BAA6B;KAC3B,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;IACV;GACF;GACA,OAAO;IACL,2CAA2C,MAAM,YAAY;IAC7D,6CAA6C,MAAM,oBAAoB;GACzE;EACF;CACF,EACF;AACF,CAAC"}

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,175 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { TextFieldVariant } from "./text-field-styles.js";
+import { AriaAttributes, CSSProperties, ReactNode, Ref } from "react";
+import { AriaTextFieldProps } from "react-aria";
+//#region src/components/text-field/TextField.d.ts
+export interface TextFieldClassNames {
+  /** The root element, merged with `className`. */
+  root?: string;
+  /** The filled or outlined container around the label, input and icons. */
+  container?: string;
+  /** The floating label. */
+  label?: string;
+  /** The `<input>` or `<textarea>`. */
+  input?: string;
+  /** The leading icon's 48px box. */
+  leadingIcon?: string;
+  /** The trailing icon's 48px box. */
+  trailingIcon?: string;
+  /** The prefix text before the input. */
+  prefix?: string;
+  /** The suffix text after the input. */
+  suffix?: string;
+  /** The helper text below the field. */
+  supportingText?: string;
+  /** The error message below the field. */
+  errorText?: string;
+  /** The character counter below the field. */
+  counter?: string;
+  /** The built-in error icon. */
+  errorIcon?: string;
+  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */
+  outline?: string;
+  /** The filled field's active indicator, the line along the container's bottom. */
+  activeIndicator?: string;
+}
+/** Words the text field announces; override them for other languages. */
+export interface TextFieldLabels {
+  /** The error icon's name (M3: "Error"). @default "Error" */
+  error: string;
+  /**
+   * What screen readers hear for the character counter (M3 calls it the "character count").
+   * @default (count, max) => `Character count: ${count} of ${max}`
+   */
+  characterCount: (count: number, max: number) => string;
+}
+/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */
+type RenamedAriaProps = 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'label' | 'description' | 'inputElementType' | 'value' | 'defaultValue' | 'onChange' | 'validationState' | 'excludeFromTabOrder';
+interface TextFieldOwnProps extends Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>, Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>, Pick<AriaAttributes, 'aria-expanded' | 'aria-required' | 'aria-invalid' | 'aria-readonly' | 'aria-multiline' | 'aria-placeholder'> {
+  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */
+  id?: string;
+  /** The container style: a filled surface or an outline. @default "filled" */
+  variant?: TextFieldVariant;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).
+   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3
+   * asks for density to be the reader's choice rather than a default, so prefer setting it
+   * there, from a setting.
+   * @default 0
+   */
+  density?: Density;
+  /** The text, when controlled. */
+  value?: string;
+  /** The initial text, when uncontrolled. @default "" */
+  defaultValue?: string;
+  /** Called with the new text on every change. */
+  onChange?: (value: string) => void;
+  /**
+   * Helper text below the field. Replaced visually by the error message when invalid, and
+   * shown in the error colour while the field is invalid.
+   */
+  supportingText?: ReactNode;
+  /**
+   * Shows the supporting text only while the field has focus (M3 allows it "persistently
+   * visible or visible only on focus"). Its space is kept, and screen readers always get it.
+   * @default false
+   */
+  supportingTextOnFocus?: boolean;
+  /** Marks the field invalid (in addition to `validate` and native constraints). */
+  invalid?: boolean;
+  /** A value is required: adds the `*` to the label and native `required` validation. */
+  required?: boolean;
+  /** Disables the field: it can't be focused or edited. @default false */
+  disabled?: boolean;
+  /**
+   * The value can be read and copied but not changed. M3 styles it as a regular field and
+   * asks for it to be "clearly labeled as read-only", e.g. in the supporting text. The root
+   * gets `data-readonly`.
+   * @default false
+   */
+  readOnly?: boolean;
+  /** Decorative icon at the start, in a 48px box. */
+  leadingIcon?: ReactNode;
+  /**
+   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes
+   * the place of the error icon.
+   */
+  trailingIcon?: ReactNode;
+  /**
+   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3
+   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;
+   * `false` turns it off.
+   */
+  errorIcon?: ReactNode | false;
+  /** Text before the input, e.g. "$". Shown once the label floats. */
+  prefix?: ReactNode;
+  /**
+   * What screen readers hear for the prefix, e.g. "US dollars" for "$". The prefix is in the
+   * input's description either way; without this, its visible text is read.
+   */
+  prefixLabel?: string;
+  /** Text after the input, e.g. "kg". Shown once the label floats. */
+  suffix?: ReactNode;
+  /** What screen readers hear for the suffix, e.g. "kilograms" for "kg". */
+  suffixLabel?: string;
+  /**
+   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines
+   * that scrolls vertically, which M3 recommends over growing fields on the web.
+   * @default false
+   */
+  multiline?: boolean;
+  /**
+   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line
+   * field) instead of keeping a fixed height.
+   * @default false
+   */
+  autoGrow?: boolean;
+  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */
+  rows?: number;
+  /** With `autoGrow`: lines after which the field scrolls instead of growing. */
+  maxRows?: number;
+  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */
+  counter?: boolean;
+  /** Words the field announces, for other languages. */
+  labels?: Partial<TextFieldLabels>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. */
+  classNames?: TextFieldClassNames;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** The root element. Use `inputRef` for the input itself. */
+  ref?: Ref<HTMLDivElement>;
+  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */
+  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+}
+/** A visible label, or an accessible name for fields without one. */
+type TextFieldLabel = {
+  /** The visible label, which floats above the input once it has focus or a value. */
+  label: ReactNode;
+} | {
+  label?: undefined;
+  /** Accessible name when there's no visible label. */
+  'aria-label': string;
+} | {
+  label?: undefined;
+  /** The id of the element that names the field, when there's no visible label. */
+  'aria-labelledby': string;
+};
+export type TextFieldProps = TextFieldOwnProps & TextFieldLabel;
+/**
+ * M3 text field: filled or outlined, with a floating label, leading / trailing icons,
+ * prefix and suffix, supporting text, error message and icon, character counter, and a
+ * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,
+ * descriptions, `validate` and native constraints work as in React Aria.
+ *
+ * `className` and `style` go on the root; `inputRef` reaches the input.
+ *
+ * @example
+ * <TextField label="Email" type="email" required supportingText="We never share it." />
+ * <TextField variant="outlined" label="Price" prefix="$" inputMode="decimal" />
+ */
+export declare function TextField(props: TextFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=TextField.d.ts.map