From 2c21da111e9e2fcbd18b3933e506ba97adf047c9 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 2 Feb 2026 16:36:23 +0700
Subject: [PATCH] refactor: remove variant prop from input components and
 styles

- Removed the variant prop from Checkbox, Input, InputNumber, Switch, TextArea components.
- Updated styles to eliminate variant-specific classes for Checkbox, Input, InputNumber, TextArea, and Switch.
- Simplified class names in stylesheets to focus on status only.
- Adjusted documentation to reflect the removal of the variant prop.
---
 .../showcase/components/checkbox.showcase.tsx |  40 +---
 .../components/date-picker.showcase.tsx       |   0
 .../showcase/components/input.showcase.tsx    |  80 +------
 .../showcase/components/switch.showcase.tsx   |  29 ++-
 .../forms/checkbox/checkbox.component.tsx     |   3 +-
 .../forms/input/input-number.component.tsx    |   8 +-
 .../forms/input/input.component.tsx           |   8 +-
 .../forms/styles/checkbox.style.css           |  81 -------
 .../forms/styles/input-number.style.css       | 153 +++-----------
 .../components/forms/styles/input.style.css   | 107 ++--------
 .../components/forms/styles/picker.style.css  |   0
 .../components/forms/styles/switch.style.css  | 197 ++++++------------
 .../forms/styles/textarea.style.css           | 102 ++-------
 .../forms/switch/switch.component.tsx         |  13 +-
 .../forms/textarea/textarea.component.tsx     |  15 +-
 .../ui/src/components/forms/types/index.ts    |   4 +-
 16 files changed, 164 insertions(+), 676 deletions(-)
 create mode 100644 apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
 create mode 100644 packages/ui/src/components/forms/styles/picker.style.css

diff --git a/apps/web/src/apps/modules/example/showcase/components/checkbox.showcase.tsx b/apps/web/src/apps/modules/example/showcase/components/checkbox.showcase.tsx
index 52760d5..2439f6c 100644
--- a/apps/web/src/apps/modules/example/showcase/components/checkbox.showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/components/checkbox.showcase.tsx
@@ -33,8 +33,8 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
           <div className="p-4 border border-gray-100 rounded-xl bg-gray-50/50">
             <span className="block mb-3 text-xs font-bold text-gray-400 uppercase">Filled</span>
             <div className="flex gap-4">
-              <Checkbox variant="filled" status={overrideStatus} label="Standard" defaultChecked />
-              <Checkbox variant="filled" status={overrideStatus} label="Unchecked" />
+              <Checkbox status={overrideStatus} label="Standard" defaultChecked />
+              <Checkbox status={overrideStatus} label="Unchecked" />
             </div>
           </div>
         </div>
@@ -60,40 +60,6 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
             <Checkbox status={resolveStatus('success')} label={resolveStatus('success')} defaultChecked />
             <Checkbox status={resolveStatus('info')} label={resolveStatus('info')} defaultChecked />
           </div>
