@kanso-labs/kanso-ui 0.40.9 → 0.41.0

package/dist/components/segmented-button/index.js

@@ -8,7 +8,7 @@ import { focus } from "../../styles/focus.js";
 import { useToggleGroupDisabled } from "../../hooks/useToggleGroupDisabled.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
-import { createContext, createElement, useContext } from "react";
+import { createContext, createElement, useContext, useLayoutEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-components";
 //#region src/components/segmented-button/index.tsx
@@ -61,32 +61,8 @@ function stepOf(key, rtl) {
 }
 `${spacing.sm}`;
 `${spacing.sm}`;
+`${spacing.md}${spacing.sm}`;
 const styles = {
-	label: {
-		k6CgDc: "x12w9bfk",
-		k7Eaqz: "xeuugli",
-		kVQacm: "xb3r6kr",
-		kg5iWk: "xlyipyv",
-		kIyJzY: "x1qno0dh",
-		k1ekBW: "x1ve1rmq",
-		kAMwcw: "xpc4ca7",
-		khDVqt: "xuxw1ft",
-		$$css: true
-	},
-	labelChosen: {
-		kAXs8y: "x1g12otp",
-		$$css: true
-	},
-	labelReserved: {
-		k71WvV: "x184gv5z",
-		keTefX: "x1mjqfaz",
-		$$css: true
-	},
-	labelShifted: {
-		k71WvV: "x14z9mp",
-		keTefX: "x1c5lys2",
-		$$css: true
-	},
 	segment: {
 		"--segment-indicator-radius-end": "x32u3vw x111hk5a",
 		"--segment-indicator-radius-start": "xatjrgw x1syycwj",
@@ -117,7 +93,7 @@ const styles = {
 		kLWn49: "x1lz68p4",
 		k7Eaqz: "xeuugli",
 		k8WAf4: "xt970qd",
-		kg3NbH: "x18fpw6u",
+		kg3NbH: "xn60lsn",
 		kVAEAm: "x1n2onr6",
 		kIyJzY: "x1qno0dh",
 		k1ekBW: "xt3l3uh",
@@ -141,6 +117,34 @@ const styles = {
 	segmentUnselected: {
 		kMwMTN: "x139gbkf",
 		$$css: true
+	},
+	spacer: {
+		k6CgDc: "x12w9bfk",
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kmuXW: "xs83m0k",
+		kzqmXN: "xbraz1g",
+		kjj79g: "x13a6bvl",
+		k7Eaqz: "xeuugli",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x1pha8k4",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	spacerHalf: {
+		kzqmXN: "x154zo0h",
+		$$css: true
+	},
+	spacerHolding: {
+		kzqmXN: "x1n85vuq",
+		k7Eaqz: "x36sgg7",
+		$$css: true
+	},
+	spacerIcon: {
+		kzqmXN: "x1iuy3mw",
+		k7Eaqz: "x16xo4sp",
+		$$css: true
 	}
 };
 /**
@@ -150,11 +154,14 @@ const styles = {
 * type be inferred, since `ReactNode` is a union that includes a promise and
 * an inferred one has to be `async`.
 */
-function glyphFor(state, icon, showSelectedIcon) {
-	if (state.isSelected && showSelectedIcon) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
+function glyphFor(state, icon, marked) {
+	if (state.isSelected && marked) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
 	return icon ?? null;
 }
-function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
+function hasLabel(children) {
+	return children !== void 0 && children !== null && children !== false && children !== "";
+}
+function indicatorClassName(isDisabled, selectionMode, marked) {
 	return (state) => ({
 		0: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd" },
 		8: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7" },
@@ -172,14 +179,16 @@ function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
 		11: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
 		7: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
 		15: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" }
-	})[!!(selectionMode === "multiple") << 3 | !!!showSelectedIcon << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
+	})[!!(selectionMode === "multiple") << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
 }
-function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon) {
-	const reserves = showSelectedIcon || icon !== void 0;
+function segmentContent(children, icon, ripple, selectionMode, marked, labelRef, labelTitle) {
+	const labelled = hasLabel(children);
+	const reserves = marked || icon !== void 0;
 	return (state) => {
-		const glyph = glyphFor(state, icon, showSelectedIcon);
+		const glyph = glyphFor(state, icon, marked);
+		const drawn = glyph !== null;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, showSelectedIcon) }),
+			/* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, marked) }),
 			/* @__PURE__ */ jsx("span", { ...{
 				0: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4" },
 				4: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb" },
@@ -190,17 +199,33 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
 				3: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" },
 				7: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" }
 			}[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0] }),
-			reserves && /* @__PURE__ */ jsx("span", {
-				...{
-					0: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7" },
-					1: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a" }
-				}[!!(glyph !== null) << 0],
-				children: glyph
-			}),
 			/* @__PURE__ */ jsx("span", {
-				...props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted), state.isSelected && !state.isDisabled && styles.labelChosen),
+				...props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf)),
+				children: reserves && /* @__PURE__ */ jsx("span", {
+					...{
+						0: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7" },
+						2: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a" },
+						1: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3" },
+						3: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3" }
+					}[!!drawn << 1 | !!(drawn && labelled) << 0],
+					children: glyph
+				})
+			}),
+			labelled && /* @__PURE__ */ jsx("span", {
+				ref: labelRef,
+				title: labelTitle,
+				...{
+					0: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft" },
+					2: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8" },
+					1: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp" },
+					3: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp" }
+				}[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0],
 				children
 			}),
