@particle-network/ui-native 0.4.2-beta.2 → 0.4.2-beta.20

package/dist/components/UXButton/button.js

@@ -7,7 +7,7 @@ import { UXPressable } from "../UXPressable/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { useStyles } from "./button.styles.js";
 const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, gap, w, h, ph, isIconOnly, children, ...restProps } = props;
+    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, isSelected, startContent, endContent, fullWidth, width, gap, w, h, ph, isIconOnly, children, ...restProps } = props;
     const handlePress = (e)=>{
         Keyboard.dismiss();
         triggerHapticFeedback();
@@ -20,6 +20,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         variant,
         isDisabled,
         isLoading,
+        isSelected,
         fullWidth,
         isIconOnly,
         width,

package/dist/components/UXButton/button.styles.js

@@ -4,7 +4,7 @@ import { useColors, useComponentConfig, useMs, useRadius, useSpacing } from "../
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
     const { button: buttonConfig } = useComponentConfig();
-    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, gap, w, h, ph, fullWidth, isIconOnly } = props;
+    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, isSelected, width, gap, w, h, ph, fullWidth, isIconOnly } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { getSpacing } = useSpacing();
@@ -102,6 +102,9 @@ const useStyles = (props)=>{
     ]);
     const textColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
+        if (isSelected) {
+            if ('secondary' === color) return 'foreground';
+        }
         if ('solid' === variant) {
             if (customColorConfig) return customColorConfig.text;
             if ('contrast' === color) return 'bg-default';
@@ -111,7 +114,8 @@ const useStyles = (props)=>{
     }, [
         color,
         variant,
-        buttonConfig?.color
+        buttonConfig?.color,
+        isSelected
     ]);
     const textActualColor = useMemo(()=>getColor(textColor), [
         textColor,
@@ -119,6 +123,9 @@ const useStyles = (props)=>{
     ]);
     const backgroundColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
+        if (isSelected) {
+            if ('secondary' === color && 'solid' === variant) return getColor('tertiary');
+        }
         if ('solid' === variant) {
             if (customColorConfig) return getColor(customColorConfig.background);
             if ('contrast' === color) return getColor('foreground');
@@ -142,7 +149,8 @@ const useStyles = (props)=>{
         color,
         getColor,
         variant,
-        buttonConfig?.color
+        buttonConfig?.color,
+        isSelected
     ]);
     const borderColor = useMemo(()=>{
         if ('bordered' === variant) {

package/dist/components/UXButton/button.types.d.ts

@@ -27,6 +27,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
     variant?: 'solid' | 'bordered' | 'flat' | 'text' | 'light';
     radius?: UXRadius;
     isDisabled?: boolean;
+    isSelected?: boolean;
     isLoading?: boolean;
     startContent?: React.ReactNode;
     endContent?: React.ReactNode;

package/dist/components/UXTabSwitch/index.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
 import { type UXTabsProps } from '../UXTabs';
-interface UXTabSwitchProps {
-    size?: UXTabsProps['size'];
-    color?: UXTabsProps['color'];
+interface UXTabSwitchProps extends Omit<UXTabsProps, 'variant' | 'selectedKey' | 'onSelectionChange'> {
     onTitle?: string;
     onIcon?: React.ReactNode;
     offTitle?: string;
     offIcon?: React.ReactNode;
     isSelected?: boolean;
-    isDisabled?: boolean;
     onValueChange?: (isSelected: boolean) => void;
 }
 export declare const UXTabSwitch: React.FC<UXTabSwitchProps>;

package/dist/components/UXTabSwitch/index.js

@@ -3,17 +3,15 @@ import "react";
 import { useI18n } from "../../hooks/useI18n.js";
 import { UXTab, UXTabs } from "../UXTabs/index.js";
 const UXTabSwitch = (props)=>{
-    const { size, color, onTitle, onIcon, offTitle, offIcon, isSelected = false, isDisabled = false, onValueChange } = props;
+    const { onTitle, onIcon, offTitle, offIcon, isSelected = false, onValueChange, ...restProps } = props;
     const i18n = useI18n();
     return /*#__PURE__*/ jsxs(UXTabs, {
-        size: size,
         variant: "switch",
-        color: color,
-        isDisabled: isDisabled,
         selectedKey: isSelected.toString(),
         onSelectionChange: (key)=>{
             onValueChange?.('true' === key);
         },
+        ...restProps,
         children: [
             /*#__PURE__*/ jsx(UXTab, {
                 title: offTitle || i18n.switch.off,

package/dist/components/UXTabs/styles.d.ts

@@ -5,7 +5,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
     tabsWrapper: {
         backgroundColor: string | undefined;
         gap: import("@particle-network/ui-shared").SpacingType;
-        flex: number;
+        flex: number | undefined;
         justifyContent: "flex-start" | "space-between";
         borderRadius: number | undefined;
         height: number;
@@ -14,7 +14,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
     };
     tab: {
         flexDirection: "column";
-        flexGrow: number;
+        flex: number | undefined;
         height: "100%";
         alignItems: "center";
         justifyContent: "center";

package/dist/components/UXTabs/styles.js

@@ -81,7 +81,7 @@ const useStyles = (props)=>{
     ]);
     const wrapperBackgroundColor = useMemo(()=>{
         if ('switch' === variant) return getColor('bg-200');
-        if ('solid' === variant) return getColor('bg-400');
+        if ('solid' === variant) return getColor('bg-200');
         return 'transparent';
     }, [
         variant,
@@ -125,8 +125,8 @@ const useStyles = (props)=>{
         if (!isSelected) return 'transparent';
         if ('text' === variant || 'underlined' === variant) return 'transparent';
         if ('default' === color) {
-            if ('switch' === variant) return getColor('tertiary');
-            return getColor('bg-200');
+            if ('light' === variant) return getColor('bg-200');
+            return getColor('tertiary');
         }
         return getColor(color);
     }, [
@@ -153,7 +153,7 @@ const useStyles = (props)=>{
             tabsWrapper: {
                 backgroundColor: wrapperBackgroundColor,
                 gap: gapValue,
-                flex: fullWidth || w ? 1 : 0,
+                flex: fullWidth || w ? 1 : void 0,
                 justifyContent: fullWidth || w ? 'space-between' : 'flex-start',
                 borderRadius: wrapperBorderRadius,
                 height,
@@ -162,11 +162,10 @@ const useStyles = (props)=>{
             },
             tab: {
                 flexDirection: 'column',
-                flexGrow: [
-                    'text',
-                    'light',
-                    'underlined'
-                ].includes(variant) ? 0 : 1,
+                flex: [
+                    'solid',
+                    'switch'
+                ].includes(variant) ? 1 : void 0,
                 height: '100%',
                 alignItems: 'center',
                 justifyContent: 'center',

package/dist/components/input/input.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { TextInput } from "react-native";
-import { useColors, useKeyboard } from "../../hooks/index.js";
+import { useColors, useI18n, useKeyboard } from "../../hooks/index.js";
 import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
@@ -16,6 +16,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     const [isFocused, setIsFocused] = useState(false);
     const [isInvalid, setIsInvalid] = useState(isInvalidProp);
     const { isKeyboardVisible } = useKeyboard();
+    const i18n = useI18n();
     useEffect(()=>{
         if (!isKeyboardVisible && blurOnKeyboardHide) inputRef.current?.blur();
     }, [
@@ -43,6 +44,15 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isInvalid,
         isFocused
     });
+    useEffect(()=>{
+        if (inputRef.current) inputRef.current.setNativeProps({
+            style: {
+                color: styles.input.color
+            }
+        });
+    }, [
+        styles.input.color
+    ]);
     useEffect(()=>{
         if (void 0 !== controlledValue) setInternalValue(controlledValue);
         else if (void 0 !== defaultValue) setInternalValue(defaultValue);
@@ -78,7 +88,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
             setIsInvalid(true);
             return {
                 isValid: false,
-                errorMessage: 'This field is required'
+                errorMessage: i18n.validation.required
             };
         }
         setIsInvalid(false);
@@ -87,7 +97,8 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         };
     }, [
         internalValue,
-        isRequired
+        isRequired,
+        i18n
     ]);
     const renderError = useMemo(()=>{
         if (isInvalidProp && errorMessage) {

package/dist/components/input/number-input.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Platform, TextInput } from "react-native";
-import { useColors, useKeyboard } from "../../hooks/index.js";
+import { useColors, useI18n, useKeyboard } from "../../hooks/index.js";
 import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
@@ -9,14 +9,25 @@ import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
 import { useStyles } from "./styles.js";
 const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, minValue, maxValue, formatOptions, startContent, endContent, isRequired, isReadOnly, isDisabled, isClearable, isInvalid: isInvalidProp, autoErrorMessage, allowNegative, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
+    const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, minValue, maxValue, startContent, endContent, isRequired, isReadOnly, isDisabled, isClearable, isInvalid: isInvalidProp, autoErrorMessage, allowNegative, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
     const { getColor } = useColors();
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(defaultValue ?? NaN);
     const [displayText, setDisplayText] = useState(defaultValue?.toString() ?? '');
     const [isFocused, setIsFocused] = useState(false);
     const [isInvalid, setIsInvalid] = useState(isInvalidProp);
+    const i18n = useI18n();
     const { isKeyboardVisible } = useKeyboard();
+    const formatOptions = useMemo(()=>{
+        const restFormatOptions = {
+            maximumFractionDigits: 3,
+            ...restProps.formatOptions ?? {}
+        };
+        delete restFormatOptions.signDisplay;
+        return restFormatOptions;
+    }, [
+        restProps.formatOptions
+    ]);
     useEffect(()=>{
         if (!isKeyboardVisible && blurOnKeyboardHide) inputRef.current?.blur();
     }, [
@@ -46,6 +57,15 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isInvalid,
         isFocused
     });
+    useEffect(()=>{
+        if (inputRef.current) inputRef.current.setNativeProps({
+            style: {
+                color: styles.input.color
+            }
+        });
+    }, [
+        styles.input.color
+    ]);
     useEffect(()=>{
         if (void 0 !== controlledValue) {
             setInternalValue(controlledValue);
@@ -58,24 +78,21 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         defaultValue,
         controlledValue
     ]);
-    const numberFormatter = useMemo(()=>{
-        if (formatOptions) return new Intl.NumberFormat(void 0, formatOptions);
-        return null;
-    }, [
+    const numberFormatter = useMemo(()=>new Intl.NumberFormat(void 0, formatOptions), [
         formatOptions
     ]);
     const validationResult = useMemo(()=>{
         if (isNaN(internalValue) && isRequired) return {
             isValid: false,
-            errorMessage: 'This field is required'
+            errorMessage: i18n.validation.required
         };
         if (void 0 !== minValue && internalValue < minValue) return {
             isValid: false,
-            errorMessage: `Value must be at least ${minValue}`
+            errorMessage: i18n.validation.min.replace('{min}', minValue.toString())
         };
         if (void 0 !== maxValue && internalValue > maxValue) return {
             isValid: false,
-            errorMessage: `Value must be at most ${maxValue}`
+            errorMessage: i18n.validation.max.replace('{max}', maxValue.toString())
         };
         setIsInvalid(false);
         return {
@@ -85,22 +102,19 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         internalValue,
         isRequired,
         minValue,
-        maxValue
+        maxValue,
+        i18n
     ]);
     const adjustValueToRange = useCallback((num)=>{
-        const numValue = isNaN(num) ? 0 : num;
-        if (void 0 !== minValue && numValue < minValue) return minValue;
-        if (void 0 !== maxValue && numValue > maxValue) return maxValue;
-        return numValue;
+        if (isNaN(num)) return NaN;
+        if (void 0 !== minValue && num < minValue) return minValue;
+        if (void 0 !== maxValue && num > maxValue) return maxValue;
+        return num;
     }, [
         minValue,
         maxValue
     ]);
-    const adjustValueToFractionDigits = useCallback((numValue)=>{
-        if (formatOptions?.minimumFractionDigits !== void 0 || formatOptions?.maximumFractionDigits !== void 0) return Number(numberFormatter?.format(numValue).replaceAll(',', ''));
-        return numValue;
-    }, [
-        formatOptions,
+    const adjustValueToFractionDigits = useCallback((numValue)=>Number(numberFormatter?.format(numValue).replaceAll(',', '')), [
         numberFormatter
     ]);
     const handleChangeText = useCallback((text)=>{
@@ -111,17 +125,11 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         if (cleanedText.includes('-') && !cleanedText.startsWith('-')) return;
         setDisplayText(cleanedText);
         onChangeText?.(cleanedText);
-        const numValue = parseFloat(cleanedText);
-        if (isNaN(numValue)) {
-            setInternalValue(NaN);
-            onValueChange?.(NaN);
-        } else {
-            setInternalValue(numValue);
-            onValueChange?.(numValue);
-        }
+        if ('' === cleanedText || '-' === cleanedText) return void setInternalValue(NaN);
+        const numValue = Number(cleanedText);
+        isNaN(numValue) ? setInternalValue(NaN) : setInternalValue(numValue);
     }, [
-        onChangeText,
-        onValueChange
+        onChangeText
     ]);
     const handleFocus = useCallback((e)=>{
         setIsFocused(true);
@@ -131,8 +139,9 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     ]);
     const handleBlur = useCallback((e)=>{
         setIsFocused(false);
-        const adjustedValue = adjustValueToFractionDigits(adjustValueToRange(internalValue));
-        if (adjustedValue !== internalValue) {
+        if (isNaN(internalValue)) onValueChange?.(NaN);
+        else {
+            const adjustedValue = adjustValueToFractionDigits(adjustValueToRange(internalValue));
             const adjustedText = adjustedValue?.toString();
             setDisplayText(adjustedText);
             setInternalValue(adjustedValue);
@@ -165,10 +174,11 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         if (isNaN(internalValue)) return '';
         if (numberFormatter) {
             const formattedValue = numberFormatter.format(internalValue);
-            if (formatOptions?.signDisplay === 'exceptZero' || formatOptions?.signDisplay === 'always') {
+            const signDisplay = restProps.formatOptions?.signDisplay;
+            if ('exceptZero' === signDisplay || 'always' === signDisplay) {
                 if (internalValue > 0) return `+${formattedValue}`;
                 else if (internalValue < 0) ;
-                else if ('always' === formatOptions.signDisplay) return `+${formattedValue}`;
+                else if ('always' === signDisplay) return `+${formattedValue}`;
             }
             return formattedValue;
         }
@@ -178,7 +188,7 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         displayText,
         numberFormatter,
         isFocused,
-        formatOptions
+        restProps.formatOptions
     ]);
     const renderError = useMemo(()=>{
         if (isInvalidProp && errorMessage) {

package/dist/components/input/styles.js

@@ -4,7 +4,7 @@ import { useColors, useComponentConfig, useMs, useRadius } from "../../hooks/ind
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
     const { input: inputConfig } = useComponentConfig();
-    const { isInvalid, isDisabled, fullWidth, isFocused, color = 'default', size = 'md', variant = 'flat', multiline, radius = multiline ? void 0 : inputConfig.defaultProps?.radius, width: widthProp, textAlign = 'left' } = props;
+    const { isInvalid, isDisabled, fullWidth, isFocused, color = 'default', isColorText = false, size = 'md', variant = 'flat', multiline, radius = multiline ? void 0 : inputConfig.defaultProps?.radius, width: widthProp, textAlign = 'left' } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { ms } = useMs();
@@ -52,10 +52,13 @@ const useStyles = (props)=>{
     ]);
     const inputTextColor = useMemo(()=>{
         if (isInvalid) return getColor('danger');
+        if (isColorText) return getColor(color);
         return getColor('foreground');
     }, [
         isInvalid,
-        getColor
+        getColor,
+        isColorText,
+        color
     ]);
     const backgroundColor = useMemo(()=>getColor('bg-200'), [
         getColor

package/dist/components/input/types.d.ts

@@ -36,6 +36,7 @@ export interface UXInputCommonProps extends Omit<TextInputProps, 'style' | 'valu
     isReadOnly?: boolean;
     isDisabled?: boolean;
     isInvalid?: boolean;
+    isColorText?: boolean;
     label?: string;
     textAlign?: 'left' | 'center' | 'right';
     autoErrorMessage?: boolean;

package/dist/locales/en.d.ts

@@ -41,5 +41,10 @@ export declare const en: {
         on: string;
         off: string;
     };
+    validation: {
+        required: string;
+        min: string;
+        max: string;
+    };
 };
 export type LocaleText = typeof en;

package/dist/locales/en.js

@@ -40,6 +40,11 @@ const en = {
     switch: {
         on: 'On',
         off: 'Off'
+    },
+    validation: {
+        required: 'This field is required',
+        min: 'Value must be greater than {min}',
+        max: 'Value must be less than {max}'
     }
 };
 export { en };

package/dist/locales/index.d.ts

@@ -45,6 +45,11 @@ export declare const locales: {
             on: string;
             off: string;
         };
+        validation: {
+            required: string;
+            min: string;
+            max: string;
+        };
     };
     zh: {
         datePicker: {
@@ -89,6 +94,11 @@ export declare const locales: {
             on: string;
             off: string;
         };
+        validation: {
+            required: string;
+            min: string;
+            max: string;
+        };
     };
 };
 export declare function getLocaleText(locale: Locale): {
@@ -134,4 +144,9 @@ export declare function getLocaleText(locale: Locale): {
         on: string;
         off: string;
     };
+    validation: {
+        required: string;
+        min: string;
+        max: string;
+    };
 };

package/dist/locales/zh.js

@@ -40,6 +40,11 @@ const zh = {
     switch: {
         on: '开',
         off: '关'
+    },
+    validation: {
+        required: '请输入',
+        min: '值不能小于{min}',
+        max: '值不能大于{max}'
     }
 };
 export { zh };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.4.2-beta.2",
+  "version": "0.4.2-beta.20",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -44,8 +44,9 @@
     "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
-    "@particle-network/icons": "0.4.2-beta.2",
-    "@particle-network/ui-shared": "0.3.2-beta.2"
+    "react-native-worklets": "0.5.1",
+    "@particle-network/ui-shared": "0.3.2-beta.3",
+    "@particle-network/icons": "0.4.2-beta.7"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -59,13 +60,13 @@
     "@rsbuild/core": "^1.5.0",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.2",
-    "@storybook/addon-docs": "^9.1.6",
-    "@storybook/addon-ondevice-actions": "^9.1.2",
-    "@storybook/addon-ondevice-backgrounds": "^9.1.2",
-    "@storybook/addon-ondevice-controls": "^9.1.2",
-    "@storybook/addon-ondevice-notes": "^9.1.2",
-    "@storybook/react-native": "^9.1.2",
-    "@storybook/react-native-web-vite": "^9.1.6",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-ondevice-actions": "^10.0.0",
+    "@storybook/addon-ondevice-backgrounds": "^10.0.0",
+    "@storybook/addon-ondevice-controls": "^10.0.0",
+    "@storybook/addon-ondevice-notes": "^10.0.0",
+    "@storybook/react-native": "^10.0.0",
+    "@storybook/react-native-web-vite": "^10.0.0",
     "@types/react": "^19.1.10",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
@@ -79,18 +80,18 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.0",
+    "react-native-reanimated": "4.1.6",
     "react-native-safe-area-context": "5.6.1",
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.1",
     "serve": "^14.2.5",
-    "storybook": "^9.1.6",
+    "storybook": "^10.0.0",
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
     "@particle-network/eslint-config": "0.3.0",
     "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/icons": "0.4.2-beta.2"
+    "@particle-network/icons": "0.4.2-beta.7"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",