@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

package/src/components/ui/vstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+    ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+    : '';
+
+export const vstackStyle = tva({
+    base: `flex-col ${baseStyle}`,
+    variants: {
+        space: {
+            xs: 'gap-1',
+            sm: 'gap-2',
+            md: 'gap-3',
+            lg: 'gap-4',
+            xl: 'gap-5',
+            '2xl': 'gap-6',
+            '3xl': 'gap-7',
+            '4xl': 'gap-8',
+        },
+        reversed: {
+            true: 'flex-col-reverse',
+        },
+    },
+});

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -3,28 +3,27 @@ import { Lifecycle } from '../containers/layout/Lifecycle';
 import { LifecyclePhase } from '@workbench-stack/core';
 import Animated from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Spinner, Center } from '@gluestack-ui/themed';
+import { Spinner, Center } from './ui';
 import { Platform } from 'react-native';
 import { WithPermissionContainer } from './WithPermission';
 import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 
 const LoadingComponent = () => (
-    <Center flex={1} justifyContent={'center'} alignItems={'center'}>
-        {<Spinner color={'$blue500'} />}
-    </Center>
+    <Center className="flex-1 justify-center items-center">{<Spinner className="text-blue-500" />}</Center>
 );
 
 const LifecycleComponent = ({ children }: { children?: any }) => {
-    const { authenticated } = isUserAuthenticated();
-    if (authenticated) {
-        return (
-            <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
-                {children}
-            </Lifecycle>
-        );
-    } else {
-        return <>{children}</>;
-    }
+    return <>{children}</>;
+    // const { authenticated } = isUserAuthenticated();
+    // if (authenticated) {
+    //     return (
+    //         <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
+    //             {children}
+    //         </Lifecycle>
+    //     );
+    // } else {
+    //     return <>{children}</>;
+    // }
 };
 
 const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {

package/src/components/with-interactions-managed.tsx

@@ -4,7 +4,7 @@ import { Lifecycle } from '../containers/layout/Lifecycle';
 import { LifecyclePhase } from '@workbench-stack/core';
 import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
+import { Spinner, Center } from './ui';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 export function withInteractionsManaged<Props>(
@@ -21,9 +21,7 @@ export function withInteractionsManaged<Props>(
 
         const LoadingComponent = () => (
             // <SafeAreaView flex={1}>
-            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
-                {<Spinner color={'$blue500'} />}
-            </Center>
+            <Center className="flex-1 justify-center items-center">{<Spinner className="text-blue-500" />}</Center>
             // </SafeAreaView>
         );
         console.log('interactionsComplete', interactionsComplete);
@@ -64,9 +62,7 @@ export function withLifeCycleInteractionsManaged<Props>(
 
         const LoadingComponent = () => (
             // <SafeAreaView flex={1}>
-            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
-                {<Spinner color={'$blue500'} />}
-            </Center>
+            <Center className="flex-1 justify-center align-items-center">{<Spinner color={'$blue500'} />}</Center>
             // </SafeAreaView>
         );
         console.log('interactionsComplete', interactionsComplete);

package/src/containers/layout/ProLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Spinner } from '@gluestack-ui/themed';
+import { Box, Spinner } from '../../components/ui';
 import { NavigationContainerComponent, ApplicationErrorHandler, ErrorBoundary } from '../../components';
 import { PluginArea } from '@common-stack/client-react';
 import routeConfigKeyReplace from '../../utils/routeConfigKeyReplace';
@@ -11,7 +11,7 @@ const ProLayout: React.FC<any> = (props) => {
     const [appRoutes, setAppRoutes] = React.useState<any>([]);
     const { pathKey, appLayout } = useLayoutSetting(props);
     AppLayout = appLayout;
-    const {appFeatures} = routeConfigKeyReplace(pathKey, props?.features,appLayout);
+    const { appFeatures } = routeConfigKeyReplace(pathKey, props?.features, appLayout);
     AppFeatures = appFeatures;
 
     React.useEffect(() => {
@@ -23,7 +23,7 @@ const ProLayout: React.FC<any> = (props) => {
 
     //const appRoutes = AppFeatures ? AppFeatures?.getRoutes2('/', 'MainStack') || [] : null;
 
-    const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
+    const loadingComponent = () => <Box className="flex-1">{<Spinner />}</Box>;
 
     let plugins = AppFeatures?.getComponentFillPlugins() ?? props.features;
     let configuredRoutes = AppFeatures?.getConfiguredRoutes2('/') ?? props?.features?.getConfiguredRoutes2('/');

package/src/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/gluestack-ui-base-config.js

@@ -0,0 +1,12 @@
+// gluestack-ui-base.config.js
+
+module.exports = {
+    tailwind: {
+        config: 'tailwind-base-config.js',
+        css: './global.css',
+    },
+    app: {
+        entry: 'index.js',
+        components: './components/ui',
+    },
+};

package/src/gluestack-ui.config.json

@@ -0,0 +1,10 @@
+{
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "./global.css"
+    },
+    "app": {
+        "entry": "index.js",
+        "components": "./components/ui"
+    }
+}

package/src/index.ts

@@ -5,7 +5,7 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
-import {getReplacedRouteConfig} from './utils/getReplacedRouteConfig'
+import { getReplacedRouteConfig } from './utils/getReplacedRouteConfig';
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 import i18next from './config/i18next';
@@ -15,12 +15,11 @@ import layoutRouteConfig from './layout.json';
 export * from './components';
 export * from './containers/layout/Lifecycle';
 
-//...........................glustack-ui library....///
-export * from '@gluestack-ui/themed';
-export * from '@gluestack-ui/config';
-export * from '@gluestack-style/react';
-//............................gluestack-ui....///
-
+// //...........................glustack-ui library....///
+// export * from '@gluestack-ui/themed';
+// export * from '@gluestack-ui/config';
+// export * from '@gluestack-style/react';
+// //............................gluestack-ui....///
 
 export {
     useLayoutSetting,

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/tailwind-base-config.js

@@ -0,0 +1,197 @@
+// import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';
+const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin');
+module.exports = {
+    darkMode: 'media',
+    content: ['./index.js', './components/**/*.{tsx,jsx,ts,js}'],
+    presets: [require('nativewind/preset')],
+    safelist: [
+        {
+            pattern:
+                /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
+        },
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    0: 'rgb(var(--color-primary-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-primary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-primary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-primary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-primary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-primary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-primary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-primary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-primary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-primary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-primary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-primary-950)/<alpha-value>)',
+                },
+                secondary: {
+                    0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
+                },
+                tertiary: {
+                    50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
+                },
+                error: {
+                    0: 'rgb(var(--color-error-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-error-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-error-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-error-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-error-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-error-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-error-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-error-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-error-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-error-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-error-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-error-950)/<alpha-value>)',
+                },
+                success: {
+                    0: 'rgb(var(--color-success-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-success-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-success-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-success-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-success-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-success-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-success-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-success-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-success-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-success-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-success-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-success-950)/<alpha-value>)',
+                },
+                warning: {
+                    0: 'rgb(var(--color-warning-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-warning-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-warning-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-warning-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-warning-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-warning-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-warning-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-warning-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-warning-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-warning-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-warning-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-warning-950)/<alpha-value>)',
+                },
+                info: {
+                    0: 'rgb(var(--color-info-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-info-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-info-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-info-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-info-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-info-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-info-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-info-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-info-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-info-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-info-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-info-950)/<alpha-value>)',
+                },
+                typography: {
+                    0: 'rgb(var(--color-typography-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-typography-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-typography-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-typography-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-typography-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-typography-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-typography-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-typography-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-typography-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-typography-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-typography-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-typography-950)/<alpha-value>)',
+                    white: '#FFFFFF',
+                    gray: '#D4D4D4',
+                    black: '#181718',
+                },
+                outline: {
+                    0: 'rgb(var(--color-outline-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-outline-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-outline-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-outline-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-outline-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-outline-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-outline-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-outline-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-outline-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-outline-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-outline-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-outline-950)/<alpha-value>)',
+                },
+                background: {
+                    0: 'rgb(var(--color-background-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-background-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-background-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-background-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-background-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-background-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-background-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-background-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-background-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-background-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-background-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-background-950)/<alpha-value>)',
+                    error: 'rgb(var(--color-background-error)/<alpha-value>)',
+                    warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
+                    muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
+                    success: 'rgb(var(--color-background-success)/<alpha-value>)',
+                    info: 'rgb(var(--color-background-info)/<alpha-value>)',
+                    light: '#FBFBFB',
+                    dark: '#181719',
+                },
+                indicator: {
+                    primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
+                    info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
+                    error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
+                },
+            },
+            fontFamily: {
+                heading: undefined,
+                body: undefined,
+                mono: undefined,
+                roboto: ['Roboto', 'sans-serif'],
+            },
+            fontWeight: {
+                extrablack: '950',
+            },
+            fontSize: {
+                '2xs': '10px',
+            },
+            boxShadow: {
+                'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+                'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
+                'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+                'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
+                'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
+                'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
+                'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
+                'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
+                'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
+            },
+        },
+    },
+    plugins: [gluestackPlugin],
+};

package/src/tailwind.config.js

@@ -0,0 +1,198 @@
+import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'media',
+    content: ['./index.js', './components/**/*.{tsx,jsx,ts,js}'],
+    presets: [require('nativewind/preset')],
+    safelist: [
+        {
+            pattern:
+                /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
+        },
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    0: 'rgb(var(--color-primary-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-primary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-primary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-primary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-primary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-primary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-primary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-primary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-primary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-primary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-primary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-primary-950)/<alpha-value>)',
+                },
+                secondary: {
+                    0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
+                },
+                tertiary: {
+                    50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
+                },
+                error: {
+                    0: 'rgb(var(--color-error-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-error-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-error-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-error-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-error-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-error-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-error-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-error-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-error-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-error-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-error-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-error-950)/<alpha-value>)',
+                },
+                success: {
+                    0: 'rgb(var(--color-success-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-success-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-success-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-success-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-success-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-success-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-success-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-success-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-success-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-success-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-success-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-success-950)/<alpha-value>)',
+                },
+                warning: {
+                    0: 'rgb(var(--color-warning-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-warning-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-warning-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-warning-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-warning-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-warning-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-warning-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-warning-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-warning-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-warning-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-warning-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-warning-950)/<alpha-value>)',
+                },
+                info: {
+                    0: 'rgb(var(--color-info-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-info-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-info-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-info-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-info-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-info-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-info-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-info-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-info-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-info-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-info-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-info-950)/<alpha-value>)',
+                },
+                typography: {
+                    0: 'rgb(var(--color-typography-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-typography-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-typography-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-typography-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-typography-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-typography-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-typography-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-typography-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-typography-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-typography-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-typography-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-typography-950)/<alpha-value>)',
+                    white: '#FFFFFF',
+                    gray: '#D4D4D4',
+                    black: '#181718',
+                },
+                outline: {
+                    0: 'rgb(var(--color-outline-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-outline-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-outline-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-outline-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-outline-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-outline-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-outline-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-outline-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-outline-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-outline-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-outline-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-outline-950)/<alpha-value>)',
+                },
+                background: {
+                    0: 'rgb(var(--color-background-0)/<alpha-value>)',
+                    50: 'rgb(var(--color-background-50)/<alpha-value>)',
+                    100: 'rgb(var(--color-background-100)/<alpha-value>)',
+                    200: 'rgb(var(--color-background-200)/<alpha-value>)',
+                    300: 'rgb(var(--color-background-300)/<alpha-value>)',
+                    400: 'rgb(var(--color-background-400)/<alpha-value>)',
+                    500: 'rgb(var(--color-background-500)/<alpha-value>)',
+                    600: 'rgb(var(--color-background-600)/<alpha-value>)',
+                    700: 'rgb(var(--color-background-700)/<alpha-value>)',
+                    800: 'rgb(var(--color-background-800)/<alpha-value>)',
+                    900: 'rgb(var(--color-background-900)/<alpha-value>)',
+                    950: 'rgb(var(--color-background-950)/<alpha-value>)',
+                    error: 'rgb(var(--color-background-error)/<alpha-value>)',
+                    warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
+                    muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
+                    success: 'rgb(var(--color-background-success)/<alpha-value>)',
+                    info: 'rgb(var(--color-background-info)/<alpha-value>)',
+                    light: '#FBFBFB',
+                    dark: '#181719',
+                },
+                indicator: {
+                    primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
+                    info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
+                    error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
+                },
+            },
+            fontFamily: {
+                heading: undefined,
+                body: undefined,
+                mono: undefined,
+                roboto: ['Roboto', 'sans-serif'],
+            },
+            fontWeight: {
+                extrablack: '950',
+            },
+            fontSize: {
+                '2xs': '10px',
+            },
+            boxShadow: {
+                'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+                'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
+                'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
+                'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
+                'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
+                'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
+                'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
+                'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
+                'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
+            },
+        },
+    },
+    plugins: [gluestackPlugin],
+};

