@particle-network/ui-native 0.0.17 → 0.0.19

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.js

@@ -1,9 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { ActivityIndicator, Keyboard } from "react-native";
+import { Keyboard } from "react-native";
 import { triggerHapticFeedback } from "../../utils/triggerHapticFeedback.js";
 import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
+import { UXSpinner } from "../UXSpinner/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, width, w, h, isIconOnly, children, ...restProps } = props;
@@ -12,7 +13,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         triggerHapticFeedback();
         onPress?.(e);
     };
-    const { styles, textColor } = useStyles({
+    const { styles, textColor, spinnerSize } = useStyles({
         size,
         radius,
         color,
@@ -36,15 +37,15 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         styles.title
     ]);
     const renderChildren = useMemo(()=>{
-        if (isLoading && isIconOnly) return /*#__PURE__*/ jsx(ActivityIndicator, {
+        if (isLoading && isIconOnly) return /*#__PURE__*/ jsx(UXSpinner, {
             color: textColor,
-            size: "small"
+            size: spinnerSize
         });
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                isLoading ? /*#__PURE__*/ jsx(ActivityIndicator, {
+                isLoading ? /*#__PURE__*/ jsx(UXSpinner, {
                     color: textColor,
-                    size: "small"
+                    size: spinnerSize
                 }) : null,
                 startContent,
                 content,
@@ -57,7 +58,8 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         textColor,
         startContent,
         endContent,
-        isIconOnly
+        isIconOnly,
+        spinnerSize
     ]);
     return /*#__PURE__*/ jsx(UXPressable, {
         ref: ref,

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

@@ -1,3 +1,4 @@
+import type { UXColor } from '@particle-network/ui-shared';
 import type { UXButtonProps } from './button.types';
 export declare const useStyles: (props: UXButtonProps) => {
     styles: {
@@ -30,5 +31,6 @@ export declare const useStyles: (props: UXButtonProps) => {
             color: string | undefined;
         };
     };
-    textColor: string | undefined;
+    textColor: UXColor;
+    spinnerSize: number;
 };

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
     ]);
@@ -66,6 +66,10 @@ const useStyles = (props)=>{
         size,
         fontSizeMap
     ]);
+    const spinnerSize = useMemo(()=>fontSize + ms(4), [
+        fontSize,
+        ms
+    ]);
     const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
         radius,
         size,
@@ -82,19 +86,21 @@ const useStyles = (props)=>{
     ]);
     const textColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
-        if (customColorConfig) return getColor(customColorConfig.text);
-        if ('contrast' === color) return getColor('bg-default');
-        if ('solid' === variant && ![
-            'default',
-            'secondary'
-        ].includes(color)) return getColor('white');
-        return getColor(color);
+        if ('solid' === variant) {
+            if (customColorConfig) return customColorConfig.text;
+            if ('contrast' === color) return 'bg-default';
+            return 'white';
+        }
+        return color;
     }, [
         color,
-        getColor,
         variant,
         buttonConfig?.color
     ]);
+    const textActualColor = useMemo(()=>getColor(textColor), [
+        textColor,
+        getColor
+    ]);
     const backgroundColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
         if ('solid' === variant) {
@@ -172,12 +178,13 @@ const useStyles = (props)=>{
             fontWeight,
             fontSize,
             lineHeight: fontSize + ms(4),
-            color: textColor
+            color: textActualColor
         }
     });
     return {
         styles,
-        textColor
+        textColor,
+        spinnerSize
     };
 };
 export { useStyles };

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/UXSpinner/SpinnerIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type SvgProps } from 'react-native-svg';
+interface SpinnerIconProps extends SvgProps {
+    currentIndex: number;
+}
+export declare const SpinnerIcon: React.FC<SpinnerIconProps>;
+export {};

package/dist/components/UXSpinner/SpinnerIcon.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { Path } from "react-native-svg";
+import { pathsData } from "./pathData.js";
+const SpinnerIcon = ({ currentIndex, ...props })=>{
+    const opacityValues = [
+        1,
+        0.9,
+        0.85,
+        0.8,
+        0.75,
+        0.7,
+        0.65,
+        0.6,
+        0.5,
+        0.4,
+        0.3,
+        0.2
+    ];
+    const getOpacity = (index)=>{
+        const distance = (currentIndex - index + 12) % 12;
+        return opacityValues[distance];
+    };
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        width: 18,
+        height: 18,
+        viewBox: "0 0 18 18",
+        fill: "none",
+        ...props,
+        children: pathsData.map((pathInfo, index)=>/*#__PURE__*/ jsx(Path, {
+                d: pathInfo.d,
+                fill: "currentColor",
+                opacity: getOpacity(index)
+            }, index))
+    });
+};
+export { SpinnerIcon };

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

