@seed-design/lynx-react 0.3.1 → 0.4.0

package/lib/components/TextField/TextField.d.ts

@@ -0,0 +1,113 @@
+import { IntrinsicElements, NodesRef } from '@lynx-js/types';
+import { TextInputVariantProps } from '@seed-design/lynx-css/recipes/text-input';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { InternalIconProps } from '../Icon/Icon';
+import * as React from "@lynx-js/react";
+/**
+ * @platform Lynx
+ *
+ * native `<input>`과 `<textarea>`의 값 상태를 소유한다.
+ * Lynx native 입력은 value attribute를 제공하지 않으므로 하위 입력 슬롯이
+ * `setValue` UI method로 controlled value를 동기화한다.
+ */
+export interface TextFieldRootProps extends Omit<TextInputVariantProps, "focused">, LynxStyledElementProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** @internal `useTextFieldWithGraphemes`가 전달하는 네이티브 입력 사전 제한 값. */
+    nativeInsertionMaxLength?: number;
+    required?: boolean;
+    name?: string;
+}
+export declare const TextFieldRoot: React.ForwardRefExoticComponent<TextFieldRootProps & React.RefAttributes<NodesRef>>;
+type NativeInputProps = IntrinsicElements["input"];
+type NativeTextareaProps = IntrinsicElements["textarea"];
+interface NativeTextControlProps extends Omit<LynxStyledElementProps, "children">, LynxAccessibilityProps {
+    id?: NativeInputProps["id"];
+    name?: NativeInputProps["name"];
+    hidden?: NativeInputProps["hidden"];
+    flatten?: NativeInputProps["flatten"];
+    focusable?: NativeInputProps["focusable"];
+    bindlayoutchange?: NativeInputProps["bindlayoutchange"];
+    "main-thread:bindlayoutchange"?: NativeInputProps["main-thread:bindlayoutchange"];
+}
+type AndroidSetSoftInputMode = "unspecified" | "nothing" | "pan" | "resize";
+/**
+ * @platform Lynx
+ *
+ * `readOnly` 상태에서는 native focus·selection·편집 메뉴를 제거하기 위해 `<text>`로 렌더링한다.
+ * 이때 ref는 `<text>`를 가리키며 input 전용 UI method와 이벤트는 사용할 수 없다.
+ */
+export interface TextFieldInputProps extends NativeTextControlProps {
+    placeholder?: NativeInputProps["placeholder"];
+    "confirm-type"?: NativeInputProps["confirm-type"];
+    maxlength?: NativeInputProps["maxlength"];
+    readonly?: NativeInputProps["readonly"];
+    disabled?: NativeInputProps["disabled"];
+    "show-soft-input-on-focus"?: NativeInputProps["show-soft-input-on-focus"];
+    "input-filter"?: NativeInputProps["input-filter"];
+    type?: NativeInputProps["type"];
+    "ios-auto-correct"?: NativeInputProps["ios-auto-correct"];
+    "ios-spell-check"?: NativeInputProps["ios-spell-check"];
+    "android-fullscreen-mode"?: NativeInputProps["android-fullscreen-mode"];
+    /** Android host window의 soft input mode를 지정한다. */
+    "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
+    bindfocus?: NativeInputProps["bindfocus"];
+    bindblur?: NativeInputProps["bindblur"];
+    bindconfirm?: NativeInputProps["bindconfirm"];
+    bindinput?: NativeInputProps["bindinput"];
+    bindselection?: NativeInputProps["bindselection"];
+}
+export declare const TextFieldInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<NodesRef>>;
+/**
+ * @platform Lynx
+ *
+ * `readOnly` 상태에서는 native focus·selection·편집 메뉴를 제거하기 위해 `<text>`로 렌더링한다.
+ * 이때 ref는 `<text>`를 가리키며 textarea 전용 UI method와 이벤트는 사용할 수 없다.
+ */
+export interface TextFieldTextareaProps extends NativeTextControlProps {
+    /** 내용에 맞춰 높이를 자동으로 조절한다. @defaultValue true */
+    autoresize?: boolean;
+    placeholder?: NativeTextareaProps["placeholder"];
+    "confirm-type"?: NativeTextareaProps["confirm-type"];
+    maxlength?: NativeTextareaProps["maxlength"];
+    maxlines?: NativeTextareaProps["maxlines"];
+    bounces?: NativeTextareaProps["bounces"];
+    /**
+     * native 줄 간격을 지정한다. 생략하면 Android에서 SEED 기본 typography를 맞추기 위해
+     * `3.2px`를 적용하고 iOS에는 전달하지 않는다. Android 기본 보정은 `0`으로 해제할 수 있다.
+     */
+    "line-spacing"?: NativeTextareaProps["line-spacing"];
+    readonly?: NativeTextareaProps["readonly"];
+    disabled?: NativeTextareaProps["disabled"];
+    "show-soft-input-on-focus"?: NativeTextareaProps["show-soft-input-on-focus"];
+    "input-filter"?: NativeTextareaProps["input-filter"];
+    "enable-scroll-bar"?: NativeTextareaProps["enable-scroll-bar"];
+    type?: NativeTextareaProps["type"];
+    "ios-auto-correct"?: NativeTextareaProps["ios-auto-correct"];
+    "ios-spell-check"?: NativeTextareaProps["ios-spell-check"];
+    /** Android의 fullscreen extract input을 활성화한다. @defaultValue false */
+    "android-fullscreen-mode"?: NativeTextareaProps["android-fullscreen-mode"];
+    /** Android host window의 soft input mode를 지정한다. */
+    "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
+    bindfocus?: NativeTextareaProps["bindfocus"];
+    bindblur?: NativeTextareaProps["bindblur"];
+    bindconfirm?: NativeTextareaProps["bindconfirm"];
+    bindinput?: NativeTextareaProps["bindinput"];
+    bindselection?: NativeTextareaProps["bindselection"];
+}
+export declare const TextFieldTextarea: React.ForwardRefExoticComponent<TextFieldTextareaProps & React.RefAttributes<NodesRef>>;
+export interface TextFieldPrefixIconProps extends InternalIconProps {
+}
+export declare const TextFieldPrefixIcon: React.ForwardRefExoticComponent<TextFieldPrefixIconProps & React.RefAttributes<unknown>>;
+export interface TextFieldPrefixTextProps extends LynxStyledElementProps {
+}
+export declare const TextFieldPrefixText: React.ForwardRefExoticComponent<TextFieldPrefixTextProps & React.RefAttributes<unknown>>;
+export interface TextFieldSuffixIconProps extends InternalIconProps {
+}
+export declare const TextFieldSuffixIcon: React.ForwardRefExoticComponent<TextFieldSuffixIconProps & React.RefAttributes<unknown>>;
+export interface TextFieldSuffixTextProps extends LynxStyledElementProps {
+}
+export declare const TextFieldSuffixText: React.ForwardRefExoticComponent<TextFieldSuffixTextProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=TextField.d.ts.map

