@kanso-labs/kanso-ui 0.28.2 → 0.28.4

package/dist/components/date-range-picker/index.js

@@ -13,6 +13,13 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "react-aria-components";
 //#region src/components/date-range-picker/index.tsx
+function calendarTrigger(triggerLabel) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": triggerLabel,
+		className: triggerClassName,
+		children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
+	});
+}
 /**
 * A date range typed into a field, or picked from a calendar behind a
 * button. The value is React Aria's — pass `value` with `onChange` to
@@ -40,7 +47,7 @@ import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "reac
 * which is the element a layout positions.
 */
 function DateRangePicker$1(t0) {
-	const $ = c(39);
+	const $ = c(38);
 	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, separator: t3, triggerLabel: t4, variant: t5, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -57,151 +64,142 @@ function DateRangePicker$1(t0) {
 	} else t6 = $[1];
 	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
 	let t8;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = props(picker.group);
-		$[2] = t8;
-	} else t8 = $[2];
+	if ($[2] !== triggerLabel) {
+		t8 = calendarTrigger(triggerLabel);
+		$[2] = triggerLabel;
+		$[3] = t8;
+	} else t8 = $[3];
 	let t9;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(DateInput, {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = props(picker.group);
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "start",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[3] = t9;
-	} else t9 = $[3];
-	let t10;
-	if ($[4] !== separator) {
-		t10 = /* @__PURE__ */ jsx("span", {
+		$[5] = t10;
+	} else t10 = $[5];
+	let t11;
+	if ($[6] !== separator) {
+		t11 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej",
 			children: separator
 		});
-		$[4] = separator;
-		$[5] = t10;
-	} else t10 = $[5];
-	let t11;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(DateInput, {
+		$[6] = separator;
+		$[7] = t11;
+	} else t11 = $[7];
+	let t12;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "end",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[6] = t11;
-	} else t11 = $[6];
-	let t12;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) });
-		$[7] = t12;
-	} else t12 = $[7];
+		$[8] = t12;
+	} else t12 = $[8];
 	let t13;
-	if ($[8] !== triggerLabel) {
-		t13 = /* @__PURE__ */ jsx(Button, {
-			"aria-label": triggerLabel,
-			className: triggerClassName,
-			children: t12
-		});
-		$[8] = triggerLabel;
-		$[9] = t13;
-	} else t13 = $[9];
-	let t14;
-	if ($[10] !== t10 || $[11] !== t13) {
-		t14 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
-			...t8,
+	if ($[9] !== t11) {
+		t13 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+			...t9,
 			children: [
-				t9,
 				t10,
 				t11,
-				t13
+				t12
 			]
 		}) });
-		$[10] = t10;
-		$[11] = t13;
-		$[12] = t14;
-	} else t14 = $[12];
-	let t15;
-	if ($[13] !== floatingLabel || $[14] !== label || $[15] !== leadingIcon || $[16] !== t14 || $[17] !== variant) {
-		t15 = /* @__PURE__ */ jsx(FieldBox, {
+		$[9] = t11;
+		$[10] = t13;
+	} else t13 = $[10];
+	let t14;
+	if ($[11] !== floatingLabel || $[12] !== label || $[13] !== leadingIcon || $[14] !== t13 || $[15] !== t8 || $[16] !== variant) {
+		t14 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
 			label,
 			leading: leadingIcon,
+			trailing: t8,
 			variant,
-			children: t14
+			children: t13
 		});
-		$[13] = floatingLabel;
-		$[14] = label;
-		$[15] = leadingIcon;
-		$[16] = t14;
-		$[17] = variant;
-		$[18] = t15;
-	} else t15 = $[18];
-	let t16;
-	if ($[19] !== description || $[20] !== error) {
-		t16 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[11] = floatingLabel;
+		$[12] = label;
+		$[13] = leadingIcon;
+		$[14] = t13;
+		$[15] = t8;
+		$[16] = variant;
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] !== description || $[19] !== error) {
+		t15 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[19] = description;
-		$[20] = error;
+		$[18] = description;
+		$[19] = error;
+		$[20] = t15;
+	} else t15 = $[20];
+	let t16;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = props(overlay.popup, picker.popover);
 		$[21] = t16;
 	} else t16 = $[21];
 	let t17;
 	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = props(overlay.popup, picker.popover);
+		t17 = props(overlay.popupDialog, focus.ring);
 		$[22] = t17;
 	} else t17 = $[22];
 	let t18;
