@salutejs/plasma-new-hope 0.134.0-canary.1403.10590022490.0 → 0.134.0-canary.1404.10612716409.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. package/cjs/components/DatePicker/RangeDate/RangeDate.js +12 -1
  2. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  3. package/cjs/components/DatePicker/SingleDate/SingleDate.js +12 -4
  4. package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  5. package/cjs/components/DatePicker/hooks/useDatePicker.js +7 -5
  6. package/cjs/components/DatePicker/hooks/useDatePicker.js.map +1 -1
  7. package/cjs/components/DatePicker/utils/dateHelper.js +15 -13
  8. package/cjs/components/DatePicker/utils/dateHelper.js.map +1 -1
  9. package/cjs/components/Switch/Switch.tokens.js +1 -1
  10. package/cjs/components/Switch/Switch.tokens.js.map +1 -1
  11. package/cjs/components/Switch/_size/base.js +1 -1
  12. package/cjs/components/Switch/_size/base.js.map +1 -1
  13. package/cjs/components/Switch/_size/{base_9sphki.css → base_1sjw39x.css} +1 -1
  14. package/cjs/components/Switch/_view/base.js +1 -1
  15. package/cjs/components/Switch/_view/base.js.map +1 -1
  16. package/cjs/components/Switch/_view/base_d10e49.css +1 -0
  17. package/cjs/index.css +2 -2
  18. package/cjs/utils/datejs.js +1 -0
  19. package/cjs/utils/datejs.js.map +1 -1
  20. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +12 -1
  21. package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +12 -4
  22. package/emotion/cjs/components/DatePicker/hooks/useDatePicker.js +7 -5
  23. package/emotion/cjs/components/DatePicker/utils/dateHelper.js +15 -13
  24. package/emotion/cjs/components/Switch/Switch.tokens.js +1 -1
  25. package/emotion/cjs/components/Switch/_size/base.js +1 -1
  26. package/emotion/cjs/components/Switch/_view/base.js +1 -1
  27. package/emotion/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +34 -1
  28. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -4
  29. package/emotion/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +35 -1
  30. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -4
  31. package/emotion/cjs/utils/datejs.js +1 -0
  32. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +12 -1
  33. package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +12 -4
  34. package/emotion/es/components/DatePicker/hooks/useDatePicker.js +7 -5
  35. package/emotion/es/components/DatePicker/utils/dateHelper.js +15 -13
  36. package/emotion/es/components/Switch/Switch.tokens.js +1 -1
  37. package/emotion/es/components/Switch/_size/base.js +1 -1
  38. package/emotion/es/components/Switch/_view/base.js +1 -1
  39. package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +34 -1
  40. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -4
  41. package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +35 -1
  42. package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -4
  43. package/emotion/es/utils/datejs.js +1 -0
  44. package/es/components/DatePicker/RangeDate/RangeDate.js +12 -1
  45. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  46. package/es/components/DatePicker/SingleDate/SingleDate.js +12 -4
  47. package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
  48. package/es/components/DatePicker/hooks/useDatePicker.js +7 -5
  49. package/es/components/DatePicker/hooks/useDatePicker.js.map +1 -1
  50. package/es/components/DatePicker/utils/dateHelper.js +15 -13
  51. package/es/components/DatePicker/utils/dateHelper.js.map +1 -1
  52. package/es/components/Switch/Switch.tokens.js +1 -1
  53. package/es/components/Switch/Switch.tokens.js.map +1 -1
  54. package/es/components/Switch/_size/base.js +1 -1
  55. package/es/components/Switch/_size/base.js.map +1 -1
  56. package/es/components/Switch/_size/{base_9sphki.css → base_1sjw39x.css} +1 -1
  57. package/es/components/Switch/_view/base.js +1 -1
  58. package/es/components/Switch/_view/base.js.map +1 -1
  59. package/es/components/Switch/_view/base_d10e49.css +1 -0
  60. package/es/index.css +2 -2
  61. package/es/utils/datejs.js +1 -0
  62. package/es/utils/datejs.js.map +1 -1
  63. package/package.json +4 -4
  64. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +12 -1
  65. package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +12 -4
  66. package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js +7 -5
  67. package/styled-components/cjs/components/DatePicker/utils/dateHelper.js +15 -13
  68. package/styled-components/cjs/components/Switch/Switch.tokens.js +1 -1
  69. package/styled-components/cjs/components/Switch/_size/base.js +1 -1
  70. package/styled-components/cjs/components/Switch/_view/base.js +1 -1
  71. package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +34 -1
  72. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
  73. package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +35 -1
  74. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +1 -1
  75. package/styled-components/cjs/utils/datejs.js +1 -0
  76. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +12 -1
  77. package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +12 -4
  78. package/styled-components/es/components/DatePicker/hooks/useDatePicker.js +7 -5
  79. package/styled-components/es/components/DatePicker/utils/dateHelper.js +15 -13
  80. package/styled-components/es/components/Switch/Switch.tokens.js +1 -1
  81. package/styled-components/es/components/Switch/_size/base.js +1 -1
  82. package/styled-components/es/components/Switch/_view/base.js +1 -1
  83. package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +34 -1
  84. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
  85. package/styled-components/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx +35 -1
  86. package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +1 -1
  87. package/styled-components/es/utils/datejs.js +1 -0
  88. package/types/components/DatePicker/DatePickerBase.types.d.ts +6 -0
  89. package/types/components/DatePicker/DatePickerBase.types.d.ts.map +1 -1
  90. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  91. package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
  92. package/types/components/DatePicker/hooks/useDatePicker.d.ts +1 -1
  93. package/types/components/DatePicker/hooks/useDatePicker.d.ts.map +1 -1
  94. package/types/components/DatePicker/utils/dateHelper.d.ts +6 -3
  95. package/types/components/DatePicker/utils/dateHelper.d.ts.map +1 -1
  96. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
  97. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
  98. package/types/utils/datejs.d.ts +1 -0
  99. package/types/utils/datejs.d.ts.map +1 -1
  100. package/cjs/components/Switch/_view/base_b0jyco.css +0 -1
  101. package/es/components/Switch/_view/base_b0jyco.css +0 -1
