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

package/ui/Skeleton.tsx

@@ -1,75 +1,75 @@
-// Autobahn (auto.de redesign) — md3 loading skeleton.
-//
-// md3.css ships no skeleton class, so this is the ONE addition covering every
-// legacy `Skeleton`/`SkeletonItem` (MUI) call site: a div with an animated
-// gradient shimmer built from --md surface tokens. Prop surface mirrors the
-// subset fe-main actually used (variant / width / height / className / style;
-// `animation` is accepted and ignored — the shimmer always runs).
-// Renders correctly only inside a `<div className="md3">` subtree.
-
-import React from 'react';
-
-export interface SkeletonProps {
-  variant?: 'text' | 'rectangular' | 'circular';
-  width?: number | string;
-  height?: number | string;
-  className?: string;
-  style?: React.CSSProperties;
-  /** legacy MUI prop, accepted and ignored. */
-  animation?: 'pulse' | 'wave' | false;
-  children?: React.ReactNode;
-}
-
-const SKELETON_CSS = `
-.md3 .mskeleton {
-  display: block;
-  background: linear-gradient(90deg, var(--md-sc) 25%, var(--md-sc-high, var(--md-sc-lowest)) 37%, var(--md-sc) 63%);
-  background-size: 400% 100%;
-  animation: md3-skeleton-shimmer 1.4s ease infinite;
-  border-radius: var(--md-r-sm);
-}
-.md3 .mskeleton--text { border-radius: var(--md-r-xs, 4px); transform: scale(1, 0.7); }
-.md3 .mskeleton--circular { border-radius: 50%; }
-@keyframes md3-skeleton-shimmer {
-  0% { background-position: 100% 50%; }
-  100% { background-position: 0 50%; }
-}`;
-
-const SKELETON_STYLE_ID = 'md3-skeleton-styles';
-
-// one <style id> in document.head no matter how many skeletons mount — the same
-// pattern fe-main's VehicleSmallCardMd3 uses. SSR-safe (guarded document access).
-function ensureStylesInjected(): void {
-  if (typeof document === 'undefined' || document.getElementById(SKELETON_STYLE_ID)) {
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = SKELETON_STYLE_ID;
-  style.innerHTML = SKELETON_CSS;
-  document.head.appendChild(style);
-}
-
-const Skeleton: React.FunctionComponent<SkeletonProps> = ({
-  variant = 'rectangular', width, height, className, style, children,
-}) => {
-  React.useEffect(() => { ensureStylesInjected(); }, []);
-  const dims: React.CSSProperties = {};
-  if (width != null) dims.width = width;
-  if (height != null) dims.height = height;
-  if (variant === 'text' && height == null) dims.height = '1.2em';
-  return (
-    <span
-      className={
-        'mskeleton' +
-        (variant !== 'rectangular' ? ` mskeleton--${variant}` : '') +
-        (className ? ` ${className}` : '')
-      }
-      style={{ ...dims, ...style }}
-      aria-hidden='true'
-    >
-      {children}
-    </span>
-  );
-};
-
-export default Skeleton;
+// Autobahn (auto.de redesign) — md3 loading skeleton.
+//
+// md3.css ships no skeleton class, so this is the ONE addition covering every
+// legacy `Skeleton`/`SkeletonItem` (MUI) call site: a div with an animated
+// gradient shimmer built from --md surface tokens. Prop surface mirrors the
+// subset fe-main actually used (variant / width / height / className / style;
+// `animation` is accepted and ignored — the shimmer always runs).
+// Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+export interface SkeletonProps {
+  variant?: 'text' | 'rectangular' | 'circular';
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** legacy MUI prop, accepted and ignored. */
+  animation?: 'pulse' | 'wave' | false;
+  children?: React.ReactNode;
+}
+
+const SKELETON_CSS = `
+.md3 .mskeleton {
+  display: block;
+  background: linear-gradient(90deg, var(--md-sc) 25%, var(--md-sc-high, var(--md-sc-lowest)) 37%, var(--md-sc) 63%);
+  background-size: 400% 100%;
+  animation: md3-skeleton-shimmer 1.4s ease infinite;
+  border-radius: var(--md-r-sm);
+}
+.md3 .mskeleton--text { border-radius: var(--md-r-xs, 4px); transform: scale(1, 0.7); }
+.md3 .mskeleton--circular { border-radius: 50%; }
+@keyframes md3-skeleton-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}`;
+
+const SKELETON_STYLE_ID = 'md3-skeleton-styles';
+
+// one <style id> in document.head no matter how many skeletons mount — the same
+// pattern fe-main's VehicleSmallCardMd3 uses. SSR-safe (guarded document access).
+function ensureStylesInjected(): void {
+  if (typeof document === 'undefined' || document.getElementById(SKELETON_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = SKELETON_STYLE_ID;
+  style.innerHTML = SKELETON_CSS;
+  document.head.appendChild(style);
+}
+
+const Skeleton: React.FunctionComponent<SkeletonProps> = ({
+  variant = 'rectangular', width, height, className, style, children,
+}) => {
+  React.useEffect(() => { ensureStylesInjected(); }, []);
+  const dims: React.CSSProperties = {};
+  if (width != null) dims.width = width;
+  if (height != null) dims.height = height;
+  if (variant === 'text' && height == null) dims.height = '1.2em';
+  return (
+    <span
+      className={
+        'mskeleton' +
+        (variant !== 'rectangular' ? ` mskeleton--${variant}` : '') +
+        (className ? ` ${className}` : '')
+      }
+      style={{ ...dims, ...style }}
+      aria-hidden='true'
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Skeleton;

package/ui/Spec.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface SpecProps {
-  /** kebab-case lucide icon name. */
-  icon: string;
-  /** caption shown beneath the bold value. */
-  label?: React.ReactNode;
-  /** the bold value. */
-  children?: React.ReactNode;
-}
-
-const Spec: React.FunctionComponent<SpecProps> = ({ icon, label, children }) => (
-  <div className="specitem">
-    <Icon name={icon} size={20} stroke={1.75} />
-    <div>
-      <b>{children}</b>
-      <span>{label}</span>
-    </div>
-  </div>
-);
-
-export default Spec;
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface SpecProps {
+  /** kebab-case lucide icon name. */
+  icon: string;
+  /** caption shown beneath the bold value. */
+  label?: React.ReactNode;
+  /** the bold value. */
+  children?: React.ReactNode;
+}
+
+const Spec: React.FunctionComponent<SpecProps> = ({ icon, label, children }) => (
+  <div className="specitem">
+    <Icon name={icon} size={20} stroke={1.75} />
+    <div>
+      <b>{children}</b>
+      <span>{label}</span>
+    </div>
+  </div>
+);
+
+export default Spec;

package/ui/Stars.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface StarsProps {
-  /** rating value 0–5; each star fills when value − index >= 0.5. */
-  value: number;
-  size?: number;
-}
-
-/** 5-star row (rounded to nearest .5). */
-const Stars: React.FunctionComponent<StarsProps> = ({ value, size = 16 }) => (
-  <span style={{ display: 'inline-flex', gap: 1 }}>
-    {[0, 1, 2, 3, 4].map((i) => {
-      const fill = value - i;
-      return (
-        <Icon
-          key={i}
-          name={fill >= 0.5 ? 'star' : 'star'}
-          size={size}
-          color={fill >= 0.5 ? '#F2A900' : '#D8D6DC'}
-          style={{ fill: fill >= 0.5 ? '#F2A900' : '#D8D6DC' }}
-        />
-      );
-    })}
-  </span>
-);
-
-export default Stars;
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface StarsProps {
+  /** rating value 0–5; each star fills when value − index >= 0.5. */
+  value: number;
+  size?: number;
+}
+
+/** 5-star row (rounded to nearest .5). */
+const Stars: React.FunctionComponent<StarsProps> = ({ value, size = 16 }) => (
+  <span style={{ display: 'inline-flex', gap: 1 }}>
+    {[0, 1, 2, 3, 4].map((i) => {
+      const fill = value - i;
+      return (
+        <Icon
+          key={i}
+          name={fill >= 0.5 ? 'star' : 'star'}
+          size={size}
+          color={fill >= 0.5 ? '#F2A900' : '#D8D6DC'}
+          style={{ fill: fill >= 0.5 ? '#F2A900' : '#D8D6DC' }}
+        />
+      );
+    })}
+  </span>
+);
+
+export default Stars;

package/ui/StatChip.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export type StatChipTone = 'good' | 'warn';
-
-export interface StatChipProps {
-  tone?: StatChipTone;
-  /** kebab-case lucide icon name rendered before the content. */
-  icon?: string;
-  children?: React.ReactNode;
-}
-
-const StatChip: React.FunctionComponent<StatChipProps> = ({ tone = 'good', icon, children }) => (
-  <span className={`statchip statchip--${tone}`}>
-    {icon && <Icon name={icon} size={14} />}
-    {children}
-  </span>
-);
-
-export default StatChip;
+import React from 'react';
+
+import Icon from './Icon';
+
+export type StatChipTone = 'good' | 'warn';
+
+export interface StatChipProps {
+  tone?: StatChipTone;
+  /** kebab-case lucide icon name rendered before the content. */
+  icon?: string;
+  children?: React.ReactNode;
+}
+
+const StatChip: React.FunctionComponent<StatChipProps> = ({ tone = 'good', icon, children }) => (
+  <span className={`statchip statchip--${tone}`}>
+    {icon && <Icon name={icon} size={14} />}
+    {children}
+  </span>
+);
+
+export default StatChip;

package/ui/Stepper.tsx

@@ -1,106 +1,106 @@
-// Autobahn (auto.de redesign) — md3 step indicator (numbered circles + connectors).
-//
-// A reusable, presentational MD3 stepper for multi-step flows (Checkout, …). Mirrors the
-// visual language of the inline `.co-stepper` in CheckoutChromeNext (30px numbered dots,
-// primary-filled done/active states, 2px connectors) but generalised: it takes a plain
-// `steps` array + `activeStep`, supports horizontal/vertical orientation, and is non-linear
-// (any step is clickable via `onStepClick`). Step state is derived from `activeStep` unless a
-// step carries an explicit `status` (so a flow that tracks per-step completion — e.g. the
-// checkout store's `completed` set — can mark a later step done or an earlier one still todo).
-//
-// Pure/presentational: no store, no API, no window access. Not observer-wrapped — it binds to
-// no mobx field; callers that read observable state (e.g. checkoutStore.activeStep) should wrap
-// their own render. Renders correctly only inside a `<div className="md3">` subtree.
-
-import React from 'react';
-
-import Icon from './Icon';
-
-export type StepStatus = 'done' | 'active' | 'todo';
-
-export interface StepperStep {
-  /** visible step label. */
-  label: string;
-  /** explicit state override; when omitted it's derived from `activeStep` (index < active = done). */
-  status?: StepStatus;
-}
-
-export interface StepperProps {
-  /** the steps, in order. */
-  steps: StepperStep[];
-  /** index of the current step (0-based). */
-  activeStep: number;
-  /** layout direction (default 'horizontal'). */
-  orientation?: 'horizontal' | 'vertical';
-  /** non-linear: fired with the clicked step's index. When omitted, steps are not interactive. */
-  onStepClick?: (index: number) => void;
-  /** accessible label for the stepper nav (e.g. the flow name). */
-  ariaLabel?: string;
-  /** extra class(es) appended after the mstep classes (layout hooks). */
-  className?: string;
-}
-
-const Stepper: React.FunctionComponent<StepperProps> = ({
-  steps,
-  activeStep,
-  orientation = 'horizontal',
-  onStepClick,
-  ariaLabel,
-  className,
-}) => {
-  // derive state: explicit `status` wins; otherwise index vs activeStep.
-  const resolve = (step: StepperStep, index: number): StepStatus => {
-    if (step.status) return step.status;
-    if (index < activeStep) return 'done';
-    if (index === activeStep) return 'active';
-    return 'todo';
-  };
-
-  const clickable = typeof onStepClick === 'function';
-
-  const wrapCls = ['mstep', `mstep--${orientation}`, clickable && 'mstep--clickable', className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <nav className={wrapCls} aria-label={ariaLabel}>
-      <ol className="mstep-list">
-        {steps.map((step, i) => {
-          const status = resolve(step, i);
-          const isLast = i === steps.length - 1;
-          const itemCls = `mstep-item mstep-item--${status}`;
-          const dot = status === 'done' ? <Icon name="check" size={16} /> : i + 1;
-
-          // the dot + label are a button when interactive, a plain span otherwise — so a
-          // non-linear flow gets real focus/keyboard semantics without forcing them on a
-          // read-only indicator.
-          const inner = clickable ? (
-            <button
-              type="button"
-              className="mstep-btn"
-              aria-current={status === 'active' ? 'step' : undefined}
-              onClick={() => onStepClick && onStepClick(i)}
-            >
-              <span className="mstep-dot">{dot}</span>
-              <span className="mstep-label">{step.label}</span>
-            </button>
-          ) : (
-            <span className="mstep-btn" aria-current={status === 'active' ? 'step' : undefined}>
-              <span className="mstep-dot">{dot}</span>
-              <span className="mstep-label">{step.label}</span>
-            </span>
-          );
-
-          return (
-            <li key={`${step.label}_${i}`} className={itemCls}>
-              {inner}
-              {!isLast ? <span className="mstep-connector" aria-hidden="true" /> : null}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default Stepper;
+// Autobahn (auto.de redesign) — md3 step indicator (numbered circles + connectors).
+//
+// A reusable, presentational MD3 stepper for multi-step flows (Checkout, …). Mirrors the
+// visual language of the inline `.co-stepper` in CheckoutChromeNext (30px numbered dots,
+// primary-filled done/active states, 2px connectors) but generalised: it takes a plain
+// `steps` array + `activeStep`, supports horizontal/vertical orientation, and is non-linear
+// (any step is clickable via `onStepClick`). Step state is derived from `activeStep` unless a
+// step carries an explicit `status` (so a flow that tracks per-step completion — e.g. the
+// checkout store's `completed` set — can mark a later step done or an earlier one still todo).
+//
+// Pure/presentational: no store, no API, no window access. Not observer-wrapped — it binds to
+// no mobx field; callers that read observable state (e.g. checkoutStore.activeStep) should wrap
+// their own render. Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export type StepStatus = 'done' | 'active' | 'todo';
+
+export interface StepperStep {
+  /** visible step label. */
+  label: string;
+  /** explicit state override; when omitted it's derived from `activeStep` (index < active = done). */
+  status?: StepStatus;
+}
+
+export interface StepperProps {
+  /** the steps, in order. */
+  steps: StepperStep[];
+  /** index of the current step (0-based). */
+  activeStep: number;
+  /** layout direction (default 'horizontal'). */
+  orientation?: 'horizontal' | 'vertical';
+  /** non-linear: fired with the clicked step's index. When omitted, steps are not interactive. */
+  onStepClick?: (index: number) => void;
+  /** accessible label for the stepper nav (e.g. the flow name). */
+  ariaLabel?: string;
+  /** extra class(es) appended after the mstep classes (layout hooks). */
+  className?: string;
+}
+
+const Stepper: React.FunctionComponent<StepperProps> = ({
+  steps,
+  activeStep,
+  orientation = 'horizontal',
+  onStepClick,
+  ariaLabel,
+  className,
+}) => {
+  // derive state: explicit `status` wins; otherwise index vs activeStep.
+  const resolve = (step: StepperStep, index: number): StepStatus => {
+    if (step.status) return step.status;
+    if (index < activeStep) return 'done';
+    if (index === activeStep) return 'active';
+    return 'todo';
+  };
+
+  const clickable = typeof onStepClick === 'function';
+
+  const wrapCls = ['mstep', `mstep--${orientation}`, clickable && 'mstep--clickable', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <nav className={wrapCls} aria-label={ariaLabel}>
+      <ol className="mstep-list">
+        {steps.map((step, i) => {
+          const status = resolve(step, i);
+          const isLast = i === steps.length - 1;
+          const itemCls = `mstep-item mstep-item--${status}`;
+          const dot = status === 'done' ? <Icon name="check" size={16} /> : i + 1;
+
+          // the dot + label are a button when interactive, a plain span otherwise — so a
+          // non-linear flow gets real focus/keyboard semantics without forcing them on a
+          // read-only indicator.
+          const inner = clickable ? (
+            <button
+              type="button"
+              className="mstep-btn"
+              aria-current={status === 'active' ? 'step' : undefined}
+              onClick={() => onStepClick && onStepClick(i)}
+            >
+              <span className="mstep-dot">{dot}</span>
+              <span className="mstep-label">{step.label}</span>
+            </button>
+          ) : (
+            <span className="mstep-btn" aria-current={status === 'active' ? 'step' : undefined}>
+              <span className="mstep-dot">{dot}</span>
+              <span className="mstep-label">{step.label}</span>
+            </span>
+          );
+
+          return (
+            <li key={`${step.label}_${i}`} className={itemCls}>
+              {inner}
+              {!isLast ? <span className="mstep-connector" aria-hidden="true" /> : null}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default Stepper;

package/ui/Switch.tsx

@@ -1,65 +1,65 @@
-// Autobahn (auto.de redesign) — md3 toggle switch.
-//
-// Drop-in visual replacement for the legacy fe-ui-core `Switch` (used in
-// SettingsPage → ProfileTabDataUsage as `<Switch checked={field.checked} onChange={field.onChange} />`,
-// bound to DataUsageForm.$('email') / $('research')). It emits the `.mswitch` track+thumb
-// markup that already lives in theme/autobahn/md3.css.
-//
-// 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. So when `field` is
-//   passed we render `<input type="checkbox" checked={field.checked} onChange={field.onChange}>`
-//   and let the native event flow straight through, unchanged. No wrapping, no boolean coercion.
-//
-// Two modes:
-//   - BOUND:      pass `field` → reads field.checked, forwards the native event to field.onChange.
-//   - CONTROLLED: pass `checked` + `onChange` → `onChange` receives the native React change event
-//                 (same shape the field handler gets), so callers can read e.target.checked.
-//
-// observer-wrapped so the bound mode re-renders when field.checked changes. Pure/presentational
-// otherwise. Renders correctly only inside a `<div className="md3">` subtree (scoped theme).
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-export interface SwitchProps {
-  /** mobx-react-form field (DataUsageForm.$('email') etc.). Typed any — the lib ships no TS types. */
-  field?: any;
-  /** controlled checked state (ignored when `field` is supplied). */
-  checked?: boolean;
-  /** native change-event handler. Bound mode forwards the field's own handler; controlled mode gets the React event. */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** optional visible label rendered after the track. */
-  label?: React.ReactNode;
-  disabled?: boolean;
-  id?: string;
-  /** accessible label when there is no visible `label`. */
-  ariaLabel?: string;
-}
-
-const Switch: React.FunctionComponent<SwitchProps> = observer(
-  ({ field, checked, onChange, label, disabled, id, ariaLabel }) => {
-    // Bound mode reads straight off the field; controlled mode uses the `checked` prop.
-    const isChecked = field ? !!field.checked : !!checked;
-    const handleChange = field ? field.onChange : onChange;
-
-    return (
-      <label className={'mswitch' + (disabled ? ' mswitch--disabled' : '') + (label ? ' mswitch--labeled' : '')}>
-        <input
-          id={id}
-          type="checkbox"
-          role="switch"
-          checked={isChecked}
-          disabled={disabled}
-          aria-label={ariaLabel}
-          aria-checked={isChecked}
-          onChange={handleChange}
-        />
-        <span className="mswitch-track"><span className="mswitch-thumb" /></span>
-        {label ? <span className="mswitch-label">{label}</span> : null}
-      </label>
-    );
-  },
-);
-
-export default Switch;
+// Autobahn (auto.de redesign) — md3 toggle switch.
+//
+// Drop-in visual replacement for the legacy fe-ui-core `Switch` (used in
+// SettingsPage → ProfileTabDataUsage as `<Switch checked={field.checked} onChange={field.onChange} />`,
+// bound to DataUsageForm.$('email') / $('research')). It emits the `.mswitch` track+thumb
+// markup that already lives in theme/autobahn/md3.css.
+//
+// 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. So when `field` is
+//   passed we render `<input type="checkbox" checked={field.checked} onChange={field.onChange}>`
+//   and let the native event flow straight through, unchanged. No wrapping, no boolean coercion.
+//
+// Two modes:
+//   - BOUND:      pass `field` → reads field.checked, forwards the native event to field.onChange.
+//   - CONTROLLED: pass `checked` + `onChange` → `onChange` receives the native React change event
+//                 (same shape the field handler gets), so callers can read e.target.checked.
+//
+// observer-wrapped so the bound mode re-renders when field.checked changes. Pure/presentational
+// otherwise. Renders correctly only inside a `<div className="md3">` subtree (scoped theme).
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+export interface SwitchProps {
+  /** mobx-react-form field (DataUsageForm.$('email') etc.). Typed any — the lib ships no TS types. */
+  field?: any;
+  /** controlled checked state (ignored when `field` is supplied). */
+  checked?: boolean;
+  /** native change-event handler. Bound mode forwards the field's own handler; controlled mode gets the React event. */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** optional visible label rendered after the track. */
+  label?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  /** accessible label when there is no visible `label`. */
+  ariaLabel?: string;
+}
+
+const Switch: React.FunctionComponent<SwitchProps> = observer(
+  ({ field, checked, onChange, label, disabled, id, ariaLabel }) => {
+    // Bound mode reads straight off the field; controlled mode uses the `checked` prop.
+    const isChecked = field ? !!field.checked : !!checked;
+    const handleChange = field ? field.onChange : onChange;
+
+    return (
+      <label className={'mswitch' + (disabled ? ' mswitch--disabled' : '') + (label ? ' mswitch--labeled' : '')}>
+        <input
+          id={id}
+          type="checkbox"
+          role="switch"
+          checked={isChecked}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-checked={isChecked}
+          onChange={handleChange}
+        />
+        <span className="mswitch-track"><span className="mswitch-thumb" /></span>
+        {label ? <span className="mswitch-label">{label}</span> : null}
+      </label>
+    );
+  },
+);
+
+export default Switch;