@kanso-labs/kanso-ui 0.26.4 → 0.26.6

package/dist/components/slider/index.js

@@ -1,6 +1,7 @@
 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 { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -39,6 +40,16 @@ const styles = {
 		krdFHd: "xr9e8f9",
 		$$css: true
 	},
+	root: {
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
+	rootVertical: {
+		kGNEyG: "x1cy8zhl",
+		kZKoxP: "x1u5z0ei",
+		kzqmXN: "x14atkfc",
+		$$css: true
+	},
 	segment: {
 		kWkggS: "x15dekr4",
 		kZKoxP: "xlup9mm",
@@ -146,18 +157,15 @@ function Slider$1(t0) {
 	let thumbLabels;
 	let vertical;
 	if ($[0] !== t0) {
-		const { label: t4, orientation: t5, thumbLabels: t6, ...props } = t0;
+		const { label: t4, orientation: t5, thumbLabels: t6, ...props$1 } = t0;
 		label = t4;
 		thumbLabels = t6;
 		const orientation = t5 === void 0 ? "horizontal" : t5;
 		vertical = orientation === "vertical";
 		T0 = Slider;
 		t1 = orientation;
-		t2 = props;
-		t3 = mergeStatefulStyles({
-			0: { className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" },
-			1: { className: "x9f619 x78zum5 xdt5ytf xzoy561 x1cy8zhl x1u5z0ei x14atkfc" }
-		}[!!vertical << 0], props);
+		t2 = props$1;
+		t3 = mergeStatefulStyles(props(groupStyles.root, styles.root, vertical && styles.rootVertical), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -178,7 +186,7 @@ function Slider$1(t0) {
 	let t4;
 	if ($[8] !== label) {
 		t4 = label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		});
 		$[8] = label;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","segment","kZKoxP","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kzqmXN","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","sm","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","0","className","1","state","2","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\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 sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\nconst styles = {\n  active: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xn3w4p2\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. `spacing.sm` is the 6dp of space plus half the\n// handle's 4dp, which is what the page measures between the two.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${spacing.sm})`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 xdt5ytf xzoy561 x1cy8zhl x1u5z0ei x14atkfc\"\n    }\n  }[!!vertical << 0], props)}>\n      {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","sm","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\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 sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\nconst styles = {\n  active: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  activeDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  inactiveDisabled: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  innerBlockEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kVL7Gh: \"x6en5u8\",\n    $$css: true\n  },\n  innerBlockStart: {\n    kfmiAY: \"x1e4oeot\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  innerInlineEnd: {\n    kT0f0o: \"x1ui04y5\",\n    kfmiAY: \"x1e4oeot\",\n    $$css: true\n  },\n  innerInlineStart: {\n    kVL7Gh: \"x6en5u8\",\n    krdFHd: \"xr9e8f9\",\n    $$css: true\n  },\n  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  rootVertical: {\n    kGNEyG: \"x1cy8zhl\",\n    kZKoxP: \"x1u5z0ei\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  segment: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k87sOh: \"xuivejd\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  segmentVertical: {\n    kZKoxP: \"xt7dq6l\",\n    kzqmXN: \"x1kky2od\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"x9p6ekw\",\n    $$css: true\n  },\n  thumb: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xn3w4p2\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"x51ohtg\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xdl150w\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbActive: {\n    kzqmXN: \"xfo62xy\",\n    $$css: true\n  },\n  thumbActiveVertical: {\n    kZKoxP: \"x36qwtl\",\n    kzqmXN: \"x187nhsf\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  thumbVertical: {\n    kZKoxP: \"xqu0tyb\",\n    kzqmXN: \"x187nhsf\",\n    k87sOh: \"x80663w\",\n    kLqNvP: \"xbudbmw\",\n    $$css: true\n  }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n  krVfgx: \"xiicpxy\",\n  k87sOh: \"x5mnzd7\",\n  \"$$css\": true\n};\nconst placements = {\n  block: (start: string, end: string) => [_temp, {\n    \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n  }],\n  inline: (start: string, end: string) => [{\n    kt4wiu: end != null ? \"xqxgn94\" : end,\n    kLqNvP: start != null ? \"x1lxsm33\" : start,\n    $$css: true\n  }, {\n    \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' | 'orientation'> & {\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  label?: string;\n  /**\n   * Along which axis the handle moves. A vertical slider is 240px tall until\n   * `style` on the root says otherwise.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. `spacing.sm` is the 6dp of space plus half the\n// handle's 4dp, which is what the page measures between the two.\nfunction clearOf(percent: number, fromEnd: boolean) {\n  const along = fromEnd ? 100 - percent : percent;\n  return `calc(${along}% + ${spacing.sm})`;\n}\n\n/**\n * A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n */\nfunction Slider({\n  label,\n  orientation = 'horizontal',\n  thumbLabels,\n  ...props\n}: SliderProps) {\n  const vertical = orientation === 'vertical';\n  return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n      {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n      <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n      0: {\n        className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n      },\n      2: {\n        className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n      },\n      1: {\n        className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n      },\n      3: {\n        className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n      }\n    })[!!vertical << 1 | !!state.isDisabled << 0], {})}>\n        {trackContent(vertical, thumbLabels)}\n      </SliderTrack>\n    </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n  return (state: SliderThumbRenderProps) => state.isDragging || state.isFocusVisible ? <SliderOutput {...{\n    0: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n    },\n    1: {\n      className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n    }\n  }[!!vertical << 0]}>\n        {state.state.getThumbValueLabel(index)}\n      </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n  return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging || state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] | undefined) {\n  return ({\n    isDisabled,\n    state\n  }: SliderTrackRenderProps) => {\n    const percents = state.values.map((_, index) => state.getThumbPercent(index) * 100);\n    const first = percents[0] ?? 0;\n    const last = percents.at(-1) ?? 0;\n    const range = percents.length > 1;\n    const place = vertical ? placements.block : placements.inline;\n    const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n    const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n    return <>\n        {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n        <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n          <span {...{\n          0: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n          },\n          2: {\n            className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n          },\n          1: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n          },\n          3: {\n            className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n          }\n        }[!!vertical << 1 | !!isDisabled << 0]} />\n        </span>\n        {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n      // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n      key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n            {thumbContent(index, vertical)}\n          </SliderThumb>)}\n      </>;\n  };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}

package/dist/components/snackbar/index.js

@@ -291,7 +291,7 @@ function SnackbarToast(t0) {
 	if ($[6] !== t1 || $[7] !== t2 || $[8] !== toast) {
 		t3 = /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
 			toast,
-			className: "x6s0dn4 x1n1nwrg x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w",
+			className: "x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w",
 			children: [t1, t2]
 		});
 		$[6] = t1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","props","snackbarContent","t5","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call 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 on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label=\"Close\" slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  toast\n}: {\n  close: () => void;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","props","snackbarContent","t5","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call 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 on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label=\"Close\" slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  toast\n}: {\n  close: () => void;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -1,7 +1,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { controlStyles } from "../../control/styles.js";
+import { ControlLabel } from "../../control/index.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
@@ -14,6 +17,17 @@ const _temp = {
 	"$$css": true
 };
 const styles = {
+	control: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x1vqgdyp",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "xvni27",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
 	handle: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xp2scj5",
@@ -115,13 +129,6 @@ const styles = {
 		kVAM5u: "xrh88j3",
 		$$css: true
 	},
-	trackFocused: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
-		kMeerF: "x1de99jn",
-		$$css: true
-	},
 	trackOn: {
 		kWkggS: "xnety89",
 		kVAM5u: "x1uajy3w",
@@ -161,14 +168,9 @@ function buttonContent(children, icon, ripple, drag) {
 		const dragging = interactive && drag.offset !== null;
 		const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x6s0dn4 x1vqgdyp x9f619 x1ypdohk x78zum5 x2lah0s xvni27 xl56j7k" },
-				2: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k xt0e3qv" },
-				1: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc" },
-				3: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+			...props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled),
 			children: /* @__PURE__ */ jsx("span", {
-				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused),
+				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible),
 				children: /* @__PURE__ */ jsxs("span", {
 					...interactive ? drag.handlers(on) : {},
 					...props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),
@@ -182,13 +184,8 @@ function buttonContent(children, icon, ripple, drag) {
 					})]
 				})
 			})
-		}), children === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...{
-				0: { className: "x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll" },
-				2: { className: "x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv" },
-				1: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" },
-				3: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" }
-			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+		}), /* @__PURE__ */ jsx(ControlLabel, {
+			state,
 			children
 		})] });
 	};
