@alfalab/core-components-switch 6.0.2 → 6.0.3-alfasans

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/Component.d.ts +12 -12
  2. package/Component.js.map +1 -1
  3. package/cssm/Component.d.ts +12 -12
  4. package/cssm/Component.js.map +1 -1
  5. package/cssm/index.module.css +9 -5
  6. package/cssm/types/colors.d.ts +1 -1
  7. package/default.css +11 -11
  8. package/default.module.css.js +1 -1
  9. package/default.module.css.js.map +1 -1
  10. package/esm/Component.d.ts +12 -12
  11. package/esm/Component.js.map +1 -1
  12. package/esm/default.css +11 -11
  13. package/esm/default.module.css.js +1 -1
  14. package/esm/default.module.css.js.map +1 -1
  15. package/esm/index.css +28 -24
  16. package/esm/index.module.css.js +1 -1
  17. package/esm/index.module.css.js.map +1 -1
  18. package/esm/inverted.css +11 -11
  19. package/esm/inverted.module.css.js +1 -1
  20. package/esm/inverted.module.css.js.map +1 -1
  21. package/esm/types/colors.d.ts +1 -1
  22. package/index.css +28 -24
  23. package/index.module.css.js +1 -1
  24. package/index.module.css.js.map +1 -1
  25. package/inverted.css +11 -11
  26. package/inverted.module.css.js +1 -1
  27. package/inverted.module.css.js.map +1 -1
  28. package/modern/Component.d.ts +12 -12
  29. package/modern/Component.js.map +1 -1
  30. package/modern/default.css +11 -11
  31. package/modern/default.module.css.js +1 -1
  32. package/modern/default.module.css.js.map +1 -1
  33. package/modern/index.css +28 -24
  34. package/modern/index.module.css.js +1 -1
  35. package/modern/index.module.css.js.map +1 -1
  36. package/modern/inverted.css +11 -11
  37. package/modern/inverted.module.css.js +1 -1
  38. package/modern/inverted.module.css.js.map +1 -1
  39. package/modern/types/colors.d.ts +1 -1
  40. package/moderncssm/Component.d.ts +12 -12
  41. package/moderncssm/Component.js.map +1 -1
  42. package/moderncssm/index.module.css +6 -3
  43. package/moderncssm/types/colors.d.ts +1 -1
  44. package/package.json +4 -4
  45. package/src/default.module.css +1 -1
  46. package/src/index.module.css +1 -1
  47. package/src/inverted.module.css +1 -1
  48. package/types/colors.d.ts +1 -1
package/modern/index.css CHANGED
@@ -20,8 +20,9 @@
20
20
  --gap-16: var(--gap-m);
21
21
  }
22
22
  :root {
23
- --font-family-system:
24
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
23
+ --font-family-alfasans:
24
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
25
+ Helvetica, sans-serif;
25
26
  }
26
27
  :root {
27
28
  --focus-color: var(--color-light-status-info);
@@ -32,7 +33,7 @@
32
33
  --switch-error-color: var(--color-light-text-negative);
33
34
  --switch-icon-color: var(--color-static-neutral-0);
34
35
  }
35
- .switch__component_1xk5j {
36
+ .switch__component_vunw2 {
36
37
  display: inline-flex;
37
38
  align-items: flex-start;
38
39
  margin: var(--gap-0);
@@ -41,25 +42,25 @@
41
42
  cursor: pointer;
42
43
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43
44
  }
44
- .switch__component_1xk5j input {
45
+ .switch__component_vunw2 input {
45
46
  opacity: 0;
46
47
  position: absolute;
47
48
  }
48
- .switch__start_1xk5j {
49
+ .switch__start_vunw2 {
49
50
  align-items: flex-start;
50
51
  }
51
- .switch__center_1xk5j {
52
+ .switch__center_vunw2 {
52
53
  align-items: center;
53
54
  }
54
- .switch__addons_1xk5j {
55
+ .switch__addons_vunw2 {
55
56
  margin-left: auto;
56
57
  padding-left: var(--gap-16);
57
58
  line-height: 24px;
58
59
  }
59
- .switch__block_1xk5j {
60
+ .switch__block_vunw2 {
60
61
  width: 100%;
61
62
  }
62
- .switch__switch_1xk5j {
63
+ .switch__switch_vunw2 {
63
64
  position: relative;
64
65
  border-radius: var(--border-radius-16);
65
66
  width: 36px;
@@ -72,7 +73,7 @@
72
73
  border-color 0.2s ease;
73
74
  box-sizing: border-box;
74
75
  }
75
- .switch__switch_1xk5j:before {
76
+ .switch__switch_vunw2:before {
76
77
  content: '';
77
78
  position: absolute;
78
79
  top: var(--gap-0);
@@ -85,54 +86,57 @@
85
86
  box-sizing: border-box;
86
87
  transition: transform 0.2s ease;
87
88
  }
88
- .switch__content_1xk5j {
89
+ .switch__content_vunw2 {
89
90
  margin-left: var(--gap-12);
90
91
  flex-grow: 1;
91
92
  }
92
- .switch__label_1xk5j {
93
+ .switch__label_vunw2 {
93
94
  font-size: 16px;
94
95
  line-height: 24px;
95
96
  font-weight: 400;
96
- font-family: var(--font-family-system);
97
+ letter-spacing: -0.24px;
98
+ font-family: var(--font-family-alfasans);
97
99
  display: block;
98
100
  }
99
- .switch__label_1xk5j:not(:only-child) {
101
+ .switch__label_vunw2:not(:only-child) {
100
102
  margin-bottom: var(--gap-4);
101
103
  }
102
- .switch__errorMessage_1xk5j {
104
+ .switch__errorMessage_vunw2 {
103
105
  font-size: 14px;
104
106
  line-height: 18px;
105
107
  font-weight: 400;
106
- font-family: var(--font-family-system);
108
+ letter-spacing: -0.08px;
109
+ font-family: var(--font-family-alfasans);
107
110
  color: var(--switch-error-color);
108
111
  }
109
- .switch__hint_1xk5j {
112
+ .switch__hint_vunw2 {
110
113
  font-size: 14px;
111
114
  line-height: 18px;
112
115
  font-weight: 400;
113
- font-family: var(--font-family-system);
116
+ letter-spacing: -0.08px;
117
+ font-family: var(--font-family-alfasans);
114
118
  display: block;
115
119
  }
116
- .switch__component_1xk5j.switch__reversed_1xk5j {
120
+ .switch__component_vunw2.switch__reversed_vunw2 {
117
121
  flex-direction: row-reverse;
118
122
  }
119
- .switch__reversed_1xk5j .switch__content_1xk5j {
123
+ .switch__reversed_vunw2 .switch__content_vunw2 {
120
124
  margin-right: var(--gap-16);
121
125
  margin-left: var(--gap-0);
122
126
  }
123
- .switch__reversed_1xk5j .switch__addons_1xk5j {
127
+ .switch__reversed_vunw2 .switch__addons_vunw2 {
124
128
  margin-left: var(--gap-0);
125
129
  padding-left: var(--gap-0);
126
130
  margin-right: auto;
127
131
  padding-right: var(--gap-16);
128
132
  }
129
- .switch__checked_1xk5j .switch__switch_1xk5j:before {
133
+ .switch__checked_vunw2 .switch__switch_vunw2:before {
130
134
  transform: translateX(16px);
131
135
  }
132
- .switch__disabled_1xk5j {
136
+ .switch__disabled_vunw2 {
133
137
  cursor: var(--disabled-cursor);
134
138
  }
135
- .switch__focused_1xk5j .switch__switch_1xk5j {
139
+ .switch__focused_vunw2 .switch__switch_vunw2 {
136
140
  outline: 2px solid var(--focus-color);
137
141
  outline-offset: 2px;
138
142
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"switch__component_1xk5j","start":"switch__start_1xk5j","center":"switch__center_1xk5j","addons":"switch__addons_1xk5j","block":"switch__block_1xk5j","switch":"switch__switch_1xk5j","content":"switch__content_1xk5j","label":"switch__label_1xk5j","errorMessage":"switch__errorMessage_1xk5j","hint":"switch__hint_1xk5j","reversed":"switch__reversed_1xk5j","checked":"switch__checked_1xk5j","disabled":"switch__disabled_1xk5j","focused":"switch__focused_1xk5j"};
3
+ const styles = {"component":"switch__component_vunw2","start":"switch__start_vunw2","center":"switch__center_vunw2","addons":"switch__addons_vunw2","block":"switch__block_vunw2","switch":"switch__switch_vunw2","content":"switch__content_vunw2","label":"switch__label_vunw2","errorMessage":"switch__errorMessage_vunw2","hint":"switch__hint_vunw2","reversed":"switch__reversed_vunw2","checked":"switch__checked_vunw2","disabled":"switch__disabled_vunw2","focused":"switch__focused_vunw2"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import './vars.css';\n\n.component {\n display: inline-flex;\n align-items: flex-start;\n margin: var(--gap-0);\n padding: var(--gap-0);\n border: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n opacity: 0;\n position: absolute;\n}\n\n.start {\n align-items: flex-start;\n}\n\n.center {\n align-items: center;\n}\n\n.addons {\n margin-left: auto;\n padding-left: var(--gap-16);\n line-height: 24px;\n}\n\n.block {\n width: 100%;\n}\n\n.switch {\n position: relative;\n border-radius: var(--border-radius-16);\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\n flex-shrink: 0;\n border: 2px solid var(--switch-border-color);\n transition:\n background-color 0.2s ease,\n border-color 0.2s ease;\n box-sizing: border-box;\n}\n\n.switch:before {\n content: '';\n position: absolute;\n top: var(--gap-0);\n left: var(--gap-0);\n bottom: var(--gap-0);\n right: var(--gap-16);\n display: block;\n border-radius: var(--border-radius-circle);\n background-color: var(--switch-icon-color);\n box-sizing: border-box;\n transition: transform 0.2s ease;\n}\n\n.content {\n margin-left: var(--gap-12);\n flex-grow: 1;\n}\n\n.label {\n @mixin paragraph_primary_medium;\n display: block;\n}\n\n.label:not(:only-child) {\n margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n @mixin paragraph_component_secondary;\n color: var(--switch-error-color);\n}\n\n.hint {\n @mixin paragraph_component_secondary;\n display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n flex-direction: row-reverse;\n}\n\n.reversed .content {\n margin-right: var(--gap-16);\n margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n margin-left: var(--gap-0);\n padding-left: var(--gap-0);\n margin-right: auto;\n padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.component {\n display: inline-flex;\n align-items: flex-start;\n margin: var(--gap-0);\n padding: var(--gap-0);\n border: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n opacity: 0;\n position: absolute;\n}\n\n.start {\n align-items: flex-start;\n}\n\n.center {\n align-items: center;\n}\n\n.addons {\n margin-left: auto;\n padding-left: var(--gap-16);\n line-height: 24px;\n}\n\n.block {\n width: 100%;\n}\n\n.switch {\n position: relative;\n border-radius: var(--border-radius-16);\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\n flex-shrink: 0;\n border: 2px solid var(--switch-border-color);\n transition:\n background-color 0.2s ease,\n border-color 0.2s ease;\n box-sizing: border-box;\n}\n\n.switch:before {\n content: '';\n position: absolute;\n top: var(--gap-0);\n left: var(--gap-0);\n bottom: var(--gap-0);\n right: var(--gap-16);\n display: block;\n border-radius: var(--border-radius-circle);\n background-color: var(--switch-icon-color);\n box-sizing: border-box;\n transition: transform 0.2s ease;\n}\n\n.content {\n margin-left: var(--gap-12);\n flex-grow: 1;\n}\n\n.label {\n @mixin paragraph_primary_medium;\n display: block;\n}\n\n.label:not(:only-child) {\n margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n @mixin paragraph_component_secondary;\n color: var(--switch-error-color);\n}\n\n.hint {\n @mixin paragraph_component_secondary;\n display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n flex-direction: row-reverse;\n}\n\n.reversed .content {\n margin-right: var(--gap-16);\n margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n margin-left: var(--gap-0);\n padding-left: var(--gap-0);\n margin-right: auto;\n padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
package/modern/inverted.css CHANGED
@@ -20,36 +20,36 @@
20
20
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
21
21
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
22
22
  }
23
- .switch__switch_b7fk6 {
23
+ .switch__switch_1f1cy {
24
24
  background-color: var(--switch-bg-inverted-color);
25
25
  }
26
- .switch__switch_b7fk6:hover {
26
+ .switch__switch_1f1cy:hover {
27
27
  background-color: var(--switch-hover-bg-inverted-color);
28
28
  }
29
- .switch__label_b7fk6 {
29
+ .switch__label_1f1cy {
30
30
  color: var(--switch-label-inverted-color);
31
31
  }
32
- .switch__hint_b7fk6 {
32
+ .switch__hint_1f1cy {
33
33
  color: var(--switch-hint-inverted-color);
34
34
  }
35
- .switch__checked_b7fk6 .switch__switch_b7fk6 {
35
+ .switch__checked_1f1cy .switch__switch_1f1cy {
36
36
  background-color: var(--switch-checked-bg-inverted-color);
37
37
  }
38
- .switch__checked_b7fk6 .switch__switch_b7fk6:hover {
38
+ .switch__checked_1f1cy .switch__switch_1f1cy:hover {
39
39
  background-color: var(--switch-checked-hover-bg-inverted-color);
40
40
  }
41
- .switch__disabled_b7fk6 .switch__label_b7fk6 {
41
+ .switch__disabled_1f1cy .switch__label_1f1cy {
42
42
  color: var(--switch-disabled-inverted-color);
43
43
  }
44
- .switch__disabled_b7fk6 .switch__hint_b7fk6 {
44
+ .switch__disabled_1f1cy .switch__hint_1f1cy {
45
45
  color: var(--switch-disabled-inverted-color);
46
46
  }
47
- .switch__disabled_b7fk6 .switch__switch_b7fk6 {
47
+ .switch__disabled_1f1cy .switch__switch_1f1cy {
48
48
  background-color: var(--switch-disabled-bg-inverted-color);
49
49
  }
50
- .switch__disabled_b7fk6 .switch__switch_b7fk6:before {
50
+ .switch__disabled_1f1cy .switch__switch_1f1cy:before {
51
51
  background-color: var(--switch-icon-disabled-inverted-color);
52
52
  }
53
- .switch__disabled_b7fk6.switch__checked_b7fk6 .switch__switch_b7fk6 {
53
+ .switch__disabled_1f1cy.switch__checked_1f1cy .switch__switch_1f1cy {
54
54
  background-color: var(--switch-disabled-checked-bg-inverted-color);
55
55
  }
package/modern/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- const invertedStyles = {"switch":"switch__switch_b7fk6","label":"switch__label_b7fk6","hint":"switch__hint_b7fk6","checked":"switch__checked_b7fk6","disabled":"switch__disabled_b7fk6"};
3
+ const invertedStyles = {"switch":"switch__switch_1f1cy","label":"switch__label_1f1cy","hint":"switch__hint_1f1cy","checked":"switch__checked_1f1cy","disabled":"switch__disabled_1f1cy"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/modern/inverted.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,uBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,uBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
package/modern/types/colors.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type Colors = 'default' | 'inverted';
1
+ export type Colors = 'default' | 'inverted';
package/moderncssm/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { type ChangeEvent, type InputHTMLAttributes, type ReactNode } from 'react';
2
2
  import { type Colors } from './types/colors';
3
- declare type Align = 'start' | 'center';
4
- export declare type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
3
+ type Align = 'start' | 'center';
4
+ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
5
5
  /**
6
6
  * Управление состоянием вкл/выкл компонента
7
7
  */
@@ -59,7 +59,7 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
59
59
  /**
60
60
  * Управление состоянием вкл/выкл компонента
61
61
  */
62
- checked?: boolean | undefined;
62
+ checked?: boolean;
63
63
  /**
64
64
  * Текст подписи к переключателю
65
65
  */
@@ -71,11 +71,11 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
71
71
  /**
72
72
  * Переключатель будет отрисован справа от контента
73
73
  */
74
- reversed?: boolean | undefined;
74
+ reversed?: boolean;
75
75
  /**
76
76
  * Выравнивание
77
77
  */
78
- align?: Align | undefined;
78
+ align?: Align;
79
79
  /**
80
80
  * Дополнительный слот
81
81
  */
@@ -83,11 +83,11 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
83
83
  /**
84
84
  * Растягивать ли компонент на всю ширину
85
85
  */
86
- block?: boolean | undefined;
86
+ block?: boolean;
87
87
  /**
88
88
  * Управление состоянием включен / выключен
89
89
  */
90
- disabled?: boolean | undefined;
90
+ disabled?: boolean;
91
91
  /**
92
92
  * Отображение ошибки
93
93
  */
@@ -95,18 +95,18 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTM
95
95
  /**
96
96
  * Обработчик переключения компонента
97
97
  */
98
- onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
98
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
99
99
  checked: boolean;
100
- name: InputHTMLAttributes<HTMLInputElement>['name'];
101
- }) => void) | undefined;
100
+ name: InputHTMLAttributes<HTMLInputElement>["name"];
101
+ }) => void;
102
102
  /**
103
103
  * Идентификатор для систем автоматизированного тестирования
104
104
  */
105
- dataTestId?: string | undefined;
105
+ dataTestId?: string;
106
106
  /**
107
107
  * Набор цветов для компонента
108
108
  * @default default
109
109
  */
110
- colors?: Colors | undefined;
110
+ colors?: Colors;
111
111
  } & React.RefAttributes<HTMLLabelElement>>;
112
112
  export {};
package/moderncssm/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n useRef,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled,\n [colorStyles[colors].disabled]: disabled,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
package/moderncssm/index.module.css CHANGED
@@ -74,7 +74,8 @@
74
74
  font-size: 16px;
75
75
  line-height: 24px;
76
76
  font-weight: 400;
77
- font-family: var(--font-family-system);
77
+ letter-spacing: -0.24px;
78
+ font-family: var(--font-family-alfasans);
78
79
  display: block;
79
80
  }
80
81
 
@@ -86,7 +87,8 @@
86
87
  font-size: 14px;
87
88
  line-height: 18px;
88
89
  font-weight: 400;
89
- font-family: var(--font-family-system);
90
+ letter-spacing: -0.08px;
91
+ font-family: var(--font-family-alfasans);
90
92
  color: var(--switch-error-color);
91
93
  }
92
94
 
@@ -94,7 +96,8 @@
94
96
  font-size: 14px;
95
97
  line-height: 18px;
96
98
  font-weight: 400;
97
- font-family: var(--font-family-system);
99
+ letter-spacing: -0.08px;
100
+ font-family: var(--font-family-alfasans);
98
101
  display: block;
99
102
  }
100
103
 
package/moderncssm/types/colors.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type Colors = 'default' | 'inverted';
1
+ export type Colors = 'default' | 'inverted';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-switch",
3
- "version": "6.0.2",
3
+ "version": "6.0.3-alfasans",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,7 +10,7 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-shared": "^2.1.0",
13
+ "@alfalab/core-components-shared": "2.1.1-alfasans",
14
14
  "@alfalab/hooks": "^1.13.1",
15
15
  "classnames": "^2.5.1",
16
16
  "react-merge-refs": "^1.1.0",
@@ -25,6 +25,6 @@
25
25
  "directory": "dist"
26
26
  },
27
27
  "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
28
- "themesVersion": "15.0.1",
29
- "varsVersion": "11.0.1"
28
+ "themesVersion": "15.0.2-alfasans",
29
+ "varsVersion": "11.0.2-alfasans"
30
30
  }
package/src/default.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/no-typography-index.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
  @import './vars.css';
3
3
 
4
4
  .switch {
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/no-typography-index.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
  @import './vars.css';
3
3
 
4
4
  .component {
package/src/inverted.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/no-typography-index.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
  @import './vars.css';
3
3
 
4
4
  .switch {
package/types/colors.d.ts CHANGED
@@ -1 +1 @@
1
- export declare type Colors = 'default' | 'inverted';
1
+ export type Colors = 'default' | 'inverted';