@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/components/text-area/index.js

@@ -23,8 +23,8 @@ import { TextField } from "react-aria-components";
 * `TextField` puts around them.
 */
 function TextArea$1(t0) {
-	const $ = c(29);
-	const { autosize: t1, characterCount: t2, characterLimitLabel, description, error, floatingLabel: t3, inputRef, isDisabled: t4, label, leadingIcon, rows: t5, trailingIcon, variant: t6, ...props$1 } = t0;
+	const $ = c(30);
+	const { autosize: t1, characterCount: t2, characterLimitLabel, characterLimitReachedLabel, description, error, floatingLabel: t3, inputRef, isDisabled: t4, label, leadingIcon, rows: t5, trailingIcon, variant: t6, ...props$1 } = t0;
 	const autosize = t1 === void 0 ? true : t1;
 	const characterCount = t2 === void 0 ? false : t2;
 	const floatingLabel = t3 === void 0 ? true : t3;
@@ -74,23 +74,25 @@ function TextArea$1(t0) {
 		$[13] = t10;
 	} else t10 = $[13];
 	let t11;
-	if ($[14] !== characterCount || $[15] !== characterLimitLabel || $[16] !== description || $[17] !== error || $[18] !== props$1.maxLength) {
+	if ($[14] !== characterCount || $[15] !== characterLimitLabel || $[16] !== characterLimitReachedLabel || $[17] !== description || $[18] !== error || $[19] !== props$1.maxLength) {
 		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			characterLimitLabel,
+			characterLimitReachedLabel,
 			description,
 			error,
 			maxLength: props$1.maxLength
 		});
 		$[14] = characterCount;
 		$[15] = characterLimitLabel;
-		$[16] = description;
-		$[17] = error;
-		$[18] = props$1.maxLength;
-		$[19] = t11;
-	} else t11 = $[19];
+		$[16] = characterLimitReachedLabel;
+		$[17] = description;
+		$[18] = error;
+		$[19] = props$1.maxLength;
+		$[20] = t11;
+	} else t11 = $[20];
 	let t12;
-	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== props$1 || $[23] !== t10 || $[24] !== t11 || $[25] !== t7 || $[26] !== t8 || $[27] !== validationBehavior) {
+	if ($[21] !== T0 || $[22] !== isDisabled || $[23] !== props$1 || $[24] !== t10 || $[25] !== t11 || $[26] !== t7 || $[27] !== t8 || $[28] !== validationBehavior) {
 		t12 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t7,
@@ -99,16 +101,16 @@ function TextArea$1(t0) {
 			...t8,
 			children: [t10, t11]
 		});
-		$[20] = T0;
-		$[21] = isDisabled;
-		$[22] = props$1;
-		$[23] = t10;
-		$[24] = t11;
-		$[25] = t7;
-		$[26] = t8;
-		$[27] = validationBehavior;
-		$[28] = t12;
-	} else t12 = $[28];
+		$[21] = T0;
+		$[22] = isDisabled;
+		$[23] = props$1;
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = validationBehavior;
+		$[29] = t12;
+	} else t12 = $[29];
 	return t12;
 }
 //#endregion

