@chayns-components/core 5.0.0-beta.623 → 5.0.0-beta.625
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/checkbox/Checkbox.styles.js +6 -5
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/cjs/utils/checkBox.js +29 -0
- package/lib/cjs/utils/checkBox.js.map +1 -0
- package/lib/esm/components/checkbox/Checkbox.styles.js +6 -5
- package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/utils/checkBox.js +22 -0
- package/lib/esm/utils/checkBox.js.map +1 -0
- package/lib/types/utils/checkBox.d.ts +1 -0
- package/package.json +2 -2
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
var _checkBox = require("../../utils/checkBox");
|
|
8
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); }
|
|
9
10
|
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; }
|
|
10
11
|
const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
|
|
@@ -43,7 +44,7 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
43
44
|
box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
|
|
44
45
|
height: 16px;
|
|
45
46
|
left: 7px;
|
|
46
|
-
top: ${$lineHeight ? `${Number(theme.fontSize)
|
|
47
|
+
top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
|
|
47
48
|
transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
|
|
48
49
|
transition: transform 0.2s ease;
|
|
49
50
|
width: 16px;
|
|
@@ -53,7 +54,7 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
53
54
|
height: 10px;
|
|
54
55
|
left: 2px;
|
|
55
56
|
opacity: ${$isChecked ? 1 : 0};
|
|
56
|
-
top: ${$lineHeight ? `${Number(theme.fontSize)
|
|
57
|
+
top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
|
|
57
58
|
transform: rotateZ(37deg) translateY(-50%);
|
|
58
59
|
transition: opacity 0.2s ease;
|
|
59
60
|
width: 5.5px;
|
|
@@ -99,10 +100,10 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
|
|
|
99
100
|
}) => $shouldShowAsSwitch ? '28px' : '15px'};
|
|
100
101
|
${({
|
|
101
102
|
$lineHeight,
|
|
102
|
-
theme
|
|
103
|
+
theme,
|
|
104
|
+
$shouldShowAsSwitch
|
|
103
105
|
}) => $lineHeight ? (0, _styledComponents.css)`
|
|
104
|
-
top: ${Number(theme.fontSize)
|
|
105
|
-
transform: translateY(-50%);
|
|
106
|
+
top: ${(0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
|
|
106
107
|
` : (0, _styledComponents.css)`
|
|
107
108
|
top: 50%;
|
|
108
109
|
transform: translateY(-50%);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n 5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getCheckBoxPosition = void 0;
|
|
7
|
+
const getCheckBoxPosition = fontSize => {
|
|
8
|
+
const position = {
|
|
9
|
+
30: 17,
|
|
10
|
+
25.5: 14,
|
|
11
|
+
24: 12,
|
|
12
|
+
20: 8,
|
|
13
|
+
19: 8,
|
|
14
|
+
18: 6,
|
|
15
|
+
17: 7,
|
|
16
|
+
16: 5,
|
|
17
|
+
15: 4,
|
|
18
|
+
14: 4,
|
|
19
|
+
13: 3,
|
|
20
|
+
12: 1,
|
|
21
|
+
11: 1,
|
|
22
|
+
10: 0,
|
|
23
|
+
9: -1,
|
|
24
|
+
8: -1
|
|
25
|
+
};
|
|
26
|
+
return position[fontSize];
|
|
27
|
+
};
|
|
28
|
+
exports.getCheckBoxPosition = getCheckBoxPosition;
|
|
29
|
+
//# sourceMappingURL=checkBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkBox.js","names":["getCheckBoxPosition","fontSize","position","exports"],"sources":["../../../src/utils/checkBox.ts"],"sourcesContent":["export const getCheckBoxPosition = (fontSize: number) => {\n const position: { [key: number]: number } = {\n 30: 17,\n 25.5: 14,\n 24: 12,\n 20: 8,\n 19: 8,\n 18: 6,\n 17: 7,\n 16: 5,\n 15: 4,\n 14: 4,\n 13: 3,\n 12: 1,\n 11: 1,\n 10: 0,\n 9: -1,\n 8: -1,\n };\n\n return position[fontSize];\n};\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAIC,QAAgB,IAAK;EACrD,MAAMC,QAAmC,GAAG;IACxC,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC;EACR,CAAC;EAED,OAAOA,QAAQ,CAACD,QAAQ,CAAC;AAC7B,CAAC;AAACE,OAAA,CAAAH,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
+
import { getCheckBoxPosition } from '../../utils/checkBox';
|
|
2
3
|
export const StyledCheckbox = styled.div`
|
|
3
4
|
align-items: center;
|
|
4
5
|
display: flex;
|
|
@@ -49,7 +50,7 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
49
50
|
box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
|
|
50
51
|
height: 16px;
|
|
51
52
|
left: 7px;
|
|
52
|
-
top: ${$lineHeight ? `${Number(theme.fontSize)
|
|
53
|
+
top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
|
|
53
54
|
transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
|
|
54
55
|
transition: transform 0.2s ease;
|
|
55
56
|
width: 16px;
|
|
@@ -59,7 +60,7 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
59
60
|
height: 10px;
|
|
60
61
|
left: 2px;
|
|
61
62
|
opacity: ${$isChecked ? 1 : 0};
|
|
62
|
-
top: ${$lineHeight ? `${Number(theme.fontSize)
|
|
63
|
+
top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
|
|
63
64
|
transform: rotateZ(37deg) translateY(-50%);
|
|
64
65
|
transition: opacity 0.2s ease;
|
|
65
66
|
width: 5.5px;
|
|
@@ -123,11 +124,11 @@ export const StyledCheckboxLabel = styled.label`
|
|
|
123
124
|
${_ref12 => {
|
|
124
125
|
let {
|
|
125
126
|
$lineHeight,
|
|
126
|
-
theme
|
|
127
|
+
theme,
|
|
128
|
+
$shouldShowAsSwitch
|
|
127
129
|
} = _ref12;
|
|
128
130
|
return $lineHeight ? css`
|
|
129
|
-
top: ${Number(theme.fontSize)
|
|
130
|
-
transform: translateY(-50%);
|
|
131
|
+
top: ${getCheckBoxPosition(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
|
|
131
132
|
` : css`
|
|
132
133
|
top: 50%;
|
|
133
134
|
transform: translateY(-50%);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n transition: opacity 0.2s ease;\n user-select: none;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxLabelProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n : '50%'};\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: ${$lineHeight\n ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n : 'calc(50% - 2px)'};\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5.5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxLabelProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n \n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n \n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxLabelProps) =>\n $lineHeight\n ? css`\n top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n 5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n `\n : css`\n top: 50%;\n transform: translateY(-50%);\n `}\n }\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export const getCheckBoxPosition = fontSize => {
|
|
2
|
+
const position = {
|
|
3
|
+
30: 17,
|
|
4
|
+
25.5: 14,
|
|
5
|
+
24: 12,
|
|
6
|
+
20: 8,
|
|
7
|
+
19: 8,
|
|
8
|
+
18: 6,
|
|
9
|
+
17: 7,
|
|
10
|
+
16: 5,
|
|
11
|
+
15: 4,
|
|
12
|
+
14: 4,
|
|
13
|
+
13: 3,
|
|
14
|
+
12: 1,
|
|
15
|
+
11: 1,
|
|
16
|
+
10: 0,
|
|
17
|
+
9: -1,
|
|
18
|
+
8: -1
|
|
19
|
+
};
|
|
20
|
+
return position[fontSize];
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=checkBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkBox.js","names":["getCheckBoxPosition","fontSize","position"],"sources":["../../../src/utils/checkBox.ts"],"sourcesContent":["export const getCheckBoxPosition = (fontSize: number) => {\n const position: { [key: number]: number } = {\n 30: 17,\n 25.5: 14,\n 24: 12,\n 20: 8,\n 19: 8,\n 18: 6,\n 17: 7,\n 16: 5,\n 15: 4,\n 14: 4,\n 13: 3,\n 12: 1,\n 11: 1,\n 10: 0,\n 9: -1,\n 8: -1,\n };\n\n return position[fontSize];\n};\n"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAIC,QAAgB,IAAK;EACrD,MAAMC,QAAmC,GAAG;IACxC,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC;EACR,CAAC;EAED,OAAOA,QAAQ,CAACD,QAAQ,CAAC;AAC7B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getCheckBoxPosition: (fontSize: number) => number | 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.625",
|
|
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": "251af892bbd93d0afbaf6aa7d3a55b8cf9dd9dc9"
|
|
89
89
|
}
|