package/lib/components/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}

package/lib/components/TextField/TextField.jsx

@@ -0,0 +1,418 @@
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import { useFieldContext } from "../Field/context.js";
+import { useKeyboardAvoidanceActions } from "../KeyboardAvoidingScrollView/context.js";
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED, TextFieldContext } from "./context.js";
+import { textInput } from "@seed-design/lynx-css/vars/component";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { textInput as textInput$1 } from "@seed-design/lynx-css/recipes/text-input";
+//#region src/components/TextField/TextField.tsx
+var ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px";
+function isAndroidRuntime() {
+	return (globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo))?.platform === "Android";
+}
+var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(textInput$1);
+var TextFieldRoot = React.forwardRef((props, forwardedRef) => {
+	const [variantProps, otherProps] = textInput$1.splitVariantProps(props);
+	const { children, className, value: controlledValue, defaultValue = "", onValueChange, nativeInsertionMaxLength, required: requiredProp, name, ...nativeProps } = otherProps;
+	const fieldContext = useFieldContext({ strict: false });
+	const rootRef = React.useRef(null);
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const [localFocused, setLocalFocused] = React.useState(false);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const disabled = variantProps.disabled ?? fieldContext?.disabled ?? false;
+	const invalid = variantProps.invalid ?? fieldContext?.invalid ?? false;
+	const readOnly = variantProps.readOnly ?? fieldContext?.readOnly ?? false;
+	const required = requiredProp ?? fieldContext?.required ?? false;
+	const focused = fieldContext?.focused ?? localFocused;
+	const variant = variantProps.variant ?? "outline";
+	const size = variantProps.size ?? "large";
+	const valueRef = React.useRef(value);
+	const controlledRef = React.useRef(isControlled);
+	const onValueChangeRef = React.useRef(onValueChange);
+	const fieldContextRef = React.useRef(fieldContext);
+	valueRef.current = value;
+	controlledRef.current = isControlled;
+	onValueChangeRef.current = onValueChange;
+	fieldContextRef.current = fieldContext;
+	const classes = textInput$1({
+		...variantProps,
+		variant,
+		size,
+		disabled,
+		focused: focused && !readOnly,
+		invalid,
+		readOnly
+	});
+	const mergedRef = React.useCallback((node) => {
+		"background only";
+		rootRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	const setFocused = React.useCallback((nextFocused) => {
+		"background only";
+		setLocalFocused(nextFocused);
+		fieldContextRef.current?.setFocused(nextFocused);
+	}, []);
+	const setValue = React.useCallback((nextValue) => {
+		"background only";
+		if (!controlledRef.current) setUncontrolledValue(nextValue);
+		if (nextValue !== valueRef.current) onValueChangeRef.current?.(nextValue);
+	}, []);
+	const contextValue = React.useMemo(() => ({
+		rootRef,
+		value,
+		controlled: isControlled,
+		nativeInsertionMaxLength,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		name,
+		focused,
+		setValue,
+		setFocused
+	}), [
+		disabled,
+		focused,
+		invalid,
+		name,
+		nativeInsertionMaxLength,
+		readOnly,
+		required,
+		setFocused,
+		setValue,
+		value,
+		isControlled
+	]);
+	return <TextFieldContext.Provider value={contextValue}>
+        <ClassNamesProvider value={classes}>
+          <view ref={mergedRef} className={clsx(classes.root, className)} {...nativeProps}>
+            <view className={classes.baseStroke} accessibility-elements-hidden={true} />
+            <view className={classes.stroke} accessibility-elements-hidden={true} />
+            {children}
+          </view>
+        </ClassNamesProvider>
+      </TextFieldContext.Provider>;
+});
+TextFieldRoot.displayName = "TextFieldRoot";
+function resolveNativeMaxLength(explicitMaxLength, insertionMaxLength) {
+	if (explicitMaxLength === void 0) return insertionMaxLength;
+	if (insertionMaxLength === void 0) return explicitMaxLength;
+	return Math.min(explicitMaxLength, insertionMaxLength);
+}
+function useWasDefined(value) {
+	const isDefined = value !== void 0;
+	const [wasDefined, setWasDefined] = React.useState(isDefined);
+	React.useEffect(() => {
+		if (isDefined) setWasDefined(true);
+	}, [isDefined]);
+	return wasDefined || isDefined;
+}
+function useResolvedNativeMaxLength(explicitMaxLength, insertionMaxLength) {
+	if (!useWasDefined(explicitMaxLength !== void 0 || insertionMaxLength !== void 0 ? true : void 0)) return void 0;
+	return resolveNativeMaxLength(explicitMaxLength, insertionMaxLength ?? 2147483647);
+}
+function useNativeTextControl({ forwardedRef, disabled: disabledProp, readOnly: readOnlyProp, bindinput, bindfocus, bindblur }) {
+	const textFieldContext = React.useContext(TextFieldContext);
+	if (!textFieldContext) throw new Error("TextField input components must be rendered inside <TextField.Root>.");
+	const fieldContext = useFieldContext({ strict: false });
+	const keyboardAvoidance = useKeyboardAvoidanceActions();
+	const disabled = disabledProp ?? textFieldContext.disabled;
+	const readOnly = readOnlyProp ?? textFieldContext.readOnly;
+	const nativeRef = React.useRef(null);
+	const initialNativeValueRef = React.useRef(textFieldContext.value);
+	const ownerRef = React.useRef({});
+	const lastNativeValueRef = React.useRef(initialNativeValueRef.current);
+	const committedValueRef = React.useRef(textFieldContext.value);
+	const controlledRef = React.useRef(textFieldContext.controlled);
+	const readOnlyRef = React.useRef(readOnly);
+	const isComposingRef = React.useRef(false);
+	const canApplyInsertionMaxLengthRef = React.useRef(true);
+	const reconciliationRevisionRef = React.useRef(0);
+	const [canApplyInsertionMaxLength, setCanApplyInsertionMaxLength] = React.useState(true);
+	const wasInsertionMaxLengthManaged = useWasDefined(textFieldContext.nativeInsertionMaxLength);
+	committedValueRef.current = textFieldContext.value;
+	controlledRef.current = textFieldContext.controlled;
+	readOnlyRef.current = readOnly;
+	const syncNativeValue = React.useCallback((node, value) => {
+		"background only";
+		if (lastNativeValueRef.current === value || typeof node.invoke !== "function") return;
+		lastNativeValueRef.current = value;
+		try {
+			node.invoke({
+				method: "setValue",
+				params: { value },
+				fail() {
+					"background only";
+					if (lastNativeValueRef.current === value) lastNativeValueRef.current = null;
+				}
+			}).exec();
+		} catch {
+			lastNativeValueRef.current = null;
+		}
+	}, []);
+	const mergedRef = React.useCallback((node) => {
+		"background only";
+		nativeRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	const updateEditingState = React.useCallback((selectionStart, selectionEnd, isComposing = isComposingRef.current) => {
+		"background only";
+		isComposingRef.current = isComposing;
+		const nextCanApplyInsertionMaxLength = !isComposing && selectionStart >= 0 && selectionStart === selectionEnd;
+		if (canApplyInsertionMaxLengthRef.current === nextCanApplyInsertionMaxLength) return;
+		canApplyInsertionMaxLengthRef.current = nextCanApplyInsertionMaxLength;
+		setCanApplyInsertionMaxLength(nextCanApplyInsertionMaxLength);
+	}, []);
+	const reconcileControlledValue = React.useCallback((nativeValue) => {
+		"background only";
+		if (!controlledRef.current) return;
+		reconciliationRevisionRef.current += 1;
+		const revision = reconciliationRevisionRef.current;
+		const nodeAtInput = nativeRef.current;
+		Promise.resolve().then(() => {
+			"background only";
+		}).then(() => {
+			"background only";
+			if (revision !== reconciliationRevisionRef.current || !controlledRef.current || readOnlyRef.current || nativeRef.current !== nodeAtInput) return;
+			const committedValue = committedValueRef.current;
+			if (committedValue === nativeValue) return;
+			const node = nativeRef.current;
+			if (node) syncNativeValue(node, committedValue);
+		});
+	}, [syncNativeValue]);
+	React.useEffect(() => {
+		if (readOnly) return;
+		if (lastNativeValueRef.current === textFieldContext.value) return;
+		const node = nativeRef.current;
+		if (node) syncNativeValue(node, textFieldContext.value);
+	}, [
+		readOnly,
+		syncNativeValue,
+		textFieldContext.value
+	]);
+	React.useEffect(() => () => {
+		keyboardAvoidance?.unregister(ownerRef.current);
+		reconciliationRevisionRef.current += 1;
+	}, [keyboardAvoidance]);
+	const handleInput = React.useCallback((event) => {
+		"background only";
+		const { value: nextValue, selectionStart, selectionEnd, isComposing } = event.detail;
+		if (disabled || readOnly) {
+			lastNativeValueRef.current = nextValue;
+			if (nextValue !== committedValueRef.current) {
+				const node = nativeRef.current;
+				if (node) syncNativeValue(node, committedValueRef.current);
+			}
+			return;
+		}
+		updateEditingState(selectionStart, selectionEnd, isComposing === true);
+		lastNativeValueRef.current = nextValue;
+		textFieldContext.setValue(nextValue);
+		bindinput?.(event);
+		reconcileControlledValue(nextValue);
+	}, [
+		bindinput,
+		disabled,
+		readOnly,
+		reconcileControlledValue,
+		syncNativeValue,
+		textFieldContext.setValue,
+		updateEditingState
+	]);
+	const handleSelectionChange = React.useCallback((detail) => {
+		"background only";
+		updateEditingState(detail.selectionStart, detail.selectionEnd);
+	}, [updateEditingState]);
+	const handleFocus = React.useCallback((event) => {
+		"background only";
+		textFieldContext.setFocused(true);
+		keyboardAvoidance?.focus({
+			owner: ownerRef.current,
+			nativeRef,
+			controlRef: textFieldContext.rootRef,
+			fieldRef: fieldContext?.rootRef,
+			enabled: !disabled && !readOnly
+		});
+		bindfocus?.(event);
+	}, [
+		bindfocus,
+		disabled,
+		fieldContext?.rootRef,
+		keyboardAvoidance,
+		readOnly,
+		textFieldContext.rootRef,
+		textFieldContext.setFocused
+	]);
+	const handleBlur = React.useCallback((event) => {
+		"background only";
+		textFieldContext.setFocused(false);
+		keyboardAvoidance?.blur(ownerRef.current);
+		bindblur?.(event);
+	}, [
+		bindblur,
+		keyboardAvoidance,
+		textFieldContext.setFocused
+	]);
+	const notifyLayoutChanged = React.useCallback(() => {
+		"background only";
+		keyboardAvoidance?.layoutChanged(ownerRef.current);
+	}, [keyboardAvoidance]);
+	const focusNativeControl = React.useCallback(() => {
+		"background only";
+		const node = nativeRef.current;
+		if (!node || typeof node.invoke !== "function") return;
+		try {
+			node.invoke({ method: "focus" }).exec();
+		} catch {}
+	}, []);
+	return {
+		context: textFieldContext,
+		disabled,
+		readOnly,
+		defaultValueProps: { "default-value": initialNativeValueRef.current },
+		mergedRef,
+		handleInput,
+		handleFocus,
+		handleBlur,
+		notifyLayoutChanged,
+		focusNativeControl,
+		handleSelectionChange,
+		nativeInsertionMaxLength: wasInsertionMaxLengthManaged && canApplyInsertionMaxLength && textFieldContext.nativeInsertionMaxLength !== void 0 ? textFieldContext.nativeInsertionMaxLength : wasInsertionMaxLengthManaged ? NATIVE_TEXT_MAX_LENGTH_UNLIMITED : void 0
+	};
+}
+function getAccessibilityProps(props) {
+	return {
+		"accessibility-label": props["accessibility-label"],
+		"accessibility-traits": props["accessibility-traits"],
+		"accessibility-element": props["accessibility-element"],
+		"accessibility-value": props["accessibility-value"],
+		"accessibility-role-description": props["accessibility-role-description"],
+		"accessibility-elements-hidden": props["accessibility-elements-hidden"],
+		"accessibility-heading": props["accessibility-heading"],
+		"accessibility-actions": props["accessibility-actions"],
+		"accessibility-exclusive-focus": props["accessibility-exclusive-focus"],
+		"ios-platform-accessibility-id": props["ios-platform-accessibility-id"]
+	};
+}
+function getReadOnlyTextStyle({ style, disabled, placeholder, multiline }) {
+	return {
+		...style,
+		...multiline ? {
+			whiteSpace: "normal",
+			wordBreak: "break-all"
+		} : { alignSelf: "center" },
+		...placeholder ? { color: disabled ? textInput.base.disabled.placeholder.color : textInput.base.enabled.placeholder.color } : {}
+	};
+}
+var TextFieldInput = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { className, disabled, readonly, name, maxlength, bindinput, bindselection, bindfocus, bindblur, "show-soft-input-on-focus": showSoftInputOnFocus, "android-set-soft-input-mode": androidSetSoftInputMode, ...nativeProps } = props;
+	const control = useNativeTextControl({
+		forwardedRef: ref,
+		disabled,
+		readOnly: readonly,
+		bindinput,
+		bindfocus,
+		bindblur
+	});
+	const resolvedMaxLength = useResolvedNativeMaxLength(maxlength, control.nativeInsertionMaxLength);
+	const handleSelection = React.useCallback((event) => {
+		"background only";
+		control.handleSelectionChange(event.detail);
+		bindselection?.(event);
+	}, [bindselection, control.handleSelectionChange]);
+	if (control.readOnly) {
+		const value = control.context.value;
+		const isPlaceholder = value === "";
+		const displayValue = isPlaceholder ? props.placeholder : props.type === "password" ? Array.from(value, () => "•").join("") : value;
+		return <text ref={control.mergedRef} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} bindlayoutchange={props.bindlayoutchange} main-thread:bindlayoutchange={props["main-thread:bindlayoutchange"]} className={clsx(classes.value, className)} style={getReadOnlyTextStyle({
+			style: props.style,
+			disabled: control.disabled,
+			placeholder: isPlaceholder,
+			multiline: false
+		})} {...getAccessibilityProps(props)}>
+        {displayValue}
+      </text>;
+	}
+	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
+});
+TextFieldInput.displayName = "TextFieldInput";
+var TextFieldTextarea = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { className, disabled, readonly, name, maxlength, bindinput, bindselection, bindfocus, bindblur, bindlayoutchange, "show-soft-input-on-focus": showSoftInputOnFocus, bounces, "line-spacing": lineSpacing, "android-fullscreen-mode": androidFullscreenMode, "android-set-soft-input-mode": androidSetSoftInputMode, autoresize = true, ...nativeProps } = props;
+	const control = useNativeTextControl({
+		forwardedRef: ref,
+		disabled,
+		readOnly: readonly,
+		bindinput,
+		bindfocus,
+		bindblur
+	});
+	const resolvedMaxLength = useResolvedNativeMaxLength(maxlength, control.nativeInsertionMaxLength);
+	const isAndroid = isAndroidRuntime();
+	const resolvedLineSpacing = lineSpacing !== void 0 ? lineSpacing : isAndroid ? ANDROID_TEXTAREA_DEFAULT_LINE_SPACING : void 0;
+	const handleSelection = React.useCallback((event) => {
+		"background only";
+		control.handleSelectionChange(event.detail);
+		bindselection?.(event);
+	}, [bindselection, control.handleSelectionChange]);
+	const handleTextareaRootTap = React.useCallback((event) => {
+		"background only";
+		if (event.target.uid !== event.currentTarget.uid) return;
+		control.focusNativeControl();
+	}, [control.focusNativeControl]);
+	if (control.readOnly) {
+		const value = control.context.value;
+		const isPlaceholder = value === "";
+		return <text ref={control.mergedRef} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} bindlayoutchange={props.bindlayoutchange} main-thread:bindlayoutchange={props["main-thread:bindlayoutchange"]} className={clsx(classes.value, classes.textareaValue, classes.textareaFixed, className)} style={getReadOnlyTextStyle({
+			style: props.style,
+			disabled: control.disabled,
+			placeholder: isPlaceholder,
+			multiline: true
+		})} {...getAccessibilityProps(props)}>
+          {isPlaceholder ? props.placeholder : value}
+        </text>;
+	}
+	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, autoresize ? classes.textareaNativeAutoresize : classes.textareaFixed, autoresize && isAndroid && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={bindlayoutchange} {...nativeProps} />;
+	if (!autoresize) return textarea;
+	return <view className={clsx(classes.textareaRoot, !isAndroid && classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
+        {textarea}
+      </view>;
+});
+TextFieldTextarea.displayName = "TextFieldTextarea";
+var TextFieldPrefixIcon = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { className, ...otherProps } = props;
+	return <InternalIcon ref={ref} className={clsx(classes.prefixIcon, className)} {...otherProps} />;
+});
+TextFieldPrefixIcon.displayName = "TextFieldPrefixIcon";
+var TextFieldPrefixText = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { children, className, ...nativeProps } = props;
+	return <text {...ref ? { ref } : {}} className={clsx(classes.prefixText, className)} {...nativeProps}>
+        {children}
+      </text>;
+});
+TextFieldPrefixText.displayName = "TextFieldPrefixText";
+var TextFieldSuffixIcon = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { className, ...otherProps } = props;
+	return <InternalIcon ref={ref} className={clsx(classes.suffixIcon, className)} {...otherProps} />;
+});
+TextFieldSuffixIcon.displayName = "TextFieldSuffixIcon";
+var TextFieldSuffixText = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { children, className, ...nativeProps } = props;
+	return <text {...ref ? { ref } : {}} className={clsx(classes.suffixText, className)} {...nativeProps}>
+        {children}
+      </text>;
+});
+TextFieldSuffixText.displayName = "TextFieldSuffixText";
+//#endregion
+export { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea };

