feat: add form components with styles for input, textarea, and input number

- Introduced new styles for form components including input, textarea, and input number.
- Created a new TextArea component with status and variant support.
- Updated global styles to include form variables and component styles.
- Added type definitions for form components to ensure consistency.
- Integrated new components into the main component index for easy access.

packages/ui/src/globals.css

@@ -1,6 +1,9 @@
 @import 'tailwindcss';
 @source "../src";
 
+/* Vendor overrides */
+@import './components/forms/styles/form.style.css';
+
 /* =========================================
    BASE STYLES & RESETS
    Ensures consistent typography and form styling
@@ -66,20 +69,29 @@
      3. SEMANTIC COLORS (Status Indicators)
      Professional colors for business contexts (errors, success, warnings)
      ========================================= */
-  --color-red-50: #fff5f5;
-  --color-red-100: #ffe3e3;
-  --color-red-500: #d93025; /* Negative status / Error messages */
-  --color-red-600: #b91c1c;
+  /* Error - Rose/Ruby Soft Palette */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-500: #ef4444; /* Standard Modern Red */
+  --color-error-600: #dc2626;
 
-  --color-green-50: #f6ffed;
-  --color-green-100: #d9f7be;
-  --color-green-500: #237804; /* Positive status / Success messages */
-  --color-green-600: #135200;
+  /* Success - Emerald/Mint Soft Palette */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-500: #22c55e; /* Modern Green, more vibrant but clean */
+  --color-success-600: #16a34a;
 
-  --color-amber-50: #fffbe6;
-  --color-amber-100: #fff1b8;
-  --color-amber-500: #faad14; /* Critical / Warning notifications */
-  --color-amber-600: #d48806;
+  /* Warning - Amber/Honey Soft Palette */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-500: #f59e0b; /* Warm Amber, less "harsh" than pure orange */
+  --color-warning-600: #d97706;
+
+  /* Info - Sky/Azure Soft Palette (Optional for ERP) */
+  --color-info-50: #f0f9ff;
+  --color-info-100: #e0f2fe;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #0284c7;
 
   /* =========================================
      4. TYPOGRAPHY (Base font size: 13px)
@@ -122,4 +134,25 @@
   --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  /* =========================================
+     FORM VARIABLES (Compact ERP Settings)
+     ========================================= */
+  --input-height: 34px; /* Compact height for ERP */
+  --input-radius: 6px; /* Modern slightly rounded */
+  --input-font-size: 14px;
+  --input-padding-x: 11px;
+  --input-handler-width: 22px;
+  --input-bg: #ffffff;
+  --input-border: #d1d5db; /* Slate-300 equivalent */
+  --input-border-hover: var(--color-brand-400);
+  --input-placeholder: #9ca3af; /* Slate-400 equivalent */
+  --input-text: #1f2937; /* Slate-800 equivalent */
+
+  --focus-ring-color: var(--color-brand-100);
+  --focus-border-color: var(--color-brand-500);
+
+  --disabled-bg: #f3f4f6;
+  --disabled-text: #9ca3af;
+  --disabled-border: #e5e7eb;
 }