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

package/ui/Table.tsx

@@ -1,156 +1,156 @@
-// Autobahn (auto.de redesign) — md3 data/spec table primitive set.
-//
-// A COMPOSABLE set of thin wrappers over the native table elements
-// (Table → <table>, Thead → <thead>, Tbody → <tbody>, Tr → <tr>, Th → <th>,
-// Td → <td>) so callers keep their EXACT legacy row structure when a MUI/
-// fe-ui-core table is re-skinned into md3. You re-skin in place:
-//
-//   <Table>                          // was <Table> / <table>
-//     <Thead>
-//       <Tr>
-//         <Th>Rechnung</Th>          // header surface-variant
-//         <Th align="right">Betrag</Th>
-//       </Tr>
-//     </Thead>
-//     <Tbody>
-//       {invoices.map((inv) => (
-//         <Tr key={inv.id}>          // row divider + hover
-//           <Td>{inv.number}</Td>
-//           <Td align="right" numeric>{inv.amount}</Td>
-//         </Tr>
-//       ))}
-//     </Tbody>
-//   </Table>
-//
-// `<Table>` always renders its own `overflow-x: auto` scroll wrapper, so a wide
-// table (Vergleich spec sheet, vehicle-options matrix) scrolls inside its own
-// box and never forces the page to scroll horizontally.
-//
-// Options: `dense` (tighter row height — Mitarbeiter / options lists),
-// `stickyHeader` (header pins while the body scrolls — long invoice/employee
-// lists), `align` (per-cell text alignment), `numeric` (tabular-nums for money/
-// counts), `width` (column sizing hint on a Th), `colSpan`/`rowSpan` (passthrough
-// for grouped spec rows).
-//
-// Pure/presentational: no store, no API, no window. Renders correctly only inside
-// a `<div className="md3">` subtree (scoped theme). No mobx binding — this is a
-// layout primitive, not a form control.
-
-import React from 'react';
-
-export type TableAlign = 'left' | 'center' | 'right';
-
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-  /** tighter row height for list-heavy tables (Mitarbeiter, vehicle options). */
-  dense?: boolean;
-  /**
-   * pin the header while the body scrolls (long invoice / employee lists).
-   * The caller is responsible for constraining the scroll height — wrap the
-   * `<Table>` in a box with `max-height` + the header stays put on vertical scroll.
-   */
-  stickyHeader?: boolean;
-  /** extra class on the inner `<table>` (layout hooks). */
-  className?: string;
-  /** extra class on the outer `overflow-x:auto` scroll wrapper. */
-  wrapperClassName?: string;
-  /** inline style applied to the outer scroll wrapper (e.g. max-height for sticky). */
-  wrapperStyle?: React.CSSProperties;
-  children?: React.ReactNode;
-}
-
-export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-  children?: React.ReactNode;
-}
-
-export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-  children?: React.ReactNode;
-}
-
-export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
-  /** visually mark the row as selected/active (e.g. current plan, chosen vehicle). */
-  selected?: boolean;
-  children?: React.ReactNode;
-}
-
-export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-  /** text alignment (default left). */
-  align?: TableAlign;
-  /** column-width hint, e.g. 160 or '30%'. */
-  width?: number | string;
-  children?: React.ReactNode;
-}
-
-export interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-  /** text alignment (default left). */
-  align?: TableAlign;
-  /** tabular-nums + alignment friendly to money/counts. */
-  numeric?: boolean;
-  children?: React.ReactNode;
-}
-
-// join classnames, dropping falsy.
-const cx = (...parts: Array<string | false | undefined>): string => parts.filter(Boolean).join(' ');
-
-// Per-cell alignment is applied as a class (not inline style) so it stays
-// overridable from md3.css and composes with the numeric rule.
-const alignCls = (align?: TableAlign): string | undefined =>
-  align && align !== 'left' ? `mtab-${align}` : undefined;
-
-/**
- * Root table. Renders an `overflow-x: auto` wrapper around a real `<table>`
- * so wide tables scroll inside their own box. Spreads extra `<table>` attrs.
- */
-export const Table: React.FunctionComponent<TableProps> = ({
-  dense,
-  stickyHeader,
-  className,
-  wrapperClassName,
-  wrapperStyle,
-  children,
-  ...rest
-}) => (
-  <div className={cx('mtab-wrap', wrapperClassName)} style={wrapperStyle}>
-    <table
-      className={cx('mtab', dense && 'mtab--dense', stickyHeader && 'mtab--sticky', className)}
-      {...rest}
-    >
-      {children}
-    </table>
-  </div>
-);
-
-export const Thead: React.FunctionComponent<TheadProps> = ({ className, children, ...rest }) => (
-  <thead className={cx('mtab-thead', className)} {...rest}>
-    {children}
-  </thead>
-);
-
-export const Tbody: React.FunctionComponent<TbodyProps> = ({ className, children, ...rest }) => (
-  <tbody className={cx('mtab-tbody', className)} {...rest}>
-    {children}
-  </tbody>
-);
-
-export const Tr: React.FunctionComponent<TrProps> = ({ selected, className, children, ...rest }) => (
-  <tr className={cx('mtab-tr', selected && 'is-selected', className)} {...rest}>
-    {children}
-  </tr>
-);
-
-export const Th: React.FunctionComponent<ThProps> = ({ align, width, className, style, children, ...rest }) => (
-  <th
-    className={cx('mtab-th', alignCls(align), className)}
-    style={width != null ? { width, ...style } : style}
-    {...rest}
-  >
-    {children}
-  </th>
-);
-
-export const Td: React.FunctionComponent<TdProps> = ({ align, numeric, className, children, ...rest }) => (
-  <td className={cx('mtab-td', numeric && 'mtab-td--num', alignCls(align), className)} {...rest}>
-    {children}
-  </td>
-);
-
-export default Table;
+// Autobahn (auto.de redesign) — md3 data/spec table primitive set.
+//
+// A COMPOSABLE set of thin wrappers over the native table elements
+// (Table → <table>, Thead → <thead>, Tbody → <tbody>, Tr → <tr>, Th → <th>,
+// Td → <td>) so callers keep their EXACT legacy row structure when a MUI/
+// fe-ui-core table is re-skinned into md3. You re-skin in place:
+//
+//   <Table>                          // was <Table> / <table>
+//     <Thead>
+//       <Tr>
+//         <Th>Rechnung</Th>          // header surface-variant
+//         <Th align="right">Betrag</Th>
+//       </Tr>
+//     </Thead>
+//     <Tbody>
+//       {invoices.map((inv) => (
+//         <Tr key={inv.id}>          // row divider + hover
+//           <Td>{inv.number}</Td>
+//           <Td align="right" numeric>{inv.amount}</Td>
+//         </Tr>
+//       ))}
+//     </Tbody>
+//   </Table>
+//
+// `<Table>` always renders its own `overflow-x: auto` scroll wrapper, so a wide
+// table (Vergleich spec sheet, vehicle-options matrix) scrolls inside its own
+// box and never forces the page to scroll horizontally.
+//
+// Options: `dense` (tighter row height — Mitarbeiter / options lists),
+// `stickyHeader` (header pins while the body scrolls — long invoice/employee
+// lists), `align` (per-cell text alignment), `numeric` (tabular-nums for money/
+// counts), `width` (column sizing hint on a Th), `colSpan`/`rowSpan` (passthrough
+// for grouped spec rows).
+//
+// Pure/presentational: no store, no API, no window. Renders correctly only inside
+// a `<div className="md3">` subtree (scoped theme). No mobx binding — this is a
+// layout primitive, not a form control.
+
+import React from 'react';
+
+export type TableAlign = 'left' | 'center' | 'right';
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** tighter row height for list-heavy tables (Mitarbeiter, vehicle options). */
+  dense?: boolean;
+  /**
+   * pin the header while the body scrolls (long invoice / employee lists).
+   * The caller is responsible for constraining the scroll height — wrap the
+   * `<Table>` in a box with `max-height` + the header stays put on vertical scroll.
+   */
+  stickyHeader?: boolean;
+  /** extra class on the inner `<table>` (layout hooks). */
+  className?: string;
+  /** extra class on the outer `overflow-x:auto` scroll wrapper. */
+  wrapperClassName?: string;
+  /** inline style applied to the outer scroll wrapper (e.g. max-height for sticky). */
+  wrapperStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode;
+}
+
+export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode;
+}
+
+export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** visually mark the row as selected/active (e.g. current plan, chosen vehicle). */
+  selected?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** text alignment (default left). */
+  align?: TableAlign;
+  /** column-width hint, e.g. 160 or '30%'. */
+  width?: number | string;
+  children?: React.ReactNode;
+}
+
+export interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** text alignment (default left). */
+  align?: TableAlign;
+  /** tabular-nums + alignment friendly to money/counts. */
+  numeric?: boolean;
+  children?: React.ReactNode;
+}
+
+// join classnames, dropping falsy.
+const cx = (...parts: Array<string | false | undefined>): string => parts.filter(Boolean).join(' ');
+
+// Per-cell alignment is applied as a class (not inline style) so it stays
+// overridable from md3.css and composes with the numeric rule.
+const alignCls = (align?: TableAlign): string | undefined =>
+  align && align !== 'left' ? `mtab-${align}` : undefined;
+
+/**
+ * Root table. Renders an `overflow-x: auto` wrapper around a real `<table>`
+ * so wide tables scroll inside their own box. Spreads extra `<table>` attrs.
+ */
+export const Table: React.FunctionComponent<TableProps> = ({
+  dense,
+  stickyHeader,
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  children,
+  ...rest
+}) => (
+  <div className={cx('mtab-wrap', wrapperClassName)} style={wrapperStyle}>
+    <table
+      className={cx('mtab', dense && 'mtab--dense', stickyHeader && 'mtab--sticky', className)}
+      {...rest}
+    >
+      {children}
+    </table>
+  </div>
+);
+
+export const Thead: React.FunctionComponent<TheadProps> = ({ className, children, ...rest }) => (
+  <thead className={cx('mtab-thead', className)} {...rest}>
+    {children}
+  </thead>
+);
+
+export const Tbody: React.FunctionComponent<TbodyProps> = ({ className, children, ...rest }) => (
+  <tbody className={cx('mtab-tbody', className)} {...rest}>
+    {children}
+  </tbody>
+);
+
+export const Tr: React.FunctionComponent<TrProps> = ({ selected, className, children, ...rest }) => (
+  <tr className={cx('mtab-tr', selected && 'is-selected', className)} {...rest}>
+    {children}
+  </tr>
+);
+
+export const Th: React.FunctionComponent<ThProps> = ({ align, width, className, style, children, ...rest }) => (
+  <th
+    className={cx('mtab-th', alignCls(align), className)}
+    style={width != null ? { width, ...style } : style}
+    {...rest}
+  >
+    {children}
+  </th>
+);
+
+export const Td: React.FunctionComponent<TdProps> = ({ align, numeric, className, children, ...rest }) => (
+  <td className={cx('mtab-td', numeric && 'mtab-td--num', alignCls(align), className)} {...rest}>
+    {children}
+  </td>
+);
+
+export default Table;