+			/* @__PURE__ */ jsx("span", { ...{
+				0: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7" },
+				1: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h" }
+			}[!!(reserves && !drawn) << 0] }),
 			ripple.surface
 		] });
 	};
@@ -338,11 +363,13 @@ function SegmentedButton(t0) {
 * unchosen one draws whatever `icon` holds, if anything.
 */
 function SegmentedButtonSegment(t0) {
-	const $ = c(21);
+	const $ = c(23);
 	const { children, disableRipple: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const selectionMode = useContext(SelectionModeContext);
-	const showSelectedIcon = useContext(ShowSelectedIconContext);
+	const marked = useContext(ShowSelectedIconContext) && hasLabel(children);
+	const [label, setLabel] = useState(null);
+	const labelTitle = useTruncatedText(label);
 	const element = {
 		aria: ariaAttributesOf(props),
 		onKeyDown,
@@ -372,19 +399,21 @@ function SegmentedButtonSegment(t0) {
 	const t3 = selectionMode === "single" && props.id !== void 0 ? JSON.stringify(props.id) : void 0;
 	const t4 = toggleButtonRenderer(element, render);
 	const t5 = ripple.handlers;
-	const t6 = mergeStatefulStyles(segmentStyles(showSelectedIcon), props);
+	const t6 = mergeStatefulStyles(segmentStyles(marked), props);
 	let t7;
-	if ($[7] !== children || $[8] !== icon || $[9] !== ripple || $[10] !== selectionMode || $[11] !== showSelectedIcon) {
-		t7 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
+	if ($[7] !== children || $[8] !== icon || $[9] !== labelTitle || $[10] !== marked || $[11] !== ripple || $[12] !== selectionMode || $[13] !== setLabel) {
+		t7 = segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle);
 		$[7] = children;
 		$[8] = icon;
-		$[9] = ripple;
-		$[10] = selectionMode;
-		$[11] = showSelectedIcon;
-		$[12] = t7;
-	} else t7 = $[12];
+		$[9] = labelTitle;
+		$[10] = marked;
+		$[11] = ripple;
+		$[12] = selectionMode;
+		$[13] = setLabel;
+		$[14] = t7;
+	} else t7 = $[14];
 	let t8;
-	if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
+	if ($[15] !== T0 || $[16] !== props || $[17] !== ripple.handlers || $[18] !== t3 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7) {
 		t8 = /* @__PURE__ */ jsx(T0, {
 			"data-key": t3,
 			render: t4,
@@ -393,19 +422,56 @@ function SegmentedButtonSegment(t0) {
 			...t6,
 			children: t7
 		});
-		$[13] = T0;
-		$[14] = props;
-		$[15] = ripple.handlers;
-		$[16] = t3;
-		$[17] = t4;
-		$[18] = t6;
-		$[19] = t7;
-		$[20] = t8;
-	} else t8 = $[20];
+		$[15] = T0;
+		$[16] = props;
+		$[17] = ripple.handlers;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
 	return t8;
 }
-function segmentStyles(showSelectedIcon) {
-	return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
+function segmentStyles(marked) {
+	return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
+}
+function useTruncatedText(label) {
+	const $ = c(3);
+	const [text, setText] = useState(void 0);
+	let t0;
+	let t1;
+	if ($[0] !== label) {
+		t0 = () => {
+			if (label === null) return;
+			const measure = () => {
+				const cut = label.scrollWidth > label.clientWidth;
+				setText(cut && label.textContent !== "" ? label.textContent : void 0);
+			};
+			measure();
+			const resize = new ResizeObserver(measure);
+			resize.observe(label);
+			const relabel = new MutationObserver(measure);
+			relabel.observe(label, {
+				characterData: true,
+				childList: true,
+				subtree: true
+			});
+			return () => {
+				resize.disconnect();
+				relabel.disconnect();
+			};
+		};
+		t1 = [label];
+		$[0] = label;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+	return text;
 }
 SegmentedButton.Segment = SegmentedButtonSegment;
 //#endregion

package/dist/components/segmented-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","FORCED_COLORS","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelChosen","kAXs8y","labelReserved","k71WvV","keTefX","labelShifted","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","element","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelChosen: {\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, showSelectedIcon: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!showSelectedIcon << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, showSelectedIcon: boolean) {\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, showSelectedIcon)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted), state.isSelected && !state.isDisabled && styles.labelChosen)}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(showSelectedIcon), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(showSelectedIcon: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","useLayoutEffect","useState","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","PADDING_GIVE","md","FORCED_COLORS","styles","kgeoSG","kGOzcv","kpsdNU","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","spacer","kmuXW","kzqmXN","spacerHalf","spacerHolding","spacerIcon","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","marked","isSelected","hasLabel","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","labelRef","element","HTMLSpanElement","labelTitle","labelled","reserves","glyph","drawn","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","label","setLabel","useTruncatedText","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","text","setText","measure","cut","scrollWidth","clientWidth","textContent","resize","ResizeObserver","observe","relabel","MutationObserver","characterData","childList","subtree","disconnect","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext, useLayoutEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// A segment with an `icon` and no label is drawn that way whatever the set\n// says. It keeps its icon when chosen, since the icon is all that tells it\n// from its neighbours, and a check in its place would hide which of them is\n// the chosen one.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// Every segment that could ever draw that slot keeps room for it whether\n// or not it is drawing one. Sized by what it drew, the slot made the widest\n// segment whichever one was chosen, and the whole track changed width with\n// the choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot opens from 0 to 18dp and the space it\n// lands in opens beside it, both over `durationShort2`. Here that space is\n// two spacers either side of the label, which trade it between them: half\n// on each side while nothing is drawn, so a bare label stays centred, and\n// all of it on the leading side, where the slot sits, once something is.\n// Their total never changes, so neither does the segment's width. Angular\n// Material has no case of the first kind, since its toggles are sized by\n// their own content rather than by the widest of them.\n//\n// That room gives way before the label does. A track with room to spare is\n// the widest label plus 26dp per segment, which is what the widest column\n// already measured while its own segment was the chosen one. A track\n// squeezed below that — long labels on a phone — gives the reserve back\n// first, then the 4dp of the page's 12dp padding beyond the 8dp a segment\n// always keeps, and only then cuts a label short, with an ellipsis and a\n// `title` that shows it whole. A segment drawing a glyph keeps the glyph and\n// its 8dp gap, so the chosen label is the first to be cut. A label shows\n// whole in a segment 16dp wider than it, or 42dp while a glyph is drawn\n// beside it, plus the segment's rule. The track's width still never depends\n// on the choice: squeezed, its columns are the container's, shared equally.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\n\n// The part of the page's 12dp padding a segment gives back on a narrow\n// track: the padding is 8dp, and the rest sits in the spacers, which shrink.\nconst PADDING_GIVE = `calc(${spacing.md} - ${spacing.sm})`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"xn60lsn\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  spacer: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"xs83m0k\",\n    kzqmXN: \"xbraz1g\",\n    kjj79g: \"x13a6bvl\",\n    k7Eaqz: \"xeuugli\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1pha8k4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  spacerHalf: {\n    kzqmXN: \"x154zo0h\",\n    $$css: true\n  },\n  spacerHolding: {\n    kzqmXN: \"x1n85vuq\",\n    k7Eaqz: \"x36sgg7\",\n    $$css: true\n  },\n  spacerIcon: {\n    kzqmXN: \"x1iuy3mw\",\n    k7Eaqz: \"x16xo4sp\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   *\n   * Given with no label, the icon is the segment, centred in it and kept\n   * while chosen; name the segment with `aria-label` then.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, marked: boolean): ReactNode {\n  if (state.isSelected && marked) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// Whether a segment has a label, rather than an icon alone. An empty string\n// and a `false` from a condition at the call site are no label either.\nfunction hasLabel(children: ReactNode) {\n  return children !== undefined && children !== null && children !== false && children !== '';\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, marked: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, marked: boolean, labelRef: (element: HTMLSpanElement | null) => void, labelTitle: string | undefined) {\n  const labelled = hasLabel(children);\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = marked || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, marked);\n    const drawn = glyph !== null;\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, marked)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        <span {...stylex.props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf))}>\n          {reserves && <span {...{\n          0: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7\"\n          },\n          2: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a\"\n          },\n          1: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3\"\n          },\n          3: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3\"\n          }\n        }[!!drawn << 1 | !!(drawn && labelled) << 0]}>\n              {glyph}\n            </span>}\n        </span>\n        {labelled && <span ref={labelRef} title={labelTitle} {...{\n        0: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft\"\n        },\n        2: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8\"\n        },\n        1: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp\"\n        },\n        3: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp\"\n        }\n      }[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0]}>\n            {children}\n          </span>}\n        <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h\"\n        }\n      }[!!(reserves && !drawn) << 0]} />\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  // Whether this segment draws the check when chosen: the set's choice,\n  // unless the segment has no label — see the header.\n  const marked = useContext(ShowSelectedIconContext) && hasLabel(children);\n  const [label, setLabel] = useState<HTMLSpanElement | null>(null);\n  const labelTitle = useTruncatedText(label);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(marked), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(marked: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\n\n// The text of a label its segment is cutting short, for a `title` that shows\n// it whole; undefined while it fits. Measured again whenever the label's box\n// or its text changes, which is when it can start or stop being cut.\nfunction useTruncatedText(label: HTMLElement | null): string | undefined {\n  const [text, setText] = useState<string | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (label === null) {\n      return undefined;\n    }\n    const measure = () => {\n      const cut = label.scrollWidth > label.clientWidth;\n      setText(cut && label.textContent !== '' ? label.textContent : undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(label);\n    const relabel = new MutationObserver(measure);\n    relabel.observe(label, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      relabel.disconnect();\n    };\n  }, [label]);\n  return text;\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/separator/index.js

@@ -34,14 +34,14 @@ const styles = {
 const insets = {
 	horizontal: {
 		both: {
-			kzqmXN: "x14atkfc",
+			kzqmXN: "x1n0idw",
 			k71WvV: "xdf1gh2",
 			keTefX: "x1m7rnnc",
 			$$css: true
 		},
 		none: { $$css: true },
 		start: {
-			kzqmXN: "x14atkfc",
+			kzqmXN: "x1u7osep",
 			keTefX: "x1m7rnnc",
 			$$css: true
 		}

package/dist/components/separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;AAsDA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAsCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAA/C,EAAA,CAAA;CAAmB,MAAA,EAAA4C,OAAAI,IAAAH,aAAA,GAAAI,YAAAH;CACjB,MAAAF,QAAAI,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB3C,kBAAkBD,kBAAkB0C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBR,eAAeM,SAAON,eAAtB;CACT,MAAAS,KAAAhD;CAAmD,MAAAiD,KAAA9C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOwC,WAAWZ,OAAOY,SAAS,CAACT,MAAM,GAAGK,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAO,MAAAP,EAAA,OAAAE,WAAAF,EAAA,OAAAM,YAAAN,EAAA,OAAAQ,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIR,EAAA,KAAAO;EAAAP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAhJS;AAAgJ"}
+{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule's length is `100%` less its margins: a margin\n// sits outside the box, so a full-width rule with one would overflow its\n// parent by exactly the inset, and `auto` in its place gives an empty `<hr>`\n// a width only where the parent stretches it — in a flex row, or a parent\n// centring its children, the rule came out 0 wide and vanished.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. The length is the\n// full-width rule's `100%` less the margins, which keeps the rule inside its\n// parent — a margin outside a 100% box overflows by the inset — and still\n// gives it a width in every layout, where `auto` gives an `<hr>` with no\n// content one only in a parent that stretches it.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x1n0idw\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x1u7osep\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;AAwDA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAwCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAA/C,EAAA,CAAA;CAAmB,MAAA,EAAA4C,OAAAI,IAAAH,aAAA,GAAAI,YAAAH;CACjB,MAAAF,QAAAI,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB3C,kBAAkBD,kBAAkB0C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBR,eAAeM,SAAON,eAAtB;CACT,MAAAS,KAAAhD;CAAmD,MAAAiD,KAAA9C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOwC,WAAWZ,OAAOY,SAAS,CAACT,MAAM,GAAGK,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAO,MAAAP,EAAA,OAAAE,WAAAF,EAAA,OAAAM,YAAAN,EAAA,OAAAQ,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIR,EAAA,KAAAO;EAAAP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAhJS;AAAgJ"}