@particle-network/ui-native 0.0.11 → 0.0.13

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 };

package/dist/hooks/index.d.ts

@@ -1,5 +1,7 @@
 export * from './useColors';
+export * from './useComponentConfig';
 export * from './useKeyboard';
+export * from './useMs';
 export * from './useRadius';
 export * from './useSpacing';
 export * from './useTheme';

package/dist/hooks/index.js

@@ -1,5 +1,7 @@
 export * from "./useColors.js";
+export * from "./useComponentConfig.js";
 export * from "./useKeyboard.js";
+export * from "./useMs.js";
 export * from "./useRadius.js";
 export * from "./useSpacing.js";
 export * from "./useTheme.js";

package/dist/hooks/useComponentConfig.d.ts

@@ -0,0 +1 @@
+export declare function useComponentConfig(): import("..").ComponentConfig;

package/dist/hooks/useComponentConfig.js

@@ -0,0 +1,7 @@
+import { useThemeContext } from "../provider/ThemeContext.js";
+import { defaultComponentConfig } from "../config/config.default.js";
+function useComponentConfig() {
+    const { componentConfig } = useThemeContext();
+    return componentConfig || defaultComponentConfig;
+}
+export { useComponentConfig };

package/dist/hooks/useMs.d.ts

@@ -0,0 +1,3 @@
+export declare function useMs(): {
+    ms: (value: number) => number;
+};

package/dist/hooks/useMs.js

@@ -0,0 +1,10 @@
+import { moderateScale } from "react-native-size-matters";
+import { useTheme } from "./useTheme.js";
+function useMs() {
+    const { msFactor } = useTheme();
+    const ms = (value)=>'number' == typeof msFactor ? moderateScale(value, msFactor) : moderateScale(value);
+    return {
+        ms
+    };
+}
+export { useMs };

package/dist/icons/CheckIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { IconProps } from './types';
+declare const CheckIcon: React.FC<IconProps>;
+export default CheckIcon;

package/dist/icons/CheckIcon.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { Path } from "react-native-svg";
+import { useColors } from "../hooks/index.js";
+const CheckIcon_CheckIcon = ({ size = 16, color = 'default', ...props })=>{
+    const { getColor } = useColors();
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M19.3281 6.28711C19.7108 5.90439 20.3302 5.9044 20.7129 6.28711C21.0956 6.66983 21.0956 7.28916 20.7129 7.67188L10.042 18.3389C10.0336 18.3479 10.0264 18.3584 10.0176 18.3672C9.82525 18.5574 9.57459 18.6514 9.32422 18.6514C9.07383 18.6513 8.82312 18.5555 8.63281 18.3652L3.28711 13.0186C2.90448 12.6358 2.90442 12.0165 3.28711 11.6338C3.66982 11.2513 4.28923 11.2512 4.67188 11.6338L9.32422 16.2891L19.3281 6.28711Z",
+            fill: getColor(color)
+        })
+    });
+};
+const CheckIcon = CheckIcon_CheckIcon;
+export { CheckIcon as default };

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export * from './provider';
 export * from './hooks';
 export * from './theme';
 export type * from './types';
+export * from './config';
+export * from './utils';

package/dist/index.js

@@ -2,3 +2,5 @@ export * from "./components/index.js";
 export * from "./provider/index.js";
 export * from "./hooks/index.js";
 export * from "./theme/index.js";
+export * from "./config/index.js";
+export * from "./utils/index.js";

package/dist/provider/ThemeContext.d.ts

@@ -1,3 +1,3 @@
-import type { ThemeContextValue } from '../types/theme';
+import type { ThemeContextValue } from '../types';
 export declare const ThemeContextProvider: import("react").Provider<ThemeContextValue | undefined>;
 export declare function useThemeContext(): ThemeContextValue;

package/dist/provider/ThemeContext.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import { builtinComponentConfig } from "../config/index.js";
 import { createTheme } from "../theme/index.js";
 const ThemeContext = /*#__PURE__*/ createContext(void 0);
 const ThemeContextProvider = ThemeContext.Provider;
@@ -7,8 +8,10 @@ function useThemeContext() {
     if (!context) return {
         theme: createTheme('light'),
         config: {
-            theme: 'light'
-        }
+            theme: 'light',
+            componentConfig: builtinComponentConfig["default"]
+        },
+        componentConfig: builtinComponentConfig["default"]
     };
     return context;
 }

package/dist/provider/ThemeProvider.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { DynamicColors } from '@particle-network/ui-shared';
-import type { ThemeMode } from '../types';
+import type { ComponentConfig, ThemeMode } from '../types';
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: ThemeMode;
     dynamicColors?: DynamicColors;
+    msFactor?: number;
+    componentConfig?: ComponentConfig;
     onThemeChange?: (theme: ThemeMode) => void;
 }
-export declare function ThemeProvider({ children, theme, dynamicColors, onThemeChange }: ThemeProviderProps): React.JSX.Element;
+export declare function ThemeProvider({ children, theme, dynamicColors, msFactor, componentConfig, onThemeChange, }: ThemeProviderProps): React.JSX.Element;

