@bytebrand/fe-ui-core-autobahn 1.0.0

package/ui/FormCheckbox.tsx

@@ -0,0 +1,79 @@
+// Autobahn (auto.de redesign) — md3 checkbox bound to a mobx-react-form field.
+//
+// Drop-in visual replacement for the legacy fe-ui-core `FormCheckbox` / `CheckboxMaterial`
+// (DealerEmployeeSetPage AccessRights role flags, EmailPermissionBlock T&C/permission box with
+// the 'boolean'/'accepted' rule, SettingsPage data-usage, etc.). Same data contract — only the
+// markup is re-skinned to the `.mcheck` md3 box + check icon. Renders correctly only inside a
+// `<div className="md3">` subtree (scoped theme).
+//
+// BINDING (must match the legacy signature EXACTLY or validation/submit breaks):
+//   mobx-react-form fields expose `field.checked` (boolean) and `field.onChange`, which is a
+//   NATIVE change-event handler — it reads `event.target.checked` itself and updates field.checked.
+//   So we bind `checked={!!field.checked}` and forward the raw native event straight to
+//   `field.onChange` — no wrapping, no boolean coercion, no `(event, checked, value)` re-call.
+//   This is the same contract the sibling Switch primitive uses, and the same one the legacy
+//   fe-ui-core Checkbox got via `field.bind()` (it forwarded the event onward and the field
+//   handler ignored the extra args). Validation rules ('required' / 'boolean' / 'accepted') then
+//   surface through field.hasError + field.error, shown inline — identical to the legacy FormCheckbox.
+//
+// observer-wrapped so it re-renders when field.checked / field.error change. Beyond the injected
+// field it is pure/presentational.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import Icon from './Icon';
+
+export interface FormCheckboxProps {
+  /** mobx-react-form field (DealerProfileForm.$('emailPermission'), EmplDataForm.$('isDadmin'), …). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — used ONLY to resolve field.label when no `label`/`children` is supplied (mirrors the legacy CheckboxMaterial). Callers that already translate pass the result as `label`. */
+  t?: (key: string, options?: object) => string;
+  /** label as plain text OR pre-built JSX (e.g. a translated string, or a <Trans> with links). */
+  label?: React.ReactNode;
+  /** rich label content (T&C/permission text with links). Takes precedence over `label`. */
+  children?: React.ReactNode;
+  /** override the field's own disabled flag. */
+  disabled?: boolean;
+  id?: string;
+}
+
+const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
+  ({ field, t, label, children, disabled, id }) => {
+    const isChecked = !!field.checked;
+    const isDisabled = disabled != null ? disabled : !!field.disabled;
+    const hasError = !!field.hasError && !!field.error;
+
+    // children (rich) > explicit label > translated field.label (legacy CheckboxMaterial behaviour).
+    // We do NOT re-translate a passed `label`: callers (AccessRights, EmailPermissionBlock) already
+    // pass an already-translated string or a <Trans> element, so re-running t() would risk a miss.
+    let content: React.ReactNode = null;
+    if (children != null) content = children;
+    else if (label != null) content = label;
+    else if (field.label) content = t ? t(field.label) : field.label;
+
+    return (
+      <div className={'mcheck-group' + (hasError ? ' mcheck-group--error' : '')}>
+        <label className={'mcheck' + (isDisabled ? ' mcheck--disabled' : '')}>
+          <input
+            id={id}
+            type="checkbox"
+            className="mcheck-input"
+            checked={isChecked}
+            disabled={isDisabled}
+            aria-checked={isChecked}
+            aria-invalid={hasError || undefined}
+            onChange={field.onChange}
+          />
+          <span className="mcheck-box" aria-hidden="true">
+            {isChecked ? <Icon name="check" size={16} stroke={3} cls="mcheck-tick" /> : null}
+          </span>
+          {content != null ? <span className="mcheck-label">{content}</span> : null}
+        </label>
+        {hasError ? <span className="mcheck-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormCheckbox;

package/ui/FormDropdown.tsx

@@ -0,0 +1,327 @@
+// Autobahn (auto.de redesign) — mobx-react-form-bound dropdown adapter.
+//
+// A drop-in md3 replacement for the legacy fe-ui-core FormDropDown
+// (components/ui/FormDropDown/FormDropDown.tsx). It is the #1 form dependency
+// (11+ pages, 60+ vehicle-form selects: BasicData/EngineData/Chassis/…,
+// Settings gender/title, …). The visual control is the md3 `Dropdown`
+// (single-select) reused as-is; multi-select is implemented here on the same
+// `mselect-*` classes as a checklist with selected chips on the trigger.
+//
+// THE DATA CONTRACT MIRRORS THE LEGACY EXACTLY so validation/output/submit are
+// unchanged — only the markup is re-skinned:
+//
+//   • single (default): field.value is the option OBJECT `{value,label}` (legacy
+//     `getValue`). We read `field.value.value` and commit
+//     `field.onChange({value,label}, field.name)`; clear -> `onChange('', name)`.
+//   • isObj: field.value IS the source option object (e.g. a GENDERS item
+//     `{value:number,label}`). On change we resolve the matching object out of
+//     `field.extra` and `onChange(obj, field.name)` (legacy parity — form.output
+//     keeps the object).
+//   • isMulti: field.value is a primitive array; the menu is a checklist; the
+//     trigger shows the selected labels as chips; `onChange(values, field.name)`.
+//
+// Option shapes in `field.extra` are normalized: primitive lists (['2','3',…]),
+// `{value,label}` and `{key,value}`. Label resolution mirrors the legacy
+// getOptions(): with a namespace, 'cbd' -> t('cbd:'+opt), else a labelled option
+// -> t(namespace+':'+label), else t(opt). When `isApiTranslated`, `field.extra`
+// already carries translated labels, so they are used verbatim.
+//
+// observer-wrapped (re-renders on value/error). Renders correctly only inside a
+// `.md3` subtree.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import Icon from './Icon';
+import Dropdown, { DropdownOption } from './Dropdown';
+
+export interface FormDropdownProps {
+  /** mobx-react-form field (form.$('basicDataForm.mainData_make') etc.). Untyped — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves option labels and the field's placeholder/label key. */
+  t: (key: string, options?: object) => string;
+  /** translation namespace for option labels (e.g. 'common', 'cbd', 'mainData'). */
+  namespace?: string;
+  /** field.value is the source option OBJECT, not a scalar (GENDERS/TITLES item). */
+  isObj?: boolean;
+  /** option labels in field.extra are already translated (came from a request). */
+  isApiTranslated?: boolean;
+  /** multiple selection — value is a primitive array, rendered as chips + checklist. */
+  isMulti?: boolean;
+  /** hide the clear ("×") affordance on a single select. */
+  disableClearable?: boolean;
+  /** suppress the built-in label (when an outer wrapper — e.g. FormFieldDropDown — owns the label). */
+  hideLabel?: boolean;
+  /** accepted for legacy-surface parity (the md3 control never free-types). */
+  freeSolo?: boolean;
+  disabled?: boolean;
+  /** layout passthrough (e.g. grid-area), mirrors legacy `style`. */
+  style?: React.CSSProperties;
+  /** extra class on the wrapper (legacy `className`). */
+  className?: string;
+}
+
+/** Raw option as it can appear in field.extra. */
+type RawOption =
+  | string
+  | number
+  | { value: any; label?: any; key?: any; isDisabled?: boolean; isSeries?: boolean };
+
+/** Normalize one raw option to a stable { value, label, disabled } shape (label not yet translated). */
+function normalizeOption(opt: RawOption): { value: string; rawLabel: any; disabled: boolean } {
+  if (opt !== null && typeof opt === 'object') {
+    // {value,label} | {key,value} | {value,...}
+    const hasKey = 'key' in opt && !('label' in opt);
+    const value = hasKey ? (opt as any).key : (opt as any).value;
+    const rawLabel = hasKey
+      ? (opt as any).value
+      : 'label' in opt && (opt as any).label != null
+        ? (opt as any).label
+        : (opt as any).value;
+    const disabled = !!((opt as any).isDisabled || (opt as any).isSeries);
+    return { value: String(value), rawLabel, disabled };
+  }
+  // primitive
+  return { value: String(opt), rawLabel: opt, disabled: false };
+}
+
+const FormDropdown: React.FunctionComponent<FormDropdownProps> = observer(
+  ({ field, t, namespace, isObj, isApiTranslated, isMulti, disableClearable, freeSolo, disabled, style, className, hideLabel }) => {
+    // ---- label resolution (legacy getOptions parity) -------------------------------------------
+    const labelFor = React.useCallback(
+      (rawLabel: any): string => {
+        const s = rawLabel == null ? '' : String(rawLabel);
+        if (isApiTranslated) return s; // already translated in field.extra
+        if (namespace) {
+          if (namespace === 'cbd') return t(`cbd:${s}`);
+          // a "labelled" option translates under the namespace; a bare primitive translates as-is.
+          return t(s) === s ? t(`${namespace}:${s}`) : t(s);
+        }
+        return t(s);
+      },
+      [t, namespace, isApiTranslated],
+    );
+
+    // ---- options (memoized off field.extra) -----------------------------------------------------
+    const raw: RawOption[] = Array.isArray(field.extra) ? field.extra : [];
+    const options: DropdownOption[] = React.useMemo(
+      () =>
+        raw.map((o) => {
+          const n = normalizeOption(o);
+          return { value: n.value, label: labelFor(n.rawLabel), disabled: n.disabled };
+        }),
+      // field.extra identity changes when the form `.set('extra', …)` runs (make->models).
+      [raw, labelFor],
+    );
+
+    const hasError = !!field.hasError && !!field.error;
+    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
+    const isDisabled = !!field.disabled || !!disabled;
+
+    // =========================================================================================
+    // MULTI — primitive array value, checklist menu, chips on the trigger.
+    // =========================================================================================
+    if (isMulti) {
+      return (
+        <MultiDropdown
+          field={field}
+          options={options}
+          label={hideLabel ? '' : label}
+          hasError={hasError}
+          disabled={isDisabled}
+          ariaLabel={label}
+          style={style}
+          className={className}
+        />
+      );
+    }
+
+    // =========================================================================================
+    // SINGLE — value is {value,label} (default) or the source object (isObj).
+    // =========================================================================================
+    // current scalar value to highlight in the menu (legacy reads value.value ?? value).
+    const rawValue = field.value;
+    const currentValue =
+      rawValue && typeof rawValue === 'object'
+        ? String(rawValue.value != null ? rawValue.value : '')
+        : rawValue != null
+          ? String(rawValue)
+          : '';
+
+    const commit = (next: string) => {
+      if (next === '') {
+        // clear (only reachable when !disableClearable).
+        field.onChange(isObj ? null : '', field.name);
+        return;
+      }
+      if (isObj) {
+        // resolve the SOURCE option object out of field.extra (matched by value/key) so
+        // form.output keeps receiving the object (GENDERS/TITLES parity).
+        const match = raw.find((o) => {
+          const n = normalizeOption(o);
+          return n.value === next;
+        });
+        field.onChange(match != null ? match : null, field.name);
+      } else {
+        // legacy getValue(): commit the {value,label} pair.
+        const chosen = options.find((o) => o.value === next);
+        field.onChange({ value: next, label: chosen ? chosen.label : next }, field.name);
+      }
+    };
+
+    // a clear option is prepended (mirrors MaterialAutocomplete's clear) unless disabled.
+    const menuOptions: DropdownOption[] =
+      disableClearable || !currentValue ? options : [{ value: '', label: '—' }, ...options];
+
+    return (
+      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
+        {label && !hideLabel ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
+        <Dropdown
+          value={currentValue}
+          options={menuOptions}
+          onChange={commit}
+          placeholder={label || '—'}
+          ariaLabel={label}
+          disabled={isDisabled}
+          className={hasError ? 'mfd-invalid' : undefined}
+        />
+        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------------------------
+// Multi-select — built on the same mselect-* classes as the base Dropdown, with a checklist
+// menu and chips on the trigger. Value is a primitive string[] (legacy MaterialSelect parity:
+// onChange(values, field.name); field.output keeps Array.isArray(values) ? values : null).
+// ---------------------------------------------------------------------------------------------
+interface MultiProps {
+  field: any;
+  options: DropdownOption[];
+  label: string;
+  hasError: boolean;
+  disabled: boolean;
+  ariaLabel: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const MultiDropdown: React.FunctionComponent<MultiProps> = observer(
+  ({ field, options, label, hasError, disabled, ariaLabel, style, className }) => {
+    const [open, setOpen] = React.useState(false);
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const btnRef = React.useRef<HTMLButtonElement | null>(null);
+
+    const selected: string[] = Array.isArray(field.value) ? field.value.map(String) : [];
+
+    // click-away (guarded for SSR), matching the base Dropdown.
+    React.useEffect(() => {
+      if (!open || typeof document === 'undefined') return undefined;
+      const onDocMouseDown = (e: MouseEvent) => {
+        if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+      };
+      document.addEventListener('mousedown', onDocMouseDown);
+      return () => document.removeEventListener('mousedown', onDocMouseDown);
+    }, [open]);
+
+    const toggle = (value: string) => {
+      if (disabled) return;
+      const next = selected.indexOf(value) > -1 ? selected.filter((v) => v !== value) : [...selected, value];
+      field.onChange(next, field.name);
+    };
+
+    const removeChip = (e: React.MouseEvent, value: string) => {
+      e.stopPropagation();
+      if (disabled) return;
+      field.onChange(selected.filter((v) => v !== value), field.name);
+    };
+
+    const onTriggerKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (e.key === 'Escape') {
+        setOpen(false);
+        if (btnRef.current) btnRef.current.focus();
+      } else if (e.key === 'Tab') {
+        setOpen(false);
+      } else if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+
+    const labelOf = (value: string) => {
+      const o = options.find((opt) => opt.value === value);
+      return o ? o.label : value;
+    };
+
+    return (
+      <div className={'mfd' + (className ? ' ' + className : '')} style={style}>
+        {label ? <label className="md-label-sm mfield-label mfd-label">{label}</label> : null}
+        <div className="mselect mselect--block mfd-multi" ref={rootRef}>
+          <button
+            ref={btnRef}
+            type="button"
+            className={'mselect-btn mfd-multi-btn' + (hasError ? ' mfd-invalid' : '')}
+            aria-haspopup="listbox"
+            aria-expanded={open}
+            aria-label={ariaLabel}
+            disabled={disabled}
+            onClick={() => setOpen((o) => !o)}
+            onKeyDown={onTriggerKeyDown}
+          >
+            {selected.length ? (
+              <span className="mfd-chips">
+                {selected.map((v) => (
+                  <span className="mfd-chip" key={v}>
+                    <span className="mfd-chip-label">{labelOf(v)}</span>
+                    <span
+                      className="mfd-chip-x"
+                      role="button"
+                      tabIndex={-1}
+                      aria-label="remove"
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={(e) => removeChip(e, v)}
+                    >
+                      <Icon name="x" size={13} />
+                    </span>
+                  </span>
+                ))}
+              </span>
+            ) : (
+              <span className="mselect-label mselect-label--ph">{label || '—'}</span>
+            )}
+            <Icon name="chevron-down" cls="mselect-chev" />
+          </button>
+          {open && (
+            <ul className="mselect-menu mfd-multi-menu" role="listbox" aria-multiselectable="true" tabIndex={-1}>
+              {options.map((opt, i) => {
+                const checked = selected.indexOf(opt.value) > -1;
+                return (
+                  <li key={`${opt.value}_${i}`} role="presentation">
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={checked}
+                      disabled={opt.disabled}
+                      className={'mselect-opt mfd-multi-opt' + (checked ? ' is-checked' : '')}
+                      onClick={() => toggle(opt.value)}
+                    >
+                      <span className={'mfd-check' + (checked ? ' mfd-check--on' : '')}>
+                        {checked ? <Icon name="check" size={14} /> : null}
+                      </span>
+                      <span className="mselect-opt-label">{opt.label}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+        {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default FormDropdown;

package/ui/FormField.tsx

@@ -0,0 +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;

package/ui/FormRadio.tsx

@@ -0,0 +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;