Start organizational migration

2026-02-05 18:21:56 -07:00
parent 69074b23f3
commit db3c0274f6
161 changed files with 145 additions and 145 deletions
@@ -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);
@@ -0,0 +1,41 @@
+export interface RadioOption {
+  value: string;
+  label: string;
+  subtext?: string;
+  ariaLabel?: string;
+}
+
+import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
+
+export interface RadioGroupProps {
+  name?: string;
+  value?: string;
+  onChange?: (_data: { value: string }) => void;
+  /**
+   * 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;
+  "aria-label"?: string;
+}
+
+export interface RadioGroupViewProps {
+  groupId: string;
+  value?: string;
+  mode: "standard" | "inverse";
+  state: "default" | "hover" | "focus" | "selected";
+  disabled: boolean;
+  options: RadioOption[];
+  className: string;
+  ariaLabel?: string;
+  onOptionChange: (_optionValue: string) => void;
+}
@@ -0,0 +1,91 @@
+import RadioButton from "../RadioButton";
+import type { RadioGroupViewProps } from "./RadioGroup.types";
+
+export function RadioGroupView({
+  groupId,
+  value,
+  mode,
+  state,
+  disabled,
+  options,
+  className,
+  ariaLabel,
+  onOptionChange,
+}: RadioGroupViewProps) {
+  return (
+    <div
+      className={`space-y-[8px] ${className}`}
+      role="radiogroup"
+      aria-label={ariaLabel}
+    >
+      {options.map((option) => {
+        const isSelected = value === option.value;
+
+        // If there's subtext, render radio button without label and handle layout separately
+        if (option.subtext) {
+          return (
+            <div
+              key={option.value}
+              className="flex gap-[8px] items-start"
+            >
+              <RadioButton
+                checked={isSelected}
+                mode={mode}
+                state={state}
+                disabled={disabled}
+                name={groupId}
+                value={option.value}
+                ariaLabel={option.ariaLabel || option.label}
+                onChange={({ checked }) => {
+                  if (checked) {
+                    onOptionChange(option.value);
+                  }
+                }}
+              />
+              <div className="flex flex-col gap-[4px] flex-1">
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-primary)]"
+                      : "text-[var(--color-content-default-primary)]"
+                  }`}
+                >
+                  {option.label}
+                </span>
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
+                      : "text-[var(--color-content-default-secondary,#b4b4b4)]"
+                  }`}
+                >
+                  {option.subtext}
+                </span>
+              </div>
+            </div>
+          );
+        }
+
+        // If no subtext, use RadioButton's built-in label
+        return (
+          <RadioButton
+            key={option.value}
+            checked={isSelected}
+            mode={mode}
+            state={state}
+            disabled={disabled}
+            label={option.label}
+            name={groupId}
+            value={option.value}
+            ariaLabel={option.ariaLabel}
+            onChange={({ checked }) => {
+              if (checked) {
+                onOptionChange(option.value);
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./RadioGroup.container";
+export type { RadioGroupProps, RadioOption } from "./RadioGroup.types";