@chayns-components/core 5.0.21 → 5.0.25

package/lib/esm/components/progress-bar/ProgressBar.js

@@ -1,88 +1,193 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { c as _c } from "react-compiler-runtime";
+import React, { useContext, useMemo, useRef } from 'react';
 import { useUuid } from '../../hooks/uuid';
-import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarStep, StyledProgressBarStepWrapper } from './ProgressBar.styles';
-const ProgressBar = ({
-  percentage,
-  label,
-  shouldHideProgress = false,
-  shouldShowLabelInline = false,
-  steps,
-  colors
-}) => {
-  const [internalPercentage, setInternalPercentage] = useState(0);
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarShine, StyledProgressBarStep, StyledProgressBarStepWrapper, StyledProgressBarThumbLabel } from './ProgressBar.styles';
+import { PopupAlignment } from '../../types/popup';
+import { ThemeContext, ThemeProvider } from 'styled-components';
+import Popup from '../popup/Popup';
+const ProgressBar = t0 => {
+  "use memo";
+
+  const $ = _c(29);
+  const {
+    percentage,
+    label,
+    shouldHideProgress: t1,
+    shouldShowLabelInline: t2,
+    steps,
+    colors,
+    thumbLabel,
+    showShine: t3
+  } = t0;
+  const shouldHideProgress = t1 === undefined ? false : t1;
+  const shouldShowLabelInline = t2 === undefined ? false : t2;
+  const showShine = t3 === undefined ? false : t3;
   const uuid = useUuid();
-  useEffect(() => {
-    if (typeof percentage !== 'number') {
-      return;
+  const popupRef = useRef(null);
+  const theme = useContext(ThemeContext);
+  let t4;
+  bb0: {
+    if (!showShine || percentage === undefined) {
+      t4 = null;
+      break bb0;
     }
-    if (percentage >= 0 && percentage <= 100) {
-      setInternalPercentage(percentage);
+    const shineCount = Math.ceil(6 * (percentage / 100));
+    const speed = 5 * (percentage / 100);
+    let t5;
+    if ($[0] !== shineCount) {
+      t5 = Array.from({
+        length: shineCount
+      });
+      $[0] = shineCount;
+      $[1] = t5;
+    } else {
+      t5 = $[1];
     }
-  }, [percentage]);
-  const progressBar = useMemo(() => {
-    if (shouldHideProgress) {
-      return null;
+    let t6;
+    if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
+      t6 = t5.map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine, {
+        key: `progress-bar-shine__${shineCount}__${index}`,
+        $speed: speed,
+        $delay: 5 / shineCount * index
+      }));
+      $[2] = shineCount;
+      $[3] = speed;
+      $[4] = t5;
+      $[5] = t6;
+    } else {
+      t6 = $[5];
     }
-    if (typeof percentage !== 'number') {
-      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
-        key: `progress-bar-loop__${uuid}`,
+    t4 = t6;
+  }
+  const shineEffect = t4;
+  let t5;
+  if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
+    colors?.backgroundColor;
+    colors?.primaryTextColor;
+    colors?.progressColor;
+    colors?.secondaryTextColor;
+    colors?.stepColor;
+    t5 = (() => {
+      if (shouldHideProgress) {
+        return null;
+      }
+      if (percentage === undefined) {
+        return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+          key: `progress-bar-loop__${uuid}`,
+          $color: colors?.progressColor,
+          initial: {
+            width: "200px",
+            left: "-200px"
+          },
+          animate: {
+            width: "200px",
+            left: "100%"
+          },
+          exit: {
+            width: "200px",
+            left: "100%"
+          },
+          transition: {
+            type: "tween",
+            repeat: Infinity,
+            repeatDelay: 0,
+            duration: 1
+          }
+        }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
+          $color: colors?.backgroundColor
+        }));
+      }
+      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
+        $isBig: shouldShowLabelInline
+      }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
+        $position: step,
+        key: `progress-step-${step}`,
+        $color: colors?.stepColor
+      }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
         $color: colors?.progressColor,
