Align props with figma

app/components/RadioButton/RadioButton.container.tsx

@@ -3,11 +3,13 @@
 import { memo, useCallback, useId } from "react";
 import { RadioButtonView } from "./RadioButton.view";
 import type { RadioButtonProps } from "./RadioButton.types";
+import { normalizeMode, normalizeState } from "../../../lib/propNormalization";
 
 const RadioButtonContainer = ({
   checked = false,
-  mode = "standard",
-  state = "default", // This state prop is now only for static display in Storybook/Preview
+  mode: modeProp = "standard",
+  state: stateProp = "default", // This state prop is now only for static display in Storybook/Preview
+  indicator = true, // From Figma: whether to show the indicator dot
   disabled = false,
   label,
   onChange,
@@ -17,6 +19,13 @@ const RadioButtonContainer = ({
   ariaLabel,
   className = "",
 }: RadioButtonProps) => {
+  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+  const mode = normalizeMode(modeProp);
+  const state = normalizeState(stateProp);
+  
+  // If state is "selected", it means checked in Figma terms
+  const normalizedState = state === "selected" || checked ? "selected" : state;
+  
   const isInverse = mode === "inverse";
   const isStandard = mode === "standard";
 
@@ -113,7 +122,7 @@ const RadioButtonContainer = ({
       radioId={radioId}
       checked={checked}
       mode={mode}
-      state={state} // Passed for static display in Storybook/Preview
+      state={normalizedState} // Normalized state (handles "selected" from Figma)
       disabled={disabled}
       label={label}
       name={name}

app/components/RadioButton/RadioButton.types.ts

@@ -1,7 +1,22 @@
+import type { ModeValue, StateValue } from "../../../lib/propNormalization";
+
 export interface RadioButtonProps {
   checked?: boolean;
-  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", "selected"/"Selected" (case-insensitive).
+   * Note: "selected" state is represented by the `checked` prop in practice.
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: StateValue;
+  /**
+   * Whether to show the indicator dot. From Figma specification.
+   */
+  indicator?: boolean;
   disabled?: boolean;
   label?: string;
   onChange?: (_data: { checked: boolean; value?: string }) => void;
@@ -16,7 +31,7 @@ export interface RadioButtonViewProps {
   radioId: string;
   checked: boolean;
   mode: "standard" | "inverse";
-  state: "default" | "hover" | "focus";
+  state: "default" | "hover" | "focus" | "selected";
   disabled: boolean;
   label?: string;
   name?: string;