package/dist/provider/ThemeProvider.js

@@ -1,26 +1,38 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { createTheme } from "../theme/index.js";
+import { builtinComponentConfig } from "../config/index.js";
 import { ThemeContextProvider } from "./ThemeContext.js";
-function ThemeProvider({ children, theme = 'light', dynamicColors, onThemeChange }) {
+import { createTheme } from "../theme/index.js";
+import { mergeComponentConfig } from "../utils/index.js";
+function ThemeProvider({ children, theme = 'light', dynamicColors, msFactor, componentConfig, onThemeChange }) {
+    const mergedComponentConfig = useMemo(()=>mergeComponentConfig(builtinComponentConfig["default"], componentConfig), [
+        componentConfig
+    ]);
     const config = useMemo(()=>({
             theme,
-            dynamicColors
+            dynamicColors,
+            msFactor,
+            componentConfig: mergedComponentConfig
         }), [
         theme,
-        dynamicColors
+        dynamicColors,
+        msFactor,
+        mergedComponentConfig
     ]);
-    const themeObject = useMemo(()=>createTheme(theme, dynamicColors), [
+    const themeObject = useMemo(()=>createTheme(theme, dynamicColors, msFactor), [
         theme,
-        dynamicColors
+        dynamicColors,
+        msFactor
     ]);
     const contextValue = useMemo(()=>({
             theme: themeObject,
             config,
+            componentConfig: mergedComponentConfig,
             setTheme: onThemeChange
         }), [
         themeObject,
         config,
+        mergedComponentConfig,
         onThemeChange
     ]);
     return /*#__PURE__*/ jsx(ThemeContextProvider, {

package/dist/theme/colors.d.ts

@@ -3,4 +3,4 @@ export declare const DEFAULT_DYNAMIC_COLORS: {
     bullish: string;
     bearish: string;
 };
-export declare function getColors(theme: 'light' | 'dark', dynamicColors?: DynamicColors): ThemeColors;
+export declare function createColors(theme: 'light' | 'dark', dynamicColors?: DynamicColors): ThemeColors;

package/dist/theme/colors.js

@@ -3,7 +3,7 @@ const DEFAULT_DYNAMIC_COLORS = {
     bullish: '#45B167',
     bearish: '#E84A5A'
 };
-function getColors(theme, dynamicColors) {
+function createColors(theme, dynamicColors) {
     const mergedDynamicColors = {
         ...DEFAULT_DYNAMIC_COLORS,
         ...dynamicColors
@@ -14,4 +14,4 @@ function getColors(theme, dynamicColors) {
         bearish: mergedDynamicColors.bearish
     };
 }
-export { DEFAULT_DYNAMIC_COLORS, getColors };
+export { DEFAULT_DYNAMIC_COLORS, createColors };

package/dist/theme/index.d.ts

@@ -1,7 +1,5 @@
-import type { DynamicColors } from '@particle-network/ui-shared';
-import type { Theme, ThemeMode } from '../types';
-export declare function createTheme(theme: ThemeMode, dynamicColors?: DynamicColors): Theme;
 export * from './colors';
 export * from './opacity';
 export * from './radius';
 export * from './spacing';
+export * from './theme';

package/dist/theme/index.js

@@ -1,16 +1,5 @@
-import { getColors } from "./colors.js";
-import { createRadius } from "./radius.js";
-import { createSpacing } from "./spacing.js";
 export * from "./colors.js";
 export * from "./opacity.js";
 export * from "./radius.js";
 export * from "./spacing.js";
-function createTheme(theme, dynamicColors) {
-    return {
-        theme,
-        colors: getColors(theme, dynamicColors),
-        spacing: createSpacing(),
-        radius: createRadius()
-    };
-}
-export { createTheme };
+export * from "./theme.js";

package/dist/theme/radius.d.ts

@@ -1,3 +1,3 @@
 import { type RadiusScale } from '@particle-network/ui-shared';
-export declare function createRadius(): RadiusScale;
+export declare function createRadius(msFactor?: number): RadiusScale;
 export declare const radius: RadiusScale;

package/dist/theme/radius.js

@@ -1,8 +1,8 @@
-import { moderateScale } from "react-native-size-matters";
+import { ms } from "react-native-size-matters";
 import { radiusMap } from "@particle-network/ui-shared";
-function createRadius() {
+function createRadius(msFactor) {
     return Object.entries(radiusMap).reduce((acc, [key, value])=>{
-        acc[key] = 'full' === key ? value : moderateScale(value);
+        acc[key] = 'full' === key ? value : ms(value, msFactor);
         return acc;
     }, {});
 }

package/dist/theme/spacing.d.ts

@@ -1,3 +1,3 @@
 import { type SpacingScale } from '@particle-network/ui-shared';
-export declare function createSpacing(): SpacingScale;
+export declare function createSpacing(msFactor?: number): SpacingScale;
 export declare const spacing: SpacingScale;

package/dist/theme/spacing.js

@@ -1,8 +1,8 @@
 import { ms } from "react-native-size-matters";
 import { spacingMap } from "@particle-network/ui-shared";
-function createSpacing() {
+function createSpacing(msFactor) {
     return Object.entries(spacingMap).reduce((acc, [key, value])=>{
-        acc[key] = ms(value);
+        acc[key] = ms(value, msFactor);
         return acc;
     }, {});
 }

package/dist/theme/theme.d.ts

@@ -0,0 +1,3 @@
+import type { DynamicColors } from '@particle-network/ui-shared';
+import type { Theme, ThemeMode } from '../types';
+export declare function createTheme(theme: ThemeMode, dynamicColors?: DynamicColors, msFactor?: number): Theme;

package/dist/theme/theme.js

@@ -0,0 +1,13 @@
+import { createColors } from "./colors.js";
+import { createRadius } from "./radius.js";
+import { createSpacing } from "./spacing.js";
+function createTheme(theme, dynamicColors, msFactor) {
+    return {
+        theme,
+        colors: createColors(theme, dynamicColors),
+        spacing: createSpacing(msFactor),
+        radius: createRadius(msFactor),
+        msFactor
+    };
+}
+export { createTheme };

package/dist/types/theme.d.ts

@@ -1,17 +1,49 @@
-import type { DynamicColors, RadiusScale, SpacingScale, ThemeColors } from '@particle-network/ui-shared';
+import type { DynamicColors, RadiusScale, SpacingScale, ThemeColors, UXRadius } from '@particle-network/ui-shared';
 export type ThemeMode = 'light' | 'dark';
+export interface CommonComponentConfig {
+    defaultProps?: {
+        radius?: UXRadius | number;
+    };
+    size: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontSize: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    color: Record<string, {
+        background: string;
+        text: string;
+    }>;
+}
+export interface ComponentConfig {
+    button: CommonComponentConfig;
+    input: Omit<CommonComponentConfig, 'color'>;
+    modal: {
+        radius: number;
+    };
+    tabs: Pick<CommonComponentConfig, 'defaultProps' | 'fontSize'>;
+    chip: Pick<CommonComponentConfig, 'defaultProps'>;
+}
 export interface ThemeConfig {
     theme: ThemeMode;
     dynamicColors?: DynamicColors;
+    msFactor?: number;
+    componentConfig: ComponentConfig;
 }
 export interface Theme {
     theme: ThemeMode;
     colors: ThemeColors;
     spacing: SpacingScale;
     radius: RadiusScale;
+    msFactor?: number;
 }
 export interface ThemeContextValue {
     theme: Theme;
     config: ThemeConfig;
+    componentConfig?: ComponentConfig;
     setTheme?: (theme: ThemeMode) => void;
 }

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mergeConfig';
+export * from './triggerHapticFeedback';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./mergeConfig.js";
+export * from "./triggerHapticFeedback.js";

package/dist/utils/mergeConfig.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentConfig } from '../types';
+/**
+ * 深度合并组件配置
+ * @param defaultConfig 默认配置
+ * @param userConfig 用户配置
+ * @returns 合并后的配置
+ */
+export declare function mergeComponentConfig(defaultConfig: ComponentConfig, userConfig?: ComponentConfig): ComponentConfig;

package/dist/utils/mergeConfig.js

@@ -0,0 +1,6 @@
+import deepmerge from "deepmerge";
+function mergeComponentConfig(defaultConfig, userConfig) {
+    if (!userConfig) return defaultConfig;
+    return deepmerge(defaultConfig, userConfig);
+}
+export { mergeComponentConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
@@ -21,7 +21,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "storybook dev -p 6006",
-    "storybook:build": "storybook build --docs",
+    "storybook:build": "storybook build",
     "storybook:preview": "serve storybook-static",
     "storybook:generate": "sb-rn-get-stories",
     "type-check": "npx tsc --noEmit -p ./tsconfig.json",
@@ -29,7 +29,8 @@
     "build": "rslib build",
     "lint": "eslint . --no-error-on-unmatched-pattern --quiet",
     "lint:fix": "eslint . --fix --no-error-on-unmatched-pattern --quiet",
-    "clean": "rm -rf .turbo node_modules dist"
+    "clean": "rm -rf .turbo node_modules dist",
+    "deploy:dev": "sh ./scripts/deploy-dev.sh"
   },
   "files": [
     "dist",
@@ -52,7 +53,9 @@
   "dependencies": {
     "@particle-network/ui-shared": "*",
     "ahooks": "^3.9.4",
+    "deepmerge": "^4.3.1",
     "expo-haptics": "^14.1.4",
+    "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2"
   },
   "devDependencies": {
@@ -61,10 +64,10 @@
     "@chromatic-com/storybook": "^4.0.0",
     "@expo/metro-runtime": "~5.0.4",
     "@gorhom/bottom-sheet": "^5.1.2",
+    "@particle-network/eslint-config": "*",
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.4.1",
     "@react-native-community/slider": "4.5.6",
-    "@particle-network/eslint-config": "*",
     "@rsbuild/core": "^1.5.0",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.2",
@@ -88,7 +91,6 @@
     "react-dom": "19.0.0",
     "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
-    "react-native-paper": "^5.14.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "15.11.2",