feat: enhance form item component with status handling and styling for error/warning states

packages/ui/src/components/forms/styles/form-item.style.css

@@ -0,0 +1,61 @@
+@layer components {
+  /* Container Form Item */
+  .rc-form-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: var(--form-item-margin-bottom);
+  }
+
+  /* =========================
+     LABEL
+     ========================= */
+  .rc-form-item-label {
+    display: flex;
+    align-items: center;
+    font-size: var(--form-label-font-size);
+    font-weight: var(--form-label-font-weight);
+    color: var(--form-label-color);
+    margin-bottom: var(--form-label-margin-bottom);
+    line-height: 1.4;
+    transition: color 0.2s;
+  }
+
+  /* Required Asterisk (*) */
+  .rc-form-item-required-mark {
+    margin-left: 0.25rem;
+    color: var(--color-error-500);
+    font-family: SimSun, sans-serif; /* Standard font for asterisks agar vertical align bagus */
+  }
+
+  /* =========================
+     MESSAGE (ERROR / WARNING)
+     ========================= */
+  .rc-form-item-explain {
+    margin-top: var(--form-msg-margin-top);
+    font-size: var(--form-msg-font-size);
+    line-height: 1.4;
+    min-height: 1.4em; /* Mencegah layout jumping jika error muncul/hilang */
+    transition: color 0.2s;
+  }
+
+  /* =========================
+     STATUS MODIFIERS
+     ========================= */
+
+  /* --- ERROR STATE --- */
+  .rc-form-item.status-error .rc-form-item-label {
+    color: var(--color-error-600); /* Label jadi merah saat error (opsional UI pattern) */
+  }
+  .rc-form-item.status-error .rc-form-item-explain {
+    color: var(--color-error-500);
+  }
+
+  /* --- WARNING STATE --- */
+  .rc-form-item.status-warning .rc-form-item-label {
+    color: var(--color-warning-600);
+  }
+  .rc-form-item.status-warning .rc-form-item-explain {
+    color: var(--color-warning-500);
+  }
+}