taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/Input/useInputLogic.ts

@@ -0,0 +1,260 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import { utils } from '@/utils';
+import type { InputProps, InputStatus } from './Input.types';
+
+export const useInputLogic = (props: InputProps) => {
+  const {
+    value: controlledValue,
+    defaultValue = '',
+    status: propStatus = 'normal',
+    disabled = false,
+    readonly = false,
+    clearable = false,
+    clearTrigger = 'focus',
+    minLength,
+    maxLength,
+    rules,
+    validator,
+    validateTrigger = 'onBlur',
+    immediate = false,
+    type,
+    onChange,
+    onInput,
+    onFocus,
+    onBlur,
+    onConfirm,
+    onClear,
+  } = props;
+
+  // 更新ref类型，适配Taro环境
+  const nativeInputRef = useRef<any>(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [validationResult, setValidationResult] = useState<{ valid: boolean; message?: string } | null>(null);
+  const [internalStatus, setInternalStatus] = useState<InputStatus>(propStatus);
+
+  // 优化：将状态合并，减少useEffect数量
+  const [internalDisabled, setInternalDisabled] = useState(disabled);
+  const [internalReadonly, setInternalReadonly] = useState(readonly);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  // 优化：减少不必要的useEffect，合并状态更新
+  useEffect(() => {
+    setInternalStatus(propStatus);
+    setInternalDisabled(disabled);
+    setInternalReadonly(readonly);
+  }, [propStatus, disabled, readonly]);
+
+  // 优化：使用防抖处理immediate验证，避免频繁验证
+  const debouncedImmediateValidate = useCallback(
+    (valueToValidate: string) => {
+      if (immediate && valueToValidate) {
+        validateInput(valueToValidate);
+      }
+    },
+    [immediate],
+  );
+
+  // 优化：只在value变化且immediate为true时执行，避免不必要的验证
+  useEffect(() => {
+    debouncedImmediateValidate(String(value));
+  }, [value, debouncedImmediateValidate]);
+
+  const validateInput = useCallback(
+    async (inputValue: string): Promise<{ valid: boolean; message?: string }> => {
+      if (minLength !== undefined && inputValue.length < minLength) {
+        return { valid: false, message: `最少需要${minLength}个字符` };
+      }
+      if (maxLength !== undefined && inputValue.length > maxLength) {
+        return { valid: false, message: `最多允许${maxLength}个字符` };
+      }
+      if (!rules && !validator) return { valid: true };
+
+      if (rules?.some((rule) => rule.required && !inputValue.trim())) {
+        const requiredRule = rules.find((rule) => rule.required);
+        return { valid: false, message: requiredRule?.message || '此字段为必填项' };
+      }
+
+      if (rules) {
+        for (const rule of rules) {
+          if (rule.pattern && !rule.pattern.test(inputValue)) {
+            return { valid: false, message: rule.message || '输入格式不正确' };
+          }
+          if (rule.validator) {
+            const result = await rule.validator(inputValue);
+            if (typeof result === 'string') return { valid: false, message: result };
+            if (!result) return { valid: false, message: rule.message || '输入格式不正确' };
+          }
+        }
+      }
+
+      if (validator) {
+        const result = await validator(inputValue);
+        if (typeof result === 'string') return { valid: false, message: result };
+        if (!result) return { valid: false, message: '验证失败' };
+      }
+
+      return { valid: true };
+    },
+    [rules, validator, minLength, maxLength],
+  );
+
+  const formatInputValue = useCallback(
+    (inputValue: string): string => {
+      let formattedValue = utils.security.sanitizeText(inputValue);
+      switch (type) {
+        case 'number':
+        case 'digit':
+          formattedValue = formattedValue.replace(/[^\d.-]/g, '');
+          break;
+        case 'tel':
+          formattedValue = formattedValue.replace(/[^\d]/g, '');
+          break;
+        case 'idcard':
+          formattedValue = formattedValue.replace(/[^\dxX]/g, '');
+          break;
+      }
+      if (maxLength && formattedValue.length > maxLength) {
+        formattedValue = formattedValue.slice(0, maxLength);
+      }
+      return formattedValue;
+    },
+    [type, maxLength],
+  );
+
+  const handleValueChange = useCallback(
+    async (newValue: string, event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
+      const formattedValue = formatInputValue(newValue);
+
+      if (!isControlled) setInternalValue(formattedValue);
+
+      onInput?.(formattedValue, event);
+
+      // 优化：合并状态更新，减少重渲染
+      if (validateTrigger === 'onChange') {
+        const result = await validateInput(formattedValue);
+        setValidationResult(result);
+        setInternalStatus(result.valid ? 'normal' : 'error');
+      }
+
+      onChange?.(formattedValue, event);
+    },
+    [
+      internalDisabled,
+      internalReadonly,
+      isControlled,
+      formatInputValue,
+      onInput,
+      validateTrigger,
+      validateInput,
+      onChange,
+    ],
+  );
+
+  const handleFocus = useCallback(
+    async (event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
+      setIsFocused(true);
+      onFocus?.(event);
+      if (validateTrigger === 'onFocus') {
+        const result = await validateInput(String(value));
+        setValidationResult(result);
+        setInternalStatus(result.valid ? 'normal' : 'error');
+      }
+    },
+    [internalDisabled, internalReadonly, onFocus, validateTrigger, validateInput, value],
+  );
+
+  const handleBlur = useCallback(
+    async (event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
+      setIsFocused(false);
+      onBlur?.(event);
+      if (validateTrigger === 'onBlur') {
+        const result = await validateInput(String(value));
+        setValidationResult(result);
+        setInternalStatus(result.valid ? 'normal' : 'error');
+      }
+    },
+    [internalDisabled, internalReadonly, onBlur, validateTrigger, validateInput, value],
+  );
+
+  const handleConfirm = useCallback(
+    async (event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
+      onConfirm?.(String(value), event);
+      if (validateTrigger === 'onSubmit') {
+        const result = await validateInput(String(value));
+        setValidationResult(result);
+        setInternalStatus(result.valid ? 'normal' : 'error');
+      }
+    },
+    [internalDisabled, internalReadonly, onConfirm, validateTrigger, validateInput, value],
+  );
+
+  const handleClear = useCallback(
+    (event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
+      const emptyValue = '';
+      if (!isControlled) setInternalValue(emptyValue);
+      // 优化：合并状态更新
+      setValidationResult(null);
+      setInternalStatus('normal');
+      onClear?.(event);
+      onChange?.(emptyValue, event);
+    },
+    [internalDisabled, internalReadonly, isControlled, onClear, onChange],
+  );
+
+  // 优化：减少依赖，简化逻辑
+  const handlePasswordToggle = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
+  const shouldShowClear = useCallback(() => {
+    if (!clearable || internalDisabled || internalReadonly) return false;
+    switch (clearTrigger) {
+      case 'always':
+        return !!value;
+      case 'focus':
+        return isFocused && !!value;
+      case 'never':
+        return false;
+      default:
+        return false;
+    }
+  }, [clearable, internalDisabled, internalReadonly, value, isFocused, clearTrigger]);
+
+  // 优化：简化finalStatus计算
+  const finalStatus = internalDisabled ? 'disabled' : validationResult?.valid === false ? 'error' : internalStatus;
+
+  return {
+    nativeInputRef,
+    value,
+    isFocused,
+    showPassword,
+    internalStatus,
+    internalDisabled,
+    internalReadonly,
+    validationResult,
+    finalStatus,
+    handleValueChange,
+    handleFocus,
+    handleBlur,
+    handleConfirm,
+    handleClear,
+    handlePasswordToggle,
+    shouldShowClear,
+    validateInput,
+    setInternalValue,
+    setInternalStatus,
+    setInternalDisabled,
+    setInternalReadonly,
+    setValidationResult,
+  };
+};

package/src/components/form/InputNumber/InputNumber.styles.ts

@@ -129,7 +129,9 @@ export class InputNumberStyles {
   }
 
   /** 生成输入框容器样式 */
-  static getContainerStyle(props: Partial<InputNumberProps> & { block?: boolean; style?: React.CSSProperties }): React.CSSProperties {
+  static getContainerStyle(
+    props: Partial<InputNumberProps> & { block?: boolean; style?: React.CSSProperties },
+  ): React.CSSProperties {
     const { size = 'md', block = false, style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -145,14 +147,15 @@ export class InputNumberStyles {
   }
 
   /** 生成输入框包装器样式 */
-  static getWrapperStyle(props: Partial<InputNumberProps> & { bordered?: boolean; controls?: boolean; controlsPosition?: 'start' | 'end'; style?: React.CSSProperties }): React.CSSProperties {
-    const {
-      size = 'md',
-      status = 'normal',
-      disabled = false,
-      bordered = true,
-      style = {},
-    } = props;
+  static getWrapperStyle(
+    props: Partial<InputNumberProps> & {
+      bordered?: boolean;
+      controls?: boolean;
+      controlsPosition?: 'start' | 'end';
+      style?: React.CSSProperties;
+    },
+  ): React.CSSProperties {
+    const { size = 'md', status = 'normal', disabled = false, bordered = true, style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
     const statusStyles = this.STATUS_COLORS[status];
@@ -173,7 +176,11 @@ export class InputNumberStyles {
   }
 
   /** 生成控制器样式 */
-  static getControlsStyle(props: { size: InputNumberSize; controlsPosition: 'start' | 'end'; style?: React.CSSProperties }): React.CSSProperties {
+  static getControlsStyle(props: {
+    size: InputNumberSize;
+    controlsPosition: 'start' | 'end';
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', controlsPosition = 'end', style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -206,7 +213,11 @@ export class InputNumberStyles {
   }
 
   /** 生成控制器按钮样式 */
-  static getControlButtonStyle(props: { size: InputNumberSize; direction: 'up' | 'down'; style?: React.CSSProperties }): React.CSSProperties {
+  static getControlButtonStyle(props: {
+    size: InputNumberSize;
+    direction: 'up' | 'down';
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', direction = 'up', style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -234,7 +245,13 @@ export class InputNumberStyles {
   }
 
   /** 生成前缀样式 */
-  static getPrefixStyle(props: { size: InputNumberSize; disabled: boolean; controls: boolean; controlsPosition: 'start' | 'end'; style?: React.CSSProperties }): React.CSSProperties {
+  static getPrefixStyle(props: {
+    size: InputNumberSize;
+    disabled: boolean;
+    controls: boolean;
+    controlsPosition: 'start' | 'end';
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', disabled = false, controls = false, controlsPosition = 'start', style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -261,7 +278,13 @@ export class InputNumberStyles {
   }
 
   /** 生成后缀样式 */
-  static getSuffixStyle(props: { size: InputNumberSize; disabled: boolean; controls: boolean; controlsPosition: 'start' | 'end'; style?: React.CSSProperties }): React.CSSProperties {
+  static getSuffixStyle(props: {
+    size: InputNumberSize;
+    disabled: boolean;
+    controls: boolean;
+    controlsPosition: 'start' | 'end';
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', disabled = false, controls = false, controlsPosition = 'end', style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -288,7 +311,11 @@ export class InputNumberStyles {
   }
 
   /** 生成标签样式 */
-  static getLabelStyle(props: { size: InputNumberSize; disabled: boolean; style?: React.CSSProperties }): React.CSSProperties {
+  static getLabelStyle(props: {
+    size: InputNumberSize;
+    disabled: boolean;
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', disabled = false, style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -303,7 +330,11 @@ export class InputNumberStyles {
   }
 
   /** 生成辅助文本样式 */
-  static getHelperTextStyle(props: { size: InputNumberSize; status: InputNumberStatus; style?: React.CSSProperties }): React.CSSProperties {
+  static getHelperTextStyle(props: {
+    size: InputNumberSize;
+    status: InputNumberStatus;
+    style?: React.CSSProperties;
+  }): React.CSSProperties {
     const { size = 'md', status = 'normal', style = {} } = props;
 
     const sizeStyles = this.SIZE_MAP[size];
@@ -521,7 +552,14 @@ export class InputNumberStyles {
 
     switch (type) {
       case 'currency':
-        formattedValue = this.formatCurrency(value, precision, thousandsSeparator, decimalSeparator, currencySymbol, currencySymbolPosition);
+        formattedValue = this.formatCurrency(
+          value,
+          precision,
+          thousandsSeparator,
+          decimalSeparator,
+          currencySymbol,
+          currencySymbolPosition,
+        );
         break;
       case 'percent':
         formattedValue = this.formatPercent(value, precision, thousandsSeparator, decimalSeparator);
@@ -547,10 +585,10 @@ export class InputNumberStyles {
     thousandsSeparator?: string,
     decimalSeparator?: string,
     currencySymbol?: string,
-    position?: 'prefix' | 'suffix'
+    position?: 'prefix' | 'suffix',
   ): string {
     const formattedNumber = this.formatDecimal(value, precision, thousandsSeparator, decimalSeparator);
-    
+
     if (position === 'prefix') {
       return `${currencySymbol || ''}${formattedNumber}`;
     } else {
@@ -559,14 +597,24 @@ export class InputNumberStyles {
   }
 
   /** 格式化百分比 */
-  private static formatPercent(value: number, precision: number, thousandsSeparator?: string, decimalSeparator?: string): string {
+  private static formatPercent(
+    value: number,
+    precision: number,
+    thousandsSeparator?: string,
+    decimalSeparator?: string,
+  ): string {
     const percentValue = value * 100;
     const formattedNumber = this.formatDecimal(percentValue, precision, thousandsSeparator, decimalSeparator);
     return `${formattedNumber}%`;
   }
 
   /** 格式化小数 */
-  private static formatDecimal(value: number, precision: number, thousandsSeparator?: string, decimalSeparator?: string): string {
+  private static formatDecimal(
+    value: number,
+    precision: number,
+    thousandsSeparator?: string,
+    decimalSeparator?: string,
+  ): string {
     const roundedValue = this.roundValue(value, precision);
     const [integerPart, decimalPart] = roundedValue.toString().split('.');
 
@@ -626,7 +674,10 @@ export class InputNumberStyles {
     }
 
     // 移除千分位分隔符
-    cleanText = cleanText.replace(new RegExp(`\\${thousandsSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g'), '');
+    cleanText = cleanText.replace(
+      new RegExp(`\\${thousandsSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g'),
+      '',
+    );
 
     // 替换小数点分隔符
     cleanText = cleanText.replace(decimalSeparator, '.');
@@ -648,18 +699,18 @@ export class InputNumberStyles {
   /** 限制数字范围 */
   static clampValue(value: number, min?: number, max?: number): number {
     let clampedValue = value;
-    
+
     if (min !== undefined) {
       clampedValue = Math.max(clampedValue, min);
     }
-    
+
     if (max !== undefined) {
       clampedValue = Math.min(clampedValue, max);
     }
-    
+
     return clampedValue;
   }
 }
 
 /** 导出样式工具 */
-export const inputNumberStyles = InputNumberStyles;
+export const inputNumberStyles = InputNumberStyles;

package/src/components/form/InputNumber/InputNumber.tsx

@@ -2,7 +2,12 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { Input as TaroInput, View, Text } from '@tarojs/components';
 import type { ITouchEvent } from '@tarojs/components';
 import { inputNumberStyles } from './InputNumber.styles';
-import type { InputNumberProps, InputNumberRef, InputNumberStatus, InputNumberValidationResult } from './InputNumber.types';
+import type {
+  InputNumberProps,
+  InputNumberRef,
+  InputNumberStatus,
+  InputNumberValidationResult,
+} from './InputNumber.types';
 import { useInputNumberState } from './hooks/useInputNumberState';
 import { useInputNumberValidation } from './hooks/useInputNumberValidation';
 import { InputNumberControls } from './components/InputNumberControls';
@@ -112,27 +117,33 @@ export const InputNumberComponent = forwardRef<InputNumberRef, InputNumberProps>
   }, [value, onChange, onInput]);
 
   // 处理清除事件
-  const handleClear = useCallback((event: ITouchEvent) => {
-    if (internalDisabled || internalReadonly) return;
+  const handleClear = useCallback(
+    (event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
 
-    handleValueChange(null, event);
-    setValidationResult(null);
-    setInternalStatus('normal');
-    onClear?.(event);
-  }, [internalDisabled, internalReadonly, handleValueChange, onClear]);
+      handleValueChange(null, event);
+      setValidationResult(null);
+      setInternalStatus('normal');
+      onClear?.(event);
+    },
+    [internalDisabled, internalReadonly, handleValueChange, onClear],
+  );
 
   // 处理步进事件
-  const handleStep = useCallback(async (direction: 'up' | 'down', event: ITouchEvent) => {
-    if (internalDisabled || internalReadonly) return;
+  const handleStep = useCallback(
+    async (direction: 'up' | 'down', event: ITouchEvent) => {
+      if (internalDisabled || internalReadonly) return;
 
-    const currentValue = value || 0;
-    const newValue = direction === 'up' ? currentValue + step : currentValue - step;
-    const clampedValue = inputNumberStyles['clampValue'](newValue, min, max);
-    const roundedValue = inputNumberStyles['roundValue'](clampedValue, precision);
+      const currentValue = value || 0;
+      const newValue = direction === 'up' ? currentValue + step : currentValue - step;
+      const clampedValue = inputNumberStyles['clampValue'](newValue, min, max);
+      const roundedValue = inputNumberStyles['roundValue'](clampedValue, precision);
 
-    await handleValueChange(roundedValue, event);
-    onStep?.(roundedValue, direction, event);
-  }, [internalDisabled, internalReadonly, value, step, min, max, precision, handleValueChange, onStep]);
+      await handleValueChange(roundedValue, event);
+      onStep?.(roundedValue, direction, event);
+    },
+    [internalDisabled, internalReadonly, value, step, min, max, precision, handleValueChange, onStep],
+  );
 
   // 计算是否显示清除按钮
   const shouldShowClear = useCallback(() => {
@@ -179,7 +190,6 @@ export const InputNumberComponent = forwardRef<InputNumberRef, InputNumberProps>
     className,
   });
 
-  
   // 暴露给外部的引用方法
   React.useImperativeHandle(
     ref,
@@ -303,7 +313,18 @@ export const InputNumberComponent = forwardRef<InputNumberRef, InputNumberProps>
         })}
       >
         {/* 前缀 */}
-        {prefix && <View style={inputNumberStyles['getPrefixStyle']({ size, disabled: internalDisabled, controls, controlsPosition })}>{prefix}</View>}
+        {prefix && (
+          <View
+            style={inputNumberStyles['getPrefixStyle']({
+              size,
+              disabled: internalDisabled,
+              controls,
+              controlsPosition,
+            })}
+          >
+            {prefix}
+          </View>
+        )}
 
         {/* 控制器 */}
         {controls && (
@@ -332,7 +353,18 @@ export const InputNumberComponent = forwardRef<InputNumberRef, InputNumberProps>
         />
 
         {/* 后缀 */}
-        {suffix && <View style={inputNumberStyles['getSuffixStyle']({ size, disabled: internalDisabled, controls, controlsPosition })}>{suffix}</View>}
+        {suffix && (
+          <View
+            style={inputNumberStyles['getSuffixStyle']({
+              size,
+              disabled: internalDisabled,
+              controls,
+              controlsPosition,
+            })}
+          >
+            {suffix}
+          </View>
+        )}
 
         {/* 清除按钮 */}
         {shouldShowClear() && (
@@ -367,4 +399,4 @@ export const InputNumberComponent = forwardRef<InputNumberRef, InputNumberProps>
 InputNumberComponent.displayName = 'InputNumber';
 
 /** 导出数字输入框组件 */
-export const InputNumber = InputNumberComponent;
+export const InputNumber = InputNumberComponent;

package/src/components/form/InputNumber/InputNumber.types.ts

@@ -24,7 +24,10 @@ export type InputNumberStepMode = 'continuous' | 'discrete';
 export type InputNumberClearTrigger = 'always' | 'focus' | 'never';
 
 /** 数字输入框原生属性类型 */
-export type InputNumberNativeProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onInput' | 'prefix'>;
+export type InputNumberNativeProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onInput' | 'prefix'
+>;
 
 /** 验证规则 */
 export interface InputNumberRule {
@@ -62,7 +65,22 @@ export interface InputNumberFormatConfig {
 
 /** 数字输入框组件属性接口 */
 export interface InputNumberProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onInput' | 'disabled' | 'readOnly' | 'autoFocus' | 'maxLength' | 'minLength' | 'defaultValue' | 'prefix'> {
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    | 'size'
+    | 'value'
+    | 'onChange'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onInput'
+    | 'disabled'
+    | 'readOnly'
+    | 'autoFocus'
+    | 'maxLength'
+    | 'minLength'
+    | 'defaultValue'
+    | 'prefix'
+  > {
   /** 数字值 */
   value?: number | null;
   /** 默认值（非受控模式） */
@@ -315,4 +333,4 @@ export interface InputNumberEvents {
   onStep: (_value: number, direction: 'up' | 'down', event: ITouchEvent) => void;
   /** 验证事件 */
   onValidate: (_result: InputNumberValidationResult) => void;
-}
+}

package/src/components/form/InputNumber/components/InputNumberClearButton.tsx

@@ -10,23 +10,15 @@ interface InputNumberClearButtonProps {
   onClear: (event: ITouchEvent) => void;
 }
 
-export function InputNumberClearButton({
-  size,
-  disabled,
-  readonly,
-  onClear,
-}: InputNumberClearButtonProps) {
+export function InputNumberClearButton({ size, disabled, readonly, onClear }: InputNumberClearButtonProps) {
   const handleClear = (event: ITouchEvent) => {
     if (disabled || readonly) return;
     onClear(event);
   };
 
   return (
-    <View 
-      style={inputNumberStyles['getClearButtonStyle']({ size })} 
-      onClick={handleClear}
-    >
+    <View style={inputNumberStyles['getClearButtonStyle']({ size })} onClick={handleClear}>
       <Text>×</Text>
     </View>
   );
-}
+}

package/src/components/form/InputNumber/components/InputNumberControls.tsx

@@ -11,13 +11,7 @@ interface InputNumberControlsProps {
   onStep: (direction: 'up' | 'down', event: ITouchEvent) => void;
 }
 
-export function InputNumberControls({
-  size,
-  controlsPosition,
-  disabled,
-  readonly,
-  onStep,
-}: InputNumberControlsProps) {
+export function InputNumberControls({ size, controlsPosition, disabled, readonly, onStep }: InputNumberControlsProps) {
   const handleStep = (direction: 'up' | 'down') => (event: ITouchEvent) => {
     if (disabled || readonly) return;
     onStep(direction, event);
@@ -25,10 +19,7 @@ export function InputNumberControls({
 
   return (
     <View style={inputNumberStyles['getControlsStyle']({ size, controlsPosition })}>
-      <View
-        style={inputNumberStyles['getControlButtonStyle']({ size, direction: 'up' })}
-        onClick={handleStep('up')}
-      >
+      <View style={inputNumberStyles['getControlButtonStyle']({ size, direction: 'up' })} onClick={handleStep('up')}>
         <Text>+</Text>
       </View>
       <View
@@ -39,4 +30,4 @@ export function InputNumberControls({
       </View>
     </View>
   );
-}
+}

package/src/components/form/InputNumber/hooks/index.ts

@@ -1,4 +1,4 @@
 export { useInputNumberState } from './useInputNumberState';
 export { useInputNumberValidation } from './useInputNumberValidation';
 export type { UseInputNumberStateParams, UseInputNumberStateReturn } from './useInputNumberState';
-export type { UseInputNumberValidationParams } from './useInputNumberValidation';
+export type { UseInputNumberValidationParams } from './useInputNumberValidation';