@xaui/native 0.0.21 → 0.0.23

package/dist/input/index.cjs

@@ -34,6 +34,7 @@ __export(input_exports, {
   DateTimeInput: () => DateTimeInput,
   NumberInput: () => NumberInput,
   OTPInput: () => OTPInput,
+  TextArea: () => TextArea,
   TextInput: () => TextInput,
   TimeInput: () => TimeInput,
   getDateOrder: () => getDateOrder
@@ -360,98 +361,115 @@ var TextInput = (0, import_react7.forwardRef)(
           ]
         },
         label
-      ), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Pressable, { onPress: handleWrapperPress, disabled: isDisabled || isReadOnly }, /* @__PURE__ */ import_react7.default.createElement(
-        import_react_native5.Animated.View,
+      ), /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Pressable,
         {
-          style: [
-            styles.inputWrapper,
-            {
-              minHeight: sizeStyles.minHeight,
-              paddingVertical: sizeStyles.paddingVertical,
-              paddingHorizontal: sizeStyles.paddingHorizontal,
-              gap: sizeStyles.slotGap,
-              backgroundColor: variantStyles.container.backgroundColor,
-              borderWidth: variant === "underlined" ? 0 : variantStyles.container.borderWidth,
-              ...variant === "underlined" && {
-                borderBottomWidth: variantStyles.container.borderBottomWidth
-              },
-              borderRadius: variant === "underlined" ? 0 : radiusStyles.borderRadius,
-              ...variant === "underlined" ? {
-                borderBottomColor: borderAnimation.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [
-                    variantStyles.unfocusedBorderColor,
-                    variantStyles.focusedBorderColor
-                  ]
-                })
-              } : {
-                borderColor: borderAnimation.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [
-                    variantStyles.unfocusedBorderColor,
-                    variantStyles.focusedBorderColor
-                  ]
-                })
-              }
-            },
-            variant === "underlined" && styles.underlinedWrapper,
-            customAppearance?.inputWrapper
-          ]
+          onPress: handleWrapperPress,
+          disabled: isDisabled || isReadOnly
         },
-        startContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, startContent),
-        /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: { flex: 1, gap: labelPlacement === "inside" && label ? 2 : 0 } }, label && labelPlacement === "inside" && /* @__PURE__ */ import_react7.default.createElement(
-          import_react_native5.Text,
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Animated.View,
           {
             style: [
-              styles.label,
+              styles.inputWrapper,
               {
-                color: variantStyles.labelColor,
-                fontSize: sizeStyles.helperSize,
-                paddingBottom: 2
+                minHeight: sizeStyles.minHeight,
+                paddingVertical: sizeStyles.paddingVertical,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                gap: sizeStyles.slotGap,
+                backgroundColor: variantStyles.container.backgroundColor,
+                borderWidth: variant === "underlined" ? 0 : variantStyles.container.borderWidth,
+                ...variant === "underlined" && {
+                  borderBottomWidth: variantStyles.container.borderBottomWidth
+                },
+                borderRadius: variant === "underlined" ? 0 : radiusStyles.borderRadius,
+                ...variant === "underlined" ? {
+                  borderBottomColor: borderAnimation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                      variantStyles.unfocusedBorderColor,
+                      variantStyles.focusedBorderColor
+                    ]
+                  })
+                } : {
+                  borderColor: borderAnimation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                      variantStyles.unfocusedBorderColor,
+                      variantStyles.focusedBorderColor
+                    ]
+                  })
+                }
               },
-              customAppearance?.label
+              variant === "underlined" && styles.underlinedWrapper,
+              customAppearance?.inputWrapper
             ]
           },
