@imksh/create 1.0.23 → 1.0.25

package/templates/react-native/src/components/common/TabHeader.tsx

@@ -0,0 +1,58 @@
+import { View, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+import { Txt } from "./Typography";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import Sidebar from "../ui/Sidebar";
+import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function TabHeader({
+  title,
+  actions,
+  showMenuButton = false,
+}: {
+  title?: string;
+  actions?: React.ReactNode;
+  showMenuButton?: boolean;
+}) {
+  const { colorScheme } = useColorScheme();
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      <View
+        className="px-6 flex-row items-center justify-between border-b border-base-200 w-full"
+        style={{
+          backgroundColor: colors.base200,
+          height: insets.top + 56,
+          paddingTop: insets.top,
+        }}
+      >
+        <View className="flex-row items-center flex-1 mr-4">
+          {showMenuButton && (
+            <TouchableOpacity
+              onPress={() => setIsSidebarOpen(true)}
+              activeOpacity={0.7}
+              className="w-10 h-10 rounded-full bg-base-200/80 items-center justify-center mr-3 border border-base-300/10 shadow-sm"
+            >
+              <Ionicons
+                name="menu-outline"
+                color={colors.baseContent}
+                size={22}
+              />
+            </TouchableOpacity>
+          )}
+          <Txt variant="xl" className="text-primary">
+            {title}
+          </Txt>
+        </View>
+        <View className="flex-row items-center gap-2">{actions}</View>
+      </View>
+
+      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
+    </>
+  );
+}

package/templates/react-native/src/components/common/Typography.tsx

@@ -9,27 +9,30 @@ export const FontFamily = {
 } as const;
 
 export type TxtVariant =
-  | "h1"
-  | "h2"
-  | "h3"
-  | "body"
-  | "regular"
   | "caption"
-  | "mid"
+  | "xxs"
+  | "xs"
+  | "sm"
+  | "base"
+  | "md"
+  | "lg"
   | "xl"
   | "2xl"
   | "3xl"
