@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.4

package/lib/es/components/statsWidget/StatsWidgetNumber.js

@@ -2,25 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const StatsWidgetNumber = props => {
-    const { value, total, label, className, clickable } = props, remainingProps = tslib_1.__rest(props, ["value", "total", "label", "className", "clickable"]);
-    const classes = (0, classnames_1.default)('StatsWidgetNumber', clickable && 'cursor-pointer', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), total && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
-};
-StatsWidgetNumber.defaultProps = {
-    value: 0,
-    clickable: false,
-    onClick: () => { },
-};
-StatsWidgetNumber.propTypes = {
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number, prop_types_1.default.node]).isRequired,
-    total: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number, prop_types_1.default.node]),
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    clickable: prop_types_1.default.bool,
-    onClick: prop_types_1.default.func,
-    className: prop_types_1.default.string,
+const StatsWidgetNumber = (props) => {
+    const { value = 0, total, label, className, clickable = false, onClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["value", "total", "label", "className", "clickable", "onClick"]);
+    const wrapperClasses = (0, classnames_1.default)('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { onClick: onClick, className: wrapperClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), total && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
 };
 exports.default = StatsWidgetNumber;

package/lib/es/components/statsWidget/StatsWidgetSpacer.d.ts

@@ -1,2 +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;
-declare function StatsWidgetSpacer(props: any): JSX.Element;

package/lib/es/components/statsWidget/StatsWidgetSpacer.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const StatsWidgetSpacer = props => {
+const StatsWidgetSpacer = (props) => {
     const { className } = props, remainingProps = tslib_1.__rest(props, ["className"]);
-    const classes = (0, classnames_1.default)('StatsWidget-body-column-spacer', className);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }));
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget-body-column-spacer', className);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }));
 };
 exports.default = StatsWidgetSpacer;

package/lib/es/components/statsWidget/StatsWidgets.d.ts

