From d4114702a0cfba45c58757027798d5798a603eb9 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:45:28 +0700
Subject: [PATCH] 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.
---
 .../src/apps/modules/example/example.page.tsx |   9 +
 .../input-showcase/group-component.tsx        | 126 ++++++++
 .../modules/example/input-showcase/index.tsx  |  31 ++
 packages/configs/eslint/react.js              |  17 +-
 packages/ui/env.d.ts                          |  11 +
 packages/ui/package.json                      |   4 +
 .../form-provider/form-control.component.tsx  |   6 +
 .../form-provider/form-item.component.tsx     |  40 +++
 .../components/forms/form-provider/index.tsx  |  33 +++
 packages/ui/src/components/forms/index.ts     |   8 +
 .../forms/input/input-number.component.tsx    |  26 ++
 .../forms/input/input-password.component.tsx  |   6 +
 .../forms/input/input.component.tsx           |  17 ++
 .../components/forms/styles/form.style.css    |   4 +
 .../forms/styles/input-number.style.css       | 274 ++++++++++++++++++
 .../components/forms/styles/input.style.css   | 240 +++++++++++++++
 .../forms/styles/textarea.style.css           | 161 ++++++++++
 .../forms/textarea/textarea.component.tsx     |  12 +
 .../ui/src/components/forms/types/index.ts    |  54 ++++
 packages/ui/src/components/index.ts           |   2 +
 packages/ui/src/globals.css                   |  57 +++-
 pnpm-lock.yaml                                | 122 +++++++-
 22 files changed, 1238 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/apps/modules/example/example.page.tsx
 create mode 100644 apps/web/src/apps/modules/example/input-showcase/group-component.tsx
 create mode 100644 apps/web/src/apps/modules/example/input-showcase/index.tsx
 create mode 100644 packages/ui/env.d.ts
 create mode 100644 packages/ui/src/components/forms/form-provider/form-control.component.tsx
 create mode 100644 packages/ui/src/components/forms/form-provider/form-item.component.tsx
 create mode 100644 packages/ui/src/components/forms/form-provider/index.tsx
 create mode 100644 packages/ui/src/components/forms/index.ts
 create mode 100644 packages/ui/src/components/forms/input/input-number.component.tsx
 create mode 100644 packages/ui/src/components/forms/input/input-password.component.tsx
 create mode 100644 packages/ui/src/components/forms/input/input.component.tsx
 create mode 100644 packages/ui/src/components/forms/styles/form.style.css
 create mode 100644 packages/ui/src/components/forms/styles/input-number.style.css
 create mode 100644 packages/ui/src/components/forms/styles/input.style.css
 create mode 100644 packages/ui/src/components/forms/styles/textarea.style.css
 create mode 100644 packages/ui/src/components/forms/textarea/textarea.component.tsx
 create mode 100644 packages/ui/src/components/forms/types/index.ts

