@rio-cloud/rio-uikit 1.2.2 → 1.3.0

package/lib/es/components/popover/Popover.js

@@ -1,20 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLACEMENT_MAP = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
+const react_1 = tslib_1.__importStar(require("react"));
+require("framer-motion");
 const Placement_1 = require("../../values/Placement");
-const PLACEMENT_MAP = {
+exports.PLACEMENT_MAP = {
     AUTO: Placement_1.PLACEMENT.AUTO,
     TOP: Placement_1.PLACEMENT.TOP,
     RIGHT: Placement_1.PLACEMENT.RIGHT,
     BOTTOM: Placement_1.PLACEMENT.BOTTOM,
     LEFT: Placement_1.PLACEMENT.LEFT,
 };
+const PopoverTitle = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
+const PopoverContent = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const isPopoverTitleOrContent = (element) => {
+    return (0, react_1.isValidElement)(element) && (element.type === PopoverTitle || element.type === PopoverContent);
+};
 const Popover = (0, react_1.forwardRef)((props, ref) => {
-    const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["title", "titleClassName", "contentClassName", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref }, remainingProps, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && ((0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = tslib_1.__rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const hasTitle = !!title;
+    const hasCustomContent = react_1.default.Children.toArray(children).some(isPopoverTitleOrContent);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && (0, jsx_runtime_1.jsx)(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : (0, jsx_runtime_1.jsx)(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
 });
-Object.assign(Popover, PLACEMENT_MAP);
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
+Object.assign(Popover, exports.PLACEMENT_MAP);
 exports.default = Popover;

package/lib/es/components/slider/RangeSlider.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type RangeSliderProps = {
     /**
      * The current left value of the selected range.
@@ -36,6 +37,12 @@ export type RangeSliderProps = {
      * @default 1
      */
     step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * Disables all pointer events.
      *

package/lib/es/components/slider/RangeSlider.js

@@ -5,13 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const getRangeValues = (valueLeft, valueRight) => {
     const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
     const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
     return [finalLeftValue, finalRightValue];
 };
 const RangeSlider = (props) => {
-    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "color", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
     const [activeLeft, setActiveLeft] = (0, react_1.useState)(false);
     const [activeRight, setActiveRight] = (0, react_1.useState)(false);
     const [valueLeft, setValueLeft] = (0, react_1.useState)(leftValue ? leftValue : minValue);
@@ -34,8 +35,12 @@ const RangeSlider = (props) => {
         const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);
         onChange(newLeftValue, newRightValue);
     };
-    const handleChangeValueLeft = (event) => changeValues({ valueLeft: parseInt(event.target.value, 10) });
-    const handleChangeValueRight = (event) => changeValues({ valueRight: parseInt(event.target.value, 10) });
+    const handleChangeValueLeft = (event) => {
+        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });
+    };
+    const handleChangeValueRight = (event) => {
+        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });
+    };
     const onMouseDownLeft = () => {
         setIsChangingLeft(true);
         setIsChangingRight(false);
@@ -100,6 +105,7 @@ const RangeSlider = (props) => {
     const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);
     const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }))] }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
+    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) }))] }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
 };
 exports.default = RangeSlider;

package/lib/es/components/slider/Slider.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type SliderProps = {
     /**
      * The current value.
@@ -46,6 +47,12 @@ export type SliderProps = {
      * @default 1
      */
     step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * Disables all pointer events.
      *

package/lib/es/components/slider/Slider.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const Slider = (props) => {
-    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false } = props, remainingProps = tslib_1.__rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"]);
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false } = props, remainingProps = tslib_1.__rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "color", "step", "onChange", "onDragEnd", "className", "disabled"]);
     const [currentValue, setCurrentValue] = (0, react_1.useState)(value ? value : minValue);
     const [isChanging, setIsChanging] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -15,7 +16,7 @@ const Slider = (props) => {
         }
     }, [value, minValue, maxValue]);
     const handleChange = (event) => {
-        const newValue = parseInt(event.target.value, 10);
+        const newValue = Number.parseInt(event.target.value, 10);
         setCurrentValue(newValue);
         setIsChanging(true);
         onChange(newValue);
@@ -29,6 +30,7 @@ const Slider = (props) => {
     };
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
     const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("div", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
+    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
 };
 exports.default = Slider;

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

@@ -8,6 +8,7 @@ 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',
@@ -28,11 +29,9 @@ const renderButtons = (buttons) => {
                 }) }))] }));
 };
 const CustomState = (props) => {
-    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
-    const hasCustomInnerPadding = innerClassName === null || innerClassName === void 0 ? void 0 : innerClassName.includes('padding');
-    const hasCustomOuterPadding = outerClassName === null || outerClassName === void 0 ? void 0 : outerClassName.includes('padding');
-    const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasCustomOuterPadding && condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
-    const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasCustomInnerPadding && condensed ? 'padding-15' : 'padding-25', innerClassName && innerClassName);
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    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');

