@particle-network/ui-native 0.5.1-beta.1 → 0.5.1-beta.10

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import type { UXForegroundColor, UXRadius } from '@particle-network/ui-shared';
+import type { HexColor, UXForegroundColor, UXRadius } from '@particle-network/ui-shared';
 import { type FlexProps } from '../layout/Flex';
 export interface ProgressWrapperProps extends Omit<FlexProps, 'radius' | 'width' | 'height' | 'w' | 'h'> {
     /**
@@ -26,7 +26,7 @@ export interface ProgressWrapperProps extends Omit<FlexProps, 'radius' | 'width'
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent' | `#${string}`;
+    color?: UXForegroundColor | 'transparent' | HexColor;
     /**
      * SVG 样式
      */

package/dist/components/Text/text.types.d.ts

@@ -1,5 +1,5 @@
 import type { TextProps as RNTextProps, TextStyle } from 'react-native';
-import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { HexColor, UXForegroundColor } from '@particle-network/ui-shared';
 import type { UseBoxProps } from '../layout/Box';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
 type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
@@ -76,7 +76,7 @@ export interface TextProps extends RNTextProps, UseBoxProps {
      * | extrabold | 800         |
      */
     fontWeight?: TextWeight;
-    color?: UXForegroundColor | `#${string}`;
+    color?: UXForegroundColor | HexColor;
     lineHeight?: TextLineHeight;
     align?: TextAlign;
     underlineStyle?: TextStyle['textDecorationStyle'];

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

@@ -112,7 +112,7 @@ const useStyles = (props)=>{
         }
         if ('solid' === variant) {
             if (customColorConfig) return customColorConfig.text;
-            if ('contrast' === color) return 'bg-default';
+            if ('contrast' === color) return 'bgDefault';
             return 'white';
         }
         return color;
@@ -129,7 +129,7 @@ const useStyles = (props)=>{
     const backgroundColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
         if (isSelected) {
-            if ('secondary' === color && 'solid' === variant) return getColor('tertiary');
+            if ('secondary' === color && 'solid' === variant) return getColor('cursor');
         }
         if ('solid' === variant) {
             if (customColorConfig) return getColor(customColorConfig.background);
@@ -138,7 +138,7 @@ const useStyles = (props)=>{
                 'default',
                 'secondary'
             ].includes(color)) return getColor(color);
-            return getColor('bg-200');
+            return getColor('bg200');
         }
         if ('flat' === variant) {
             if (customColorConfig) return `${getColor(customColorConfig.background)}20`;
@@ -146,7 +146,7 @@ const useStyles = (props)=>{
             if ([
                 'default',
                 'secondary'
-            ].includes(color)) return getColor('bg-300');
+            ].includes(color)) return getColor('bg300');
             return `${getColor(color)}20`;
         }
         return 'transparent';
@@ -163,7 +163,7 @@ const useStyles = (props)=>{
                 'default',
                 'secondary'
             ].includes(color)) return getColor('secondary');
-            if ('contrast' === color) return getColor('bg-default');
+            if ('contrast' === color) return getColor('bgDefault');
             return getColor(color);
         }
         return 'transparent';

package/dist/components/UXCheckbox/checkbox.js

@@ -23,7 +23,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     const checkboxColor = color || groupContext?.color || 'primary';
     const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
     const bgColor = useMemo(()=>{
-        if ('secondary' === checkboxColor) return 'tertiary';
+        if ('secondary' === checkboxColor) return 'cursor';
         return checkboxColor;
     }, [
         checkboxColor
@@ -52,9 +52,9 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         ms
     ]);
     const labelVariant = useMemo(()=>{
-        if ('sm' === checkboxSize) return 'body3';
-        if ('lg' === checkboxSize) return 'body1';
-        return 'body2';
+        if ('sm' === checkboxSize) return 'body2Bold';
+        if ('lg' === checkboxSize) return 'body1Bold';
+        return 'body2Bold';
     }, [
         checkboxSize
     ]);
@@ -64,6 +64,12 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     }, [
         displayLabelPlacement
     ]);
