@salutejs/plasma-web 1.380.0-canary.1390.10557448117.0 → 1.380.0-canary.1392.10557537816.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/api/plasma-web.api.md +6 -0
  2. package/components/Segment/Segment.d.ts +6 -0
  3. package/components/Segment/SegmentGroup.config.d.ts +3 -0
  4. package/components/Segment/SegmentGroup.config.js +4 -1
  5. package/css/cjs/components/Segment/Segment.css +10 -9
  6. package/css/cjs/components/Segment/SegmentGroup.config.js +4 -1
  7. package/css/cjs/components/Segment/SegmentGroup.config.js.map +1 -1
  8. package/css/cjs/components/Segment/{SegmentGroup.config_notwep.css → SegmentGroup.config_u20pg1.css} +1 -0
  9. package/css/cjs/index.css +10 -9
  10. package/css/es/components/Segment/Segment.css +10 -9
  11. package/css/es/components/Segment/SegmentGroup.config.js +4 -1
  12. package/css/es/components/Segment/SegmentGroup.config.js.map +1 -1
  13. package/css/es/components/Segment/{SegmentGroup.config_notwep.css → SegmentGroup.config_u20pg1.css} +1 -0
  14. package/css/es/index.css +10 -9
  15. package/es/components/Segment/SegmentGroup.config.js +4 -1
  16. package/package.json +5 -5
  17. package/temp/plasma-web.api.md +6 -0
package/api/plasma-web.api.md CHANGED
@@ -2001,10 +2001,14 @@ true: PolymorphicClassName;
2001
2001
  stretch: {
2002
2002
  true: PolymorphicClassName;
2003
2003
  };
2004
+ vertical: {
2005
+ true: PolymorphicClassName;
2006
+ };
2004
2007
  }> & HTMLAttributes<HTMLDivElement> & {
2005
2008
  selectionMode?: "multiple" | "single" | undefined;
2006
2009
  disabled?: boolean | undefined;
2007
2010
  stretch?: boolean | undefined;
2011
+ vertical?: boolean | undefined;
2008
2012
  pilled?: boolean | undefined;
2009
2013
  filledBackground?: boolean | undefined;
2010
2014
  size?: string | undefined;
@@ -2040,6 +2044,8 @@ pilled?: boolean | undefined;
2040
2044
  customHandleSelect?: ((e: MouseEvent_2<HTMLButtonElement, MouseEvent>) => void) | undefined;
2041
2045
  size?: string | undefined;
2042
2046
  view?: string | undefined;
2047
+ contentLeft?: ReactNode;
2048
+ contentRight?: ReactNode;
2043
2049
  } & RefAttributes<HTMLLabelElement>>;
2044
2050
 
2045
2051
  export { SegmentItemProps }