package/lib/components/TextField/TextField.namespace.d.ts

@@ -0,0 +1,2 @@
+export { TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldRoot as Root, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, TextFieldInput as Input, TextFieldTextarea as Textarea, type TextFieldPrefixIconProps as PrefixIconProps, type TextFieldPrefixTextProps as PrefixTextProps, type TextFieldRootProps as RootProps, type TextFieldSuffixIconProps as SuffixIconProps, type TextFieldSuffixTextProps as SuffixTextProps, type TextFieldInputProps as InputProps, type TextFieldTextareaProps as TextareaProps, } from './TextField';
+//# sourceMappingURL=TextField.namespace.d.ts.map

package/lib/components/TextField/TextField.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,aAAa,IAAI,IAAI,EACrB,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,cAAc,IAAI,KAAK,EACvB,iBAAiB,IAAI,QAAQ,EAC7B,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,sBAAsB,IAAI,aAAa,GAC7C,MAAM,aAAa,CAAC"}

package/lib/components/TextField/TextField.namespace.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from "./TextField.jsx";
+//#region src/components/TextField/TextField.namespace.ts
+var TextField_namespace_exports = /* @__PURE__ */ __exportAll({
+	Input: () => TextFieldInput,
+	PrefixIcon: () => TextFieldPrefixIcon,
+	PrefixText: () => TextFieldPrefixText,
+	Root: () => TextFieldRoot,
+	SuffixIcon: () => TextFieldSuffixIcon,
+	SuffixText: () => TextFieldSuffixText,
+	Textarea: () => TextFieldTextarea
+});
+//#endregion
+export { TextField_namespace_exports };