package/dist/components/text-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","Omit","autosize","characterCount","characterLimitLabel","description","error","floatingLabel","inputRef","HTMLTextAreaElement","label","leadingIcon","rows","trailingIcon","variant","TextArea","t0","$","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","isRequired","t11","maxLength","t12","TextArea","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, icons, underline and message as TextField,\n// holding a text area rather than an input. The page gives the box 56dp by\n// default and 8dp of padding above and below, with the label vertically\n// centred while the field is empty; a box holding more than one line keeps\n// the padding and grows, which is the chrome's `multiline` box, and its\n// icons stay centred in its height as it does. The page draws no resize\n// handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'> & {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<textarea>`, which is the element a call site\n   * moves focus to — after a server's error, say. `ref` is the field as a\n   * whole.\n   */\n  inputRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no 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 text: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, and `characterCount` opposite the\n * supporting text, counting against `maxLength`.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  rows = 3,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <FieldTextArea autosize={autosize} ref={inputRef} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","Omit","autosize","characterCount","characterLimitLabel","characterLimitReachedLabel","description","error","floatingLabel","inputRef","HTMLTextAreaElement","label","leadingIcon","rows","trailingIcon","variant","TextArea","t0","$","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","isRequired","t11","maxLength","t12","TextArea","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, icons, underline and message as TextField,\n// holding a text area rather than an input. The page gives the box 56dp by\n// default and 8dp of padding above and below, with the label vertically\n// centred while the field is empty; a box holding more than one line keeps\n// the padding and grows, which is the chrome's `multiline` box, and its\n// icons stay centred in its height as it does. The page draws no resize\n// handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'> & {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * What a screen reader is told once the length reaches `maxLength`, where\n   * `characterCount` draws the count: the count is hidden from the tree, so\n   * this is how a reader learns the field has stopped taking characters. It\n   * is said once as the limit is reached, and again only after the length\n   * has dropped below it. Left out, it is the sentence for it in the\n   * I18nProvider's locale — \"Character limit reached\" in English.\n   */\n  characterLimitReachedLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<textarea>`, which is the element a call site\n   * moves focus to — after a server's error, say. `ref` is the field as a\n   * whole.\n   */\n  inputRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no 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 text: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, and `characterCount` opposite the\n * supporting text, counting against `maxLength`.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  characterLimitReachedLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  rows = 3,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <FieldTextArea autosize={autosize} ref={inputRef} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} characterLimitReachedLabel={characterLimitReachedLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":"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"}

package/dist/components/text-field/index.d.ts

@@ -20,6 +20,15 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
    * English, singular for a limit of one.
    */
   characterLimitLabel?: string;
+  /**
+   * What a screen reader is told once the length reaches `maxLength`, where
+   * `characterCount` draws the count: the count is hidden from the tree, so
+   * this is how a reader learns the field has stopped taking characters. It
+   * is said once as the limit is reached, and again only after the length
+   * has dropped below it. Left out, it is the sentence for it in the
+   * I18nProvider's locale — "Character limit reached" in English.
+   */
+  characterLimitReachedLabel?: string;
   /**
    * A hint shown under the field. Replaced by `error` when there is one, so
    * the two never stack.
@@ -60,7 +69,12 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
   leadingIcon?: ReactNode;
   /**
    * Renders the value in the mono face with tabular figures, for amounts and
-   * other numbers meant to be compared down a column.
+   * other numbers meant to be compared down a column. The value runs left to
+   * right whatever the page's direction, so a minus sign stays before the
+   * digits under a right-to-left locale, and a phone shows the decimal
+   * keypad. That keypad has no minus key on iOS or Android, so a field taking
+   * negative amounts gives an `inputMode` of its own, which replaces it, or
+   * is a `NumberField`, which picks a keypad for each platform.
    * @default false
    */
   numeric?: boolean;
@@ -104,7 +118,7 @@ type TextFieldProps$1 = Omit<TextFieldProps, 'children' | 'isInvalid' | 'prefix'
  * shared with every other field; this component is what React Aria's
  * `TextField` puts around them.
  */
