@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react-native/base/src/components/ui/buttons/Button.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -32,6 +31,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   isFullWidth?: boolean;
   soft?: boolean;
   outline?: boolean;
+  className?: string;
 }
 
 export default function Button({
@@ -46,6 +46,7 @@ export default function Button({
   outline = false,
   style,
   disabled,
+  className = "",
   ...props
 }: ButtonProps) {
   const { colorScheme } = useColorScheme();
@@ -109,7 +110,8 @@ export default function Button({
   const vStyles = getVariantStyles();
   if (outline) {
     vStyles.border = vStyles.bg === "transparent" ? theme.base300 : vStyles.bg;
-    vStyles.text = vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
+    vStyles.text =
+      vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
     vStyles.bg = "transparent";
   } else if (soft && variant !== "ghost" && variant !== "outline") {
     vStyles.text = vStyles.bg;
@@ -124,9 +126,10 @@ export default function Button({
     <TouchableOpacity
       activeOpacity={0.7}
       disabled={isDisabled}
+      className={className}
       style={[
         {
-          backgroundColor: vStyles.bg as any,
+          backgroundColor: vStyles.bg,
           height: sStyles.height,
           paddingHorizontal: sStyles.px,
           borderRadius: 12,
@@ -134,7 +137,7 @@ export default function Button({
           alignItems: "center",
           justifyContent: "center",
           opacity: isDisabled ? 0.6 : 1,
-          borderWidth: (variant === "outline" || outline) ? 1 : 0,
+          borderWidth: variant === "outline" || outline ? 1 : 0,
           borderColor: vStyles.border,
           width: isFullWidth ? "100%" : undefined,
         },
@@ -144,13 +147,29 @@ export default function Button({
     >
       {/* Loading overlay */}
       {isLoading && (
-        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
           <ActivityIndicator color={vStyles.text} size="small" />
         </View>
       )}
 
       {/* Button content (hidden while loading to maintain dimensions) */}
-      <View style={{ flexDirection: "row", alignItems: "center", opacity: isLoading ? 0 : 1 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          opacity: isLoading ? 0 : 1,
+        }}
+      >
         {leftIcon && (
           <Ionicons
             name={leftIcon}
@@ -163,6 +182,10 @@ export default function Button({
           color={vStyles.text}
           weight="semibold"
           style={{ fontSize: sStyles.fontSize }}
+          allowFontScaling={true}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          adjustsFontSizeToFit
         >
           {label}
         </Txt>

package/templates/layers/react-native/base/src/components/ui/data-display/Accordion.tsx

@@ -72,9 +72,9 @@ export default function Accordion({ title, children }: AccordionProps) {
           style={{ position: "absolute", width: "100%", paddingHorizontal: 16, paddingBottom: 16 }}
         >
           {/* This inner view is measured */}
-          <View ref={aref as any}>
+          <Animated.View ref={aref}>
             {children}
-          </View>
+          </Animated.View>
         </View>
       </Animated.View>
     </View>

package/templates/layers/react-native/base/src/components/ui/data-display/Badge.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { View, ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
@@ -80,7 +79,7 @@ export default function Badge({
     <View
       style={[
         {
-          backgroundColor: vStyles.bg as any,
+          backgroundColor: vStyles.bg,
           height: sStyles.height,
           paddingHorizontal: sStyles.px,
           borderRadius: 9999,

package/templates/layers/react-native/base/src/components/ui/data-display/Image.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Image as ExpoImage, ImageProps as ExpoImageProps } from "expo-image";
+import { Image as ExpoImage, ImageProps as ExpoImageProps, ImageSource } from "expo-image";
 import { View, ActivityIndicator, DimensionValue } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
 
 export interface ImageProps extends Omit<ExpoImageProps, "source"> {
   fallbackIcon?: React.ReactNode;
-  src?: string | number | any;
-  source?: any;
+  src?: string | number | ImageSource;
+  source?: ImageSource | string | number;
   width?: DimensionValue;
   height?: DimensionValue;
 }

package/templates/layers/react-native/base/src/components/ui/data-display/SwipeableRow.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
@@ -30,13 +36,24 @@ export const SwipeableRow: React.FC<SwipeableRowProps> = ({
 }) => {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
-  const colors = Colors[isDark ? "dark" : "light"];
+  const _colors = Colors[isDark ? "dark" : "light"];
 
-  const renderActions = (actions: SwipeAction[], progress: any, dragX: any, isRight: boolean) => {
+  const renderActions = (
+    actions: SwipeAction[],
+    _progress: unknown,
+    _dragX: unknown,
+    isRight: boolean,
+  ) => {
     if (actions.length === 0) return null;
 
     return (
-      <View style={[styles.actionsContainer, isRight ? styles.rightActions : styles.leftActions]}>
+      <View
+        style={[
+          styles.actionsContainer,
+          isRight ? styles.rightActions : styles.leftActions,
+          { borderRadius: 16, overflow: "hidden", marginVertical: 1 },
+        ]}
+      >
         {actions.map((action, index) => {
           const actionWidth = action.width || 75;
           return (
@@ -62,13 +79,17 @@ export const SwipeableRow: React.FC<SwipeableRowProps> = ({
       friction={2}
       leftThreshold={40}
       rightThreshold={40}
-      renderLeftActions={(progress, dragX) => renderActions(leftActions, progress, dragX, false)}
-      renderRightActions={(progress, dragX) => renderActions(rightActions, progress, dragX, true)}
+      renderLeftActions={(progress, dragX) =>
+        renderActions(leftActions, progress, dragX, false)
+      }
+      renderRightActions={(progress, dragX) =>
+        renderActions(rightActions, progress, dragX, true)
+      }
       onSwipeableOpen={onSwipeOpen}
       onSwipeableClose={onSwipeClose}
       containerStyle={containerStyle}
     >
-      <View style={{ backgroundColor: colors.base100 }}>
+      <View style={{ flex: 1, backgroundColor: "transparent" }}>
         {children}
       </View>
     </Swipeable>

package/templates/layers/react-native/base/src/components/ui/feedback/GestureWrapper.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { Gesture, GestureDetector, GestureType } from "react-native-gesture-handler";
+import {
+  Gesture,
+  GestureDetector,
+  GestureType,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
 import Animated, { runOnJS } from "react-native-reanimated";
 
 interface GestureWrapperProps {
@@ -12,9 +19,9 @@ interface GestureWrapperProps {
   onDoubleTap?: () => void;
   
   // Pan/Drag Gestures
-  onPanStart?: (e: any) => void;
-  onPanUpdate?: (e: any) => void;
-  onPanEnd?: (e: any) => void;
+  onPanStart?: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+  onPanUpdate?: (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+  onPanEnd?: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
 
   // Swipe Gestures
   onSwipeLeft?: () => void;

package/templates/layers/react-native/base/src/components/ui/inputs/DatePicker.tsx

@@ -4,7 +4,7 @@ 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 Drawer from "../Drawer";
 import Button from "../buttons/Button";
 import dayjs from "dayjs";
 
@@ -104,7 +104,7 @@ export default function DatePicker({
         <Ionicons name="calendar-outline" size={18} color={colors.primary} />
       </TouchableOpacity>
 
-      <BottomModal isOpen={isOpen} onClose={() => setIsOpen(false)} heightPercent={0.65}>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} position="bottom" sizePercent={0.65}>
         <View className="p-4 flex-1">
           <Txt variant="lg" className="font-bold text-center mb-4">
             {label}
@@ -180,7 +180,7 @@ export default function DatePicker({
             <Button label="Close" variant="outline" onPress={() => setIsOpen(false)} className="w-full" />
           </View>
         </View>
-      </BottomModal>
+      </Drawer>
     </View>
   );
 }

package/templates/layers/react-native/base/src/components/ui/inputs/ImagePickerModal.tsx

@@ -2,9 +2,10 @@ 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 Drawer from "@/components/ui/Drawer";
 import Button from "@/components/ui/buttons/Button";
 
+
 export type ImagePickerSource = "camera" | "gallery" | "both";
 
 export interface ImagePickerResult {
@@ -23,6 +24,7 @@ export interface ImagePickerModalProps {
   subtitle?: string;
   allowsEditing?: boolean;
   allowsMultipleSelection?: boolean;
+  aspectRatio?: [number, number];
 }
 
 export default function ImagePickerModal({
@@ -34,9 +36,9 @@ export default function ImagePickerModal({
   title = "Select Image Source",
   subtitle = "Choose where to pick your image from",
   allowsEditing = false,
+  aspectRatio = [1, 1],
   allowsMultipleSelection = false,
 }: ImagePickerModalProps) {
-
   const launchPicker = async (type: "gallery" | "camera") => {
     onClose();
 
@@ -51,10 +53,10 @@ export default function ImagePickerModal({
 
           result = await ImagePicker.launchImageLibraryAsync({
             mediaTypes: ["images"],
-            quality: 0.8,
+            quality: 0.6,
             allowsEditing: !allowsMultipleSelection && allowsEditing, // multi-select cannot have editing on some OS
             allowsMultipleSelection,
-            aspect: allowsEditing ? [16, 9] : undefined, // Assuming a common aspect ratio if cropped
+            aspect: allowsEditing ? aspectRatio : undefined, // Assuming a common aspect ratio if cropped
           });
         } else {
           const perm = await ImagePicker.requestCameraPermissionsAsync();
@@ -62,23 +64,47 @@ export default function ImagePickerModal({
 
           result = await ImagePicker.launchCameraAsync({
             mediaTypes: ["images"],
-            quality: 0.8,
+            quality: 0.6,
             allowsEditing,
-            aspect: allowsEditing ? [16, 9] : undefined,
+            aspect: allowsEditing ? aspectRatio : 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 (
+          result &&
+          !result.canceled &&
+          result.assets &&
+          result.assets.length > 0
+        ) {
+          const mappedAssets = await Promise.all(
+            result.assets.map(async (asset) => {
+              let finalUri = asset.uri;
+
+              // Resize image if it's too large to save bandwidth
+              if (asset.width > 1024 || asset.height > 1024) {
+                const resizeAction =
+                  asset.width > asset.height
+                    ? { resize: { width: 1024 } }
+                    : { resize: { height: 1024 } };
+
+                const manipResult = await ImageManipulator.manipulateAsync(
+                  asset.uri,
+                  [resizeAction],
+                  { compress: 0.7, format: ImageManipulator.SaveFormat.JPEG },
+                );
+                finalUri = manipResult.uri;
+              }
+
+              const filename = finalUri.split("/").pop() || "image.jpg";
+              const match = /\.(\w+)$/.exec(filename);
+              const mimeType = match ? `image/${match[1]}` : "image/jpeg";
+              return {
+                uri: finalUri,
+                name: filename,
+                type: mimeType,
+              };
+            }),
+          );
 
           if (allowsMultipleSelection && onImagesSelected) {
             onImagesSelected(mappedAssets);
@@ -93,7 +119,7 @@ export default function ImagePickerModal({
   };
 
   return (
-    <BottomModal isOpen={isOpen} onClose={onClose}>
+    <Drawer isOpen={isOpen} onClose={onClose} position="bottom">
       <View className="p-6">
         <Txt variant="lg" className="font-bold mb-1 text-center">
           {title}
@@ -124,6 +150,6 @@ export default function ImagePickerModal({
           )}
         </View>
       </View>
-    </BottomModal>
+    </Drawer>
   );
 }

package/templates/layers/react-native/base/src/components/ui/inputs/Input.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   View,
   TextInput,
@@ -16,11 +16,16 @@ export interface InputProps extends TextInputProps {
   leftIcon?: keyof typeof Ionicons.glyphMap;
   rightIcon?: keyof typeof Ionicons.glyphMap;
   onRightIconPress?: () => void;
+  placeHolder?: string;
+  style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
   helperText?: string;
   containerStyle?: import("react-native").StyleProp<
     import("react-native").ViewStyle
   >;
   labelOnBorder?: boolean;
+  className?: string;
+  weight?: "normal" | "medium" | "bold" | "semibold" | "black";
+  size?: "sm" | "md" | "lg";
 }
 
 export default function Input({
@@ -31,8 +36,12 @@ export default function Input({
   onRightIconPress,
   helperText,
   style,
+  placeHolder = "",
   containerStyle,
   labelOnBorder = false,
+  className = "mb-2",
+  weight = "normal",
+  size = "md",
   ...props
 }: InputProps) {
   const { colorScheme } = useColorScheme();
@@ -45,13 +54,22 @@ export default function Input({
       ? theme.primary
       : theme.base300;
 
+  const inputHeight = size === "sm" ? 40 : size === "lg" ? 64 : 52;
+  const inputFontSize = size === "sm" ? 14 : size === "lg" ? 18 : 16;
+  const iconSize = size === "sm" ? 16 : size === "lg" ? 24 : 20;
+  const labelSize = size === "sm" ? "xs" : size === "lg" ? "lg" : "base";
   return (
-    <View className="mb-4 relative">
+    <View
+      className={`${className} relative ${props.editable === false ? "opacity-50" : ""}`}
+    >
       {!labelOnBorder && label && (
         <Txt
           color={theme.baseContent}
-          weight="semibold"
           style={{ marginBottom: 6 }}
+          weight={weight}
+          variant={labelSize}
+          adjustsFontSizeToFit
+          numberOfLines={1}
         >
           {label} {error ? "*" : ""}{" "}
         </Txt>
@@ -63,7 +81,7 @@ export default function Input({
             position: "absolute",
             top: -6,
             left: 12,
-            backgroundColor: theme.base100,
+            backgroundColor: theme.base200,
             paddingHorizontal: 6,
             zIndex: 10,
           }}
@@ -85,12 +103,12 @@ export default function Input({
           {
             flexDirection: "row",
             alignItems: "center",
-            backgroundColor: theme.base100,
+            backgroundColor: theme.base200,
             borderWidth: 1,
             borderColor,
             borderRadius: 12,
             paddingHorizontal: 12,
-            height: 52,
+            height: inputHeight,
           },
           containerStyle,
         ]}
@@ -98,7 +116,7 @@ export default function Input({
         {leftIcon && (
           <Ionicons
             name={leftIcon}
-            size={20}
+            size={iconSize}
             color={isFocused ? theme.primary : theme.secondary}
             style={{ marginRight: 8 }}
           />
@@ -109,12 +127,13 @@ export default function Input({
             {
               flex: 1,
               color: theme.baseContent,
-              fontSize: 16,
+              fontSize: inputFontSize,
               height: "100%",
             },
             style,
           ]}
           placeholderTextColor={theme.secondary}
+          placeholder={placeHolder}
           onFocus={(e) => {
             setIsFocused(true);
             props.onFocus?.(e);
@@ -133,7 +152,7 @@ export default function Input({
           >
             <Ionicons
               name={rightIcon}
-              size={20}
+              size={iconSize}
               color={theme.secondary}
               style={{ marginLeft: 8 }}
             />