Align props with figma

app/components/RadioGroup/RadioGroup.container.tsx

@@ -3,18 +3,26 @@
 import { memo, useCallback, useId } from "react";
 import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
+import { normalizeMode, normalizeState } from "../../../lib/propNormalization";
 
 const RadioGroupContainer = ({
   name,
   value,
   onChange,
-  mode = "standard",
-  state = "default",
+  mode: modeProp = "standard",
+  state: stateProp = "default",
   disabled = false,
   options = [],
   className = "",
   ...props
 }: RadioGroupProps) => {
+  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+  const mode = normalizeMode(modeProp);
+  // Normalize state, but handle "With Subtext" separately (it's represented by options with subtext)
+  const state = typeof stateProp === "string" && 
+    (stateProp.toLowerCase() === "with subtext" || stateProp === "With Subtext")
+    ? "default" // "With Subtext" is handled via RadioOption.subtext, use default state
+    : normalizeState(stateProp);
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `radio-group-${generatedId}`;

app/components/RadioGroup/RadioGroup.types.ts

@@ -5,12 +5,23 @@ export interface RadioOption {
   ariaLabel?: string;
 }
 
+import type { ModeValue, StateValue } from "../../../lib/propNormalization";
+
 export interface RadioGroupProps {
   name?: string;
   value?: string;
   onChange?: (_data: { value: string }) => void;
-  mode?: "standard" | "inverse";
-  state?: "default" | "hover" | "focus";
+  /**
+   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  mode?: ModeValue;
+  /**
+   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Figma also supports "With Subtext" state, which is handled via RadioOption.subtext.
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: StateValue | "With Subtext" | "with subtext";
   disabled?: boolean;
   options?: RadioOption[];
   className?: string;