-declare function TextField$1({ characterCount, characterLimitLabel, description, error, floatingLabel, inputRef, isDisabled, label, leadingIcon, numeric, prefix, suffix, trailingIcon, variant, ...props }: RefAttributes<HTMLDivElement> & TextFieldProps$1): import("react").JSX.Element;
+declare function TextField$1({ characterCount, characterLimitLabel, characterLimitReachedLabel, description, error, floatingLabel, inputRef, isDisabled, label, leadingIcon, numeric, prefix, suffix, trailingIcon, variant, ...props }: RefAttributes<HTMLDivElement> & TextFieldProps$1): import("react").JSX.Element;
 //#endregion
 export { type TextFieldProps$1 as TextFieldProps, TextField$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -24,8 +24,8 @@ import { TextField } from "react-aria-components";
 * `TextField` puts around them.
 */
 function TextField$1(t0) {
-	const $ = c(30);
-	const { characterCount: t1, characterLimitLabel, description, error, floatingLabel: t2, inputRef, isDisabled: t3, label, leadingIcon, numeric: t4, prefix, suffix, trailingIcon, variant: t5, ...props$1 } = t0;
+	const $ = c(32);
+	const { characterCount: t1, characterLimitLabel, characterLimitReachedLabel, description, error, floatingLabel: t2, inputRef, isDisabled: t3, label, leadingIcon, numeric: t4, prefix, suffix, trailingIcon, variant: t5, ...props$1 } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const floatingLabel = t2 === void 0 ? true : t2;
 	const isDisabled = t3 === void 0 ? false : t3;
@@ -33,16 +33,18 @@ function TextField$1(t0) {
 	const variant = t5 === void 0 ? "filled" : t5;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = TextField;
-	let t6;
+	const t6 = numeric ? "decimal" : void 0;
+	let t7;
 	if ($[0] !== error) {
-		t6 = invalidFrom(error);
+		t7 = invalidFrom(error);
 		$[0] = error;
-		$[1] = t6;
-	} else t6 = $[1];
-	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	let t8;
+		$[1] = t7;
+	} else t7 = $[1];
+	const t8 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t9;
 	if ($[2] !== inputRef || $[3] !== numeric || $[4] !== prefix || $[5] !== suffix) {
-		t8 = /* @__PURE__ */ jsx(FieldInput, {
+		t9 = /* @__PURE__ */ jsx(FieldInput, {
+			leftToRight: numeric,
 			numeric,
 			prefix,
 			ref: inputRef,
@@ -52,65 +54,69 @@ function TextField$1(t0) {
 		$[3] = numeric;
 		$[4] = prefix;
 		$[5] = suffix;
-		$[6] = t8;
-	} else t8 = $[6];
-	let t9;
-	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== props$1.isRequired || $[11] !== t8 || $[12] !== trailingIcon || $[13] !== variant) {
-		t9 = /* @__PURE__ */ jsx(FieldBox, {
+		$[6] = t9;
+	} else t9 = $[6];
+	let t10;
+	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== props$1.isRequired || $[11] !== t9 || $[12] !== trailingIcon || $[13] !== variant) {
+		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isRequired: props$1.isRequired,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
 			variant,
-			children: t8
+			children: t9
 		});
 		$[7] = floatingLabel;
 		$[8] = label;
 		$[9] = leadingIcon;
 		$[10] = props$1.isRequired;
-		$[11] = t8;
+		$[11] = t9;
 		$[12] = trailingIcon;
 		$[13] = variant;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== characterCount || $[16] !== characterLimitLabel || $[17] !== description || $[18] !== error || $[19] !== props$1.maxLength) {
-		t10 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== characterCount || $[16] !== characterLimitLabel || $[17] !== characterLimitReachedLabel || $[18] !== description || $[19] !== error || $[20] !== props$1.maxLength) {
+		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			characterLimitLabel,
+			characterLimitReachedLabel,
 			description,
 			error,
 			maxLength: props$1.maxLength
 		});
 		$[15] = characterCount;
 		$[16] = characterLimitLabel;
-		$[17] = description;
-		$[18] = error;
-		$[19] = props$1.maxLength;
-		$[20] = t10;
-	} else t10 = $[20];
-	let t11;
-	if ($[21] !== T0 || $[22] !== isDisabled || $[23] !== props$1 || $[24] !== t10 || $[25] !== t6 || $[26] !== t7 || $[27] !== t9 || $[28] !== validationBehavior) {
-		t11 = /* @__PURE__ */ jsxs(T0, {
+		$[17] = characterLimitReachedLabel;
+		$[18] = description;
+		$[19] = error;
+		$[20] = props$1.maxLength;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== T0 || $[23] !== isDisabled || $[24] !== props$1 || $[25] !== t10 || $[26] !== t11 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== validationBehavior) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			inputMode: t6,
 			isDisabled,
-			isInvalid: t6,
+			isInvalid: t7,
 			validationBehavior,
 			...props$1,
-			...t7,
-			children: [t9, t10]
+			...t8,
+			children: [t10, t11]
 		});
-		$[21] = T0;
-		$[22] = isDisabled;
-		$[23] = props$1;
-		$[24] = t10;
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t9;
-		$[28] = validationBehavior;
-		$[29] = t11;
-	} else t11 = $[29];
-	return t11;
+		$[22] = T0;
+		$[23] = isDisabled;
+		$[24] = props$1;
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = validationBehavior;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
 }
 //#endregion
 export { TextField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","characterCount","characterLimitLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","t9","isRequired","t10","maxLength","t11","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no 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. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\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 while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","characterCount","characterLimitLabel","characterLimitReachedLabel","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","numeric","prefix","suffix","trailingIcon","variant","t0","$","t1","t2","isDisabled","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","t8","root","t9","t10","isRequired","t11","maxLength","t12","TextField","_c","props","RACTextField","stylex.props"],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\ntype TextFieldProps = Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'prefix' | 'validationBehavior'> & {\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does. The count is written in the\n   * `I18nProvider`'s digits and grouping.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces. Left out, it is the\n   * sentence for it in the I18nProvider's locale — \"Up to 20 characters\" in\n   * English, singular for a limit of one.\n   */\n  characterLimitLabel?: string;\n  /**\n   * What a screen reader is told once the length reaches `maxLength`, where\n   * `characterCount` draws the count: the count is hidden from the tree, so\n   * this is how a reader learns the field has stopped taking characters. It\n   * is said once as the limit is reached, and again only after the length\n   * has dropped below it. Left out, it is the sentence for it in the\n   * I18nProvider's locale — \"Character limit reached\" in English.\n   */\n  characterLimitReachedLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no 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. An icon drawn in `em`\n   * takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. The value runs left to\n   * right whatever the page's direction, so a minus sign stays before the\n   * digits under a right-to-left locale, and a phone shows the decimal\n   * keypad. That keypad has no minus key on iOS or Android, so a field taking\n   * negative amounts gives an `inputMode` of its own, which replaces it, or\n   * is a `NumberField`, which picks a keypad for each platform.\n   * @default false\n   */\n  numeric?: boolean;\n  /**\n   * Text before the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  prefix?: ReactNode;\n  /**\n   * Text after the value on its line, in the muted role, shown while the\n   * field is focused or holds a value.\n   */\n  suffix?: ReactNode;\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 while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, `prefix` and `suffix` on the value's\n * line, and `characterCount` opposite the supporting text, counting against\n * `maxLength`.\n *\n * The box, label, input and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextField({\n  characterCount = false,\n  characterLimitLabel,\n  characterLimitReachedLabel,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  numeric = false,\n  prefix,\n  suffix,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: RefAttributes<HTMLDivElement> & TextFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField\n  // The decimal keypad for a numeric field, unless the call site names\n  // another below.\n  inputMode={numeric ? 'decimal' : undefined} isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput leftToRight={numeric} numeric={numeric} prefix={prefix} ref={inputRef} suffix={suffix} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} characterLimitReachedLabel={characterLimitReachedLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":"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"}

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

@@ -4,13 +4,14 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { useMessages } from "../../i18n/index.js";
 import { ClockGlyph, KeyboardGlyph } from "../../glyphs/index.js";
 import Button$1 from "../button/index.js";
-import IconButton from "../icon-button/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import IconButton from "../icon-button/index.js";
 import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
+import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -283,7 +284,7 @@ function polar(turn, radius) {
 * which is the element a layout positions.
 */
 function TimePicker(t0) {
-	const $ = c(50);
+	const $ = c(52);
 	const { cancelLabel, confirmLabel, container, defaultMode: t1, defaultOpen: t2, description, enterTimeLabel, error, floatingLabel: t3, isDisabled: t4, isOpen, isReadOnly: t5, label, leadingIcon, onOpenChange, selectTimeLabel, variant: t6, ...props$1 } = t0;
 	const defaultMode = t1 === void 0 ? "dial" : t1;
 	const defaultOpen = t2 === void 0 ? false : t2;
@@ -293,6 +294,7 @@ function TimePicker(t0) {
 	const variant = t6 === void 0 ? "filled" : t6;
 	const validationBehavior = useFieldValidationBehavior();
 	const messages = useMessages();
+	const overModal = useContext(InsideModalContext);
 	const [ownOpen, setOwnOpen] = useState(defaultOpen);
 	const open = isOpen ?? ownOpen;
 	let t7;
@@ -374,17 +376,18 @@ function TimePicker(t0) {
 		$[22] = t17;
 	} else t17 = $[22];
 	let t18;
-	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = props(overlay.scrim, styles.centre);
-		$[23] = t18;
-	} else t18 = $[23];
+	if ($[23] !== overModal) {
+		t18 = props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre);
+		$[23] = overModal;
+		$[24] = t18;
+	} else t18 = $[24];
 	const t19 = cancelLabel ?? messages.cancel;
 	const t20 = confirmLabel ?? messages.confirm;
 	const t21 = enterTimeLabel ?? messages.enterTime;
 	const t22 = props$1.granularity === "hour" ? "hour" : "minute";
 	const t23 = selectTimeLabel ?? messages.selectTime;
 	let t24;
-	if ($[24] !== defaultMode || $[25] !== label || $[26] !== props$1.hourCycle || $[27] !== props$1.placeholderValue || $[28] !== t19 || $[29] !== t20 || $[30] !== t21 || $[31] !== t22 || $[32] !== t23) {
+	if ($[25] !== defaultMode || $[26] !== label || $[27] !== props$1.hourCycle || $[28] !== props$1.placeholderValue || $[29] !== t19 || $[30] !== t20 || $[31] !== t21 || $[32] !== t22 || $[33] !== t23) {
 		t24 = /* @__PURE__ */ jsx(Modal, {
 			className: "x1n1nwrg x1u6grsq xbhiib0 x16dv9tl xvkjz1l x1w1tqly x19pkqky xx61lck x13rsnn2 x1udv5rz x9f619 x139gbkf xi55695 xmz0i5r x193iq5w xysyzu8",
 			children: /* @__PURE__ */ jsx(TimePickerDialog, {
@@ -399,19 +402,19 @@ function TimePicker(t0) {
 				selectTimeLabel: t23
 			})
 		});
-		$[24] = defaultMode;
-		$[25] = label;
-		$[26] = props$1.hourCycle;
-		$[27] = props$1.placeholderValue;
-		$[28] = t19;
-		$[29] = t20;
-		$[30] = t21;
-		$[31] = t22;
-		$[32] = t23;
-		$[33] = t24;
-	} else t24 = $[33];
+		$[25] = defaultMode;
+		$[26] = label;
+		$[27] = props$1.hourCycle;
+		$[28] = props$1.placeholderValue;
+		$[29] = t19;
+		$[30] = t20;
+		$[31] = t21;
+		$[32] = t22;
+		$[33] = t23;
+		$[34] = t24;
+	} else t24 = $[34];
 	let t25;
-	if ($[34] !== changeOpen || $[35] !== container || $[36] !== open || $[37] !== t24) {
+	if ($[35] !== changeOpen || $[36] !== container || $[37] !== open || $[38] !== t18 || $[39] !== t24) {
 		t25 = /* @__PURE__ */ jsx(ModalOverlay, {
 			isDismissable: true,
 			isOpen: open,
@@ -420,14 +423,15 @@ function TimePicker(t0) {
 			...t18,
 			children: t24
 		});
-		$[34] = changeOpen;
-		$[35] = container;
-		$[36] = open;
-		$[37] = t24;
-		$[38] = t25;
-	} else t25 = $[38];
+		$[35] = changeOpen;
+		$[36] = container;
+		$[37] = open;
+		$[38] = t18;
+		$[39] = t24;
+		$[40] = t25;
+	} else t25 = $[40];
 	let t26;
-	if ($[39] !== T0 || $[40] !== isDisabled || $[41] !== isReadOnly || $[42] !== props$1 || $[43] !== t10 || $[44] !== t16 || $[45] !== t17 || $[46] !== t25 || $[47] !== t9 || $[48] !== validationBehavior) {
+	if ($[41] !== T0 || $[42] !== isDisabled || $[43] !== isReadOnly || $[44] !== props$1 || $[45] !== t10 || $[46] !== t16 || $[47] !== t17 || $[48] !== t25 || $[49] !== t9 || $[50] !== validationBehavior) {
 		t26 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t9,
@@ -441,18 +445,18 @@ function TimePicker(t0) {
 				t25
 			]
 		});
-		$[39] = T0;
-		$[40] = isDisabled;
-		$[41] = isReadOnly;
-		$[42] = props$1;
-		$[43] = t10;
-		$[44] = t16;
-		$[45] = t17;
-		$[46] = t25;
-		$[47] = t9;
-		$[48] = validationBehavior;
-		$[49] = t26;
-	} else t26 = $[49];
+		$[41] = T0;
+		$[42] = isDisabled;
+		$[43] = isReadOnly;
+		$[44] = props$1;
+		$[45] = t10;
+		$[46] = t16;
+		$[47] = t17;
+		$[48] = t25;
+		$[49] = t9;
+		$[50] = validationBehavior;
+		$[51] = t26;
+	} else t26 = $[51];
 	return t26;
 }
 /**