From 1e1d46cbb51468e9db2c2c067ab308a02332cc8c Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Tue, 27 Jan 2026 19:47:06 +0700
Subject: [PATCH] feat: Refactor TextArea component and styles for improved
 usability and consistency

- Updated textarea styles to utilize CSS variables for dimensions and padding.
- Enhanced placeholder styling and added disabled state styles.
- Refactored TextArea component to use forwardRef and updated status handling.
- Changed input statuses from 'normal' to 'default' for better clarity.
- Introduced global decimal separator management in CurrencyService.
- Updated tests to cover new decimal separator functionality.
- Cleaned up global CSS for better organization and readability.
- Removed deprecated rc-component dependencies in favor of @rc-component packages.
---
 .../src/apps/modules/example/example.page.tsx |   2 +
 .../example/form-showcase/form-showcase.tsx   |  75 +++
 packages/ui/package.json                      |   8 +-
 .../form-provider/form-control.component.tsx  |   2 +-
 .../form-provider/form-item.component.tsx     |  16 +-
 .../components/forms/form-provider/index.tsx  |   9 +-
 .../forms/input/input-number.component.tsx    |  43 +-
 .../forms/input/input-password.component.tsx  |   2 +-
 .../forms/input/input.component.tsx           |  21 +-
 .../forms/styles/input-number.style.css       | 478 ++++++++++--------
 .../components/forms/styles/input.style.css   | 338 +++++++------
 .../forms/styles/textarea.style.css           | 131 +++--
 .../forms/textarea/textarea.component.tsx     |  15 +-
 .../ui/src/components/forms/types/index.ts    |  15 +-
 packages/ui/src/globals.css                   | 251 +++++----
 .../currency-service/currency-service.test.ts |  29 +-
 .../src/currency-service/currency-service.ts  |  19 +-
 pnpm-lock.yaml                                | 200 ++++----
 18 files changed, 942 insertions(+), 712 deletions(-)
 create mode 100644 apps/web/src/apps/modules/example/form-showcase/form-showcase.tsx

diff --git a/apps/web/src/apps/modules/example/example.page.tsx b/apps/web/src/apps/modules/example/example.page.tsx
index b5f4b3b..c213e97 100644
--- a/apps/web/src/apps/modules/example/example.page.tsx
+++ b/apps/web/src/apps/modules/example/example.page.tsx
@@ -1,9 +1,11 @@
+import FormShowcase from './form-showcase/form-showcase';
 import InputShowCase from './input-showcase';
 
 export default function ExamplePage() {
   return (
     <div>
       <InputShowCase />
+      <FormShowcase />
     </div>
   );
 }
