@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/ui/FormField.tsx

@@ -1,88 +1,88 @@
-// Autobahn (auto.de redesign) — md3 form field bound to a mobx-react-form field.
-//
-// The Wave-0 form-kit input: a labelled, outlined MD3 text field that binds directly to a
-// mobx-react-form field via field.bind() — the SAME field objects the legacy FormInput used
-// (LoginForm.$('email'), RegisterForm.$('password'), …). So every existing validation rule,
-// onChange/onBlur, submit hook and error works unchanged; only the markup is re-skinned.
-//
-// Observer-wrapped so it re-renders on field value/error changes. Renders correctly only inside
-// a `.md3` subtree (scoped theme). Pure/presentational beyond the injected field.
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-import Icon from './Icon';
-
-export interface FormFieldProps {
-  /** mobx-react-form field (LoginForm.$('email') etc.). Typed any — the lib ships no TS types. */
-  field: any;
-  /** i18n translate (AuthRegisterPage ns) — resolves the field's placeholder/label key. */
-  t: (key: string, options?: object) => string;
-  /** override the field's own type (e.g. force 'password'). */
-  type?: string;
-  id?: string;
-  autoComplete?: 'on' | 'off';
-  disabled?: boolean;
-  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  /** suppress the built-in label (for layouts that supply their own external label next to the field). */
-  hideLabel?: boolean;
-  /** opt-in: show a green check + green border when the field is filled and valid (checkout). */
-  showValid?: boolean;
-}
-
-const FormField: React.FunctionComponent<FormFieldProps> = observer(
-  ({ field, t, type, id, autoComplete, disabled, onKeyPress, hideLabel, showValid }) => {
-    const [reveal, setReveal] = React.useState<boolean>(false);
-    // Auto-generate a stable id (React 18 useId) when the caller doesn't pass one, so the
-    // <label htmlFor> below is ALWAYS wired to a real input id — ~30 call sites (incl. the
-    // checkout money-path) never pass `id` and previously rendered an unassociated label.
-    // useId() is called unconditionally (rules-of-hooks) even when `id` is supplied; the
-    // generated value is simply discarded in that case (`id ||` wins), so it never appears
-    // for `id`-bearing fields.
-    const generatedId = React.useId();
-    const inputId = id || generatedId;
-    const bound = field.bind();
-    const fieldType: string = type || field.type || 'text';
-    const isPassword = fieldType === 'password';
-    const inputType = isPassword && reveal ? 'text' : fieldType;
-    const hasError = !!field.hasError && !!field.error;
-    const isValid = !!showValid && !disabled && !isPassword && !hasError && !!field.value;
-    // Visible label (a11y). Prefer the translated placeholder key (Auth forms), else translate the
-    // field's label key (Checkout forms use i18n keys as `label`). t() returns the input unchanged
-    // when there's no translation (Auth labels are plain strings), so this is safe for both.
-    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
-
-    return (
-      <div className="mfield-group">
-        {label && !hideLabel ? <label className="md-label-sm mfield-label" htmlFor={inputId}>{label}</label> : null}
-        <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '') + (isValid ? ' mfield--valid' : '')}>
-          <input
-            {...bound}
-            id={inputId}
-            type={inputType}
-            autoComplete={autoComplete}
-            disabled={disabled}
-            placeholder=""
-            onKeyPress={onKeyPress}
-            style={{ width: '100%' }}
-          />
-          {isPassword ? (
-            <button
-              type="button"
-              className="mfield-eye"
-              tabIndex={-1}
-              aria-label={t('autobahn:auth.togglePassword')}
-              onClick={() => setReveal((r) => !r)}
-            >
-              <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
-            </button>
-          ) : null}
-          {isValid ? <span className="mfield-ok"><Icon name="check" size={18} /></span> : null}
-        </div>
-        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default FormField;
+// Autobahn (auto.de redesign) — md3 form field bound to a mobx-react-form field.
+//
+// The Wave-0 form-kit input: a labelled, outlined MD3 text field that binds directly to a
+// mobx-react-form field via field.bind() — the SAME field objects the legacy FormInput used
+// (LoginForm.$('email'), RegisterForm.$('password'), …). So every existing validation rule,
+// onChange/onBlur, submit hook and error works unchanged; only the markup is re-skinned.
+//
+// Observer-wrapped so it re-renders on field value/error changes. Renders correctly only inside
+// a `.md3` subtree (scoped theme). Pure/presentational beyond the injected field.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import Icon from './Icon';
+
+export interface FormFieldProps {
+  /** mobx-react-form field (LoginForm.$('email') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate (AuthRegisterPage ns) — resolves the field's placeholder/label key. */
+  t: (key: string, options?: object) => string;
+  /** override the field's own type (e.g. force 'password'). */
+  type?: string;
+  id?: string;
+  autoComplete?: 'on' | 'off';
+  disabled?: boolean;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** suppress the built-in label (for layouts that supply their own external label next to the field). */
+  hideLabel?: boolean;
+  /** opt-in: show a green check + green border when the field is filled and valid (checkout). */
+  showValid?: boolean;
+}
+
+const FormField: React.FunctionComponent<FormFieldProps> = observer(
+  ({ field, t, type, id, autoComplete, disabled, onKeyPress, hideLabel, showValid }) => {
+    const [reveal, setReveal] = React.useState<boolean>(false);
+    // Auto-generate a stable id (React 18 useId) when the caller doesn't pass one, so the
+    // <label htmlFor> below is ALWAYS wired to a real input id — ~30 call sites (incl. the
+    // checkout money-path) never pass `id` and previously rendered an unassociated label.
+    // useId() is called unconditionally (rules-of-hooks) even when `id` is supplied; the
+    // generated value is simply discarded in that case (`id ||` wins), so it never appears
+    // for `id`-bearing fields.
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const bound = field.bind();
+    const fieldType: string = type || field.type || 'text';
+    const isPassword = fieldType === 'password';
+    const inputType = isPassword && reveal ? 'text' : fieldType;
+    const hasError = !!field.hasError && !!field.error;
+    const isValid = !!showValid && !disabled && !isPassword && !hasError && !!field.value;
+    // Visible label (a11y). Prefer the translated placeholder key (Auth forms), else translate the
+    // field's label key (Checkout forms use i18n keys as `label`). t() returns the input unchanged
+    // when there's no translation (Auth labels are plain strings), so this is safe for both.
+    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
+
+    return (
+      <div className="mfield-group">
+        {label && !hideLabel ? <label className="md-label-sm mfield-label" htmlFor={inputId}>{label}</label> : null}
+        <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '') + (isValid ? ' mfield--valid' : '')}>
+          <input
+            {...bound}
+            id={inputId}
+            type={inputType}
+            autoComplete={autoComplete}
+            disabled={disabled}
+            placeholder=""
+            onKeyPress={onKeyPress}
+            style={{ width: '100%' }}
+          />
+          {isPassword ? (
+            <button
+              type="button"
+              className="mfield-eye"
+              tabIndex={-1}
+              aria-label={t('autobahn:auth.togglePassword')}
+              onClick={() => setReveal((r) => !r)}
+            >
+              <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
+            </button>
+          ) : null}
+          {isValid ? <span className="mfield-ok"><Icon name="check" size={18} /></span> : null}
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormField;

package/ui/FormRadio.tsx

@@ -1,93 +1,93 @@
-// Autobahn (auto.de redesign) — md3 selectable radio wrapper.
-//
-// The leaf of the md3 radio pair (used with FormRadioGroup). It is a SELECTABLE WRAPPER around
-// ARBITRARY children, re-skinning the legacy fe-ui-core radio child (a `CheckboxMaterial radio`
-// or `_common/Radio`) used across 5 pages — including the RICH custom-label radios in
-// VehicleEdit/VehicleAdd: exterior/interior color swatches, Feinstaub emission stickers,
-// interior-material icons, energy-efficiency bars, and DAT-model spec grids. Text-only is just
-// the simple case; the mandatory case is arbitrary children, so a radio can contain any markup.
-//
-// LEGACY SIGNATURE (replicated so a structure-preserving re-skin is a drop-in):
-//   In the legacy tree the group (`fe-ui-core` RadioGroup / our FormMaterialRadioGroup → MUI
-//   RadioGroup) CLONES each child injecting `checked` (computed from `child.value === group.value`)
-//   plus an `onChange`. The child carries the option key in `value` and renders its visual via
-//   `content` / `icon` / `label`. Here the SAME shape is preserved: `value` is the option key,
-//   the children are the visual, and FormRadioGroup injects `checked` + `onSelect` (and the shared
-//   `name` / `disabled` / `error`) by cloning. The child fires `onSelect(value)` on activation —
-//   the group is what talks to the mobx field, never the leaf.
-//
-// A native hidden `<input type="radio">` is kept (as the legacy `_common/Radio` did) so the control
-// is real radio semantics for a11y + forms; the visible chrome is the md3 `.mradio` surface with a
-// selected ring/outline driven by `checked`. Pure/presentational. Renders correctly only inside a
-// `<div className="md3">` subtree (scoped theme).
-
-import * as React from 'react';
-
-export interface FormRadioProps {
-  /** the option key this radio represents (compared against the group's field.value). */
-  value: any;
-  /** arbitrary visual: plain text, a color swatch, an emission-sticker <img>, an icon, a spec grid… */
-  children?: React.ReactNode;
-  disabled?: boolean;
-  /** accessible label when `children` is non-text (swatch/icon/img) and needs a name. */
-  ariaLabel?: string;
-  /** extra class(es) on the wrapper (layout hooks from the caller). */
-  className?: string;
-  /** inline style on the wrapper `<label>` (layout hooks the caller cannot express as a class,
-   * e.g. a full-width stacked DAT-model row). Optional; merged onto the `.mradio` surface. */
-  style?: React.CSSProperties;
-
-  // ---- injected by FormRadioGroup via React.cloneElement (do not pass by hand) ----
-  /** true when this radio's `value` is the group's selected value. */
-  checked?: boolean;
-  /** group callback — fires with this radio's `value` on activation. */
-  onSelect?: (value: any) => void;
-  /** shared radio-group name (so the native inputs form one exclusive group). */
-  name?: string;
-  /** mirrors the group's error state (red ring), matching the legacy `error` clone prop. */
-  error?: boolean;
-}
-
-const FormRadio: React.FunctionComponent<FormRadioProps> = ({
-  value,
-  children,
-  disabled = false,
-  ariaLabel,
-  className,
-  style,
-  checked = false,
-  onSelect,
-  name,
-  error = false,
-}) => {
-  const handleChange = () => {
-    if (disabled) return;
-    if (onSelect) onSelect(value);
-  };
-
-  const cls =
-    'mradio' +
-    (checked ? ' mradio--on' : '') +
-    (disabled ? ' mradio--disabled' : '') +
-    (error && !checked ? ' mradio--error' : '') +
-    (className ? ` ${className}` : '');
-
-  return (
-    <label className={cls} style={style}>
-      {/* Real radio input (hidden) — keeps native exclusive-group + keyboard + a11y semantics. */}
-      <input
-        type="radio"
-        className="mradio-input"
-        name={name}
-        value={value}
-        checked={checked}
-        disabled={disabled}
-        aria-label={ariaLabel}
-        onChange={handleChange}
-      />
-      <span className="mradio-body">{children}</span>
-    </label>
-  );
-};
-
-export default FormRadio;
+// Autobahn (auto.de redesign) — md3 selectable radio wrapper.
+//
+// The leaf of the md3 radio pair (used with FormRadioGroup). It is a SELECTABLE WRAPPER around
+// ARBITRARY children, re-skinning the legacy fe-ui-core radio child (a `CheckboxMaterial radio`
+// or `_common/Radio`) used across 5 pages — including the RICH custom-label radios in
+// VehicleEdit/VehicleAdd: exterior/interior color swatches, Feinstaub emission stickers,
+// interior-material icons, energy-efficiency bars, and DAT-model spec grids. Text-only is just
+// the simple case; the mandatory case is arbitrary children, so a radio can contain any markup.
+//
+// LEGACY SIGNATURE (replicated so a structure-preserving re-skin is a drop-in):
+//   In the legacy tree the group (`fe-ui-core` RadioGroup / our FormMaterialRadioGroup → MUI
+//   RadioGroup) CLONES each child injecting `checked` (computed from `child.value === group.value`)
+//   plus an `onChange`. The child carries the option key in `value` and renders its visual via
+//   `content` / `icon` / `label`. Here the SAME shape is preserved: `value` is the option key,
+//   the children are the visual, and FormRadioGroup injects `checked` + `onSelect` (and the shared
+//   `name` / `disabled` / `error`) by cloning. The child fires `onSelect(value)` on activation —
+//   the group is what talks to the mobx field, never the leaf.
+//
+// A native hidden `<input type="radio">` is kept (as the legacy `_common/Radio` did) so the control
+// is real radio semantics for a11y + forms; the visible chrome is the md3 `.mradio` surface with a
+// selected ring/outline driven by `checked`. Pure/presentational. Renders correctly only inside a
+// `<div className="md3">` subtree (scoped theme).
+
+import * as React from 'react';
+
+export interface FormRadioProps {
+  /** the option key this radio represents (compared against the group's field.value). */
+  value: any;
+  /** arbitrary visual: plain text, a color swatch, an emission-sticker <img>, an icon, a spec grid… */
+  children?: React.ReactNode;
+  disabled?: boolean;
+  /** accessible label when `children` is non-text (swatch/icon/img) and needs a name. */
+  ariaLabel?: string;
+  /** extra class(es) on the wrapper (layout hooks from the caller). */
+  className?: string;
+  /** inline style on the wrapper `<label>` (layout hooks the caller cannot express as a class,
+   * e.g. a full-width stacked DAT-model row). Optional; merged onto the `.mradio` surface. */
+  style?: React.CSSProperties;
+
+  // ---- injected by FormRadioGroup via React.cloneElement (do not pass by hand) ----
+  /** true when this radio's `value` is the group's selected value. */
+  checked?: boolean;
+  /** group callback — fires with this radio's `value` on activation. */
+  onSelect?: (value: any) => void;
+  /** shared radio-group name (so the native inputs form one exclusive group). */
+  name?: string;
+  /** mirrors the group's error state (red ring), matching the legacy `error` clone prop. */
+  error?: boolean;
+}
+
+const FormRadio: React.FunctionComponent<FormRadioProps> = ({
+  value,
+  children,
+  disabled = false,
+  ariaLabel,
+  className,
+  style,
+  checked = false,
+  onSelect,
+  name,
+  error = false,
+}) => {
+  const handleChange = () => {
+    if (disabled) return;
+    if (onSelect) onSelect(value);
+  };
+
+  const cls =
+    'mradio' +
+    (checked ? ' mradio--on' : '') +
+    (disabled ? ' mradio--disabled' : '') +
+    (error && !checked ? ' mradio--error' : '') +
+    (className ? ` ${className}` : '');
+
+  return (
+    <label className={cls} style={style}>
+      {/* Real radio input (hidden) — keeps native exclusive-group + keyboard + a11y semantics. */}
+      <input
+        type="radio"
+        className="mradio-input"
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onChange={handleChange}
+      />
+      <span className="mradio-body">{children}</span>
+    </label>
+  );
+};
+
+export default FormRadio;

package/ui/FormRadioGroup.tsx

@@ -1,106 +1,106 @@
-// Autobahn (auto.de redesign) — md3 radio group bound to a mobx-react-form field.
-//
-// Drop-in re-skin of the legacy radio group (`components/ui/FormMaterialRadioGroup`, which wraps the
-// fe-ui-core MUI `RadioGroup`) used on 5 pages: DealerEmployeeSetPage, Checkout (Zahlart / services),
-// and the rich VehicleEdit/VehicleAdd sections (ColorPad colors, Environment emission stickers +
-// EnVKV type, FormCarEngine DAT models). It binds to the SAME mobx-react-form field objects the
-// legacy group used (VehicleEditForm.$('colorPadForm.exterior_exteriorColor'),
-// form.$('environmentForm.environmentEmissions_emissionSticker'), …) so every existing validation
-// rule / submit hook / error keeps working — only the markup is re-skinned.
-//
-// LEGACY SIGNATURE (replicated exactly — the contract a structure-preserving re-skin must keep):
-//   The legacy group owns the selected value from `field.value`, and CLONES each child injecting
-//   `checked` (computed from `child.value === field.value`) plus an `onChange`. The fe-ui-core
-//   RadioGroup's own change handler has the shape `onChange(event, value, radioName)`; bound to a
-//   mobx field via FormMaterialRadioGroup it forwards the selected value into the field. Here the
-//   same flow is preserved: this group reads `field.value`, clones each FormRadio child with
-//   `checked={child.value === field.value}` + an `onSelect(value)` + the shared `name`/`disabled`/
-//   `error`, and on select pushes the value into the field via the kit's standard call
-//   `field.onChange(value, field.name)` (the exact form DatePicker/Switch use — mobx-react-form
-//   reads the raw value as the change argument). The inline error mirrors the legacy `field.hasError
-//   && field.error`.
-//
-// observer-wrapped so it re-renders when field.value / field.error change. Children are cloned
-// (FormRadio leaves) so the group is the single owner of selection + field talk. Renders correctly
-// only inside a `<div className="md3">` subtree (scoped theme).
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-import FormRadio from './FormRadio';
-
-export interface FormRadioGroupProps {
-  /** mobx-react-form field (VehicleEditForm.$('colorPadForm.exterior_exteriorColor') etc.). Typed any — the lib ships no TS types. */
-  field: any;
-  /** radio-group name for the native inputs; defaults to field.name so each field is its own exclusive group. */
-  name?: string;
-  /** FormRadio children (each carries a `value` + arbitrary visual). */
-  children: React.ReactNode;
-  /** disables every radio in the group. */
-  disabled?: boolean;
-  /** accessible label for the group when there is no adjacent visible heading. */
-  ariaLabel?: string;
-  /** extra class(es) on the group container (layout hooks: wrap, swatch grid, sticker row…). */
-  className?: string;
-  /**
-   * extra class(es) on the inner radio row (`.mradio-set`, the element that is the direct
-   * flex/grid parent of the radios). Use this when a caller's layout class must lay the radios
-   * out (e.g. the legacy `FormMaterialRadioGroup` call sites whose section classes — `styles.colors`,
-   * `styles.usageTypesField`, the DAT `styles.radioGroup` … — were applied to the radio container,
-   * not an outer wrapper). Optional + defaulted, so existing callers are unaffected.
-   */
-  setClassName?: string;
-}
-
-const FormRadioGroup: React.FunctionComponent<FormRadioGroupProps> = observer(
-  ({ field, name, children, disabled = false, ariaLabel, className, setClassName }) => {
-    const groupName: string = name || (field && field.name) || 'mradio-group';
-    const selected = field ? field.value : undefined;
-    const hasError = !!(field && field.hasError && field.error);
-
-    // Push the chosen option key into the mobx field. Matches the kit's bound-control convention
-    // (DatePicker/Switch): mobx-react-form's onChange takes the raw value as its change argument,
-    // and we pass field.name as the second arg exactly as the other bound primitives do.
-    const handleSelect = React.useCallback(
-      (value: any) => {
-        if (disabled || !field) return;
-        field.onChange(value, field.name);
-      },
-      [disabled, field],
-    );
-
-    // Clone each FormRadio leaf, injecting the legacy-style derived props: checked, onSelect, the
-    // shared name, the merged disabled, and the error flag. Non-element children pass through.
-    const radios = React.Children.map(children, (child) => {
-      if (!React.isValidElement(child)) return child;
-      const childProps = child.props as { value?: any; disabled?: boolean };
-      return React.cloneElement(child as React.ReactElement<any>, {
-        checked: childProps.value === selected,
-        onSelect: handleSelect,
-        name: groupName,
-        disabled: disabled || childProps.disabled,
-        error: hasError,
-      });
-    });
-
-    return (
-      <div className={'mradio-group' + (className ? ` ${className}` : '')}>
-        <div
-          className={
-            'mradio-set' +
-            (hasError ? ' mradio-set--error' : '') +
-            (setClassName ? ` ${setClassName}` : '')
-          }
-          role="radiogroup"
-          aria-label={ariaLabel}
-          aria-invalid={hasError || undefined}
-        >
-          {radios}
-        </div>
-        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default FormRadioGroup;
+// Autobahn (auto.de redesign) — md3 radio group bound to a mobx-react-form field.
+//
+// Drop-in re-skin of the legacy radio group (`components/ui/FormMaterialRadioGroup`, which wraps the
+// fe-ui-core MUI `RadioGroup`) used on 5 pages: DealerEmployeeSetPage, Checkout (Zahlart / services),
+// and the rich VehicleEdit/VehicleAdd sections (ColorPad colors, Environment emission stickers +
+// EnVKV type, FormCarEngine DAT models). It binds to the SAME mobx-react-form field objects the
+// legacy group used (VehicleEditForm.$('colorPadForm.exterior_exteriorColor'),
+// form.$('environmentForm.environmentEmissions_emissionSticker'), …) so every existing validation
+// rule / submit hook / error keeps working — only the markup is re-skinned.
+//
+// LEGACY SIGNATURE (replicated exactly — the contract a structure-preserving re-skin must keep):
+//   The legacy group owns the selected value from `field.value`, and CLONES each child injecting
+//   `checked` (computed from `child.value === field.value`) plus an `onChange`. The fe-ui-core
+//   RadioGroup's own change handler has the shape `onChange(event, value, radioName)`; bound to a
+//   mobx field via FormMaterialRadioGroup it forwards the selected value into the field. Here the
+//   same flow is preserved: this group reads `field.value`, clones each FormRadio child with
+//   `checked={child.value === field.value}` + an `onSelect(value)` + the shared `name`/`disabled`/
+//   `error`, and on select pushes the value into the field via the kit's standard call
+//   `field.onChange(value, field.name)` (the exact form DatePicker/Switch use — mobx-react-form
+//   reads the raw value as the change argument). The inline error mirrors the legacy `field.hasError
+//   && field.error`.
+//
+// observer-wrapped so it re-renders when field.value / field.error change. Children are cloned
+// (FormRadio leaves) so the group is the single owner of selection + field talk. Renders correctly
+// only inside a `<div className="md3">` subtree (scoped theme).
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import FormRadio from './FormRadio';
+
+export interface FormRadioGroupProps {
+  /** mobx-react-form field (VehicleEditForm.$('colorPadForm.exterior_exteriorColor') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** radio-group name for the native inputs; defaults to field.name so each field is its own exclusive group. */
+  name?: string;
+  /** FormRadio children (each carries a `value` + arbitrary visual). */
+  children: React.ReactNode;
+  /** disables every radio in the group. */
+  disabled?: boolean;
+  /** accessible label for the group when there is no adjacent visible heading. */
+  ariaLabel?: string;
+  /** extra class(es) on the group container (layout hooks: wrap, swatch grid, sticker row…). */
+  className?: string;
+  /**
+   * extra class(es) on the inner radio row (`.mradio-set`, the element that is the direct
+   * flex/grid parent of the radios). Use this when a caller's layout class must lay the radios
+   * out (e.g. the legacy `FormMaterialRadioGroup` call sites whose section classes — `styles.colors`,
+   * `styles.usageTypesField`, the DAT `styles.radioGroup` … — were applied to the radio container,
+   * not an outer wrapper). Optional + defaulted, so existing callers are unaffected.
+   */
+  setClassName?: string;
+}
+
+const FormRadioGroup: React.FunctionComponent<FormRadioGroupProps> = observer(
+  ({ field, name, children, disabled = false, ariaLabel, className, setClassName }) => {
+    const groupName: string = name || (field && field.name) || 'mradio-group';
+    const selected = field ? field.value : undefined;
+    const hasError = !!(field && field.hasError && field.error);
+
+    // Push the chosen option key into the mobx field. Matches the kit's bound-control convention
+    // (DatePicker/Switch): mobx-react-form's onChange takes the raw value as its change argument,
+    // and we pass field.name as the second arg exactly as the other bound primitives do.
+    const handleSelect = React.useCallback(
+      (value: any) => {
+        if (disabled || !field) return;
+        field.onChange(value, field.name);
+      },
+      [disabled, field],
+    );
+
+    // Clone each FormRadio leaf, injecting the legacy-style derived props: checked, onSelect, the
+    // shared name, the merged disabled, and the error flag. Non-element children pass through.
+    const radios = React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      const childProps = child.props as { value?: any; disabled?: boolean };
+      return React.cloneElement(child as React.ReactElement<any>, {
+        checked: childProps.value === selected,
+        onSelect: handleSelect,
+        name: groupName,
+        disabled: disabled || childProps.disabled,
+        error: hasError,
+      });
+    });
+
+    return (
+      <div className={'mradio-group' + (className ? ` ${className}` : '')}>
+        <div
+          className={
+            'mradio-set' +
+            (hasError ? ' mradio-set--error' : '') +
+            (setClassName ? ` ${setClassName}` : '')
+          }
+          role="radiogroup"
+          aria-label={ariaLabel}
+          aria-invalid={hasError || undefined}
+        >
+          {radios}
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormRadioGroup;