@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,250 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { pickWidgetAria, splitRootProps } from "../../utils/root-props.js";
+import { CharacterCounter, ErrorText, FieldErrorIcon, FieldLabel, SupportingText } from "../../primitives/Field.js";
+import { renderedDescription } from "../../utils/rendered-description.js";
+import { textFieldStyles } from "./text-field-styles.js";
+import { useId, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useFocusRing, useHover, useObjectRef, useTextField } from "react-aria";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/text-field/TextField.tsx
+const DEFAULT_LABELS = {
+	error: "Error",
+	characterCount: (count, max) => `Character count: ${count} of ${max}`
+};
+const INTERACTIVE = "input, textarea, button, a, [role=\"button\"]";
+/**
+* M3 text field: filled or outlined, with a floating label, leading / trailing icons,
+* prefix and suffix, supporting text, error message and icon, character counter, and a
+* multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,
+* descriptions, `validate` and native constraints work as in React Aria.
+*
+* `className` and `style` go on the root; `inputRef` reaches the input.
+*
+* @example
+* <TextField label="Email" type="email" required supportingText="We never share it." />
+* <TextField variant="outlined" label="Price" prefix="$" inputMode="decimal" />
+*/
+function TextField(props) {
+	const { variant = "filled", density, label, value: valueProp, defaultValue, onChange, supportingText, supportingTextOnFocus = false, errorMessage, invalid, required, disabled = false, readOnly, leadingIcon, trailingIcon, errorIcon, prefix, prefixLabel, suffix, suffixLabel, multiline = false, autoGrow = false, rows = autoGrow ? 1 : 4, maxRows, counter, labels: labelsProp, className, classNames, style, ref, inputRef, ...otherProps } = props;
+	const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const prefixId = useId();
+	const suffixId = useId();
+	const counterId = useId();
+	const [value, setValue] = useControlledState(valueProp, defaultValue ?? "", onChange);
+	const domInputRef = useObjectRef(inputRef);
+	const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails } = useTextField({
+		...ariaProps,
+		label,
+		description: supportingText,
+		errorMessage,
+		value,
+		onChange: setValue,
+		isInvalid: invalid,
+		isRequired: required,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		inputElementType: multiline ? "textarea" : "input"
+	}, domInputRef);
+	const { focusProps, isFocused } = useFocusRing({ isTextInput: true });
+	const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+	const growing = multiline && autoGrow;
+	useLayoutEffect(() => {
+		const element = domInputRef.current;
+		if (!growing || !element) return;
+		element.style.height = "auto";
+		const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;
+		const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;
+		element.style.height = `${Math.min(element.scrollHeight, max)}px`;
+		element.style.overflowY = element.scrollHeight > max ? "auto" : "hidden";
+	}, [
+		value,
+		growing,
+		maxRows,
+		domInputRef
+	]);
+	const hasLabel = label !== void 0 && label !== null;
+	const floated = hasLabel && (isFocused || value.length > 0);
+	const state = disabled ? "disabled" : isInvalid ? isFocused ? "error-focus" : isHovered ? "error-hover" : "error" : isFocused ? "focus" : isHovered ? "hover" : "rest";
+	const resolvedError = typeof errorMessage === "function" ? errorMessage({
+		isInvalid,
+		validationErrors,
+		validationDetails
+	}) : errorMessage ?? validationErrors.join(" ");
+	const showError = isInvalid && Boolean(resolvedError);
+	const maxLength = ariaProps.maxLength;
+	const showCounter = maxLength !== void 0 && counter !== false;
+	const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;
+	const styles = textFieldStyles({
+		variant,
+		hasLabel,
+		hasLeadingIcon: Boolean(leadingIcon),
+		hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,
+		multiline,
+		fixedHeight: multiline && !autoGrow,
+		supportingTextOnFocus
+	});
+	const describedBy = [
+		prefix ? prefixId : null,
+		suffix ? suffixId : null,
+		renderedDescription(inputProps["aria-describedby"], [!supportingText && descriptionProps.id, !showError && errorMessageProps.id]),
+		showCounter ? counterId : null
+	].filter(Boolean).join(" ") || void 0;
+	const focusInput = (event) => {
+		if (event.target.closest(INTERACTIVE) || disabled) return;
+		event.preventDefault();
+		domInputRef.current?.focus({ preventScroll: true });
+	};
+	const focusInputOnClick = (event) => {
+		const target = event.target;
+		if (event.nativeEvent.pointerType === "mouse" || !event.currentTarget.contains(target) || target.closest(INTERACTIVE) || disabled || document.activeElement === domInputRef.current) return;
+		domInputRef.current?.focus({ preventScroll: true });
+	};
+	const requiredMark = required ? " *" : null;
+	const Input = multiline ? "textarea" : "input";
+	return /* @__PURE__ */ jsxs("div", {
+		...rootData,
+		ref,
+		style,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		"data-tokens": mergeDataTokens("md-comp-text-field", rootData),
+		"data-variant": variant,
+		...densityAttribute(density),
+		"data-field-state": state,
+		"data-focused": isFocused || void 0,
+		"data-hovered": isHovered && !disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		"data-floated": floated || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...hoverProps,
+			onPointerDown: focusInput,
+			onClick: focusInputOnClick,
+			"data-slot": "container",
+			className: styles.container({ class: classNames?.container }),
+			children: [
+				variant === "outlined" && /* @__PURE__ */ jsx("fieldset", {
+					"aria-hidden": "true",
+					"data-slot": "outline",
+					className: styles.outline({ class: classNames?.outline }),
+					children: hasLabel && /* @__PURE__ */ jsx("legend", {
+						className: styles.notch(),
+						children: /* @__PURE__ */ jsx("span", {
+							className: styles.notchClip(),
+							children: /* @__PURE__ */ jsxs("span", {
+								className: styles.notchText(),
+								children: [label, requiredMark]
+							})
+						})
+					})
+				}),
+				leadingIcon && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "leading-icon",
+					className: styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) }),
+					children: leadingIcon
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: styles.field(),
+					children: [
+						prefix && /* @__PURE__ */ jsx("span", {
+							id: prefixId,
+							className: styles.affix({ class: cn(styles.prefix(), classNames?.prefix) }),
+							children: /* @__PURE__ */ jsx(Affix, {
+								text: prefix,
+								label: prefixLabel
+							})
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							...mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps),
+							"aria-describedby": describedBy,
+							ref: domInputRef,
+							"data-slot": "input",
+							rows: multiline ? rows : void 0,
+							className: styles.input({ class: classNames?.input })
+						}),
+						suffix && /* @__PURE__ */ jsx("span", {
+							id: suffixId,
+							className: styles.affix({ class: cn(styles.suffix(), classNames?.suffix) }),
+							children: /* @__PURE__ */ jsx(Affix, {
+								text: suffix,
+								label: suffixLabel
+							})
+						})
+					]
+				}),
+				trailingIcon ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "trailing-icon",
+					className: styles.icon({ class: cn(styles.trailingIcon(), classNames?.trailingIcon) }),
+					children: trailingIcon
+				}) : showErrorIcon ? /* @__PURE__ */ jsx("span", {
+					className: styles.icon({ class: styles.trailingIcon() }),
+					children: /* @__PURE__ */ jsx(FieldErrorIcon, {
+						label: labels.error,
+						icon: errorIcon,
+						className: styles.errorIcon({ class: classNames?.errorIcon })
+					})
+				}) : null,
+				hasLabel && /* @__PURE__ */ jsxs(FieldLabel, {
+					...labelProps,
+					"data-slot": "label",
+					className: styles.label({ class: classNames?.label }),
+					children: [label, requiredMark]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "active-indicator",
+					className: styles.indicator({ class: classNames?.activeIndicator })
+				})
+			]
+		}), (supportingText || showError || showCounter) && /* @__PURE__ */ jsxs("div", {
+			className: styles.supporting(),
+			children: [
+				supportingText && /* @__PURE__ */ jsx(SupportingText, {
+					...descriptionProps,
+					"data-slot": "supporting-text",
+					className: cn(styles.supportingText({ class: cn(styles.supportingTextColor(), classNames?.supportingText) }), showError && "sr-only"),
+					children: supportingText
+				}),
+				showError && /* @__PURE__ */ jsx(ErrorText, {
+					...errorMessageProps,
+					className: styles.supportingText({
+						supportingTextOnFocus: false,
+						class: classNames?.errorText
+					}),
+					children: resolvedError
+				}),
+				showCounter && /* @__PURE__ */ jsx(CharacterCounter, {
+					id: counterId,
+					count: value.length,
+					max: maxLength,
+					label: labels.characterCount(value.length, maxLength),
+					className: styles.counter({ class: classNames?.counter })
+				})
+			]
+		})]
+	});
+}
+/** An affix's visible text, read as its `label` when there is one. */
+function Affix({ text, label }) {
+	if (label === void 0) return text;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: text
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: label
+	})] });
+}
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=TextField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useLayoutEffect,\n  type AriaAttributes,\n  type CSSProperties,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useTextField,\n  type AriaTextFieldOptions,\n  type AriaTextFieldProps,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  CharacterCounter,\n  ErrorText,\n  FieldErrorIcon,\n  FieldLabel,\n  SupportingText,\n} from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { textFieldStyles, type TextFieldVariant } from './text-field-styles';\n\nexport interface TextFieldClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, input and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The `<input>` or `<textarea>`. */\n  input?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing icon's 48px box. */\n  trailingIcon?: string;\n  /** The prefix text before the input. */\n  prefix?: string;\n  /** The suffix text after the input. */\n  suffix?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The character counter below the field. */\n  counter?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\n/** Words the text field announces; override them for other languages. */\nexport interface TextFieldLabels {\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n  /**\n   * What screen readers hear for the character counter (M3 calls it the \"character count\").\n   * @default (count, max) => `Character count: ${count} of ${max}`\n   */\n  characterCount: (count: number, max: number) => string;\n}\n\nconst DEFAULT_LABELS: TextFieldLabels = {\n  error: 'Error',\n  characterCount: (count, max) => `Character count: ${count} of ${max}`,\n};\n\ntype FieldState = 'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\n/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */\ntype RenamedAriaProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'label'\n  | 'description'\n  | 'inputElementType'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface TextFieldOwnProps\n  extends\n    Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>,\n    // The attributes that describe the input go to it, with React Aria's `aria-controls`,\n    // `aria-haspopup`, `aria-autocomplete` and `aria-activedescendant`: a field that opens its\n    // own suggestions can say so.\n    Pick<\n      AriaAttributes,\n      | 'aria-expanded'\n      | 'aria-required'\n      | 'aria-invalid'\n      | 'aria-readonly'\n      | 'aria-multiline'\n      | 'aria-placeholder'\n    > {\n  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** The container style: a filled surface or an outline. @default \"filled\" */\n  variant?: TextFieldVariant;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).\n   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3\n   * asks for density to be the reader's choice rather than a default, so prefer setting it\n   * there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** The text, when controlled. */\n  value?: string;\n  /** The initial text, when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the new text on every change. */\n  onChange?: (value: string) => void;\n  /**\n   * Helper text below the field. Replaced visually by the error message when invalid, and\n   * shown in the error colour while the field is invalid.\n   */\n  supportingText?: ReactNode;\n  /**\n   * Shows the supporting text only while the field has focus (M3 allows it \"persistently\n   * visible or visible only on focus\"). Its space is kept, and screen readers always get it.\n   * @default false\n   */\n  supportingTextOnFocus?: boolean;\n  /** Marks the field invalid (in addition to `validate` and native constraints). */\n  invalid?: boolean;\n  /** A value is required: adds the `*` to the label and native `required` validation. */\n  required?: boolean;\n  /** Disables the field: it can't be focused or edited. @default false */\n  disabled?: boolean;\n  /**\n   * The value can be read and copied but not changed. M3 styles it as a regular field and\n   * asks for it to be \"clearly labeled as read-only\", e.g. in the supporting text. The root\n   * gets `data-readonly`.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Decorative icon at the start, in a 48px box. */\n  leadingIcon?: ReactNode;\n  /**\n   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes\n   * the place of the error icon.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3\n   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;\n   * `false` turns it off.\n   */\n  errorIcon?: ReactNode | false;\n  /** Text before the input, e.g. \"$\". Shown once the label floats. */\n  prefix?: ReactNode;\n  /**\n   * What screen readers hear for the prefix, e.g. \"US dollars\" for \"$\". The prefix is in the\n   * input's description either way; without this, its visible text is read.\n   */\n  prefixLabel?: string;\n  /** Text after the input, e.g. \"kg\". Shown once the label floats. */\n  suffix?: ReactNode;\n  /** What screen readers hear for the suffix, e.g. \"kilograms\" for \"kg\". */\n  suffixLabel?: string;\n  /**\n   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines\n   * that scrolls vertically, which M3 recommends over growing fields on the web.\n   * @default false\n   */\n  multiline?: boolean;\n  /**\n   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line\n   * field) instead of keeping a fixed height.\n   * @default false\n   */\n  autoGrow?: boolean;\n  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */\n  rows?: number;\n  /** With `autoGrow`: lines after which the field scrolls instead of growing. */\n  maxRows?: number;\n  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /** Words the field announces, for other languages. */\n  labels?: Partial<TextFieldLabels>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. */\n  classNames?: TextFieldClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** The root element. Use `inputRef` for the input itself. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */\n  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n}\n\n/** A visible label, or an accessible name for fields without one. */\ntype TextFieldLabel =\n  | {\n      /** The visible label, which floats above the input once it has focus or a value. */\n      label: ReactNode;\n    }\n  | {\n      label?: undefined;\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      label?: undefined;\n      /** The id of the element that names the field, when there's no visible label. */\n      'aria-labelledby': string;\n    };\n\nexport type TextFieldProps = TextFieldOwnProps & TextFieldLabel;\n\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\n/**\n * M3 text field: filled or outlined, with a floating label, leading / trailing icons,\n * prefix and suffix, supporting text, error message and icon, character counter, and a\n * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,\n * descriptions, `validate` and native constraints work as in React Aria.\n *\n * `className` and `style` go on the root; `inputRef` reaches the input.\n *\n * @example\n * <TextField label=\"Email\" type=\"email\" required supportingText=\"We never share it.\" />\n * <TextField variant=\"outlined\" label=\"Price\" prefix=\"$\" inputMode=\"decimal\" />\n */\nexport function TextField(props: TextFieldProps) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    supportingText,\n    supportingTextOnFocus = false,\n    errorMessage,\n    invalid,\n    required,\n    disabled = false,\n    readOnly,\n    leadingIcon,\n    trailingIcon,\n    errorIcon,\n    prefix,\n    prefixLabel,\n    suffix,\n    suffixLabel,\n    multiline = false,\n    autoGrow = false,\n    rows = autoGrow ? 1 : 4,\n    maxRows,\n    counter,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef,\n    ...otherProps\n  } = props;\n\n  // `data-*` attributes and the root's DOM attributes describe the component, so they go on the\n  // root with `className`; everything else (the input's ARIA, attributes and events) goes to\n  // the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const prefixId = useId();\n  const suffixId = useId();\n  const counterId = useId();\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? '', onChange);\n  const domInputRef = useObjectRef(inputRef as Ref<HTMLInputElement>);\n  const {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useTextField(\n    {\n      ...ariaProps,\n      label,\n      description: supportingText,\n      errorMessage,\n      value,\n      onChange: setValue,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n      inputElementType: multiline ? 'textarea' : 'input',\n    } as AriaTextFieldOptions<'input' | 'textarea'>,\n    domInputRef,\n  );\n  const { focusProps, isFocused } = useFocusRing({ isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const growing = multiline && autoGrow;\n  // Grow a multiline field with its content, up to maxRows.\n  useLayoutEffect(() => {\n    const element = domInputRef.current as HTMLTextAreaElement | null;\n    if (!growing || !element) return;\n    element.style.height = 'auto';\n    const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;\n    const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;\n    element.style.height = `${Math.min(element.scrollHeight, max)}px`;\n    element.style.overflowY = element.scrollHeight > max ? 'auto' : 'hidden';\n  }, [value, growing, maxRows, domInputRef]);\n\n  const hasLabel = label !== undefined && label !== null;\n  const floated = hasLabel && (isFocused || value.length > 0);\n  const state: FieldState = disabled\n    ? 'disabled'\n    : isInvalid\n      ? isFocused\n        ? 'error-focus'\n        : isHovered\n          ? 'error-hover'\n          : 'error'\n      : isFocused\n        ? 'focus'\n        : isHovered\n          ? 'hover'\n          : 'rest';\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const showError = isInvalid && Boolean(resolvedError);\n  const maxLength = ariaProps.maxLength;\n  const showCounter = maxLength !== undefined && counter !== false;\n  const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;\n\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,\n    multiline,\n    fixedHeight: multiline && !autoGrow,\n    supportingTextOnFocus,\n  });\n  // The affixes and the counter join React Aria's description (supporting text, then error).\n  const describedBy =\n    [\n      prefix ? prefixId : null,\n      suffix ? suffixId : null,\n      renderedDescription(inputProps['aria-describedby'], [\n        !supportingText && descriptionProps.id,\n        !showError && errorMessageProps.id,\n      ]),\n      showCounter ? counterId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // Pressing the container (not an icon button) focuses the input, like Compose.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if ((event.target as Element).closest(INTERACTIVE) || disabled) return;\n    event.preventDefault();\n    // The field is where the press landed: the page never scrolls to it (2026-10-15).\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n  // Chrome's touch adjustment can send a tap's pointer events to the input while the mouse\n  // events it emulates, and the click, land on the padding beside it, so the input never\n  // takes focus (2026-10-17). A click on the field that leaves the input unfocused focuses it.\n  // The mouse never needs it: its press on the padding already focused the input.\n  const focusInputOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    if (\n      (event.nativeEvent as globalThis.PointerEvent).pointerType === 'mouse' ||\n      !event.currentTarget.contains(target) ||\n      target.closest(INTERACTIVE) ||\n      disabled ||\n      document.activeElement === domInputRef.current\n    ) {\n      return;\n    }\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // Part of the accessible name, as M3 asks (\"The accessibility label must include the\n  // asterisk\"); the copy in the outline's notch is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const Input = multiline ? 'textarea' : 'input';\n\n  return (\n    <div\n      {...rootData}\n      ref={ref}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootData)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={isFocused || undefined}\n      data-hovered={(isHovered && !disabled) || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n    >\n      <div\n        {...hoverProps}\n        onPointerDown={focusInput}\n        onClick={focusInputOnClick}\n        data-slot=\"container\"\n        className={styles.container({ class: classNames?.container })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field()}>\n          {prefix && (\n            <span\n              id={prefixId}\n              className={styles.affix({ class: cn(styles.prefix(), classNames?.prefix) })}\n            >\n              <Affix text={prefix} label={prefixLabel} />\n            </span>\n          )}\n          <Input\n            {...(mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps) as object)}\n            aria-describedby={describedBy}\n            ref={domInputRef as Ref<never>}\n            data-slot=\"input\"\n            rows={multiline ? rows : undefined}\n            className={styles.input({ class: classNames?.input })}\n          />\n          {suffix && (\n            <span\n              id={suffixId}\n              className={styles.affix({ class: cn(styles.suffix(), classNames?.suffix) })}\n            >\n              <Affix text={suffix} label={suffixLabel} />\n            </span>\n          )}\n        </div>\n        {trailingIcon ? (\n          <span\n            data-slot=\"trailing-icon\"\n            className={styles.icon({\n              class: cn(styles.trailingIcon(), classNames?.trailingIcon),\n            })}\n          >\n            {trailingIcon}\n          </span>\n        ) : showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={labels.error}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError || showCounter) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({\n                supportingTextOnFocus: false,\n                class: classNames?.errorText,\n              })}\n            >\n              {resolvedError}\n            </ErrorText>\n          )}\n          {showCounter && (\n            <CharacterCounter\n              id={counterId}\n              count={value.length}\n              max={maxLength}\n              label={labels.characterCount(value.length, maxLength)}\n              className={styles.counter({ class: classNames?.counter })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** An affix's visible text, read as its `label` when there is one. */\nfunction Affix({ text, label }: { text: ReactNode; label: string | undefined }) {\n  if (label === undefined) return text;\n  return (\n    <>\n      <span aria-hidden=\"true\">{text}</span>\n      <span className=\"sr-only\">{label}</span>\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,252 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/text-field/text-field-styles.d.ts
+/** Variant definitions for {@link TextField}. */
+export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    filled: {
+      container: string[];
+      outline: string;
+    };
+    outlined: {
+      container: string;
+      indicator: string;
+      label: string;
+    };
+  };
+  hasLabel: {
+    true: {
+      outline: string;
+    };
+    false: {
+      outline: string;
+    };
+  };
+  hasLeadingIcon: {
+    true: {
+      field: string;
+      label: string;
+    };
+    false: {
+      field: string;
+      label: string;
+    };
+  };
+  hasTrailingIcon: {
+    true: {
+      field: string;
+    };
+    false: {
+      field: string;
+    };
+  };
+  multiline: {
+    true: {
+      field: string;
+      input: string;
+    };
+    false: {};
+  };
+  fixedHeight: {
+    true: {
+      input: string;
+    };
+    false: {};
+  };
+  supportingTextOnFocus: {
+    true: {
+      supportingText: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  container: string[];
+  outline: string[];
+  notch: string[];
+  notchClip: string;
+  notchText: string;
+  indicator: string[];
+  label: string[];
+  icon: string[];
+  leadingIcon: string;
+  trailingIcon: string[];
+  field: string;
+  input: string[];
+  affix: string[];
+  prefix: string;
+  suffix: string;
+  supporting: string;
+  supportingTextColor: string;
+  supportingText: string[];
+  counter: string[];
+  errorIcon: string;
+  required: string;
+}, undefined, {
+  variant: {
+    filled: {
+      container: string[];
+      outline: string;
+    };
+    outlined: {
+      container: string;
+      indicator: string;
+      label: string;
+    };
+  };
+  hasLabel: {
+    true: {
+      outline: string;
+    };
+    false: {
+      outline: string;
+    };
+  };
+  hasLeadingIcon: {
+    true: {
+      field: string;
+      label: string;
+    };
+    false: {
+      field: string;
+      label: string;
+    };
+  };
+  hasTrailingIcon: {
+    true: {
+      field: string;
+    };
+    false: {
+      field: string;
+    };
+  };
+  multiline: {
+    true: {
+      field: string;
+      input: string;
+    };
+    false: {};
+  };
+  fixedHeight: {
+    true: {
+      input: string;
+    };
+    false: {};
+  };
+  supportingTextOnFocus: {
+    true: {
+      supportingText: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  container: string[];
+  outline: string[];
+  notch: string[];
+  notchClip: string;
+  notchText: string;
+  indicator: string[];
+  label: string[];
+  icon: string[];
+  leadingIcon: string;
+  trailingIcon: string[];
+  field: string;
+  input: string[];
+  affix: string[];
+  prefix: string;
+  suffix: string;
+  supporting: string;
+  supportingTextColor: string;
+  supportingText: string[];
+  counter: string[];
+  errorIcon: string;
+  required: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    filled: {
+      container: string[];
+      outline: string;
+    };
+    outlined: {
+      container: string;
+      indicator: string;
+      label: string;
+    };
+  };
+  hasLabel: {
+    true: {
+      outline: string;
+    };
+    false: {
+      outline: string;
+    };
+  };
+  hasLeadingIcon: {
+    true: {
+      field: string;
+      label: string;
+    };
+    false: {
+      field: string;
+      label: string;
+    };
+  };
+  hasTrailingIcon: {
+    true: {
+      field: string;
+    };
+    false: {
+      field: string;
+    };
+  };
+  multiline: {
+    true: {
+      field: string;
+      input: string;
+    };
+    false: {};
+  };
+  fixedHeight: {
+    true: {
+      input: string;
+    };
+    false: {};
+  };
+  supportingTextOnFocus: {
+    true: {
+      supportingText: string[];
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  container: string[];
+  outline: string[];
+  notch: string[];
+  notchClip: string;
+  notchText: string;
+  indicator: string[];
+  label: string[];
+  icon: string[];
+  leadingIcon: string;
+  trailingIcon: string[];
+  field: string;
+  input: string[];
+  affix: string[];
+  prefix: string;
+  suffix: string;
+  supporting: string;
+  supportingTextColor: string;
+  supportingText: string[];
+  counter: string[];
+  errorIcon: string;
+  required: string;
+}>>;
+/**
+ * The variants of {@link textFieldStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type TextFieldStyleProps = VariantProps<typeof textFieldStyles>;
+export type TextFieldVariant = NonNullable<TextFieldStyleProps['variant']>;
+//#endregion
+//# sourceMappingURL=text-field-styles.d.ts.map