-  | "4xl";
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl";
 
 export interface TxtProps extends TextProps {
   variant?: TxtVariant;
   color?: string;
   align?: "auto" | "left" | "right" | "center" | "justify";
-  weight?: "normal" | "bold" | "semibold" | "black";
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
 }
 
 export const Txt = ({
-  variant = "regular",
+  variant = "base",
   color,
   align,
   weight,
@@ -40,36 +43,51 @@ export const Txt = ({
 }: TxtProps) => {
   const getVariantStyles = () => {
     switch (variant) {
-      case "h1":
-        return { fontFamily: FontFamily.bold, fontSize: 22 };
-      case "h2":
-        return { fontFamily: FontFamily.semibold, fontSize: 18 };
-      case "h3":
-        return { fontFamily: FontFamily.semibold, fontSize: 16 };
-      case "mid":
-        return { fontFamily: FontFamily.medium, fontSize: 15 };
-      case "body":
-        return { fontFamily: FontFamily.medium, fontSize: 14 };
-      case "regular":
-        return { fontFamily: FontFamily.regular, fontSize: 13 };
       case "caption":
+        return { fontFamily: FontFamily.regular, fontSize: 10 };
+      case "xxs":
+        return { fontFamily: FontFamily.regular, fontSize: 8 };
+      case "xs":
+        return { fontFamily: FontFamily.regular, fontSize: 10 };
+      case "sm":
         return { fontFamily: FontFamily.regular, fontSize: 12 };
+      case "base":
+        return { fontFamily: FontFamily.regular, fontSize: 14 };
+      case "md":
+        return { fontFamily: FontFamily.medium, fontSize: 16 };
+      case "lg":
+        return { fontFamily: FontFamily.semibold, fontSize: 18 };
       case "xl":
-        return { fontFamily: FontFamily.extrabold, fontSize: 30 };
+        return { fontFamily: FontFamily.bold, fontSize: 20 };
       case "2xl":
-        return { fontFamily: FontFamily.extrabold, fontSize: 36 };
+        return { fontFamily: FontFamily.bold, fontSize: 24 };
       case "3xl":
-        return { fontFamily: FontFamily.extrabold, fontSize: 48 };
+        return { fontFamily: FontFamily.extrabold, fontSize: 30 };
       case "4xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 36 };
+      case "5xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 48 };
+      case "6xl":
         return { fontFamily: FontFamily.extrabold, fontSize: 60 };
+      case "7xl":
+        return { fontFamily: FontFamily.extrabold, fontSize: 72 };
       default:
-        return { fontFamily: FontFamily.regular, fontSize: 13 };
+        return { fontFamily: FontFamily.regular, fontSize: 14 };
     }
   };
 
   const baseStyle = getVariantStyles();
-  const defaultColorClass =
-    variant === "caption" ? "text-secondary" : "text-base-content";
+  const hasColorClass = className.split(" ").some((c) => {
+    if (!c.startsWith("text-")) return false;
+    const val = c.substring(5).split("/")[0]; // handle potential opacity suffix like text-white/80
+    const isSize = ["xxs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "caption"].includes(val);
+    return !isSize;
+  });
+  const defaultColorClass = hasColorClass
+    ? ""
+    : variant === "xs"
+      ? "text-secondary"
+      : "text-base-content";
 
   // Override specific properties if provided
   const customStyles: any = {};
@@ -77,9 +95,10 @@ export const Txt = ({
   if (align) customStyles.textAlign = align;
   if (weight) {
     if (weight === "bold" || weight === "black")
-      customStyles.fontFamily = "MontserratBold";
-    if (weight === "semibold") customStyles.fontFamily = "MontserratSemiBold";
-    if (weight === "normal") customStyles.fontFamily = "MontserratRegular";
+      customStyles.fontFamily = FontFamily.bold;
+    if (weight === "semibold") customStyles.fontFamily = FontFamily.semibold;
+    if (weight === "medium") customStyles.fontFamily = FontFamily.medium;
+    if (weight === "normal") customStyles.fontFamily = FontFamily.regular;
   }
 
   return (

package/templates/react-native/src/components/common/Welcome.tsx

@@ -27,9 +27,9 @@ const Welcome = () => {
   return (
     <View className="flex-row flex-wrap justify-between item-center pl-4 mt-6 items-center">
       <View className="w-[55%] relative justify-end">
-        <Txt variant="h1"> Hey {user ? user.name : "There"}!</Txt>
+        <Txt variant="6xl"> Hey {user ? user.name : "There"}!</Txt>
         <View className="flex-row w-64 items-center">
-          <Txt variant="h1">Welcome Back</Txt>
+          <Txt variant="6xl">Welcome Back</Txt>
           <Text
             key={i}
             style={{ fontSize: 28 }}

package/templates/react-native/src/components/ui/BottomModal.tsx

@@ -4,6 +4,8 @@ import {
   TouchableWithoutFeedback,
   Dimensions,
   StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
 } from "react-native";
 import Animated, {
   useSharedValue,
@@ -12,7 +14,7 @@ import Animated, {
   Easing,
   runOnJS,
 } from "react-native-reanimated";
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { Portal } from "react-native-paper";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
@@ -64,7 +66,7 @@ export default function BottomModal({
         }
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
   }, [isOpen]);
 
   const panGesture = Gesture.Pan()
@@ -98,20 +100,24 @@ export default function BottomModal({
 
   return (
     <Portal>
-      <View style={[StyleSheet.absoluteFill, { zIndex: 999 }]}>
-        {/* Backdrop Overlay */}
-        <TouchableWithoutFeedback onPress={onClose}>
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFill,
-              { backgroundColor: "#000" },
-              backdropAnimatedStyle,
-            ]}
-          />
-        </TouchableWithoutFeedback>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={[StyleSheet.absoluteFill, { zIndex: 999 }]}>
+          {/* Backdrop Overlay */}
+          <TouchableWithoutFeedback onPress={onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: "#000" },
+                backdropAnimatedStyle,
+              ]}
+            />
+          </TouchableWithoutFeedback>
 
-        {/* Sliding Bottom Modal Panel */}
-        <GestureDetector gesture={panGesture}>
+          {/* Sliding Bottom Modal Panel */}
           <Animated.View
             style={[
               {
@@ -134,15 +140,20 @@ export default function BottomModal({
             ]}
           >
             {/* Drag Handle Indicator */}
-            <View className="items-center py-4">
-              <View className="w-12 h-1.5 rounded-full bg-base-300" />
-            </View>
+            <GestureDetector gesture={panGesture}>
+              <View
+                className="items-center pt-4 pb-6 bg-base-100 rounded-t-[30px]"
+                style={{ zIndex: 10 }}
+              >
+                <View className="w-16 h-1.5 rounded-full bg-base-300" />
+              </View>
+            </GestureDetector>
 
             {/* Modal Content */}
             <View className="flex-1 px-6">{children}</View>
           </Animated.View>
-        </GestureDetector>
-      </View>
+        </View>
+      </KeyboardAvoidingView>
     </Portal>
   );
 }

package/templates/react-native/src/components/ui/ClassicTabBar.tsx

@@ -1,5 +1,6 @@
+import { Txt } from "../common/Typography";
 import React from 'react';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useColorScheme } from 'nativewind';
@@ -23,7 +24,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, label, colors }: a
           color={isFocused ? colors.primary : colors.secondary} 
           style={{ marginBottom: 4 }} 
         />
-        <Text 
+        <Txt 
           style={{ 
             color: isFocused ? colors.primary : colors.secondary, 
             fontWeight: isFocused ? '600' : '500', 
@@ -31,7 +32,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, label, colors }: a
           }}
         >
           {label}
-        </Text>
+        </Txt>
       </View>
     </TouchableOpacity>
   );

package/templates/react-native/src/components/ui/CustomTabBar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
 import { getTabConfig } from "../../config/tabNavigation";
+import { LinearGradient } from "expo-linear-gradient";
 
 const TabItem = ({
   isFocused,
@@ -14,7 +15,6 @@ const TabItem = ({
   label,
   colors,
 }: any) => {
-
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -25,21 +25,25 @@ const TabItem = ({
       activeOpacity={0.8}
     >
       <View style={styles.tabItem}>
-        <Ionicons
-          name={iconName as any}
-          size={24}
-          color={isFocused ? colors.primary : colors.secondary}
-          style={{ marginBottom: 4 }}
-        />
-        <Text
-          style={{
-            color: isFocused ? colors.baseContent : colors.secondary,
-            fontWeight: isFocused ? "600" : "400",
-            fontSize: 11,
-          }}
+        <View
+          style={[
+            styles.iconWrapper,
+            isFocused && {
+              backgroundColor: colors.primary,
+              width: 54,
+              height: 54,
+              borderRadius: 100,
+              alignItems: "center",
+              justifyContent: "center",
+            },
+          ]}
         >
-          {label}
-        </Text>
+          <Ionicons
+            name={iconName as any}
+            size={isFocused ? 20 : 24}
+            color={isFocused ? colors.primaryContent : colors.secondary}
+          />
+        </View>
       </View>
     </TouchableOpacity>
   );
@@ -76,68 +80,97 @@ export default function CustomTabBar({
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
 
+  const currentRoute = state.routes[state.index];
+  const currentOptions = descriptors[currentRoute.key].options;
+  if (currentOptions.tabBarStyle?.display === "none") {
+    return null;
+  }
+
+  const bottomOffset = insets.bottom > 0 ? insets.bottom : 20;
+  const totalTabBarHeight = bottomOffset + 70; // 70 is the height of the tab bar container
+
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          bottom: insets.bottom > 0 ? insets.bottom : 20,
-          backgroundColor: colors.base100,
-          borderColor: colors.base300,
-        },
-      ]}
-    >
-      {state.routes.map((route: any, index: number) => {
-        const { options } = descriptors[route.key];
-        const tabConfig = getTabConfig(route.name);
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-              ? options.title
-              : tabConfig?.title || route.name;
+    <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+      <LinearGradient
+        colors={[`${colors.base100}00`, colors.base100, colors.base100]}
+        locations={[0, 0.5, 1]}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: totalTabBarHeight,
+        }}
+        pointerEvents="none"
+      />
+      <View
+        style={[
+          styles.container,
+          {
+            bottom: bottomOffset,
+            backgroundColor: colors.base100,
+            borderColor: colors.base300,
+          },
+        ]}
+      >
+        {state.routes.map((route: any, index: number) => {
+          const { options } = descriptors[route.key];
+          if (
+            options.href === null ||
+            options.tabBarItemStyle?.display === "none"
+          )
+            return null;
 
-        const isFocused = state.index === index;
+          const tabConfig = getTabConfig(route.name);
+          const label =
+            options.tabBarLabel !== undefined
+              ? options.tabBarLabel
+              : options.title !== undefined
+                ? options.title
+                : tabConfig?.title || route.name;
 
-        const onPress = () => {
-          const event = navigation.emit({
-            type: "tabPress",
-            target: route.key,
-            canPreventDefault: true,
-          });
+          const isFocused = state.index === index;
 
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
-          }
-        };
+          const onPress = () => {
+            const event = navigation.emit({
+              type: "tabPress",
+              target: route.key,
+              canPreventDefault: true,
+            });
 
-        const onLongPress = () => {
-          navigation.emit({
-            type: "tabLongPress",
-            target: route.key,
-          });
-        };
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
+            }
+          };
 
-        let iconName: any = tabConfig?.baseIcon || "home";
-        iconName = isFocused ? iconName : `${iconName}-outline`;
+          const onLongPress = () => {
+            navigation.emit({
+              type: "tabLongPress",
+              target: route.key,
+            });
+          };
 
-        return (
-          <React.Fragment key={route.key}>
-            {showCenterButton &&
-              index === Math.floor(state.routes.length / 2) && (
-                <CenterButton colors={colors} onPress={onCenterButtonPress} />
-              )}
-            <TabItem
-              isFocused={isFocused}
-              onPress={onPress}
-              onLongPress={onLongPress}
-              iconName={iconName}
-              label={label as string}
-              colors={colors}
-            />
-          </React.Fragment>
-        );
-      })}
+          let iconName: any = tabConfig?.baseIcon || "home";
+          iconName = isFocused ? iconName : `${iconName}-outline`;
+
+          return (
+            <React.Fragment key={route.key}>
+              {showCenterButton &&
+                index === Math.floor(state.routes.length / 2) && (
+                  <CenterButton colors={colors} onPress={onCenterButtonPress} />
+                )}
+              <TabItem
+                isFocused={isFocused}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                iconName={iconName}
+                label={label as string}
+                colors={colors}
+              />
+            </React.Fragment>
+          );
+        })}
+      </View>
     </View>
   );
 }
@@ -173,6 +206,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     height: 50,
   },
+  iconWrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
   activeIndicator: {
     width: 20,
     height: 3,