@xaui/native 0.0.21 → 0.0.23

package/dist/input/index.js

@@ -288,98 +288,115 @@ var TextInput = forwardRef(
           ]
         },
         label
-      ), /* @__PURE__ */ React.createElement(Pressable, { onPress: handleWrapperPress, disabled: isDisabled || isReadOnly }, /* @__PURE__ */ React.createElement(
-        Animated.View,
+      ), /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(View, { style: styles.slot }, startContent),
-        /* @__PURE__ */ React.createElement(View, { style: { flex: 1, gap: labelPlacement === "inside" && label ? 2 : 0 } }, label && labelPlacement === "inside" && /* @__PURE__ */ React.createElement(
-          Text,
+        /* @__PURE__ */ React.createElement(
+          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__ */ React.createElement(
-          RNTextInput,
-          {
-            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__ */ React.createElement(View, { style: styles.slot }, startContent),
+          /* @__PURE__ */ React.createElement(
+            View,
+            {
+              style: {
+                flex: 1,
+                gap: labelPlacement === "inside" && label ? 2 : 0
+              }
             },
-            editable,
-            secureTextEntry,
-            placeholderTextColor: variantStyles.placeholderColor,
-            style: [
-              styles.input,
+            label && labelPlacement === "inside" && /* @__PURE__ */ React.createElement(
+              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__ */ React.createElement(
-          Pressable,
-          {
-            onPress: handleClear,
-            accessibilityLabel: "Clear input",
-            accessibilityRole: "button",
-            style: styles.clearButton
-          },
-          /* @__PURE__ */ React.createElement(CloseIcon, { size: 16, color: variantStyles.placeholderColor })
-        ) : endContent && /* @__PURE__ */ React.createElement(View, { style: styles.slot }, endContent)
-      ))),
+              label
+            ),
+            /* @__PURE__ */ React.createElement(
+              RNTextInput,
+              {
+                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__ */ React.createElement(
+            Pressable,
+            {
+              onPress: handleClear,
+              accessibilityLabel: "Clear input",
+              accessibilityRole: "button",
+              style: styles.clearButton
+            },
+            /* @__PURE__ */ React.createElement(CloseIcon, { size: 16, color: variantStyles.placeholderColor })
+          ) : endContent && /* @__PURE__ */ React.createElement(View, { style: styles.slot }, endContent)
+        )
+      )),
       helperText && /* @__PURE__ */ React.createElement(
         Text,
         {
@@ -399,8 +416,70 @@ var TextInput = forwardRef(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/input/textarea.tsx
+import React2 from "react";
+
+// src/components/input/textarea.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var textAreaStyles = StyleSheet2.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__ */ React2.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
-import React2, { forwardRef as forwardRef2, useCallback, useMemo as useMemo3 } from "react";
+import React3, { forwardRef as forwardRef2, useCallback, useMemo as useMemo3 } from "react";
 
 // src/components/input/date-time-input.hook.ts
 var YMD_LOCALES = ["ja", "zh", "ko", "hu", "lt", "mn"];
@@ -532,7 +611,7 @@ var DateInput = forwardRef2(
       },
       [resolvedOrder, separator, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       TextInput,
       {
         ref,
@@ -565,7 +644,7 @@ var TimeInput = forwardRef2(
       },
       [granularity, hourCycle, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       TextInput,
       {
         ref,
@@ -611,7 +690,7 @@ var DateTimeInput = forwardRef2(
       },
       [resolvedOrder, separator, granularity, hourCycle, onChangeText, onValueChange]
     );
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       TextInput,
       {
         ref,
@@ -631,7 +710,7 @@ TimeInput.displayName = "TimeInput";
 DateTimeInput.displayName = "DateTimeInput";
 
 // src/components/input/otp-input.tsx
-import React3, { useEffect as useEffect2, useRef as useRef3 } from "react";
+import React4, { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
 import {
   Animated as Animated2,
   Pressable as Pressable2,
@@ -659,9 +738,7 @@ var useOTPInputState = ({
   allowedKeys
 }) => {
   const isControlled = typeof value === "string";
-  const [internalValue, setInternalValue] = useState2(
-    defaultValue ?? ""
-  );
+  const [internalValue, setInternalValue] = useState2(defaultValue ?? "");
   const [activeIndex, setActiveIndex] = useState2(-1);
   const refs = useRef2([]);
   const currentValue = isControlled ? value : internalValue;
@@ -733,8 +810,8 @@ var useOTPInputState = ({
 };
 
 // src/components/input/otp-input.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var otpStyles = StyleSheet2.create({
+import { StyleSheet as StyleSheet3 } from "react-native";
+var otpStyles = StyleSheet3.create({
   container: {
     gap: 6
   },
@@ -791,7 +868,8 @@ var OTPSegment = ({
   onChangeText,
   onKeyPress,
   onFocus,
-  onBlur
+  onBlur,
+  onPress
 }) => {
   const borderAnimation = useRef3(new Animated2.Value(0)).current;
   useEffect2(() => {
@@ -801,18 +879,17 @@ var OTPSegment = ({
       useNativeDriver: false
     }).start();
   }, [borderAnimation, isActive]);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     Pressable2,
     {
       onPress: () => {
         if (!isDisabled) {
-          const inputEl = inputRef;
-          if (typeof inputEl !== "function") return;
+          onPress();
         }
       },
       disabled: isDisabled
     },
-    /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(
       Animated2.View,
       {
         style: [
@@ -834,7 +911,7 @@ var OTPSegment = ({
           customSegment?.segment
         ]
       },
-      char && isSecured ? /* @__PURE__ */ React3.createElement(
+      char && isSecured ? /* @__PURE__ */ React4.createElement(
         View2,
         {
           style: [
@@ -842,7 +919,7 @@ var OTPSegment = ({
             { backgroundColor: variantStyles.textColor }
           ]
         }
-      ) : /* @__PURE__ */ React3.createElement(
+      ) : /* @__PURE__ */ React4.createElement(
         Text2,
         {
           style: [
@@ -856,7 +933,7 @@ var OTPSegment = ({
         },
         char
       ),
-      /* @__PURE__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         RNTextInput2,
         {
           ref: inputRef,
@@ -929,7 +1006,19 @@ var OTPInput = ({
     isInvalid,
     isDisabled
   });
-  return /* @__PURE__ */ React3.createElement(
+  const focusSegment = useCallback3(
+    (index) => {
+      if (isDisabled) return;
+      refs.current[index]?.focus();
+    },
+    [isDisabled, refs]
+  );
+  const handleContainerPress = useCallback3(() => {
+    const firstEmptyIndex = segments.findIndex((segment) => !segment);
+    const targetIndex = firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+    focusSegment(targetIndex);
+  }, [focusSegment, length, segments]);
+  return /* @__PURE__ */ React4.createElement(
     View2,
     {
       style: [
@@ -939,7 +1028,7 @@ var OTPInput = ({
         customAppearance?.container
       ]
     },
-    label && /* @__PURE__ */ React3.createElement(
+    label && /* @__PURE__ */ React4.createElement(
       Text2,
       {
         style: [
@@ -953,12 +1042,14 @@ var OTPInput = ({
       },
       label
     ),
-    /* @__PURE__ */ React3.createElement(
-      View2,
+    /* @__PURE__ */ React4.createElement(
+      Pressable2,
       {
+        onPress: handleContainerPress,
+        disabled: isDisabled,
         style: [otpStyles.segmentContainer, customAppearance?.segmentContainer]
       },
-      segments.map((char, index) => /* @__PURE__ */ React3.createElement(
+      segments.map((char, index) => /* @__PURE__ */ React4.createElement(
         OTPSegment,
         {
           key: index,
@@ -977,11 +1068,12 @@ var OTPInput = ({
           onChangeText: (text) => handleSegmentChange(index, text),
           onKeyPress: (key) => handleSegmentKeyPress(index, key),
           onFocus: () => handleSegmentFocus(index),
-          onBlur: handleSegmentBlur
+          onBlur: handleSegmentBlur,
+          onPress: () => focusSegment(index)
         }
       ))
     ),
-    helperText && /* @__PURE__ */ React3.createElement(
+    helperText && /* @__PURE__ */ React4.createElement(
       Text2,
       {
         style: [
@@ -997,13 +1089,13 @@ var OTPInput = ({
 OTPInput.displayName = "OTPInput";
 
 // src/components/input/number-input.tsx
-import React4, { forwardRef as forwardRef3 } from "react";
+import React5, { forwardRef as forwardRef3 } from "react";
 import { Pressable as Pressable3, View as View3 } from "react-native";
 import { AddIcon, RemoveIcon } from "@xaui/icons";
 import { withOpacity as withOpacity2 } from "@xaui/core";
 
 // src/components/input/number-input.hook.ts
-import { useCallback as useCallback3, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
 var useNumberInputState = ({
   value,
   defaultValue,
@@ -1031,7 +1123,7 @@ var useNumberInputState = ({
     if (formatter) return formatter.format(currentValue);
     return String(currentValue);
   }, [currentValue, formatter, isEditing, rawText]);
-  const updateValue = useCallback3(
+  const updateValue = useCallback4(
     (newValue) => {
       if (!isControlled) {
         setInternalValue(newValue);
@@ -1040,7 +1132,7 @@ var useNumberInputState = ({
     },
     [isControlled, onValueChange]
   );
-  const clamp = useCallback3(
+  const clamp = useCallback4(
     (num) => {
       let clamped = num;
       if (minValue !== void 0 && clamped < minValue) clamped = minValue;
@@ -1049,7 +1141,7 @@ var useNumberInputState = ({
     },
     [minValue, maxValue]
   );
-  const handleTextChange = useCallback3(
+  const handleTextChange = useCallback4(
     (text) => {
       setRawText(text);
       if (text === "" || text === "-") return;
@@ -1059,11 +1151,11 @@ var useNumberInputState = ({
     },
     [updateValue]
   );
-  const handleFocus = useCallback3(() => {
+  const handleFocus = useCallback4(() => {
     setIsEditing(true);
     setRawText(currentValue !== void 0 ? String(currentValue) : "");
   }, [currentValue]);
-  const handleBlur = useCallback3(() => {
+  const handleBlur = useCallback4(() => {
     setIsEditing(false);
     if (rawText === "" || rawText === "-") {
       updateValue(void 0);
@@ -1076,18 +1168,18 @@ var useNumberInputState = ({
     }
     updateValue(clamp(parsed));
   }, [rawText, clamp, updateValue]);
-  const handleClear = useCallback3(() => {
+  const handleClear = useCallback4(() => {
     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 = useCallback3(() => {
+  const handleIncrement = useCallback4(() => {
     const base = currentValue ?? 0;
     const newValue = clamp(base + step);
     updateValue(newValue);
   }, [currentValue, step, clamp, updateValue]);
-  const handleDecrement = useCallback3(() => {
+  const handleDecrement = useCallback4(() => {
     const base = currentValue ?? 0;
     const newValue = clamp(base - step);
     updateValue(newValue);
@@ -1106,8 +1198,8 @@ var useNumberInputState = ({
 };
 
 // src/components/input/number-input.style.ts
-import { StyleSheet as StyleSheet3 } from "react-native";
-var numberInputStyles = StyleSheet3.create({
+import { StyleSheet as StyleSheet4 } from "react-native";
+var numberInputStyles = StyleSheet4.create({
   stepperContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -1174,7 +1266,7 @@ var NumberInput = forwardRef3(
       locale
     });
     const iconColor = withOpacity2(theme.colors.foreground, 0.7);
-    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ React4.createElement(
+    const stepperContent = hideStepper || isReadOnly ? void 0 : /* @__PURE__ */ React5.createElement(
       View3,
       {
         style: [
@@ -1182,7 +1274,7 @@ var NumberInput = forwardRef3(
           customAppearance?.stepperContainer
         ]
       },
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         Pressable3,
         {
           onPress: handleDecrement,
@@ -1195,9 +1287,9 @@ var NumberInput = forwardRef3(
             customAppearance?.stepperButton
           ]
         },
-        /* @__PURE__ */ React4.createElement(RemoveIcon, { size: 16, color: iconColor })
+        /* @__PURE__ */ React5.createElement(RemoveIcon, { size: 16, color: iconColor })
       ),
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         Pressable3,
         {
           onPress: handleIncrement,
@@ -1210,10 +1302,10 @@ var NumberInput = forwardRef3(
             customAppearance?.stepperButton
           ]
         },
-        /* @__PURE__ */ React4.createElement(AddIcon, { size: 16, color: iconColor })
+        /* @__PURE__ */ React5.createElement(AddIcon, { size: 16, color: iconColor })
       )
     );
-    return /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement(
       TextInput,
       {
         ref,
@@ -1248,6 +1340,7 @@ export {
   DateTimeInput,
   NumberInput,
   OTPInput,
+  TextArea,
   TextInput,
   TimeInput,
   getDateOrder

package/dist/list/index.d.mts

@@ -0,0 +1,5 @@
+export { List } from './list';
+export { ListItem } from './list-item';
+export { ListBuilder } from './list-builder';
+export type { ListProps, ListItemProps, ListBuilderProps, ListSelectionMode, ListItemCustomAppearance, } from './list.type';
+//# sourceMappingURL=index.d.ts.map