@rescui/chip-list 0.9.11 → 0.11.0

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 (15) hide show
  1. package/lib/chip-list-multi.d.ts +3 -1
  2. package/lib/chip-list-multi.js +5 -1
  3. package/lib/chip-list.d.ts +2 -1
  4. package/lib/chip-list.js +5 -1
  5. package/lib/index.css +98 -60
  6. package/lib/parts/chip-list-base.d.ts +2 -1
  7. package/lib/parts/chip-list-base.js +5 -2
  8. package/lib/parts/chip-list-context.js +2 -1
  9. package/lib/parts/chip-list.p.module.css.js +23 -22
  10. package/lib/parts/chip.js +16 -9
  11. package/lib/parts/types.d.ts +1 -0
  12. package/lib/parts/use-items-ids.js +7 -1
  13. package/lib/public-api.p.css +12 -6
  14. package/lib/public-api.pcss +12 -6
  15. package/package.json +2 -2
package/lib/chip-list-multi.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare type ChipListMultiProps<ValueType> = {
10
10
  sparse?: boolean;
11
11
  /** Decrease horizontal paddings, gap and border-radius values */
12
12
  compact?: boolean;
13
+ disabled?: boolean;
13
14
  theme?: Theme;
14
15
  mode?: ChipListModeType;
15
16
  alignItems?: ChipListAlignItemsType;
@@ -20,13 +21,14 @@ export declare type ChipListMultiProps<ValueType> = {
20
21
  /** Identifier for e2e tests */
21
22
  'data-e2e'?: string;
22
23
  };
23
- export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
24
+ export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
24
25
  export declare namespace ChipListMulti {
25
26
  var displayName: string;
26
27
  var propTypes: {
27
28
  size: PropTypes.Requireable<string>;
28
29
  sparse: PropTypes.Requireable<boolean>;
29
30
  compact: PropTypes.Requireable<boolean>;
31
+ disabled: PropTypes.Requireable<boolean>;
30
32
  theme: PropTypes.Requireable<string>;
31
33
  className: PropTypes.Requireable<string>;
32
34
  mode: PropTypes.Requireable<string>;
package/lib/chip-list-multi.js CHANGED
@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
7
7
  import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "mode", "alignItems"];
10
+ var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
11
11
 
12
12
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
 
@@ -36,6 +36,8 @@ function ChipListMulti(_ref) {
36
36
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
37
37
  _ref$compact = _ref.compact,
38
38
  compact = _ref$compact === void 0 ? false : _ref$compact,
39
+ _ref$disabled = _ref.disabled,
40
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
39
41
  _ref$mode = _ref.mode,
40
42
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
41
43
  _ref$alignItems = _ref.alignItems,
@@ -57,6 +59,7 @@ function ChipListMulti(_ref) {
57
59
  size: size,
58
60
  sparse: sparse,
59
61
  compact: compact,
62
+ disabled: disabled,
60
63
  mode: mode,
61
64
  alignItems: alignItems
62
65
  }, props), children);
@@ -67,6 +70,7 @@ ChipListMulti.propTypes = {
67
70
  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
68
71
  sparse: PropTypes.bool,
69
72
  compact: PropTypes.bool,
73
+ disabled: PropTypes.bool,
70
74
  theme: PropTypes.oneOf(['light', 'dark']),
71
75
  className: PropTypes.string,
72
76
  mode: PropTypes.oneOf(['classic', 'rock']),
package/lib/chip-list.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare type ChipListProps<ValueType> = {
9
9
  sparse?: boolean;
10
10
  /** Decrease horizontal paddings, gap and border-radius values */
11
11
  compact?: boolean;
12
+ disabled?: boolean;
12
13
  theme?: Theme;
13
14
  mode?: ChipListModeType;
14
15
  alignItems?: ChipListAlignItemsType;
@@ -19,7 +20,7 @@ export declare type ChipListProps<ValueType> = {
19
20
  /** Identifier for e2e tests */
20
21
  'data-e2e'?: string;
21
22
  };
22
- export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
23
+ export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
23
24
  export declare namespace ChipList {
24
25
  var displayName: string;
25
26
  var propTypes: {};
package/lib/chip-list.js CHANGED
@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
7
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "mode", "alignItems"];
10
+ var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
11
11
 
12
12
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
 
@@ -33,6 +33,8 @@ function ChipList(_ref) {
33
33
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
34
34
  _ref$compact = _ref.compact,
35
35
  compact = _ref$compact === void 0 ? false : _ref$compact,
36
+ _ref$disabled = _ref.disabled,
37
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
36
38
  _ref$mode = _ref.mode,
37
39
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
38
40
  _ref$alignItems = _ref.alignItems,
@@ -48,6 +50,7 @@ function ChipList(_ref) {
48
50
  size: size,
49
51
  sparse: sparse,
50
52
  compact: compact,
53
+ disabled: disabled,
51
54
  mode: mode,
52
55
  alignItems: alignItems
53
56
  }, props), children);
@@ -58,6 +61,7 @@ ChipList.propTypes = {
58
61
  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
59
62
  sparse: PropTypes.bool,
60
63
  compact: PropTypes.bool,
64
+ disabled: PropTypes.bool,
61
65
  theme: PropTypes.oneOf(['light', 'dark']),
62
66
  className: PropTypes.string,
63
67
  mode: PropTypes.oneOf(['classic', 'rock']),
package/lib/index.css CHANGED
@@ -1,33 +1,33 @@
1
- ._light_vej1ka_8{
1
+ ._light_1xl8zrw_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_vej1ka_11{
4
+ ._dark_1xl8zrw_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._alignLeft_vej1ka_15{
7
+ ._alignLeft_1xl8zrw_15{
8
8
  --_rs-cl-align:left;
9
9
  }
10
- ._alignCenter_vej1ka_18{
10
+ ._alignCenter_1xl8zrw_18{
11
11
  --_rs-cl-align:center;
12
12
  }
13
- ._alignRight_vej1ka_21{
13
+ ._alignRight_1xl8zrw_21{
14
14
  --_rs-cl-align:right;
15
15
  }
16
- ._sizeXs_vej1ka_25{
16
+ ._sizeXs_1xl8zrw_25{
17
17
  --_rs-cl-chip-base-border-radius:4px;
18
18
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
19
19
  --_rs-cl-chip-vertical-padding:2px;
20
- --_rs-cl-chip-base-horizontal-padding:16px;
20
+ --_rs-cl-chip-base-horizontal-padding:8px;
21
21
  --_rs-cl-chip-compact-horizontal-padding:8px;
22
+ --_rs-cl-chip-icon-only-padding:4px;
22
23
  --_rs-cl-chip-icon-size:16px;
23
- --_rs-cl-chip-icon-offset:8px;
24
- --_rs-cl-chip-icon-margin-top:2px;
24
+ --_rs-cl-chip-icon-offset:4px;
25
25
  --_rs-cl-vertical-gap:8px;
26
26
  --_rs-cl-base-horizontal-gap:8px;
27
27
  --_rs-cl-compact-horizontal-gap:4px;
28
28
  --_rs-cl-sparse-horizontal-gap:12px;
29
29
  }
30
- ._sizeXs_vej1ka_25 [data-rs-internal='chip-list__chip']{
30
+ ._sizeXs_1xl8zrw_25 [data-rs-internal='chip-list__chip']{
31
31
  --_rs-typography-letter-spacing:0.0045em;
32
32
  --_rs-typography-text-transform:initial;
33
33
  --_rs-typography-font-variant-numeric:initial;
@@ -61,12 +61,13 @@
61
61
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
62
62
  --_rs-typography-link-border-bottom-width-from-text:1px;
63
63
  }
64
- ._sizeS_vej1ka_28{
64
+ ._sizeS_1xl8zrw_28{
65
65
  --_rs-cl-chip-base-border-radius:16px;
66
66
  --_rs-cl-chip-compact-border-radius:4px;
67
67
  --_rs-cl-chip-vertical-padding:6px;
68
68
  --_rs-cl-chip-base-horizontal-padding:16px;
69
69
  --_rs-cl-chip-compact-horizontal-padding:8px;
70
+ --_rs-cl-chip-icon-only-padding:6px;
70
71
  --_rs-cl-chip-icon-size:20px;
71
72
  --_rs-cl-chip-icon-offset:8px;
72
73
  --_rs-cl-vertical-gap:12px;
@@ -74,7 +75,7 @@
74
75
  --_rs-cl-compact-horizontal-gap:6px;
75
76
  --_rs-cl-sparse-horizontal-gap:12px;
76
77
  }
77
- ._sizeS_vej1ka_28 [data-rs-internal='chip-list__chip']{
78
+ ._sizeS_1xl8zrw_28 [data-rs-internal='chip-list__chip']{
78
79
  --_rs-typography-letter-spacing:0.0045em;
79
80
  --_rs-typography-text-transform:initial;
80
81
  --_rs-typography-font-variant-numeric:initial;
@@ -108,12 +109,13 @@
108
109
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
109
110
  --_rs-typography-link-border-bottom-width-from-text:1px;
110
111
  }
111
- ._sizeM_vej1ka_31{
112
+ ._sizeM_1xl8zrw_31{
112
113
  --_rs-cl-chip-base-border-radius:20px;
113
114
  --_rs-cl-chip-compact-border-radius:8px;
114
115
  --_rs-cl-chip-vertical-padding:8px;
115
116
  --_rs-cl-chip-base-horizontal-padding:24px;
116
117
  --_rs-cl-chip-compact-horizontal-padding:12px;
118
+ --_rs-cl-chip-icon-only-padding:8px;
117
119
  --_rs-cl-chip-icon-size:24px;
118
120
  --_rs-cl-chip-icon-offset:8px;
119
121
  --_rs-cl-vertical-gap:12px;
@@ -121,7 +123,7 @@
121
123
  --_rs-cl-compact-horizontal-gap:6px;
122
124
  --_rs-cl-sparse-horizontal-gap:16px;
123
125
  }
124
- ._sizeM_vej1ka_31 [data-rs-internal='chip-list__chip']{
126
+ ._sizeM_1xl8zrw_31 [data-rs-internal='chip-list__chip']{
125
127
  --_rs-typography-letter-spacing:0.0015em;
126
128
  --_rs-typography-text-transform:initial;
127
129
  --_rs-typography-font-variant-numeric:initial;
@@ -156,16 +158,17 @@
156
158
  --_rs-typography-link-border-bottom-width-from-text:1px;
157
159
  }
158
160
  @media screen and (max-width: 640px){
159
- ._sizeM_vej1ka_31 [data-rs-internal='chip-list__chip']{
161
+ ._sizeM_1xl8zrw_31 [data-rs-internal='chip-list__chip']{
160
162
  --_rs-typography-list-li-margin-top-from-text:12px;
161
163
  }
162
164
  }
163
- ._sizeL_vej1ka_34{
165
+ ._sizeL_1xl8zrw_34{
164
166
  --_rs-cl-chip-base-border-radius:26px;
165
167
  --_rs-cl-chip-compact-border-radius:12px;
166
168
  --_rs-cl-chip-vertical-padding:12px;
167
169
  --_rs-cl-chip-base-horizontal-padding:32px;
168
170
  --_rs-cl-chip-compact-horizontal-padding:16px;
171
+ --_rs-cl-chip-icon-only-padding:12px;
169
172
  --_rs-cl-chip-icon-size:28px;
170
173
  --_rs-cl-chip-icon-offset:16px;
171
174
  --_rs-cl-vertical-gap:16px;
@@ -174,11 +177,11 @@
174
177
  --_rs-cl-sparse-horizontal-gap:16px;
175
178
  }
176
179
  @media screen and (max-width: 640px){
177
- ._sizeL_vej1ka_34{
180
+ ._sizeL_1xl8zrw_34{
178
181
  --_rs-cl-vertical-gap:12px;
179
182
  }
180
183
  }
181
- ._sizeL_vej1ka_34 [data-rs-internal='chip-list__chip']{
184
+ ._sizeL_1xl8zrw_34 [data-rs-internal='chip-list__chip']{
182
185
  --_rs-typography-letter-spacing:normal;
183
186
  --_rs-typography-text-transform:initial;
184
187
  --_rs-typography-font-variant-numeric:initial;
@@ -213,34 +216,34 @@
213
216
  --_rs-typography-link-border-bottom-width-from-text:1px;
214
217
  }
215
218
  @media screen and (max-width: 640px){
216
- ._sizeL_vej1ka_34 [data-rs-internal='chip-list__chip']{
219
+ ._sizeL_1xl8zrw_34 [data-rs-internal='chip-list__chip']{
217
220
  --_rs-typography-list-li-margin-top-from-text:16px;
218
221
  }
219
222
  }
220
- ._innerOffsetL_vej1ka_38{
223
+ ._innerOffsetL_1xl8zrw_38{
221
224
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
222
225
  }
223
226
  @media screen and (max-width: 640px){
224
- ._innerOffsetL_vej1ka_38{
227
+ ._innerOffsetL_1xl8zrw_38{
225
228
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
226
229
  }
227
230
  }
228
- ._innerOffsetM_vej1ka_41{
231
+ ._innerOffsetM_1xl8zrw_41{
229
232
  --_rs-cl-horizontal-gap-from-sparse:initial;
230
233
  }
231
- ._classic_vej1ka_45{
234
+ ._classic_1xl8zrw_45{
232
235
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
233
236
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
234
237
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
235
238
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
236
239
  }
237
- ._rock_vej1ka_48{
240
+ ._rock_1xl8zrw_48{
238
241
  --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
239
242
  --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
240
243
  --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
241
244
  --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
242
245
  }
243
- ._compact_vej1ka_52{
246
+ ._compact_1xl8zrw_52{
244
247
  --_rs-cl-chip-border-radius-from-compact:var(
245
248
  --_rs-cl-chip-compact-border-radius
246
249
  );
@@ -249,7 +252,7 @@
249
252
  );
250
253
  --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
251
254
  }
252
- ._main_vej1ka_56{
255
+ ._main_1xl8zrw_56{
253
256
  --_rs-theme-dark:var(
254
257
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
255
258
  var(--rs-theme-dark, 0)
@@ -259,7 +262,7 @@
259
262
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
260
263
  }
261
264
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
262
- ._main_vej1ka_56{
265
+ ._main_1xl8zrw_56{
263
266
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
264
267
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
265
268
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -268,7 +271,7 @@
268
271
  }
269
272
  }
270
273
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
271
- ._main_vej1ka_56{
274
+ ._main_1xl8zrw_56{
272
275
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
273
276
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
274
277
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -276,7 +279,7 @@
276
279
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
277
280
  }
278
281
  }
279
- ._main_vej1ka_56 {
282
+ ._main_1xl8zrw_56 {
280
283
  --_rs-cl-chip-border-radius:var(
281
284
  --_rs-cl-chip-border-radius-from-compact,
282
285
  var(--_rs-cl-chip-base-border-radius)
@@ -290,7 +293,7 @@
290
293
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
291
294
  );
292
295
  }
293
- ._chipsContainer_vej1ka_62{
296
+ ._chipsContainer_1xl8zrw_62{
294
297
  position:relative;
295
298
 
296
299
  display:-webkit-box;
@@ -306,19 +309,17 @@
306
309
 
307
310
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
308
311
  }
309
- ._alignIconLeft_vej1ka_72{
312
+ ._alignIconLeft_1xl8zrw_72{
310
313
  --_rs-cl-chip-icon-flex-direction:row;
311
314
  --_rs-cl-chip-icon-position-multiplier-left:1;
312
315
  --_rs-cl-chip-icon-position-multiplier-right:0;
313
316
  }
314
- ._alignIconRight_vej1ka_75{
317
+ ._alignIconRight_1xl8zrw_75{
315
318
  --_rs-cl-chip-icon-flex-direction:row-reverse;
316
319
  --_rs-cl-chip-icon-position-multiplier-left:0;
317
320
  --_rs-cl-chip-icon-position-multiplier-right:1;
318
321
  }
319
- ._chip_vej1ka_62{
320
- --_rs-cl-chip-icon-margin-right:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-right)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-right));
321
- --_rs-cl-chip-icon-margin-left:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-left)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-left));
322
+ ._chip_1xl8zrw_62{
322
323
  letter-spacing:var(
323
324
  --rs-text-base-letter-spacing,
324
325
  var(--_rs-typography-letter-spacing)
@@ -332,6 +333,12 @@
332
333
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
333
334
  font-feature-settings:'kern', 'liga', 'calt';
334
335
 
336
+ --_rs-cl-chip-border-width:1px;
337
+ --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3);
338
+
339
+ --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-horizontal-padding);
340
+ --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-vertical-padding);
341
+
335
342
  position:relative;
336
343
  z-index:1;
337
344
 
@@ -348,6 +355,7 @@
348
355
  -webkit-box-direction:normal;
349
356
  -ms-flex-direction:var(--_rs-cl-chip-icon-flex-direction);
350
357
  flex-direction:var(--_rs-cl-chip-icon-flex-direction);
358
+ gap:var(--_rs-cl-chip-icon-offset);
351
359
  -webkit-box-pack:center;
352
360
  -ms-flex-pack:center;
353
361
  justify-content:center;
@@ -359,9 +367,9 @@
359
367
 
360
368
  box-sizing:border-box;
361
369
  margin:0;
362
- padding:calc(var(--_rs-cl-chip-vertical-padding) - 1px) calc(var(--_rs-cl-chip-horizontal-padding) - 1px);
370
+ padding:var(--_rs-cl-chip-vertical-real-padding) var(--_rs-cl-chip-horizontal-real-padding);
363
371
 
364
- border:1px solid rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3);
372
+ border:none;
365
373
  border-radius:var(--_rs-cl-chip-border-radius);
366
374
  outline:none;
367
375
 
@@ -375,31 +383,31 @@
375
383
  -webkit-box-shadow:none;
376
384
  box-shadow:none;
377
385
 
378
- -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
386
+ -webkit-transition:color 100ms, background-color 100ms;
379
387
 
380
- transition:color 100ms, background-color 100ms, border-color 100ms;
388
+ transition:color 100ms, background-color 100ms;
381
389
  -webkit-font-smoothing:inherit;
382
390
  -moz-osx-font-smoothing:inherit;
383
391
  -webkit-appearance:none;
384
392
  }
385
- ._chip_vej1ka_62::-moz-focus-inner{
393
+ ._chip_1xl8zrw_62::-moz-focus-inner{
386
394
  padding:0;
387
395
 
388
396
  border:none;
389
397
  }
390
- ._chip_vej1ka_62:hover,
391
- ._chip_vej1ka_62:focus,
392
- ._chip_vej1ka_62:active{
398
+ ._chip_1xl8zrw_62:hover,
399
+ ._chip_1xl8zrw_62:focus,
400
+ ._chip_1xl8zrw_62:active{
393
401
  outline:none;
394
402
 
395
403
  text-decoration:none;
396
404
  }
397
- ._chip_vej1ka_62:focus[data-focus-method='key']{
405
+ ._chip_1xl8zrw_62:focus[data-focus-method='key']{
398
406
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
399
407
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
400
408
  }
401
- ._chip_vej1ka_62:focus{
402
- border-color:rgba(
409
+ ._chip_1xl8zrw_62:focus{
410
+ --_rs-cl-chip-border-color:rgba(
403
411
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
404
412
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
405
413
  );
@@ -407,8 +415,8 @@
407
415
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
408
416
  }
409
417
  @media (hover: hover){
410
- ._chip_vej1ka_62:hover{
411
- border-color:rgba(
418
+ ._chip_1xl8zrw_62:hover{
419
+ --_rs-cl-chip-border-color:rgba(
412
420
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
413
421
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
414
422
  );
@@ -418,22 +426,51 @@
418
426
  background:var(--_rs-cl-chip-hover-background);
419
427
  }
420
428
  }
421
- ._chip_vej1ka_62:active{
422
- border-color:var(--_rs-cl-chip-active-border-color);
429
+ ._chip_1xl8zrw_62:active{
430
+ --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
423
431
 
424
432
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
425
433
 
426
434
  background:var(--_rs-cl-chip-active-background);
427
435
  }
428
- ._chip_vej1ka_62._selected_vej1ka_166{
429
- padding:calc(var(--_rs-cl-chip-vertical-padding) - 2px) calc(var(--_rs-cl-chip-horizontal-padding) - 2px);
430
-
431
- border-width:2px;
432
- border-color:var(--_rs-cl-chip-selected-border-color);
436
+ ._chip_1xl8zrw_62._selected_1xl8zrw_172{
437
+ --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
438
+ --_rs-cl-chip-border-width:2px;
433
439
 
434
440
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
435
441
  }
436
- ._chip_vej1ka_62 ._icon_vej1ka_176{
442
+ ._disabled_1xl8zrw_179 ._chip_1xl8zrw_62{
443
+ --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
444
+
445
+ pointer-events:none;
446
+
447
+ color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
448
+
449
+ background:transparent;
450
+ }
451
+ ._disabled_1xl8zrw_179 ._chip_1xl8zrw_62._selected_1xl8zrw_172{
452
+ --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
453
+ }
454
+ ._chip_1xl8zrw_62::before{
455
+ position:absolute;
456
+ top:0;
457
+ right:0;
458
+ bottom:0;
459
+ left:0;
460
+
461
+ display:block;
462
+
463
+ border:var(--_rs-cl-chip-border-width) solid var(--_rs-cl-chip-border-color);
464
+ border-radius:inherit;
465
+
466
+ content:'';
467
+ pointer-events:none;
468
+
469
+ -webkit-transition:border-color 100ms;
470
+
471
+ transition:border-color 100ms;
472
+ }
473
+ ._chip_1xl8zrw_62 ._icon_1xl8zrw_212{
437
474
  -webkit-box-flex:0;
438
475
  -ms-flex:0 0 auto;
439
476
  flex:0 0 auto;
@@ -441,9 +478,10 @@
441
478
  width:auto;
442
479
  height:var(--_rs-cl-chip-icon-size);
443
480
 
444
- margin:0 var(--_rs-cl-chip-icon-margin-right) 0 var(--_rs-cl-chip-icon-margin-left);
445
- fill:currentColor;
446
- }
447
- ._chip_vej1ka_62._withoutText_vej1ka_187 ._icon_vej1ka_176{
448
481
  margin:0;
482
+ fill:currentColor;
449
483
  }
484
+ ._withoutText_1xl8zrw_223{
485
+ --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
486
+ --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
487
+ }
package/lib/parts/chip-list-base.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare type ChipListBaseProps<V> = {
8
8
  sparse?: boolean;
9
9
  /** Decrease horizontal paddings, gap and border-radius values */
10
10
  compact?: boolean;
11
+ disabled?: boolean;
11
12
  theme?: Theme;
12
13
  mode?: ChipListModeType;
13
14
  alignItems?: ChipListAlignItemsType;
@@ -18,4 +19,4 @@ export declare type ChipListBaseProps<V> = {
18
19
  /** Identifier for e2e tests */
19
20
  'data-e2e'?: string;
20
21
  };
21
- export declare function ChipListBase<V>({ size, sparse, compact, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
22
+ export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
package/lib/parts/chip-list-base.js CHANGED
@@ -23,6 +23,8 @@ function ChipListBase(_ref) {
23
23
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
24
24
  _ref$compact = _ref.compact,
25
25
  compact = _ref$compact === void 0 ? false : _ref$compact,
26
+ _ref$disabled = _ref.disabled,
27
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
26
28
  className = _ref.className,
27
29
  _ref$mode = _ref.mode,
28
30
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
@@ -47,10 +49,11 @@ function ChipListBase(_ref) {
47
49
  return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
48
50
  value: {
49
51
  onChange: onChange,
50
- selectedIds: selectedIds
52
+ selectedIds: selectedIds,
53
+ disabled: disabled
51
54
  }
52
55
  }, /*#__PURE__*/React.createElement("div", {
53
- className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, ALIGN_ITEMS_STYLES[alignItems], className),
56
+ className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, disabled && styles.disabled, ALIGN_ITEMS_STYLES[alignItems], className),
54
57
  "data-e2e": e2eId ? "".concat(e2eId, "__chips-container") : null,
55
58
  "data-rs-internal": 'chip-list',
56
59
  "data-test": 'chip-list'
package/lib/parts/chip-list-context.js CHANGED
@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react';
2
2
  var ChipListContext = /*#__PURE__*/createContext({
3
3
  // eslint-disable-next-line @typescript-eslint/no-empty-function
4
4
  onChange: function onChange() {},
5
- selectedIds: []
5
+ selectedIds: [],
6
+ disabled: false
6
7
  });
7
8
 
8
9
  var useChipListContext = function useChipListContext() {
package/lib/parts/chip-list.p.module.css.js CHANGED
@@ -1,25 +1,26 @@
1
1
  var styles = {
2
- "light": "_light_vej1ka_8",
3
- "dark": "_dark_vej1ka_11",
4
- "alignLeft": "_alignLeft_vej1ka_15",
5
- "alignCenter": "_alignCenter_vej1ka_18",
6
- "alignRight": "_alignRight_vej1ka_21",
7
- "sizeXs": "_sizeXs_vej1ka_25",
8
- "sizeS": "_sizeS_vej1ka_28",
9
- "sizeM": "_sizeM_vej1ka_31",
10
- "sizeL": "_sizeL_vej1ka_34",
11
- "innerOffsetL": "_innerOffsetL_vej1ka_38",
12
- "innerOffsetM": "_innerOffsetM_vej1ka_41",
13
- "classic": "_classic_vej1ka_45",
14
- "rock": "_rock_vej1ka_48",
15
- "compact": "_compact_vej1ka_52",
16
- "main": "_main_vej1ka_56",
17
- "chipsContainer": "_chipsContainer_vej1ka_62",
18
- "alignIconLeft": "_alignIconLeft_vej1ka_72",
19
- "alignIconRight": "_alignIconRight_vej1ka_75",
20
- "chip": "_chip_vej1ka_62",
21
- "selected": "_selected_vej1ka_166",
22
- "icon": "_icon_vej1ka_176",
23
- "withoutText": "_withoutText_vej1ka_187"
2
+ "light": "_light_1xl8zrw_8",
3
+ "dark": "_dark_1xl8zrw_11",
4
+ "alignLeft": "_alignLeft_1xl8zrw_15",
5
+ "alignCenter": "_alignCenter_1xl8zrw_18",
6
+ "alignRight": "_alignRight_1xl8zrw_21",
7
+ "sizeXs": "_sizeXs_1xl8zrw_25",
8
+ "sizeS": "_sizeS_1xl8zrw_28",
9
+ "sizeM": "_sizeM_1xl8zrw_31",
10
+ "sizeL": "_sizeL_1xl8zrw_34",
11
+ "innerOffsetL": "_innerOffsetL_1xl8zrw_38",
12
+ "innerOffsetM": "_innerOffsetM_1xl8zrw_41",
13
+ "classic": "_classic_1xl8zrw_45",
14
+ "rock": "_rock_1xl8zrw_48",
15
+ "compact": "_compact_1xl8zrw_52",
16
+ "main": "_main_1xl8zrw_56",
17
+ "chipsContainer": "_chipsContainer_1xl8zrw_62",
18
+ "alignIconLeft": "_alignIconLeft_1xl8zrw_72",
19
+ "alignIconRight": "_alignIconRight_1xl8zrw_75",
20
+ "chip": "_chip_1xl8zrw_62",
21
+ "selected": "_selected_1xl8zrw_172",
22
+ "disabled": "_disabled_1xl8zrw_179",
23
+ "icon": "_icon_1xl8zrw_212",
24
+ "withoutText": "_withoutText_1xl8zrw_223"
24
25
  };
25
26
  export { styles as default };
package/lib/parts/chip.js CHANGED
@@ -20,15 +20,21 @@ import cn from 'classnames';
20
20
  import styles from './chip-list.p.module.css.js';
21
21
  import { useChipListContext } from './chip-list-context.js';
22
22
  var ChipTag = /*#__PURE__*/forwardRef(function (props, ref) {
23
+ var _useChipListContext = useChipListContext(),
24
+ disabled = _useChipListContext.disabled;
25
+
23
26
  if (typeof props.href !== 'undefined') {
24
- return /*#__PURE__*/React.createElement("a", _objectSpread({
27
+ return /*#__PURE__*/React.createElement("a", _objectSpread(_objectSpread({
25
28
  ref: ref
26
- }, props), props.children);
29
+ }, props), {}, {
30
+ tabIndex: disabled ? -1 : props.tabIndex
31
+ }), props.children);
27
32
  }
28
33
 
29
34
  return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
30
35
  ref: ref
31
36
  }, props), {}, {
37
+ disabled: disabled,
32
38
  type: "button"
33
39
  }), props.children);
34
40
  });
@@ -39,7 +45,7 @@ var isWithoutChildren = function isWithoutChildren(children) {
39
45
  };
40
46
 
41
47
  var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
42
- var _cn;
48
+ var _cn, _restProps$tabIndex;
43
49
 
44
50
  var value = _ref.value,
45
51
  className = _ref.className,
@@ -53,14 +59,15 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
53
59
  e2eId = _ref['data-e2e'],
54
60
  restProps = _objectWithoutProperties(_ref, _excluded);
55
61
 
56
- var _useChipListContext = useChipListContext(),
57
- onChange = _useChipListContext.onChange,
58
- selectedIds = _useChipListContext.selectedIds;
62
+ var _useChipListContext2 = useChipListContext(),
63
+ onChange = _useChipListContext2.onChange,
64
+ selectedIds = _useChipListContext2.selectedIds;
59
65
 
60
66
  var selected = _includesInstanceProperty(selectedIds).call(selectedIds, itemId);
61
67
 
68
+ var isWithoutText = isWithoutChildren(children);
62
69
  return /*#__PURE__*/React.createElement(ChipTag, _objectSpread(_objectSpread({}, restProps), {}, {
63
- className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutChildren(children)), _cn), iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
70
+ className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutText), _cn), iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
64
71
  onClick: function onClick(e) {
65
72
  if (_onClick) {
66
73
  _onClick(e);
@@ -79,14 +86,14 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
79
86
  }
80
87
  },
81
88
  role: "tab",
82
- tabIndex: 0,
89
+ tabIndex: (_restProps$tabIndex = restProps.tabIndex) !== null && _restProps$tabIndex !== void 0 ? _restProps$tabIndex : 0,
83
90
  ref: ref,
84
91
  "data-e2e": e2eId,
85
92
  "data-test": "chip".concat(selected ? ' chip-selected' : ''),
86
93
  "data-rs-internal": 'chip-list__chip'
87
94
  }), icon && /*#__PURE__*/cloneElement(icon, {
88
95
  className: cn(icon.props.className, styles.icon)
89
- }), /*#__PURE__*/React.createElement("span", null, children));
96
+ }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, children));
90
97
  });
91
98
  Chip.displayName = 'Chip';
92
99
  Chip.propTypes = {
package/lib/parts/types.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare type ChipIconPosition = 'left' | 'right';
5
5
  export declare type ChipListContextType<V> = {
6
6
  onChange: (value: V) => void;
7
7
  selectedIds?: number[];
8
+ disabled?: boolean;
8
9
  };
package/lib/parts/use-items-ids.js CHANGED
@@ -15,6 +15,12 @@ function patchItemIfNeeded(_ref) {
15
15
  });
16
16
  }
17
17
 
18
+ var hasElValue = function hasElValue(el) {
19
+ var _el$props, _el$props2;
20
+
21
+ return ((_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.value) !== null && typeof ((_el$props2 = el.props) === null || _el$props2 === void 0 ? void 0 : _el$props2.value) !== 'undefined';
22
+ };
23
+
18
24
  var useItemsIds = function useItemsIds(_ref2) {
19
25
  var children = _ref2.children,
20
26
  compareValues = _ref2.compareValues,
@@ -25,7 +31,7 @@ var useItemsIds = function useItemsIds(_ref2) {
25
31
  var currentSelectedItemIds = [];
26
32
  var items = deepMap(children, function (child) {
27
33
  if (child.type === Chip) {
28
- var childValue = child.props.value || counter;
34
+ var childValue = hasElValue(child) ? child.props.value : counter;
29
35
  var isSelectedItem = compareValues(value, childValue);
30
36
 
31
37
  if (isSelectedItem) {
package/lib/public-api.p.css CHANGED
@@ -33,11 +33,11 @@
33
33
  --_rs-cl-chip-base-border-radius:4px;
34
34
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
35
35
  --_rs-cl-chip-vertical-padding:2px;
36
- --_rs-cl-chip-base-horizontal-padding:16px;
36
+ --_rs-cl-chip-base-horizontal-padding:8px;
37
37
  --_rs-cl-chip-compact-horizontal-padding:8px;
38
+ --_rs-cl-chip-icon-only-padding:4px;
38
39
  --_rs-cl-chip-icon-size:16px;
39
- --_rs-cl-chip-icon-offset:8px;
40
- --_rs-cl-chip-icon-margin-top:2px;
40
+ --_rs-cl-chip-icon-offset:4px;
41
41
  --_rs-cl-vertical-gap:8px;
42
42
  --_rs-cl-base-horizontal-gap:8px;
43
43
  --_rs-cl-compact-horizontal-gap:4px;
@@ -85,6 +85,7 @@
85
85
  --_rs-cl-chip-vertical-padding:6px;
86
86
  --_rs-cl-chip-base-horizontal-padding:16px;
87
87
  --_rs-cl-chip-compact-horizontal-padding:8px;
88
+ --_rs-cl-chip-icon-only-padding:6px;
88
89
  --_rs-cl-chip-icon-size:20px;
89
90
  --_rs-cl-chip-icon-offset:8px;
90
91
  --_rs-cl-vertical-gap:12px;
@@ -134,6 +135,7 @@
134
135
  --_rs-cl-chip-vertical-padding:8px;
135
136
  --_rs-cl-chip-base-horizontal-padding:24px;
136
137
  --_rs-cl-chip-compact-horizontal-padding:12px;
138
+ --_rs-cl-chip-icon-only-padding:8px;
137
139
  --_rs-cl-chip-icon-size:24px;
138
140
  --_rs-cl-chip-icon-offset:8px;
139
141
  --_rs-cl-vertical-gap:12px;
@@ -188,6 +190,7 @@
188
190
  --_rs-cl-chip-vertical-padding:12px;
189
191
  --_rs-cl-chip-base-horizontal-padding:32px;
190
192
  --_rs-cl-chip-compact-horizontal-padding:16px;
193
+ --_rs-cl-chip-icon-only-padding:12px;
191
194
  --_rs-cl-chip-icon-size:28px;
192
195
  --_rs-cl-chip-icon-offset:16px;
193
196
  --_rs-cl-vertical-gap:16px;
@@ -305,11 +308,11 @@
305
308
  --_rs-cl-chip-base-border-radius:4px;
306
309
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
307
310
  --_rs-cl-chip-vertical-padding:2px;
308
- --_rs-cl-chip-base-horizontal-padding:16px;
311
+ --_rs-cl-chip-base-horizontal-padding:8px;
309
312
  --_rs-cl-chip-compact-horizontal-padding:8px;
313
+ --_rs-cl-chip-icon-only-padding:4px;
310
314
  --_rs-cl-chip-icon-size:16px;
311
- --_rs-cl-chip-icon-offset:8px;
312
- --_rs-cl-chip-icon-margin-top:2px;
315
+ --_rs-cl-chip-icon-offset:4px;
313
316
  --_rs-cl-vertical-gap:8px;
314
317
  --_rs-cl-base-horizontal-gap:8px;
315
318
  --_rs-cl-compact-horizontal-gap:4px;
@@ -357,6 +360,7 @@
357
360
  --_rs-cl-chip-vertical-padding:6px;
358
361
  --_rs-cl-chip-base-horizontal-padding:16px;
359
362
  --_rs-cl-chip-compact-horizontal-padding:8px;
363
+ --_rs-cl-chip-icon-only-padding:6px;
360
364
  --_rs-cl-chip-icon-size:20px;
361
365
  --_rs-cl-chip-icon-offset:8px;
362
366
  --_rs-cl-vertical-gap:12px;
@@ -406,6 +410,7 @@
406
410
  --_rs-cl-chip-vertical-padding:8px;
407
411
  --_rs-cl-chip-base-horizontal-padding:24px;
408
412
  --_rs-cl-chip-compact-horizontal-padding:12px;
413
+ --_rs-cl-chip-icon-only-padding:8px;
409
414
  --_rs-cl-chip-icon-size:24px;
410
415
  --_rs-cl-chip-icon-offset:8px;
411
416
  --_rs-cl-vertical-gap:12px;
@@ -460,6 +465,7 @@
460
465
  --_rs-cl-chip-vertical-padding:12px;
461
466
  --_rs-cl-chip-base-horizontal-padding:32px;
462
467
  --_rs-cl-chip-compact-horizontal-padding:16px;
468
+ --_rs-cl-chip-icon-only-padding:12px;
463
469
  --_rs-cl-chip-icon-size:28px;
464
470
  --_rs-cl-chip-icon-offset:16px;
465
471
  --_rs-cl-vertical-gap:16px;
package/lib/public-api.pcss CHANGED
@@ -33,11 +33,11 @@
33
33
  --_rs-cl-chip-base-border-radius:4px;
34
34
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
35
35
  --_rs-cl-chip-vertical-padding:2px;
36
- --_rs-cl-chip-base-horizontal-padding:16px;
36
+ --_rs-cl-chip-base-horizontal-padding:8px;
37
37
  --_rs-cl-chip-compact-horizontal-padding:8px;
38
+ --_rs-cl-chip-icon-only-padding:4px;
38
39
  --_rs-cl-chip-icon-size:16px;
39
- --_rs-cl-chip-icon-offset:8px;
40
- --_rs-cl-chip-icon-margin-top:2px;
40
+ --_rs-cl-chip-icon-offset:4px;
41
41
  --_rs-cl-vertical-gap:8px;
42
42
  --_rs-cl-base-horizontal-gap:8px;
43
43
  --_rs-cl-compact-horizontal-gap:4px;
@@ -85,6 +85,7 @@
85
85
  --_rs-cl-chip-vertical-padding:6px;
86
86
  --_rs-cl-chip-base-horizontal-padding:16px;
87
87
  --_rs-cl-chip-compact-horizontal-padding:8px;
88
+ --_rs-cl-chip-icon-only-padding:6px;
88
89
  --_rs-cl-chip-icon-size:20px;
89
90
  --_rs-cl-chip-icon-offset:8px;
90
91
  --_rs-cl-vertical-gap:12px;
@@ -134,6 +135,7 @@
134
135
  --_rs-cl-chip-vertical-padding:8px;
135
136
  --_rs-cl-chip-base-horizontal-padding:24px;
136
137
  --_rs-cl-chip-compact-horizontal-padding:12px;
138
+ --_rs-cl-chip-icon-only-padding:8px;
137
139
  --_rs-cl-chip-icon-size:24px;
138
140
  --_rs-cl-chip-icon-offset:8px;
139
141
  --_rs-cl-vertical-gap:12px;
@@ -188,6 +190,7 @@
188
190
  --_rs-cl-chip-vertical-padding:12px;
189
191
  --_rs-cl-chip-base-horizontal-padding:32px;
190
192
  --_rs-cl-chip-compact-horizontal-padding:16px;
193
+ --_rs-cl-chip-icon-only-padding:12px;
191
194
  --_rs-cl-chip-icon-size:28px;
192
195
  --_rs-cl-chip-icon-offset:16px;
193
196
  --_rs-cl-vertical-gap:16px;
@@ -305,11 +308,11 @@
305
308
  --_rs-cl-chip-base-border-radius:4px;
306
309
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
307
310
  --_rs-cl-chip-vertical-padding:2px;
308
- --_rs-cl-chip-base-horizontal-padding:16px;
311
+ --_rs-cl-chip-base-horizontal-padding:8px;
309
312
  --_rs-cl-chip-compact-horizontal-padding:8px;
313
+ --_rs-cl-chip-icon-only-padding:4px;
310
314
  --_rs-cl-chip-icon-size:16px;
311
- --_rs-cl-chip-icon-offset:8px;
312
- --_rs-cl-chip-icon-margin-top:2px;
315
+ --_rs-cl-chip-icon-offset:4px;
313
316
  --_rs-cl-vertical-gap:8px;
314
317
  --_rs-cl-base-horizontal-gap:8px;
315
318
  --_rs-cl-compact-horizontal-gap:4px;
@@ -357,6 +360,7 @@
357
360
  --_rs-cl-chip-vertical-padding:6px;
358
361
  --_rs-cl-chip-base-horizontal-padding:16px;
359
362
  --_rs-cl-chip-compact-horizontal-padding:8px;
363
+ --_rs-cl-chip-icon-only-padding:6px;
360
364
  --_rs-cl-chip-icon-size:20px;
361
365
  --_rs-cl-chip-icon-offset:8px;
362
366
  --_rs-cl-vertical-gap:12px;
@@ -406,6 +410,7 @@
406
410
  --_rs-cl-chip-vertical-padding:8px;
407
411
  --_rs-cl-chip-base-horizontal-padding:24px;
408
412
  --_rs-cl-chip-compact-horizontal-padding:12px;
413
+ --_rs-cl-chip-icon-only-padding:8px;
409
414
  --_rs-cl-chip-icon-size:24px;
410
415
  --_rs-cl-chip-icon-offset:8px;
411
416
  --_rs-cl-vertical-gap:12px;
@@ -460,6 +465,7 @@
460
465
  --_rs-cl-chip-vertical-padding:12px;
461
466
  --_rs-cl-chip-base-horizontal-padding:32px;
462
467
  --_rs-cl-chip-compact-horizontal-padding:16px;
468
+ --_rs-cl-chip-icon-only-padding:12px;
463
469
  --_rs-cl-chip-icon-size:28px;
464
470
  --_rs-cl-chip-icon-offset:16px;
465
471
  --_rs-cl-vertical-gap:16px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/chip-list",
3
- "version": "0.9.11",
3
+ "version": "0.11.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -35,5 +35,5 @@
35
35
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
36
36
  },
37
37
  "nx": {},
38
- "gitHead": "69a84812628809943698f0b27643c83dc449f119"
38
+ "gitHead": "8854056aed712313cea5db9d1876647d349a7db5"
39
39
  }