+        key: `progress-bar__${uuid}`,
         initial: {
-          width: '200px',
-          left: '-200px'
+          width: "0%"
         },
         animate: {
-          width: '200px',
-          left: '100%'
+          width: `${percentage}%`
         },
         exit: {
-          width: '200px',
-          left: '100%'
+          width: "0%"
         },
         transition: {
-          type: 'tween',
-          repeat: Infinity,
-          repeatDelay: 0,
-          duration: 1
+          type: "tween"
+        },
+        onUpdate: () => popupRef.current?.show(),
+        onAnimationComplete: () => popupRef.current?.show()
+      }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
+        onClick: _temp
+      }, /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: {
+          "000": colors?.backgroundColor ?? theme?.["104"],
+          text: colors?.secondaryTextColor ?? theme?.["300"]
         }
-      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
+      }, /*#__PURE__*/React.createElement(Popup, {
+        ref: popupRef,
+        content: thumbLabel,
+        alignment: PopupAlignment.TopCenter,
+        onHide: () => popupRef.current?.show()
+      })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
+        $shouldShowLabelInline: shouldShowLabelInline,
+        $primaryColor: colors?.primaryTextColor,
+        $secondaryColor: colors?.secondaryTextColor,
+        $colorSplitPosition: percentage
+      }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
         $color: colors?.backgroundColor
       }));
-    }
-    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
-      $isBig: shouldShowLabelInline
-    }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
-      $position: step,
-      key: `progress-step-${step}`,
-      $color: colors?.stepColor
-    }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
-      $color: colors?.progressColor,
-      key: `progress-bar__${uuid}`,
-      initial: {
-        width: '0%'
-      },
-      animate: {
-        width: `${internalPercentage}%`
-      },
-      exit: {
-        width: '0%'
-      },
-      transition: {
-        type: 'tween'
-      }
-    }), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
-      $shouldShowLabelInline: shouldShowLabelInline,
-      $primaryColor: colors?.primaryTextColor,
-      $secondaryColor: colors?.secondaryTextColor,
-      $colorSplitPosition: internalPercentage
-    }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
-      $color: colors?.backgroundColor
-    }));
-  }, [colors, internalPercentage, label, percentage, shouldHideProgress, shouldShowLabelInline, steps, uuid]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
-    $primaryColor: colors?.primaryTextColor
-  }, label)), [progressBar, label, shouldShowLabelInline, colors?.primaryTextColor, colors?.secondaryTextColor]);
+    })();
+    $[6] = colors?.backgroundColor;
+    $[7] = colors?.primaryTextColor;
+    $[8] = colors?.progressColor;
+    $[9] = colors?.secondaryTextColor;
+    $[10] = colors?.stepColor;
+    $[11] = label;
+    $[12] = percentage;
+    $[13] = shineEffect;
+    $[14] = shouldHideProgress;
+    $[15] = shouldShowLabelInline;
+    $[16] = showShine;
+    $[17] = steps;
+    $[18] = theme;
+    $[19] = thumbLabel;
+    $[20] = uuid;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const progressBar = t5;
+  colors?.primaryTextColor;
+  let t6;
+  if ($[22] !== colors?.primaryTextColor || $[23] !== label || $[24] !== shouldShowLabelInline) {
+    t6 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
+      $primaryColor: colors?.primaryTextColor
+    }, label);
+    $[22] = colors?.primaryTextColor;
+    $[23] = label;
+    $[24] = shouldShowLabelInline;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== progressBar || $[27] !== t6) {
+    t7 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t6);
+    $[26] = progressBar;
+    $[27] = t6;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  return t7;
 };
 ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;
+function _temp(event) {
+  return event.stopPropagation();
+}
 //# sourceMappingURL=ProgressBar.js.map

