@particle-network/ui-native 0.4.2-beta.9 → 0.5.1-beta.0

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

@@ -14,6 +14,7 @@ const useStyles = (props)=>{
             sm: ms(buttonConfig.size.sm),
             md: ms(buttonConfig.size.md),
             lg: ms(buttonConfig.size.lg),
+            xl: ms(buttonConfig.size.xl),
             auto: void 0
         }), [
         buttonConfig?.size,
@@ -24,6 +25,7 @@ const useStyles = (props)=>{
             sm: ms(buttonConfig.fontSize.sm),
             md: ms(buttonConfig.fontSize.md),
             lg: ms(buttonConfig.fontSize.lg),
+            xl: ms(buttonConfig.fontSize.xl),
             auto: ms(buttonConfig.fontSize.md)
         }), [
         ms,
@@ -33,7 +35,8 @@ const useStyles = (props)=>{
             xs: ms(14),
             sm: ms(16),
             md: ms(18),
-            lg: ms(24),
+            lg: ms(20),
+            xl: ms(24),
             auto: ms(16)
         }), [
         ms
@@ -42,14 +45,16 @@ const useStyles = (props)=>{
         xs: 'xs',
         sm: 'sm',
         md: 'sm',
-        lg: 'md',
+        lg: 8,
+        xl: 'md',
         auto: 'sm'
     };
     const paddingMap = useMemo(()=>({
             xs: ms(10),
             sm: ms(14),
             md: ms(14),
-            lg: ms(14)
+            lg: ms(14),
+            xl: ms(14)
         }), [
         ms
     ]);

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

@@ -13,7 +13,8 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
      * | xs     | 20     | 36     |
      * | sm     | 24     | 40     |
      * | md     | 30     | 44     |
-     * | lg     | 44     | 48     |
+     * | lg     | 36     | 46     |
+     * | xl     | 44     | 48     |
      *
      * fontSize
      * | size   | ux | street     |
@@ -21,9 +22,10 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
      * | xs     | 11      | 12     |
      * | sm     | 10     | 14     |
      * | md     | 12     | 16     |
-     * | lg     | 16     | 18     |
+     * | lg     | 14     | 16     |
+     * | xl     | 16     | 18     |
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'auto';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
     variant?: 'solid' | 'bordered' | 'flat' | 'text' | 'light';
     radius?: UXRadius;
     isDisabled?: boolean;

package/dist/components/UXSlider/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const THUMB_SIZE = 12;
+export declare const THUMB_INNER_SIZE = 8;
+export declare const TRACK_HEIGHT = 2;
+export declare const MARK_SIZE = 4;
+export declare const TOOLTIP_ARROW_SIZE = 6;
+export declare const TOOLTIP_MARGIN_BOTTOM = 4;
+export declare const LABEL_WIDTH = 40;

package/dist/components/UXSlider/constants.js

@@ -0,0 +1,8 @@
+const THUMB_SIZE = 12;
+const THUMB_INNER_SIZE = 8;
+const TRACK_HEIGHT = 2;
+const MARK_SIZE = 4;
+const TOOLTIP_ARROW_SIZE = 6;
+const TOOLTIP_MARGIN_BOTTOM = 4;
+const LABEL_WIDTH = 40;
+export { LABEL_WIDTH, MARK_SIZE, THUMB_INNER_SIZE, THUMB_SIZE, TOOLTIP_ARROW_SIZE, TOOLTIP_MARGIN_BOTTOM, TRACK_HEIGHT };

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

@@ -0,0 +1 @@
+export * from './slider';

package/dist/components/UXSlider/index.js

@@ -0,0 +1 @@
+export * from "./slider.js";

package/dist/components/UXSlider/slider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXSliderProps } from './slider.types';
+export declare const UXSlider: React.FC<UXSliderProps>;

package/dist/components/UXSlider/slider.js

