@kanso-labs/kanso-ui 0.26.2 → 0.26.3

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

@@ -4,6 +4,7 @@ import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../fiel
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateInput, TimeField } from "react-aria-components";
 //#region src/components/time-field/index.tsx
@@ -26,30 +27,78 @@ import { DateInput, TimeField } from "react-aria-components";
 * field chrome in `src/field`. The call site's `className` and `style` land
 * on the field as a whole, which is the element a layout positions.
 */
-function TimeField$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, trailingIcon, variant = "filled", ...props$1 }) {
+function TimeField$1(t0) {
+	const $ = c(21);
+	const { description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, trailingIcon, variant: t3, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "filled" : t3;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(TimeField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = TimeField;
+	let t4;
+	if ($[0] !== error) {
+		t4 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t6;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
+			...props(segmentStyles.input),
+			children: renderSegment
+		}) });
+		$[2] = t6;
+	} else t6 = $[2];
+	let t7;
+	if ($[3] !== floatingLabel || $[4] !== label || $[5] !== leadingIcon || $[6] !== trailingIcon || $[7] !== variant) {
+		t7 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
 			variant,
-			children: /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
-				...props(segmentStyles.input),
-				children: renderSegment
-			}) })
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t6
+		});
+		$[3] = floatingLabel;
+		$[4] = label;
+		$[5] = leadingIcon;
+		$[6] = trailingIcon;
+		$[7] = variant;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== description || $[10] !== error) {
+		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
-		})]
-	});
+		});
+		$[9] = description;
+		$[10] = error;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== T0 || $[13] !== isDisabled || $[14] !== props$1 || $[15] !== t4 || $[16] !== t5 || $[17] !== t7 || $[18] !== t8 || $[19] !== validationBehavior) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t4,
+			validationBehavior,
+			...props$1,
+			...t5,
+			children: [t7, t8]
+		});
+		$[12] = T0;
+		$[13] = isDisabled;
+		$[14] = props$1;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = validationBehavior;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
 }
 //#endregion
 export { TimeField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<T>['className'];\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  /** A function may compute the style from the field's render state. */\n  style?: RACTimeFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A time typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAS,YAA+B,EACtC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,cACA,UAAU,UACV,GAAG,WACiB;CACpB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,WAAD;EAA6B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAxL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAI3B,aAAA;GAAmB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC7E,UAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;IAAc,GAAI,MAAa,cAAc,KAAK;IAC/C,UAAA;GACW,CAAA,EACJ,CAAA;EACJ,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACzC;;AAClB"}
+{"version":3,"file":"index.js","names":["ReactNode","TimeFieldProps","RACTimeFieldProps","TimeValue","stylex","DateInput","RACDateInput","TimeField","RACTimeField","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9"],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<T>['className'];\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  /** A function may compute the style from the field's render state. */\n  style?: RACTimeFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A time typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAAO,YAAAsB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAA/B;CAAY,IAAAgC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBb,MAAaQ,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAM1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKvC,MAAaY,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADJ,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EATfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAI3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EALO,CAAA;EAUEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAZrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAWAC,EAZgB;;EAaHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAbVmB;AAaU"}

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

@@ -3,6 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom } from "../../field/root.js";
 import { FieldBox, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Token, TokenField, TokenInput } from "react-aria-components";
 //#region src/components/token-field/index.tsx
@@ -44,33 +45,147 @@ function tokenContent(renderToken) {
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions.
 */
-function TokenField$1({ description, error, floatingLabel = true, label, leadingIcon, renderToken, trailingIcon, variant = "filled", ...props$1 }) {
-	const populated = isPopulated(props$1.value ?? props$1.defaultValue);
-	return /* @__PURE__ */ jsxs(TokenField, {
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+function TokenField$1(t0) {
+	const $ = c(41);
+	let T0;
+	let description;
+	let error;
+	let floatingLabel;
+	let label;
+	let leadingIcon;
+	let populated;
+	let props$1;
+	let renderToken;
+	let t1;
+	let t2;
+	let trailingIcon;
+	let variant;
+	if ($[0] !== t0) {
+		const { description: t3, error: t4, floatingLabel: t5, label: t6, leadingIcon: t7, renderToken: t8, trailingIcon: t9, variant: t10, ...t11 } = t0;
+		description = t3;
+		error = t4;
+		label = t6;
+		leadingIcon = t7;
+		renderToken = t8;
+		trailingIcon = t9;
+		props$1 = t11;
+		floatingLabel = t5 === void 0 ? true : t5;
+		variant = t10 === void 0 ? "filled" : t10;
+		populated = isPopulated(props$1.value ?? props$1.defaultValue);
+		T0 = TokenField;
+		t1 = props$1;
+		t2 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = description;
+		$[3] = error;
+		$[4] = floatingLabel;
+		$[5] = label;
+		$[6] = leadingIcon;
+		$[7] = populated;
+		$[8] = props$1;
+		$[9] = renderToken;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = trailingIcon;
+		$[13] = variant;
+	} else {
+		T0 = $[1];
+		description = $[2];
+		error = $[3];
+		floatingLabel = $[4];
+		label = $[5];
+		leadingIcon = $[6];
+		populated = $[7];
+		props$1 = $[8];
+		renderToken = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		trailingIcon = $[12];
+		variant = $[13];
+	}
+	const t3 = props$1.isDisabled;
+	let t4;
+	if ($[14] !== error) {
+		t4 = invalidFrom(error);
+		$[14] = error;
+		$[15] = t4;
+	} else t4 = $[15];
+	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" }
+		};
+		$[16] = t5;
+	} else t5 = $[16];
+	const t6 = t5[!!(variant === "filled") << 0];
+	let t7;
+	if ($[17] !== renderToken) {
+		t7 = tokenContent(renderToken);
+		$[17] = renderToken;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t6 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(TokenInput, {
+			...t6,
+			children: t7
+		});
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== floatingLabel || $[23] !== label || $[24] !== leadingIcon || $[25] !== populated || $[26] !== props$1.isDisabled || $[27] !== t4 || $[28] !== t8 || $[29] !== trailingIcon || $[30] !== variant) {
+		t9 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
-			isDisabled: props$1.isDisabled,
-			isInvalid: invalidFrom(error),
+			isDisabled: t3,
+			isInvalid: t4,
 			isPopulated: populated,
 			label,
 			leading: leadingIcon,
 			multiline: true,
 			trailing: trailingIcon,
 			variant,
-			children: /* @__PURE__ */ jsx(TokenInput, {
-				...{
-					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" }
-				}[!!(variant === "filled") << 0],
-				children: tokenContent(renderToken)
-			})
-		}), /* @__PURE__ */ jsx(FieldMessage, {
+			children: t8
+		});
+		$[22] = floatingLabel;
+		$[23] = label;
+		$[24] = leadingIcon;
+		$[25] = populated;
+		$[26] = props$1.isDisabled;
+		$[27] = t4;
+		$[28] = t8;
+		$[29] = trailingIcon;
+		$[30] = variant;
+		$[31] = t9;
+	} else t9 = $[31];
+	let t10;
+	if ($[32] !== description || $[33] !== error) {
+		t10 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
-		})]
-	});
+		});
+		$[32] = description;
+		$[33] = error;
+		$[34] = t10;
+	} else t10 = $[34];
+	let t11;
+	if ($[35] !== T0 || $[36] !== t1 || $[37] !== t10 || $[38] !== t2 || $[39] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			...t2,
+			children: [t9, t10]
+		});
+		$[35] = T0;
+		$[36] = t1;
+		$[37] = t10;
+		$[38] = t2;
+		$[39] = t9;
+		$[40] = t11;
+	} else t11 = $[40];
+	return t11;
 }
 //#endregion
 export { TokenField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 { 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, 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":";;;;;;;;AA4CA,MAAM,SAAS,EACb,OAAO;CACL,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AA2DA,SAAS,YAAY,OAAoC;CACvD,IAAI,UAAU,KAAA,GACZ;CAEF,OAAO,MAAM,SAAS,MAAK,YAAW,QAAQ,KAAK,SAAS,CAAC;AAC/D;AAKA,SAAS,aAAa,aAA6C;CACjE,QAAQ,YAA0B,oBAAC,OAAD;EAAU,GAAI,MAAa,WAAW,MAAM,WAAW,YAAY,OAAO,KAAK;EAC5G,UAAA,gBAAgB,KAAA,IAAY,QAAQ,OAAO,YAAY,OAAO;CACvD,CAAA;AACd;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAS,aAAwD,EAC/D,aACA,OACA,gBAAgB,MAChB,OACA,aACA,aACA,cACA,UAAU,UACV,GAAG,WACkB;CACrB,MAAM,YAAY,YAAY,QAAM,SAAS,QAAM,YAAY;CAC/D,OAAO,qBAAC,YAAD;EAAkB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAA1F,UAAA,CACH,oBAAC,UAAD;GAAyB;GAI3B,YAAY,QAAM;GAAY,WAAW,YAAY,KAAK;GAAG,aAAa;GAAkB;GAAO,SAAS;GAAa,WAAA;GAAU,UAAU;GAAuB;GAChK,UAAA,oBAAC,YAAD;IAAkB,GAAI;KACtB,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,yHACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA,aAAa,WAAW;GACZ,CAAA;EACP,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACxC;;AACnB"}
+{"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","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","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 { 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, 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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"}

package/dist/components/toolbar/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { useMemo } from "react";
+import { c } from "react/compiler-runtime";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { SeparatorContext, Toolbar } from "react-aria-components";
 //#region src/components/toolbar/index.tsx
@@ -68,16 +69,72 @@ const styles = {
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
 */
-function Toolbar$1({ orientation = "horizontal", tone = "standard", ...props$1 }) {
-	const separator = useMemo(() => ({ orientation: orientation === "horizontal" ? "vertical" : "horizontal" }), [orientation]);
-	return /* @__PURE__ */ jsx(SeparatorContext, {
-		value: separator,
-		children: /* @__PURE__ */ jsx(Toolbar, {
-			orientation,
-			...props$1,
-			...mergeStatefulStyles(props(styles.base, styles[orientation], styles[tone]), props$1)
-		})
-	});
+function Toolbar$1(t0) {
+	const $ = c(18);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		const { orientation: t5, tone: t6, ...props$1 } = t0;
+		const orientation = t5 === void 0 ? "horizontal" : t5;
+		const tone = t6 === void 0 ? "standard" : t6;
+		const t7 = orientation === "horizontal" ? "vertical" : "horizontal";
+		let t8;
+		if ($[7] !== t7) {
+			t8 = { orientation: t7 };
+			$[7] = t7;
+			$[8] = t8;
+		} else t8 = $[8];
+		const separator = t8;
+		T1 = SeparatorContext;
+		t4 = separator;
+		T0 = Toolbar;
+		t1 = orientation;
+		t2 = props$1;
+		t3 = mergeStatefulStyles(props(styles.base, styles[orientation], styles[tone]), props$1);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+	}
+	let t5;
+	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			orientation: t1,
+			...t2,
+			...t3
+		});
+		$[9] = T0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== T1 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T1, {
+			value: t4,
+			children: t5
+		});
+		$[14] = T1;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 }
 //#endregion
 export { Toolbar$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `standard` is the\n   * surface container it draws by default; `vibrant` moves it to primary\n   * container, for a bar meant to carry the page's accent.\n   * @default 'standard'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'standard' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'standard',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;AA6CA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAS,UAAQ,EACf,cAAc,cACd,OAAO,YACP,GAAG,WACY;CAIf,MAAM,YAAY,eAA+B,EAC/C,aAAa,gBAAgB,eAAe,aAAa,aAC3D,IAAI,CAAC,WAAW,CAAC;CACjB,OAAO,oBAAC,kBAAD;EAAkB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GAAyB;GAAa,GAAI;GAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,cAAc,OAAO,KAAK,GAAG,OAAK;EAAE,CAAA;CAC9H,CAAA;AACtB"}
+{"version":3,"file":"index.js","names":["ReactNode","ToolbarProps","RACToolbarProps","SeparatorProps","stylex","useMemo","Toolbar","RACToolbar","SeparatorContext","mergeStatefulStyles","colors","radii","spacing","styles","base","kGNEyG","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kOIVth","kjj79g","k3XXqK","$$css","horizontal","kXwgrk","kAzted","k8WAf4","kg3NbH","standard","kWkggS","vertical","k7Eaqz","vibrant","Omit","children","className","style","tone","ToolbarTone","t0","$","_c","T0","T1","t1","t2","t3","t4","orientation","t5","t6","props","undefined","t7","t8","separator"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `standard` is the\n   * surface container it draws by default; `vibrant` moves it to primary\n   * container, for a bar meant to carry the page's accent.\n   * @default 'standard'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'standard' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'standard',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;;AA6CA,MAAMa,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,UAAU;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,UAAU;EACRN,QAAQ;EACRO,QAAQ;EACRL,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAU,SAAS;EACPH,QAAQ;EACRZ,QAAQ;EACRK,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAAjB,UAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAiB,MAAA,EAAAS,aAAAC,IAAAZ,MAAAa,IAAA,GAAAC,YAAAZ;EACf,MAAAS,cAAAC,OAAAG,KAAAA,IAAA,eAAAH;EACA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,aAAAF;EAOe,MAAAG,KAAAL,gBAAgB,eAAhB,aAAA;EAAwD,IAAAM;EAAA,IAAAd,EAAA,OAAAa,IAAA;GADtBC,KAAA,EAAAN,aAClCK,GACf;GAACb,EAAA,KAAAa;GAAAb,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFD,MAAAe,YAAiDD;EAGzCX,KAAApC;EAAwBgD,KAAAA;EAC3Bb,KAAApC;EAAwB0C,KAAAA;EAAiBG,KAAAA;EAAWL,KAAAtC,oBAAoBL,MAAaS,OAAMC,MAAOD,OAAOoC,cAAcpC,OAAOyB,KAAK,GAAGc,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAA7IG,KAAA,oBAAC,IAAD;GAAyBD,aAAAA;GAAW,GAAMG;GAAK,GAAML;EAAwF,CAAA;EAAIN,EAAA,KAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAG,MAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAD9IC,KAAA,oBAAC,IAAD;GAAyBK,OAAAA;GAC5BN,UAAAA;EADoB,CAAA;EAEHT,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc"}

package/dist/components/tooltip/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { overlay, popupOrigin } from "../../styles/overlay.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipTrigger } from "react-aria-components";
 //#region src/components/tooltip/index.tsx
@@ -40,21 +41,96 @@ function placementOf(side, align) {
 *
 * The call site's `className` and `style` land on the tooltip itself.
 */
-function Tooltip$1({ align = "center", alignOffset, children, className, container, label, side = "top", sideOffset = DEFAULT_SIDE_OFFSET, style, ...props$1 }) {
-	return /* @__PURE__ */ jsxs(TooltipTrigger, {
-		...props$1,
-		children: [children, /* @__PURE__ */ jsx(Tooltip, {
+function Tooltip$1(t0) {
+	const $ = c(28);
+	let alignOffset;
+	let children;
+	let className;
+	let container;
+	let label;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({align: t1, alignOffset, children, className, container, label, side: t2, sideOffset: t3, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = alignOffset;
+		$[2] = children;
+		$[3] = className;
+		$[4] = container;
+		$[5] = label;
+		$[6] = props;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		alignOffset = $[1];
+		children = $[2];
+		className = $[3];
+		container = $[4];
+		label = $[5];
+		props = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+	}
+	const align = t1 === void 0 ? "center" : t1;
+	const side = t2 === void 0 ? "top" : t2;
+	const sideOffset = t3 === void 0 ? DEFAULT_SIDE_OFFSET : t3;
+	let t4;
+	if ($[11] !== align || $[12] !== side) {
+		t4 = placementOf(side, align);
+		$[11] = align;
+		$[12] = side;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== className || $[15] !== style) {
+		t5 = mergeStatefulStyles(_temp, {
+			className,
+			style
+		});
+		$[14] = className;
+		$[15] = style;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== alignOffset || $[18] !== container || $[19] !== label || $[20] !== sideOffset || $[21] !== t4 || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Tooltip, {
 			crossOffset: alignOffset,
 			offset: sideOffset,
-			placement: placementOf(side, align),
+			placement: t4,
 			UNSTABLE_portalContainer: container,
-			...mergeStatefulStyles((state) => props(overlay.popup, styles.container, popupOrigin(state.placement)), {
-				className,
-				style
-			}),
+			...t5,
 			children: label
-		})]
-	});
+		});
+		$[17] = alignOffset;
+		$[18] = container;
+		$[19] = label;
+		$[20] = sideOffset;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[24] !== children || $[25] !== props || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(TooltipTrigger, {
+			...props,
+			children: [children, t6]
+		});
+		$[24] = children;
+		$[25] = props;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	return t7;
+}
+function _temp(state) {
+	return props(overlay.popup, styles.container, popupOrigin(state.placement));
 }
 //#endregion
 export { Tooltip$1 as default };