@kanso-labs/kanso-ui 0.28.3 → 0.28.5

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/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

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

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

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

@@ -115,8 +115,8 @@ function TokenField$1(t0) {
 	let t5;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
-			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a" },
-			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq" }
+			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a" },
+			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi" }
 		};
 		$[16] = t5;
 	} else t5 = $[16];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","spacing","typography","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\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 and the red underline both\n   * 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 something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\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   * 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   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   */\n  trailingIcon?: 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<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const populated = isPopulated(props.value ?? props.defaultValue);\n  return <RACTokenField<T> {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\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 and the red underline both\n   * 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 something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\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   * 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   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   */\n  trailingIcon?: 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<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {renderToken === undefined ? segment.text : renderToken(segment)}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\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 TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const populated = isPopulated(props.value ?? props.defaultValue);\n  return <RACTokenField<T> {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

package/dist/control/styles.js

@@ -42,7 +42,7 @@ const controlStyles = {
 		k63SB2: "x1c52epr",
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
-		k8WAf4: "x1cmllll",
+		k8WAf4: "x18r0n19",
 		$$css: true
 	},
 	labelDisabled: {

package/dist/control/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\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  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAgCA,MAAMO,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","TARGET_SIZE","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The control's target, which the disc draws at and the label centres its\n// first line on. Stated once because those two have to agree: a disc resized\n// without the label following it would put the control off its own label\n// again, which is the drift this row already had once.\nconst TARGET_SIZE = '40px';\nconst controlStyles = {\n  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disc: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\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  field: {\n    kGNEyG: \"x7a106z\",\n    kB7OPa: \"x9f619\",\n    k1C7PZ: \"xpr5407\",\n    k1xSpc: \"xrvj5dj\",\n    kumcoG: \"x1pmbctz\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k8WAf4: \"x18r0n19\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  labelReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  messages: {\n    kEXP64: \"x1xdureb\",\n    $$css: true\n  }\n};\nexport { controlStyles };"],"mappings":";AAqCA,MAAMQ,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}