@imksh/create 1.0.23 → 1.0.25

package/templates/mern-react-native/mobile/src/components/ui/feedback/CircularProgress.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface CircularProgressProps {
   progress: number;
@@ -28,9 +29,9 @@ export default function CircularProgress({ progress, size = 60, strokeWidth = 6
       }}
     >
       <View style={{ transform: [{ rotate: "-45deg" }] }}>
-         <Text style={{ color: theme.baseContent, fontWeight: "700", fontSize: size * 0.25 }}>
-           {progress}%
-         </Text>
+         <Txt color={theme.baseContent} weight="bold" style={{ fontSize: size * 0.25 }}>
+           {Math.round(progress)}%
+         </Txt>
       </View>
     </View>
   );

package/templates/mern-react-native/mobile/src/components/ui/feedback/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { View, StyleProp, ViewStyle, Text } from "react-native";
+import { View, StyleProp, ViewStyle } from "react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -7,6 +7,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface ProgressBarProps {
   progress: number; // 0 to 100
@@ -33,8 +34,8 @@ export default function ProgressBar({ progress, color, height = 8, label, style
     <View style={[{ width: "100%", marginBottom: label ? 16 : 0 }, style]}>
       {label && (
         <View style={{ flexDirection: "row", justifyContent: "space-between", marginBottom: 6 }}>
-          <Text style={{ color: theme.baseContent, fontSize: 13, fontWeight: "500" }}>{label}</Text>
-          <Text style={{ color: theme.secondary, fontSize: 13 }}>{Math.round(progress)}%</Text>
+          <Txt color={theme.baseContent} variant="sm" weight="semibold">{label}</Txt>
+          <Txt color={theme.secondary} variant="sm">{Math.round(progress)}%</Txt>
         </View>
       )}
       <View style={{ width: "100%", height, backgroundColor: theme.base300, borderRadius: height / 2, overflow: "hidden" }}>

package/templates/mern-react-native/mobile/src/components/ui/feedback/Skeleton.tsx

@@ -16,6 +16,7 @@ export interface SkeletonProps {
   borderRadius?: number;
   style?: StyleProp<ViewStyle>;
   variant?: "circular" | "rectangular" | "text";
+  className?: string;
 }
 
 export default function Skeleton({
@@ -24,6 +25,7 @@ export default function Skeleton({
   borderRadius,
   style,
   variant = "rectangular",
+  className=""
 }: SkeletonProps) {
   const { colorScheme } = useColorScheme();
   const theme = Colors[colorScheme ?? "light"];
@@ -76,6 +78,7 @@ export default function Skeleton({
         animatedStyle,
         style,
       ]}
+      className={className}
     />
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/feedback/Spinner.tsx

@@ -12,7 +12,7 @@ import { Colors } from "../../../constants/Colors";
 import { EvilIcons } from "@expo/vector-icons";
 
 export interface SpinnerProps {
-  size?: number;
+  size?: number | "xs" | "sm" | "md" | "lg" | "xl";
   color?: string;
   style?: StyleProp<ViewStyle>;
 }
@@ -22,6 +22,14 @@ export default function Spinner({ size = 24, color, style }: SpinnerProps) {
   const theme = Colors[colorScheme ?? "light"];
   const rotation = useSharedValue(0);
 
+  const numericSize = typeof size === "number" ? size : {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+  }[size] || 24;
+
   useEffect(() => {
     rotation.value = withRepeat(
       withTiming(360, { duration: 2000, easing: Easing.linear }),
@@ -35,8 +43,8 @@ export default function Spinner({ size = 24, color, style }: SpinnerProps) {
   }));
 
   return (
-    <Animated.View style={[animatedStyle, style, { width: size, height: size, alignItems: "center", justifyContent: "center" }]}>
-      <EvilIcons name="spinner" size={size} color={color || theme.primary} />
+    <Animated.View style={[animatedStyle, style, { width: numericSize, height: numericSize, alignItems: "center", justifyContent: "center" }]}>
+      <EvilIcons name="spinner" size={numericSize} color={color || theme.primary} />
     </Animated.View>
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/inputs/Checkbox.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { TouchableOpacity, View, Text } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
 
 export interface CheckboxProps {
   checked: boolean;
@@ -47,7 +48,7 @@ export default function Checkbox({
       >
         {checked && <Ionicons name="checkmark" size={16} color={theme.primaryContent} />}
       </View>
-      {label && <Text style={{ color: theme.baseContent, fontSize: 15 }}>{label}</Text>}
+      {label && <Txt color={theme.baseContent} variant="base">{label}</Txt>}
     </TouchableOpacity>
   );
 }

package/templates/mern-react-native/mobile/src/components/ui/inputs/DatePicker.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from "react";
+import { View, TouchableOpacity, ScrollView } from "react-native";
+import { Txt } from "../../common/Typography";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import BottomModal from "../BottomModal";
+import Button from "../buttons/Button";
+import dayjs from "dayjs";
+
+interface DatePickerProps {
+  label: string;
+  value: string; // YYYY-MM-DD
+  onChange: (value: string) => void;
+  placeholder?: string;
+  minimumDate?: string; // YYYY-MM-DD
+}
+
+export default function DatePicker({
+  label,
+  value,
+  onChange,
+  placeholder = "Select Date",
+  minimumDate,
+}: DatePickerProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Parse initial selected date or default to today
+  const selectedDate = value ? dayjs(value) : dayjs();
+  const [currentMonth, setCurrentMonth] = useState(selectedDate);
+
+  // Month navigation
+  const handlePrevMonth = () => {
+    setCurrentMonth((prev) => prev.subtract(1, "month"));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentMonth((prev) => prev.add(1, "month"));
+  };
+
+  // Generate days in current month grid
+  const daysInMonth = currentMonth.daysInMonth();
+  const startDayOfWeek = currentMonth.startOf("month").day(); // 0 (Sun) - 6 (Sat)
+
+  const daysArray: { dayNum: number; dateString: string; isCurrentMonth: boolean }[] = [];
+
+  // Padding days from previous month
+  const prevMonth = currentMonth.subtract(1, "month");
+  const prevMonthDays = prevMonth.daysInMonth();
+  for (let i = startDayOfWeek - 1; i >= 0; i--) {
+    const dayNum = prevMonthDays - i;
+    daysArray.push({
+      dayNum,
+      dateString: prevMonth.date(dayNum).format("YYYY-MM-DD"),
+      isCurrentMonth: false,
+    });
+  }
+
+  // Days of current month
+  for (let i = 1; i <= daysInMonth; i++) {
+    daysArray.push({
+      dayNum: i,
+      dateString: currentMonth.date(i).format("YYYY-MM-DD"),
+      isCurrentMonth: true,
+    });
+  }
+
+  // Padding days for next month to complete the row
+  const remainingDays = 42 - daysArray.length; // 6 rows * 7 days = 42 total slots
+  const nextMonth = currentMonth.add(1, "month");
+  for (let i = 1; i <= remainingDays; i++) {
+    daysArray.push({
+      dayNum: i,
+      dateString: nextMonth.date(i).format("YYYY-MM-DD"),
+      isCurrentMonth: false,
+    });
+  }
+
+  const handleDateSelect = (dateStr: string) => {
+    if (minimumDate && dayjs(dateStr).isBefore(dayjs(minimumDate), "day")) {
+      return; // Date is disabled
+    }
+    onChange(dateStr);
+    setIsOpen(false);
+  };
+
+  const formattedDisplay = value ? dayjs(value).format("MMM DD, YYYY") : "";
+
+  return (
+    <View className="flex-1">
+      <Txt className="text-xs text-base-content/60 uppercase mb-2 font-medium">
+        {label}
+      </Txt>
+      <TouchableOpacity
+        onPress={() => setIsOpen(true)}
+        activeOpacity={0.8}
+        className="bg-base-100 rounded-2xl px-4 py-3 border border-base-300 flex-row justify-between items-center h-12"
+      >
+        <Txt className={formattedDisplay ? "text-base-content font-medium" : "text-base-content/40 font-medium"}>
+          {formattedDisplay || placeholder}
+        </Txt>
+        <Ionicons name="calendar-outline" size={18} color={colors.primary} />
+      </TouchableOpacity>
+
+      <BottomModal isOpen={isOpen} onClose={() => setIsOpen(false)} heightPercent={0.65}>
+        <View className="p-4 flex-1">
+          <Txt variant="lg" className="font-bold text-center mb-4">
+            {label}
+          </Txt>
+
+          {/* Month & Year Navigation Header */}
+          <View className="flex-row justify-between items-center px-2 mb-4">
+            <TouchableOpacity onPress={handlePrevMonth} className="p-2 bg-base-200 rounded-full">
+              <Ionicons name="chevron-back" size={20} color={colors.primary} />
+            </TouchableOpacity>
+            <Txt className="font-bold text-base-content text-base">
+              {currentMonth.format("MMMM YYYY")}
+            </Txt>
+            <TouchableOpacity onPress={handleNextMonth} className="p-2 bg-base-200 rounded-full">
+              <Ionicons name="chevron-forward" size={20} color={colors.primary} />
+            </TouchableOpacity>
+          </View>
+
+          {/* Day Names Header */}
+          <View className="flex-row justify-between mb-2">
+            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
+              <View key={day} className="flex-1 items-center">
+                <Txt variant="xs" className="text-base-content/40 font-bold">
+                  {day}
+                </Txt>
+              </View>
+            ))}
+          </View>
+
+          {/* Days Grid */}
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View className="flex-row flex-wrap">
+              {daysArray.map((item, idx) => {
+                const isSelected = value === item.dateString;
+                const isToday = dayjs().format("YYYY-MM-DD") === item.dateString;
+                const isDisabled = !!(minimumDate && dayjs(item.dateString).isBefore(dayjs(minimumDate), "day"));
+
+                return (
+                  <TouchableOpacity
+                    key={idx}
+                    onPress={() => handleDateSelect(item.dateString)}
+                    disabled={isDisabled}
+                    style={{ width: "14.28%", aspectRatio: 1 }}
+                    className={`items-center justify-center rounded-2xl my-1 relative ${
+                      isSelected
+                        ? "bg-primary"
+                        : isToday
+                        ? "bg-primary/10 border border-primary/30"
+                        : ""
+                    } ${isDisabled ? "opacity-25" : ""}`}
+                  >
+                    <Txt
+                      className={`font-semibold ${
+                        isSelected
+                          ? "text-white"
+                          : item.isCurrentMonth
+                          ? "text-base-content"
+                          : "text-base-content/30"
+                      }`}
+                    >
+                      {item.dayNum}
+                    </Txt>
+                    {isToday && !isSelected && (
+                      <View className="absolute bottom-1 w-1 h-1 bg-primary rounded-full" />
+                    )}
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </ScrollView>
+
+          <View className="pt-4 border-t border-base-200">
+            <Button label="Close" variant="outline" onPress={() => setIsOpen(false)} className="w-full" />
+          </View>
+        </View>
+      </BottomModal>
+    </View>
+  );
+}

package/templates/mern-react-native/mobile/src/components/ui/inputs/ImagePickerModal.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { View } from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import { Txt } from "@/components/common/Typography";
+import BottomModal from "@/components/ui/BottomModal";
+import Button from "@/components/ui/buttons/Button";
+
+export type ImagePickerSource = "camera" | "gallery" | "both";
+
+export interface ImagePickerResult {
+  uri: string;
+  name: string;
+  type: string;
+}
+
+export interface ImagePickerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onImageSelected?: (image: ImagePickerResult) => void;
+  onImagesSelected?: (images: ImagePickerResult[]) => void;
+  source?: ImagePickerSource;
+  title?: string;
+  subtitle?: string;
+  allowsEditing?: boolean;
+  allowsMultipleSelection?: boolean;
+}
+
+export default function ImagePickerModal({
+  isOpen,
+  onClose,
+  onImageSelected,
+  onImagesSelected,
+  source = "both",
+  title = "Select Image Source",
+  subtitle = "Choose where to pick your image from",
+  allowsEditing = false,
+  allowsMultipleSelection = false,
+}: ImagePickerModalProps) {
+
+  const launchPicker = async (type: "gallery" | "camera") => {
+    onClose();
+
+    // Delay picker execution to allow the modal dismiss animation to finish smoothly
+    setTimeout(async () => {
+      try {
+        let result: ImagePicker.ImagePickerResult;
+
+        if (type === "gallery") {
+          const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+          if (!perm.granted) return;
+
+          result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ["images"],
+            quality: 0.8,
+            allowsEditing: !allowsMultipleSelection && allowsEditing, // multi-select cannot have editing on some OS
+            allowsMultipleSelection,
+            aspect: allowsEditing ? [16, 9] : undefined, // Assuming a common aspect ratio if cropped
+          });
+        } else {
+          const perm = await ImagePicker.requestCameraPermissionsAsync();
+          if (!perm.granted) return;
+
+          result = await ImagePicker.launchCameraAsync({
+            mediaTypes: ["images"],
+            quality: 0.8,
+            allowsEditing,
+            aspect: allowsEditing ? [16, 9] : undefined,
+          });
+        }
+
+        if (result && !result.canceled && result.assets && result.assets.length > 0) {
+          const mappedAssets = result.assets.map(asset => {
+            const filename = asset.uri.split("/").pop() || "image.jpg";
+            const match = /\.(\w+)$/.exec(filename);
+            const mimeType = match ? `image/${match[1]}` : "image/jpeg";
+            return {
+              uri: asset.uri,
+              name: filename,
+              type: mimeType,
+            };
+          });
+
+          if (allowsMultipleSelection && onImagesSelected) {
+            onImagesSelected(mappedAssets);
+          } else if (onImageSelected && mappedAssets.length > 0) {
+            onImageSelected(mappedAssets[0]);
+          }
+        }
+      } catch (err) {
+        console.error("ImagePicker error:", err);
+      }
+    }, 350);
+  };
+
+  return (
+    <BottomModal isOpen={isOpen} onClose={onClose}>
+      <View className="p-6">
+        <Txt variant="lg" className="font-bold mb-1 text-center">
+          {title}
+        </Txt>
+        {subtitle ? (
+          <Txt className="text-base-content/60 text-center mb-6 text-sm">
+            {subtitle}
+          </Txt>
+        ) : null}
+
+        <View className="gap-3">
+          {(source === "both" || source === "gallery") && (
+            <Button
+              label="Choose from Gallery"
+              leftIcon="images-outline"
+              variant="primary"
+              onPress={() => launchPicker("gallery")}
+            />
+          )}
+
+          {(source === "both" || source === "camera") && (
+            <Button
+              label="Take Photo with Camera"
+              leftIcon="camera-outline"
+              variant={source === "camera" ? "primary" : "outline"}
+              onPress={() => launchPicker("camera")}
+            />
+          )}
+        </View>
+      </View>
+    </BottomModal>
+  );
+}

package/templates/mern-react-native/mobile/src/components/ui/inputs/Input.tsx

@@ -1,8 +1,14 @@
 import React, { useState } from "react";
-import { View, TextInput, TextInputProps, TouchableOpacity, Text } from "react-native";
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+} from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
 import { Ionicons } from "@expo/vector-icons";
+import { Txt } from "../../common/Typography";
 
 export interface InputProps extends TextInputProps {
   label?: string;
@@ -11,7 +17,10 @@ export interface InputProps extends TextInputProps {
   rightIcon?: keyof typeof Ionicons.glyphMap;
   onRightIconPress?: () => void;
   helperText?: string;
-  containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+  containerStyle?: import("react-native").StyleProp<
+    import("react-native").ViewStyle
+  >;
+  labelOnBorder?: boolean;
 }
 
 export default function Input({
@@ -23,6 +32,7 @@ export default function Input({
   helperText,
   style,
   containerStyle,
+  labelOnBorder = false,
   ...props
 }: InputProps) {
   const { colorScheme } = useColorScheme();
@@ -32,17 +42,44 @@ export default function Input({
   const borderColor = error
     ? theme.error
     : isFocused
-    ? theme.primary
-    : theme.base300;
+      ? theme.primary
+      : theme.base300;
 
   return (
-    <View className="mb-4">
-      {label && (
-        <Text style={{ color: theme.baseContent, marginBottom: 6, fontWeight: "500" }}>
-          {label}
-        </Text>
+    <View className="mb-4 relative">
+      {!labelOnBorder && label && (
+        <Txt
+          color={theme.baseContent}
+          weight="semibold"
+          style={{ marginBottom: 6 }}
+        >
+          {label} {error ? "*" : ""}{" "}
+        </Txt>
       )}
-      
+
+      {labelOnBorder && label && (
+        <View
+          style={{
+            position: "absolute",
+            top: -6,
+            left: 12,
+            backgroundColor: theme.base100,
+            paddingHorizontal: 6,
+            zIndex: 10,
+          }}
+        >
+          <Txt
+            color={
+              error ? theme.error : isFocused ? theme.primary : theme.secondary
+            }
+            variant="xs"
+            weight="semibold"
+          >
+            {label} {error ? "*" : ""}
+          </Txt>
+        </View>
+      )}
+
       <View
         style={[
           {
@@ -66,7 +103,7 @@ export default function Input({
             style={{ marginRight: 8 }}
           />
         )}
-        
+
         <TextInput
           style={[
             {
@@ -90,7 +127,10 @@ export default function Input({
         />
 
         {rightIcon && (
-          <TouchableOpacity onPress={onRightIconPress} disabled={!onRightIconPress}>
+          <TouchableOpacity
+            onPress={onRightIconPress}
+            disabled={!onRightIconPress}
+          >
             <Ionicons
               name={rightIcon}
               size={20}
@@ -102,7 +142,7 @@ export default function Input({
       </View>
 
       {(error || helperText) && (
-        <Text
+        <Txt
           style={{
             color: error ? theme.error : theme.secondary,
             fontSize: 12,
@@ -111,7 +151,7 @@ export default function Input({
           }}
         >
           {error || helperText}
-        </Text>
+        </Txt>
       )}
     </View>
   );