@kanso-labs/kanso-ui 0.26.4 → 0.26.6

package/dist/components/radio-group/index.js

@@ -1,7 +1,11 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { controlStyles } from "../../control/styles.js";
+import { ControlLabel } from "../../control/index.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9,36 +13,7 @@ import { RadioButton, RadioField, RadioGroup } from "react-aria-components";
 //#region src/components/radio-group/index.tsx
 const styles = {
 	control: {
-		kGNEyG: "x6s0dn4",
-		kWkggS: "xjbqb8w",
-		kZKoxP: "x1vqgdyp",
-		kaIpWk: "x3y1ksm",
-		kB7OPa: "x9f619",
 		kMwMTN: "x1w5n3ug",
-		kkrTdU: "x1ypdohk",
-		k1xSpc: "x78zum5",
-		kmuXW: "x2lah0s",
-		kzqmXN: "x100vrsf",
-		kjj79g: "xl56j7k",
-		kVAEAm: "x1n2onr6",
-		kIyJzY: "x1qno0dh",
-		k1ekBW: "x15406qy",
-		kAMwcw: "xpc4ca7",
-		$$css: true
-	},
-	controlDisabled: {
-		kkrTdU: "x1h6gzvc",
-		$$css: true
-	},
-	controlFocused: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
-		kMeerF: "x1de99jn",
-		$$css: true
-	},
-	controlReadOnly: {
-		kkrTdU: "xt0e3qv",
 		$$css: true
 	},
 	toneActive: {
@@ -81,18 +56,13 @@ function buttonContent(children, ripple) {
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			...interactive ? ripple.handlers : {},
-			...props(styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused),
+			...props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7",
 				children: state.isSelected ? /* @__PURE__ */ jsx("span", { className: "xtwfq29 x170jfvy x3y1ksm x1fsd2vl" }) : null
 			}), interactive ? ripple.surface : null]
-		}), children === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll" },
-				2: { className: "x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv" },
-				1: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" },
-				3: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+		}), /* @__PURE__ */ jsx(ControlLabel, {
+			state,
 			children
 		})] });
 	};
