@bytebrand/fe-ui-core-autobahn 1.0.0

package/ui/CardCarousel.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import Icon from './Icon';
+
+export interface CardCarouselProps {
+  /** ready-to-use image URLs (already resolved by the caller — no asset/window lookup here). */
+  images: string[];
+  /** px number or any CSS length (e.g. "100%") so cards can fill their media box. */
+  height?: number | string;
+  radius?: number | string;
+  /** fired with the new active index whenever the slide changes. */
+  onChange?: (index: number) => void;
+  /** object-fit for each image; 'contain' adds inset padding. */
+  fit?: 'cover' | 'contain';
+}
+
+/**
+ * Image carousel for cards — touch-swipeable, dots + hover arrows (desktop).
+ * Stops click bubbling so it can live inside a clickable card.
+ */
+const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
+  images,
+  height = 188,
+  radius,
+  onChange,
+  fit = 'cover',
+}) => {
+  const [i, setI] = useState(0);
+  const n = images.length;
+  // MOBX-CQ-2: reset to the first slide whenever the caller hands us a
+  // DIFFERENT gallery (this instance reused for another car) — otherwise a
+  // stale index can point past the end of a shorter gallery or show the
+  // wrong photo. Keyed on CONTENT, not array identity: parents (e.g. the
+  // VDP) rebuild the array every render, and an identity-keyed reset undid
+  // every arrow click whose onChange triggered a parent re-render (the
+  // counter advanced while the track snapped back to slide 0).
+  const gallerySignature = images.join('|');
+  useEffect(() => {
+    setI(0);
+  }, [gallerySignature]);
+  const jump = (nx: number, e?: React.SyntheticEvent) => {
+    e && e.stopPropagation();
+    setI(nx);
+    onChange && onChange(nx);
+  };
+  const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const tx = useRef<number | null>(null);
+  return (
+    <div
+      className="cardcar"
+      style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
+      onTouchStart={(e) => {
+        tx.current = e.touches[0].clientX;
+      }}
+      onTouchEnd={(e) => {
+        if (tx.current == null) return;
+        const dx = e.changedTouches[0].clientX - tx.current;
+        tx.current = null;
+        if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+      }}
+    >
+      <div
+        ref={trackRef}
+        style={{
+          display: 'flex',
+          height: '100%',
+          transform: `translateX(-${i * 100}%)`,
+          transition: 'transform var(--dur-3) var(--ease-emphasized)',
+        }}
+      >
+        {images.map((src, k) => (
+          <img
+            key={k}
+            src={src}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            style={{
+              flex: '0 0 100%',
+              width: '100%',
+              height: '100%',
+              objectFit: fit,
+              padding: fit === 'contain' ? '5% 6%' : 0,
+              boxSizing: 'border-box',
+              background: '#fff',
+            }}
+          />
+        ))}
+      </div>
+      {/* arrows + dots only when there is actually something to switch to — with a single
+          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}
+      {n > 1 && (
+        <>
+          <button className="car-arrow car-arrow--l" aria-label="zurück" onClick={(e) => go(-1, e)}>
+            <Icon name="chevron-left" size={20} />
+          </button>
+          <button className="car-arrow car-arrow--r" aria-label="weiter" onClick={(e) => go(1, e)}>
+            <Icon name="chevron-right" size={20} />
+          </button>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 9,
+              left: 0,
+              right: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              gap: 6,
+              pointerEvents: 'none',
+            }}
+          >
+            {images.slice(0, 6).map((_, k) => (
+              <span
+                key={k}
+                style={{
+                  width: k === i ? 16 : 6,
+                  height: 6,
+                  borderRadius: 3,
+                  background: k === i ? 'var(--md-on-surface)' : 'rgba(26,27,34,.3)',
+                  boxShadow: '0 0 0 1px rgba(255,255,255,.5)',
+                  transition: 'width var(--dur-2)',
+                }}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CardCarousel;

package/ui/Chip.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface ChipProps {
+  /** kebab-case lucide icon name rendered before the label. */
+  icon?: string;
+  /** toggled/applied state — also drives `aria-pressed` so assistive tech announces the chip
+   * as a pressed toggle button (undefined = not a toggle, so no `aria-pressed` is rendered). */
+  selected?: boolean;
+  /** renders the filter-chip variant (different selected color). */
+  filter?: boolean;
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** native `<button>` type; defaults to "button" (see Button.tsx for the same footgun). */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+const Chip: React.FunctionComponent<ChipProps> = ({ icon, selected, filter, children, onClick, type = 'button' }) => {
+  const cn = ['chip', filter && 'chip--filter', selected && 'chip--selected'].filter(Boolean).join(' ');
+  return (
+    <button type={type} className={cn} aria-pressed={selected} onClick={onClick}>
+      {icon && <Icon name={icon} size={16} />}
+      {children}
+    </button>
+  );
+};
+
+export default Chip;

package/ui/DatePicker.tsx

@@ -0,0 +1,145 @@
+// Autobahn (auto.de redesign) — md3 date field bound to a mobx-react-form field.
+//
+// Native, themeable replacement for the legacy fe-ui-core <MaterialDatePicker> (which mounts a MUI
+// <MobileDatePicker> under its own <ThemeProvider> — that second theme bleeds into the scoped `.md3`
+// subtree and reads as "not-md3"). Instead we render a single <input type="date"> styled exactly like
+// `.mfield`, so the browser supplies a locale-correct calendar popup while WE own the visual chrome.
+//
+// DATA CONTRACT — must match the legacy MaterialDatePicker usage EXACTLY (5 pages: Einstellungen
+// birthday, Checkout birthday + co-borrower birthday, VehicleEdit constructionDate), because the same
+// mobx-react-form field + validation rules + submit hooks are reused unchanged:
+//   - value: Date | string | null  (legacy passes `field.value || null`; we read field.value here).
+//   - onChange emits a **Date object** via `field.onChange(value, field.name)` — the exact call the
+//     legacy callers wired into MaterialDatePicker's `onChange(value: Date)`. Clearing emits `null`.
+//   - minDate / maxDate: Date objects (legacy: `_minDate` = 1900-01-01, `handleMaxDateForPicker()` =
+//     today−18y). We forward them to the native input as min/max=yyyy-mm-dd so out-of-range dates
+//     can't be picked, mirroring the legacy onAccept clamp.
+//   - error shown inline from field.error (legacy passed `field.hasError && field.error`).
+//
+// The native <input type="date"> is locale-free at the value level (always yyyy-mm-dd), so the
+// `format`/`language` props are accepted for signature parity but don't change the wire value; the
+// browser renders the visible date in the user's locale. observer-wrapped so it re-renders on
+// field value/error changes. Renders correctly only inside a `<div className="md3">` subtree.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+export interface DatePickerProps {
+  /** mobx-react-form field (ContactDetailsForm.$('privateAddress.birthday') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves the field's label/placeholder key. Optional (matches legacy, which passed t). */
+  t?: (key: string, options?: object) => string;
+  /** kept for legacy signature parity; the native input value is always locale-free yyyy-mm-dd. */
+  language?: 'de' | 'en';
+  /** earliest selectable date (legacy `_minDate`). */
+  minDate?: Date;
+  /** latest selectable date (legacy `handleMaxDateForPicker()`). */
+  maxDate?: Date;
+  /** kept for legacy signature parity (display format); does not change the emitted Date value. */
+  format?: string;
+  /** explicit visible label override (legacy ProfileTabAccount/Checkout pass a namespaced label). */
+  label?: string;
+  id?: string;
+  disabled?: boolean;
+}
+
+/** Date | string | null -> 'yyyy-mm-dd' (the native <input type="date"> value), or '' when empty/invalid. */
+function toInputValue(value: Date | string | null | undefined): string {
+  if (!value) return '';
+  const d = value instanceof Date ? value : new Date(value);
+  const time = d.getTime();
+  if (Number.isNaN(time)) return '';
+  // Use local Y/M/D (not toISOString, which shifts by timezone and can land on the previous day).
+  const y = d.getFullYear();
+  const m = `${d.getMonth() + 1}`.padStart(2, '0');
+  const day = `${d.getDate()}`.padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+/** 'yyyy-mm-dd' -> a local-midnight Date (matching `new Date('01/01/1970')` semantics the legacy used), or null. */
+function fromInputValue(value: string): Date | null {
+  if (!value) return null;
+  const parts = value.split('-');
+  if (parts.length !== 3) return null;
+  const y = Number(parts[0]);
+  const m = Number(parts[1]);
+  const day = Number(parts[2]);
+  if (!y || !m || !day) return null;
+  return new Date(y, m - 1, day);
+}
+
+const DatePicker: React.FunctionComponent<DatePickerProps> = observer(
+  ({ field, t, minDate, maxDate, label, id, disabled }) => {
+    const translate = t || ((k: string) => k);
+    const hasError = !!field.hasError && !!field.error;
+
+    // Visible label: explicit `label` prop wins (namespaced callers), else FormField's pattern —
+    // prefer the field's placeholder key, else its label key. translate() returns the input
+    // unchanged when there's no translation, so this is safe for plain-string labels too.
+    const resolvedLabel =
+      label != null
+        ? label
+        : field.placeholder
+          ? translate(field.placeholder)
+          : field.label
+            ? translate(field.label)
+            : '';
+
+    const value = toInputValue(field.value);
+    const min = minDate ? toInputValue(minDate) : undefined;
+    const max = maxDate ? toInputValue(maxDate) : undefined;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = fromInputValue(e.target.value);
+      // Emit a Date (or null) via the EXACT legacy call: field.onChange(value, field.name).
+      field.onChange(next as any, field.name);
+    };
+
+    const handleBlur = () => {
+      // Mirror the legacy onBlurBirthday: validate, surfacing errors if the field is invalid.
+      if (typeof field.validate === 'function') {
+        const result = field.validate();
+        if (result && typeof result.then === 'function') {
+          result.then((subField: any) => {
+            if (field.isValid === false && subField && typeof subField.showErrors === 'function') {
+              subField.showErrors(true);
+            }
+          });
+        }
+      }
+    };
+
+    return (
+      <div className="mfield-group mdate">
+        {resolvedLabel ? (
+          <label className="md-label-sm mfield-label" htmlFor={id}>
+            {resolvedLabel}
+          </label>
+        ) : null}
+        <div
+          className={
+            'mfield mdate-field' +
+            (hasError ? ' mfield--error' : '') +
+            (disabled ? ' mfield--disabled' : '')
+          }
+        >
+          <input
+            id={id}
+            type="date"
+            className="mdate-input"
+            value={value}
+            min={min}
+            max={max}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            style={{ width: '100%' }}
+          />
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default DatePicker;

package/ui/Dropdown.tsx

@@ -0,0 +1,205 @@
+// Autobahn (auto.de redesign) — md3 single-select dropdown.
+//
+// A real, themeable replacement for the native HTML `<select>`. The browser renders
+// a native `<select>`'s option list with the OS popup, which CANNOT be styled (it
+// ignores the scoped `.md3` theme and reads as "broken"/un-md3). This component
+// reproduces the control as a button trigger (`.mselect-btn`, styled like `.mfield`)
+// plus an absolutely-positioned `.mcard`-style popover menu we fully control.
+//
+// Behaviour parity with a real select:
+//   - controlled: `value` + `options` ({value,label,disabled?}) + `onChange(value)`.
+//   - keyboard: ↓/Enter/Space open; ↑/↓ move the active option; Enter selects;
+//     Esc / Tab close (Esc refocuses the trigger); Home/End jump.
+//   - click-away (document mousedown) closes; the active option scrolls into view.
+//   - a11y: trigger `aria-haspopup=listbox` + `aria-expanded`; menu `role=listbox`;
+//     options `role=option` + `aria-selected`; `aria-activedescendant` tracks focus.
+//
+// Pure/presentational — no store/API/window beyond the click-away listener (guarded
+// for SSR). Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface DropdownProps {
+  /** currently selected option value. */
+  value: string;
+  /** the selectable options, in display order. */
+  options: DropdownOption[];
+  /** fired with the chosen option's value. */
+  onChange: (value: string) => void;
+  /** shown (muted) when `value` matches no option. */
+  placeholder?: string;
+  /** leading lucide icon (kebab-case), e.g. 'arrow-up-down'. */
+  icon?: string;
+  disabled?: boolean;
+  /** full-width trigger (default true for form fields; pass false for inline controls). */
+  block?: boolean;
+  /** compact height (sort bar / inline). */
+  size?: 'sm' | 'md';
+  /** accessible label when there is no visible <label> wrapping the control. */
+  ariaLabel?: string;
+  /** extra class on the wrapper (e.g. 'srp-sort' for width rules). */
+  className?: string;
+  /** align the popover to the right edge of the trigger (default left). */
+  menuAlign?: 'left' | 'right';
+}
+
+const Dropdown: React.FunctionComponent<DropdownProps> = ({
+  value,
+  options,
+  onChange,
+  placeholder,
+  icon,
+  disabled = false,
+  block = true,
+  size = 'md',
+  ariaLabel,
+  className,
+  menuAlign = 'left',
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const btnRef = React.useRef<HTMLButtonElement | null>(null);
+  const menuRef = React.useRef<HTMLUListElement | null>(null);
+  // stable id base for aria-activedescendant (avoids Math.random / Date.now, which are unavailable).
+  const idBase = React.useMemo(() => `mselect-${Math.round(value ? value.length : 0)}-`, [value]);
+
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = selectedIndex !== -1 ? options[selectedIndex] : undefined;
+
+  // close + restore focus to the trigger.
+  const close = React.useCallback((focusTrigger: boolean) => {
+    setOpen(false);
+    setActiveIndex(-1);
+    if (focusTrigger && btnRef.current) btnRef.current.focus();
+  }, []);
+
+  const openMenu = React.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    // start the keyboard highlight on the current selection (or the first option).
+    setActiveIndex(selectedIndex !== -1 ? selectedIndex : 0);
+  }, [disabled, selectedIndex]);
+
+  // click-away (guarded for SSR).
+  React.useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onDocMouseDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close(false);
+    };
+    document.addEventListener('mousedown', onDocMouseDown);
+    return () => document.removeEventListener('mousedown', onDocMouseDown);
+  }, [open, close]);
+
+  // keep the active option scrolled into view while navigating by keyboard.
+  React.useEffect(() => {
+    if (!open || activeIndex < 0 || !menuRef.current) return;
+    const el = menuRef.current.children[activeIndex] as HTMLElement | undefined;
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+  }, [open, activeIndex]);
+
+  const commit = (idx: number) => {
+    const opt = options[idx];
+    if (!opt || opt.disabled) return;
+    onChange(opt.value);
+    close(true);
+  };
+
+  // move the active highlight, skipping disabled options.
+  const move = (dir: 1 | -1) => {
+    if (!options.length) return;
+    let i = activeIndex;
+    for (let step = 0; step < options.length; step += 1) {
+      i = (i + dir + options.length) % options.length;
+      if (!options[i].disabled) {
+        setActiveIndex(i);
+        return;
+      }
+    }
+  };
+
+  const onTriggerKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openMenu();
+      }
+      return;
+    }
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break;
+      case 'ArrowUp': e.preventDefault(); move(-1); break;
+      case 'Home': e.preventDefault(); setActiveIndex(options.findIndex((o) => !o.disabled)); break;
+      case 'End': e.preventDefault(); for (let i = options.length - 1; i >= 0; i -= 1) { if (!options[i].disabled) { setActiveIndex(i); break; } } break;
+      case 'Enter': case ' ': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
+      case 'Escape': e.preventDefault(); close(true); break;
+      case 'Tab': close(false); break;
+      default: break;
+    }
+  };
+
+  const wrapCls = ['mselect'];
+  if (size === 'sm') wrapCls.push('mselect--sm');
+  if (block) wrapCls.push('mselect--block');
+  if (className) wrapCls.push(className);
+
+  const label = selected ? selected.label : placeholder || '';
+
+  return (
+    <div className={wrapCls.join(' ')} ref={rootRef}>
+      <button
+        ref={btnRef}
+        type="button"
+        className="mselect-btn"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={() => (open ? close(false) : openMenu())}
+        onKeyDown={onTriggerKeyDown}
+      >
+        {icon && <Icon name={icon} />}
+        <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
+        <Icon name="chevron-down" cls="mselect-chev" />
+      </button>
+      {open && (
+        <ul
+          ref={menuRef}
+          className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '')}
+          role="listbox"
+          tabIndex={-1}
+          aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+        >
+          {options.map((opt, i) => (
+            <li key={`${opt.value}_${i}`} role="presentation">
+              <button
+                id={`${idBase}${i}`}
+                type="button"
+                role="option"
+                aria-selected={opt.value === value}
+                disabled={opt.disabled}
+                className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => commit(i)}
+              >
+                <span className="mselect-opt-label">{opt.label}</span>
+                {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

package/ui/FileUpload.tsx

@@ -0,0 +1,154 @@
+// Autobahn (auto.de redesign) — md3 file-upload dropzone SHELL.
+//
+// This is the md3 *chrome* around a preserved upload engine — it does NOT upload anything
+// itself. The legacy pages keep their existing engine and slot it into this shell:
+//   - ImageUploadPage     → Uppy `<DragDrop uppy>` + `<ProgressBar uppy>` (Uppy owns its own
+//                           input + drag/drop); pass those as `children`. The shell is then
+//                           pure presentation; Uppy still wires every file/upload event.
+//   - ImageUploader (EXPORT settings, react-dropzone v4) → legacy `onDrop(files: File[])`.
+//                           Pass that same handler as `onFiles` and forward `multiple`/`accept`;
+//                           render the loader / preview as `children`.
+//
+// Standalone (no engine slotted in) it is still usable: clicking the zone or dropping files on
+// it fires `onFiles(File[])` via a hidden native <input type=file> — the SAME `File[]` shape
+// react-dropzone's `onDrop` uses, so it is a drop-in for that signature. When you slot a child
+// engine that owns its own input (Uppy), simply omit `onFiles` and the shell stays inert.
+//
+// Pure/presentational: no store, no API, no window access. The only state is the local
+// drag-over highlight. Renders correctly only inside a `<div className="md3">` subtree (scoped
+// theme). Not observer-wrapped — it binds to no mobx field (unlike FormField/Dropdown consumers).
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface FileUploadProps {
+  /**
+   * Fired with the selected/dropped files — matches react-dropzone v4's `onDrop(files: File[])`.
+   * Omit when the slotted engine (e.g. Uppy `<DragDrop>`) owns its own input/drop handling; the
+   * shell then becomes inert chrome (no hidden input, no drop handler) so it never double-fires.
+   */
+  onFiles?: (files: File[]) => void;
+  /** forwarded to the hidden native input's `accept` (e.g. 'image/*'). Ignored when `onFiles` is unset. */
+  accept?: string;
+  /** allow selecting/dropping more than one file (default true). Mirrors react-dropzone `multiple`. */
+  multiple?: boolean;
+  /** secondary hint line under the headline (e.g. allowed types / size). */
+  hint?: React.ReactNode;
+  /** non-interactive + dimmed (mirrors react-dropzone/Uppy `disabled` while uploading). */
+  disabled?: boolean;
+  /** extra class(es) appended after the `mfu` classes (layout hooks). */
+  className?: string;
+  /**
+   * Slot rendered BELOW the dropzone prompt: the file list / previews / progress bar, or the
+   * preserved engine element itself (Uppy `<DragDrop>` + `<ProgressBar>`).
+   */
+  children?: React.ReactNode;
+}
+
+const FileUpload: React.FunctionComponent<FileUploadProps> = ({
+  onFiles,
+  accept,
+  multiple = true,
+  hint,
+  disabled = false,
+  className,
+  children,
+}) => {
+  const [dragOver, setDragOver] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  // Only the shell drives input/drop when it is NOT just wrapping a self-contained engine.
+  const interactive = !disabled && typeof onFiles === 'function';
+
+  const emit = (list: FileList | null) => {
+    if (!interactive || !list || list.length === 0) return;
+    onFiles!(Array.prototype.slice.call(list) as File[]);
+  };
+
+  const openPicker = () => {
+    if (!interactive || !inputRef.current) return;
+    inputRef.current.click();
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emit(e.target.files);
+    // reset so selecting the same file again still fires change.
+    e.target.value = '';
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    if (!interactive) return;
+    e.preventDefault();
+    if (!dragOver) setDragOver(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    if (!interactive) return;
+    // ignore leave events bubbling from children still inside the zone.
+    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+    setDragOver(false);
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    if (!interactive) return;
+    e.preventDefault();
+    setDragOver(false);
+    emit(e.dataTransfer ? e.dataTransfer.files : null);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!interactive) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openPicker();
+    }
+  };
+
+  const cn = ['mfu', dragOver && 'mfu--over', disabled && 'mfu--disabled', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={cn}>
+      <div
+        className="mfu-zone"
+        role={interactive ? 'button' : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        aria-disabled={disabled || undefined}
+        onClick={openPicker}
+        onKeyDown={onKeyDown}
+        onDragOver={onDragOver}
+        onDragEnter={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <span className="mfu-icon">
+          <Icon name="upload-cloud" size={28} />
+        </span>
+        <span className="mfu-prompt">
+          <span className="mfu-link">Dateien auswählen</span>
+          <span className="mfu-or"> oder hierher ziehen</span>
+        </span>
+        {hint ? <span className="mfu-hint md-body-sm">{hint}</span> : null}
+        {interactive ? (
+          <input
+            ref={inputRef}
+            type="file"
+            className="mfu-input"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={onInputChange}
+            // hide visually but keep accessible; click is proxied from the zone.
+            tabIndex={-1}
+            aria-hidden="true"
+          />
+        ) : null}
+      </div>
+      {children ? <div className="mfu-slot">{children}</div> : null}
+    </div>
+  );
+};
+
+export default FileUpload;