react-native-umui 1.3.59 → 1.3.87

package/src/Tab.tsx

@@ -1,7 +1,8 @@
 import React, { Fragment, ReactElement, ReactNode } from "react";
-import { StyleProp, View, ViewStyle, PanResponder, Animated, Dimensions } from "react-native";
+import { StyleProp, View, ViewStyle, PanResponder, Animated, Dimensions, TextStyle } from "react-native";
 import { MButton } from "./Button";
 import { MText } from "./Text";
+
 interface IMTabButtonProps {
     testID?: string;
     size?: "xs" | "sm" | "md" | "nm";
@@ -16,24 +17,46 @@ interface IMTabButtonProps {
     btnType?: "primary" | "success" | "warning" | "secondary" | "danger" | "light" | "navy" | "smokelight";
     onPress?: () => void;
     children?: ReactNode;
-}; export function MTabButton({ children, btnType = "smokelight", style, size = "md", outline = true, ...props }: IMTabButtonProps) { return (<MButton btnType={btnType} size={size} outline={outline}{...props} style={[{ borderWidth: 1, borderColor: "#dadada" }, style]}>{children}</MButton>); };
+};
+
+export function MTabButton({ children, btnType = "smokelight", style, size = "md", outline = true, ...props }: IMTabButtonProps) {
+    return (
+        <MButton
+            btnType={btnType}
+            size={size}
+            outline={outline}
+            {...props}
+            style={[{ borderWidth: 1, borderColor: "#dadada" }, style]}
+        >
+            {children}
+        </MButton>
+    );
+}
+
 export interface MCustomTabProps {
     value: string | number;
     active: boolean;
     disabled: boolean;
     onPress: (value: any) => void;
 };
