@chayns-components/core 5.0.0-beta.205 → 5.0.0-beta.206
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 +3 -1
- package/lib/components/radio-button/RadioButton.js.map +1 -1
- package/lib/components/radio-button/RadioButton.styles.d.ts +6 -1
- package/lib/components/radio-button/RadioButton.styles.js +27 -43
- package/lib/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/components/slider/Slider.styles.js +1 -0
- package/lib/components/slider/Slider.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -56,10 +56,12 @@ const RadioButton = _ref => {
|
|
|
56
56
|
onClick: handleClick,
|
|
57
57
|
onMouseEnter: handleMouseEnter,
|
|
58
58
|
onMouseLeave: handleMouseLeave
|
|
59
|
+
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
|
|
60
|
+
isChecked: isMarked
|
|
59
61
|
}, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBoxMark, {
|
|
60
62
|
isHovered: isHovered,
|
|
61
63
|
isSelected: isMarked
|
|
62
|
-
}), /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
|
|
64
|
+
})), /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
|
|
63
65
|
type: "radio",
|
|
64
66
|
checked: isMarked,
|
|
65
67
|
onChange: () => {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["_react","_interopRequireWildcard","require","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RadioButton","_ref","isChecked","label","onChange","id","selectedRadioButtonId","updateSelectedRadioButtonId","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","prevState","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","onClick","onMouseEnter","onMouseLeave","StyledRadioButtonCheckBoxMark","isSelected","StyledRadioButtonCheckBox","type","checked","StyledRadioButtonLabel","displayName","_default","exports"],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n} from './RadioButton.styles';\nimport type { RadioButtonItem } from './types';\n\nexport type RadioButtonProps = {\n /**\n * Whether the radio button should be checked.\n */\n isChecked?: 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> = ({ isChecked, label, onChange, id }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId } =\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 (isChecked) {\n setInternalIsChecked(isChecked);\n }\n }, [isChecked]);\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 (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n\n setInternalIsChecked((prevState) => !prevState);\n }, [id, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = () => {\n setIsHovered(true);\n };\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonCheckBoxMark isHovered={isHovered} isSelected={isMarked} />\n <StyledRadioButtonCheckBox type=\"radio\" checked={isMarked} onChange={() => {}} />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButton>\n ),\n [handleClick, isHovered, isMarked, label]\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["_react","_interopRequireWildcard","require","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RadioButton","_ref","isChecked","label","onChange","id","selectedRadioButtonId","updateSelectedRadioButtonId","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","prevState","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","onClick","onMouseEnter","onMouseLeave","StyledRadioButtonPseudoCheckBox","StyledRadioButtonCheckBoxMark","isSelected","StyledRadioButtonCheckBox","type","checked","StyledRadioButtonLabel","displayName","_default","exports"],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n} from './RadioButton.styles';\nimport type { RadioButtonItem } from './types';\n\nexport type RadioButtonProps = {\n /**\n * Whether the radio button should be checked.\n */\n isChecked?: 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> = ({ isChecked, label, onChange, id }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId } =\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 (isChecked) {\n setInternalIsChecked(isChecked);\n }\n }, [isChecked]);\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 (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n\n setInternalIsChecked((prevState) => !prevState);\n }, [id, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = () => {\n setIsHovered(true);\n };\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonPseudoCheckBox isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark isHovered={isHovered} isSelected={isMarked} />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox type=\"radio\" checked={isMarked} onChange={() => {}} />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButton>\n ),\n [handleClick, isHovered, isMarked, label]\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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"}
|
|
@@ -2,7 +2,12 @@ export declare const StyledRadioButton: import("styled-components").StyledCompon
|
|
|
2
2
|
export declare const StyledRadioButtonCheckBox: import("styled-components").StyledComponent<"input", any, {
|
|
3
3
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const StyledRadioButtonPseudoCheckBox: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
isChecked: boolean;
|
|
7
|
+
} & {
|
|
8
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
9
|
+
}, never>;
|
|
10
|
+
export declare const StyledRadioButtonCheckBoxMark: import("styled-components").StyledComponent<"span", any, {
|
|
6
11
|
isHovered: boolean;
|
|
7
12
|
isSelected: boolean;
|
|
8
13
|
} & {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = void 0;
|
|
6
|
+
exports.StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
9
9
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -18,65 +18,49 @@ const StyledRadioButton = _styledComponents.default.span`
|
|
|
18
18
|
`;
|
|
19
19
|
exports.StyledRadioButton = StyledRadioButton;
|
|
20
20
|
const StyledRadioButtonCheckBox = _styledComponents.default.input`
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
opacity: 0;
|
|
22
|
+
`;
|
|
23
|
+
exports.StyledRadioButtonCheckBox = StyledRadioButtonCheckBox;
|
|
24
|
+
const StyledRadioButtonPseudoCheckBox = _styledComponents.default.div`
|
|
25
|
+
background-color: ${_ref => {
|
|
25
26
|
let {
|
|
26
|
-
theme
|
|
27
|
+
theme,
|
|
28
|
+
isChecked
|
|
27
29
|
} = _ref;
|
|
28
|
-
return theme['secondary-103'];
|
|
29
|
-
}};
|
|
30
|
-
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
31
|
-
content: '';
|
|
32
|
-
width: 13px;
|
|
33
|
-
height: 13px;
|
|
34
|
-
position: absolute;
|
|
35
|
-
border-radius: 100%;
|
|
36
|
-
top: 5.8px;
|
|
37
|
-
left: 0;
|
|
38
|
-
cursor: pointer !important;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:checked::before {
|
|
42
|
-
content: '';
|
|
43
|
-
width: 13px;
|
|
44
|
-
height: 13px;
|
|
45
|
-
background-color: ${_ref2 => {
|
|
46
|
-
let {
|
|
47
|
-
theme
|
|
48
|
-
} = _ref2;
|
|
49
|
-
return theme.secondary;
|
|
30
|
+
return isChecked ? theme.secondary : theme['secondary-103'];
|
|
50
31
|
}};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
32
|
+
opacity: 0.5;
|
|
33
|
+
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
34
|
+
width: 13px;
|
|
35
|
+
height: 13px;
|
|
36
|
+
position: absolute;
|
|
37
|
+
border-radius: 100%;
|
|
38
|
+
top: 22%;
|
|
39
|
+
left: -1%;
|
|
40
|
+
cursor: pointer !important;
|
|
57
41
|
`;
|
|
58
|
-
exports.
|
|
59
|
-
const StyledRadioButtonCheckBoxMark = _styledComponents.default.
|
|
42
|
+
exports.StyledRadioButtonPseudoCheckBox = StyledRadioButtonPseudoCheckBox;
|
|
43
|
+
const StyledRadioButtonCheckBoxMark = _styledComponents.default.span`
|
|
60
44
|
cursor: pointer;
|
|
61
45
|
background-color: transparent;
|
|
62
46
|
position: absolute;
|
|
63
|
-
top:
|
|
64
|
-
left:
|
|
47
|
+
top: 0;
|
|
48
|
+
left: 3px;
|
|
65
49
|
display: inline-block;
|
|
66
50
|
transform: rotate(35deg);
|
|
67
51
|
height: 9px;
|
|
68
|
-
width:
|
|
52
|
+
width: 5px;
|
|
69
53
|
border-bottom: 2px solid white;
|
|
70
54
|
border-right: 2px solid white;
|
|
71
55
|
border-top: transparent;
|
|
72
56
|
border-left: transparent;
|
|
73
57
|
z-index: 2;
|
|
74
58
|
|
|
75
|
-
${
|
|
59
|
+
${_ref2 => {
|
|
76
60
|
let {
|
|
77
61
|
isHovered,
|
|
78
62
|
isSelected
|
|
79
|
-
} =
|
|
63
|
+
} = _ref2;
|
|
80
64
|
if (isSelected) {
|
|
81
65
|
return (0, _styledComponents.css)`
|
|
82
66
|
opacity: 1;
|
|
@@ -94,10 +78,10 @@ const StyledRadioButtonCheckBoxMark = _styledComponents.default.input`
|
|
|
94
78
|
`;
|
|
95
79
|
exports.StyledRadioButtonCheckBoxMark = StyledRadioButtonCheckBoxMark;
|
|
96
80
|
const StyledRadioButtonLabel = _styledComponents.default.p`
|
|
97
|
-
color: ${
|
|
81
|
+
color: ${_ref3 => {
|
|
98
82
|
let {
|
|
99
83
|
theme
|
|
100
|
-
} =
|
|
84
|
+
} = _ref3;
|
|
101
85
|
return theme.text;
|
|
102
86
|
}};
|
|
103
87
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledRadioButton","styled","span","exports","StyledRadioButtonCheckBox","input","_ref","theme","
|
|
1
|
+
{"version":3,"file":"RadioButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledRadioButton","styled","span","exports","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","div","_ref","theme","isChecked","secondary","StyledRadioButtonCheckBoxMark","_ref2","isHovered","isSelected","css","StyledRadioButtonLabel","p","_ref3","text"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledRadioButton = styled.span`\n display: flex;\n gap: 5px;\n cursor: pointer;\n user-select: none;\n width: fit-content;\n align-items: center;\n position: relative;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n opacity: 0;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n background-color: ${({ theme, isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n isChecked ? theme.secondary : theme['secondary-103']};\n opacity: 0.5;\n border: 1px solid rgba(160, 160, 160, 0.3);\n width: 13px;\n height: 13px;\n position: absolute;\n border-radius: 100%;\n top: 22%;\n left: -1%;\n cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n isHovered: boolean;\n isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n cursor: pointer;\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 3px;\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\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSlider","styled","div","exports","StyledSliderInput","input","_ref","_theme$","_theme$2","_theme$3","_theme$4","theme","min","max","value","_ref2","_ref3"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n cursor: pointer;\n`;\n\ntype StyledSliderInputProps = WithTheme<{ min: number; max: number; value: number }>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n width: 100%;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n background: ${({ theme, min, max, value }: StyledSliderInputProps) =>\n `linear-gradient(\n to right,\n ${theme['409'] ?? ''} 0%,\n ${theme['409'] ?? ''}\n ${((value - min) / (max - min)) * 100}%,\n ${theme['403'] ?? ''}\n ${((value - min) / (max - min)) * 100}%,\n ${theme['403'] ?? ''}\n )`};\n\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n\n // slider thumb for firefox\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGhC,MAAMG,YAAY,GAAGC,yBAAM,CAACC,GAAI;AACvC;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,YAAA,GAAAA,YAAA;AAIK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACI,KAA8B;AACtE;AACA;AACA;AACA;AACA,kBAAkBC,IAAA;EAAA,IAAAC,OAAA,EAAAC,QAAA,EAAAC,QAAA,EAAAC,QAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,GAAG;IAAEC,GAAG;IAAEC;EAA8B,CAAC,GAAAR,IAAA;EAAA,OAC5D;AACT;AACA,cAAY,CAAAC,OAAA,GAAEI,KAAK,CAAC,KAAK,CAAC,cAAAJ,OAAA,cAAAA,OAAA,GAAI,EAAG;AACjC,cAAY,CAAAC,QAAA,GAAEG,KAAK,CAAC,KAAK,CAAC,cAAAH,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,cAAe,CAACM,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAY,CAAAH,QAAA,GAAEE,KAAK,CAAC,KAAK,CAAC,cAAAF,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,cAAe,CAACK,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAY,CAAAF,QAAA,GAAEC,KAAK,CAAC,KAAK,CAAC,cAAAD,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,UAAU;AAAA,CAAC;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BK,KAAA;EAAA,IAAC;IAAEJ;EAA8B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BK,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSlider","styled","div","exports","StyledSliderInput","input","_ref","_theme$","_theme$2","_theme$3","_theme$4","theme","min","max","value","_ref2","_ref3"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n cursor: pointer;\n`;\n\ntype StyledSliderInputProps = WithTheme<{ min: number; max: number; value: number }>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n width: 100%;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n background: ${({ theme, min, max, value }: StyledSliderInputProps) =>\n `linear-gradient(\n to right,\n ${theme['409'] ?? ''} 0%,\n ${theme['409'] ?? ''}\n ${((value - min) / (max - min)) * 100}%,\n ${theme['403'] ?? ''}\n ${((value - min) / (max - min)) * 100}%,\n ${theme['403'] ?? ''}\n )`};\n\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer !important;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n\n // slider thumb for firefox\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGhC,MAAMG,YAAY,GAAGC,yBAAM,CAACC,GAAI;AACvC;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,YAAA,GAAAA,YAAA;AAIK,MAAMI,iBAAiB,GAAGH,yBAAM,CAACI,KAA8B;AACtE;AACA;AACA;AACA;AACA,kBAAkBC,IAAA;EAAA,IAAAC,OAAA,EAAAC,QAAA,EAAAC,QAAA,EAAAC,QAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,GAAG;IAAEC,GAAG;IAAEC;EAA8B,CAAC,GAAAR,IAAA;EAAA,OAC5D;AACT;AACA,cAAY,CAAAC,OAAA,GAAEI,KAAK,CAAC,KAAK,CAAC,cAAAJ,OAAA,cAAAA,OAAA,GAAI,EAAG;AACjC,cAAY,CAAAC,QAAA,GAAEG,KAAK,CAAC,KAAK,CAAC,cAAAH,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,cAAe,CAACM,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAY,CAAAH,QAAA,GAAEE,KAAK,CAAC,KAAK,CAAC,cAAAF,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,cAAe,CAACK,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAY,CAAAF,QAAA,GAAEC,KAAK,CAAC,KAAK,CAAC,cAAAD,QAAA,cAAAA,QAAA,GAAI,EAAG;AACjC,UAAU;AAAA,CAAC;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BK,KAAA;EAAA,IAAC;IAAEJ;EAA8B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BK,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}
|
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.206",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "6081259182e9cb24a1d6320f12d7223eae3f8331"
|
|
68
68
|
}
|