@kanso-labs/kanso-ui 0.26.2 → 0.26.4

package/dist/components/progress-indicator/index.js

@@ -2,11 +2,12 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { indicatorStyles } from "../../indicator/styles.js";
 import { IndicatorLabels, IndicatorLine } from "../../indicator/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ProgressBar } from "react-aria-components";
 //#region src/components/progress-indicator/index.tsx
 const CIRCULAR_SIZE = 40;
+const CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;
 const THICKNESS = 4;
 const GAP = 4;
 const RADIUS = 18;
@@ -323,14 +324,96 @@ function LinearTrack(t0) {
 * The call site's `className` and `style` land on the indicator as a whole,
 * which is the element a layout positions.
 */
-function ProgressIndicator({ buffer, label, maxValue = 100, minValue = 0, showValue = false, size = `${CIRCULAR_SIZE}px`, tone = "primary", variant = "linear", ...props$1 }) {
-	return /* @__PURE__ */ jsx(ProgressBar, {
-		maxValue,
-		minValue,
-		...props$1,
-		...mergeStatefulStyles(props(indicatorStyles.root, variant === "circular" && styles.rootCircular), props$1),
-		children: indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)
-	});
+function ProgressIndicator(t0) {
+	const $ = c(30);
+	let T0;
+	let buffer;
+	let label;
+	let maxValue;
+	let minValue;
+	let showValue;
+	let size;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let tone;
+	let variant;
+	if ($[0] !== t0) {
+		const { buffer: t5, label: t6, maxValue: t7, minValue: t8, showValue: t9, size: t10, tone: t11, variant: t12, ...props$1 } = t0;
+		buffer = t5;
+		label = t6;
+		maxValue = t7 === void 0 ? 100 : t7;
+		minValue = t8 === void 0 ? 0 : t8;
+		showValue = t9 === void 0 ? false : t9;
+		size = t10 === void 0 ? CIRCULAR_SIZE_PX : t10;
+		tone = t11 === void 0 ? "primary" : t11;
+		variant = t12 === void 0 ? "linear" : t12;
+		T0 = ProgressBar;
+		t1 = maxValue;
+		t2 = minValue;
+		t3 = props$1;
+		t4 = mergeStatefulStyles(props(indicatorStyles.root, variant === "circular" && styles.rootCircular), props$1);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = buffer;
+		$[3] = label;
+		$[4] = maxValue;
+		$[5] = minValue;
+		$[6] = showValue;
+		$[7] = size;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = tone;
+		$[13] = variant;
+	} else {
+		T0 = $[1];
+		buffer = $[2];
+		label = $[3];
+		maxValue = $[4];
+		minValue = $[5];
+		showValue = $[6];
+		size = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		tone = $[12];
+		variant = $[13];
+	}
+	let t5;
+	if ($[14] !== buffer || $[15] !== label || $[16] !== maxValue || $[17] !== minValue || $[18] !== showValue || $[19] !== size || $[20] !== tone || $[21] !== variant) {
+		t5 = indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone);
+		$[14] = buffer;
+		$[15] = label;
+		$[16] = maxValue;
+		$[17] = minValue;
+		$[18] = showValue;
+		$[19] = size;
+		$[20] = tone;
+		$[21] = variant;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== T0 || $[24] !== t1 || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			maxValue: t1,
+			minValue: t2,
+			...t3,
+			...t4,
+			children: t5
+		});
+		$[23] = T0;
+		$[24] = t1;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t5;
+		$[29] = t6;
+	} else t6 = $[29];
+	return t6;
 }
 //#endregion
 export { ProgressIndicator as default };

package/dist/components/progress-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RADIUS","THICKNESS","tone"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    kIyJzY: \"x1wsgiic\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x3y1ksm x9f619 xh8yej3 xb3r6kr x1n2onr6\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 x1hev8vu\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xmvyqo8\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer))} />\n          <span className=\"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\" />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = `${CIRCULAR_SIZE}px`,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts, so the active indicator's\n// width is the percentage itself and the track takes what is left. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    kIyJzY: \"x1wsgiic\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x3y1ksm x9f619 xh8yej3 xb3r6kr x1n2onr6\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 x1hev8vu\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xmvyqo8\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer))} />\n          <span className=\"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\" />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}

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

