feat: add clear icon styles and functionality for input and textarea components

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

@@ -41,6 +41,63 @@
     pointer-events: none;
   }
 
+  /* =========================================
+     CLEAR ICON
+     Tombol (x) untuk reset value
+     ========================================= */
+  .rc-input-clear-icon {
+    /* Reset Button Styles */
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+
+    /* Layout & Sizing */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm); /* ~12px sesuai global */
+    line-height: 1;
+    cursor: pointer;
+
+    /* Colors & Transition */
+    color: var(--color-gray-400); /* Warna default (abu muda) */
+    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: visible;
+  }
+
+  /* Hover State: Lebih gelap agar user tahu bisa diklik */
+  .rc-input-clear-icon:hover {
+    color: var(--color-gray-500);
+  }
+
+  /* Active/Click State */
+  .rc-input-clear-icon:active {
+    color: var(--color-gray-600);
+  }
+
+  /* Hidden State */
+  .rc-input-clear-icon-hidden {
+    display: none;
+    /* Alternatif jika ingin layout tetap terjaga tapi 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:
+  */
+  .rc-input-affix-wrapper .rc-input-clear-icon {
+    margin-left: 0.5rem; /* ~8px spacing dari text */
+    z-index: 2; /* Pastikan di atas layer lain */
+  }
+
   /* =========================================
      AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
      ========================================= */