package/lib/esm/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarStep","StyledProgressBarStepWrapper","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","backgroundColor","$isBig","length","map","step","$position","stepColor","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","secondaryTextColor","$colorSplitPosition","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n} from './ProgressBar.styles';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n}) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={internalPercentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors,\n        internalPercentage,\n        label,\n        percentage,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        steps,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [\n            progressBar,\n            label,\n            shouldShowLabelInline,\n            colors?.primaryTextColor,\n            colors?.secondaryTextColor,\n        ],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n    StyledProgressBarShine,\n    StyledProgressBarStep,\n    StyledProgressBarStepWrapper,\n    StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n    ? Acc[number]\n    : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n    backgroundColor?: string;\n    progressColor?: string;\n    stepColor?: string;\n    primaryTextColor?: string;\n    secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n    /**\n     * The colors of the ProgressBar.\n     */\n    colors?: Colors;\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: Range<0, 101>;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n    /**\n     * Whether the label should be displayed inside the ProgressBar.\n     */\n    shouldShowLabelInline?: boolean;\n    /**\n     * Visual marked steps.\n     */\n    steps?: Range<0, 101>[];\n    /**\n     * The label that should be displayed on the thumb of the progress bar.\n     */\n    thumbLabel?: React.ReactNode;\n    /**\n     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n     */\n    showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n    percentage,\n    label,\n    shouldHideProgress = false,\n    shouldShowLabelInline = false,\n    steps,\n    colors,\n    thumbLabel,\n    showShine = false,\n}) => {\n    'use memo';\n\n    const uuid = useUuid();\n    const popupRef = useRef<PopupRef | null>(null);\n\n    const theme = useContext(ThemeContext) as Theme | undefined;\n\n    const shineEffect = useMemo(() => {\n        if (!showShine || percentage === undefined) return null;\n        const FULL_ANIMATION_LENGTH = 5;\n        const MAX_SHINE_COUNT = 6;\n\n        const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n        const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n        return Array.from({ length: shineCount }).map((_, index) => (\n            <StyledProgressBarShine\n                /* eslint-disable-next-line react/no-array-index-key */\n                key={`progress-bar-shine__${shineCount}__${index}`}\n                $speed={speed}\n                $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n            />\n        ));\n    }, [percentage, showShine]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (percentage === undefined) {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        $color={colors?.progressColor}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground $color={colors?.backgroundColor} />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n                {!!steps?.length && (\n                    <StyledProgressBarStepWrapper>\n                        {steps.map((step) => (\n                            <StyledProgressBarStep\n                                $position={step}\n                                key={`progress-step-${step}`}\n                                $color={colors?.stepColor}\n                            />\n                        ))}\n                    </StyledProgressBarStepWrapper>\n                )}\n                <StyledMotionProgressBarProgress\n                    $color={colors?.progressColor}\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${percentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                    onUpdate={() => popupRef.current?.show()}\n                    onAnimationComplete={() => popupRef.current?.show()}\n                >\n                    {showShine && shineEffect}\n                    {thumbLabel && (\n                        <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n                            <ThemeProvider\n                                theme={{\n                                    '000': colors?.backgroundColor ?? theme?.['104'],\n                                    text: colors?.secondaryTextColor ?? theme?.['300'],\n                                }}\n                            >\n                                <Popup\n                                    ref={popupRef}\n                                    content={thumbLabel}\n                                    alignment={PopupAlignment.TopCenter}\n                                    onHide={() => popupRef.current?.show()}\n                                >\n                                    {}\n                                </Popup>\n                            </ThemeProvider>\n                        </StyledProgressBarThumbLabel>\n                    )}\n                </StyledMotionProgressBarProgress>\n\n                {shouldShowLabelInline && label && (\n                    <StyledProgressBarLabel\n                        $shouldShowLabelInline={shouldShowLabelInline}\n                        $primaryColor={colors?.primaryTextColor}\n                        $secondaryColor={colors?.secondaryTextColor}\n                        $colorSplitPosition={percentage}\n                    >\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n\n                <StyledProgressBarBackground $color={colors?.backgroundColor} />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [\n        colors?.backgroundColor,\n        colors?.primaryTextColor,\n        colors?.progressColor,\n        colors?.secondaryTextColor,\n        colors?.stepColor,\n        label,\n        percentage,\n        shineEffect,\n        shouldHideProgress,\n        shouldShowLabelInline,\n        showShine,\n        steps,\n        theme,\n        thumbLabel,\n        uuid,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && !shouldShowLabelInline && (\n                    <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n                        {label}\n                    </StyledProgressBarLabel>\n                )}\n            </StyledProgressBar>\n        ),\n        [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js

@@ -1,5 +1,5 @@
 import { motion } from 'motion/react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 export const StyledProgressBar = styled.div`
     position: relative;
 `;
@@ -22,11 +22,42 @@ export const StyledProgressBarProgressWrapper = styled.div`
   $isBig
 }) => $isBig ? 20 : 2}px;
 `;
+const shineMove = keyframes`
+    from {
+        transform: translateX(-150%);
+    }
+    to {
+        transform: translateX(150%);
+    }
+`;
+export const StyledProgressBarShine = styled.div.attrs(({
+  $delay
+}) => ({
+  style: {
+    animationDelay: `${$delay ?? 0}s`
+  }
+}))`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 33%,
+        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0) 66%
+    );
+    transform: translateX(-150%);
+    animation: ${shineMove} ${({
+  $speed = 5
+}) => `${$speed}s`} linear infinite;
+    opacity: 0.95;
+`;
 export const StyledMotionProgressBarProgress = styled(motion.div)`
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
+    overflow: hidden;
     z-index: 2;
     display: flex;
     align-items: center;
@@ -90,4 +121,8 @@ export const StyledProgressBarStep = styled.div`
   $position
 }) => $position}%;
 `;
+export const StyledProgressBarThumbLabel = styled.div`
+    position: absolute;
+    right: 0;
+`;
 //# sourceMappingURL=ProgressBar.styles.js.map

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGJ,MAAM,CAACG,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGP,MAAM,CAACG,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACK,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGX,MAAM,CAACG,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEO;AAAoD,CAAC,KACpEA,sBAAsB,GAAGP,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACK,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEV;AAAM,CAAC,KAC7DQ,mBAAmB,IACnBZ,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBa,aAAa,IAAIT,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIV,KAAK,CAAC,KAAK,CAAC,IAAIQ,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGhB,MAAM,CAACG,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMc,qBAAqB,GAAGjB,MAAM,CAACG,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEa;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC","ignoreList":[]}
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 100%;\n    width: 100%;\n    background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n        $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n    $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n    border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n    from {\n        transform: translateX(-150%);\n    }\n    to {\n        transform: translateX(150%);\n    }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n    ({ $delay }) => ({\n        style: { animationDelay: `${$delay ?? 0}s` },\n    }),\n)`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 33%,\n        rgba(255, 255, 255, 0.5) 50%,\n        rgba(255, 255, 255, 0) 66%\n    );\n    transform: translateX(-150%);\n    animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n    opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    padding-left: 12px;\n    background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n        $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n    $shouldShowLabelInline?: boolean;\n    $primaryColor?: string;\n    $secondaryColor?: string;\n    $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n        $shouldShowLabelInline ? theme['100'] : theme.headline};\n    white-space: nowrap;\n\n    ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n        $colorSplitPosition &&\n        css`\n            position: absolute;\n            z-index: 2;\n            width: 100%;\n            height: 100%;\n\n            display: flex;\n            align-items: center;\n\n            padding-left: 8px;\n\n            font-weight: bold;\n\n            -webkit-background-clip: text;\n\n            color: transparent;\n            background-image: linear-gradient(\n                90deg,\n                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n            );\n        `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n    $position: number;\n    $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n    background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n    height: 100%;\n    width: 2px;\n    position: absolute;\n    top: 0;\n    left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n    position: absolute;\n    right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,MAAMC,SAAS,GAAGR,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,sBAAsB,GAAGX,MAAM,CAACI,GAAG,CAACQ,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACY,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGnB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEc;AAAoD,CAAC,KACpEA,sBAAsB,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACY,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEjB;AAAM,CAAC,KAC7De,mBAAmB,IACnBpB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBqB,aAAa,IAAIhB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGxB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMqB,qBAAqB,GAAGzB,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEoB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG3B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/utils/numberInput.js

@@ -17,6 +17,7 @@ export const formateNumber = ({
   isMoneyInput,
   isTimeInput
 }) => {
+  if (Number.isNaN(number)) return '';
   if (isTimeInput && typeof number === 'string') {
     let hours = 0;
     let minutes = 0;

package/lib/esm/utils/numberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.js","names":["DECIMAL_TEST","INTEGER_TEST","MONEY_TEST","TIME_TEST","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","formateNumber","number","isMoneyInput","isTimeInput","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","Number","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","test","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | string | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\n        let lastTwoNumbers = 0;\n        let lastTwoNumbersLength = 0;\n\n        if (number.includes(':')) {\n            lastTwoNumbers = Number(number.substring(3, 5));\n            lastTwoNumbersLength = number.substring(3, 5).length;\n        } else {\n            lastTwoNumbers = Number(number.substring(2, 4));\n            lastTwoNumbersLength = number.substring(2, 4).length;\n        }\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n\n        if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"numberInput.js","names":["DECIMAL_TEST","INTEGER_TEST","MONEY_TEST","TIME_TEST","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","formateNumber","number","isMoneyInput","isTimeInput","Number","isNaN","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","test","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | string | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (Number.isNaN(number)) return '';\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\n        let lastTwoNumbers = 0;\n        let lastTwoNumbersLength = 0;\n\n        if (number.includes(':')) {\n            lastTwoNumbers = Number(number.substring(3, 5));\n            lastTwoNumbersLength = number.substring(3, 5).length;\n        } else {\n            lastTwoNumbers = Number(number.substring(2, 4));\n            lastTwoNumbersLength = number.substring(2, 4).length;\n        }\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n\n        if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.styles.d.ts

@@ -1,3 +1,7 @@
-export declare const StyledColorSchemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: import("./ColorSchemeProvider").Theme;
-}>> & string;
+import type { WithTheme } from './ColorSchemeProvider';
+import { BrowserName } from '../../types/chayns';
+type ColorSchemeProviderProps = WithTheme<{
+    $browser: BrowserName;
+}>;
+export declare const StyledColorSchemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColorSchemeProviderProps>> & string;
+export {};

package/lib/types/components/grouped-image/GroupedImage.styles.d.ts

@@ -13,7 +13,9 @@ type StyledImageProps = WithTheme<{
     $hasMultipleImages: boolean;
     $uuid: string;
 }>;
-export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledImageProps>> & string;
+export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}>, StyledImageProps>, never>> & string;
 type StyledCornerImageProps = WithTheme<{
     $background?: CSSProperties['background'];
     $shouldPreventBackground?: boolean;

package/lib/types/components/list/List.d.ts

@@ -1,6 +1,5 @@
 import React, { FC, ReactNode } from 'react';
 interface IListContext {
-    incrementExpandableItemCount: () => () => void;
     isAnyItemExpandable: boolean;
     isWrapped: boolean;
     openItemUuid: string | undefined;

package/lib/types/components/progress-bar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 interface Colors {
@@ -33,6 +33,14 @@ export type ProgressBarProps = {
      * Visual marked steps.
      */
     steps?: Range<0, 101>[];
+    /**
+     * The label that should be displayed on the thumb of the progress bar.
+     */
+    thumbLabel?: React.ReactNode;
+    /**
+     * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.
+     */
+    showShine?: boolean;
 };
 declare const ProgressBar: FC<ProgressBarProps>;
 export default ProgressBar;

package/lib/types/components/progress-bar/ProgressBar.styles.d.ts

@@ -11,6 +11,12 @@ export declare const StyledProgressBarProgressWrapper: import("styled-components
 type StyledProgressBarProgressProps = WithTheme<{
     $color?: string;
 }>;
+export declare const StyledProgressBarShine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}>, {
+    $speed?: number;
+    $delay?: number;
+}>, never>> & string;
 export declare const StyledMotionProgressBarProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, StyledProgressBarProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
@@ -27,4 +33,5 @@ type StyledProgressBarStepProps = WithTheme<{
     $color?: string;
 }>;
 export declare const StyledProgressBarStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarStepProps>> & string;
+export declare const StyledProgressBarThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.21",
+    "version": "5.0.25",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "bb71f793404d168943ca75bde5b462f34a80a1cd"
+    "gitHead": "c7f8c9b84a5800ab68c7608d619f2b74291bee98"
 }