fix

dekripsi:
- fix styles Select

components/Select/SelectCustom.tsx

@@ -1,15 +1,13 @@
 // components/Select.tsx
-import { MainColor } from "@/constants/color-palet";
-import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
 import React, { useState } from "react";
 import {
   FlatList,
   Modal,
   Pressable,
-  StyleSheet,
   Text,
   TouchableOpacity,
-  View,
+  View
 } from "react-native";
 
 type SelectItem = {
@@ -24,6 +22,7 @@ type SelectProps = {
   value?: string | number | null;
   required?: boolean; // <-- new prop
   onChange: (value: string | number) => void;
+  borderRadius?: number;
 };
 
 const SelectCustom: React.FC<SelectProps> = ({
@@ -33,6 +32,7 @@ const SelectCustom: React.FC<SelectProps> = ({
   value,
   required = false, // <-- default false
   onChange,
+  borderRadius = 8,
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -41,35 +41,41 @@ const SelectCustom: React.FC<SelectProps> = ({
   const hasError = required && value === null; // <-- check if empty and required
 
   return (
-    <View style={styles.container}>
+    <View style={GStyles.inputContainerArea}>
       {label && (
-        <Text style={styles.label}>
+        <Text style={GStyles.inputLabel}>
           {label}
-          {required && <Text style={styles.requiredIndicator}> *</Text>}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
         </Text>
       )}
       <Pressable
-        style={[styles.input, hasError ? styles.inputError : null]} // <-- add error style
+        style={[
+          { borderRadius },
+          GStyles.inputContainerInput,
+          hasError ? GStyles.inputErrorBorder : null,
+        ]} // <-- add error style
         onPress={() => setModalVisible(true)}
       >
-        <Text style={selectedItem ? styles.text : styles.placeholder}>
+        <Text
+          style={selectedItem ? GStyles.inputText : GStyles.inputPlaceholder}
+        >
           {selectedItem?.label || placeholder}
         </Text>
       </Pressable>
 
       <Modal visible={modalVisible} transparent animationType="fade">
         <TouchableOpacity
-          style={styles.modalOverlay}
+          style={GStyles.selectModalOverlay}
           activeOpacity={1}
           onPressOut={() => setModalVisible(false)}
         >
-          <View style={styles.modalContent}>
+          <View style={GStyles.selectModalContent}>
             <FlatList
               data={data}
               keyExtractor={(item) => String(item.value)}
               renderItem={({ item }) => (
                 <TouchableOpacity
-                  style={styles.option}
+                  style={GStyles.selectOption}
                   onPress={() => {
                     onChange(item.value);
                     setModalVisible(false);
@@ -85,68 +91,10 @@ const SelectCustom: React.FC<SelectProps> = ({
 
       {/* Optional Error Message */}
       {hasError && (
-        <Text style={styles.errorMessage}>Harap pilih salah satu</Text>
+        <Text style={GStyles.inputErrorMessage}>Harap pilih salah satu</Text>
       )}
     </View>
   );
 };
 
 export default SelectCustom;
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: TEXT_SIZE_MEDIUM,
-    marginBottom: 4,
-    color: MainColor.white_gray,
-    fontWeight: "500",
-  },
-  requiredIndicator: {
-    color: "red",
-    fontWeight: "bold",
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: MainColor.white_gray,
-    padding: 12,
-    borderRadius: 8,
-    minHeight: 48,
-    justifyContent: "center",
-    backgroundColor: MainColor.white,
-  },
-  inputError: {
-    borderColor: "red",
-  },
-  text: {
-    fontSize: TEXT_SIZE_MEDIUM,
-  },
-  placeholder: {
-    fontSize: TEXT_SIZE_MEDIUM,
-    color: MainColor.placeholder,
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.3)",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  modalContent: {
-    width: "80%",
-    maxHeight: 300,
-    backgroundColor: "white",
-    borderRadius: 8,
-    overflow: "hidden",
-  },
-  option: {
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: MainColor.white_gray,
-  },
-  errorMessage: {
-    marginTop: 4,
-    fontSize: 12,
-    color: "red",
-  },
-});

components/TextArea/TextAreaCustom.tsx

@@ -1,3 +1,4 @@
+import { GStyles } from "@/styles/global-styles";
 import React, { useEffect, useState } from "react";
 import {
     TextInput as RNTextInput,
@@ -6,7 +7,6 @@ import {
     View,
     ViewStyle,
 } from "react-native";
-import { GStyles } from "@/styles/global-styles";
 
 type IconType = React.ReactNode | string;
 
@@ -70,31 +70,31 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
   const renderIcon = (icon: IconType) => {
     if (!icon) return null;
     return typeof icon === "string" ? (
-      <Text style={GStyles.iconTextInput}>{icon}</Text>
+      <Text style={GStyles.inputIconText}>{icon}</Text>
     ) : (
       icon
     );
   };
 
   return (
-    <View style={GStyles.containerAreaInput}>
+    <View style={GStyles.inputContainerArea}>
       {label && (
-        <Text style={GStyles.labelInput}>
+        <Text style={GStyles.inputLabel}>
           {label}
-          {required && <Text style={GStyles.requiredInput}> *</Text>}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
         </Text>
       )}
       <View
         style={[
           GStyles.inputContainerInput,
-          disabled && GStyles.disabledInput,
-          hasError ? GStyles.errorBorderInput : {},
+          disabled && GStyles.inputDisabled,
+          hasError ? GStyles.inputErrorBorder : {},
           { borderRadius },
           style,
         ]}
       >
         {iconLeft && (
-          <View style={GStyles.iconInput}>{renderIcon(iconLeft)}</View>
+          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
         )}
 
         <RNTextInput
@@ -102,7 +102,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
           multiline
           numberOfLines={numberOfLines}
           style={[
-            GStyles.inputInput,
+            GStyles.inputText,
             GStyles.textAreaInput,
             { color: fontColor },
           ]}
@@ -113,7 +113,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
         />
 
         {iconRight && (
-          <View style={GStyles.iconInput}>{renderIcon(iconRight)}</View>
+          <View style={GStyles.inputIcon}>{renderIcon(iconRight)}</View>
         )}
       </View>
 
@@ -127,7 +127,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
         }}
       >
         {hasError ? (
-          <Text style={GStyles.errorMessageInput}>{error}</Text>
+          <Text style={GStyles.inputErrorMessage}>{error}</Text>
         ) : null}
 
         {showCount && maxLength ? (

components/TextInput/TextInputCustom.tsx

@@ -50,7 +50,7 @@ export const TextInputCustom = ({
   const renderIcon = (icon: IconType) => {
     if (!icon) return null;
     return typeof icon === "string" ? (
-      <Text style={GStyles.iconTextInput}>{icon}</Text>
+      <Text style={GStyles.inputIconText}>{icon}</Text>
     ) : (
       icon
     );
@@ -74,27 +74,27 @@ export const TextInputCustom = ({
   };
 
   return (
-    <View style={GStyles.containerAreaInput}>
+    <View style={GStyles.inputContainerArea}>
       {label && (
-        <Text style={GStyles.labelInput}>
+        <Text style={GStyles.inputLabel}>
           {label}
-          {required && <Text style={GStyles.requiredInput}> *</Text>}
+          {required && <Text style={GStyles.inputRequired}> *</Text>}
         </Text>
       )}
       <View
         style={[
           GStyles.inputContainerInput,
-          disabled && GStyles.disabledInput,
+          disabled && GStyles.inputDisabled,
           { borderRadius },
-          externalError || internalError ? GStyles.errorBorderInput : null,
+          externalError || internalError ? GStyles.inputErrorBorder : null,
           style,
         ]}
       >
         {iconLeft && (
-          <View style={GStyles.iconInput}>{renderIcon(iconLeft)}</View>
+          <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
         )}
         <RNTextInput
-          style={[GStyles.inputInput, { color: fontColor }]}
+          style={[GStyles.inputText, { color: fontColor }]}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           keyboardType={keyboardType}
@@ -105,7 +105,7 @@ export const TextInputCustom = ({
         {secureTextEntry && (
           <TouchableOpacity
             onPress={() => setIsPasswordVisible((prev) => !prev)}
-            style={GStyles.iconInput}
+            style={GStyles.inputIcon}
           >
             <Ionicons
               name={isPasswordVisible ? "eye-off" : "eye"}
@@ -115,12 +115,12 @@ export const TextInputCustom = ({
           </TouchableOpacity>
         )}
         {iconRight && (
-          <View style={GStyles.iconInput}>{renderIcon(iconRight)}</View>
+          <View style={GStyles.inputIcon}>{renderIcon(iconRight)}</View>
         )}
       </View>
       {/* Prioritaskan error eksternal */}
       {externalError || internalError ? (
-        <Text style={GStyles.errorMessageInput}>
+        <Text style={GStyles.inputErrorMessage}>
           {externalError || internalError}
         </Text>
       ) : null}