@particle-network/ui-native 0.0.12 → 0.0.13

package/dist/components/UXChip/styles.js

@@ -1,20 +1,20 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
-import { useColors } from "../../hooks/index.js";
+import { useColors, useMs } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
-const sizeMap = {
-    sm: ms(14),
-    md: ms(16),
-    lg: ms(18)
-};
-const fontSizeMap = {
-    sm: ms(11),
-    md: ms(12),
-    lg: ms(14)
-};
 const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisabled })=>{
     const { getColor } = useColors();
+    const { ms } = useMs();
+    const sizeMap = {
+        sm: ms(14),
+        md: ms(16),
+        lg: ms(18)
+    };
+    const fontSizeMap = {
+        sm: ms(11),
+        md: ms(12),
+        lg: ms(14)
+    };
     const height = useMemo(()=>sizeMap[size], [
         size
     ]);
@@ -67,4 +67,4 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
     });
     return styles;
 };
-export { fontSizeMap, sizeMap, useStyles };
+export { useStyles };

package/dist/components/UXHint/index.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 import QuestionIcon from "../../icons/QuestionIcon.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
     const { content, children, iconStyle, ...restProps } = props;
+    const { ms } = useMs();
     return /*#__PURE__*/ jsx(UXTooltip, {
         content: content || children,
         ...restProps,

package/dist/components/UXListBox/UXListBoxItem.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 import CheckIcon from "../../icons/CheckIcon.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
@@ -8,6 +8,7 @@ import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
 import { ListBoxContext } from "./UXListBox.js";
 const disabledOpacity = 0.4;
 const UXListBoxItem = ({ value = '', startContent, isDisabled = false, onPress, children })=>{
+    const { ms } = useMs();
     const context = useContext(ListBoxContext);
     const { selectedValues, selectionMode, disabledKeys, onItemPress } = context;
     const isSelected = selectedValues.has(value);

package/dist/components/UXModal/index.js

@@ -3,18 +3,20 @@ import react, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Dimensions, PanResponder, Platform, ScrollView, StyleSheet } from "react-native";
 import { Modal, Portal } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ms } from "react-native-size-matters";
-import { useColors, useKeyboard } from "../../hooks/index.js";
+import { useColors, useComponentConfig, useKeyboard, useMs } from "../../hooks/index.js";
 import { Box } from "../layout/Box/index.js";
 import { Circle } from "../layout/Circle.js";
 import { Flex } from "../layout/Flex/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
 import { Text } from "../Text/index.js";
+import { setColorWithOpacity } from "@particle-network/ui-shared";
 const { height } = Dimensions.get('window');
 const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
     const { style, contentStyle, isOpen, title, titleAlign = 'left', onClose, onVisibleChange, children, disableCloseBySwipe, closeByLineOnly, wrapPortal, footer, modalName, tip, keyboardAvoidPosition = 'container' } = props;
+    const { modal: modalConfig } = useComponentConfig();
     const { getColor } = useColors();
+    const { ms } = useMs();
     const insets = useSafeAreaInsets();
     const { keyboardHeight } = useKeyboard();
     const translateY = useRef(new Animated.Value(height)).current;
@@ -147,8 +149,8 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
         },
         container: {
             paddingHorizontal: ms(14),
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
+            borderTopLeftRadius: modalConfig.radius,
+            borderTopRightRadius: modalConfig.radius,
             flex: 1,
             gap: ms(20),
             backgroundColor: getColor('overlay'),
@@ -183,7 +185,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
             ],
             theme: {
                 colors: {
-                    backdrop: 'rgba(0, 0, 0, 0.8)'
+                    backdrop: setColorWithOpacity(getColor('bg-200') ?? '#000000', 0.7)
                 }
             },
             visible: isOpen,

package/dist/components/UXRadio/radio.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Pressable } from "react-native";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 import RadioOffIcon from "../../icons/RadioOffIcon.js";
 import RadioOnIcon from "../../icons/RadioOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
