@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/spinner/Spinner.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export interface SpinnerProps {
+    /**
+     * Defines whether the spinner is shown on bright or dark background.
+     *
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * If set to "true" the spinner will be rendered twice as big.
+     *
+     * @default false
+     */
+    isDoubleSized?: boolean;
+    /**
+     * Renders the spinner as overlay in full-size mode.
+     *
+     * This will be relative to the parent container. Set the parent element to "position-relative" in this case.
+     *
+     * @default false
+     */
+    isFullSized?: boolean;
+    /**
+     * Renders the spinner in fullscreen mode, relative to the body.
+     *
+     * @default false
+     */
+    isFullScreen?: boolean;
+    /**
+     * Renders the spinner without centered wrapper.
+     *
+     * @default false
+     */
+    isInline?: boolean;
+    /**
+     * Flag to control the visibility of the spinner.
+     *
+     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.
+     *
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * The text shown next to the spinner icon.
+     */
+    text?: string | React.ReactNode;
+}
+declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/lib/es/src/components/spinner/Spinner.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Fade_1 = tslib_1.__importDefault(require("../fade/Fade"));
+const BaseSpinner = (props) => {
+    const { isInverse, isDoubleSized, ...remainingProps } = props;
+    const className = (0, classnames_1.default)('spinner', { inverse: isInverse, double: isDoubleSized });
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: className, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+};
+const Spinner = (props) => {
+    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text, ...remainingProps } = props;
+    const baseSpinner = (0, jsx_runtime_1.jsx)(BaseSpinner, { isDoubleSized: isDoubleSized, isInverse: isInverse, ...remainingProps });
+    if (isInline) {
+        return baseSpinner;
+    }
+    const classes = (0, classnames_1.default)(['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'], { fullsized: isFullSized, fullscreen: isFullScreen });
+    const wrappedSpinner = ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [baseSpinner, text && (0, jsx_runtime_1.jsx)("div", { className: 'spinnerText', children: text })] }));
+    if (isFullScreen || isFullSized) {
+        return ((0, jsx_runtime_1.jsx)(Fade_1.default, { show: show, duration: 0.1, children: wrappedSpinner }));
+    }
+    return wrappedSpinner;
+};
+exports.default = Spinner;

package/lib/es/src/components/states/BaseStateProps.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { TextAlignment } from '../../values/TextAlignment';
+import type { StateButtonProps } from './StateButton';
+import type { StateIconProps } from './StateIcon';
+export type BaseStateProps = {
+    /**
+     * The icon to be shown.
+     *
+     * Default icons are defined for all states.
+     */
+    icon?: string;
+    /**
+     * List of icons to show instead a single icon.
+     *
+     * @default []
+     */
+    icons?: StateIconProps[];
+    /**
+     * Custom Image if needed.
+     */
+    image?: React.ReactNode;
+    /**
+     * The headline to be shown.
+     */
+    headline?: string | React.ReactNode;
+    /**
+     * The text to display.
+     */
+    message?: string | React.ReactNode;
+    /**
+     * Definitions for the buttons to show.
+     *
+     * @default []
+     */
+    buttons?: StateButtonProps[];
+    /**
+     * Defines whether to use 100% width or default width.
+     *
+     * Note: Only to be used for special cases on the CustomState component.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Smaller icon and headline size.
+     *
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Defines where the panel is aligned.
+     *
+     * Possible values are: 'left', 'center' and 'right'.
+     *
+     * @default 'center'
+     */
+    alignment?: TextAlignment;
+    /**
+     * Optional class names for the wrapper.
+     */
+    outerClassName?: string;
+    /**
+     * Optional class names for the content.
+     */
+    innerClassName?: string;
+};

package/lib/es/src/components/states/BaseStateProps.js

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

package/lib/es/src/components/states/CustomState.d.ts

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