+
 interface MTabProps {
     value: string | number;
     fontSize?: number;
     textAlign?: "center" | "left" | "right";
     fontWeight?: | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined;
+    tabTextStyle?: StyleProp<TextStyle>;
     tab: string | ((props: MCustomTabProps) => ReactNode);
     disabled?: boolean;
     isHidden?: boolean;
     render?: () => ReactNode;
     children?: ReactNode;
-}; export function MTab(props: MTabProps) { return (<>{props.children || props.render()}</>); };
+};
+
+export function MTab(props: MTabProps) {
+    return (<React.Fragment>{props.children || props.render()}</React.Fragment>);
+}
+
 interface TabContainerProps {
     testID?: string;
     tabStyle?: StyleProp<ViewStyle>;
@@ -41,14 +64,118 @@ interface TabContainerProps {
     activeValue: string | number;
     onChange: (value: any) => void;
     items: Array<ReactElement<MTabProps>>;
-}; function TabContainer(props: TabContainerProps) { return (<View style={[{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-around", alignItems: "center" }, props.tabStyle]}>{props.items.filter(k => k && !k.props.isHidden).map((item, index) => { const isActive = item.props.value === props.activeValue; return (<Fragment key={`${index}${props.activeValue}`}>{typeof item.props.tab === "string" ? (<MButton testID={props.testID} size="md" btnType={isActive ? "navy" : "light"} outline={isActive} disabled={item.props.disabled} style={{ backgroundColor: "transparent", flex: 1, borderRadius: 0, borderColor: null, borderWidth: 0, borderTopWidth: !props.isTop ? 2 : 0, borderBottomWidth: props.isTop ? 2 : 0, borderTopColor: !props.isTop && isActive ? undefined : "transparent", borderBottomColor: props.isTop && isActive ? undefined : "transparent", minHeight: 43, maxHeight: 43 }} onPress={() => props.onChange(item.props.value)}><MText style={{ flex: 1, color: "black", fontSize: item.props.fontSize || 15, fontWeight: item.props.fontWeight, textAlign: item.props.textAlign || "center" }}>{item.props.tab}</MText></MButton>) : (item.props.tab({ active: isActive, value: item.props.value, disabled: item.props.disabled, onPress: props.onChange }))}</Fragment>); })}</View>); }
+};
+
+function TabContainer(props: TabContainerProps) {
+    return (
+        <View style={[{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-around", alignItems: "center" }, props.tabStyle]}>
+            {props.items.filter(k => k && !k.props.isHidden).map((item, index) => {
+                const isActive = item.props.value === props.activeValue;
+
+                return (
+                    <Fragment key={`${index}${props.activeValue}`}>
+                        {typeof item.props.tab === "string" ? (
+                            <MButton
+                                testID={props.testID}
+                                size="md"
+                                btnType={isActive ? "navy" : "light"}
+                                outline={isActive}
+                                disabled={item.props.disabled}
+                                style={{
+                                    backgroundColor: "transparent",
+                                    flex: 1,
+                                    borderRadius: 0,
+                                    borderColor: null,
+                                    borderWidth: 0,
+                                    borderTopWidth: !props.isTop ? 2 : 0,
+                                    borderBottomWidth: props.isTop ? 2 : 0,
+                                    borderTopColor: !props.isTop && isActive ? undefined : "transparent",
+                                    borderBottomColor: props.isTop && isActive ? undefined : "transparent",
+                                    minHeight: 43,
+                                    maxHeight: 43
+                                }}
+                                onPress={() => props.onChange(item.props.value)}
+                            >
+                                <MText style={[{ flex: 1, color: "black", fontSize: item.props.fontSize || 15, fontWeight: item.props.fontWeight, textAlign: item.props.textAlign || "center" }, item.props.tabTextStyle]}>
+                                    {item.props.tab}
+                                </MText>
+                            </MButton>) : (
+                            item.props.tab({
+                                active: isActive,
+                                value: item.props.value,
+                                disabled: item.props.disabled,
+                                onPress: props.onChange
+                            })
+                        )}
+                    </Fragment>
+                );
+            })}
+        </View>
+    );
+}
+
 interface MTabsProps {
-    position?: "top" | "bottom";
-    tabStyle?: StyleProp<ViewStyle>;
-    active: string | number;
-    children: ReactElement<MTabProps> | Array<ReactElement<MTabProps>>;
-    onChange: (value: any) => void;
-}; export function MTabs({ position = "top", ...props }: MTabsProps) { const fadeAnim = React.useRef(new Animated.Value(0, { useNativeDriver: true })).current; const children = (Array.isArray(props.children) ? props.children : [props.children]).filter(k => (!k.props.isHidden && !k.props.disabled)); const activeIndex = React.useMemo(() => { return children.findIndex(k => k.props.value === props.active); }, [props.active]); const panResponder = React.useMemo(() => { fadeAnim.setValue(0); return PanResponder.create({ onMoveShouldSetPanResponder: (_e1, gestureState) => { if ((Math.abs(gestureState.dx) > (Dimensions.get("window").width / 2.5)) && (Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3.5)) && (Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 2.5))) { if (gestureState.dx > 0 && activeIndex > 0) { props.onChange(children[activeIndex - 1].props.value); return true; }; if (gestureState.dx < 0 && activeIndex < children.length - 1) { props.onChange(children[activeIndex + 1].props.value); return true; } }; if ((gestureState.dx > 0 && activeIndex > 0) || (gestureState.dx < 0 && activeIndex < children.length - 1)) { fadeAnim.setValue(gestureState.dx); }; return true; }, onPanResponderRelease(_e1, _g1) { fadeAnim.setValue(0); }, onPanResponderTerminate() { } }); }, [activeIndex]); return (<View style={{ flex: 1, display: "flex", flexDirection: "column" }} {...panResponder.panHandlers} onTouchEnd={() => { fadeAnim.setValue(0) }} onTouchCancel={() => fadeAnim.setValue(0)}>{position === "top" ? <TabContainer isTop={true} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <></>}{children.length ? <Animated.View key={activeIndex} style={{ flex: 1, transform: [{ translateX: fadeAnim }] }}>{children[activeIndex]?.props?.children || children[activeIndex]?.props?.render()}</Animated.View> : <></>}{position === "bottom" ? <TabContainer isTop={false} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <></>}</View>); }
+    position?: "top" | "bottom"
+    tabStyle?: StyleProp<ViewStyle>
+    active: string | number
+    children: ReactElement<MTabProps> | Array<ReactElement<MTabProps>>
+    onChange: (value: any) => void
+}
+
+export function MTabs({ position = "top", ...props }: MTabsProps) {
+    const fadeAnim = React.useRef(new Animated.Value(0, { useNativeDriver: true })).current;
+    const children = (Array.isArray(props.children) ? props.children : [props.children]).filter(k => (!k.props.isHidden && !k.props.disabled))
+
+
+    const activeIndex = React.useMemo(() => {
+        return children.findIndex(k => k.props.value === props.active);
+    }, [props.active])
+
+    const panResponder = React.useMemo(() => {
+        fadeAnim.setValue(0)
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: (_e1, gestureState) => {
+                if ((Math.abs(gestureState.dx) > (Dimensions.get("window").width / 2.5)) && (Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3.5)) && (Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 2.5))) {
+                    if (gestureState.dx > 0 && activeIndex > 0) {
+                        props.onChange(children[activeIndex - 1].props.value)
+                        return true
+                    }
+                    if (gestureState.dx < 0 && activeIndex < children.length - 1) {
+                        props.onChange(children[activeIndex + 1].props.value)
+                        return true
+                    }
+                }
+                if ((gestureState.dx > 0 && activeIndex > 0) || (gestureState.dx < 0 && activeIndex < children.length - 1)) {
+                    fadeAnim.setValue(gestureState.dx)
+                }
+                return true
+            },
+            onPanResponderRelease(_e1, _g1) {
+                fadeAnim.setValue(0)
+            },
+            onPanResponderTerminate() {
+
+            }
+        });
+    }, [activeIndex])
+
+    return (
+        <View style={{ flex: 1, display: "flex", flexDirection: "column" }} {...panResponder.panHandlers} onTouchEnd={() => {
+            fadeAnim.setValue(0)
+        }} onTouchCancel={()=>fadeAnim.setValue(0)}>
+            {position === "top" ? <TabContainer isTop={true} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <React.Fragment></React.Fragment>}
+
+            {children.length ? <Animated.View key={activeIndex} style={{ flex: 1, transform: [{ translateX: fadeAnim }] }}>
+                {children[activeIndex]?.props?.children || children[activeIndex]?.props?.render()}
+            </Animated.View> : <React.Fragment></React.Fragment>}
+
+            {position === "bottom" ? <TabContainer isTop={false} activeValue={props.active} tabStyle={props.tabStyle} items={children} onChange={props.onChange} /> : <React.Fragment></React.Fragment>}
+        </View>
+    );
+}
+
+// 
+
 class MTabButtonBaseProps {
     testID?: string
     value: string | number
@@ -56,29 +183,103 @@ class MTabButtonBaseProps {
     label: string
     style?: StyleProp<ViewStyle>
 }
+
 class MTabButtonProps extends MTabButtonBaseProps {
     activeValue?: string | number
     onChange?: (value: any) => void
-}; export function MTabControlButton(props: MTabButtonProps) { const isActive = props.value === props.activeValue; return (<MButton testID={props.testID} btnType={isActive ? "navy" : "light"} disabled={props.disabled} style={[{ borderRadius: 0, borderWidth: 1, borderColor: "#fafafa" }, props.style]} onPress={() => props.onChange(props.value)}><MText style={{ color: isActive ? "white" : "black", fontSize: 15 }}>{props.label}</MText></MButton>); }
+}
+
+export function MTabControlButton(props: MTabButtonProps) {
+    const isActive = props.value === props.activeValue
+
+    return (
+        <MButton
+            testID={props.testID}
+            btnType={isActive ? "navy" : "light"}
+            disabled={props.disabled}
+            style={[{ borderRadius: 0, borderWidth: 1, borderColor: "#fafafa" }, props.style]}
+            onPress={() => props.onChange(props.value)}
+        >
+            <MText style={{ color: isActive ? "white" : "black", fontSize: 15 }}>
+                {props.label}
+            </MText>
+        </MButton>
+    );
+}
+
 interface MTabContollerProps {
     active: string | number
     style?: StyleProp<ViewStyle>
     children: Array<ReactElement<MTabButtonBaseProps | ReactNode>>
     onChange: (value: any) => void
-}; export function MTabContoller(props: MTabContollerProps) { return (<View style={[{ width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center" }, props.style]}>{props.children.map((k, index) => { if (k.type["name"] === "MTabControlButton") { return (<MTabControlButton key={index} {...k.props as any} activeValue={props.active} onChange={(value) => { props.onChange(value); if (k.props["onChange"]) { k.props["onChange"](value) } }} />); } else { return k; } })}</View>); };
+}
+
+export function MTabContoller(props: MTabContollerProps) {
+    return (
+        <View
+            style={[
+                { width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center" },
+                props.style
+            ]}
+        >
+            {props.children.map((k, index) => {
+                if (k.type["name"] === "MTabControlButton") {
+                    return (
+                        <MTabControlButton
+                            key={index}
+                            {...k.props as any}
+                            activeValue={props.active}
+                            onChange={(value) => {
+                                props.onChange(value)
+                                if (k.props["onChange"]) {
+                                    k.props["onChange"](value)
+                                }
+                            }}
+                        />
+                    );
+                } else {
+                    return k;
+                }
+            })}
+        </View>
+    )
+}
+
 interface MTabContentProps {
     value: string | number
     style?: StyleProp<ViewStyle>
     children: ReactNode
-}; export function MTabContent(props: MTabContentProps) { return (<View style={[{ flex: 1 }, props.style]}>{props.children}</View>); }
+}
+
+export function MTabContent(props: MTabContentProps) {
+    return (
+        <View style={[{ flex: 1 }, props.style]}>
+            {props.children}
+        </View>
+    );
+}
+
 interface MTabContentsProps {
     active: string | number
     children: Array<ReactElement<MTabContentProps>>
-}; export function MTabContents(props: MTabContentsProps) { return (<>{props.children?.find(k => k.props.value === props.active)}</>); }
+}
+
+export function MTabContents(props: MTabContentsProps) {
+    return (<React.Fragment>{props.children?.find(k => k.props.value === props.active)}</React.Fragment>);
+}
+
 interface MTabContainerProps {
     style?: StyleProp<ViewStyle>
     children: [ReactElement<MTabContollerProps>, ReactElement<MTabContentsProps>]
-}; export function MTabContainer(props: MTabContainerProps) { return (<View style={[{ flex: 1, display: "flex", flexDirection: "column" }, props.style]}>{props.children}</View>); }
+}
+
+export function MTabContainer(props: MTabContainerProps) {
+    return (
+        <View style={[{ flex: 1, display: "flex", flexDirection: "column" }, props.style]}>
+            {props.children}
+        </View>
+    );
+}
 
 /*
 <MTabContainer>

package/src/Text.tsx

@@ -1,8 +1,21 @@
-import React from "react";
-//import { StyleProp, Text, TextProps, TextStyle } from "react-native";
-import { Text, TextProps } from "react-native";
-interface MTextProps extends TextProps {
-     // style?: StyleProp<Omit<TextStyle, "fontSize">>
-}
-// function lineHeight(fontSize) { const multiplier = (fontSize > 20) ? 1.5 : 1; return parseInt(fontSize + (fontSize * multiplier), 10); };
-export const MText = React.forwardRef<Text, MTextProps>((props, ref) => { return (<Text ref={ref} {...props} style={[{ fontSize: 15, letterSpacing: 0.59 }, props.style]}>{props.children}</Text>); })
+import React from "react"; import {Text, TextProps } from "react-native"; interface MTextProps extends TextProps { }; export const MText = React.forwardRef<Text, MTextProps>((props, ref) => { return (<Text ref={ref} {...props} style={[{ fontSize: 15, letterSpacing: 0.59 }, props.style]}>{props.children}</Text>) })
+
+// import React from "react";
+// import { StyleProp, Text, TextProps, TextStyle } from "react-native"
+
+// interface MTextProps extends TextProps {
+//      // style?: StyleProp<Omit<TextStyle, "fontSize">>
+// }
+
+// function lineHeight(fontSize) {
+//      const multiplier = (fontSize > 20) ? 1.5 : 1;
+//      return parseInt(fontSize + (fontSize * multiplier), 10);
+// }
+
+// export const MText = React.forwardRef<Text, MTextProps>((props, ref) => {
+//      return (
+//           <Text ref={ref} {...props} style={[{ fontSize: 15, letterSpacing: 0.59 }, props.style]}>
+//                {props.children}
+//           </Text>
+//      )
+// })

package/src/TextInput.tsx

@@ -1,24 +1 @@
-import React, { StyleSheet, TextInput, TextInputProps } from "react-native";
-const styleOTI = StyleSheet.create({
-    txtInput: {
-        flex: 1,
-        height: 45,
-        minHeight: 45,
-        maxHeight: 45,
-        borderStyle: "solid",
-        zIndex: 101,
-        backgroundColor: "white",
-        color: "black",
-        borderRadius: 3,
-        fontSize: 16.25,
-        paddingHorizontal: 11,
-        paddingVertical: 5,
-        borderWidth: 1,
-        borderColor: "#dadce0",
-        letterSpacing: 1
-    }
-});
-interface ITextInputProps extends TextInputProps {
-    disabled?: boolean;
-};
-export function MTextInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" autoFocus={false}{...props} editable={_editable} style={[styleOTI.txtInput, { backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); }; export function MTextareaInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" numberOfLines={4} multiline={true} autoFocus={false}{...props} editable={_editable} style={[styleOTI.txtInput, { height: null, maxHeight: null, backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); };
+import React, { StyleProp, StyleSheet, TextInput, TextInputProps, View, ViewStyle } from "react-native"; import { MText } from "./Text"; import { useEffect } from "react"; const styleOTI = StyleSheet.create({ txtInput: { flex: 1, height: 45, minHeight: 45, maxHeight: 45, borderStyle: "solid", zIndex: 101, backgroundColor: "white", color: "black", borderRadius: 3, fontSize: 16.25, paddingHorizontal: 11, paddingVertical: 5, borderWidth: 1, borderColor: "#dadce0", letterSpacing: 1 } }); interface ITextInputProps extends TextInputProps { disabled?: boolean; }; export function MTextInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" autoFocus={false} {...props} editable={_editable} style={[styleOTI.txtInput, { backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); } export function MTextareaInput({ disabled, editable, style, ...props }: ITextInputProps) { const _editable = !(disabled || editable == false); return (<TextInput autoCapitalize="none" numberOfLines={4} multiline={true} autoFocus={false} {...props} editable={_editable} style={[styleOTI.txtInput, { height: null, maxHeight: null, backgroundColor: _editable ? "white" : "#f7f7f7" }, style]} placeholderTextColor="#919191" />); } interface IMPinInputMatProps extends TextInputProps { size: number; styleContainer?: StyleProp<ViewStyle>; styleBadge?: StyleProp<ViewStyle>; onFilledFully?: (value?: string)=> void; }; export default function MPinInput({ size, styleContainer, onFilledFully, ...props }: IMPinInputMatProps) { useEffect(()=>{ if(props.value?.length>=size && onFilledFully){ onFilledFully(props.value); } },[size, props.value]); return (<View style={[ { flex: 1, zIndex: 9, height: 45, minHeight: 45, maxHeight: 45, paddingHorizontal: 11, display: 'flex', flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', position: 'relative' }, styleContainer ]}><TextInput {...props} style={{ flex: 1, position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, color: 'transparent', textAlign: 'center', zIndex: 3 }} secureTextEntry={true} caretHidden={true} maxLength={size} placeholder="" />{Array(Math.abs(size)).fill(null).map((_, i) => (<View key={i} style={[{ width: 45, height: 45, borderWidth: 1, borderColor: '#8080802e', backgroundColor: 'white', display: "flex", justifyContent: 'center', alignItems: "center" }, props.styleBadge]}><MText style={{ color: "black", fontSize: 17, fontWeight: "700" }}>{props.value?.at(i)}</MText></View>))}</View>) }

package/src/regions.ts

@@ -222,22 +222,37 @@ export const codesMap = Object.freeze({
     "ZA": "ZA",
     "ZM": "ZM",
     "ZW": "ZW"
-});
-export const codes = Object.values(codesMap);
+})
+
+export const codes = Object.values(codesMap)
+
 export const MCOLORS = Object.freeze({
     primary: "#3b82f6",
     success: "#22c55e",
     warning: "#f97316",
     secondary: "#14b8a6",
     danger: "#ca251a",
+    dangerlight: "#ff1818",
     light: "white",
     smokelight: "#f7f7f7",
+    light9: "#f9f9f9",
+    lightc: "#fcfcfc",
+    lighte: "#fefefe",
     navy: "#3e4b67",
     orange: "#ff4e02",
     darksky: "#004d6c",
     cyan: "#4bb790",
     gray: "gray",
     lightgray: "#dadce0",
+    metalicgray: "#43484b",
+    metalicgraylight: "#4d555a",
     green: "#85d89a",
-    lightgreen: "#85d89a"
-});
+    greenb1: "#21c161",
+    lightgreen: "#51ff0d",
+    black: "black",
+    metalicblack1: "#292929",
+    metalicblack2: "#343434",
+    metalicblack3: "#343434",
+    blueafc: "#0088cc",
+    metalicblue: "#121b22"
+})

package/src/shadows.ts

@@ -1,24 +1 @@
-export const MSHADOWS = Object.freeze({
-    _1: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.18, shadowRadius: 1.00, elevation: 1 },
-    _2: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.20, shadowRadius: 1.41, elevation: 2 },
-    _3: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.22, shadowRadius: 2.22, elevation: 3 },
-    _4: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.23, shadowRadius: 2.62, elevation: 4 },
-    _5: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5 },
-    _6: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.27, shadowRadius: 4.65, elevation: 6 },
-    _7: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.29, shadowRadius: 4.65, elevation: 7 },
-    _8: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.30, shadowRadius: 4.65, elevation: 8 },
-    _9: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.32, shadowRadius: 5.46, elevation: 9 },
-    _10: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.34, shadowRadius: 6.27, elevation: 10 },
-    _11: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.36, shadowRadius: 6.68, elevation: 11 },
-    _12: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.37, shadowRadius: 7.49, elevation: 12 },
-    _13: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.39, shadowRadius: 8.30, elevation: 13 },
-    _14: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.41, shadowRadius: 9.11, elevation: 14 },
-    _15: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.43, shadowRadius: 9.51, elevation: 15 },
-    _16: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.44, shadowRadius: 10.32, elevation: 16 },
-    _17: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.46, shadowRadius: 11.14, elevation: 17 },
-    _18: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.48, shadowRadius: 11.95, elevation: 18 },
-    _19: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.50, shadowRadius: 12.35, elevation: 19 },
-    _20: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.51, shadowRadius: 13.16, elevation: 20 },
-    _21: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.53, shadowRadius: 13.97, elevation: 21 }
-});
-export const mshadow = (index: number, color: string, shadowOpacity?: number, shadowRadius?: number) => { const item = MSHADOWS[`_${index}`] || MSHADOWS[5]; return ({ ...item, shadowColor: color, shadowOpacity: shadowOpacity || item.shadowOpacity, shadowRadius: shadowRadius || item.shadowRadius }); };
+export const MSHADOWS = { _1: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.18, shadowRadius: 1.00, elevation: 1 }, _2: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.20, shadowRadius: 1.41, elevation: 2 }, _3: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.22, shadowRadius: 2.22, elevation: 3 }, _4: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.23, shadowRadius: 2.62, elevation: 4 }, _5: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5 }, _6: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.27, shadowRadius: 4.65, elevation: 6 }, _7: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.29, shadowRadius: 4.65, elevation: 7 }, _8: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.30, shadowRadius: 4.65, elevation: 8 }, _9: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.32, shadowRadius: 5.46, elevation: 9 }, _10: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.34, shadowRadius: 6.27, elevation: 10 }, _11: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.36, shadowRadius: 6.68, elevation: 11 }, _12: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.37, shadowRadius: 7.49, elevation: 12 }, _13: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.39, shadowRadius: 8.30, elevation: 13 }, _14: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.41, shadowRadius: 9.11, elevation: 14 }, _15: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.43, shadowRadius: 9.51, elevation: 15 }, _16: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.44, shadowRadius: 10.32, elevation: 16 }, _17: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.46, shadowRadius: 11.14, elevation: 17 }, _18: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.48, shadowRadius: 11.95, elevation: 18 }, _19: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.50, shadowRadius: 12.35, elevation: 19 }, _20: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.51, shadowRadius: 13.16, elevation: 20 }, _21: { shadowColor: "#000", shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.53, shadowRadius: 13.97, elevation: 21 } }; Object.freeze(MSHADOWS); export const mshadow = (index: number, color: string, shadowOpacity?: number, shadowRadius?: number) => { const item = MSHADOWS[`_${index}`] || MSHADOWS[5]; return ({ ...item, shadowColor: color, shadowOpacity: shadowOpacity || item.shadowOpacity, shadowRadius: shadowRadius || item.shadowRadius }); }