package/components/Segment/Segment.d.ts CHANGED
@@ -29,10 +29,14 @@ export declare const SegmentGroup: import("react").FunctionComponent<import("@sa
29
29
  stretch: {
30
30
  true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
31
31
  };
32
+ vertical: {
33
+ true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
34
+ };
32
35
  }> & import("react").HTMLAttributes<HTMLDivElement> & {
33
36
  selectionMode?: "multiple" | "single" | undefined;
34
37
  disabled?: boolean | undefined;
35
38
  stretch?: boolean | undefined;
39
+ vertical?: boolean | undefined;
36
40
  pilled?: boolean | undefined;
37
41
  filledBackground?: boolean | undefined;
38
42
  size?: string | undefined;
@@ -67,4 +71,6 @@ export declare const SegmentItem: import("react").FunctionComponent<import("@sal
67
71
  customHandleSelect?: ((e: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
68
72
  size?: string | undefined;
69
73
  view?: string | undefined;
74
+ contentLeft?: import("react").ReactNode;
75
+ contentRight?: import("react").ReactNode;
70
76
  } & import("react").RefAttributes<HTMLLabelElement>>;
package/components/Segment/SegmentGroup.config.d.ts CHANGED
@@ -26,5 +26,8 @@ export declare const config: {
26
26
  stretch: {
27
27
  true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
28
28
  };
29
+ vertical: {
30
+ true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
31
+ };
29
32
  };
30
33
  };
package/components/Segment/SegmentGroup.config.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.config = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
9
9
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
10
10
  var config = exports.config = {
11
11
  defaults: {
@@ -34,6 +34,9 @@ var config = exports.config = {
34
34
  },
35
35
  stretch: {
36
36
  "true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral([""])))
37
+ },
38
+ vertical: {
39
+ "true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral([""])))
37
40
  }
38
41
  }
39
42
  };
package/css/cjs/components/Segment/Segment.css CHANGED
@@ -8,13 +8,14 @@
8
8
  .SegmentItem_config_g2b5lk_t169sl90__4787903f{--plasma-segment-disabled-opacity:0.4;}
9
9
  .SegmentItem_config_g2b5lk_t1aaurja__4787903f{--plasma-segment-item-pilled-border-radius:1.5rem;}
10
10
 
11
- .SegmentGroup_config_notwep_cct3vnm__4d136812{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
12
- .SegmentGroup_config_notwep_f15142ru__4d136812{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
13
- .SegmentGroup_config_notwep_xekvq49__4d136812{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
14
- .SegmentGroup_config_notwep_slveods__4d136812{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
15
- .SegmentGroup_config_notwep_mt19ik9__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
16
- .SegmentGroup_config_notwep_l1pt19wo__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
17
- .SegmentGroup_config_notwep_t1832286__4d136812{--plasma-segment-disabled-opacity:0.4;}
18
- .SegmentGroup_config_notwep_tho2yw5__4d136812{--plasma-segment-group-pilled-border-radius:1.75rem;}
19
- .SegmentGroup_config_notwep_t1q8y2w0__4d136812{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
11
+ .SegmentGroup_config_u20pg1_cct3vnm__0b7ecca8{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
12
+ .SegmentGroup_config_u20pg1_f15142ru__0b7ecca8{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
13
+ .SegmentGroup_config_u20pg1_xekvq49__0b7ecca8{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
14
+ .SegmentGroup_config_u20pg1_slveods__0b7ecca8{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
15
+ .SegmentGroup_config_u20pg1_mt19ik9__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
16
+ .SegmentGroup_config_u20pg1_l1pt19wo__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
17
+ .SegmentGroup_config_u20pg1_t1832286__0b7ecca8{--plasma-segment-disabled-opacity:0.4;}
18
+ .SegmentGroup_config_u20pg1_tho2yw5__0b7ecca8{--plasma-segment-group-pilled-border-radius:1.75rem;}
19
+ .SegmentGroup_config_u20pg1_t1q8y2w0__0b7ecca8{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
20
+
20
21
 
package/css/cjs/components/Segment/SegmentGroup.config.js CHANGED
@@ -1,4 +1,4 @@
1
- import './SegmentGroup.config_notwep.css';
1
+ import './SegmentGroup.config_u20pg1.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -30,6 +30,9 @@ var config = {
30
30
  },
31
31
  stretch: {
32
32
  "true": "tjfuhig"
33
+ },
34
+ vertical: {
35
+ "true": "t1d6v4b9"
33
36
  }
34
37
  }
35
38
  };
package/css/cjs/components/Segment/SegmentGroup.config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentGroup.config.js","sources":["../../../../src-css/components/Segment/SegmentGroup.config.ts"],"sourcesContent":["import { css, segmentTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n variations: {\n view: {\n clear: css`\n ${segmentTokens.groupBackgroundColor}: tranparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n filled: css`\n ${segmentTokens.groupBackgroundColor}: transparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n },\n size: {\n xs: css`\n ${segmentTokens.groupBorderRadius}: 0.5rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n s: css`\n ${segmentTokens.groupBorderRadius}: 0.625rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n m: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n l: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n },\n disabled: {\n true: css`\n ${segmentTokens.disabledOpacity}: 0.4;\n `,\n },\n pilled: {\n true: css`\n ${segmentTokens.groupPilledBorderRadius}: 1.75rem;\n `,\n },\n filledBackground: {\n true: css`\n ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);\n `,\n },\n stretch: {\n true: css``,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","clear","filled","xs","s","m","l","disabled","true","pilled","filledBackground","stretch"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,OAAO;AACbC,IAAAA,IAAI,EAAE,IAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,KAAK,EAKJ,SAAA;AACDC,MAAAA,MAAM,EAAA,UAAA;KAMT;AACDH,IAAAA,IAAI,EAAE;AACFI,MAAAA,EAAE,EAID,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAAA,UAAA;KAKJ;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAI,EAAA,UAAA;KAGP;AACDC,IAAAA,MAAM,EAAE;MACJD,MAAI,EAAA,SAAA;KAGP;AACDE,IAAAA,gBAAgB,EAAE;MACdF,MAAI,EAAA,UAAA;KAGP;AACDG,IAAAA,OAAO,EAAE;MACLH,MAAI,EAAA,SAAA;AACR,KAAA;AACJ,GAAA;AACJ;;;;"}
1
+ {"version":3,"file":"SegmentGroup.config.js","sources":["../../../../src-css/components/Segment/SegmentGroup.config.ts"],"sourcesContent":["import { css, segmentTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n variations: {\n view: {\n clear: css`\n ${segmentTokens.groupBackgroundColor}: tranparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n filled: css`\n ${segmentTokens.groupBackgroundColor}: transparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n },\n size: {\n xs: css`\n ${segmentTokens.groupBorderRadius}: 0.5rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n s: css`\n ${segmentTokens.groupBorderRadius}: 0.625rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n m: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n l: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n },\n disabled: {\n true: css`\n ${segmentTokens.disabledOpacity}: 0.4;\n `,\n },\n pilled: {\n true: css`\n ${segmentTokens.groupPilledBorderRadius}: 1.75rem;\n `,\n },\n filledBackground: {\n true: css`\n ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);\n `,\n },\n stretch: {\n true: css``,\n },\n vertical: {\n true: css``,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","clear","filled","xs","s","m","l","disabled","true","pilled","filledBackground","stretch","vertical"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,OAAO;AACbC,IAAAA,IAAI,EAAE,IAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,KAAK,EAKJ,SAAA;AACDC,MAAAA,MAAM,EAAA,UAAA;KAMT;AACDH,IAAAA,IAAI,EAAE;AACFI,MAAAA,EAAE,EAID,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAAA,UAAA;KAKJ;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAI,EAAA,UAAA;KAGP;AACDC,IAAAA,MAAM,EAAE;MACJD,MAAI,EAAA,SAAA;KAGP;AACDE,IAAAA,gBAAgB,EAAE;MACdF,MAAI,EAAA,UAAA;KAGP;AACDG,IAAAA,OAAO,EAAE;MACLH,MAAI,EAAA,SAAA;KACP;AACDI,IAAAA,QAAQ,EAAE;MACNJ,MAAI,EAAA,UAAA;AACR,KAAA;AACJ,GAAA;AACJ;;;;"}
package/css/cjs/components/Segment/{SegmentGroup.config_notwep.css → SegmentGroup.config_u20pg1.css} RENAMED
@@ -8,3 +8,4 @@
8
8
  .tho2yw5{--plasma-segment-group-pilled-border-radius:1.75rem;}
9
9
  .t1q8y2w0{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
10
10
 
11
+
package/css/cjs/index.css CHANGED
@@ -321,15 +321,16 @@
321
321
  .SegmentItem_config_g2b5lk_t169sl90__4787903f{--plasma-segment-disabled-opacity:0.4;}
322
322
  .SegmentItem_config_g2b5lk_t1aaurja__4787903f{--plasma-segment-item-pilled-border-radius:1.5rem;}
323
323
 
324
- .SegmentGroup_config_notwep_cct3vnm__4d136812{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
325
- .SegmentGroup_config_notwep_f15142ru__4d136812{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
326
- .SegmentGroup_config_notwep_xekvq49__4d136812{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
327
- .SegmentGroup_config_notwep_slveods__4d136812{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
328
- .SegmentGroup_config_notwep_mt19ik9__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
329
- .SegmentGroup_config_notwep_l1pt19wo__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
330
- .SegmentGroup_config_notwep_t1832286__4d136812{--plasma-segment-disabled-opacity:0.4;}
331
- .SegmentGroup_config_notwep_tho2yw5__4d136812{--plasma-segment-group-pilled-border-radius:1.75rem;}
332
- .SegmentGroup_config_notwep_t1q8y2w0__4d136812{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
324
+ .SegmentGroup_config_u20pg1_cct3vnm__0b7ecca8{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
325
+ .SegmentGroup_config_u20pg1_f15142ru__0b7ecca8{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
326
+ .SegmentGroup_config_u20pg1_xekvq49__0b7ecca8{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
327
+ .SegmentGroup_config_u20pg1_slveods__0b7ecca8{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
328
+ .SegmentGroup_config_u20pg1_mt19ik9__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
329
+ .SegmentGroup_config_u20pg1_l1pt19wo__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
330
+ .SegmentGroup_config_u20pg1_t1832286__0b7ecca8{--plasma-segment-disabled-opacity:0.4;}
331
+ .SegmentGroup_config_u20pg1_tho2yw5__0b7ecca8{--plasma-segment-group-pilled-border-radius:1.75rem;}
332
+ .SegmentGroup_config_u20pg1_t1q8y2w0__0b7ecca8{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
333
+
333
334
 
334
335
 
335
336
  .Select_config_63kke9_x12monx2__4f1972a3{--plasma-select-padding:0.125rem;--plasma-select-border-radius:0.5rem;--plasma-select-focus-offset:0.125rem;--plasma-select-item-height:1rem;--plasma-select-item-padding:0.5rem 0.5rem 0.5rem 0.375rem;--plasma-select-item-padding-tight:0.25rem 0.5rem 0.25rem 0.375rem;--plasma-select-item-border-radius:0.375rem;--plasma-select-item-icon-size:1rem;--plasma-select-item-icon-size-tight:1rem;--plasma-select-item-icon-margin:0 0.25rem 0 0;--plasma-select-font-family:var(--plasma-typo-body-xs-font-family);--plasma-select-font-size:var(--plasma-typo-body-xs-font-size);--plasma-select-font-style:var(--plasma-typo-body-xs-font-style);--plasma-select-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-select-font-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-select-font-line-height:var(--plasma-typo-body-xs-line-height);--plasma-select-checkbox-trigger-size:0.875rem;--plasma-select-checkbox-trigger-size-tight:0.875rem;--plasma-select-checkbox-trigger-border-radius:0.25rem;--plasma-select-checkbox-trigger-border-radius-tight:0.25rem;--plasma-select-checkbox-fill-color:var(--text-accent);--plasma-select-checkbox-icon-color:var(--on-dark-text-primary);--plasma-select-checkbox-trigger-border-color:var(--text-secondary);--plasma-select-indicator-size:0.375rem;--plasma-select-chip-gap:0.25rem;--plasma-select-chip-border-radius:0.125rem;--plasma-select-chip-height:1.25rem;--plasma-select-chip-padding-right:0.375rem;--plasma-select-chip-padding-left:0.625rem;--plasma-select-chip-clear-content-margin-left:0.25rem;--plasma-select-chip-clear-content-margin-right:0rem;--plasma-select-chip-close-icon-size:0.75rem;--plasma-select-target-button-arrow-margin:0 -0.125rem 0 0.25rem;--plasma-select-target-textfield-arrow-margin:0 0 0 0.375rem;--plasma-select-target-height:2rem;--plasma-select-target-button-padding:0.75rem 0 0.75rem;--plasma-select-target-textfield-padding:0.5rem 0 0.625rem;--plasma-select-target-textfield-chip-padding:0.5rem 0 0.25rem;--plasma-select-label-offset:0.375rem;--plasma-select-inner-label-gap:0;--plasma-select-helper-text-offset:0.25rem;--plasma-select-spinner-size:1rem;--plasma-select-spinner-size-tight:1rem;}
package/css/es/components/Segment/Segment.css CHANGED
@@ -8,13 +8,14 @@
8
8
  .SegmentItem_config_g2b5lk_t169sl90__4787903f{--plasma-segment-disabled-opacity:0.4;}
9
9
  .SegmentItem_config_g2b5lk_t1aaurja__4787903f{--plasma-segment-item-pilled-border-radius:1.5rem;}
10
10
 
11
- .SegmentGroup_config_notwep_cct3vnm__4d136812{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
12
- .SegmentGroup_config_notwep_f15142ru__4d136812{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
13
- .SegmentGroup_config_notwep_xekvq49__4d136812{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
14
- .SegmentGroup_config_notwep_slveods__4d136812{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
15
- .SegmentGroup_config_notwep_mt19ik9__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
16
- .SegmentGroup_config_notwep_l1pt19wo__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
17
- .SegmentGroup_config_notwep_t1832286__4d136812{--plasma-segment-disabled-opacity:0.4;}
18
- .SegmentGroup_config_notwep_tho2yw5__4d136812{--plasma-segment-group-pilled-border-radius:1.75rem;}
19
- .SegmentGroup_config_notwep_t1q8y2w0__4d136812{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
11
+ .SegmentGroup_config_u20pg1_cct3vnm__0b7ecca8{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
12
+ .SegmentGroup_config_u20pg1_f15142ru__0b7ecca8{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
13
+ .SegmentGroup_config_u20pg1_xekvq49__0b7ecca8{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
14
+ .SegmentGroup_config_u20pg1_slveods__0b7ecca8{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
15
+ .SegmentGroup_config_u20pg1_mt19ik9__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
16
+ .SegmentGroup_config_u20pg1_l1pt19wo__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
17
+ .SegmentGroup_config_u20pg1_t1832286__0b7ecca8{--plasma-segment-disabled-opacity:0.4;}
18
+ .SegmentGroup_config_u20pg1_tho2yw5__0b7ecca8{--plasma-segment-group-pilled-border-radius:1.75rem;}
19
+ .SegmentGroup_config_u20pg1_t1q8y2w0__0b7ecca8{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
20
+
20
21
 
package/css/es/components/Segment/SegmentGroup.config.js CHANGED
@@ -1,4 +1,4 @@
1
- import './SegmentGroup.config_notwep.css';
1
+ import './SegmentGroup.config_u20pg1.css';
2
2
  var config = {
3
3
  defaults: {
4
4
  view: 'clear',
@@ -26,6 +26,9 @@ var config = {
26
26
  },
27
27
  stretch: {
28
28
  "true": "tjfuhig"
29
+ },
30
+ vertical: {
31
+ "true": "t1d6v4b9"
29
32
  }
30
33
  }
31
34
  };
package/css/es/components/Segment/SegmentGroup.config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentGroup.config.js","sources":["../../../../src-css/components/Segment/SegmentGroup.config.ts"],"sourcesContent":["import { css, segmentTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n variations: {\n view: {\n clear: css`\n ${segmentTokens.groupBackgroundColor}: tranparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n filled: css`\n ${segmentTokens.groupBackgroundColor}: transparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n },\n size: {\n xs: css`\n ${segmentTokens.groupBorderRadius}: 0.5rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n s: css`\n ${segmentTokens.groupBorderRadius}: 0.625rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n m: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n l: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n },\n disabled: {\n true: css`\n ${segmentTokens.disabledOpacity}: 0.4;\n `,\n },\n pilled: {\n true: css`\n ${segmentTokens.groupPilledBorderRadius}: 1.75rem;\n `,\n },\n filledBackground: {\n true: css`\n ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);\n `,\n },\n stretch: {\n true: css``,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","clear","filled","xs","s","m","l","disabled","true","pilled","filledBackground","stretch"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,OAAO;AACbC,IAAAA,IAAI,EAAE,IAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,KAAK,EAKJ,SAAA;AACDC,MAAAA,MAAM,EAAA,UAAA;KAMT;AACDH,IAAAA,IAAI,EAAE;AACFI,MAAAA,EAAE,EAID,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAAA,UAAA;KAKJ;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAI,EAAA,UAAA;KAGP;AACDC,IAAAA,MAAM,EAAE;MACJD,MAAI,EAAA,SAAA;KAGP;AACDE,IAAAA,gBAAgB,EAAE;MACdF,MAAI,EAAA,UAAA;KAGP;AACDG,IAAAA,OAAO,EAAE;MACLH,MAAI,EAAA,SAAA;AACR,KAAA;AACJ,GAAA;AACJ;;;;"}
1
+ {"version":3,"file":"SegmentGroup.config.js","sources":["../../../../src-css/components/Segment/SegmentGroup.config.ts"],"sourcesContent":["import { css, segmentTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n variations: {\n view: {\n clear: css`\n ${segmentTokens.groupBackgroundColor}: tranparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n filled: css`\n ${segmentTokens.groupBackgroundColor}: transparent;\n ${segmentTokens.arrowColor}: var(--plasma-colors-secondary);\n\n ${segmentTokens.outlineFocusColor}: var(--plasma-colors-button-focused);\n `,\n },\n size: {\n xs: css`\n ${segmentTokens.groupBorderRadius}: 0.5rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n s: css`\n ${segmentTokens.groupBorderRadius}: 0.625rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n m: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n l: css`\n ${segmentTokens.groupBorderRadius}: 0.75rem;\n ${segmentTokens.groupWidth}: auto;\n ${segmentTokens.groupHeight}: auto;\n `,\n },\n disabled: {\n true: css`\n ${segmentTokens.disabledOpacity}: 0.4;\n `,\n },\n pilled: {\n true: css`\n ${segmentTokens.groupPilledBorderRadius}: 1.75rem;\n `,\n },\n filledBackground: {\n true: css`\n ${segmentTokens.groupFilledBackgroundColor}: var(--plasma-colors-surface-liquid01);\n `,\n },\n stretch: {\n true: css``,\n },\n vertical: {\n true: css``,\n },\n },\n};\n"],"names":["config","defaults","view","size","variations","clear","filled","xs","s","m","l","disabled","true","pilled","filledBackground","stretch","vertical"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,OAAO;AACbC,IAAAA,IAAI,EAAE,IAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,KAAK,EAKJ,SAAA;AACDC,MAAAA,MAAM,EAAA,UAAA;KAMT;AACDH,IAAAA,IAAI,EAAE;AACFI,MAAAA,EAAE,EAID,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAIA,SAAA;AACDC,MAAAA,CAAC,EAAA,UAAA;KAKJ;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAI,EAAA,UAAA;KAGP;AACDC,IAAAA,MAAM,EAAE;MACJD,MAAI,EAAA,SAAA;KAGP;AACDE,IAAAA,gBAAgB,EAAE;MACdF,MAAI,EAAA,UAAA;KAGP;AACDG,IAAAA,OAAO,EAAE;MACLH,MAAI,EAAA,SAAA;KACP;AACDI,IAAAA,QAAQ,EAAE;MACNJ,MAAI,EAAA,UAAA;AACR,KAAA;AACJ,GAAA;AACJ;;;;"}
package/css/es/components/Segment/{SegmentGroup.config_notwep.css → SegmentGroup.config_u20pg1.css} RENAMED
@@ -8,3 +8,4 @@
8
8
  .tho2yw5{--plasma-segment-group-pilled-border-radius:1.75rem;}
9
9
  .t1q8y2w0{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
10
10
 
11
+
package/css/es/index.css CHANGED
@@ -321,15 +321,16 @@
321
321
  .SegmentItem_config_g2b5lk_t169sl90__4787903f{--plasma-segment-disabled-opacity:0.4;}
322
322
  .SegmentItem_config_g2b5lk_t1aaurja__4787903f{--plasma-segment-item-pilled-border-radius:1.5rem;}
323
323
 
324
- .SegmentGroup_config_notwep_cct3vnm__4d136812{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
325
- .SegmentGroup_config_notwep_f15142ru__4d136812{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
326
- .SegmentGroup_config_notwep_xekvq49__4d136812{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
327
- .SegmentGroup_config_notwep_slveods__4d136812{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
328
- .SegmentGroup_config_notwep_mt19ik9__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
329
- .SegmentGroup_config_notwep_l1pt19wo__4d136812{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
330
- .SegmentGroup_config_notwep_t1832286__4d136812{--plasma-segment-disabled-opacity:0.4;}
331
- .SegmentGroup_config_notwep_tho2yw5__4d136812{--plasma-segment-group-pilled-border-radius:1.75rem;}
332
- .SegmentGroup_config_notwep_t1q8y2w0__4d136812{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
324
+ .SegmentGroup_config_u20pg1_cct3vnm__0b7ecca8{--plasma-segment-group-background-color:tranparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
325
+ .SegmentGroup_config_u20pg1_f15142ru__0b7ecca8{--plasma-segment-group-background-color:transparent;--plasma-segment-arrow-color:var(--plasma-colors-secondary);--plasma-segment-outline-focus-color:var(--plasma-colors-button-focused);}
326
+ .SegmentGroup_config_u20pg1_xekvq49__0b7ecca8{--plasma-segment-group-border-radius:0.5rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
327
+ .SegmentGroup_config_u20pg1_slveods__0b7ecca8{--plasma-segment-group-border-radius:0.625rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
328
+ .SegmentGroup_config_u20pg1_mt19ik9__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
329
+ .SegmentGroup_config_u20pg1_l1pt19wo__0b7ecca8{--plasma-segment-group-border-radius:0.75rem;--plasma-segment-group-width:auto;--plasma-segment-group-height:auto;}
330
+ .SegmentGroup_config_u20pg1_t1832286__0b7ecca8{--plasma-segment-disabled-opacity:0.4;}
331
+ .SegmentGroup_config_u20pg1_tho2yw5__0b7ecca8{--plasma-segment-group-pilled-border-radius:1.75rem;}
332
+ .SegmentGroup_config_u20pg1_t1q8y2w0__0b7ecca8{--plasma-segment-group-filled-background-color:var(--plasma-colors-surface-liquid01);}
333
+
333
334
 
334
335
 
335
336
  .Select_config_63kke9_x12monx2__4f1972a3{--plasma-select-padding:0.125rem;--plasma-select-border-radius:0.5rem;--plasma-select-focus-offset:0.125rem;--plasma-select-item-height:1rem;--plasma-select-item-padding:0.5rem 0.5rem 0.5rem 0.375rem;--plasma-select-item-padding-tight:0.25rem 0.5rem 0.25rem 0.375rem;--plasma-select-item-border-radius:0.375rem;--plasma-select-item-icon-size:1rem;--plasma-select-item-icon-size-tight:1rem;--plasma-select-item-icon-margin:0 0.25rem 0 0;--plasma-select-font-family:var(--plasma-typo-body-xs-font-family);--plasma-select-font-size:var(--plasma-typo-body-xs-font-size);--plasma-select-font-style:var(--plasma-typo-body-xs-font-style);--plasma-select-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-select-font-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-select-font-line-height:var(--plasma-typo-body-xs-line-height);--plasma-select-checkbox-trigger-size:0.875rem;--plasma-select-checkbox-trigger-size-tight:0.875rem;--plasma-select-checkbox-trigger-border-radius:0.25rem;--plasma-select-checkbox-trigger-border-radius-tight:0.25rem;--plasma-select-checkbox-fill-color:var(--text-accent);--plasma-select-checkbox-icon-color:var(--on-dark-text-primary);--plasma-select-checkbox-trigger-border-color:var(--text-secondary);--plasma-select-indicator-size:0.375rem;--plasma-select-chip-gap:0.25rem;--plasma-select-chip-border-radius:0.125rem;--plasma-select-chip-height:1.25rem;--plasma-select-chip-padding-right:0.375rem;--plasma-select-chip-padding-left:0.625rem;--plasma-select-chip-clear-content-margin-left:0.25rem;--plasma-select-chip-clear-content-margin-right:0rem;--plasma-select-chip-close-icon-size:0.75rem;--plasma-select-target-button-arrow-margin:0 -0.125rem 0 0.25rem;--plasma-select-target-textfield-arrow-margin:0 0 0 0.375rem;--plasma-select-target-height:2rem;--plasma-select-target-button-padding:0.75rem 0 0.75rem;--plasma-select-target-textfield-padding:0.5rem 0 0.625rem;--plasma-select-target-textfield-chip-padding:0.5rem 0 0.25rem;--plasma-select-label-offset:0.375rem;--plasma-select-inner-label-gap:0;--plasma-select-helper-text-offset:0.25rem;--plasma-select-spinner-size:1rem;--plasma-select-spinner-size-tight:1rem;}
package/es/components/Segment/SegmentGroup.config.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components';
4
4
  export var config = {
@@ -28,6 +28,9 @@ export var config = {
28
28
  },
29
29
  stretch: {
30
30
  "true": /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral([""])))
31
+ },
32
+ vertical: {
33
+ "true": /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral([""])))
31
34
  }
32
35
  }
33
36
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-web",
3
- "version": "1.380.0-canary.1390.10557448117.0",
3
+ "version": "1.380.0-canary.1392.10557537816.0",
4
4
  "description": "Salute Design System / React UI kit for web applications",
5
5
  "author": "Salute Frontend Team <salute.developers@gmail.com>",
6
6
  "license": "MIT",
@@ -20,8 +20,8 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@salutejs/plasma-core": "1.175.0-dev.0",
23
- "@salutejs/plasma-hope": "1.305.0-canary.1390.10557448117.0",
24
- "@salutejs/plasma-new-hope": "0.131.0-canary.1390.10557448117.0",
23
+ "@salutejs/plasma-hope": "1.304.0-dev.0",
24
+ "@salutejs/plasma-new-hope": "0.131.0-canary.1392.10557537816.0",
25
25
  "@salutejs/plasma-themes": "0.15.0-dev.0",
26
26
  "@salutejs/plasma-tokens-b2b": "1.41.0",
27
27
  "@salutejs/plasma-tokens-b2c": "0.51.0",
@@ -50,7 +50,7 @@
50
50
  "@rollup/plugin-node-resolve": "15.2.3",
51
51
  "@salutejs/plasma-colors": "0.13.0",
52
52
  "@salutejs/plasma-cy-utils": "0.106.0-dev.0",
53
- "@salutejs/plasma-icons": "1.203.0-canary.1390.10557448117.0",
53
+ "@salutejs/plasma-icons": "1.202.0-dev.0",
54
54
  "@salutejs/plasma-sb-utils": "0.173.0-dev.0",
55
55
  "@storybook/addon-docs": "7.6.17",
56
56
  "@storybook/addon-essentials": "7.6.17",
@@ -112,5 +112,5 @@
112
112
  "Fanil Zubairov"
113
113
  ],
114
114
  "sideEffects": false,
115
- "gitHead": "a14ee3b4c94cc325b35466f338edf8e460ef65ac"
115
+ "gitHead": "41f9200d0bc8d6012495843752c04c985fc6b300"
116
116
  }
package/temp/plasma-web.api.md CHANGED
@@ -2001,10 +2001,14 @@ true: PolymorphicClassName;
2001
2001
  stretch: {
2002
2002
  true: PolymorphicClassName;
2003
2003
  };
2004
+ vertical: {
2005
+ true: PolymorphicClassName;
2006
+ };
2004
2007
  }> & HTMLAttributes<HTMLDivElement> & {
2005
2008
  selectionMode?: "multiple" | "single" | undefined;
2006
2009
  disabled?: boolean | undefined;
2007
2010
  stretch?: boolean | undefined;
2011
+ vertical?: boolean | undefined;
2008
2012
  pilled?: boolean | undefined;
2009
2013
  filledBackground?: boolean | undefined;
2010
2014
  size?: string | undefined;
@@ -2040,6 +2044,8 @@ pilled?: boolean | undefined;
2040
2044
  customHandleSelect?: ((e: MouseEvent_2<HTMLButtonElement, MouseEvent>) => void) | undefined;
2041
2045
  size?: string | undefined;
2042
2046
  view?: string | undefined;
2047
+ contentLeft?: ReactNode;
2048
+ contentRight?: ReactNode;
2043
2049
  } & RefAttributes<HTMLLabelElement>>;
2044
2050
 
2045
2051
  export { SegmentItemProps }