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

packages/ui/src/globals.css

@@ -35,23 +35,6 @@
   --radius-lg: 0.5rem; /* 8px */
   --radius-xl: 0.75rem; /* 12px */
 
-  /* -------------------------------
-     FORM DIMENSIONS (INPUT / TEXTAREA)
-     ------------------------------- */
-  --input-height: 2.6rem; /* ~34px */
-  --input-font-size: var(--text-base);
-  --input-padding-x: 0.92rem; /* ~12px */
-  --input-padding-y: 0.62rem; /* ~8px */
-  --input-radius: 0.375rem; /* 6px */
-
-  /* Input Number Specific */
-  --input-handler-width: 1.5rem; /* 24px (Agak diperlebar dikit agar clickable) */
-
-  /* Textarea Specific */
-  --textarea-min-height: 6.15rem; /* 80px */
-  --textarea-padding-x: 0.92rem; /* 12px */
-  --textarea-padding-y: 0.62rem; /* 8px */
-
   /* -------------------------------
      COLORS: PALETTE
      ------------------------------- */
@@ -101,8 +84,35 @@
   --color-info-600: #0284c7;
 
   /* -------------------------------
-     COLORS: COMPONENT MAPPING
+     FORM ITEM SPECIFICS
      ------------------------------- */
+  /* Form Item Spacing */
+  --form-item-margin-bottom: 1.25rem; /* 20px */
+
+  /* Label Configuration */
+  --form-label-font-size: var(--text-sm); /* Uses scale text-sm (~12px) */
+  --form-label-color: var(--color-gray-700);
+  --form-label-font-weight: var(--font-weight-medium);
+  --form-label-margin-bottom: 0.375rem; /* ~6px */
+
+  /* Error/Warning Message Configuration */
+  --form-msg-font-size: var(--text-xs); /* Uses scale text-xs (~11px) */
+  --form-msg-margin-top: 0.375rem; /* ~6px */
+
+  --input-height: 2.6rem; /* ~34px */
+  --input-font-size: var(--text-base);
+  --input-padding-x: 0.92rem; /* ~12px */
+  --input-padding-y: 0.62rem; /* ~8px */
+  --input-radius: 0.375rem; /* 6px */
+
+  /* Input Number Specific */
+  --input-handler-width: 1.5rem; /* 24px (Slightly wider for better clickable) */
+  /* Textarea Specific */
+  --textarea-min-height: 6.15rem; /* 80px */
+  --textarea-padding-x: 0.92rem; /* 12px */
+  --textarea-padding-y: 0.62rem; /* 8px */
+
+  /* Input Colors */
   --input-bg: #ffffff;
   --input-border: var(--color-gray-300);
   --input-border-hover: var(--color-brand-400);