+    const gap = useMemo(()=>{
+        if ('sm' === checkboxSize) return 6;
+        return 8;
+    }, [
+        checkboxSize
+    ]);
     return /*#__PURE__*/ jsx(UXPressable, {
         disabled: checkboxIsDisabled,
         style: {
@@ -72,7 +78,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         onPress: handleSelectChange,
         children: /*#__PURE__*/ jsxs(Flex, {
             direction: flexDirection,
-            gap: 8,
+            gap: gap,
             items: "center",
             ...props,
             children: [

package/dist/components/UXCheckbox/icons.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import react_native_svg, { Path } from "react-native-svg";
+import react_native_svg, { Path, Rect } from "react-native-svg";
 import { useColors } from "../../hooks/index.js";
 const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
     const { getColor } = useColors();
@@ -8,16 +8,18 @@ const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
     const color2Value = getColor(color2);
     return /*#__PURE__*/ jsxs(react_native_svg, {
         fill: "none",
-        viewBox: "0 0 16 16",
+        viewBox: "0 0 18 18",
         width: size,
         height: size,
         children: [
-            /*#__PURE__*/ jsx(Path, {
-                d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
+            /*#__PURE__*/ jsx(Rect, {
+                width: 18,
+                height: 18,
+                rx: 2.25,
                 fill: color1Value
             }),
             /*#__PURE__*/ jsx(Path, {
-                d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
+                d: "M7.82501 10.225L5.67501 8.075C5.49168 7.89167 5.25834 7.8 4.97501 7.8C4.69168 7.8 4.45834 7.89167 4.27501 8.075C4.09168 8.25833 4.00001 8.49167 4.00001 8.775C4.00001 9.05833 4.09168 9.29167 4.27501 9.475L7.12501 12.325C7.32501 12.525 7.55835 12.625 7.82501 12.625C8.09168 12.625 8.32501 12.525 8.52501 12.325L14.175 6.675C14.3583 6.49167 14.45 6.25833 14.45 5.975C14.45 5.69167 14.3583 5.45833 14.175 5.275C13.9917 5.09167 13.7583 5 13.475 5C13.1917 5 12.9583 5.09167 12.775 5.275L7.82501 10.225Z",
                 fill: color2Value
             })
         ]
@@ -27,14 +29,18 @@ const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
     const { getColor } = useColors();
     const colorValue = getColor(color);
     return /*#__PURE__*/ jsx(react_native_svg, {
+        viewBox: "0 0 18 18",
         fill: "none",
-        viewBox: "0 0 16 16",
         width: size,
         height: size,
-        children: /*#__PURE__*/ jsx(Path, {
-            d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
+        children: /*#__PURE__*/ jsx(Rect, {
+            x: 0.7,
+            y: 0.7,
+            width: 16.6,
+            height: 16.6,
+            rx: 1.55,
             stroke: colorValue,
-            strokeWidth: 1.23077
+            strokeWidth: 1.4
         })
     });
 };

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

@@ -1,5 +1,5 @@
 export interface UXCheckboxCommonProps {
-    color?: 'secondary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'gold' | 'bullish' | 'bearish';
+    color?: 'secondary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'bullish' | 'bearish';
     size?: 'sm' | 'md' | 'lg';
     isDisabled?: boolean;
     labelPlacement?: 'left' | 'right';

package/dist/components/UXChip/styles.js

@@ -44,13 +44,13 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
         if ('solid' === variant) {
             if ([
                 'default'
-            ].includes(color)) return getColor('bg-200');
+            ].includes(color)) return getColor('bg200');
             return getColor(color);
         }
         if ('flat' === variant) {
             if ([
                 'default'
-            ].includes(color)) return getColor('bg-300');
+            ].includes(color)) return getColor('bg300');
             return `${getColor(color)}20`;
         }
         return 'transparent';

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

@@ -1,8 +1,8 @@
 import type React from 'react';
-import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { HexColor, UXForegroundColor } from '@particle-network/ui-shared';
 import type { HStackProps } from '../layout/HStack';
 export interface UXChipProps extends HStackProps {
-    color?: UXForegroundColor | `#${string}`;
+    color?: UXForegroundColor | HexColor;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'flat';
     isDisabled?: boolean;

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { IconProps } from '../../icons/types';
+import CircleQuestionIcon from '@particle-network/icons/native/CircleQuestionIcon';
 import type { SquareProps } from '../layout/Square';
 import { type UXTooltipProps } from '../UXTooltip';
 export type UXHintProps = UXTooltipProps & {
     style?: SquareProps['style'];
-    iconStyle?: IconProps['style'];
+    iconStyle?: React.ComponentProps<typeof CircleQuestionIcon>['style'];
+    iconColor?: React.ComponentProps<typeof CircleQuestionIcon>['color'];
 };
 export declare const UXHint: React.FC<UXHintProps>;

package/dist/components/UXHint/index.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
+import CircleQuestionIcon from "@particle-network/icons/native/CircleQuestionIcon";
 import { useMs } from "../../hooks/index.js";
-import { Icon } from "../../icons/index.js";
 import { Square } from "../layout/Square.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
-    const { content, children, iconStyle, style, ...restProps } = props;
+    const { content, children, iconStyle, iconColor = 'secondary', style, ...restProps } = props;
     const { ms } = useMs();
     return /*#__PURE__*/ jsx(UXTooltip, {
         content: content || children,
@@ -14,9 +14,8 @@ const UXHint = (props)=>{
             center: true,
             size: 16,
             style: style,
-            children: /*#__PURE__*/ jsx(Icon, {
-                name: "question",
-                color: "secondary",
+            children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
+                color: iconColor,
                 size: ms(14),
                 style: iconStyle
             })

package/dist/components/UXModal/index.js

@@ -246,7 +246,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
                         onTouchMove: onTouchMoveSideLine,
                         onTouchStart: onTouchStartSideLine,
                         children: /*#__PURE__*/ jsx(Box, {
-                            bg: "tertiary",
+                            bg: "cursor",
                             h: 4,
                             radius: "full",
                             w: 40

package/dist/components/UXRadio/radio.js

@@ -23,7 +23,8 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
         if ('lg' === radioSize) return ms(14);
         return ms(12);
     }, [
-        radioSize
+        radioSize,
+        ms
     ]);
     const labelVariant = useMemo(()=>{
         if ('sm' === radioSize) return 'body3';
@@ -32,12 +33,6 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
     }, [
         radioSize
     ]);
-    const gap = useMemo(()=>{
-        if ('sm' === radioSize) return 6;
-        return 8;
-    }, [
-        radioSize
-    ]);
     return /*#__PURE__*/ jsx(Pressable, {
         disabled: radioIsDisabled,
         style: {
@@ -45,7 +40,7 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
         },
         onPress: handleSelectChange,
         children: /*#__PURE__*/ jsxs(Flex, {
-            gap: gap,
+            gap: 4,
             items: "center",
             ...props,
             children: [

package/dist/components/UXSlider/slider.js

@@ -228,7 +228,7 @@ const UXSlider = ({ color = 'primary', minValue = 0, maxValue = 100, defaultValu
                                         styles.mark,
                                         {
                                             left: markPos - MARK_SIZE / 2,
-                                            backgroundColor: isActive ? colors[color] : colors.tertiary
+                                            backgroundColor: isActive ? colors[color] : colors.secondary
                                         }
                                     ]
                                 }, index);

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

@@ -18,7 +18,7 @@ const useStyles = ({ color })=>{
             width: '100%',
             borderRadius: TRACK_HEIGHT / 2,
             position: 'absolute',
-            backgroundColor: colors['bg-200'],
+            backgroundColor: colors.bg200,
             height: TRACK_HEIGHT
         },
         fill: {

package/dist/components/UXSwitch/switch.js

@@ -77,7 +77,7 @@ const UXSwitch = (props)=>{
                 style: [
                     styles.track,
                     {
-                        backgroundColor: isSelected ? getColor(color) : getColor('tertiary')
+                        backgroundColor: isSelected ? getColor(color) : getColor('cursor')
                     }
                 ],
                 children: /*#__PURE__*/ jsx(Animated.View, {

package/dist/components/UXTabs/styles.js

@@ -80,8 +80,8 @@ const useStyles = (props)=>{
         ms
     ]);
     const wrapperBackgroundColor = useMemo(()=>{
-        if ('switch' === variant) return getColor('bg-200');
-        if ('solid' === variant) return getColor('bg-200');
+        if ('switch' === variant) return getColor('bg200');
+        if ('solid' === variant) return getColor('bg200');
         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 ('light' === variant) return getColor('bg-200');
-            return getColor('tertiary');
+            if ('light' === variant) return getColor('bg200');
+            return getColor('cursor');
         }
         return getColor(color);
     }, [

package/dist/components/UXToast/ToastView.d.ts

@@ -4,6 +4,7 @@ import type { ToastProps } from './types';
 interface ToastViewProps {
     type: ToastType;
     text: string;
+    text2?: string;
     props?: ToastProps;
 }
 export declare const ToastView: React.FC<ToastViewProps>;

package/dist/components/UXToast/ToastView.js

@@ -1,19 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import react_native_toast_message from "react-native-toast-message";
-import { Flex } from "../layout/Flex/index.js";
-import { HStack } from "../layout/HStack.js";
+import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../Text/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { useComponentConfig, useTheme } from "../../hooks/index.js";
 import { Icon } from "../../icons/index.js";
 import { ToastIcon } from "./ToastIcon.js";
-const ToastView = ({ type, text, props: toastProps })=>{
-    const { btnText, numberOfLines = 4, colorBg, onPress = ()=>null } = toastProps ?? {};
+const ToastView = ({ type, text, text2, props: toastProps })=>{
+    const { btnText, numberOfLines = 10, colorBg, onPress = ()=>null } = toastProps ?? {};
     const { toast: toastConfig } = useComponentConfig();
     const { colors } = useTheme();
     const bg = useMemo(()=>{
-        if (!colorBg) return colors.tertiary;
+        if (!colorBg) return colors.cursor;
         if ('success' === type) return '#0E3728';
         if ('error' === type) return '#501D1D';
     }, [
@@ -39,14 +38,23 @@ const ToastView = ({ type, text, props: toastProps })=>{
                 /*#__PURE__*/ jsx(ToastIcon, {
                     type: type
                 }),
-                /*#__PURE__*/ jsx(Flex, {
+                /*#__PURE__*/ jsxs(VStack, {
                     shrink: 1,
-                    children: /*#__PURE__*/ jsx(Text, {
-                        body2Bold: true,
-                        color: colorBg ? 'white' : 'foreground',
-                        numberOfLines: numberOfLines,
-                        children: text
-                    })
+                    gap: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            body2Bold: true,
+                            color: colorBg ? 'white' : 'foreground',
+                            numberOfLines: 2,
+                            children: text
+                        }),
+                        text2 && /*#__PURE__*/ jsx(Text, {
+                            body3: true,
+                            color: "secondary",
+                            numberOfLines: numberOfLines,
+                            children: text2
+                        })
+                    ]
                 }),
                 btnText && onPress ? /*#__PURE__*/ jsx(UXButton, {
                     variant: "text",

package/dist/components/UXToast/toastConfig.d.ts

@@ -1,16 +1,19 @@
 import React from 'react';
 import type { ToastProps } from './types';
 export declare const toastConfig: {
-    success: ({ text1, props }: {
+    success: ({ text1, text2, props }: {
         text1: string;
+        text2?: string;
         props?: ToastProps;
     }) => React.JSX.Element;
-    error: ({ text1, props }: {
+    error: ({ text1, text2, props }: {
         text1: string;
+        text2?: string;
         props?: ToastProps;
     }) => React.JSX.Element;
-    loading: ({ text1, props }: {
+    loading: ({ text1, text2, props }: {
         text1: string;
+        text2?: string;
         props?: ToastProps;
     }) => React.JSX.Element;
 };

package/dist/components/UXToast/toastConfig.js

@@ -2,19 +2,22 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { ToastView } from "./ToastView.js";
 const toastConfig = {
-    success: ({ text1, props })=>/*#__PURE__*/ jsx(ToastView, {
+    success: ({ text1, text2, props })=>/*#__PURE__*/ jsx(ToastView, {
             type: "success",
             text: text1,
+            text2: text2,
             props: props
         }),
-    error: ({ text1, props })=>/*#__PURE__*/ jsx(ToastView, {
+    error: ({ text1, text2, props })=>/*#__PURE__*/ jsx(ToastView, {
             type: "error",
             text: text1,
+            text2: text2,
             props: props
         }),
-    loading: ({ text1, props })=>/*#__PURE__*/ jsx(ToastView, {
+    loading: ({ text1, text2, props })=>/*#__PURE__*/ jsx(ToastView, {
             type: "loading",
             text: text1,
+            text2: text2,
             props: props
         })
 };

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

@@ -8,8 +8,8 @@ const DateButton = ({ isSelected, text, ...props })=>/*#__PURE__*/ jsx(UXPressab
         border: 1,
         h: 30,
         radius: 4,
-        borderColor: isSelected ? 'primary' : 'bg-200',
-        bg: "bg-200",
+        borderColor: isSelected ? 'primary' : 'bg200',
+        bg: "bg200",
         ...props,
         children: /*#__PURE__*/ jsx(Text, {
             body3Bold: true,

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 { Platform, TextInput } from "react-native";
-import { useColors, useI18n, useKeyboard } from "../../hooks/index.js";
+import { useI18n, useKeyboard, useTheme } from "../../hooks/index.js";
 import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
@@ -10,7 +10,7 @@ import { UXPressable } from "../UXPressable/index.js";
 import { useStyles } from "./styles.js";
 const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isClearable, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
-    const { getColor } = useColors();
+    const { colors } = useTheme();
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [isFocused, setIsFocused] = useState(false);
@@ -143,7 +143,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         ref: inputRef,
                         allowFontScaling: false,
                         editable: !isDisabled && !isReadOnly,
-                        placeholderTextColor: getColor('tertiary'),
+                        placeholderTextColor: colors.cursor,
                         cursorColor: styles.container.borderColor,
                         selectionColor: `${styles.container.borderColor}90`,
                         style: [

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

@@ -239,7 +239,7 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         allowFontScaling: false,
                         editable: !isDisabled && !isReadOnly,
                         keyboardType: keyboardType,
-                        placeholderTextColor: getColor('tertiary'),
+                        placeholderTextColor: getColor('cursor'),
                         cursorColor: styles.container.borderColor,
                         selectionColor: `${styles.container.borderColor}90`,
                         style: [

package/dist/components/input/styles.js

@@ -60,7 +60,7 @@ const useStyles = (props)=>{
         isColorText,
         color
     ]);
-    const backgroundColor = useMemo(()=>getColor('bg-200'), [
+    const backgroundColor = useMemo(()=>getColor('bg200'), [
         getColor
     ]);
     const containerPadding = useMemo(()=>{

package/dist/components/layout/Box/useBox.style.js

@@ -1,7 +1,7 @@
 import { useColors, useMs, useRadius, useSpacing } from "../../../hooks/index.js";
 import { useShadow } from "../../../hooks/useShadow.js";
 const useBoxStyle = (props)=>{
-    const { fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow } = props;
+    const { fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, px, py, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow } = props;
     const { ms: uxms } = useMs();
     const { getColor } = useColors();
     const { getSpacing } = useSpacing();
@@ -25,8 +25,8 @@ const useBoxStyle = (props)=>{
     styleObj.marginLeft = getSpacing(ml);
     styleObj.marginStart = getSpacing(ms);
     styleObj.marginEnd = getSpacing(me);
-    styleObj.marginHorizontal = getSpacing(mh);
-    styleObj.marginVertical = getSpacing(mv);
+    styleObj.marginHorizontal = getSpacing(mh || px);
+    styleObj.marginVertical = getSpacing(mv || py);
     styleObj.padding = getSpacing(p);
     styleObj.paddingTop = getSpacing(pt);
     styleObj.paddingRight = getSpacing(pr);

package/dist/components/layout/Box/useBox.type.d.ts

@@ -1,5 +1,5 @@
 import type { ViewStyle } from 'react-native';
-import type { RadiusType, SpacingType, UXColor } from '@particle-network/ui-shared';
+import type { HexColor, RadiusType, SpacingType, UXColor } from '@particle-network/ui-shared';
 export interface UseBoxProps {
     /**
      * Shorthand for the `width=100%` style property.
@@ -101,10 +101,12 @@ export interface UseBoxProps {
      * Shorthand for the `paddingHorizontal` style property.
      */
     ph?: SpacingType;
+    px?: SpacingType;
     /**
      * Shorthand for the `paddingVertical` style property.
      */
     pv?: SpacingType;
+    py?: SpacingType;
     /**
      * Shorthand for the `borderStyle` style property.
      */
@@ -140,31 +142,31 @@ export interface UseBoxProps {
     /**
      * Shorthand for the `borderColor` style property.
      */
-    borderColor?: UXColor | `#${string}`;
+    borderColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderTopColor` style property.
      */
-    borderTopColor?: UXColor | `#${string}`;
+    borderTopColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderRightColor` style property.
      */
-    borderRightColor?: UXColor | `#${string}`;
+    borderRightColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderBottomColor` style property.
      */
-    borderBottomColor?: UXColor | `#${string}`;
+    borderBottomColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderLeftColor` style property.
      */
-    borderLeftColor?: UXColor | `#${string}`;
+    borderLeftColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderStartColor` style property.
      */
-    borderStartColor?: UXColor | `#${string}`;
+    borderStartColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderEndColor` style property.
      */
-    borderEndColor?: UXColor | `#${string}`;
+    borderEndColor?: UXColor | HexColor;
     /**
      * Shorthand for the `borderRadius` style property.
      */
@@ -232,7 +234,7 @@ export interface UseBoxProps {
     /**
      * Shorthand for the `backgroundColor` style property.
      */
-    bg?: UXColor | `#${string}`;
+    bg?: UXColor | HexColor;
     /**
      * 背景色透明度
      * @example bgOpacity={0.2}

package/dist/config/config.default.js

@@ -17,11 +17,11 @@ const defaultComponentConfig = {
         },
         color: {
             default: {
-                background: 'bg-200',
+                background: 'bg200',
                 text: 'default'
             },
             secondary: {
-                background: 'bg-200',
+                background: 'bg200',
                 text: 'secondary'
             }
         }

package/dist/config/config.street.js

@@ -20,10 +20,10 @@ const streetComponentConfig = {
         color: {
             default: {
                 background: 'foreground',
-                text: 'bg-default'
+                text: 'bgDefault'
             },
             secondary: {
-                background: 'bg-200',
+                background: 'bg200',
                 text: 'foreground'
             }
         }
@@ -45,7 +45,7 @@ const streetComponentConfig = {
     },
     modal: {
         radius: 34,
-        bg: 'bg-default',
+        bg: 'bgDefault',
         backdrop: {
             light: '#00000050',
             dark: '#1f1f2370'

package/dist/hooks/useColors.d.ts

@@ -1,7 +1,7 @@
-import { type UXColor } from '@particle-network/ui-shared';
+import { type HexColor, type UXColor } from '@particle-network/ui-shared';
 /**
  * 颜色工具 Hook
  */
 export declare function useColors(): {
-    getColor: (name?: UXColor | `#${string}`, opacity?: number) => string | undefined;
+    getColor: (name?: UXColor | HexColor, opacity?: number) => string | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.5.1-beta.1",
+  "version": "0.5.1-beta.10",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -45,8 +45,8 @@
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
     "react-native-worklets": "0.5.1",
-    "@particle-network/icons": "0.5.1-beta.1",
-    "@particle-network/ui-shared": "0.4.1-beta.0"
+    "@particle-network/icons": "0.5.1-beta.7",
+    "@particle-network/ui-shared": "0.4.1-beta.6"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -89,9 +89,9 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/icons": "0.5.1-beta.1",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/icons": "0.5.1-beta.7",
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",