@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/states/NotBookedState.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import isArray from 'lodash/fp/isArray';
+import isEmpty from 'lodash/fp/isEmpty';
+import CustomState from './CustomState';
+const NotBookedState = (props) => {
+    const { message, features, icon = 'rioglyph-stars', ...remainingProps } = props;
+    const combinedMessages = (_jsxs(_Fragment, { children: [message && _jsx("div", { className: 'text-medium margin-bottom-20', children: message }), features && isArray(features) && !isEmpty(features) && (_jsx("ul", { className: 'feature-list icon-list margin-x-10pct-ls margin-y-10 text-size-12 text-size-14-sm', id: 'features', children: features.map((feature, index) => (_jsxs("li", { className: 'padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left', children: [_jsx("span", { className: 'rioglyph rioglyph-ok text-color-primary' }), _jsx("span", { className: 'text-color-darker', children: feature })] }, index))) }))] }));
+    return (_jsx(CustomState, { message: combinedMessages, icons: [{ name: icon, color: 'text-color-primary' }], ...remainingProps }));
+};
+export default NotBookedState;

package/src/components/states/NotFoundState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotFoundStateProps = BaseStateProps;
+declare const NotFoundState: (props: PropsWithChildren<NotFoundStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default NotFoundState;

package/src/components/states/NotFoundState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CustomState from './CustomState';
+const NotFoundState = (props) => {
+    const { icon = 'rioglyph-looking-glass-man', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
+};
+export default NotFoundState;

package/src/components/states/StateButton.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { BUTTON_STYLE } from '../../Button';
+export type StateButtonProps = {
+    /**
+     * The button text.
+     *
+     * This can also be a node with an icon to be shown on the button.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Callback fired after the component starts to collapse.
+     *
+     * @default () => {}
+     */
+    onClick?: VoidFunction;
+    /**
+     * Instead of a callback for the button you can specify a "href".
+     *
+     * This way it will render a link button instead.
+     */
+    href?: string;
+    /**
+     * The style of the button.
+     *
+     * @default 'primary'
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Additional classes assigned to the button.
+     */
+    className?: string;
+};
+declare const StateButton: (props: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default StateButton;

package/src/components/states/StateButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StateButton = (props) => {
+    const { text, bsStyle = 'primary', className, onClick = () => { }, href } = props;
+    // In case a href is given, render a link instead
+    if (href) {
+        return (_jsx("a", { className: classNames('margin-top-15', className), href: href, onClick: onClick, children: text }));
+    }
+    const buttonClassNames = classNames('btn', 'margin-top-10', `btn-${bsStyle}`, className);
+    return (_jsx("button", { className: buttonClassNames, type: 'button', onClick: onClick, children: text }));
+};
+export default StateButton;

package/src/components/states/StateIcon.d.ts

@@ -0,0 +1,7 @@
+export type StateIconProps = {
+    name?: string;
+    className?: string;
+    color?: string;
+};
+declare const StateIcon: ({ name, color, className }: StateIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StateIcon;

package/src/components/states/StateIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }) => (_jsx("span", { className: `rioglyph ${name} ${color} ${className}` }));
+export default StateIcon;

package/src/components/statsWidget/StatsWidget.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';
+import { type StatsWidgetHeaderProps } from './StatsWidgetHeader';
+import { type StatsWidgetBodyProps } from './StatsWidgetBody';
+import { type StatsWidgetFooterProps } from './StatsWidgetFooter';
+export type StatsWidgetProps = ComponentProps<'div'> & {
+    /**
+     * Callback to reset the filter.
+     */
+    onFilterReset?: MouseEventHandler;
+    /**
+     * Defines whether a filter is active for this widget.
+     */
+    hasFilter?: boolean;
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+export type { StatsWidgetHeaderProps, StatsWidgetBodyProps, StatsWidgetFooterProps };
+declare const StatsWidget: {
+    (props: PropsWithChildren<StatsWidgetProps>): import("react/jsx-runtime").JSX.Element;
+    Header: (props: PropsWithChildren<StatsWidgetHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+    Body: (props: PropsWithChildren<StatsWidgetBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: PropsWithChildren<StatsWidgetFooterProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export default StatsWidget;

package/src/components/statsWidget/StatsWidget.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import StatsWidgetHeader from './StatsWidgetHeader';
+import StatsWidgetBody from './StatsWidgetBody';
+import StatsWidgetFooter from './StatsWidgetFooter';
+const StatsWidget = (props) => {
+    const { children, hasFilter = false, onFilterReset = () => { }, className, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidget', className);
+    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, children: [hasFilter && (_jsx("span", { className: 'bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2' +
+                    ' rounded-circle position-absolute top-15 right-15 display-block height-20 width-20' +
+                    ' cursor-pointer', onClick: onFilterReset, children: _jsx("span", { className: 'rioglyph rioglyph-revert text-color-white text-size-12' }) })), children] }));
+};
+StatsWidget.Header = StatsWidgetHeader;
+StatsWidget.Body = StatsWidgetBody;
+StatsWidget.Footer = StatsWidgetFooter;
+export default StatsWidget;

package/src/components/statsWidget/StatsWidgetBody.d.ts

@@ -0,0 +1,14 @@
+import { type PropsWithChildren } from 'react';
+export type StatsWidgetBodyProps = {
+    /**
+     * Whether to use flex space-between for StatsWidgetNumbers.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgetBody: (props: PropsWithChildren<StatsWidgetBodyProps>) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgetBody;

package/src/components/statsWidget/StatsWidgetBody.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgetBody = (props) => {
+    const { children, fullWidth = false, className, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidget-body', fullWidth && 'full-width', className);
+    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, children: [fullWidth && _jsx("div", { className: 'StatsWidget-body-column-spacer invisible' }), children, fullWidth && _jsx("div", { className: 'StatsWidget-body-column-spacer invisible' })] }));
+};
+export default StatsWidgetBody;

package/src/components/statsWidget/StatsWidgetFooter.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type StatsWidgetFooterProps = {
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgetFooter: (props: PropsWithChildren<StatsWidgetFooterProps>) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgetFooter;

package/src/components/statsWidget/StatsWidgetFooter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgetFooter = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidget-footer', className);
+    return (_jsx("div", { ...remainingProps, className: wrapperClasses, children: children }));
+};
+export default StatsWidgetFooter;

package/src/components/statsWidget/StatsWidgetHeader.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type StatsWidgetHeaderProps = {
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgetHeader: (props: PropsWithChildren<StatsWidgetHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgetHeader;

package/src/components/statsWidget/StatsWidgetHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgetHeader = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapeprClasses = classNames('StatsWidget-header', className);
+    return (_jsx("div", { ...remainingProps, className: wrapeprClasses, children: children }));
+};
+export default StatsWidgetHeader;

package/src/components/statsWidget/StatsWidgetNumber.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode, type MouseEventHandler } from 'react';
+export type StatsWidgetNumberProps = {
+    /**
+     * The value to be shown.
+     * @default 0
+     */
+    value: string | number | ReactNode;
+    /**
+     * The total value to be shown i.e. in combination with an active filter.
+     */
+    total?: string | number | ReactNode;
+    /**
+     * The label shown below the number.
+     */
+    label?: string | ReactNode;
+    /**
+     * Defines whether the number is clickable i.e. in combination with a filter.
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Callback for when the user clicks the number widget.
+     */
+    onClick?: MouseEventHandler;
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgetNumber: (props: StatsWidgetNumberProps) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgetNumber;

package/src/components/statsWidget/StatsWidgetNumber.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgetNumber = (props) => {
+    const { value = 0, total, label, className, clickable = false, onClick = () => { }, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);
+    return (_jsxs("div", { ...remainingProps, onClick: onClick, className: wrapperClasses, children: [_jsxs("div", { className: 'StatsWidgetNumber-counter', children: [_jsx("div", { className: 'StatsWidgetNumber-value', children: value }), (total || total === 0) && _jsx("div", { className: 'StatsWidgetNumber-total', children: total })] }), label && _jsx("div", { className: 'StatsWidgetNumber-label', children: label })] }));
+};
+export default StatsWidgetNumber;

package/src/components/statsWidget/StatsWidgetSpacer.d.ts

@@ -0,0 +1,8 @@
+export type StatsWidgetSpacerProps = {
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgetSpacer: (props: StatsWidgetSpacerProps) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgetSpacer;

package/src/components/statsWidget/StatsWidgetSpacer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgetSpacer = (props) => {
+    const { className, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidget-body-column-spacer', className);
+    return _jsx("div", { ...remainingProps, className: wrapperClasses });
+};
+export default StatsWidgetSpacer;

package/src/components/statsWidget/StatsWidgets.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, PropsWithChildren } from 'react';
+export type StatsWidgetsProps = ComponentProps<'div'> & {
+    /**
+     * Additional class names to be added to the element.
+     */
+    className?: string;
+};
+declare const StatsWidgets: (props: PropsWithChildren<StatsWidgetsProps>) => import("react/jsx-runtime").JSX.Element;
+export default StatsWidgets;

package/src/components/statsWidget/StatsWidgets.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const StatsWidgets = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapperClasses = classNames('StatsWidget-wrapper', className);
+    return (_jsx("div", { ...remainingProps, className: wrapperClasses, children: children }));
+};
+export default StatsWidgets;

package/src/components/statusBar/StatusBar.d.ts

@@ -0,0 +1,33 @@
+import type { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';
+export type StatusBarProps = {
+    /**
+     * The icon to be shown next to the progress bar.
+     */
+    icon?: StatusBarIconSpec;
+    /**
+     * The label to be shown for the progress bar.
+     */
+    label?: StatusBarLabelSpec;
+    /**
+     * List of progress bars which will be stacked in given order if there are multiple.
+     */
+    progress?: StatusBarProgress[];
+    /**
+     * The size of the icon and progress bar.
+     *
+     * @default 'small'
+     */
+    size?: 'small' | 'large';
+    /**
+     * Uses a divider for multiple progress bars when defined.
+     *
+     * @default true
+     */
+    useProgressDivider?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const StatusBar: (props: StatusBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBar;

package/src/components/statusBar/StatusBar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';
+import StatusBarProgressBar from './StatusBarProgressBar';
+import StatusBarIcon from './StatusBarIcon';
+import StatusBarLabel from './StatusBarLabel';
+const iconDefaults = { name: '', alignment: LEFT };
+const labelDefaults = { value: '', alignment: RIGHT, weight: BOLD };
+const StatusBar = (props) => {
+    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;
+    // deep destructuring with merging default props don't work
+    const icon = { ...iconDefaults, ...props.icon };
+    const label = { ...labelDefaults, ...props.label };
+    const hasIcon = !!icon.name;
+    const iconIsLeft = icon.alignment === LEFT;
+    const iconIsRight = icon.alignment === RIGHT;
+    const hasLabel = !!label.value;
+    const labelIsLeft = label.alignment === LEFT;
+    const labelIsTop = label.alignment === TOP;
+    const labelIsRight = label.alignment === RIGHT;
+    const hasOnlyIcon = hasIcon && !hasLabel;
+    const hasOnlyLabel = !hasIcon && hasLabel;
+    const hasIconAndLabel = hasIcon && hasLabel;
+    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;
+    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;
+    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;
+    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;
+    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;
+    const isIconOnlyRight = hasOnlyIcon && iconIsRight;
+    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;
+    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;
+    const wrapperClasses = classNames('StatusBar', 'width-100pct', 'display-flex', labelIsTop ? 'align-items-end' : 'align-items-center', className);
+    const progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', {
+        'flex-order-1 flex-column margin-bottom-10': labelIsTop,
+        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,
+        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,
+        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,
+    });
+    const labelWrapperClasses = classNames({
+        'display-flex justify-content-center': labelIsTop,
+        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', {
+        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', {
+        'height-5': size === SMALL,
+        'height-10': size === LARGE,
+    });
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsx(StatusBarIcon, { icon: icon, size: size }), _jsxs("div", { className: progressLabelWrapperClasses, children: [_jsx(StatusBarLabel, { label: label, size: size, className: labelWrapperClasses }), _jsx("div", { className: progressOuterWrapperClasses, children: _jsx("div", { className: progressWrapperClasses, children: progress.map((item, index) => (_jsx(StatusBarProgressBar, { progress: item, index: index, useProgressDivider: useProgressDivider }, index))) }) })] })] }));
+};
+export default StatusBar;

package/src/components/statusBar/StatusBar.types.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+export type StatusBarIconSpec = {
+    /**
+     * The class name of the icon i.e. "rioglyph-cruise-control".
+     */
+    name: string;
+    /**
+     * The position of the icon.
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * The text color class name for the icon.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the icon.
+     */
+    className?: string;
+};
+export type StatusBarLabelSpec = {
+    /**
+     * The label content.
+     */
+    value: string | ReactNode;
+    /**
+     * The position of the icon.
+     *
+     * @default 'right'
+     */
+    alignment?: 'left' | 'top' | 'right';
+    /**
+     * The text weight of the label.
+     *
+     * @default 'bold'
+     */
+    weight?: 'light' | 'bold';
+    /**
+     * The text color class name for the label.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the label.
+     */
+    className?: string;
+};
+export type StatusBarProgress = {
+    /**
+     * The percentage of the progress.
+     *
+     * @default 0
+     */
+    percentage?: number;
+    /**
+     * The color class name for the label.
+     *
+     * @default 'progress-bar-info'
+     */
+    color?: string;
+    /**
+     * Optional tooltip content to be shown for the progress bar.
+     */
+    tooltip?: string | ReactNode;
+    /**
+     * The position of the tooltip for the progress bar.
+     *
+     * @default 'top'
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The delay in milliseconds for when the tooltip is shown when hovering the progress bar.
+     *
+     * @default 50
+     */
+    tooltipDelay?: number;
+    /**
+     * Optional class names for the progress bar.
+     */
+    className?: string;
+};

package/src/components/statusBar/StatusBar.types.js

@@ -0,0 +1 @@
+export {};

package/src/components/statusBar/StatusBarConstants.d.ts

@@ -0,0 +1,8 @@
+export declare const LEFT: "left";
+export declare const TOP: "top";
+export declare const RIGHT: "right";
+export declare const BOTTOM: "bottom";
+export declare const SMALL = "small";
+export declare const LARGE = "large";
+export declare const LIGHT = "light";
+export declare const BOLD = "bold";

package/src/components/statusBar/StatusBarConstants.js

@@ -0,0 +1,12 @@
+import OverlayTrigger from '../overlay/OverlayTrigger';
+// alignment / position
+export const LEFT = OverlayTrigger.LEFT;
+export const TOP = OverlayTrigger.TOP;
+export const RIGHT = OverlayTrigger.RIGHT;
+export const BOTTOM = OverlayTrigger.BOTTOM;
+// icon size
+export const SMALL = 'small';
+export const LARGE = 'large';
+// font weight
+export const LIGHT = 'light';
+export const BOLD = 'bold';

package/src/components/statusBar/StatusBarIcon.d.ts

@@ -0,0 +1,7 @@
+import type { StatusBarIconSpec } from './StatusBar.types';
+type StatusBarIconProps = {
+    icon: StatusBarIconSpec;
+    size: 'small' | 'large';
+};
+declare const StatusBarIcon: (props: StatusBarIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarIcon;

package/src/components/statusBar/StatusBarIcon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { LARGE, LEFT, SMALL } from './StatusBarConstants';
+const StatusBarIcon = (props) => {
+    const { icon, size } = props;
+    if (!icon.name) {
+        return null;
+    }
+    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';
+    const iconClasses = classNames('rioglyph', icon.name, icon.color ?? 'text-color-gray', size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className);
+    return (_jsx("div", { className: wrapperClasses, children: _jsx("span", { className: iconClasses }) }));
+};
+export default StatusBarIcon;

package/src/components/statusBar/StatusBarLabel.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarLabelSpec } from './StatusBar.types';
+type StatusBarLabelProps = {
+    label: StatusBarLabelSpec;
+    size: 'small' | 'large';
+    className?: string;
+};
+declare const StatusBarLabel: (props: StatusBarLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusBarLabel;

package/src/components/statusBar/StatusBarLabel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';
+const StatusBarLabel = (props) => {
+    const { label, size, className = '' } = props;
+    if (!label.value) {
+        return null;
+    }
+    const labelClasses = classNames('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', label.color ?? 'text-color-dark', {
+        'width-0': label.alignment === TOP,
+        'text-size-16': size === SMALL,
+        'text-size-h3': size === LARGE,
+        'text-bold': label.weight !== LIGHT,
+    }, label.className);
+    return (_jsx("div", { className: className, children: _jsx("span", { className: labelClasses, children: label.value }) }));
+};
+export default StatusBarLabel;

package/src/components/statusBar/StatusBarProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { StatusBarProgress } from './StatusBar.types';
+type StatusBarProgressBarProps = {
+    index: number;
+    progress: StatusBarProgress;
+    useProgressDivider: boolean;
+};
+export declare const StatusBarProgressBar: (props: StatusBarProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBarProgressBar;

package/src/components/statusBar/StatusBarProgressBar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Tooltip from '../tooltip/Tooltip';
+import OverlayTrigger from '../overlay/OverlayTrigger';
+import { TOP } from './StatusBarConstants';
+export const StatusBarProgressBar = (props) => {
+    const { index, progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP }, useProgressDivider, } = props;
+    const progressBarClasses = classNames('progress-bar', color ?? 'progress-bar-info', useProgressDivider && 'progress-divider', className);
+    const progressBar = _jsx("div", { className: progressBarClasses, style: { width: `${percentage}%` } });
+    if (!tooltip) {
+        return progressBar;
+    }
+    return (_jsx(OverlayTrigger, { placement: tooltipPosition, overlay: _jsx(Tooltip, { id: `tooltip-${index}`, width: 'auto', children: tooltip }), delay: tooltipDelay, children: progressBar }));
+};
+export default StatusBarProgressBar;

package/src/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from 'react';
+export type SteppedProgressBarLabel = {
+    /**
+     * The element shown in the step element.
+     *
+     * This can be a single step number or an icon element.
+     */
+    icon?: string | ReactNode;
+    /**
+     * The label shown below the step element.
+     */
+    label?: string | ReactNode;
+    /**
+     * Additional classes to be set on the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional classes to be set on the label wrapping element.
+     */
+    labelWrapperClassName?: string;
+};
+export type SteppedProgressBarProps = {
+    /**
+     * Objects to defining the icon and the label of the navigation items.
+     *
+     * The icon can be a string or an icon.
+     */
+    labels: SteppedProgressBarLabel[];
+    /**
+     * Index of the selected navigation item.
+     */
+    selectedStepNumber: number;
+    /**
+     * Called with the new selected index after the user clicked a nav item.
+     */
+    onSelectedChanged: (selectedKey: number) => void;
+    /**
+     * The SteppedProgressBar Variant.
+     *
+     * One of "circle", "rectangle" or "roadsign".
+     *
+     * @default 'circle'
+     */
+    variant?: 'circle' | 'rectangle' | 'roadsign';
+    /**
+     * All navigation items with a higher index than this will be disabled.
+     */
+    disableFollowingPages?: number;
+    /**
+     * Deactivating the wrapping of bubbles on mobile.
+     *
+     * @default true
+     */
+    mobileBreakpoint?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SteppedProgressBar: {
+    (props: SteppedProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    VARIANT_CIRCLE: "circle";
+    VARIANT_RECTANGLE: "rectangle";
+    VARIANT_ROADSIGN: "roadsign";
+};
+export default SteppedProgressBar;