Align props with figma

app/components/TextArea/TextArea.container.tsx

@@ -4,13 +4,14 @@ import { memo, forwardRef } from "react";
 import { useComponentId, useFormField } from "../../hooks";
 import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
+import { normalizeInputState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../lib/propNormalization";
 
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     {
-      size = "medium",
-      labelVariant = "default",
-      state = "default",
+      size: sizeProp = "medium",
+      labelVariant: labelVariantProp = "default",
+      state: stateProp = "default",
       disabled = false,
       error = false,
       label,
@@ -27,6 +28,10 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
     ref,
   ) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeSmallMediumLargeSize(sizeProp);
+    const labelVariant = normalizeLabelVariant(labelVariantProp);
+    const state = normalizeInputState(stateProp);
     // Generate unique ID for accessibility if not provided
     const { id: textareaId, labelId } = useComponentId("textarea", id);
 

app/components/TextArea/TextArea.types.ts

@@ -1,10 +1,27 @@
+import type { InputStateValue } from "../../../lib/propNormalization";
+
+export type TextAreaSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";
+export type TextAreaLabelVariantValue = "default" | "horizontal" | "Default" | "Horizontal";
+
 export interface TextAreaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
 > {
-  size?: "small" | "medium" | "large";
-  labelVariant?: "default" | "horizontal";
-  state?: "default" | "active" | "hover" | "focus";
+  /**
+   * Text area size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: TextAreaSizeValue;
+  /**
+   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  labelVariant?: TextAreaLabelVariantValue;
+  /**
+   * Visual state. Accepts "default"/"Default", "active"/"Active", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: InputStateValue;
   disabled?: boolean;
   error?: boolean;
   label?: string;