@rio-cloud/rio-uikit 2.0.0 → 2.1.0

package/components/slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"names":["getRangeValues","valueLeft","valueRight","finalLeftValue","finalRightValue","RangeSlider","props","minValue","maxValue","valueLabels","valueLabelUnit","step","color","leftValue","rightValue","className","disabled","onChange","noop","onDragEnd","remainingProps","activeLeft","setActiveLeft","useState","activeRight","setActiveRight","setValueLeft","setValueRight","isChangingLeft","setIsChangingLeft","isChangingRight","setIsChangingRight","useEffect","changeValues","newValues","newValueLeft","newValueRight","newLeftValue","newRightValue","handleChangeValueLeft","event","handleChangeValueRight","onMouseDownLeft","onMouseDownRight","getTrackMiddlePosition","targetWidth","trackValueLeftRelative","trackValueRightRelative","onMouseMoveLeft","target","clientRect","mouseHover","trackMiddlePosition","onMouseMoveRight","onMouseUpLeft","onMouseUpRight","trackWidth","trackLeft","wrapperClassNames","classNames","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"names":["getRangeValues","valueLeft","valueRight","finalLeftValue","finalRightValue","RangeSlider","props","minValue","maxValue","valueLabels","valueLabelUnit","step","color","leftValue","rightValue","className","disabled","onChange","noop","onDragEnd","remainingProps","activeLeft","setActiveLeft","useState","activeRight","setActiveRight","setValueLeft","setValueRight","isChangingLeft","setIsChangingLeft","isChangingRight","setIsChangingRight","useEffect","changeValues","newValues","newValueLeft","newValueRight","newLeftValue","newRightValue","handleChangeValueLeft","event","handleChangeValueRight","onMouseDownLeft","onMouseDownRight","getTrackMiddlePosition","targetWidth","trackValueLeftRelative","trackValueRightRelative","onMouseMoveLeft","target","clientRect","mouseHover","trackMiddlePosition","onMouseMoveRight","onMouseUpLeft","onMouseUpRight","trackWidth","trackLeft","wrapperClassNames","classNames","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":"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"}

package/components/slider/Slider.d.ts

@@ -50,6 +50,15 @@ export type SliderProps = {
     /**
      * Defines the color of the slider.
      *
+     * Possible values are:
+     *
+     * - `'primary'`
+     * - `'secondary'`
+     * - `'info'`
+     * - `'warning'`
+     * - `'danger'`
+     * - `'success'`
+     *
      * @default 'primary'
      */
     color?: CurrentColor;

package/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"names":["Slider","props","value","minValue","maxValue","valueLabels","valueLabelUnit","largeValueLabels","hideValueBar","color","step","onChange","noop","onDragEnd","className","disabled","remainingProps","currentValue","setCurrentValue","useState","isChanging","setIsChanging","useEffect","handleChange","event","newValue","onMouseUp","onMouseDown","wrapperClassNames","classNames","trackWidth","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AA2FA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,WAAAE;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAcC,CAAe,IAAIC,EAASjB,KAAgBC,CAAQ,GACnE,CAACiB,GAAYC,CAAa,IAAIF,EAAS,EAAK;AAElD,EAAAG,EAAU,MAAM;AACZ,IAAIpB,KAASC,KAAYD,KAASE,KAC9Bc,EAAgBhB,CAAK;AAAA,EAE7B,GAAG,CAACA,GAAOC,GAAUC,CAAQ,CAAC;AAE9B,QAAMmB,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAW,OAAO,SAASD,EAAM,OAAO,OAAO,EAAE;AACvD,IAAAN,EAAgBO,CAAQ,GACxBJ,EAAc,EAAI,GAClBV,EAASc,CAAQ;AAAA,EACrB,GAEMC,IAAY,MAAM;AACpB,IAAAL,EAAc,EAAK,GACnBR,EAAUI,CAAY;AAAA,EAC1B,GAEMU,IAAc,MAAM;AACtB,IAAAN,EAAc,EAAI;AAAA,EACtB,GAEMO,IAAoBC;AAAA,IACtB;AAAA,IACAd,KAAY;AAAA,IACZV,KAAe;AAAA,IACfG,KAAgB;AAAA,IAChBD,KAAoB;AAAA,IACpBO,KAAaA;AAAA,EAAA,GAGXgB,IAAc,OAAOb,IAAed,MAAcC,IAAWD,IAE7D4B,IAAwBC,EAA0BvB,CAAK;AAE7D,SACI,gBAAAwB,EAAC,OAAA,EAAK,GAAGjB,GAAgB,WAAWY,GAAmB,OAAO,EAAE,OAAOG,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IACnC,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGJ,CAAU,IAAA,GACrD,UAAAzB,KACG,gBAAA6B,EAAC,SAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA5B,IAAiB,GAAGW,CAAY,IAAIX,CAAc,KAAKW,EAAA,CAAa,EAAA,CAC/E,GAER;AAAA,IACA,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGd,IAAa,aAAa,EAAE;AAAA,QAC1C,OAAOH;AAAA,QACP,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,MAAAM;AAAA,QACA,MAAK;AAAA,QACL,UAAUa;AAAA,QACV,aAAAI;AAAA,QACA,WAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"names":["Slider","props","value","minValue","maxValue","valueLabels","valueLabelUnit","largeValueLabels","hideValueBar","color","step","onChange","noop","onDragEnd","className","disabled","remainingProps","currentValue","setCurrentValue","useState","isChanging","setIsChanging","useEffect","handleChange","event","newValue","onMouseUp","onMouseDown","wrapperClassNames","classNames","trackWidth","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AAoGA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,WAAAE;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAcC,CAAe,IAAIC,EAASjB,KAAgBC,CAAQ,GACnE,CAACiB,GAAYC,CAAa,IAAIF,EAAS,EAAK;AAElD,EAAAG,EAAU,MAAM;AACZ,IAAIpB,KAASC,KAAYD,KAASE,KAC9Bc,EAAgBhB,CAAK;AAAA,EAE7B,GAAG,CAACA,GAAOC,GAAUC,CAAQ,CAAC;AAE9B,QAAMmB,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAW,OAAO,SAASD,EAAM,OAAO,OAAO,EAAE;AACvD,IAAAN,EAAgBO,CAAQ,GACxBJ,EAAc,EAAI,GAClBV,EAASc,CAAQ;AAAA,EACrB,GAEMC,IAAY,MAAM;AACpB,IAAAL,EAAc,EAAK,GACnBR,EAAUI,CAAY;AAAA,EAC1B,GAEMU,IAAc,MAAM;AACtB,IAAAN,EAAc,EAAI;AAAA,EACtB,GAEMO,IAAoBC;AAAA,IACtB;AAAA,IACAd,KAAY;AAAA,IACZV,KAAe;AAAA,IACfG,KAAgB;AAAA,IAChBD,KAAoB;AAAA,IACpBO,KAAaA;AAAA,EAAA,GAGXgB,IAAc,OAAOb,IAAed,MAAcC,IAAWD,IAE7D4B,IAAwBC,EAA0BvB,CAAK;AAE7D,SACI,gBAAAwB,EAAC,OAAA,EAAK,GAAGjB,GAAgB,WAAWY,GAAmB,OAAO,EAAE,OAAOG,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IACnC,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGJ,CAAU,IAAA,GACrD,UAAAzB,KACG,gBAAA6B,EAAC,SAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA5B,IAAiB,GAAGW,CAAY,IAAIX,CAAc,KAAKW,EAAA,CAAa,EAAA,CAC/E,GAER;AAAA,IACA,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGd,IAAa,aAAa,EAAE;AAAA,QAC1C,OAAOH;AAAA,QACP,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,MAAAM;AAAA,QACA,MAAK;AAAA,QACL,UAAUa;AAAA,QACV,aAAAI;AAAA,QACA,WAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -1,14 +1,58 @@
 import { default as React } from 'react';
 export type SmoothScrollbarsProps = {
+    /**
+     * Defines whether the scrollbars should slide in on hover.
+     *
+     * @default false
+     */
     slideIn?: boolean;
+    /**
+     * Defines whether the scrollbars should be slightly larger.
+     *
+     * @default false
+     */
     largeTrack?: boolean;
+    /**
+     * Defines whether the scrollbars should have an offset.
+     *
+     * @default false
+     */
     trackOffset?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
     className?: string;
+    /**
+     * Tag name used for the scroll container.
+     *
+     * @default 'div'
+     */
     tagName?: string;
+    /**
+     * Enable auto-height behavior.
+     *
+     * @default false
+     */
     autoHeight?: boolean;
+    /**
+     * Minimum height when auto-height is enabled.
+     *
+     * @default 0
+     */
     autoHeightMin?: number;
+    /**
+     * Maximum height when auto-height is enabled.
+     *
+     * @default 200
+     */
     autoHeightMax?: number;
+    /**
+     * Scroll callback, forwarded to the underlying scrollbars instance.
+     */
     onScroll?: (event: React.UIEvent<any> | undefined) => void;
+    /**
+     * Inline styles for the scroll container.
+     */
     style?: React.CSSProperties;
 };
 declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {

package/components/smoothScrollbars/SmoothScrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport classNames from 'classnames';\nimport { debounce, noop } from 'es-toolkit/function';\n\nexport type SmoothScrollbarsProps = {\n    slideIn?: boolean;\n    largeTrack?: boolean;\n    trackOffset?: boolean;\n    className?: string;\n    tagName?: string;\n    autoHeight?: boolean;\n    autoHeightMin?: number;\n    autoHeightMax?: number;\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => {\n                    return <div {...props} className='scrollbar-view' />;\n                }}\n                renderTrackVertical={props => {\n                    return <div {...props} className={renderTrackVerticalNames} />;\n                }}\n                renderThumbVertical={props => {\n                    return <div {...props} className={renderThumbVerticalNames} />;\n                }}\n                renderTrackHorizontal={props => {\n                    return <div {...props} className={renderTrackHorizontalNames} />;\n                }}\n                renderThumbHorizontal={props => {\n                    return <div {...props} className={renderThumbHorizontalNames} />;\n                }}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AA6BA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,OAAqB,GAElEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MACD,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAEtD,qBAAqB,CAAAA,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QAEhE,qBAAqB,CAAAM,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QAEhE,uBAAuB,CAAAK,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QAElE,uBAAuB,CAAAI,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAGlE,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}
+{"version":3,"file":"SmoothScrollbars.js","sources":["../../../src/components/smoothScrollbars/SmoothScrollbars.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    type ForwardedRef,\n    type PropsWithChildren,\n} from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-4';\nimport classNames from 'classnames';\nimport { debounce, noop } from 'es-toolkit/function';\n\nexport type SmoothScrollbarsProps = {\n    /**\n     * Defines whether the scrollbars should slide in on hover.\n     *\n     * @default false\n     */\n    slideIn?: boolean;\n\n    /**\n     * Defines whether the scrollbars should be slightly larger.\n     *\n     * @default false\n     */\n    largeTrack?: boolean;\n\n    /**\n     * Defines whether the scrollbars should have an offset.\n     *\n     * @default false\n     */\n    trackOffset?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tag name used for the scroll container.\n     *\n     * @default 'div'\n     */\n    tagName?: string;\n\n    /**\n     * Enable auto-height behavior.\n     *\n     * @default false\n     */\n    autoHeight?: boolean;\n\n    /**\n     * Minimum height when auto-height is enabled.\n     *\n     * @default 0\n     */\n    autoHeightMin?: number;\n\n    /**\n     * Maximum height when auto-height is enabled.\n     *\n     * @default 200\n     */\n    autoHeightMax?: number;\n\n    /**\n     * Scroll callback, forwarded to the underlying scrollbars instance.\n     */\n    onScroll?: (event: React.UIEvent<any> | undefined) => void;\n\n    /**\n     * Inline styles for the scroll container.\n     */\n    style?: React.CSSProperties;\n};\n\ntype ScrollbarsWithUpdate = Scrollbars & {\n    update: () => void;\n};\n\nconst RESIZE_THROTTLING = 100;\n\nconst SmoothScrollbars = forwardRef(\n    (componentProps: PropsWithChildren<SmoothScrollbarsProps>, ref: ForwardedRef<any>) => {\n        const {\n            slideIn = false,\n            largeTrack = false,\n            trackOffset = false,\n            className = '',\n            onScroll = noop,\n            tagName = 'div',\n            autoHeight = false,\n            autoHeightMin = 0,\n            autoHeightMax = 200,\n            children,\n            style,\n            ...remainingProps\n        } = componentProps;\n\n        const scrollbarsRef = useRef<Scrollbars>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useImperativeHandle(ref, () => scrollbarsRef.current as Scrollbars);\n\n        useEffect(() => {\n            if (!contentRef.current || !scrollbarsRef.current) {\n                return;\n            }\n\n            const updateScrollbars = debounce(() => {\n                if (scrollbarsRef.current) {\n                    // Trigger a update for the scrollbars.\n                    // This is needed since the lib does not automatically update on content height changes\n                    // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12\n\n                    // Use type assertion to tell TypeScript that 'update' exists\n                    (scrollbarsRef.current as ScrollbarsWithUpdate).update();\n                }\n            }, RESIZE_THROTTLING);\n\n            const resizeObserver = new ResizeObserver(updateScrollbars);\n            resizeObserver.observe(contentRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n                updateScrollbars.cancel();\n            };\n        }, []);\n\n        const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');\n\n        const renderTrackVerticalNames = classNames(\n            'scrollbar-track-vertical',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbVerticalNames = classNames(\n            'scrollbar-thumb-vertical',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        const renderTrackHorizontalNames = classNames(\n            'scrollbar-track-horizontal',\n            largeTrack && 'scrollbar-track-size-large',\n            trackOffset && 'scrollbar-track-offset'\n        );\n\n        const renderThumbHorizontalNames = classNames(\n            'scrollbar-thumb-horizontal',\n            largeTrack && 'scrollbar-thumb-size-large'\n        );\n\n        return (\n            <Scrollbars\n                {...remainingProps}\n                ref={scrollbarsRef}\n                tagName={tagName}\n                onScroll={onScroll}\n                className={wrapperClassNames}\n                hideTracksWhenNotNeeded\n                autoHeight={autoHeight}\n                autoHeightMin={autoHeightMin}\n                autoHeightMax={autoHeightMax}\n                renderView={props => {\n                    return <div {...props} className='scrollbar-view' />;\n                }}\n                renderTrackVertical={props => {\n                    return <div {...props} className={renderTrackVerticalNames} />;\n                }}\n                renderThumbVertical={props => {\n                    return <div {...props} className={renderThumbVerticalNames} />;\n                }}\n                renderTrackHorizontal={props => {\n                    return <div {...props} className={renderTrackHorizontalNames} />;\n                }}\n                renderThumbHorizontal={props => {\n                    return <div {...props} className={renderThumbHorizontalNames} />;\n                }}\n            >\n                <div className='scrollbar-content-wrapper' ref={contentRef}>\n                    {children}\n                </div>\n            </Scrollbars>\n        );\n    }\n);\n\nexport default SmoothScrollbars;\n"],"names":["RESIZE_THROTTLING","SmoothScrollbars","forwardRef","componentProps","ref","slideIn","largeTrack","trackOffset","className","onScroll","noop","tagName","autoHeight","autoHeightMin","autoHeightMax","children","style","remainingProps","scrollbarsRef","useRef","contentRef","useImperativeHandle","useEffect","updateScrollbars","debounce","resizeObserver","wrapperClassNames","classNames","renderTrackVerticalNames","renderThumbVerticalNames","renderTrackHorizontalNames","renderThumbHorizontalNames","jsx","Scrollbars","props"],"mappings":";;;;;AAkFA,MAAMA,IAAoB,KAEpBC,IAAmBC;AAAA,EACrB,CAACC,GAA0DC,MAA2B;AAClF,UAAM;AAAA,MACF,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,aAAAC,IAAc;AAAA,MACd,WAAAC,IAAY;AAAA,MACZ,UAAAC,IAAWC;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,YAAAC,IAAa;AAAA,MACb,eAAAC,IAAgB;AAAA,MAChB,eAAAC,IAAgB;AAAA,MAChB,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACHd,GAEEe,IAAgBC,EAAmB,IAAI,GACvCC,IAAaD,EAAuB,IAAI;AAE9C,IAAAE,EAAoBjB,GAAK,MAAMc,EAAc,OAAqB,GAElEI,EAAU,MAAM;AACZ,UAAI,CAACF,EAAW,WAAW,CAACF,EAAc;AACtC;AAGJ,YAAMK,IAAmBC,EAAS,MAAM;AACpC,QAAIN,EAAc,WAMbA,EAAc,QAAiC,OAAA;AAAA,MAExD,GAAGlB,CAAiB,GAEdyB,IAAiB,IAAI,eAAeF,CAAgB;AAC1D,aAAAE,EAAe,QAAQL,EAAW,OAAO,GAElC,MAAM;AACT,QAAAK,EAAe,WAAA,GACfF,EAAiB,OAAA;AAAA,MACrB;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAMG,IAAoBC,EAAWnB,GAAWH,KAAW,oBAAoB,0BAA0B,GAEnGuB,IAA2BD;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbsB,IAA2BF;AAAA,MAC7B;AAAA,MACArB,KAAc;AAAA,IAAA,GAGZwB,IAA6BH;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,MACdC,KAAe;AAAA,IAAA,GAGbwB,IAA6BJ;AAAA,MAC/B;AAAA,MACArB,KAAc;AAAA,IAAA;AAGlB,WACI,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGhB;AAAA,QACJ,KAAKC;AAAA,QACL,SAAAP;AAAA,QACA,UAAAF;AAAA,QACA,WAAWiB;AAAA,QACX,yBAAuB;AAAA,QACvB,YAAAd;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,YAAY,CAAAoB,MACD,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAU,kBAAiB;AAAA,QAEtD,qBAAqB,CAAAA,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWN,GAA0B;AAAA,QAEhE,qBAAqB,CAAAM,MACV,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWL,GAA0B;AAAA,QAEhE,uBAAuB,CAAAK,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWJ,GAA4B;AAAA,QAElE,uBAAuB,CAAAI,MACZ,gBAAAF,EAAC,OAAA,EAAK,GAAGE,GAAO,WAAWH,GAA4B;AAAA,QAGlE,4BAAC,OAAA,EAAI,WAAU,6BAA4B,KAAKX,GAC3C,UAAAL,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}

package/components/spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export interface SpinnerProps {
+export type SpinnerProps = {
     /**
      * Defines whether the spinner is shown on bright or dark background.
      *
@@ -35,7 +35,7 @@ export interface SpinnerProps {
     /**
      * Flag to control the visibility of the spinner.
      *
-     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.
+     * Only relevant in combination with `isFullSized` or `isFullScreen`.
      *
      * @default false
      */
@@ -44,6 +44,6 @@ export interface SpinnerProps {
      * 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/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport Fade from '../fade/Fade';\n\ntype BaseSpinnerProps = {\n    isInverse?: boolean;\n    isDoubleSized?: boolean;\n};\n\nconst BaseSpinner = (props: BaseSpinnerProps) => {\n    const { isInverse, isDoubleSized, ...remainingProps } = props;\n    const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });\n    return (\n        <div {...remainingProps} className={className}>\n            <div />\n            <div />\n            <div />\n            <div />\n        </div>\n    );\n};\n\nexport interface SpinnerProps {\n    /**\n     * Defines whether the spinner is shown on bright or dark background.\n     *\n     * @default false\n     */\n    isInverse?: boolean;\n\n    /**\n     * If set to \"true\" the spinner will be rendered twice as big.\n     *\n     * @default false\n     */\n    isDoubleSized?: boolean;\n\n    /**\n     * Renders the spinner as overlay in full-size mode.\n     *\n     * This will be relative to the parent container. Set the parent element to \"position-relative\" in this case.\n     *\n     * @default false\n     */\n    isFullSized?: boolean;\n\n    /**\n     * Renders the spinner in fullscreen mode, relative to the body.\n     *\n     * @default false\n     */\n    isFullScreen?: boolean;\n\n    /**\n     * Renders the spinner without centered wrapper.\n     *\n     * @default false\n     */\n    isInline?: boolean;\n\n    /**\n     * Flag to control the visibility of the spinner.\n     *\n     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.\n     *\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The text shown next to the spinner icon.\n     */\n    text?: string | React.ReactNode;\n}\n\nconst Spinner = (props: SpinnerProps) => {\n    const {\n        isInverse = false,\n        isFullSized = false,\n        isFullScreen = false,\n        isDoubleSized = false,\n        isInline = false,\n        show = false,\n        text,\n        ...remainingProps\n    } = props;\n\n    const baseSpinner = <BaseSpinner isDoubleSized={isDoubleSized} isInverse={isInverse} {...remainingProps} />;\n\n    if (isInline) {\n        return baseSpinner;\n    }\n\n    const classes = classNames(\n        ['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'],\n        { fullsized: isFullSized, fullscreen: isFullScreen }\n    );\n\n    const wrappedSpinner = (\n        <div className={classes}>\n            {baseSpinner}\n            {text && <div className='spinnerText'>{text}</div>}\n        </div>\n    );\n\n    if (isFullScreen || isFullSized) {\n        return (\n            <Fade show={show} duration={0.1}>\n                {wrappedSpinner}\n            </Fade>\n        );\n    }\n\n    return wrappedSpinner;\n};\n\nexport default Spinner;\n"],"names":["BaseSpinner","props","isInverse","isDoubleSized","remainingProps","className","classNames","jsxs","jsx","Spinner","isFullSized","isFullScreen","isInline","show","text","baseSpinner","classes","wrappedSpinner","Fade"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,eAAAC,GAAe,GAAGC,MAAmBH,GAClDI,IAAYC,EAAW,WAAW,EAAE,SAASJ,GAAW,QAAQC,GAAe;AACrF,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,CAAA,CAAI;AAAA,EAAA,GACT;AAER,GAuDMC,IAAU,CAACR,MAAwB;AACrC,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAQ,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,eAAAR,IAAgB;AAAA,IAChB,UAAAS,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,IACHH,GAEEc,IAAc,gBAAAP,EAACR,GAAA,EAAY,eAAAG,GAA8B,WAAAD,GAAuB,GAAGE,GAAgB;AAEzG,MAAIQ;AACA,WAAOG;AAGX,QAAMC,IAAUV;AAAA,IACZ,CAAC,kBAAkB,gBAAgB,0BAA0B,sBAAsB,eAAe;AAAA,IAClG,EAAE,WAAWI,GAAa,YAAYC,EAAA;AAAA,EAAa,GAGjDM,IACF,gBAAAV,EAAC,OAAA,EAAI,WAAWS,GACX,UAAA;AAAA,IAAAD;AAAA,IACAD,KAAQ,gBAAAN,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAM,EAAA,CAAK;AAAA,EAAA,GAChD;AAGJ,SAAIH,KAAgBD,IAEZ,gBAAAF,EAACU,GAAA,EAAK,MAAAL,GAAY,UAAU,KACvB,UAAAI,GACL,IAIDA;AACX;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport Fade from '../fade/Fade';\n\ntype BaseSpinnerProps = {\n    isInverse?: boolean;\n    isDoubleSized?: boolean;\n};\n\nconst BaseSpinner = (props: BaseSpinnerProps) => {\n    const { isInverse, isDoubleSized, ...remainingProps } = props;\n    const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });\n    return (\n        <div {...remainingProps} className={className}>\n            <div />\n            <div />\n            <div />\n            <div />\n        </div>\n    );\n};\n\nexport type SpinnerProps = {\n    /**\n     * Defines whether the spinner is shown on bright or dark background.\n     *\n     * @default false\n     */\n    isInverse?: boolean;\n\n    /**\n     * If set to \"true\" the spinner will be rendered twice as big.\n     *\n     * @default false\n     */\n    isDoubleSized?: boolean;\n\n    /**\n     * Renders the spinner as overlay in full-size mode.\n     *\n     * This will be relative to the parent container. Set the parent element to \"position-relative\" in this case.\n     *\n     * @default false\n     */\n    isFullSized?: boolean;\n\n    /**\n     * Renders the spinner in fullscreen mode, relative to the body.\n     *\n     * @default false\n     */\n    isFullScreen?: boolean;\n\n    /**\n     * Renders the spinner without centered wrapper.\n     *\n     * @default false\n     */\n    isInline?: boolean;\n\n    /**\n     * Flag to control the visibility of the spinner.\n     *\n     * Only relevant in combination with `isFullSized` or `isFullScreen`.\n     *\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The text shown next to the spinner icon.\n     */\n    text?: string | React.ReactNode;\n};\n\nconst Spinner = (props: SpinnerProps) => {\n    const {\n        isInverse = false,\n        isFullSized = false,\n        isFullScreen = false,\n        isDoubleSized = false,\n        isInline = false,\n        show = false,\n        text,\n        ...remainingProps\n    } = props;\n\n    const baseSpinner = <BaseSpinner isDoubleSized={isDoubleSized} isInverse={isInverse} {...remainingProps} />;\n\n    if (isInline) {\n        return baseSpinner;\n    }\n\n    const classes = classNames(\n        ['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'],\n        { fullsized: isFullSized, fullscreen: isFullScreen }\n    );\n\n    const wrappedSpinner = (\n        <div className={classes}>\n            {baseSpinner}\n            {text && <div className='spinnerText'>{text}</div>}\n        </div>\n    );\n\n    if (isFullScreen || isFullSized) {\n        return (\n            <Fade show={show} duration={0.1}>\n                {wrappedSpinner}\n            </Fade>\n        );\n    }\n\n    return wrappedSpinner;\n};\n\nexport default Spinner;\n"],"names":["BaseSpinner","props","isInverse","isDoubleSized","remainingProps","className","classNames","jsxs","jsx","Spinner","isFullSized","isFullScreen","isInline","show","text","baseSpinner","classes","wrappedSpinner","Fade"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,eAAAC,GAAe,GAAGC,MAAmBH,GAClDI,IAAYC,EAAW,WAAW,EAAE,SAASJ,GAAW,QAAQC,GAAe;AACrF,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,CAAA,CAAI;AAAA,EAAA,GACT;AAER,GAuDMC,IAAU,CAACR,MAAwB;AACrC,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAQ,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,eAAAR,IAAgB;AAAA,IAChB,UAAAS,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,IACHH,GAEEc,IAAc,gBAAAP,EAACR,GAAA,EAAY,eAAAG,GAA8B,WAAAD,GAAuB,GAAGE,GAAgB;AAEzG,MAAIQ;AACA,WAAOG;AAGX,QAAMC,IAAUV;AAAA,IACZ,CAAC,kBAAkB,gBAAgB,0BAA0B,sBAAsB,eAAe;AAAA,IAClG,EAAE,WAAWI,GAAa,YAAYC,EAAA;AAAA,EAAa,GAGjDM,IACF,gBAAAV,EAAC,OAAA,EAAI,WAAWS,GACX,UAAA;AAAA,IAAAD;AAAA,IACAD,KAAQ,gBAAAN,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAM,EAAA,CAAK;AAAA,EAAA,GAChD;AAGJ,SAAIH,KAAgBD,IAEZ,gBAAAF,EAACU,GAAA,EAAK,MAAAL,GAAY,UAAU,KACvB,UAAAI,GACL,IAIDA;AACX;"}

package/components/states/BaseStateProps.d.ts

@@ -36,7 +36,7 @@ export type BaseStateProps = {
     /**
      * Defines whether to use 100% width or default width.
      *
-     * Note: Only to be used for special cases on the CustomState component.
+     * __Note:__ Only to be used for special cases on the CustomState component.
      *
      * @default false
      */
@@ -50,7 +50,11 @@ export type BaseStateProps = {
     /**
      * Defines where the panel is aligned.
      *
-     * Possible values are: 'left', 'center' and 'right'.
+     * Possible values are:
+     *
+     * - `'left'`
+     * - `'center'`
+     * - `'right'`
      *
      * @default 'center'
      */

package/components/states/StateIcon.d.ts

@@ -1,6 +1,19 @@
 export type StateIconProps = {
-    name?: string;
+    /**
+     * The name of the icon
+     */
+    name: string;
+    /**
+     * Optional class names for this icon.
+     *
+     * @default 'text-size-300pct'
+     */
     className?: string;
+    /**
+     * Optional color class name for the icon.
+     *
+     * @default 'text-color-light'
+     */
     color?: string;
 };
 declare const StateIcon: ({ name, color, className }: StateIconProps) => import("react/jsx-runtime").JSX.Element;

package/components/states/StateIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StateIcon.js","sources":["../../../src/components/states/StateIcon.tsx"],"sourcesContent":["export type StateIconProps = {\n    name?: string;\n    className?: string;\n    color?: string;\n};\n\nconst StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }: StateIconProps) => (\n    <span className={`rioglyph ${name} ${color} ${className}`} />\n);\n\nexport default StateIcon;\n"],"names":["StateIcon","name","color","className","jsx"],"mappings":";AAMA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,oBAAoB,WAAAC,IAAY,mBAAA,MAC/D,gBAAAC,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAI,IAAIC,CAAK,IAAIC,CAAS,GAAA,CAAI;"}
+{"version":3,"file":"StateIcon.js","sources":["../../../src/components/states/StateIcon.tsx"],"sourcesContent":["export type StateIconProps = {\n    /**\n     * The name of the icon\n     */\n    name: string;\n\n    /**\n     * Optional class names for this icon.\n     *\n     * @default 'text-size-300pct'\n     */\n    className?: string;\n\n    /**\n     * Optional color class name for the icon.\n     *\n     * @default 'text-color-light'\n     */\n    color?: string;\n};\n\nconst StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }: StateIconProps) => (\n    <span className={`rioglyph ${name} ${color} ${className}`} />\n);\n\nexport default StateIcon;\n"],"names":["StateIcon","name","color","className","jsx"],"mappings":";AAqBA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,oBAAoB,WAAAC,IAAY,mBAAA,MAC/D,gBAAAC,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAI,IAAIC,CAAK,IAAIC,CAAS,GAAA,CAAI;"}

package/components/statsWidget/StatsWidget.d.ts

@@ -9,6 +9,8 @@ export type StatsWidgetProps = ComponentProps<'div'> & {
     onFilterReset?: MouseEventHandler;
     /**
      * Defines whether a filter is active for this widget.
+     *
+     * @default false
      */
     hasFilter?: boolean;
     /**

package/components/statsWidget/StatsWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidget.js","sources":["../../../src/components/statsWidget/StatsWidget.tsx"],"sourcesContent":["import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport StatsWidgetHeader, { type StatsWidgetHeaderProps } from './StatsWidgetHeader';\nimport StatsWidgetBody, { type StatsWidgetBodyProps } from './StatsWidgetBody';\nimport StatsWidgetFooter, { type StatsWidgetFooterProps } from './StatsWidgetFooter';\n\nexport type StatsWidgetProps = ComponentProps<'div'> & {\n    /**\n     * Callback to reset the filter.\n     */\n    onFilterReset?: MouseEventHandler;\n\n    /**\n     * Defines whether a filter is active for this widget.\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\n// re-export these because they're not exposed on root directly\nexport type { StatsWidgetHeaderProps, StatsWidgetBodyProps, StatsWidgetFooterProps };\n\nconst StatsWidget = (props: PropsWithChildren<StatsWidgetProps>) => {\n    const { children, hasFilter = false, onFilterReset = () => {}, className, ...remainingProps } = props;\n    const wrapperClasses = classNames('StatsWidget', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {hasFilter && (\n                <span\n                    className={\n                        'bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2' +\n                        ' rounded-circle position-absolute top-15 right-15 display-block height-20 width-20' +\n                        ' cursor-pointer'\n                    }\n                    onClick={onFilterReset}\n                >\n                    <span className='rioglyph rioglyph-revert text-color-white text-size-12' />\n                </span>\n            )}\n            {children}\n        </div>\n    );\n};\n\nStatsWidget.Header = StatsWidgetHeader;\nStatsWidget.Body = StatsWidgetBody;\nStatsWidget.Footer = StatsWidgetFooter;\n\nexport default StatsWidget;\n"],"names":["StatsWidget","props","children","hasFilter","onFilterReset","className","remainingProps","wrapperClasses","classNames","jsxs","jsx","StatsWidgetHeader","StatsWidgetBody","StatsWidgetFooter"],"mappings":";;;;;AA2BA,MAAMA,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,eAAAC,IAAgB,MAAM;AAAA,EAAC,GAAG,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAC1FM,IAAiBC,EAAW,eAAeH,CAAS;AAE1D,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAJ,KACG,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAIJ,SAASN;AAAA,QAET,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhFR;AAAA,EAAA,GACL;AAER;AAEAF,EAAY,SAASW;AACrBX,EAAY,OAAOY;AACnBZ,EAAY,SAASa;"}
+{"version":3,"file":"StatsWidget.js","sources":["../../../src/components/statsWidget/StatsWidget.tsx"],"sourcesContent":["import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport StatsWidgetHeader, { type StatsWidgetHeaderProps } from './StatsWidgetHeader';\nimport StatsWidgetBody, { type StatsWidgetBodyProps } from './StatsWidgetBody';\nimport StatsWidgetFooter, { type StatsWidgetFooterProps } from './StatsWidgetFooter';\n\nexport type StatsWidgetProps = ComponentProps<'div'> & {\n    /**\n     * Callback to reset the filter.\n     */\n    onFilterReset?: MouseEventHandler;\n\n    /**\n     * Defines whether a filter is active for this widget.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\n// re-export these because they're not exposed on root directly\nexport type { StatsWidgetHeaderProps, StatsWidgetBodyProps, StatsWidgetFooterProps };\n\nconst StatsWidget = (props: PropsWithChildren<StatsWidgetProps>) => {\n    const { children, hasFilter = false, onFilterReset = () => {}, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {hasFilter && (\n                <span\n                    className={\n                        'bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2' +\n                        ' rounded-circle position-absolute top-15 right-15 display-block height-20 width-20' +\n                        ' cursor-pointer'\n                    }\n                    onClick={onFilterReset}\n                >\n                    <span className='rioglyph rioglyph-revert text-color-white text-size-12' />\n                </span>\n            )}\n            {children}\n        </div>\n    );\n};\n\nStatsWidget.Header = StatsWidgetHeader;\nStatsWidget.Body = StatsWidgetBody;\nStatsWidget.Footer = StatsWidgetFooter;\n\nexport default StatsWidget;\n"],"names":["StatsWidget","props","children","hasFilter","onFilterReset","className","remainingProps","wrapperClasses","classNames","jsxs","jsx","StatsWidgetHeader","StatsWidgetBody","StatsWidgetFooter"],"mappings":";;;;;AA6BA,MAAMA,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,eAAAC,IAAgB,MAAM;AAAA,EAAC,GAAG,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE1FM,IAAiBC,EAAW,eAAeH,CAAS;AAE1D,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAJ,KACG,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAIJ,SAASN;AAAA,QAET,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhFR;AAAA,EAAA,GACL;AAER;AAEAF,EAAY,SAASW;AACrBX,EAAY,OAAOY;AACnBZ,EAAY,SAASa;"}

package/components/statsWidget/StatsWidgetBody.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 export type StatsWidgetBodyProps = {
     /**
      * Whether to use flex space-between for StatsWidgetNumbers.
+     *
      * @default false
      */
     fullWidth?: boolean;

package/components/statsWidget/StatsWidgetBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetBody.js","sources":["../../../src/components/statsWidget/StatsWidgetBody.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetBodyProps = {\n    /**\n     * Whether to use flex space-between for StatsWidgetNumbers.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetBody = (props: PropsWithChildren<StatsWidgetBodyProps>) => {\n    const { children, fullWidth = false, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body', fullWidth && 'full-width', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n            {children}\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n        </div>\n    );\n};\n\nexport default StatsWidgetBody;\n"],"names":["StatsWidgetBody","props","children","fullWidth","className","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAgBA,MAAMA,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAAmBJ,GAEhEK,IAAiBC,EAAW,oBAAoBJ,KAAa,cAAcC,CAAS;AAE1F,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAH,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,IACvEP;AAAA,IACAC,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,EAAA,GAC5E;AAER;"}
+{"version":3,"file":"StatsWidgetBody.js","sources":["../../../src/components/statsWidget/StatsWidgetBody.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetBodyProps = {\n    /**\n     * Whether to use flex space-between for StatsWidgetNumbers.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetBody = (props: PropsWithChildren<StatsWidgetBodyProps>) => {\n    const { children, fullWidth = false, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body', fullWidth && 'full-width', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n            {children}\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n        </div>\n    );\n};\n\nexport default StatsWidgetBody;\n"],"names":["StatsWidgetBody","props","children","fullWidth","className","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAiBA,MAAMA,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAAmBJ,GAEhEK,IAAiBC,EAAW,oBAAoBJ,KAAa,cAAcC,CAAS;AAE1F,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAH,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,IACvEP;AAAA,IACAC,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,EAAA,GAC5E;AAER;"}

package/components/statsWidget/StatsWidgetNumber.d.ts

@@ -2,6 +2,7 @@ import { ReactNode, MouseEventHandler } from 'react';
 export type StatsWidgetNumberProps = {
     /**
      * The value to be shown.
+     *
      * @default 0
      */
     value: string | number | ReactNode;
@@ -15,6 +16,7 @@ export type StatsWidgetNumberProps = {
     label?: string | ReactNode;
     /**
      * Defines whether the number is clickable i.e. in combination with a filter.
+     *
      * @default false
      */
     clickable?: boolean;

package/components/statsWidget/StatsWidgetNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown below the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const { value = 0, total, label, className, clickable = false, onClick = () => {}, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            <div className='StatsWidgetNumber-counter'>\n                <div className='StatsWidgetNumber-value'>{value}</div>\n                {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n            </div>\n            {label && <div className='StatsWidgetNumber-label'>{label}</div>}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","className","clickable","onClick","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAqCA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,OAAAC,IAAQ,GAAG,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,IAAY,IAAO,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,GAAGC,EAAA,IAAmBP,GAEnGQ,IAAiBC,EAAW,qBAAqB,EAAE,kBAAkBJ,EAAA,GAAaD,CAAS;AAEjG,2BACK,OAAA,EAAK,GAAGG,GAAgB,SAAAD,GAAkB,WAAWE,GAClD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,OAC9CC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,IAAA,GAC/E;AAAA,IACCC,KAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAR,EAAA,CAAM;AAAA,EAAA,GAC9D;AAER;"}
+{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     *\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown below the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const { value = 0, total, label, className, clickable = false, onClick = () => {}, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            <div className='StatsWidgetNumber-counter'>\n                <div className='StatsWidgetNumber-value'>{value}</div>\n                {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n            </div>\n            {label && <div className='StatsWidgetNumber-label'>{label}</div>}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","className","clickable","onClick","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAuCA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,OAAAC,IAAQ,GAAG,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,IAAY,IAAO,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,GAAGC,EAAA,IAAmBP,GAEnGQ,IAAiBC,EAAW,qBAAqB,EAAE,kBAAkBJ,EAAA,GAAaD,CAAS;AAEjG,2BACK,OAAA,EAAK,GAAGG,GAAgB,SAAAD,GAAkB,WAAWE,GAClD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,OAC9CC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,IAAA,GAC/E;AAAA,IACCC,KAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAR,EAAA,CAAM;AAAA,EAAA,GAC9D;AAER;"}

package/components/statusBar/StatusBar.d.ts

@@ -1,33 +1,4 @@
-import { 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;
-};
+import { StatusBarProps } from './StatusBarProps';
+export type { StatusBarProps };
 declare const StatusBar: (props: StatusBarProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusBar;

package/components/statusBar/StatusBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sources":["../../../src/components/statusBar/StatusBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';\nimport StatusBarProgressBar from './StatusBarProgressBar';\nimport type { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';\nimport StatusBarIcon from './StatusBarIcon';\nimport StatusBarLabel from './StatusBarLabel';\n\nexport type StatusBarProps = {\n    /**\n     * The icon to be shown next to the progress bar.\n     */\n    icon?: StatusBarIconSpec;\n\n    /**\n     * The label to be shown for the progress bar.\n     */\n    label?: StatusBarLabelSpec;\n\n    /**\n     * List of progress bars which will be stacked in given order if there are multiple.\n     */\n    progress?: StatusBarProgress[];\n\n    /**\n     * The size of the icon and progress bar.\n     *\n     * @default 'small'\n     */\n    size?: 'small' | 'large';\n\n    /**\n     * Uses a divider for multiple progress bars when defined.\n     *\n     * @default true\n     */\n    useProgressDivider?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\ntype IconSpecWithDefaults = StatusBarIconSpec & { alignment: 'left' | 'right' };\ntype LabelSpecWithDefaults = StatusBarLabelSpec & { alignment: 'left' | 'top' | 'right'; weight: 'light' | 'bold' };\n\nconst iconDefaults: IconSpecWithDefaults = { name: '', alignment: LEFT };\nconst labelDefaults: LabelSpecWithDefaults = { value: '', alignment: RIGHT, weight: BOLD };\n\nconst StatusBar = (props: StatusBarProps) => {\n    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;\n\n    // deep destructuring with merging default props don't work\n    const icon: IconSpecWithDefaults = { ...iconDefaults, ...props.icon };\n    const label: LabelSpecWithDefaults = { ...labelDefaults, ...props.label };\n\n    const hasIcon = !!icon.name;\n    const iconIsLeft = icon.alignment === LEFT;\n    const iconIsRight = icon.alignment === RIGHT;\n\n    const hasLabel = !!label.value;\n    const labelIsLeft = label.alignment === LEFT;\n    const labelIsTop = label.alignment === TOP;\n    const labelIsRight = label.alignment === RIGHT;\n\n    const hasOnlyIcon = hasIcon && !hasLabel;\n    const hasOnlyLabel = !hasIcon && hasLabel;\n    const hasIconAndLabel = hasIcon && hasLabel;\n\n    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;\n    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;\n    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;\n    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;\n\n    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;\n    const isIconOnlyRight = hasOnlyIcon && iconIsRight;\n\n    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;\n    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;\n\n    const wrapperClasses = classNames(\n        'StatusBar',\n        'width-100pct',\n        'display-flex',\n        labelIsTop ? 'align-items-end' : 'align-items-center',\n        className\n    );\n\n    const progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-1 flex-column margin-bottom-10': labelIsTop,\n        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,\n        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,\n        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,\n    });\n\n    const labelWrapperClasses = classNames({\n        'display-flex justify-content-center': labelIsTop,\n        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', {\n        'height-5': size === SMALL,\n        'height-10': size === LARGE,\n    });\n\n    return (\n        <div className={wrapperClasses}>\n            <StatusBarIcon icon={icon} size={size} />\n\n            <div className={progressLabelWrapperClasses}>\n                <StatusBarLabel label={label} size={size} className={labelWrapperClasses} />\n\n                <div className={progressOuterWrapperClasses}>\n                    <div className={progressWrapperClasses}>\n                        {progress.map((item, index) => (\n                            <StatusBarProgressBar\n                                key={index}\n                                progress={item}\n                                index={index}\n                                useProgressDivider={useProgressDivider}\n                            />\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default StatusBar;\n"],"names":["iconDefaults","LEFT","labelDefaults","RIGHT","BOLD","StatusBar","props","progress","size","SMALL","className","useProgressDivider","icon","label","hasIcon","iconIsLeft","iconIsRight","hasLabel","labelIsLeft","labelIsTop","TOP","labelIsRight","hasOnlyIcon","hasOnlyLabel","hasIconAndLabel","isIconLeftAndLabelRight","isIconRightAndLabelLeft","isIconAndLabelLeft","isIconAndLabelRight","isIconOnlyLeft","isIconOnlyRight","isLabelOnlyLeft","isLabelOnlyRight","wrapperClasses","classNames","progressLabelWrapperClasses","labelWrapperClasses","progressOuterWrapperClasses","progressWrapperClasses","LARGE","jsxs","jsx","StatusBarIcon","StatusBarLabel","item","index","StatusBarProgressBar"],"mappings":";;;;;;AA+CA,MAAMA,IAAqC,EAAE,MAAM,IAAI,WAAWC,EAAA,GAC5DC,IAAuC,EAAE,OAAO,IAAI,WAAWC,GAAO,QAAQC,EAAA,GAE9EC,IAAY,CAACC,MAA0B;AACzC,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,IAAOC,GAAO,WAAAC,IAAY,IAAI,oBAAAC,IAAqB,GAAA,IAASL,GAG7EM,IAA6B,EAAE,GAAGZ,GAAc,GAAGM,EAAM,KAAA,GACzDO,IAA+B,EAAE,GAAGX,GAAe,GAAGI,EAAM,MAAA,GAE5DQ,IAAU,CAAC,CAACF,EAAK,MACjBG,IAAaH,EAAK,cAAcX,GAChCe,IAAcJ,EAAK,cAAcT,GAEjCc,IAAW,CAAC,CAACJ,EAAM,OACnBK,IAAcL,EAAM,cAAcZ,GAClCkB,IAAaN,EAAM,cAAcO,GACjCC,IAAeR,EAAM,cAAcV,GAEnCmB,IAAcR,KAAW,CAACG,GAC1BM,IAAe,CAACT,KAAWG,GAC3BO,IAAkBV,KAAWG,GAE7BQ,IAA0BD,KAAmBT,KAAcM,GAC3DK,IAA0BF,KAAmBR,KAAeE,GAC5DS,IAAqBH,KAAmBT,KAAcG,GACtDU,IAAsBJ,KAAmBR,KAAeK,GAExDQ,IAAiBP,KAAeP,GAChCe,IAAkBR,KAAeN,GAEjCe,IAAkBR,KAAgBL,GAClCc,IAAmBT,KAAgBF,GAEnCY,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAf,IAAa,oBAAoB;AAAA,IACjCT;AAAA,EAAA,GAGEyB,IAA8BD,EAAW,gBAAgB,YAAY;AAAA,IACvE,6CAA6Cf;AAAA,IAC7C,mCAAmCS,KAAuBF,KAA2BI;AAAA,IACrF,mCAAmCH,KAAsBF,KAA2BI;AAAA,IACpF,sBAAsBE,KAAmBC;AAAA,EAAA,CAC5C,GAEKI,IAAsBF,EAAW;AAAA,IACnC,uCAAuCf;AAAA,IACvC,gCAAgCQ,KAAsBD,KAA2BK;AAAA,IACjF,+BAA+BH,KAAuBH,KAA2BO;AAAA,EAAA,CACpF,GAEKK,IAA8BH,EAAW,gBAAgB,YAAY;AAAA,IACvE,gBAAgBP,KAAsBD,KAA2BK;AAAA,IACjE,gBAAgBH,KAAuBH,KAA2BO;AAAA,EAAA,CACrE,GAEKM,IAAyBJ,EAAW,YAAY,YAAY,YAAY;AAAA,IAC1E,YAAY1B,MAASC;AAAA,IACrB,aAAaD,MAAS+B;AAAA,EAAA,CACzB;AAED,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWP,GACZ,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAc,MAAA9B,GAAY,MAAAJ,EAAA,CAAY;AAAA,IAEvC,gBAAAgC,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA;AAAA,MAAA,gBAAAM,EAACE,GAAA,EAAe,OAAA9B,GAAc,MAAAL,GAAY,WAAW4B,GAAqB;AAAA,MAE1E,gBAAAK,EAAC,OAAA,EAAI,WAAWJ,GACZ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA/B,EAAS,IAAI,CAACqC,GAAMC,MACjB,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEG,UAAUF;AAAA,UACV,OAAAC;AAAA,UACA,oBAAAlC;AAAA,QAAA;AAAA,QAHKkC;AAAA,MAAA,CAKZ,GACL,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"StatusBar.js","sources":["../../../src/components/statusBar/StatusBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';\nimport StatusBarProgressBar from './StatusBarProgressBar';\nimport type { StatusBarProps, IconWithDefaults, LabelWithDefaults } from './StatusBarProps';\nimport StatusBarIcon from './StatusBarIcon';\nimport StatusBarLabel from './StatusBarLabel';\n\nexport type { StatusBarProps };\n\nconst iconDefaults: IconWithDefaults = { name: '', alignment: LEFT };\nconst labelDefaults: LabelWithDefaults = { value: '', alignment: RIGHT, weight: BOLD };\n\nconst StatusBar = (props: StatusBarProps) => {\n    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;\n\n    // deep destructuring with merging default props don't work\n    const icon: IconWithDefaults = { ...iconDefaults, ...props.icon };\n    const label: LabelWithDefaults = { ...labelDefaults, ...props.label };\n\n    const hasIcon = !!icon.name;\n    const iconIsLeft = icon.alignment === LEFT;\n    const iconIsRight = icon.alignment === RIGHT;\n\n    const hasLabel = !!label.value;\n    const labelIsLeft = label.alignment === LEFT;\n    const labelIsTop = label.alignment === TOP;\n    const labelIsRight = label.alignment === RIGHT;\n\n    const hasOnlyIcon = hasIcon && !hasLabel;\n    const hasOnlyLabel = !hasIcon && hasLabel;\n    const hasIconAndLabel = hasIcon && hasLabel;\n\n    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;\n    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;\n    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;\n    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;\n\n    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;\n    const isIconOnlyRight = hasOnlyIcon && iconIsRight;\n\n    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;\n    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;\n\n    const wrapperClasses = classNames(\n        'StatusBar',\n        'width-100pct',\n        'display-flex',\n        labelIsTop ? 'align-items-end' : 'align-items-center',\n        className\n    );\n\n    const progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-1 flex-column margin-bottom-10': labelIsTop,\n        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,\n        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,\n        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,\n    });\n\n    const labelWrapperClasses = classNames({\n        'display-flex justify-content-center': labelIsTop,\n        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', {\n        'height-5': size === SMALL,\n        'height-10': size === LARGE,\n    });\n\n    return (\n        <div className={wrapperClasses}>\n            <StatusBarIcon icon={icon} size={size} />\n\n            <div className={progressLabelWrapperClasses}>\n                <StatusBarLabel label={label} size={size} className={labelWrapperClasses} />\n\n                <div className={progressOuterWrapperClasses}>\n                    <div className={progressWrapperClasses}>\n                        {progress.map((item, index) => (\n                            <StatusBarProgressBar\n                                key={index}\n                                progress={item}\n                                index={index}\n                                useProgressDivider={useProgressDivider}\n                            />\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default StatusBar;\n"],"names":["iconDefaults","LEFT","labelDefaults","RIGHT","BOLD","StatusBar","props","progress","size","SMALL","className","useProgressDivider","icon","label","hasIcon","iconIsLeft","iconIsRight","hasLabel","labelIsLeft","labelIsTop","TOP","labelIsRight","hasOnlyIcon","hasOnlyLabel","hasIconAndLabel","isIconLeftAndLabelRight","isIconRightAndLabelLeft","isIconAndLabelLeft","isIconAndLabelRight","isIconOnlyLeft","isIconOnlyRight","isLabelOnlyLeft","isLabelOnlyRight","wrapperClasses","classNames","progressLabelWrapperClasses","labelWrapperClasses","progressOuterWrapperClasses","progressWrapperClasses","LARGE","jsxs","jsx","StatusBarIcon","StatusBarLabel","item","index","StatusBarProgressBar"],"mappings":";;;;;;AAUA,MAAMA,IAAiC,EAAE,MAAM,IAAI,WAAWC,EAAA,GACxDC,IAAmC,EAAE,OAAO,IAAI,WAAWC,GAAO,QAAQC,EAAA,GAE1EC,IAAY,CAACC,MAA0B;AACzC,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,IAAOC,GAAO,WAAAC,IAAY,IAAI,oBAAAC,IAAqB,GAAA,IAASL,GAG7EM,IAAyB,EAAE,GAAGZ,GAAc,GAAGM,EAAM,KAAA,GACrDO,IAA2B,EAAE,GAAGX,GAAe,GAAGI,EAAM,MAAA,GAExDQ,IAAU,CAAC,CAACF,EAAK,MACjBG,IAAaH,EAAK,cAAcX,GAChCe,IAAcJ,EAAK,cAAcT,GAEjCc,IAAW,CAAC,CAACJ,EAAM,OACnBK,IAAcL,EAAM,cAAcZ,GAClCkB,IAAaN,EAAM,cAAcO,GACjCC,IAAeR,EAAM,cAAcV,GAEnCmB,IAAcR,KAAW,CAACG,GAC1BM,IAAe,CAACT,KAAWG,GAC3BO,IAAkBV,KAAWG,GAE7BQ,IAA0BD,KAAmBT,KAAcM,GAC3DK,IAA0BF,KAAmBR,KAAeE,GAC5DS,IAAqBH,KAAmBT,KAAcG,GACtDU,IAAsBJ,KAAmBR,KAAeK,GAExDQ,IAAiBP,KAAeP,GAChCe,IAAkBR,KAAeN,GAEjCe,IAAkBR,KAAgBL,GAClCc,IAAmBT,KAAgBF,GAEnCY,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAf,IAAa,oBAAoB;AAAA,IACjCT;AAAA,EAAA,GAGEyB,IAA8BD,EAAW,gBAAgB,YAAY;AAAA,IACvE,6CAA6Cf;AAAA,IAC7C,mCAAmCS,KAAuBF,KAA2BI;AAAA,IACrF,mCAAmCH,KAAsBF,KAA2BI;AAAA,IACpF,sBAAsBE,KAAmBC;AAAA,EAAA,CAC5C,GAEKI,IAAsBF,EAAW;AAAA,IACnC,uCAAuCf;AAAA,IACvC,gCAAgCQ,KAAsBD,KAA2BK;AAAA,IACjF,+BAA+BH,KAAuBH,KAA2BO;AAAA,EAAA,CACpF,GAEKK,IAA8BH,EAAW,gBAAgB,YAAY;AAAA,IACvE,gBAAgBP,KAAsBD,KAA2BK;AAAA,IACjE,gBAAgBH,KAAuBH,KAA2BO;AAAA,EAAA,CACrE,GAEKM,IAAyBJ,EAAW,YAAY,YAAY,YAAY;AAAA,IAC1E,YAAY1B,MAASC;AAAA,IACrB,aAAaD,MAAS+B;AAAA,EAAA,CACzB;AAED,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWP,GACZ,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAc,MAAA9B,GAAY,MAAAJ,EAAA,CAAY;AAAA,IAEvC,gBAAAgC,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA;AAAA,MAAA,gBAAAM,EAACE,GAAA,EAAe,OAAA9B,GAAc,MAAAL,GAAY,WAAW4B,GAAqB;AAAA,MAE1E,gBAAAK,EAAC,OAAA,EAAI,WAAWJ,GACZ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA/B,EAAS,IAAI,CAACqC,GAAMC,MACjB,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEG,UAAUF;AAAA,UACV,OAAAC;AAAA,UACA,oBAAAlC;AAAA,QAAA;AAAA,QAHKkC;AAAA,MAAA,CAKZ,GACL,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/components/statusBar/StatusBarIcon.d.ts

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

package/components/statusBar/StatusBarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarIcon.js","sources":["../../../src/components/statusBar/StatusBarIcon.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarIconSpec } from './StatusBar.types';\nimport { LARGE, LEFT, SMALL } from './StatusBarConstants';\n\ntype StatusBarIconProps = {\n    icon: StatusBarIconSpec;\n    size: 'small' | 'large';\n};\n\nconst StatusBarIcon = (props: StatusBarIconProps) => {\n    const { icon, size } = props;\n\n    if (!icon.name) {\n        return null;\n    }\n\n    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';\n\n    const iconClasses = classNames(\n        'rioglyph',\n        icon.name,\n        icon.color ?? 'text-color-gray',\n        size === SMALL && 'text-size-h3',\n        size === LARGE && 'text-size-h2',\n        icon.className\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <span className={iconClasses} />\n        </div>\n    );\n};\n\nexport default StatusBarIcon;\n"],"names":["StatusBarIcon","props","icon","size","wrapperClasses","LEFT","iconClasses","classNames","SMALL","LARGE","jsx"],"mappings":";;;AAUA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,MAAAC,GAAM,MAAAC,EAAA,IAASF;AAEvB,MAAI,CAACC,EAAK;AACN,WAAO;AAGX,QAAME,IAAiBF,EAAK,cAAcG,IAAO,gCAAgC,8BAE3EC,IAAcC;AAAA,IAChB;AAAA,IACAL,EAAK;AAAA,IACLA,EAAK,SAAS;AAAA,IACdC,MAASK,KAAS;AAAA,IAClBL,MAASM,KAAS;AAAA,IAClBP,EAAK;AAAA,EAAA;AAGT,SACI,gBAAAQ,EAAC,SAAI,WAAWN,GACZ,4BAAC,QAAA,EAAK,WAAWE,GAAa,EAAA,CAClC;AAER;"}
+{"version":3,"file":"StatusBarIcon.js","sources":["../../../src/components/statusBar/StatusBarIcon.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarIcon as StatusBarIconIcon } from './StatusBarProps';\nimport { LARGE, LEFT, SMALL } from './StatusBarConstants';\n\ntype StatusBarIconProps = {\n    icon: StatusBarIconIcon;\n    size: 'small' | 'large';\n};\n\nconst StatusBarIcon = (props: StatusBarIconProps) => {\n    const { icon, size } = props;\n\n    if (!icon.name) {\n        return null;\n    }\n\n    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';\n\n    const iconClasses = classNames(\n        'rioglyph',\n        icon.name,\n        icon.color ?? 'text-color-gray',\n        size === SMALL && 'text-size-h3',\n        size === LARGE && 'text-size-h2',\n        icon.className\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <span className={iconClasses} />\n        </div>\n    );\n};\n\nexport default StatusBarIcon;\n"],"names":["StatusBarIcon","props","icon","size","wrapperClasses","LEFT","iconClasses","classNames","SMALL","LARGE","jsx"],"mappings":";;;AAUA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,MAAAC,GAAM,MAAAC,EAAA,IAASF;AAEvB,MAAI,CAACC,EAAK;AACN,WAAO;AAGX,QAAME,IAAiBF,EAAK,cAAcG,IAAO,gCAAgC,8BAE3EC,IAAcC;AAAA,IAChB;AAAA,IACAL,EAAK;AAAA,IACLA,EAAK,SAAS;AAAA,IACdC,MAASK,KAAS;AAAA,IAClBL,MAASM,KAAS;AAAA,IAClBP,EAAK;AAAA,EAAA;AAGT,SACI,gBAAAQ,EAAC,SAAI,WAAWN,GACZ,4BAAC,QAAA,EAAK,WAAWE,GAAa,EAAA,CAClC;AAER;"}

package/components/statusBar/StatusBarLabel.d.ts

@@ -1,6 +1,6 @@
-import { StatusBarLabelSpec } from './StatusBar.types';
+import { StatusBarLabel as StatusBarLabelLabel } from './StatusBarProps';
 type StatusBarLabelProps = {
-    label: StatusBarLabelSpec;
+    label: StatusBarLabelLabel;
     size: 'small' | 'large';
     className?: string;
 };

package/components/statusBar/StatusBarLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarLabel.js","sources":["../../../src/components/statusBar/StatusBarLabel.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarLabelSpec } from './StatusBar.types';\nimport { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';\n\ntype StatusBarLabelProps = {\n    label: StatusBarLabelSpec;\n    size: 'small' | 'large';\n    className?: string;\n};\n\nconst StatusBarLabel = (props: StatusBarLabelProps) => {\n    const { label, size, className = '' } = props;\n\n    if (!label.value) {\n        return null;\n    }\n\n    const labelClasses = classNames(\n        'display-flex',\n        'ellipsis-1',\n        'flex-1-0',\n        'justify-content-center',\n        label.color ?? 'text-color-dark',\n        {\n            'width-0': label.alignment === TOP,\n            'text-size-16': size === SMALL,\n            'text-size-h3': size === LARGE,\n            'text-bold': label.weight !== LIGHT,\n        },\n        label.className\n    );\n\n    return (\n        <div className={className}>\n            <span className={labelClasses}>{label.value}</span>\n        </div>\n    );\n};\n\nexport default StatusBarLabel;\n"],"names":["StatusBarLabel","props","label","size","className","labelClasses","classNames","TOP","SMALL","LARGE","LIGHT","jsx"],"mappings":";;;AAWA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,WAAAC,IAAY,OAAOH;AAExC,MAAI,CAACC,EAAM;AACP,WAAO;AAGX,QAAMG,IAAeC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ,EAAM,SAAS;AAAA,IACf;AAAA,MACI,WAAWA,EAAM,cAAcK;AAAA,MAC/B,gBAAgBJ,MAASK;AAAA,MACzB,gBAAgBL,MAASM;AAAA,MACzB,aAAaP,EAAM,WAAWQ;AAAA,IAAA;AAAA,IAElCR,EAAM;AAAA,EAAA;AAGV,SACI,gBAAAS,EAAC,SAAI,WAAAP,GACD,UAAA,gBAAAO,EAAC,UAAK,WAAWN,GAAe,UAAAH,EAAM,MAAA,CAAM,EAAA,CAChD;AAER;"}
+{"version":3,"file":"StatusBarLabel.js","sources":["../../../src/components/statusBar/StatusBarLabel.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarLabel as StatusBarLabelLabel } from './StatusBarProps';\nimport { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';\n\ntype StatusBarLabelProps = {\n    label: StatusBarLabelLabel;\n    size: 'small' | 'large';\n    className?: string;\n};\n\nconst StatusBarLabel = (props: StatusBarLabelProps) => {\n    const { label, size, className = '' } = props;\n\n    if (!label.value) {\n        return null;\n    }\n\n    const labelClasses = classNames(\n        'display-flex',\n        'ellipsis-1',\n        'flex-1-0',\n        'justify-content-center',\n        label.color ?? 'text-color-dark',\n        {\n            'width-0': label.alignment === TOP,\n            'text-size-16': size === SMALL,\n            'text-size-h3': size === LARGE,\n            'text-bold': label.weight !== LIGHT,\n        },\n        label.className\n    );\n\n    return (\n        <div className={className}>\n            <span className={labelClasses}>{label.value}</span>\n        </div>\n    );\n};\n\nexport default StatusBarLabel;\n"],"names":["StatusBarLabel","props","label","size","className","labelClasses","classNames","TOP","SMALL","LARGE","LIGHT","jsx"],"mappings":";;;AAWA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,WAAAC,IAAY,OAAOH;AAExC,MAAI,CAACC,EAAM;AACP,WAAO;AAGX,QAAMG,IAAeC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ,EAAM,SAAS;AAAA,IACf;AAAA,MACI,WAAWA,EAAM,cAAcK;AAAA,MAC/B,gBAAgBJ,MAASK;AAAA,MACzB,gBAAgBL,MAASM;AAAA,MACzB,aAAaP,EAAM,WAAWQ;AAAA,IAAA;AAAA,IAElCR,EAAM;AAAA,EAAA;AAGV,SACI,gBAAAS,EAAC,SAAI,WAAAP,GACD,UAAA,gBAAAO,EAAC,UAAK,WAAWN,GAAe,UAAAH,EAAM,MAAA,CAAM,EAAA,CAChD;AAER;"}

package/components/statusBar/StatusBarProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { StatusBarProgress } from './StatusBar.types';
+import { StatusBarProgress } from './StatusBarProps';
 type StatusBarProgressBarProps = {
     index: number;
     progress: StatusBarProgress;

package/components/statusBar/StatusBarProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarProgressBar.js","sources":["../../../src/components/statusBar/StatusBarProgressBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport Tooltip from '../tooltip/Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport type { StatusBarProgress } from './StatusBar.types';\nimport { TOP } from './StatusBarConstants';\n\ntype StatusBarProgressBarProps = {\n    index: number;\n    progress: StatusBarProgress;\n    useProgressDivider: boolean;\n};\n\nexport const StatusBarProgressBar = (props: StatusBarProgressBarProps) => {\n    const {\n        index,\n        progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP },\n        useProgressDivider,\n    } = props;\n\n    const progressBarClasses = classNames(\n        'progress-bar',\n        color ?? 'progress-bar-info',\n        useProgressDivider && 'progress-divider',\n        className\n    );\n\n    const progressBar = <div className={progressBarClasses} style={{ width: `${percentage}%` }} />;\n\n    if (!tooltip) {\n        return progressBar;\n    }\n\n    return (\n        <OverlayTrigger\n            placement={tooltipPosition}\n            overlay={\n                <Tooltip id={`tooltip-${index}`} width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n            delay={tooltipDelay}\n        >\n            {progressBar}\n        </OverlayTrigger>\n    );\n};\n\nexport default StatusBarProgressBar;\n"],"names":["StatusBarProgressBar","props","index","className","color","percentage","tooltip","tooltipDelay","tooltipPosition","TOP","useProgressDivider","progressBarClasses","classNames","progressBar","jsx","OverlayTrigger","Tooltip"],"mappings":";;;;;AAaO,MAAMA,IAAuB,CAACC,MAAqC;AACtE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,UAAU,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,IAAa,GAAG,SAAAC,GAAS,cAAAC,IAAe,IAAI,iBAAAC,IAAkBC,EAAA;AAAA,IAC5F,oBAAAC;AAAA,EAAA,IACAT,GAEEU,IAAqBC;AAAA,IACvB;AAAA,IACAR,KAAS;AAAA,IACTM,KAAsB;AAAA,IACtBP;AAAA,EAAA,GAGEU,IAAc,gBAAAC,EAAC,OAAA,EAAI,WAAWH,GAAoB,OAAO,EAAE,OAAO,GAAGN,CAAU,IAAA,EAAI,CAAG;AAE5F,SAAKC,IAKD,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWP;AAAA,MACX,2BACKQ,GAAA,EAAQ,IAAI,WAAWd,CAAK,IAAI,OAAM,QAClC,UAAAI,EAAA,CACL;AAAA,MAEJ,OAAOC;AAAA,MAEN,UAAAM;AAAA,IAAA;AAAA,EAAA,IAbEA;AAgBf;"}
+{"version":3,"file":"StatusBarProgressBar.js","sources":["../../../src/components/statusBar/StatusBarProgressBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport Tooltip from '../tooltip/Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport type { StatusBarProgress } from './StatusBarProps';\nimport { TOP } from './StatusBarConstants';\n\ntype StatusBarProgressBarProps = {\n    index: number;\n    progress: StatusBarProgress;\n    useProgressDivider: boolean;\n};\n\nexport const StatusBarProgressBar = (props: StatusBarProgressBarProps) => {\n    const {\n        index,\n        progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP },\n        useProgressDivider,\n    } = props;\n\n    const progressBarClasses = classNames(\n        'progress-bar',\n        color ?? 'progress-bar-info',\n        useProgressDivider && 'progress-divider',\n        className\n    );\n\n    const progressBar = <div className={progressBarClasses} style={{ width: `${percentage}%` }} />;\n\n    if (!tooltip) {\n        return progressBar;\n    }\n\n    return (\n        <OverlayTrigger\n            placement={tooltipPosition}\n            overlay={\n                <Tooltip id={`tooltip-${index}`} width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n            delay={tooltipDelay}\n        >\n            {progressBar}\n        </OverlayTrigger>\n    );\n};\n\nexport default StatusBarProgressBar;\n"],"names":["StatusBarProgressBar","props","index","className","color","percentage","tooltip","tooltipDelay","tooltipPosition","TOP","useProgressDivider","progressBarClasses","classNames","progressBar","jsx","OverlayTrigger","Tooltip"],"mappings":";;;;;AAaO,MAAMA,IAAuB,CAACC,MAAqC;AACtE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,UAAU,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,IAAa,GAAG,SAAAC,GAAS,cAAAC,IAAe,IAAI,iBAAAC,IAAkBC,EAAA;AAAA,IAC5F,oBAAAC;AAAA,EAAA,IACAT,GAEEU,IAAqBC;AAAA,IACvB;AAAA,IACAR,KAAS;AAAA,IACTM,KAAsB;AAAA,IACtBP;AAAA,EAAA,GAGEU,IAAc,gBAAAC,EAAC,OAAA,EAAI,WAAWH,GAAoB,OAAO,EAAE,OAAO,GAAGN,CAAU,IAAA,EAAI,CAAG;AAE5F,SAAKC,IAKD,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWP;AAAA,MACX,2BACKQ,GAAA,EAAQ,IAAI,WAAWd,CAAK,IAAI,OAAM,QAClC,UAAAI,EAAA,CACL;AAAA,MAEJ,OAAOC;AAAA,MAEN,UAAAM;AAAA,IAAA;AAAA,EAAA,IAbEA;AAgBf;"}