-	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = props(overlay.popupDialog, focus.ring);
-		$[23] = t18;
-	} else t18 = $[23];
-	let t19;
-	if ($[24] !== label) {
-		t19 = /* @__PURE__ */ jsx(Dialog, {
-			...t18,
+	if ($[23] !== label) {
+		t18 = /* @__PURE__ */ jsx(Dialog, {
+			...t17,
 			children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
 		});
-		$[24] = label;
-		$[25] = t19;
-	} else t19 = $[25];
-	let t20;
-	if ($[26] !== container || $[27] !== t19) {
-		t20 = /* @__PURE__ */ jsx(Popover, {
+		$[23] = label;
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== container || $[26] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Popover, {
 			UNSTABLE_portalContainer: container,
-			...t17,
-			children: t19
+			...t16,
+			children: t18
 		});
-		$[26] = container;
+		$[25] = container;
+		$[26] = t18;
 		$[27] = t19;
-		$[28] = t20;
-	} else t20 = $[28];
-	let t21;
-	if ($[29] !== T0 || $[30] !== isDisabled || $[31] !== props$1 || $[32] !== t15 || $[33] !== t16 || $[34] !== t20 || $[35] !== t6 || $[36] !== t7 || $[37] !== validationBehavior) {
-		t21 = /* @__PURE__ */ jsxs(T0, {
+	} else t19 = $[27];
+	let t20;
+	if ($[28] !== T0 || $[29] !== isDisabled || $[30] !== props$1 || $[31] !== t14 || $[32] !== t15 || $[33] !== t19 || $[34] !== t6 || $[35] !== t7 || $[36] !== validationBehavior) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t6,
 			validationBehavior,
 			...props$1,
 			...t7,
 			children: [
+				t14,
 				t15,
-				t16,
-				t20
+				t19
 			]
 		});
-		$[29] = T0;
-		$[30] = isDisabled;
-		$[31] = props$1;
+		$[28] = T0;
+		$[29] = isDisabled;
+		$[30] = props$1;
+		$[31] = t14;
 		$[32] = t15;
-		$[33] = t16;
-		$[34] = t20;
-		$[35] = t6;
-		$[36] = t7;
-		$[37] = validationBehavior;
-		$[38] = t21;
-	} else t21 = $[38];
-	return t21;
+		$[33] = t19;
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = validationBehavior;
+		$[37] = t20;
+	} else t20 = $[37];
+	return t20;
 }
 //#endregion
 export { DateRangePicker$1 as default };

package/dist/components/date-range-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","Symbol","for","group","t9","input","t10","t11","t12","triggerGlyph","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","ring","t19","t20","t21"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { spacing, typography } from "../../tokens/design.tokens.stylex.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
@@ -8,11 +9,13 @@ import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, NumberField } from "react-aria-components";
 //#region src/components/number-field/index.tsx
+`${spacing.sm}${typography.bodySmallLineHeight}${typography.bodyLargeLineHeight}`;
+`${spacing.lg}${typography.bodyLargeLineHeight}`;
 const styles = {
 	stepper: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
-		kZKoxP: "x1fgtraw",
+		kZKoxP: "x1viytl0",
 		kaIpWk: "x2u8bby",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
@@ -48,6 +51,10 @@ const styles = {
 		kWkggS: "x14noynh",
 		$$css: true
 	},
+	stepperOutlined: {
+		kZKoxP: "x1o675yb",
+		$$css: true
+	},
 	stepperPressed: {
 		kWkggS: "x123fei2",
 		$$css: true
@@ -238,7 +245,7 @@ function StackedStepper(t0) {
 	return t2;
 }
 function stepperStyles(top, outlined) {
-	return (state) => props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);
+	return (state) => props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);
 }
 //#endregion
 export { NumberField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","IconButton","styles","stepper","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } 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 text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1fgtraw\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\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 box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","label","numeric","steppers","variant","Omit","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","t7","props","undefined","inline","validationBehavior","T0","t8","t9","root","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader.\n   * @default 'Decrease'\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader.\n   * @default 'Increase'\n   */\n  incrementLabel?: string;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\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 box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel = 'Decrease',\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel = 'Increase',\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

package/dist/components/select/index.js

