npm - @chayns-components/core - Versions diffs - 5.0.0-beta.853 → 5.0.0-beta.854 - Mend

@chayns-components/core 5.0.0-beta.853 → 5.0.0-beta.854

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/lib/cjs/components/radio-button/RadioButton.js CHANGED Viewed

@@ -12,6 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RadioButton = ({
   children,
+  shouldShowRightElementOnlyOnChecked = false,
   label,
   id,
   rightElement,
@@ -20,6 +21,8 @@ const RadioButton = ({
   const {
     selectedRadioButtonId,
     updateSelectedRadioButtonId,
+    radioButtonRightElements,
+    updateHasRightElement,
     radioButtonsCanBeUnchecked
   } = (0, _react.useContext)(_RadioButtonGroup.RadioButtonGroupContext);
   const [internalIsChecked, setInternalIsChecked] = (0, _react.useState)(false);
@@ -51,8 +54,50 @@ const RadioButton = ({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
+  const radioButtonRightElementMargin = (0, _react.useMemo)(() => {
+    if (!radioButtonRightElements) {
+      return 'NONE';
+    }
+    const index = radioButtonRightElements.findIndex(element => element.id === id);
+    if (index < 0) {
+      return 'NONE';
+    }
+    const prevButton = radioButtonRightElements[index - 1];
+    const currentButton = radioButtonRightElements[index];
+    const nextButton = radioButtonRightElements[index + 1];
+    if (!(currentButton !== null && currentButton !== void 0 && currentButton.hasRightElement)) {
+      return 'NONE';
+    }
+    switch (true) {
+      case (prevButton === null || prevButton === void 0 ? void 0 : prevButton.hasRightElement) && !(nextButton !== null && nextButton !== void 0 && nextButton.hasRightElement):
+        return 'TOP';
+      case !(prevButton !== null && prevButton !== void 0 && prevButton.hasRightElement) && (nextButton === null || nextButton === void 0 ? void 0 : nextButton.hasRightElement):
+        return 'BOTTOM';
+      case (currentButton === null || currentButton === void 0 ? void 0 : currentButton.hasRightElement) && !(nextButton !== null && nextButton !== void 0 && nextButton.hasRightElement) && !(prevButton !== null && prevButton !== void 0 && prevButton.hasRightElement):
+        return 'NONE';
+      default:
+        return 'BOTH';
+    }
+  }, [id, radioButtonRightElements]);
+  const shouldShowRightElement = (0, _react.useMemo)(() => {
+    if (rightElement) {
+      if (shouldShowRightElementOnlyOnChecked) {
+        return isMarked;
+      }
+      return true;
+    }
+    return false;
+  }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);
+  (0, _react.useEffect)(() => {
+    if (typeof updateHasRightElement === 'function') {
+      window.setTimeout(() => {
+        updateHasRightElement(id, shouldShowRightElement);
+      }, 10);
+    }
+  }, [id, shouldShowRightElement, updateHasRightElement]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButton, {
-    $isDisabled: isDisabled
+    $isDisabled: isDisabled,
+    $radioButtonRightElementMargin: radioButtonRightElementMargin
   }, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
     $isDisabled: isDisabled,
     $isChecked: isMarked,
@@ -77,7 +122,7 @@ const RadioButton = ({
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, label), rightElement && rightElement)), children && /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, label), shouldShowRightElement && rightElement)), children && /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledMotionRadioButtonChildren, {
     animate: isMarked ? {
@@ -90,7 +135,7 @@ const RadioButton = ({
     transition: {
       duration: 0.2
     }
-  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label]);
+  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, rightElement, shouldShowRightElement]);
 };
 RadioButton.displayName = 'RadioButton';
 var _default = exports.default = RadioButton;

package/lib/cjs/components/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","label","id","rightElement","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","StyledRadioButtonWrapper","StyledRadioButtonPseudoCheckBox","$isChecked","onClick","StyledRadioButtonCheckBoxMark","onMouseEnter","onMouseLeave","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","onChange","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useContext, useMemo, useState, type ReactNode } 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';\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?: string;\n /\n An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n label,\n id,\n rightElement,\n isDisabled = false,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, 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 return useMemo(\n () => (\n <StyledRadioButton $isDisabled={isDisabled}>\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 {rightElement && 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 [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","radioButtonRightElementMargin","useMemo","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","useEffect","window","setTimeout","createElement","StyledRadioButton","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","StyledRadioButtonPseudoCheckBox","$isChecked","onClick","StyledRadioButtonCheckBoxMark","onMouseEnter","onMouseLeave","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","onChange","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"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?: string;\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":[]}

package/lib/cjs/components/radio-button/RadioButton.styles.js CHANGED Viewed

@@ -17,6 +17,30 @@ const StyledRadioButton = exports.StyledRadioButton = _styledComponents.default.
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
+    ${({
+  $radioButtonRightElementMargin
+}) => {
+  switch ($radioButtonRightElementMargin) {
+    case 'BOTH':
+      return (0, _styledComponents.css)`
+                    margin: 6px 0;
+                `;
+    case 'TOP':
+      return (0, _styledComponents.css)`
+                    margin-top: 6px;
+                `;
+    case 'BOTTOM':
+      return (0, _styledComponents.css)`
+                    margin-bottom: 6px;
+                `;
+    case 'NONE':
+    default:
+      return (0, _styledComponents.css)`
+                    margin: 0;
+                `;
+  }
+}}
 `;
 const StyledRadioButtonWrapper = exports.StyledRadioButtonWrapper = _styledComponents.default.div`
     display: flex;

package/lib/cjs/components/radio-button/RadioButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","$isDisabled","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","~~css","~~StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n flex-direction: column;\n\n position: relative;\n\n opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n display: flex;\n align-items: center;\n position: relative;\n gap: 5px;\n user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n height: 15px;\n width: 15px;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n $isChecked: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n opacity: 1;\n border: 1px solid\n rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n width: 15px;\n height: 15px;\n position: absolute;\n border-radius: 100%;\n top: 50%;\n transform: translateY(-50%);\n cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n $isHovered: boolean;\n $isSelected: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n background-color: transparent;\n position: absolute;\n top: 1px;\n left: 3.925px;\n display: inline-block;\n transform: rotate(35deg);\n height: 9px;\n width: 5px;\n border-bottom: 2px solid white;\n border-right: 2px solid white;\n border-top: transparent;\n border-left: transparent;\n z-index: 2;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n\n ${({ $isHovered, $isSelected }) => {\n if ($isSelected) {\n return css`\n opacity: 1;\n `;\n }\n\n if ($isHovered) {\n return css`\n opacity: 0.5;\n `;\n }\n\n return css`\n opacity: 0;\n `;\n }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n margin: 0;\n cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n margin-left: 18px;\n cursor: text;\n overflow: hidden;\n color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AAKzC~~,MAAMW,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAoC,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AACnF,CAAC;AAEM,MAAMC,wBAAwB,~~GAAAJ~~,OAAA,~~CAAAI~~,wBAAA,~~GAAGH~~,yBAAM,~~CAACI~~,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,~~GAAAN~~,OAAA,~~CAAAM~~,yBAAA,~~GAAGL~~,yBAAM,~~CAACM~~,KAAqC;AACrF;AACA;AACA;AACA,cAAc,CAAC;~~EAAEJ~~;AAA4C,CAAC,KACtDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAOM,~~MAAMK~~,+BAA+B,~~GAAAR~~,OAAA,~~CAAAQ~~,+BAAA,~~GAAGP~~,yBAAM,~~CAACI~~,GAAyC;AAC/F,wBAAwB,CAAC;EAAEI,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AACpE;AACA;AACA,eAAe,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;~~EAAEN~~;AAAkD,CAAC,KAC5DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAQM,~~MAAMQ~~,6BAA6B,~~GAAAX~~,OAAA,~~CAAAW~~,6BAAA,~~GAAGV~~,yBAAM,CAACC,IAAwC;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAgD,CAAC,KAC1DA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE;AACA,MAAM,CAAC;~~EAAES~~,UAAU;EAAEC;AAAY,CAAC,KAAK;EAC/B,IAAIA,WAAW,EAAE;IACb,OAAO,~~IAAAC~~,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,~~IAAIF~~,UAAU,EAAE;IACZ,OAAO,~~IAAAE~~,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAIM,~~MAAMC~~,sBAAsB,~~GAAAf~~,OAAA,~~CAAAe~~,sBAAA,~~GAAGd~~,yBAAM,~~CAACe~~,CAA8B;AAC3E,aAAa,CAAC;~~EAAEP~~;AAAmC,CAAC,KAAKA,KAAK,~~CAACQ~~,IAAI;AACnE;AACA,cAAc,CAAC;~~EAAEd~~;AAAyC,CAAC,KACnDA,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AACjE,CAAC;AAEM,~~MAAMe~~,kBAAkB,~~GAAAlB~~,OAAA,~~CAAAkB~~,kBAAA,~~GAAGjB~~,yBAAM,~~CAACI~~,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,~~MAAMc~~,+BAA+B,~~GAAAnB~~,OAAA,~~CAAAmB~~,+BAAA,GAAG,~~IAAAlB~~,yBAAM,~~EACjDmB~~,oBAAM,~~CAACf~~,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAA4C,CAAC,KAAKA,KAAK,~~CAACQ~~,IAAI;AAC5E,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"RadioButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","$isDisabled","$radioButtonRightElementMargin","css","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\n\ntype StyledRadioButtonProps = WithTheme<{\n $isDisabled: boolean;\n $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n flex-direction: column;\n\n position: relative;\n\n opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n switch ($radioButtonRightElementMargin) {\n case 'BOTH':\n return css`\n margin: 6px 0;\n `;\n case 'TOP':\n return css`\n margin-top: 6px;\n `;\n case 'BOTTOM':\n return css`\n margin-bottom: 6px;\n `;\n case 'NONE':\n default:\n return css`\n margin: 0;\n `;\n }\n }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n display: flex;\n align-items: center;\n position: relative;\n gap: 5px;\n user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n height: 15px;\n width: 15px;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n $isChecked: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n opacity: 1;\n border: 1px solid\n rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n width: 15px;\n height: 15px;\n position: absolute;\n border-radius: 100%;\n top: 50%;\n transform: translateY(-50%);\n cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n $isHovered: boolean;\n $isSelected: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n background-color: transparent;\n position: absolute;\n top: 1px;\n left: 3.925px;\n display: inline-block;\n transform: rotate(35deg);\n height: 9px;\n width: 5px;\n border-bottom: 2px solid white;\n border-right: 2px solid white;\n border-top: transparent;\n border-left: transparent;\n z-index: 2;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n\n ${({ $isHovered, $isSelected }) => {\n if ($isSelected) {\n return css`\n opacity: 1;\n `;\n }\n\n if ($isHovered) {\n return css`\n opacity: 0.5;\n `;\n }\n\n return css`\n opacity: 0;\n `;\n }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n margin: 0;\n cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n margin-left: 18px;\n cursor: text;\n overflow: hidden;\n color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js CHANGED Viewed

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.RadioButtonGroupContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _radioButton = require("../../../utils/radioButton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RadioButtonGroupContext = exports.RadioButtonGroupContext = /*#__PURE__*/_react.default.createContext({
   selectedRadioButtonId: undefined,
   updateSelectedRadioButtonId: undefined,
-  radioButtonsCanBeUnchecked: false
+  radioButtonsCanBeUnchecked: false,
+  radioButtonRightElements: [],
+  updateHasRightElement: undefined
 });
 RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
 const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -20,6 +23,7 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   onSelect
 }, ref) => {
   const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
+  const [radioButtonRightElements, setRadioButtonRightElements] = (0, _react.useState)([]);
   const isInitialRenderRef = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
     setSelectedRadioButtonId(selectedId);
@@ -30,6 +34,20 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     setSelectedRadioButtonId(id);
   }, [onSelect]);
+  const updateHasRightElement = (0, _react.useCallback)((id, hasRightElement) => {
+    setRadioButtonRightElements(prevState => prevState.map(prev => id === prev.id ? {
+      id,
+      hasRightElement
+    } : prev));
+  }, []);
+  (0, _react.useEffect)(() => {
+    const ids = (0, _radioButton.getRadioButtonOrder)(children);
+    const rightElements = ids.map(id => ({
+      id,
+      hasRightElement: false
+    }));
+    setRadioButtonRightElements(rightElements);
+  }, [children]);
   (0, _react.useImperativeHandle)(ref, () => ({
     updateSelectedRadioButtonId
   }), [updateSelectedRadioButtonId]);
@@ -41,8 +59,10 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const providerValue = (0, _react.useMemo)(() => ({
     selectedRadioButtonId,
     updateSelectedRadioButtonId,
-    radioButtonsCanBeUnchecked: canUncheckRadioButtons
-  }), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
+    radioButtonsCanBeUnchecked: canUncheckRadioButtons,
+    updateHasRightElement,
+    radioButtonRightElements
+  }), [canUncheckRadioButtons, radioButtonRightElements, selectedRadioButtonId, updateHasRightElement, updateSelectedRadioButtonId]);
   return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
     value: providerValue
   }, children);

package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useEffect","useCallback","id","useImperativeHandle","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string \| undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string \| undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /*\n Whether the RadioButtons can be unchecked.\n /\n canUncheckRadioButtons?: boolean;\n /\n The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n /\n children: ReactNode;\n /\n Function to be executed when an id is selected.\n /\n onSelect?: (id?: string) => void;\n /\n The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;~~AASe~~,~~SAAAC~~,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,~~SAAAH~~,~~wBAAAG~~,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AAUR~~,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAGE,cAAK,CAACC,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE;~~AAChC~~,CAAC,CAAC;~~AAEFP~~,uBAAuB,~~CAACQ~~,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,gBAAG,IAAAC,iBAAU,EAC/B,CAAC;EAAEC,QAAQ;EAAEC,sBAAsB;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAEC,GAAG,KAAK;EACjE,MAAM,~~CAACX~~,qBAAqB,~~EAAEY~~,wBAAwB,CAAC,GACnD,IAAAC,eAAQ,~~EAAoDZ~~,SAAS,CAAC;~~EAE1E~~,~~MAAMa~~,kBAAkB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvC,IAAAC,gBAAS,EAAC,MAAM;~~IACZJ~~,wBAAwB,CAACH,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,~~MAAMP~~,2BAA2B,GAAG,~~IAAAe~~,kBAAW,EAC1CC,EAAE,IAAK;IACJ,IAAI,~~OAAOR~~,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,~~CAACQ~~,EAAE,CAAC;IAChB;~~IAEAN~~,wBAAwB,~~CAACM~~,EAAE,CAAC;EAChC,CAAC,EACD,~~CAACR~~,QAAQ,CACb,CAAC;EAED,~~IAAAS~~,0BAAmB,~~EACfR~~,GAAG,EACH,OAAO;~~IACHT~~;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAED,~~IAAAc~~,gBAAS,EAAC,MAAM;IACZ,IAAIF,kBAAkB,~~CAACM~~,OAAO,EAAE;~~MAC5BN~~,kBAAkB,~~CAACM~~,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,~~CAACpB~~,qBAAqB,CAAC,CAAC;EAE3B,~~MAAMqB~~,aAAa,GAAG,IAAAC,cAAO,EACzB,OAAO;~~IACHtB~~,qBAAqB;IACrBE,2BAA2B;IAC3BC,0BAA0B,~~EAAEK~~;~~EAChC~~,CAAC,CAAC,EACF,~~CAACA~~,sBAAsB,~~EAAER~~,qBAAqB,~~EAAEE~~,2BAA2B,~~CAC/E~~,CAAC;EAED,~~oBACI7B~~,MAAA,~~CAAAS~~,OAAA,~~CAAAyC~~,aAAA,~~CAAC3B~~,uBAAuB,~~CAAC4B~~,QAAQ;IAACC,KAAK,EAAEJ;EAAc,~~GAClDd~~,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDF,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAAC,~~IAAAsB~~,QAAA,~~GAAA7B~~,OAAA,CAAAf,OAAA,~~GAEnCuB~~,gBAAgB","ignoreList":[]}
1	+ {"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_radioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","setRadioButtonRightElements","isInitialRenderRef","useRef","useEffect","useCallback","id","hasRightElement","prevState","map","prev","ids","getRadioButtonOrder","rightElements","useImperativeHandle","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string \| undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string \| undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /*\n Whether the RadioButtons can be unchecked.\n /\n canUncheckRadioButtons?: boolean;\n /\n The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n /\n children: ReactNode;\n /\n Function to be executed when an id is selected.\n /\n onSelect?: (id?: string) => void;\n /\n The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n setRadioButtonRightElements((prevState) =>\n prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n );\n }, []);\n\n useEffect(() => {\n const ids = getRadioButtonOrder(children);\n\n const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n setRadioButtonRightElements(rightElements);\n }, [children]);\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n updateHasRightElement,\n radioButtonRightElements,\n }),\n [\n canUncheckRadioButtons,\n radioButtonRightElements,\n selectedRadioButtonId,\n updateHasRightElement,\n updateSelectedRadioButtonId,\n ],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/types/radioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' \| 'TOP' \| 'BOTTOM' \| 'BOTH';\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/utils/radioButton.js ADDED Viewed

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadioButtonOrder = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getRadioButtonOrder = children => {
+  const radioButtonIds = [];
+  _react.Children.forEach(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      const {
+        id
+      } = child.props;
+      if (typeof id === 'string') {
+        radioButtonIds.push(id);
+      }
+    }
+  });
+  return radioButtonIds;
+};
+exports.getRadioButtonOrder = getRadioButtonOrder;
+//# sourceMappingURL=radioButton.js.map

package/lib/cjs/utils/radioButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"radioButton.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getRadioButtonOrder","children","radioButtonIds","Children","forEach","child","React","isValidElement","id","props","push","exports"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): string[] => {\n const radioButtonIds: string[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE5C,MAAMW,mBAAmB,GAAIC,QAAmB,IAAe;EAClE,MAAMC,cAAwB,GAAG,EAAE;EAEnCC,eAAQ,CAACC,OAAO,CAACH,QAAQ,EAAGI,KAAK,IAAK;IAClC,iBAAIC,cAAK,CAACC,cAAc,CAAkBF,KAAK,CAAC,EAAE;MAC9C,MAAM;QAAEG;MAAG,CAAC,GAAGH,KAAK,CAACI,KAAK;MAE1B,IAAI,OAAOD,EAAE,KAAK,QAAQ,EAAE;QACxBN,cAAc,CAACQ,IAAI,CAACF,EAAE,CAAC;MAC3B;IACJ;EACJ,CAAC,CAAC;EAEF,OAAON,cAAc;AACzB,CAAC;AAACS,OAAA,CAAAX,mBAAA,GAAAA,mBAAA","ignoreList":[]}

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

@@ -1,10 +1,11 @@
 import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState, useEffect } 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,
@@ -13,6 +14,8 @@ const RadioButton = _ref => {
   const {
     selectedRadioButtonId,
     updateSelectedRadioButtonId,
+    radioButtonRightElements,
+    updateHasRightElement,
     radioButtonsCanBeUnchecked
   } = useContext(RadioButtonGroupContext);
   const [internalIsChecked, setInternalIsChecked] = useState(false);
@@ -44,8 +47,50 @@ const RadioButton = _ref => {
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
+  const radioButtonRightElementMargin = useMemo(() => {
+    if (!radioButtonRightElements) {
+      return 'NONE';
+    }
+    const index = radioButtonRightElements.findIndex(element => element.id === id);
+    if (index < 0) {
+      return 'NONE';
+    }
+    const prevButton = radioButtonRightElements[index - 1];
+    const currentButton = radioButtonRightElements[index];
+    const nextButton = radioButtonRightElements[index + 1];
+    if (!currentButton?.hasRightElement) {
+      return 'NONE';
+    }
+    switch (true) {
+      case prevButton?.hasRightElement && !nextButton?.hasRightElement:
+        return 'TOP';
+      case !prevButton?.hasRightElement && nextButton?.hasRightElement:
+        return 'BOTTOM';
+      case currentButton?.hasRightElement && !nextButton?.hasRightElement && !prevButton?.hasRightElement:
+        return 'NONE';
+      default:
+        return 'BOTH';
+    }
+  }, [id, radioButtonRightElements]);
+  const shouldShowRightElement = useMemo(() => {
+    if (rightElement) {
+      if (shouldShowRightElementOnlyOnChecked) {
+        return isMarked;
+      }
+      return true;
+    }
+    return false;
+  }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);
+  useEffect(() => {
+    if (typeof updateHasRightElement === 'function') {
+      window.setTimeout(() => {
+        updateHasRightElement(id, shouldShowRightElement);
+      }, 10);
+    }
+  }, [id, shouldShowRightElement, updateHasRightElement]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
-    $isDisabled: isDisabled
+    $isDisabled: isDisabled,
+    $radioButtonRightElementMargin: radioButtonRightElementMargin
   }, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, null, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
     $isDisabled: isDisabled,
     $isChecked: isMarked,
@@ -70,7 +115,7 @@ const RadioButton = _ref => {
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, label), rightElement && rightElement)), children && /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, label), shouldShowRightElement && rightElement)), children && /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionRadioButtonChildren, {
     animate: isMarked ? {
@@ -83,7 +128,7 @@ const RadioButton = _ref => {
     transition: {
       duration: 0.2
     }
-  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label]);
+  }, children))), [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label, radioButtonRightElementMargin, rightElement, shouldShowRightElement]);
 };
 RadioButton.displayName = 'RadioButton';
 export default RadioButton;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useMemo","useState","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","label","id","rightElement","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","$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, { FC, useCallback, useContext, useMemo, useState, type ReactNode } 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';\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?: string;\n /\n An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n label,\n id,\n rightElement,\n isDisabled = false,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, 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 return useMemo(\n () => (\n <StyledRadioButton $isDisabled={isDisabled}>\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 {rightElement && 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 [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
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?: string;\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":[]}

package/lib/esm/components/radio-button/RadioButton.styles.js CHANGED Viewed

@@ -12,6 +12,31 @@ export const StyledRadioButton = styled.span`
   } = _ref;
   return $isDisabled ? 0.5 : 1;
 }};
+    ${_ref2 => {
+  let {
+    $radioButtonRightElementMargin
+  } = _ref2;
+  switch ($radioButtonRightElementMargin) {
+    case 'BOTH':
+      return css`
+                    margin: 6px 0;
+                `;
+    case 'TOP':
+      return css`
+                    margin-top: 6px;
+                `;
+    case 'BOTTOM':
+      return css`
+                    margin-bottom: 6px;
+                `;
+    case 'NONE':
+    default:
+      return css`
+                    margin: 0;
+                `;
+  }
+}}
 `;
 export const StyledRadioButtonWrapper = styled.div`
     display: flex;
@@ -24,27 +49,27 @@ export const StyledRadioButtonCheckBox = styled.input`
     opacity: 0;
     height: 15px;
     width: 15px;
-    cursor: ${_ref2 => {
+    cursor: ${_ref3 => {
   let {
     $isDisabled
-  } = _ref2;
+  } = _ref3;
   return $isDisabled ? 'default !important' : 'pointer !important';
 }};
 `;
 export const StyledRadioButtonPseudoCheckBox = styled.div`
-    background-color: ${_ref3 => {
+    background-color: ${_ref4 => {
   let {
     theme,
     $isChecked
-  } = _ref3;
+  } = _ref4;
   return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
 }};
     opacity: 1;
     border: 1px solid
-        rgba(${_ref4 => {
+        rgba(${_ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme['409-rgb'];
 }}, 0.5);
     width: 15px;
@@ -53,10 +78,10 @@ export const StyledRadioButtonPseudoCheckBox = styled.div`
     border-radius: 100%;
     top: 50%;
     transform: translateY(-50%);
-    cursor: ${_ref5 => {
+    cursor: ${_ref6 => {
   let {
     $isDisabled
-  } = _ref5;
+  } = _ref6;
   return $isDisabled ? 'default !important' : 'pointer !important';
 }};
 `;
@@ -74,18 +99,18 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
     border-top: transparent;
     border-left: transparent;
     z-index: 2;
-    cursor: ${_ref6 => {
+    cursor: ${_ref7 => {
   let {
     $isDisabled
-  } = _ref6;
+  } = _ref7;
   return $isDisabled ? 'default !important' : 'pointer !important';
 }};
-    ${_ref7 => {
+    ${_ref8 => {
   let {
     $isHovered,
     $isSelected
-  } = _ref7;
+  } = _ref8;
   if ($isSelected) {
     return css`
                 opacity: 1;
@@ -102,17 +127,17 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
 }}
 `;
 export const StyledRadioButtonLabel = styled.p`
-    color: ${_ref8 => {
+    color: ${_ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.text;
 }};
     margin: 0;
-    cursor: ${_ref9 => {
+    cursor: ${_ref10 => {
   let {
     $isDisabled
-  } = _ref9;
+  } = _ref10;
   return $isDisabled ? 'default !important' : 'pointer !important';
 }};
 `;
@@ -127,10 +152,10 @@ export const StyledMotionRadioButtonChildren = styled(motion.div)`
     margin-left: 18px;
     cursor: text;
     overflow: hidden;
-    color: ${_ref10 => {
+    color: ${_ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.text;
 }};
 `;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","~~_ref2~~","StyledRadioButtonPseudoCheckBox","~~_ref3~~","theme","$isChecked","~~_ref4~~","~~_ref5~~","StyledRadioButtonCheckBoxMark","~~_ref6~~","~~_ref7~~","$isHovered","$isSelected","StyledRadioButtonLabel","p","~~_ref8~~","text","~~_ref9~~","StyledLabelWrapper","StyledMotionRadioButtonChildren","~~_ref10~~"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n flex-direction: column;\n\n position: relative;\n\n opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n display: flex;\n align-items: center;\n position: relative;\n gap: 5px;\n user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n height: 15px;\n width: 15px;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n $isChecked: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n opacity: 1;\n border: 1px solid\n rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n width: 15px;\n height: 15px;\n position: absolute;\n border-radius: 100%;\n top: 50%;\n transform: translateY(-50%);\n cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n $isHovered: boolean;\n $isSelected: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n background-color: transparent;\n position: absolute;\n top: 1px;\n left: 3.925px;\n display: inline-block;\n transform: rotate(35deg);\n height: 9px;\n width: 5px;\n border-bottom: 2px solid white;\n border-right: 2px solid white;\n border-top: transparent;\n border-left: transparent;\n z-index: 2;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n\n ${({ $isHovered, $isSelected }) => {\n if ($isSelected) {\n return css`\n opacity: 1;\n `;\n }\n\n if ($isHovered) {\n return css`\n opacity: 0.5;\n `;\n }\n\n return css`\n opacity: 0;\n `;\n }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n margin: 0;\n cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n margin-left: 18px;\n cursor: text;\n overflow: hidden;\n color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAK~~/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACnF,CAAC;AAED,OAAO,~~MAAMC~~,wBAAwB,~~GAAGN~~,MAAM,~~CAACO~~,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,~~GAAGR~~,MAAM,~~CAACS~~,KAAqC;AACrF;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;~~IAAEL~~;EAA4C,CAAC,~~GAAAK~~,KAAA;EAAA,~~OACtDL~~,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAOD,OAAO,~~MAAMM~~,+BAA+B,~~GAAGX~~,MAAM,~~CAACO~~,GAAyC;AAC/F,wBAAwBK,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA;AACpE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcG,KAAA;EAAA,IAAC;~~IAAEX~~;EAAkD,CAAC,~~GAAAW~~,KAAA;EAAA,~~OAC5DX~~,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAQD,OAAO,~~MAAMY~~,6BAA6B,~~GAAGjB~~,MAAM,CAACG,IAAwC;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~cAAce~~,KAAA;EAAA,IAAC;~~IAAEb~~;EAAgD,CAAC,~~GAAAa~~,KAAA;EAAA,~~OAC1Db~~,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE;AACA,~~MAAMc~~,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,~~OAAOpB~~,GAAG;AACtB;AACA,aAAa;EACL;EAEA,~~IAAImB~~,UAAU,EAAE;IACZ,~~OAAOnB~~,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,~~MAAMqB~~,sBAAsB,~~GAAGtB~~,MAAM,~~CAACuB~~,CAA8B;AAC3E,aAAaC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,IAAI;AAAA;AACnE;AACA,cAAcC,~~KAAA~~;EAAA,IAAC;~~IAAErB~~;EAAyC,CAAC,~~GAAAqB~~,~~KAAA~~;EAAA,~~OACnDrB~~,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA;AACjE,CAAC;AAED,OAAO,~~MAAMsB~~,kBAAkB,~~GAAG3B~~,MAAM,~~CAACO~~,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMqB,+BAA+B,~~GAAG5B~~,MAAM,CACjDD,MAAM,~~CAACQ~~,GACX,CAAuC;AACvC;AACA;AACA;AACA,aAAasB,MAAA;EAAA,IAAC;IAAEhB;EAA4C,CAAC,GAAAgB,MAAA;EAAA,OAAKhB,KAAK,CAACY,IAAI;AAAA;AAC5E,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","_ref2","$radioButtonRightElementMargin","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","_ref3","StyledRadioButtonPseudoCheckBox","_ref4","theme","$isChecked","_ref5","_ref6","StyledRadioButtonCheckBoxMark","_ref7","_ref8","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref9","text","_ref10","StyledLabelWrapper","StyledMotionRadioButtonChildren","_ref11"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\n\ntype StyledRadioButtonProps = WithTheme<{\n $isDisabled: boolean;\n $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n display: flex;\n flex-direction: column;\n\n position: relative;\n\n opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n switch ($radioButtonRightElementMargin) {\n case 'BOTH':\n return css`\n margin: 6px 0;\n `;\n case 'TOP':\n return css`\n margin-top: 6px;\n `;\n case 'BOTTOM':\n return css`\n margin-bottom: 6px;\n `;\n case 'NONE':\n default:\n return css`\n margin: 0;\n `;\n }\n }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n display: flex;\n align-items: center;\n position: relative;\n gap: 5px;\n user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n height: 15px;\n width: 15px;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n $isChecked: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n opacity: 1;\n border: 1px solid\n rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n width: 15px;\n height: 15px;\n position: absolute;\n border-radius: 100%;\n top: 50%;\n transform: translateY(-50%);\n cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n $isHovered: boolean;\n $isSelected: boolean;\n $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n background-color: transparent;\n position: absolute;\n top: 1px;\n left: 3.925px;\n display: inline-block;\n transform: rotate(35deg);\n height: 9px;\n width: 5px;\n border-bottom: 2px solid white;\n border-right: 2px solid white;\n border-top: transparent;\n border-left: transparent;\n z-index: 2;\n cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n\n ${({ $isHovered, $isSelected }) => {\n if ($isSelected) {\n return css`\n opacity: 1;\n `;\n }\n\n if ($isHovered) {\n return css`\n opacity: 0.5;\n `;\n }\n\n return css`\n opacity: 0;\n `;\n }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n margin: 0;\n cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n margin-left: 18px;\n cursor: text;\n overflow: hidden;\n color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { getRadioButtonOrder } from '../../../utils/radioButton';
 export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
   selectedRadioButtonId: undefined,
   updateSelectedRadioButtonId: undefined,
-  radioButtonsCanBeUnchecked: false
+  radioButtonsCanBeUnchecked: false,
+  radioButtonRightElements: [],
+  updateHasRightElement: undefined
 });
 RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
 const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -13,6 +16,7 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     onSelect
   } = _ref;
   const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
+  const [radioButtonRightElements, setRadioButtonRightElements] = useState([]);
   const isInitialRenderRef = useRef(true);
   useEffect(() => {
     setSelectedRadioButtonId(selectedId);
@@ -23,6 +27,20 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     setSelectedRadioButtonId(id);
   }, [onSelect]);
+  const updateHasRightElement = useCallback((id, hasRightElement) => {
+    setRadioButtonRightElements(prevState => prevState.map(prev => id === prev.id ? {
+      id,
+      hasRightElement
+    } : prev));
+  }, []);
+  useEffect(() => {
+    const ids = getRadioButtonOrder(children);
+    const rightElements = ids.map(id => ({
+      id,
+      hasRightElement: false
+    }));
+    setRadioButtonRightElements(rightElements);
+  }, [children]);
   useImperativeHandle(ref, () => ({
     updateSelectedRadioButtonId
   }), [updateSelectedRadioButtonId]);
@@ -34,8 +52,10 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const providerValue = useMemo(() => ({
     selectedRadioButtonId,
     updateSelectedRadioButtonId,
-    radioButtonsCanBeUnchecked: canUncheckRadioButtons
-  }), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
+    radioButtonsCanBeUnchecked: canUncheckRadioButtons,
+    updateHasRightElement,
+    radioButtonRightElements
+  }), [canUncheckRadioButtons, radioButtonRightElements, selectedRadioButtonId, updateHasRightElement, updateSelectedRadioButtonId]);
   return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
     value: providerValue
   }, children);

package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string \| undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string \| undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /*\n Whether the RadioButtons can be unchecked.\n /\n canUncheckRadioButtons?: boolean;\n /\n The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n /\n children: ReactNode;\n /\n Function to be executed when an id is selected.\n /\n onSelect?: (id?: string) => void;\n /\n The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;~~AAUd~~,OAAO,MAAMC,uBAAuB,~~gBAAGR~~,KAAK,~~CAACS~~,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE;~~AAChC~~,CAAC,CAAC;~~AAEFL~~,uBAAuB,~~CAACM~~,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,~~gBAAGd~~,UAAU,CAC/B,~~CAAAe~~,IAAA,EAA6DC,GAAG,KAAK;EAAA,IAApE;IAAEC,QAAQ;IAAEC,sBAAsB;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAAL,IAAA;EACvD,MAAM,~~CAACN~~,qBAAqB,~~EAAEY~~,wBAAwB,CAAC,~~GACnDf~~,QAAQ,~~CAAoDI~~,SAAS,CAAC;~~EAE1E~~,~~MAAMY~~,kBAAkB,~~GAAGjB~~,MAAM,CAAC,IAAI,CAAC;EAEvCH,SAAS,CAAC,MAAM;~~IACZmB~~,wBAAwB,CAACF,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,~~MAAMR~~,2BAA2B,~~GAAGV~~,WAAW,~~CAC1CsB~~,EAAE,IAAK;IACJ,IAAI,~~OAAOH~~,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,~~CAACG~~,EAAE,CAAC;IAChB;~~IAEAF~~,wBAAwB,~~CAACE~~,EAAE,CAAC;EAChC,CAAC,EACD,~~CAACH~~,QAAQ,CACb,CAAC;~~EAEDjB~~,mBAAmB,~~CACfa~~,GAAG,EACH,OAAO;~~IACHL~~;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;~~EAEDT~~,SAAS,CAAC,MAAM;IACZ,~~IAAIoB~~,kBAAkB,~~CAACE~~,OAAO,EAAE;~~MAC5BF~~,kBAAkB,~~CAACE~~,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,~~CAACf~~,qBAAqB,CAAC,CAAC;EAE3B,~~MAAMgB~~,aAAa,~~GAAGrB~~,OAAO,CACzB,OAAO;~~IACHK~~,qBAAqB;IACrBE,2BAA2B;IAC3BC,0BAA0B,~~EAAEM~~;~~EAChC~~,CAAC,CAAC,EACF,~~CAACA~~,sBAAsB,~~EAAET~~,qBAAqB,~~EAAEE~~,2BAA2B,~~CAC/E~~,CAAC;EAED,~~oBACIZ~~,KAAA,~~CAAA2B~~,aAAA,~~CAACnB~~,uBAAuB,~~CAACoB~~,QAAQ;IAACC,KAAK,EAAEH;EAAc,~~GAClDR~~,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
1	+ {"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","getRadioButtonOrder","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","setRadioButtonRightElements","isInitialRenderRef","id","hasRightElement","prevState","map","prev","ids","rightElements","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string \| undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string \| undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /*\n Whether the RadioButtons can be unchecked.\n /\n canUncheckRadioButtons?: boolean;\n /\n The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n /\n children: ReactNode;\n /\n Function to be executed when an id is selected.\n /\n onSelect?: (id?: string) => void;\n /\n The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n setRadioButtonRightElements((prevState) =>\n prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n );\n }, []);\n\n useEffect(() => {\n const ids = getRadioButtonOrder(children);\n\n const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n setRadioButtonRightElements(rightElements);\n }, [children]);\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n updateHasRightElement,\n radioButtonRightElements,\n }),\n [\n canUncheckRadioButtons,\n radioButtonRightElements,\n selectedRadioButtonId,\n updateHasRightElement,\n updateSelectedRadioButtonId,\n ],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/types/radioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' \| 'TOP' \| 'BOTTOM' \| 'BOTH';\n"],"mappings":"","ignoreList":[]}

package/lib/esm/utils/radioButton.js ADDED Viewed

@@ -0,0 +1,16 @@
+import React, { Children } from 'react';
+export const getRadioButtonOrder = children => {
+  const radioButtonIds = [];
+  Children.forEach(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      const {
+        id
+      } = child.props;
+      if (typeof id === 'string') {
+        radioButtonIds.push(id);
+      }
+    }
+  });
+  return radioButtonIds;
+};
+//# sourceMappingURL=radioButton.js.map

package/lib/esm/utils/radioButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"radioButton.js","names":["React","Children","getRadioButtonOrder","children","radioButtonIds","forEach","child","isValidElement","id","props","push"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): string[] => {\n const radioButtonIds: string[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAmB,OAAO;AAElD,OAAO,MAAMC,mBAAmB,GAAIC,QAAmB,IAAe;EAClE,MAAMC,cAAwB,GAAG,EAAE;EAEnCH,QAAQ,CAACI,OAAO,CAACF,QAAQ,EAAGG,KAAK,IAAK;IAClC,iBAAIN,KAAK,CAACO,cAAc,CAAkBD,KAAK,CAAC,EAAE;MAC9C,MAAM;QAAEE;MAAG,CAAC,GAAGF,KAAK,CAACG,KAAK;MAE1B,IAAI,OAAOD,EAAE,KAAK,QAAQ,EAAE;QACxBJ,cAAc,CAACM,IAAI,CAACF,EAAE,CAAC;MAC3B;IACJ;EACJ,CAAC,CAAC;EAEF,OAAOJ,cAAc;AACzB,CAAC","ignoreList":[]}

package/lib/types/components/radio-button/RadioButton.d.ts CHANGED Viewed

@@ -20,6 +20,10 @@ export type RadioButtonProps = {
      * An element that should be displayed on the right side of the label.
      */
     rightElement?: ReactNode;
+    /**
+     * Whether the rightElement should only be displayed when the RadioButton is checked
+     */
+    shouldShowRightElementOnlyOnChecked?: boolean;
 };
 declare const RadioButton: FC<RadioButtonProps>;
 export default RadioButton;

package/lib/types/components/radio-button/RadioButton.styles.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import { RadioButtonRightElementMargin } from '../../types/radioButton';
 type StyledRadioButtonProps = WithTheme<{
     $isDisabled: boolean;
+    $radioButtonRightElementMargin: RadioButtonRightElementMargin;
 }>;
 export declare const StyledRadioButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonProps>> & string;
 export declare const StyledRadioButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts CHANGED Viewed

@@ -1,8 +1,15 @@
 import React, { ReactNode } from 'react';
 type IUpdateSelectedRadioButtonId = (id: string | undefined) => void;
+type IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;
+type IRadioButtonRightElements = {
+    id: string;
+    hasRightElement: boolean;
+}[];
 interface IRadioButtonGroupContext {
     selectedRadioButtonId: string | undefined;
     updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;
+    radioButtonRightElements: IRadioButtonRightElements;
+    updateHasRightElement?: IUpdateHasRightElement;
     radioButtonsCanBeUnchecked?: boolean;
 }
 export declare const RadioButtonGroupContext: React.Context<IRadioButtonGroupContext>;

package/lib/types/types/radioButton.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export interface RadioButtonItem {
     id: string;
     isChecked: boolean;
 }
+export type RadioButtonRightElementMargin = 'NONE' | 'TOP' | 'BOTTOM' | 'BOTH';

package/lib/types/utils/radioButton.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ReactNode } from 'react';
2	+ export declare const getRadioButtonOrder: (children: ReactNode) => string[];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.853",
+    "version": "5.0.0-beta.854",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2b1d4ed0e5e55fbc92518238c646ba74acddfcf4"
+    "gitHead": "c9809fb46a1b955cbf1ee159fcfd7f767fa855ea"
 }