diff --git a/apps/web/src/apps/modules/example/form-showcase/form-showcase.tsx b/apps/web/src/apps/modules/example/form-showcase/form-showcase.tsx
new file mode 100644
index 0000000..2e42290
--- /dev/null
+++ b/apps/web/src/apps/modules/example/form-showcase/form-showcase.tsx
@@ -0,0 +1,75 @@
+import { Form, Input, InputPassword } from '@repo/ui';
+import React from 'react';
+// --- 2. Main Showcase Component ---
+export default function FormShowcase() {
+  const [form] = Form.useForm();
+
+  const handleFinish = (values: any) => {
+    console.log('Success - Form Values:', values);
+    alert(JSON.stringify(values, null, 2));
+  };
+
+  const handleFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200">
+      <h2 className="text-xl font-bold mb-6 text-gray-800">Test Migrasi @rc-component/form</h2>
+
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        onFinishFailed={handleFinishFailed}
+        initialValues={{ role: 'user', agree: false }}
+      >
+        {/* Case 1: Text Input Biasa + Validasi Required */}
+        <Form.Item name="username" label="Username" rules={[{ required: true, message: 'Username wajib diisi!' }]}>
+          <Input placeholder="Masukkan username" />
+        </Form.Item>
+
+        {/* Case 2: Email + Validasi Format */}
+        <Form.Item
+          name="email"
+          label="Email"
+          rules={[
+            { required: true, message: 'Email wajib diisi!' },
+            { type: 'email', message: 'Format email tidak valid!' },
+          ]}
+        >
+          <Input type="email" placeholder="contoh@email.com" />
+        </Form.Item>
+
+        {/* Case 3: Password + Validasi Panjang */}
+        <Form.Item
+          name="password"
+          label="Password"
+          rules={[
+            { required: true, message: 'Password wajib diisi!' },
+            { min: 6, message: 'Password minimal 6 karakter!' },
+          ]}
+        >
+          <InputPassword placeholder="Masukkan password" />
+        </Form.Item>
+
+        {/* Tombol Aksi */}
+        <div className="flex gap-3 mt-6">
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 font-medium transition"
+          >
+            Submit
+          </button>
+
+          <button
+            type="button"
+            onClick={() => form.resetFields()}
+            className="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 font-medium transition"
+          >
+            Reset
+          </button>
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b9d1503..95440eb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,12 +12,12 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
+    "@rc-component/form": "^1.6.2",
+    "@rc-component/input": "^1.1.2",
+    "@rc-component/input-number": "^1.6.2",
+    "@rc-component/textarea": "^1.1.2",
     "@repo/utils": "workspace:*",
     "@tailwindcss/vite": "^4.1.18",
-    "rc-field-form": "^2.7.1",
-    "rc-input": "^1.8.0",
-    "rc-input-number": "^9.5.0",
-    "rc-textarea": "^1.10.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwind-merge": "^3.4.0",
diff --git a/packages/ui/src/components/forms/form-provider/form-control.component.tsx b/packages/ui/src/components/forms/form-provider/form-control.component.tsx
index 19caa90..f83fa88 100644
--- a/packages/ui/src/components/forms/form-provider/form-control.component.tsx
+++ b/packages/ui/src/components/forms/form-provider/form-control.component.tsx
@@ -1,4 +1,4 @@
-import RcForm from 'rc-field-form';
+import RcForm from '@rc-component/form';
 import { FormProps } from '../types';
 
 export default function FormControl<Values = any>({ children, ...props }: FormProps<Values>) {
diff --git a/packages/ui/src/components/forms/form-provider/form-item.component.tsx b/packages/ui/src/components/forms/form-provider/form-item.component.tsx
index 67bfc96..278d8c7 100644
--- a/packages/ui/src/components/forms/form-provider/form-item.component.tsx
+++ b/packages/ui/src/components/forms/form-provider/form-item.component.tsx
@@ -1,5 +1,6 @@
+// form-item.component.tsx
 import React, { ReactElement } from 'react';
-import { Field } from 'rc-field-form';
+import { Field } from '@rc-component/form';
 import { FormItemProps } from '../types';
 
 export default function FormItem(props: FormItemProps) {
@@ -8,23 +9,28 @@ export default function FormItem(props: FormItemProps) {
   return (
     <Field name={name} rules={rules} valuePropName={valuePropName} initialValue={initialValue}>
       {(control, meta) => {
-        const hasError = meta.errors.length > 0;
-        const hasWarning = meta.warnings.length > 0;
+        // Defensive check: tambahkan ?. untuk keamanan di versi baru
+        const hasError = meta.errors && meta.errors.length > 0;
+        const hasWarning = meta.warnings && meta.warnings.length > 0;
 
         const status = OverrideStatus ?? (hasError ? 'error' : hasWarning ? 'warning' : 'normal');
 
         const isValid = React.isValidElement(children);
         const childElement = isValid ? (children as ReactElement<{ status?: any }>) : null;
 
-        // 3. Clone the child element to inject form control props and status
+        // Clone element logic tetap dipertahankan
         const childNode = childElement ? React.cloneElement(childElement, { ...control, status }) : children;
 
+        // Logic pengecekan 'required' pada rules
+        // Note: Pastikan rule object memiliki properti 'required', karena Rule juga bisa berupa function.
+        const isRequired = rules?.some((r: any) => r && typeof r === 'object' && r.required);
+
         return (
           <div className="flex flex-col mb-4 w-full">
             {label && (
               <label className={`mb-1.5 text-sm font-medium ${hasError ? 'text-red-500' : 'text-gray-700'}`}>
                 {label}
-                {rules?.some((r: any) => r.required) && <span className="ml-1 text-red-500">*</span>}
+                {isRequired && <span className="ml-1 text-red-500">*</span>}
               </label>
             )}
 
diff --git a/packages/ui/src/components/forms/form-provider/index.tsx b/packages/ui/src/components/forms/form-provider/index.tsx
index e4ac44e..6b9124d 100644
--- a/packages/ui/src/components/forms/form-provider/index.tsx
+++ b/packages/ui/src/components/forms/form-provider/index.tsx
@@ -1,5 +1,6 @@
+// index.ts
 import React from 'react';
-import { useForm, List, FieldContext } from 'rc-field-form';
+import { useForm, List, FieldContext } from '@rc-component/form';
 import { FormProps } from '../types';
 
 import FormControl from './form-control.component';
@@ -12,10 +13,6 @@ const FormProvider = React.forwardRef(FormControl) as <Values extends object = a
   props: FormProps<Values> & { ref?: React.ForwardedRef<any> },
 ) => React.ReactElement;
 
-/**
- * Compound Component Pattern
- * Centralizes all form-related components and hooks under the 'Form' namespace
- */
 type CompoundedComponent = typeof FormProvider & {
   Item: typeof FormItem;
   useForm: typeof useForm;
@@ -23,7 +20,7 @@ type CompoundedComponent = typeof FormProvider & {
   Provider: typeof FieldContext.Provider;
 };
 
-// Assign sub-components and utilities to the main Form component
+// Assign sub-components and utilities
 const Form = FormProvider as CompoundedComponent;
 Form.Item = FormItem;
 Form.useForm = useForm;
diff --git a/packages/ui/src/components/forms/input/input-number.component.tsx b/packages/ui/src/components/forms/input/input-number.component.tsx
index 42c0276..9a242b4 100644
--- a/packages/ui/src/components/forms/input/input-number.component.tsx
+++ b/packages/ui/src/components/forms/input/input-number.component.tsx
@@ -1,26 +1,43 @@
-import RcInputNumber from 'rc-input-number';
+import { forwardRef } from 'react';
+import RcInputNumber from '@rc-component/input-number';
 import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
 
 // Handler Icons (Chevron Modern)
+// Kita bungkus dengan span agar styling flexbox lebih mudah diatur nanti
 const UpIcon = () => (
-  <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
-    <path d="M8.5 6.5L12 10 5 10z" />
-  </svg>
-);
-const DownIcon = () => (
-  <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
-    <path d="M8.5 9.5L5 6 12 6z" />
-  </svg>
+  <span className="input-number-handler-up-inner flex items-center justify-center w-full h-full">
+    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
+      <path d="M8.5 6.5L12 10 5 10z" />
+    </svg>
+  </span>
 );
 
-export const InputNumber = (props: InputNumberProps) => {
+const DownIcon = () => (
+  <span className="input-number-handler-down-inner flex items-center justify-center w-full h-full">
+    <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
+      <path d="M8.5 9.5L5 6 12 6z" />
+    </svg>
+  </span>
+);
+
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
   const { status, className, variant = 'outlined', ...restProps } = props;
-  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
+
   const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
     .filter(Boolean)
     .join(' ');
 
   return (
-    <RcInputNumber {...restProps} className={computedClassName} upHandler={<UpIcon />} downHandler={<DownIcon />} />
+    <RcInputNumber
+      ref={ref}
+      {...restProps}
+      className={computedClassName}
+      upHandler={<UpIcon />}
+      downHandler={<DownIcon />}
+    />
   );
-};
+});
+
+InputNumber.displayName = 'InputNumber';
diff --git a/packages/ui/src/components/forms/input/input-password.component.tsx b/packages/ui/src/components/forms/input/input-password.component.tsx
index f396d62..7411982 100644
--- a/packages/ui/src/components/forms/input/input-password.component.tsx
+++ b/packages/ui/src/components/forms/input/input-password.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { InputPasswordProps } from '../types';
 import { Input } from './input.component';
 
diff --git a/packages/ui/src/components/forms/input/input.component.tsx b/packages/ui/src/components/forms/input/input.component.tsx
index c9b127b..c83f06a 100644
--- a/packages/ui/src/components/forms/input/input.component.tsx
+++ b/packages/ui/src/components/forms/input/input.component.tsx
@@ -1,17 +1,26 @@
-import RcInput from 'rc-input';
+import { forwardRef } from 'react';
+import RcInput, { InputRef, InputProps as RcInputProps } from '@rc-component/input';
 import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
 
-export const Input = (props: InputProps) => {
+export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const { status, className, variant = 'outlined', disabled, ...restProps } = props;
-  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+
+  // Validasi status agar aman
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
+
+  // Construct classname
+  // Note: class 'rc-input-disabled' biasanya otomatis ditambahkan oleh library jika disabled={true}
   const computedClassName = [
     className,
     `input-status-${currentStatus}`,
     `input-variant-${variant}`,
-    disabled ? 'rc-input-affix-wrapper-disabled' : '',
+    // Kita tambahkan class helper ini manual jika ingin styling spesifik wrapper saat disabled
+    disabled ? 'input-disabled' : '',
   ]
     .filter(Boolean)
     .join(' ');
 
-  return <RcInput {...restProps} className={computedClassName} disabled={disabled} />;
-};
+  return <RcInput ref={ref} {...restProps} disabled={disabled} className={computedClassName} />;
+});
+
+Input.displayName = 'Input';
diff --git a/packages/ui/src/components/forms/styles/input-number.style.css b/packages/ui/src/components/forms/styles/input-number.style.css
index 15dfa86..31818f2 100644
--- a/packages/ui/src/components/forms/styles/input-number.style.css
+++ b/packages/ui/src/components/forms/styles/input-number.style.css
@@ -1,285 +1,367 @@
 @layer components {
-  :root {
-    --suffix-spacing: 12px;
-    --input-height: 32px;
-    --input-radius: 6px; /* Sesuai radius-base */
-    --input-padding-x: 11px;
-    --input-handler-width: 22px;
-  }
-
   /* =========================================
-     1. LAYOUT & GEOMETRY (DO NOT TOUCH)
+     1. BASE SETUP (Layout & Reset)
      ========================================= */
-
-  /* CONTAINER UTAMA */
-  .rc-input-number,
-  .rc-input-number-affix-wrapper {
-    @apply relative flex w-full items-center m-0 transition-all duration-200 ease-in-out text-sm bg-white;
-    height: var(--input-height);
-    line-height: 1.5715;
-    border-radius: var(--input-radius);
-    border: 1px solid transparent;
-  }
-
-  /* NESTED RESET (Fix Flexbox) */
-  .rc-input-number-affix-wrapper .rc-input-number {
-    @apply border-none shadow-none bg-transparent p-0 h-full static;
+  .rc-input-number {
+    box-sizing: border-box;
+    position: relative;
     display: flex;
-    flex: 1;
-    min-width: 0;
+    align-items: center;
+    width: 100%;
+
+    /* Global Variables */
+    height: var(--input-height);
+    font-size: var(--input-font-size);
+    border-radius: var(--input-radius);
+    line-height: 1.5;
+    color: var(--input-text);
+
+    background-color: var(--input-bg);
+    border: 1px solid transparent;
+
+    /* Transisi standar */
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    margin: 0;
+    padding: 0;
   }
 
-  /* INPUT FIELD */
+  /* Input Element */
   .rc-input-number-input {
-    @apply w-full h-full bg-transparent border-none outline-none text-gray-900;
+    width: 100%;
+    height: 100%;
     padding: 0 var(--input-padding-x);
-    appearance: textfield;
-  }
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--input-radius);
+    outline: 0;
+    color: inherit; /* Mewarisi dari parent */
+    transition: all 0.2s linear;
 
-  /* Input Wrapper Helper */
-  .rc-input-number-input-wrap {
-    @apply w-full h-full;
-  }
-
-  /* Padding Kanan Input (jika tanpa suffix wrapper) */
-  .rc-input-number:not(.rc-input-number-affix-wrapper) .rc-input-number-input {
+    /* Padding Kanan Wajib (Space untuk Actions) */
     padding-right: var(--input-handler-width);
   }
 
-  /* PREFIX & SUFFIX */
-  .rc-input-number-prefix {
-    @apply flex items-center ml-3 text-gray-500 z-10;
+  /* Hide Native Spinners (Browser Default) */
+  .rc-input-number-input::-webkit-inner-spin-button,
+  .rc-input-number-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+    display: none;
+  }
+  .rc-input-number-input {
+    -moz-appearance: textfield;
   }
 
+  /* Prefix Styling */
+  .rc-input-number-prefix {
+    margin-left: var(--input-padding-x);
+    margin-right: 0.5rem; /* ~8px */
+    display: flex;
+    align-items: center;
+    flex: none;
+    color: var(--color-gray-500);
+  }
+
+  /* Suffix Styling */
   .rc-input-number-suffix {
-    @apply flex items-center text-gray-500 z-10;
-    margin-right: var(--suffix-spacing);
+    margin-right: var(--input-padding-x);
+    display: flex;
+    align-items: center;
+    flex: none;
+    color: var(--color-gray-500);
+    z-index: 10;
     transition: margin-right 0.2s ease-in-out;
   }
 
-  /* Animation Trigger */
+  /* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
   .rc-input-number:hover .rc-input-number-suffix,
   .rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
   .rc-input-number-focused .rc-input-number-suffix,
   .rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
   .rc-input-number:focus-within .rc-input-number-suffix,
   .rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
-    margin-right: calc(var(--suffix-spacing) + var(--input-handler-width));
+    margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
   }
 
-  /* HANDLER WRAPPER */
-  .rc-input-number-handler-wrap {
+  /* =========================================
+     2. ACTIONS CONTAINER (Custom Spinners)
+     Target: .rc-input-number-actions
+     ========================================= */
+  .rc-input-number-actions {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
+
     width: var(--input-handler-width);
-    @apply flex flex-col border-l border-gray-200 bg-white opacity-0 transition-opacity duration-200 overflow-hidden z-20;
-    border-top-right-radius: var(--input-radius);
-    border-bottom-right-radius: var(--input-radius);
+    height: 100%;
+
+    /* Menggunakan var input-bg agar konsisten (putih) */
+    background: var(--input-bg);
+
+    /* Default Border (akan di-override status) */
+    border-left: 1px solid var(--input-border);
+    border-radius: 0 var(--input-radius) var(--input-radius) 0;
+
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.24s linear 0.1s;
+    z-index: 10;
+
+    display: flex;
+    flex-direction: column;
   }
 
-  /* Show handlers logic */
-  .rc-input-number:hover .rc-input-number-handler-wrap,
-  .rc-input-number-affix-wrapper:hover .rc-input-number-handler-wrap,
-  .rc-input-number-focused .rc-input-number-handler-wrap,
-  .rc-input-number-affix-wrapper-focused .rc-input-number-handler-wrap,
-  .rc-input-number:focus-within .rc-input-number-handler-wrap,
-  .rc-input-number-affix-wrapper:focus-within .rc-input-number-handler-wrap {
-    @apply opacity-100;
+  /* Show Actions on Interaction */
+  .rc-input-number:hover .rc-input-number-actions,
+  .rc-input-number:focus-within .rc-input-number-actions {
+    opacity: 1;
+    pointer-events: auto;
   }
 
-  .rc-input-number-handler {
-    @apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
+  /* Individual Buttons */
+  .rc-input-number-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    overflow: hidden;
+    color: var(--color-gray-400);
+    cursor: pointer;
+    transition: all 0.2s linear;
   }
-  .rc-input-number-handler:hover {
-    @apply text-brand-600 bg-gray-50;
-    height: 60%;
+
+  .rc-input-number-action:active {
+    background-color: var(--color-gray-100);
   }
-  .rc-input-number-handler:active {
-    @apply bg-gray-100;
+
+  .rc-input-number-action:hover {
+    color: var(--color-brand-500);
+    height: 60%; /* Efek hover button membesar dikit */
   }
-  .rc-input-number-handler-up {
-    @apply border-b border-gray-200;
+
+  /* Border Bawah untuk Action UP */
+  .rc-input-number-action-up {
+    border-bottom: 1px solid var(--input-border);
   }
 
   /* =========================================
-     2. SKINS, VARIANTS & STATUS 
-     (Matching your Input Text Logic)
+     3. STATUS MATRIX (VARIANT: OUTLINED)
      ========================================= */
 
-  /* --- COMMON FOCUS STYLE (Brand Color) --- */
-  /* Default focus for Normal status */
-  .input-number-status-normal.rc-input-number-focused,
-  .input-number-status-normal.rc-input-number-affix-wrapper-focused,
-  .input-number-status-normal:focus-within {
-    border-color: var(--color-brand-500) !important;
-    box-shadow: 0 0 0 3px var(--color-brand-100) !important; /* Brand 200/100 for ring */
-    background-color: #fff !important;
+  /* --- DEFAULT --- */
+  .input-number-variant-outlined.input-number-status-default {
+    border-color: var(--input-border);
+  }
+  .input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
+    border-color: var(--input-border-hover);
+  }
+  .input-number-variant-outlined.input-number-status-default:focus-within {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
+  }
+  /* Action Borders Sync */
+  .input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
+    border-left-color: var(--focus-border-color);
+  }
+  .input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
+    border-bottom-color: var(--focus-border-color);
   }
 
-  /* ====================
-     VARIANT: OUTLINED
-     ==================== */
-
-  /* Normal */
-  .input-number-variant-outlined.input-number-status-normal {
-    @apply border-gray-300;
-  }
-  .input-number-variant-outlined.input-number-status-normal:hover {
-    @apply border-brand-400; /* Atau var(--input-border-hover) */
-  }
-
-  /* Error (Outlined) */
+  /* --- ERROR --- */
   .input-number-variant-outlined.input-number-status-error {
-    border-color: var(--color-error-500) !important;
+    border-color: var(--color-error-500);
   }
-  .input-number-variant-outlined.input-number-status-error:focus-within,
-  .input-number-variant-outlined.input-number-status-error.rc-input-number-focused,
-  .input-number-variant-outlined.input-number-status-error.rc-input-number-affix-wrapper-focused {
-    box-shadow: 0 0 0 3px var(--color-error-100) !important;
-    border-color: var(--color-error-500) !important;
+  .input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
+    border-color: var(--color-error-600);
+  }
+  .input-number-variant-outlined.input-number-status-error:focus-within {
+    border-color: var(--color-error-600);
+    box-shadow: 0 0 0 3px var(--color-error-100);
+  }
+  /* Action Borders Sync */
+  .input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
+    border-left-color: var(--color-error-500);
+  }
+  .input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
+    border-bottom-color: var(--color-error-500);
   }
 
-  /* Warning (Outlined) */
+  /* --- WARNING --- */
   .input-number-variant-outlined.input-number-status-warning {
-    border-color: var(--color-warning-500) !important;
+    border-color: var(--color-warning-500);
   }
-  .input-number-variant-outlined.input-number-status-warning:focus-within,
-  .input-number-variant-outlined.input-number-status-warning.rc-input-number-focused,
-  .input-number-variant-outlined.input-number-status-warning.rc-input-number-affix-wrapper-focused {
-    box-shadow: 0 0 0 3px var(--color-warning-100) !important;
-    border-color: var(--color-warning-500) !important;
+  .input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
+    border-color: var(--color-warning-600);
+  }
+  .input-number-variant-outlined.input-number-status-warning:focus-within {
+    border-color: var(--color-warning-600);
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+  /* Action Borders Sync */
+  .input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
+    border-left-color: var(--color-warning-500);
+  }
+  .input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
+    border-bottom-color: var(--color-warning-500);
   }
 
-  /* Success (Outlined) */
+  /* --- SUCCESS --- */
   .input-number-variant-outlined.input-number-status-success {
-    border-color: var(--color-success-500) !important;
+    border-color: var(--color-success-500);
   }
-  .input-number-variant-outlined.input-number-status-success:focus-within,
-  .input-number-variant-outlined.input-number-status-success.rc-input-number-focused,
-  .input-number-variant-outlined.input-number-status-success.rc-input-number-affix-wrapper-focused {
-    box-shadow: 0 0 0 3px var(--color-success-100) !important;
-    border-color: var(--color-success-500) !important;
+  .input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
+    border-color: var(--color-success-600);
+  }
+  .input-number-variant-outlined.input-number-status-success:focus-within {
+    border-color: var(--color-success-600);
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
+  /* Action Borders Sync */
+  .input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
+    border-left-color: var(--color-success-500);
+  }
+  .input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
+    border-bottom-color: var(--color-success-500);
   }
 
-  /* Info (Outlined) */
+  /* --- INFO --- */
   .input-number-variant-outlined.input-number-status-info {
-    border-color: var(--color-info-500) !important;
+    border-color: var(--color-info-500);
   }
-  .input-number-variant-outlined.input-number-status-info:focus-within,
-  .input-number-variant-outlined.input-number-status-info.rc-input-number-focused,
-  .input-number-variant-outlined.input-number-status-info.rc-input-number-affix-wrapper-focused {
-    box-shadow: 0 0 0 3px var(--color-info-100) !important;
-    border-color: var(--color-info-500) !important;
+  .input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
+    border-color: var(--color-info-600);
+  }
+  .input-number-variant-outlined.input-number-status-info:focus-within {
+    border-color: var(--color-info-600);
+    box-shadow: 0 0 0 3px var(--color-info-100);
+  }
+  /* Action Borders Sync */
+  .input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
+    border-left-color: var(--color-info-500);
+  }
+  .input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
+    border-bottom-color: var(--color-info-500);
   }
 
-  /* ====================
-     VARIANT: FILLED
-     ==================== */
+  /* =========================================
+     4. STATUS MATRIX (VARIANT: FILLED)
+     ========================================= */
 
-  /* Normal Filled */
-  .input-number-variant-filled.input-number-status-normal {
-    /* Gunakan gray-100 atau var(--input-bg) jika gray */
-    /* @apply border-transparent bg-gray-100;  */
-    @apply border-gray-300;
+  /* --- NORMAL FILLED --- */
+  .input-number-variant-filled.input-number-status-default {
+    background-color: var(--input-bg);
+    border-color: var(--input-border);
   }
-  .input-number-variant-filled.input-number-status-normal:hover {
-    /* @apply bg-gray-200; */
-    @apply border-brand-400; /* Atau var(--input-border-hover) */
+  .input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
+    border-color: var(--input-border-hover);
   }
-  /* Saat Focus, Filled Normal jadi Putih + Brand Border */
-  .input-number-variant-filled.input-number-status-normal:focus-within,
-  .input-number-variant-filled.input-number-status-normal.rc-input-number-focused,
-  .input-number-variant-filled.input-number-status-normal.rc-input-number-affix-wrapper-focused {
-    @apply bg-white border-brand-500;
+  .input-number-variant-filled.input-number-status-default:focus-within {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
   }
 
-  /* Error Filled (Colored BG) */
+  /* --- ERROR FILLED --- */
   .input-number-variant-filled.input-number-status-error {
-    background-color: var(--color-error-50) !important;
-    border-color: var(--color-error-500) !important;
+    background-color: var(--color-error-50);
+    border-color: var(--color-error-500);
     color: var(--color-error-600);
   }
-  /* Fix: Filled Error saat Focus -> Background Putih */
-  .input-number-variant-filled.input-number-status-error:focus-within,
-  .input-number-variant-filled.input-number-status-error.rc-input-number-focused,
-  .input-number-variant-filled.input-number-status-error.rc-input-number-affix-wrapper-focused {
-    background-color: #fff !important;
-    box-shadow: 0 0 0 3px var(--color-error-100) !important;
+  /* Actions Background & Border Sync (Error) */
+  .input-number-variant-filled.input-number-status-error .rc-input-number-actions {
+    background-color: var(--color-error-50);
+    border-left-color: var(--color-error-500);
+  }
+  .input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
+    border-bottom-color: var(--color-error-500);
+  }
+  /* Focus: Revert to White BG */
+  .input-number-variant-filled.input-number-status-error:focus-within {
+    background-color: var(--input-bg);
+    box-shadow: 0 0 0 3px var(--color-error-100);
+  }
+  .input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
+    background-color: var(--input-bg);
   }
 
-  /* Warning Filled (Colored BG) */
+  /* --- WARNING FILLED --- */
   .input-number-variant-filled.input-number-status-warning {
-    background-color: var(--color-warning-50) !important;
-    border-color: var(--color-warning-500) !important;
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-500);
+    color: var(--color-warning-600);
   }
-  .input-number-variant-filled.input-number-status-warning:focus-within,
-  .input-number-variant-filled.input-number-status-warning.rc-input-number-focused,
-  .input-number-variant-filled.input-number-status-warning.rc-input-number-affix-wrapper-focused {
-    background-color: #fff !important;
-    box-shadow: 0 0 0 3px var(--color-warning-100) !important;
+  .input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
+    background-color: var(--color-warning-50);
+    border-left-color: var(--color-warning-500);
+  }
+  .input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
+    border-bottom-color: var(--color-warning-500);
+  }
+  .input-number-variant-filled.input-number-status-warning:focus-within {
+    background-color: var(--input-bg);
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+  .input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
+    background-color: var(--input-bg);
   }
 
-  /* Success Filled (Colored BG) */
+  /* --- SUCCESS FILLED --- */
   .input-number-variant-filled.input-number-status-success {
-    background-color: var(--color-success-50) !important;
-    border-color: var(--color-success-500) !important;
+    background-color: var(--color-success-50);
+    border-color: var(--color-success-500);
+    color: var(--color-success-600);
   }
-  .input-number-variant-filled.input-number-status-success:focus-within,
-  .input-number-variant-filled.input-number-status-success.rc-input-number-focused,
-  .input-number-variant-filled.input-number-status-success.rc-input-number-affix-wrapper-focused {
-    background-color: #fff !important;
-    box-shadow: 0 0 0 3px var(--color-success-100) !important;
+  .input-number-variant-filled.input-number-status-success .rc-input-number-actions {
+    background-color: var(--color-success-50);
+    border-left-color: var(--color-success-500);
+  }
+  .input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
+    border-bottom-color: var(--color-success-500);
+  }
+  .input-number-variant-filled.input-number-status-success:focus-within {
+    background-color: var(--input-bg);
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
+  .input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
+    background-color: var(--input-bg);
   }
 
-  /* Info Filled (Colored BG) */
+  /* --- INFO FILLED --- */
   .input-number-variant-filled.input-number-status-info {
-    background-color: var(--color-info-50) !important;
-    border-color: var(--color-info-500) !important;
+    background-color: var(--color-info-50);
+    border-color: var(--color-info-500);
+    color: var(--color-info-600);
   }
-  .input-number-variant-filled.input-number-status-info:focus-within,
-  .input-number-variant-filled.input-number-status-info.rc-input-number-focused,
-  .input-number-variant-filled.input-number-status-info.rc-input-number-affix-wrapper-focused {
-    background-color: #fff !important;
-    box-shadow: 0 0 0 3px var(--color-info-100) !important;
+  .input-number-variant-filled.input-number-status-info .rc-input-number-actions {
+    background-color: var(--color-info-50);
+    border-left-color: var(--color-info-500);
+  }
+  .input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
+    border-bottom-color: var(--color-info-500);
+  }
+  .input-number-variant-filled.input-number-status-info:focus-within {
+    background-color: var(--input-bg);
+    box-shadow: 0 0 0 3px var(--color-info-100);
+  }
+  .input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
+    background-color: var(--input-bg);
   }
 
