@kanso-labs/kanso-ui 0.26.2 → 0.26.3

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

@@ -1,6 +1,7 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-components";
@@ -80,34 +81,125 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
 * The call site's `className` and `style` land on the track, which is the
 * element a layout positions.
 */
-function SegmentedButton({ selectionMode = "single", showSelectedIcon = true, ...props }) {
-	return /* @__PURE__ */ jsx(ShowSelectedIconContext, {
-		value: showSelectedIcon,
-		children: /* @__PURE__ */ jsx(SelectionModeContext, {
-			value: selectionMode,
-			children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
-				...props,
-				selectionMode,
-				...mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props)
-			})
-		})
-	});
+function SegmentedButton(t0) {
+	const $ = c(22);
+	let T0;
+	let T1;
+	let T2;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		const { selectionMode: t6, showSelectedIcon: t7, ...props } = t0;
+		const selectionMode = t6 === void 0 ? "single" : t6;
+		const showSelectedIcon = t7 === void 0 ? true : t7;
+		T2 = ShowSelectedIconContext;
+		t5 = showSelectedIcon;
+		T1 = SelectionModeContext;
+		t4 = selectionMode;
+		T0 = ToggleButtonGroup;
+		t1 = props;
+		t2 = selectionMode;
+		t3 = mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = T2;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		T2 = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			selectionMode: t2,
+			...t3
+		});
+		$[9] = T0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== T1 || $[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T1, {
+			value: t4,
+			children: t6
+		});
+		$[14] = T1;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== T2 || $[19] !== t5 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T2, {
+			value: t5,
+			children: t7
+		});
+		$[18] = T2;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
 }
 /**
 * One segment. Its `id` is what selection is reported by, and its label is
 * what names it. A chosen segment draws a check before the label; an
 * unchosen one draws whatever `icon` holds, if anything.
 */
-function SegmentedButtonSegment({ children, disableRipple = false, icon, ...props }) {
+function SegmentedButtonSegment(t0) {
+	const $ = c(12);
+	const { children, disableRipple: t1, icon, ...props } = t0;
+	const disableRipple = t1 === void 0 ? false : t1;
 	const selectionMode = useContext(SelectionModeContext);
 	const showSelectedIcon = useContext(ShowSelectedIconContext);
 	const ripple = useRipple(!disableRipple && props.isDisabled !== true);
-	return /* @__PURE__ */ jsx(ToggleButton, {
-		...props,
-		...ripple.handlers,
-		...mergeStatefulStyles(segmentStyles, props),
-		children: segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
-	});
+	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, {
+			...props,
+			...t2,
+			...t3,
+			children: t4
+		});
+		$[6] = T0;
+		$[7] = props;
+		$[8] = ripple.handlers;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 }
 function segmentStyles(state) {
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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","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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"}

package/dist/components/select/index.js

@@ -5,9 +5,9 @@ import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../fiel
 import { FieldBox, FieldMessage, FieldTrigger, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import ListBox$1 from "../list-box/index.js";
+import { c } from "react/compiler-runtime";
 import { useContext, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Popover, Select, SelectStateContext, SelectValue } from "react-aria-components";
 //#region src/components/select/index.tsx
 const TRIGGER = /* @__PURE__ */ jsx(FieldTrigger, {});
@@ -54,17 +54,55 @@ const styles = { list: {
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions.
 */
-function Select$1({ container, description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, options, variant = "filled", ...props$1 }) {
+function Select$1(t0) {
+	const $ = c(19);
+	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, options, variant: t3, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "filled" : t3;
 	const validationBehavior = useFieldValidationBehavior();
 	const boxRef = useRef(null);
-	return /* @__PURE__ */ jsx(Select, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)
-	});
+	const T0 = Select;
+	let t4;
+	if ($[0] !== error) {
+		t4 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t6;
+	if ($[2] !== container || $[3] !== description || $[4] !== error || $[5] !== floatingLabel || $[6] !== label || $[7] !== leadingIcon || $[8] !== options || $[9] !== variant) {
+		t6 = selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef);
+		$[2] = container;
+		$[3] = description;
+		$[4] = error;
+		$[5] = floatingLabel;
+		$[6] = label;
+		$[7] = leadingIcon;
+		$[8] = options;
+		$[9] = variant;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== T0 || $[12] !== isDisabled || $[13] !== props$1 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6 || $[17] !== validationBehavior) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			isDisabled,
+			isInvalid: t4,
+			validationBehavior,
+			...props$1,
+			...t5,
+			children: t6
+		});
+		$[11] = T0;
+		$[12] = isDisabled;
+		$[13] = props$1;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = validationBehavior;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
 }
 function selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isFocused","isPlaceholder"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field 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.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,UAAU,oBAAC,cAAD,CAAa,CAAA;AAC7B,SAAS,WAAW,QAAiB;CACnC,OAAO,oBAAC,iBAAD,EAAiB,GAAI;EAC1B,GAAG,EACD,WAAW,4CACb;EACA,GAAG,EACD,WAAW,2CACb;CACF,EAAE,CAAC,CAAC,UAAU,GAAG,CAAA;AACnB;AACA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAS,SAAkC,EACzC,WACA,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,SACA,UAAU,UACV,GAAG,WACc;CACjB,MAAM,qBAAqB,2BAA2B;CAGtD,MAAM,SAAS,OAAuB,IAAI;CAC1C,OAAO,oBAAC,QAAD;EAA0B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EACvL,UAAA,cAAc,OAAO,aAAa,eAAe,SAAS,aAAa,OAAO,SAAS,WAAW,MAAM;CAChG,CAAA;AACf;AASA,SAAS,cAAc,OAAe,aAAwB,eAAwB,SAAuB,aAAiC,OAA2B,SAAoB,WAAgC,QAA0C;CACrQ,QAAQ,UAA6B,qBAAA,YAAA,EAAA,UAAA;EACjC,oBAAC,UAAD;GAAyB;GAI3B,YAAY,MAAM;GAAY,WAAW,MAAM;GAAkB;GAAO,SAAS;GAAa,KAAK;GAAQ,UAAU,WAAW,MAAM,MAAM;GAAG,SAAS;GAAkB;GACtK,UAAA,oBAAC,eAAD,EAAe,WAAW,MAAM,UAAU,CAAA;EAClC,CAAA;EACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA;EACrD,oBAAC,SAAD;GAAY,YAAY;GAE1B,0BAA0B;GAAW,GAAI,MAAa,QAAQ,OAAO,OAAO,IAAI;GAC5E,UAAA,oBAAC,WAAD,EAAA,UAAU,QAAiB,CAAA;EACjB,CAAA;CACd,EAAA,CAAA;AACJ;;;;;;AAOA,SAAA,cAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAuB,MAAA,EAAA,cAAA;CAMrB,MAAA,iBADc,WAAW,kBACF,CAAK,EAAA,iBAA+B,aAAK,QAAzC,OAAoD;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAEzE,KAAA,oBAAC,aAAD,CAAe,CAAA;EAAG,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,aAAA,EAAA,OAAA,eAAA;EADf,KAAA,oBAAC,YAAD;GAAuB;GAA0B;GACpD,UAAA;EADc,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFR;AAEQ"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field 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.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}