diff --git a/apps/web/src/apps/modules/example/example.page.tsx b/apps/web/src/apps/modules/example/example.page.tsx
new file mode 100644
index 0000000..b5f4b3b
--- /dev/null
+++ b/apps/web/src/apps/modules/example/example.page.tsx
@@ -0,0 +1,9 @@
+import InputShowCase from './input-showcase';
+
+export default function ExamplePage() {
+  return (
+    <div>
+      <InputShowCase />
+    </div>
+  );
+}
diff --git a/apps/web/src/apps/modules/example/input-showcase/group-component.tsx b/apps/web/src/apps/modules/example/input-showcase/group-component.tsx
new file mode 100644
index 0000000..e4fa83c
--- /dev/null
+++ b/apps/web/src/apps/modules/example/input-showcase/group-component.tsx
@@ -0,0 +1,126 @@
+import { Input, InputNumber, InputStatusType, TextArea } from '@repo/ui';
+
+export default function GroupComponent({ status }: { status?: InputStatusType }) {
+  return (
+    <div>
+      <div className="space-y-4 bg-white p-5 rounded-xl border border-gray-200 shadow-xs">
+        <h3 className="text-xs font-bold text-gray-400 uppercase">Default</h3>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="space-y-4">
+            <div className="text-gray-500 ">Default</div>
+            <div className="space-y-2">
+              <Input status={status} placeholder="Outlined Placeholder" />
+              <InputNumber status={status} className="w-full" placeholder="OutlinedNumber Placeholder" />
+              <TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
+              <Input status={status} variant="filled" placeholder="Filled Placeholder" />
+              <InputNumber
+                status={status}
+                variant="filled"
+                className="w-full"
+                placeholder="Filled Number Placeholder"
+              />
+              <TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="text-gray-500 ">With Prefix</div>
+            <div className="space-y-2">
+              <Input
+                status={status}
+                placeholder="Outlined Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                className="w-full"
+                placeholder="OutlinedNumber Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
+              <Input
+                status={status}
+                variant="filled"
+                placeholder="Filled Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                variant="filled"
+                className="w-full"
+                placeholder="Filled Number Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="text-gray-500 ">With Suffix</div>
+            <div className="space-y-2">
+              <Input
+                status={status}
+                placeholder="Outlined Placeholder"
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                className="w-full"
+                placeholder="OutlinedNumber Placeholder"
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
+              <Input
+                status={status}
+                variant="filled"
+                placeholder="Filled Placeholder"
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                variant="filled"
+                className="w-full"
+                placeholder="Filled Number Placeholder"
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="text-gray-500 ">With Prefix and Suffix</div>
+            <div className="space-y-2">
+              <Input
+                status={status}
+                placeholder="Outlined Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                className="w-full"
+                placeholder="OutlinedNumber Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
+              <Input
+                status={status}
+                variant="filled"
+                placeholder="Filled Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <InputNumber
+                status={status}
+                variant="filled"
+                className="w-full"
+                placeholder="Filled Number Placeholder"
+                prefix={<span className="text-gray-500">$</span>}
+                suffix={<span className="text-gray-500">$</span>}
+              />
+              <TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/apps/modules/example/input-showcase/index.tsx b/apps/web/src/apps/modules/example/input-showcase/index.tsx
new file mode 100644
index 0000000..62cdafe
--- /dev/null
+++ b/apps/web/src/apps/modules/example/input-showcase/index.tsx
@@ -0,0 +1,31 @@
+import GroupComponent from './group-component';
+
+export default function InputShowCase() {
+  return (
+    <div className="min-h-screen ">
+      <main className="mx-auto p-8 space-y-12">
+        <section className="space-y-6">
+          <div className="flex items-center gap-2">
+            <h2 className="text-lg font-bold">1. All Conditions Matrix</h2>
+            <span className="px-2 py-0.5 text-[10px] bg-gray-200 text-gray-600 rounded uppercase tracking-wider">
+              Visual Audit
+            </span>
+          </div>
+
+          <div className="grid grid-cols-1  gap-6">
+            {/* COLUMN: ERROR */}
+            <GroupComponent status="error" />
+            {/* COLUMN: NORMAL */}
+            <GroupComponent />
+            {/* COLUMN: INFO */}
+            <GroupComponent status="info" />
+            {/* COLUMN: WARNING */}
+            <GroupComponent status="warning" />
+            {/* COLUMN: SUCCESS */}
+            <GroupComponent status="success" />
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/packages/configs/eslint/react.js b/packages/configs/eslint/react.js
index 9417d1c..9e37ed4 100644
--- a/packages/configs/eslint/react.js
+++ b/packages/configs/eslint/react.js
@@ -2,18 +2,17 @@ module.exports = {
   env: {
     node: true,
   },
-  parser: "@typescript-eslint/parser",
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-  ],
-  plugins: ["@typescript-eslint"],
+  parser: '@typescript-eslint/parser',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['@typescript-eslint'],
   parserOptions: {
-    sourceType: "module",
+    sourceType: 'module',
     ecmaVersion: 2020,
   },
   rules: {
-    "@typescript-eslint/no-non-null-assertion": "off",
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-duplicate-enum-values': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
   },
 };
diff --git a/packages/ui/env.d.ts b/packages/ui/env.d.ts
new file mode 100644
index 0000000..89ab710
--- /dev/null
+++ b/packages/ui/env.d.ts
@@ -0,0 +1,11 @@
+// packages/ui/env.d.ts
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const content: any;
+  export default content;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 29d7dd4..b9d1503 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,6 +14,10 @@
   "dependencies": {
     "@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
new file mode 100644
index 0000000..19caa90
--- /dev/null
+++ b/packages/ui/src/components/forms/form-provider/form-control.component.tsx
@@ -0,0 +1,6 @@
+import RcForm from 'rc-field-form';
+import { FormProps } from '../types';
+
+export default function FormControl<Values = any>({ children, ...props }: FormProps<Values>) {
+  return <RcForm {...props}>{children}</RcForm>;
+}
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
new file mode 100644
index 0000000..67bfc96
--- /dev/null
+++ b/packages/ui/src/components/forms/form-provider/form-item.component.tsx
@@ -0,0 +1,40 @@
+import React, { ReactElement } from 'react';
+import { Field } from 'rc-field-form';
+import { FormItemProps } from '../types';
+
+export default function FormItem(props: FormItemProps) {
+  const { name, label, children, rules, valuePropName = 'value', initialValue, status: OverrideStatus } = props;
+
+  return (
+    <Field name={name} rules={rules} valuePropName={valuePropName} initialValue={initialValue}>
+      {(control, meta) => {
+        const hasError = meta.errors.length > 0;
+        const hasWarning = 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
+        const childNode = childElement ? React.cloneElement(childElement, { ...control, status }) : children;
+
+        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>}
+              </label>
+            )}
+
+            <div className="relative">{childNode}</div>
+
+            {hasError && <p className="mt-1.5 text-xs text-red-500">{meta.errors[0]}</p>}
+            {hasWarning && <p className="mt-1.5 text-xs text-yellow-500">{meta.warnings[0]}</p>}
+          </div>
+        );
+      }}
+    </Field>
+  );
+}
diff --git a/packages/ui/src/components/forms/form-provider/index.tsx b/packages/ui/src/components/forms/form-provider/index.tsx
new file mode 100644
index 0000000..e4ac44e
--- /dev/null
+++ b/packages/ui/src/components/forms/form-provider/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useForm, List, FieldContext } from 'rc-field-form';
+import { FormProps } from '../types';
+
+import FormControl from './form-control.component';
+import FormItem from './form-item.component';
+
+/**
+ * Internal Form component using forwardRef to handle RcForm instance
+ */
+const FormProvider = React.forwardRef(FormControl) as <Values extends object = any>(
+  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;
+  List: typeof List;
+  Provider: typeof FieldContext.Provider;
+};
+
+// Assign sub-components and utilities to the main Form component
+const Form = FormProvider as CompoundedComponent;
+Form.Item = FormItem;
+Form.useForm = useForm;
+Form.List = List;
+Form.Provider = FieldContext.Provider;
+
+export { Form };
diff --git a/packages/ui/src/components/forms/index.ts b/packages/ui/src/components/forms/index.ts
new file mode 100644
index 0000000..242fa22
--- /dev/null
+++ b/packages/ui/src/components/forms/index.ts
@@ -0,0 +1,8 @@
+export * from './types';
+export * from './form-provider';
+
+export * from './input/input.component';
+export * from './input/input-password.component';
+export * from './input/input-number.component';
+
+export * from './textarea/textarea.component';
diff --git a/packages/ui/src/components/forms/input/input-number.component.tsx b/packages/ui/src/components/forms/input/input-number.component.tsx
new file mode 100644
index 0000000..42c0276
--- /dev/null
+++ b/packages/ui/src/components/forms/input/input-number.component.tsx
@@ -0,0 +1,26 @@
+import RcInputNumber from 'rc-input-number';
+import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
+
+// Handler Icons (Chevron Modern)
+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>
+);
+
+export const InputNumber = (props: InputNumberProps) => {
+  const { status, className, variant = 'outlined', ...restProps } = props;
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+  const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <RcInputNumber {...restProps} className={computedClassName} upHandler={<UpIcon />} downHandler={<DownIcon />} />
+  );
+};
diff --git a/packages/ui/src/components/forms/input/input-password.component.tsx b/packages/ui/src/components/forms/input/input-password.component.tsx
new file mode 100644
index 0000000..200196a
--- /dev/null
+++ b/packages/ui/src/components/forms/input/input-password.component.tsx
@@ -0,0 +1,6 @@
+import { InputPasswordProps } from '../types';
+import { Input } from './input.component';
+
+export const InputPassword = (props: InputPasswordProps) => {
+  return <Input {...props} type="password" />;
+};
diff --git a/packages/ui/src/components/forms/input/input.component.tsx b/packages/ui/src/components/forms/input/input.component.tsx
new file mode 100644
index 0000000..c9b127b
--- /dev/null
+++ b/packages/ui/src/components/forms/input/input.component.tsx
@@ -0,0 +1,17 @@
+import RcInput from 'rc-input';
+import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
+
+export const Input = (props: InputProps) => {
+  const { status, className, variant = 'outlined', disabled, ...restProps } = props;
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+  const computedClassName = [
+    className,
+    `input-status-${currentStatus}`,
+    `input-variant-${variant}`,
+    disabled ? 'rc-input-affix-wrapper-disabled' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return <RcInput {...restProps} className={computedClassName} disabled={disabled} />;
+};
diff --git a/packages/ui/src/components/forms/styles/form.style.css b/packages/ui/src/components/forms/styles/form.style.css
new file mode 100644
index 0000000..3caaaf7
--- /dev/null
+++ b/packages/ui/src/components/forms/styles/form.style.css
@@ -0,0 +1,4 @@
+@import './input.style.css';
+@import './input-number.style.css';
+
+@import './textarea.style.css';
diff --git a/packages/ui/src/components/forms/styles/input-number.style.css b/packages/ui/src/components/forms/styles/input-number.style.css
new file mode 100644
index 0000000..ea0eaf6
--- /dev/null
+++ b/packages/ui/src/components/forms/styles/input-number.style.css
@@ -0,0 +1,274 @@
+@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)
+     ========================================= */
+
+  /* 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;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* INPUT FIELD */
+  .rc-input-number-input {
+    @apply w-full h-full bg-transparent border-none outline-none text-gray-900;
+    padding: 0 var(--input-padding-x);
+    appearance: textfield;
+  }
+
+  /* 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-right: var(--input-handler-width);
+  }
+
+  /* PREFIX & SUFFIX */
+  .rc-input-number-prefix {
+    @apply flex items-center ml-3 text-gray-500 z-10;
+  }
+
+  .rc-input-number-suffix {
+    @apply flex items-center text-gray-500 z-10;
+    margin-right: var(--suffix-spacing);
+    transition: margin-right 0.2s ease-in-out;
+  }
+
+  /* Animation Trigger */
+  .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));
+  }
+
+  /* HANDLER WRAPPER */
+  .rc-input-number-handler-wrap {
+    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);
+  }
+
+  /* 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;
+  }
+
+  .rc-input-number-handler {
+    @apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
+  }
+  .rc-input-number-handler:hover {
+    @apply text-brand-600 bg-gray-50;
+    height: 60%;
+  }
+  .rc-input-number-handler:active {
+    @apply bg-gray-100;
+  }
+  .rc-input-number-handler-up {
+    @apply border-b border-gray-200;
+  }
+
+  /* =========================================
+     2. SKINS, VARIANTS & STATUS 
+     (Matching your Input Text Logic)
+     ========================================= */
+
+  /* --- 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;
+  }
+
+  /* ====================
+     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) */
+  .input-number-variant-outlined.input-number-status-error {
+    border-color: var(--color-error-500) !important;
+  }
+  .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;
+  }
+
+  /* Warning (Outlined) */
+  .input-number-variant-outlined.input-number-status-warning {
+    border-color: var(--color-warning-500) !important;
+  }
+  .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;
+  }
+
+  /* Success (Outlined) */
+  .input-number-variant-outlined.input-number-status-success {
+    border-color: var(--color-success-500) !important;
+  }
+  .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;
+  }
+
+  /* ====================
+     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;
+  }
+  .input-number-variant-filled.input-number-status-normal:hover {
+    /* @apply bg-gray-200; */
+    @apply border-brand-400; /* Atau 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;
+  }
+
+  /* Error Filled (Colored BG) */
+  .input-number-variant-filled.input-number-status-error {
+    background-color: var(--color-error-50) !important;
+    border-color: var(--color-error-500) !important;
+    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;
+  }
+
+  /* Warning Filled (Colored BG) */
+  .input-number-variant-filled.input-number-status-warning {
+    background-color: var(--color-warning-50) !important;
+    border-color: var(--color-warning-500) !important;
+  }
+  .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;
+  }
+
+  /* Success Filled (Colored BG) */
+  .input-number-variant-filled.input-number-status-success {
+    background-color: var(--color-success-50) !important;
+    border-color: var(--color-success-500) !important;
+  }
+  .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;
+  }
+
+  /* Info Filled (Colored BG) */
+  .input-number-variant-filled.input-number-status-info {
+    background-color: var(--color-info-50) !important;
+    border-color: var(--color-info-500) !important;
+  }
+  .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;
+  }
+
+  /* ====================
+     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;
+  }
+  .input-number-status-warning .rc-input-number-handler-wrap {
+    border-left-color: var(--color-warning-500) !important;
+  }
+  .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;
+  }
+}
diff --git a/packages/ui/src/components/forms/styles/input.style.css b/packages/ui/src/components/forms/styles/input.style.css
new file mode 100644
index 0000000..0115296
--- /dev/null
+++ b/packages/ui/src/components/forms/styles/input.style.css
@@ -0,0 +1,240 @@
+@layer components {
+  /* =========================================
+     BASE RESET
+     ========================================= */
+  .rc-input {
+    display: inline-block;
+    width: 100%;
+    height: var(--input-height);
+    padding: 0 12px;
+    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);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+  }
+
+  .rc-input::placeholder {
+    color: var(--input-placeholder);
+    opacity: 1;
+  }
+
+  .rc-input:disabled {
+    background-color: var(--disabled-bg) !important;
+    color: var(--disabled-text);
+    border-color: var(--disabled-border) !important;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* =========================================
+     1. VARIANT: OUTLINED
+     Rule: Never show colored background. 
+     Only change border color.
+     ========================================= */
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  /* 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 {
+    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);
+  }
+
+  /* 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);
+  }
+
+  /* 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);
+  }
+  .input-variant-filled.input-status-warning:focus {
+    background-color: #fff;
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+
+  /* 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 */
+
+  .rc-input-affix-wrapper-disabled {
+    background-color: var(--disabled-bg) !important;
+    color: var(--disabled-text);
+    border-color: var(--disabled-border) !important;
+    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;
+  }
+
+  /* 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;
+  }
+
+  /* 3. Prefix/Suffix Icon Spacing */
+  .rc-input-prefix {
+    @apply mr-2 flex items-center self-center shrink-0;
+    line-height: 0;
+  }
+
+  .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 {
+    border-color: var(--input-border);
+  }
+
+  /* Outlined - Error */
+  .input-variant-outlined.input-status-error.rc-input-affix-wrapper {
+    border-color: var(--color-error-500);
+  }
+
+  /* Filled - Error/Warning (Background Berwarna) */
+  .input-variant-filled.input-status-error.rc-input-affix-wrapper {
+    background-color: var(--color-error-50);
+    border-color: var(--color-error-500);
+  }
+
+  .input-variant-filled.input-status-warning.rc-input-affix-wrapper {
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-500);
+  }
+
+  .input-variant-filled.input-status-success.rc-input-affix-wrapper {
+    background-color: var(--color-success-50);
+    border-color: var(--color-success-500);
+  }
+
+  .input-variant-filled.input-status-info.rc-input-affix-wrapper {
+    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;
+  }
+}
diff --git a/packages/ui/src/components/forms/styles/textarea.style.css b/packages/ui/src/components/forms/styles/textarea.style.css
new file mode 100644
index 0000000..24865a0
--- /dev/null
+++ b/packages/ui/src/components/forms/styles/textarea.style.css
@@ -0,0 +1,161 @@
+@layer components {
+  /* =========================================
+   TEXTAREA STYLES
+   Adapts the same logic as Input but for Multiline
+   ========================================= */
+
+  .rc-textarea {
+    display: block;
+    width: 100%;
+    min-height: 80px; /* Default height for textarea */
+    padding: 8px 12px; /* Needs vertical padding unlike Input */
+
+    font-size: var(--input-font-size);
+    line-height: 1.5;
+    color: var(--input-text);
+
+    /* Default Background (White) */
+    background-color: var(--input-bg);
+
+    border: 1px solid transparent;
+    border-radius: var(--input-radius);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+    resize: vertical; /* Only allow vertical resizing */
+  }
+
+  .rc-textarea::placeholder {
+    color: var(--input-placeholder);
+    opacity: 1;
+  }
+
+  .rc-textarea:disabled {
+    background-color: var(--disabled-bg) !important;
+    color: var(--disabled-text);
+    border-color: var(--disabled-border) !important;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* =========================================
+   1. VARIANT: OUTLINED (Textarea)
+   Always White Background. Changes Border only.
+   ========================================= */
+
+  /* Normal */
+  .textarea-variant-outlined.textarea-status-normal {
+    background-color: var(--input-bg);
+    border-color: var(--input-border);
+  }
+  .textarea-variant-outlined.textarea-status-normal:hover {
+    border-color: var(--input-border-hover);
+  }
+  .textarea-variant-outlined.textarea-status-normal: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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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.
+   ========================================= */
+
+  /* Normal (Behaves like Outlined - White BG) */
+  .textarea-variant-filled.textarea-status-normal {
+    background-color: var(--input-bg);
+    border-color: var(--input-border);
+  }
+  .textarea-variant-filled.textarea-status-normal:hover {
+    border-color: var(--input-border-hover);
+  }
+  .textarea-variant-filled.textarea-status-normal: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 {
+    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 */
+    box-shadow: 0 0 0 3px var(--color-error-100);
+  }
+
+  /* Warning (Amber BG + Amber Border) */
+  .textarea-variant-filled.textarea-status-warning {
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-500);
+  }
+  .textarea-variant-filled.textarea-status-warning:focus {
+    background-color: #fff;
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+
+  /* Success (Green BG + Green Border) */
+  .textarea-variant-filled.textarea-status-success {
+    background-color: var(--color-success-50);
+    border-color: var(--color-success-500);
+  }
+  .textarea-variant-filled.textarea-status-success:focus {
+    background-color: #fff;
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
+
+  /* Info (Blue BG + Blue Border) */
+  .textarea-variant-filled.textarea-status-info {
+    background-color: var(--color-info-50);
+    border-color: var(--color-info-500);
+  }
+  .textarea-variant-filled.textarea-status-info:focus {
+    background-color: #fff;
+    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
new file mode 100644
index 0000000..ba3d6cc
--- /dev/null
+++ b/packages/ui/src/components/forms/textarea/textarea.component.tsx
@@ -0,0 +1,12 @@
+import RcTextArea from 'rc-textarea';
+import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
+
+export const TextArea = (props: TextAreaProps) => {
+  const { status, className, variant = 'outlined', ...restProps } = props;
+  const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
+  const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
+    .filter(Boolean)
+    .join(' ');
+
+  return <RcTextArea className={computedClassName} {...restProps} />;
+};
diff --git a/packages/ui/src/components/forms/types/index.ts b/packages/ui/src/components/forms/types/index.ts
new file mode 100644
index 0000000..0abe237
--- /dev/null
+++ b/packages/ui/src/components/forms/types/index.ts
@@ -0,0 +1,54 @@
+import type { FormProps as RcFormProps } from 'rc-field-form';
+import type { Rule } from 'rc-field-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';
+
+/**
+ * Define possible input statuses
+ */
+export type InputStatusType = 'normal' | 'error' | 'warning' | 'success' | 'info';
+export const VALID_INPUT_STATUSES: InputStatusType[] = ['normal', 'error', 'warning', 'success', 'info'];
+
+/**
+ * Define form props
+ */
+export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'children'> {
+  children?: ReactNode;
+}
+
+/**
+ * Define form item props
+ */
+export interface FormItemProps {
+  name?: string | (string | number)[];
+  label?: ReactNode;
+  children: ReactElement;
+  rules?: Rule[];
+  valuePropName?: string;
+  initialValue?: any;
+  status?: InputStatusType;
+}
+
+/**
+ * Define base component props
+ */
+interface BaseComponentProps {
+  status?: InputStatusType;
+  variant?: 'outlined' | 'filled';
+}
+
+/**
+ * Define specific component props
+ */
+export interface InputProps extends RcInputProps, BaseComponentProps {}
+
+/**
+ *  Extend specific component props from base props
+ *  This ensures consistency across different input components
+ *  and allows for shared properties like 'status'
+ */
+export interface InputPasswordProps extends InputProps {}
+export interface InputNumberProps extends RcInputNumberProps, BaseComponentProps {}
+export interface TextAreaProps extends RcTextAreaProps, BaseComponentProps {}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 01e7a83..3fcd5bb 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -12,3 +12,5 @@ export * from './system-pages/maintenance';
 export * from './system-pages/not-found';
 
 export * from './button/button';
+
+export * from './forms';
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index 44bd937..7075563 100644
--- a/packages/ui/src/globals.css
+++ b/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;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1baa02..99999d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,6 +164,18 @@ importers:
       '@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
@@ -386,7 +398,6 @@ packages:
   /@babel/runtime@7.28.4:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/template@7.27.2:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
@@ -1127,6 +1138,20 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: false
 
+  /@rc-component/async-validator@5.1.0:
+    resolution: {integrity: sha512-n4HcR5siNUXRX23nDizbZBQPO0ZM/5oTtmKZ6/eqL0L2bo747cklFdZGRN2f+c9qWGICwDzrhW0H7tE9PptdcA==}
+    engines: {node: '>=14.x'}
+    dependencies:
+      '@babel/runtime': 7.28.4
+    dev: false
+
+  /@rc-component/mini-decimal@1.1.0:
+    resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
+    engines: {node: '>=8.x'}
+    dependencies:
+      '@babel/runtime': 7.28.4
+    dev: false
+
   /@rolldown/pluginutils@1.0.0-beta.53:
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
     dev: true
@@ -3170,6 +3195,10 @@ 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'}
@@ -6026,6 +6055,89 @@ 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
@@ -6074,6 +6186,10 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
 
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    dev: false
+
   /react-refresh@0.18.0:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
@@ -6248,6 +6364,10 @@ 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'}