@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,68 @@
+import { tv } from "../../utils/tv.js";
+import { selectionControlStyles } from "../../primitives/selection-control-styles.js";
+/** Variant definitions for {@link Switch}. */
+const switchStyles = tv({
+	extend: selectionControlStyles,
+	slots: {
+		control: [
+			"h-[32px] w-[52px] border-2 border-solid",
+			"border-[color:var(--_md-comp-switch-unselected-track-outline-color)]",
+			"bg-[var(--_md-comp-switch-unselected-track-color)]",
+			"touch-pan-y",
+			"[transition-property:background-color,border-color]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"control-checked:border-[color:var(--_md-comp-switch-selected-track-color)]",
+			"control-checked:bg-[var(--_md-comp-switch-selected-track-color)]",
+			"group-data-disabled/control:border-[color-mix(in_srgb,var(--md-sys-color-on-surface)_12%,var(--md-sys-color-surface))]",
+			"group-data-disabled/control:bg-[color-mix(in_srgb,var(--md-sys-color-surface-container-highest)_12%,var(--md-sys-color-surface))]",
+			"group-data-disabled/control:control-checked:border-transparent",
+			"group-data-disabled/control:control-checked:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_12%,var(--md-sys-color-surface))]",
+			"forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:bg-[Canvas]!",
+			"forced-colors:control-checked:border-[Highlight]! forced-colors:control-checked:bg-[Highlight]!",
+			"forced-colors:group-data-disabled/control:border-[GrayText]!",
+			"forced-colors:group-data-disabled/control:control-checked:border-[GrayText]! forced-colors:group-data-disabled/control:control-checked:bg-[GrayText]!"
+		],
+		stateLayer: [
+			"[--m3-switch-layer:max(32px,calc(40px+var(--md-sys-density,0)*4px))]",
+			"pointer-events-none absolute top-[calc(14px-var(--m3-switch-layer)/2)] start-[calc(var(--m3-thumb-center)-2px-var(--m3-switch-layer)/2)] size-[var(--m3-switch-layer)] rounded-full",
+			"state-layer [--m3-ripple-size:calc(var(--m3-switch-layer)/2)] [--m3-ripple-start:calc(var(--m3-switch-layer)*0.3)]",
+			"[--m3-state-layer-color:var(--md-sys-color-on-surface)]",
+			"data-checked:[--m3-state-layer-color:var(--md-sys-color-primary)]",
+			"[--m3-transition-property:inset-inline-start]",
+			"[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"[--m3-transition-delay:0s]"
+		],
+		thumb: [
+			"absolute top-[calc(14px-var(--m3-thumb-size)/2)] start-[calc(var(--m3-thumb-center)-var(--m3-thumb-size)/2-2px)]",
+			"flex size-[var(--m3-thumb-size)] items-center justify-center rounded-full",
+			"bg-[var(--_md-comp-switch-unselected-handle-color)] text-[color:var(--_md-comp-switch-unselected-icon-color)]",
+			"[transition-property:width,height,top,inset-inline-start,background-color]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-default-easing)]",
+			"group-data-pressed/control:[transition-duration:0s,0s,0s,0s,var(--md-sys-motion-spring-effects-default-duration)]",
+			"group-data-hovered/control:bg-on-surface-variant",
+			"group-data-focus-visible/control:bg-on-surface-variant",
+			"group-data-pressed/control:bg-on-surface-variant",
+			"control-checked:bg-[var(--_md-comp-switch-selected-handle-color)]",
+			"control-checked:text-[color:var(--_md-comp-switch-selected-icon-color)]",
+			"control-checked:group-data-hovered/control:bg-primary-container",
+			"control-checked:group-data-focus-visible/control:bg-primary-container",
+			"control-checked:group-data-pressed/control:bg-primary-container",
+			"group-data-disabled/control:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]",
+			"group-data-disabled/control:text-[color-mix(in_srgb,var(--md-sys-color-surface-container-highest)_38%,var(--md-sys-color-surface))]",
+			"group-data-disabled/control:control-checked:bg-surface",
+			"group-data-disabled/control:control-checked:text-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]",
+			"forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]! forced-colors:text-[Canvas]!",
+			"forced-colors:control-checked:bg-[HighlightText]! forced-colors:control-checked:text-[Highlight]!",
+			"forced-colors:group-data-disabled/control:bg-[GrayText]! forced-colors:group-data-disabled/control:text-[Canvas]!",
+			"forced-colors:group-data-disabled/control:control-checked:bg-[Canvas]! forced-colors:group-data-disabled/control:control-checked:text-[GrayText]!"
+		],
+		icon: "inline-flex size-[16px] items-center justify-center [&>svg]:size-full"
+	},
+	defaultVariants: { kind: "track" }
+});
+//#endregion
+export { switchStyles };
+
+//# sourceMappingURL=switch-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.js","names":[],"sources":["../../../src/components/switch/switch-styles.ts"],"sourcesContent":["import { selectionControlStyles } from '../../primitives/selection-control-styles';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Switch.kt and SwitchTokens): a 52×32px track with a\n * 2px outline; the thumb is 16px (off), 24px (on, or with an icon) and 28px (pressed),\n * centred 16px or 36px from the track's start. Pressing (or dragging) snaps the\n * thumb; releasing animates it on the fast spatial spring. The 40px state layer\n * follows the thumb. Web density (`--md-sys-density`) takes 4px a step off the state layer,\n * to 32px at -2 and -3 so it still rings a pressed 28px thumb (Material Components Web's\n * switch density shrinks only the state layer, 48 → 28px, never the track).\n * Disabled colours are Compose's composites over `surface`. `--m3-thumb-size` and\n * `--m3-thumb-center` are set by the component. The resting track, outline, handle and icon\n * colours come from the switch's component tokens (`switch-tokens.ts`, `--md-comp-switch-*`);\n * a consumer class (`classNames.control`, `classNames.thumb`) still wins in `cn()`. Every\n * class is written out in full.\n */\n\nconst thumbMotion =\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-default-easing)]';\n\n/** Variant definitions for {@link Switch}. */\nexport const switchStyles = tv({\n  extend: selectionControlStyles,\n  slots: {\n    // The control is the track.\n    control: [\n      'h-[32px] w-[52px] border-2 border-solid',\n      'border-[color:var(--_md-comp-switch-unselected-track-outline-color)]',\n      'bg-[var(--_md-comp-switch-unselected-track-color)]',\n      // The thumb can be dragged sideways; vertical swipes still scroll the page.\n      'touch-pan-y',\n      '[transition-property:background-color,border-color]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      'control-checked:border-[color:var(--_md-comp-switch-selected-track-color)]',\n      'control-checked:bg-[var(--_md-comp-switch-selected-track-color)]',\n      'group-data-disabled/control:border-[color-mix(in_srgb,var(--md-sys-color-on-surface)_12%,var(--md-sys-color-surface))]',\n      'group-data-disabled/control:bg-[color-mix(in_srgb,var(--md-sys-color-surface-container-highest)_12%,var(--md-sys-color-surface))]',\n      'group-data-disabled/control:control-checked:border-transparent',\n      'group-data-disabled/control:control-checked:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_12%,var(--md-sys-color-surface))]',\n      // Forced colours: the thumb is a background, which forced colours drop, so the track and\n      // thumb take system colours: an outlined `Canvas` track with a `CanvasText` thumb when\n      // off, a `Highlight` track with a `HighlightText` thumb when on, `GrayText` when disabled.\n      'forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:bg-[Canvas]!',\n      'forced-colors:control-checked:border-[Highlight]! forced-colors:control-checked:bg-[Highlight]!',\n      'forced-colors:group-data-disabled/control:border-[GrayText]!',\n      'forced-colors:group-data-disabled/control:control-checked:border-[GrayText]! forced-colors:group-data-disabled/control:control-checked:bg-[GrayText]!',\n    ],\n    stateLayer: [\n      // 40px, 4px less per density step down to 32px (`--m3-switch-layer`), centred on the\n      // thumb: the track's 2px border is outside the positioning box.\n      '[--m3-switch-layer:max(32px,calc(40px+var(--md-sys-density,0)*4px))]',\n      'pointer-events-none absolute top-[calc(14px-var(--m3-switch-layer)/2)] start-[calc(var(--m3-thumb-center)-2px-var(--m3-switch-layer)/2)] size-[var(--m3-switch-layer)] rounded-full',\n      'state-layer [--m3-ripple-size:calc(var(--m3-switch-layer)/2)] [--m3-ripple-start:calc(var(--m3-switch-layer)*0.3)]',\n      '[--m3-state-layer-color:var(--md-sys-color-on-surface)]',\n      'data-checked:[--m3-state-layer-color:var(--md-sys-color-primary)]',\n      '[--m3-transition-property:inset-inline-start]',\n      '[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      '[--m3-transition-delay:0s]',\n    ],\n    thumb: [\n      'absolute top-[calc(14px-var(--m3-thumb-size)/2)] start-[calc(var(--m3-thumb-center)-var(--m3-thumb-size)/2-2px)]',\n      'flex size-[var(--m3-thumb-size)] items-center justify-center rounded-full',\n      'bg-[var(--_md-comp-switch-unselected-handle-color)] text-[color:var(--_md-comp-switch-unselected-icon-color)]',\n      '[transition-property:width,height,top,inset-inline-start,background-color]',\n      thumbMotion,\n      'group-data-pressed/control:[transition-duration:0s,0s,0s,0s,var(--md-sys-motion-spring-effects-default-duration)]',\n      'group-data-hovered/control:bg-on-surface-variant',\n      'group-data-focus-visible/control:bg-on-surface-variant',\n      'group-data-pressed/control:bg-on-surface-variant',\n      'control-checked:bg-[var(--_md-comp-switch-selected-handle-color)]',\n      'control-checked:text-[color:var(--_md-comp-switch-selected-icon-color)]',\n      'control-checked:group-data-hovered/control:bg-primary-container',\n      'control-checked:group-data-focus-visible/control:bg-primary-container',\n      'control-checked:group-data-pressed/control:bg-primary-container',\n      'group-data-disabled/control:bg-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]',\n      'group-data-disabled/control:text-[color-mix(in_srgb,var(--md-sys-color-surface-container-highest)_38%,var(--md-sys-color-surface))]',\n      'group-data-disabled/control:control-checked:bg-surface',\n      'group-data-disabled/control:control-checked:text-[color-mix(in_srgb,var(--md-sys-color-on-surface)_38%,var(--md-sys-color-surface))]',\n      'forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]! forced-colors:text-[Canvas]!',\n      'forced-colors:control-checked:bg-[HighlightText]! forced-colors:control-checked:text-[Highlight]!',\n      'forced-colors:group-data-disabled/control:bg-[GrayText]! forced-colors:group-data-disabled/control:text-[Canvas]!',\n      'forced-colors:group-data-disabled/control:control-checked:bg-[Canvas]! forced-colors:group-data-disabled/control:control-checked:text-[GrayText]!',\n    ],\n    icon: 'inline-flex size-[16px] items-center justify-center [&>svg]:size-full',\n  },\n  defaultVariants: { kind: 'track' },\n});\n\n/**\n * The variants of {@link switchStyles}, 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 SwitchStyleProps = VariantProps<typeof switchStyles>;\n"],"mappings":";;;AAsBA,MAAa,eAAe,GAAG;CAC7B,QAAQ;CACR,OAAO;EAEL,SAAS;GACP;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAIA;GACA;GACA;GACA;EACF;EACA,YAAY;GAGV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;CACR;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC"}