package/lib/es/src/components/states/CustomState.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const StateButton_1 = tslib_1.__importDefault(require("./StateButton"));
+const StateIcon_1 = tslib_1.__importDefault(require("./StateIcon"));
+const hasUtilityClass_1 = require("../../utils/hasUtilityClass");
+const justify = {
+    left: 'justify-content-start',
+    center: 'justify-content-center',
+    right: 'justify-content-end',
+};
+const renderButtons = (buttons) => {
+    if ((0, isEmpty_1.default)(buttons)) {
+        return;
+    }
+    if (buttons.length === 1) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar margin-top-20', children: (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[0] }) }));
+    }
+    if (buttons.length === 2) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttonProps }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: [(0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[0] }, '1'), (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[1] }, '2')] }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar', children: buttons.map((buttonProps, index) => {
+                    return index > 1 && (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttonProps }, index);
+                }) })] }));
+};
+const CustomState = (props) => {
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !(0, hasUtilityClass_1.hasPaddingClass)(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '', outerClassName);
+    const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', !(0, hasUtilityClass_1.hasPaddingClass)(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '', innerClassName);
+    const iconClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
+    const iconsClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
+    const headlineClassNames = (0, classnames_1.default)(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');
+    const renderIcon = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon && ((0, jsx_runtime_1.jsx)("div", { className: iconClasses, children: (0, jsx_runtime_1.jsx)(StateIcon_1.default, { name: icon }) })) }));
+    const renderIcons = ((0, jsx_runtime_1.jsx)("div", { className: iconsClasses, children: icons.map((iconProps, index) => ((0, jsx_runtime_1.jsx)(StateIcon_1.default, { ...iconProps }, index))) }));
+    const renderChildren = (0, jsx_runtime_1.jsx)("div", { className: 'width-500 max-width-100pct margin-top-25', children: children });
+    const renderHeadline = (0, jsx_runtime_1.jsx)("div", { className: headlineClassNames, children: headline });
+    const renderMessage = ((0, jsx_runtime_1.jsx)("div", { className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance', children: message }));
+    const singleOrMultiIcon = (0, isEmpty_1.default)(icons) ? renderIcon : renderIcons;
+    const imageOrIcon = image ? image : singleOrMultiIcon;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `display-flex ${justify[alignment]} max-width-100pct`, ...remainingProps, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: innerClassNames, children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] }) }) }));
+};
+exports.default = CustomState;

package/lib/es/src/components/states/EmptyState.d.ts

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

package/lib/es/src/components/states/EmptyState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const EmptyState = (props) => {
+    const { icon = 'rioglyph-empty', ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, { icon: icon, ...remainingProps });
+};
+exports.default = EmptyState;

package/lib/es/src/components/states/ErrorState.d.ts

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

package/lib/es/src/components/states/ErrorState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const ErrorState = (props) => {
+    const { icon = 'rioglyph-truck-breakdown', ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, { icon: icon, ...remainingProps });
+};
+exports.default = ErrorState;

package/lib/es/src/components/states/ForbiddenState.d.ts

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

package/lib/es/src/components/states/ForbiddenState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const ForbiddenState = (props) => {
+    const { icon = 'rioglyph-ban-circle', ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, { icon: icon, ...remainingProps });
+};
+exports.default = ForbiddenState;

package/lib/es/src/components/states/MaintenanceState.d.ts

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

package/lib/es/src/components/states/MaintenanceState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const MaintenanceState = (props) => {
+    const { icon = 'rioglyph-wrench', ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, { icon: icon, ...remainingProps });
+};
+exports.default = MaintenanceState;