package/ui/Textarea.tsx

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — md3 multiline input bound to a mobx-react-form field.
-//
-// The multiline sibling of FormField: a labelled, outlined MD3 control that binds directly to a
-// mobx-react-form field via field.bind() — the SAME field objects the legacy FormTextArea used
-// (DealerProfileForm.$('imprint'/'termCond'), TemplateForm's offer_offerDescription, the
-// password-area, …). So every existing validation rule, onChange/onBlur, submit hook and error
-// works unchanged; only the markup is re-skinned. Mirrors FormField, swapping <input> for
-// <textarea> (and dropping the password reveal that does not apply to a textarea).
-//
-// 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';
-
-export interface TextareaProps {
-  /** mobx-react-form field (DealerProfileForm.$('imprint') etc.). Typed any — the lib ships no TS types. */
-  field: any;
-  /** i18n translate — resolves the field's placeholder/label key. Optional (legacy default = identity). */
-  t?: (key: string, options?: object) => string;
-  /** visible textarea rows (legacy template used 10). */
-  rows?: number;
-  disabled?: boolean;
-}
-
-const identity = (key: string): string => key;
-
-const Textarea: React.FunctionComponent<TextareaProps> = observer(
-  ({ field, t = identity, rows = 4, disabled }) => {
-    const bound = field.bind();
-    const hasError = !!field.hasError && !!field.error;
-    // Visible label (a11y). Prefer the translated placeholder key, else the field's label key.
-    // t() returns the input unchanged when there's no translation, so this is safe for plain strings.
-    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
-
-    return (
-      <div className="mfield-group">
-        {label ? <label className="md-label-sm mfield-label" htmlFor={bound.id}>{label}</label> : null}
-        <div
-          className={
-            'mfield mtextarea' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')
-          }
-        >
-          <textarea
-            {...bound}
-            disabled={disabled}
-            rows={rows}
-            placeholder=""
-            style={{ width: '100%' }}
-          />
-        </div>
-        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default Textarea;
+// Autobahn (auto.de redesign) — md3 multiline input bound to a mobx-react-form field.
+//
+// The multiline sibling of FormField: a labelled, outlined MD3 control that binds directly to a
+// mobx-react-form field via field.bind() — the SAME field objects the legacy FormTextArea used
+// (DealerProfileForm.$('imprint'/'termCond'), TemplateForm's offer_offerDescription, the
+// password-area, …). So every existing validation rule, onChange/onBlur, submit hook and error
+// works unchanged; only the markup is re-skinned. Mirrors FormField, swapping <input> for
+// <textarea> (and dropping the password reveal that does not apply to a textarea).
+//
+// 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';
+
+export interface TextareaProps {
+  /** mobx-react-form field (DealerProfileForm.$('imprint') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves the field's placeholder/label key. Optional (legacy default = identity). */
+  t?: (key: string, options?: object) => string;
+  /** visible textarea rows (legacy template used 10). */
+  rows?: number;
+  disabled?: boolean;
+}
+
+const identity = (key: string): string => key;
+
+const Textarea: React.FunctionComponent<TextareaProps> = observer(
+  ({ field, t = identity, rows = 4, disabled }) => {
+    const bound = field.bind();
+    const hasError = !!field.hasError && !!field.error;
+    // Visible label (a11y). Prefer the translated placeholder key, else the field's label key.
+    // t() returns the input unchanged when there's no translation, so this is safe for plain strings.
+    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
+
+    return (
+      <div className="mfield-group">
+        {label ? <label className="md-label-sm mfield-label" htmlFor={bound.id}>{label}</label> : null}
+        <div
+          className={
+            'mfield mtextarea' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')
+          }
+        >
+          <textarea
+            {...bound}
+            disabled={disabled}
+            rows={rows}
+            placeholder=""
+            style={{ width: '100%' }}
+          />
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default Textarea;

package/ui/index.ts

@@ -1,88 +1,88 @@
-// Autobahn (auto.de redesign) — presentational UI primitives.
-//
-// Typed, pure React 18 + TS port of the design kit's primitives from
-// docs/redesign/design-source/ui_kits/website/ui.jsx. The original kit exported
-// everything via `Object.assign(window, {...})`; here each primitive is a real
-// ES module with an explicit props interface, re-exported below.
-//
-// SCOPING — IMPORTANT:
-// These components rely on the scoped CSS layer at
-//   services/fe-main/source/theme/autobahn/ (md3.css)
-// where EVERY utility class is scoped under `.md3` (e.g. `.md3 .mbtn`,
-// `.md3 .chip`, `.md3 .statchip--good`, `.md3 .segmented .on`, `.md3 .mfield`,
-// `.md3 .num`, `.md3 .car-arrow`, `.md3 .imglabel`, `.md3 .md-title`, …).
-// They therefore ONLY render correctly inside a `<div className="md3">` subtree.
-//
-// All components are pure/presentational: no store, no API, no window access.
-
-export { default as Icon } from './Icon';
-export type { IconProps } from './Icon';
-
-export { default as Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-
-export { default as IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
-
-export { default as Chip } from './Chip';
-export type { ChipProps } from './Chip';
-
-export { default as StatChip } from './StatChip';
-export type { StatChipProps, StatChipTone } from './StatChip';
-
-export { default as Segmented } from './Segmented';
-export type { SegmentedProps, SegmentedOption } from './Segmented';
-
-export { default as FormField } from './FormField';
-export type { FormFieldProps } from './FormField';
-
-export { default as Dropdown } from './Dropdown';
-export type { DropdownProps, DropdownOption } from './Dropdown';
-
-export { default as Spec } from './Spec';
-export type { SpecProps } from './Spec';
-
-export { default as Price } from './Price';
-export type { PriceProps } from './Price';
-
-export { default as Stars } from './Stars';
-export type { StarsProps } from './Stars';
-
-export { default as PriceEvalBar } from './PriceEvalBar';
-export type { PriceEvalBarProps } from './PriceEvalBar';
-
-export { default as SaveChip } from './SaveChip';
-export type { SaveChipProps } from './SaveChip';
-
-export { default as CardCarousel } from './CardCarousel';
-export type { CardCarouselProps } from './CardCarousel';
-
-// ── md3 kit (Group-B in-place rebuild) — form-bound + layout + overlay primitives ──
-export { default as FormDropdown } from './FormDropdown';
-export type { FormDropdownProps } from './FormDropdown';
-export { default as FormCheckbox } from './FormCheckbox';
-export type { FormCheckboxProps } from './FormCheckbox';
-export { default as FormRadioGroup } from './FormRadioGroup';
-export type { FormRadioGroupProps } from './FormRadioGroup';
-export { default as FormRadio } from './FormRadio';
-export type { FormRadioProps } from './FormRadio';
-export { default as Accordion } from './Accordion';
-export type { AccordionProps } from './Accordion';
-export { default as Modal } from './Modal';
-export type { ModalProps, ModalSize } from './Modal';
-export { default as DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';
-export { default as Table, Thead, Tbody, Tr, Th, Td } from './Table';
-export type { TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, TableAlign } from './Table';
-export { default as Switch } from './Switch';
-export type { SwitchProps } from './Switch';
-export { default as Textarea } from './Textarea';
-export type { TextareaProps } from './Textarea';
-export { default as Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';
-export { default as Stepper } from './Stepper';
-export type { StepperProps, StepperStep, StepStatus } from './Stepper';
-export { default as FileUpload } from './FileUpload';
-export type { FileUploadProps } from './FileUpload';
-export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';
+// Autobahn (auto.de redesign) — presentational UI primitives.
+//
+// Typed, pure React 18 + TS port of the design kit's primitives from
+// docs/redesign/design-source/ui_kits/website/ui.jsx. The original kit exported
+// everything via `Object.assign(window, {...})`; here each primitive is a real
+// ES module with an explicit props interface, re-exported below.
+//
+// SCOPING — IMPORTANT:
+// These components rely on the scoped CSS layer at
+//   services/fe-main/source/theme/autobahn/ (md3.css)
+// where EVERY utility class is scoped under `.md3` (e.g. `.md3 .mbtn`,
+// `.md3 .chip`, `.md3 .statchip--good`, `.md3 .segmented .on`, `.md3 .mfield`,
+// `.md3 .num`, `.md3 .car-arrow`, `.md3 .imglabel`, `.md3 .md-title`, …).
+// They therefore ONLY render correctly inside a `<div className="md3">` subtree.
+//
+// All components are pure/presentational: no store, no API, no window access.
+
+export { default as Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export { default as Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { default as IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+
+export { default as Chip } from './Chip';
+export type { ChipProps } from './Chip';
+
+export { default as StatChip } from './StatChip';
+export type { StatChipProps, StatChipTone } from './StatChip';
+
+export { default as Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedOption } from './Segmented';
+
+export { default as FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';
+
+export { default as Spec } from './Spec';
+export type { SpecProps } from './Spec';
+
+export { default as Price } from './Price';
+export type { PriceProps } from './Price';
+
+export { default as Stars } from './Stars';
+export type { StarsProps } from './Stars';
+
+export { default as PriceEvalBar } from './PriceEvalBar';
+export type { PriceEvalBarProps } from './PriceEvalBar';
+
+export { default as SaveChip } from './SaveChip';
+export type { SaveChipProps } from './SaveChip';
+
+export { default as CardCarousel } from './CardCarousel';
+export type { CardCarouselProps } from './CardCarousel';
+
+// ── md3 kit (Group-B in-place rebuild) — form-bound + layout + overlay primitives ──
+export { default as FormDropdown } from './FormDropdown';
+export type { FormDropdownProps } from './FormDropdown';
+export { default as FormCheckbox } from './FormCheckbox';
+export type { FormCheckboxProps } from './FormCheckbox';
+export { default as FormRadioGroup } from './FormRadioGroup';
+export type { FormRadioGroupProps } from './FormRadioGroup';
+export { default as FormRadio } from './FormRadio';
+export type { FormRadioProps } from './FormRadio';
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export { default as Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';
+export { default as DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';
+export { default as Table, Thead, Tbody, Tr, Th, Td } from './Table';
+export type { TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, TableAlign } from './Table';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { default as Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { default as Stepper } from './Stepper';
+export type { StepperProps, StepperStep, StepStatus } from './Stepper';
+export { default as FileUpload } from './FileUpload';
+export type { FileUploadProps } from './FileUpload';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';