@salutejs/plasma-new-hope 0.184.0-canary.1539.11687316067.0 → 0.184.0-canary.1540.11688781632.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Switch/Switch.css +7 -11
- package/cjs/components/Switch/Switch.js +7 -16
- package/cjs/components/Switch/Switch.js.map +1 -1
- package/cjs/components/Switch/Switch.styles.js +4 -16
- package/cjs/components/Switch/Switch.styles.js.map +1 -1
- package/cjs/components/Switch/Switch.styles_1kk0qzz.css +4 -0
- package/cjs/components/Switch/Switch.tokens.js +0 -11
- package/cjs/components/Switch/Switch.tokens.js.map +1 -1
- package/cjs/components/Switch/_focused/base.js +1 -1
- package/{es/components/Switch/_focused/base_sz3n0x.css → cjs/components/Switch/_focused/base_j4murk.css} +1 -1
- package/cjs/components/Switch/_size/base.js +1 -1
- package/cjs/components/Switch/_size/base.js.map +1 -1
- package/cjs/components/Switch/_size/base_1rjzpi4.css +1 -0
- package/cjs/components/Switch/_view/base.js +1 -1
- package/cjs/components/Switch/_view/base.js.map +1 -1
- package/cjs/components/Switch/_view/base_1mtyz12.css +1 -0
- package/cjs/index.css +7 -11
- package/emotion/cjs/components/Switch/Switch.js +8 -17
- package/emotion/cjs/components/Switch/Switch.styles.js +5 -21
- package/emotion/cjs/components/Switch/Switch.template-doc.mdx +1 -37
- package/emotion/cjs/components/Switch/Switch.tokens.js +0 -11
- package/emotion/cjs/components/Switch/_size/base.js +1 -1
- package/emotion/cjs/components/Switch/_view/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -11
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/emotion/es/components/Switch/Switch.js +4 -13
- package/emotion/es/components/Switch/Switch.styles.js +4 -20
- package/emotion/es/components/Switch/Switch.template-doc.mdx +1 -37
- package/emotion/es/components/Switch/Switch.tokens.js +0 -11
- package/emotion/es/components/Switch/_size/base.js +2 -2
- package/emotion/es/components/Switch/_view/base.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -11
- package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/es/components/Switch/Switch.css +7 -11
- package/es/components/Switch/Switch.js +8 -17
- package/es/components/Switch/Switch.js.map +1 -1
- package/es/components/Switch/Switch.styles.js +5 -15
- package/es/components/Switch/Switch.styles.js.map +1 -1
- package/es/components/Switch/Switch.styles_1kk0qzz.css +4 -0
- package/es/components/Switch/Switch.tokens.js +0 -11
- package/es/components/Switch/Switch.tokens.js.map +1 -1
- package/es/components/Switch/_focused/base.js +1 -1
- package/{cjs/components/Switch/_focused/base_sz3n0x.css → es/components/Switch/_focused/base_j4murk.css} +1 -1
- package/es/components/Switch/_size/base.js +1 -1
- package/es/components/Switch/_size/base.js.map +1 -1
- package/es/components/Switch/_size/base_1rjzpi4.css +1 -0
- package/es/components/Switch/_view/base.js +1 -1
- package/es/components/Switch/_view/base.js.map +1 -1
- package/es/components/Switch/_view/base_1mtyz12.css +1 -0
- package/es/index.css +7 -11
- package/package.json +4 -4
- package/styled-components/cjs/components/Switch/Switch.js +8 -17
- package/styled-components/cjs/components/Switch/Switch.styles.js +5 -11
- package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +1 -37
- package/styled-components/cjs/components/Switch/Switch.tokens.js +0 -11
- package/styled-components/cjs/components/Switch/_size/base.js +1 -1
- package/styled-components/cjs/components/Switch/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +2 -9
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/styled-components/es/components/Switch/Switch.js +4 -13
- package/styled-components/es/components/Switch/Switch.styles.js +4 -10
- package/styled-components/es/components/Switch/Switch.template-doc.mdx +1 -37
- package/styled-components/es/components/Switch/Switch.tokens.js +0 -11
- package/styled-components/es/components/Switch/_size/base.js +2 -2
- package/styled-components/es/components/Switch/_view/base.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +2 -9
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
- package/types/components/Switch/Switch.d.ts +0 -3
- package/types/components/Switch/Switch.d.ts.map +1 -1
- package/types/components/Switch/Switch.styles.d.ts +0 -2
- package/types/components/Switch/Switch.styles.d.ts.map +1 -1
- package/types/components/Switch/Switch.tokens.d.ts +0 -9
- package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
- package/types/components/Switch/Switch.types.d.ts +2 -10
- package/types/components/Switch/Switch.types.d.ts.map +1 -1
- package/types/components/Switch/_size/base.d.ts.map +1 -1
- package/types/components/Switch/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts +0 -7
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts +0 -7
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.d.ts +0 -6
- package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
- package/cjs/components/Switch/Switch.styles_bei7bh.css +0 -6
- package/cjs/components/Switch/_size/base_1tcl212.css +0 -1
- package/cjs/components/Switch/_toggleSize/base.js +0 -9
- package/cjs/components/Switch/_toggleSize/base.js.map +0 -1
- package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
- package/emotion/cjs/components/Switch/_toggleSize/base.js +0 -10
- package/emotion/es/components/Switch/_toggleSize/base.js +0 -4
- package/es/components/Switch/Switch.styles_bei7bh.css +0 -6
- package/es/components/Switch/_size/base_1tcl212.css +0 -1
- package/es/components/Switch/_toggleSize/base.js +0 -5
- package/es/components/Switch/_toggleSize/base.js.map +0 -1
- package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/es/components/Switch/_view/base_yxkf3s.css +0 -1
- package/styled-components/cjs/components/Switch/_toggleSize/base.js +0 -10
- package/styled-components/es/components/Switch/_toggleSize/base.js +0 -4
- package/types/components/Switch/_toggleSize/base.d.ts +0 -2
- package/types/components/Switch/_toggleSize/base.d.ts.map +0 -1
@@ -1,27 +1,24 @@
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
2
|
import React, { forwardRef } from 'react';
|
3
3
|
import { base as base$1 } from './_size/base.js';
|
4
|
-
import { base as base$3 } from './_toggleSize/base.js';
|
5
4
|
import { base as base$2 } from './_view/base.js';
|
6
|
-
import { base as base$
|
7
|
-
import { base as base$
|
5
|
+
import { base as base$4 } from './_focused/base.js';
|
6
|
+
import { base as base$3 } from './_disabled/base.js';
|
8
7
|
import { cx } from '../../utils/index.js';
|
9
|
-
import {
|
8
|
+
import { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles.js';
|
10
9
|
import { classes } from './Switch.tokens.js';
|
11
10
|
|
12
11
|
var _StyledTrigger;
|
13
|
-
var _excluded = ["size", "
|
12
|
+
var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
|
14
13
|
var switchRoot = function switchRoot(Root) {
|
15
14
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
16
15
|
var size = props.size,
|
17
|
-
toggleSize = props.toggleSize,
|
18
16
|
view = props.view,
|
19
17
|
focused = props.focused,
|
20
18
|
outlined = props.outlined,
|
21
19
|
disabled = props.disabled,
|
22
20
|
labelPosition = props.labelPosition,
|
23
21
|
label = props.label,
|
24
|
-
description = props.description,
|
25
22
|
id = props.id,
|
26
23
|
style = props.style,
|
27
24
|
className = props.className,
|
@@ -33,15 +30,12 @@ var switchRoot = function switchRoot(Root) {
|
|
33
30
|
return /*#__PURE__*/React.createElement(Root, {
|
34
31
|
view: view,
|
35
32
|
size: size,
|
36
|
-
toggleSize: toggleSize,
|
37
33
|
disabled: disabled,
|
38
34
|
focused: focused !== null && focused !== void 0 ? focused : outlined,
|
39
35
|
labelPosition: labelPosition,
|
40
36
|
id: id,
|
41
37
|
style: style,
|
42
|
-
className: cx(className)
|
43
|
-
}, /*#__PURE__*/React.createElement(StyledContent, {
|
44
|
-
className: cx(classes["".concat(labelPosition, "SwitchLabelPosition")])
|
38
|
+
className: cx(className, classes["".concat(labelPosition, "SwitchLabelPosition")])
|
45
39
|
}, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
|
46
40
|
ref: ref,
|
47
41
|
role: "switch",
|
@@ -54,7 +48,7 @@ var switchRoot = function switchRoot(Root) {
|
|
54
48
|
tabIndex: -1
|
55
49
|
}, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/React.createElement(StyledTrigger, {
|
56
50
|
"aria-hidden": true
|
57
|
-
})))
|
51
|
+
})));
|
58
52
|
});
|
59
53
|
};
|
60
54
|
var switchConfig = {
|
@@ -69,15 +63,12 @@ var switchConfig = {
|
|
69
63
|
view: {
|
70
64
|
css: base$2
|
71
65
|
},
|
72
|
-
toggleSize: {
|
73
|
-
css: base$3
|
74
|
-
},
|
75
66
|
disabled: {
|
76
|
-
css: base$
|
67
|
+
css: base$3,
|
77
68
|
attrs: true
|
78
69
|
},
|
79
70
|
focused: {
|
80
|
-
css: base$
|
71
|
+
css: base$4
|
81
72
|
}
|
82
73
|
},
|
83
74
|
defaults: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { base as sizeCSS } from '../Switch/_size/base';\nimport { base as
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { base as sizeCSS } from '../Switch/_size/base';\nimport { base as viewCSS } from '../Switch/_view/base';\nimport { base as focusedCSS } from '../Switch/_focused/base';\nimport { base as disabledCSS } from '../Switch/_disabled/base';\nimport { cx } from '../../utils';\n\nimport { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';\nimport { SwitchProps } from './Switch.types';\nimport { classes } from './Switch.tokens';\n\nexport const switchRoot = (Root: RootProps<HTMLInputElement, SwitchProps>) =>\n forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {\n const {\n size,\n view,\n focused,\n outlined,\n disabled,\n labelPosition,\n\n label,\n\n id,\n style,\n className,\n\n // singleLine,\n\n checked,\n pressed,\n defaultChecked,\n\n ...rest\n } = props;\n\n const exactChecked = Boolean((checked ?? pressed) !== undefined ? checked ?? pressed : defaultChecked);\n\n return (\n <Root\n view={view}\n size={size}\n disabled={disabled}\n focused={focused ?? outlined}\n labelPosition={labelPosition}\n id={id}\n style={style}\n className={cx(className, classes[`${labelPosition}SwitchLabelPosition` as keyof typeof classes])}\n >\n <StyledInput\n {...rest}\n ref={ref}\n role=\"switch\"\n aria-checked={exactChecked}\n type=\"checkbox\"\n checked={checked ?? pressed}\n defaultChecked={defaultChecked}\n disabled={disabled}\n />\n <StyledLabel tabIndex={-1}>{label}</StyledLabel>\n <StyledTrigger aria-hidden />\n </Root>\n );\n });\n\nexport const switchConfig = {\n name: 'Switch',\n tag: 'label',\n base,\n layout: switchRoot,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n size: 's',\n view: 'default',\n },\n};\n"],"names":["switchRoot","Root","forwardRef","props","ref","size","view","focused","outlined","disabled","labelPosition","label","id","style","className","checked","pressed","defaultChecked","rest","_objectWithoutProperties","_excluded","exactChecked","Boolean","undefined","React","createElement","cx","classes","concat","StyledInput","_extends","role","type","StyledLabel","tabIndex","_StyledTrigger","StyledTrigger","switchConfig","name","tag","base","layout","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","focusedCSS","defaults"],"mappings":"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"}
|
@@ -1,32 +1,22 @@
|
|
1
|
-
import './Switch.
|
1
|
+
import './Switch.styles_1kk0qzz.css';
|
2
2
|
import { styled } from '@linaria/react';
|
3
3
|
|
4
4
|
var base = "b1fcyfkl";
|
5
|
-
var StyledContent = /*#__PURE__*/styled('div')({
|
6
|
-
name: "StyledContent",
|
7
|
-
"class": "s10fscgc",
|
8
|
-
propsAsIs: false
|
9
|
-
});
|
10
|
-
var StyledDescription = /*#__PURE__*/styled('div')({
|
11
|
-
name: "StyledDescription",
|
12
|
-
"class": "sdjnckq",
|
13
|
-
propsAsIs: false
|
14
|
-
});
|
15
5
|
var StyledInput = /*#__PURE__*/styled('input')({
|
16
6
|
name: "StyledInput",
|
17
|
-
"class": "
|
7
|
+
"class": "s10fscgc",
|
18
8
|
propsAsIs: false
|
19
9
|
});
|
20
10
|
var StyledLabel = /*#__PURE__*/styled('span')({
|
21
11
|
name: "StyledLabel",
|
22
|
-
"class": "
|
12
|
+
"class": "sdjnckq",
|
23
13
|
propsAsIs: false
|
24
14
|
});
|
25
15
|
var StyledTrigger = /*#__PURE__*/styled('div')({
|
26
16
|
name: "StyledTrigger",
|
27
|
-
"class": "
|
17
|
+
"class": "ssthlx1",
|
28
18
|
propsAsIs: false
|
29
19
|
});
|
30
20
|
|
31
|
-
export {
|
21
|
+
export { StyledInput, StyledLabel, StyledTrigger, base };
|
32
22
|
//# sourceMappingURL=Switch.styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sources":["../../../src/components/Switch/Switch.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { applyEllipsis } from '../../mixins';\n\nimport { classes, tokens } from './Switch.tokens';\n\nexport const base = css`\n position: relative;\n display: flex;\n
|
1
|
+
{"version":3,"file":"Switch.styles.js","sources":["../../../src/components/Switch/Switch.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { applyEllipsis } from '../../mixins';\n\nimport { classes, tokens } from './Switch.tokens';\n\nexport const base = css`\n position: relative;\n display: flex;\n align-items: center;\n\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n &:focus {\n outline: 0 none;\n }\n\n &.${classes.beforeSwitchLabelPosition} {\n justify-content: space-between;\n\n ${tokens.labelOffsetPrivate}: 0 var(${tokens.labelOffset}) 0 0;\n }\n\n &.${classes.afterSwitchLabelPosition} {\n justify-content: start;\n flex-direction: row-reverse;\n\n ${tokens.labelOffsetPrivate}: 0 0 0 var(${tokens.labelOffset});\n }\n`;\n\nexport const StyledInput = styled.input`\n position: absolute;\n right: 0;\n margin: 0;\n opacity: 0;\n\n &:focus {\n outline: 0 none;\n }\n`;\n\nexport const StyledLabel = styled.span`\n user-select: none;\n\n // TODO: multiline switch\n ${applyEllipsis()}\n`;\n\nexport const StyledTrigger = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n transition: background-color 0.15s ease-in-out 0.1s;\n\n ::after {\n content: '';\n position: absolute;\n right: auto;\n left: 0;\n\n transition: width 0.15s ease-in-out 0s, left 0.3s ease-in-out 0s, right 0.3s ease-in-out 0s;\n }\n\n ${StyledInput}:checked ~ &::after {\n right: 0;\n left: auto;\n }\n`;\n"],"names":["base","StyledInput","styled","name","class","propsAsIs","StyledLabel","StyledTrigger"],"mappings":";;AAOO,IAAMA,IAAI,GAwBhB,WAAA;AAEM,IAAMC,WAAW,gBAAGC,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAShC,EAAA;AAEM,IAAMC,WAAW,gBAAGJ,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKhC,EAAA;AAEM,IAAME,aAAa,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAmBlC;;;;"}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
.b1fcyfkl{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}.b1fcyfkl:focus{outline:0 none;}.b1fcyfkl.switch-label-position-before{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;--plasma_private-switch__label-offset:0 var(--plasma-switch__label-offset) 0 0;}.b1fcyfkl.switch-label-position-after{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;--plasma_private-switch__label-offset:0 0 0 var(--plasma-switch__label-offset);}
|
2
|
+
.s10fscgc{position:absolute;right:0;margin:0;opacity:0;}.s10fscgc:focus{outline:0 none;}
|
3
|
+
.sdjnckq{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
4
|
+
.ssthlx1{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color 0.15s ease-in-out 0.1s;transition:background-color 0.15s ease-in-out 0.1s;}.ssthlx1::after{content:'';position:absolute;right:auto;left:0;-webkit-transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}.s10fscgc:checked ~ .ssthlx1::after{right:0;left:auto;}
|
@@ -5,22 +5,11 @@ var tokens = {
|
|
5
5
|
fontWeight: '--plasma-switch-font-weight',
|
6
6
|
letterSpacing: '--plasma-switch-letter-spacing',
|
7
7
|
lineHeight: '--plasma-switch-line-height',
|
8
|
-
/* Токены description */
|
9
|
-
descriptionFontFamily: '--plasma-switch-description-font-family',
|
10
|
-
descriptionFontStyle: '--plasma-switch-description-font-style',
|
11
|
-
descriptionFontSize: '--plasma-switch-description-font-size',
|
12
|
-
descriptionFontWeight: '--plasma-switch-description-font-weight',
|
13
|
-
descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
|
14
|
-
descriptionLineHeight: '--plasma-switch-description-line-height',
|
15
8
|
/* Цвет подписи */
|
16
9
|
labelColor: '--plasma-switch__label-color',
|
17
10
|
labelOffset: '--plasma-switch__label-offset',
|
18
|
-
/* Цвет описания */
|
19
|
-
descriptionColor: '--plasma-switch__description-color',
|
20
|
-
descriptionOffset: '--plasma-switch__description-offset',
|
21
11
|
/** Прозрачность для всего компонента в состоянии disabled */
|
22
12
|
disabledOpacity: '--plasma-switch-disabled-opacity',
|
23
|
-
verticalGap: '--plasma-switch-vertical-gap',
|
24
13
|
trackWidth: '--plasma-switch__track-width',
|
25
14
|
trackHeight: '--plasma-switch__track-height',
|
26
15
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.tokens.js","sources":["../../../src/components/Switch/Switch.tokens.ts"],"sourcesContent":["export const tokens = {\n fontFamily: '--plasma-switch-font-family',\n fontStyle: '--plasma-switch-font-style',\n fontSize: '--plasma-switch-font-size',\n fontWeight: '--plasma-switch-font-weight',\n letterSpacing: '--plasma-switch-letter-spacing',\n lineHeight: '--plasma-switch-line-height',\n\n /*
|
1
|
+
{"version":3,"file":"Switch.tokens.js","sources":["../../../src/components/Switch/Switch.tokens.ts"],"sourcesContent":["export const tokens = {\n fontFamily: '--plasma-switch-font-family',\n fontStyle: '--plasma-switch-font-style',\n fontSize: '--plasma-switch-font-size',\n fontWeight: '--plasma-switch-font-weight',\n letterSpacing: '--plasma-switch-letter-spacing',\n lineHeight: '--plasma-switch-line-height',\n\n /* Цвет подписи */\n labelColor: '--plasma-switch__label-color',\n labelOffset: '--plasma-switch__label-offset',\n\n /** Прозрачность для всего компонента в состоянии disabled */\n disabledOpacity: '--plasma-switch-disabled-opacity',\n\n trackWidth: '--plasma-switch__track-width',\n trackHeight: '--plasma-switch__track-height',\n trackBorderRadius: '--plasma-switch__track-border-radius',\n // NOTE: could be intersection with checked\n trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',\n trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',\n trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',\n trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',\n\n trackFocusColor: '--plasma-switch__track-focus-color',\n\n thumbSize: '--plasma-switch__thumb-size',\n thumbOffset: '--plasma-switch__thumb-offset',\n thumbBorderRadius: '--plasma-switch__thumb-border-radius',\n\n thumbPressScale: '--plasma-switch__thumb-scale',\n\n thumbBackgroundColor: '--plasma-switch__thumb-bg-color',\n thumbBoxShadow: '--plasma-switch__thumb-box-shadow',\n thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',\n\n labelOffsetPrivate: '--plasma_private-switch__label-offset',\n};\n\nexport const classes = {\n beforeSwitchLabelPosition: 'switch-label-position-before',\n afterSwitchLabelPosition: 'switch-label-position-after',\n};\n"],"names":["tokens","fontFamily","fontStyle","fontSize","fontWeight","letterSpacing","lineHeight","labelColor","labelOffset","disabledOpacity","trackWidth","trackHeight","trackBorderRadius","trackBackgroundColorOn","trackBackgroundColorOnHover","trackBackgroundColorOff","trackBackgroundColorOffHover","trackFocusColor","thumbSize","thumbOffset","thumbBorderRadius","thumbPressScale","thumbBackgroundColor","thumbBoxShadow","thumbBoxShadowOn","labelOffsetPrivate","classes","beforeSwitchLabelPosition","afterSwitchLabelPosition"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,6BAA6B;AACzCC,EAAAA,SAAS,EAAE,4BAA4B;AACvCC,EAAAA,QAAQ,EAAE,2BAA2B;AACrCC,EAAAA,UAAU,EAAE,6BAA6B;AACzCC,EAAAA,aAAa,EAAE,gCAAgC;AAC/CC,EAAAA,UAAU,EAAE,6BAA6B;AAEzC;AACAC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAE5C;AACAC,EAAAA,eAAe,EAAE,kCAAkC;AAEnDC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzD;AACAC,EAAAA,sBAAsB,EAAE,8CAA8C;AACtEC,EAAAA,2BAA2B,EAAE,2DAA2D;AACxFC,EAAAA,uBAAuB,EAAE,+CAA+C;AACxEC,EAAAA,4BAA4B,EAAE,4DAA4D;AAE1FC,EAAAA,eAAe,EAAE,oCAAoC;AAErDC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AAEzDC,EAAAA,eAAe,EAAE,8BAA8B;AAE/CC,EAAAA,oBAAoB,EAAE,iCAAiC;AACvDC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,gBAAgB,EAAE,gDAAgD;AAElEC,EAAAA,kBAAkB,EAAE,uCAAA;AACxB,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,yBAAyB,EAAE,8BAA8B;AACzDC,EAAAA,wBAAwB,EAAE,6BAAA;AAC9B;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
.bvwxj2r .
|
1
|
+
.bvwxj2r .ssthlx1::before{content:'';position:absolute;inset:-0.125rem;display:block;box-sizing:content-box;border-radius:calc(0.125rem + var(--plasma-switch__track-border-radius));border:0.125rem solid transparent;pointer-events:none;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}.bvwxj2r .s10fscgc.focus-visible ~ .ssthlx1::before{box-shadow:0 0 0 0.125rem var(--plasma-switch__track-focus-color);}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport {
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledLabel, StyledTrigger } from '../Switch.styles';\n\nexport const base = css`\n font-family: var(${tokens.fontFamily});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.letterSpacing});\n line-height: var(${tokens.lineHeight});\n font-size: var(${tokens.fontSize});\n\n ${StyledTrigger} {\n flex: 0 0 var(${tokens.trackWidth});\n width: var(${tokens.trackWidth});\n height: var(${tokens.trackHeight});\n border-radius: var(${tokens.trackBorderRadius});\n\n &::after {\n width: var(${tokens.thumbSize});\n height: var(${tokens.thumbSize});\n border-radius: var(${tokens.thumbBorderRadius});\n margin: auto var(${tokens.thumbOffset});\n }\n }\n\n ${StyledLabel} {\n /* check _label_position */\n margin: var(${tokens.labelOffsetPrivate}, 0);\n }\n\n :active:not([disabled]) ${StyledTrigger}::after {\n width: calc(var(${tokens.thumbSize}) * var(${tokens.thumbPressScale}, 1));\n }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GA8BhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bm1v11h{font-family:var(--plasma-switch-font-family);font-style:var(--plasma-switch-font-style);font-weight:var(--plasma-switch-font-weight);-webkit-letter-spacing:var(--plasma-switch-letter-spacing);-moz-letter-spacing:var(--plasma-switch-letter-spacing);-ms-letter-spacing:var(--plasma-switch-letter-spacing);letter-spacing:var(--plasma-switch-letter-spacing);line-height:var(--plasma-switch-line-height);font-size:var(--plasma-switch-font-size);}.bm1v11h .ssthlx1{-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);border-radius:var(--plasma-switch__track-border-radius);}.bm1v11h .ssthlx1::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.bm1v11h .sdjnckq{margin:var(--plasma_private-switch__label-offset,0);}.bm1v11h:active:not([disabled]) .ssthlx1::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger, StyledInput
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger, StyledInput } from '../Switch.styles';\n\nexport const base = css`\n ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOff});\n }\n\n ${StyledInput}:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOffHover}, var(${tokens.trackBackgroundColorOff}));\n }\n\n ${StyledInput}:checked ~ ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOn});\n }\n\n ${StyledInput}:checked:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOnHover}, var(${tokens.trackBackgroundColorOn}));\n }\n\n ${StyledTrigger}::after {\n background-color: var(${tokens.thumbBackgroundColor});\n box-shadow: var(${tokens.thumbBoxShadow});\n }\n\n ${StyledInput}:checked ~ ${StyledTrigger}::after {\n box-shadow: var(${tokens.thumbBoxShadowOn}, var(${tokens.thumbBoxShadow}));\n }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAyBhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1g0jmh3 .ssthlx1{background-color:var(--plasma-switch__track_checked_false-bg-color);}.b1g0jmh3 .s10fscgc:not([disabled]) ~ .ssthlx1:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));}.b1g0jmh3 .s10fscgc:checked ~ .ssthlx1{background-color:var(--plasma-switch__track_checked_true-bg-color);}.b1g0jmh3 .s10fscgc:checked:not([disabled]) ~ .ssthlx1:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));}.b1g0jmh3 .ssthlx1::after{background-color:var(--plasma-switch__thumb-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.b1g0jmh3 .s10fscgc:checked ~ .ssthlx1::after{box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}
|
package/es/index.css
CHANGED
@@ -214,22 +214,18 @@
|
|
214
214
|
|
215
215
|
.TextFieldGroup_styles_soj2wl_buxwmzu__0f513e82{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
216
216
|
|
217
|
-
.
|
217
|
+
.base_1rjzpi4_bm1v11h__7f59456d{font-family:var(--plasma-switch-font-family);font-style:var(--plasma-switch-font-style);font-weight:var(--plasma-switch-font-weight);-webkit-letter-spacing:var(--plasma-switch-letter-spacing);-moz-letter-spacing:var(--plasma-switch-letter-spacing);-ms-letter-spacing:var(--plasma-switch-letter-spacing);letter-spacing:var(--plasma-switch-letter-spacing);line-height:var(--plasma-switch-line-height);font-size:var(--plasma-switch-font-size);}.base_1rjzpi4_bm1v11h__7f59456d .base_1rjzpi4_ssthlx1__7f59456d{-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);border-radius:var(--plasma-switch__track-border-radius);}.base_1rjzpi4_bm1v11h__7f59456d .base_1rjzpi4_ssthlx1__7f59456d::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.base_1rjzpi4_bm1v11h__7f59456d .base_1rjzpi4_sdjnckq__7f59456d{margin:var(--plasma_private-switch__label-offset,0);}.base_1rjzpi4_bm1v11h__7f59456d:active:not([disabled]) .base_1rjzpi4_ssthlx1__7f59456d::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}
|
218
218
|
|
219
|
-
.
|
219
|
+
.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_ssthlx1__d9dd5109{background-color:var(--plasma-switch__track_checked_false-bg-color);}.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_s10fscgc__d9dd5109:not([disabled]) ~ .base_1mtyz12_ssthlx1__d9dd5109:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));}.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_s10fscgc__d9dd5109:checked ~ .base_1mtyz12_ssthlx1__d9dd5109{background-color:var(--plasma-switch__track_checked_true-bg-color);}.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_s10fscgc__d9dd5109:checked:not([disabled]) ~ .base_1mtyz12_ssthlx1__d9dd5109:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));}.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_ssthlx1__d9dd5109::after{background-color:var(--plasma-switch__thumb-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.base_1mtyz12_b1g0jmh3__d9dd5109 .base_1mtyz12_s10fscgc__d9dd5109:checked ~ .base_1mtyz12_ssthlx1__d9dd5109::after{box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}
|
220
220
|
|
221
|
-
.
|
222
|
-
|
223
|
-
.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_s2cs3kf__a36bed54::before{content:'';position:absolute;inset:-0.125rem;display:block;box-sizing:content-box;border-radius:calc(0.125rem + var(--plasma-switch__track-border-radius));border:0.125rem solid transparent;pointer-events:none;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_ssthlx1__a36bed54.base_sz3n0x_focusVisible__a36bed54 ~ .base_sz3n0x_s2cs3kf__a36bed54::before{box-shadow:0 0 0 0.125rem var(--plasma-switch__track-focus-color);}
|
221
|
+
.base_j4murk_bvwxj2r__5f9cab46 .base_j4murk_ssthlx1__5f9cab46::before{content:'';position:absolute;inset:-0.125rem;display:block;box-sizing:content-box;border-radius:calc(0.125rem + var(--plasma-switch__track-border-radius));border:0.125rem solid transparent;pointer-events:none;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}.base_j4murk_bvwxj2r__5f9cab46 .base_j4murk_s10fscgc__5f9cab46.base_j4murk_focusVisible__5f9cab46 ~ .base_j4murk_ssthlx1__5f9cab46::before{box-shadow:0 0 0 0.125rem var(--plasma-switch__track-focus-color);}
|
224
222
|
|
225
223
|
.base_15j754u_bnochw__b189000a{opacity:var(--plasma-switch-disabled-opacity);}.base_15j754u_bnochw__b189000a[disabled]{cursor:not-allowed;}
|
226
224
|
|
227
|
-
.
|
228
|
-
.
|
229
|
-
.
|
230
|
-
.
|
231
|
-
.Switch_styles_bei7bh_s1ilr5eq__af9471a3{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
232
|
-
.Switch_styles_bei7bh_s2cs3kf__af9471a3{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color 0.15s ease-in-out 0.1s;transition:background-color 0.15s ease-in-out 0.1s;}.Switch_styles_bei7bh_s2cs3kf__af9471a3::after{content:'';position:absolute;right:auto;left:0;-webkit-transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}.Switch_styles_bei7bh_ssthlx1__af9471a3:checked ~ .Switch_styles_bei7bh_s2cs3kf__af9471a3::after{right:0;left:auto;}
|
225
|
+
.Switch_styles_1kk0qzz_b1fcyfkl__d172ad46{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}.Switch_styles_1kk0qzz_b1fcyfkl__d172ad46:focus{outline:0 none;}.Switch_styles_1kk0qzz_b1fcyfkl__d172ad46.Switch_styles_1kk0qzz_switchLabelPositionBefore__d172ad46{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;--plasma_private-switch__label-offset:0 var(--plasma-switch__label-offset) 0 0;}.Switch_styles_1kk0qzz_b1fcyfkl__d172ad46.Switch_styles_1kk0qzz_switchLabelPositionAfter__d172ad46{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;--plasma_private-switch__label-offset:0 0 0 var(--plasma-switch__label-offset);}
|
226
|
+
.Switch_styles_1kk0qzz_s10fscgc__d172ad46{position:absolute;right:0;margin:0;opacity:0;}.Switch_styles_1kk0qzz_s10fscgc__d172ad46:focus{outline:0 none;}
|
227
|
+
.Switch_styles_1kk0qzz_sdjnckq__d172ad46{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
228
|
+
.Switch_styles_1kk0qzz_ssthlx1__d172ad46{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color 0.15s ease-in-out 0.1s;transition:background-color 0.15s ease-in-out 0.1s;}.Switch_styles_1kk0qzz_ssthlx1__d172ad46::after{content:'';position:absolute;right:auto;left:0;-webkit-transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}.Switch_styles_1kk0qzz_s10fscgc__d172ad46:checked ~ .Switch_styles_1kk0qzz_ssthlx1__d172ad46::after{right:0;left:auto;}
|
233
229
|
|
234
230
|
.base_1sq08yf_bxoicu2__bb7a4868{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
|
235
231
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.184.0-canary.
|
3
|
+
"version": "0.184.0-canary.1540.11688781632.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -80,7 +80,7 @@
|
|
80
80
|
"@rollup/plugin-babel": "^6.0.4",
|
81
81
|
"@rollup/plugin-commonjs": "^25.0.4",
|
82
82
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
83
|
-
"@salutejs/plasma-sb-utils": "0.
|
83
|
+
"@salutejs/plasma-sb-utils": "0.184.0-canary.1540.11688781632.0",
|
84
84
|
"@salutejs/plasma-themes": "0.22.0",
|
85
85
|
"@storybook/addon-docs": "^7.6.17",
|
86
86
|
"@storybook/addon-essentials": "^7.6.17",
|
@@ -115,7 +115,7 @@
|
|
115
115
|
"@linaria/react": "5.0.3",
|
116
116
|
"@popperjs/core": "2.11.8",
|
117
117
|
"@salutejs/input-core": "2.1.2",
|
118
|
-
"@salutejs/plasma-core": "1.
|
118
|
+
"@salutejs/plasma-core": "1.186.0-canary.1540.11688781632.0",
|
119
119
|
"@salutejs/react-maskinput": "3.2.6",
|
120
120
|
"classnames": "2.5.1",
|
121
121
|
"dayjs": "1.11.11",
|
@@ -128,5 +128,5 @@
|
|
128
128
|
"sideEffects": [
|
129
129
|
"*.css"
|
130
130
|
],
|
131
|
-
"gitHead": "
|
131
|
+
"gitHead": "9ea0524af88cf60c80ec926ec19f7ac55fa3c380"
|
132
132
|
}
|
@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.switchRoot = exports.switchConfig = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
9
|
var _base = /*#__PURE__*/require("../Switch/_size/base");
|
10
|
-
var _base2 = /*#__PURE__*/require("../Switch/
|
11
|
-
var _base3 = /*#__PURE__*/require("../Switch/
|
12
|
-
var _base4 = /*#__PURE__*/require("../Switch/
|
13
|
-
var _base5 = /*#__PURE__*/require("../Switch/_disabled/base");
|
10
|
+
var _base2 = /*#__PURE__*/require("../Switch/_view/base");
|
11
|
+
var _base3 = /*#__PURE__*/require("../Switch/_focused/base");
|
12
|
+
var _base4 = /*#__PURE__*/require("../Switch/_disabled/base");
|
14
13
|
var _utils = /*#__PURE__*/require("../../utils");
|
15
14
|
var _Switch = /*#__PURE__*/require("./Switch.styles");
|
16
15
|
var _Switch2 = /*#__PURE__*/require("./Switch.tokens");
|
17
16
|
var _StyledTrigger;
|
18
|
-
var _excluded = ["size", "
|
17
|
+
var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
|
19
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
20
19
|
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; }
|
21
20
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -24,14 +23,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
24
23
|
var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
25
24
|
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
26
25
|
var size = props.size,
|
27
|
-
toggleSize = props.toggleSize,
|
28
26
|
view = props.view,
|
29
27
|
focused = props.focused,
|
30
28
|
outlined = props.outlined,
|
31
29
|
disabled = props.disabled,
|
32
30
|
labelPosition = props.labelPosition,
|
33
31
|
label = props.label,
|
34
|
-
description = props.description,
|
35
32
|
id = props.id,
|
36
33
|
style = props.style,
|
37
34
|
className = props.className,
|
@@ -43,15 +40,12 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
|
43
40
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
44
41
|
view: view,
|
45
42
|
size: size,
|
46
|
-
toggleSize: toggleSize,
|
47
43
|
disabled: disabled,
|
48
44
|
focused: focused !== null && focused !== void 0 ? focused : outlined,
|
49
45
|
labelPosition: labelPosition,
|
50
46
|
id: id,
|
51
47
|
style: style,
|
52
|
-
className: (0, _utils.cx)(className)
|
53
|
-
}, /*#__PURE__*/_react["default"].createElement(_Switch.StyledContent, {
|
54
|
-
className: (0, _utils.cx)(_Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
|
48
|
+
className: (0, _utils.cx)(className, _Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
|
55
49
|
}, /*#__PURE__*/_react["default"].createElement(_Switch.StyledInput, _extends({}, rest, {
|
56
50
|
ref: ref,
|
57
51
|
role: "switch",
|
@@ -64,7 +58,7 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
|
|
64
58
|
tabIndex: -1
|
65
59
|
}, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/_react["default"].createElement(_Switch.StyledTrigger, {
|
66
60
|
"aria-hidden": true
|
67
|
-
})))
|
61
|
+
})));
|
68
62
|
});
|
69
63
|
};
|
70
64
|
var switchConfig = exports.switchConfig = {
|
@@ -77,17 +71,14 @@ var switchConfig = exports.switchConfig = {
|
|
77
71
|
css: _base.base
|
78
72
|
},
|
79
73
|
view: {
|
80
|
-
css: _base3.base
|
81
|
-
},
|
82
|
-
toggleSize: {
|
83
74
|
css: _base2.base
|
84
75
|
},
|
85
76
|
disabled: {
|
86
|
-
css:
|
77
|
+
css: _base4.base,
|
87
78
|
attrs: true
|
88
79
|
},
|
89
80
|
focused: {
|
90
|
-
css:
|
81
|
+
css: _base3.base
|
91
82
|
}
|
92
83
|
},
|
93
84
|
defaults: {
|
@@ -4,25 +4,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput =
|
7
|
+
exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = void 0;
|
8
8
|
var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
|
9
9
|
var _mixins = /*#__PURE__*/require("../../mixins");
|
10
10
|
var _Switch = /*#__PURE__*/require("./Switch.tokens");
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
12
12
|
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; }
|
13
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;
|
14
|
-
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-i4fgom-0"
|
16
|
-
})(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
|
17
|
-
var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
18
|
-
componentId: "plasma-new-hope__sc-i4fgom-1"
|
19
|
-
})(["position:relative;"]);
|
13
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
|
20
14
|
var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
21
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
15
|
+
componentId: "plasma-new-hope__sc-i4fgom-0"
|
22
16
|
})(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
|
23
17
|
var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
24
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
18
|
+
componentId: "plasma-new-hope__sc-i4fgom-1"
|
25
19
|
})(["user-select:none;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
26
20
|
var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
27
|
-
componentId: "plasma-new-hope__sc-i4fgom-
|
21
|
+
componentId: "plasma-new-hope__sc-i4fgom-2"
|
28
22
|
})(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);
|
@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
|
|
18
18
|
|
19
19
|
export function App() {
|
20
20
|
return (
|
21
|
-
<Switch
|
22
|
-
);
|
23
|
-
}
|
24
|
-
```
|
25
|
-
|
26
|
-
## Примеры
|
27
|
-
|
28
|
-
### Размер Switch
|
29
|
-
Размер компонента задается с помощью свойства `size`.
|
30
|
-
|
31
|
-
```tsx live
|
32
|
-
import React from 'react';
|
33
|
-
import { Button } from '@salutejs/{{ package }}';
|
34
|
-
|
35
|
-
export function App() {
|
36
|
-
return (
|
37
|
-
<div>
|
38
|
-
<Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
|
39
|
-
<Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
|
40
|
-
<Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
|
41
|
-
</div>
|
42
|
-
);
|
43
|
-
}
|
44
|
-
```
|
45
|
-
|
46
|
-
Размер переключателя задается с помощью свойства `toggleSize`.
|
47
|
-
|
48
|
-
```tsx live
|
49
|
-
import React from 'react';
|
50
|
-
import { Button } from '@salutejs/{{ package }}';
|
51
|
-
|
52
|
-
export function App() {
|
53
|
-
return (
|
54
|
-
<div style=\{{ alignItems: "center" }}>
|
55
|
-
<Switch toggleSize="s" label="Переключатель" defaultChecked />
|
56
|
-
<Switch toggleSize="l" label="Переключатель" defaultChecked />
|
57
|
-
</div>
|
21
|
+
<Switch label="Переключатель" defaultChecked />
|
58
22
|
);
|
59
23
|
}
|
60
24
|
```
|
@@ -11,22 +11,11 @@ var tokens = exports.tokens = {
|
|
11
11
|
fontWeight: '--plasma-switch-font-weight',
|
12
12
|
letterSpacing: '--plasma-switch-letter-spacing',
|
13
13
|
lineHeight: '--plasma-switch-line-height',
|
14
|
-
/* Токены description */
|
15
|
-
descriptionFontFamily: '--plasma-switch-description-font-family',
|
16
|
-
descriptionFontStyle: '--plasma-switch-description-font-style',
|
17
|
-
descriptionFontSize: '--plasma-switch-description-font-size',
|
18
|
-
descriptionFontWeight: '--plasma-switch-description-font-weight',
|
19
|
-
descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
|
20
|
-
descriptionLineHeight: '--plasma-switch-description-line-height',
|
21
14
|
/* Цвет подписи */
|
22
15
|
labelColor: '--plasma-switch__label-color',
|
23
16
|
labelOffset: '--plasma-switch__label-offset',
|
24
|
-
/* Цвет описания */
|
25
|
-
descriptionColor: '--plasma-switch__description-color',
|
26
|
-
descriptionOffset: '--plasma-switch__description-offset',
|
27
17
|
/** Прозрачность для всего компонента в состоянии disabled */
|
28
18
|
disabledOpacity: '--plasma-switch-disabled-opacity',
|
29
|
-
verticalGap: '--plasma-switch-vertical-gap',
|
30
19
|
trackWidth: '--plasma-switch__track-width',
|
31
20
|
trackHeight: '--plasma-switch__track-height',
|
32
21
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Switch = /*#__PURE__*/require("../Switch.tokens");
|
9
9
|
var _Switch2 = /*#__PURE__*/require("../Switch.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);
|