package/dist/components/separator/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Separator, SeparatorContext, useSlottedContext } from "react-aria-components";
 //#region src/components/separator/index.tsx
@@ -67,14 +68,28 @@ const insets = {
 * the rule across the toolbar's own direction. `elementType` picks a
 * different element, and `render` is React Aria's function form.
 */
-function Separator$1({ inset = "none", orientation, ...props$1 }) {
+function Separator$1(t0) {
+	const $ = c(5);
+	const { inset: t1, orientation, ...props$1 } = t0;
+	const inset = t1 === void 0 ? "none" : t1;
 	const context = useSlottedContext(SeparatorContext, props$1.slot);
 	const resolved = orientation ?? context?.orientation ?? "horizontal";
-	return /* @__PURE__ */ jsx(Separator, {
-		orientation: resolved,
-		...props$1,
-		...mergeStyles(props(styles.base, styles[resolved], insets[resolved][inset]), props$1)
-	});
+	const T0 = Separator;
+	const t2 = mergeStyles(props(styles.base, styles[resolved], insets[resolved][inset]), props$1);
+	let t3;
+	if ($[0] !== T0 || $[1] !== props$1 || $[2] !== resolved || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			orientation: resolved,
+			...props$1,
+			...t2
+		});
+		$[0] = T0;
+		$[1] = props$1;
+		$[2] = resolved;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 //#endregion
 export { Separator$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;AA6CA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAsCA,MAAM,SAAS;CACb,YAAY;EAjCZ,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,QAAQ;GACR,OAAO;EACT;EACA,MAAM,EACJ,OAAO,KACT;EACA,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,OAAO;EACT;CAoBY;CACZ,UAAU;EAfV,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;EACT;EACA,MAAM,EACJ,OAAO,KACT;EACA,OAAO;GACL,QAAQ;GACR,OAAO;EACT;CAIU;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAS,YAAU,EACjB,QAAQ,QACR,aACA,GAAG,WACc;CACjB,MAAM,UAAU,kBAAkB,kBAAkB,QAAM,IAAI;CAC9D,MAAM,WAAW,eAAe,SAAS,eAAe;CACxD,OAAO,oBAAC,WAAD;EAAc,aAAa;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,OAAO,MAAM,OAAO,WAAW,OAAO,SAAS,CAAC,MAAM,GAAG,OAAK;CAAE,CAAA;AACtJ"}
+{"version":3,"file":"index.js","names":["SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kzqmXN","vertical","kSGwAc","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","_c","t1","props","undefined","context","slot","resolved","T0","t2","t3"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;AA6CA,MAAMU,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRC,QAAQ;EACRF,QAAQ;EACRH,OAAO;CACT;AACF;AAsCA,MAAMe,SAAS;CACbd,YAAYK;EAjCZC,MAAM;GACJJ,QAAQ;GACRK,QAAQ;GACRC,QAAQ;GACRT,OAAO;EACT;EACAU,MAAM,EACJV,OAAO,KACT;EACAW,OAAO;GACLR,QAAQ;GACRM,QAAQ;GACRT,OAAO;EACT;CAoBYM;CACZF,UAAUQ;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRd,OAAO;EACT;EACAU,MAAM,EACJV,OAAO,KACT;EACAW,OAAO;GACLG,QAAQ;GACRd,OAAO;EACT;CAIUY;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAA1B,YAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAmB,MAAA,EAAAJ,OAAAK,IAAAJ,aAAA,GAAAK,YAAAJ;CACjB,MAAAF,QAAAK,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgBrC,kBAAkBD,kBAAkBoC,QAAKG,IAAK;CAC9D,MAAAC,WAAiBT,eAAeO,SAAOP,eAAtB;CACT,MAAAU,KAAA1C;CAAmD,MAAA2C,KAAAxC,YAAYL,MAAaQ,OAAMC,MAAOD,OAAOmC,WAAWb,OAAOa,SAAS,CAACV,MAAM,GAAGM,OAAK;CAAC,IAAAO;CAAA,IAAAV,EAAA,OAAAQ,MAAAR,EAAA,OAAAG,WAAAH,EAAA,OAAAO,YAAAP,EAAA,OAAAS,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIT,EAAA,KAAAQ;EAAAR,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAAhJU;AAAgJ"}

package/dist/components/sheet/index.js

@@ -1,8 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/sheet/index.tsx
 /**
@@ -72,24 +72,92 @@ function SheetBody(props) {
 * otherwise — React Aria's own default is the reverse, and a sheet that
 * ignores a tap outside it reads as stuck.
 */
-function SheetContent({ children, className, container, isDismissable = true, isKeyboardDismissDisabled, style, ...props$1 }) {
-	return /* @__PURE__ */ jsx(ModalOverlay, {
-		isDismissable,
-		isKeyboardDismissDisabled,
-		UNSTABLE_portalContainer: container,
-		...props(overlay.scrim),
-		children: /* @__PURE__ */ jsx(Modal, {
-			...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" }, {
-				className,
-				style
-			}),
-			children: /* @__PURE__ */ jsx(Dialog, {
-				...props$1,
-				...props(overlay.modalDialog),
-				children
-			})
-		})
-	});
+function SheetContent(t0) {
+	const $ = c(24);
+	let children;
+	let className;
+	let container;
+	let isKeyboardDismissDisabled;
+	let props$1;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, style, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = container;
+		$[4] = isKeyboardDismissDisabled;
+		$[5] = props$1;
+		$[6] = style;
+		$[7] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		container = $[3];
+		isKeyboardDismissDisabled = $[4];
+		props$1 = $[5];
+		style = $[6];
+		t1 = $[7];
+	}
+	const isDismissable = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = props(overlay.scrim);
+		$[8] = t2;
+	} 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" }, {
+			className,
+			style
+		});
+		$[9] = className;
+		$[10] = style;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = props(overlay.modalDialog);
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== children || $[14] !== props$1) {
+		t5 = /* @__PURE__ */ jsx(Dialog, {
+			...props$1,
+			...t4,
+			children
+		});
+		$[13] = children;
+		$[14] = props$1;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t3 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Modal, {
+			...t3,
+			children: t5
+		});
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== container || $[20] !== isDismissable || $[21] !== isKeyboardDismissDisabled || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
+			isDismissable,
+			isKeyboardDismissDisabled,
+			UNSTABLE_portalContainer: container,
+			...t2,
+			children: t6
+		});
+		$[19] = container;
+		$[20] = isDismissable;
+		$[21] = isKeyboardDismissDisabled;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
 }
 function SheetFooter(props) {
 	const $ = c(5);