Align props with figma

app/components/Toggle/Toggle.container.tsx

@@ -3,6 +3,7 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
+import { normalizeState } from "../../../lib/propNormalization";
 
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
   (
@@ -13,7 +14,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
       onFocus,
       onBlur,
       disabled = false,
-      state = "default",
+      state: stateProp = "default",
       showIcon = false,
       showText = false,
       icon = "I",
@@ -23,6 +24,8 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const state = normalizeState(stateProp);
     const toggleId = useId();
     const labelId = useId();
 

app/components/Toggle/Toggle.types.ts

@@ -1,3 +1,5 @@
+import type { StateValue } from "../../../lib/propNormalization";
+
 export interface ToggleProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   "onChange"
@@ -12,7 +14,11 @@ export interface ToggleProps extends Omit<
   onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
-  state?: "default" | "hover" | "focus";
+  /**
+   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: StateValue;
   showIcon?: boolean;
   showText?: boolean;
   icon?: string;