@nexara/nativeflow 0.1.6 → 0.1.8

package/src/helpers/ResponsiveCalculations.ts

@@ -1,5 +1,6 @@
 import { Dimensions, PixelRatio } from 'react-native';
-// import { useResponsive } from '../hooks';
+import { getGlobalContext } from '../components/Provider/ContextManager';
+import type { scalingModeTypes } from '../types';
 
 
 const {
@@ -7,75 +8,74 @@ const {
     height: SCREEN_HEIGHT,
 } = Dimensions.get('window');
 
-// const isResponsive = useResponsive();
-const isResponsive = true;
+// const isResponsive = true;
 const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
 
-const scalingCache = new Map<'hScale' | 'vScale' | 'fs', object>();
+type scalingCacheKey = 'hScale' | 'vScale' | 'fs';
+
+const scalingCache = new Map<scalingCacheKey, object>();
 
-export const fun = () => {
-    return scalingCache
-}
 const checkIsPhone = (size: number): number => {
     if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
         return size;
     }
     return 0;
 }
-export const horizontalScale = (size: number): number => {
+
+const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes) => {
     if (checkIsPhone(size)) {
         return size;
     }
-    const hScaleCache: any = scalingCache.get('hScale') || {};
-    if (hScaleCache?.[size]) {
-        return hScaleCache?.[size];
+    const cacheScaleValue: any = scalingCache.get(cacheKey) || {};
+    let finalSize;
+    if (cacheScaleValue?.[size]) {
+        return cacheScaleValue?.[size];
     }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
-    let scale = (shortDimension / guidelineBaseHeight);
-    scale = 1 + (scale - 1) * slowDownRate;
-    let adjustedSize = size * Math.max(scale, 0.80);
-    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
-    hScaleCache[size] = finalSize;
-    scalingCache.set('hScale', hScaleCache)
+    if (mode === 'partial') {
+        // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20;
+        let scale = ((cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight);
+        scale = 1 + (scale - 1) * slowDownRate;
+        let adjustedSize = size * Math.max(scale, 0.80);
+        finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    } else {
+        const baseScaleFactor = (cacheKey === 'hScale' ? (shortDimension / guidelineBaseWidth) : (longDimension / guidelineBaseHeight));
+        const clampedScaleFactor = Math.max(0.9, Math.min(baseScaleFactor, 1.2));
+        finalSize = Math.round(PixelRatio.roundToNearestPixel(size * clampedScaleFactor))
+    }
+    cacheScaleValue[size] = finalSize;
+    cacheScaleValue[size] = finalSize;
+    scalingCache.set(cacheKey, cacheScaleValue);
     return finalSize;
 }
 
+export const horizontalScale = (size: number): number => {
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'hScale', scalingMode ?? 0);
+}
 
 export const verticalScale = (size: number): number => {
-    if (checkIsPhone(size)) {
-        return size;
-    }
-    const vScaleCache: any = scalingCache.get('vScale') || {};
-    if (vScaleCache?.[size]) {
-        return vScaleCache?.[size];
-    }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
-    let scale = (longDimension / guidelineBaseHeight);
-    scale = 1 + (scale - 1) * slowDownRate;
-    let adjustedSize = size * Math.max(scale, 0.80);
-    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
-    vScaleCache[size] = finalSize;
-    scalingCache.set('vScale', vScaleCache)
-    return finalSize;
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'vScale', scalingMode ?? 0);
 }
 
 
