@particle-network/ui-native 0.0.18 → 0.0.20

package/README.md

@@ -190,38 +190,38 @@ const customTheme = {
 
 ```bash
 # Web 版 Storybook（推荐用于开发）
-yarn storybook:web
+pnpm storybook:web
 
 # 设备上的 Storybook
-yarn storybook
+pnpm storybook
 
 # iOS
-yarn storybook:ios
+pnpm storybook:ios
 
 # Android
-yarn storybook:android
+pnpm storybook:android
 ```
 
 ### 开发命令
 
 ```bash
 # 安装依赖
-yarn install
+pnpm install
 
 # 启动开发
-yarn start
+pnpm start
 
 # 构建库
-yarn build
+pnpm build
 
 # 运行测试
-yarn test
+pnpm test
 
 # 类型检查
-yarn type-check
+pnpm type-check
 
 # 代码检查
-yarn lint
+pnpm lint
 ```
 
 ## 📱 平台支持

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

@@ -34,9 +34,9 @@ const useStyles = (props)=>{
         auto: 'sm'
     };
     const paddingMap = useMemo(()=>({
-            sm: ms(2),
-            md: ms(2),
-            lg: ms(4)
+            sm: ms(6),
+            md: ms(10),
+            lg: ms(14)
         }), [
         ms
     ]);
@@ -86,12 +86,11 @@ const useStyles = (props)=>{
     ]);
     const textColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