package/lib/es/components/switch/Switch.d.ts

@@ -1,4 +1,5 @@
 import { type PropsWithChildren } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
      * Optional key that is used as key and as the id on the internal input.
@@ -14,6 +15,12 @@ export type SwitchProps = {
      * @default false
      */
     checked?: boolean;
+    /**
+     * Defines the color of the switch.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * The min-width of the switch.
      */

package/lib/es/components/switch/Switch.js

@@ -6,8 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "children", "labelPosition", "onChange"]);
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -17,8 +18,8 @@ const Switch = (props) => {
     const switchContentClasses = (0, classnames_1.default)('switch-content'
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
-    const switchContentStyles = { minWidth };
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: switchContentStyles }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
+    const switchBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
 };
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';

package/lib/es/components/tooltip/SimpleTooltip.d.ts

@@ -1,6 +1,6 @@
 import React, { type MutableRefObject, type PropsWithChildren } from 'react';
 import { type TooltipProps } from './Tooltip';
-import { type Trigger } from '../../values/Trigger';
+import { type TriggerType } from '../../values/Trigger';
 export type delayProp = {
     show: number;
     hide: number;
@@ -15,7 +15,7 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
      * Possible values are: `hover`, `click`, `focus`
      * @default 'hover'
      */
-    trigger?: Trigger;
+    trigger?: TriggerType;
     /**
      * The react ref object assigned to the target of the tooltip.
      */

package/lib/es/components/tooltip/Tooltip.d.ts

@@ -47,9 +47,9 @@ export type TooltipProps = {
      */
     allowOnTouch?: boolean;
     /**
-     * Additional props assigned to the arrow element.
+     * Additional props assigned to the arrow element. Internally used.
      */
-    arrowProps?: {};
+    arrowProps?: Record<string, unknown>;
     /**
      * Additional style properties assigned to the wrapper element.
      */

package/lib/es/components/tooltip/Tooltip.js

@@ -19,13 +19,17 @@ const TEXT_ALIGNMENT_MAP = {
 };
 const Tooltip = (0, react_1.forwardRef)((props, ref) => {
     const _a = (0, omit_1.default)(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = tslib_1.__rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "innerClassName", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
     if (!(0, deviceUtils_1.isDesktop)() && !allowOnTouch) {
         // Workaround: we have to return a DOM node as otherwise the
         // react-transition library would throw an error on mobile
         // when triggering a browser reflow and accessing the node directly.
         return (0, jsx_runtime_1.jsx)("span", { className: 'display-none' });
     }
-    const wrapperClasses = (0, classnames_1.default)('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const wrapperClasses = (0, classnames_1.default)('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, 'fade', isMounted && 'show', className);
     const innerClasses = (0, classnames_1.default)('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`, innerClassName && innerClassName);
     /* eslint-disable react/no-unknown-property */
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: innerClasses }, { children: children }))] })));

package/lib/es/hooks/useClickOutside.d.ts

@@ -9,4 +9,5 @@ export type EventListenerType = keyof DocumentEventMap;
  * @returns A mutable ref object representing the target element.
  */
 declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
+export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => void;
 export default useClickOutside;

package/lib/es/hooks/useClickOutside.js

@@ -3,6 +3,7 @@
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickOutsideWithRef = void 0;
 const react_1 = require("react");
 /**
  * Custom hook to detect clicks outside a specified element.
@@ -14,10 +15,17 @@ const react_1 = require("react");
  */
 const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
     const targetRef = (0, react_1.useRef)(null);
+    (0, exports.useClickOutsideWithRef)(targetRef, callback, events);
+    return targetRef;
+};
+// Internal use for now - extend it later to be used outside
+const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
     (0, react_1.useEffect)(() => {
+        // In case the ref is actually a state and will be set via the state setter function
+        const element = ref && 'current' in ref ? ref.current : ref;
         // Event listener function to check if the click is outside the target element
         const listener = (event) => {
-            if (targetRef.current && !targetRef.current.contains(event.target)) {
+            if (element && !element.contains(event.target)) {
                 callback(event);
             }
         };
@@ -27,7 +35,7 @@ const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [targetRef, callback, events]);
-    return targetRef;
+    }, [ref, callback, events]);
 };
+exports.useClickOutsideWithRef = useClickOutsideWithRef;
 exports.default = useClickOutside;

package/lib/es/hooks/useElapsedTime.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+declare const useElapsedTime: (startTime?: number) => (() => number);
+export default useElapsedTime;

