@particle-network/ui-native 0.0.12 → 0.0.13

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

@@ -1,2 +1,2 @@
 export * from './text';
-export * from './text.types';
+export type { TextProps } from './text.types';

package/dist/components/Text/index.js

@@ -1,2 +1 @@
 export * from "./text.js";
-export * from "./text.types.js";

package/dist/components/Text/text.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
+import { forwardRef, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useColors } from "../../hooks/index.js";
 import { Box, useBoxStyle } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
-import { textStyles } from "./text.types.js";
+import { useTextStyles } from "./text.style.js";
 const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, 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, ...restProps } = props;
     const [textWidth, setTextWidth] = useState(0);
@@ -73,20 +73,12 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         zIndex,
         overflow
     });
-    const variantStyle = useMemo(()=>{
-        if (h1) return textStyles.variant.h1;
-        if (h2) return textStyles.variant.h2;
-        if (h3) return textStyles.variant.h3;
-        if (body1) return textStyles.variant.body1;
-        if (body1Bold) return textStyles.variant.body1Bold;
-        if (body2) return textStyles.variant.body2;
-        if (body2Bold) return textStyles.variant.body2Bold;
-        if (body3) return textStyles.variant.body3;
-        if (body3Bold) return textStyles.variant.body3Bold;
-        if (caption1) return textStyles.variant.caption1;
-        if (caption1Bold) return textStyles.variant.caption1Bold;
-        return textStyles.variant[variant];
-    }, [
+    const { styles } = useTextStyles({
+        variant,
+        fontWeight,
+        color,
+        lineHeight,
+        align,
         h1,
         h2,
         h3,
@@ -97,27 +89,8 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         body3,
         body3Bold,
         caption1,
-        caption1Bold,
-        variant
-    ]);
-    const textStyle = useMemo(()=>({
-            ...variantStyle,
-            ...fontWeight && {
-                fontWeight: textStyles.fontWeight[fontWeight]
-            },
-            ...lineHeight && {
-                lineHeight: textStyles.lineHeight[lineHeight] * variantStyle.fontSize
-            },
-            textAlign: textStyles.align[align],
-            color: getColor(color)
-        }), [
-        variantStyle,
-        fontWeight,
-        lineHeight,
-        align,
-        color,
-        getColor
-    ]);
+        caption1Bold
+    });
     if ([
         'dotted',
         'dashed'
@@ -152,7 +125,7 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
                 /*#__PURE__*/ jsx(Text, {
                     style: [
                         boxStyle,
-                        textStyle,
+                        styles.text,
                         style
                     ],
                     onLayout: (e)=>{
@@ -183,7 +156,7 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         style: [
             boxStyle,
-            textStyle,
+            styles.text,
             underlineStyle && {
                 textDecorationLine: 'underline',
                 textDecorationStyle: underlineStyle

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

@@ -0,0 +1,24 @@
+import { type TextProps } from './text.types';
+export declare const useTextStyles: ({ variant, fontWeight, color, lineHeight, align, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, }: TextProps) => {
+    styles: {
+        text: {
+            textAlign: ("right" | "left" | "center") | undefined;
+            color: string | undefined;
+            lineHeight: number;
+            fontWeight: "600" | "500" | "400" | "700" | "800";
+            fontSize: number;
+        } | {
+            textAlign: ("right" | "left" | "center") | undefined;
+            color: string | undefined;
+            lineHeight: number;
+            fontWeight: "600" | "500" | "400" | "700" | "800";
+            fontSize: number;
+        } | {
+            textAlign: ("right" | "left" | "center") | undefined;
+            color: string | undefined;
+            lineHeight: number;
+            fontWeight: "600" | "500" | "400" | "700" | "800";
+            fontSize: number;
+        };
+    };
+};

package/dist/components/Text/text.style.js

@@ -0,0 +1,124 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useColors, useMs } from "../../hooks/index.js";
+const useTextStyles = ({ variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold })=>{
+    const { ms } = useMs();
+    const { getColor } = useColors();
+    const textStyles = useMemo(()=>({
+            variant: {
+                h1: {
+                    fontSize: ms(24),
+                    lineHeight: ms(28),
+                    fontWeight: '600'
+                },
+                h2: {
+                    fontSize: ms(20),
+                    lineHeight: ms(24),
+                    fontWeight: '600'
+                },
+                h3: {
+                    fontSize: ms(16),
+                    lineHeight: ms(20),
+                    fontWeight: '600'
+                },
+                body1Bold: {
+                    fontSize: ms(14),
+                    lineHeight: ms(18),
+                    fontWeight: '500'
+                },
+                body1: {
+                    fontSize: ms(14),
+                    lineHeight: ms(18),
+                    fontWeight: '400'
+                },
+                body2Bold: {
+                    fontSize: ms(12),
+                    lineHeight: ms(16),
+                    fontWeight: '500'
+                },
+                body2: {
+                    fontSize: ms(12),
+                    lineHeight: ms(16),
+                    fontWeight: '400'
+                },
+                body3Bold: {
+                    fontSize: ms(11),
+                    lineHeight: ms(16),
+                    fontWeight: '500'
+                },
+                body3: {
+                    fontSize: ms(11),
+                    lineHeight: ms(16),
+                    fontWeight: '400'
+                },
+                caption1Bold: {
+                    fontSize: ms(10),
+                    lineHeight: ms(14),
+                    fontWeight: '500'
+                },
+                caption1: {
+                    fontSize: ms(10),
+                    lineHeight: ms(14),
+                    fontWeight: '400'
+                }
+            },
+            fontWeight: {
+                normal: '400',
+                medium: '500',
+                semibold: '600',
+                bold: '700',
+                extrabold: '800'
+            },
+            lineHeight: {
+                1: 1,
+                '1.4': 1.4
+            }
+        }), [
+        ms
+    ]);
+    const variantStyle = useMemo(()=>{
+        if (h1) return textStyles.variant.h1;
+        if (h2) return textStyles.variant.h2;
+        if (h3) return textStyles.variant.h3;
+        if (body1) return textStyles.variant.body1;
+        if (body1Bold) return textStyles.variant.body1Bold;
+        if (body2) return textStyles.variant.body2;
+        if (body2Bold) return textStyles.variant.body2Bold;
+        if (body3) return textStyles.variant.body3;
+        if (body3Bold) return textStyles.variant.body3Bold;
+        if (caption1) return textStyles.variant.caption1;
+        if (caption1Bold) return textStyles.variant.caption1Bold;
+        return textStyles.variant[variant];
+    }, [
+        h1,
+        h2,
+        h3,
+        body1,
+        body1Bold,
+        body2,
+        body2Bold,
+        body3,
+        body3Bold,
+        caption1,
+        caption1Bold,
+        variant,
+        textStyles
+    ]);
+    const styles = StyleSheet.create({
+        text: {
+            ...variantStyle,
+            ...fontWeight && {
+                fontWeight: textStyles.fontWeight[fontWeight]
+            },
+            ...lineHeight && {
+                lineHeight: textStyles.lineHeight[lineHeight] * variantStyle.fontSize
+            },
+            textAlign: align,
+            color: getColor(color)
+        }
+    });
+    return {
+        styles
+    };
+};
+export { useTextStyles };

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

@@ -96,14 +96,4 @@ export interface TextProps extends RNTextProps, UseBoxProps {
     align?: TextAlign;
     underlineStyle?: TextStyle['textDecorationStyle'];
 }
-export declare const textStyles: {
-    variant: Record<TextVariant, {
-        fontSize: number;
-        lineHeight: number;
-        fontWeight: TextStyle['fontWeight'];
-    }>;
-    fontWeight: Record<TextWeight, TextStyle['fontWeight']>;
-    lineHeight: Record<TextLineHeight, number>;
-    align: Record<TextAlign, TextStyle['textAlign']>;
-};
 export {};

package/dist/components/Text/text.types.js

@@ -1,77 +0,0 @@
-import { ms } from "react-native-size-matters";
-const textStyles = {
-    variant: {
-        h1: {
-            fontSize: ms(24),
-            lineHeight: ms(28),
-            fontWeight: '600'
-        },
-        h2: {
-            fontSize: ms(20),
-            lineHeight: ms(24),
-            fontWeight: '600'
-        },
-        h3: {
-            fontSize: ms(16),
-            lineHeight: ms(20),
-            fontWeight: '600'
-        },
-        body1Bold: {
-            fontSize: ms(14),
-            lineHeight: ms(18),
-            fontWeight: '500'
-        },
-        body1: {
-            fontSize: ms(14),
-            lineHeight: ms(18),
-            fontWeight: '400'
-        },
-        body2Bold: {
-            fontSize: ms(12),
-            lineHeight: ms(16),
-            fontWeight: '500'
-        },
-        body2: {
-            fontSize: ms(12),
-            lineHeight: ms(16),
-            fontWeight: '400'
-        },
-        body3Bold: {
-            fontSize: ms(11),
-            lineHeight: ms(16),
-            fontWeight: '500'
-        },
-        body3: {
-            fontSize: ms(11),
-            lineHeight: ms(16),
-            fontWeight: '400'
-        },
-        caption1Bold: {
-            fontSize: ms(10),
-            lineHeight: ms(14),
-            fontWeight: '500'
-        },
-        caption1: {
-            fontSize: ms(10),
-            lineHeight: ms(14),
-            fontWeight: '400'
-        }
-    },
-    fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: '700',
-        extrabold: '800'
-    },
-    lineHeight: {
-        1: 1,
-        '1.4': 1.4
-    },
-    align: {
-        left: 'left',
-        center: 'center',
-        right: 'right'
-    }
-};
-export { textStyles };

package/dist/components/UXButton/button.js

@@ -6,7 +6,7 @@ import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
 import { useStyles } from "./button.styles.js";
 const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, fill, width, isIconOnly, children, ...restProps } = props;
+    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, w, h, isIconOnly, children, ...restProps } = props;
     const handlePress = (e)=>{
         Keyboard.dismiss();
         triggerHapticFeedback();
@@ -22,7 +22,8 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         fullWidth,
         isIconOnly,
         width,
-        fill
+        w,
+        h
     });
     const content = useMemo(()=>{
         if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {

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

@@ -1,23 +1,5 @@
 import type { UXButtonProps } from './button.types';
-export declare const sizeMap: {
-    readonly sm: number;
-    readonly md: number;
-    readonly lg: number;
-    readonly auto: undefined;
-};
-export declare const fontSizeMap: {
-    readonly sm: number;
-    readonly md: number;
-    readonly lg: number;
-    readonly auto: number;
-};
-export declare const radiusMap: {
-    readonly sm: "sm";
-    readonly md: "sm";
-    readonly lg: "md";
-    readonly auto: "sm";
-};
-export declare const useStyles: ({ size, radius, color, variant, isDisabled, isLoading, width, fullWidth, fill, isIconOnly, }: UXButtonProps) => {
+export declare const useStyles: (props: UXButtonProps) => {
     styles: {
         button: {
             flexDirection: "row";
@@ -27,7 +9,6 @@ export declare const useStyles: ({ size, radius, color, variant, isDisabled, isL
             paddingVertical: number;
             height: number | undefined;
             width: number | "100%" | undefined;
-            flexGrow: number | undefined;
             paddingHorizontal: number;
             backgroundColor: string | undefined;
             borderRadius: number | undefined;
@@ -43,7 +24,7 @@ export declare const useStyles: ({ size, radius, color, variant, isDisabled, isL
             }[];
         };
         title: {
-            fontWeight: "500" | "600";
+            fontWeight: "600" | "500";
             fontSize: number;
             lineHeight: number;
             color: string | undefined;

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

@@ -1,57 +1,75 @@
 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, useSpacing } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
-const sizeMap = {
-    sm: ms(24),
-    md: ms(30),
-    lg: ms(44),
-    auto: void 0
-};
-const fontSizeMap = {
-    sm: ms(10),
-    md: ms(12),
-    lg: ms(16),
-    auto: ms(12)
-};
-const radiusMap = {
-    sm: 'sm',
-    md: 'sm',
-    lg: 'md',
-    auto: 'sm'
-};
-const paddingMap = {
-    sm: ms(2),
-    md: ms(2),
-    lg: ms(4)
-};
-const useStyles = ({ size = 'md', radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, fullWidth, fill, isIconOnly })=>{
+const useStyles = (props)=>{
+    const { button: buttonConfig } = useComponentConfig();
+    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, w, h, fullWidth, isIconOnly } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
+    const { getSpacing } = useSpacing();
+    const { ms } = useMs();
+    const sizeMap = useMemo(()=>({
+            sm: ms(buttonConfig.size.sm),
+            md: ms(buttonConfig.size.md),
+            lg: ms(buttonConfig.size.lg),
+            auto: void 0
+        }), [
+        buttonConfig?.size,
+        ms
+    ]);
+    const fontSizeMap = useMemo(()=>({
+            sm: ms(buttonConfig.fontSize.sm),
+            md: ms(buttonConfig.fontSize.md),
+            lg: ms(buttonConfig.fontSize.lg),
+            auto: ms(buttonConfig.fontSize.md)
+        }), [
+        ms,
+        buttonConfig.fontSize
+    ]);
+    const radiusMap = {
+        sm: 'sm',
+        md: 'sm',
+        lg: 'md',
+        auto: 'sm'
+    };
+    const paddingMap = useMemo(()=>({
+            sm: ms(2),
+            md: ms(2),
+            lg: ms(4)
+        }), [
+        ms
+    ]);
     const height = useMemo(()=>{
-        if ('text' === variant || 'auto' === size) return;
+        if ('text' === variant || 'auto' === size) return getSpacing(h);
         return sizeMap[size];
     }, [
         size,
-        variant
+        variant,
+        sizeMap,
+        h,
+        getSpacing
     ]);
     const widthStyle = useMemo(()=>{
         if (isIconOnly) return height;
         if (fullWidth) return '100%';
-        return width;
+        return getSpacing(width || w);
     }, [
         fullWidth,
         height,
         isIconOnly,
-        width
+        width,
+        w,
+        getSpacing
     ]);
     const fontSize = useMemo(()=>fontSizeMap[size], [
-        size
+        size,
+        fontSizeMap
     ]);
     const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
         radius,
-        size
+        size,
+        getRadius
     ]);
     const paddingHorizontal = useMemo(()=>{
         if (isIconOnly || 'auto' === size || 'text' === variant) return 0;
@@ -59,41 +77,50 @@ const useStyles = ({ size = 'md', radius, color = 'default', variant = 'solid',
     }, [
         size,
         isIconOnly,
-        variant
+        variant,
+        paddingMap
     ]);
     const textColor = useMemo(()=>{
-        if ('default' === color) return getColor('default');
-        if ('secondary' === color) return getColor('secondary');
+        const customColorConfig = buttonConfig?.color?.[color];
+        if (customColorConfig) return getColor(customColorConfig.text);
         if ('contrast' === color) return getColor('bg-default');
-        if ('solid' === variant) return getColor('white');
+        if ('solid' === variant && ![
+            'default',
+            'secondary'
+        ].includes(color)) return getColor('white');
         return getColor(color);
     }, [
         color,
         getColor,
-        variant
+        variant,
+        buttonConfig?.color
     ]);
     const backgroundColor = useMemo(()=>{
+        const customColorConfig = buttonConfig?.color?.[color];
         if ('solid' === variant) {
-            if ([
+            if (customColorConfig) return getColor(customColorConfig.background);
+            if ('contrast' === color) return getColor('foreground');
+            if (![
                 'default',
                 'secondary'
-            ].includes(color)) return getColor('bg-300');
-            if ('contrast' === color) return getColor('foreground');
-            return getColor(color);
+            ].includes(color)) return getColor(color);
+            return getColor('bg-300');
         }
         if ('flat' === variant) {
+            if (customColorConfig) return `${getColor(customColorConfig.background)}40`;
+            if ('contrast' === color) return `${getColor('foreground')}40`;
             if ([
                 'default',
                 'secondary'
             ].includes(color)) return `${getColor('bg-300')}40`;
-            if ('contrast' === color) return `${getColor('foreground')}40`;
             return `${getColor(color)}20`;
         }
         return 'transparent';
     }, [
         color,
         getColor,
-        variant
+        variant,
+        buttonConfig?.color
     ]);
     const borderColor = useMemo(()=>{
         if ('bordered' === variant) {
@@ -125,7 +152,6 @@ const useStyles = ({ size = 'md', radius, color = 'default', variant = 'solid',
             paddingVertical: 0,
             height,
             width: widthStyle,
-            flexGrow: fill ? 1 : void 0,
             paddingHorizontal,
             backgroundColor,
             borderRadius,
@@ -154,4 +180,4 @@ const useStyles = ({ size = 'md', radius, color = 'default', variant = 'solid',
         textColor
     };
 };
-export { fontSizeMap, radiusMap, sizeMap, useStyles };
+export { useStyles };

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

@@ -1,18 +1,27 @@
 import type React from 'react';
-import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { UXRadius } from '@particle-network/ui-shared';
-export interface UXButtonProps extends Omit<PressableProps, 'style'> {
+import type { UXPressableProps } from '../UXPressable';
+export interface UXButtonProps extends Omit<UXPressableProps, 'style'> {
     style?: StyleProp<ViewStyle>;
-    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish' | 'contrast';
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'alert' | 'warning' | 'danger' | 'bullish' | 'bearish' | 'contrast';
+    /**
+     * 按钮尺寸
+     * @default 'md'
+     * | size   | ux-pro | ux     |
+     * | :----- | :----- | :----- |
+     * | sm     | 24     | 40     |
+     * | md     | 30     | 44     |
+     * | lg     | 44     | 48     |
+     */
     size?: 'sm' | 'md' | 'lg' | 'auto';
-    variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'text';
+    variant?: 'solid' | 'bordered' | 'flat' | 'text';
     radius?: UXRadius;
     isDisabled?: boolean;
     isLoading?: boolean;
     startContent?: React.ReactNode;
     endContent?: React.ReactNode;
     isIconOnly?: boolean;
-    fullWidth?: boolean;
     width?: number;
-    fill?: boolean;
+    w?: number;
 }

package/dist/components/UXCheckbox/checkbox.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 import CheckboxOffIcon from "../../icons/CheckboxOffIcon.js";
 import CheckboxOnIcon from "../../icons/CheckboxOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
@@ -9,6 +9,7 @@ import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
 import { useCheckboxGroup } from "./context.js";
 const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, ...props })=>{
+    const { ms } = useMs();
     const [internalSelected, setInternalSelected] = useState(defaultSelected ?? isSelected);
     const groupContext = useCheckboxGroup();
     const isInGroup = null !== groupContext;

package/dist/components/UXChip/chip.js

@@ -1,10 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import { useComponentConfig } from "../../hooks/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { useStyles } from "./styles.js";
 const UXChip = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { style, size, gap = 2, radius = 4, color, variant, isDisabled, startContent, endContent, children, ...restProps } = props;
+    const { chip: chipConfig } = useComponentConfig();
+    const { style, size, gap = 2, radius = chipConfig.defaultProps?.radius, color, variant, isDisabled, startContent, endContent, children, ...restProps } = props;
     const styles = useStyles({
         size,
         color,

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

@@ -1,14 +1,4 @@
 import type { UXChipProps } from './types';
-export declare const sizeMap: {
-    readonly sm: number;
-    readonly md: number;
-    readonly lg: number;
-};
-export declare const fontSizeMap: {
-    readonly sm: number;
-    readonly md: number;
-    readonly lg: number;
-};
 export declare const useStyles: ({ size, color, variant, isDisabled }: UXChipProps) => {
     button: {
         height: number;