-        if (customColorConfig) return customColorConfig.text;
-        if ('contrast' === color) return 'bg-default';
-        if ('solid' === variant && ![
-            'default',
-            'secondary'
-        ].includes(color)) return 'white';
+        if ('solid' === variant) {
+            if (customColorConfig) return customColorConfig.text;
+            if ('contrast' === color) return 'bg-default';
+            return 'white';
+        }
         return color;
     }, [
         color,

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

@@ -13,6 +13,13 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
      * | sm     | 24     | 40     |
      * | md     | 30     | 44     |
      * | lg     | 44     | 48     |
+     *
+     * fontSize
+     * | size   | ux-pro | ux     |
+     * | :----- | :----- | :----- |
+     * | sm     | 10     | 14     |
+     * | md     | 12     | 16     |
+     * | lg     | 16     | 18     |
      */
     size?: 'sm' | 'md' | 'lg' | 'auto';
     variant?: 'solid' | 'bordered' | 'flat' | 'text' | 'light';

package/dist/components/UXChip/chip.js

@@ -37,10 +37,9 @@ const UXChip = /*#__PURE__*/ forwardRef((props, ref)=>{
     return /*#__PURE__*/ jsx(HStack, {
         ref: ref,
         gap: gap,
-        ph: 4,
         radius: radius,
         style: [
-            styles.button,
+            styles.chip,
             style
         ],
         ...restProps,

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

@@ -1,9 +1,10 @@
 import type { UXChipProps } from './types';
 export declare const useStyles: ({ size, color, variant, isDisabled }: UXChipProps) => {
-    button: {
+    chip: {
         height: number;
         backgroundColor: string | undefined;
         opacity: number;
+        paddingHorizontal: number;
     };
     title: {
         fontWeight: 400;

package/dist/components/UXChip/styles.js

@@ -52,11 +52,21 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
         getColor,
         variant
     ]);
+    const paddingHorizontal = useMemo(()=>{
+        if ('sm' === size) return ms(4);
+        if ('md' === size) return ms(6);
+        if ('lg' === size) return ms(8);
+        return 0;
+    }, [
+        size,
+        ms
+    ]);
     const styles = StyleSheet.create({
-        button: {
+        chip: {
             height,
             backgroundColor,
-            opacity: isDisabled ? disabledOpacity : 1
+            opacity: isDisabled ? disabledOpacity : 1,
+            paddingHorizontal
         },
         title: {
             fontWeight: 400,

package/dist/components/UXModal/index.js

@@ -3,6 +3,7 @@ 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 { setColorWithOpacity } from "@particle-network/ui-shared";
 import { useColors, useComponentConfig, useKeyboard, useMs } from "../../hooks/index.js";
 import { Box } from "../layout/Box/index.js";
 import { Circle } from "../layout/Circle.js";
@@ -10,7 +11,6 @@ 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;

package/dist/components/UXTabs/tabs.js

@@ -48,6 +48,7 @@ const UXTabs = (props)=>{
         },
         children: /*#__PURE__*/ jsxs(VStack, {
             gap: "md",
+            ...restProps,
             children: [
                 /*#__PURE__*/ jsx(HStack, {
                     opacity: isDisabled ? disabledOpacity : 1,
@@ -55,7 +56,6 @@ const UXTabs = (props)=>{
                         styles.tabsWrapper,
                         style
                     ],
-                    ...restProps,
                     children: tabs
                 }),
                 renderSelectedTabContent()

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ToastType = 'success' | 'error' | 'loading';
+interface ToastIconProps {
+    type: ToastType;
+}
+export declare const ToastIcon: React.FC<ToastIconProps>;
+export {};

package/dist/components/UXToast/ToastIcon.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE__fail_js_ca7b5988__ from "./fail.js";
+import * as __WEBPACK_EXTERNAL_MODULE__success_js_b4524adb__ from "./success.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import lottie_react_native from "lottie-react-native";
+import { Square } from "../layout/Square.js";
+import { UXSpinner } from "../UXSpinner/index.js";
+import { useMs } from "../../hooks/index.js";
+var __webpack_modules__ = {
+    "./fail.json": function(module) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE__fail_js_ca7b5988__;
+    },
+    "./success.json": function(module) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE__success_js_b4524adb__;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+const ToastIcon = ({ type })=>{
+    const { ms } = useMs();
+    if ('loading' === type) return /*#__PURE__*/ jsx(UXSpinner, {
+        size: ms(18)
+    });
+    if ('success' === type) return /*#__PURE__*/ jsx(Square, {
+        size: ms(18),
+        children: /*#__PURE__*/ jsx(lottie_react_native, {
+            autoPlay: true,
+            source: __webpack_require__("./success.json"),
+            loop: false,
+            style: {
+                width: ms(18),
+                height: ms(18),
+                backgroundColor: 'transparent'
+            },
+            resizeMode: "contain"
+        })
+    });
+    if ('error' === type) return /*#__PURE__*/ jsx(Square, {
+        size: ms(18),
+        children: /*#__PURE__*/ jsx(lottie_react_native, {
+            autoPlay: true,
+            source: __webpack_require__("./fail.json"),
+            loop: false,
+            style: {
+                width: ms(18),
+                height: ms(18),
+                backgroundColor: 'transparent'
+            },
+            resizeMode: "contain"
+        })
+    });
+    return null;
+};
+export { ToastIcon };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ToastType } from './ToastIcon';
+import type { ToastProps } from './types';
+interface ToastViewProps {
+    type: ToastType;
+    text: string;
+    props?: ToastProps;
+}
+export declare const ToastView: React.FC<ToastViewProps>;
+export {};

package/dist/components/UXToast/ToastView.js

@@ -0,0 +1,71 @@
+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 { Text } from "../Text/index.js";
+import { UXButton } from "../UXButton/index.js";
+import { useComponentConfig, useTheme } from "../../hooks/index.js";
+import CloseIcon from "../../icons/CloseIcon.js";
+import { ToastIcon } from "./ToastIcon.js";
+const ToastView = ({ type, text, props: toastProps })=>{
+    const { btnText, numberOfLines = 4, colorBg, onPress = ()=>null } = toastProps ?? {};
+    const { toast: toastConfig } = useComponentConfig();
+    const { colors } = useTheme();
+    const bg = useMemo(()=>{
+        if (!colorBg) return colors.tertiary;
+        if ('success' === type) return '#0E3728';
+        if ('error' === type) return '#501D1D';
+    }, [
+        colorBg,
+        type,
+        colors
+    ]);
+    return /*#__PURE__*/ jsxs(HStack, {
+        gap: "md",
+        radius: toastConfig.radius,
+        mh: 14,
+        minH: 42,
+        pv: 12,
+        ph: 14,
+        zIndex: 9999,
+        style: {
+            backgroundColor: bg
+        },
+        children: [
+            /*#__PURE__*/ jsx(ToastIcon, {
+                type: type
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                fill: true,
+                children: /*#__PURE__*/ jsx(Text, {
+                    body2Bold: true,
+                    color: colorBg ? 'white' : 'foreground',
+                    numberOfLines: numberOfLines,
+                    children: text
+                })
+            }),
+            btnText && onPress ? /*#__PURE__*/ jsx(UXButton, {
+                variant: "text",
+                onPress: ()=>{
+                    react_native_toast_message.hide();
+                    onPress();
+                },
+                children: /*#__PURE__*/ jsx(Text, {
+                    body2Bold: true,
+                    color: "primary",
+                    children: btnText
+                })
+            }) : null,
+            /*#__PURE__*/ jsx(UXButton, {
+                variant: "text",
+                onPress: ()=>react_native_toast_message.hide(),
+                children: /*#__PURE__*/ jsx(CloseIcon, {
+                    color: colorBg ? 'white' : 'foreground',
+                    size: 18
+                })
+            })
+        ]
+    });
+};
+export { ToastView };

package/dist/components/UXToast/fail.js

@@ -0,0 +1,14 @@
+var fail_namespaceObject = JSON.parse('{"v":"5.9.4","fr":30,"ip":0,"op":22,"w":80,"h":80,"nm":"nm_a","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"nm_b","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":2,"s":[0]},{"t":21,"s":[180]}],"ix":10},"p":{"a":0,"k":[40,40,0],"ix":2,"l":2},"a":{"a":0,"k":[60,60,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":2,"op":22,"st":-71,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"nm_c","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[60,60,0],"ix":2,"l":2},"a":{"a":0,"k":[-540.031,0.344,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-555.438,-15.063],[-524.625,15.75]],"c":false},"ix":2},"nm":"nm_e","mn":"mn_b","hd":false},{"ty":"st","c":{"a":0,"k":[0.964691162109,0.266662597656,0.219604492188,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"nm_f","mn":"mn_c","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"nm_g"}],"nm":"nm_d","np":3,"cix":2,"bm":0,"ix":1,"mn":"mn_a","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.405],"y":[1.003]},"o":{"x":[0.623],"y":[0]},"t":2,"s":[50]},{"t":21,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.423],"y":[0.983]},"o":{"x":[0.604],"y":[-0.004]},"t":2,"s":[50]},{"t":21,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"nm_h","mn":"mn_d","hd":false}],"ip":2,"op":22,"st":-77,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"nm_i","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,60,0],"ix":2,"l":2},"a":{"a":0,"k":[-540.031,0.344,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-555.438,-15.063],[-524.625,15.75]],"c":false},"ix":2},"nm":"nm_e","mn":"mn_b","hd":false},{"ty":"st","c":{"a":0,"k":[0.964691162109,0.266662597656,0.219604492188,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"nm_f","mn":"mn_c","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"nm_g"}],"nm":"nm_d","np":3,"cix":2,"bm":0,"ix":1,"mn":"mn_a","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.405],"y":[1.003]},"o":{"x":[0.623],"y":[0]},"t":2,"s":[50]},{"t":21,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.423],"y":[0.983]},"o":{"x":[0.604],"y":[-0.004]},"t":2,"s":[50]},{"t":21,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"nm_h","mn":"mn_d","hd":false}],"ip":2,"op":22,"st":-77,"ct":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"nm_j","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.218],"y":[0.983]},"o":{"x":[0.682],"y":[-0.008]},"t":0,"s":[0]},{"t":21,"s":[-64]}],"ix":10},"p":{"a":0,"k":[40,40,0],"ix":2,"l":2},"a":{"a":0,"k":[-523.5,0.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[64.5,64.5],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"nm_l","mn":"mn_e","hd":false},{"ty":"st","c":{"a":0,"k":[0.964691162109,0.266662597656,0.219604492188,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"nm_f","mn":"mn_c","hd":false},{"ty":"tr","p":{"a":0,"k":[-523.5,0.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"nm_g"}],"nm":"nm_k","np":3,"cix":2,"bm":0,"ix":1,"mn":"mn_a","hd":false},{"ty":"tm","s":{"a":0,"k":100,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.256],"y":[0.999]},"o":{"x":[0.646],"y":[0.004]},"t":0,"s":[100]},{"t":21,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"nm_h","mn":"mn_d","hd":false}],"ip":0,"op":22,"st":-74,"ct":1,"bm":0}],"markers":[],"_compressed":true}');
+var __webpack_exports___compressed = fail_namespaceObject._compressed;
+var __webpack_exports__assets = fail_namespaceObject.assets;
+var __webpack_exports__ddd = fail_namespaceObject.ddd;
+var __webpack_exports__fr = fail_namespaceObject.fr;
+var __webpack_exports__h = fail_namespaceObject.h;
+var __webpack_exports__ip = fail_namespaceObject.ip;
+var __webpack_exports__layers = fail_namespaceObject.layers;
+var __webpack_exports__markers = fail_namespaceObject.markers;
+var __webpack_exports__nm = fail_namespaceObject.nm;
+var __webpack_exports__op = fail_namespaceObject.op;
+var __webpack_exports__v = fail_namespaceObject.v;
+var __webpack_exports__w = fail_namespaceObject.w;
+export { __webpack_exports___compressed as _compressed, __webpack_exports__assets as assets, __webpack_exports__ddd as ddd, __webpack_exports__fr as fr, __webpack_exports__h as h, __webpack_exports__ip as ip, __webpack_exports__layers as layers, __webpack_exports__markers as markers, __webpack_exports__nm as nm, __webpack_exports__op as op, __webpack_exports__v as v, __webpack_exports__w as w };

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

@@ -0,0 +1,3 @@
+export * from './toast';
+export * from './toastConfig';
+export type * from './types';

package/dist/components/UXToast/index.js

@@ -0,0 +1,2 @@
+export * from "./toast.js";
+export * from "./toastConfig.js";

package/dist/components/UXToast/success.js

@@ -0,0 +1,14 @@
+var success_namespaceObject = JSON.parse('{"v":"5.9.4","fr":30,"ip":0,"op":38,"w":80,"h":80,"nm":"nm_a","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"nm_b","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40,40,0],"ix":2,"l":2},"a":{"a":0,"k":[-618.094,-0.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-637.75,-2.875],[-623.063,11.375],[-598.438,-12.375]],"c":false},"ix":2},"nm":"nm_d","mn":"mn_b","hd":false},{"ty":"st","c":{"a":0,"k":[0.180389404297,0.772552490234,0.329406738281,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"nm_e","mn":"mn_c","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"nm_f"}],"nm":"nm_c","np":3,"cix":2,"bm":0,"ix":1,"mn":"mn_a","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.265],"y":[0.998]},"o":{"x":[0.718],"y":[0]},"t":19,"s":[0]},{"t":32,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"nm_g","mn":"mn_d","hd":false}],"ip":19,"op":1091,"st":-55,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"nm_h","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.218],"y":[0.983]},"o":{"x":[0.682],"y":[-0.008]},"t":0,"s":[0]},{"t":21,"s":[-64]}],"ix":10},"p":{"a":0,"k":[40,40,0],"ix":2,"l":2},"a":{"a":0,"k":[-523.5,0.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[64.5,64.5],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"nm_j","mn":"mn_e","hd":false},{"ty":"st","c":{"a":0,"k":[0.180389404297,0.772552490234,0.329406738281,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"nm_e","mn":"mn_c","hd":false},{"ty":"tr","p":{"a":0,"k":[-523.5,0.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"nm_f"}],"nm":"nm_i","np":3,"cix":2,"bm":0,"ix":1,"mn":"mn_a","hd":false},{"ty":"tm","s":{"a":0,"k":100,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.256],"y":[0.999]},"o":{"x":[0.646],"y":[0.004]},"t":0,"s":[100]},{"t":21,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"nm_g","mn":"mn_d","hd":false}],"ip":0,"op":1072,"st":-74,"ct":1,"bm":0}],"markers":[{"tm":0,"cm":"","dr":0},{"tm":38,"cm":"","dr":0}],"_compressed":true}');
+var __webpack_exports___compressed = success_namespaceObject._compressed;
+var __webpack_exports__assets = success_namespaceObject.assets;
+var __webpack_exports__ddd = success_namespaceObject.ddd;
+var __webpack_exports__fr = success_namespaceObject.fr;
+var __webpack_exports__h = success_namespaceObject.h;
+var __webpack_exports__ip = success_namespaceObject.ip;
+var __webpack_exports__layers = success_namespaceObject.layers;
+var __webpack_exports__markers = success_namespaceObject.markers;
+var __webpack_exports__nm = success_namespaceObject.nm;
+var __webpack_exports__op = success_namespaceObject.op;
+var __webpack_exports__v = success_namespaceObject.v;
+var __webpack_exports__w = success_namespaceObject.w;
+export { __webpack_exports___compressed as _compressed, __webpack_exports__assets as assets, __webpack_exports__ddd as ddd, __webpack_exports__fr as fr, __webpack_exports__h as h, __webpack_exports__ip as ip, __webpack_exports__layers as layers, __webpack_exports__markers as markers, __webpack_exports__nm as nm, __webpack_exports__op as op, __webpack_exports__v as v, __webpack_exports__w as w };

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

@@ -0,0 +1,7 @@
+import Toast, { type ToastShowParams } from 'react-native-toast-message';
+export declare const UXToast: typeof Toast;
+export declare const toast: {
+    success: (message: string, options?: ToastShowParams) => void;
+    error: (message: string, options?: ToastShowParams) => void;
+    loading: (message: string, options?: ToastShowParams) => void;
+};

package/dist/components/UXToast/toast.js

@@ -0,0 +1,29 @@
+import react_native_toast_message from "react-native-toast-message";
+const UXToast = react_native_toast_message;
+const toast = {
+    success: (message, options)=>{
+        UXToast.show({
+            type: 'success',
+            text1: message,
+            ...options
+        });
+    },
+    error: (message, options)=>{
+        UXToast.show({
+            type: 'error',
+            text1: message,
+            ...options
+        });
+    },
+    loading: (message, options)=>{
+        const { visibilityTime = 0, autoHide = !!visibilityTime, ...restOptions } = options ?? {};
+        UXToast.show({
+            type: 'loading',
+            text1: message,
+            visibilityTime,
+            autoHide,
+            ...restOptions
+        });
+    }
+};
+export { UXToast, toast };

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

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

package/dist/components/UXToast/toastConfig.js

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

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

@@ -0,0 +1,7 @@
+import type { ToastShowParams } from 'react-native-toast-message';
+export interface ToastProps extends ToastShowParams {
+    btnText?: string;
+    colorBg?: boolean;
+    numberOfLines?: number;
+    onPress?: () => void;
+}

package/dist/components/index.d.ts

@@ -20,5 +20,6 @@ export * from './UXRadio';
 export * from './UXSpinner';
 export * from './UXSwitch';
 export * from './UXTabs';
+export * from './UXToast';
 export * from './UXTooltip';
 export * from './UXTouchableOpacity';

package/dist/components/index.js

@@ -20,5 +20,6 @@ export * from "./UXRadio/index.js";
 export * from "./UXSpinner/index.js";
 export * from "./UXSwitch/index.js";
 export * from "./UXTabs/index.js";
+export * from "./UXToast/index.js";
 export * from "./UXTooltip/index.js";
 export * from "./UXTouchableOpacity/index.js";

package/dist/config/config.default.js

@@ -50,6 +50,9 @@ const defaultComponentConfig = {
         defaultProps: {
             radius: 4
         }
+    },
+    toast: {
+        radius: 'lg'
     }
 };
 export { defaultComponentConfig };

package/dist/config/config.ux.js

@@ -56,6 +56,9 @@ const uxComponentConfig = {
         defaultProps: {
             radius: 'full'
         }
+    },
+    toast: {
+        radius: 'full'
     }
 };
 export { uxComponentConfig };

package/dist/icons/CloseIcon.d.ts

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

package/dist/icons/CloseIcon.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { Path } from "react-native-svg";
+import { useColors } from "../hooks/index.js";
+const DotIcon = ({ size = 16, color = 'default', ...props })=>{
+    const { getColor } = useColors();
+    const colorValue = getColor(color);
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M5.29102 5.29102C5.47727 5.105 5.72974 5.00052 5.99298 5.00052C6.25621 5.00052 6.50868 5.105 6.69494 5.29102L11.9993 10.5941L17.3051 5.29102C17.4733 5.1228 17.6962 5.02051 17.9335 5.00277C18.1707 4.98503 18.4064 5.053 18.5977 5.19434L18.709 5.29102C18.895 5.47727 18.9995 5.72974 18.9995 5.99298C18.9995 6.25621 18.895 6.50868 18.709 6.69494L13.4046 11.9993L18.709 17.3051C18.8772 17.4733 18.9795 17.6962 18.9972 17.9335C19.015 18.1707 18.947 18.4064 18.8057 18.5977L18.709 18.709C18.5227 18.895 18.2703 18.9995 18.007 18.9995C17.7438 18.9995 17.4913 18.895 17.3051 18.709L11.9993 13.4046L6.69494 18.709C6.52675 18.8772 6.30377 18.9795 6.06655 18.9972C5.82933 19.015 5.59362 18.947 5.40228 18.8057L5.29102 18.709C5.105 18.5227 5.00052 18.2703 5.00052 18.007C5.00052 17.7438 5.105 17.4913 5.29102 17.3051L10.5941 11.9993L5.29102 6.69494C5.1228 6.52675 5.02051 6.30377 5.00277 6.06655C4.98503 5.82933 5.053 5.59362 5.19434 5.40228L5.29102 5.29102Z",
+            fill: colorValue
+        })
+    });
+};
+const CloseIcon = DotIcon;
+export { CloseIcon as default };

package/dist/types/theme.d.ts

@@ -27,6 +27,9 @@ export interface ComponentConfig {
     };
     tabs: Pick<CommonComponentConfig, 'defaultProps' | 'fontSize'>;
     chip: Pick<CommonComponentConfig, 'defaultProps'>;
+    toast: {
+        radius: UXRadius;
+    };
 }
 export interface ThemeConfig {
     theme: ThemeMode;

package/dist/utils/triggerHapticFeedback.js

@@ -1,5 +1,8 @@
-import { ImpactFeedbackStyle, impactAsync } from "expo-haptics";
+import { Platform } from "react-native";
 const triggerHapticFeedback = async (style = 'light')=>{
+    if ('web' === Platform.OS) return;
+    const impactAsync = await import("expo-haptics").then((module)=>module.impactAsync);
+    const ImpactFeedbackStyle = await import("expo-haptics").then((module)=>module.ImpactFeedbackStyle);
     try {
         const feedbackStyleMap = {
             light: ImpactFeedbackStyle.Light,

package/entry.js

@@ -0,0 +1,5 @@
+import registerRootComponent from 'expo/src/launch/registerRootComponent';
+
+import App from './App';
+
+registerRootComponent(App);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
@@ -16,22 +16,6 @@
       "default": "./dist/index.js"
     }
   },
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "storybook:preview": "serve storybook-static",
-    "storybook:generate": "sb-rn-get-stories",
-    "type-check": "npx tsc --noEmit -p ./tsconfig.json",
-    "dev": "rslib build --watch",
-    "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",
-    "deploy:dev": "sh ./scripts/deploy-dev.sh"
-  },
   "files": [
     "dist",
     "README.md",
@@ -51,63 +35,62 @@
   ],
   "author": "UniversalX",
   "dependencies": {
-    "@particle-network/ui-shared": "*",
+    "@lottiefiles/dotlottie-react": "^0.16.2",
     "ahooks": "^3.9.4",
     "deepmerge": "^4.3.1",
-    "expo-haptics": "^14.1.4",
+    "expo-haptics": "^15.0.7",
+    "expo-image": "^3.0.8",
+    "lottie-react-native": "^7.3.4",
     "react-native-paper": "^5.14.5",
-    "react-native-size-matters": "^0.4.2"
+    "react-native-size-matters": "^0.4.2",
+    "react-native-toast-message": "^2.3.3",
+    "@particle-network/ui-shared": "0.0.7",
+    "@particle-network/icons": "0.0.15"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.25.4",
-    "@chromatic-com/storybook": "^4.0.0",
-    "@expo/metro-runtime": "~5.0.4",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@expo/metro-runtime": "~6.1.2",
     "@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",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/slider": "5.0.1",
     "@rsbuild/core": "^1.5.0",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.2",
-    "@storybook/addon-docs": "^9",
-    "@storybook/addon-ondevice-actions": "^9",
-    "@storybook/addon-ondevice-backgrounds": "^9",
-    "@storybook/addon-ondevice-controls": "^9",
-    "@storybook/addon-ondevice-notes": "^9",
-    "@storybook/react": "^9",
-    "@storybook/react-native": "^9",
-    "@storybook/react-native-web-vite": "^9",
-    "@types/react": "~19.0.10",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-ondevice-actions": "^9.1.2",
+    "@storybook/addon-ondevice-backgrounds": "^9.1.2",
+    "@storybook/addon-ondevice-controls": "^9.1.2",
+    "@storybook/addon-ondevice-notes": "^9.1.2",
+    "@storybook/react-native": "^9.1.2",
+    "@storybook/react-native-web-vite": "^9.1.6",
+    "@types/react": "^19.1.10",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "cross-env": "^7.0.3",
-    "expo": "~53.0.22",
-    "expo-constants": "~17.1.6",
-    "expo-status-bar": "~2.2.3",
+    "expo": "~54.0.0",
+    "expo-constants": "~18.0.8",
+    "expo-status-bar": "~3.0.8",
     "lucide-react-native": "^0.541.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-svg": "15.11.2",
-    "react-native-web": "^0.20.0",
-    "storybook": "^9",
-    "typescript": "~5.8.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "5.6.1",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "^0.21.1",
+    "storybook": "^9.1.6",
+    "typescript": "~5.9.2",
     "unfetch": "^4.2.0",
-    "vite": "^6.3.5"
-  },
-  "resolutions": {
-    "react-docgen-typescript": "2.2.2",
-    "react-native-web": "^0.20.0",
-    "unfetch": "^4.2.0"
+    "vite": "^6.3.5",
+    "zustand": "^5.0.8",
+    "@particle-network/eslint-config": "0.0.5"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",
-    "react-native-web": "^0.20.0",
     "unfetch": "^4.2.0"
   },
   "expo": {
@@ -116,5 +99,21 @@
         "listUnknownPackages": false
       }
     }
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:preview": "serve storybook-static",
+    "storybook:generate": "sb-rn-get-stories",
+    "type-check": "npx tsc --noEmit -p ./tsconfig.json",
+    "dev": "rslib build --watch",
+    "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",
+    "deploy:dev": "sh ./scripts/deploy-dev.sh"
   }
-}
+}