package/lib/es/hooks/useElapsedTime.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+const useElapsedTime = (startTime = Date.now()) => {
+    const startTimeRef = (0, react_1.useRef)(startTime);
+    const getElapsedTime = () => {
+        return Date.now() - startTimeRef.current;
+    };
+    (0, react_1.useEffect)(() => {
+        startTimeRef.current = startTime;
+    }, [startTime]);
+    return getElapsedTime;
+};
+exports.default = useElapsedTime;

package/lib/es/hooks/useEvent.d.ts

@@ -14,5 +14,5 @@ type WindowEventMapWithFullscreen = {
  * @param options - Optional. An object that specifies characteristics about the event listener.
  * @param target - Optional. The target element to which to attach the event listener.
  */
-declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Window | Document | T | null) => void;
+declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Document | Window | T | null) => void;
 export default useEvent;

package/lib/es/hooks/useTimeout.d.ts

@@ -8,4 +8,9 @@ import React from 'react';
  * @returns A mutable ref object to manage the timeout ID.
  */
 declare const useTimeout: (callback: () => void, delay: number | null) => React.MutableRefObject<number | null>;
+export declare const useChainedTimeout: () => {
+    set: (fn: () => void, delayMs?: number) => void;
+    clear: () => void;
+    handleRef: React.MutableRefObject<any>;
+};
 export default useTimeout;

package/lib/es/hooks/useTimeout.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainedTimeout = void 0;
 const react_1 = require("react");
 // See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 /**
@@ -33,4 +34,43 @@ const useTimeout = (callback, delay) => {
     }, [delay]);
     return timeoutRef;
 };
+const useChainedTimeout = () => {
+    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const setChainedTimeout = (ref, fn, timeoutAtMs) => {
+        const delayMs = timeoutAtMs - Date.now();
+        ref.current =
+            delayMs <= MAX_DELAY_MS
+                ? setTimeout(fn, delayMs)
+                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
+    };
+    const handleRef = (0, react_1.useRef)();
+    const { set, clear } = (0, react_1.useMemo)(() => {
+        const clear = () => clearTimeout(handleRef.current);
+        const set = (fn, delayMs = 0) => {
+            clear();
+            if (delayMs <= MAX_DELAY_MS) {
+                // For simplicity, if the timeout is short, just set a normal timeout.
+                handleRef.current = setTimeout(fn, delayMs);
+            }
+            else {
+                setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+            }
+        };
+        return {
+            set,
+            clear,
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clear();
+        };
+    }, [clear]);
+    return {
+        set,
+        clear,
+        handleRef,
+    };
+};
+exports.useChainedTimeout = useChainedTimeout;
 exports.default = useTimeout;

package/lib/es/hooks/useUncontrollable.d.ts

@@ -0,0 +1,13 @@
+export type Handler = (value: any, ...args: any[]) => any;
+export declare function defaultKey(key: string): string;
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue: TProp, handler?: THandler): readonly [TProp, THandler];
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue?: TProp | undefined, handler?: THandler): readonly [TProp | undefined, (...args: Parameters<THandler>) => ReturnType<THandler> | void];
+export { useUncontrolledProp };
+type FilterFlags<Base, Condition> = {
+    [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
+};
+type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+type ConfigMap<TProps extends object> = {
+    [p in keyof TProps]?: AllowedNames<TProps, Function>;
+};
+export declare function useUncontrolled<TProps extends object, TDefaults extends string = never>(props: TProps, config: ConfigMap<TProps>): Omit<TProps, TDefaults>;

package/lib/es/hooks/useUncontrollable.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUncontrolled = exports.useUncontrolledProp = exports.defaultKey = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
+const react_1 = require("react");
+function defaultKey(key) {
+    return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+exports.defaultKey = defaultKey;
+function useUncontrolledProp(propValue, defaultValue, handler) {
+    const wasPropRef = (0, react_1.useRef)(propValue !== undefined);
+    const [stateValue, setState] = (0, react_1.useState)(defaultValue);
+    const isProp = propValue !== undefined;
+    const wasProp = wasPropRef.current;
+    wasPropRef.current = isProp;
+    /**
+     * If a prop switches from controlled to Uncontrolled
+     * reset its value to the defaultValue
+     */
+    if (!isProp && wasProp && stateValue !== defaultValue) {
+        setState(defaultValue);
+    }
+    return [
+        isProp ? propValue : stateValue,
+        (0, react_1.useCallback)((...args) => {
+            const [value, ...rest] = args;
+            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            setState(value);
+            return returnValue;
+        }, [handler]),
+    ];
+}
+exports.useUncontrolledProp = useUncontrolledProp;
+function useUncontrolled(props, config) {
+    return Object.keys(config).reduce((result, fieldName) => {
+        const _a = result, _b = defaultKey(fieldName), defaultValue = _a[_b], _c = fieldName, propsValue = _a[_c], rest = tslib_1.__rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        // @ts-ignore-next-line
+        const handlerName = config[fieldName];
+        // @ts-ignore-next-line
+        const [value, handler] = useUncontrolledProp(propsValue, defaultValue, props[handlerName]);
+        return Object.assign(Object.assign({}, rest), { [fieldName]: value, [handlerName]: handler });
+    }, props);
+}
+exports.useUncontrolled = useUncontrolled;

package/lib/es/styles/variables/colors/colors.json

@@ -18,7 +18,7 @@
     "brand-info": "#4B80A6",
     "brand-success": "#5cb85c",
     "brand-warning": "#ff8e3c",
-    "brand-danger": "#d90000",
+    "brand-danger": "#e22837",
     "brand-info-decent": "#f5f8fb",
     "brand-success-decent": "#f6fbf5",
     "brand-warning-decent": "#fdf5f0",
@@ -37,8 +37,8 @@
     "color-map-marker-info": "#3f759b",
     "color-map-marker-success": "#5cb85c",
     "color-map-marker-warning": "#ff8e3c",
-    "color-map-marker-danger": "#d90000",
-    "color-rating-1": "#d90000",
+    "color-map-marker-danger": "#e22837",
+    "color-rating-1": "#e22837",
     "color-rating-2": "#ff8e3c",
     "color-rating-3": "#f8c575",
     "color-rating-4": "#5cb85c",

package/lib/es/useElapsedTime.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useElapsedTime';
+export * from './hooks/useElapsedTime';

package/lib/es/useElapsedTime.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var useElapsedTime_1 = require("./hooks/useElapsedTime");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useElapsedTime_1).default; } });
+tslib_1.__exportStar(require("./hooks/useElapsedTime"), exports);