-          label
-        ), /* @__PURE__ */ import_react7.default.createElement(
-          import_react_native5.TextInput,
-          {
-            ref: typeof forwardedRef === "function" ? internalRef : forwardedRef || internalRef,
-            value: inputValue,
-            onChangeText: handleChangeText,
-            onFocus: (event) => {
-              setIsFocused(true);
-              onFocus?.(event);
-            },
-            onBlur: (event) => {
-              setIsFocused(false);
-              onBlur?.(event);
+          startContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, startContent),
+          /* @__PURE__ */ import_react7.default.createElement(
+            import_react_native5.View,
+            {
+              style: {
+                flex: 1,
+                gap: labelPlacement === "inside" && label ? 2 : 0
+              }
             },
-            editable,
-            secureTextEntry,
-            placeholderTextColor: variantStyles.placeholderColor,
-            style: [
-              styles.input,
+            label && labelPlacement === "inside" && /* @__PURE__ */ import_react7.default.createElement(
+              import_react_native5.Text,
               {
-                color: variantStyles.textColor,
-                fontSize: sizeStyles.fontSize
+                style: [
+                  styles.label,
+                  {
+                    color: variantStyles.labelColor,
+                    fontSize: sizeStyles.helperSize,
+                    paddingBottom: 2
+                  },
+                  customAppearance?.label
+                ]
               },
-              customAppearance?.input
-            ],
-            ...nativeProps
-          }
-        )),
-        showClearButton ? /* @__PURE__ */ import_react7.default.createElement(
-          import_react_native5.Pressable,
-          {
-            onPress: handleClear,
-            accessibilityLabel: "Clear input",
-            accessibilityRole: "button",
-            style: styles.clearButton
-          },
-          /* @__PURE__ */ import_react7.default.createElement(import_icons.CloseIcon, { size: 16, color: variantStyles.placeholderColor })
-        ) : endContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, endContent)
-      ))),
+              label
+            ),
+            /* @__PURE__ */ import_react7.default.createElement(
+              import_react_native5.TextInput,
+              {
+                ref: typeof forwardedRef === "function" ? internalRef : forwardedRef || internalRef,
+                value: inputValue,
+                onChangeText: handleChangeText,
+                onFocus: (event) => {
+                  setIsFocused(true);
+                  onFocus?.(event);
+                },
+                onBlur: (event) => {
+                  setIsFocused(false);
+                  onBlur?.(event);
+                },
+                editable,
+                secureTextEntry,
+                placeholderTextColor: variantStyles.placeholderColor,
+                style: [
+                  styles.input,
+                  {
+                    color: variantStyles.textColor,
+                    fontSize: sizeStyles.fontSize
+                  },
+                  customAppearance?.input
+                ],
+                ...nativeProps
+              }
+            )
+          ),
+          showClearButton ? /* @__PURE__ */ import_react7.default.createElement(
+            import_react_native5.Pressable,
+            {
+              onPress: handleClear,
+              accessibilityLabel: "Clear input",
+              accessibilityRole: "button",
+              style: styles.clearButton
+            },
+            /* @__PURE__ */ import_react7.default.createElement(import_icons.CloseIcon, { size: 16, color: variantStyles.placeholderColor })
+          ) : endContent && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.slot }, endContent)
+        )
+      )),
       helperText && /* @__PURE__ */ import_react7.default.createElement(
         import_react_native5.Text,
         {
@@ -471,9 +489,71 @@ var TextInput = (0, import_react7.forwardRef)(
 );
 TextInput.displayName = "TextInput";
 
-// src/components/input/date-time-input.tsx
+// src/components/input/textarea.tsx
 var import_react8 = __toESM(require("react"), 1);
 
+// src/components/input/textarea.style.ts
+var import_react_native6 = require("react-native");
+var textAreaStyles = import_react_native6.StyleSheet.create({
+  inputWrapper: {
+    alignItems: "flex-start"
+  },
+  input: {
+    textAlignVertical: "top"
+  }
+});
+
+// src/components/input/textarea.tsx
+var TextArea = ({
+  minRows = 3,
+  maxRows,
+  size = "md",
+  customAppearance,
+  numberOfLines,
+  textAlignVertical,
+  scrollEnabled,
+  ...props
+}) => {
+  const sizeStyles = useTextInputSizeStyles(size);
+  const lineHeight = Math.round(sizeStyles.fontSize * 1.35);
+  const verticalPadding = sizeStyles.paddingVertical * 2;
+  const normalizedMaxRows = typeof maxRows === "number" ? Math.max(maxRows, minRows) : void 0;
+  const minHeight = minRows * lineHeight + verticalPadding;
+  const maxHeight = typeof normalizedMaxRows === "number" ? normalizedMaxRows * lineHeight + verticalPadding : void 0;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    TextInput,
+    {
+      ...props,
+      size,
+      multiline: true,
+      numberOfLines: numberOfLines ?? minRows,
+      textAlignVertical: textAlignVertical ?? "top",
+      scrollEnabled: scrollEnabled ?? !!maxHeight,
+      customAppearance: {
+        ...customAppearance,
+        inputWrapper: [
+          textAreaStyles.inputWrapper,
+          {
+            minHeight,
+            ...maxHeight ? { maxHeight } : {}
+          },
+          customAppearance?.inputWrapper
+        ],
+        input: [
+          textAreaStyles.input,
+          {
+            lineHeight
+          },
+          customAppearance?.input
+        ]
+      }
+    }
+  );
+};
+
+// src/components/input/date-time-input.tsx
+var import_react9 = __toESM(require("react"), 1);
+
 // src/components/input/date-time-input.hook.ts
 var YMD_LOCALES = ["ja", "zh", "ko", "hu", "lt", "mn"];
 var MDY_LOCALES = ["en-US", "en-PH", "en-BZ"];
@@ -581,7 +661,7 @@ var getDateTimeMaxLength = (separator, granularity, hourCycle) => {
 };
 
 // src/components/input/date-time-input.tsx
-var DateInput = (0, import_react8.forwardRef)(
+var DateInput = (0, import_react9.forwardRef)(
   ({
     separator = "-",
     dateOrder,
@@ -592,11 +672,11 @@ var DateInput = (0, import_react8.forwardRef)(
     onValueChange,
     ...props
   }, ref) => {
-    const resolvedOrder = (0, import_react8.useMemo)(
+    const resolvedOrder = (0, import_react9.useMemo)(
       () => dateOrder ?? getDateOrder(locale),
       [dateOrder, locale]
     );
-    const handleChangeText = (0, import_react8.useCallback)(
+    const handleChangeText = (0, import_react9.useCallback)(
       (text) => {
         const formatted = formatDateInput(text, resolvedOrder, separator);
         onChangeText?.(formatted);
@@ -604,7 +684,7 @@ var DateInput = (0, import_react8.forwardRef)(
       },
       [resolvedOrder, separator, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(
       TextInput,
       {
         ref,
@@ -619,7 +699,7 @@ var DateInput = (0, import_react8.forwardRef)(
     );
   }
 );
-var TimeInput = (0, import_react8.forwardRef)(
+var TimeInput = (0, import_react9.forwardRef)(
   ({
     granularity = "minute",
     hourCycle = 24,
@@ -629,7 +709,7 @@ var TimeInput = (0, import_react8.forwardRef)(
     onValueChange,
     ...props
   }, ref) => {
-    const handleChangeText = (0, import_react8.useCallback)(
+    const handleChangeText = (0, import_react9.useCallback)(
       (text) => {
         const formatted = formatTimeInput(text, granularity, hourCycle);
         onChangeText?.(formatted);
@@ -637,7 +717,7 @@ var TimeInput = (0, import_react8.forwardRef)(
       },
       [granularity, hourCycle, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(
       TextInput,
       {
         ref,
@@ -652,7 +732,7 @@ var TimeInput = (0, import_react8.forwardRef)(
     );
   }
 );
-var DateTimeInput = (0, import_react8.forwardRef)(
+var DateTimeInput = (0, import_react9.forwardRef)(
   ({
     separator = "-",
     dateOrder,
@@ -665,11 +745,11 @@ var DateTimeInput = (0, import_react8.forwardRef)(
     onValueChange,
     ...props
   }, ref) => {
-    const resolvedOrder = (0, import_react8.useMemo)(
+    const resolvedOrder = (0, import_react9.useMemo)(
       () => dateOrder ?? getDateOrder(locale),
       [dateOrder, locale]
     );
-    const handleChangeText = (0, import_react8.useCallback)(
+    const handleChangeText = (0, import_react9.useCallback)(
       (text) => {
         const formatted = formatDateTimeInput(
           text,
@@ -683,7 +763,7 @@ var DateTimeInput = (0, import_react8.forwardRef)(
       },
       [resolvedOrder, separator, granularity, hourCycle, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(
       TextInput,
       {
         ref,
@@ -703,18 +783,18 @@ TimeInput.displayName = "TimeInput";
 DateTimeInput.displayName = "DateTimeInput";
 
 // src/components/input/otp-input.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_react_native7 = require("react-native");
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
 
 // src/components/input/otp-input.hook.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var segmentSizeMap = {
   sm: { width: 40, height: 40, fontSize: 16 },
   md: { width: 48, height: 48, fontSize: 20 },
   lg: { width: 56, height: 56, fontSize: 24 }
 };
 var useOTPSegmentSizeStyles = (size) => {
-  return (0, import_react9.useMemo)(() => segmentSizeMap[size], [size]);
+  return (0, import_react10.useMemo)(() => segmentSizeMap[size], [size]);
 };
 var useOTPInputState = ({
   length,
@@ -725,17 +805,15 @@ var useOTPInputState = ({
   allowedKeys
 }) => {
   const isControlled = typeof value === "string";
-  const [internalValue, setInternalValue] = (0, import_react9.useState)(
-    defaultValue ?? ""
-  );
-  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(-1);
-  const refs = (0, import_react9.useRef)([]);
+  const [internalValue, setInternalValue] = (0, import_react10.useState)(defaultValue ?? "");
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
+  const refs = (0, import_react10.useRef)([]);
   const currentValue = isControlled ? value : internalValue;
-  const segments = (0, import_react9.useMemo)(() => {
+  const segments = (0, import_react10.useMemo)(() => {
     const chars = currentValue.split("");
     return Array.from({ length }, (_, i) => chars[i] ?? "");
   }, [currentValue, length]);
-  const updateValue = (0, import_react9.useCallback)(
+  const updateValue = (0, import_react10.useCallback)(
     (newValue) => {
       if (!isControlled) {
         setInternalValue(newValue);
@@ -747,7 +825,7 @@ var useOTPInputState = ({
     },
     [isControlled, length, onValueChange, onComplete]
   );
-  const handleSegmentChange = (0, import_react9.useCallback)(
+  const handleSegmentChange = (0, import_react10.useCallback)(
     (index, text) => {
       if (!text) return;
       const char = text.slice(-1);
@@ -763,7 +841,7 @@ var useOTPInputState = ({
     },
     [allowedKeys, currentValue, length, updateValue]
   );
-  const handleSegmentKeyPress = (0, import_react9.useCallback)(
+  const handleSegmentKeyPress = (0, import_react10.useCallback)(
     (index, key) => {
       if (key !== "Backspace") return;
       const chars = currentValue.split("");
@@ -781,10 +859,10 @@ var useOTPInputState = ({
     },
     [currentValue, length, updateValue]
   );
-  const handleSegmentFocus = (0, import_react9.useCallback)((index) => {
+  const handleSegmentFocus = (0, import_react10.useCallback)((index) => {
     setActiveIndex(index);
   }, []);
-  const handleSegmentBlur = (0, import_react9.useCallback)(() => {
+  const handleSegmentBlur = (0, import_react10.useCallback)(() => {
     setActiveIndex(-1);
   }, []);
   return {
@@ -799,8 +877,8 @@ var useOTPInputState = ({
 };
 
 // src/components/input/otp-input.style.ts
-var import_react_native6 = require("react-native");
-var otpStyles = import_react_native6.StyleSheet.create({
+var import_react_native7 = require("react-native");
+var otpStyles = import_react_native7.StyleSheet.create({
   container: {
     gap: 6
   },
@@ -857,29 +935,29 @@ var OTPSegment = ({
   onChangeText,
   onKeyPress,
   onFocus,
-  onBlur
+  onBlur,
+  onPress
 }) => {
-  const borderAnimation = (0, import_react10.useRef)(new import_react_native7.Animated.Value(0)).current;
-  (0, import_react10.useEffect)(() => {
-    import_react_native7.Animated.timing(borderAnimation, {
+  const borderAnimation = (0, import_react11.useRef)(new import_react_native8.Animated.Value(0)).current;
+  (0, import_react11.useEffect)(() => {
+    import_react_native8.Animated.timing(borderAnimation, {
       toValue: isActive ? 1 : 0,
       duration: 200,
       useNativeDriver: false
     }).start();
   }, [borderAnimation, isActive]);
-  return /* @__PURE__ */ import_react10.default.createElement(
-    import_react_native7.Pressable,
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native8.Pressable,
     {
       onPress: () => {
         if (!isDisabled) {
-          const inputEl = inputRef;
-          if (typeof inputEl !== "function") return;
+          onPress();
         }
       },
       disabled: isDisabled
     },
-    /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native7.Animated.View,
+    /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native8.Animated.View,
       {
         style: [
           otpStyles.segment,
@@ -900,16 +978,16 @@ var OTPSegment = ({
           customSegment?.segment
         ]
       },
-      char && isSecured ? /* @__PURE__ */ import_react10.default.createElement(
-        import_react_native7.View,
+      char && isSecured ? /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native8.View,
         {
           style: [
             otpStyles.securedDot,
             { backgroundColor: variantStyles.textColor }
           ]
         }
-      ) : /* @__PURE__ */ import_react10.default.createElement(
-        import_react_native7.Text,
+      ) : /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native8.Text,
         {
           style: [
             otpStyles.segmentText,
@@ -922,8 +1000,8 @@ var OTPSegment = ({
         },
         char
       ),
-      /* @__PURE__ */ import_react10.default.createElement(
-        import_react_native7.TextInput,
+      /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native8.TextInput,
         {
           ref: inputRef,
           style: otpStyles.hiddenInput,
@@ -995,8 +1073,20 @@ var OTPInput = ({
     isInvalid,
     isDisabled
   });
-  return /* @__PURE__ */ import_react10.default.createElement(
-    import_react_native7.View,
+  const focusSegment = (0, import_react11.useCallback)(
+    (index) => {
+      if (isDisabled) return;
+      refs.current[index]?.focus();
+    },
+    [isDisabled, refs]
+  );
+  const handleContainerPress = (0, import_react11.useCallback)(() => {
+    const firstEmptyIndex = segments.findIndex((segment) => !segment);
+    const targetIndex = firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+    focusSegment(targetIndex);
+  }, [focusSegment, length, segments]);
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native8.View,
     {
       style: [
         otpStyles.container,
@@ -1005,8 +1095,8 @@ var OTPInput = ({
         customAppearance?.container
       ]
     },
-    label && /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native7.Text,
+    label && /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native8.Text,
       {
         style: [
           otpStyles.label,
@@ -1019,12 +1109,14 @@ var OTPInput = ({
       },
       label
     ),
-    /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native7.View,
+    /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native8.Pressable,
       {
+        onPress: handleContainerPress,
+        disabled: isDisabled,
         style: [otpStyles.segmentContainer, customAppearance?.segmentContainer]
       },
-      segments.map((char, index) => /* @__PURE__ */ import_react10.default.createElement(
+      segments.map((char, index) => /* @__PURE__ */ import_react11.default.createElement(
         OTPSegment,
         {
           key: index,
@@ -1043,12 +1135,13 @@ var OTPInput = ({
           onChangeText: (text) => handleSegmentChange(index, text),
           onKeyPress: (key) => handleSegmentKeyPress(index, key),
           onFocus: () => handleSegmentFocus(index),
-          onBlur: handleSegmentBlur
+          onBlur: handleSegmentBlur,
+          onPress: () => focusSegment(index)
         }
       ))
     ),
-    helperText && /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native7.Text,
+    helperText && /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native8.Text,
       {
         style: [
           otpStyles.helperText,
@@ -1063,13 +1156,13 @@ var OTPInput = ({
 OTPInput.displayName = "OTPInput";
 
 // src/components/input/number-input.tsx
-var import_react12 = __toESM(require("react"), 1);
-var import_react_native9 = require("react-native");
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
 var import_icons2 = require("@xaui/icons");
 var import_core3 = require("@xaui/core");
 
 // src/components/input/number-input.hook.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useNumberInputState = ({
   value,
   defaultValue,
@@ -1081,23 +1174,23 @@ var useNumberInputState = ({
   locale
 }) => {
   const isControlled = typeof value === "number";
-  const [internalValue, setInternalValue] = (0, import_react11.useState)(
+  const [internalValue, setInternalValue] = (0, import_react12.useState)(
     defaultValue
   );
-  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
-  const [rawText, setRawText] = (0, import_react11.useState)("");
+  const [isEditing, setIsEditing] = (0, import_react12.useState)(false);
+  const [rawText, setRawText] = (0, import_react12.useState)("");
   const currentValue = isControlled ? value : internalValue;
-  const formatter = (0, import_react11.useMemo)(() => {
+  const formatter = (0, import_react12.useMemo)(() => {
     if (!formatOptions) return null;
     return new Intl.NumberFormat(locale, formatOptions);
   }, [formatOptions, locale]);
-  const displayValue = (0, import_react11.useMemo)(() => {
+  const displayValue = (0, import_react12.useMemo)(() => {
     if (isEditing) return rawText;
     if (currentValue === void 0) return "";
     if (formatter) return formatter.format(currentValue);
     return String(currentValue);
   }, [currentValue, formatter, isEditing, rawText]);
-  const updateValue = (0, import_react11.useCallback)(
+  const updateValue = (0, import_react12.useCallback)(
     (newValue) => {
       if (!isControlled) {
         setInternalValue(newValue);
@@ -1106,7 +1199,7 @@ var useNumberInputState = ({
     },
     [isControlled, onValueChange]
   );
-  const clamp = (0, import_react11.useCallback)(
+  const clamp = (0, import_react12.useCallback)(
     (num) => {
       let clamped = num;
       if (minValue !== void 0 && clamped < minValue) clamped = minValue;
@@ -1115,7 +1208,7 @@ var useNumberInputState = ({
     },
     [minValue, maxValue]
   );
-  const handleTextChange = (0, import_react11.useCallback)(
+  const handleTextChange = (0, import_react12.useCallback)(
     (text) => {
       setRawText(text);
       if (text === "" || text === "-") return;
@@ -1125,11 +1218,11 @@ var useNumberInputState = ({
     },
     [updateValue]
   );
-  const handleFocus = (0, import_react11.useCallback)(() => {
+  const handleFocus = (0, import_react12.useCallback)(() => {
     setIsEditing(true);
     setRawText(currentValue !== void 0 ? String(currentValue) : "");
   }, [currentValue]);
-  const handleBlur = (0, import_react11.useCallback)(() => {
+  const handleBlur = (0, import_react12.useCallback)(() => {
     setIsEditing(false);
     if (rawText === "" || rawText === "-") {
       updateValue(void 0);
@@ -1142,18 +1235,18 @@ var useNumberInputState = ({
     }
     updateValue(clamp(parsed));
   }, [rawText, clamp, updateValue]);
-  const handleClear = (0, import_react11.useCallback)(() => {
+  const handleClear = (0, import_react12.useCallback)(() => {
     setRawText("");
     updateValue(void 0);
   }, [updateValue]);
   const canIncrement = maxValue === void 0 || (currentValue ?? 0) + step <= maxValue;
   const canDecrement = minValue === void 0 || (currentValue ?? 0) - step >= minValue;
-  const handleIncrement = (0, import_react11.useCallback)(() => {
+  const handleIncrement = (0, import_react12.useCallback)(() => {
     const base = currentValue ?? 0;
     const newValue = clamp(base + step);
     updateValue(newValue);
   }, [currentValue, step, clamp, updateValue]);
-  const handleDecrement = (0, import_react11.useCallback)(() => {
+  const handleDecrement = (0, import_react12.useCallback)(() => {
     const base = currentValue ?? 0;
     const newValue = clamp(base - step);
     updateValue(newValue);
@@ -1172,8 +1265,8 @@ var useNumberInputState = ({
 };
 
 // src/components/input/number-input.style.ts
-var import_react_native8 = require("react-native");
-var numberInputStyles = import_react_native8.StyleSheet.create({
+var import_react_native9 = require("react-native");
+var numberInputStyles = import_react_native9.StyleSheet.create({
   stepperContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -1192,7 +1285,7 @@ var numberInputStyles = import_react_native8.StyleSheet.create({
 });
 
 // src/components/input/number-input.tsx
-var NumberInput = (0, import_react12.forwardRef)(
+var NumberInput = (0, import_react13.forwardRef)(
   ({
     value,
     defaultValue,
@@ -1240,16 +1333,16 @@ var NumberInput = (0, import_react12.forwardRef)(
       locale
     });
     const iconColor = (0, import_core3.withOpacity)(theme.colors.foreground, 0.7);
-    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ import_react12.default.createElement(
-      import_react_native9.View,
+    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native10.View,
       {
         style: [
           numberInputStyles.stepperContainer,
           customAppearance?.stepperContainer
         ]
       },
-      /* @__PURE__ */ import_react12.default.createElement(
-        import_react_native9.Pressable,
+      /* @__PURE__ */ import_react13.default.createElement(
+        import_react_native10.Pressable,
         {
           onPress: handleDecrement,
           disabled: isDisabled || !canDecrement,
@@ -1261,10 +1354,10 @@ var NumberInput = (0, import_react12.forwardRef)(
             customAppearance?.stepperButton
           ]
         },
-        /* @__PURE__ */ import_react12.default.createElement(import_icons2.RemoveIcon, { size: 16, color: iconColor })
+        /* @__PURE__ */ import_react13.default.createElement(import_icons2.RemoveIcon, { size: 16, color: iconColor })
       ),
-      /* @__PURE__ */ import_react12.default.createElement(
-        import_react_native9.Pressable,
+      /* @__PURE__ */ import_react13.default.createElement(
+        import_react_native10.Pressable,
         {
           onPress: handleIncrement,
           disabled: isDisabled || !canIncrement,
@@ -1276,10 +1369,10 @@ var NumberInput = (0, import_react12.forwardRef)(
             customAppearance?.stepperButton
           ]
         },
-        /* @__PURE__ */ import_react12.default.createElement(import_icons2.AddIcon, { size: 16, color: iconColor })
+        /* @__PURE__ */ import_react13.default.createElement(import_icons2.AddIcon, { size: 16, color: iconColor })
       )
     );
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement(
       TextInput,
       {
         ref,
@@ -1315,6 +1408,7 @@ NumberInput.displayName = "NumberInput";
   DateTimeInput,
   NumberInput,
   OTPInput,
+  TextArea,
   TextInput,
   TimeInput,
   getDateOrder