@@ -13,8 +13,8 @@ import { Popover, Select, SelectStateContext, SelectValue } from "react-aria-com
 const TRIGGER = /* @__PURE__ */ jsx(FieldTrigger, {});
 function chevronFor(isOpen) {
 	return /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
-		0: { className: "xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln" },
-		1: { className: "xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d" }
+		0: { className: "xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
+		1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
 	}[!!isOpen << 0] });
 }
 const styles = { list: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","SelectProps","RACSelectProps","SelectRenderProps","stylex","useContext","useRef","Popover","RACPopover","Select","RACSelect","SelectValue","RACSelectValue","SelectStateContext","FieldVariant","FieldBox","FieldMessage","FieldTrigger","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TRIGGER","chevronFor","isOpen","className","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","selectContent","t7","HTMLDivElement","state","isInvalid","isFocused","popup","SelectedValue","isPlaceholder","selectionManager","selectedKeys","size","Symbol","for"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { SelectProps as RACSelectProps, SelectRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { Popover as RACPopover, Select as RACSelect, SelectValue as RACSelectValue, SelectStateContext } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTrigger, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The menus page's exposed dropdown menu: a text field that opens a list\n// rather than taking a keystroke. Everything above the list is the field\n// chrome in `src/field` — the same box, label, supporting line and error\n// treatment every other field draws — and the list is ListBox on the shared\n// overlay surface. What is here is React Aria's `Select` around the two, and\n// the three things that are this component's own.\n//\n// **The whole box opens the list.** The chrome's `FieldTrigger` covers the\n// box rather than sitting on the value's line, so the padding, the label and\n// the icons all open it, which is what the page draws and what a native\n// select does. It draws nothing itself: the box already carries the fill,\n// the underline and the focus indicator.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open. React Aria reports which through the\n// select's render state, so it is drawn from that rather than swapped for a\n// second glyph.\n//\n// **The list is the field's width.** The page draws it under the field and\n// as wide as it, which React Aria reports as `--trigger-width` — of whatever\n// it is anchored to. Left alone that is the button, which fills the box's\n// value column rather than the box, so the list came out narrower than the\n// field by the icons either side of it. Pointing the popover's `triggerRef`\n// at the box is what makes the two agree. The overlay's own 112 to 280 range\n// is a menu opened from a button rather than from a field, so it goes.\n//\n// A select's value is chosen rather than typed, which the chrome had no\n// notion of until this component: `useFieldPopulated` now reads the select's\n// own state, so the floating label floats once something is chosen.\n\n// Hoisted, and the chevron built by a call, so neither is a new element on\n// every render — which is what react-perf's jsx-no-jsx-as-prop is after.\nconst TRIGGER = <FieldTrigger />;\nfunction chevronFor(isOpen: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n    }\n  }[!!isOpen << 0]} />;\n}\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype SelectProps<T extends object = object> = {\n  /**\n   * Where to portal the list. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or something is chosen. `false` keeps it small at the\n   * top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a select with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACSelectProps<T>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n/**\n * A labelled field that opens a list to choose from. Its value is React\n * Aria's: pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own. The value is an option's `id`, so give every option\n * one. React Aria's older `selectedKey` names are deprecated and are left\n * out of this component's props rather than passed through.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Select<T extends object = object>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: SelectProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from — see the note at\n  // the top of the file.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACSelect<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {selectContent(label, leadingIcon, floatingLabel, variant, description, error, options, container, boxRef)}\n    </RACSelect>;\n}\n\n// What the field draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The state is read for the chevron alone — which way it points — since\n// everything else the box shows it reads from its own focus and validity.\nfunction selectContent(label: string, leadingIcon: ReactNode, floatingLabel: boolean, variant: FieldVariant, description: string | undefined, error: string | undefined, options: ReactNode, container: Element | undefined, boxRef: RefObject<HTMLDivElement | null>) {\n  return (state: SelectRenderProps) => <>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `Select` does not, so the box is\n    // told outright or its label and its underline never turn.\n    isDisabled={state.isDisabled} isInvalid={state.isInvalid} label={label} leading={leadingIcon} ref={boxRef} trailing={chevronFor(state.isOpen)} trigger={TRIGGER} variant={variant}>\n        <SelectedValue isFocused={state.isFocused} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </>;\n}\n\n/**\n * What has been chosen, drawn on the value's line. The chrome's `FieldValue`\n * is the styled element and React Aria's `SelectValue` sits inside it, since\n * the wrapper is the box's flex item.\n */\nfunction SelectedValue({\n  isFocused\n}: {\n  isFocused: boolean;\n}) {\n  const state = useContext(SelectStateContext);\n  const isPlaceholder = (state?.selectionManager.selectedKeys.size ?? 0) === 0;\n  return <FieldValue isFocused={isFocused} isPlaceholder={isPlaceholder}>\n      <RACSelectValue />\n    </FieldValue>;\n}\nexport type { SelectProps };\nexport default Select;"],"mappings":"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"}

package/dist/components/slider/index.js

@@ -1,12 +1,13 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
 //#region src/components/slider/index.tsx
+const HANDLE_GAP = "6px";
+const HANDLE_WIDTH = "4px";
 const styles = {
 	active: {
 		kWkggS: "xnety89",
@@ -133,7 +134,7 @@ const placements = {
 	}]
 };
 function clearOf(percent, fromEnd) {
-	return `calc(${fromEnd ? 100 - percent : percent}% + ${spacing.sm})`;
+	return `calc(${fromEnd ? 100 - percent : percent}% + ${HANDLE_GAP} + ${HANDLE_WIDTH} / 2)`;
 }
 /**
 * A slider for one value, or for a range when the value is a pair. The value