package/lib/es/src/components/states/NotBookedState.d.ts

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotBookedStateProps = BaseStateProps & {
+    /**
+     * List of features.
+     */
+    features?: string | React.ReactNode[];
+};
+declare const NotBookedState: (props: PropsWithChildren<NotBookedStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default NotBookedState;

package/lib/es/src/components/states/NotBookedState.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const NotBookedState = (props) => {
+    const { message, features, icon = 'rioglyph-stars', ...remainingProps } = props;
+    const combinedMessages = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [message && (0, jsx_runtime_1.jsx)("div", { className: 'text-medium margin-bottom-20', children: message }), features && (0, isArray_1.default)(features) && !(0, isEmpty_1.default)(features) && ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("li", { className: 'padding-x-15 bg-lightest rounded rounded-large border-none display-flex align-items-center gap-2 text-left', children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok text-color-primary' }), (0, jsx_runtime_1.jsx)("span", { className: 'text-color-darker', children: feature })] }, index))) }))] }));
+    return ((0, jsx_runtime_1.jsx)(CustomState_1.default, { message: combinedMessages, icons: [{ name: icon, color: 'text-color-primary' }], ...remainingProps }));
+};
+exports.default = NotBookedState;

package/lib/es/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/lib/es/src/components/states/NotFoundState.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const NotFoundState = (props) => {
+    const { icon = 'rioglyph-looking-glass-man', ...remainingProps } = props;
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, { icon: icon, ...remainingProps });
+};
+exports.default = NotFoundState;

package/lib/es/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/lib/es/src/components/states/StateButton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("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 ((0, jsx_runtime_1.jsx)("a", { className: (0, classnames_1.default)('margin-top-15', className), href: href, onClick: onClick, children: text }));
+    }
+    const buttonClassNames = (0, classnames_1.default)('btn', 'margin-top-10', `btn-${bsStyle}`, className);
+    return ((0, jsx_runtime_1.jsx)("button", { className: buttonClassNames, type: 'button', onClick: onClick, children: text }));
+};
+exports.default = StateButton;

package/lib/es/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/lib/es/src/components/states/StateIcon.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }) => ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${name} ${color} ${className}` }));
+exports.default = StateIcon;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidget.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");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgetHeader_1 = tslib_1.__importDefault(require("./StatsWidgetHeader"));
+const StatsWidgetBody_1 = tslib_1.__importDefault(require("./StatsWidgetBody"));
+const StatsWidgetFooter_1 = tslib_1.__importDefault(require("./StatsWidgetFooter"));
+const StatsWidget = (props) => {
+    const { children, hasFilter = false, onFilterReset = () => { }, className, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, children: [hasFilter && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert text-color-white text-size-12' }) })), children] }));
+};
+StatsWidget.Header = StatsWidgetHeader_1.default;
+StatsWidget.Body = StatsWidgetBody_1.default;
+StatsWidget.Footer = StatsWidgetFooter_1.default;
+exports.default = StatsWidget;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgetBody.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgetBody = (props) => {
+    const { children, fullWidth = false, className, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget-body', fullWidth && 'full-width', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, children: [fullWidth && (0, jsx_runtime_1.jsx)("div", { className: 'StatsWidget-body-column-spacer invisible' }), children, fullWidth && (0, jsx_runtime_1.jsx)("div", { className: 'StatsWidget-body-column-spacer invisible' })] }));
+};
+exports.default = StatsWidgetBody;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgetFooter.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgetFooter = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget-footer', className);
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapperClasses, children: children }));
+};
+exports.default = StatsWidgetFooter;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgetHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgetHeader = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapeprClasses = (0, classnames_1.default)('StatsWidget-header', className);
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapeprClasses, children: children }));
+};
+exports.default = StatsWidgetHeader;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgetNumber.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgetNumber = (props) => {
+    const { value = 0, total, label, className, clickable = false, onClick = () => { }, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, onClick: onClick, className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'StatsWidgetNumber-counter', children: [(0, jsx_runtime_1.jsx)("div", { className: 'StatsWidgetNumber-value', children: value }), (total || total === 0) && (0, jsx_runtime_1.jsx)("div", { className: 'StatsWidgetNumber-total', children: total })] }), label && (0, jsx_runtime_1.jsx)("div", { className: 'StatsWidgetNumber-label', children: label })] }));
+};
+exports.default = StatsWidgetNumber;

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgetSpacer.js

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

package/lib/es/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/lib/es/src/components/statsWidget/StatsWidgets.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StatsWidgets = (props) => {
+    const { children, className, ...remainingProps } = props;
+    const wrapperClasses = (0, classnames_1.default)('StatsWidget-wrapper', className);
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapperClasses, children: children }));
+};
+exports.default = StatsWidgets;