@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -1,25 +1,19 @@
-import { ColorMode } from 'chayns-api';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { PopupAlignment } from '../../../types/popup';
 export const StyledMotionPopupContentWrapper = styled(motion.div)`
-    background-color: ${_ref => {
-  let {
-    theme,
-    $colorMode
-  } = _ref;
-  return $colorMode === ColorMode.Dark ? theme['003'] : theme['001'];
-}};
+    background-color: ${({
+  theme
+}) => theme['000']};
     border-radius: 3px;
     box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
-    color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     z-index: 100;
-    position: fixed;
+    position: ${({
+  $shouldScrollWithContent
+}) => $shouldScrollWithContent ? 'absolute' : 'fixed'};
     pointer-events: all;
 
     &::after {
@@ -33,11 +27,10 @@ export const StyledMotionPopupContentWrapper = styled(motion.div)`
         width: 14px;
         z-index: -2;
 
-        ${_ref3 => {
-  let {
-    $position,
-    $offset
-  } = _ref3;
+        ${({
+  $position,
+  $offset
+}) => {
   switch ($position) {
     case PopupAlignment.TopLeft:
       return css`
@@ -81,4 +74,50 @@ export const StyledMotionPopupContentWrapper = styled(motion.div)`
         z-index: -1;
     }
 `;
+export const StyledPopupContentWrapperContent = styled.div`
+    height: 100%;
+    width: 100%;
+
+    ${({
+  $maxHeight
+}) => $maxHeight && css`
+            max-height: ${$maxHeight}px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        `}
+
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `}
+`;
 //# sourceMappingURL=PopupContentWrapper.styles.js.map

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["ColorMode","motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","_ref","theme","$colorMode","Dark","_ref2","text","_ref3","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AASrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,IAAA;EAAA,OAC5EE,UAAU,KAAKT,SAAS,CAACU,IAAI,GAAGF,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACnE;AACA;AACA,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAF,KAAA;EACrB,QAAQC,SAAS;IACb,KAAKV,cAAc,CAACY,OAAO;MACvB,OAAOb,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACa,UAAU;MAC1B,OAAOd,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACc,QAAQ;MACxB,OAAOf,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL,KAAKX,cAAc,CAACe,WAAW;MAC3B,OAAOhB,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","theme","text","$shouldScrollWithContent","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentWrapperContent","$maxHeight","$browser"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { BrowserName } from '../../../types/chayns';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n    $shouldScrollWithContent: boolean;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme['000']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: ${({ $shouldScrollWithContent }) =>\n        $shouldScrollWithContent ? 'absolute' : 'fixed'};\n    pointer-events: all;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledPopupContentWrapperContentProps = WithTheme<{\n    $browser: BrowserName;\n    $maxHeight?: number;\n}>;\n\nexport const StyledPopupContentWrapperContent = styled.div<StyledPopupContentWrapperContentProps>`\n    height: 100%;\n    width: 100%;\n\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    ${({ $browser, theme }: StyledPopupContentWrapperContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAWrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwB,CAAC;EAAEC;AAA4C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC5E;AACA,gBAAgB,CAAC;EAAEC;AAAyB,CAAC,KACrCA,wBAAwB,GAAG,UAAU,GAAG,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,SAAS;EAAEC;AAAQ,CAAC,KAAK;EAC1B,QAAQD,SAAS;IACb,KAAKN,cAAc,CAACQ,OAAO;MACvB,OAAOT,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACS,UAAU;MAC1B,OAAOV,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGQ,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKP,cAAc,CAACU,QAAQ;MACxB,OAAOX,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL,KAAKP,cAAc,CAACW,WAAW;MAC3B,OAAOZ,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGQ,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,MAAM,CAAC;EAAEY;AAAW,CAAC,KACbA,UAAU,IACVf,GAAG;AACX,0BAA0Be,UAAU;AACpC;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEZ;AAA6C,CAAC,KACzDY,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

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

@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
-import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
-const ProgressBar = _ref => {
-  let {
-    percentage,
-    label,
-    shouldHideProgress = false
-  } = _ref;
+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);
   const uuid = useUuid();
   useEffect(() => {
@@ -24,6 +26,7 @@ const ProgressBar = _ref => {
     if (typeof percentage !== 'number') {
       return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
         key: `progress-bar-loop__${uuid}`,
+        $color: colors?.progressColor,
         initial: {
           width: '200px',
           left: '-200px'
@@ -42,9 +45,18 @@ const ProgressBar = _ref => {
           repeatDelay: 0,
           duration: 1
         }
-      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
+        $color: colors?.backgroundColor
+      }));
     }
-    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+    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%'
@@ -58,9 +70,18 @@ const ProgressBar = _ref => {
       transition: {
         type: 'tween'
       }
-    }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
-  }, [internalPercentage, percentage, shouldHideProgress, uuid]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
+    }), 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]);
 };
 ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;

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","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","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} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\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?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\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                        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 />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper>\n                <StyledMotionProgressBarProgress\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress, uuid]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMc,IAAI,GAAGb,OAAO,CAAC,CAAC;EAEtBH,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOW,UAAU,KAAK,QAAQ,EAAE;MAChC;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMM,WAAW,GAAGhB,OAAO,CAAC,MAAM;IAC9B,IAAIY,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,OAAOF,UAAU,KAAK,QAAQ,EAAE;MAChC,oBACIZ,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;QAC5Be,GAAG,EAAE,sBAAsBH,IAAI,EAAG;QAClCI,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIP,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;MAC5Be,GAAG,EAAE,iBAAiBH,IAAI,EAAG;MAC7BI,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAE,GAAGP,kBAAkB;MAAI,CAAE;MAC7CU,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACF3B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;EAE3C,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE9D,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACb,iBAAiB,QACbY,WAAW,EACXL,KAAK,iBAAIb,KAAA,CAAAmB,aAAA,CAACX,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACK,WAAW,EAAEL,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACsB,WAAW,GAAG,aAAa;AAEvC,eAAetB,WAAW","ignoreList":[]}
+{"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":[]}

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

@@ -1,46 +1,93 @@
-import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
 export const StyledProgressBar = styled.div`
     position: relative;
 `;
 export const StyledProgressBarBackground = styled.div`
-    height: 10px;
+    height: 100%;
     width: 100%;
-    border-radius: 2px;
-    background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['104'];
-}};
+    background-color: ${({
+  theme,
+  $color
+}) => $color ?? theme['104']};
 `;
 export const StyledProgressBarProgressWrapper = styled.div`
     overflow: hidden;
     position: relative;
     width: 100%;
-    height: 10px;
-    border-radius: 2px;
+    height: ${({
+  $isBig
+}) => $isBig ? 20 : 10}px;
+    border-radius: ${({
+  $isBig
+}) => $isBig ? 20 : 2}px;
 `;
 export const StyledMotionProgressBarProgress = styled(motion.div)`
-    height: 10px;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
-    background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.headline;
-}};
+    display: flex;
+    align-items: center;
+    padding-left: 12px;
+    background-color: ${({
+  theme,
+  $color
+}) => $color ?? theme.headline};
 `;
 export const StyledProgressBarLabel = styled.div`
     font-size: 85%;
-    color: ${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.headline;
-}};
+    color: ${({
+  theme,
+  $shouldShowLabelInline
+}) => $shouldShowLabelInline ? theme['100'] : theme.headline};
+    white-space: nowrap;
+
+    ${({
+  $colorSplitPosition,
+  $primaryColor,
+  $secondaryColor,
+  theme
+}) => $colorSplitPosition && css`
+            position: absolute;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            align-items: center;
+
+            padding-left: 8px;
+
+            font-weight: bold;
+
+            -webkit-background-clip: text;
+
+            color: transparent;
+            background-image: linear-gradient(
+                90deg,
+                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,
+                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%
+            );
+        `}
+`;
+export const StyledProgressBarStepWrapper = styled.div`
+    height: 100%;
+    width: 100%;
+    position: absolute;
+`;
+export const StyledProgressBarStep = styled.div`
+    background-color: ${({
+  theme,
+  $color
+}) => $color ?? theme['102']};
+    height: 100%;
+    width: 2px;
+    position: absolute;
+    top: 0;
+    left: ${({
+  $position
+}) => $position}%;
 `;
 //# 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","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLabel","_ref3"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled 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<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['104']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n    border-radius: 2px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<unknown>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme }: StyledProgressBarLabelProps) => theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG;AAC3C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA;AACrF,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAgC;AAC7E;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACI,QAAQ;AAAA;AACvE,CAAC","ignoreList":[]}
+{"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":[]}

package/lib/esm/components/radio-button/RadioButton.js

@@ -1,16 +1,17 @@
-import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
 import { StyledLabelWrapper, StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
-const RadioButton = _ref => {
-  let {
-    children,
-    shouldShowRightElementOnlyOnChecked = false,
-    label,
-    id,
-    rightElement,
-    isDisabled = false
-  } = _ref;
+import { getHeightOfSingleTextLine } from '../../utils/calculate';
+const RadioButton = ({
+  children,
+  shouldShowRightElementOnlyOnChecked = false,
+  label,
+  id,
+  rightElement,
+  shouldShowCentered = true,
+  isDisabled = false
+}) => {
   const {
     selectedRadioButtonId,
     updateSelectedRadioButtonId,
@@ -20,9 +21,21 @@ const RadioButton = _ref => {
   } = useContext(RadioButtonGroupContext);
   const [internalIsChecked, setInternalIsChecked] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const [radioButtonTop, setRadioButtonTop] = useState(undefined);
+  const radioButtonBoxRef = useRef(null);
+  const radioButtonRootRef = useRef(null);
   const isInGroup = typeof updateSelectedRadioButtonId === 'function';
   const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
   const uncheckable = radioButtonsCanBeUnchecked;
+  useEffect(() => {
+    if (radioButtonRootRef.current && !shouldShowCentered) {
+      const singleLineHeight = getHeightOfSingleTextLine({
+        container: radioButtonRootRef.current
+      });
+      const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;
+      setRadioButtonTop((singleLineHeight - boxHeight) / 2);
+    }
+  }, [shouldShowCentered]);
   const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
@@ -91,10 +104,17 @@ const RadioButton = _ref => {
   return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
     $isDisabled: isDisabled,
     $radioButtonRightElementMargin: radioButtonRightElementMargin
-  }, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, null, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, {
+    ref: radioButtonRootRef
+  }, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
     $isDisabled: isDisabled,
     $isChecked: isMarked,
-    onClick: handleClick
+    ref: radioButtonBoxRef,
+    onClick: handleClick,
+    style: {
+      top: shouldShowCentered ? '50%' : radioButtonTop,
+      transform: shouldShowCentered ? 'translateY(-50%)' : undefined
+    }
   }, /*#__PURE__*/React.createElement(StyledRadioButtonCheckBoxMark, {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -128,7 +148,7 @@ const RadioButton = _ref => {
     transition: {
       duration: 0.2
     }
-  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, rightElement, shouldShowRightElement]);
+  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, radioButtonTop, rightElement, shouldShowCentered, shouldShowRightElement]);
 };
 RadioButton.displayName = 'RadioButton';
 export default RadioButton;

package/lib/esm/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useMemo","useState","useEffect","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","radioButtonRightElementMargin","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","$isDisabled","$radioButtonRightElementMargin","$isChecked","onClick","onMouseEnter","onMouseLeave","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","height","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useMemo,\n    useState,\n    type ReactNode,\n    useEffect,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledLabelWrapper,\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the label.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the rightElement should only be displayed when the RadioButton is checked\n     */\n    shouldShowRightElementOnlyOnChecked?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    children,\n    shouldShowRightElementOnlyOnChecked = false,\n    label,\n    id,\n    rightElement,\n    isDisabled = false,\n}) => {\n    const {\n        selectedRadioButtonId,\n        updateSelectedRadioButtonId,\n        radioButtonRightElements,\n        updateHasRightElement,\n        radioButtonsCanBeUnchecked,\n    } = useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n        if (!radioButtonRightElements) {\n            return 'NONE';\n        }\n\n        const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n        if (index < 0) {\n            return 'NONE';\n        }\n\n        const prevButton = radioButtonRightElements[index - 1];\n        const currentButton = radioButtonRightElements[index];\n        const nextButton = radioButtonRightElements[index + 1];\n\n        if (!currentButton?.hasRightElement) {\n            return 'NONE';\n        }\n\n        switch (true) {\n            case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n                return 'TOP';\n            case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n                return 'BOTTOM';\n            case currentButton?.hasRightElement &&\n                !nextButton?.hasRightElement &&\n                !prevButton?.hasRightElement:\n                return 'NONE';\n            default:\n                return 'BOTH';\n        }\n    }, [id, radioButtonRightElements]);\n\n    const shouldShowRightElement = useMemo(() => {\n        if (rightElement) {\n            if (shouldShowRightElementOnlyOnChecked) {\n                return isMarked;\n            }\n\n            return true;\n        }\n\n        return false;\n    }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n    useEffect(() => {\n        if (typeof updateHasRightElement === 'function') {\n            window.setTimeout(() => {\n                updateHasRightElement(id, shouldShowRightElement);\n            }, 10);\n        }\n    }, [id, shouldShowRightElement, updateHasRightElement]);\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                $radioButtonRightElementMargin={radioButtonRightElementMargin}\n            >\n                <StyledRadioButtonWrapper>\n                    <StyledRadioButtonPseudoCheckBox\n                        $isDisabled={isDisabled}\n                        $isChecked={isMarked}\n                        onClick={handleClick}\n                    >\n                        <StyledRadioButtonCheckBoxMark\n                            onMouseEnter={handleMouseEnter}\n                            onMouseLeave={handleMouseLeave}\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledRadioButtonCheckBox\n                        onClick={handleClick}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    <StyledLabelWrapper>\n                        {label && (\n                            <StyledRadioButtonLabel\n                                $isDisabled={isDisabled}\n                                onClick={handleClick}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                            >\n                                {label}\n                            </StyledRadioButtonLabel>\n                        )}\n                        {shouldShowRightElement && rightElement}\n                    </StyledLabelWrapper>\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [\n            children,\n            handleClick,\n            handleMouseEnter,\n            isDisabled,\n            isHovered,\n            isMarked,\n            label,\n            radioButtonRightElementMargin,\n            rightElement,\n            shouldShowRightElement,\n        ],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","useRef","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","getHeightOfSingleTextLine","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","handleClick","prev","handleMouseEnter","handleMouseLeave","radioButtonRightElementMargin","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","$isDisabled","$radioButtonRightElementMargin","ref","$isChecked","onClick","style","top","transform","onMouseEnter","onMouseLeave","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    FC,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n    useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledLabelWrapper,\n    StyledMotionRadioButtonChildren,\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n    StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\n\nexport type RadioButtonProps = {\n    /**\n     * The children that should be displayed after the RadioButton is checked.\n     */\n    children?: ReactNode;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the label.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the rightElement should only be displayed when the RadioButton is checked\n     */\n    shouldShowRightElementOnlyOnChecked?: boolean;\n    /**\n     * Whether the RadioButton should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    children,\n    shouldShowRightElementOnlyOnChecked = false,\n    label,\n    id,\n    rightElement,\n    shouldShowCentered = true,\n    isDisabled = false,\n}) => {\n    const {\n        selectedRadioButtonId,\n        updateSelectedRadioButtonId,\n        radioButtonRightElements,\n        updateHasRightElement,\n        radioButtonsCanBeUnchecked,\n    } = useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n    const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n    const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const uncheckable = radioButtonsCanBeUnchecked;\n\n    useEffect(() => {\n        if (radioButtonRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: radioButtonRootRef.current,\n            });\n\n            const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (uncheckable) {\n            if (updateSelectedRadioButtonId) {\n                updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n            }\n            setInternalIsChecked((prev) => !prev);\n            return;\n        }\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n        setInternalIsChecked(true);\n    }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n        if (!radioButtonRightElements) {\n            return 'NONE';\n        }\n\n        const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n        if (index < 0) {\n            return 'NONE';\n        }\n\n        const prevButton = radioButtonRightElements[index - 1];\n        const currentButton = radioButtonRightElements[index];\n        const nextButton = radioButtonRightElements[index + 1];\n\n        if (!currentButton?.hasRightElement) {\n            return 'NONE';\n        }\n\n        switch (true) {\n            case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n                return 'TOP';\n            case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n                return 'BOTTOM';\n            case currentButton?.hasRightElement &&\n                !nextButton?.hasRightElement &&\n                !prevButton?.hasRightElement:\n                return 'NONE';\n            default:\n                return 'BOTH';\n        }\n    }, [id, radioButtonRightElements]);\n\n    const shouldShowRightElement = useMemo(() => {\n        if (rightElement) {\n            if (shouldShowRightElementOnlyOnChecked) {\n                return isMarked;\n            }\n\n            return true;\n        }\n\n        return false;\n    }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n    useEffect(() => {\n        if (typeof updateHasRightElement === 'function') {\n            window.setTimeout(() => {\n                updateHasRightElement(id, shouldShowRightElement);\n            }, 10);\n        }\n    }, [id, shouldShowRightElement, updateHasRightElement]);\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                $isDisabled={isDisabled}\n                $radioButtonRightElementMargin={radioButtonRightElementMargin}\n            >\n                <StyledRadioButtonWrapper ref={radioButtonRootRef}>\n                    <StyledRadioButtonPseudoCheckBox\n                        $isDisabled={isDisabled}\n                        $isChecked={isMarked}\n                        ref={radioButtonBoxRef}\n                        onClick={handleClick}\n                        style={{\n                            top: shouldShowCentered ? '50%' : radioButtonTop,\n                            transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                        }}\n                    >\n                        <StyledRadioButtonCheckBoxMark\n                            onMouseEnter={handleMouseEnter}\n                            onMouseLeave={handleMouseLeave}\n                            $isHovered={isHovered}\n                            $isSelected={isMarked}\n                            $isDisabled={isDisabled}\n                        />\n                    </StyledRadioButtonPseudoCheckBox>\n                    <StyledRadioButtonCheckBox\n                        onClick={handleClick}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                        disabled={isDisabled}\n                        $isDisabled={isDisabled}\n                        type=\"radio\"\n                        checked={isMarked}\n                        onChange={() => {}}\n                    />\n                    <StyledLabelWrapper>\n                        {label && (\n                            <StyledRadioButtonLabel\n                                $isDisabled={isDisabled}\n                                onClick={handleClick}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                            >\n                                {label}\n                            </StyledRadioButtonLabel>\n                        )}\n                        {shouldShowRightElement && rightElement}\n                    </StyledLabelWrapper>\n                </StyledRadioButtonWrapper>\n                {children && (\n                    <AnimatePresence initial={false}>\n                        <StyledMotionRadioButtonChildren\n                            animate={\n                                isMarked\n                                    ? { opacity: 1, height: 'auto' }\n                                    : { opacity: 0, height: 0 }\n                            }\n                            transition={{ duration: 0.2 }}\n                        >\n                            {children}\n                        </StyledMotionRadioButtonChildren>\n                    </AnimatePresence>\n                )}\n            </StyledRadioButton>\n        ),\n        [\n            children,\n            handleClick,\n            handleMouseEnter,\n            isDisabled,\n            isHovered,\n            isMarked,\n            label,\n            radioButtonRightElementMargin,\n            radioButtonTop,\n            rightElement,\n            shouldShowCentered,\n            shouldShowRightElement,\n        ],\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}