-
-          {/* Filled Status */}
-          <div className="flex flex-wrap gap-6 p-6 bg-gray-50 border border-gray-200 rounded-xl">
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('default')}
-              label={`${resolveStatus('default')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('error')}
-              label={`${resolveStatus('error')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('warning')}
-              label={`${resolveStatus('warning')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('success')}
-              label={`${resolveStatus('success')} Filled`}
-              defaultChecked
-            />
-            <Checkbox
-              variant="filled"
-              status={resolveStatus('info')}
-              label={`${resolveStatus('info')} Filled`}
-              defaultChecked
-            />
-          </div>
         </div>
       </section>
 
@@ -124,7 +90,7 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
             <div className="flex flex-col gap-3">
               <Checkbox disabled label="Disabled Unchecked" />
               <Checkbox disabled defaultChecked label="Disabled Checked" />
-              <Checkbox disabled variant="filled" label="Disabled Filled" />
+              <Checkbox disabled label="Disabled Filled" />
             </div>
           </div>
 
diff --git a/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx b/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/src/apps/modules/example/showcase/components/input.showcase.tsx b/apps/web/src/apps/modules/example/showcase/components/input.showcase.tsx
index 495c4c7..4655398 100644
--- a/apps/web/src/apps/modules/example/showcase/components/input.showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/components/input.showcase.tsx
@@ -69,75 +69,9 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
         </div>
       </section>
 
-      {/* --- SECTION 2: FILLED VARIANT --- */}
-      <section className="space-y-6">
-        <h2 className="text-lg font-bold text-gray-800 border-b pb-2">Filled Variant</h2>
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <div className="space-y-3">
-            <Label>Basic Filled</Label>
-            <Input variant="filled" status={status} placeholder="Filled Input" />
-            <InputPassword variant="filled" status={status} placeholder="Filled Password" />
-            <InputNumber variant="filled" status={status} className="w-full" placeholder="Filled Number" />
-            <InputCurrency variant="filled" status={status} className="w-full" placeholder="Filled Currency" />
-            <TextArea variant="filled" status={status} placeholder="Filled TextArea" rows={2} />
-          </div>
+      {/* --- SECTION 2: Component States & Validation --- */}
 
-          <div className="space-y-3">
-            <Label>Filled + Prefix</Label>
-            <Input variant="filled" status={status} prefix={<Fix>ID</Fix>} placeholder="12345" />
-            <InputPassword variant="filled" status={status} prefix={<Fix>🔑</Fix>} placeholder="password" />
-            <InputNumber variant="filled" status={status} prefix={<Fix>Qty:</Fix>} className="w-full" />
-            <InputCurrency variant="filled" status={status} prefix="Rp " className="w-full" />
-          </div>
-
-          <div className="space-y-3">
-            <Label>Filled + Suffix</Label>
-            <Input variant="filled" status={status} suffix={<Fix>Optional</Fix>} placeholder="Full Name" />
-            <InputPassword variant="filled" status={status} suffix={<Fix>?</Fix>} placeholder="password" />
-            <InputNumber variant="filled" status={status} suffix={<Fix>pts</Fix>} className="w-full" />
-            <InputCurrency variant="filled" status={status} suffix={<Fix>tax-incl</Fix>} className="w-full" />
-          </div>
-          <div className="space-y-3">
-            <Label>Both & Special</Label>
-            <Input
-              variant="filled"
-              status={status}
-              prefix={<Fix>https://</Fix>}
-              suffix={<Fix>.io</Fix>}
-              placeholder="domain"
-            />
-            {/* Password Tanpa Toggle */}
-            <InputPassword
-              variant="filled"
-              status={status}
-              visibilityToggle={false}
-              prefix={<Fix>🔑</Fix>}
-              suffix={<Fix>?</Fix>}
-              placeholder="Hidden Password"
-            />
-            <InputNumber
-              variant="filled"
-              status={status}
-              prefix={<Fix>+</Fix>}
-              suffix={<Fix>%</Fix>}
-              className="w-full"
-              placeholder="tax"
-            />
-            <InputCurrency
-              variant="filled"
-              status={status}
-              prefix="USD "
-              suffix={<Fix>cents</Fix>}
-              className="w-full"
-              placeholder="amount"
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* --- SECTION 3: Component States & Validation --- */}
-
-      <section className="space-y-6">
+      <section className="space-y-6 mt-6">
         <h2 className="text-lg font-bold text-gray-800 border-b pb-2">Component States & Validation</h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -181,11 +115,11 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
           <div className="space-y-3">
             <Label>Error (Filled)</Label>
             <div className="space-y-3">
-              <Input variant="filled" status="error" placeholder="Invalid input" />
-              <InputPassword variant="filled" status="error" placeholder="Wrong password" />
-              <InputNumber variant="filled" status="error" className="w-full" placeholder="Out of range" />
-              <InputCurrency variant="filled" status="error" className="w-full" placeholder="Invalid amount" />
-              <TextArea variant="filled" status="error" placeholder="Error in message" rows={2} />
+              <Input status="error" placeholder="Invalid input" />
+              <InputPassword status="error" placeholder="Wrong password" />
+              <InputNumber status="error" className="w-full" placeholder="Out of range" />
+              <InputCurrency status="error" className="w-full" placeholder="Invalid amount" />
+              <TextArea status="error" placeholder="Error in message" rows={2} />
             </div>
           </div>
         </div>
diff --git a/apps/web/src/apps/modules/example/showcase/components/switch.showcase.tsx b/apps/web/src/apps/modules/example/showcase/components/switch.showcase.tsx
index 7f3e825..d4b13c6 100644
--- a/apps/web/src/apps/modules/example/showcase/components/switch.showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/components/switch.showcase.tsx
@@ -25,8 +25,8 @@ export const SwitchShowcase = () => {
                 <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Outlined (Default)</h3>
                 <p className="text-xs text-gray-400 mb-2">Background transparan saat off.</p>
                 <div className="flex flex-col gap-3">
-                  <Switch variant="outlined" label="Outlined Off" />
-                  <Switch variant="outlined" defaultChecked label="Outlined On" />
+                  <Switch label="Outlined Off" />
+                  <Switch defaultChecked label="Outlined On" />
                 </div>
               </div>
 
@@ -35,8 +35,8 @@ export const SwitchShowcase = () => {
                 <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Filled</h3>
                 <p className="text-xs text-gray-400 mb-2">Background abu-abu solid saat off.</p>
                 <div className="flex flex-col gap-3">
-                  <Switch variant="filled" label="Filled Off" />
-                  <Switch variant="filled" defaultChecked label="Filled On" />
+                  <Switch label="Filled Off" />
+                  <Switch defaultChecked label="Filled On" />
                 </div>
               </div>
             </div>
@@ -53,27 +53,27 @@ export const SwitchShowcase = () => {
           <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="default" defaultChecked />
+                <Switch status="default" defaultChecked />
                 <span className="text-xs font-medium text-gray-500">Default (Brand)</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="success" defaultChecked />
+                <Switch status="success" defaultChecked />
                 <span className="text-xs font-medium text-green-600">Success</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="warning" defaultChecked />
+                <Switch status="warning" defaultChecked />
                 <span className="text-xs font-medium text-amber-600">Warning</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="error" defaultChecked />
+                <Switch status="error" defaultChecked />
                 <span className="text-xs font-medium text-red-600">Error</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="outlined" status="info" defaultChecked />
+                <Switch status="info" defaultChecked />
                 <span className="text-xs font-medium text-sky-600">Info</span>
               </div>
             </div>
@@ -82,27 +82,27 @@ export const SwitchShowcase = () => {
           <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="default" defaultChecked />
+                <Switch status="default" defaultChecked />
                 <span className="text-xs font-medium text-gray-500">Default (Brand)</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="success" defaultChecked />
+                <Switch status="success" defaultChecked />
                 <span className="text-xs font-medium text-green-600">Success</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="warning" defaultChecked />
+                <Switch status="warning" defaultChecked />
                 <span className="text-xs font-medium text-amber-600">Warning</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="error" defaultChecked />
+                <Switch status="error" defaultChecked />
                 <span className="text-xs font-medium text-red-600">Error</span>
               </div>
 
               <div className="flex flex-col items-center gap-2">
-                <Switch variant="filled" status="info" defaultChecked />
+                <Switch status="info" defaultChecked />
                 <span className="text-xs font-medium text-sky-600">Info</span>
               </div>
             </div>
@@ -209,7 +209,6 @@ export const SwitchShowcase = () => {
                 loading={loading}
                 label="Control Me"
                 status="success"
-                variant="filled"
               />
             </div>
           </div>
diff --git a/packages/ui/src/components/forms/checkbox/checkbox.component.tsx b/packages/ui/src/components/forms/checkbox/checkbox.component.tsx
index 3368a10..41fec30 100644
--- a/packages/ui/src/components/forms/checkbox/checkbox.component.tsx
+++ b/packages/ui/src/components/forms/checkbox/checkbox.component.tsx
@@ -25,14 +25,13 @@ import { InputRef } from '@rc-component/input/lib/interface';
  * @returns JSX.Element
  */
 export const Checkbox = forwardRef<InputRef, CheckboxProps>((props, ref) => {
-  const { label, status = 'default', variant = 'outlined', className, children, ...rest } = props;
+  const { label, status = 'default', className, children, ...rest } = props;
 
   const displayLabel = label || children;
 
   const wrapperClass = [
     'rc-checkbox-wrapper',
     `checkbox-status-${status}`,
-    `checkbox-variant-${variant}`,
     rest.disabled ? 'rc-checkbox-wrapper-disabled' : '',
     className,
   ]
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 c78a9c5..c223e20 100644
--- a/packages/ui/src/components/forms/input/input-number.component.tsx
+++ b/packages/ui/src/components/forms/input/input-number.component.tsx
@@ -13,14 +13,12 @@
  *   value={10}
  *   onChange={(val) => console.log(val)}
  *   status="success"
- *   variant="outlined"
  * />
  * ```
  *
  * @param {InputNumberProps} props - The input number component props
  * @param {InputStatusType} [props.status] - The validation status ('default', 'success', 'error', etc.)
  * @param {string} [props.className] - Additional CSS classes to apply
- * @param {'outlined' | 'filled' | 'borderless'} [props.variant='outlined'] - The visual variant style
  * @param {React.Ref<HTMLInputElement>} ref - Ref to the underlying input element
  *
  * @returns {React.ReactElement} The rendered input number component
@@ -47,13 +45,11 @@ const DownIcon = () => (
 );
 
 export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
-  const { status, className, variant = 'outlined', ...restProps } = props;
+  const { status, className, ...restProps } = props;
 
   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(' ');
+  const computedClassName = [className, `input-number-status-${currentStatus}`].filter(Boolean).join(' ');
 
   return (
     <RcInputNumber
diff --git a/packages/ui/src/components/forms/input/input.component.tsx b/packages/ui/src/components/forms/input/input.component.tsx
index 3cffe68..adb4b46 100644
--- a/packages/ui/src/components/forms/input/input.component.tsx
+++ b/packages/ui/src/components/forms/input/input.component.tsx
@@ -3,16 +3,15 @@ import RcInput, { InputRef } from '@rc-component/input';
 import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
 
 /**
- * Input component that wraps the RC Input library with custom status and variant support.
+ * Input component that wraps the RC Input library with custom status.
  *
  * @component
  * @param {InputProps} props - The input component props
  * @param {InputStatusType} [props.status] - The validation status of the input (validated against VALID_INPUT_STATUSES)
  * @param {string} [props.className] - Additional CSS classes to apply to the input
- * @param {'outlined' | 'filled'} [props.variant='outlined'] - The visual variant of the input
  * @param {boolean} [props.disabled] - Whether the input is disabled
  * @param {InputRef} ref - Reference to the underlying RC Input element
- * @returns {React.ReactElement} The rendered Input component with computed classes for status, variant, and disabled state
+ * @returns {React.ReactElement} The rendered Input component with computed classes for status, and disabled state
  *
  * @remarks
  * - Invalid status values default to 'default'
@@ -20,7 +19,7 @@ import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
  * - The 'input-disabled' helper class is manually added for custom wrapper styling when needed
  */
 export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
-  const { status, className, variant = 'outlined', disabled, ...restProps } = props;
+  const { status, className, disabled, ...restProps } = props;
 
   // Determine current status, defaulting to 'default' if invalid
   const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
@@ -30,7 +29,6 @@ export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const computedClassName = [
     className,
     `input-status-${currentStatus}`,
-    `input-variant-${variant}`,
     // Add custom disabled class if disabled
     disabled ? 'input-disabled' : '',
   ]
diff --git a/packages/ui/src/components/forms/styles/checkbox.style.css b/packages/ui/src/components/forms/styles/checkbox.style.css
index d4daae1..2a65277 100644
--- a/packages/ui/src/components/forms/styles/checkbox.style.css
+++ b/packages/ui/src/components/forms/styles/checkbox.style.css
@@ -184,87 +184,6 @@
     box-shadow: 0 0 0 3px var(--color-info-100);
   }
 
-  /* =========================================
-     VARIANT: FILLED
-     ========================================= */
-
-  /* --- Default Filled --- */
-  .checkbox-variant-filled .rc-checkbox-inner {
-    background-color: var(--color-gray-50);
-    border-color: var(--input-border); /* Slightly border to remain visible on white background */
-  }
-  .checkbox-variant-filled:hover .rc-checkbox-inner {
-    background-color: var(--color-gray-100);
-    border-color: var(--input-border-hover);
-  }
-  /* Checked State for Filled */
-  .checkbox-variant-filled.checkbox-status-default .rc-checkbox-checked .rc-checkbox-inner {
-    background-color: var(--color-brand-500);
-    border-color: var(--color-brand-500);
-  }
-
-  /* --- Error Filled --- */
-  .checkbox-variant-filled.checkbox-status-error .rc-checkbox-inner {
-    background-color: var(--color-error-50);
-    border-color: var(--color-error-300);
-  }
-  .checkbox-variant-filled.checkbox-status-error:hover .rc-checkbox-inner {
-    background-color: var(--color-error-100);
-    border-color: var(--color-error-500);
-  }
-  .checkbox-variant-filled.checkbox-status-error .rc-checkbox-checked .rc-checkbox-inner {
-    background-color: var(--color-error-500);
-    border-color: var(--color-error-500);
-  }
-
-  /* --- Warning Filled --- */
-  .checkbox-variant-filled.checkbox-status-warning .rc-checkbox-inner {
-    background-color: var(--color-warning-50);
-    border-color: var(--color-warning-300);
-  }
-  .checkbox-variant-filled.checkbox-status-warning:hover .rc-checkbox-inner {
-    background-color: var(--color-warning-100);
-    border-color: var(--color-warning-500);
-  }
-  .checkbox-variant-filled.checkbox-status-warning .rc-checkbox-checked .rc-checkbox-inner {
-    background-color: var(--color-warning-500);
-    border-color: var(--color-warning-500);
-  }
-
-  /* --- Success Filled --- */
-  .checkbox-variant-filled.checkbox-status-success .rc-checkbox-inner {
-    background-color: var(--color-success-50);
-    border-color: var(--color-success-300);
-  }
-  .checkbox-variant-filled.checkbox-status-success:hover .rc-checkbox-inner {
-    background-color: var(--color-success-100);
-    border-color: var(--color-success-500);
-  }
-  .checkbox-variant-filled.checkbox-status-success .rc-checkbox-checked .rc-checkbox-inner {
-    background-color: var(--color-success-500);
-    border-color: var(--color-success-500);
-  }
-
-  /* --- Info Filled --- */
-  .checkbox-variant-filled.checkbox-status-info .rc-checkbox-inner {
-    background-color: var(--color-info-50);
-    border-color: var(--color-info-300);
-  }
-  .checkbox-variant-filled.checkbox-status-info:hover .rc-checkbox-inner {
-    background-color: var(--color-info-100);
-    border-color: var(--color-info-500);
-  }
-  .checkbox-variant-filled.checkbox-status-info .rc-checkbox-checked .rc-checkbox-inner {
-    background-color: var(--color-info-500);
-    border-color: var(--color-info-500);
-  }
-
-  /* Focus Ring for Filled Variant */
-  .checkbox-variant-filled .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
-    /* Box shadow will follow the status color from the STATUS MATRIX block above */
-    outline: none;
-  }
-
   /* =========================================
      DISABLED STATE
      ========================================= */
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 e84c6f4..32cf33d 100644
--- a/packages/ui/src/components/forms/styles/input-number.style.css
+++ b/packages/ui/src/components/forms/styles/input-number.style.css
@@ -147,205 +147,106 @@
   }
 
   /* =========================================
-     3. STATUS MATRIX (VARIANT: OUTLINED)
+     3. STATUS MATRIX
      ========================================= */
 
   /* --- DEFAULT --- */