package/dist/components/switch/switch-thumb.js

@@ -0,0 +1,41 @@
+import { switchStyles } from "./switch-styles.js";
+import { jsx } from "react/jsx-runtime";
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
+});
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	children: /* @__PURE__ */ jsx("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+});
+/** Thumb size and centre in px (Compose `ThumbNode`). */
+function thumbGeometry(selected, pressed, hasIcon) {
+	return {
+		size: pressed ? 28 : selected || hasIcon ? 24 : 16,
+		center: selected ? 36 : 16
+	};
+}
+/**
+* The thumb and its optional icon, placed by `--m3-thumb-size` and `--m3-thumb-center` on
+* the track and styled from a `group/control` ancestor's state attributes. Shared with
+* list items that are switches, so it carries the switch's component tokens
+* (`switch-tokens.ts`) itself.
+*/
+function SwitchThumb({ styles = switchStyles(), icon, className, iconClassName }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-tokens": "md-comp-switch",
+		"data-slot": "thumb",
+		className: styles.thumb({ class: className }),
+		children: icon && /* @__PURE__ */ jsx("span", {
+			className: styles.icon({ class: iconClassName }),
+			children: icon
+		})
+	});
+}
+//#endregion
+export { CheckIcon, CloseIcon, SwitchThumb, thumbGeometry };
+
+//# sourceMappingURL=switch-thumb.js.map

package/dist/components/switch/switch-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-thumb.js","names":[],"sources":["../../../src/components/switch/switch-thumb.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { switchStyles } from './switch-styles';\n\n/** The thumb's resting centres in px, off and on (Compose `ThumbNode`). */\nexport const THUMB_OFF_CENTER = 16;\nexport const THUMB_ON_CENTER = 36;\n\nexport const CheckIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n    <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n  </svg>\n);\n\nexport const CloseIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n    <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n  </svg>\n);\n\n/** Thumb size and centre in px (Compose `ThumbNode`). */\nexport function thumbGeometry(selected: boolean, pressed: boolean, hasIcon: boolean) {\n  const size = pressed ? 28 : selected || hasIcon ? 24 : 16;\n  return { size, center: selected ? THUMB_ON_CENTER : THUMB_OFF_CENTER };\n}\n\n/**\n * The thumb and its optional icon, placed by `--m3-thumb-size` and `--m3-thumb-center` on\n * the track and styled from a `group/control` ancestor's state attributes. Shared with\n * list items that are switches, so it carries the switch's component tokens\n * (`switch-tokens.ts`) itself.\n */\nexport function SwitchThumb({\n  styles = switchStyles(),\n  icon,\n  className,\n  iconClassName,\n}: {\n  styles?: ReturnType<typeof switchStyles>;\n  icon?: ReactNode;\n  className?: string;\n  iconClassName?: string;\n}) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-tokens=\"md-comp-switch\"\n      data-slot=\"thumb\"\n      className={styles.thumb({ class: className })}\n    >\n      {icon && <span className={styles.icon({ class: iconClassName })}>{icon}</span>}\n    </span>\n  );\n}\n"],"mappings":";;AAOA,MAAa,kBACX,oBAAC,OAAD;CAAK,SAAQ;CAAiB,MAAK;CACjC,UAAA,oBAAC,QAAD,EAAM,GAAE,wDAAyD,CAAA;AAC9D,CAAA;AAGP,MAAa,kBACX,oBAAC,OAAD;CAAK,SAAQ;CAAiB,MAAK;CACjC,UAAA,oBAAC,QAAD,EAAM,GAAE,oGAAqG,CAAA;AAC1G,CAAA;;AAIP,SAAgB,cAAc,UAAmB,SAAkB,SAAkB;CAEnF,OAAO;EAAE,MADI,UAAU,KAAK,YAAY,UAAU,KAAK;EACxC,QAAQ,WAAA,KAAA;CAA8C;AACvE;;;;;;;AAQA,SAAgB,YAAY,EAC1B,SAAS,aAAa,GACtB,MACA,WACA,iBAMC;CACD,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,eAAY;EACZ,aAAU;EACV,WAAW,OAAO,MAAM,EAAE,OAAO,UAAU,CAAC;EAE3C,UAAA,QAAQ,oBAAC,QAAD;GAAM,WAAW,OAAO,KAAK,EAAE,OAAO,cAAc,CAAC;GAAI,UAAA;EAAW,CAAA;CACzE,CAAA;AAEV"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/switch/switch-tokens.d.ts
+/** The tokens of {@link Switch}: `--md-comp-switch-<part>`. */
+export declare const switchTokenSet: ComponentTokenSet<"selected-icon-color" | "unselected-icon-color" | "selected-track-color" | "selected-handle-color" | "unselected-track-color" | "unselected-track-outline-color" | "unselected-handle-color">;
+//#endregion
+//# sourceMappingURL=switch-tokens.d.ts.map

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

@@ -0,0 +1,78 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/switch/switch-tokens.ts
+/** The tokens of {@link Switch}: `--md-comp-switch-<part>`. */
+const switchTokenSet = defineComponentTokens({
+	name: "md-comp-switch",
+	tokens: {
+		"selected-track-color": {
+			value: color("primary"),
+			description: "The track of a switch that is on, and its edge.",
+			compose: "SwitchTokens.SelectedTrackColor",
+			paints: {
+				property: "background-color",
+				slot: "track",
+				state: "checked"
+			}
+		},
+		"selected-handle-color": {
+			value: color("on-primary"),
+			description: "The handle of a switch that is on.",
+			compose: "SwitchTokens.SelectedHandleColor",
+			paints: {
+				property: "background-color",
+				slot: "thumb",
+				state: "checked"
+			}
+		},
+		"selected-icon-color": {
+			value: color("on-primary-container"),
+			description: "The icon in the handle of a switch that is on.",
+			compose: "SwitchTokens.SelectedIconColor",
+			paints: {
+				property: "color",
+				slot: "thumb",
+				state: "checked"
+			}
+		},
+		"unselected-track-color": {
+			value: color("surface-container-highest"),
+			description: "The track of a switch that is off.",
+			compose: "SwitchTokens.UnselectedTrackColor",
+			paints: {
+				property: "background-color",
+				slot: "track"
+			}
+		},
+		"unselected-track-outline-color": {
+			value: color("outline"),
+			description: "The 2px edge of the track of a switch that is off.",
+			compose: "SwitchTokens.UnselectedTrackOutlineColor",
+			paints: {
+				property: "border-top-color",
+				slot: "track"
+			}
+		},
+		"unselected-handle-color": {
+			value: color("outline"),
+			description: "The handle of a switch that is off.",
+			compose: "SwitchTokens.UnselectedHandleColor",
+			paints: {
+				property: "background-color",
+				slot: "thumb"
+			}
+		},
+		"unselected-icon-color": {
+			value: color("surface-container-highest"),
+			description: "The icon in the handle of a switch that is off.",
+			compose: "SwitchTokens.UnselectedIconColor",
+			paints: {
+				property: "color",
+				slot: "thumb"
+			}
+		}
+	}
+});
+//#endregion
+export { switchTokenSet };
+
+//# sourceMappingURL=switch-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-tokens.js","names":[],"sources":["../../../src/components/switch/switch-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The switch's component tokens, M3's `md.comp.switch.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's SwitchTokens defaults. The\n * switch's root and the drawn thumb (`switch-thumb.tsx`, which list items that are switches\n * draw too) carry `data-tokens`. Hover, focus, pressed and disabled values stay classes.\n */\n\n/** The tokens of {@link Switch}: `--md-comp-switch-<part>`. */\nexport const switchTokenSet = defineComponentTokens({\n  name: 'md-comp-switch',\n  tokens: {\n    'selected-track-color': {\n      value: color('primary'),\n      description: 'The track of a switch that is on, and its edge.',\n      compose: 'SwitchTokens.SelectedTrackColor',\n      paints: { property: 'background-color', slot: 'track', state: 'checked' },\n    },\n    'selected-handle-color': {\n      value: color('on-primary'),\n      description: 'The handle of a switch that is on.',\n      compose: 'SwitchTokens.SelectedHandleColor',\n      paints: { property: 'background-color', slot: 'thumb', state: 'checked' },\n    },\n    'selected-icon-color': {\n      value: color('on-primary-container'),\n      description: 'The icon in the handle of a switch that is on.',\n      compose: 'SwitchTokens.SelectedIconColor',\n      paints: { property: 'color', slot: 'thumb', state: 'checked' },\n    },\n    'unselected-track-color': {\n      value: color('surface-container-highest'),\n      description: 'The track of a switch that is off.',\n      compose: 'SwitchTokens.UnselectedTrackColor',\n      paints: { property: 'background-color', slot: 'track' },\n    },\n    'unselected-track-outline-color': {\n      value: color('outline'),\n      description: 'The 2px edge of the track of a switch that is off.',\n      compose: 'SwitchTokens.UnselectedTrackOutlineColor',\n      paints: { property: 'border-top-color', slot: 'track' },\n    },\n    'unselected-handle-color': {\n      value: color('outline'),\n      description: 'The handle of a switch that is off.',\n      compose: 'SwitchTokens.UnselectedHandleColor',\n      paints: { property: 'background-color', slot: 'thumb' },\n    },\n    'unselected-icon-color': {\n      value: color('surface-container-highest'),\n      description: 'The icon in the handle of a switch that is off.',\n      compose: 'SwitchTokens.UnselectedIconColor',\n      paints: { property: 'color', slot: 'thumb' },\n    },\n  },\n});\n"],"mappings":";;;AAUA,MAAa,iBAAiB,sBAAsB;CAClD,MAAM;CACN,QAAQ;EACN,wBAAwB;GACtB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAS,OAAO;GAAU;EAC1E;EACA,yBAAyB;GACvB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAS,OAAO;GAAU;EAC1E;EACA,uBAAuB;GACrB,OAAO,MAAM,sBAAsB;GACnC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAS,OAAO;GAAU;EAC/D;EACA,0BAA0B;GACxB,OAAO,MAAM,2BAA2B;GACxC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAQ;EACxD;EACA,kCAAkC;GAChC,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAQ;EACxD;EACA,2BAA2B;GACzB,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAQ;EACxD;EACA,yBAAyB;GACvB,OAAO,MAAM,2BAA2B;GACxC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAQ;EAC7C;CACF;AACF,CAAC"}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,120 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { BadgeProps } from "../badge/Badge.js";
+import { TabsVariant } from "./tabs-styles.js";
+import { CSSProperties, JSX, ReactElement, ReactNode } from "react";
+import { AriaTabListProps } from "react-aria";
+import { Key as Key$1 } from "react-stately";
+//#region src/components/tabs/Tabs.d.ts
+/** Props of a {@link Tab}; the React `key` identifies it for selection. */
+export interface TabProps {
+  /** The tab's label. Optional for icon-only tabs, which then need `aria-label`. */
+  title?: ReactNode;
+  /** Icon above (or before) the label. Hidden from assistive tech. */
+  icon?: ReactNode;
+  /** The panel shown while this tab is selected. Leave it out for tabs that only navigate. */
+  children?: ReactNode;
+  /** Plain-text label when `title` is not a string. */
+  textValue?: string;
+  /**
+   * A {@link Badge} for news in this tab (at most four characters, "+" included). It sits on
+   * a stacked icon, otherwise 4px after the label, and describes the tab to assistive tech.
+   */
+  badge?: ReactElement<BadgeProps>;
+  /** Accessible name for the tab. Required for icon-only tabs, which have no `title`. */
+  'aria-label'?: string;
+}
+/** A tab in {@link Tabs} (a React Stately collection item: identify it with `key`). */
+export declare const Tab: (props: TabProps) => JSX.Element;
+export interface TabsClassNames {
+  /** The outer container, merged with `className`. */
+  root?: string;
+  /** The row's scrolling box around `list` (it carries the row's surface when aligned). */
+  scroller?: string;
+  /** The row of tabs (`role="tablist"`). */
+  list?: string;
+  /** Every tab. */
+  tab?: string;
+  /** Each tab's icon. */
+  icon?: string;
+  /** Each tab's label. */
+  label?: string;
+  /** The active indicator under the selected tab. */
+  indicator?: string;
+  /** The selected tab's panel. */
+  panel?: string;
+}
+export interface TabsProps extends Omit<AriaTabListProps<object>, 'children' | 'orientation' | 'items' | 'isDisabled' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'>, Omit<WrapperRootDOMProps, keyof AriaTabListProps<object>> {
+  /** `Tab` elements. */
+  children: ReactNode;
+  /** The selected tab's `key` (controlled). */
+  value?: Key$1 | null;
+  /** The tab selected at first, when uncontrolled. @default the first enabled tab */
+  defaultValue?: Key$1;
+  /** Called with the newly selected tab's `key`. */
+  onChange?: (key: Key$1) => void;
+  /** Disables every tab (`disabledKeys` disables some). @default false */
+  disabled?: boolean;
+  /**
+   * The keys of tabs that can't be selected. They stay focusable, so keyboard and screen reader
+   * users find them (WAI-ARIA APG).
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * `primary` tabs sit below the top app bar and switch the page's main content;
+   * `secondary` tabs switch content within one section. @default "primary"
+   */
+  variant?: TabsVariant;
+  /** Tabs keep their natural width (at least 90px) and the row scrolls. @default false */
+  scrollable?: boolean;
+  /** Icons above the label (64px tabs) or before it (48px). @default "top" */
+  iconPlacement?: 'top' | 'start';
+  /**
+   * Web density, `0` to `-3`, for the tab row (not the panels): each step takes 4px off the
+   * tabs (48px at 0, 36px at -3; 64px to 52px with icons above). Left out, the tabs take 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;
+  /**
+   * Fixed tabs: `stretch` fills the row; `start` and `center` make every tab as wide as
+   * the widest and place the group at the leading edge or the centre (M3's layout for wide
+   * windows). Ignored when `scrollable`. @default "stretch"
+   */
+  align?: 'stretch' | 'start' | 'center';
+  /**
+   * A horizontal swipe on the panel selects the next or previous tab (mirrored in RTL), as
+   * M3 tabs do. Vertical gestures still scroll. Avoid it when the panel holds swipeable
+   * content such as a map or a carousel. @default false
+   */
+  swipeable?: boolean;
+  /**
+   * `manual`: the arrow keys move focus and Space / Enter selects the focused tab, the M3
+   * keyboard pattern. `automatic` selects on focus. @default "manual"
+   */
+  keyboardActivation?: 'manual' | 'automatic';
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: TabsClassNames;
+  /** Ref to the root `<div>` element. */
+  ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * M3 tabs: a row of tabs with an indicator that slides to the selection, and the selected
+ * tab's panel. Primary tabs mark the selection with a content-width indicator and
+ * `primary` label; secondary tabs with a full-width indicator. Arrow keys move focus
+ * between tabs (mirrored in RTL), Home / End jump to the ends, and Space / Enter selects.
+ *
+ * @example
+ * <Tabs aria-label="Trip">
+ *   <Tab key="flights" title="Flights" icon={<FlightIcon />}>Flight details…</Tab>
+ *   <Tab key="hotels" title="Hotels" icon={<HotelIcon />}>Hotel details…</Tab>
+ * </Tabs>
+ */
+export declare function Tabs(props: TabsProps): JSX.Element;
+//#endregion
+//# sourceMappingURL=Tabs.d.ts.map