@@ -0,0 +1,284 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import react_native_reanimated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useTheme } from "../../hooks/index.js";
+import { Box } from "../layout/index.js";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import { LABEL_WIDTH, MARK_SIZE, THUMB_SIZE } from "./constants.js";
+import { useStyles } from "./slider.styles.js";
+const UXSlider = ({ color = 'primary', minValue = 0, maxValue = 100, defaultValue, value: controlledValue, onChange, onChangeEnd, fillOffset, marks, showMarksSteps = true, step, showTooltip, getValue, ...restProps })=>{
+    const { colors } = useTheme();
+    const [trackWidth, setTrackWidth] = useState(0);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? minValue);
+    const [isDragging, setIsDragging] = useState(false);
+    const [tooltipWidth, setTooltipWidth] = useState(0);
+    const styles = useStyles({
+        color
+    });
+    let currentValue = void 0 !== controlledValue ? Math.max(minValue, Math.min(maxValue, controlledValue)) : internalValue;
+    if (!Number.isFinite(currentValue)) currentValue = fillOffset ?? minValue;
+    const thumbX = useSharedValue(0);
+    const trackWidthShared = useSharedValue(0);
+    const valueToPosition = useCallback((val)=>{
+        if (0 === trackWidth) return THUMB_SIZE / 2;
+        const usableWidth = trackWidth - THUMB_SIZE;
+        return THUMB_SIZE / 2 + (val - minValue) / (maxValue - minValue) * usableWidth;
+    }, [
+        trackWidth,
+        minValue,
+        maxValue
+    ]);
+    const valueToMarkThumbPosition = useCallback((val)=>{
+        if (0 === trackWidth) return MARK_SIZE / 2;
+        const usableWidth = trackWidth - MARK_SIZE;
+        return MARK_SIZE / 2 + (val - minValue) / (maxValue - minValue) * usableWidth;
+    }, [
+        trackWidth,
+        minValue,
+        maxValue
+    ]);
+    const positionToValueWorklet = (pos, width)=>{
+        'worklet';
+        if (0 === width) return minValue;
+        const usableWidth = width - THUMB_SIZE;
+        if (usableWidth <= 0) return minValue;
+        const adjustedPos = pos - THUMB_SIZE / 2;
+        const percentage = Math.max(0, Math.min(1, adjustedPos / usableWidth));
+        let val = minValue + percentage * (maxValue - minValue);
+        if (step && step > 0) {
+            val = Math.round(val / step) * step;
+            const decimals = (step.toString().split('.')[1] || '').length;
+            val = Number(val.toFixed(decimals));
+        }
+        return Math.max(minValue, Math.min(maxValue, val));
+    };
+    useEffect(()=>{
+        thumbX.value = valueToPosition(currentValue);
+    }, [
+        currentValue,
+        valueToPosition,
+        thumbX
+    ]);
+    useEffect(()=>{
+        trackWidthShared.value = trackWidth;
+    }, [
+        trackWidth,
+        trackWidthShared
+    ]);
+    const setDraggingTrue = useCallback(()=>setIsDragging(true), []);
+    const setDraggingFalse = useCallback(()=>setIsDragging(false), []);
+    const handleValueChange = useCallback((newValue)=>{
+        if (void 0 === controlledValue) setInternalValue(newValue);
+        onChange?.(newValue);
+    }, [
+        controlledValue,
+        onChange
+    ]);
+    const handleChangeEnd = useCallback((finalValue)=>{
+        onChangeEnd?.(finalValue);
+    }, [
+        onChangeEnd
+    ]);
+    const panGesture = Gesture.Pan().activeOffsetX([
+        -8,
+        8
+    ]).failOffsetY([
+        -16,
+        16
+    ]).onStart((event)=>{
+        'worklet';
+        scheduleOnRN(setDraggingTrue);
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+    }).onUpdate((event)=>{
+        'worklet';
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+        const newValue = positionToValueWorklet(touchX, trackWidthShared.value);
+        scheduleOnRN(handleValueChange, newValue);
+    }).onEnd(()=>{
+        'worklet';
+        scheduleOnRN(setDraggingFalse);
+        const finalValue = positionToValueWorklet(thumbX.value, trackWidthShared.value);
+        scheduleOnRN(handleChangeEnd, finalValue);
+    });
+    const tapGesture = Gesture.Tap().onEnd((event)=>{
+        'worklet';
+        if (event.y > THUMB_SIZE) return;
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+        const newValue = positionToValueWorklet(touchX, trackWidthShared.value);
+        scheduleOnRN(handleValueChange, newValue);
+        scheduleOnRN(handleChangeEnd, newValue);
+    });
+    const gesture = Gesture.Simultaneous(panGesture, tapGesture);
+    const labelBlockerGesture = Gesture.Native();
+    const thumbAnimatedStyle = useAnimatedStyle(()=>({
+            transform: [
+                {
+                    translateX: thumbX.value - THUMB_SIZE / 2
+                }
+            ]
+        }));
+    const fillAnimatedStyle = useAnimatedStyle(()=>{
+        if (void 0 !== fillOffset) {
+            const offsetPos = (fillOffset - minValue) / (maxValue - minValue) * trackWidthShared.value;
+            const currentPos = thumbX.value;
+            return currentPos >= offsetPos ? {
+                left: offsetPos,
+                width: currentPos - offsetPos
+            } : {
+                left: currentPos,
+                width: offsetPos - currentPos
+            };
+        }
+        return {
+            left: 0,
+            width: thumbX.value
+        };
+    });
+    const tooltipAnimatedStyle = useAnimatedStyle(()=>{
+        const left = thumbX.value - tooltipWidth / 2;
+        const clampedLeft = Math.max(0, Math.min(trackWidthShared.value - tooltipWidth, left));
+        return {
+            transform: [
+                {
+                    translateX: clampedLeft
+                }
+            ]
+        };
+    });
+    const getTooltipText = useCallback(()=>{
+        if (getValue) return getValue(currentValue);
+        return currentValue.toString();
+    }, [
+        currentValue,
+        getValue
+    ]);
+    const handleTrackLayout = (event)=>setTrackWidth(event.nativeEvent.layout.width);
+    const handleTooltipLayout = (event)=>setTooltipWidth(event.nativeEvent.layout.width);
+    const handleMarkLabelPress = useCallback((markValue)=>{
+        setIsDragging(false);
+        thumbX.value = valueToPosition(markValue);
+        handleValueChange(markValue);
+        handleChangeEnd(markValue);
+    }, [
+        thumbX,
+        valueToPosition,
+        handleValueChange,
+        handleChangeEnd
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        fullWidth: true,
+        ph: marks && marks.length > 0 && marks.some((mark)=>mark.value === maxValue) ? LABEL_WIDTH / 2 : 0,
+        ...restProps,
+        children: /*#__PURE__*/ jsx(GestureDetector, {
+            gesture: gesture,
+            children: /*#__PURE__*/ jsxs(react_native_reanimated.View, {
+                style: styles.gestureWrapper,
+                children: [
+                    /*#__PURE__*/ jsxs(View, {
+                        style: styles.trackContainer,
+                        onLayout: handleTrackLayout,
+                        children: [
+                            showTooltip && isDragging && /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.tooltipWrapper,
+                                    tooltipAnimatedStyle
+                                ],
+                                pointerEvents: "none",
+                                onLayout: handleTooltipLayout,
+                                children: /*#__PURE__*/ jsxs(View, {
+                                    style: styles.tooltip,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            color: "white",
+                                            children: getTooltipText()
+                                        }),
+                                        /*#__PURE__*/ jsx(View, {
+                                            style: styles.tooltipArrow
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                style: styles.track
+                            }),
+                            /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.fill,
+                                    fillAnimatedStyle
+                                ]
+                            }),
+                            showMarksSteps && marks?.map((mark, index)=>{
+                                const markPos = valueToMarkThumbPosition(mark.value);
+                                const isActive = void 0 !== fillOffset ? currentValue >= fillOffset && mark.value <= currentValue && mark.value >= fillOffset || currentValue < fillOffset && mark.value >= currentValue && mark.value <= fillOffset : mark.value <= currentValue;
+                                return /*#__PURE__*/ jsx(View, {
+                                    style: [
+                                        styles.mark,
+                                        {
+                                            left: markPos - MARK_SIZE / 2,
+                                            backgroundColor: isActive ? colors[color] : colors.tertiary
+                                        }
+                                    ]
+                                }, index);
+                            }),
+                            /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.thumb,
+                                    thumbAnimatedStyle
+                                ]
+                            })
+                        ]
+                    }),
+                    marks && marks.length > 0 && /*#__PURE__*/ jsx(GestureDetector, {
+                        gesture: labelBlockerGesture,
+                        children: /*#__PURE__*/ jsx(View, {
+                            style: styles.labelsContainer,
+                            children: marks.map((mark, index)=>{
+                                const isActive = void 0 !== fillOffset ? currentValue >= fillOffset && mark.value <= currentValue && mark.value >= fillOffset || currentValue < fillOffset && mark.value >= currentValue && mark.value <= fillOffset : mark.value <= currentValue;
+                                return /*#__PURE__*/ jsx(UXPressable, {
+                                    center: true,
+                                    style: [
+                                        styles.markLabelWrapper,
+                                        {
+                                            left: valueToMarkThumbPosition(mark.value) - LABEL_WIDTH / 2
+                                        }
+                                    ],
+                                    hitSlop: {
+                                        top: 8,
+                                        bottom: 8,
+                                        left: 8,
+                                        right: 8
+                                    },
+                                    onPress: ()=>handleMarkLabelPress(mark.value),
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        caption1: true,
+                                        style: [
+                                            {
+                                                color: isActive ? colors.foreground : colors.secondary
+                                            }
+                                        ],
+                                        numberOfLines: 1,
+                                        children: mark.label
+                                    })
+                                }, index);
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+export { UXSlider };

package/dist/components/UXSlider/slider.styles.d.ts

@@ -0,0 +1,92 @@
+import type { UXSliderProps } from './slider.types';
+export declare const useStyles: ({ color }: UXSliderProps) => {
+    gestureWrapper: {
+        width: "100%";
+    };
+    trackContainer: {
+        width: "100%";
+        justifyContent: "center";
+        position: "relative";
+        height: number;
+    };
+    track: {
+        width: "100%";
+        borderRadius: number;
+        position: "absolute";
+        backgroundColor: string;
+        height: number;
+    };
+    fill: {
+        position: "absolute";
+        borderRadius: number;
+        backgroundColor: string;
+        height: number;
+    };
+    mark: {
+        position: "absolute";
+        width: number;
+        height: number;
+        top: "50%";
+        marginTop: number;
+        borderRadius: number;
+    };
+    thumb: {
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        top: "50%";
+        marginTop: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+    };
+    labelsContainer: {
+        width: "100%";
+        height: number;
+        marginTop: number;
+        position: "relative";
+    };
+    markLabelWrapper: {
+        position: "absolute";
+        width: number;
+        overflow: "visible";
+    };
+    tooltipWrapper: {
+        position: "absolute";
+        left: number;
+        top: number;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    tooltip: {
+        position: "absolute";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: "center";
+        backgroundColor: string;
+        bottom: number;
+    };
+    tooltipArrow: {
+        position: "absolute";
+        bottom: number;
+        width: number;
+        height: number;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderTopWidth: number;
+        borderLeftColor: string;
+        borderRightColor: string;
+        borderTopColor: string;
+    };
+};

package/dist/components/UXSlider/slider.styles.js

@@ -0,0 +1,100 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../hooks/index.js";
+import { LABEL_WIDTH, MARK_SIZE, THUMB_SIZE, TOOLTIP_ARROW_SIZE, TOOLTIP_MARGIN_BOTTOM, TRACK_HEIGHT } from "./constants.js";
+const useStyles = ({ color })=>{
+    const { colors } = useTheme();
+    const colorValue = colors[color];
+    const styles = StyleSheet.create({
+        gestureWrapper: {
+            width: '100%'
+        },
+        trackContainer: {
+            width: '100%',
+            justifyContent: 'center',
+            position: 'relative',
+            height: THUMB_SIZE
+        },
+        track: {
+            width: '100%',
+            borderRadius: TRACK_HEIGHT / 2,
+            position: 'absolute',
+            backgroundColor: colors['bg-200'],
+            height: TRACK_HEIGHT
+        },
+        fill: {
+            position: 'absolute',
+            borderRadius: TRACK_HEIGHT / 2,
+            backgroundColor: colorValue,
+            height: TRACK_HEIGHT
+        },
+        mark: {
+            position: 'absolute',
+            width: MARK_SIZE,
+            height: MARK_SIZE,
+            top: '50%',
+            marginTop: -MARK_SIZE / 2,
+            borderRadius: 999
+        },
+        thumb: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: '50%',
+            marginTop: -THUMB_SIZE / 2,
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            borderRadius: 999,
+            shadowColor: '#000',
+            shadowOffset: {
+                width: 0,
+                height: 2
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 3,
+            elevation: 3,
+            backgroundColor: colorValue
+        },
+        labelsContainer: {
+            width: '100%',
+            height: 14,
+            marginTop: 6,
+            position: 'relative'
+        },
+        markLabelWrapper: {
+            position: 'absolute',
+            width: LABEL_WIDTH,
+            overflow: 'visible'
+        },
+        tooltipWrapper: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 100
+        },
+        tooltip: {
+            position: 'absolute',
+            paddingHorizontal: 12,
+            paddingVertical: 6,
+            borderRadius: 6,
+            alignItems: 'center',
+            backgroundColor: colorValue,
+            bottom: THUMB_SIZE / 2 + TOOLTIP_MARGIN_BOTTOM
+        },
+        tooltipArrow: {
+            position: 'absolute',
+            bottom: -TOOLTIP_ARROW_SIZE + 1,
+            width: 0,
+            height: 0,
+            borderLeftWidth: TOOLTIP_ARROW_SIZE,
+            borderRightWidth: TOOLTIP_ARROW_SIZE,
+            borderTopWidth: TOOLTIP_ARROW_SIZE,
+            borderLeftColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderTopColor: colorValue
+        }
+    });
+    return styles;
+};
+export { useStyles };

package/dist/components/UXSlider/slider.types.d.ts

@@ -0,0 +1,30 @@
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { BoxProps } from '../layout';
+export interface UXSliderProps extends BoxProps {
+    color?: Exclude<UXForegroundColor, 'default' | 'white'>;
+    minValue?: number;
+    maxValue?: number;
+    defaultValue?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    /**
+     * 起始填充的偏移量
+     */
+    fillOffset?: number;
+    /**
+     * 滑杆底部标记点
+     */
+    marks?: {
+        value: number;
+        label: string;
+    }[];
+    /** 是否显示滑杆上标记记点 */
+    showMarksSteps?: boolean;
+    /** 拖动步长 */
+    step?: number;
+    /** 拖动时是否显示气泡提示框 */
+    showTooltip?: boolean;
+    /** 格式化 value，用于显示 tooltip 的文本 */
+    getValue?: (value: number) => string;
+}

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

@@ -1,16 +1,11 @@
 import React from 'react';
 import { type UXTabsProps } from '../UXTabs';
-interface UXTabSwitchProps {
-    tabStyle?: UXTabsProps['tabStyle'];
-    containerStyle?: UXTabsProps['containerStyle'];
-    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,19 +3,15 @@ import "react";
 import { useI18n } from "../../hooks/useI18n.js";
 import { UXTab, UXTabs } from "../UXTabs/index.js";
 const UXTabSwitch = (props)=>{
-    const { tabStyle, containerStyle, 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, {
-        tabStyle: tabStyle,
-        containerStyle: containerStyle,
-        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/date-picker/date-picker.js

@@ -70,7 +70,7 @@ const UXDatePicker = ({ title, value, defaultValue, defaultInternalValue, onChan
                 footer: /*#__PURE__*/ jsx(UXButton, {
                     fullWidth: true,
                     color: "primary",
-                    size: "lg",
+                    size: "xl",
                     onPress: handleConfirm,
                     children: i18n.datePicker.confirm
                 }),

package/dist/components/date-picker/date-range-picker.js

@@ -122,7 +122,7 @@ const UXDateRangePicker = ({ title, value, defaultValue, defaultInternalValue, o
                         /*#__PURE__*/ jsx(UXButton, {
                             fullWidth: true,
                             color: "primary",
-                            size: "lg",
+                            size: "xl",
                             onPress: handleConfirm,
                             children: i18n.datePicker.confirm
                         })

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './UXListBox';
 export * from './UXModal';
 export * from './UXPressable';
 export * from './UXRadio';
+export * from './UXSlider';
 export * from './UXSpinner';
 export * from './UXSwitch';
 export * from './UXTabs';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export * from "./UXListBox/index.js";
 export * from "./UXModal/index.js";
 export * from "./UXPressable/index.js";
 export * from "./UXRadio/index.js";
+export * from "./UXSlider/index.js";
 export * from "./UXSpinner/index.js";
 export * from "./UXSwitch/index.js";
 export * from "./UXTabs/index.js";

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 { Platform, TextInput } from "react-native";
+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,16 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isInvalid,
         isFocused
     });
+    useEffect(()=>{
+        if ('web' === Platform.OS) return;
+        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 +89,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 +98,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/config/config.default.js

@@ -5,13 +5,15 @@ const defaultComponentConfig = {
             xs: 20,
             sm: 24,
             md: 30,
-            lg: 44
+            lg: 36,
+            xl: 44
         },
         fontSize: {
             xs: 11,
             sm: 10,
             md: 12,
-            lg: 16
+            lg: 14,
+            xl: 16
         },
         color: {
             default: {

package/dist/config/config.street.js

@@ -7,13 +7,15 @@ const streetComponentConfig = {
             xs: 36,
             sm: 40,
             md: 44,
-            lg: 48
+            lg: 46,
+            xl: 48
         },
         fontSize: {
             xs: 12,
             sm: 14,
             md: 16,
-            lg: 18
+            lg: 16,
+            xl: 18
         },
         color: {
             default: {

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/dist/types/theme.d.ts

@@ -10,12 +10,14 @@ export interface CommonComponentConfig {
         sm: number;
         md: number;
         lg: number;
+        xl?: number;
     };
     fontSize: {
         xs?: number;
         sm: number;
         md: number;
         lg: number;
+        xl?: number;
     };
     color: Record<string, {
         background: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.4.2-beta.9",
+  "version": "0.5.1-beta.0",
   "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.7",
-    "@particle-network/ui-shared": "0.3.2-beta.3"
+    "react-native-worklets": "0.5.1",
+    "@particle-network/icons": "0.5.1-beta.0",
+    "@particle-network/ui-shared": "0.4.0"
   },
   "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/icons": "0.4.2-beta.7",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/icons": "0.5.1-beta.0",
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",