@@ -5,41 +5,43 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
7
7
  var _datejs = /*#__PURE__*/require("../../../utils/datejs");
8
- var formatInputValue = exports.formatInputValue = function formatInputValue(value, format) {
9
- if (!value) {
8
+ require("dayjs/locale/ru");
9
+ require("dayjs/locale/en");
10
+ var formatInputValue = exports.formatInputValue = function formatInputValue(value, format, lang) {
11
+ if (!value || !lang) {
10
12
  return '';
11
13
  }
12
14
  if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
13
- return (0, _datejs.customDayjs)(value, format).format(format);
15
+ return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
14
16
  }
15
17
  if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
16
- return (0, _datejs.customDayjs)(value).format(format);
18
+ return (0, _datejs.customDayjs)(value).locale(lang).format(format);
17
19
  }
18
20
  return String(value);
19
21
  };
20
- var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format) {
21
- if (!value) {
22
+ var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format, lang) {
23
+ if (!value || !lang) {
22
24
  return undefined;
23
25
  }
24
26
  if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
25
- return (0, _datejs.customDayjs)(value, format, true).toDate();
27
+ return (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate();
26
28
  }
27
29
  if (String(new Date(value)) !== 'Invalid Date') {
28
- return (0, _datejs.customDayjs)(value).toDate();
30
+ return (0, _datejs.customDayjs)(value).locale(lang).toDate();
29
31
  }
30
32
  return undefined;
31
33
  };
32
- var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format) {
33
- if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
34
+ var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format, lang) {
35
+ if (format && (0, _datejs.customDayjs)(value, format, true).isValid() && lang) {
34
36
  return {
35
- value: (0, _datejs.customDayjs)(value, format, true).toDate(),
37
+ value: (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate(),
36
38
  isError: false,
37
39
  isSuccess: true
38
40
  };
39
41
  }
40
- if (!format && String(new Date(value)) !== 'Invalid Date') {
42
+ if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
41
43
  return {
42
- value: (0, _datejs.customDayjs)(value).toDate(),
44
+ value: (0, _datejs.customDayjs)(value).locale(lang).toDate(),
43
45
  isError: false,
44
46
  isSuccess: true
45
47
  };
@@ -20,7 +20,7 @@ var tokens = exports.tokens = {
20
20
  trackHeight: '--plasma-switch__track-height',
21
21
  trackBorderRadius: '--plasma-switch__track-border-radius',
22
22
  // NOTE: could be intersection with checked
23
- trackBackgroundColorOn: '--plasma-switch__track_cheched_true-bg-color',
23
+ trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
24
24
  trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',
25
25
  trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',
26
26
  trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',
@@ -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)(["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(--plasma_private-switch__label-offset,0);}:active ", "::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, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
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(--plasma_private-switch__label-offset,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, _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(", ");}", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:hover ~ ", "{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _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);
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);
@@ -1,4 +1,4 @@
1
- import React, { ComponentProps, useEffect, useRef, useState } from 'react';
1
+ import React, { ComponentProps, useEffect, useReducer, useRef, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -47,6 +47,12 @@ const meta: Meta = {
47
47
  type: 'date',
48
48
  },
49
49
  },
50
+ lang: {
51
+ options: ['ru', 'en'],
52
+ control: {
53
+ type: 'inline-radio',
54
+ },
55
+ },
50
56
  },
51
57
  };
52
58
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
63
69
  valueError,
64
70
  valueSuccess,
65
71
  size,
72
+ lang,
73
+ format,
66
74
  ...rest
67
75
  }: StoryPropsDefault) => {
68
76
  const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
83
91
  onChangeValue={(e, currentValue) => {
84
92
  onChangeValue(e, currentValue);
85
93
  }}
94
+ lang={lang}
95
+ format={format}
86
96
  onCommitDate={() => setIsOpen(false)}
87
97
  {...rest}
88
98
  />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
102
112
  type: 'inline-radio',
103
113
  },