@@ -0,0 +1,2 @@
+export type { UXSpinnerProps } from './spinner';
+export { default as UXSpinner } from './spinner';

package/dist/components/UXSpinner/index.js

@@ -0,0 +1,2 @@
+import spinner from "./spinner.js";
+export { spinner as UXSpinner };

package/dist/components/UXSpinner/pathData.d.ts

@@ -0,0 +1,4 @@
+export declare const pathsData: {
+    d: string;
+    opacity: number;
+}[];

package/dist/components/UXSpinner/pathData.js

@@ -0,0 +1,51 @@
+const pathsData = [
+    {
+        d: 'M9.00027 1.08008C9.19123 1.08008 9.37436 1.15594 9.50939 1.29096C9.64442 1.42599 9.72027 1.60912 9.72027 1.80008V3.96008C9.72027 4.15103 9.64442 4.33417 9.50939 4.46919C9.37436 4.60422 9.19123 4.68008 9.00027 4.68008C8.80932 4.68008 8.62618 4.60422 8.49116 4.46919C8.35613 4.33417 8.28027 4.15103 8.28027 3.96008V1.80008C8.28027 1.60912 8.35613 1.42599 8.49116 1.29096C8.62618 1.15594 8.80932 1.08008 9.00027 1.08008Z',
+        opacity: 1
+    },
+    {
+        d: 'M12.9593 2.14138C13.1246 2.23686 13.2453 2.39412 13.2947 2.57857C13.3441 2.76301 13.3183 2.95953 13.2228 3.1249L12.1428 4.99582C12.0959 5.07837 12.0331 5.15081 11.958 5.20899C11.883 5.26717 11.7972 5.30993 11.7055 5.3348C11.6139 5.35968 11.5182 5.36619 11.4241 5.35395C11.3299 5.34171 11.2391 5.31097 11.1569 5.26349C11.0746 5.21601 11.0026 5.15274 10.9449 5.07731C10.8873 5.00188 10.8451 4.91579 10.8208 4.82399C10.7965 4.73219 10.7906 4.6365 10.8035 4.54242C10.8164 4.44834 10.8477 4.35774 10.8957 4.27582L11.9757 2.4049C12.0712 2.23954 12.2285 2.11887 12.4129 2.06945C12.5974 2.02004 12.7939 2.04591 12.9593 2.14138Z',
+        opacity: 0.9
+    },
+    {
+        d: 'M15.8587 5.03967C15.9542 5.20504 15.9801 5.40156 15.9307 5.586C15.8813 5.77045 15.7606 5.92771 15.5952 6.02319L13.7243 7.10319C13.559 7.19716 13.3633 7.22194 13.1798 7.17213C12.9963 7.12231 12.84 7.00194 12.7449 6.83729C12.6498 6.67263 12.6238 6.47706 12.6724 6.29325C12.721 6.10943 12.8403 5.9523 13.0043 5.85615L14.8752 4.77615C15.0406 4.68067 15.2371 4.6548 15.4216 4.70422C15.606 4.75364 15.7633 4.8743 15.8587 5.03967Z',
+        opacity: 0.85
+    },
+    {
+        d: 'M16.9203 8.9993C16.9203 9.09385 16.9017 9.18747 16.8655 9.27483C16.8293 9.36218 16.7763 9.44156 16.7094 9.50841C16.6426 9.57527 16.5632 9.62831 16.4758 9.66449C16.3885 9.70067 16.2949 9.7193 16.2003 9.7193H14.0403C13.8494 9.7193 13.6662 9.64344 13.5312 9.50841C13.3962 9.37339 13.3203 9.19025 13.3203 8.9993C13.3203 8.80834 13.3962 8.62521 13.5312 8.49018C13.6662 8.35515 13.8494 8.2793 14.0403 8.2793H16.2003C16.2949 8.2793 16.3885 8.29792 16.4758 8.3341C16.5632 8.37029 16.6426 8.42332 16.7094 8.49018C16.7763 8.55704 16.8293 8.63641 16.8655 8.72376C16.9017 8.81112 16.9203 8.90474 16.9203 8.9993Z',
+        opacity: 0.8
+    },
+    {
+        d: 'M15.8592 12.9612C15.7637 13.1266 15.6065 13.2472 15.422 13.2967C15.2376 13.3461 15.041 13.3202 14.8757 13.2247L13.0048 12.1447C12.9222 12.0978 12.8498 12.035 12.7916 11.96C12.7334 11.8849 12.6907 11.7991 12.6658 11.7075C12.6409 11.6158 12.6344 11.5202 12.6466 11.426C12.6589 11.3319 12.6896 11.2411 12.7371 11.1588C12.7846 11.0766 12.8478 11.0046 12.9233 10.9469C12.9987 10.8892 13.0848 10.847 13.1766 10.8227C13.2684 10.7985 13.3641 10.7926 13.4582 10.8055C13.5522 10.8183 13.6428 10.8497 13.7248 10.8977L15.5957 11.9777C15.761 12.0732 15.8817 12.2304 15.9311 12.4149C15.9805 12.5993 15.9547 12.7958 15.8592 12.9612Z',
+        opacity: 0.75
+    },
+    {
+        d: 'M12.9603 15.8587C12.795 15.9542 12.5985 15.9801 12.414 15.9307C12.2296 15.8813 12.0723 15.7606 11.9768 15.5952L10.8968 13.7243C10.8029 13.559 10.7781 13.3633 10.8279 13.1798C10.8777 12.9963 10.9981 12.84 11.1627 12.7449C11.3274 12.6498 11.523 12.6238 11.7068 12.6724C11.8906 12.721 12.0477 12.8403 12.1439 13.0043L13.2239 14.8752C13.3193 15.0406 13.3452 15.2371 13.2958 15.4216C13.2464 15.606 13.1257 15.7633 12.9603 15.8587Z',
+        opacity: 0.7
+    },
+    {
+        d: 'M9.00027 16.9203C8.90572 16.9203 8.8121 16.9017 8.72474 16.8655C8.63739 16.8293 8.55801 16.7763 8.49116 16.7094C8.4243 16.6426 8.37126 16.5632 8.33508 16.4758C8.2989 16.3885 8.28027 16.2949 8.28027 16.2003V14.0403C8.28027 13.8494 8.35613 13.6662 8.49116 13.5312C8.62618 13.3962 8.80932 13.3203 9.00027 13.3203C9.19123 13.3203 9.37436 13.3962 9.50939 13.5312C9.64442 13.6662 9.72027 13.8494 9.72027 14.0403V16.2003C9.72027 16.2949 9.70165 16.3885 9.66547 16.4758C9.62928 16.5632 9.57625 16.6426 9.50939 16.7094C9.44253 16.7763 9.36316 16.8293 9.27581 16.8655C9.18845 16.9017 9.09483 16.9203 9.00027 16.9203Z',
+        opacity: 0.65
+    },
+    {
+        d: 'M5.03967 15.8592C4.8743 15.7637 4.75364 15.6065 4.70422 15.422C4.6548 15.2376 4.68067 15.041 4.77615 14.8757L5.85615 13.0048C5.90308 12.9222 5.96587 12.8498 6.04092 12.7916C6.11596 12.7334 6.20177 12.6907 6.29341 12.6658C6.38505 12.6409 6.4807 12.6344 6.57486 12.6466C6.66902 12.6589 6.75983 12.6896 6.84206 12.7371C6.9243 12.7846 6.99632 12.8478 7.054 12.9233C7.11168 12.9987 7.15387 13.0848 7.17814 13.1766C7.20241 13.2684 7.20828 13.3641 7.19542 13.4582C7.18256 13.5522 7.15121 13.6428 7.10319 13.7248L6.02319 15.5957C5.92771 15.761 5.77045 15.8817 5.586 15.9311C5.40156 15.9805 5.20504 15.9547 5.03967 15.8592Z',
+        opacity: 0.6
+    },
+    {
+        d: 'M2.14041 12.9584C2.04493 12.793 2.01906 12.5965 2.06848 12.4121C2.1179 12.2276 2.23856 12.0704 2.40393 11.9749L4.27485 10.8949C4.44013 10.8009 4.63587 10.7761 4.81936 10.8259C5.00284 10.8758 5.15918 10.9961 5.25424 11.1608C5.34931 11.3254 5.37539 11.521 5.32679 11.7048C5.2782 11.8886 5.15887 12.0458 4.99485 12.1419L3.12393 13.2219C2.95856 13.3174 2.76203 13.3433 2.57759 13.2938C2.39315 13.2444 2.23589 13.1238 2.14041 12.9584Z',
+        opacity: 0.5
+    },
+    {
+        d: 'M1.08017 8.9993C1.08017 8.80834 1.15603 8.62521 1.29105 8.49018C1.42608 8.35515 1.60921 8.2793 1.80017 8.2793H3.96017C4.15113 8.2793 4.33426 8.35515 4.46929 8.49018C4.60431 8.62521 4.68017 8.80834 4.68017 8.9993C4.68017 9.19025 4.60431 9.37339 4.46929 9.50841C4.33426 9.64344 4.15113 9.7193 3.96017 9.7193H1.80017C1.60921 9.7193 1.42608 9.64344 1.29105 9.50841C1.15603 9.37339 1.08017 9.19025 1.08017 8.9993Z',
+        opacity: 0.4
+    },
+    {
+        d: 'M2.14041 5.03967C2.23589 4.8743 2.39315 4.75364 2.57759 4.70422C2.76203 4.6548 2.95856 4.68067 3.12393 4.77615L4.99485 5.85615C5.07739 5.90308 5.14984 5.96587 5.20801 6.04092C5.26619 6.11596 5.30895 6.20177 5.33383 6.29341C5.35871 6.38505 5.36521 6.4807 5.35298 6.57486C5.34074 6.66902 5.30999 6.75983 5.26252 6.84206C5.21504 6.9243 5.15176 6.99632 5.07633 7.054C5.00091 7.11168 4.91481 7.15387 4.82301 7.17814C4.73122 7.20241 4.63552 7.20828 4.54144 7.19542C4.44736 7.18256 4.35676 7.15121 4.27485 7.10319L2.40393 6.02319C2.23856 5.92771 2.1179 5.77045 2.06848 5.586C2.01906 5.40156 2.04493 5.20504 2.14041 5.03967Z',
+        opacity: 0.3
+    },
+    {
+        d: 'M5.03967 2.14138C5.20504 2.04591 5.40156 2.02004 5.586 2.06945C5.77045 2.11887 5.92771 2.23954 6.02319 2.4049L7.10319 4.27582C7.19716 4.4411 7.22194 4.63685 7.17213 4.82033C7.12231 5.00382 7.00194 5.16015 6.83729 5.25522C6.67263 5.35029 6.47706 5.37637 6.29325 5.32777C6.10943 5.27917 5.9523 5.15984 5.85615 4.99582L4.77615 3.1249C4.68067 2.95953 4.6548 2.76301 4.70422 2.57857C4.75364 2.39412 4.8743 2.23686 5.03967 2.14138Z',
+        opacity: 0.2
+    }
+];
+export { pathsData };