package/lib/components/TextField/context.d.ts

@@ -0,0 +1,22 @@
+import { NodesRef } from '@lynx-js/types';
+import * as React from "@lynx-js/react";
+/** iOS와 Android의 32비트 `maxlength` setter에서 사용하는 무제한 센티널. */
+export declare const NATIVE_TEXT_MAX_LENGTH_UNLIMITED = 2147483647;
+export interface TextFieldContextValue {
+    rootRef: React.RefObject<NodesRef | null>;
+    value: string;
+    /** @internal controlled 입력의 native value 조정 여부를 판별한다. */
+    controlled: boolean;
+    nativeInsertionMaxLength?: number;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    name?: string;
+    focused: boolean;
+    setValue: (value: string) => void;
+    setFocused: (focused: boolean) => void;
+}
+export declare const TextFieldContext: React.Context<TextFieldContextValue | null>;
+export declare function useTextFieldContext(): TextFieldContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/components/TextField/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,4DAA4D;AAC5D,eAAO,MAAM,gCAAgC,aAAgB,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,UAAU,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,gBAAgB,6CAA0D,CAAC;AAExF,wBAAgB,mBAAmB,IAAI,qBAAqB,CAQ3D"}

package/lib/components/TextField/context.js

@@ -0,0 +1,7 @@
+import * as React from "@lynx-js/react";
+//#region src/components/TextField/context.ts
+/** iOS와 Android의 32비트 `maxlength` setter에서 사용하는 무제한 센티널. */
+var NATIVE_TEXT_MAX_LENGTH_UNLIMITED = 2147483647;
+var TextFieldContext = React.createContext(null);
+//#endregion
+export { NATIVE_TEXT_MAX_LENGTH_UNLIMITED, TextFieldContext };