@@ -204,8 +201,8 @@ function buttonContent(children, icon, ripple, drag) {
 * which is the element a layout positions.
 */
 function Switch(t0) {
-	const $ = c(20);
-	const { children, description, error, icon: t1, ...props } = t0;
+	const $ = c(21);
+	const { children, description, error, icon: t1, ...props$1 } = t0;
 	const icon = t1 === void 0 ? false : t1;
 	const ripple = useRipple();
 	const drag = useHandleDrag();
@@ -217,7 +214,7 @@ function Switch(t0) {
 		$[0] = error;
 		$[1] = t2;
 	} else t2 = $[1];
-	const t3 = mergeStatefulStyles({ className: "x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz" }, props);
+	const t3 = mergeStatefulStyles(props(controlStyles.field), props$1);
 	let t4;
 	if ($[2] !== children || $[3] !== drag || $[4] !== icon || $[5] !== ripple) {
 		t4 = buttonContent(children, icon, ripple, drag);
@@ -237,38 +234,43 @@ function Switch(t0) {
 		$[8] = t5;
 	} else t5 = $[8];
 	let t6;
-	if ($[9] !== description || $[10] !== error) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: "x1xdureb",
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(controlStyles.messages);
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== description || $[11] !== error) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			...t6,
 			children: /* @__PURE__ */ jsx(FieldMessage, {
 				description,
 				error,
 				inset: false
 			})
 		});
