@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Image/PreviewImg.tsx

@@ -1,140 +0,0 @@
-import React, {useState} from 'react';
-import {View, TouchableOpacity} from 'react-native';
-import {Overlay, makeStyles, withTheme} from '@rneui/themed';
-import Icon from '../Icons/TapasIcon';
-
-export interface TapasPreviewProps {
-  isVisible?: boolean;
-  data: IFileState[];
-  defaultIndex?: number;
-  onClose: () => void;
-  onSelect?: (index: number) => void;
-}
-
-export interface IFileState {
-  fileId?: string;
-  fileName?: string;
-  fileUrl?: string;
-}
-
-const useStyles = makeStyles(() => {
-  return {
-    flx: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    flxStart: {
-      alignItems: 'flex-start',
-      width: '100%'
-    },
-    container: {
-      backgroundColor: 'transparent',
-      padding: 0,
-      border: 0
-    },
-    bg: {
-      backgroundColor: 'rgba(0, 0, 0, 0.6)'
-    },
-    thumbnailWrapper: {
-      flexDirection: 'row',
-      marginTop: 16,
-      gap: 8
-    },
-    imgWrapper: {
-      width: 84,
-      height: 84,
-      borderWidth: 2,
-      borderRadius: 4
-    }
-  };
-});
-const PreviewImg: React.FC<TapasPreviewProps> = ({
-  isVisible = false,
-  data,
-  defaultIndex = 0,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const [visible, setVisible] = useState(isVisible);
-  const [currentIndex, setCurrentIndex] = React.useState<number>(defaultIndex);
-
-  const getIcon = (iconName: string, disabled?: boolean) => {
-    return disabled ? (
-      <Icon
-        size={24}
-        color={(props as Record<string, any>).theme?.colors?.colorInvertDisabledIcon}
-        name={iconName}
-      />
-    ) : (
-      <TouchableOpacity
-        onPress={() => {
-          if (iconName === 'chevron_left') {
-            setCurrentIndex(currentIndex - 1);
-          } else {
-            setCurrentIndex(currentIndex + 1);
-          }
-        }}
-        accessibilityRole="button"
-        accessibilityLabel={iconName === 'chevron_left' ? 'Previous image' : 'Next image'}
-      >
-        <Icon
-          size={24}
-          color={(props as Record<string, any>).theme?.colors?.colorInvertNormalIcon}
-          name={iconName}
-        />
-      </TouchableOpacity>
-    );
-  };
-  return (
-    <Overlay
-      isVisible={visible}
-      overlayStyle={[styles.flx, styles.container]}
-      backdropStyle={styles.bg}
-      onBackdropPress={() => {
-        setVisible(!visible);
-        props?.onClose && props.onClose();
-      }}
-    >
-      <TouchableOpacity
-        style={[styles.flx, styles.flxStart]}
-        onPress={() => {
-          props?.onClose && props.onClose();
-        }}
-        accessibilityRole="button"
-        accessibilityLabel="Close preview"
-      >
-        <Icon
-          size={40}
-          color={(props as Record<string, any>).theme?.colors?.colorInvertNormalIcon}
-          name="close"
-        />
-      </TouchableOpacity>
-      <img style={{height: window.innerHeight - 200}} src={data[currentIndex]?.fileUrl} alt="Preview image" />
-      <View style={[styles.flx, styles.thumbnailWrapper]}>
-        {data.length > 1 ? getIcon('chevron_left', currentIndex === 0) : null}
-        {data?.map((item, index) => {
-          return (
-            <TouchableOpacity
-              onPress={() => {
-                setCurrentIndex(index);
-              }}
-              style={[
-                styles.imgWrapper,
-                {borderColor: index === currentIndex ? '#F55523' : 'transparent'}
-              ]}
-              accessibilityRole="button"
-              accessibilityLabel={`Image ${index + 1}`}
-            >
-              <img key={index} src={item?.fileUrl} alt={`Thumbnail image ${index + 1}`} />
-            </TouchableOpacity>
-          );
-        })}
-        {data.length > 1 ? getIcon('chevron_right', currentIndex === data.length - 1) : null}
-      </View>
-    </Overlay>
-  );
-};
-
-export default withTheme(PreviewImg);

package/components/Input/Input.tsx

@@ -1,351 +0,0 @@
-import React, {FC, useState, useCallback, useMemo, useRef, useEffect} from "react";
-import {View, Text, Platform, Keyboard} from "react-native";
-import {withTheme, Input, InputProps, makeStyles} from "@rneui/themed";
-import { isBridgelessMode } from "../common/bridgelessUtils";
-
-// 方案 3：全局 Input 实例管理器，用于清除其他 Input 的重新聚焦标记
-// 存储所有 Input 实例的 shouldRefocusRef，用于在 focus 时清除其他 Input 的标记
-const inputInstancesRef = new Set<React.MutableRefObject<boolean>>();
-
-const useStyles = makeStyles((theme: any, ...props: any) => {
-  const {labelBg, labelColor} = props[0] as { labelBg?: string; labelColor?: string };
-  return {
-    inputBase: {
-      minWidth: 112,
-      minHeight: 40,
-      paddingHorizontal: 0,
-      paddingVertical: 0,
-    },
-    input: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextPrimary,
-      // placeholderTextColor: theme.colors.colorTextSecondary, // Not supported in React Native
-      borderRadius: theme.radius.rounded,
-      borderWidth: 1,
-      borderColor: theme.colors.colorBorder1,
-      paddingLeft: 16,
-      paddingRight: 12,
-    },
-    labelContext: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightR,
-      backgroundColor: labelBg || theme.colors.white,
-      color: labelColor || theme.colors.colorTextPrimary,
-      overflow: "hidden",
-      position: "absolute",
-      display: "flex",
-      flexDirection: "row",
-      zIndex: 1,
-      left: 17,
-      top: -7,
-    },
-    require: {
-      color: theme.colors.colorTextError,
-    },
-    errorBorder: {
-      borderColor: theme.colors.colorTextError,
-    },
-    stateMsg: {
-      fontSize: theme.fonts.sizeS,
-      color: theme.colors.colorTextError,
-      marginTop: -16,
-      marginLeft: 16,
-      marginBottom: 4,
-    },
-    unit: {
-      fontSize: theme.fonts.sizeM,
-      color: theme.colors.colorTextSecondary,
-      marginLeft: 4,
-    },
-    clearBtn: {
-      padding: 4,
-      marginLeft: 4,
-    },
-  };
-});
-export interface TapasInputProps extends InputProps {
-  labelPosition?: "top" | "middle";
-  defaultShowLabel?: boolean;
-  labelBg?: string;
-  labelColor?: string;
-  required?: boolean;
-  /**
-   * 是否启用 RN 0.77 Bridgeless 模式兼容性修复（默认 true）
-   * 当运行在 RN 0.77+ 的 Bridgeless 模式下时，会自动应用焦点管理修复
-   * 如果遇到问题，可以尝试设置为 false
-   */
-  enableBridgelessFix?: boolean;
-  state?: "normal" | "error";
-  stateMsg?: string;
-  unit?: string;
-  showClearBtn?: boolean;
-  password?: boolean;
-}
-
-export const TapasInput: FC<TapasInputProps> = ({
-  labelPosition = "top",
-  onBlur,
-  onFocus,
-  value: propValue,
-  enableBridgelessFix = true,
-  state,
-  stateMsg,
-  unit,
-  showClearBtn,
-  password,
-  testID,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<any>(null);
-  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const keyboardShowListenerRef = useRef<any>(null);
-  const keyboardHideListenerRef = useRef<any>(null);
-  const shouldRefocusRef = useRef(false);
-  const isBridgeless = useRef(isBridgelessMode());
-  // 使用 ref 存储 isFocused 的最新值，避免在 useEffect 中需要依赖
-  const isFocusedRef = useRef(false);
-  // 记录最后一次 focus 的时间戳，用于焦点切换保护期
-  const lastFocusTimeRef = useRef<number>(0);
-  // 焦点切换保护期（ms），在此时间内不执行重新聚焦，避免焦点跳动
-  const FOCUS_SWITCH_PROTECTION_PERIOD = 200;
-  
-  const handleFocus = useCallback((e: any) => {
-    // 清除可能存在的 blur 延迟
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
-      blurTimeoutRef.current = null;
-    }
-    
-    // 方案 3：清除所有其他 Input 的重新聚焦标记
-    // 当当前 Input 获得焦点时，清除其他 Input 的 shouldRefocusRef，防止焦点跳动
-    inputInstancesRef.forEach((ref) => {
-      if (ref !== shouldRefocusRef) {
-        ref.current = false;
-      }
-    });
-    
-    // 清除当前组件的重新聚焦标记，因为当前组件已经获得焦点
-    shouldRefocusRef.current = false;
-    // 记录 focus 时间戳，用于焦点切换保护期判断
-    lastFocusTimeRef.current = Date.now();
-    // 更新 ref 和 state
-    isFocusedRef.current = true;
-    setIsFocused(true);
-    onFocus?.(e);
-  }, [onFocus]);
-
-  const handleBlur = useCallback((e: any) => {
-    // 在 Android 上延迟处理 blur，避免键盘弹出时立即失焦
-    // React Native 0.77 Bridgeless 模式的已知问题修复
-    if (Platform.OS === 'android' && enableBridgelessFix) {
-      // 标记可能需要重新聚焦
-      shouldRefocusRef.current = true;
-      
-      // 清除之前的延迟
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-      }
-      
-      // 延迟处理 blur，给键盘足够时间显示
-      // Bridgeless 模式可能需要更长的延迟（500-800ms）来适应新架构
-      const delay = isBridgeless.current ? 800 : 500;
-      blurTimeoutRef.current = setTimeout(() => {
-        // 如果标记仍然为 true，说明键盘显示后输入框确实失焦了
-        // 此时检查是否需要重新聚焦（通过键盘监听器处理）
-        if (!shouldRefocusRef.current) {
-          // 如果标记已被清除（说明键盘隐藏或重新聚焦成功），不执行 blur
-          blurTimeoutRef.current = null;
-          return;
-        }
-        
-        // 更新 ref 和 state
-        isFocusedRef.current = false;
-        setIsFocused(false);
-        onBlur?.(e);
-        shouldRefocusRef.current = false;
-        blurTimeoutRef.current = null;
-      }, delay);
-    } else {
-      isFocusedRef.current = false;
-      setIsFocused(false);
-      onBlur?.(e);
-    }
-  }, [onBlur, enableBridgelessFix]);
-
-  const shouldShowLabel = useMemo(() => 
-    props?.defaultShowLabel || propValue || isFocused
-  , [props?.defaultShowLabel, propValue, isFocused]);
-
-  const containerStyleMemo = useMemo(() => [styles.inputBase, props.containerStyle], [styles.inputBase, props.containerStyle]);
-  const inputStyleMemo = useMemo(() => [styles.inputBase, styles.input, props.inputStyle], [styles.inputBase, styles.input, props.inputStyle]);
-  const inputContainerStyleMemo = useMemo(() => [{borderBottomWidth: 0}, props.inputContainerStyle], [props.inputContainerStyle]);
-
-  // 方案 3：注册当前 Input 实例到全局管理器
-  useEffect(() => {
-    if (Platform.OS === 'android' && enableBridgelessFix) {
-      inputInstancesRef.add(shouldRefocusRef);
-      return () => {
-        inputInstancesRef.delete(shouldRefocusRef);
-      };
-    }
-    return undefined;
-  }, [enableBridgelessFix]);
-
-  // Android 键盘监听：当键盘显示时，如果输入框失焦，尝试重新聚焦
-  // 这是针对 RN 0.77 Bridgeless 模式的兼容性修复
-  useEffect(() => {
-    if (Platform.OS !== 'android' || !enableBridgelessFix) {
-      return;
-    }
-
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-      // 键盘显示时，如果应该重新聚焦且输入框失焦，则尝试重新聚焦
-      // React Native 0.77 可能需要多次尝试才能成功聚焦
-      
-      // 方案 1 修复：添加焦点状态检查，防止焦点跳动
-      // 1. 如果当前组件已经聚焦，不需要重新聚焦（可能是其他 Input 触发的键盘显示）
-      if (isFocusedRef.current) {
-        // 当前组件已经聚焦，清除重新聚焦标记，避免后续误操作
-        shouldRefocusRef.current = false;
-        return;
-      }
-      
-      // 2. 检查是否在焦点切换保护期内
-      // 如果最近有 focus 事件（可能是其他 Input 获得焦点），不执行重新聚焦
-      const timeSinceLastFocus = Date.now() - lastFocusTimeRef.current;
-      if (timeSinceLastFocus < FOCUS_SWITCH_PROTECTION_PERIOD) {
-        // 在保护期内，说明可能有其他 Input 正在获得焦点，不执行重新聚焦
-        shouldRefocusRef.current = false;
-        return;
-      }
-      
-      // 3. 只有在确实需要重新聚焦且不在保护期内时才执行
-      if (shouldRefocusRef.current) {
-        // 使用双重 requestAnimationFrame 确保在渲染完成后执行（RN 0.77 新架构可能需要）
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            // 再次检查状态，避免在异步执行期间状态已改变
-            if (shouldRefocusRef.current && !isFocusedRef.current && inputRef.current) {
-              // 尝试通过 inputRef 重新聚焦
-              // @rneui/themed 的 Input 组件可能支持 inputRef prop
-              try {
-                // 如果 inputRef.current 有 focus 方法，直接调用
-                if (typeof inputRef.current.focus === 'function') {
-                  inputRef.current.focus();
-                  shouldRefocusRef.current = false;
-                } else if (inputRef.current.input && typeof inputRef.current.input.focus === 'function') {
-                  // 某些情况下，Input 组件可能将 TextInput 存储在 input 属性中
-                  inputRef.current.input.focus();
-                  shouldRefocusRef.current = false;
-                } else if (inputRef.current._input && typeof inputRef.current._input.focus === 'function') {
-                  // 某些版本的 @rneui/themed 可能使用 _input 属性
-                  inputRef.current._input.focus();
-                  shouldRefocusRef.current = false;
-                } else {
-                  // 如果无法直接聚焦，尝试延迟后再次聚焦（RN 0.77 可能需要）
-                  setTimeout(() => {
-                    if (shouldRefocusRef.current && !isFocusedRef.current && inputRef.current) {
-                      try {
-                        if (inputRef.current.focus) {
-                          inputRef.current.focus();
-                          shouldRefocusRef.current = false;
-                        } else {
-                          shouldRefocusRef.current = false;
-                        }
-                      } catch (err) {
-                        shouldRefocusRef.current = false;
-                      }
-                    }
-                  }, 100);
-                }
-              } catch (error) {
-                // 聚焦失败，清除标记，让 blur 正常执行
-                shouldRefocusRef.current = false;
-              }
-            }
-          });
-        });
-      }
-    });
-
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      // 键盘隐藏时，清除重新聚焦标记
-      shouldRefocusRef.current = false;
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    });
-
-    keyboardShowListenerRef.current = keyboardDidShowListener;
-    keyboardHideListenerRef.current = keyboardDidHideListener;
-
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
-    };
-  }, []); // 使用 ref 访问最新状态，不需要添加依赖
-
-  const handleClear = useCallback(() => {
-    props.onChangeText?.('');
-  }, [props.onChangeText]);
-
-  const rightIconElement = useMemo(() => {
-    const elements: React.ReactNode[] = [];
-    if (showClearBtn && propValue) {
-      elements.push(
-        <Text key="clear" onPress={handleClear} style={styles.clearBtn}>
-          {'\u2715'}
-        </Text>
-      );
-    }
-    if (unit) {
-      elements.push(<Text key="unit" style={styles.unit}>{unit}</Text>);
-    }
-    if (elements.length === 0) return props.rightIcon;
-    return <View style={{flexDirection: 'row', alignItems: 'center'}}>{elements}{props.rightIcon as React.ReactNode}</View>;
-  }, [showClearBtn, propValue, unit, props.rightIcon, handleClear, styles.clearBtn, styles.unit]);
-
-  return (
-    <View
-      testID={testID}
-      style={{flex: 1}}
-      onStartShouldSetResponder={() => false}
-      onResponderTerminationRequest={() => false}
-      pointerEvents="box-none"
-    >
-      <Input
-        {...(inputRef.current ? { inputRef } as any : {})}
-        value={propValue}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        containerStyle={containerStyleMemo}
-        inputStyle={[inputStyleMemo, state === 'error' && styles.errorBorder]}
-        inputContainerStyle={inputContainerStyleMemo}
-        blurOnSubmit={Platform.OS === 'android' ? false : props.blurOnSubmit}
-        secureTextEntry={password}
-        rightIcon={rightIconElement}
-        {...props}
-        label={
-          <Text style={[shouldShowLabel ? styles.labelContext : {display: "none"}]}>
-            {props.label} {props.required && <Text style={styles.require}>*</Text>}
-          </Text>
-        }
-      />
-      {state === 'error' && stateMsg ? (
-        <Text style={styles.stateMsg}>{stateMsg}</Text>
-      ) : null}
-    </View>
-  );
-};
-
-export default withTheme(TapasInput);