@@ -101,7 +71,7 @@ function groupContent(label, children, description, error, horizontal) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(FieldLabel, {
 			state,
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		}),
 		/* @__PURE__ */ jsx("div", {
@@ -128,11 +98,11 @@ function groupContent(label, children, description, error, horizontal) {
 * which is the element a layout positions.
 */
 function Radio(t0) {
-	const $ = c(13);
-	const { children, description, ...props } = t0;
+	const $ = c(14);
+	const { children, description, ...props$2 } = t0;
 	const ripple = useRipple();
 	const T0 = RadioField;
-	const t1 = mergeStatefulStyles({ className: "x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz" }, props);
+	const t1 = mergeStatefulStyles(props(controlStyles.field), props$2);
 	let t2;
 	if ($[0] !== children || $[1] !== ripple) {
 		t2 = buttonContent(children, ripple);
@@ -150,32 +120,37 @@ function Radio(t0) {
 		$[4] = t3;
 	} else t3 = $[4];
 	let t4;
-	if ($[5] !== description) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			className: "x1xdureb",
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = props(controlStyles.messages);
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== description) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			...t4,
 			children: /* @__PURE__ */ jsx(FieldMessage, {
 				description,
 				inset: false
 			})
 		});
-		$[5] = description;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== T0 || $[8] !== props || $[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(T0, {
-			...props,
+		$[6] = description;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== props$2 || $[10] !== t1 || $[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T0, {
+			...props$2,
 			...t1,
-			children: [t3, t4]
+			children: [t3, t5]
 		});
-		$[7] = T0;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t3;
-		$[11] = t4;
+		$[8] = T0;
+		$[9] = props$2;
+		$[10] = t1;
+		$[11] = t3;
 		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
 }
 /**
 * A labelled set of radio buttons with one selected value between them. The
@@ -190,7 +165,7 @@ function Radio(t0) {
 */
 function RadioGroup$1(t0) {
 	const $ = c(16);
-	const { children, description, error, label, orientation: t1, ...props } = t0;
+	const { children, description, error, label, orientation: t1, ...props$1 } = t0;
 	const orientation = t1 === void 0 ? "vertical" : t1;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = RadioGroup;
@@ -200,7 +175,7 @@ function RadioGroup$1(t0) {
 		$[0] = error;
 		$[1] = t2;
 	} else t2 = $[1];
-	const t3 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props);
+	const t3 = mergeStatefulStyles(props(groupStyles.root), props$1);
 	const t4 = orientation === "horizontal";
 	let t5;
 	if ($[2] !== children || $[3] !== description || $[4] !== error || $[5] !== label || $[6] !== t4) {
@@ -213,18 +188,18 @@ function RadioGroup$1(t0) {
 		$[7] = t5;
 	} else t5 = $[7];
 	let t6;
-	if ($[8] !== T0 || $[9] !== orientation || $[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t5 || $[14] !== validationBehavior) {
+	if ($[8] !== T0 || $[9] !== orientation || $[10] !== props$1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t5 || $[14] !== validationBehavior) {
 		t6 = /* @__PURE__ */ jsx(T0, {
 			isInvalid: t2,
 			orientation,
 			validationBehavior,
-			...props,
+			...props$1,
 			...t3,
 			children: t5
 		});
 		$[8] = T0;
 		$[9] = orientation;
-		$[10] = props;
+		$[10] = props$1;
 		$[11] = t2;
 		$[12] = t3;
 		$[13] = t5;

package/dist/components/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","control","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","controlDisabled","controlFocused","kjBf7l","kInvED","k3XXqK","kMeerF","controlReadOnly","toneActive","toneDisabled","toneSelected","hoverLayers","selected","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","surface","undefined","className","groupContent","horizontal","Radio","t0","$","_c","T0","t1","t2","t3","t4","t5","orientation","validationBehavior","t6"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The group's label: label-large, the role a field's label takes at rest,\n// since a group has no box to float it in.\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","groupContent","horizontal","className","Radio","t0","$","_c","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":";;;;;;;;;;;;;AAmCA,MAAM2B,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVF,QAAQ;EACRC,OAAO;CACT;CACAE,cAAc;EACZH,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZJ,QAAQ;EACRC,OAAO;CACT;AACF;AAIA,MAAMI,cAAc;CAClBC,UAAU;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,YAAY;EACVD,QAAQ;EACRN,OAAO;CACT;AACF;AACA,MAAMQ,gBAAgB;CACpBH,UAAU;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,YAAY;EACVD,QAAQ;EACRN,OAAO;CACT;AACF;AAsCA,SAASkB,cAAcT,UAAqBU,QAAgB;CAC1D,QAAQC,UAAkC;EACxC,MAAMC,cAAc,CAACD,MAAME,cAAc,CAACF,MAAMG;EAChD,MAAMC,OAAOJ,MAAMK,aAAa,aAAa;EAC7C,MAAMC,SAASN,MAAMO,aAAaP,MAAMQ,aAAaR,MAAMS;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAIR,cAAcF,OAAOW,WAAW,CAAC;GAAG,GAAItD,MAAaM,cAAckD,MAAMnC,OAAOC,SAASsB,MAAMK,cAAc5B,OAAOM,cAAc,CAACiB,MAAMK,cAAcJ,eAAeK,UAAU7B,OAAOI,YAAYmB,MAAME,cAAczB,OAAOK,cAAckB,MAAMG,cAAczC,cAAcmD,iBAAiBb,MAAME,cAAcxC,cAAcoD,iBAAiBb,eAAeD,MAAMO,aAAavB,YAAYoB,OAAOH,eAAeD,MAAMQ,aAAapB,cAAcgB,OAAOJ,MAAMS,kBAAkBvC,MAAM6C,WAAW;GAAjf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACbf,UAAAA,MAAMK,aAAa,oBAAC,QAAD,EAAM,WAAU,oCAAmC,CAAA,IAAM;GACzE,CAAA,GACLJ,cAAcF,OAAOiB,UAAU,IAC5B;EACN,CAAA,GAAA,oBAAC,cAAD;GAAqBhB;GAAQX;EAAuB,CAAA,CACtD,EAAA,CAAA;CACJ;AACF;AAIA,SAAS4B,aAAazB,OAAeH,UAAqBC,aAAiCC,OAA2B2B,YAAqB;CACzI,QAAQlB,UAAiC,qBAAA,UAAA,EAAA,UAAA;EACrC,oBAAC,YAAD;GAAmBA;GAAO,SAAQ;GAC/BR,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD2B,WAAW,kBACb;IACA,GAAG,EACDA,WAAW,oCACb;GACF,EAAE,CAAC,CAACD,cAAc;GACb7B;EACE,CAAA;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ;;;;;;;;;;AAWA,SAAA6B,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAAlC,UAAAC,aAAA,GAAAqB,YAAAU;CAKb,MAAAtB,SAAe9B,UAA2B;CAClC,MAAAuD,KAAAhE;CAA0B,MAAAiE,KAAAtD,oBAAoBf,MAAaM,cAAagE,KAAM,GAAGf,OAAK;CAAC,IAAAgB;CAAA,IAAAL,EAAA,OAAAjC,YAAAiC,EAAA,OAAAvB,QAAA;EAExF4B,KAAA7B,cAAcT,UAAUU,MAAM;EAACuB,EAAA,KAAAjC;EAAAiC,EAAA,KAAAvB;EAAAuB,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAK,IAAA;EADlCC,KAAA,oBAAC,aAAD;GAAuB,WAAA;GACpBD,UAAAA;EADS,CAAA;EAEEL,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAQ,OAAAC,IAAA,2BAAA,GAAA;EACLF,KAAAzE,MAAaM,cAAasE,QAAS;EAACV,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAhC,aAAA;EAA7C2C,KAAA,oBAAA,OAAA;GAEM,GAFGJ;GACP,UAAA,oBAAC,cAAD;IAA2BvC;IAAoB,OAAA;GAAK,CAAA;EAChD,CAAA;EAAAgC,EAAA,KAAAhC;EAAAgC,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAE,MAAAF,EAAA,OAAAX,WAAAW,EAAA,QAAAG,MAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAW,IAAA;EANHC,KAAA,qBAAC,IAAD;GAAW,GAAKvB;GAAK,GAAMc;GAA3B,UAAA,CACHG,IAGAK,EAJc;;EAOHX,EAAA,KAAAE;EAAAF,EAAA,KAAAX;EAAAW,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAPRY;AAOQ;;;;;;;;;;;;AAcjB,SAAA7E,aAAAgE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAlC,UAAAC,aAAAC,OAAAC,OAAA2C,aAAAV,IAAA,GAAAd,YAAAU;CAKlB,MAAAc,cAAAV,OAAAW,KAAAA,IAAA,aAAAX;CAGA,MAAAY,qBAA2BvE,2BAA2B;CAC9C,MAAA0D,KAAAlE;CAAa,IAAAqE;CAAA,IAAAL,EAAA,OAAA/B,OAAA;EAAYoC,KAAA9D,YAAY0B,KAAK;EAAC+B,EAAA,KAAA/B;EAAA+B,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAmF,MAAAM,KAAAzD,oBAAoBf,MAAaY,YAAgBsE,IAAK,GAAG3B,OAAK;CAC7I,MAAAkB,KAAAM,gBAAgB;CAAY,IAAAF;CAAA,IAAAX,EAAA,OAAAjC,YAAAiC,EAAA,OAAAhC,eAAAgC,EAAA,OAAA/B,SAAA+B,EAAA,OAAA9B,SAAA8B,EAAA,OAAAO,IAAA;EAA9EI,KAAAhB,aAAazB,OAAOH,UAAUC,aAAaC,OAAOsC,EAA4B;EAACP,EAAA,KAAAjC;EAAAiC,EAAA,KAAAhC;EAAAgC,EAAA,KAAA/B;EAAA+B,EAAA,KAAA9B;EAAA8B,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAE,MAAAF,EAAA,OAAAa,eAAAb,EAAA,QAAAX,WAAAW,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAW,MAAAX,EAAA,QAAAe,oBAAA;EAD7EH,KAAA,oBAAC,IAAD;GAA0B,WAAAP;GAAiCQ;GAAiCE;GAAkB,GAAM1B;GAAK,GAAMiB;GACjIK,UAAAA;EADgB,CAAA;EAEHX,EAAA,KAAAE;EAAAF,EAAA,KAAAa;EAAAb,EAAA,MAAAX;EAAAW,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAW;EAAAX,EAAA,MAAAe;EAAAf,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAFXY;AAEW"}

package/dist/components/range-calendar/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { calendarStyles } from "../../calendar/styles.js";
 import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
@@ -9,7 +10,7 @@ import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar } from "rea
 //#region src/components/range-calendar/index.tsx
 function cellClassName(state) {
 	const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);
-	return props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
 }
 function gridCell(date) {
 	return /* @__PURE__ */ jsx(CalendarCell, {

package/dist/components/range-calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isEnd","props","cell","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `disabled` is last of all, and StyleX\n// replaces a property whole, so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;AAiDA,SAASuB,cAAcC,OAMpB;CACD,MAAMM,QAAQN,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOtB,MAAaY,eAAee,MAAMR,MAAMK,WAAWZ,eAAegB,WAAWT,MAAME,cAAcT,eAAeiB,aAAaV,MAAME,cAAcF,MAAMI,oBAAoBX,eAAekB,gBAAgBX,MAAME,cAAcF,MAAMG,kBAAkBV,eAAemB,cAAcN,SAASb,eAAeoB,cAAcb,MAAMC,cAAcR,eAAeqB,YAAY,CAAC,CAACjB,aAAa;AAChY;AACA,SAASkB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWjB;EAAqBiB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAA5B,gBAAAmB,SAAA;CAAA,MAAAU,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAV,SAAA;EAC6CY,KAAAzB,oBAAoBb,MAAaY,eAAc2B,IAAK,GAAGb,OAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAzC,MAAaY,eAAcgC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAV,QAAAoB,iBAAAF,QAAA;EACzCC,KAAAlC,aAAae,QAAKoB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAV,QAAAoB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAV,WAAAU,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQxB;GAAK,GAAMY;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAV;EAAAU,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMnD,MAAaY,eAAcwC,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}
+{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `disabled` is last of all, and StyleX\n// replaces a property whole, so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;AAkDA,SAASwB,cAAcC,OAMpB;CACD,MAAMM,QAAQN,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAegB,MAAMf,MAAMgB,MAAMT,MAAMK,WAAWb,eAAekB,WAAWV,MAAME,cAAcV,eAAemB,aAAaX,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeoB,gBAAgBZ,MAAME,cAAcF,MAAMG,kBAAkBX,eAAeqB,cAAcP,SAASd,eAAesB,cAAcd,MAAMC,cAAcT,eAAeuB,YAAY,CAAC,CAAClB,aAAa;AAC5Y;AACA,SAASmB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWlB;EAAqBkB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAA9B,gBAAAoB,SAAA;CAAA,MAAAW,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAX,SAAA;EAC6Ca,KAAA1B,oBAAoBd,MAAaY,eAAc6B,IAAK,GAAGd,OAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA3C,MAAaY,eAAckC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAX,QAAAqB,iBAAAF,QAAA;EACzCC,KAAApC,aAAagB,QAAKqB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAX,QAAAqB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAX,WAAAW,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQzB;GAAK,GAAMa;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAX;EAAAW,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMrD,MAAaY,eAAc0C,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}

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

@@ -1,5 +1,7 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -8,6 +10,55 @@ import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-
 //#region src/components/segmented-button/index.tsx
 const ShowSelectedIconContext = createContext(true);
 const SelectionModeContext = createContext("single");
+const styles = {
+	segment: {
+		"--segment-indicator-radius-end": "x1qkl9vf x111hk5a",
+		"--segment-indicator-radius-start": "x36wtw6 x1syycwj",
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "x1vqgdyp",
+		kVAM5u: "x1fwvt7v",
+		kT0f0o: "x1asv1gf xkducg2",
+		kVL7Gh: "x15ku28o x1uwupfv",
+		k2ei4v: "x120dh57 x14e42zd",
+		kfmiAY: "x12k3b1q x1a37zkv",
+		krdFHd: "x1f6vc7b xb01x1j",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kjj79g: "xl56j7k",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		k7Eaqz: "xeuugli",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x18fpw6u",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "xt3l3uh",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	segmentDisabled: {
+		kVAM5u: "xrh88j3",
+		kMwMTN: "x1xj74d8",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	segmentSelected: {
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	segmentUnselected: {
+		kMwMTN: "x139gbkf",
+		$$css: true
+	}
+};
 /**
 * The check on a chosen segment, or the segment's own icon. Returns a node
 * rather than letting the type be inferred, since `ReactNode` is a union
@@ -202,12 +253,7 @@ function SegmentedButtonSegment(t0) {
 	return t5;
 }
 function segmentStyles(state) {
-	return {
-		0: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x139gbkf" },
-		2: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x1sawysd" },
-		1: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc" },
-		3: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc" }
-	}[!!state.isSelected << 1 | !!state.isDisabled << 0];
+	return props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);
 }
 SegmentedButton.Segment = SegmentedButtonSegment;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","undefined","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","isHovered","isFocusVisible","isPressed","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","props","t8","SegmentedButtonSegment","handlers","segmentStyles","Segment"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, 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// 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//\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// **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 Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\ntype SegmentedButtonProps = 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 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   * @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.\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 * The check on a chosen segment, or the segment's own icon. Returns a node\n * rather than letting the type be inferred, since `ReactNode` is a union\n * that includes a promise and an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">\n        <CheckGlyph className=\"x5yr21d xh8yej3\" />\n      </span>;\n  }\n  if (icon === undefined) {\n    return null;\n  }\n  return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">{icon}</span>;\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): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 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  return (state: ToggleButtonRenderProps) => <>\n      <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n      <span {...{\n      0: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n      },\n      4: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n      },\n      2: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      6: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      1: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      5: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      3: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      7: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      }\n    }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n      {glyphFor(state, icon, showSelectedIcon)}\n      <span className=\"xeuugli xb3r6kr xlyipyv xuxw1ft\">{children}</span>\n      {ripple.surface}\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` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * 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 * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} 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  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, 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.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return {\n    0: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x139gbkf\"\n    },\n    2: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x1sawysd\"\n    },\n    1: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","styles","segment","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","undefined","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","isHovered","isFocusVisible","isPressed","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","props","t8","SegmentedButtonSegment","handlers","segmentStyles","ring","Segment"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, 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// 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//\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// **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 Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\nconst styles = {\n  segment: {\n    \"--segment-indicator-radius-end\": \"x1qkl9vf x111hk5a\",\n    \"--segment-indicator-radius-start\": \"x36wtw6 x1syycwj\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1asv1gf xkducg2\",\n    kVL7Gh: \"x15ku28o x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x12k3b1q x1a37zkv\",\n    krdFHd: \"x1f6vc7b 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    kOIVth: \"x126z3so\",\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\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = 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 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   * @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.\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 * The check on a chosen segment, or the segment's own icon. Returns a node\n * rather than letting the type be inferred, since `ReactNode` is a union\n * that includes a promise and an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">\n        <CheckGlyph className=\"x5yr21d xh8yej3\" />\n      </span>;\n  }\n  if (icon === undefined) {\n    return null;\n  }\n  return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">{icon}</span>;\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): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 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  return (state: ToggleButtonRenderProps) => <>\n      <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n      <span {...{\n      0: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n      },\n      4: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n      },\n      2: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      6: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      1: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      5: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      3: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      7: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      }\n    }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n      {glyphFor(state, icon, showSelectedIcon)}\n      <span className=\"xeuugli xb3r6kr xlyipyv xuxw1ft\">{children}</span>\n      {ripple.surface}\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` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * 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 * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} 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  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, 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.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/sheet/index.js

@@ -108,7 +108,7 @@ function SheetContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
 			className,
 			style
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x3y1ksm x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x3y1ksm x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}