@chayns-components/core 5.0.0-beta.852 → 5.0.0-beta.853
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.
- package/lib/cjs/components/radio-button/RadioButton.js +15 -8
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +12 -5
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +16 -9
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +28 -21
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/types/components/radio-button/RadioButton.d.ts +4 -0
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +6 -7
- package/package.json +2 -2
|
@@ -14,6 +14,7 @@ const RadioButton = ({
|
|
|
14
14
|
children,
|
|
15
15
|
label,
|
|
16
16
|
id,
|
|
17
|
+
rightElement,
|
|
17
18
|
isDisabled = false
|
|
18
19
|
}) => {
|
|
19
20
|
const {
|
|
@@ -51,26 +52,32 @@ const RadioButton = ({
|
|
|
51
52
|
setIsHovered(false);
|
|
52
53
|
};
|
|
53
54
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButton, {
|
|
55
|
+
$isDisabled: isDisabled
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
|
|
54
57
|
$isDisabled: isDisabled,
|
|
55
|
-
|
|
56
|
-
onMouseLeave: handleMouseLeave
|
|
57
|
-
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonWrapper, {
|
|
58
|
-
$isDisabled: isDisabled,
|
|
58
|
+
$isChecked: isMarked,
|
|
59
59
|
onClick: handleClick
|
|
60
|
-
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
|
|
61
|
-
$isDisabled: isDisabled,
|
|
62
|
-
$isChecked: isMarked
|
|
63
60
|
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBoxMark, {
|
|
61
|
+
onMouseEnter: handleMouseEnter,
|
|
62
|
+
onMouseLeave: handleMouseLeave,
|
|
64
63
|
$isHovered: isHovered,
|
|
65
64
|
$isSelected: isMarked,
|
|
66
65
|
$isDisabled: isDisabled
|
|
67
66
|
})), /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
|
|
67
|
+
onClick: handleClick,
|
|
68
|
+
onMouseEnter: handleMouseEnter,
|
|
69
|
+
onMouseLeave: handleMouseLeave,
|
|
68
70
|
disabled: isDisabled,
|
|
69
71
|
$isDisabled: isDisabled,
|
|
70
72
|
type: "radio",
|
|
71
73
|
checked: isMarked,
|
|
72
74
|
onChange: () => {}
|
|
73
|
-
}),
|
|
75
|
+
}), /*#__PURE__*/_react.default.createElement(_RadioButton.StyledLabelWrapper, null, label && /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonLabel, {
|
|
76
|
+
$isDisabled: isDisabled,
|
|
77
|
+
onClick: handleClick,
|
|
78
|
+
onMouseEnter: handleMouseEnter,
|
|
79
|
+
onMouseLeave: handleMouseLeave
|
|
80
|
+
}, label), rightElement && rightElement)), children && /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
|
|
74
81
|
initial: false
|
|
75
82
|
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledMotionRadioButtonChildren, {
|
|
76
83
|
animate: isMarked ? {
|
|
@@ -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","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","onMouseEnter","onMouseLeave","StyledRadioButtonWrapper","onClick","StyledRadioButtonPseudoCheckBox","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","onChange","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 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\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\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\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\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","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":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledRadioButtonWrapper = exports.StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = exports.StyledMotionRadioButtonChildren = void 0;
|
|
6
|
+
exports.StyledRadioButtonWrapper = exports.StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = exports.StyledMotionRadioButtonChildren = exports.StyledLabelWrapper = void 0;
|
|
7
7
|
var _framerMotion = require("framer-motion");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
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); }
|
|
@@ -24,10 +24,6 @@ const StyledRadioButtonWrapper = exports.StyledRadioButtonWrapper = _styledCompo
|
|
|
24
24
|
position: relative;
|
|
25
25
|
gap: 5px;
|
|
26
26
|
user-select: none;
|
|
27
|
-
|
|
28
|
-
cursor: ${({
|
|
29
|
-
$isDisabled
|
|
30
|
-
}) => $isDisabled ? 'default !important' : 'pointer !important'};
|
|
31
27
|
`;
|
|
32
28
|
const StyledRadioButtonCheckBox = exports.StyledRadioButtonCheckBox = _styledComponents.default.input`
|
|
33
29
|
opacity: 0;
|
|
@@ -98,6 +94,17 @@ const StyledRadioButtonLabel = exports.StyledRadioButtonLabel = _styledComponent
|
|
|
98
94
|
color: ${({
|
|
99
95
|
theme
|
|
100
96
|
}) => theme.text};
|
|
97
|
+
margin: 0;
|
|
98
|
+
cursor: ${({
|
|
99
|
+
$isDisabled
|
|
100
|
+
}) => $isDisabled ? 'default !important' : 'pointer !important'};
|
|
101
|
+
`;
|
|
102
|
+
const StyledLabelWrapper = exports.StyledLabelWrapper = _styledComponents.default.div`
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: space-between;
|
|
106
|
+
width: 100%;
|
|
107
|
+
gap: 12px;
|
|
101
108
|
`;
|
|
102
109
|
const StyledMotionRadioButtonChildren = exports.StyledMotionRadioButtonChildren = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
103
110
|
margin-left: 18px;
|
|
@@ -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","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\
|
|
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":"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","ignoreList":[]}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { AnimatePresence } from 'framer-motion';
|
|
2
2
|
import React, { useCallback, useContext, useMemo, useState } from 'react';
|
|
3
3
|
import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
|
|
4
|
-
import { StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
|
|
4
|
+
import { StyledLabelWrapper, StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
|
|
5
5
|
const RadioButton = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
8
|
label,
|
|
9
9
|
id,
|
|
10
|
+
rightElement,
|
|
10
11
|
isDisabled = false
|
|
11
12
|
} = _ref;
|
|
12
13
|
const {
|
|
@@ -44,26 +45,32 @@ const RadioButton = _ref => {
|
|
|
44
45
|
setIsHovered(false);
|
|
45
46
|
};
|
|
46
47
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
|
|
48
|
+
$isDisabled: isDisabled
|
|
49
|
+
}, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, null, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
|
|
47
50
|
$isDisabled: isDisabled,
|
|
48
|
-
|
|
49
|
-
onMouseLeave: handleMouseLeave
|
|
50
|
-
}, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, {
|
|
51
|
-
$isDisabled: isDisabled,
|
|
51
|
+
$isChecked: isMarked,
|
|
52
52
|
onClick: handleClick
|
|
53
|
-
}, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
|
|
54
|
-
$isDisabled: isDisabled,
|
|
55
|
-
$isChecked: isMarked
|
|
56
53
|
}, /*#__PURE__*/React.createElement(StyledRadioButtonCheckBoxMark, {
|
|
54
|
+
onMouseEnter: handleMouseEnter,
|
|
55
|
+
onMouseLeave: handleMouseLeave,
|
|
57
56
|
$isHovered: isHovered,
|
|
58
57
|
$isSelected: isMarked,
|
|
59
58
|
$isDisabled: isDisabled
|
|
60
59
|
})), /*#__PURE__*/React.createElement(StyledRadioButtonCheckBox, {
|
|
60
|
+
onClick: handleClick,
|
|
61
|
+
onMouseEnter: handleMouseEnter,
|
|
62
|
+
onMouseLeave: handleMouseLeave,
|
|
61
63
|
disabled: isDisabled,
|
|
62
64
|
$isDisabled: isDisabled,
|
|
63
65
|
type: "radio",
|
|
64
66
|
checked: isMarked,
|
|
65
67
|
onChange: () => {}
|
|
66
|
-
}),
|
|
68
|
+
}), /*#__PURE__*/React.createElement(StyledLabelWrapper, null, label && /*#__PURE__*/React.createElement(StyledRadioButtonLabel, {
|
|
69
|
+
$isDisabled: isDisabled,
|
|
70
|
+
onClick: handleClick,
|
|
71
|
+
onMouseEnter: handleMouseEnter,
|
|
72
|
+
onMouseLeave: handleMouseLeave
|
|
73
|
+
}, label), rightElement && rightElement)), children && /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
67
74
|
initial: false
|
|
68
75
|
}, /*#__PURE__*/React.createElement(StyledMotionRadioButtonChildren, {
|
|
69
76
|
animate: isMarked ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useMemo","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","
|
|
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":[]}
|
|
@@ -19,39 +19,32 @@ export const StyledRadioButtonWrapper = styled.div`
|
|
|
19
19
|
position: relative;
|
|
20
20
|
gap: 5px;
|
|
21
21
|
user-select: none;
|
|
22
|
-
|
|
23
|
-
cursor: ${_ref2 => {
|
|
24
|
-
let {
|
|
25
|
-
$isDisabled
|
|
26
|
-
} = _ref2;
|
|
27
|
-
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
28
|
-
}};
|
|
29
22
|
`;
|
|
30
23
|
export const StyledRadioButtonCheckBox = styled.input`
|
|
31
24
|
opacity: 0;
|
|
32
25
|
height: 15px;
|
|
33
26
|
width: 15px;
|
|
34
|
-
cursor: ${
|
|
27
|
+
cursor: ${_ref2 => {
|
|
35
28
|
let {
|
|
36
29
|
$isDisabled
|
|
37
|
-
} =
|
|
30
|
+
} = _ref2;
|
|
38
31
|
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
39
32
|
}};
|
|
40
33
|
`;
|
|
41
34
|
export const StyledRadioButtonPseudoCheckBox = styled.div`
|
|
42
|
-
background-color: ${
|
|
35
|
+
background-color: ${_ref3 => {
|
|
43
36
|
let {
|
|
44
37
|
theme,
|
|
45
38
|
$isChecked
|
|
46
|
-
} =
|
|
39
|
+
} = _ref3;
|
|
47
40
|
return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
|
|
48
41
|
}};
|
|
49
42
|
opacity: 1;
|
|
50
43
|
border: 1px solid
|
|
51
|
-
rgba(${
|
|
44
|
+
rgba(${_ref4 => {
|
|
52
45
|
let {
|
|
53
46
|
theme
|
|
54
|
-
} =
|
|
47
|
+
} = _ref4;
|
|
55
48
|
return theme['409-rgb'];
|
|
56
49
|
}}, 0.5);
|
|
57
50
|
width: 15px;
|
|
@@ -60,10 +53,10 @@ export const StyledRadioButtonPseudoCheckBox = styled.div`
|
|
|
60
53
|
border-radius: 100%;
|
|
61
54
|
top: 50%;
|
|
62
55
|
transform: translateY(-50%);
|
|
63
|
-
cursor: ${
|
|
56
|
+
cursor: ${_ref5 => {
|
|
64
57
|
let {
|
|
65
58
|
$isDisabled
|
|
66
|
-
} =
|
|
59
|
+
} = _ref5;
|
|
67
60
|
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
68
61
|
}};
|
|
69
62
|
`;
|
|
@@ -81,18 +74,18 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
|
|
|
81
74
|
border-top: transparent;
|
|
82
75
|
border-left: transparent;
|
|
83
76
|
z-index: 2;
|
|
84
|
-
cursor: ${
|
|
77
|
+
cursor: ${_ref6 => {
|
|
85
78
|
let {
|
|
86
79
|
$isDisabled
|
|
87
|
-
} =
|
|
80
|
+
} = _ref6;
|
|
88
81
|
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
89
82
|
}};
|
|
90
83
|
|
|
91
|
-
${
|
|
84
|
+
${_ref7 => {
|
|
92
85
|
let {
|
|
93
86
|
$isHovered,
|
|
94
87
|
$isSelected
|
|
95
|
-
} =
|
|
88
|
+
} = _ref7;
|
|
96
89
|
if ($isSelected) {
|
|
97
90
|
return css`
|
|
98
91
|
opacity: 1;
|
|
@@ -109,12 +102,26 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
|
|
|
109
102
|
}}
|
|
110
103
|
`;
|
|
111
104
|
export const StyledRadioButtonLabel = styled.p`
|
|
112
|
-
color: ${
|
|
105
|
+
color: ${_ref8 => {
|
|
113
106
|
let {
|
|
114
107
|
theme
|
|
115
|
-
} =
|
|
108
|
+
} = _ref8;
|
|
116
109
|
return theme.text;
|
|
117
110
|
}};
|
|
111
|
+
margin: 0;
|
|
112
|
+
cursor: ${_ref9 => {
|
|
113
|
+
let {
|
|
114
|
+
$isDisabled
|
|
115
|
+
} = _ref9;
|
|
116
|
+
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
117
|
+
}};
|
|
118
|
+
`;
|
|
119
|
+
export const StyledLabelWrapper = styled.div`
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: space-between;
|
|
123
|
+
width: 100%;
|
|
124
|
+
gap: 12px;
|
|
118
125
|
`;
|
|
119
126
|
export const StyledMotionRadioButtonChildren = styled(motion.div)`
|
|
120
127
|
margin-left: 18px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","StyledRadioButtonWrapper","div","
|
|
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":[]}
|
|
@@ -16,6 +16,10 @@ export type RadioButtonProps = {
|
|
|
16
16
|
* The label that should be displayed next to the radio button.
|
|
17
17
|
*/
|
|
18
18
|
label?: string;
|
|
19
|
+
/**
|
|
20
|
+
* An element that should be displayed on the right side of the label.
|
|
21
|
+
*/
|
|
22
|
+
rightElement?: ReactNode;
|
|
19
23
|
};
|
|
20
24
|
declare const RadioButton: FC<RadioButtonProps>;
|
|
21
25
|
export default RadioButton;
|
|
@@ -3,10 +3,7 @@ type StyledRadioButtonProps = WithTheme<{
|
|
|
3
3
|
$isDisabled: boolean;
|
|
4
4
|
}>;
|
|
5
5
|
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;
|
|
6
|
-
|
|
7
|
-
$isDisabled: boolean;
|
|
8
|
-
}>;
|
|
9
|
-
export declare const StyledRadioButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRadioButtonWrapperProps>> & string;
|
|
6
|
+
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;
|
|
10
7
|
type StyledRadioButtonCheckBoxProps = WithTheme<{
|
|
11
8
|
$isDisabled: boolean;
|
|
12
9
|
}>;
|
|
@@ -22,9 +19,11 @@ type StyledRadioButtonCheckBoxMarkProps = WithTheme<{
|
|
|
22
19
|
$isDisabled: boolean;
|
|
23
20
|
}>;
|
|
24
21
|
export declare const StyledRadioButtonCheckBoxMark: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonCheckBoxMarkProps>> & string;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
22
|
+
type StyledRadioButtonLabelProps = WithTheme<{
|
|
23
|
+
$isDisabled: boolean;
|
|
24
|
+
}>;
|
|
25
|
+
export declare const StyledRadioButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, StyledRadioButtonLabelProps>> & string;
|
|
26
|
+
export declare const StyledLabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
28
27
|
export declare const StyledMotionRadioButtonChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
|
|
29
28
|
slot?: string | undefined;
|
|
30
29
|
title?: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.853",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "2b1d4ed0e5e55fbc92518238c646ba74acddfcf4"
|
|
89
89
|
}
|