104
114
  },
115
+ format: {
116
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
117
+ control: {
118
+ type: 'select',
119
+ },
120
+ },
105
121
  },
106
122
  args: {
107
123
  label: 'Лейбл',
@@ -121,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
121
137
  enableContentRight: true,
122
138
  valueError: false,
123
139
  valueSuccess: false,
140
+ lang: 'ru',
141
+ format: 'DD.MM.YYYY',
124
142
  },
125
143
  render: (args) => <StoryDefault {...args} />,
126
144
  };
@@ -230,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
230
248
  type: 'inline-radio',
231
249
  },
232
250
  },
251
+ format: {
252
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
253
+ control: {
254
+ type: 'select',
255
+ },
256
+ },
233
257
  },
234
258
  args: {
235
259
  label: 'Лейбл',
@@ -256,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
256
280
  enableSecondTextfieldContentLeft: false,
257
281
  enableSecondTextfieldContentRight: false,
258
282
 
283
+ lang: 'ru',
284
+ format: 'DD.MM.YYYY',
285
+
259
286
  firstValueError: false,
260
287
  firstValueSuccess: false,
261
288
  secondValueError: false,
@@ -321,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
321
348
  type: 'inline-radio',
322
349
  },
323
350
  },
351
+ format: {
352
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
353
+ control: {
354
+ type: 'select',
355
+ },
356
+ },
324
357
  },
325
358
  args: {
326
359
  label: 'Лейбл',
@@ -20,7 +20,7 @@ var config = exports.config = {
20
20
  m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
21
21
  },
22
22
  view: {
23
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
23
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
24
24
  },
25
25
  labelPosition: {
26
26
  before: _before.labelPosition_Before,
@@ -1,4 +1,4 @@
1
- import React, { ComponentProps, useEffect, useRef, useState } from 'react';
1
+ import React, { ComponentProps, useEffect, useReducer, useRef, useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import { action } from '@storybook/addon-actions';
4
4
  import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -47,6 +47,12 @@ const meta: Meta = {
47
47
  type: 'date',
48
48
  },
49
49
  },
50
+ lang: {
51
+ options: ['ru', 'en'],
52
+ control: {
53
+ type: 'inline-radio',
54
+ },
55
+ },
50
56
  },
51
57
  };
52
58
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
63
69
  valueError,
64
70
  valueSuccess,
65
71
  size,
72
+ lang,
73
+ format,
66
74
  ...rest
67
75
  }: StoryPropsDefault) => {
68
76
  const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
83
91
  onChangeValue={(e, currentValue) => {
84
92
  onChangeValue(e, currentValue);
85
93
  }}
94
+ lang={lang}
95
+ format={format}
86
96
  onCommitDate={() => setIsOpen(false)}
87
97
  {...rest}
88
98
  />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
102
112
  type: 'inline-radio',
103
113
  },