@@ -1,8 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type StatsWidgetsProps = {
+    /**
+     * 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;
-declare function StatsWidgets(props: any): JSX.Element;
-declare namespace StatsWidgets {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/statsWidget/StatsWidgets.js

@@ -2,15 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const StatsWidgets = props => {
+const StatsWidgets = (props) => {
     const { children, className } = props, remainingProps = tslib_1.__rest(props, ["children", "className"]);
-    const classes = (0, classnames_1.default)('StatsWidget-wrapper', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
-};
-StatsWidgets.propTypes = {
-    className: prop_types_1.default.string,
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget-wrapper', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: children })));
 };
 exports.default = StatsWidgets;

package/lib/es/components/statusBar/StatusBar.d.ts

@@ -1,55 +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;
-declare function StatusBar(props: any): JSX.Element;
-declare namespace StatusBar {
-    namespace defaultProps {
-        export { SMALL as size };
-        export const useProgressDivider: boolean;
-        export namespace icon {
-            export const name: string;
-            export { LEFT as alignment };
-        }
-        export namespace label {
-            export const value: string;
-            export { RIGHT as alignment };
-            export { BOLD as weight };
-        }
-        export const progress: never[];
-        export const className: string;
-    }
-    namespace propTypes {
-        const icon_1: PropTypes.Requireable<PropTypes.InferProps<{
-            name: PropTypes.Validator<string>;
-            alignment: PropTypes.Requireable<"right" | "left">;
-            color: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        }>>;
-        export { icon_1 as icon };
-        const label_1: PropTypes.Requireable<PropTypes.InferProps<{
-            value: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            alignment: PropTypes.Requireable<"top" | "right" | "left">;
-            weight: PropTypes.Requireable<string>;
-            color: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        }>>;
-        export { label_1 as label };
-        const progress_1: PropTypes.Requireable<(PropTypes.InferProps<{
-            percentage: PropTypes.Validator<number>;
-            tooltip: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            tooltipPosition: PropTypes.Requireable<"top" | "right" | "bottom" | "left">;
-            tooltipDelay: PropTypes.Requireable<number>;
-            color: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export { progress_1 as progress };
-        const useProgressDivider_1: PropTypes.Requireable<boolean>;
-        export { useProgressDivider_1 as useProgressDivider };
-        export const size: PropTypes.Requireable<string>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-declare const SMALL: "small";
-declare const LEFT: "left";
-declare const RIGHT: "right";
-declare const BOLD: "bold";
-import PropTypes from "prop-types";

package/lib/es/components/statusBar/StatusBar.js

@@ -2,134 +2,58 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
-const LEFT = OverlayTrigger_1.default.LEFT;
-const TOP = OverlayTrigger_1.default.TOP;
-const RIGHT = OverlayTrigger_1.default.RIGHT;
-const BOTTOM = OverlayTrigger_1.default.BOTTOM;
-const SMALL = 'small';
-const LARGE = 'large';
-const LIGHT = 'light';
-const BOLD = 'bold';
-const renderProgressBar = (_a, index, useProgressDivider) => {
-    var { percentage = 0, tooltip, tooltipPosition = TOP, tooltipDelay = 50, color, className } = _a, props = tslib_1.__rest(_a, ["percentage", "tooltip", "tooltipPosition", "tooltipDelay", "color", "className"]);
-    const progressBarClassNames = (0, classnames_1.default)('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
-    const progressBar = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressBarClassNames, style: { width: `${percentage}%` } }, props), index));
-    if (tooltip) {
-        const tooltipElement = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: `tooltip-${index}`, width: 'auto' }, { children: tooltip })));
-        return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: tooltipPosition, overlay: tooltipElement, delay: tooltipDelay }, { children: progressBar }), index));
-    }
-    return progressBar;
-};
-const renderAllProgressBars = (progress, useProgressDivider) => {
-    if (!progress.length) {
-        return null;
-    }
-    return progress.map((item, index) => {
-        return renderProgressBar(item, index, useProgressDivider);
+const StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarProgressBar_1 = tslib_1.__importDefault(require("./StatusBarProgressBar"));
+const StatusBarIcon_1 = tslib_1.__importDefault(require("./StatusBarIcon"));
+const StatusBarLabel_1 = tslib_1.__importDefault(require("./StatusBarLabel"));
+const iconDefaults = { name: '', alignment: StatusBarConstants_1.LEFT };
+const labelDefaults = { value: '', alignment: StatusBarConstants_1.RIGHT, weight: StatusBarConstants_1.BOLD };
+const StatusBar = (props) => {
+    const { progress = [], size = StatusBarConstants_1.SMALL, className = '', useProgressDivider = true } = props;
+    // deep destructuring with merging default props don't work
+    const icon = Object.assign(Object.assign({}, iconDefaults), props.icon);
+    const label = Object.assign(Object.assign({}, labelDefaults), props.label);
+    const hasIcon = !!icon.name;
+    const iconIsLeft = icon.alignment === StatusBarConstants_1.LEFT;
+    const iconIsRight = icon.alignment === StatusBarConstants_1.RIGHT;
+    const hasLabel = !!label.value;
+    const labelIsLeft = label.alignment === StatusBarConstants_1.LEFT;
+    const labelIsTop = label.alignment === StatusBarConstants_1.TOP;
+    const labelIsRight = label.alignment === StatusBarConstants_1.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 = (0, classnames_1.default)('StatusBar', 'width-100pct', 'display-flex', labelIsTop ? 'align-items-end' : 'align-items-center', className);
+    const progressLabelWrapperClasses = (0, classnames_1.default)('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 getIconAlignment = icon => icon.alignment || LEFT;
-const getIconColorClassName = icon => icon.color || 'text-color-gray';
-const getLabelAlignment = label => label.alignment || RIGHT;
-const getLabelColorClassName = label => label.color || 'text-color-dark';
-const getLabelAlignmentClassName = label => (label.alignment === TOP ? 'align-items-end' : 'align-items-center');
-const getProgressBarHightClassName = size => (size === SMALL && 'height-5') || (size === LARGE && 'height-10');
-const getIsIconLeftAndLabelRight = (icon, iconAlignment, label, labelAlignment) => icon.name && iconAlignment === LEFT && label.value && labelAlignment === RIGHT;
-const getIsIconRightAndLabelLeft = (icon, iconAlignment, label, labelAlignment) => icon.name && iconAlignment === RIGHT && label.value && labelAlignment === LEFT;
-const getIsIconAndLabelLeft = (icon, iconAlignment, label, labelAlignment) => icon.name && iconAlignment === LEFT && label.value && labelAlignment === LEFT;
-const getIsIconAndLabelRight = (icon, iconAlignment, label, labelAlignment) => icon.name && iconAlignment === RIGHT && label.value && labelAlignment === RIGHT;
-const getIsIconOnly = (label, icon) => !label.value && icon.name;
-const getIsIconOnlyLeft = (isIconOnly, iconAlignment) => isIconOnly && iconAlignment === LEFT;
-const getIsIconOnlyRight = (isIconOnly, iconAlignment) => isIconOnly && iconAlignment === RIGHT;
-const getIsLabelOnly = (label, icon) => label.value && !icon.name;
-const getIsLabelOnlyLeft = (isLabelOnly, labelAlignment) => isLabelOnly && labelAlignment === LEFT;
-const getIsLabelOnlyRight = (isLabelOnly, labelAlignment) => isLabelOnly && labelAlignment === RIGHT;
-const renderIcon = (icon, size) => {
-    if (!icon.name) {
-        return null;
-    }
-    const iconColor = getIconColorClassName(icon);
-    const iconAlignment = getIconAlignment(icon);
-    const iconWrapperClasses = (0, classnames_1.default)(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
-    const iconClasses = (0, classnames_1.default)('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconWrapperClasses }, { children: (0, jsx_runtime_1.jsx)("span", { className: iconClasses }) })));
-};
-const renderLabel = (label, size, labelWrapperClasses) => {
-    if (!label.value) {
-        return null;
-    }
-    const labelColor = getLabelColorClassName(label);
-    const labelAlignment = getLabelAlignment(label);
-    const labelClasses = (0, classnames_1.default)('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: labelWrapperClasses }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: labelClasses }, { children: label.value })) })));
-};
-// eslint-disable-next-line complexity
-const StatusBar = props => {
-    const { progress = [], icon, label, size, className, useProgressDivider } = props;
-    // Default values for icon and label alignment
-    const iconAlignment = getIconAlignment(icon);
-    const labelAlignment = getLabelAlignment(label);
-    const isIconLeftAndLabelRight = getIsIconLeftAndLabelRight(icon, iconAlignment, label, labelAlignment);
-    const isIconRightAndLabelLeft = getIsIconRightAndLabelLeft(icon, iconAlignment, label, labelAlignment);
-    const isIconAndLabelLeft = getIsIconAndLabelLeft(icon, iconAlignment, label, labelAlignment);
-    const isIconAndLabelRight = getIsIconAndLabelRight(icon, iconAlignment, label, labelAlignment);
-    const isIconOnly = getIsIconOnly(label, icon);
-    const isIconOnlyLeft = getIsIconOnlyLeft(isIconOnly, iconAlignment);
-    const isIconOnlyRight = getIsIconOnlyRight(isIconOnly, iconAlignment);
-    const isLabelOnly = getIsLabelOnly(label, icon);
-    const isLabelOnlyLeft = getIsLabelOnlyLeft(isLabelOnly, labelAlignment);
-    const isLabelOnlyRight = getIsLabelOnlyRight(isLabelOnly, labelAlignment);
-    const wrapperClasses = (0, classnames_1.default)('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
-    const progressLabelWrapperClasses = (0, classnames_1.default)('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
-    const labelWrapperClasses = (0, classnames_1.default)(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
-    const progressOuterWrapperClasses = (0, classnames_1.default)('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
-    const progressWrapperClasses = (0, classnames_1.default)('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses }, { children: [renderIcon(icon, size), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: progressLabelWrapperClasses }, { children: [renderLabel(label, size, labelWrapperClasses), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressOuterWrapperClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressWrapperClasses }, { children: renderAllProgressBars(progress, useProgressDivider) })) }))] }))] })));
-};
-StatusBar.defaultProps = {
-    size: SMALL,
-    useProgressDivider: true,
-    icon: {
-        name: '',
-        alignment: LEFT,
-    },
-    label: {
-        value: '',
-        alignment: RIGHT,
-        weight: BOLD,
-    },
-    progress: [],
-    className: '',
-};
-StatusBar.propTypes = {
-    icon: prop_types_1.default.shape({
-        name: prop_types_1.default.string.isRequired,
-        alignment: prop_types_1.default.oneOf([LEFT, RIGHT]),
-        color: prop_types_1.default.string,
-        className: prop_types_1.default.string,
-    }),
-    label: prop_types_1.default.shape({
-        value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
-        alignment: prop_types_1.default.oneOf([LEFT, TOP, RIGHT]),
-        weight: prop_types_1.default.oneOf([LIGHT, BOLD]),
-        color: prop_types_1.default.string,
-        className: prop_types_1.default.string,
-    }),
-    progress: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        percentage: prop_types_1.default.number.isRequired,
-        tooltip: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        tooltipPosition: prop_types_1.default.oneOf([TOP, BOTTOM, LEFT, RIGHT]),
-        tooltipDelay: prop_types_1.default.number,
-        color: prop_types_1.default.string,
-        className: prop_types_1.default.string,
-    })),
-    useProgressDivider: prop_types_1.default.bool,
-    size: prop_types_1.default.oneOf([SMALL, LARGE]),
-    className: prop_types_1.default.string,
+    const labelWrapperClasses = (0, classnames_1.default)({
+        '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 = (0, classnames_1.default)('display-flex', 'flex-1-0', {
+        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,
+        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,
+    });
+    const progressWrapperClasses = (0, classnames_1.default)('progress', 'margin-0', 'flex-1-0', {
+        'height-5': size === StatusBarConstants_1.SMALL,
+        'height-10': size === StatusBarConstants_1.LARGE,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses }, { children: [(0, jsx_runtime_1.jsx)(StatusBarIcon_1.default, { icon: icon, size: size }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: progressLabelWrapperClasses }, { children: [(0, jsx_runtime_1.jsx)(StatusBarLabel_1.default, { label: label, size: size, className: labelWrapperClasses }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressOuterWrapperClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressWrapperClasses }, { children: progress.map((item, index) => ((0, jsx_runtime_1.jsx)(StatusBarProgressBar_1.default, { progress: item, index: index, useProgressDivider: useProgressDivider }, index))) })) }))] }))] })));
 };
 exports.default = StatusBar;

package/lib/es/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/lib/es/components/statusBar/StatusBar.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/es/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/lib/es/components/statusBar/StatusBarConstants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BOLD = exports.LIGHT = exports.LARGE = exports.SMALL = exports.BOTTOM = exports.RIGHT = exports.TOP = exports.LEFT = void 0;
+const tslib_1 = require("tslib");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+// alignment / position
+exports.LEFT = OverlayTrigger_1.default.LEFT;
+exports.TOP = OverlayTrigger_1.default.TOP;
+exports.RIGHT = OverlayTrigger_1.default.RIGHT;
+exports.BOTTOM = OverlayTrigger_1.default.BOTTOM;
+// icon size
+exports.SMALL = 'small';
+exports.LARGE = 'large';
+// font weight
+exports.LIGHT = 'light';
+exports.BOLD = 'bold';

package/lib/es/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/lib/es/components/statusBar/StatusBarIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarIcon = (props) => {
+    var _a;
+    const { icon, size } = props;
+    if (!icon.name) {
+        return null;
+    }
+    const wrapperClasses = icon.alignment === StatusBarConstants_1.LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';
+    const iconClasses = (0, classnames_1.default)('rioglyph', icon.name, (_a = icon.color) !== null && _a !== void 0 ? _a : 'text-color-gray', size === StatusBarConstants_1.SMALL && 'text-size-h3', size === StatusBarConstants_1.LARGE && 'text-size-h2', icon.className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsx)("span", { className: iconClasses }) })));
+};
+exports.default = StatusBarIcon;

package/lib/es/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/lib/es/components/statusBar/StatusBarLabel.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarLabel = (props) => {
+    var _a;
+    const { label, size, className = '' } = props;
+    if (!label.value) {
+        return null;
+    }
+    const labelClasses = (0, classnames_1.default)('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', (_a = label.color) !== null && _a !== void 0 ? _a : 'text-color-dark', {
+        'width-0': label.alignment === StatusBarConstants_1.TOP,
+        'text-size-16': size === StatusBarConstants_1.SMALL,
+        'text-size-h3': size === StatusBarConstants_1.LARGE,
+        'text-bold': label.weight !== StatusBarConstants_1.LIGHT,
+    }, label.className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: labelClasses }, { children: label.value })) })));
+};
+exports.default = StatusBarLabel;

package/lib/es/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/lib/es/components/statusBar/StatusBarProgressBar.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBarProgressBar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+const StatusBarConstants_1 = require("./StatusBarConstants");
+const StatusBarProgressBar = (props) => {
+    const { index, progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = StatusBarConstants_1.TOP }, useProgressDivider, } = props;
+    const progressBarClasses = (0, classnames_1.default)('progress-bar', color !== null && color !== void 0 ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className);
+    const progressBar = (0, jsx_runtime_1.jsx)("div", { className: progressBarClasses, style: { width: `${percentage}%` } });
+    if (!tooltip) {
+        return progressBar;
+    }
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: tooltipPosition, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: `tooltip-${index}`, width: 'auto' }, { children: tooltip })), delay: tooltipDelay }, { children: progressBar })));
+};
+exports.StatusBarProgressBar = StatusBarProgressBar;
+exports.default = exports.StatusBarProgressBar;

package/lib/es/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -1,5 +1,5 @@
 export default SteppedProgressBar;
-declare function SteppedProgressBar(props: any): JSX.Element;
+declare function SteppedProgressBar(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace SteppedProgressBar {
     const VARIANT_CIRCLE: string;
     const VARIANT_RECTANGLE: string;