-  /* ====================
-     HANDLER BORDER SYNC
-     ==================== */
-  /* Agar garis kiri handler warnanya sama dengan border input saat status aktif */
-
-  .input-number-status-error .rc-input-number-handler-wrap {
-    border-left-color: var(--color-error-500) !important;
+  /* =========================================
+     5. DISABLED STATE
+     ========================================= */
+  .rc-input-number-disabled {
+    background-color: var(--disabled-bg) !important;
+    border-color: var(--disabled-border) !important;
+    color: var(--disabled-text);
+    cursor: not-allowed;
+    opacity: 1;
   }
-  .input-number-status-warning .rc-input-number-handler-wrap {
-    border-left-color: var(--color-warning-500) !important;
+  .rc-input-number-disabled .rc-input-number-input {
+    cursor: not-allowed;
   }
-  .input-number-status-success .rc-input-number-handler-wrap {
-    border-left-color: var(--color-success-500) !important;
-  }
-  .input-number-status-info .rc-input-number-handler-wrap {
-    border-left-color: var(--color-info-500) !important;
-  }
-
-  /* ====================
-     DISABLED STATE
-     ==================== */
-  .rc-input-number-disabled,
-  .rc-input-number-affix-wrapper-disabled {
-    @apply bg-gray-50 border-gray-200 cursor-not-allowed opacity-70;
-    /* Force styles to override status colors */
-    background-color: var(--color-gray-50) !important;
-    border-color: var(--color-gray-200) !important;
-  }
-  .rc-input-number-disabled .rc-input-number-input,
-  .rc-input-number-affix-wrapper-disabled .rc-input-number-input {
-    @apply cursor-not-allowed text-gray-400;
-  }
-  /* Hide handler on disabled */
-  .rc-input-number-disabled .rc-input-number-handler-wrap,
-  .rc-input-number-affix-wrapper-disabled .rc-input-number-handler-wrap {
-    display: none;
+  .rc-input-number-disabled .rc-input-number-actions {
+    display: none !important;
   }
 }
diff --git a/packages/ui/src/components/forms/styles/input.style.css b/packages/ui/src/components/forms/styles/input.style.css
index 0115296..efd6e94 100644
--- a/packages/ui/src/components/forms/styles/input.style.css
+++ b/packages/ui/src/components/forms/styles/input.style.css
@@ -1,21 +1,27 @@
 @layer components {
   /* =========================================
-     BASE RESET
+     BASE RESET & SHARED
      ========================================= */
   .rc-input {
+    /* Wajib border-box agar padding tidak merusak lebar */
+    box-sizing: border-box;
+
     display: inline-block;
     width: 100%;
+
+    /* Menggunakan Variable Dimensi Input */
     height: var(--input-height);
-    padding: 0 12px;
+    padding: 0 var(--input-padding-x); /* Konsisten dengan 0.92rem */
+
     font-size: var(--input-font-size);
     line-height: 1.5;
     color: var(--input-text);
 
-    /* Default: White Background (No Color) */
     background-color: var(--input-bg);
-
     border: 1px solid transparent;
     border-radius: var(--input-radius);
+
+    /* Transisi standar */
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none;
   }
@@ -25,142 +31,64 @@
     opacity: 1;
   }
 
+  /* Disabled State (Standalone Input) */
   .rc-input:disabled {
     background-color: var(--disabled-bg) !important;
     color: var(--disabled-text);
     border-color: var(--disabled-border) !important;
     cursor: not-allowed;
+    opacity: 1;
     pointer-events: none;
   }
 
   /* =========================================
-     1. VARIANT: OUTLINED
-     Rule: Never show colored background. 
-     Only change border color.
+     AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
      ========================================= */
 
-  /* Outlined - Normal */
-  .input-variant-outlined.input-status-normal {
-    border-color: var(--input-border);
-  }
-  .input-variant-outlined.input-status-normal:hover {
-    border-color: var(--input-border-hover);
-  }
-  .input-variant-outlined.input-status-normal:focus {
-    border-color: var(--focus-border-color);
-    box-shadow: 0 0 0 3px var(--focus-ring-color);
-  }
+  /* Base Wrapper Style */
+  .rc-input-affix-wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
 
-  /* Outlined - Error (NO Background, RED Border) */
-  .input-variant-outlined.input-status-error {
-    background-color: var(--input-bg); /* Tetap Putih */
-    border-color: var(--color-error-500);
-  }
-  .input-variant-outlined.input-status-error:hover,
-  .input-variant-outlined.input-status-error:focus {
-    border-color: var(--color-error-600);
-    box-shadow: 0 0 0 3px var(--color-error-100);
-  }
+    /* Menggunakan Variable Dimensi Input */
+    height: var(--input-height);
+    padding: 0 var(--input-padding-x);
 
-  /* Outlined - Warning (NO Background, AMBER Border) */
-  .input-variant-outlined.input-status-warning {
-    background-color: var(--input-bg); /* Tetap Putih */
-    border-color: var(--color-warning-500);
-  }
-  .input-variant-outlined.input-status-warning:hover,
-  .input-variant-outlined.input-status-warning:focus {
-    border-color: var(--color-warning-600);
-    box-shadow: 0 0 0 3px var(--color-warning-100);
-  }
-
-  /* Outlined - Success (NO Background, GREEN Border) */
-  .input-variant-outlined.input-status-success {
-    background-color: var(--input-bg); /* Tetap Putih */
-    border-color: var(--color-success-500);
-  }
-  .input-variant-outlined.input-status-success:hover,
-  .input-variant-outlined.input-status-success:focus {
-    border-color: var(--color-success-600);
-    box-shadow: 0 0 0 3px var(--color-success-100);
-  }
-
-  /* Outlined - Info (NO Background, BLUE Border) */
-  .input-variant-outlined.input-status-info {
-    background-color: var(--input-bg); /* Tetap Putih */
-    border-color: var(--color-info-500);
-  }
-  .input-variant-outlined.input-status-info:hover,
-  .input-variant-outlined.input-status-info:focus {
-    border-color: var(--color-info-600);
-    box-shadow: 0 0 0 3px var(--color-info-100);
-  }
-
-  /* =========================================
-     2. VARIANT: FILLED
-     Rule: Normal = White Bg. 
-     Error/Warning/Success/Info = Colored Bg.
-     ========================================= */
-
-  /* Filled - Normal (Sama seperti Outlined - No Background) */
-  .input-variant-filled.input-status-normal {
+    border: 1px solid transparent;
+    border-radius: var(--input-radius);
     background-color: var(--input-bg);
-    border-color: var(--input-border); /* Tetap butuh border agar konsisten */
-  }
-  .input-variant-filled.input-status-normal:hover {
-    border-color: var(--input-border-hover);
-  }
-  .input-variant-filled.input-status-normal:focus {
-    border-color: var(--focus-border-color);
-    box-shadow: 0 0 0 3px var(--focus-ring-color);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  /* Filled - Error (RED Background + Red Border) */
-  .input-variant-filled.input-status-error {
-    background-color: var(--color-error-50); /* Background Merah Muda */
-    border-color: var(--color-error-500);
-    color: var(--color-error-600);
-  }
-  .input-variant-filled.input-status-error:focus {
-    background-color: #fff; /* Optional: Balik putih saat diketik */
-    box-shadow: 0 0 0 3px var(--color-error-100);
+  /* Reset Input di dalam Wrapper */
+  .rc-input-affix-wrapper .rc-input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+    box-shadow: none !important;
   }
 
-  /* Filled - Warning (AMBER Background + Amber Border) */
-  .input-variant-filled.input-status-warning {
-    background-color: var(--color-warning-50); /* Background Kuning Muda */
-    border-color: var(--color-warning-500);
+  /* Prefix & Suffix Positioning */
+  .rc-input-prefix {
+    margin-right: 0.5rem; /* ~8px, hardcoded ok atau bisa buat var baru */
+    display: flex;
+    align-items: center;
+    flex: none;
   }
-  .input-variant-filled.input-status-warning:focus {
-    background-color: #fff;
-    box-shadow: 0 0 0 3px var(--color-warning-100);
+  .rc-input-suffix {
+    margin-left: 0.5rem; /* ~8px */
+    display: flex;
+    align-items: center;
+    flex: none;
   }
 
-  /* Filled - Success */
-  .input-variant-filled.input-status-success {
-    background-color: var(--color-success-50); /* Background Kuning Muda */
-    border-color: var(--color-success-500);
-  }
-  .input-variant-filled.input-status-success:focus {
-    background-color: #fff;
-    box-shadow: 0 0 0 3px var(--color-success-100);
-  }
-
-  /* Filled - Info */
-  .input-variant-filled.input-status-info {
-    background-color: var(--color-info-50); /* Background Kuning Muda */
-    border-color: var(--color-info-500);
-  }
-  .input-variant-filled.input-status-info:focus {
-    background-color: #fff;
-    box-shadow: 0 0 0 3px var(--color-info-100);
-  }
-
-  /* =========================================
-   SUPPORT FOR PREFIX & SUFFIX (AFFIX)
-   ========================================= */
-
-  /* 1. Wrapper Styling */
-
+  /* Disabled Wrapper */
   .rc-input-affix-wrapper-disabled {
     background-color: var(--disabled-bg) !important;
     color: var(--disabled-text);
@@ -168,73 +96,155 @@
     cursor: not-allowed;
     pointer-events: none;
   }
-
-  .rc-input-affix-wrapper {
-    @apply relative flex items-center w-full transition-all duration-200;
-    height: var(--input-height);
-    padding: 0 12px;
-    border: 1px solid transparent;
-    border-radius: var(--input-radius);
-    background-color: var(--input-bg);
-    box-sizing: border-box;
+  .rc-input-affix-wrapper-disabled .rc-input {
+    cursor: not-allowed;
   }
 
-  /* 2. Reset Inner Input agar tidak double styling */
-  .rc-input-affix-wrapper .rc-input {
-    @apply border-none p-0 bg-transparent w-full h-full;
-    box-shadow: none !important;
-  }
+  /* =========================================
+     LOGIC MATRIX: [VARIANT] x [STATUS]
+     ========================================= */
 
-  /* 3. Prefix/Suffix Icon Spacing */
-  .rc-input-prefix {
-    @apply mr-2 flex items-center self-center shrink-0;
-    line-height: 0;
-  }
+  /* ------------------------------------------------
+     1. VARIANT: OUTLINED (Default)
+     ------------------------------------------------ */
 
-  .rc-input-suffix {
-    @apply ml-2 flex items-center self-center shrink-0;
-    line-height: 0;
-  }
-
-  /* --------------------------------------
-   LOGIC VARIANT & STATUS UNTUK WRAPPER
-   -------------------------------------- */
-
-  /* Outlined - Normal */
-  .input-variant-outlined.input-status-normal.rc-input-affix-wrapper {
+  /* DEFAULT */
+  .input-variant-outlined.input-status-default {
     border-color: var(--input-border);
   }
-
-  /* Outlined - Error */
-  .input-variant-outlined.input-status-error.rc-input-affix-wrapper {
-    border-color: var(--color-error-500);
+  /* Hover */
+  .input-variant-outlined.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--input-border-hover);
+  }
+  /* Focus */
+  .input-variant-outlined.input-status-default:focus,
+  .input-variant-outlined.input-status-default.rc-input-affix-wrapper-focused {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
+    z-index: 1;
   }
 
-  /* Filled - Error/Warning (Background Berwarna) */
-  .input-variant-filled.input-status-error.rc-input-affix-wrapper {
+  /* ERROR */
+  .input-variant-outlined.input-status-error {
+    border-color: var(--color-error-500);
+    z-index: 1;
+  }
+  .input-variant-outlined.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--color-error-600);
+  }
+  .input-variant-outlined.input-status-error:focus,
+  .input-variant-outlined.input-status-error.rc-input-affix-wrapper-focused {
+    border-color: var(--color-error-600);
+    box-shadow: 0 0 0 3px var(--color-error-100);
+  }
+
+  /* WARNING */
+  .input-variant-outlined.input-status-warning {
+    border-color: var(--color-warning-500);
+    z-index: 1;
+  }
+  .input-variant-outlined.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--color-warning-600);
+  }
+  .input-variant-outlined.input-status-warning:focus,
+  .input-variant-outlined.input-status-warning.rc-input-affix-wrapper-focused {
+    border-color: var(--color-warning-600);
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+
+  /* SUCCESS */
+  .input-variant-outlined.input-status-success {
+    border-color: var(--color-success-500);
+    z-index: 1;
+  }
+  .input-variant-outlined.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--color-success-600);
+  }
+  .input-variant-outlined.input-status-success:focus,
+  .input-variant-outlined.input-status-success.rc-input-affix-wrapper-focused {
+    border-color: var(--color-success-600);
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
+
+  /* INFO */
+  .input-variant-outlined.input-status-info {
+    border-color: var(--color-info-500);
+    z-index: 1;
+  }
+  .input-variant-outlined.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--color-info-600);
+  }
+  .input-variant-outlined.input-status-info:focus,
+  .input-variant-outlined.input-status-info.rc-input-affix-wrapper-focused {
+    border-color: var(--color-info-600);
+    box-shadow: 0 0 0 3px var(--color-info-100);
+  }
+
+  /* ------------------------------------------------
+     2. VARIANT: FILLED
+     ------------------------------------------------ */
+
+  /* DEFAULT FILLED */
+  .input-variant-filled.input-status-default {
+    background-color: var(--input-bg);
+    border-color: var(--input-border);
+  }
+  .input-variant-filled.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+    border-color: var(--input-border-hover);
+  }
+  .input-variant-filled.input-status-default:focus,
+  .input-variant-filled.input-status-default.rc-input-affix-wrapper-focused {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
+  }
+
+  /* ERROR FILLED */
+  .input-variant-filled.input-status-error {
     background-color: var(--color-error-50);
     border-color: var(--color-error-500);
+    color: var(--color-error-600);
+  }
+  /* Saat focus, background jadi default input-bg (putih) */
+  .input-variant-filled.input-status-error:focus,
+  .input-variant-filled.input-status-error.rc-input-affix-wrapper-focused {
+    background-color: var(--input-bg);
+    border-color: var(--color-error-500);
+    box-shadow: 0 0 0 3px var(--color-error-100);
   }
 
-  .input-variant-filled.input-status-warning.rc-input-affix-wrapper {
+  /* WARNING FILLED */
+  .input-variant-filled.input-status-warning {
     background-color: var(--color-warning-50);
     border-color: var(--color-warning-500);
   }
+  .input-variant-filled.input-status-warning:focus,
+  .input-variant-filled.input-status-warning.rc-input-affix-wrapper-focused {
+    background-color: var(--input-bg);
+    border-color: var(--color-warning-500);
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
 
-  .input-variant-filled.input-status-success.rc-input-affix-wrapper {
+  /* SUCCESS FILLED */
+  .input-variant-filled.input-status-success {
     background-color: var(--color-success-50);
     border-color: var(--color-success-500);
   }
+  .input-variant-filled.input-status-success:focus,
+  .input-variant-filled.input-status-success.rc-input-affix-wrapper-focused {
+    background-color: var(--input-bg);
+    border-color: var(--color-success-500);
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
 
-  .input-variant-filled.input-status-info.rc-input-affix-wrapper {
+  /* INFO FILLED */
+  .input-variant-filled.input-status-info {
     background-color: var(--color-info-50);
     border-color: var(--color-info-500);
   }
-
-  /* State Focus (Input aktif) */
-  .rc-input-affix-wrapper-focused {
-    background-color: #fff !important;
-    border-color: var(--focus-border-color) !important;
-    box-shadow: 0 0 0 3px var(--focus-ring-color) !important;
+  .input-variant-filled.input-status-info:focus,
+  .input-variant-filled.input-status-info.rc-input-affix-wrapper-focused {
+    background-color: var(--input-bg);
+    border-color: var(--color-info-500);
+    box-shadow: 0 0 0 3px var(--color-info-100);
   }
 }
diff --git a/packages/ui/src/components/forms/styles/textarea.style.css b/packages/ui/src/components/forms/styles/textarea.style.css
index 24865a0..bbbf40c 100644
--- a/packages/ui/src/components/forms/styles/textarea.style.css
+++ b/packages/ui/src/components/forms/styles/textarea.style.css
@@ -1,161 +1,180 @@
 @layer components {
   /* =========================================
-   TEXTAREA STYLES
-   Adapts the same logic as Input but for Multiline
-   ========================================= */
+     TEXTAREA STYLES
+     ========================================= */
 
   .rc-textarea {
+    /* Tambahan wajib untuk menjamin lebar akurat */
+    box-sizing: border-box;
+
     display: block;
     width: 100%;
-    min-height: 80px; /* Default height for textarea */
-    padding: 8px 12px; /* Needs vertical padding unlike Input */
+
+    /* Menggunakan Variable Dimensi Textarea */
+    min-height: var(--textarea-min-height);
+    padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
     font-size: var(--input-font-size);
     line-height: 1.5;
     color: var(--input-text);
 
-    /* Default Background (White) */
+    /* Default Background */
     background-color: var(--input-bg);
 
     border: 1px solid transparent;
     border-radius: var(--input-radius);
+
+    /* Transisi standar */
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none;
-    resize: vertical; /* Only allow vertical resizing */
+    resize: vertical;
   }
 
+  /* Placeholder Styling */
   .rc-textarea::placeholder {
     color: var(--input-placeholder);
-    opacity: 1;
+    opacity: 1; /* Firefox fix */
   }
 
-  .rc-textarea:disabled {
+  /* Disabled State */
+  .rc-textarea:disabled,
+  .rc-textarea[disabled] {
     background-color: var(--disabled-bg) !important;
     color: var(--disabled-text);
     border-color: var(--disabled-border) !important;
     cursor: not-allowed;
+    opacity: 1; /* iOS fix */
     pointer-events: none;
   }
 
   /* =========================================
-   1. VARIANT: OUTLINED (Textarea)
-   Always White Background. Changes Border only.
-   ========================================= */
+     WRAPPER (untuk showCount)
+     ========================================= */
+  .rc-textarea-affix-wrapper {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+  }
 
-  /* Normal */
-  .textarea-variant-outlined.textarea-status-normal {
+  /* =========================================
+     1. VARIANT: OUTLINED
+     ========================================= */
+
+  /* --- Default --- */
+  .rc-textarea.textarea-variant-outlined.textarea-status-default {
     background-color: var(--input-bg);
     border-color: var(--input-border);
   }
-  .textarea-variant-outlined.textarea-status-normal:hover {
+  .rc-textarea.textarea-variant-outlined.textarea-status-default:hover:not(:disabled) {
     border-color: var(--input-border-hover);
   }
-  .textarea-variant-outlined.textarea-status-normal:focus {
+  .rc-textarea.textarea-variant-outlined.textarea-status-default:focus {
     border-color: var(--focus-border-color);
     box-shadow: 0 0 0 3px var(--focus-ring-color);
   }
 
-  /* Error (White BG, Red Border) */
-  .textarea-variant-outlined.textarea-status-error {
+  /* --- Error --- */
+  .rc-textarea.textarea-variant-outlined.textarea-status-error {
     background-color: var(--input-bg);
     border-color: var(--color-error-500);
   }
-  .textarea-variant-outlined.textarea-status-error:hover,
-  .textarea-variant-outlined.textarea-status-error:focus {
+  .rc-textarea.textarea-variant-outlined.textarea-status-error:hover:not(:disabled),
+  .rc-textarea.textarea-variant-outlined.textarea-status-error:focus {
     border-color: var(--color-error-600);
     box-shadow: 0 0 0 3px var(--color-error-100);
   }
 
-  /* Warning (White BG, Amber Border) */
-  .textarea-variant-outlined.textarea-status-warning {
+  /* --- Warning --- */
+  .rc-textarea.textarea-variant-outlined.textarea-status-warning {
     background-color: var(--input-bg);
     border-color: var(--color-warning-500);
   }
-  .textarea-variant-outlined.textarea-status-warning:hover,
-  .textarea-variant-outlined.textarea-status-warning:focus {
+  .rc-textarea.textarea-variant-outlined.textarea-status-warning:hover:not(:disabled),
+  .rc-textarea.textarea-variant-outlined.textarea-status-warning:focus {
     border-color: var(--color-warning-600);
     box-shadow: 0 0 0 3px var(--color-warning-100);
   }
 
-  /* Success (White BG, Green Border)  */
-  .textarea-variant-outlined.textarea-status-success {
+  /* --- Success --- */
+  .rc-textarea.textarea-variant-outlined.textarea-status-success {
     background-color: var(--input-bg);
     border-color: var(--color-success-500);
   }
-  .textarea-variant-outlined.textarea-status-success:hover,
-  .textarea-variant-outlined.textarea-status-success:focus {
+  .rc-textarea.textarea-variant-outlined.textarea-status-success:hover:not(:disabled),
+  .rc-textarea.textarea-variant-outlined.textarea-status-success:focus {
     border-color: var(--color-success-600);
     box-shadow: 0 0 0 3px var(--color-success-100);
   }
 
-  /* Info (White BG, Green Border)  */
-  .textarea-variant-outlined.textarea-status-info {
+  /* --- Info --- */
+  .rc-textarea.textarea-variant-outlined.textarea-status-info {
     background-color: var(--input-bg);
     border-color: var(--color-info-500);
   }
-  .textarea-variant-outlined.textarea-status-info:hover,
-  .textarea-variant-outlined.textarea-status-info:focus {
+  .rc-textarea.textarea-variant-outlined.textarea-status-info:hover:not(:disabled),
+  .rc-textarea.textarea-variant-outlined.textarea-status-info:focus {
     border-color: var(--color-info-600);
     box-shadow: 0 0 0 3px var(--color-info-100);
   }
 
   /* =========================================
-   2. VARIANT: FILLED (Textarea)
-   Normal = White. 
-   Error/Warning/Success/Info = Colored BG.
-   ========================================= */
+     2. VARIANT: FILLED
+     ========================================= */
 
-  /* Normal (Behaves like Outlined - White BG) */
-  .textarea-variant-filled.textarea-status-normal {
+  /* --- Default Filled --- */
+  .rc-textarea.textarea-variant-filled.textarea-status-default {
     background-color: var(--input-bg);
     border-color: var(--input-border);
   }
-  .textarea-variant-filled.textarea-status-normal:hover {
+  .rc-textarea.textarea-variant-filled.textarea-status-default:hover:not(:disabled) {
     border-color: var(--input-border-hover);
   }
-  .textarea-variant-filled.textarea-status-normal:focus {
+  .rc-textarea.textarea-variant-filled.textarea-status-default:focus {
     border-color: var(--focus-border-color);
     box-shadow: 0 0 0 3px var(--focus-ring-color);
   }
 
-  /* Error (Red BG + Red Border) */
-  .textarea-variant-filled.textarea-status-error {
+  /* --- Error Filled --- */
+  .rc-textarea.textarea-variant-filled.textarea-status-error {
     background-color: var(--color-error-50);
     border-color: var(--color-error-500);
     color: var(--color-error-600);
   }
-  .textarea-variant-filled.textarea-status-error:focus {
-    background-color: #fff; /* Optional: White on focus */
+  .rc-textarea.textarea-variant-filled.textarea-status-error:focus {
+    background-color: var(--input-bg); /* Reset ke putih saat typing */
     box-shadow: 0 0 0 3px var(--color-error-100);
   }
 
-  /* Warning (Amber BG + Amber Border) */
-  .textarea-variant-filled.textarea-status-warning {
+  /* --- Warning Filled --- */
+  .rc-textarea.textarea-variant-filled.textarea-status-warning {
     background-color: var(--color-warning-50);
     border-color: var(--color-warning-500);
+    color: var(--color-warning-600);
   }
-  .textarea-variant-filled.textarea-status-warning:focus {
-    background-color: #fff;
+  .rc-textarea.textarea-variant-filled.textarea-status-warning:focus {
+    background-color: var(--input-bg);
     box-shadow: 0 0 0 3px var(--color-warning-100);
   }
 
-  /* Success (Green BG + Green Border) */
-  .textarea-variant-filled.textarea-status-success {
+  /* --- Success Filled --- */
+  .rc-textarea.textarea-variant-filled.textarea-status-success {
     background-color: var(--color-success-50);
     border-color: var(--color-success-500);
+    color: var(--color-success-600);
   }
-  .textarea-variant-filled.textarea-status-success:focus {
-    background-color: #fff;
+  .rc-textarea.textarea-variant-filled.textarea-status-success:focus {
+    background-color: var(--input-bg);
     box-shadow: 0 0 0 3px var(--color-success-100);
   }
 
-  /* Info (Blue BG + Blue Border) */
-  .textarea-variant-filled.textarea-status-info {
+  /* --- Info Filled --- */
+  .rc-textarea.textarea-variant-filled.textarea-status-info {
     background-color: var(--color-info-50);
     border-color: var(--color-info-500);
+    color: var(--color-info-600);
   }
-  .textarea-variant-filled.textarea-status-info:focus {
-    background-color: #fff;
+  .rc-textarea.textarea-variant-filled.textarea-status-info:focus {
+    background-color: var(--input-bg);
     box-shadow: 0 0 0 3px var(--color-info-100);
   }
 }
diff --git a/packages/ui/src/components/forms/textarea/textarea.component.tsx b/packages/ui/src/components/forms/textarea/textarea.component.tsx
index ba3d6cc..1b0cc16 100644
--- a/packages/ui/src/components/forms/textarea/textarea.component.tsx
+++ b/packages/ui/src/components/forms/textarea/textarea.component.tsx
@@ -1,12 +1,17 @@
-import RcTextArea from 'rc-textarea';
+import React, { forwardRef } from 'react';
+import RcTextArea, { TextAreaRef } from '@rc-component/textarea';
 import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
 
-export const TextArea = (props: TextAreaProps) => {
+export const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
   const { status, className, variant = 'outlined', ...restProps } = props;
-  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
+
   const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
     .filter(Boolean)
     .join(' ');
 
-  return <RcTextArea className={computedClassName} {...restProps} />;
-};
+  return <RcTextArea ref={ref} className={computedClassName} {...restProps} />;
+});
+
+TextArea.displayName = 'TextArea';
diff --git a/packages/ui/src/components/forms/types/index.ts b/packages/ui/src/components/forms/types/index.ts
index ecd8cce..5e61012 100644
--- a/packages/ui/src/components/forms/types/index.ts
+++ b/packages/ui/src/components/forms/types/index.ts
@@ -1,15 +1,16 @@
-import type { FormProps as RcFormProps } from 'rc-field-form';
-import type { Rule } from 'rc-field-form/lib/interface';
+import type { FormProps as RcFormProps } from '@rc-component/form';
+import type { Rule } from '@rc-component/form/lib/interface';
 import { ReactNode, ReactElement } from 'react';
-import { InputProps as RcInputProps } from 'rc-input';
-import { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
-import { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+
+import { InputProps as RcInputProps } from '@rc-component/input';
+import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
+import { InputNumberProps as RcInputNumberProps } from '@rc-component/input-number';
 
 /**
  * Define possible input statuses
  */
-export type InputStatusType = 'normal' | 'error' | 'warning' | 'success' | 'info';
-export const VALID_INPUT_STATUSES: InputStatusType[] = ['normal', 'error', 'warning', 'success', 'info'];
+export type InputStatusType = 'default' | 'error' | 'warning' | 'success' | 'info';
+export const VALID_INPUT_STATUSES: InputStatusType[] = ['default', 'error', 'warning', 'success', 'info'];
 
 /**
  * Define form props
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index 22267e8..e6296af 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -1,25 +1,136 @@
 @import 'tailwindcss';
 @source "../src";
 
-/* Vendor overrides */
+/* Import Component Styles */
 @import './components/forms/styles/form.style.css';
 
 /* =========================================
-   BASE STYLES & RESETS
-   Ensures consistent typography and form styling
+   THEME VARIABLES (CENTRALIZED)
+   ========================================= */
+@theme {
+  /* -------------------------------
+     BASE FONT & TYPOGRAPHY
+     ------------------------------- */
+  --base-font-size: 13px;
+
+  /* Scale */
+  --text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
+  --text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
+  --text-base: var(--base-font-size); /* 13px */
+  --text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
+  --text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
+  --text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
+
+  /* Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* -------------------------------
+     SHAPE & DEPTH
+     ------------------------------- */
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-md: 0.25rem; /* 4px */
+  --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
+     ------------------------------- */
+  /* Brand (Purple based on your code) */
+  --color-brand-50: #f5f3fd;
+  --color-brand-100: #e6dbfb;
+  --color-brand-200: #d0b6f8;
+  --color-brand-300: #b78ff5;
+  --color-brand-400: #9f64f1;
+  --color-brand-500: #7d39ed; /* Primary */
+  --color-brand-600: #652ed9;
+  --color-brand-700: #4a23a5;
+  --color-brand-800: #321a7a;
+  --color-brand-900: #1b0f4a;
+
+  /* Neutrals */
+  --color-gray-50: #f5f6f7;
+  --color-gray-100: #eceff1;
+  --color-gray-200: #e0e3e7;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+
+  /* Semantics */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+
+  --color-info-50: #f0f9ff;
+  --color-info-100: #e0f2fe;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #0284c7;
+
+  /* -------------------------------
+     COLORS: COMPONENT MAPPING
+     ------------------------------- */
+  --input-bg: #ffffff;
+  --input-border: var(--color-gray-300);
+  --input-border-hover: var(--color-brand-400);
+  --input-text: var(--color-gray-800);
+  --input-placeholder: var(--color-gray-400);
+
+  --focus-ring-color: var(--color-brand-100);
+  --focus-border-color: var(--color-brand-500);
+
+  --disabled-bg: #f3f4f6;
+  --disabled-text: var(--color-gray-400);
+  --disabled-border: #e5e7eb;
+}
+
+/* =========================================
+   BASE RESETS
    ========================================= */
 @layer base {
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    /* background-color: var(--color-gray-50); */
     background-color: #ffffff;
     color: var(--color-gray-800);
-    @apply text-base; /* Set global base font to 13px */
+    font-size: var(--base-font-size);
+    line-height: var(--text-base--line-height);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  /* Form elements inherit base font styles */
   input,
   textarea,
   select,
@@ -28,132 +139,4 @@
     font-size: inherit;
     color: inherit;
   }
-
-  /* Table headers: consistent style with enterprise Fiori design */
-  th {
-    @apply text-gray-500 font-medium text-left border-b border-gray-200 py-2 px-3;
-  }
-}
-
-@theme {
-  /* =========================================
-     1. BRAND COLORS (Company Identity)
-     ========================================= */
-  --color-brand-50: #f5f3fd;
-  --color-brand-100: #e6dbfb;
-  --color-brand-200: #d0b6f8;
-  --color-brand-300: #b78ff5;
-  --color-brand-400: #9f64f1;
-  --color-brand-500: #7d39ed; /* Primary color for main ERP actions */
-  --color-brand-600: #652ed9;
-  --color-brand-700: #4a23a5;
-  --color-brand-800: #321a7a;
-  --color-brand-900: #1b0f4a;
-  --color-brand-950: #0d0726;
-
-  /* =========================================
-     2. ENTERPRISE NEUTRALS (SAP Fiori Inspired)
-     Override default Tailwind gray palette to match enterprise style
-     ========================================= */
-  --color-gray-50: #f5f6f7; /* Canvas or background of pages */
-  --color-gray-100: #eceff1; /* Shell/Header background */
-  --color-gray-200: #e0e3e7; /* Subtle borders for tables/separators */
-  --color-gray-300: #d1d5db; /* Strong borders, e.g., input fields */
-  --color-gray-400: #9ca3af; /* Disabled elements */
-  --color-gray-500: #6b7280; /* Metadata, labels */
-  --color-gray-600: #4b5563; /* Secondary body text */
-  --color-gray-700: #374151; /* Primary body text */
-  --color-gray-800: #1f2937; /* Section headers */
-  --color-gray-900: #111827; /* Page titles */
-
-  /* =========================================
-     3. SEMANTIC COLORS (Status Indicators)
-     Professional colors for business contexts (errors, success, warnings)
-     ========================================= */
-  /* Error - Rose/Ruby Soft Palette */
-  --color-error-50: #fef2f2;
-  --color-error-100: #fee2e2;
-  --color-error-500: #ef4444; /* Standard Modern Red */
-  --color-error-600: #dc2626;
-
-  /* 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;
-
-  /* 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)
-     Override Tailwind default text sizes for consistent UI
-     ========================================= */
-  --text-xs: 0.6875rem; /* 11px - Captions or minor labels */
-  --text-xs--line-height: 1rem;
-
-  --text-sm: 0.75rem; /* 12px - Secondary text */
-  --text-sm--line-height: 1.125rem;
-
-  --text-base: 0.8125rem; /* 13px - Default body text */
-  --text-base--line-height: 1.25rem; /* Comfortable reading spacing */
-
-  --text-lg: 0.9375rem; /* 15px - Section headers */
-  --text-lg--line-height: 1.5rem;
-
-  --text-xl: 1.125rem; /* 18px - Card or page titles */
-  --text-xl--line-height: 1.75rem;
-
-  --text-2xl: 1.375rem; /* 22px - Dashboard headers */
-  --text-2xl--line-height: 2rem;
-
-  /* Font weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500; /* Recommended for table headers */
-  --font-weight-semibold: 600; /* Highlight important data points */
-  --font-weight-bold: 700;
-
-  /* =========================================
-     5. SHAPE & DEPTH (UI Consistency)
-     Border radius and shadow presets for consistent UI
-     ========================================= */
-  --radius-sm: 0.125rem; /* 2px - small elements like badges/checkboxes */
-  --radius-md: 0.25rem; /* 4px - default buttons/inputs */
-  --radius-lg: 0.5rem; /* 8px - card containers */
-  --radius-xl: 0.75rem; /* 12px - modal dialogs */
-
-  /* Shadow presets for depth */
-  --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;
 }
diff --git a/packages/utils/src/currency-service/currency-service.test.ts b/packages/utils/src/currency-service/currency-service.test.ts
index 6b26cf8..310b67e 100644
--- a/packages/utils/src/currency-service/currency-service.test.ts
+++ b/packages/utils/src/currency-service/currency-service.test.ts
@@ -5,8 +5,9 @@ describe('CurrencyService', () => {
   let currency: CurrencyService;
 
   beforeEach(() => {
-    // Reset global prefix before each test
+    // Reset global prefix and decimal separator before each test
     CurrencyService.setGlobalPrefix('Rp ');
+    CurrencyService.setGlobalDecimalSeparator(',');
 
     // Mock console to keep tests clean
     vi.spyOn(console, 'warn').mockImplementation(() => {});
@@ -38,6 +39,26 @@ describe('CurrencyService', () => {
     });
   });
 
+  describe('Global Decimal Separator', () => {
+    it('should set and get global decimal separator', () => {
+      CurrencyService.setGlobalDecimalSeparator('.');
+      expect(CurrencyService.getGlobalDecimalSeparator()).toBe('.');
+    });
+
+    it('should use global decimal separator if instance separator is not provided', () => {
+      CurrencyService.setGlobalDecimalSeparator('.');
+      const c = new CurrencyService();
+      expect(c.format(1234.56)).toBe('Rp 1,234.56');
+      expect(c.parse('Rp 1,234.56')).toBe('1234.56');
+    });
+
+    it('should override instance decimal separator', () => {
+      const c = new CurrencyService({ decimalSeparator: '.' });
+      expect(c.format(1234.56)).toBe('Rp 1,234.56');
+      expect(c.parse('Rp 1,234.56')).toBe('1234.56');
+    });
+  });
+
   describe('Formatting', () => {
     it('should format integer without decimalScale', () => {
       expect(currency.format(1234567)).toBe('Rp 1.234.567');
@@ -74,12 +95,6 @@ describe('CurrencyService', () => {
       expect(currency.parse('Rp 1.234,5678')).toBe('1234.5678');
     });
 
-    it('should handle different decimal separators', () => {
-      const c = new CurrencyService({ decimalSeparator: '.' });
-      expect(c.format(1234.56)).toBe('Rp 1,234.56');
-      expect(c.parse('Rp 1,234.56')).toBe('1234.56');
-    });
-
     it('should return empty string for null or undefined input', () => {
       expect(currency.parse(null)).toBe('');
       expect(currency.parse(undefined)).toBe('');
diff --git a/packages/utils/src/currency-service/currency-service.ts b/packages/utils/src/currency-service/currency-service.ts
index 2991b00..8a4629e 100644
--- a/packages/utils/src/currency-service/currency-service.ts
+++ b/packages/utils/src/currency-service/currency-service.ts
@@ -38,11 +38,14 @@ export class CurrencyService {
    * ---------------------------------------------------------------- */
   private static _globalPrefix: string = 'Rp ';
 
+  /** Global default decimal separator shared across all instances */
+  private static _globalDecimalSeparator: ',' | '.' = ',';
+
   /** Instance prefix, defaults to global prefix */
   private readonly prefix: string;
 
   /** Character used as decimal separator for display */
-  private readonly decimalSeparator: string;
+  private readonly decimalSeparator: ',' | '.';
 
   /** Optional number of decimal digits for display rounding */
   private readonly decimalScale?: number;
@@ -58,7 +61,7 @@ export class CurrencyService {
    */
   constructor(options?: CurrencyOptions) {
     this.prefix = options?.prefix ?? CurrencyService._globalPrefix;
-    this.decimalSeparator = options?.decimalSeparator ?? ',';
+    this.decimalSeparator = options?.decimalSeparator ?? CurrencyService._globalDecimalSeparator;
     this.decimalScale = options?.decimalScale;
     this.thousandSeparator = this.decimalSeparator === ',' ? '.' : ',';
   }
@@ -86,6 +89,18 @@ export class CurrencyService {
     return CurrencyService._globalPrefix;
   }
 
+  /** ------------------------------------------------------------
+   * Global decimal separator management
+   * ------------------------------------------------------------ */
+
+  static setGlobalDecimalSeparator(separator: ',' | '.') {
+    CurrencyService._globalDecimalSeparator = separator;
+  }
+
+  static getGlobalDecimalSeparator(): ',' | '.' {
+    return CurrencyService._globalDecimalSeparator;
+  }
+
   /** ------------------------------------------------------------
    * Formatter (DISPLAY ONLY)
    * ------------------------------------------------------------ */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99999d2..60c7d48 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -158,24 +158,24 @@ importers:
 
   packages/ui:
     dependencies:
+      '@rc-component/form':
+        specifier: ^1.6.2
+        version: 1.6.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/input':
+        specifier: ^1.1.2
+        version: 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/input-number':
+        specifier: ^1.6.2
+        version: 1.6.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/textarea':
+        specifier: ^1.1.2
+        version: 1.1.2(react-dom@19.2.3)(react@19.2.3)
       '@repo/utils':
         specifier: workspace:*
         version: link:../utils
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@5.4.17)
-      rc-field-form:
-        specifier: ^2.7.1
-        version: 2.7.1(react-dom@19.2.3)(react@19.2.3)
-      rc-input:
-        specifier: ^1.8.0
-        version: 1.8.0(react-dom@19.2.3)(react@19.2.3)
-      rc-input-number:
-        specifier: ^9.5.0
-        version: 9.5.0(react-dom@19.2.3)(react@19.2.3)
-      rc-textarea:
-        specifier: ^1.10.2
-        version: 1.10.2(react-dom@19.2.3)(react@19.2.3)
       react:
         specifier: ^19.2.3
         version: 19.2.3
@@ -1145,6 +1145,45 @@ packages:
       '@babel/runtime': 7.28.4
     dev: false
 
+  /@rc-component/form@1.6.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-OgIn2RAoaSBqaIgzJf/X6iflIa9LpTozci1lagLBdURDFhGA370v0+T0tXxOi8YShMjTha531sFhwtnrv+EJaQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/async-validator': 5.1.0
+      '@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/input-number@1.6.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-Gjcq7meZlCOiWN1t1xCC+7/s85humHVokTBI7PJgTfoyw5OWF74y3e6P8PHX104g9+b54jsodFIzyaj6p8LI9w==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/mini-decimal': 1.1.0
+      '@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/input@1.1.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-Q61IMR47piUBudgixJ30CciKIy9b1H95qe7GgEKOmSJVJXvFRWJllJfQry9tif+MX2cWFXWJf/RXz4kaCeq/Fg==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/mini-decimal@1.1.0:
     resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
     engines: {node: '>=8.x'}
@@ -1152,6 +1191,43 @@ packages:
       '@babel/runtime': 7.28.4
     dev: false
 
+  /@rc-component/resize-observer@1.1.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-NfXXMmiR+SmUuKE1NwJESzEUYUFWIDUn2uXpxCTOLwiRUUakd62DRNFjRJArgzyFW8S5rsL4aX5XlyIXyC/vRA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/textarea@1.1.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-9rMUEODWZDMovfScIEHXWlVZuPljZ2pd1LKNjslJVitn4SldEzq5vO1CL3yy3Dnib6zZal2r2DPtjy84VVpF6A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/input': 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/util@1.7.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-tIvIGj4Vl6fsZFvWSkYw9sAfiCKUXMyhVz6kpKyZbwyZyRPqv2vxYZROdaO1VB4gqTNvUZFXh6i3APUiterw5g==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      is-mobile: 5.0.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-is: 18.3.1
+    dev: false
+
   /@rolldown/pluginutils@1.0.0-beta.53:
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
     dev: true
@@ -3195,10 +3271,6 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-    dev: false
-
   /clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -3220,6 +3292,11 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4738,6 +4815,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /is-mobile@5.0.0:
+    resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==}
+    dev: false
+
   /is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -6055,89 +6136,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /rc-field-form@2.7.1(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-vKeSifSJ6HoLaAB+B8aq/Qgm8a3dyxROzCtKNCsBQgiverpc4kWDQihoUwzUj+zNWJOykwSY4dNX3QrGwtVb9A==}
-    engines: {node: '>=8.x'}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@rc-component/async-validator': 5.1.0
-      rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    dev: false
-
-  /rc-input-number@9.5.0(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-bKaEvB5tHebUURAEXw35LDcnRZLq3x1k7GxfAqBMzmpHkDGzjAtnUL8y4y5N15rIFIg5IJgwr211jInl3cipag==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@rc-component/mini-decimal': 1.1.0
-      classnames: 2.5.1
-      rc-input: 1.8.0(react-dom@19.2.3)(react@19.2.3)
-      rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    dev: false
-
-  /rc-input@1.8.0(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-KXvaTbX+7ha8a/k+eg6SYRVERK0NddX8QX7a7AnRvUa/rEH0CNMlpcBzBkhI0wp2C8C4HlMoYl8TImSN+fuHKA==}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      classnames: 2.5.1
-      rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    dev: false
-
-  /rc-resize-observer@1.4.3(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      classnames: 2.5.1
-      rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      resize-observer-polyfill: 1.5.1
-    dev: false
-
-  /rc-textarea@1.10.2(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-HfaeXiaSlpiSp0I/pvWpecFEHpVysZ9tpDLNkxQbMvMz6gsr7aVZ7FpWP9kt4t7DB+jJXesYS0us1uPZnlRnwQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      classnames: 2.5.1
-      rc-input: 1.8.0(react-dom@19.2.3)(react@19.2.3)
-      rc-resize-observer: 1.4.3(react-dom@19.2.3)(react@19.2.3)
-      rc-util: 5.44.4(react-dom@19.2.3)(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    dev: false
-
-  /rc-util@5.44.4(react-dom@19.2.3)(react@19.2.3):
-    resolution: {integrity: sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.28.4
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-is: 18.3.1
-    dev: false
-
   /rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -6364,10 +6362,6 @@ packages:
     engines: {node: '>=0.10.5'}
     dev: false
 
-  /resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-    dev: false
-
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}