@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/search-view/index.js

@@ -0,0 +1,255 @@
+"use client";
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import Autocomplete$1 from "../autocomplete/index.js";
+import { ArrowBackGlyph, CloseGlyph } from "../../glyphs/index.js";
+import { useMessages } from "../../i18n/index.js";
+import { FieldInput } from "../../field/index.js";
+import { overlay } from "../../styles/overlay.js";
+import IconButton from "../icon-button/index.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogTrigger, Label, Popover, SearchField, VisuallyHidden } from "react-aria-components";
+//#region src/components/search-view/index.tsx
+const SIDE_OFFSET = 8;
+const styles = { view: {
+	kWkggS: "xvkjz1l",
+	kZKoxP: "x16m7gpl",
+	kaIpWk: "x19pkqky xxl0i3l",
+	kGVxlE: "x1udv5rz xzvmenf",
+	k1xSpc: "x78zum5",
+	kXwgrk: "xdt5ytf",
+	kzqmXN: "xd4ksm1 x14gilbs",
+	krVfgx: "xudx362",
+	k87sOh: "xbvrusa",
+	kt4wiu: "x1v0tev1",
+	kLqNvP: "x12sfaok",
+	kskxy: "x10iheve",
+	ks0D6T: "x16xn7b0 x6iovhr",
+	kVQacm: "xb3r6kr",
+	kVAEAm: "x1mesnot",
+	$$css: true
+} };
+function fieldContent(label, placeholder, clearLabel) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Label, { children: label }) }),
+		/* @__PURE__ */ jsx(FieldInput, {
+			autoFocus: true,
+			placeholder,
+			className: "x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli"
+		}),
+		state.isEmpty ? null : /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": clearLabel,
+			className: "x15ir4sr",
+			children: /* @__PURE__ */ jsx(CloseGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
+		})
+	] });
+}
+/**
+* The view a search opens into: full screen on a compact window, docked
+* under what opened it on a wider one. Open state is React Aria's: pass
+* `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep
+* its own.
+*
+* ```tsx
+* <SearchView>
+*   <IconButton aria-label="Search"><SearchIcon /></IconButton>
+*   <SearchView.Content label="Search" placeholder="Search">
+*     <ListBox aria-label="Results">…</ListBox>
+*   </SearchView.Content>
+* </SearchView>
+* ```
+*
+* A Button or IconButton placed directly inside opens the view;
+* `SearchView.Content` is the view itself.
+*/
+function SearchView(t0) {
+	const $ = c(6);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(DialogTrigger, {
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+/**
+* The view: the header with its back button, input and clear button, and
+* the results under it, inside React Aria's Autocomplete, so typing narrows
+* them. Its value is Autocomplete's: pass `inputValue` with `onInputChange`
+* to control what has been typed, or `defaultInputValue` to let it keep its
+* own.
+*
+* The call site's `className` and `style` land on the view's surface, and
+* its `ref` too.
+*/
+function SearchViewContent(t0) {
+	const $ = c(41);
+	let backLabel;
+	let children;
+	let className;
+	let clearLabel;
+	let container;
+	let label;
+	let placeholder;
+	let props$1;
+	let ref;
+	let style;
+	if ($[0] !== t0) {
+		({backLabel, children, className, clearLabel, container, label, placeholder, ref, style, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = backLabel;
+		$[2] = children;
+		$[3] = className;
+		$[4] = clearLabel;
+		$[5] = container;
+		$[6] = label;
+		$[7] = placeholder;
+		$[8] = props$1;
+		$[9] = ref;
+		$[10] = style;
+	} else {
+		backLabel = $[1];
+		children = $[2];
+		className = $[3];
+		clearLabel = $[4];
+		container = $[5];
+		label = $[6];
+		placeholder = $[7];
+		props$1 = $[8];
+		ref = $[9];
+		style = $[10];
+	}
+	const messages = useMessages();
+	let t1;
+	if ($[11] !== className || $[12] !== style) {
+		t1 = mergeStatefulStyles(props(overlay.popup, styles.view), {
+			className,
+			style
+		});
+		$[11] = className;
+		$[12] = style;
+		$[13] = t1;
+	} else t1 = $[13];
+	const t2 = backLabel ?? messages.back;
+	let t3;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ArrowBackGlyph, { className: "xlzyvqe x139gbkf x1lliihq x15vhz18 x19axjrm x1c071of" });
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== t2) {
+		t4 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t2,
+			slot: "close",
+			className: "x6aqprb",
+			children: t3
+		});
+		$[15] = t2;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== clearLabel || $[18] !== label || $[19] !== placeholder) {
+		t5 = fieldContent(label, placeholder, clearLabel);
+		$[17] = clearLabel;
+		$[18] = label;
+		$[19] = placeholder;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SearchField, {
+			className: "x6s0dn4 x9f619 x78zum5 x1iyjqo2 x126z3so xeuugli",
+			children: t5
+		});
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== t4 || $[24] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "x6s0dn4 xs1ryiz xzcdm5u x9f619 x78zum5 x2lah0s x126z3so x790zyz",
+			children: [t4, t6]
+		});
+		$[23] = t4;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx("hr", { className: "xp2scj5 xjm9jq1 xc342km x9f619 x2lah0s x1ghz6dp" });
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== children) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "x9f619 x1iyjqo2 xfwfbzp xrsa6q8 x1ficeh5 x1iob9gu x1odjw0f xish69e",
+			children
+		});
+		$[27] = children;
+		$[28] = t9;
+	} else t9 = $[28];
+	let t10;
+	if ($[29] !== props$1 || $[30] !== t7 || $[31] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Autocomplete$1, {
+			...props$1,
+			children: [
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[29] = props$1;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== label || $[34] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": label,
+			className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 x2lwn1j x1t137rt",
+			children: t10
+		});
+		$[33] = label;
+		$[34] = t10;
+		$[35] = t11;
+	} else t11 = $[35];
+	let t12;
+	if ($[36] !== container || $[37] !== ref || $[38] !== t1 || $[39] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Popover, {
+			offset: SIDE_OFFSET,
+			placement: "bottom start",
+			ref,
+			UNSTABLE_portalContainer: container,
+			...t1,
+			children: t11
+		});
+		$[36] = container;
+		$[37] = ref;
+		$[38] = t1;
+		$[39] = t11;
+		$[40] = t12;
+	} else t12 = $[40];
+	return t12;
+}
+SearchView.Content = SearchViewContent;
+//#endregion
+export { SearchViewContent, SearchView as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/search-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","PopoverRenderProps","SearchFieldRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Label","Popover","RACPopover","SearchField","RACSearchField","VisuallyHidden","AutocompleteProps","FieldInput","ArrowBackGlyph","CloseGlyph","useMessages","mergeStatefulStyles","overlay","colors","media","radii","shadows","sizing","spacing","Autocomplete","IconButton","SIDE_OFFSET","styles","view","kWkggS","kZKoxP","kaIpWk","kGVxlE","k1xSpc","kXwgrk","kzqmXN","krVfgx","k87sOh","kt4wiu","kLqNvP","kskxy","ks0D6T","kVQacm","kVAEAm","$$css","SearchViewContentProps","backLabel","children","className","clearLabel","container","Element","label","placeholder","style","Omit","T","SearchViewProps","fieldContent","state","isEmpty","SearchView","t0","$","props","t1","SearchViewContent","ref","messages","popup","t2","back","t3","Symbol","for","t4","t5","t6","t7","t8","t9","t10","t11","t12","Content","_c","props","stylex.props","RACSearchField","Autocomplete","RACPopover"],"sources":["../../../src/components/search-view/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, PopoverRenderProps, SearchFieldRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Label, Popover as RACPopover, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport type { AutocompleteProps } from '../autocomplete';\nimport { FieldInput } from '../../field';\nimport { ArrowBackGlyph, CloseGlyph } from '../../glyphs';\nimport { useMessages } from '../../i18n';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, radii, shadows, sizing, spacing } from '../../tokens/design.tokens.stylex';\nimport Autocomplete from '../autocomplete';\nimport IconButton from '../icon-button';\n\n// The search page's search view: what a search opens into. A header holds a\n// back button, the input and a clear button, over a 1dp divider in the\n// outline role, and the results run under it. Both of the page's forms are\n// surface container high, with the input in body-large on surface over a\n// supporting text in on surface variant, the back icon in on surface and the\n// clear icon in on surface variant.\n//\n// **Which form is the window's.** Below the medium breakpoint it is the\n// page's full-screen view: the whole window, square, with a 72dp header.\n// Above it, the docked view: dropped under what opened it, as wide as that\n// and held between the page's 360dp and 720dp, with a 28dp corner, a 56dp\n// header, results at least 240dp tall and the whole view no taller than two\n// thirds of the window, at elevation 3 — Compose's measurements for its\n// docked search bar, which the page draws without numbers. The swap is the\n// date pickers' — see `src/styles/picker.ts`: React Aria places the surface\n// with inline styles, which a class outranks only with `!important`, so the\n// full-screen form takes it on the edges, the position and the size, and\n// above the breakpoint this says nothing about any of them.\n//\n// **It is Autocomplete in an overlay.** The header's input and the results\n// are Autocomplete's two halves, so typing narrows the results as it does\n// anywhere else, and the results are the call site's ListBox or Menu.\n// Autocomplete still renders nothing of its own; this is the element around\n// it.\n//\n// **The header lines up with the search bar's.** The back button sits where\n// the bar's magnifier does, its icon 28dp in, and the text starts at 68dp,\n// as the bar's does; the clear button's icon ends 28dp from the end. So a\n// view opened from a bar puts its input where the bar's was.\n//\n// Composed as Popover is: `SearchView` holds the open state, a Button or\n// IconButton placed directly inside it opens the view, and\n// `SearchView.Content` is the view. The back button closes it, as Escape and\n// a press outside the docked view do.\n\n// The gap between what opened the view and the docked view, Popover's.\nconst SIDE_OFFSET = 8;\nconst styles = {\n  view: {\n    kWkggS: \"xvkjz1l\",\n    kZKoxP: \"x16m7gpl\",\n    kaIpWk: \"x19pkqky xxl0i3l\",\n    kGVxlE: \"x1udv5rz xzvmenf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzqmXN: \"xd4ksm1 x14gilbs\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kskxy: \"x10iheve\",\n    ks0D6T: \"x16xn7b0 x6iovhr\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  }\n};\ntype SearchViewContentProps<T extends object = object> = {\n  /**\n   * What the back button is called, for a screen reader. Left out, the\n   * library names it in the reader's locale — \"Back\" in English.\n   */\n  backLabel?: string;\n  /** The results: a ListBox or a Menu, which typing narrows. */\n  children?: ReactNode;\n  /** A function may compute the class from the view's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * What the clear button is called, for a screen reader. Left out, React\n   * Aria names it in the reader's locale — \"Clear search\" in English.\n   */\n  clearLabel?: string;\n  /**\n   * Where to portal the view. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the view renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * What is searched, for a screen reader. It names both the view and its\n   * input, and is read rather than shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty input, which is what a person reads. */\n  placeholder?: string;\n  /** A function may compute the style from the view's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<AutocompleteProps<T>, 'children'>;\ntype SearchViewProps = Omit<DialogTriggerProps, 'children'> & {\n  /**\n   * The Button or IconButton that opens the view, and `SearchView.Content`.\n   */\n  children?: ReactNode;\n};\n\n// What the field draws, from its render state: the clear button only while\n// it holds something. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <FieldInput\n    // oxlint-disable-next-line jsx-a11y/no-autofocus -- a search view opens to be typed into, so the input takes focus rather than the back button the dialog would otherwise start on\n    autoFocus placeholder={placeholder} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n      {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n          <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n        </IconButton>}\n    </>;\n}\n\n/**\n * The view a search opens into: full screen on a compact window, docked\n * under what opened it on a wider one. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * ```tsx\n * <SearchView>\n *   <IconButton aria-label=\"Search\"><SearchIcon /></IconButton>\n *   <SearchView.Content label=\"Search\" placeholder=\"Search\">\n *     <ListBox aria-label=\"Results\">…</ListBox>\n *   </SearchView.Content>\n * </SearchView>\n * ```\n *\n * A Button or IconButton placed directly inside opens the view;\n * `SearchView.Content` is the view itself.\n */\nfunction SearchView({\n  children,\n  ...props\n}: SearchViewProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\n\n/**\n * The view: the header with its back button, input and clear button, and\n * the results under it, inside React Aria's Autocomplete, so typing narrows\n * them. Its value is Autocomplete's: pass `inputValue` with `onInputChange`\n * to control what has been typed, or `defaultInputValue` to let it keep its\n * own.\n *\n * The call site's `className` and `style` land on the view's surface, and\n * its `ref` too.\n */\nfunction SearchViewContent<T extends object = object>({\n  backLabel,\n  children,\n  className,\n  clearLabel,\n  container,\n  label,\n  placeholder,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLElement> & SearchViewContentProps<T>) {\n  const messages = useMessages();\n  return <RACPopover offset={SIDE_OFFSET} placement=\"bottom start\" ref={ref}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(stylex.props(overlay.popup, styles.view), {\n    className,\n    style\n  })}>\n      <Dialog aria-label={label} className=\"x9f619 x78zum5 xdt5ytf x1iyjqo2 x2lwn1j x1t137rt\">\n        <Autocomplete<T> {...props}>\n          <div className=\"x6s0dn4 xs1ryiz xzcdm5u x9f619 x78zum5 x2lah0s x126z3so x790zyz\">\n            <IconButton aria-label={backLabel ?? messages.back} slot=\"close\" className=\"x6aqprb\">\n              <ArrowBackGlyph className=\"xlzyvqe x139gbkf x1lliihq x15vhz18 x19axjrm x1c071of\" />\n            </IconButton>\n            <RACSearchField className=\"x6s0dn4 x9f619 x78zum5 x1iyjqo2 x126z3so xeuugli\">\n              {fieldContent(label, placeholder, clearLabel)}\n            </RACSearchField>\n          </div>\n          <hr className=\"xp2scj5 xjm9jq1 xc342km x9f619 x2lah0s x1ghz6dp\" />\n          <div className=\"x9f619 x1iyjqo2 xfwfbzp xrsa6q8 x1ficeh5 x1iob9gu x1odjw0f xish69e\">{children}</div>\n        </Autocomplete>\n      </Dialog>\n    </RACPopover>;\n}\nSearchView.Content = SearchViewContent;\nexport type { SearchViewContentProps, SearchViewProps };\nexport { SearchViewContent };\nexport default SearchView;"],"mappings":"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"}