package/src/utils/generateMobileNavigations.ts

@@ -218,7 +218,7 @@ export class GenerateMobileNavigations {
         const tsFile = `${parentDirName}/compute.ts`;
         // const outputDir = `${parentDirName}/${appDirName}`;
         const outputDir = `${appDirName}`;
-        const tscCommand = `tsc ${tsFile} --outDir ${outputDir} --target es6 --module esnext --jsx react  --allowSyntheticDefaultImports true --moduleResolution node --esModuleInterop true --forceConsistentCasingInFileNames true  --skipLibCheck true`;
+        const tscCommand = `npx tsc ${tsFile} --outDir ${outputDir} --target es6 --module esnext --jsx react  --allowSyntheticDefaultImports true --moduleResolution node --esModuleInterop true --forceConsistentCasingInFileNames true  --skipLibCheck true`;
         const mainRoutesJsFile = path.join(appDirPath, '/compute.js');
         const mainRoutesMjsFile = path.join(appDirPath, '/compute.mjs');
         const outputFile = path.join(appDirPath, `/${mainRoutesFileName}`);
@@ -1878,12 +1878,40 @@ export class GenerateMobileNavigations {
         const config = this.#configFileData;
         try {
             await performCopyOperations(config);
+            // await this.#copyMultipleFiles(['nativewind-env.d.ts', 'global.css', 'gluestack-ui.config.json']);
+            await this.#copyMultipleFiles(['nativewind-env.d.ts']);
+            // await this.#copyAndModifyTailwindConfig();
             await this.#setLayoutAndGenerateNavigation();
         } catch (error) {
             console.error('PerformCopyOperations error:', error);
         }
     }
 
+    async #copyMultipleFiles(fileNames) {
+        try {
+            for (const fileName of fileNames) {
+                const sourcePath = path.resolve(__dirname, `../${fileName}`);
+                const destinationPath = path.join(path.dirname(this.#configFilePath), fileName);
+
+                const destinationDir = path.dirname(destinationPath);
+                if (!fs.existsSync(destinationDir)) {
+                    fs.mkdirSync(destinationDir, { recursive: true });
+                    console.log('✅ Created destination directory:', destinationDir);
+                }
+
+                if (!fs.existsSync(sourcePath)) {
+                    console.error(`❌ Source file does not exist: ${sourcePath}`);
+                    continue; // Skip this file and move to the next
+                }
+
+                await fs.promises.copyFile(sourcePath, destinationPath);
+                console.log(`✅ Successfully copied ${fileName} to the mobile folder`);
+            }
+        } catch (error) {
+            console.error('❌ Error copying files:', error);
+        }
+    }
+
     async #deleteDirectoryRecursive(dirPath: any) {
         if (fs.existsSync(dirPath)) {
             const files = fs.readdirSync(dirPath);