@@ -9,6 +9,7 @@ import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
 import { useRadioGroup } from "./context.js";
 const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
+    const { ms } = useMs();
     const groupContext = useRadioGroup();
     const { selectedValue, size: groupSize, color: groupColor, onValueChange, isDisabled: groupIsDisabled } = groupContext;
     const isSelected = selectedValue === value;

package/dist/components/UXSwitch/styles.js

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Animated, StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 const useStyles = ({ size = 'md', isSelected = false })=>{
+    const { ms } = useMs();
     const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
     useEffect(()=>{
         Animated.timing(animatedValue, {

package/dist/components/UXSwitch/switch.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Animated } from "react-native";
-import { ms } from "react-native-size-matters";
 import useUpdateEffect from "ahooks/es/useUpdateEffect";
-import { useColors } from "../../hooks/index.js";
+import { useColors, useMs } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Text } from "../Text/index.js";
 import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
 import { useStyles } from "./styles.js";
 const UXSwitch = (props)=>{
     const { color = 'primary', size = 'md', defaultSelected = false, isSelected: isSelectedProps = false, onValueChange, isReadOnly, isDisabled, children, ...flexProps } = props;
+    const { ms } = useMs();
     const [isSelected, setIsSelected] = useState(isSelectedProps || defaultSelected);
     useUpdateEffect(()=>{
         setIsSelected(isSelectedProps);

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

@@ -8,7 +8,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
         flex: number;
         justifyContent: "flex-start" | "space-between";
         borderRadius: number | undefined;
-        height: number;
+        height: number | undefined;
         padding: number;
         opacity: number;
     };
@@ -27,4 +27,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
         fontWeight: "500";
         color: string | undefined;
     };
+    underline: {
+        backgroundColor: string | undefined;
+    };
 };

package/dist/components/UXTabs/styles.js

@@ -1,21 +1,15 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
-import { useColors, useRadius } from "../../hooks/index.js";
+import { useColors, useComponentConfig, useMs, useRadius } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
-    const { size = 'md', radius, fullWidth, variant = 'solid', color = 'default', isDisabled, isSelected, w, gap } = props;
+    const { tabs: tabsConfig } = useComponentConfig();
+    const { size = 'md', radius = tabsConfig.defaultProps?.radius, fullWidth, variant = 'solid', color = 'default', isDisabled, isSelected, w, gap } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
+    const { ms } = useMs();
     const height = useMemo(()=>{
-        if ('text' === variant) switch(size){
-            case 'sm':
-                return ms(16);
-            case 'lg':
-                return ms(20);
-            default:
-                return ms(18);
-        }
+        if ('text' === variant || 'underlined' === variant) return;
         if ('solid' === variant) switch(size){
             case 'sm':
                 return ms(24);
@@ -34,22 +28,16 @@ const useStyles = (props)=>{
         }
     }, [
         size,
-        variant
+        variant,
+        ms
     ]);
-    const fontSize = useMemo(()=>{
-        switch(size){
-            case 'sm':
-                return ms(12);
-            case 'lg':
-                return ms(16);
-            default:
-                return ms(14);
-        }
-    }, [
-        size
+    const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
+        size,
+        ms,
+        tabsConfig.fontSize
     ]);
     const paddingHorizontal = useMemo(()=>{
-        if ('text' === variant) return 0;
+        if ('text' === variant || 'underlined' === variant) return 0;
         switch(size){
             case 'sm':
                 return ms(8);
@@ -60,11 +48,12 @@ const useStyles = (props)=>{
         }
     }, [
         size,
-        variant
+        variant,
+        ms
     ]);
     const gapValue = useMemo(()=>{
         if (gap) return gap;
-        if ('text' === variant) switch(size){
+        if ('text' === variant || 'underlined' === variant) switch(size){
             case 'sm':
                 return ms(14);
             case 'lg':
@@ -77,7 +66,8 @@ const useStyles = (props)=>{
     }, [
         variant,
         size,
-        gap
+        gap,
+        ms
     ]);
     const wrapperBackgroundColor = useMemo(()=>{
         if ('switch' === variant) return getColor('bg-200');
@@ -97,7 +87,8 @@ const useStyles = (props)=>{
     }, [
         variant,
         size,
-        radius
+        radius,
+        ms
     ]);
     const wrapperPadding = useMemo(()=>{
         if ('solid' === variant) {
@@ -107,18 +98,22 @@ const useStyles = (props)=>{
         return 0;
     }, [
         variant,
-        size
+        size,
+        ms
     ]);
     const tabBorderRadius = useMemo(()=>{
         if (radius) return getRadius(radius);
+        if ('text' === variant || 'underlined' === variant) return 0;
         return ms(6);
     }, [
         variant,
-        radius
+        radius,
+        ms,
+        getRadius
     ]);
     const tabBg = useMemo(()=>{
         if (!isSelected) return 'transparent';
-        if ('text' === variant) return 'transparent';
+        if ('text' === variant || 'underlined' === variant) return 'transparent';
         if ('default' === color) {
             if ('switch' === variant) return getColor('tertiary');
             return getColor('bg-200');
@@ -132,7 +127,7 @@ const useStyles = (props)=>{
     ]);
     const tabTextColor = useMemo(()=>{
         if (!isSelected) return getColor('secondary');
-        if ('text' === variant) {
+        if ('text' === variant || 'underlined' === variant) {
             if ('default' === color) return getColor('foreground');
             return getColor(color);
         }
@@ -156,7 +151,11 @@ const useStyles = (props)=>{
                 opacity: isDisabled ? disabledOpacity : 1
             },
             tab: {
-                flexGrow: 'text' === variant || 'light' === variant ? 0 : 1,
+                flexGrow: [
+                    'text',
+                    'light',
+                    'underlined'
+                ].includes(variant) ? 0 : 1,
                 height: '100%',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -169,6 +168,9 @@ const useStyles = (props)=>{
                 lineHeight: fontSize + ms(4),
                 fontWeight: '500',
                 color: tabTextColor
+            },
+            underline: {
+                backgroundColor: isSelected ? tabTextColor : 'transparent'
             }
         }), [
         variant,
@@ -184,7 +186,9 @@ const useStyles = (props)=>{
         isDisabled,
         tabTextColor,
         fullWidth,
-        w
+        w,
+        ms,
+        isSelected
     ]);
     return styles;
 };

package/dist/components/UXTabs/tab.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import DotIcon from "../../icons/DotIcon.js";
+import { Box } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
@@ -23,34 +24,45 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
         radius,
         isSelected
     });
-    return /*#__PURE__*/ jsx(UXTouchableOpacity, {
+    return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
         activeOpacity: 0.7,
         disabled: isDisabled,
+        gap: 8,
+        direction: "column",
+        items: "center",
         style: [
             styles.tab,
             style
         ],
         onPress: handlePress,
-        children: /*#__PURE__*/ jsxs(HStack, {
-            gap: 4,
-            position: "relative",
-            children: [
-                'function' == typeof icon ? icon(isSelected) : icon,
-                'function' == typeof title ? title(isSelected) : /*#__PURE__*/ jsx(Text, {
-                    style: styles.tabText,
-                    children: title
-                }),
-                notification ? /*#__PURE__*/ jsx(DotIcon, {
-                    color: "danger",
-                    size: 5,
-                    style: {
-                        position: 'absolute',
-                        right: -4,
-                        top: 0
-                    }
-                }) : null
-            ]
-        })
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 4,
+                position: "relative",
+                children: [
+                    'function' == typeof icon ? icon(isSelected) : icon,
+                    'function' == typeof title ? title(isSelected) : /*#__PURE__*/ jsx(Text, {
+                        style: styles.tabText,
+                        children: title
+                    }),
+                    notification ? /*#__PURE__*/ jsx(DotIcon, {
+                        color: "danger",
+                        size: 5,
+                        style: {
+                            position: 'absolute',
+                            right: -4,
+                            top: 0
+                        }
+                    }) : null
+                ]
+            }),
+            'underlined' === variant && /*#__PURE__*/ jsx(Box, {
+                w: 24,
+                h: 2,
+                radius: 4,
+                style: styles.underline
+            })
+        ]
     });
 };
 UXTab.displayName = 'UXTab';

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

@@ -4,8 +4,23 @@ import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
 import type { HStackProps } from '../layout/HStack';
 export interface UXTabsProps extends HStackProps {
     color?: UXForegroundColor;
+    /**
+     * 高度对比
+     * | variant | sm  | md  | lg  |
+     * | ------- | --- | --- | --- |
+     * | solid   | -   | 30  | 40  |
+     * | switch  | 24  | 30  | 34  |
+     * | light   | 24  | 30  | 34  |
+     *
+     * variant-text 字号对比
+     * | text    | ux-pro | ux    |
+     * | ------- | ------ | ----- |
+     * | sm      | 12     | 14    |
+     * | md      | 14     | 16    |
+     * | lg      | 16     | 18    |
+     */
     size?: UXSize;
-    variant?: 'solid' | 'light' | 'text' | 'switch';
+    variant?: 'solid' | 'light' | 'text' | 'switch' | 'underlined';
     selectedKey?: string;
     defaultSelectedKey?: string;
     onSelectionChange?: (key: string) => void;

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

@@ -2,7 +2,7 @@ import type { UXInputCommonProps } from './types';
 type UseStylesProps = UXInputCommonProps & {
     isFocused?: boolean;
 };
-export declare const useStyles: ({ isInvalid, isDisabled, fullWidth, isFocused, color, size, variant, radius, width: widthProp, textAlign, }: UseStylesProps) => {
+export declare const useStyles: (props: UseStylesProps) => {
     container: {
         width: number | import("react-native").Animated.AnimatedNode | "auto" | `${number}%`;
         height: number;

package/dist/components/input/styles.js

@@ -1,22 +1,18 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
-import { sizeMap } from "@particle-network/ui-shared";
-import { useColors, useRadius } from "../../hooks/index.js";
+import { useColors, useComponentConfig, useMs, useRadius } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
-const fontSizeMap = {
-    sm: ms(12),
-    md: ms(12),
-    lg: ms(14)
-};
-const radiusMap = {
-    sm: 'sm',
-    md: 'sm',
-    lg: 'md'
-};
-const useStyles = ({ isInvalid, isDisabled, fullWidth, isFocused, color = 'primary', size = 'md', variant = 'flat', radius, width: widthProp, textAlign = 'left' })=>{
+const useStyles = (props)=>{
+    const { input: inputConfig } = useComponentConfig();
+    const { isInvalid, isDisabled, fullWidth, isFocused, color = 'primary', size = 'md', variant = 'flat', radius = inputConfig.defaultProps?.radius, width: widthProp, textAlign = 'left' } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
+    const { ms } = useMs();
+    const radiusMap = {
+        sm: 'sm',
+        md: 'sm',
+        lg: 'md'
+    };
     const width = useMemo(()=>{
         if (fullWidth) return '100%';
         if (widthProp) return widthProp;
@@ -25,15 +21,19 @@ const useStyles = ({ isInvalid, isDisabled, fullWidth, isFocused, color = 'prima
         fullWidth,
         widthProp
     ]);
-    const height = useMemo(()=>ms(sizeMap[size]), [
-        size
+    const height = useMemo(()=>ms(inputConfig.size[size]), [
+        size,
+        inputConfig.size,
+        ms
     ]);
-    const fontSize = useMemo(()=>fontSizeMap[size], [
-        size
+    const fontSize = useMemo(()=>inputConfig.fontSize[size], [
+        size,
+        inputConfig.fontSize
     ]);
     const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
         radius,
-        size
+        size,
+        getRadius
     ]);
     const borderColor = useMemo(()=>{
         if (isInvalid) return getColor('danger');

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

@@ -1,14 +1,14 @@
-import { ms as external_react_native_size_matters_ms } from "react-native-size-matters";
-import { useColors, useRadius, useSpacing } from "../../../hooks/index.js";
-const borderFunc = (value)=>{
-    if ('number' == typeof value) return external_react_native_size_matters_ms(value);
-    return value;
-};
+import { useColors, useMs, useRadius, useSpacing } from "../../../hooks/index.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 } = props;
+    const { ms: uxms } = useMs();
     const { getColor } = useColors();
     const { getSpacing } = useSpacing();
     const { getRadius } = useRadius();
+    const borderFunc = (value)=>{
+        if ('number' == typeof value) return uxms(value);
+        return value;
+    };
     const styleObj = {};
     styleObj.width = fullWidth ? '100%' : getSpacing(w);
     styleObj.height = fullHeight ? '100%' : getSpacing(h);

package/dist/config/config.default.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '../types';
+export declare const defaultComponentConfig: ComponentConfig;

package/dist/config/config.default.js

@@ -0,0 +1,55 @@
+const defaultComponentConfig = {
+    button: {
+        defaultProps: {},
+        size: {
+            sm: 24,
+            md: 30,
+            lg: 44
+        },
+        fontSize: {
+            sm: 10,
+            md: 12,
+            lg: 16
+        },
+        color: {
+            default: {
+                background: 'bg-300',
+                text: 'default'
+            },
+            secondary: {
+                background: 'bg-300',
+                text: 'secondary'
+            }
+        }
+    },
+    input: {
+        defaultProps: {},
+        size: {
+            sm: 24,
+            md: 30,
+            lg: 44
+        },
+        fontSize: {
+            sm: 12,
+            md: 12,
+            lg: 14
+        }
+    },
+    modal: {
+        radius: 24
+    },
+    tabs: {
+        defaultProps: {},
+        fontSize: {
+            sm: 12,
+            md: 14,
+            lg: 16
+        }
+    },
+    chip: {
+        defaultProps: {
+            radius: 4
+        }
+    }
+};
+export { defaultComponentConfig };

package/dist/config/config.ux.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '../types';
+export declare const uxComponentConfig: ComponentConfig;

package/dist/config/config.ux.js

@@ -0,0 +1,61 @@
+const uxComponentConfig = {
+    button: {
+        defaultProps: {
+            radius: 'full'
+        },
+        size: {
+            sm: 40,
+            md: 44,
+            lg: 48
+        },
+        fontSize: {
+            sm: 14,
+            md: 16,
+            lg: 18
+        },
+        color: {
+            default: {
+                background: 'foreground',
+                text: 'bg-default'
+            },
+            secondary: {
+                background: 'bg-200',
+                text: 'foreground'
+            }
+        }
+    },
+    input: {
+        defaultProps: {
+            radius: 'full'
+        },
+        size: {
+            sm: 30,
+            md: 40,
+            lg: 44
+        },
+        fontSize: {
+            sm: 14,
+            md: 14,
+            lg: 14
+        }
+    },
+    modal: {
+        radius: 34
+    },
+    tabs: {
+        defaultProps: {
+            radius: 'full'
+        },
+        fontSize: {
+            sm: 12,
+            md: 14,
+            lg: 16
+        }
+    },
+    chip: {
+        defaultProps: {
+            radius: 'full'
+        }
+    }
+};
+export { uxComponentConfig };

package/dist/config/index.d.ts

@@ -0,0 +1,4 @@
+export declare const builtinComponentConfig: {
+    ux: import("..").ComponentConfig;
+    default: import("..").ComponentConfig;
+};

package/dist/config/index.js

@@ -0,0 +1,7 @@
+import { defaultComponentConfig } from "./config.default.js";
+import { uxComponentConfig } from "./config.ux.js";
+const builtinComponentConfig = {
+    ux: uxComponentConfig,
+    default: defaultComponentConfig
+};
+export { builtinComponentConfig };