package/components/Layout/DrawerContext.tsx

@@ -1,38 +0,0 @@
-import React, { createContext, useState, useMemo, useCallback } from "react";
-import { Props as DrawerProps } from "../Drawer/Drawer";
-
-export const DrawerContext = createContext<{
-    drawerInfo: DrawerProps;
-    setDrawerInfo: (info: DrawerProps) => void;
-    open: (drawerInfo: DrawerProps) => void;
-    close: () => void;
-} | undefined>(undefined);
-
-export const DrawerProvider = ({ children }: any) => {
-    const [drawerInfo, setDrawerInfo] = useState<DrawerProps>({} as DrawerProps);
-
-    const open = useCallback((drawerInfo: DrawerProps ) => {
-        setDrawerInfo({
-            ...drawerInfo,
-            visible: true,
-        });
-    }, []);
-
-    const close = useCallback(() => {
-        setDrawerInfo({
-            visible: false,
-            title: '',
-            component: null,
-            showFooter: false
-        })
-    }, []);
-
-    // Memoize the context value to prevent unnecessary re-renders
-    const value = useMemo(() => ({ drawerInfo, setDrawerInfo, open, close }), [drawerInfo, open, close]);
-
-    return (
-        <DrawerContext.Provider value={value}>
-            {children}
-        </DrawerContext.Provider>
-    );
-};

package/components/Layout/Layout.tsx

@@ -1,117 +0,0 @@
-import React, { useContext, useState } from "react";
-import {View, Platform, ScrollView } from "react-native";
-import Navigation, {Props as NavigationProps} from "../Navigation/Navigation";
-import Drawer  from '../Drawer/Drawer'
-import Header, {Props as HeaderProps } from "../Header/Header";
-import { makeStyles, withTheme } from "@rneui/themed";
-import { Toast } from "../Toast/Toast";
-import {  ToastContext } from "./ToastContext";
-import {  DrawerContext } from "./DrawerContext";
-
-// 移除错误的导出语句，这些类型已经在 index.tsx 中正确导出
-
-
-const useStyles = makeStyles((theme) => ({
-    container: {
-        flex: 1,
-        height: '100%',
-        overflow: 'hidden',
-        backgroundColor: theme.colors.background,
-        position: 'relative',
-    },
-    smallContainer: {
-        marginTop: 70,
-        height: '90%',
-    },
-    navContainer:{
-        position: 'absolute',
-        zIndex: 9999,
-        top: 0,
-        bottom: 0,
-        left: 0,
-    },
-    bodyContainer: {
-        flex:1,
-        flexDirection: 'column',
-    },
-    bodyWebContainer: {
-        marginLeft: 56,
-    },
-    toastWebContainer: {
-        right: 24,
-        top: 24,
-        position: 'absolute'
-    },
-    toastContainer: {
-        top: 4,
-        backgroundColor: 'red'
-    },
-}));
-
-export type Props = {
-    children: React.ReactNode;
-    headerComponent?: React.ReactNode;
-    headerProps?: HeaderProps,
-    navigationComponent?: React.ReactNode,
-    navigationProps?: NavigationProps,
-    showNavigation?: boolean;
-    testID?: string;
-};
-
-const isWeb = Platform.OS === 'web';
-const Layout: React.FC<Props> = ({ children, headerProps, navigationProps,navigationComponent, headerComponent, showNavigation = true, testID, ...props }: any) => {
-    const styles = useStyles(props);
-    const { toastInfo } = useContext (ToastContext) || {};
-    const { drawerInfo } = useContext (DrawerContext) || {};
-    const [navVisible, setNavVisible] = useState(!isWeb ? false : true);
-
-    return (
-        <View style={styles.container} testID={testID}>
-            {
-                toastInfo && (<Toast {...toastInfo}  style={ isWeb ? styles.toastWebContainer : styles.toastContainer} />)
-            }
-            {
-                drawerInfo && (
-                    <Drawer {...drawerInfo} />
-                )
-            }
-            <View style={{ flexDirection: 'row', height: '100%' }}>
-                {
-                    showNavigation && (
-                        navigationComponent ? (<View>
-                            {navigationComponent}
-                        </View>) : (<View style={styles.navContainer}>
-                            <Navigation
-                                {...navigationProps}
-                                onMaskPress={() => {
-                                    if(Platform.OS !== 'web') {
-                                        setNavVisible(!navVisible)
-                                    }
-                                }}
-                                visible={navVisible}
-                            />
-                        </View>)
-                    )
-                }
-                <View style={[styles.bodyContainer, (showNavigation && isWeb) ? styles.bodyWebContainer : {}]}>
-                    {
-                        headerComponent ? (
-                            <View>
-                                {headerComponent}
-                            </View>
-                        ) : (<Header {...headerProps} showLeftIcon={showNavigation && !isWeb } onLeftIconPress={() => { setNavVisible(!navVisible) }} />)
-                    }
-                    <ScrollView 
-                        style={[{ height: '100%'}, Platform.OS !== 'web' ? styles.smallContainer : {}]}
-                        keyboardShouldPersistTaps="handled"
-                        keyboardDismissMode="none"
-                    >
-                        {children}
-                    </ScrollView>
-                </View>
-            </View>
-        </View>
-  );
-};
-
-export default withTheme(Layout);

package/components/Layout/ToastContext.tsx

@@ -1,36 +0,0 @@
-import React, { createContext, useState, useMemo, useCallback } from "react";
-import { Props as ToastProps } from "../Toast/Toast";
-
-export const ToastContext = createContext<{
-    toastInfo: ToastProps;
-    setToastInfo: (info: ToastProps) => void;
-    open: (props: ToastProps) => void;
-    close: () => void;
-} | undefined>(undefined);
-
-export const ToastProvider = ({ children }: any) => {
-    const [toastInfo, setToastInfo] = useState<ToastProps>({} as ToastProps);
-
-    const open = useCallback((props: ToastProps) => {
-        setToastInfo({
-            ...props,
-            visible: true
-        })
-    }, []);
-
-    const close = useCallback(() => {
-        setToastInfo({
-            visible: false,
-            message: "",
-        })
-    }, []);
-
-    // Memoize the context value to prevent unnecessary re-renders
-    const value = useMemo(() => ({ toastInfo, setToastInfo, open, close }), [toastInfo, open, close]);
-
-    return (
-        <ToastContext.Provider value={value}>
-            {children}
-        </ToastContext.Provider>
-    );
-};