@@ -3,8 +3,8 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { RadioButton, RadioField, RadioGroup } from "react-aria-components";
 //#region src/components/radio-group/index.tsx
 const styles = {
@@ -188,16 +188,50 @@ function Radio(t0) {
 * The call site's `className` and `style` land on the group as a whole,
 * which is the element a layout positions.
 */
-function RadioGroup$1({ children, description, error, label, orientation = "vertical", ...props }) {
+function RadioGroup$1(t0) {
+	const $ = c(16);
+	const { children, description, error, label, orientation: t1, ...props } = t0;
+	const orientation = t1 === void 0 ? "vertical" : t1;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsx(RadioGroup, {
-		isInvalid: invalidFrom(error),
-		orientation,
-		validationBehavior,
-		...props,
-		...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props),
-		children: groupContent(label, children, description, error, orientation === "horizontal")
-	});
+	const T0 = RadioGroup;
+	let t2;
+	if ($[0] !== error) {
+		t2 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561" }, props);
+	const t4 = orientation === "horizontal";
+	let t5;
+	if ($[2] !== children || $[3] !== description || $[4] !== error || $[5] !== label || $[6] !== t4) {
+		t5 = groupContent(label, children, description, error, t4);
+		$[2] = children;
+		$[3] = description;
+		$[4] = error;
+		$[5] = label;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== orientation || $[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t5 || $[14] !== validationBehavior) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			isInvalid: t2,
+			orientation,
+			validationBehavior,
+			...props,
+			...t3,
+			children: t5
+		});
+		$[8] = T0;
+		$[9] = orientation;
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = validationBehavior;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 }
 //#endregion
 export { Radio, RadioGroup$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["description"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The group's label: label-large, the role a field's label takes at rest,\n// since a group has no box to float it in.\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","control","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","controlDisabled","controlFocused","kjBf7l","kInvED","k3XXqK","kMeerF","controlReadOnly","toneActive","toneDisabled","toneSelected","hoverLayers","selected","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","surface","undefined","className","groupContent","horizontal","Radio","t0","$","_c","T0","t1","t2","t3","t4","t5","orientation","validationBehavior","t6"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\nconst styles = {\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The group's label: label-large, the role a field's label takes at rest,\n// since a group has no box to float it in.\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span className=\"x6s0dn4 x1qx5ct2 x1r7ld26 x3y1ksm x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span className=\"xtwfq29 x170jfvy x3y1ksm x1fsd2vl\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561\"\n  }, props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":";;;;;;;;;AA+BA,MAAMuB,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfV,QAAQ;EACRS,OAAO;CACT;CACAE,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,iBAAiB;EACfhB,QAAQ;EACRS,OAAO;CACT;CACAQ,YAAY;EACVlB,QAAQ;EACRU,OAAO;CACT;CACAS,cAAc;EACZnB,QAAQ;EACRU,OAAO;CACT;CACAU,cAAc;EACZpB,QAAQ;EACRU,OAAO;CACT;AACF;AAOA,MAAMW,cAAc;CAClBC,UAAU;EACR1B,QAAQ;EACRc,OAAO;CACT;CACAa,YAAY;EACV3B,QAAQ;EACRc,OAAO;CACT;AACF;AACA,MAAMc,gBAAgB;CACpBF,UAAU;EACR1B,QAAQ;EACRc,OAAO;CACT;CACAa,YAAY;EACV3B,QAAQ;EACRc,OAAO;CACT;AACF;AAsCA,SAASwB,cAAcT,UAAqBU,QAAgB;CAC1D,QAAQC,UAAkC;EACxC,MAAMC,cAAc,CAACD,MAAME,cAAc,CAACF,MAAMG;EAChD,MAAMC,OAAOJ,MAAMK,aAAa,aAAa;EAC7C,MAAMC,SAASN,MAAMO,aAAaP,MAAMQ,aAAaR,MAAMS;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAIR,cAAcF,OAAOW,WAAW,CAAC;GAAG,GAAItE,MAAaiB,OAAOC,SAAS0C,MAAMK,cAAchD,OAAO2B,cAAc,CAACgB,MAAMK,cAAcJ,eAAeK,UAAUjD,OAAOyB,YAAYkB,MAAME,cAAc7C,OAAO0B,cAAciB,MAAMG,cAAc9C,OAAOwB,iBAAiBmB,MAAME,cAAc7C,OAAOkB,iBAAiB0B,eAAeD,MAAMO,aAAatB,YAAYmB,OAAOH,eAAeD,MAAMQ,aAAapB,cAAcgB,OAAOJ,MAAMS,kBAAkBpD,OAAOmB,cAAc;GAAnd,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACbwB,UAAAA,MAAMK,aAAa,oBAAC,QAAD,EAAM,WAAU,oCAAmC,CAAA,IAAM;GACzE,CAAA,GACLJ,cAAcF,OAAOa,UAAU,IAC5B;EACLvB,CAAAA,GAAAA,aAAawB,KAAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI;IAC3C,GAAG,EACDC,WAAW,gFACb;IACA,GAAG,EACDA,WAAW,+EACb;IACA,GAAG,EACDA,WAAW,gFACb;IACA,GAAG,EACDA,WAAW,gFACb;GACF,EAAE,CAAC,CAACd,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,cAAc;GAC3Cb;EACG,CAAA,CACV,EAAA,CAAA;CACJ;AACF;AAIA,SAAS0B,aAAavB,OAAeH,UAAqBC,aAAiCC,OAA2ByB,YAAqB;CACzI,QAAQhB,UAAiC,qBAAA,UAAA,EAAA,UAAA;EACrC,oBAAC,YAAD;GAAmBA;GAAO,WAAU;GACjCR,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDsB,WAAW,kBACb;IACA,GAAG,EACDA,WAAW,oCACb;GACF,EAAE,CAAC,CAACE,cAAc;GACb3B;EACE,CAAA;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ;;;;;;;;;;AAWA,SAAA0B,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAe,MAAA,EAAA/B,UAAAC,aAAA,GAAAqB,UAAAO;CAKb,MAAAnB,SAAelD,UAA2B;CAClC,MAAAwE,KAAA7E;CAA0B,MAAA8E,KAAAxE,oBAAoB,EAAAgE,WACzC,0CACb,GAAGH,KAAK;CAAC,IAAAY;CAAA,IAAAJ,EAAA,OAAA9B,YAAA8B,EAAA,OAAApB,QAAA;EAEFwB,KAAAzB,cAAcT,UAAUU,MAAM;EAACoB,EAAA,KAAA9B;EAAA8B,EAAA,KAAApB;EAAAoB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAI,IAAA;EADlCC,KAAA,oBAAC,aAAD;GAAuB,WAAA;GACpBD,UAAAA;EADS,CAAA;EAEEJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAA7B,aAAA;EACdmC,KAAA,oBAAA,OAAA;GAAe,WAAA;GACb,UAAA,oBAAC,cAAD;IAA2BnC;IAAoB,OAAA;GAAK,CAAA;EAChD,CAAA;EAAA6B,EAAA,KAAA7B;EAAA6B,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAR,SAAAQ,EAAA,OAAAG,MAAAH,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EARHC,KAAA,qBAAC,IAAD;GAAW,GAAKf;GAAK,GAAMW;GAA3B,UAAA,CAGHE,IAGAC,EANc;;EASHN,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OATRO;AASQ;;;;;;;;;;;;AAcjB,SAAArF,aAAA6E,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAA/B,UAAAC,aAAAC,OAAAC,OAAAmC,aAAAL,IAAA,GAAAX,UAAAO;CAKlB,MAAAS,cAAAL,OAAAT,KAAAA,IAAA,aAAAS;CAGA,MAAAM,qBAA2BhF,2BAA2B;CAC9C,MAAAyE,KAAA/E;CAAa,IAAAiF;CAAA,IAAAJ,EAAA,OAAA5B,OAAA;EAAYgC,KAAA5E,YAAY4C,KAAK;EAAC4B,EAAA,KAAA5B;EAAA4B,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAmF,MAAAK,KAAA1E,oBAAoB,EAAAgE,WAC7I,iCACb,GAAGH,KAAK;CAC+C,MAAAc,KAAAE,gBAAgB;CAAY,IAAAD;CAAA,IAAAP,EAAA,OAAA9B,YAAA8B,EAAA,OAAA7B,eAAA6B,EAAA,OAAA5B,SAAA4B,EAAA,OAAA3B,SAAA2B,EAAA,OAAAM,IAAA;EAA9EC,KAAAX,aAAavB,OAAOH,UAAUC,aAAaC,OAAOkC,EAA4B;EAACN,EAAA,KAAA9B;EAAA8B,EAAA,KAAA7B;EAAA6B,EAAA,KAAA5B;EAAA4B,EAAA,KAAA3B;EAAA2B,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,MAAAF,EAAA,OAAAQ,eAAAR,EAAA,QAAAR,SAAAQ,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,MAAAP,EAAA,QAAAS,oBAAA;EAH7EC,KAAA,oBAAC,IAAD;GAA0B,WAAAN;GAAiCI;GAAiCC;GAAkB,GAAMjB;GAAK,GAAMa;GAGjIE,UAAAA;EAHgB,CAAA;EAIHP,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;EAAAR,EAAA,MAAAR;EAAAQ,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAJXU;AAIW"}

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

@@ -3,8 +3,8 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { calendarStyles } from "../../calendar/styles.js";
 import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar } from "react-aria-components";
 //#region src/components/range-calendar/index.tsx
 function cellClassName(state) {

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

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

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

@@ -4,6 +4,7 @@ import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldInput, FieldMessage } from "../../field/index.js";
 import IconButton from "../icon-button/index.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Label, SearchField, VisuallyHidden } from "react-aria-components";
 //#region src/components/search-field/index.tsx
@@ -47,16 +48,50 @@ function fieldContent(label, placeholder, clearLabel, description, error) {
 * around them is the search page's rather than the box the other fields
 * share.
 */
-function SearchField$1({ clearLabel = "Clear", description, error, isDisabled = false, label, placeholder, ...props$1 }) {
+function SearchField$1(t0) {
+	const $ = c(16);
+	const { clearLabel: t1, description, error, isDisabled: t2, label, placeholder, ...props$1 } = t0;
+	const clearLabel = t1 === void 0 ? "Clear" : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsx(SearchField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: fieldContent(label, placeholder, clearLabel, description, error)
-	});
+	const T0 = SearchField;
+	let t3;
+	if ($[0] !== error) {
+		t3 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t5;
+	if ($[2] !== clearLabel || $[3] !== description || $[4] !== error || $[5] !== label || $[6] !== placeholder) {
+		t5 = fieldContent(label, placeholder, clearLabel, description, error);
+		$[2] = clearLabel;
+		$[3] = description;
+		$[4] = error;
+		$[5] = label;
+		$[6] = placeholder;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== isDisabled || $[10] !== props$1 || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== validationBehavior) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			isDisabled,
+			isInvalid: t3,
+			validationBehavior,
+			...props$1,
+			...t4,
+			children: t5
+		});
+		$[8] = T0;
+		$[9] = isDisabled;
+		$[10] = props$1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = validationBehavior;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 }
 //#endregion
 export { SearchField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * @default 'Clear'\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string, description: string | undefined, error: string | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xnnlda6 x3y1ksm x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x6s0dn4 xnnlda6 x3y1ksm x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg x1xj74d8\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel = 'Clear',\n  description,\n  error,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;AAwEA,SAAS,aAAa,OAAe,aAAiC,YAAoB,aAAiC,OAA2B;CACpJ,QAAQ,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD,WAAW,iKACb;IACA,GAAG,EACD,WAAW,+IACb;GACF,EAAE,CAAC,CAAC,MAAM,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyB;KAAa,WAAU;IAA2C,CAAA;IAC1F,MAAM,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAY;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAS,cAAY,EACnB,aAAa,SACb,aACA,OACA,aAAa,OACb,OACA,aACA,GAAG,WACgB;CACnB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,oBAAC,aAAD;EAA4B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EACzL,UAAA,aAAa,OAAO,aAAa,YAAY,aAAa,KAAK;CAClD,CAAA;AACpB"}
+{"version":3,"file":"index.js","names":["SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","IconButton","clearLabel","description","error","label","placeholder","Omit","fieldContent","state","className","isDisabled","isEmpty","t0","$","_c","t1","t2","props","undefined","validationBehavior","T0","t3","t4","root","t5","t6"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * @default 'Clear'\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string, description: string | undefined, error: string | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xnnlda6 x3y1ksm x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x6s0dn4 xnnlda6 x3y1ksm x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg x1xj74d8\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel = 'Clear',\n  description,\n  error,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;AAwEA,SAAS4B,aAAaH,OAAeC,aAAiCJ,YAAoBC,aAAiCC,OAA2B;CACpJ,QAAQK,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDK,WAAW,iKACb;IACA,GAAG,EACDA,WAAW,+IACb;GACF,EAAE,CAAC,CAACD,MAAME,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBL;KAAa,WAAU;IAA2C,CAAA;IAC1FG,MAAMG,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYV;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAAnB,cAAA4B,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAb,YAAAc,IAAAb,aAAAC,OAAAO,YAAAM,IAAAZ,OAAAC,aAAA,GAAAY,YAAAL;CACnB,MAAAX,aAAAc,OAAAG,KAAAA,IAAA,UAAAH;CAGA,MAAAL,aAAAM,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,qBAA2B5B,2BAA2B;CAC9C,MAAA6B,KAAAnC;CAAc,IAAAoC;CAAA,IAAAR,EAAA,OAAAV,OAAA;EAAoCkB,KAAA/B,YAAYa,KAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAyD,MAAAS,KAAA5B,oBAAoBZ,MAAaO,YAAWkC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAX,EAAA,OAAAZ,cAAAY,EAAA,OAAAX,eAAAW,EAAA,OAAAV,SAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,aAAA;EAC1LmB,KAAAjB,aAAaH,OAAOC,aAAaJ,YAAYC,aAAaC,KAAK;EAACU,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAO,MAAAP,EAAA,OAAAH,cAAAG,EAAA,QAAAI,WAAAJ,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,MAAAT,EAAA,QAAAW,MAAAX,EAAA,QAAAM,oBAAA;EAD9DM,KAAA,oBAAC,IAAD;GAA4Bf;GAAuB,WAAAW;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAChIE,UAAAA;EADiB,CAAA;EAEHX,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAM;EAAAN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAFZY;AAEY"}