104
114
  },
115
+ format: {
116
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
117
+ control: {
118
+ type: 'select',
119
+ },
120
+ },
105
121
  },
106
122
  args: {
107
123
  label: 'Лейбл',
@@ -109,6 +125,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
109
125
  placeholder: '30.05.2024',
110
126
  size: 'l',
111
127
  view: 'default',
128
+ labelPlacement: 'outer',
112
129
  defaultDate: new Date(2024, 5, 14),
113
130
  min: new Date(2024, 1, 1),
114
131
  max: new Date(2024, 12, 29),
@@ -120,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
120
137
  enableContentRight: true,
121
138
  valueError: false,
122
139
  valueSuccess: false,
140
+ lang: 'ru',
141
+ format: 'DD.MM.YYYY',
123
142
  },
124
143
  render: (args) => <StoryDefault {...args} />,
125
144
  };
@@ -229,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
229
248
  type: 'inline-radio',
230
249
  },
231
250
  },
251
+ format: {
252
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
253
+ control: {
254
+ type: 'select',
255
+ },
256
+ },
232
257
  },
233
258
  args: {
234
259
  label: 'Лейбл',
@@ -255,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
255
280
  enableSecondTextfieldContentLeft: false,
256
281
  enableSecondTextfieldContentRight: false,
257
282
 
283
+ lang: 'ru',
284
+ format: 'DD.MM.YYYY',
285
+
258
286
  firstValueError: false,
259
287
  firstValueSuccess: false,
260
288
  secondValueError: false,
@@ -320,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
320
348
  type: 'inline-radio',
321
349
  },
322
350
  },
351
+ format: {
352
+ options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
353
+ control: {
354
+ type: 'select',
355
+ },
356
+ },
323
357
  },
324
358
  args: {
325
359
  label: 'Лейбл',
@@ -20,7 +20,7 @@ var config = exports.config = {
20
20
  m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
21
21
  },
22
22
  view: {
23
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
23
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
24
24
  },
25
25
  labelPosition: {
26
26
  before: _before.labelPosition_Before,
@@ -8,6 +8,7 @@ var _dayjs = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs"))
8
8
  var _customParseFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/customParseFormat"));
9
9
  var _quarterOfYear = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/quarterOfYear"));
10
10
  var _advancedFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/advancedFormat"));
11
+ require("dayjs/locale/ru");
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
13
  _dayjs["default"].extend(_customParseFormat["default"]);
13
14
  _dayjs["default"].extend(_quarterOfYear["default"]);
@@ -1,4 +1,4 @@
1
- var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
1
+ var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
2
2
  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); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9,6 +9,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
9
9
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
10
  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; }
11
11
  import React, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
12
+ import { useDidMountEffect } from '../../../hooks';
12
13
  import { cx } from '../../../utils';
13
14
  import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
14
15
  import { useDatePicker } from '../hooks/useDatePicker';
@@ -61,6 +62,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
61
62
  secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
62
63
  _ref$format = _ref.format,
63
64
  format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
65
+ _ref$lang = _ref.lang,
66
+ lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
64
67
  maskWithFormat = _ref.maskWithFormat,
65
68
  min = _ref.min,
66
69
  max = _ref.max,
@@ -133,6 +136,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
133
136
  setIsInnerOpen: setIsInnerOpen,
134
137
  dateFormatDelimiter: dateFormatDelimiter,
135
138
  format: format,
139
+ lang: lang,
136
140
  disabled: disabled,
137
141
  readOnly: readOnly,
138
142
  maskWithFormat: maskWithFormat,
@@ -151,6 +155,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
151
155
  setIsInnerOpen: setIsInnerOpen,
152
156
  dateFormatDelimiter: dateFormatDelimiter,
153
157
  format: format,
158
+ lang: lang,
154
159
  disabled: disabled,
155
160
  readOnly: readOnly,
156
161
  maskWithFormat: maskWithFormat,
@@ -242,6 +247,12 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
242
247
  setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
243
248
  setInputSecondValue(formatInputValue(defaultSecondDate, format));