-  .input-number-variant-outlined.input-number-status-default {
+  .input-number-status-default {
     border-color: var(--input-border);
   }
-  .input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
+  .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 {
+  .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 {
+  .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 {
+  .input-number-status-default:focus-within .rc-input-number-action-up {
     border-bottom-color: var(--focus-border-color);
   }
 
   /* --- ERROR --- */
-  .input-number-variant-outlined.input-number-status-error {
+  .input-number-status-error {
     border-color: var(--color-error-500);
   }
-  .input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
+  .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 {
+  .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 {
+  .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 {
+  .input-number-status-error .rc-input-number-action-up {
     border-bottom-color: var(--color-error-500);
   }
 
   /* --- WARNING --- */
-  .input-number-variant-outlined.input-number-status-warning {
+  .input-number-status-warning {
     border-color: var(--color-warning-500);
   }
-  .input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
+  .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 {
+  .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 {
+  .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 {
+  .input-number-status-warning .rc-input-number-action-up {
     border-bottom-color: var(--color-warning-500);
   }
 
   /* --- SUCCESS --- */
-  .input-number-variant-outlined.input-number-status-success {
+  .input-number-status-success {
     border-color: var(--color-success-500);
   }
-  .input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
+  .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 {
+  .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 {
+  .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 {
+  .input-number-status-success .rc-input-number-action-up {
     border-bottom-color: var(--color-success-500);
   }
 
   /* --- INFO --- */
-  .input-number-variant-outlined.input-number-status-info {
+  .input-number-status-info {
     border-color: var(--color-info-500);
   }
-  .input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
+  .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 {
+  .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 {
+  .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 {
+  .input-number-status-info .rc-input-number-action-up {
     border-bottom-color: var(--color-info-500);
   }
 
   /* =========================================
-     4. STATUS MATRIX (VARIANT: FILLED)
-     ========================================= */
-
-  /* --- 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-default:hover:not(.rc-input-number-disabled) {
-    border-color: var(--input-border-hover);
-  }
-  .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 --- */
-  .input-number-variant-filled.input-number-status-error {
-    background-color: var(--color-error-50);
-    border-color: var(--color-error-500);
-  }
-  /* 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 --- */
-  .input-number-variant-filled.input-number-status-warning {
-    background-color: var(--color-warning-50);
-    border-color: var(--color-warning-500);
-  }
-  .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 --- */
-  .input-number-variant-filled.input-number-status-success {
-    background-color: var(--color-success-50);
-    border-color: var(--color-success-500);
-  }
-  .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 --- */
-  .input-number-variant-filled.input-number-status-info {
-    background-color: var(--color-info-50);
-    border-color: var(--color-info-500);
-  }
-  .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);
-  }
-
-  /* =========================================
-     5. DISABLED STATE
+     4. DISABLED STATE
      ========================================= */
   .rc-input-number-disabled {
     background-color: var(--disabled-bg) !important;
diff --git a/packages/ui/src/components/forms/styles/input.style.css b/packages/ui/src/components/forms/styles/input.style.css
index d915c11..167dab8 100644
--- a/packages/ui/src/components/forms/styles/input.style.css
+++ b/packages/ui/src/components/forms/styles/input.style.css
@@ -163,141 +163,74 @@
      ------------------------------------------------ */
 
   /* DEFAULT */
-  .input-variant-outlined.input-status-default {
+  .input-status-default {
     border-color: var(--input-border);
   }
   /* Hover */
-  .input-variant-outlined.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
+  .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 {
+  .input-status-default:focus,
+  .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;
   }
 
   /* ERROR */
-  .input-variant-outlined.input-status-error {
+  .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) {
+  .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 {
+  .input-status-error:focus,
+  .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 {
+  .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) {
+  .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 {
+  .input-status-warning:focus,
+  .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 {
+  .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) {
+  .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 {
+  .input-status-success:focus,
+  .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 {
+  .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) {
+  .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 {
+  .input-status-info:focus,
+  .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);
-  }
-  /* When focused, background becomes default input-bg (white) */
-  .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);
-  }
-
-  /* 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);
-  }
-
-  /* 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);
-  }
-
-  /* INFO FILLED */
-  .input-variant-filled.input-status-info {
-    background-color: var(--color-info-50);
-    border-color: var(--color-info-500);
-  }
-  .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/picker.style.css b/packages/ui/src/components/forms/styles/picker.style.css
new file mode 100644
index 0000000..e69de29
diff --git a/packages/ui/src/components/forms/styles/switch.style.css b/packages/ui/src/components/forms/styles/switch.style.css
index 32b8610..d306303 100644
--- a/packages/ui/src/components/forms/styles/switch.style.css
+++ b/packages/ui/src/components/forms/styles/switch.style.css
@@ -150,42 +150,20 @@
     }
   }
 
-  /* =========================================
-     VARIANTS & STATUS MATRIX
-     ========================================= */
-
-  /* -------------------------------
-     VARIANT: OUTLINED (Default)
-     Looks like an empty input when off.
-     ------------------------------- */
-  .switch-variant-outlined .rc-switch {
-    background-color: var(--color-gray-200);
-    border-color: var(--color-gray-200);
-  }
-
-  .switch-variant-outlined .rc-switch:hover {
-    border-color: var(--color-brand-500);
-  }
-
-  /* -------------------------------
-     VARIANT: FILLED
-     Looks like a standard grey toggle when off.
-     ------------------------------- */
-  .switch-variant-filled .rc-switch {
-    background-color: var(--color-gray-200);
-    border-color: var(--color-gray-200);
-  }
-
-  .switch-variant-filled .rc-switch:hover {
-    border-color: var(--color-brand-500);
-  }
-
   /* =========================================
      STATUS COLORS (Applied to Checked State)
      ========================================= */
 
   /* --- DEFAULT (Brand) --- */
 
+  .switch-status-default .rc-switch {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-200);
+  }
+
+  .switch-status-default .rc-switch:hover {
+    border-color: var(--color-brand-500);
+  }
   .switch-status-default .rc-switch-checked {
     border-color: var(--color-brand-500);
     background-color: var(--color-brand-500);
@@ -198,30 +176,16 @@
 
   /* --- ERROR --- */
   /* Hover Off state (Optional: Tint border red on hover even if off) */
-  .switch-status-error.switch-variant-outlined .rc-switch {
-    background-color: var(--input-bg);
-    border-color: var(--color-error-300);
-  }
-
-  .switch-status-error.switch-variant-outlined .rc-switch:hover {
-    border-color: var(--color-error-500);
-  }
-
-  .switch-status-error.switch-variant-outlined .rc-switch:after {
-    background-color: var(--color-error-300);
-    box-shadow: 0 2px 4px 0 var(--color-error-100);
-  }
-
-  .switch-status-error.switch-variant-filled .rc-switch {
+  .switch-status-error .rc-switch {
     background-color: var(--color-error-50);
     border-color: var(--color-error-300);
   }
 
-  .switch-status-error.switch-variant-filled .rc-switch:hover {
+  .switch-status-error .rc-switch:hover {
     border-color: var(--color-error-500);
   }
 
-  .switch-status-error.switch-variant-filled .rc-switch:after {
+  .switch-status-error .rc-switch:after {
     background-color: #fff;
   }
 
@@ -235,7 +199,7 @@
     box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
   }
 
-  .switch-status-error.switch-variant-filled .rc-switch-checked {
+  .switch-status-error .rc-switch-checked {
     border-color: var(--color-error-500);
     background-color: var(--color-error-500);
   }
@@ -251,85 +215,18 @@
     color: var(--color-error-500);
   }
 
-  /* --- WARNING --- */
-  .switch-status-warning.switch-variant-outlined .rc-switch {
-    background-color: var(--input-bg);
-    border-color: var(--color-warning-300);
-  }
-
-  .switch-status-warning.switch-variant-outlined .rc-switch:hover {
-    border-color: var(--color-warning-500);
-  }
-
-  .switch-status-warning.switch-variant-outlined .rc-switch:after {
-    background-color: var(--color-warning-300);
-    box-shadow: 0 2px 4px 0 var(--color-warning-100);
-  }
-
-  .switch-status-warning.switch-variant-filled .rc-switch {
-    background-color: var(--color-warning-50);
-    border-color: var(--color-warning-300);
-  }
-
-  .switch-status-warning.switch-variant-filled .rc-switch:hover {
-    border-color: var(--color-warning-500);
-  }
-
-  .switch-status-warning.switch-variant-filled .rc-switch:after {
-    background-color: #fff;
-  }
-
-  /* Checked State */
-  .switch-status-warning.switch-variant-outlined .rc-switch-checked {
-    border-color: var(--color-warning-500);
-    background-color: var(--color-warning-500);
-  }
-  .switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
-    background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
-  }
-
-  .switch-status-warning.switch-variant-filled .rc-switch-checked {
-    border-color: var(--color-warning-500);
-    background-color: var(--color-warning-500);
-  }
-
-  /* Focus */
-  .switch-status-warning .rc-switch:focus-visible,
-  .switch-status-warning .rc-switch:focus {
-    box-shadow: 0 0 0 3px var(--color-warning-100);
-    border-color: var(--color-warning-500);
-  }
-  /* Loading Icon Color */
-  .switch-status-warning .rc-switch-loading-icon {
-    color: var(--color-warning-500);
-  }
-
   /* --- SUCCESS --- */
-  .switch-status-success.switch-variant-outlined .rc-switch {
-    background-color: var(--input-bg);
-    border-color: var(--color-success-300);
-  }
 
-  .switch-status-success.switch-variant-outlined .rc-switch:hover {
-    border-color: var(--color-success-500);
-  }
-
-  .switch-status-success.switch-variant-outlined .rc-switch:after {
-    background-color: var(--color-success-300);
-    box-shadow: 0 2px 4px 0 var(--color-success-100);
-  }
-
-  .switch-status-success.switch-variant-filled .rc-switch {
+  .switch-status-success .rc-switch {
     background-color: var(--color-success-50);
     border-color: var(--color-success-300);
   }
 
-  .switch-status-success.switch-variant-filled .rc-switch:hover {
+  .switch-status-success .rc-switch:hover {
     border-color: var(--color-success-500);
   }
 
-  .switch-status-success.switch-variant-filled .rc-switch:after {
+  .switch-status-success .rc-switch:after {
     background-color: #fff;
   }
 
@@ -343,7 +240,7 @@
     box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
   }
 
-  .switch-status-success.switch-variant-filled .rc-switch-checked {
+  .switch-status-success .rc-switch-checked {
     border-color: var(--color-success-500);
     background-color: var(--color-success-500);
   }
@@ -359,31 +256,57 @@
     color: var(--color-success-500);
   }
 
+  /* --- WARNING --- */
+  .switch-status-warning .rc-switch {
+    background-color: var(--color-warning-50);
+    border-color: var(--color-warning-300);
+  }
+
+  .switch-status-warning .rc-switch:hover {
+    border-color: var(--color-warning-500);
+  }
+
+  .switch-status-warning .rc-switch:after {
+    background-color: #fff;
+  }
+
+  /* Checked State */
+  .switch-status-warning.switch-variant-outlined .rc-switch-checked {
+    border-color: var(--color-warning-500);
+    background-color: var(--color-warning-500);
+  }
+  .switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+  }
+
+  .switch-status-warning .rc-switch-checked {
+    border-color: var(--color-warning-500);
+    background-color: var(--color-warning-500);
+  }
+
+  /* Focus */
+  .switch-status-warning .rc-switch:focus-visible,
+  .switch-status-warning .rc-switch:focus {
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+    border-color: var(--color-warning-500);
+  }
+  /* Loading Icon Color */
+  .switch-status-warning .rc-switch-loading-icon {
+    color: var(--color-warning-500);
+  }
+
   /* --- INFO --- */
-  .switch-status-info.switch-variant-outlined .rc-switch {
-    background-color: var(--input-bg);
-    border-color: var(--color-info-300);
-  }
-
-  .switch-status-info.switch-variant-outlined .rc-switch:hover {
-    border-color: var(--color-info-500);
-  }
-
-  .switch-status-info.switch-variant-outlined .rc-switch:after {
-    background-color: var(--color-info-300);
-    box-shadow: 0 2px 4px 0 var(--color-info-100);
-  }
-
-  .switch-status-info.switch-variant-filled .rc-switch {
+  .switch-status-info .rc-switch {
     background-color: var(--color-info-50);
     border-color: var(--color-info-300);
   }
 
-  .switch-status-info.switch-variant-filled .rc-switch:hover {
+  .switch-status-info .rc-switch:hover {
     border-color: var(--color-info-500);
   }
 
-  .switch-status-info.switch-variant-filled .rc-switch:after {
+  .switch-status-info .rc-switch:after {
     background-color: #fff;
   }
 
@@ -397,7 +320,7 @@
     box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
   }
 
-  .switch-status-info.switch-variant-filled .rc-switch-checked {
+  .switch-status-info .rc-switch-checked {
     border-color: var(--color-info-500);
     background-color: var(--color-info-500);
   }
diff --git a/packages/ui/src/components/forms/styles/textarea.style.css b/packages/ui/src/components/forms/styles/textarea.style.css
index 5035034..d9f21af 100644
--- a/packages/ui/src/components/forms/styles/textarea.style.css
+++ b/packages/ui/src/components/forms/styles/textarea.style.css
@@ -118,137 +118,75 @@
      ------------------------------------------------ */
 
   /* --- Default --- */
-  .textarea-variant-outlined.textarea-status-default {
+  .textarea-status-default {
     background-color: var(--input-bg);
     border-color: var(--input-border);
   }
   /* Hover */
-  .textarea-variant-outlined.textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
+  .textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
     border-color: var(--input-border-hover);
   }
   /* Focus (Standalone OR Wrapper Focused) */
-  .rc-textarea.textarea-variant-outlined.textarea-status-default:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-default.rc-textarea-affix-wrapper-focused {
+  .rc-textarea.textarea-status-default:focus,
+  .rc-textarea-affix-wrapper.textarea-status-default.rc-textarea-affix-wrapper-focused {
     border-color: var(--focus-border-color);
     box-shadow: 0 0 0 3px var(--focus-ring-color);
     z-index: 1;
   }
 
   /* --- Error --- */
-  .textarea-variant-outlined.textarea-status-error {
+  .textarea-status-error {
     border-color: var(--color-error-500);
     z-index: 1;
   }
-  .textarea-variant-outlined.textarea-status-error:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
+  .textarea-status-error:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
     border-color: var(--color-error-600);
   }
-  .rc-textarea.textarea-variant-outlined.textarea-status-error:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-error.rc-textarea-affix-wrapper-focused {
+  .rc-textarea.textarea-status-error:focus,
+  .rc-textarea-affix-wrapper.textarea-status-error.rc-textarea-affix-wrapper-focused {
     border-color: var(--color-error-600);
     box-shadow: 0 0 0 3px var(--color-error-100);
   }
 
   /* --- Warning --- */
-  .textarea-variant-outlined.textarea-status-warning {
+  .textarea-status-warning {
     border-color: var(--color-warning-500);
     z-index: 1;
   }
-  .textarea-variant-outlined.textarea-status-warning:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
+  .textarea-status-warning:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
     border-color: var(--color-warning-600);
   }
-  .rc-textarea.textarea-variant-outlined.textarea-status-warning:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-warning.rc-textarea-affix-wrapper-focused {
+  .rc-textarea.textarea-status-warning:focus,
+  .rc-textarea-affix-wrapper.textarea-status-warning.rc-textarea-affix-wrapper-focused {
     border-color: var(--color-warning-600);
     box-shadow: 0 0 0 3px var(--color-warning-100);
   }
 
   /* --- Success --- */
-  .textarea-variant-outlined.textarea-status-success {
+  .textarea-status-success {
     border-color: var(--color-success-500);
     z-index: 1;
   }
-  .textarea-variant-outlined.textarea-status-success:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
+  .textarea-status-success:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
     border-color: var(--color-success-600);
   }
-  .rc-textarea.textarea-variant-outlined.textarea-status-success:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-success.rc-textarea-affix-wrapper-focused {
+  .rc-textarea.textarea-status-success:focus,
+  .rc-textarea-affix-wrapper.textarea-status-success.rc-textarea-affix-wrapper-focused {
     border-color: var(--color-success-600);
     box-shadow: 0 0 0 3px var(--color-success-100);
   }
 
   /* --- Info --- */
-  .textarea-variant-outlined.textarea-status-info {
+  .textarea-status-info {
     border-color: var(--color-info-500);
     z-index: 1;
   }
-  .textarea-variant-outlined.textarea-status-info:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
+  .textarea-status-info:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
     border-color: var(--color-info-600);
   }
-  .rc-textarea.textarea-variant-outlined.textarea-status-info:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-info.rc-textarea-affix-wrapper-focused {
+  .rc-textarea.textarea-status-info:focus,
+  .rc-textarea-affix-wrapper.textarea-status-info.rc-textarea-affix-wrapper-focused {
     border-color: var(--color-info-600);
     box-shadow: 0 0 0 3px var(--color-info-100);
   }
-
-  /* ------------------------------------------------
-     2. VARIANT: FILLED
-     ------------------------------------------------ */
-
-  /* --- Default Filled --- */
-  .textarea-variant-filled.textarea-status-default {
-    background-color: var(--input-bg);
-    border-color: var(--input-border);
-  }
-  .textarea-variant-filled.textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
-    border-color: var(--input-border-hover);
-  }
-  .rc-textarea.textarea-variant-filled.textarea-status-default:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-default.rc-textarea-affix-wrapper-focused {
-    border-color: var(--focus-border-color);
-    box-shadow: 0 0 0 3px var(--focus-ring-color);
-  }
-
-  /* --- Error Filled --- */
-  .textarea-variant-filled.textarea-status-error {
-    background-color: var(--color-error-50);
-    border-color: var(--color-error-500);
-  }
-  .rc-textarea.textarea-variant-filled.textarea-status-error:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-error.rc-textarea-affix-wrapper-focused {
-    background-color: var(--input-bg);
-    box-shadow: 0 0 0 3px var(--color-error-100);
-  }
-
-  /* --- Warning Filled --- */
-  .textarea-variant-filled.textarea-status-warning {
-    background-color: var(--color-warning-50);
-    border-color: var(--color-warning-500);
-  }
-  .rc-textarea.textarea-variant-filled.textarea-status-warning:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-warning.rc-textarea-affix-wrapper-focused {
-    background-color: var(--input-bg);
-    box-shadow: 0 0 0 3px var(--color-warning-100);
-  }
-
-  /* --- Success Filled --- */
-  .textarea-variant-filled.textarea-status-success {
-    background-color: var(--color-success-50);
-    border-color: var(--color-success-500);
-  }
-  .rc-textarea.textarea-variant-filled.textarea-status-success:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-success.rc-textarea-affix-wrapper-focused {
-    background-color: var(--input-bg);
-    box-shadow: 0 0 0 3px var(--color-success-100);
-  }
-
-  /* --- Info Filled --- */
-  .textarea-variant-filled.textarea-status-info {
-    background-color: var(--color-info-50);
-    border-color: var(--color-info-500);
-  }
-  .rc-textarea.textarea-variant-filled.textarea-status-info:focus,
-  .rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-info.rc-textarea-affix-wrapper-focused {
-    background-color: var(--input-bg);
-    box-shadow: 0 0 0 3px var(--color-info-100);
-  }
 }
diff --git a/packages/ui/src/components/forms/switch/switch.component.tsx b/packages/ui/src/components/forms/switch/switch.component.tsx
index f45b23c..4d05ea4 100644
--- a/packages/ui/src/components/forms/switch/switch.component.tsx
+++ b/packages/ui/src/components/forms/switch/switch.component.tsx
@@ -19,17 +19,7 @@ const LoadingSpinner = () => (
 );
 
 export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
-  const {
-    label,
-    status = 'default',
-    variant = 'outlined',
-    className,
-    children,
-    style,
-    loading,
-    disabled,
-    ...rest
-  } = props;
+  const { label, status = 'default', className, children, style, loading, disabled, ...rest } = props;
 
   const displayLabel = label || children;
 
@@ -38,7 +28,6 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
   const wrapperClass = [
     'rc-switch-wrapper',
     `switch-status-${status}`,
-    `switch-variant-${variant}`,
     !isEnabled ? 'rc-switch-wrapper-disabled' : '',
     className,
   ]
diff --git a/packages/ui/src/components/forms/textarea/textarea.component.tsx b/packages/ui/src/components/forms/textarea/textarea.component.tsx
index 26f466f..fe662a1 100644
--- a/packages/ui/src/components/forms/textarea/textarea.component.tsx
+++ b/packages/ui/src/components/forms/textarea/textarea.component.tsx
@@ -3,37 +3,32 @@ import RcTextArea, { TextAreaRef } from '@rc-component/textarea';
 import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
 
 /**
- * Forwarding React component that renders an RcTextArea with normalized status and variant styling.
+ * Forwarding React component that renders an RcTextArea with normalized status.
  *
  * The component computes a CSS class string from the optional `className`, a `textarea-status-<status>` class
  * (falling back to 'default' when `status` is missing or not one of VALID_INPUT_STATUSES), and a
- * `textarea-variant-<variant>` class. All other props are passed through to the underlying RcTextArea.
  *
  * The component forwards a ref to the underlying RcTextArea element.
  *
  * @remarks
- * - `variant` defaults to `'outlined'`.
  * - `status` is validated against `VALID_INPUT_STATUSES`; if invalid or absent, `'default'` is used.
- * - Computed className shape: [className?, `textarea-status-${status}`, `textarea-variant-${variant}`].filter(Boolean).join(' ')
+ * - Computed className shape: [className?, `textarea-status-${status}`].filter(Boolean).join(' ')
  *
  * @param props.status - Optional input status (validated against VALID_INPUT_STATUSES).
  * @param props.className - Optional additional class name(s) to apply.
- * @param props.variant - Visual variant of the textarea; defaults to `'outlined'`.
  * @param props.rest - All other props are forwarded to RcTextArea.
  *
  * @returns A React element: the wrapped RcTextArea with forwarded ref and computed classes.
  *
  * @example
- * <TextArea status="error" variant="filled" placeholder="Enter text" />
+ * <TextArea status="error"  placeholder="Enter text" />
  */
 export const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
-  const { status, className, variant = 'outlined', ...restProps } = props;
+  const { status, className, ...restProps } = props;
 
   const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
 
-  const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
-    .filter(Boolean)
-    .join(' ');
+  const computedClassName = [className, `textarea-status-${currentStatus}`].filter(Boolean).join(' ');
 
   return <RcTextArea ref={ref} className={computedClassName} {...restProps} />;
 });
diff --git a/packages/ui/src/components/forms/types/index.ts b/packages/ui/src/components/forms/types/index.ts
index 0d30164..1262ada 100644
--- a/packages/ui/src/components/forms/types/index.ts
+++ b/packages/ui/src/components/forms/types/index.ts
@@ -44,9 +44,7 @@ interface BaseFormItemComponentProps {
   status?: InputStatusType;
 }
 
-interface BaseFormInputComponentProps extends BaseFormItemComponentProps {
-  variant?: 'outlined' | 'filled';
-}
+interface BaseFormInputComponentProps extends BaseFormItemComponentProps {}
 
 /**
  * Define specific component props