@itcase/ui 1.8.86 → 1.8.87

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 (10) hide show
  1. package/dist/cjs/components/Checkbox.js +27 -19
  2. package/dist/cjs/components/Switch.js +11 -11
  3. package/dist/components/Checkbox.js +27 -19
  4. package/dist/components/Switch.js +11 -11
  5. package/dist/css/components/Code/Code.css +2 -1
  6. package/dist/css/components/Switch/Switch.css +16 -27
  7. package/dist/types/components/Checkbox/appearance/checkboxRequire.d.ts +11 -7
  8. package/dist/types/components/Checkbox/appearance/checkboxSuccess.d.ts +11 -7
  9. package/dist/types/components/Switch/appearance/switchStyle.d.ts +5 -5
  10. package/package.json +2 -2
package/dist/cjs/components/Checkbox.js CHANGED
@@ -84,13 +84,17 @@ var checkboxAppearanceError = {
84
84
 
85
85
  var checkboxAppearanceRequire = {
86
86
  requirePrimary: {
87
- fill: 'warningTertiary',
88
- borderColor: 'warningBorderQuaternary',
89
- borderHover: 'warningBorderQuaternary',
90
- textColor: 'surfaceTextPrimary',
91
- iconBeforeFill: 'warningItemQuaternary',
92
- iconClearFill: 'warningItemPrimary',
93
- placeholderTextColor: 'surfaceTextQuaternary',
87
+ fillCheckbox: 'warningPrimary',
88
+ fillCheckboxActive: 'warningPrimary',
89
+ fillCheckboxActiveHover: 'warningTertiary',
90
+ fillCheckboxHover: 'warningTertiary',
91
+ fillCheckmark: 'warningBorderPrimary',
92
+ labelTextColor: 'surfaceTextPrimary',
93
+ descTextColor: 'surfaceTextPrimary',
94
+ borderColorCheckbox: 'warningBorderPrimary',
95
+ borderColorCheckboxActive: 'warningBorderPrimary',
96
+ borderColorCheckboxActiveHover: 'warningBorderPrimary',
97
+ borderColorCheckboxHover: 'warningBorderPrimary',
94
98
  },
95
99
  requireSecondary: {
96
100
  fill: 'surfaceSecondary',
@@ -138,21 +142,25 @@ var checkboxAppearanceStyle = {
138
142
 
139
143
  var checkboxAppearanceSuccess = {
140
144
  successPrimary: {
141
- fill: 'successTertiary',
142
- borderColor: 'successBorderQuaternary',
145
+ fillCheckbox: 'successPrimary',
146
+ fillCheckboxActive: 'successPrimary',
147
+ fillCheckboxActiveHover: 'successTertiary',
148
+ fillCheckboxHover: 'successTertiary',
149
+ fillCheckmark: 'successBorderPrimary',
150
+ labelTextColor: 'surfaceTextPrimary',
151
+ descTextColor: 'surfaceTextPrimary',
152
+ borderColorCheckbox: 'successBorderPrimary',
153
+ borderColorCheckboxActive: 'successBorderPrimary',
154
+ borderColorCheckboxActiveHover: 'successBorderPrimary',
155
+ borderColorCheckboxHover: 'successBorderPrimary',
156
+ },
157
+ successSecondary: {
158
+ fill: 'successSecondary',
159
+ borderColor: 'successBorderTertiary',
143
160
  borderHover: 'successBorderQuaternary',
144
- textColor: 'surfaceTextPrimary',
145
161
  iconBeforeFill: 'successItemQuaternary',
146
162
  iconClearFill: 'successItemPrimary',
147
- placeholderTextColor: 'surfaceTextQuaternary',
148
- },
149
- successSecondary: {
150
- fill: 'surfaceSecondary',
151
- borderColor: 'surfaceBorderTertiary',
152
- borderHover: 'surfaceBorderQuaternary',
153
- iconBeforeFill: 'surfaceItemQuaternary',
154
- iconClearFill: 'surfaceItemPrimary',
155
- placeholderTextColor: 'surfaceTextSecondary',
163
+ placeholderTextColor: 'successTextSecondary',
156
164
  },
157
165
  };
158
166
 
package/dist/cjs/components/Switch.js CHANGED
@@ -84,17 +84,17 @@ var switchAppearanceSize = {
84
84
  };
85
85
 
86
86
  var switchAppearanceStyle = {
87
- full: {
87
+ solid: {
88
88
  borderColor: 'none',
89
89
  },
90
- ghost: {
90
+ outlined: {
91
91
  fill: 'none',
92
+ },
93
+ full: {
92
94
  borderColor: 'none',
93
95
  },
94
- outlined: {
96
+ ghost: {
95
97
  fill: 'none',
96
- },
97
- solid: {
98
98
  borderColor: 'none',
99
99
  },
100
100
  };
@@ -119,20 +119,20 @@ var switchConfig = {
119
119
  },
120
120
  };
121
121
  var Switch = React.forwardRef(function Switch(props, ref) {
122
- var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
122
+ var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isActive = props.isActive, onChange = props.onChange;
123
123
  var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig);
124
124
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
125
125
  var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
126
- return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked',
126
+ return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox",
127
127
  // @ts-expect-error
128
- ref: ref, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
128
+ ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
129
129
  ? fillClass && "fill_".concat(fillClass)
130
- : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
130
+ : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
131
131
  ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
132
132
  : fillActiveHoverClass &&
133
- "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
133
+ "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !isActive
134
134
  ? fillToggleClass && "fill_".concat(fillToggleClass)
135
- : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
135
+ : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
136
136
  ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
137
137
  : fillToggleActiveHoverClass &&
138
138
  "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));
package/dist/components/Checkbox.js CHANGED
@@ -82,13 +82,17 @@ var checkboxAppearanceError = {
82
82
 
83
83
  var checkboxAppearanceRequire = {
84
84
  requirePrimary: {
85
- fill: 'warningTertiary',
86
- borderColor: 'warningBorderQuaternary',
87
- borderHover: 'warningBorderQuaternary',
88
- textColor: 'surfaceTextPrimary',
89
- iconBeforeFill: 'warningItemQuaternary',
90
- iconClearFill: 'warningItemPrimary',
91
- placeholderTextColor: 'surfaceTextQuaternary',
85
+ fillCheckbox: 'warningPrimary',
86
+ fillCheckboxActive: 'warningPrimary',
87
+ fillCheckboxActiveHover: 'warningTertiary',
88
+ fillCheckboxHover: 'warningTertiary',
89
+ fillCheckmark: 'warningBorderPrimary',
90
+ labelTextColor: 'surfaceTextPrimary',
91
+ descTextColor: 'surfaceTextPrimary',
92
+ borderColorCheckbox: 'warningBorderPrimary',
93
+ borderColorCheckboxActive: 'warningBorderPrimary',
94
+ borderColorCheckboxActiveHover: 'warningBorderPrimary',
95
+ borderColorCheckboxHover: 'warningBorderPrimary',
92
96
  },
93
97
  requireSecondary: {
94
98
  fill: 'surfaceSecondary',
@@ -136,21 +140,25 @@ var checkboxAppearanceStyle = {
136
140
 
137
141
  var checkboxAppearanceSuccess = {
138
142
  successPrimary: {
139
- fill: 'successTertiary',
140
- borderColor: 'successBorderQuaternary',
143
+ fillCheckbox: 'successPrimary',
144
+ fillCheckboxActive: 'successPrimary',
145
+ fillCheckboxActiveHover: 'successTertiary',
146
+ fillCheckboxHover: 'successTertiary',
147
+ fillCheckmark: 'successBorderPrimary',
148
+ labelTextColor: 'surfaceTextPrimary',
149
+ descTextColor: 'surfaceTextPrimary',
150
+ borderColorCheckbox: 'successBorderPrimary',
151
+ borderColorCheckboxActive: 'successBorderPrimary',
152
+ borderColorCheckboxActiveHover: 'successBorderPrimary',
153
+ borderColorCheckboxHover: 'successBorderPrimary',
154
+ },
155
+ successSecondary: {
156
+ fill: 'successSecondary',
157
+ borderColor: 'successBorderTertiary',
141
158
  borderHover: 'successBorderQuaternary',
142
- textColor: 'surfaceTextPrimary',
143
159
  iconBeforeFill: 'successItemQuaternary',
144
160
  iconClearFill: 'successItemPrimary',
145
- placeholderTextColor: 'surfaceTextQuaternary',
146
- },
147
- successSecondary: {
148
- fill: 'surfaceSecondary',
149
- borderColor: 'surfaceBorderTertiary',
150
- borderHover: 'surfaceBorderQuaternary',
151
- iconBeforeFill: 'surfaceItemQuaternary',
152
- iconClearFill: 'surfaceItemPrimary',
153
- placeholderTextColor: 'surfaceTextSecondary',
161
+ placeholderTextColor: 'successTextSecondary',
154
162
  },
155
163
  };
156
164
 
package/dist/components/Switch.js CHANGED
@@ -82,17 +82,17 @@ var switchAppearanceSize = {
82
82
  };
83
83
 
84
84
  var switchAppearanceStyle = {
85
- full: {
85
+ solid: {
86
86
  borderColor: 'none',
87
87
  },
88
- ghost: {
88
+ outlined: {
89
89
  fill: 'none',
90
+ },
91
+ full: {
90
92
  borderColor: 'none',
91
93
  },
92
- outlined: {
94
+ ghost: {
93
95
  fill: 'none',
94
- },
95
- solid: {
96
96
  borderColor: 'none',
97
97
  },
98
98
  };
@@ -117,20 +117,20 @@ var switchConfig = {
117
117
  },
118
118
  };
119
119
  var Switch = React.forwardRef(function Switch(props, ref) {
120
- var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
120
+ var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isActive = props.isActive, onChange = props.onChange;
121
121
  var appearanceConfig = useAppearanceConfig(appearance, switchConfig);
122
122
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
123
123
  var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
124
- return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked',
124
+ return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [jsxs("div", { className: "switch__wrapper", children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox",
125
125
  // @ts-expect-error
126
- ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
126
+ ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive
127
127
  ? fillClass && "fill_".concat(fillClass)
128
- : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
128
+ : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
129
129
  ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
130
130
  : fillActiveHoverClass &&
131
- "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
131
+ "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive
132
132
  ? fillToggleClass && "fill_".concat(fillToggleClass)
133
- : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
133
+ : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
134
134
  ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
135
135
  : fillToggleActiveHoverClass &&
136
136
  "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));
package/dist/css/components/Code/Code.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .code {
2
+ width: 100%;
2
3
  &__wrapper {
3
4
  width: 100%;
4
5
  display: flex;
@@ -14,7 +15,7 @@
14
15
  }
15
16
  .code__input {
16
17
  &_size {
17
- @each $size in l, m {
18
+ @each $size in xl, l, m, s {
18
19
  &_$(size) {
19
20
  min-width: var(--code-input-size-$(size)-width);
20
21
  min-height: var(--code-input-size-$(size)-height);
package/dist/css/components/Switch/Switch.css CHANGED
@@ -1,22 +1,24 @@
1
1
  .switch {
2
- display: grid;
3
- &__title {
4
- padding: 0 8px 0 0;
5
- align-self: start;
6
- }
7
- &__desc {
8
- padding: 0 8px 0 0;
9
- align-self: start;
2
+ display: flex;
3
+ flex-direction: row;
4
+ &__wrapper {
5
+ display: flex;
6
+ flex: 1;
7
+ align-items: center;
8
+ ^&__title {
9
+ padding: 0 8px 0 0;
10
+ }
11
+ ^&__desc {
12
+ padding: 0 8px 0 0;
13
+ }
10
14
  }
11
15
  &__item {
12
16
  border-radius: 50px;
13
17
  position: relative;
14
18
  overflow: hidden;
15
19
  display: flex;
16
- align-self: start;
17
20
  transition: 0.4s;
18
21
  cursor: pointer;
19
- grid-row: 1/3;
20
22
  }
21
23
  &__checkbox {
22
24
  width: 100%;
@@ -30,11 +32,7 @@
30
32
  cursor: pointer;
31
33
  appearance: none;
32
34
  &:checked {
33
- & + .switch__bg {
34
- /* background: var(--color-accent-fill-primary); */
35
- }
36
35
  & ~ .switch__toggle {
37
- /* background: var(--color-accent-item-primary); */
38
36
  margin: 0 0 0 -3px;
39
37
  left: 100%;
40
38
  transform: translate(-100%, -50%);
@@ -47,7 +45,6 @@
47
45
  }
48
46
  }
49
47
  &__bg {
50
- /* background: var(--color-surface-tertiary); */
51
48
  width: 100%;
52
49
  flex: 1;
53
50
  transition: all 0.25s;
@@ -55,8 +52,6 @@
55
52
  &__toggle {
56
53
  height: calc(100% - 6px);
57
54
  aspect-ratio: 1/1;
58
-
59
- /* background: #fff; */
60
55
  border-radius: 50%;
61
56
  position: absolute;
62
57
  box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2);
@@ -70,26 +65,20 @@
70
65
  .switch {
71
66
  &_align {
72
67
  &_left {
73
- grid-template-columns: 1fr auto;
68
+ width: 100%;
69
+ flex-direction: row-reverse;
74
70
  ^^&__title,
75
71
  ^^&__desc {
76
- grid-column-start: 2;
77
72
  padding: 0 0 0 8px;
78
73
  }
79
- ^^&__item {
80
- grid-column-start: 1;
81
- }
82
74
  }
83
75
  &_right {
84
- grid-template-columns: auto 1fr;
76
+ width: 100%;
77
+ flex-direction: row;
85
78
  ^^&__title,
86
79
  ^^&__desc {
87
- grid-column-start: 1;
88
80
  padding: 0 8px 0 0;
89
81
  }
90
- ^^&__item {
91
- grid-column-start: 2;
92
- }
93
82
  }
94
83
  }
95
84
  }
package/dist/types/components/Checkbox/appearance/checkboxRequire.d.ts CHANGED
@@ -1,12 +1,16 @@
1
1
  declare const checkboxAppearanceRequire: {
2
2
  requirePrimary: {
3
- fill: string;
4
- borderColor: string;
5
- borderHover: string;
6
- textColor: string;
7
- iconBeforeFill: string;
8
- iconClearFill: string;
9
- placeholderTextColor: string;
3
+ fillCheckbox: string;
4
+ fillCheckboxActive: string;
5
+ fillCheckboxActiveHover: string;
6
+ fillCheckboxHover: string;
7
+ fillCheckmark: string;
8
+ labelTextColor: string;
9
+ descTextColor: string;
10
+ borderColorCheckbox: string;
11
+ borderColorCheckboxActive: string;
12
+ borderColorCheckboxActiveHover: string;
13
+ borderColorCheckboxHover: string;
10
14
  };
11
15
  requireSecondary: {
12
16
  fill: string;
package/dist/types/components/Checkbox/appearance/checkboxSuccess.d.ts CHANGED
@@ -1,12 +1,16 @@
1
1
  declare const checkboxAppearanceSuccess: {
2
2
  successPrimary: {
3
- fill: string;
4
- borderColor: string;
5
- borderHover: string;
6
- textColor: string;
7
- iconBeforeFill: string;
8
- iconClearFill: string;
9
- placeholderTextColor: string;
3
+ fillCheckbox: string;
4
+ fillCheckboxActive: string;
5
+ fillCheckboxActiveHover: string;
6
+ fillCheckboxHover: string;
7
+ fillCheckmark: string;
8
+ labelTextColor: string;
9
+ descTextColor: string;
10
+ borderColorCheckbox: string;
11
+ borderColorCheckboxActive: string;
12
+ borderColorCheckboxActiveHover: string;
13
+ borderColorCheckboxHover: string;
10
14
  };
11
15
  successSecondary: {
12
16
  fill: string;
package/dist/types/components/Switch/appearance/switchStyle.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  declare const switchAppearanceStyle: {
2
- full: {
2
+ solid: {
3
3
  borderColor: string;
4
4
  };
5
- ghost: {
5
+ outlined: {
6
6
  fill: string;
7
+ };
8
+ full: {
7
9
  borderColor: string;
8
10
  };
9
- outlined: {
11
+ ghost: {
10
12
  fill: string;
11
- };
12
- solid: {
13
13
  borderColor: string;
14
14
  };
15
15
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.86",
3
+ "version": "1.8.87",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -103,7 +103,7 @@
103
103
  "@emotion/is-prop-valid": "^1.3.1",
104
104
  "@itcase/common": "^1.2.28",
105
105
  "@itcase/icons": "^1.2.16",
106
- "@itcase/storybook-config": "^1.1.76",
106
+ "@itcase/storybook-config": "^1.1.77",
107
107
  "@itcase/tokens-am": "^1.1.19",
108
108
  "@itcase/tokens-baikal": "^1.1.17",
109
109
  "@itcase/tokens-palette": "^1.1.11",