-		$[9] = description;
-		$[10] = error;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[12] !== T0 || $[13] !== props || $[14] !== t2 || $[15] !== t3 || $[16] !== t5 || $[17] !== t6 || $[18] !== validationBehavior) {
-		t7 = /* @__PURE__ */ jsxs(T0, {
+		$[10] = description;
+		$[11] = error;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== validationBehavior) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
 			isInvalid: t2,
 			validationBehavior,
-			...props,
+			...props$1,
 			...t3,
-			children: [t5, t6]
+			children: [t5, t7]
 		});
-		$[12] = T0;
-		$[13] = props;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t5;
-		$[17] = t6;
-		$[18] = validationBehavior;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[13] = T0;
+		$[14] = props$1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = validationBehavior;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 /**
 * The handle following a pointer across the track, as the switch page draws

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","_temp","kLqNvP","styles","handle","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","kVAEAm","seat","k87sOh","seatAt","offset","val","undefined","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","kmuXW","trackDisabled","trackFocused","kjBf7l","kInvED","k3XXqK","kMeerF","trackOn","trackOnDisabled","hoverLayers","off","on","pressedLayers","TRAVEL","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","className","props","handlers","surface","Switch","t0","$","_c","t1","validationBehavior","T0","t2","t3","t4","t5","t6","t7","setOffset","origin","settled","cancelClick","Symbol","for","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","next","Math","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\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 switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  handle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\n    kaIpWk: \"x3y1ksm\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...{\n        0: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x1ypdohk x78zum5 x2lah0s xvni27 xl56j7k\"\n        },\n        2: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k xt0e3qv\"\n        },\n        1: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        },\n        3: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\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 Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that never moves is left alone entirely, so a tap flips the switch\n * as it did before.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","_temp","kLqNvP","styles","control","kGNEyG","kZKoxP","kB7OPa","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","$$css","handle","kWkggS","kaIpWk","kMwMTN","kIyJzY","k1ekBW","kAMwcw","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","kVAEAm","seat","k87sOh","seatAt","offset","val","undefined","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","trackDisabled","trackOn","trackOnDisabled","hoverLayers","off","on","pressedLayers","TRAVEL","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","props","controlReadOnly","controlDisabled","ringVisible","handlers","surface","Switch","t0","$","_c","t1","validationBehavior","T0","t2","t3","field","t4","t5","t6","Symbol","for","messages","t7","t8","setOffset","origin","settled","cancelClick","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","next","Math","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\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, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1vqgdyp\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  handle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\n    kaIpWk: \"x3y1ksm\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...stylex.props(styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled)}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\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 Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that never moves is left alone entirely, so a tap flips the switch\n * as it did before.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}

package/dist/components/table/index.js

@@ -1,7 +1,7 @@
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
-import ProgressIndicator from "../progress-indicator/index.js";
 import Checkbox from "../checkbox/index.js";
+import { CollectionLoadMore } from "../../collection/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -446,11 +446,9 @@ function TableLoadMore(t0) {
 	if ($[5] !== label) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: "x6s0dn4 x9f619 x78zum5 xl56j7k",
-			children: /* @__PURE__ */ jsx(ProgressIndicator, {
-				"aria-label": label,
-				isIndeterminate: true,
-				size: "24px",
-				variant: "circular"
+			children: /* @__PURE__ */ jsx(CollectionLoadMore, {
+				label,
+				size: "24px"
 			})
 		});
 		$[5] = label;