package/dist/components/UXSpinner/spinner.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { UXColor } from '@particle-network/ui-shared';
+import { type SquareProps } from '../layout/Square';
+export interface UXSpinnerProps extends SquareProps {
+    /**
+     * 颜色
+     */
+    color?: UXColor;
+    /**
+     * 动画持续时间(毫秒)
+     * @default 1000
+     */
+    duration?: number;
+}
+declare const UXSpinner: React.FC<UXSpinnerProps>;
+export default UXSpinner;

package/dist/components/UXSpinner/spinner.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useColors } from "../../hooks/index.js";
+import { Square } from "../layout/Square.js";
+import { SpinnerIcon } from "./SpinnerIcon.js";
+const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, ...restProps })=>{
+    const { getColor } = useColors();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const animationRef = useRef(null);
+    const actualColor = getColor(color);
+    useEffect(()=>{
+        const stepDuration = duration / 12;
+        const animate = ()=>{
+            setCurrentIndex((prevIndex)=>(prevIndex + 1) % 12);
+            animationRef.current = setTimeout(animate, stepDuration);
+        };
+        animationRef.current = setTimeout(animate, stepDuration);
+        return ()=>{
+            if (animationRef.current) clearTimeout(animationRef.current);
+        };
+    }, [
+        duration
+    ]);
+    return /*#__PURE__*/ jsx(Square, {
+        size: size,
+        ...restProps,
+        children: /*#__PURE__*/ jsx(SpinnerIcon, {
+            width: size,
+            height: size,
+            color: actualColor,
+            currentIndex: currentIndex
+        })
+    });
+};
+const spinner = UXSpinner;
+export { spinner as default };

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

@@ -17,7 +17,9 @@ export * from './UXListBox';
 export * from './UXModal';
 export * from './UXPressable';
 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

@@ -17,7 +17,9 @@ export * from "./UXListBox/index.js";
 export * from "./UXModal/index.js";
 export * from "./UXPressable/index.js";
 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.17",
+  "version": "0.0.19",
   "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,61 @@
   ],
   "author": "UniversalX",
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.16.2",
     "@particle-network/ui-shared": "*",
     "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"
   },
   "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"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",
-    "react-native-web": "^0.20.0",
     "unfetch": "^4.2.0"
   },
   "expo": {
@@ -116,5 +98,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"
   }
-}
+}