@emporix/cockpit-component-library 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -0,0 +1,1252 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Contextual banner for surfacing validation errors, warnings,
+ * informational notes, or success confirmations.
+ */
+export declare const AlertBox: ({ variant, title, children, className, "data-testid": testId, ...props }: AlertBoxProps) => JSX_2.Element;
+
+export declare interface AlertBoxProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Visual style of the alert. */
+    variant?: AlertBoxVariant;
+    /** Bold heading rendered next to the icon. */
+    title?: default_2.ReactNode;
+    /** Body content rendered below the title. */
+    children?: default_2.ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare type AlertBoxVariant = 'error' | 'warning' | 'info' | 'success';
+
+/**
+ * Horizontal breadcrumb with optional Back action, chevron separators, link segments, and a static current page.
+ */
+export declare const Breadcrumb: ({ items, onBack, backLabel, className, "data-testid": testId, }: BreadcrumbProps) => JSX_2.Element;
+
+export declare interface BreadcrumbItem {
+    /**
+     * Visible label for this segment
+     */
+    label: string;
+    /**
+     * When set on a non-final segment, renders as a link
+     */
+    href?: string;
+    /**
+     * Optional click handler (e.g. SPA navigation). Can be used with or without `href`
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+}
+
+export declare interface BreadcrumbProps {
+    /**
+     * Ordered trail: every entry except the last is a parent; the last is the current page
+     */
+    items: BreadcrumbItem[];
+    /**
+     * When set, shows a leading Back control
+     */
+    onBack?: () => void;
+    /**
+     * Label for the back control (default: Back)
+     */
+    backLabel?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+
+/**
+ * Card shell and layout primitives aligned with the Figma card pattern
+ * (bordered panel, header row with optional chip + actions, title, meta rows, footer).
+ */
+export declare const Card: CardComponent;
+
+declare const CardBody: ({ children, className, ...props }: CardBodyProps) => JSX_2.Element;
+
+export declare interface CardBodyProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+/**
+ * Compound card root plus static subcomponents (`Card.Body`, `Card.Header`, …).
+ */
+export declare type CardComponent = default_2.FC<CardProps> & {
+    Body: typeof CardBody;
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Meta: typeof CardMeta;
+    MetaRow: typeof CardMetaRow;
+    Footer: typeof CardFooter;
+    IconButton: typeof CardIconButton;
+};
+
+declare const CardFooter: ({ children, className, ...props }: CardFooterProps) => JSX_2.Element;
+
+export declare interface CardFooterProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+}
+
+declare const CardHeader: ({ tag, actions, children, className, ...props }: CardHeaderProps) => JSX_2.Element;
+
+export declare interface CardHeaderProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Left side (e.g. `<Chip variant="error">Blocker</Chip>`).
+     */
+    tag?: default_2.ReactNode;
+    /**
+     * Right side (e.g. icon action buttons).
+     */
+    actions?: default_2.ReactNode;
+    children?: default_2.ReactNode;
+}
+
+declare const CardIconButton: default_2.ForwardRefExoticComponent<default_2.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Use `danger` for destructive actions (e.g. delete); matches neutral `Card.IconButton` footprint and focus style.
+     */
+    variant?: "default" | "danger";
+} & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare type CardIconButtonProps = default_2.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Use `danger` for destructive actions (e.g. delete); matches neutral `Card.IconButton` footprint and focus style.
+     */
+    variant?: 'default' | 'danger';
+};
+
+declare const CardMeta: ({ children, className, ...props }: CardMetaProps) => JSX_2.Element;
+
+export declare interface CardMetaProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+}
+
+declare const CardMetaRow: ({ icon, children, className, ...props }: CardMetaRowProps) => JSX_2.Element;
+
+export declare interface CardMetaRowProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Leading icon; layout uses a 20×20px frame (SVGs are styled to ~18×18px in the default theme).
+     */
+    icon: default_2.ReactNode;
+    children: default_2.ReactNode;
+}
+
+export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card content.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+
+declare const CardTitle: ({ children, className, ...props }: CardTitleProps) => JSX_2.Element;
+
+export declare interface CardTitleProps extends default_2.HTMLAttributes<HTMLHeadingElement> {
+    children: default_2.ReactNode;
+}
+
+/**
+ * Compact pill-shaped status label with semantic color variants.
+ * Use in `Card.Header` `tag` for issue-style headers (e.g. `variant="error"` for “Blocker”).
+ */
+export declare const Chip: ({ variant, children, className, "data-testid": testId, ...props }: ChipProps) => JSX_2.Element;
+
+export declare interface ChipProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual style: success (green), warning (orange), info (blue), error (burgundy on rose — matches Figma card header chips e.g. “Blocker”).
+     */
+    variant?: ChipVariant;
+    /**
+     * Label or content inside the chip.
+     */
+    children: default_2.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+
+export declare type ChipVariant = 'error' | 'info' | 'success' | 'warning';
+
+/**
+ * A focused confirmation dialog built on top of `Modal`.
+ * Use it wherever you need the user to explicitly confirm a destructive or
+ * irreversible action instead of relying on the browser's native `confirm()`.
+ */
+export declare const ConfirmDialog: ({ open, onClose, onConfirm, title, message, confirmLabel, cancelLabel, loading, variant, "data-testid": testId, }: ConfirmDialogProps) => JSX_2.Element;
+
+export declare interface ConfirmDialogProps {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Called when the user cancels or closes. */
+    onClose: () => void;
+    /** Called when the user confirms. */
+    onConfirm: () => void;
+    /** Dialog heading. */
+    title: string;
+    /** Descriptive message body. */
+    message: string;
+    /** Label for the confirm button. Defaults to "Confirm". */
+    confirmLabel?: string;
+    /** Label for the cancel button. Defaults to "Cancel". */
+    cancelLabel?: string;
+    /** Shows a spinner on the confirm button and disables both buttons. */
+    loading?: boolean;
+    /**
+     * Visual variant for the confirm button.
+     * - `'default'` uses the primary brand color.
+     * - `'danger'` uses a destructive red color.
+     * @default 'default'
+     */
+    variant?: ConfirmDialogVariant;
+    'data-testid'?: string;
+}
+
+export declare type ConfirmDialogVariant = 'default' | 'danger';
+
+export declare const ContrastButton: ({ label, disabled, icon, iconPos, className, ...rest }: ContrastButtonProps) => JSX_2.Element;
+
+/**
+ * Native `<button>` props plus label/icon layout. Either a visible `label` or `aria-label` is required
+ * so the control always has an accessible name (icon-only buttons need `aria-label`).
+ */
+export declare type ContrastButtonProps = ContrastButtonShared & ({
+    label: string;
+} | {
+    'aria-label': string;
+});
+
+declare type ContrastButtonShared = Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> & {
+    /**
+     * Text label displayed inside the button. When omitted (icon-only), you must pass `aria-label`.
+     */
+    label?: string;
+    /** Optional icon */
+    icon?: default_2.ReactNode;
+    /** Icon position relative to the label */
+    iconPos?: 'left' | 'right';
+};
+
+export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, onEditEnd, options, optionLabel, optionValue, optionDisabled, placeholder, filter, filterPlaceholder, onFilter, loading, hasMore, onLoadMore, panelPosition, editable, disabled, required, label, inputId, className, panelClassName, valueTemplate, itemTemplate, "data-testid": testId, }: DropdownProps<T>) => JSX_2.Element;
+
+export declare interface DropdownChangeEvent {
+    value: DropdownOption['value'] | null;
+    originalEvent: default_2.SyntheticEvent;
+}
+
+export declare interface DropdownEditEndEvent {
+    /** Trimmed value that was in the input when Enter was pressed */
+    value: string;
+    /** Selected option value if a matching option was found and selected; null otherwise */
+    selectedValue: DropdownOption['value'] | null;
+    originalEvent: default_2.KeyboardEvent;
+}
+
+export declare interface DropdownOption {
+    label?: string;
+    value?: string;
+    [key: string]: unknown;
+}
+
+export declare interface DropdownProps<T = DropdownOption> {
+    /**
+     * Selected value (controlled). Must match optionValue of the selected option.
+     */
+    value?: unknown;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (e: DropdownChangeEvent) => void;
+    /**
+     * Array of options
+     */
+    options: T[];
+    /**
+     * Property name for the option label (default: "label")
+     */
+    optionLabel?: keyof T | string;
+    /**
+     * Property name for the option value (default: "value")
+     */
+    optionValue?: keyof T | string;
+    /**
+     * Name of the property in the option object that indicates whether the option is disabled.
+     * When set (e.g. optionDisabled="disabled"), options with a truthy value for that key
+     * are disabled and cannot be selected. Matches PrimeReact Dropdown optionDisabled API.
+     * @see https://primereact.org/dropdown/#api.Dropdown.props.optionDisabled
+     */
+    optionDisabled?: keyof T | string;
+    /**
+     * Placeholder when no value selected
+     */
+    placeholder?: string;
+    /**
+     * Enable filter (search) in the overlay
+     */
+    filter?: boolean;
+    /**
+     * Placeholder text for the filter input (default: "Search...")
+     */
+    filterPlaceholder?: string;
+    /**
+     * External filter callback for server-side / lazy search.
+     * When provided, in-memory filtering is disabled and this callback is invoked
+     * with the current filter query on each keystroke. The parent is responsible
+     * for updating `options` with the results.
+     */
+    onFilter?: (query: string) => void;
+    /**
+     * Whether the dropdown is currently loading options (e.g. from an API).
+     * Shows a spinner / "Loading…" indicator at the bottom of the list.
+     */
+    loading?: boolean;
+    /**
+     * Whether more options can be loaded via pagination.
+     * When true, scrolling to the bottom of the options list triggers `onLoadMore`.
+     */
+    hasMore?: boolean;
+    /**
+     * Called when the user scrolls near the bottom of the options list and `hasMore` is true.
+     * Use this to load the next page of results.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Controls where the options panel appears relative to the trigger.
+     * - `'auto'` (default): opens below if there is enough viewport space, otherwise above.
+     * - `'bottom'`: always opens below the trigger.
+     * - `'top'`: always opens above the trigger.
+     */
+    panelPosition?: 'auto' | 'top' | 'bottom';
+    /**
+     * When true, the trigger is an editable input: user can type to filter options
+     * and select from the list. Matches PrimeReact Dropdown editable behavior.
+     * @see https://primereact.org/dropdown/#editable
+     */
+    editable?: boolean;
+    /**
+     * Called when the user ends editing by pressing Enter in the editable input.
+     * Fires with the trimmed input value and the selected option value (if a match was found).
+     */
+    onEditEnd?: (e: DropdownEditEndEvent) => void;
+    /**
+     * Whether the dropdown is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is required (shows asterisk on label)
+     */
+    required?: boolean;
+    /**
+     * Label text displayed above the input
+     */
+    label?: default_2.ReactNode;
+    /**
+     * Input element id for label association
+     */
+    inputId?: string;
+    /**
+     * Additional CSS class name for the root
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for the overlay panel
+     */
+    panelClassName?: string;
+    /**
+     * Template for the selected value displayed in the trigger.
+     * Receives the selected option object or null when no value is selected.
+     * @see https://primereact.org/dropdown/#template
+     */
+    valueTemplate?: (option: T | null) => default_2.ReactNode;
+    /**
+     * Template for each option in the dropdown list.
+     * Receives the option object.
+     * @see https://primereact.org/dropdown/#template
+     */
+    itemTemplate?: (option: T) => default_2.ReactNode;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+declare const EmporixLogo: () => JSX_2.Element;
+
+/**
+ * Built-in file kinds for {@link FileUploadDropzone}. Extend the registry here when adding new presets.
+ */
+declare const FILE_UPLOAD_TYPE_REGISTRY: {
+    readonly pdf: {
+        readonly extensions: readonly [".pdf"];
+        readonly mimeTypes: readonly ["application/pdf"];
+    };
+    readonly doc: {
+        readonly extensions: readonly [".doc"];
+        readonly mimeTypes: readonly ["application/msword"];
+    };
+    readonly docx: {
+        readonly extensions: readonly [".docx"];
+        readonly mimeTypes: readonly ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
+    };
+    readonly xls: {
+        readonly extensions: readonly [".xls"];
+        readonly mimeTypes: readonly ["application/vnd.ms-excel"];
+    };
+    readonly xlsx: {
+        readonly extensions: readonly [".xlsx"];
+        readonly mimeTypes: readonly ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
+    };
+    readonly png: {
+        readonly extensions: readonly [".png"];
+        readonly mimeTypes: readonly ["image/png"];
+    };
+    readonly jpeg: {
+        readonly extensions: readonly [".jpg", ".jpeg"];
+        readonly mimeTypes: readonly ["image/jpeg"];
+    };
+};
+
+/**
+ * Drag-and-drop file picker inside a {@link Card}, using library tokens and {@link SecondaryButton}.
+ */
+export declare const FileUploadDropzone: ({ supportedTypes, onFileSelect, onRejectFile, maxSizeBytes, uploading, dropHint, formatsHint, browseLabel, uploadingLabel, className, "data-testid": testId, }: FileUploadDropzoneProps) => JSX_2.Element;
+
+export declare interface FileUploadDropzoneProps {
+    /**
+     * Which built-in file kinds are allowed (drives `accept`, MIME/extension checks).
+     * Must include at least one type. Empty arrays fall back to `["pdf"]` at runtime with a dev warning.
+     */
+    supportedTypes: NonEmptyFileUploadTypeIds;
+    /**
+     * Called only after the file passes type and optional size checks.
+     */
+    onFileSelect: (file: File) => void;
+    /**
+     * Invoked when a picked/dropped file fails validation (wrong type or over size limit).
+     */
+    onRejectFile?: (file: File, reason: 'type' | 'size') => void;
+    /** When set, files larger than this (bytes) are rejected with reason `'size'`. */
+    maxSizeBytes?: number;
+    /** Disables interaction and shows uploading label on the browse control. */
+    uploading?: boolean;
+    dropHint: string;
+    formatsHint: string;
+    browseLabel: string;
+    uploadingLabel: string;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare type FileUploadTypeId = keyof typeof FILE_UPLOAD_TYPE_REGISTRY;
+
+/**
+ * Card with a prominent icon panel on the left and a flexible content area
+ * on the right. Compose freely: put any layout (Card.Header, Card.Body, etc.)
+ * inside `IconCard.Content`.
+ *
+ * ```tsx
+ * <IconCard>
+ *   <IconCard.Icon><MyIcon /></IconCard.Icon>
+ *   <IconCard.Content>
+ *     <Card.Header actions={…}><Card.Title>Title</Card.Title></Card.Header>
+ *     <Card.Body>…</Card.Body>
+ *   </IconCard.Content>
+ * </IconCard>
+ * ```
+ */
+export declare const IconCard: IconCardComponent;
+
+/**
+ * Compound root plus static subcomponents (`IconCard.Icon`, `IconCard.Content`).
+ */
+export declare type IconCardComponent = default_2.FC<IconCardProps> & {
+    Icon: typeof IconCardIcon;
+    Content: typeof IconCardContent;
+};
+
+declare const IconCardContent: ({ children, className, ...props }: IconCardContentProps) => JSX_2.Element;
+
+export declare interface IconCardContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+declare const IconCardIcon: ({ children, className, ...props }: IconCardIconProps) => JSX_2.Element;
+
+export declare interface IconCardIconProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface IconCardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare const InputText: ({ label, tooltip, required, inputId: inputIdProp, textarea, rows: rowsProp, className, "data-testid": testId, disabled, ...rest }: InputTextProps) => JSX_2.Element;
+
+export declare interface InputTextProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
+    /**
+     * Label text displayed above the input
+     */
+    label?: default_2.ReactNode;
+    /**
+     * When set, an info icon is shown next to the label with this string as tooltip
+     */
+    tooltip?: string;
+    /**
+     * Whether the field is required (shows asterisk on label)
+     */
+    required?: boolean;
+    /**
+     * Input element id for label association
+     */
+    inputId?: string;
+    /**
+     * When true, renders a &lt;textarea&gt; instead of &lt;input&gt;
+     */
+    textarea?: boolean;
+    /**
+     * Number of visible rows (textarea only). Defaults to 3 when textarea is true.
+     */
+    rows?: number;
+    /**
+     * Additional CSS class name for the root
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+/**
+ * Generic modal dialog with overlay, header (title + close), scrollable body
+ * and an optional sticky footer.
+ */
+export declare const Modal: ({ open, onClose, title, subtitle, children, footer, maxWidth, disableClose, className, titleId, "data-testid": testId, }: ModalProps) => JSX_2.Element | null;
+
+export declare interface ModalProps {
+    /** Whether the modal is visible. */
+    open: boolean;
+    /** Called when the user requests to close (overlay click, Escape, close button). */
+    onClose: () => void;
+    /** Primary heading rendered in the header. */
+    title: string;
+    /** Optional secondary line below the title. */
+    subtitle?: string;
+    /** Body content. */
+    children: ReactNode;
+    /** Content rendered in the sticky footer area. */
+    footer?: ReactNode;
+    /**
+     * CSS max-width for the dialog panel.
+     * @default '520px'
+     */
+    maxWidth?: string;
+    /**
+     * When true, overlay click, Escape and the close button are disabled.
+     * @default false
+     */
+    disableClose?: boolean;
+    /** Additional CSS class applied to the root overlay element. */
+    className?: string;
+    /** Accessible id for the title (used by `aria-labelledby`). */
+    titleId?: string;
+    'data-testid'?: string;
+}
+
+export declare const MultiSelect: <T extends Record<string, unknown>>({ value, onChange, options, optionLabel, optionValue, placeholder, disabled, label, className, "data-testid": testId, }: MultiSelectProps<T>) => JSX_2.Element;
+
+export declare interface MultiSelectOption {
+    label?: string;
+    value?: string;
+    [key: string]: unknown;
+}
+
+export declare interface MultiSelectProps<T = MultiSelectOption> {
+    value: string[];
+    onChange: (value: string[]) => void;
+    options: T[];
+    optionLabel?: keyof T | string;
+    optionValue?: keyof T | string;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+
+/** At least one type id — prevents empty `supportedTypes` at compile time. */
+export declare type NonEmptyFileUploadTypeIds = readonly [
+FileUploadTypeId,
+...FileUploadTypeId[]
+];
+
+export declare type OrderStatus = 'IN_CHECKOUT' | 'CREATED' | 'CONFIRMED' | 'DECLINED' | 'SHIPPED' | 'COMPLETED';
+
+export declare type OrderStatusLike = OrderStatus | (string & {});
+
+/**
+ * Status tag in the same visual pattern as design chips: light fill, subtle border,
+ * saturated label text. Colors vary by status (CREATED = blue, COMPLETED = green, etc.).
+ */
+export declare const OrderStatusTag: ({ status, className, "data-testid": testId, }: OrderStatusTagProps) => JSX_2.Element;
+
+export declare interface OrderStatusTagProps {
+    status: OrderStatusLike;
+    className?: string;
+    'data-testid'?: string;
+}
+
+/**
+ * Order list table: order # (navigable), status badge, customer, dates, address, payment, value.
+ * No row actions column — open details via `getOrderHref` or `onOrderNavigate` on the id.
+ */
+export declare const OrderTable: ({ items, title, getOrderHref, onOrderNavigate, emptyMessage, embedded, className, "data-testid": testId, }: OrderTableProps) => JSX_2.Element;
+
+export declare interface OrderTableProps {
+    items: OrderTableRow[];
+    /**
+     * Optional section title above the table.
+     */
+    title?: string;
+    /**
+     * When set, the order id is a link (e.g. React Router `href` or absolute URL).
+     */
+    getOrderHref?: (row: OrderTableRow) => string;
+    /**
+     * When set (and `getOrderHref` is not), the order id is a button that calls this handler
+     * (e.g. `navigate(\`/orders/${row.id}\`)`).
+     */
+    onOrderNavigate?: (row: OrderTableRow) => void;
+    /**
+     * Message when `items` is empty. Defaults to `"No orders."`.
+     */
+    emptyMessage?: string;
+    /**
+     * When true, no outer border on the wrapper (for use inside a card).
+     */
+    embedded?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare interface OrderTableRow {
+    /**
+     * Order identifier shown as `#${id}` in the first column.
+     */
+    id: string;
+    status: OrderStatusLike;
+    customerName: string;
+    /**
+     * Shown as order date (`DD.MM.YYYY` in `de-DE`). `Date`, full ISO datetimes, or date-only
+     * `YYYY-MM-DD` (interpreted as a local calendar day, not UTC midnight).
+     */
+    orderDate: Date | string;
+    /**
+     * When omitted or `null`, the cell shows "—". Same date rules as `orderDate`.
+     */
+    deliveryDate?: Date | string | null;
+    /**
+     * e.g. `Berlin, DE`
+     */
+    deliveryAddress: string;
+    payment: string;
+    orderValue: {
+        amount: number;
+        currency: string;
+    };
+}
+
+export declare const PrimaryButton: ({ label, disabled, loading, icon, iconPos, onClick, className, "data-testid": testId, ...props }: PrimaryButtonProps) => JSX_2.Element;
+
+export declare interface PrimaryButtonProps {
+    /**
+     * Text label displayed inside the button
+     */
+    label?: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is loading
+     */
+    loading?: boolean;
+    /**
+     * Optional icon
+     */
+    icon?: default_2.ReactNode;
+    /**
+     * Icon position relative to the label
+     */
+    iconPos?: 'left' | 'right';
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+/**
+ * Bordered product table with built-in Name column (thumbnail + name + code),
+ * configurable data columns, and optional Add / Delete actions.
+ *
+ * Follows the compact table pattern from the order-processing design.
+ */
+export declare const ProductTable: <T extends ProductTableItem = ProductTableItem>({ items, columns, onDelete, onRowAdd, rowAddLabel, disableRowActions, isRowAddDisabled, onAdd, addLabel, addInActionsColumnHeader, title, emptyMessage, busyItemIds, invalidItemIds, nameColumnHeader, actionsColumnHeader, renderProductMeta, embedded, className, "data-testid": testId, }: ProductTableProps<T>) => JSX_2.Element;
+
+export declare interface ProductTableColumn<T extends ProductTableItem> {
+    /**
+     * Unique key used as the React key for the column.
+     */
+    key: string;
+    /**
+     * Header label rendered in the `<thead>`.
+     */
+    header: string;
+    /**
+     * Horizontal text alignment for both header and cell.
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Cell renderer. Receives the item and its index.
+     */
+    render: (item: T, index: number) => default_2.ReactNode;
+    /**
+     * When true the cell text is rendered with the highlight style
+     * (bold, italic, accent colour — used for the "Total" column).
+     */
+    highlight?: boolean;
+}
+
+/**
+ * Icon-only “+” control matching the per-row add button in {@link ProductTable}.
+ */
+export declare const ProductTableIconAddButton: default_2.ForwardRefExoticComponent<Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> & {
+    /**
+     * Required: visible text is not shown; use a clear action label.
+     */
+    'aria-label': string;
+} & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare type ProductTableIconAddButtonProps = Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> & {
+    /**
+     * Required: visible text is not shown; use a clear action label.
+     */
+    'aria-label': string;
+};
+
+export declare interface ProductTableItem {
+    /**
+     * Unique identifier for the row.
+     */
+    id: string;
+    /**
+     * Product display name.
+     */
+    name: string;
+    /**
+     * Product code / SKU shown below the name.
+     */
+    code?: string;
+    /**
+     * Thumbnail URL. Falls back to a placeholder when omitted.
+     */
+    imageUrl?: string;
+}
+
+export declare interface ProductTableProps<T extends ProductTableItem = ProductTableItem> {
+    /**
+     * Rows to display. Each must satisfy `ProductTableItem` at minimum.
+     */
+    items: T[];
+    /**
+     * Extra columns rendered between the built-in Name column and the
+     * Actions column. Define quantity, prices, tax, etc. here.
+     */
+    columns: ProductTableColumn<T>[];
+    /**
+     * When provided the Actions column appears with a delete button per row.
+     */
+    onDelete?: (item: T) => void;
+    /**
+     * When provided the Actions column shows an icon-only add button per row
+     * (same footprint as delete; e.g. suggested alternatives). Can be combined with `onDelete`.
+     */
+    onRowAdd?: (item: T) => void;
+    /**
+     * Accessible name for the per-row Add icon button (not shown as visible text).
+     * Defaults to `"Add"`. Pass a function for per-row labels (e.g. loading state).
+     */
+    rowAddLabel?: string | ((item: T, index: number) => string);
+    /**
+     * When true, row action buttons (delete / add) are disabled without dimming rows.
+     */
+    disableRowActions?: boolean;
+    /**
+     * Per-row: disable only the Add button (e.g. until price match is ready).
+     */
+    isRowAddDisabled?: (item: T) => boolean;
+    /**
+     * When provided an "Add" button is rendered in the table header area.
+     */
+    onAdd?: () => void;
+    /**
+     * Label for the add button (toolbar) or accessible name when using
+     * {@link addInActionsColumnHeader}. Defaults to `"Add Item"`.
+     */
+    addLabel?: string;
+    /**
+     * When true with `onAdd` and an actions column (`onRowAdd` / `onDelete`),
+     * renders an icon-only + in the actions column header instead of the toolbar.
+     */
+    addInActionsColumnHeader?: boolean;
+    /**
+     * Optional section title rendered above the table.
+     */
+    title?: string;
+    /**
+     * Message shown when `items` is empty. Defaults to `"No items."`.
+     */
+    emptyMessage?: string;
+    /**
+     * IDs of items currently busy (saving / deleting). Those rows are
+     * visually dimmed and non-interactive.
+     */
+    busyItemIds?: string[];
+    /**
+     * Row IDs that should show invalid / warning styling (e.g. validation issues).
+     */
+    invalidItemIds?: string[];
+    /**
+     * First column header label. Defaults to `"Name"`.
+     */
+    nameColumnHeader?: string;
+    /**
+     * Actions column header. Defaults to `"Actions"`. Use `''` for an empty header cell.
+     */
+    actionsColumnHeader?: string;
+    /**
+     * Extra content rendered below the product code in the name cell.
+     */
+    renderProductMeta?: (item: T, index: number) => default_2.ReactNode;
+    /**
+     * When true, the table sits flush inside a parent card (no outer border on the wrapper).
+     */
+    embedded?: boolean;
+    /**
+     * Additional CSS class name for the root element.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+
+/**
+ * WYSIWYG editor (Quill, snow theme). Quill and `quill.snow.css` are loaded via
+ * dynamic `import()` on first client mount so this module stays safe for SSR/build
+ * environments and consumers only pay the editor cost when the component mounts.
+ */
+export declare const RichTextEditor: ({ value, onChange, placeholder, className, readOnly, "data-testid": testId, }: RichTextEditorProps) => JSX_2.Element;
+
+export declare interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    readOnly?: boolean;
+    'data-testid'?: string;
+}
+
+export declare const SecondaryButton: ({ label, disabled, icon, iconPos, onClick, className, "data-testid": testId, ...props }: SecondaryButtonProps) => JSX_2.Element;
+
+export declare interface SecondaryButtonProps {
+    /**
+     * Text label displayed inside the button
+     */
+    label?: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon
+     */
+    icon?: default_2.ReactNode;
+    /**
+     * Icon position relative to the label
+     */
+    iconPos?: 'left' | 'right';
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+export declare const SelectButton: <T extends Record<string, unknown>>({ value, onChange, options, optionLabel, optionValue, optionDisabled, multiple, itemTemplate, disabled, invalid, className, "data-testid": testId, }: SelectButtonProps<T>) => JSX_2.Element;
+
+export declare interface SelectButtonChangeEvent {
+    value: SelectButtonOption['value'] | SelectButtonOption['value'][] | null;
+    originalEvent: default_2.SyntheticEvent;
+}
+
+export declare interface SelectButtonOption {
+    label?: string;
+    value?: string;
+    [key: string]: unknown;
+}
+
+export declare interface SelectButtonProps<T = SelectButtonOption> {
+    /**
+     * Selected value (controlled). Single value or array when multiple.
+     */
+    value?: unknown;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (e: SelectButtonChangeEvent) => void;
+    /**
+     * Array of options
+     */
+    options: T[];
+    /**
+     * Property name for the option label (default: "label")
+     */
+    optionLabel?: keyof T | string;
+    /**
+     * Property name for the option value (default: "value")
+     */
+    optionValue?: keyof T | string;
+    /**
+     * Name of the property that indicates whether an option is disabled.
+     * @see https://primereact.org/selectbutton/
+     */
+    optionDisabled?: keyof T | string;
+    /**
+     * When true, allows multiple selection (value is an array).
+     */
+    multiple?: boolean;
+    /**
+     * Template for each option. Receives the option object.
+     */
+    itemTemplate?: (option: T) => default_2.ReactNode;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Invalid state for validation styling
+     */
+    invalid?: boolean;
+    /**
+     * Additional CSS class name for the root
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+/**
+ * Compound side-menu component for cockpit navigation.
+ *
+ * Sub-components: `SideMenu.Brand`, `SideMenu.Nav`, `SideMenu.NavItem`, `SideMenu.Footer`.
+ *
+ * `SideMenu.NavItem` is presentational — wrap it with your router's link
+ * (e.g. `NavLink`) and pass `active={isActive}` (keep default `as="div"`).
+ * For a row that is not wrapped by a link, use `as="button"` and `onClick`.
+ */
+export declare const SideMenu: SideMenuComponent;
+
+declare const SideMenuBrand: ({ title, subtitle, logo, className, ...props }: SideMenuBrandProps) => JSX_2.Element;
+
+export declare interface SideMenuBrandProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Brand name displayed prominently. Defaults to "EMPORIX". */
+    title?: string;
+    /** Secondary text below the brand name (e.g. "Order Processing"). */
+    subtitle?: string;
+    /** Custom logo element. Defaults to the "E" mark. */
+    logo?: default_2.ReactNode;
+    className?: string;
+}
+
+/**
+ * Compound root plus static subcomponents (`SideMenu.Brand`, `SideMenu.Nav`, …).
+ */
+export declare type SideMenuComponent = default_2.FC<SideMenuProps> & {
+    Brand: typeof SideMenuBrand;
+    Nav: typeof SideMenuNav;
+    NavItem: typeof SideMenuNavItem;
+    Footer: typeof SideMenuFooter;
+};
+
+declare const SideMenuFooter: ({ children, className, ...props }: SideMenuFooterProps) => JSX_2.Element;
+
+export declare interface SideMenuFooterProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+declare const SideMenuNav: ({ label, children, className, ...props }: SideMenuNavProps) => JSX_2.Element;
+
+declare const SideMenuNavItem: ({ icon, active, badge, children, className, as, type, ...props }: SideMenuNavItemProps) => JSX_2.Element;
+
+export declare interface SideMenuNavItemProps extends Omit<default_2.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Leading icon element (24×24). */
+    icon?: default_2.ReactNode;
+    /** Highlights the item as currently active (blue left border + tinted bg). */
+    active?: boolean;
+    /** Optional badge value shown on the right (e.g. a count). */
+    badge?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    className?: string;
+    /**
+     * `div` (default) when the row is wrapped by `NavLink` or `<a>` — do not use `button` there
+     * (nested interactive elements). Use `button` for standalone clickable items.
+     */
+    as?: 'div' | 'button';
+    /** Only when `as="button"`. Defaults to `button`. */
+    type?: default_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+}
+
+export declare interface SideMenuNavProps extends default_2.HTMLAttributes<HTMLElement> {
+    /** Optional section label rendered above the nav items (e.g. "NAVIGATION"). */
+    label?: string;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface SideMenuProps extends default_2.HTMLAttributes<HTMLElement> {
+    children: default_2.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare const Spinner: ({ size, label, "aria-label": ariaLabel, className, "data-testid": testId, }: SpinnerProps) => JSX_2.Element;
+
+export declare interface SpinnerProps {
+    size?: SpinnerSize;
+    label?: string;
+    /** Accessible name when no visible label is provided. @default "Loading" */
+    'aria-label'?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export declare interface TabItem {
+    /**
+     * Unique identifier for the tab
+     */
+    id: string;
+    /**
+     * Display label for the tab
+     */
+    label: string;
+    /**
+     * Content to display when tab is active
+     */
+    content: ReactNode;
+}
+
+export declare const Tabs: ({ tabs, activeTabId, onTabChange, className, "data-testid": testId, ...props }: TabsProps) => JSX_2.Element;
+
+export declare interface TabsProps {
+    /**
+     * Array of tab items to display
+     */
+    tabs: TabItem[];
+    /**
+     * ID of the currently active tab
+     */
+    activeTabId: string;
+    /**
+     * Callback function when tab is changed
+     */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+
+export declare const TertiaryButton: ({ label, disabled, icon, iconPos, className, ...rest }: TertiaryButtonProps) => JSX_2.Element;
+
+/**
+ * Native `<button>` props plus label/icon layout. Either a visible `label` or `aria-label` is required
+ * so the control always has an accessible name (icon-only buttons need `aria-label`).
+ */
+export declare type TertiaryButtonProps = TertiaryButtonShared & ({
+    label: string;
+} | {
+    'aria-label': string;
+});
+
+declare type TertiaryButtonShared = Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> & {
+    /**
+     * Text label displayed inside the button. When omitted (icon-only), you must pass `aria-label`.
+     */
+    label?: string;
+    /** Optional icon */
+    icon?: default_2.ReactNode;
+    /** Icon position relative to the label */
+    iconPos?: 'left' | 'right';
+};
+
+export declare const Timeline: ({ events, animated, animateLine, className, "data-testid": testId, }: TimelineProps) => JSX_2.Element | null;
+
+export declare interface TimelineEvent {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp?: string;
+    icon?: default_2.ReactNode;
+    variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
+}
+
+export declare interface TimelineProps {
+    events: TimelineEvent[];
+    /** Animate events staggering in on mount. @default true */
+    animated?: boolean;
+    /** Animate the vertical connector (draw + pulse). @default true */
+    animateLine?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare const Toast: ({ entry, onClose }: ToastProps) => JSX_2.Element;
+
+export declare interface ToastContextValue {
+    showToast: (message: string, variant?: ToastVariant, duration?: number) => void;
+}
+
+export declare interface ToastEntry {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration?: number;
+}
+
+export declare interface ToastProps {
+    entry: ToastEntry;
+    onClose: (id: string) => void;
+}
+
+export declare const ToastProvider: ({ children }: ToastProviderProps) => JSX_2.Element;
+
+export declare interface ToastProviderProps {
+    children: default_2.ReactNode;
+}
+
+export declare type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+/**
+ * Full-width blue top navigation bar for cockpit layouts.
+ *
+ * Sub-components: `TopNav.Logo`
+ */
+export declare const TopNav: TopNavComponent;
+
+/**
+ * Compound root plus static `TopNav.Logo` (default Emporix wordmark).
+ */
+export declare type TopNavComponent = default_2.FC<TopNavProps> & {
+    Logo: typeof EmporixLogo;
+};
+
+export declare interface TopNavProps extends default_2.HTMLAttributes<HTMLElement> {
+    /** Logo element in the left group. Defaults to the Emporix wordmark. */
+    logo?: default_2.ReactNode;
+    /** Content before the logo in the left group (e.g. sidebar toggle button). */
+    start?: default_2.ReactNode;
+    /** Content anchored to the right edge (e.g. user avatar, action buttons). */
+    children?: default_2.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+
+export declare const useToast: () => ToastContextValue;
+
+export declare const Wizard: ({ steps, activeStep, onStepChange, onSubmit, backLabel, nextLabel, submitLabel, submitting, className, "data-testid": testId, }: WizardProps) => JSX_2.Element;
+
+export declare interface WizardProps {
+    /** Ordered array of steps. */
+    steps: WizardStep[];
+    /** Index (0-based) of the currently active step. */
+    activeStep: number;
+    /** Called when the active step changes (via Back / Next). */
+    onStepChange: (index: number) => void;
+    /** Called when the user clicks "Submit" on the last step. */
+    onSubmit?: () => void;
+    /** Label for the Back button. @default "Back" */
+    backLabel?: string;
+    /** Label for the Next button. @default "Next" */
+    nextLabel?: string;
+    /** Label for the Submit button on the last step. @default "Submit" */
+    submitLabel?: string;
+    /** When true, the submit button is disabled (e.g. while saving). */
+    submitting?: boolean;
+    /** Additional CSS class name for the root element. */
+    className?: string;
+    /** Test ID for testing. */
+    'data-testid'?: string;
+}
+
+export declare interface WizardStep {
+    /** Unique identifier for the step. */
+    id: string;
+    /** Label shown in the stepper indicator. */
+    label: string;
+    /** Content rendered when this step is active. */
+    content: default_2.ReactNode;
+    /**
+     * Whether the user can proceed past this step.
+     * Defaults to `true`. When `false`, the "Next" / "Submit" button is disabled.
+     */
+    canProceed?: boolean;
+}
+
+export { }