@salutejs/plasma-new-hope 0.164.0-canary.1452.11292135082.0 → 0.164.0-canary.1458.11292839291.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Breadcrumbs/Breadcrumbs.css +3 -3
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +11 -4
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
- package/cjs/components/Breadcrumbs/{Breadcrumbs.styles_1troyzr.css → Breadcrumbs.styles_17id7um.css} +2 -2
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -1
- package/cjs/components/Breadcrumbs/utils/index.css +3 -3
- package/cjs/components/Slider/Slider.css +13 -15
- package/cjs/components/Slider/Slider.js +3 -11
- package/cjs/components/Slider/Slider.js.map +1 -1
- package/cjs/components/Slider/Slider.tokens.js +17 -23
- package/cjs/components/Slider/Slider.tokens.js.map +1 -1
- package/cjs/components/Slider/components/Double/Double.css +8 -8
- package/cjs/components/Slider/components/Double/Double.js +23 -58
- package/cjs/components/Slider/components/Double/Double.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.css +14 -14
- package/cjs/components/Slider/components/Single/Single.js +31 -59
- package/cjs/components/Slider/components/Single/Single.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +5 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
- package/cjs/components/Slider/ui/Handler/Handler.js +88 -49
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -17
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/cjs/components/Slider/utils/index.js +10 -28
- package/cjs/components/Slider/utils/index.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base.js +1 -1
- package/cjs/components/Slider/variations/_view/base.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/cjs/index.css +16 -18
- package/cjs/utils/index.js.map +1 -1
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +6 -3
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/emotion/cjs/components/Slider/Slider.js +2 -10
- package/emotion/cjs/components/Slider/Slider.tokens.js +17 -23
- package/emotion/cjs/components/Slider/components/Double/Double.js +19 -54
- package/emotion/cjs/components/Slider/components/Single/Single.js +31 -59
- package/emotion/cjs/components/Slider/components/Single/Single.styles.js +9 -18
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
- package/emotion/cjs/components/Slider/ui/Handler/Handler.js +88 -52
- package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -9
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/cjs/components/Slider/utils/index.js +10 -28
- package/emotion/cjs/components/Slider/variations/_view/base.js +1 -2
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -90
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -90
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +6 -3
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/emotion/es/components/Slider/Slider.js +2 -11
- package/emotion/es/components/Slider/Slider.tokens.js +17 -23
- package/emotion/es/components/Slider/components/Double/Double.js +19 -54
- package/emotion/es/components/Slider/components/Single/Single.js +32 -60
- package/emotion/es/components/Slider/components/Single/Single.styles.js +8 -17
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
- package/emotion/es/components/Slider/ui/Handler/Handler.js +86 -51
- package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +16 -10
- package/emotion/es/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/es/components/Slider/utils/index.js +10 -28
- package/emotion/es/components/Slider/variations/_view/base.js +1 -2
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -90
- package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -90
- package/es/components/Breadcrumbs/Breadcrumbs.css +3 -3
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js +11 -4
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
- package/es/components/Breadcrumbs/{Breadcrumbs.styles_1troyzr.css → Breadcrumbs.styles_17id7um.css} +2 -2
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -1
- package/es/components/Breadcrumbs/utils/index.css +3 -3
- package/es/components/Slider/Slider.css +13 -15
- package/es/components/Slider/Slider.js +3 -11
- package/es/components/Slider/Slider.js.map +1 -1
- package/es/components/Slider/Slider.tokens.js +17 -23
- package/es/components/Slider/Slider.tokens.js.map +1 -1
- package/es/components/Slider/components/Double/Double.css +8 -8
- package/es/components/Slider/components/Double/Double.js +19 -54
- package/es/components/Slider/components/Double/Double.js.map +1 -1
- package/es/components/Slider/components/Single/Single.css +14 -14
- package/es/components/Slider/components/Single/Single.js +32 -60
- package/es/components/Slider/components/Single/Single.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles.js +4 -4
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/es/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +5 -0
- package/es/components/Slider/ui/Handler/Handler.css +3 -3
- package/es/components/Slider/ui/Handler/Handler.js +87 -48
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles.js +7 -17
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/es/components/Slider/utils/index.js +10 -28
- package/es/components/Slider/utils/index.js.map +1 -1
- package/es/components/Slider/variations/_view/base.js +1 -1
- package/es/components/Slider/variations/_view/base.js.map +1 -1
- package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/es/index.css +16 -18
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +5 -2
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/styled-components/cjs/components/Slider/Slider.js +2 -10
- package/styled-components/cjs/components/Slider/Slider.tokens.js +17 -23
- package/styled-components/cjs/components/Slider/components/Double/Double.js +19 -54
- package/styled-components/cjs/components/Slider/components/Single/Single.js +31 -59
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +6 -6
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +88 -52
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +4 -7
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/cjs/components/Slider/utils/index.js +10 -28
- package/styled-components/cjs/components/Slider/variations/_view/base.js +1 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -90
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -90
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +5 -2
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js +2 -0
- package/styled-components/es/components/Slider/Slider.js +2 -11
- package/styled-components/es/components/Slider/Slider.tokens.js +17 -23
- package/styled-components/es/components/Slider/components/Double/Double.js +19 -54
- package/styled-components/es/components/Slider/components/Single/Single.js +32 -60
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +5 -5
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +12 -30
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +86 -51
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +5 -8
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +2 -3
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/es/components/Slider/utils/index.js +10 -28
- package/styled-components/es/components/Slider/variations/_view/base.js +1 -2
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +16 -90
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +15 -90
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +1 -1
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts +2 -0
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts.map +1 -1
- package/types/components/Slider/Slider.d.ts.map +1 -1
- package/types/components/Slider/Slider.tokens.d.ts +16 -22
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.types.d.ts +0 -1
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.types.d.ts +7 -75
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +0 -2
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +2 -6
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +1 -5
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +0 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
- package/types/components/Slider/utils/index.d.ts +8 -26
- package/types/components/Slider/utils/index.d.ts.map +1 -1
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +2 -80
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +2 -80
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
- package/types/utils/index.d.ts +1 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +0 -77
- package/cjs/components/Slider/components/Single/Single.styles_14wadfy.css +0 -6
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +0 -5
- package/cjs/components/Slider/ui/Handler/Handler.styles_irtcgm.css +0 -2
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -122
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +0 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +0 -1
- package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +0 -1
- package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -121
- package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -115
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +0 -77
- package/es/components/Slider/components/Single/Single.styles_14wadfy.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +0 -5
- package/es/components/Slider/ui/Handler/Handler.styles_irtcgm.css +0 -2
- package/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -118
- package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +0 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +0 -1
- package/es/components/Slider/variations/_view/base_1s3f6q8.css +0 -1
- package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +0 -121
- package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +0 -115
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +0 -12
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +0 -1
@@ -10,8 +10,8 @@ var _Slider = /*#__PURE__*/require("../../Slider.tokens");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
11
|
var ThumbBase = exports.ThumbBase = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-13botku-0"
|
13
|
-
})(["width:var(
|
14
|
-
outlineOffset: '0.
|
13
|
+
})(["width:var(", ");height:var(", ");position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.125rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], _Slider.tokens.thumbSize, _Slider.tokens.thumbSize, _Slider.tokens.thumbBackgroundColor, _Slider.tokens.thumbBorderColor, _Slider.tokens.thumbFocusBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
|
14
|
+
outlineOffset: '0.125rem',
|
15
15
|
outlineSize: '0.125rem',
|
16
16
|
outlineRadius: '50%',
|
17
17
|
outlineColor: /*#__PURE__*/"var(".concat(_Slider.tokens.thumbFocusBorderColor, ")")
|
@@ -14,8 +14,8 @@ exports.sizeData = void 0;
|
|
14
14
|
* @param {number} max
|
15
15
|
* @return {number}
|
16
16
|
*/
|
17
|
-
function getSliderThumbValue(
|
18
|
-
var newValue = Math.round(
|
17
|
+
function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
|
18
|
+
var newValue = Math.round(handleCenterXRelative / stepSize) + min;
|
19
19
|
return Math.min(Math.max(newValue, min), max);
|
20
20
|
}
|
21
21
|
|
@@ -26,11 +26,11 @@ function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
|
|
26
26
|
* @param {'left' | 'right'} side
|
27
27
|
* @return Array<number>
|
28
28
|
*/
|
29
|
-
function getOffsets(ref, side
|
29
|
+
function getOffsets(ref, side) {
|
30
30
|
if (!ref || !('current' in ref) || !ref.current || !side) {
|
31
31
|
return [0, 0];
|
32
32
|
}
|
33
|
-
var size =
|
33
|
+
var size = ref.current.clientWidth;
|
34
34
|
if (side === 'left') {
|
35
35
|
return [0, size];
|
36
36
|
}
|
@@ -41,33 +41,15 @@ function getOffsets(ref, side, isVertical) {
|
|
41
41
|
}
|
42
42
|
var sizeData = exports.sizeData = {
|
43
43
|
s: {
|
44
|
-
|
45
|
-
|
46
|
-
fontSizeMultiplier: 16
|
47
|
-
},
|
48
|
-
large: {
|
49
|
-
indent: 0.625,
|
50
|
-
fontSizeMultiplier: 16
|
51
|
-
}
|
44
|
+
indent: 0.5,
|
45
|
+
fontSizeMultiplier: 16
|
52
46
|
},
|
53
47
|
m: {
|
54
|
-
|
55
|
-
|
56
|
-
fontSizeMultiplier: 16
|
57
|
-
},
|
58
|
-
large: {
|
59
|
-
indent: 0.625,
|
60
|
-
fontSizeMultiplier: 16
|
61
|
-
}
|
48
|
+
indent: 0.75,
|
49
|
+
fontSizeMultiplier: 16
|
62
50
|
},
|
63
51
|
l: {
|
64
|
-
|
65
|
-
|
66
|
-
fontSizeMultiplier: 16
|
67
|
-
},
|
68
|
-
large: {
|
69
|
-
indent: 0.625,
|
70
|
-
fontSizeMultiplier: 16
|
71
|
-
}
|
52
|
+
indent: 0.75,
|
53
|
+
fontSizeMultiplier: 16
|
72
54
|
}
|
73
55
|
};
|
@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{height:100%;display:inline-flex;}"], _Slider.classes.verticalOrientation);
|
8
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
|
@@ -18,9 +18,9 @@ var config = exports.config = {
|
|
18
18
|
gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
|
19
19
|
},
|
20
20
|
size: {
|
21
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
23
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
21
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
23
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
|
24
24
|
},
|
25
25
|
disabled: {
|
26
26
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
|
@@ -3,19 +3,16 @@ import type { ComponentProps } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
5
|
import type { StoryObj, Meta } from '@storybook/react';
|
6
|
+
import { action } from '@storybook/addon-actions';
|
6
7
|
|
7
|
-
import { IconMic } from '../../../../components/_Icon';
|
8
8
|
import { WithTheme } from '../../../_helpers';
|
9
9
|
|
10
10
|
import { Slider } from './Slider';
|
11
11
|
|
12
12
|
const sizes = ['l', 'm', 's'];
|
13
|
-
const pointerSizes = ['small', 'large', 'none'];
|
14
13
|
const views = ['default', 'accent', 'gradient'];
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const scaleAligns = ['side', 'bottom'];
|
18
|
-
const orientations: Array<string> = ['vertical', 'horizontal'];
|
14
|
+
const labelPlacements = ['outer', 'inner'];
|
15
|
+
const rangeValuesPlacement = ['outer', 'inner'];
|
19
16
|
|
20
17
|
const meta: Meta<typeof Slider> = {
|
21
18
|
title: 'plasma_b2c/Slider',
|
@@ -34,24 +31,9 @@ const meta: Meta<typeof Slider> = {
|
|
34
31
|
type: 'inline-radio',
|
35
32
|
},
|
36
33
|
},
|
37
|
-
pointerSize: {
|
38
|
-
options: pointerSizes,
|
39
|
-
control: {
|
40
|
-
type: 'inline-radio',
|
41
|
-
},
|
42
|
-
},
|
43
|
-
orientation: {
|
44
|
-
options: orientations,
|
45
|
-
control: {
|
46
|
-
type: 'select',
|
47
|
-
},
|
48
|
-
},
|
49
34
|
...disableProps([
|
50
35
|
'value',
|
51
36
|
'onChangeCommitted',
|
52
|
-
'onChangeTextField',
|
53
|
-
'onBlurTextField',
|
54
|
-
'onKeyDownTextField',
|
55
37
|
'ariaLabel',
|
56
38
|
'onChange',
|
57
39
|
'fontSizeMultiplier',
|
@@ -71,9 +53,8 @@ type StorySingleProps = StoryProps;
|
|
71
53
|
type StorySingle = StoryObj<StorySingleProps>;
|
72
54
|
type StoryDouble = StoryObj<StoryProps>;
|
73
55
|
|
74
|
-
const SliderWrapper = styled.div
|
75
|
-
width:
|
76
|
-
height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
|
56
|
+
const SliderWrapper = styled.div`
|
57
|
+
width: 25rem;
|
77
58
|
`;
|
78
59
|
|
79
60
|
const StoryDefault = (args: StorySingleProps) => {
|
@@ -87,86 +68,41 @@ const StoryDefault = (args: StorySingleProps) => {
|
|
87
68
|
setValue(values);
|
88
69
|
};
|
89
70
|
|
90
|
-
const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
|
91
|
-
const isVertical = orientation === 'vertical';
|
92
|
-
|
93
71
|
return (
|
94
|
-
<SliderWrapper
|
95
|
-
<Slider
|
96
|
-
value={value}
|
97
|
-
orientation={orientation}
|
98
|
-
labelPlacement={labelPlacement}
|
99
|
-
labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
|
100
|
-
onChangeCommitted={onChangeCommittedHandle}
|
101
|
-
onChange={onChangeHandle}
|
102
|
-
{...rest}
|
103
|
-
/>
|
72
|
+
<SliderWrapper>
|
73
|
+
<Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
|
104
74
|
</SliderWrapper>
|
105
75
|
);
|
106
76
|
};
|
107
77
|
|
108
78
|
export const Default: StorySingle = {
|
109
79
|
argTypes: {
|
110
|
-
sliderAlign: {
|
111
|
-
options: sliderAligns,
|
112
|
-
control: {
|
113
|
-
type: 'inline-radio',
|
114
|
-
},
|
115
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
116
|
-
},
|
117
80
|
labelPlacement: {
|
118
81
|
options: labelPlacements,
|
119
82
|
control: {
|
120
83
|
type: 'inline-radio',
|
121
84
|
},
|
122
|
-
if: { arg: 'orientation', eq: 'horizontal' },
|
123
|
-
},
|
124
|
-
labelReversed: {
|
125
|
-
control: {
|
126
|
-
type: 'boolean',
|
127
|
-
expanded: true,
|
128
|
-
},
|
129
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
130
|
-
},
|
131
|
-
scaleAlign: {
|
132
|
-
options: scaleAligns,
|
133
|
-
control: {
|
134
|
-
type: 'inline-radio',
|
135
|
-
},
|
136
|
-
if: { arg: 'orientation', eq: 'horizontal' },
|
137
85
|
},
|
138
|
-
|
139
|
-
options:
|
86
|
+
rangeValuesPlacement: {
|
87
|
+
options: rangeValuesPlacement,
|
140
88
|
control: {
|
141
89
|
type: 'inline-radio',
|
142
90
|
},
|
143
91
|
},
|
144
|
-
reversed: {
|
145
|
-
control: {
|
146
|
-
type: 'boolean',
|
147
|
-
},
|
148
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
149
|
-
},
|
150
92
|
},
|
151
93
|
args: {
|
152
94
|
view: 'default',
|
153
95
|
size: 'm',
|
154
|
-
pointerSize: 'small',
|
155
96
|
min: 0,
|
156
97
|
max: 100,
|
157
|
-
|
158
|
-
ariaLabel: 'Цена
|
98
|
+
disabled: false,
|
99
|
+
ariaLabel: 'Цена товара',
|
159
100
|
multipleStepSize: 10,
|
160
|
-
label: 'Цена
|
161
|
-
labelPlacement: '
|
162
|
-
|
163
|
-
|
164
|
-
showScale: true,
|
101
|
+
label: 'Цена товара',
|
102
|
+
labelPlacement: 'outer',
|
103
|
+
rangeValuesPlacement: 'outer',
|
104
|
+
showRangeValues: true,
|
165
105
|
showCurrentValue: false,
|
166
|
-
showIcon: true,
|
167
|
-
reversed: false,
|
168
|
-
labelReversed: false,
|
169
|
-
disabled: false,
|
170
106
|
},
|
171
107
|
render: (args) => <StoryDefault {...args} />,
|
172
108
|
};
|
@@ -206,7 +142,7 @@ const StoryMultipleValues = (args: StoryProps) => {
|
|
206
142
|
};
|
207
143
|
|
208
144
|
return (
|
209
|
-
<SliderWrapper
|
145
|
+
<SliderWrapper>
|
210
146
|
<Slider
|
211
147
|
value={value}
|
212
148
|
onKeyDownTextField={onKeyDownTextField}
|
@@ -223,7 +159,6 @@ export const MultipleValues: StoryDouble = {
|
|
223
159
|
args: {
|
224
160
|
view: 'default',
|
225
161
|
size: 'm',
|
226
|
-
pointerSize: 'small',
|
227
162
|
min: 0,
|
228
163
|
max: 100,
|
229
164
|
disabled: false,
|
@@ -231,14 +166,5 @@ export const MultipleValues: StoryDouble = {
|
|
231
166
|
ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
|
232
167
|
multipleStepSize: 10,
|
233
168
|
},
|
234
|
-
argTypes: {
|
235
|
-
pointerSize: {
|
236
|
-
options: ['small', 'large'],
|
237
|
-
control: {
|
238
|
-
type: 'inline-radio',
|
239
|
-
},
|
240
|
-
},
|
241
|
-
...disableProps(['orientation']),
|
242
|
-
},
|
243
169
|
render: (args) => <StoryMultipleValues {...args} />,
|
244
170
|
};
|
@@ -18,9 +18,9 @@ var config = exports.config = {
|
|
18
18
|
gradient: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-tertiary);", ":var(--on-light-surface-solid-card);", ":var(--surface-accent-gradient);", ":var(--surface-solid-tertiary);", ":var(--surface-accent-gradient);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-primary);"], _Slider.sliderTokens.labelColor, _Slider.sliderTokens.rangeValueColor, _Slider.sliderTokens.thumbBorderColor, _Slider.sliderTokens.thumbBackgroundColor, _Slider.sliderTokens.thumbFocusBorderColor, _Slider.sliderTokens.railBackgroundColor, _Slider.sliderTokens.fillColor, _Slider.sliderTokens.textFieldColor, _Slider.sliderTokens.textFieldBackgroundColor, _Slider.sliderTokens.textFieldCaretColor, _Slider.sliderTokens.textFieldPlaceholderColor, _Slider.sliderTokens.textFiledFocusColor, _Slider.sliderTokens.textFieldActiveColor)
|
19
19
|
},
|
20
20
|
size: {
|
21
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
23
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":
|
21
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.625rem;", ":var(--plasma-typo-text-s-font-family);", ":var(--plasma-typo-text-s-font-size);", ":var(--plasma-typo-text-s-font-style);", ":var(--plasma-typo-text-s-font-weight);", ":var(--plasma-typo-text-s-letter-spacing);", ":var(--plasma-typo-text-s-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3.5rem;", ":1.25rem 1rem 1.25rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.75rem;", ":-1.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.5rem;", ":0.125rem solid;", ":1.75rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight),
|
23
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.375rem;", ":0.25rem;", ":0.25rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":0.5rem;", ":-1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":0.125rem solid;", ":1.25rem;", ":var(--plasma-typo-text-xs-font-family);", ":var(--plasma-typo-text-xs-font-size);", ":var(--plasma-typo-text-xs-font-style);", ":var(--plasma-typo-text-xs-font-weight);", ":var(--plasma-typo-text-xs-letter-spacing);", ":var(--plasma-typo-text-xs-line-height);", ":0.25rem;", ":0.125rem;", ":0.75rem;", ":0.125rem;", ":2.5rem;", ":0.5rem 1rem 0.5rem 1rem;", ":0.625rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Slider.sliderTokens.height, _Slider.sliderTokens.doubleWrapperGap, _Slider.sliderTokens.labelWrapperGap, _Slider.sliderTokens.labelWrapperMarginBottom, _Slider.sliderTokens.labelWrapperMarginRight, _Slider.sliderTokens.labelFontFamily, _Slider.sliderTokens.labelFontSize, _Slider.sliderTokens.labelFontStyle, _Slider.sliderTokens.labelFontWeight, _Slider.sliderTokens.labelLetterSpacing, _Slider.sliderTokens.labelLineHeight, _Slider.sliderTokens.rangeMinValueMargin, _Slider.sliderTokens.rangeMaxValueMargin, _Slider.sliderTokens.rangeValueBottomOffset, _Slider.sliderTokens.rangeValueFontFamily, _Slider.sliderTokens.rangeValueFontSize, _Slider.sliderTokens.rangeValueFontStyle, _Slider.sliderTokens.rangeValueFontWeight, _Slider.sliderTokens.rangeValueLetterSpacing, _Slider.sliderTokens.rangeValueLineHeight, _Slider.sliderTokens.thumbSize, _Slider.sliderTokens.thumbBorder, _Slider.sliderTokens.currentValueTopOffset, _Slider.sliderTokens.currentValueFontFamily, _Slider.sliderTokens.currentValueFontSize, _Slider.sliderTokens.currentValueFontStyle, _Slider.sliderTokens.currentValueFontWeight, _Slider.sliderTokens.currentValueLetterSpacing, _Slider.sliderTokens.currentValueLineHeight, _Slider.sliderTokens.railHeight, _Slider.sliderTokens.railBorderRadius, _Slider.sliderTokens.railIndent, _Slider.sliderTokens.textFieldWrapperGap, _Slider.sliderTokens.textFieldHeight, _Slider.sliderTokens.textFieldPadding, _Slider.sliderTokens.textFieldBorderRadius, _Slider.sliderTokens.textFieldFontFamily, _Slider.sliderTokens.textFieldFontSize, _Slider.sliderTokens.textFieldFontStyle, _Slider.sliderTokens.textFieldFontWeight, _Slider.sliderTokens.textFieldLetterSpacing, _Slider.sliderTokens.textFieldLineHeight)
|
24
24
|
},
|
25
25
|
disabled: {
|
26
26
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Slider.sliderTokens.disabledOpacity)
|
@@ -4,18 +4,14 @@ import styled from 'styled-components';
|
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
5
|
import type { StoryObj, Meta } from '@storybook/react';
|
6
6
|
|
7
|
-
import { IconMic } from '../../../../components/_Icon';
|
8
7
|
import { WithTheme } from '../../../_helpers';
|
9
8
|
|
10
9
|
import { Slider } from './Slider';
|
11
10
|
|
12
11
|
const sizes = ['l', 'm', 's'];
|
13
|
-
const pointerSizes = ['small', 'large', 'none'];
|
14
12
|
const views = ['default', 'accent', 'gradient'];
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const scaleAligns = ['side', 'bottom'];
|
18
|
-
const orientations: Array<string> = ['vertical', 'horizontal'];
|
13
|
+
const labelPlacements = ['outer', 'inner'];
|
14
|
+
const rangeValuesPlacement = ['outer', 'inner'];
|
19
15
|
|
20
16
|
const meta: Meta<typeof Slider> = {
|
21
17
|
title: 'plasma_web/Slider',
|
@@ -34,24 +30,9 @@ const meta: Meta<typeof Slider> = {
|
|
34
30
|
type: 'inline-radio',
|
35
31
|
},
|
36
32
|
},
|
37
|
-
pointerSize: {
|
38
|
-
options: pointerSizes,
|
39
|
-
control: {
|
40
|
-
type: 'inline-radio',
|
41
|
-
},
|
42
|
-
},
|
43
|
-
orientation: {
|
44
|
-
options: orientations,
|
45
|
-
control: {
|
46
|
-
type: 'select',
|
47
|
-
},
|
48
|
-
},
|
49
33
|
...disableProps([
|
50
34
|
'value',
|
51
35
|
'onChangeCommitted',
|
52
|
-
'onChangeTextField',
|
53
|
-
'onBlurTextField',
|
54
|
-
'onKeyDownTextField',
|
55
36
|
'ariaLabel',
|
56
37
|
'onChange',
|
57
38
|
'fontSizeMultiplier',
|
@@ -71,9 +52,8 @@ type StorySingleProps = StoryProps;
|
|
71
52
|
type StorySingle = StoryObj<StorySingleProps>;
|
72
53
|
type StoryDouble = StoryObj<StoryProps>;
|
73
54
|
|
74
|
-
const SliderWrapper = styled.div
|
75
|
-
width:
|
76
|
-
height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
|
55
|
+
const SliderWrapper = styled.div`
|
56
|
+
width: 25rem;
|
77
57
|
`;
|
78
58
|
|
79
59
|
const StoryDefault = (args: StorySingleProps) => {
|
@@ -87,86 +67,41 @@ const StoryDefault = (args: StorySingleProps) => {
|
|
87
67
|
setValue(values);
|
88
68
|
};
|
89
69
|
|
90
|
-
const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
|
91
|
-
const isVertical = orientation === 'vertical';
|
92
|
-
|
93
70
|
return (
|
94
|
-
<SliderWrapper
|
95
|
-
<Slider
|
96
|
-
value={value}
|
97
|
-
orientation={orientation}
|
98
|
-
labelPlacement={labelPlacement}
|
99
|
-
labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
|
100
|
-
onChangeCommitted={onChangeCommittedHandle}
|
101
|
-
onChange={onChangeHandle}
|
102
|
-
{...rest}
|
103
|
-
/>
|
71
|
+
<SliderWrapper>
|
72
|
+
<Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
|
104
73
|
</SliderWrapper>
|
105
74
|
);
|
106
75
|
};
|
107
76
|
|
108
77
|
export const Default: StorySingle = {
|
109
78
|
argTypes: {
|
110
|
-
sliderAlign: {
|
111
|
-
options: sliderAligns,
|
112
|
-
control: {
|
113
|
-
type: 'inline-radio',
|
114
|
-
},
|
115
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
116
|
-
},
|
117
79
|
labelPlacement: {
|
118
80
|
options: labelPlacements,
|
119
81
|
control: {
|
120
82
|
type: 'inline-radio',
|
121
83
|
},
|
122
|
-
if: { arg: 'orientation', eq: 'horizontal' },
|
123
|
-
},
|
124
|
-
labelReversed: {
|
125
|
-
control: {
|
126
|
-
type: 'boolean',
|
127
|
-
expanded: true,
|
128
|
-
},
|
129
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
130
|
-
},
|
131
|
-
scaleAlign: {
|
132
|
-
options: scaleAligns,
|
133
|
-
control: {
|
134
|
-
type: 'inline-radio',
|
135
|
-
},
|
136
|
-
if: { arg: 'orientation', eq: 'horizontal' },
|
137
84
|
},
|
138
|
-
|
139
|
-
options:
|
85
|
+
rangeValuesPlacement: {
|
86
|
+
options: rangeValuesPlacement,
|
140
87
|
control: {
|
141
88
|
type: 'inline-radio',
|
142
89
|
},
|
143
90
|
},
|
144
|
-
reversed: {
|
145
|
-
control: {
|
146
|
-
type: 'boolean',
|
147
|
-
},
|
148
|
-
if: { arg: 'orientation', eq: 'vertical' },
|
149
|
-
},
|
150
91
|
},
|
151
92
|
args: {
|
152
93
|
view: 'default',
|
153
94
|
size: 'm',
|
154
|
-
pointerSize: 'small',
|
155
95
|
min: 0,
|
156
96
|
max: 100,
|
157
|
-
|
158
|
-
ariaLabel: 'Цена
|
97
|
+
disabled: false,
|
98
|
+
ariaLabel: 'Цена товара',
|
159
99
|
multipleStepSize: 10,
|
160
|
-
label: 'Цена
|
161
|
-
labelPlacement: '
|
162
|
-
|
163
|
-
|
164
|
-
showScale: true,
|
100
|
+
label: 'Цена товара',
|
101
|
+
labelPlacement: 'outer',
|
102
|
+
rangeValuesPlacement: 'outer',
|
103
|
+
showRangeValues: true,
|
165
104
|
showCurrentValue: false,
|
166
|
-
showIcon: true,
|
167
|
-
reversed: false,
|
168
|
-
labelReversed: false,
|
169
|
-
disabled: false,
|
170
105
|
},
|
171
106
|
render: (args) => <StoryDefault {...args} />,
|
172
107
|
};
|
@@ -206,7 +141,7 @@ const StoryMultipleValues = (args: StoryProps) => {
|
|
206
141
|
};
|
207
142
|
|
208
143
|
return (
|
209
|
-
<SliderWrapper
|
144
|
+
<SliderWrapper>
|
210
145
|
<Slider
|
211
146
|
value={value}
|
212
147
|
onKeyDownTextField={onKeyDownTextField}
|
@@ -223,7 +158,6 @@ export const MultipleValues: StoryDouble = {
|
|
223
158
|
args: {
|
224
159
|
view: 'default',
|
225
160
|
size: 'm',
|
226
|
-
pointerSize: 'small',
|
227
161
|
min: 0,
|
228
162
|
max: 100,
|
229
163
|
disabled: false,
|
@@ -231,14 +165,5 @@ export const MultipleValues: StoryDouble = {
|
|
231
165
|
ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
|
232
166
|
multipleStepSize: 10,
|
233
167
|
},
|
234
|
-
argTypes: {
|
235
|
-
pointerSize: {
|
236
|
-
options: ['small', 'large'],
|
237
|
-
control: {
|
238
|
-
type: 'inline-radio',
|
239
|
-
},
|
240
|
-
},
|
241
|
-
...disableProps(['orientation']),
|
242
|
-
},
|
243
168
|
render: (args) => <StoryMultipleValues {...args} />,
|
244
169
|
};
|
@@ -9,9 +9,12 @@ var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
|
|
9
9
|
var Link = /*#__PURE__*/component(mergedLinkConfig);
|
10
10
|
export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-4bjoev-0"
|
12
|
-
})(["opacity:", ";", ""], function (_ref) {
|
12
|
+
})(["opacity:", ";color:", ";", ""], function (_ref) {
|
13
13
|
var isHref = _ref.isHref;
|
14
14
|
return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
|
15
|
+
}, function (_ref2) {
|
16
|
+
var isHref = _ref2.isHref;
|
17
|
+
return isHref ? "var(".concat(tokens.breadcrumbsColor, ")") : "var(".concat(tokens.breadcrumbsColorText, ", var(").concat(tokens.breadcrumbsColor, "))");
|
15
18
|
}, /*#__PURE__*/addFocus({
|
16
19
|
outlineOffset: '0rem',
|
17
20
|
outlineSize: '0.125rem',
|
@@ -21,4 +24,4 @@ export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
|
|
21
24
|
export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
|
22
25
|
export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
|
23
26
|
componentId: "plasma-new-hope__sc-4bjoev-1"
|
24
|
-
})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);
|
27
|
+
})(["color:var(", ",var(", "));opacity:var(", ");"], tokens.breadcrumbsColorSeparator, tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);
|
@@ -5,6 +5,8 @@ export var tokens = {
|
|
5
5
|
breadcrumbsGap: '--plasma-breadcrumbs-gap',
|
6
6
|
breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
|
7
7
|
breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
|
8
|
+
breadcrumbsColorSeparator: '--plasma-breadcrumbs-color-separator',
|
9
|
+
breadcrumbsColorText: '--plasma-breadcrumbs-color-text',
|
8
10
|
breadcrumbsColor: '--plasma-breadcrumbs-color',
|
9
11
|
breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
|
10
12
|
breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',
|
@@ -4,13 +4,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
5
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
6
6
|
import React, { forwardRef } from 'react';
|
7
|
-
import { cx } from '../../utils';
|
8
7
|
import { base as viewCSS } from './variations/_view/base';
|
9
8
|
import { base as sizeCSS } from './variations/_size/base';
|
10
9
|
import { base as disabledCSS } from './variations/_disabled/base';
|
11
10
|
import { SingleSlider, DoubleUncontrolled } from './components';
|
12
|
-
import { classes } from './Slider.tokens';
|
13
|
-
|
14
11
|
// TODO: проверить, можно ли обойтись без каста типов
|
15
12
|
|
16
13
|
var isSingleValueProps = function isSingleValueProps(props, type) {
|
@@ -24,15 +21,9 @@ export var sliderRoot = function sliderRoot(Root) {
|
|
24
21
|
var _ref$type = _ref.type,
|
25
22
|
type = _ref$type === void 0 ? 'single' : _ref$type,
|
26
23
|
props = _objectWithoutProperties(_ref, _excluded);
|
27
|
-
|
28
|
-
return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
|
29
|
-
className: cx(props.orientation === 'vertical' && classes.verticalOrientation, props.className),
|
30
|
-
ref: ref
|
31
|
-
}), /*#__PURE__*/React.createElement(SingleSlider, props));
|
32
|
-
}
|
33
|
-
return /*#__PURE__*/React.createElement(Root, _extends({
|
24
|
+
return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
|
34
25
|
ref: ref
|
35
|
-
}, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
|
26
|
+
}), isSingleValueProps(props, type) && /*#__PURE__*/React.createElement(SingleSlider, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
|
36
27
|
});
|
37
28
|
};
|
38
29
|
export var sliderConfig = {
|