package/dist/components/segmented-button/index.d.ts

@@ -66,7 +66,7 @@ declare namespace SegmentedButton {
  * what names it. A chosen segment draws a check before the label; an
  * unchosen one draws whatever `icon` holds, if anything.
  */
-declare function SegmentedButtonSegment({ children, disableRipple, icon, ...props }: SegmentedButtonSegmentProps): import("react").JSX.Element;
+declare function SegmentedButtonSegment({ children, disableRipple, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props }: SegmentedButtonSegmentProps): import("react").JSX.Element;
 //#endregion
-export { type SegmentedButtonProps, type SegmentedButtonSegmentProps, SegmentedButton as default };
+export { type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, SegmentedButton as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,9 +1,11 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { mergeStatefulStyles } from "../../styles/merge.js";
 import { spacing } from "../../tokens/design.tokens.stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
+import { ariaAttributesOf, toggleButtonRenderer } from "../../render/aria.js";
 import { focus } from "../../styles/focus.js";
+import { useToggleGroupDisabled } from "../../hooks/useToggleGroupDisabled.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -250,47 +252,74 @@ function SegmentedButton(t0) {
 * unchosen one draws whatever `icon` holds, if anything.
 */
 function SegmentedButtonSegment(t0) {
-	const $ = c(12);
-	const { children, disableRipple: t1, icon, ...props } = t0;
+	const $ = c(20);
+	const { children, disableRipple: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const selectionMode = useContext(SelectionModeContext);
 	const showSelectedIcon = useContext(ShowSelectedIconContext);
-	const ripple = useRipple(!disableRipple && props.isDisabled !== true);
+	const element = {
+		aria: ariaAttributesOf(props),
+		onKeyDown,
+		onKeyUp
+	};
+	const disabledByGroup = useToggleGroupDisabled(props.id);
+	let t2;
+	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
+		t2 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onClick;
+		$[1] = onContextMenu;
+		$[2] = onPointerCancel;
+		$[3] = onPointerDown;
+		$[4] = onPointerLeave;
+		$[5] = onPointerUp;
+		$[6] = t2;
+	} else t2 = $[6];
+	const ripple = useRipple(!disableRipple && props.isDisabled !== true && !disabledByGroup, t2);
 	const T0 = ToggleButton;
-	const t2 = ripple.handlers;
-	const t3 = mergeStatefulStyles(segmentStyles, props);
-	let t4;
-	if ($[0] !== children || $[1] !== icon || $[2] !== ripple || $[3] !== selectionMode || $[4] !== showSelectedIcon) {
-		t4 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
-		$[0] = children;
-		$[1] = icon;
-		$[2] = ripple;
-		$[3] = selectionMode;
-		$[4] = showSelectedIcon;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== T0 || $[7] !== props || $[8] !== ripple.handlers || $[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
+	const t3 = toggleButtonRenderer(element, render);
+	const t4 = ripple.handlers;
+	const t5 = mergeStatefulStyles(segmentStyles, props);
+	let t6;
+	if ($[7] !== children || $[8] !== icon || $[9] !== ripple || $[10] !== selectionMode || $[11] !== showSelectedIcon) {
+		t6 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
+		$[7] = children;
+		$[8] = icon;
+		$[9] = ripple;
+		$[10] = selectionMode;
+		$[11] = showSelectedIcon;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			render: t3,
+			...t4,
 			...props,
-			...t2,
-			...t3,
-			children: t4
+			...t5,
+			children: t6
 		});
-		$[6] = T0;
-		$[7] = props;
-		$[8] = ripple.handlers;
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[13] = T0;
+		$[14] = props;
+		$[15] = ripple.handlers;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
 }
 function segmentStyles(state) {
 	return props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);
 }
 SegmentedButton.Segment = SegmentedButtonSegment;
 //#endregion
-export { SegmentedButton as default };
+export { SegmentedButtonSegment, SegmentedButton as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelReserved","k71WvV","keTefX","labelShifted","segment","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","undefined","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","SegmentedButtonSegment","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\nconst styles = {\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\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. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode): (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  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted))}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby` — 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}: RefAttributes<HTMLDivElement> & 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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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelReserved","k71WvV","keTefX","labelShifted","segment","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","undefined","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","element","aria","disabledByGroup","id","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\nconst styles = {\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\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. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode): (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  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted))}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby` — 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}: RefAttributes<HTMLDivElement> & 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  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...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 { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/select/index.js

@@ -111,6 +111,7 @@ function selectContent(label, leadingIcon, floatingLabel, variant, description,
 			floatingLabel,
 			isDisabled: state.isDisabled,
 			isInvalid: state.isInvalid,
+			isRequired: state.isRequired,
 			label,
 			leading: leadingIcon,
 			ref: boxRef,