package/lib/components/TextField/index.d.ts

@@ -0,0 +1,4 @@
+export { TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldInput, TextFieldTextarea, type TextFieldPrefixIconProps, type TextFieldPrefixTextProps, type TextFieldRootProps, type TextFieldSuffixIconProps, type TextFieldSuffixTextProps, type TextFieldInputProps, type TextFieldTextareaProps, } from './TextField';
+export { useTextFieldWithGraphemes, type UseTextFieldWithGraphemesParams, } from './useTextFieldWithGraphemes';
+export * as TextField from './TextField.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/TextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,GAC5B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,yBAAyB,EACzB,KAAK,+BAA+B,GACrC,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC"}

package/lib/components/TextField/useTextFieldWithGraphemes.d.ts

@@ -0,0 +1,24 @@
+export interface UseTextFieldWithGraphemesParams {
+    maxGraphemeCount?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (values: {
+        value: string;
+        graphemes: string[];
+        slicedValue: string;
+        slicedGraphemes: string[];
+    }) => void;
+}
+export declare function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue, onValueChange, }: UseTextFieldWithGraphemesParams): {
+    textFieldRootProps: {
+        value: string;
+        onValueChange: (nextValue: string) => void;
+        nativeInsertionMaxLength: number | undefined;
+    };
+    counterProps: {
+        current: number;
+        max: number;
+    };
+    graphemes: string[];
+};
+//# sourceMappingURL=useTextFieldWithGraphemes.d.ts.map

package/lib/components/TextField/useTextFieldWithGraphemes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextFieldWithGraphemes.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,EAAE,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,CAAC;KAC3B,KAAK,IAAI,CAAC;CACZ;AAaD,wBAAgB,yBAAyB,CAAC,EACxC,gBAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,GACd,EAAE,+BAA+B;;;mCAOlB,MAAM;;;;;;;;EAqCrB"}