feat: Add detailed documentation and improve styling for form components

packages/ui/src/components/forms/styles/input.style.css

@@ -3,15 +3,15 @@
      BASE RESET & SHARED
      ========================================= */
   .rc-input {
-    /* Wajib border-box agar padding tidak merusak lebar */
+    /* Use box-sizing border-box for predictable sizing */
     box-sizing: border-box;
 
     display: inline-block;
     width: 100%;
 
-    /* Menggunakan Variable Dimensi Input */
+    /* Using variable dimensions */
     height: var(--input-height);
-    padding: 0 var(--input-padding-x); /* Konsisten dengan 0.92rem */
+    padding: 0 var(--input-padding-x); /* Consistent with 0.92rem */
 
     font-size: var(--input-font-size);
     line-height: 1.5;
@@ -21,7 +21,7 @@
     border: 1px solid transparent;
     border-radius: var(--input-radius);
 
-    /* Transisi standar */
+    /* Standard Transition */
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none;
   }
@@ -43,7 +43,7 @@
 
   /* =========================================
      CLEAR ICON
-     Tombol (x) untuk reset value
+     Button (x) to clear input content
      ========================================= */
   .rc-input-clear-icon {
     /* Reset Button Styles */
@@ -57,20 +57,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--text-sm); /* ~12px sesuai global */
+    font-size: var(--text-sm); /* ~12px icon size */
     line-height: 1;
     cursor: pointer;
 
     /* Colors & Transition */
-    color: var(--color-gray-400); /* Warna default (abu muda) */
+    color: var(--color-gray-400); /* Default gray color */
     transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
-    /* Visibility Control (Opacity lebih smooth dari display:none jika mau animasi) */
-    /* Tapi untuk simplicity sesuai request, kita pakai logic display/visibility standar */
+    /* Visibility Control ( Smooth appearance/disappearance could use opacity + pointer-events )
+    /* visibility: hidden; */
     visibility: visible;
   }
 
-  /* Hover State: Lebih gelap agar user tahu bisa diklik */
+  /* Hover State: Darker Gray */
   .rc-input-clear-icon:hover {
     color: var(--color-gray-500);
   }
@@ -83,19 +83,16 @@
   /* Hidden State */
   .rc-input-clear-icon-hidden {
     display: none;
-    /* Alternatif jika ingin layout tetap terjaga tapi invisible:
+    /*  Alternative approach to keep layout but invisible:
        visibility: hidden;
        pointer-events: none;
     */
   }
 
-  /* Placement Helper:
-     Biasanya clear icon muncul di dalam suffix atau menggantikan suffix.
-     Jika dia berdiri sendiri sebagai sibling terakhir:
-  */
+  /* Placement Helper: Margin to separate from input text */
   .rc-input-affix-wrapper .rc-input-clear-icon {
-    margin-left: 0.5rem; /* ~8px spacing dari text */
-    z-index: 2; /* Pastikan di atas layer lain */
+    margin-left: 0.5rem; /* ~8px spacing from text */
+    z-index: 2; /* Above input text */
   }
 
   /* =========================================
@@ -109,7 +106,7 @@
     align-items: center;
     width: 100%;
 
-    /* Menggunakan Variable Dimensi Input */
+    /* Using variable dimensions */
     height: var(--input-height);
     padding: 0 var(--input-padding-x);
 
@@ -119,7 +116,7 @@
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  /* Reset Input di dalam Wrapper */
+  /* Reset Input inside Affix Wrapper */
   .rc-input-affix-wrapper .rc-input {
     width: 100%;
     height: 100%;
@@ -133,7 +130,7 @@
 
   /* Prefix & Suffix Positioning */
   .rc-input-prefix {
-    margin-right: 0.5rem; /* ~8px, hardcoded ok atau bisa buat var baru */
+    margin-right: 0.5rem; /* ~8px, hardcoded */
     display: flex;
     align-items: center;
     flex: none;
@@ -260,7 +257,7 @@
     background-color: var(--color-error-50);
     border-color: var(--color-error-500);
   }
-  /* Saat focus, background jadi default input-bg (putih) */
+  /* When focused, background becomes default input-bg (white) */
   .input-variant-filled.input-status-error:focus,
   .input-variant-filled.input-status-error.rc-input-affix-wrapper-focused {
     background-color: var(--input-bg);