@chayns-components/core 5.0.0-beta.527 → 5.0.0-beta.528
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/components/radio-button/RadioButton.js +8 -3
- package/lib/components/radio-button/RadioButton.js.map +1 -1
- package/lib/components/radio-button/RadioButton.styles.d.ts +10 -4
- package/lib/components/radio-button/RadioButton.styles.js +37 -18
- package/lib/components/radio-button/RadioButton.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -59,16 +59,21 @@ const RadioButton = _ref => {
|
|
|
59
59
|
};
|
|
60
60
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledRadioButton, {
|
|
61
61
|
$isDisabled: isDisabled,
|
|
62
|
-
onClick: handleClick,
|
|
63
62
|
onMouseEnter: handleMouseEnter,
|
|
64
63
|
onMouseLeave: handleMouseLeave
|
|
65
|
-
}, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper,
|
|
64
|
+
}, /*#__PURE__*/React.createElement(StyledRadioButtonWrapper, {
|
|
65
|
+
$isDisabled: isDisabled,
|
|
66
|
+
onClick: handleClick
|
|
67
|
+
}, /*#__PURE__*/React.createElement(StyledRadioButtonPseudoCheckBox, {
|
|
68
|
+
$isDisabled: isDisabled,
|
|
66
69
|
$isChecked: isMarked
|
|
67
70
|
}, /*#__PURE__*/React.createElement(StyledRadioButtonCheckBoxMark, {
|
|
68
71
|
$isHovered: isHovered,
|
|
69
|
-
$isSelected: isMarked
|
|
72
|
+
$isSelected: isMarked,
|
|
73
|
+
$isDisabled: isDisabled
|
|
70
74
|
})), /*#__PURE__*/React.createElement(StyledRadioButtonCheckBox, {
|
|
71
75
|
disabled: isDisabled,
|
|
76
|
+
$isDisabled: isDisabled,
|
|
72
77
|
type: "radio",
|
|
73
78
|
checked: isMarked,
|
|
74
79
|
onChange: () => {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","isChecked","label","onChange","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","setSelectedRadioButtonId","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","undefined","current","handleClick","prevState","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","isChecked","label","onChange","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","setSelectedRadioButtonId","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","undefined","current","handleClick","prevState","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","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 useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react';\nimport type { RadioButtonItem } from '../../types/radioButton';\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 radio button should be checked.\n */\n isChecked?: boolean;\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 * Function to be executed when a button is checked.\n */\n onChange?: (item: RadioButtonItem) => void;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n isChecked,\n label,\n onChange,\n id,\n isDisabled = false,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, setSelectedRadioButtonId } =\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 isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n if (typeof isChecked === 'boolean') {\n if (typeof setSelectedRadioButtonId === 'function') {\n setSelectedRadioButtonId(isChecked ? id : undefined);\n } else {\n setInternalIsChecked(isChecked);\n }\n }\n }, [id, isChecked, setSelectedRadioButtonId]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof onChange === 'function') {\n onChange({ isChecked: isMarked, id });\n }\n }, [id, isMarked, onChange]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n\n setInternalIsChecked((prevState) => !prevState);\n }, [id, isDisabled, 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":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAERC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AAEd,SAASC,uBAAuB,QAAQ,uCAAuC;AAC/E,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,yBAAyB,EACzBC,6BAA6B,EAC7BC,sBAAsB,EACtBC,+BAA+B,EAC/BC,wBAAwB,QACrB,sBAAsB;AA6B7B,MAAMC,WAAiC,GAAGC,IAAA,IAOpC;EAAA,IAPqC;IACvCC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,QAAQ;IACRC,EAAE;IACFC,UAAU,GAAG;EACjB,CAAC,GAAAN,IAAA;EACG,MAAM;IAAEO,qBAAqB;IAAEC,2BAA2B;IAAEC;EAAyB,CAAC,GAClFvB,UAAU,CAACK,uBAAuB,CAAC;EAEvC,MAAM,CAACmB,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM,CAACsB,SAAS,EAAEC,YAAY,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMwB,SAAS,GAAG,OAAON,2BAA2B,KAAK,UAAU;EAEnE,MAAMO,QAAQ,GAAGD,SAAS,GAAGP,qBAAqB,KAAKF,EAAE,GAAGK,iBAAiB;EAE7E,MAAMM,kBAAkB,GAAG3B,MAAM,CAAC,IAAI,CAAC;EAEvCF,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOe,SAAS,KAAK,SAAS,EAAE;MAChC,IAAI,OAAOO,wBAAwB,KAAK,UAAU,EAAE;QAChDA,wBAAwB,CAACP,SAAS,GAAGG,EAAE,GAAGY,SAAS,CAAC;MACxD,CAAC,MAAM;QACHN,oBAAoB,CAACT,SAAS,CAAC;MACnC;IACJ;EACJ,CAAC,EAAE,CAACG,EAAE,EAAEH,SAAS,EAAEO,wBAAwB,CAAC,CAAC;EAE7CtB,SAAS,CAAC,MAAM;IACZ,IAAI6B,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MACvCA,QAAQ,CAAC;QAAEF,SAAS,EAAEa,QAAQ;QAAEV;MAAG,CAAC,CAAC;IACzC;EACJ,CAAC,EAAE,CAACA,EAAE,EAAEU,QAAQ,EAAEX,QAAQ,CAAC,CAAC;EAE5B,MAAMe,WAAW,GAAGlC,WAAW,CAAC,MAAM;IAClC,IAAIqB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAOE,2BAA2B,KAAK,UAAU,EAAE;MACnDA,2BAA2B,CAACH,EAAE,CAAC;IACnC;IAEAM,oBAAoB,CAAES,SAAS,IAAK,CAACA,SAAS,CAAC;EACnD,CAAC,EAAE,CAACf,EAAE,EAAEC,UAAU,EAAEE,2BAA2B,CAAC,CAAC;EAEjD,MAAMa,gBAAgB,GAAGpC,WAAW,CAAC,MAAM;IACvC,IAAI,CAACqB,UAAU,EAAE;MACbO,YAAY,CAAC,IAAI,CAAC;IACtB;EACJ,CAAC,EAAE,CAACP,UAAU,CAAC,CAAC;EAEhB,MAAMgB,gBAAgB,GAAGA,CAAA,KAAM;IAC3BT,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC;EAED,OAAOzB,OAAO,CACV,mBACIJ,KAAA,CAAAuC,aAAA,CAAC9B,iBAAiB;IACd+B,WAAW,EAAElB,UAAW;IACxBmB,YAAY,EAAEJ,gBAAiB;IAC/BK,YAAY,EAAEJ;EAAiB,gBAE/BtC,KAAA,CAAAuC,aAAA,CAACzB,wBAAwB;IAAC0B,WAAW,EAAElB,UAAW;IAACqB,OAAO,EAAER;EAAY,gBACpEnC,KAAA,CAAAuC,aAAA,CAAC1B,+BAA+B;IAAC2B,WAAW,EAAElB,UAAW;IAACsB,UAAU,EAAEb;EAAS,gBAC3E/B,KAAA,CAAAuC,aAAA,CAAC5B,6BAA6B;IAC1BkC,UAAU,EAAEjB,SAAU;IACtBkB,WAAW,EAAEf,QAAS;IACtBS,WAAW,EAAElB;EAAW,CAC3B,CAC4B,CAAC,eAClCtB,KAAA,CAAAuC,aAAA,CAAC7B,yBAAyB;IACtBqC,QAAQ,EAAEzB,UAAW;IACrBkB,WAAW,EAAElB,UAAW;IACxB0B,IAAI,EAAC,OAAO;IACZC,OAAO,EAAElB,QAAS;IAClBX,QAAQ,EAAEA,CAAA,KAAM,CAAC;EAAE,CACtB,CAAC,EACDD,KAAK,iBAAInB,KAAA,CAAAuC,aAAA,CAAC3B,sBAAsB,QAAEO,KAA8B,CAC3C,CAAC,EAC1BF,QAAQ,iBACLjB,KAAA,CAAAuC,aAAA,CAACxC,eAAe;IAACmD,OAAO,EAAE;EAAM,gBAC5BlD,KAAA,CAAAuC,aAAA,CAAC/B,+BAA+B;IAC5B2C,OAAO,EACHpB,QAAQ,GACF;MAAEqB,OAAO,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAO,CAAC,GAC9B;MAAED,OAAO,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CACjC;IACDC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BtC,QAC4B,CACpB,CAEN,CACtB,EACD,CAACA,QAAQ,EAAEkB,WAAW,EAAEE,gBAAgB,EAAEf,UAAU,EAAEM,SAAS,EAAEG,QAAQ,EAAEZ,KAAK,CACpF,CAAC;AACL,CAAC;AAEDJ,WAAW,CAACyC,WAAW,GAAG,aAAa;AAEvC,eAAezC,WAAW"}
|
|
@@ -5,17 +5,23 @@ type StyledRadioButtonProps = WithTheme<{
|
|
|
5
5
|
$isDisabled: boolean;
|
|
6
6
|
}>;
|
|
7
7
|
export declare const StyledRadioButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonProps>>;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
type StyledRadioButtonWrapperProps = WithTheme<{
|
|
9
|
+
$isDisabled: boolean;
|
|
10
|
+
}>;
|
|
11
|
+
export declare const StyledRadioButtonWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRadioButtonWrapperProps>>;
|
|
12
|
+
type StyledRadioButtonCheckBoxProps = WithTheme<{
|
|
13
|
+
$isDisabled: boolean;
|
|
14
|
+
}>;
|
|
15
|
+
export declare const StyledRadioButtonCheckBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledRadioButtonCheckBoxProps>>;
|
|
12
16
|
type StyledRadioButtonPseudoCheckBoxProps = WithTheme<{
|
|
13
17
|
$isChecked: boolean;
|
|
18
|
+
$isDisabled: boolean;
|
|
14
19
|
}>;
|
|
15
20
|
export declare const StyledRadioButtonPseudoCheckBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRadioButtonPseudoCheckBoxProps>>;
|
|
16
21
|
type StyledRadioButtonCheckBoxMarkProps = WithTheme<{
|
|
17
22
|
$isHovered: boolean;
|
|
18
23
|
$isSelected: boolean;
|
|
24
|
+
$isDisabled: boolean;
|
|
19
25
|
}>;
|
|
20
26
|
export declare const StyledRadioButtonCheckBoxMark: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonCheckBoxMarkProps>>;
|
|
21
27
|
export declare const StyledRadioButtonLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
|
|
@@ -4,19 +4,13 @@ export const StyledRadioButton = styled.span`
|
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
|
|
7
|
-
user-select: none;
|
|
8
7
|
width: fit-content;
|
|
9
8
|
position: relative;
|
|
10
|
-
|
|
9
|
+
|
|
10
|
+
opacity: ${_ref => {
|
|
11
11
|
let {
|
|
12
12
|
$isDisabled
|
|
13
13
|
} = _ref;
|
|
14
|
-
return $isDisabled ? 'default !important' : 'pointer';
|
|
15
|
-
}};
|
|
16
|
-
opacity: ${_ref2 => {
|
|
17
|
-
let {
|
|
18
|
-
$isDisabled
|
|
19
|
-
} = _ref2;
|
|
20
14
|
return $isDisabled ? 0.5 : 1;
|
|
21
15
|
}};
|
|
22
16
|
`;
|
|
@@ -25,26 +19,40 @@ export const StyledRadioButtonWrapper = styled.div`
|
|
|
25
19
|
align-items: center;
|
|
26
20
|
position: relative;
|
|
27
21
|
gap: 5px;
|
|
22
|
+
user-select: none;
|
|
23
|
+
|
|
24
|
+
cursor: ${_ref2 => {
|
|
25
|
+
let {
|
|
26
|
+
$isDisabled
|
|
27
|
+
} = _ref2;
|
|
28
|
+
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
29
|
+
}};
|
|
28
30
|
`;
|
|
29
31
|
export const StyledRadioButtonCheckBox = styled.input`
|
|
30
32
|
opacity: 0;
|
|
31
33
|
height: 15px;
|
|
32
34
|
width: 15px;
|
|
35
|
+
cursor: ${_ref3 => {
|
|
36
|
+
let {
|
|
37
|
+
$isDisabled
|
|
38
|
+
} = _ref3;
|
|
39
|
+
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
40
|
+
}};
|
|
33
41
|
`;
|
|
34
42
|
export const StyledRadioButtonPseudoCheckBox = styled.div`
|
|
35
|
-
background-color: ${
|
|
43
|
+
background-color: ${_ref4 => {
|
|
36
44
|
let {
|
|
37
45
|
theme,
|
|
38
46
|
$isChecked
|
|
39
|
-
} =
|
|
47
|
+
} = _ref4;
|
|
40
48
|
return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
|
|
41
49
|
}};
|
|
42
50
|
opacity: 1;
|
|
43
51
|
border: 1px solid
|
|
44
|
-
rgba(${
|
|
52
|
+
rgba(${_ref5 => {
|
|
45
53
|
let {
|
|
46
54
|
theme
|
|
47
|
-
} =
|
|
55
|
+
} = _ref5;
|
|
48
56
|
return theme['409-rgb'];
|
|
49
57
|
}}, 0.5);
|
|
50
58
|
width: 15px;
|
|
@@ -53,10 +61,14 @@ export const StyledRadioButtonPseudoCheckBox = styled.div`
|
|
|
53
61
|
border-radius: 100%;
|
|
54
62
|
top: 50%;
|
|
55
63
|
transform: translateY(-50%);
|
|
56
|
-
cursor:
|
|
64
|
+
cursor: ${_ref6 => {
|
|
65
|
+
let {
|
|
66
|
+
$isDisabled
|
|
67
|
+
} = _ref6;
|
|
68
|
+
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
69
|
+
}};
|
|
57
70
|
`;
|
|
58
71
|
export const StyledRadioButtonCheckBoxMark = styled.span`
|
|
59
|
-
cursor: pointer;
|
|
60
72
|
background-color: transparent;
|
|
61
73
|
position: absolute;
|
|
62
74
|
top: 1px;
|
|
@@ -70,12 +82,18 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
|
|
|
70
82
|
border-top: transparent;
|
|
71
83
|
border-left: transparent;
|
|
72
84
|
z-index: 2;
|
|
85
|
+
cursor: ${_ref7 => {
|
|
86
|
+
let {
|
|
87
|
+
$isDisabled
|
|
88
|
+
} = _ref7;
|
|
89
|
+
return $isDisabled ? 'default !important' : 'pointer !important';
|
|
90
|
+
}};
|
|
73
91
|
|
|
74
|
-
${
|
|
92
|
+
${_ref8 => {
|
|
75
93
|
let {
|
|
76
94
|
$isHovered,
|
|
77
95
|
$isSelected
|
|
78
|
-
} =
|
|
96
|
+
} = _ref8;
|
|
79
97
|
if ($isSelected) {
|
|
80
98
|
return css`
|
|
81
99
|
opacity: 1;
|
|
@@ -92,14 +110,15 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
|
|
|
92
110
|
}}
|
|
93
111
|
`;
|
|
94
112
|
export const StyledRadioButtonLabel = styled.p`
|
|
95
|
-
color: ${
|
|
113
|
+
color: ${_ref9 => {
|
|
96
114
|
let {
|
|
97
115
|
theme
|
|
98
|
-
} =
|
|
116
|
+
} = _ref9;
|
|
99
117
|
return theme.text;
|
|
100
118
|
}};
|
|
101
119
|
`;
|
|
102
120
|
export const StyledMotionRadioButtonChildren = styled(motion.div)`
|
|
103
121
|
margin-left: 18px;
|
|
122
|
+
cursor: text;
|
|
104
123
|
`;
|
|
105
124
|
//# sourceMappingURL=RadioButton.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","
|
|
1
|
+
{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","StyledRadioButtonWrapper","div","_ref2","StyledRadioButtonCheckBox","input","_ref3","StyledRadioButtonPseudoCheckBox","_ref4","theme","$isChecked","_ref5","_ref6","StyledRadioButtonCheckBoxMark","_ref7","_ref8","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref9","text","StyledMotionRadioButtonChildren"],"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 width: fit-content;\n position: relative;\n\n opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledRadioButtonWrapperProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonWrapper = styled.div<StyledRadioButtonWrapperProps>`\n display: flex;\n align-items: center;\n position: relative;\n gap: 5px;\n user-select: none;\n\n cursor: ${({ $isDisabled }: StyledRadioButtonWrapperProps) =>\n $isDisabled ? 'default !important' : 'pointer !important'};\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<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n\nexport const StyledMotionRadioButtonChildren = styled(motion.div)`\n margin-left: 18px;\n cursor: text;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA6B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACpF,CAAC;AAID,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,GAAmC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEH;EAA2C,CAAC,GAAAG,KAAA;EAAA,OACrDH,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA,CAAC;AAClE,CAAC;AAID,OAAO,MAAMI,yBAAyB,GAAGT,MAAM,CAACU,KAAsC;AACtF;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEN;EAA4C,CAAC,GAAAM,KAAA;EAAA,OACtDN,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA,CAAC;AAClE,CAAC;AAOD,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACO,GAA0C;AAChG,wBAAwBM,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcG,KAAA;EAAA,IAAC;IAAEZ;EAAkD,CAAC,GAAAY,KAAA;EAAA,OAC5DZ,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA,CAAC;AAClE,CAAC;AAQD,OAAO,MAAMa,6BAA6B,GAAGlB,MAAM,CAACG,IAAyC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcgB,KAAA;EAAA,IAAC;IAAEd;EAAgD,CAAC,GAAAc,KAAA;EAAA,OAC1Dd,WAAW,GAAG,oBAAoB,GAAG,oBAAoB;AAAA,CAAC;AAClE;AACA,MAAMe,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,OAAOrB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,IAAIoB,UAAU,EAAE;IACZ,OAAOpB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAID,OAAO,MAAMsB,sBAAsB,GAAGvB,MAAM,CAACwB,CAA+B;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAEX;EAAmC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,IAAI;AAAA,CAAC;AACpE,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAG3B,MAAM,CAACD,MAAM,CAACQ,GAAG,CAAE;AAClE;AACA;AACA,CAAC"}
|
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.528",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "03985e61e17724231a1da888bc5ccbca19b7c2ad"
|
|
77
77
|
}
|