Start organizational migration

app/components/controls/RadioGroup/RadioGroup.container.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+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: 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}`;
+
+  const handleChange = useCallback(
+    (optionValue: string) => {
+      if (!disabled && onChange) {
+        onChange({ value: optionValue });
+      }
+    },
+    [disabled, onChange],
+  );
+
+  return (
+    <RadioGroupView
+      groupId={groupId}
+      value={value}
+      mode={mode}
+      state={state}
+      disabled={disabled}
+      options={options}
+      className={className}
+      ariaLabel={props["aria-label"]}
+      onOptionChange={handleChange}
+    />
+  );
+};
+
+RadioGroupContainer.displayName = "RadioGroup";
+
+export default memo(RadioGroupContainer);