244
249
  }, [defaultSecondDate]);
250
+ useDidMountEffect(function () {
251
+ setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
252
+ setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
253
+ setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
254
+ setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
255
+ }, [format, lang]);
245
256
  return /*#__PURE__*/React.createElement(Root, _extends({
246
257
  ref: rootRef,
247
258
  view: view,
@@ -1,4 +1,4 @@
1
- var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
1
+ var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
2
2
  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); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -15,6 +15,7 @@ import { useDatePicker } from '../hooks/useDatePicker';
15
15
  import { classes } from '../DatePicker.tokens';
16
16
  import { StyledCalendar } from '../DatePickerBase.styles';
17
17
  import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
18
+ import { useDidMountEffect } from '../../../hooks';
18
19
  import { base as sizeCSS } from './variations/_size/base';
19
20
  import { base as viewCSS } from './variations/_view/base';
20
21
  import { base as disabledCSS } from './variations/_disabled/base';
@@ -46,6 +47,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
46
47
  valueSuccess = _ref.valueSuccess,
47
48
  _ref$format = _ref.format,
48
49
  format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
50
+ _ref$lang = _ref.lang,
51
+ lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
49
52
  maskWithFormat = _ref.maskWithFormat,
50
53
  min = _ref.min,
51
54
  max = _ref.max,
@@ -77,11 +80,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
77
80
  _useState2 = _slicedToArray(_useState, 2),
78
81
  isInnerOpen = _useState2[0],
79
82
  setIsInnerOpen = _useState2[1];
80
- var _useState3 = useState(formatCalendarValue(defaultDate, format)),
83
+ var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
81
84
  _useState4 = _slicedToArray(_useState3, 2),
82
85
  calendarValue = _useState4[0],
83
86
  setCalendarValue = _useState4[1];
84
- var _useState5 = useState(formatInputValue(defaultDate, format)),
87
+ var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
85
88
  _useState6 = _slicedToArray(_useState5, 2),
86
89
  inputValue = _useState6[0],
87
90
  setInputValue = _useState6[1];
@@ -96,6 +99,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
96
99
  setIsInnerOpen: setIsInnerOpen,
97
100
  dateFormatDelimiter: dateFormatDelimiter,
98
101
  format: format,
102
+ lang: lang,
99
103
  disabled: disabled,
100
104
  readOnly: readOnly,
101
105
  maskWithFormat: maskWithFormat,
@@ -146,8 +150,12 @@ export var datePickerRoot = function datePickerRoot(Root) {
146
150
  }, [opened]);
147
151
  useEffect(function () {
148
152
  setCalendarValue(formatCalendarValue(defaultDate, format));
149
- setInputValue(formatInputValue(defaultDate, format));
153
+ setInputValue(formatInputValue(defaultDate, format, lang));
150
154
  }, [defaultDate]);
155
+ useDidMountEffect(function () {
156
+ setCalendarValue(formatCalendarValue(defaultDate, format, lang));
157
+ setInputValue(formatInputValue(defaultDate, format, lang));
158
+ }, [format, lang]);
151
159
  return /*#__PURE__*/React.createElement(Root, _extends({
152
160
  view: view,
153
161
  size: size,
@@ -7,6 +7,8 @@ export var useDatePicker = function useDatePicker(_ref) {
7
7
  setIsInnerOpen = _ref.setIsInnerOpen,
8
8
  dateFormatDelimiter = _ref.dateFormatDelimiter,
9
9
  format = _ref.format,
10
+ _ref$lang = _ref.lang,
11
+ lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
10
12
  disabled = _ref.disabled,
11
13
  readOnly = _ref.readOnly,
12
14
  maskWithFormat = _ref.maskWithFormat,
@@ -39,7 +41,7 @@ export var useDatePicker = function useDatePicker(_ref) {
39
41
  } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
40
42
  setCalendarValue(formatCalendarValue(newValue, format));
41
43
  }
42
- setInputValue(formatInputValue(newValue, format));
44
+ setInputValue(formatInputValue(newValue, format, lang));
43
45
  onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
44
46
  };
45
47
  var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -52,8 +54,8 @@ export var useDatePicker = function useDatePicker(_ref) {
52
54
  return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
53
55
  }
54
56
  if (isCalendarValue) {
55
- setCalendarValue(formatCalendarValue(date, format));
56
- setInputValue(formatInputValue(date, format));
57
+ setCalendarValue(formatCalendarValue(date, format, lang));
58
+ setInputValue(formatInputValue(date, format, lang));
57
59
  return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
58
60
  }
59
61
  var formatString = applyFormat ? format : undefined;
@@ -61,8 +63,8 @@ export var useDatePicker = function useDatePicker(_ref) {
61
63
  newDate = _getDateFromFormat.value,
62
64
  isError = _getDateFromFormat.isError,
63
65
  isSuccess = _getDateFromFormat.isSuccess;
64
- setCalendarValue(formatCalendarValue(newDate, format));
65
- setInputValue(formatInputValue(newDate, format));
66
+ setCalendarValue(formatCalendarValue(newDate, format, lang));
67
+ setInputValue(formatInputValue(newDate, format, lang));
66
68
  onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
67
69
  };
68
70
  return {
@@ -1,39 +1,41 @@
1
1
  import { customDayjs } from '../../../utils/datejs';
2
- export var formatInputValue = function formatInputValue(value, format) {
3
- if (!value) {
2
+ import 'dayjs/locale/ru';
3
+ import 'dayjs/locale/en';
4
+ export var formatInputValue = function formatInputValue(value, format, lang) {
5
+ if (!value || !lang) {
4
6
  return '';
5
7
  }
6
8
  if (format && customDayjs(value, format, true).isValid()) {
7
- return customDayjs(value, format).format(format);
9
+ return customDayjs(value, format).locale(lang).format(format);
8
10
  }
9
11
  if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
10
- return customDayjs(value).format(format);
12
+ return customDayjs(value).locale(lang).format(format);
11
13
  }
12
14
  return String(value);
13
15
  };
14
- export var formatCalendarValue = function formatCalendarValue(value, format) {
15
- if (!value) {
16
+ export var formatCalendarValue = function formatCalendarValue(value, format, lang) {
17
+ if (!value || !lang) {
16
18
  return undefined;
17
19
  }
18
20
  if (format && customDayjs(value, format, true).isValid()) {
19
- return customDayjs(value, format, true).toDate();
21
+ return customDayjs(value, format, true).locale(lang).toDate();
20
22
  }
21
23
  if (String(new Date(value)) !== 'Invalid Date') {
22
- return customDayjs(value).toDate();
24
+ return customDayjs(value).locale(lang).toDate();
23
25
  }
24
26
  return undefined;
25
27
  };
26
- export var getDateFromFormat = function getDateFromFormat(value, format) {
27
- if (format && customDayjs(value, format, true).isValid()) {
28
+ export var getDateFromFormat = function getDateFromFormat(value, format, lang) {
29
+ if (format && customDayjs(value, format, true).isValid() && lang) {
28
30
  return {
29
- value: customDayjs(value, format, true).toDate(),
31
+ value: customDayjs(value, format, true).locale(lang).toDate(),
30
32
  isError: false,
31
33
  isSuccess: true
32
34
  };
33
35
  }
34
- if (!format && String(new Date(value)) !== 'Invalid Date') {
36
+ if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
35
37
  return {
36
- value: customDayjs(value).toDate(),
38
+ value: customDayjs(value).locale(lang).toDate(),
37
39
  isError: false,
38
40
  isSuccess: true
39
41
  };
@@ -14,7 +14,7 @@ export var tokens = {
14
14
  trackHeight: '--plasma-switch__track-height',
15
15
  trackBorderRadius: '--plasma-switch__track-border-radius',
16
16
  // NOTE: could be intersection with checked
17
- trackBackgroundColorOn: '--plasma-switch__track_cheched_true-bg-color',
17
+ trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
18
18
  trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',
19
19
  trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',
20
20
  trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
3
  import { StyledLabel, StyledTrigger } from '../Switch.styles';
4
- export var base = /*#__PURE__*/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(--plasma_private-switch__label-offset,0);}:active ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
4
+ export var base = /*#__PURE__*/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(--plasma_private-switch__label-offset,0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
3
  import { StyledTrigger, StyledInput } from '../Switch.styles';
4
- export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:hover ~ ", "{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);
4
+ export var base = /*#__PURE__*/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(", "));}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow);