@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,164 @@
+import { tv } from "../../utils/tv.js";
+import { buttonVariantClasses, forcedColorClasses, nonBouncingMorph } from "../button/button-styles.js";
+//#region src/components/split-button/split-button-styles.ts
+const half = [
+	"inline-flex shrink-0 cursor-pointer items-center justify-center align-middle min-w-[48px]",
+	"font-plain whitespace-nowrap select-none",
+	"state-layer focus-ring container-motion",
+	nonBouncingMorph,
+	"data-disabled:cursor-default data-disabled:text-on-surface-variant/38 data-disabled:shadow-elevation-0",
+	forcedColorClasses.disabled
+];
+const variant = {
+	filled: {
+		leading: buttonVariantClasses.filled,
+		trailing: buttonVariantClasses.filled
+	},
+	elevated: {
+		leading: buttonVariantClasses.elevated,
+		trailing: buttonVariantClasses.elevated
+	},
+	tonal: {
+		leading: buttonVariantClasses.tonal,
+		trailing: buttonVariantClasses.tonal
+	},
+	outlined: {
+		leading: buttonVariantClasses.outlined,
+		trailing: buttonVariantClasses.outlined
+	}
+};
+/** Variant definitions for {@link SplitButton}; extend them to add variants. */
+const splitButtonStyles = tv({
+	slots: {
+		root: "inline-flex items-center gap-[2px]",
+		leading: half,
+		content: "relative inline-flex min-w-0 items-center justify-center",
+		trailingContent: "relative inline-flex items-center justify-center",
+		label: "min-w-0",
+		icon: "inline-flex shrink-0 items-center justify-center [&>svg]:size-full",
+		trailing: half,
+		menuIcon: [
+			"relative start-(--m3-optical) inline-flex shrink-0 items-center justify-center [&>svg]:size-full",
+			"[transition-property:inset-inline-start,rotate]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"in-data-open:ltr:rotate-180 in-data-open:rtl:-rotate-180",
+			"motion-reduce:transition-none"
+		]
+	},
+	variants: {
+		variant,
+		size: {
+			xs: {
+				root: "h-fit items-stretch",
+				leading: [
+					"min-h-[32px] ps-[calc(12px-var(--m3-button-border,0px))] pe-[calc(10px-var(--m3-button-border,0px))] text-label-large",
+					"rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small",
+					"data-hovered:rounded-e-corner-small data-focus-visible:rounded-e-corner-small data-pressed:rounded-e-corner-small"
+				],
+				content: "gap-[8px]",
+				icon: "size-[20px]",
+				trailing: [
+					"min-h-[32px] ps-[calc(13px-var(--m3-button-border,0px))] pe-[calc(13px-var(--m3-button-border,0px))]",
+					"rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small",
+					"not-data-open:data-hovered:rounded-s-corner-small not-data-open:data-focus-visible:rounded-s-corner-small data-pressed:rounded-s-corner-small",
+					"data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),16px)]",
+					"[--m3-optical:-1px] data-pressed:[--m3-optical:-1px] data-open:not-data-pressed:[--m3-optical:0px]"
+				],
+				menuIcon: "size-[22px]"
+			},
+			sm: {
+				root: "h-fit items-stretch",
+				leading: [
+					"min-h-[40px] ps-[calc(16px-var(--m3-button-border,0px))] pe-[calc(12px-var(--m3-button-border,0px))] text-label-large",
+					"rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small",
+					"data-hovered:rounded-e-corner-medium data-focus-visible:rounded-e-corner-medium data-pressed:rounded-e-corner-medium"
+				],
+				content: "gap-[8px]",
+				icon: "size-[20px]",
+				trailing: [
+					"min-h-[40px] ps-[calc(13px-var(--m3-button-border,0px))] pe-[calc(13px-var(--m3-button-border,0px))]",
+					"rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small",
+					"not-data-open:data-hovered:rounded-s-corner-medium not-data-open:data-focus-visible:rounded-s-corner-medium data-pressed:rounded-s-corner-medium",
+					"data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),20px)]",
+					"[--m3-optical:-1px] data-pressed:[--m3-optical:-1px] data-open:not-data-pressed:[--m3-optical:0px]"
+				],
+				menuIcon: "size-[22px]"
+			},
+			md: {
+				leading: [
+					"h-[56px] ps-[calc(24px-var(--m3-button-border,0px))] pe-[calc(24px-var(--m3-button-border,0px))] text-title-medium",
+					"rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small",
+					"data-hovered:rounded-e-corner-medium data-focus-visible:rounded-e-corner-medium data-pressed:rounded-e-corner-medium"
+				],
+				content: "gap-[8px]",
+				icon: "size-[24px]",
+				trailing: [
+					"h-[56px] ps-[calc(15px-var(--m3-button-border,0px))] pe-[calc(15px-var(--m3-button-border,0px))]",
+					"rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small",
+					"not-data-open:data-hovered:rounded-s-corner-medium not-data-open:data-focus-visible:rounded-s-corner-medium data-pressed:rounded-s-corner-medium",
+					"data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),28px)]",
+					"[--m3-optical:-2px] data-pressed:[--m3-optical:-2px] data-open:not-data-pressed:[--m3-optical:0px]"
+				],
+				menuIcon: "size-[26px]"
+			},
+			lg: {
+				leading: [
+					"h-[96px] ps-[calc(48px-var(--m3-button-border,0px))] pe-[calc(48px-var(--m3-button-border,0px))] font-brand text-headline-small",
+					"rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-small",
+					"data-hovered:rounded-e-corner-large-increased data-focus-visible:rounded-e-corner-large-increased data-pressed:rounded-e-corner-large-increased"
+				],
+				content: "gap-[12px]",
+				icon: "size-[32px]",
+				trailing: [
+					"h-[96px] ps-[calc(29px-var(--m3-button-border,0px))] pe-[calc(29px-var(--m3-button-border,0px))]",
+					"rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-small",
+					"not-data-open:data-hovered:rounded-s-corner-large-increased not-data-open:data-focus-visible:rounded-s-corner-large-increased data-pressed:rounded-s-corner-large-increased",
+					"data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),48px)]",
+					"[--m3-optical:-3px] data-pressed:[--m3-optical:-3px] data-open:not-data-pressed:[--m3-optical:0px]"
+				],
+				menuIcon: "size-[38px]"
+			},
+			xl: {
+				leading: [
+					"h-[136px] ps-[calc(64px-var(--m3-button-border,0px))] pe-[calc(64px-var(--m3-button-border,0px))] font-brand text-headline-large",
+					"rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-medium",
+					"data-hovered:rounded-e-corner-large-increased data-focus-visible:rounded-e-corner-large-increased data-pressed:rounded-e-corner-large-increased"
+				],
+				content: "gap-[16px]",
+				icon: "size-[40px]",
+				trailing: [
+					"h-[136px] ps-[calc(43px-var(--m3-button-border,0px))] pe-[calc(43px-var(--m3-button-border,0px))]",
+					"rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-medium",
+					"not-data-open:data-hovered:rounded-s-corner-large-increased not-data-open:data-focus-visible:rounded-s-corner-large-increased data-pressed:rounded-s-corner-large-increased",
+					"data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),68px)]",
+					"[--m3-optical:-6px] data-pressed:[--m3-optical:-5px] data-open:not-data-pressed:[--m3-optical:0px]"
+				],
+				menuIcon: "size-[50px]"
+			}
+		}
+	},
+	compoundVariants: [{
+		variant: "outlined",
+		size: "lg",
+		class: {
+			leading: "[--m3-button-border:2px]",
+			trailing: "[--m3-button-border:2px]"
+		}
+	}, {
+		variant: "outlined",
+		size: "xl",
+		class: {
+			leading: "[--m3-button-border:3px]",
+			trailing: "[--m3-button-border:3px]"
+		}
+	}],
+	defaultVariants: {
+		variant: "filled",
+		size: "sm"
+	}
+});
+//#endregion
+export { splitButtonStyles };
+
+//# sourceMappingURL=split-button-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-styles.js","names":[],"sources":["../../../src/components/split-button/split-button-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\nimport {\n  buttonVariantClasses,\n  forcedColorClasses,\n  nonBouncingMorph,\n} from '../button/button-styles';\n\n/*\n * Values follow the M3 Expressive split button specs and Compose's\n * SplitButton{XSmall…XLarge}Tokens (2026-10-13):\n *\n * - Two buttons 2px apart, each at least 48px wide, with full outer corners. Inner corners\n *   are 4 / 4 / 4 / 8 / 12px (XS–XL) and change to 8 / 12 / 12 / 20 / 20px when hovered,\n *   keyboard-focused or pressed (\"The inner corners change shape for hovered, focused, and\n *   pressed states\"). Corners move on the default effects spring (`container-motion`,\n *   `nonBouncingMorph`), which never bounces, as Compose's split button (2026-10-15).\n * - XS and S halves are shorter than 48px, so each gets a 48px touch target.\n * - Leading padding 12/10, 16/12, 24, 48, 64px; trailing 13, 13, 15, 29, 43px with a 22 /\n *   22 / 26 / 38 / 50px icon. Padding counts from the container's edge: an outlined half\n *   takes its outline (`--m3-button-border`, as on Button) out of it.\n * - While its menu is open the trailing button is a circle with a persistent 10% layer\n *   of its content colour (Compose draws the outline at the pressed state-layer alpha).\n * - The trailing icon is optically centred, −1 / −1 / −2 / −3 / −6px from the centre at\n *   rest (the spec's \"Menu icon offset when unselected\"), −1 / −1 / −2 / −3 / −5px pressed\n *   (Compose) and centred when open.\n * - The icon turns over inwards (towards the leading button, so the other way in RTL) on\n *   the standard scheme's fast spatial spring whatever the active scheme (\"The split\n *   button uses the standard motion scheme … when rotating the menu button\"): the icon\n *   carries `data-motion=\"standard\"`. Under reduced motion it turns without animating.\n *\n * The XS and S halves take a 32 / 40px minimum height rather than a fixed one, so they grow\n * around text at a large browser font size, as Compose's `heightIn(min)` does (XS\n * 2026-10-13, S 2026-10-15).\n *\n * The outer corners come from the component tokens (`split-button-tokens.ts`,\n * `--md-comp-split-button-<size>-container-shape`), read through the root's resolved\n * corner; the halves' colours come from Button's (`buttonVariantClasses`).\n *\n * Label type and icon sizes follow the Button scale per size; Compose's split button\n * provides `label-large` and leaves larger text to the caller. Every class is written out\n * in full so Tailwind can find it.\n */\n\nconst half = [\n  'inline-flex shrink-0 cursor-pointer items-center justify-center align-middle min-w-[48px]',\n  'font-plain whitespace-nowrap select-none',\n  'state-layer focus-ring container-motion',\n  // Corners on the default effects spring, which never bounces, as Compose's split button\n  // (\"DefaultEffects\", 2026-10-15).\n  nonBouncingMorph,\n  'data-disabled:cursor-default data-disabled:text-on-surface-variant/38 data-disabled:shadow-elevation-0',\n  forcedColorClasses.disabled,\n];\n\nconst variant = {\n  filled: { leading: buttonVariantClasses.filled, trailing: buttonVariantClasses.filled },\n  elevated: { leading: buttonVariantClasses.elevated, trailing: buttonVariantClasses.elevated },\n  tonal: { leading: buttonVariantClasses.tonal, trailing: buttonVariantClasses.tonal },\n  outlined: { leading: buttonVariantClasses.outlined, trailing: buttonVariantClasses.outlined },\n} as const;\n\n/** Variant definitions for {@link SplitButton}; extend them to add variants. */\nexport const splitButtonStyles = tv({\n  slots: {\n    root: 'inline-flex items-center gap-[2px]',\n    leading: half,\n    // Library-owned inner wrappers: they hold the touch targets, never consumer layout.\n    content: 'relative inline-flex min-w-0 items-center justify-center',\n    trailingContent: 'relative inline-flex items-center justify-center',\n    label: 'min-w-0',\n    icon: 'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n    // The checked layer is the state layer's menu-open layer (`MenuTrigger` sets\n    // `data-menu-open`), which adds to the hover and focus layers.\n    trailing: half,\n    // Optically centred: offset by --m3-optical (logical, so it mirrors in RTL).\n    menuIcon: [\n      'relative start-(--m3-optical) inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n      '[transition-property:inset-inline-start,rotate]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'in-data-open:ltr:rotate-180 in-data-open:rtl:-rotate-180',\n      // Reduced motion: the chevron and its offset snap (architecture §6).\n      'motion-reduce:transition-none',\n    ],\n  },\n  variants: {\n    variant,\n    size: {\n      xs: {\n        // The halves have a minimum height and grow with larger text; they stretch to the\n        // taller one, and the root keeps its content height in a stretching parent.\n        root: 'h-fit items-stretch',\n        leading: [\n          'min-h-[32px] ps-[calc(12px-var(--m3-button-border,0px))] pe-[calc(10px-var(--m3-button-border,0px))] text-label-large',\n          'rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small',\n          'data-hovered:rounded-e-corner-small data-focus-visible:rounded-e-corner-small data-pressed:rounded-e-corner-small',\n        ],\n        content: 'gap-[8px]',\n        icon: 'size-[20px]',\n        trailing: [\n          'min-h-[32px] ps-[calc(13px-var(--m3-button-border,0px))] pe-[calc(13px-var(--m3-button-border,0px))]',\n          'rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small',\n          'not-data-open:data-hovered:rounded-s-corner-small not-data-open:data-focus-visible:rounded-s-corner-small data-pressed:rounded-s-corner-small',\n          'data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),16px)]',\n          '[--m3-optical:-1px] data-pressed:[--m3-optical:-1px] data-open:not-data-pressed:[--m3-optical:0px]',\n        ],\n        menuIcon: 'size-[22px]',\n      },\n      sm: {\n        // As at XS: the halves grow with larger text, never overflowing 40px (2026-10-15).\n        root: 'h-fit items-stretch',\n        leading: [\n          'min-h-[40px] ps-[calc(16px-var(--m3-button-border,0px))] pe-[calc(12px-var(--m3-button-border,0px))] text-label-large',\n          'rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small',\n          'data-hovered:rounded-e-corner-medium data-focus-visible:rounded-e-corner-medium data-pressed:rounded-e-corner-medium',\n        ],\n        content: 'gap-[8px]',\n        icon: 'size-[20px]',\n        trailing: [\n          'min-h-[40px] ps-[calc(13px-var(--m3-button-border,0px))] pe-[calc(13px-var(--m3-button-border,0px))]',\n          'rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small',\n          'not-data-open:data-hovered:rounded-s-corner-medium not-data-open:data-focus-visible:rounded-s-corner-medium data-pressed:rounded-s-corner-medium',\n          'data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),20px)]',\n          '[--m3-optical:-1px] data-pressed:[--m3-optical:-1px] data-open:not-data-pressed:[--m3-optical:0px]',\n        ],\n        menuIcon: 'size-[22px]',\n      },\n      md: {\n        leading: [\n          'h-[56px] ps-[calc(24px-var(--m3-button-border,0px))] pe-[calc(24px-var(--m3-button-border,0px))] text-title-medium',\n          'rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-extra-small',\n          'data-hovered:rounded-e-corner-medium data-focus-visible:rounded-e-corner-medium data-pressed:rounded-e-corner-medium',\n        ],\n        content: 'gap-[8px]',\n        icon: 'size-[24px]',\n        trailing: [\n          'h-[56px] ps-[calc(15px-var(--m3-button-border,0px))] pe-[calc(15px-var(--m3-button-border,0px))]',\n          'rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-extra-small',\n          'not-data-open:data-hovered:rounded-s-corner-medium not-data-open:data-focus-visible:rounded-s-corner-medium data-pressed:rounded-s-corner-medium',\n          'data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),28px)]',\n          '[--m3-optical:-2px] data-pressed:[--m3-optical:-2px] data-open:not-data-pressed:[--m3-optical:0px]',\n        ],\n        menuIcon: 'size-[26px]',\n      },\n      lg: {\n        leading: [\n          'h-[96px] ps-[calc(48px-var(--m3-button-border,0px))] pe-[calc(48px-var(--m3-button-border,0px))] font-brand text-headline-small',\n          'rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-small',\n          'data-hovered:rounded-e-corner-large-increased data-focus-visible:rounded-e-corner-large-increased data-pressed:rounded-e-corner-large-increased',\n        ],\n        content: 'gap-[12px]',\n        icon: 'size-[32px]',\n        trailing: [\n          'h-[96px] ps-[calc(29px-var(--m3-button-border,0px))] pe-[calc(29px-var(--m3-button-border,0px))]',\n          'rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-small',\n          'not-data-open:data-hovered:rounded-s-corner-large-increased not-data-open:data-focus-visible:rounded-s-corner-large-increased data-pressed:rounded-s-corner-large-increased',\n          'data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),48px)]',\n          '[--m3-optical:-3px] data-pressed:[--m3-optical:-3px] data-open:not-data-pressed:[--m3-optical:0px]',\n        ],\n        menuIcon: 'size-[38px]',\n      },\n      xl: {\n        leading: [\n          'h-[136px] ps-[calc(64px-var(--m3-button-border,0px))] pe-[calc(64px-var(--m3-button-border,0px))] font-brand text-headline-large',\n          'rounded-s-[var(--_md-comp-split-button-container-shape-capped)] rounded-e-corner-medium',\n          'data-hovered:rounded-e-corner-large-increased data-focus-visible:rounded-e-corner-large-increased data-pressed:rounded-e-corner-large-increased',\n        ],\n        content: 'gap-[16px]',\n        icon: 'size-[40px]',\n        trailing: [\n          'h-[136px] ps-[calc(43px-var(--m3-button-border,0px))] pe-[calc(43px-var(--m3-button-border,0px))]',\n          'rounded-e-[var(--_md-comp-split-button-container-shape-capped)] rounded-s-corner-medium',\n          'not-data-open:data-hovered:rounded-s-corner-large-increased not-data-open:data-focus-visible:rounded-s-corner-large-increased data-pressed:rounded-s-corner-large-increased',\n          'data-open:not-data-pressed:rounded-s-[min(var(--md-sys-shape-corner-full),68px)]',\n          '[--m3-optical:-6px] data-pressed:[--m3-optical:-5px] data-open:not-data-pressed:[--m3-optical:0px]',\n        ],\n        menuIcon: 'size-[50px]',\n      },\n    },\n  },\n  compoundVariants: [\n    // Outline width grows with size, as on Button.\n    {\n      variant: 'outlined',\n      size: 'lg',\n      class: { leading: '[--m3-button-border:2px]', trailing: '[--m3-button-border:2px]' },\n    },\n    {\n      variant: 'outlined',\n      size: 'xl',\n      class: { leading: '[--m3-button-border:3px]', trailing: '[--m3-button-border:3px]' },\n    },\n  ],\n  defaultVariants: { variant: 'filled', size: 'sm' },\n});\n\n/**\n * The variants of {@link splitButtonStyles}, 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 SplitButtonStyleProps = VariantProps<typeof splitButtonStyles>;\nexport type SplitButtonVariant = NonNullable<SplitButtonStyleProps['variant']>;\nexport type SplitButtonSize = NonNullable<SplitButtonStyleProps['size']>;\n"],"mappings":";;;AA2CA,MAAM,OAAO;CACX;CACA;CACA;CAGA;CACA;CACA,mBAAmB;AACrB;AAEA,MAAM,UAAU;CACd,QAAQ;EAAE,SAAS,qBAAqB;EAAQ,UAAU,qBAAqB;CAAO;CACtF,UAAU;EAAE,SAAS,qBAAqB;EAAU,UAAU,qBAAqB;CAAS;CAC5F,OAAO;EAAE,SAAS,qBAAqB;EAAO,UAAU,qBAAqB;CAAM;CACnF,UAAU;EAAE,SAAS,qBAAqB;EAAU,UAAU,qBAAqB;CAAS;AAC9F;;AAGA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EACN,SAAS;EAET,SAAS;EACT,iBAAiB;EACjB,OAAO;EACP,MAAM;EAGN,UAAU;EAEV,UAAU;GACR;GACA;GACA;GACA;GACA;GAEA;EACF;CACF;CACA,UAAU;EACR;EACA,MAAM;GACJ,IAAI;IAGF,MAAM;IACN,SAAS;KACP;KACA;KACA;IACF;IACA,SAAS;IACT,MAAM;IACN,UAAU;KACR;KACA;KACA;KACA;KACA;IACF;IACA,UAAU;GACZ;GACA,IAAI;IAEF,MAAM;IACN,SAAS;KACP;KACA;KACA;IACF;IACA,SAAS;IACT,MAAM;IACN,UAAU;KACR;KACA;KACA;KACA;KACA;IACF;IACA,UAAU;GACZ;GACA,IAAI;IACF,SAAS;KACP;KACA;KACA;IACF;IACA,SAAS;IACT,MAAM;IACN,UAAU;KACR;KACA;KACA;KACA;KACA;IACF;IACA,UAAU;GACZ;GACA,IAAI;IACF,SAAS;KACP;KACA;KACA;IACF;IACA,SAAS;IACT,MAAM;IACN,UAAU;KACR;KACA;KACA;KACA;KACA;IACF;IACA,UAAU;GACZ;GACA,IAAI;IACF,SAAS;KACP;KACA;KACA;IACF;IACA,SAAS;IACT,MAAM;IACN,UAAU;KACR;KACA;KACA;KACA;KACA;IACF;IACA,UAAU;GACZ;EACF;CACF;CACA,kBAAkB,CAEhB;EACE,SAAS;EACT,MAAM;EACN,OAAO;GAAE,SAAS;GAA4B,UAAU;EAA2B;CACrF,GACA;EACE,SAAS;EACT,MAAM;EACN,OAAO;GAAE,SAAS;GAA4B,UAAU;EAA2B;CACrF,CACF;CACA,iBAAiB;EAAE,SAAS;EAAU,MAAM;CAAK;AACnD,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/split-button/split-button-tokens.d.ts
+/** The tokens of {@link SplitButton}: `--md-comp-split-button-<size>-container-shape`. */
+export declare const splitButtonTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=split-button-tokens.d.ts.map

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

@@ -0,0 +1,36 @@
+import { corner, defineComponentTokens, px } from "../../tokens/component.js";
+//#region src/components/split-button/split-button-tokens.ts
+const outerCorner = {
+	property: "border-top-left-radius",
+	slot: "leading"
+};
+/** One size's outer corners: full, capped at half the height of the halves. */
+function size(prefix, compose, halfHeight) {
+	return {
+		prefix,
+		tokens: { "container-shape": {
+			value: corner("full"),
+			description: "The outer corners of both halves: full, at most half the height.",
+			compose: `${compose}.ContainerShape`,
+			paints: outerCorner
+		} },
+		fixed: { "half-height": px(halfHeight) }
+	};
+}
+/** The tokens of {@link SplitButton}: `--md-comp-split-button-<size>-container-shape`. */
+const splitButtonTokenSet = defineComponentTokens({
+	name: "md-comp-split-button",
+	tokens: {},
+	scopes: { size: {
+		xs: size("md-comp-split-button-xsmall", "SplitButtonXSmallTokens", 16),
+		sm: size("md-comp-split-button-small", "SplitButtonSmallTokens", 20),
+		md: size("md-comp-split-button-medium", "SplitButtonMediumTokens", 28),
+		lg: size("md-comp-split-button-large", "SplitButtonLargeTokens", 48),
+		xl: size("md-comp-split-button-xlarge", "SplitButtonXLargeTokens", 68)
+	} },
+	derived: { "container-shape-capped": "min(var(--_md-comp-split-button-container-shape), var(--_md-comp-split-button-half-height))" }
+});
+//#endregion
+export { splitButtonTokenSet };
+
+//# sourceMappingURL=split-button-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-tokens.js","names":[],"sources":["../../../src/components/split-button/split-button-tokens.ts"],"sourcesContent":["import {\n  corner,\n  defineComponentTokens,\n  px,\n  type ComponentTokenScope,\n  type TokenPaints,\n} from '../../tokens/component';\n\n/*\n * The split button's component tokens, M3 Expressive's `md.comp.split-button.<size>.*`\n * names (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * defaults: the outer corners of its two halves, per size. The root carries\n * `data-tokens=\"md-comp-split-button\"`, `data-variant` and `data-size`; the halves inherit\n * the resolved corner. Their colours are Button's (`md-comp-button`): each half carries\n * `data-tokens=\"md-comp-button\"` and the variant, so `--md-comp-button-filled-*` restyles\n * them too. The inner corners and their state changes stay classes.\n */\n\n// The leading half's outer corner (its start side), in LTR.\nconst outerCorner: TokenPaints = { property: 'border-top-left-radius', slot: 'leading' };\n\n/** One size's outer corners: full, capped at half the height of the halves. */\nfunction size(prefix: string, compose: string, halfHeight: number): ComponentTokenScope {\n  return {\n    prefix,\n    tokens: {\n      'container-shape': {\n        value: corner('full'),\n        description: 'The outer corners of both halves: full, at most half the height.',\n        compose: `${compose}.ContainerShape`,\n        paints: outerCorner,\n      },\n    },\n    fixed: { 'half-height': px(halfHeight) },\n  };\n}\n\n/** The tokens of {@link SplitButton}: `--md-comp-split-button-<size>-container-shape`. */\nexport const splitButtonTokenSet = defineComponentTokens({\n  name: 'md-comp-split-button',\n  tokens: {},\n  scopes: {\n    size: {\n      xs: size('md-comp-split-button-xsmall', 'SplitButtonXSmallTokens', 16),\n      sm: size('md-comp-split-button-small', 'SplitButtonSmallTokens', 20),\n      md: size('md-comp-split-button-medium', 'SplitButtonMediumTokens', 28),\n      lg: size('md-comp-split-button-large', 'SplitButtonLargeTokens', 48),\n      xl: size('md-comp-split-button-xlarge', 'SplitButtonXLargeTokens', 68),\n    },\n  },\n  derived: {\n    // Full corners stop at half the height, so the corner transitions interpolate smoothly.\n    'container-shape-capped':\n      'min(var(--_md-comp-split-button-container-shape), var(--_md-comp-split-button-half-height))',\n  },\n});\n"],"mappings":";;AAmBA,MAAM,cAA2B;CAAE,UAAU;CAA0B,MAAM;AAAU;;AAGvF,SAAS,KAAK,QAAgB,SAAiB,YAAyC;CACtF,OAAO;EACL;EACA,QAAQ,EACN,mBAAmB;GACjB,OAAO,OAAO,MAAM;GACpB,aAAa;GACb,SAAS,GAAG,QAAQ;GACpB,QAAQ;EACV,EACF;EACA,OAAO,EAAE,eAAe,GAAG,UAAU,EAAE;CACzC;AACF;;AAGA,MAAa,sBAAsB,sBAAsB;CACvD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,MAAM;EACJ,IAAI,KAAK,+BAA+B,2BAA2B,EAAE;EACrE,IAAI,KAAK,8BAA8B,0BAA0B,EAAE;EACnE,IAAI,KAAK,+BAA+B,2BAA2B,EAAE;EACrE,IAAI,KAAK,8BAA8B,0BAA0B,EAAE;EACnE,IAAI,KAAK,+BAA+B,2BAA2B,EAAE;CACvE,EACF;CACA,SAAS,EAEP,0BACE,8FACJ;AACF,CAAC"}

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,82 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { SelectionControlClassNames } from "../../primitives/SelectionControl.js";
+import { AriaAttributes, CSSProperties, ReactNode, Ref } from "react";
+import { AriaSwitchProps } from "react-aria";
+//#region src/components/switch/Switch.d.ts
+export interface SwitchClassNames extends SelectionControlClassNames {
+  /** The thumb, the circle that slides along the track. */
+  thumb?: string;
+  /** The icon inside the thumb. */
+  icon?: string;
+  /** The round state layer around the thumb (hover, focus and press). */
+  stateLayer?: string;
+}
+type RenamedAriaProps = 'isSelected' | 'defaultSelected' | 'onChange' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'children' | 'validationState' | 'excludeFromTabOrder';
+interface SwitchOwnProps extends Omit<AriaSwitchProps, RenamedAriaProps>, Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaSwitchProps>, Pick<AriaAttributes, 'aria-expanded' | 'aria-required' | 'aria-invalid' | 'aria-readonly'> {
+  /** Controlled on state (`checked`, as an HTML checkbox). */
+  checked?: boolean;
+  /** Initial on state when uncontrolled. */
+  defaultChecked?: boolean;
+  /** Called when the user switches it on or off. */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Turns the switch off: it can't be changed or focused. @default false */
+  disabled?: boolean;
+  /** The switch can be focused but not changed. @default false */
+  readOnly?: boolean;
+  /**
+   * The switch must be on (`aria-required`; with `validationBehavior="native"`, the form can't
+   * submit until it is). @default false
+   */
+  required?: boolean;
+  /** Marks the switch invalid for assistive tech (`aria-invalid`). @default false */
+  invalid?: boolean;
+  /** Shows the default check / close icons in the thumb. @default false */
+  icons?: boolean;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the round state layer around the thumb
+   * (40px at 0, 32px at -2 and -3, so it still shows around a pressed 28px thumb); the track
+   * stays 52 × 32px and the touch target 48px. Left out, the switch 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;
+  /** Icon in the thumb while checked (overrides the default check). */
+  checkedIcon?: ReactNode;
+  /** Icon in the thumb while unchecked (overrides the default close). */
+  uncheckedIcon?: ReactNode;
+  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: SwitchClassNames;
+  /** Inline styles for the root `<label>`. */
+  style?: CSSProperties;
+  /** The root `<label>`. Use `inputRef` for the switch input. */
+  ref?: Ref<HTMLLabelElement>;
+  /** Ref to the visually hidden switch `<input>`. */
+  inputRef?: Ref<HTMLInputElement>;
+}
+type SwitchLabel = {
+  children: ReactNode;
+} | {
+  children?: undefined;
+  'aria-label': string;
+} | {
+  children?: undefined;
+  'aria-labelledby': string;
+};
+export type SwitchProps = SwitchOwnProps & SwitchLabel;
+/**
+ * M3 switch: a track and a thumb that grows and slides when switched on (by a tap, a
+ * drag, Space or Enter), optional icons in the thumb, a state layer that follows the
+ * thumb and a 48px touch target.
+ * A visually hidden native input with `role="switch"` (React Aria `useSwitch`) keeps
+ * forms and assistive tech working.
+ *
+ * @example
+ * <Switch defaultChecked icons>Wi-Fi</Switch>
+ */
+export declare function Switch({ checked, defaultChecked, onCheckedChange, disabled, readOnly, required, invalid, icons, checkedIcon, uncheckedIcon, density, className, classNames, style, ref, inputRef, children, ...otherProps }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/switch/Switch.js

@@ -0,0 +1,165 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { restartRipple, useRippleHold } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { pickWidgetAria, splitRootProps } from "../../utils/root-props.js";
+import { SelectionControl } from "../../primitives/SelectionControl.js";
+import { switchStyles } from "./switch-styles.js";
+import { CheckIcon, CloseIcon, SwitchThumb, thumbGeometry } from "./switch-thumb.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useFocusRing, useHover, useObjectRef, useSwitch } from "react-aria";
+import { useToggleState } from "react-stately";
+//#region src/components/switch/Switch.tsx
+/** How far (px) a press moves before it becomes a drag. */
+const DRAG_SLOP = 3;
+/** Whether a thumb dragged to `center` (px) is in the on half. */
+const isOnAt = (center) => center > 26;
+/**
+* M3 switch: a track and a thumb that grows and slides when switched on (by a tap, a
+* drag, Space or Enter), optional icons in the thumb, a state layer that follows the
+* thumb and a 48px touch target.
+* A visually hidden native input with `role="switch"` (React Aria `useSwitch`) keeps
+* forms and assistive tech working.
+*
+* @example
+* <Switch defaultChecked icons>Wi-Fi</Switch>
+*/
+function Switch({ checked, defaultChecked, onCheckedChange, disabled = false, readOnly, required, invalid, icons = false, checkedIcon, uncheckedIcon, density, className, classNames, style, ref, inputRef, children, ...otherProps }) {
+	const { root: data, rest } = splitRootProps(otherProps, { wrapper: true });
+	const domInputRef = useObjectRef(inputRef);
+	const options = {
+		...rest,
+		children,
+		isSelected: checked,
+		defaultSelected: defaultChecked,
+		onChange: onCheckedChange,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isRequired: required,
+		isInvalid: invalid
+	};
+	const toggleState = useToggleState(options);
+	const [dragCenter, setDragCenter] = useState(null);
+	const [skipToggle, setSkipToggle] = useState(false);
+	const state = {
+		...toggleState,
+		toggle: () => skipToggle ? setSkipToggle(false) : toggleState.toggle()
+	};
+	const stopDrag = useRef(null);
+	useEffect(() => () => stopDrag.current?.(), []);
+	const dragProps = { onPointerDown: (event) => {
+		if (event.button !== 0 || disabled || readOnly) return;
+		const { pointerId } = event;
+		const start = state.isSelected ? 36 : 16;
+		const sign = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+		const startX = event.clientX;
+		let center = null;
+		const move = (moveEvent) => {
+			if (moveEvent.pointerId !== pointerId) return;
+			const offset = (moveEvent.clientX - startX) * sign;
+			if (center === null && Math.abs(offset) < DRAG_SLOP) return;
+			center = Math.min(36, Math.max(16, start + offset));
+			setDragCenter(center);
+		};
+		const remove = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", end);
+			window.removeEventListener("pointercancel", end);
+			stopDrag.current = null;
+		};
+		const end = (endEvent) => {
+			if (endEvent.pointerId !== pointerId) return;
+			remove();
+			setDragCenter(null);
+			if (center === null) return;
+			if (endEvent.type !== "pointerup") return;
+			state.setSelected(isOnAt(center));
+			setSkipToggle(true);
+			setTimeout(() => setSkipToggle(false), 100);
+		};
+		stopDrag.current?.();
+		stopDrag.current = remove;
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", end);
+		window.addEventListener("pointercancel", end);
+	} };
+	const { inputProps, labelProps, isSelected, isPressed } = useSwitch(options, state, domInputRef);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+	const icon = isSelected ? checkedIcon ?? (icons ? /* @__PURE__ */ jsx(CheckIcon, {}) : null) : uncheckedIcon ?? (icons ? /* @__PURE__ */ jsx(CloseIcon, {}) : null);
+	const [enterPressed, setEnterPressed] = useState(false);
+	const enterProps = {
+		onKeyDown: (event) => {
+			if (event.key !== "Enter") return;
+			event.preventDefault();
+			if (event.repeat || disabled || readOnly) return;
+			const control = event.currentTarget.closest("[data-selection-control]");
+			if (control) restartRipple(control);
+			setEnterPressed(true);
+		},
+		onKeyUp: (event) => {
+			if (event.key !== "Enter" || !enterPressed) return;
+			setEnterPressed(false);
+			toggleState.toggle();
+		},
+		onBlur: () => setEnterPressed(false)
+	};
+	const dragging = dragCenter !== null;
+	const pressed = (isPressed || enterPressed || dragging) && !disabled;
+	const rippling = useRippleHold(pressed);
+	const geometry = thumbGeometry(isSelected, pressed, Boolean(icon));
+	const { size } = geometry;
+	const center = dragCenter ?? geometry.center;
+	const stateAttributes = {
+		"data-checked": isSelected || void 0,
+		"data-disabled": disabled || void 0,
+		"data-hovered": isHovered && !disabled || void 0,
+		"data-pressed": pressed || void 0,
+		"data-dragged": dragging || void 0,
+		"data-rippling": rippling || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-has-icon": Boolean(icon) || void 0
+	};
+	const styles = switchStyles();
+	const trackProps = {
+		...dragProps,
+		"data-slot": "track"
+	};
+	return /* @__PURE__ */ jsx(SelectionControl, {
+		ref,
+		rootProps: mergeProps(labelProps, hoverProps),
+		inputProps: mergeProps(pickWidgetAria(rest), inputProps, focusProps, enterProps),
+		inputRef: domInputRef,
+		rootData: {
+			...data,
+			...densityAttribute(density),
+			"data-tokens": mergeDataTokens("md-comp-switch", data)
+		},
+		state: stateAttributes,
+		styles,
+		className,
+		classNames,
+		style,
+		controlProps: trackProps,
+		controlStyle: {
+			"--m3-thumb-size": `${size}px`,
+			"--m3-thumb-center": `${center}px`
+		},
+		indicator: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			...stateAttributes,
+			className: styles.stateLayer({ class: classNames?.stateLayer })
+		}), /* @__PURE__ */ jsx(SwitchThumb, {
+			styles,
+			icon,
+			className: classNames?.thumb,
+			iconClassName: classNames?.icon
+		})] }),
+		children
+	});
+}
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useSwitch,\n  type AriaSwitchProps,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport {\n  SelectionControl,\n  type SelectionControlClassNames,\n} from '../../primitives/SelectionControl';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { switchStyles } from './switch-styles';\nimport { restartRipple, useRippleHold } from '../../primitives/use-m3-interaction';\nimport {\n  CheckIcon,\n  CloseIcon,\n  SwitchThumb,\n  THUMB_OFF_CENTER,\n  THUMB_ON_CENTER,\n  thumbGeometry,\n} from './switch-thumb';\n\nexport interface SwitchClassNames extends SelectionControlClassNames {\n  /** The thumb, the circle that slides along the track. */\n  thumb?: string;\n  /** The icon inside the thumb. */\n  icon?: string;\n  /** The round state layer around the thumb (hover, focus and press). */\n  stateLayer?: string;\n}\n\ntype RenamedAriaProps =\n  | 'isSelected'\n  | 'defaultSelected'\n  | 'onChange'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'children'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface SwitchOwnProps\n  extends\n    Omit<AriaSwitchProps, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaSwitchProps>,\n    // The input's own state attributes go to it, with React Aria's `aria-controls`.\n    Pick<AriaAttributes, 'aria-expanded' | 'aria-required' | 'aria-invalid' | 'aria-readonly'> {\n  /** Controlled on state (`checked`, as an HTML checkbox). */\n  checked?: boolean;\n  /** Initial on state when uncontrolled. */\n  defaultChecked?: boolean;\n  /** Called when the user switches it on or off. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Turns the switch off: it can't be changed or focused. @default false */\n  disabled?: boolean;\n  /** The switch can be focused but not changed. @default false */\n  readOnly?: boolean;\n  /**\n   * The switch must be on (`aria-required`; with `validationBehavior=\"native\"`, the form can't\n   * submit until it is). @default false\n   */\n  required?: boolean;\n  /** Marks the switch invalid for assistive tech (`aria-invalid`). @default false */\n  invalid?: boolean;\n  /** Shows the default check / close icons in the thumb. @default false */\n  icons?: boolean;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the round state layer around the thumb\n   * (40px at 0, 32px at -2 and -3, so it still shows around a pressed 28px thumb); the track\n   * stays 52 × 32px and the touch target 48px. Left out, the switch takes the density of the\n   * nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n   * rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** Icon in the thumb while checked (overrides the default check). */\n  checkedIcon?: ReactNode;\n  /** Icon in the thumb while unchecked (overrides the default close). */\n  uncheckedIcon?: ReactNode;\n  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: SwitchClassNames;\n  /** Inline styles for the root `<label>`. */\n  style?: CSSProperties;\n  /** The root `<label>`. Use `inputRef` for the switch input. */\n  ref?: Ref<HTMLLabelElement>;\n  /** Ref to the visually hidden switch `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n}\n\ntype SwitchLabel =\n  | { children: ReactNode }\n  | { children?: undefined; 'aria-label': string }\n  | { children?: undefined; 'aria-labelledby': string };\n\nexport type SwitchProps = SwitchOwnProps & SwitchLabel;\n/** How far (px) a press moves before it becomes a drag. */\nconst DRAG_SLOP = 3;\n\n/** Whether a thumb dragged to `center` (px) is in the on half. */\nconst isOnAt = (center: number) => center > (THUMB_ON_CENTER + THUMB_OFF_CENTER) / 2;\n/**\n * M3 switch: a track and a thumb that grows and slides when switched on (by a tap, a\n * drag, Space or Enter), optional icons in the thumb, a state layer that follows the\n * thumb and a 48px touch target.\n * A visually hidden native input with `role=\"switch\"` (React Aria `useSwitch`) keeps\n * forms and assistive tech working.\n *\n * @example\n * <Switch defaultChecked icons>Wi-Fi</Switch>\n */\nexport function Switch({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled = false,\n  readOnly,\n  required,\n  invalid,\n  icons = false,\n  checkedIcon,\n  uncheckedIcon,\n  density,\n  className,\n  classNames,\n  style,\n  ref,\n  inputRef,\n  children,\n  ...otherProps\n}: SwitchProps) {\n  // DOM attributes for the whole control go on the root; the rest goes to the input.\n  const { root: data, rest } = splitRootProps(otherProps, { wrapper: true });\n  const domInputRef = useObjectRef(inputRef);\n  const options: AriaSwitchProps = {\n    ...rest,\n    children,\n    isSelected: checked,\n    defaultSelected: defaultChecked,\n    onChange: onCheckedChange,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n    isInvalid: invalid,\n  };\n  const toggleState = useToggleState(options);\n  // Dragging the thumb (M3: \"Touch: Tap, Drag\"). The thumb follows the pointer between its\n  // off and on centres; releasing sets the switch from the half the thumb is in. React\n  // Aria's press then toggles on the click that follows, which `skipToggle` absorbs (it\n  // lapses after React Aria's own 80ms click fallback, for a release outside the switch).\n  const [dragCenter, setDragCenter] = useState<number | null>(null);\n  const [skipToggle, setSkipToggle] = useState(false);\n  const state = {\n    ...toggleState,\n    toggle: () => (skipToggle ? setSkipToggle(false) : toggleState.toggle()),\n  };\n  const stopDrag = useRef<(() => void) | null>(null);\n  useEffect(() => () => stopDrag.current?.(), []);\n  // Window listeners rather than React Aria `useMove`, which stops the pointer-down from\n  // reaching the label's press handling (a tap on the track must still toggle).\n  const dragProps = {\n    onPointerDown: (event: PointerEvent<HTMLSpanElement>) => {\n      if (event.button !== 0 || disabled || readOnly) return;\n      const { pointerId } = event;\n      const start = state.isSelected ? THUMB_ON_CENTER : THUMB_OFF_CENTER;\n      const sign = getComputedStyle(event.currentTarget).direction === 'rtl' ? -1 : 1;\n      const startX = event.clientX;\n      let center: number | null = null;\n      const move = (moveEvent: globalThis.PointerEvent) => {\n        if (moveEvent.pointerId !== pointerId) return;\n        const offset = (moveEvent.clientX - startX) * sign;\n        if (center === null && Math.abs(offset) < DRAG_SLOP) return;\n        center = Math.min(THUMB_ON_CENTER, Math.max(THUMB_OFF_CENTER, start + offset));\n        setDragCenter(center);\n      };\n      const remove = () => {\n        window.removeEventListener('pointermove', move);\n        window.removeEventListener('pointerup', end);\n        window.removeEventListener('pointercancel', end);\n        stopDrag.current = null;\n      };\n      const end = (endEvent: globalThis.PointerEvent) => {\n        if (endEvent.pointerId !== pointerId) return;\n        remove();\n        setDragCenter(null);\n        if (center === null) return;\n        if (endEvent.type !== 'pointerup') return;\n        state.setSelected(isOnAt(center));\n        setSkipToggle(true);\n        setTimeout(() => setSkipToggle(false), 100);\n      };\n      stopDrag.current?.();\n      stopDrag.current = remove;\n      window.addEventListener('pointermove', move);\n      window.addEventListener('pointerup', end);\n      window.addEventListener('pointercancel', end);\n    },\n  };\n  const { inputProps, labelProps, isSelected, isPressed } = useSwitch(options, state, domInputRef);\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const icon = isSelected\n    ? (checkedIcon ?? (icons ? <CheckIcon /> : null))\n    : (uncheckedIcon ?? (icons ? <CloseIcon /> : null));\n  // Browsers toggle a checkbox input on Space only; M3 also toggles a switch on Enter.\n  // Enter presses like Space does: the thumb grows on key down and the switch toggles on\n  // key up.\n  const [enterPressed, setEnterPressed] = useState(false);\n  const enterProps = {\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') return;\n      event.preventDefault();\n      if (event.repeat || disabled || readOnly) return;\n      const control = event.currentTarget.closest<HTMLElement>('[data-selection-control]');\n      if (control) restartRipple(control);\n      setEnterPressed(true);\n    },\n    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter' || !enterPressed) return;\n      setEnterPressed(false);\n      toggleState.toggle();\n    },\n    onBlur: () => setEnterPressed(false),\n  };\n  const dragging = dragCenter !== null;\n  const pressed = (isPressed || enterPressed || dragging) && !disabled;\n  const rippling = useRippleHold(pressed);\n  const geometry = thumbGeometry(isSelected, pressed, Boolean(icon));\n  const { size } = geometry;\n  const center = dragCenter ?? geometry.center;\n  const stateAttributes = {\n    'data-checked': isSelected || undefined,\n    'data-disabled': disabled || undefined,\n    'data-hovered': (isHovered && !disabled) || undefined,\n    'data-pressed': pressed || undefined,\n    'data-dragged': dragging || undefined,\n    'data-rippling': rippling || undefined,\n    'data-focus-visible': isFocusVisible || undefined,\n    'data-has-icon': Boolean(icon) || undefined,\n  };\n  const styles = switchStyles();\n  // The track is the control; the switch's tokens name it as a part.\n  const trackProps = { ...dragProps, 'data-slot': 'track' };\n\n  return (\n    <SelectionControl\n      ref={ref}\n      rootProps={mergeProps(labelProps, hoverProps)}\n      inputProps={mergeProps(pickWidgetAria(rest), inputProps, focusProps, enterProps)}\n      inputRef={domInputRef}\n      rootData={{\n        ...data,\n        ...densityAttribute(density),\n        'data-tokens': mergeDataTokens('md-comp-switch', data),\n      }}\n      state={stateAttributes}\n      styles={styles}\n      className={className}\n      classNames={classNames}\n      style={style}\n      controlProps={trackProps}\n      controlStyle={\n        {\n          '--m3-thumb-size': `${size}px`,\n          '--m3-thumb-center': `${center}px`,\n        } as CSSProperties\n      }\n      indicator={\n        <>\n          <span\n            aria-hidden=\"true\"\n            {...stateAttributes}\n            className={styles.stateLayer({ class: classNames?.stateLayer })}\n          />\n          <SwitchThumb\n            styles={styles}\n            icon={icon}\n            className={classNames?.thumb}\n            iconClassName={classNames?.icon}\n          />\n        </>\n      }\n    >\n      {children}\n    </SelectionControl>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/switch/switch-styles.d.ts
+/** Variant definitions for {@link Switch}. */
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      control?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      stateLayer?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  kind: {
+    circle: import("tailwind-variants").ClassValue | {
+      control?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      stateLayer?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+    };
+    track: import("tailwind-variants").ClassValue | {
+      control?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+      stateLayer?: import("tailwind-variants").ClassValue;
+      thumb?: import("tailwind-variants").ClassValue;
+    };
+  };
+}, {
+  control: string[];
+  stateLayer: string[];
+  thumb: string[];
+  icon: string;
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnType<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}>>>;
+/**
+ * The variants of {@link switchStyles}, 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 SwitchStyleProps = VariantProps<typeof switchStyles>;
+//#endregion
+//# sourceMappingURL=switch-styles.d.ts.map