-export const moderateScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
-    } else {
-        return size + factor + 1;
-    }
-}
-export const moderateVerticalScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + (longDimension / guidelineBaseHeight * size) * factor;
-    } else {
-        return size + factor + 5;
-    }
-}
+// export const moderateScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
+//     } else {
+//         return size + factor + 1;
+//     }
+// }
+// export const moderateVerticalScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + (longDimension / guidelineBaseHeight * size) * factor;
+//     } else {
+//         return size + factor + 5;
+//     }
+// }
 
 export const responsiveFontSize = (fontSize: number): number => {
     if (checkIsPhone(fontSize)) {
@@ -85,7 +85,8 @@ export const responsiveFontSize = (fontSize: number): number => {
     if (fsCache?.[fontSize]) {
         return fsCache?.[fontSize];
     }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.15
     const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
     const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
     let scale = screenDiagonal / baseScreenDiagonal;
@@ -93,7 +94,7 @@ export const responsiveFontSize = (fontSize: number): number => {
     let adjustedFontSize = fontSize * Math.max(scale, 0.85);
     const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
     fsCache[fontSize] = finalSize;
-    scalingCache.set('vScale', fsCache)
+    scalingCache.set('fs', fsCache)
     return finalSize;
 };
 

package/src/hooks/index.ts

@@ -1,4 +1,4 @@
 export { default as useTheme } from './useTheme';
-export { default as useResponsive } from './useResponsive';
+export { default as useScalingMode } from './useScalingMode';
 export { default as useColorScheme } from './useColorScheme';
 export { default as useConditionalWindowDimension } from './useConditionalWindowDimension';

package/src/hooks/{useResponsive.tsx → useScalingMode.tsx}

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Context } from '../components/Provider/NativeProvider';
 
-const useResponsive = () => useContext(Context)?.isResponsive;
+const useScalingMode = () => useContext(Context)?.scaling;
 
-export default useResponsive;
+export default useScalingMode;

package/src/index.d.ts

@@ -0,0 +1,3 @@
+declare module '@nexara/nativeflow' {
+    export { Button } from 'components/Button/Button';
+}

package/src/index.ts

@@ -1,14 +1,15 @@
-export { default as Header } from './components/Header/Header';
+export { default as NativeProvider } from './components/Provider/NativeProvider';
+export { horizontalScale, verticalScale, responsiveFontSize } from './helpers/ResponsiveCalculations';
 export { default as Chip } from './components/Chip/Chip';
+export { default as Radio } from './components/Radio';
 export { default as Button } from './components/Button/Button';
+
 export { default as Stack } from './components/Stack';
 export { StyledText, StyledView } from './components/StyledComponents';
 export { default as UserInput } from './components/UserInput/UserInput';
-export { default as NativeProvider } from './components/Provider/NativeProvider';
-export { horizontalScale, moderateScale, moderateVerticalScale, verticalScale } from './helpers/ResponsiveCalculations';
 export { default as Grid } from './components/Grid/Grid';
 export { default as Progress } from './components/Progress/Progress';
-export { default as Slider } from './components/Slider/Slider';
+// export { default as Slider } from './components/Slider/Slider';
 export { default as Surface } from './components/Surface/Surface';
 export { default as Switch } from './components/Switch/Switch';
 // export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
@@ -21,14 +22,11 @@ export { default as IconButton } from './components/IconButton/IconButton';
 export { default as Icon } from './components/Icon/Icon';
 export { default as PortalProvider } from './components/Portal/PortalProvider';
 export { default as Link } from './components/Link/Link';
-
 export { default as LightTheme } from './themes/LightTheme';
 export { default as DarkTheme } from './themes/DarkTheme';
-// export { default as createTheme } from './themes/createTheme';
 export { useColorScheme, useTheme } from './hooks';
 
 
-export type { HeaderProps } from './components/Header/Header';
 export type { ChipProps } from './components/Chip/Chip';
 export type { ButtonProps } from './components/Button/Button';
 export type { HStackProps } from './components/Stack';
@@ -49,4 +47,6 @@ export type { DividerProps } from './components/Divider/Divider';
 export type { MenuProps, MenuItemProps, MenuItemLabelProps } from './components/Menu';
 export type { IconButtonProps } from './components/IconButton/IconButton';
 export type { IconProps } from './components/Icon/Icon';
+export type { LinkProps } from './types/link.type';
+export type { RadioGroupProps, RadioItemProps } from './types/radio.type';
 // export type { PortalProviderProps } from './components/Portal/PortalProvider';

package/src/themes/DarkTheme.ts

@@ -1,39 +1,178 @@
+import Color from "color";
 import { dialogSizes, typographySizes } from "../constants";
 import type { ThemeTypes } from "../types";
 
+const darkColorPalette = {
+    natural: {
+        0: "#000000",   // pure black
+        50: "#0D1117",  // GitHub-inspired dark background
+        100: "#161B22", // elevated surfaces
+        200: "#21262D", // card backgrounds
+        300: "#30363D", // borders and dividers
+        400: "#484F58", // muted elements
+        500: "#6E7681", // tertiary text
+        600: "#8B949E", // secondary text
+        700: "#C9D1D9", // primary text
+        800: "#F0F6FC", // high contrast text
+        900: "#FFFFFF", // pure white
+    }
+};
 
+// Option 1: Purple & Emerald (Elegant & Professional)
 const DarkTheme: ThemeTypes = {
     isDark: true,
     colors: {
-        primary: '#ffffff',
-        secondary: '#000000',
-        disable: 'rgba(180, 180, 180, 0.20)',
-        // outline: '#8080805e',
-        outline: '#9090905e',
-        textPrimary: '#ffffff',
-        textSecondary: '#000000',
-        // textTertiary: 'gray',
-        textTertiary: '#A0A0A0',
-        textDisable: '#808080',
-        cursorColor: '#ffffff',
-        placeholderColor: '#808080',
-
-
-        iconPrimary: '#E0E0E0',
-        iconSecondary: '#000000',
-        iconDisable: '#808080',
-
-        dividerColor: "#3A3A3A",
-        inputBgColor: 'transparent',
-        chipBgColor: 'transparent',
-
-        switchColor: '#ffffff',
-        error: '#ED2939'
+        palette: darkColorPalette,
+        brand: {
+            primary: "#8B5CF6",        // Rich violet - elegant and professional
+            onPrimary: "#FFFFFF",
+            secondary: "#10B981",      // Emerald green - fresh and modern  
+            onSecondary: "#FFFFFF",
+            tertiary: "#F59E0B",       // Amber - warm and inviting
+            onTertiary: "#000000",
+        },
+        semantic: {
+            success: "#34D399",        // Bright emerald success
+            onSuccess: "#000000",
+            warning: "#FBBF24",        // Warm amber warning
+            onWarning: "#000000",
+            danger: "#F87171",         // Soft red - less harsh than bright red
+            onDanger: "#000000",
+            info: "#60A5FA",           // Sky blue info
+            onInfo: "#000000",
+        },
+        background: {
+            default: "#0D1117",        // Deep professional background
+            surface: "#161B22",        // Card surfaces
+            elevated: "#21262D",       // Modal and elevated components
+            backdrop: "rgba(13,17,23,0.8)",
+        },
+        border: {
+            subtle: "#21262D",
+            default: "#30363D",
+            strong: "#484F58",
+            focus: "#8B5CF6",          // Primary violet focus
+        },
+        typography: {
+            primary: "#F0F6FC",        // Crisp white text
+            secondary: "#C9D1D9",      // Soft gray text
+            tertiary: "#8B949E",       // Muted text
+            disabled: "#484F58",
+            inverse: "#0D1117"
+        },
+        states: {
+            hover: "rgba(139, 92, 246, 0.1)",      // Subtle violet hover
+            pressed: "rgba(139, 92, 246, 0.2)",    // Stronger violet press
+            focus: '',
+            disabled: "rgba(72, 79, 88, 0.6)"
+        },
+        elevation: {
+            level0: "none",
+            level1: "0px 2px 4px rgba(0,0,0,0.55), 0px 1px 2px rgba(139,92,246,0.08)",
+            level2: "0px 4px 8px rgba(0,0,0,0.65), 0px 2px 4px rgba(139,92,246,0.07)",
+            level3: "0px 8px 16px rgba(0,0,0,0.75), 0px 4px 8px rgba(139,92,246,0.05)",
+            level4: "0px 16px 32px rgba(0,0,0,0.85), 0px 8px 16px rgba(139,92,246,0.03)",
+        }
     },
-    typography: {
-        variantSizes: typographySizes
-    },
-    dialogSizes,
-}
+    sizes: {
+        typography: typographySizes,
+        dialog: dialogSizes
+    }
+};
+
+DarkTheme.colors.states.focus = Color(DarkTheme.colors.brand.primary)
+    .alpha(0.05)
+    .rgb()
+    .string();
+
+
+export default DarkTheme;
+// import Color from "color";
+// import { dialogSizes, typographySizes } from "../constants";
+// import type { ThemeTypes } from "../types";
+
+// const colorPalette = {
+//     natural: {
+//        0: "#FFFFFF",   // pure white
+//         50: "#F9FAFB",  // very light gray (default page background)
+//         100: "#F3F4F6", // light gray (elevated surfaces)
+//         200: "#E5E7EB", // subtle borders, dividers
+//         300: "#D1D5DB", // default borders, secondary text
+//         400: "#9CA3AF", // strong borders, muted text
+//         500: "#6B7280", // tertiary text
+//         600: "#4B5563", // secondary text
+//         700: "#374151", // primary text on light backgrounds
+//         800: "#1F2937", // strong primary text
+//         900: "#111827", // almost black
+//     }
+// }
+
+// const DarkTheme: ThemeTypes = {
+//     isDark: true,
+//     colors: {
+//         palette: colorPalette,
+//         brand: {
+//             primary: "#22D3EE",      // teal accent
+//             onPrimary: "#111827",
+//             secondary: "#818CF8",    // indigo
+//             onSecondary: "#111827",
+//             tertiary: "#F59E0B",     // amber
+//             onTertiary: "#111827",
+//         },
+//         semantic: {
+//             success: "#22C55E",
+//             onSuccess: "#111827",
+//             warning: "#FACC15",
+//             onWarning: "#111827",
+//             danger: "#EF4444",
+//             onDanger: "#FFFFFF",
+//             info: "#3B82F6",
+//             onInfo: "#FFFFFF",
+//         },
+//         background: {
+//             default: "#111827",  // app background
+//             surface: "#1F2937",  // cards, sections
+//             elevated: "#272B33", // menus, dialogs
+//             backdrop: "rgba(0,0,0,0.6)", // darker scrim
+//         },
+//         border: {
+//             subtle: "#272B33",
+//             default: "#374151",
+//             strong: "#4B5563",
+//             focus: "#22D3EE", // brand primary
+//         },
+//         typography: {
+//             primary: "#F9FAFB",   // main text
+//             secondary: "#D1D5DB", // muted text
+//             tertiary: "#9CA3AF",  // tertiary text
+//             disabled: "#808892",  // disabled gray
+//             inverse: "#111827",   // inverse on bright backgrounds
+//         },
+//         states: {
+//             hover: "rgba(255, 255, 255, 0.04)",
+//             pressed: "rgba(255, 255, 255, 0.08)",
+//             focus: "",
+//             active: "",
+//             disabled: "rgba(255, 255, 255, 0.3)"
+//         },
+//         elevation: {
+//             level0: "none",
+//             level1: "0px 1px 3px rgba(0,0,0,0.4), 0px 1px 1px rgba(0,0,0,0.24), 0px 2px 1px -1px rgba(0,0,0,0.2)",
+//             level2: "0px 2px 4px rgba(0,0,0,0.36), 0px 2px 3px rgba(0,0,0,0.32)",
+//             level4: "0px 4px 6px rgba(0,0,0,0.3), 0px 2px 4px rgba(0,0,0,0.28)",
+//             level8: "0px 8px 12px rgba(0,0,0,0.28), 0px 4px 8px rgba(0,0,0,0.24)",
+//             level12: "0px 12px 17px rgba(0,0,0,0.26), 0px 5px 12px rgba(0,0,0,0.22)",
+//             level16: "0px 16px 24px rgba(0,0,0,0.25), 0px 6px 16px rgba(0,0,0,0.2)",
+//             level24: "0px 24px 38px rgba(0,0,0,0.24), 0px 9px 46px rgba(0,0,0,0.18)",
+//         }
+//     },
+//     sizes: {
+//         typography: typographySizes,
+//         dialog: dialogSizes
+//     }
+// };
+
+// DarkTheme.colors.states.focus = Color(DarkTheme.colors.brand.primary).mix(Color("white"), 0.8).alpha(0.1).rgb().string();
+// DarkTheme.colors.states.active = Color(DarkTheme.colors.brand.primary).lighten(0).alpha(0.3).rgb().string();
 
-export default DarkTheme;
+// export default DarkTheme;

package/src/themes/LightTheme.ts

@@ -1,96 +1,89 @@
+import Color from "color";
 import { dialogSizes, typographySizes } from "../constants";
 import type { ThemeTypes } from "../types";
 
-// const base = Color(theme.colors.primary);
-
-// const createTheme = (theme: { primary: string; secondary: string }) => {
-//     return {
-//         isDark: false,
-//         colors: {
-//             ...theme,
-//             outline: '#8080805e',
-//             disable: Color(theme.primary).mix(Color("white"), 0.4).hex(),
-
-//             textPrimary: '#000000',
-//             textSecondary: '#ffffff',
-//             textTertiary: 'gray',
-//             textDisable: '#9E9E9E',
-//             cursorColor: '#000000',
-//             placeholderColor: '#808080',
-
-//             iconPrimary: '#000000',
-//             iconSecondary: '#E0E0E0',
-//             iconDisable: '#9E9E9E',
-
-//             dividerColor: "#DCDBDB",
-
-//             switchColor: '#353935',
-//             error: '#ED2939',
-//         },
-//         typography: {
-//             variantSizes: typographySizes
-//         },
-//         // screenBreakpoints: BreakPoints,
-//         dialogSizes
-//     }
-// }
-
-// const LightTheme = createTheme({
-//     primary: '#000000',
-//     secondary: '#ffffff',
-//     textPrimary: '#000000',
-
-//     textSecondary: '#ffffff',
-//     textTertiary: 'gray',
-//     textDisable: '#9E9E9E',
-//     cursorColor: '#000000',
-//     placeholderColor: '#808080',
-
-//     iconPrimary: '#000000',
-//     iconSecondary: '#E0E0E0',
-//     iconDisable: '#9E9E9E',
-
-//     dividerColor: "#DCDBDB",
+const colorPalette = {
+    natural: {
+        0: "#FFFFFF",   // pure white
+        50: "#F9FAFB",  // very light gray (default page background)
+        100: "#F3F4F6", // light gray (elevated surfaces)
+        200: "#E5E7EB", // subtle borders, dividers
+        300: "#D1D5DB", // default borders, secondary text
+        400: "#9CA3AF", // strong borders, muted text
+        500: "#6B7280", // tertiary text
+        600: "#4B5563", // secondary text
+        700: "#374151", // primary text on light backgrounds
+        800: "#1F2937", // strong primary text
+        900: "#111827", // almost black
+    }
+}
 
-//     switchColor: '#353935',
-//     error: '#ED2939',
-// })
-// console.log(Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string())
 const LightTheme: ThemeTypes = {
     isDark: false,
     colors: {
-        primary: '#000000',
-        secondary: '#ffffff',
-        // tertiary: '#8080805e',
-        // outline: '#8080805e',
-        outline: '#cbd5e1',
-        // disable: '#E0E0E0',
-        disable: 'rgba(100, 100, 100, 0.15)',
-
-        textPrimary: '#000000',
-        textSecondary: '#ffffff',
-        textTertiary: '#808080',
-        textDisable: '#9E9E9E',
-        cursorColor: '#000000',
-        // placeholderColor: '#808080',
-        placeholderColor: '#cbd5e1',
-
-        iconPrimary: '#000000',
-        iconSecondary: '#E0E0E0',
-        iconDisable: '#9E9E9E',
-
-        dividerColor: "#DCDBDB",
-
-        inputBgColor: '#f9fbfd',
-        chipBgColor: '#f9fbfd',
-
-        switchColor: '#353935',
-        error: '#ED2939',
-    },
-    typography: {
-        variantSizes: typographySizes
+        palette: colorPalette,
+        brand: {
+            primary: "#034C53",
+            onPrimary: "#FFFFFF",
+            secondary: "#6366F1",
+            onSecondary: "#FFFFFF",
+            tertiary: "#F59E0B",
+            onTertiary: "#111827",
+        },
+        semantic: {
+            success: "#22C55E",
+            onSuccess: "#FFFFFF",
+            warning: "#FACC15",
+            onWarning: "#111827",
+            danger: "#EF4444",
+            onDanger: "#FFFFFF",
+            info: "#3B82F6",
+            onInfo: "#FFFFFF",
+        },
+        background: {
+            default: "#F9FAFB",
+            // default: "#FFFFFF",
+            surface: "#FFFFFF",
+            // elevated: "#F3F4F6",
+            // elevated: "#FAFAFA",
+            elevated: "#FFFFFF",
+            backdrop: "rgba(0,0,0,0.4)",
+        },
+        border: {
+            subtle: "#E5E7EB",
+            default: "#D1D5DB",
+            // default: colorPalette.natural[300],
+            strong: "#9CA3AF",
+            focus: "#F97316",
+        },
+        typography: {
+            primary: "#1A1A1A",
+            secondary: "#4D4D4D",
+            tertiary: "#808080",
+            // disabled: "#B3B3B3",
+            disabled: "#808080",
+            inverse: "#FFFFFF"
+        },
+        states: {
+            hover: "rgba(0, 0, 0, 0.04)",
+            pressed: "rgba(0, 0, 0, 0.08)",
+            focus: '',
+            // disabled: "rgba(0, 0, 0, 0.26)"
+            disabled: "rgb(184, 184, 184)"
+        },
+        elevation: {
+            level0: "none",
+            level1: "0px 1px 3px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)",
+            level2: "0px 2px 4px rgba(0,0,0,0.12), 0px 2px 3px rgba(0,0,0,0.18)",
+            level3: "0px 4px 6px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.12)",
+            level4: "0px 8px 12px rgba(0,0,0,0.16), 0px 4px 8px rgba(0,0,0,0.12)"
+        }
     },
-    dialogSizes
+    sizes: {
+        typography: typographySizes,
+        dialog: dialogSizes
+    }
 }
+LightTheme.colors.states.focus = Color(LightTheme.colors.brand.primary).mix(Color("white"), 0.8).alpha(0.3).rgb().string();
 
 export default LightTheme;

package/src/themes/index.ts

@@ -1,4 +1,3 @@
 export { default as LightTheme } from './LightTheme';
 export { default as DarkTheme } from './DarkTheme';
-// export { default as createTheme } from './createTheme';
 

package/src/types/avatar.type.ts

@@ -8,9 +8,6 @@ export type AvatarImageProps = {
     /** Image source (can be a remote URI or a local asset reference) */
     source?: { uri?: string } | number;
 
-    /** Background color of the avatar */
-    bg?: string;
-
     /** Defines how the image should be resized to fit its container */
     resizeMode?: NonNullable<ImageProps['resizeMode']>;