package/lib/es/utils/currentColors.d.ts

@@ -0,0 +1,3 @@
+export declare const currentColorOptions: readonly ["primary", "secondary", "info", "success", "warning", "danger"];
+export type CurrentColor = (typeof currentColorOptions)[number];
+export declare const getCurrentBackgroundColor: (color: CurrentColor) => string;

package/lib/es/utils/currentColors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentBackgroundColor = exports.currentColorOptions = void 0;
+exports.currentColorOptions = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
+const currentColorMapping = {
+    primary: '--brand-primary',
+    secondary: '--brand-secondary',
+    info: '--brand-info',
+    success: '--brand-success',
+    warning: '--brand-warning',
+    danger: '--brand-danger',
+};
+const getCurrentBackgroundColor = (color) => `var(${currentColorMapping[`${color}`]})`;
+exports.getCurrentBackgroundColor = getCurrentBackgroundColor;

package/lib/es/utils/hasUtilityClass.d.ts

@@ -0,0 +1,30 @@
+declare const hasAlignContentClass: (classes: string) => boolean;
+declare const hasAlignItemsClass: (classes: string) => boolean;
+declare const hasAlignSelfClass: (classes: string) => boolean;
+declare const hasBgClass: (classes: string) => boolean;
+declare const hasBorderClass: (classes: string) => boolean;
+declare const hasBorderStyleClass: (classes: string) => boolean;
+declare const hasBorderWidthClass: (classes: string) => boolean;
+declare const hasCursorClass: (classes: string) => boolean;
+declare const hasDisplayClass: (classes: string) => boolean;
+declare const hasFlexClass: (classes: string) => boolean;
+declare const hasGapClass: (classes: string) => boolean;
+declare const hasHeightClass: (classes: string) => boolean;
+declare const hasHoverBgClass: (classes: string) => boolean;
+declare const hasHoverOpacityClass: (classes: string) => boolean;
+declare const hasHoverScaleClass: (classes: string) => boolean;
+declare const hasHoverTextColorClass: (classes: string) => boolean;
+declare const hasMarginClass: (classes: string) => boolean;
+declare const hasMaxHeightClass: (classes: string) => boolean;
+declare const hasMinHeightClass: (classes: string) => boolean;
+declare const hasOpacityClass: (classes: string) => boolean;
+declare const hasOverflowClass: (classes: string) => boolean;
+declare const hasPaddingClass: (classes: string) => boolean;
+declare const hasRioglyphClass: (classes: string) => boolean;
+declare const hasRoundedClass: (classes: string) => boolean;
+declare const hasScaleClass: (classes: string) => boolean;
+declare const hasSpaceClass: (classes: string) => boolean;
+declare const hasTextColorClass: (classes: string) => boolean;
+declare const hasTextSizeClass: (classes: string) => boolean;
+declare const hasUserSelectClass: (classes: string) => boolean;
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };