@alfalab/core-components-typography 4.4.0 → 4.5.1

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 (118) hide show
  1. package/colors.css +24 -24
  2. package/colors.module-dd1edd45.js +6 -0
  3. package/common.module-b1646c7c.js +6 -0
  4. package/component.js +0 -10
  5. package/cssm/colors.module.css +4 -4
  6. package/cssm/component.js +0 -15
  7. package/cssm/hooks/index.js +0 -6
  8. package/cssm/hooks/use-skeleton.module.css +1 -1
  9. package/cssm/index.js +0 -19
  10. package/cssm/text/component.js +0 -3
  11. package/cssm/text/index.js +0 -10
  12. package/cssm/text/index.module.css +1 -1
  13. package/cssm/title/common.module.css +3 -0
  14. package/cssm/title/component.d.ts +7 -6
  15. package/cssm/title/component.js +4 -6
  16. package/cssm/title/index.d.ts +1 -1
  17. package/cssm/title/index.js +1 -8
  18. package/cssm/title/index.module.css +1 -1
  19. package/cssm/title/utils.d.ts +2 -0
  20. package/cssm/title/utils.js +15 -0
  21. package/cssm/title-mobile/component.d.ts +1 -1
  22. package/cssm/title-mobile/component.js +1 -8
  23. package/cssm/title-mobile/index.js +0 -12
  24. package/cssm/title-mobile/index.module.css +1 -1
  25. package/cssm/title-responsive/component.d.ts +1 -1
  26. package/cssm/title-responsive/component.js +5 -8
  27. package/cssm/title-responsive/index.js +0 -12
  28. package/cssm/title-responsive/index.module.css +1 -1
  29. package/esm/colors.css +24 -24
  30. package/esm/colors.module-2cceacab.js +4 -0
  31. package/esm/common.module-f10bcd74.js +4 -0
  32. package/esm/component.js +0 -10
  33. package/esm/hooks/index.js +0 -5
  34. package/esm/hooks/use-skeleton.css +6 -6
  35. package/esm/hooks/use-skeleton.js +1 -1
  36. package/esm/index.js +0 -14
  37. package/esm/text/component.js +2 -4
  38. package/esm/text/index.css +21 -21
  39. package/esm/text/index.js +0 -8
  40. package/esm/title/common.css +8 -5
  41. package/esm/title/component.d.ts +7 -6
  42. package/esm/title/component.js +5 -6
  43. package/esm/title/index.css +20 -20
  44. package/esm/title/index.d.ts +1 -1
  45. package/esm/title/index.js +4 -10
  46. package/esm/title/utils.d.ts +2 -0
  47. package/esm/title/utils.js +11 -0
  48. package/esm/title-mobile/component.d.ts +1 -1
  49. package/esm/title-mobile/component.js +4 -10
  50. package/esm/title-mobile/index.css +12 -12
  51. package/esm/title-mobile/index.js +0 -10
  52. package/esm/title-responsive/component.d.ts +1 -1
  53. package/esm/title-responsive/component.js +8 -10
  54. package/esm/title-responsive/index.css +32 -32
  55. package/esm/title-responsive/index.js +0 -10
  56. package/hooks/index.js +0 -5
  57. package/hooks/use-skeleton.css +6 -6
  58. package/hooks/use-skeleton.js +1 -1
  59. package/index.js +0 -14
  60. package/modern/colors.css +24 -24
  61. package/modern/colors.module-536c28e6.js +4 -0
  62. package/modern/common.module-ed1b5fb7.js +4 -0
  63. package/modern/component.js +0 -9
  64. package/modern/hooks/index.js +0 -4
  65. package/modern/hooks/use-skeleton.css +6 -6
  66. package/modern/hooks/use-skeleton.js +1 -1
  67. package/modern/index.js +0 -13
  68. package/modern/text/component.js +2 -4
  69. package/modern/text/index.css +21 -21
  70. package/modern/text/index.js +0 -7
  71. package/modern/title/common.css +8 -5
  72. package/modern/title/component.d.ts +7 -6
  73. package/modern/title/component.js +4 -5
  74. package/modern/title/index.css +20 -20
  75. package/modern/title/index.d.ts +1 -1
  76. package/modern/title/index.js +4 -10
  77. package/modern/title/utils.d.ts +2 -0
  78. package/modern/title/utils.js +11 -0
  79. package/modern/title-mobile/component.d.ts +1 -1
  80. package/modern/title-mobile/component.js +4 -10
  81. package/modern/title-mobile/index.css +12 -12
  82. package/modern/title-mobile/index.js +0 -9
  83. package/modern/title-responsive/component.d.ts +1 -1
  84. package/modern/title-responsive/component.js +8 -10
  85. package/modern/title-responsive/index.css +32 -32
  86. package/modern/title-responsive/index.js +0 -9
  87. package/package.json +3 -2
  88. package/src/title/common.module.css +4 -0
  89. package/src/title/component.tsx +8 -4
  90. package/src/title/index.tsx +7 -2
  91. package/src/title/utils.ts +11 -0
  92. package/src/title-mobile/component.tsx +9 -2
  93. package/src/title-responsive/component.tsx +15 -2
  94. package/text/component.js +2 -4
  95. package/text/index.css +21 -21
  96. package/text/index.js +0 -8
  97. package/title/common.css +8 -5
  98. package/title/component.d.ts +7 -6
  99. package/title/component.js +5 -6
  100. package/title/index.css +20 -20
  101. package/title/index.d.ts +1 -1
  102. package/title/index.js +3 -9
  103. package/title/utils.d.ts +2 -0
  104. package/title/utils.js +15 -0
  105. package/title-mobile/component.d.ts +1 -1
  106. package/title-mobile/component.js +3 -9
  107. package/title-mobile/index.css +12 -12
  108. package/title-mobile/index.js +0 -10
  109. package/title-responsive/component.d.ts +1 -1
  110. package/title-responsive/component.js +7 -9
  111. package/title-responsive/index.css +32 -32
  112. package/title-responsive/index.js +0 -10
  113. package/colors.module-120e4dd7.js +0 -6
  114. package/common.module-4389487a.js +0 -6
  115. package/esm/colors.module-3119b191.js +0 -4
  116. package/esm/common.module-ec992380.js +0 -4
  117. package/modern/colors.module-93e1488b.js +0 -4
  118. package/modern/common.module-0bb3a173.js +0 -4
@@ -1,5 +1,5 @@
1
- /* hash: d0kkb */
2
- :root {
1
+ /* hash: 1mbui */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root {
@@ -20,68 +20,68 @@
20
20
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
21
21
  'Helvetica Neue', Helvetica, sans-serif;
22
22
  } :root {
23
- } /* TODO: поменять медиа-запросы на миксины */ .typography__styrene-xlarge_1vnps {
23
+ } /* TODO: поменять медиа-запросы на миксины */ .typography__styrene-xlarge_j3lac {
24
24
  font-size: 34px;
25
25
  line-height: 40px;
26
26
  font-weight: 500;
27
27
  font-feature-settings: 'ss01';
28
28
  font-family: var(--font-family-styrene);
29
- } .typography__styrene-large_1vnps {
29
+ } .typography__styrene-large_j3lac {
30
30
  font-size: 30px;
31
31
  line-height: 36px;
32
32
  font-weight: 500;
33
33
  font-feature-settings: 'ss01';
34
34
  font-family: var(--font-family-styrene);
35
- } .typography__styrene-medium_1vnps {
35
+ } .typography__styrene-medium_j3lac {
36
36
  font-size: 26px;
37
37
  line-height: 32px;
38
38
  font-weight: 500;
39
39
  font-feature-settings: 'ss01';
40
40
  font-family: var(--font-family-styrene);
41
- } .typography__styrene-small_1vnps {
41
+ } .typography__styrene-small_j3lac {
42
42
  font-size: 20px;
43
43
  line-height: 28px;
44
44
  font-weight: 500;
45
45
  font-feature-settings: 'ss01';
46
46
  font-family: var(--font-family-styrene);
47
- } .typography__styrene-xsmall_1vnps {
47
+ } .typography__styrene-xsmall_j3lac {
48
48
  font-size: 16px;
49
49
  line-height: 20px;
50
50
  font-weight: 500;
51
51
  font-feature-settings: 'ss01';
52
52
  font-family: var(--font-family-styrene);
53
- } .typography__system-xlarge_1vnps {
53
+ } .typography__system-xlarge_j3lac {
54
54
  font-size: 34px;
55
55
  line-height: 40px;
56
56
  font-weight: 600;
57
- } .typography__system-large_1vnps {
57
+ } .typography__system-large_j3lac {
58
58
  font-size: 30px;
59
59
  line-height: 36px;
60
60
  font-weight: 600;
61
- } .typography__system-medium_1vnps {
61
+ } .typography__system-medium_j3lac {
62
62
  font-size: 26px;
63
63
  line-height: 32px;
64
64
  font-weight: 600;
65
- } .typography__system-small_1vnps {
65
+ } .typography__system-small_j3lac {
66
66
  font-size: 20px;
67
67
  line-height: 28px;
68
68
  font-weight: 600;
69
- } .typography__system-xsmall_1vnps {
69
+ } .typography__system-xsmall_j3lac {
70
70
  font-size: 16px;
71
71
  line-height: 20px;
72
72
  font-weight: 600;
73
- } .typography__margins-xlarge_1vnps {
73
+ } .typography__margins-xlarge_j3lac {
74
74
  margin: 0 0 var(--gap-xl);
75
- } .typography__margins-large_1vnps {
75
+ } .typography__margins-large_j3lac {
76
76
  margin: var(--gap-3xl) 0 var(--gap-m);
77
- } .typography__margins-medium_1vnps {
77
+ } .typography__margins-medium_j3lac {
78
78
  margin: var(--gap-3xl) 0 var(--gap-m);
79
- } .typography__margins-small_1vnps {
79
+ } .typography__margins-small_j3lac {
80
80
  margin: var(--gap-3xl) 0 var(--gap-m);
81
- } .typography__margins-xsmall_1vnps {
81
+ } .typography__margins-xsmall_j3lac {
82
82
  margin: var(--gap-3xl) 0 var(--gap-m);
83
83
  } @media screen and (min-width: 1024px) {
84
- .typography__styrene-xlarge_1vnps {
84
+ .typography__styrene-xlarge_j3lac {
85
85
  font-size: 48px;
86
86
  line-height: 64px;
87
87
  font-weight: 500;
@@ -89,7 +89,7 @@
89
89
  font-family: var(--font-family-styrene);
90
90
  }
91
91
 
92
- .typography__styrene-large_1vnps {
92
+ .typography__styrene-large_j3lac {
93
93
  font-size: 40px;
94
94
  line-height: 48px;
95
95
  font-weight: 500;
@@ -97,7 +97,7 @@
97
97
  font-family: var(--font-family-styrene);
98
98
  }
99
99
 
100
- .typography__styrene-medium_1vnps {
100
+ .typography__styrene-medium_j3lac {
101
101
  font-size: 32px;
102
102
  line-height: 40px;
103
103
  font-weight: 500;
@@ -105,7 +105,7 @@
105
105
  font-family: var(--font-family-styrene);
106
106
  }
107
107
 
108
- .typography__styrene-small_1vnps {
108
+ .typography__styrene-small_j3lac {
109
109
  font-size: 24px;
110
110
  line-height: 32px;
111
111
  font-weight: 500;
@@ -113,7 +113,7 @@
113
113
  font-family: var(--font-family-styrene);
114
114
  }
115
115
 
116
- .typography__styrene-xsmall_1vnps {
116
+ .typography__styrene-xsmall_j3lac {
117
117
  font-size: 20px;
118
118
  line-height: 24px;
119
119
  font-weight: 500;
@@ -121,53 +121,53 @@
121
121
  font-family: var(--font-family-styrene);
122
122
  }
123
123
 
124
- .typography__system-xlarge_1vnps {
124
+ .typography__system-xlarge_j3lac {
125
125
  font-size: 48px;
126
126
  line-height: 52px;
127
127
  font-weight: 700;
128
128
  }
129
129
 
130
- .typography__system-large_1vnps {
130
+ .typography__system-large_j3lac {
131
131
  font-size: 40px;
132
132
  line-height: 48px;
133
133
  font-weight: 700;
134
134
  }
135
135
 
136
- .typography__system-medium_1vnps {
136
+ .typography__system-medium_j3lac {
137
137
  font-size: 30px;
138
138
  line-height: 36px;
139
139
  font-weight: 700;
140
140
  }
141
141
 
142
- .typography__system-small_1vnps {
142
+ .typography__system-small_j3lac {
143
143
  font-size: 22px;
144
144
  line-height: 26px;
145
145
  font-weight: 700;
146
146
  }
147
147
 
148
- .typography__system-xsmall_1vnps {
148
+ .typography__system-xsmall_j3lac {
149
149
  font-size: 18px;
150
150
  line-height: 22px;
151
151
  font-weight: 700;
152
152
  }
153
153
 
154
- .typography__margins-xlarge_1vnps {
154
+ .typography__margins-xlarge_j3lac {
155
155
  margin: 0 0 var(--gap-xl);
156
156
  }
157
157
 
158
- .typography__margins-large_1vnps {
158
+ .typography__margins-large_j3lac {
159
159
  margin: var(--gap-4xl) 0 var(--gap-xl);
160
160
  }
161
161
 
162
- .typography__margins-medium_1vnps {
162
+ .typography__margins-medium_j3lac {
163
163
  margin: var(--gap-4xl) 0 var(--gap-xl);
164
164
  }
165
165
 
166
- .typography__margins-small_1vnps {
166
+ .typography__margins-small_j3lac {
167
167
  margin: var(--gap-3xl) 0 var(--gap-m);
168
168
  }
169
169
 
170
- .typography__margins-xsmall_1vnps {
170
+ .typography__margins-xsmall_j3lac {
171
171
  margin: var(--gap-3xl) 0 var(--gap-m);
172
172
  }
173
173
  }
@@ -1,10 +1 @@
1
1
  export { TitleResponsive } from './component.js';
2
- import 'react';
3
- import '../title/component.js';
4
- import 'react-merge-refs';
5
- import 'classnames';
6
- import '../hooks/use-skeleton.js';
7
- import '@alfalab/core-components-skeleton/modern';
8
- import '@alfalab/hooks';
9
- import '../colors.module-93e1488b.js';
10
- import '../common.module-0bb3a173.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-typography",
3
- "version": "4.4.0",
3
+ "version": "4.5.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,7 +14,8 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-skeleton": "^4.2.0",
17
+ "@alfalab/core-components-skeleton": "^5.0.0",
18
+ "@alfalab/core-components-mq": "^4.2.0",
18
19
  "@alfalab/hooks": "^1.13.0",
19
20
  "classnames": "^2.3.1",
20
21
  "react-merge-refs": "^1.1.0",
@@ -6,6 +6,10 @@
6
6
  font-weight: bold;
7
7
  }
8
8
 
9
+ &.semibold {
10
+ font-weight: 600;
11
+ }
12
+
9
13
  &.medium {
10
14
  font-weight: 500;
11
15
  }
@@ -6,6 +6,8 @@ import { Color } from '../colors';
6
6
  import { useSkeleton } from '../hooks';
7
7
  import { TextSkeletonProps } from '../types';
8
8
 
9
+ import { getDefaultWeight } from './utils';
10
+
9
11
  import colors from '../colors.module.css';
10
12
 
11
13
  type NativeProps = HTMLAttributes<HTMLHeadingElement>;
@@ -29,7 +31,7 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
29
31
  /**
30
32
  * Толщина шрифта
31
33
  */
32
- weight?: 'regular' | 'medium' | 'bold';
34
+ weight?: 'regular' | 'medium' | 'bold' | 'semibold';
33
35
 
34
36
  /**
35
37
  * Шрифт текста
@@ -72,21 +74,23 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
72
74
  skeletonProps?: TextSkeletonProps;
73
75
  };
74
76
 
75
- type Styles = {
77
+ type PrivateProps = {
76
78
  styles: {
77
79
  [key: string]: string;
78
80
  };
81
+ platform: 'mobile' | 'desktop';
79
82
  };
80
83
 
81
84
  type TitleElementType = HTMLHeadingElement | HTMLDivElement;
82
85
 
83
- export const Title = forwardRef<TitleElementType, TitleProps & Styles>(
86
+ export const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>(
84
87
  (
85
88
  {
86
89
  tag: Component = 'div',
87
90
  view = 'medium',
88
91
  font = 'styrene',
89
- weight = font === 'styrene' ? 'medium' : 'bold',
92
+ platform,
93
+ weight = getDefaultWeight(font, platform),
90
94
  defaultMargins = false,
91
95
  color,
92
96
  className,
@@ -1,12 +1,17 @@
1
1
  import React, { forwardRef } from 'react';
2
2
 
3
- import { Title as TitleBase, TitleProps } from './component';
3
+ import { TitleBase, TitleProps } from './component';
4
4
 
5
5
  import commonStyles from './common.module.css';
6
6
  import styles from './index.module.css';
7
7
 
8
8
  const Title = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>((props, ref) => (
9
- <TitleBase {...props} styles={Object.assign(commonStyles, styles)} ref={ref} />
9
+ <TitleBase
10
+ {...props}
11
+ styles={Object.assign(commonStyles, styles)}
12
+ ref={ref}
13
+ platform='desktop'
14
+ />
10
15
  ));
11
16
 
12
17
  export { Title };
@@ -0,0 +1,11 @@
1
+ export function getDefaultWeight(font: 'styrene' | 'system', platform: 'mobile' | 'desktop') {
2
+ if (font === 'styrene') {
3
+ return 'medium';
4
+ }
5
+
6
+ if (platform === 'desktop') {
7
+ return 'bold';
8
+ }
9
+
10
+ return 'semibold';
11
+ }
@@ -1,6 +1,6 @@
1
1
  import React, { forwardRef } from 'react';
2
2
 
3
- import { Title, TitleProps } from '../title/component';
3
+ import { TitleBase, TitleProps } from '../title/component';
4
4
 
5
5
  import commonStyles from '../title/common.module.css';
6
6
  import styles from './index.module.css';
@@ -8,5 +8,12 @@ import styles from './index.module.css';
8
8
  export type TitleMobileProps = Omit<TitleProps, 'defaultMargins'>;
9
9
 
10
10
  export const TitleMobile = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>(
11
- (props, ref) => <Title {...props} styles={Object.assign(commonStyles, styles)} ref={ref} />,
11
+ (props, ref) => (
12
+ <TitleBase
13
+ {...props}
14
+ styles={Object.assign(commonStyles, styles)}
15
+ ref={ref}
16
+ platform='mobile'
17
+ />
18
+ ),
12
19
  );
@@ -1,10 +1,23 @@
1
1
  import React, { forwardRef } from 'react';
2
2
 
3
- import { Title, TitleProps } from '../title/component';
3
+ import { useMatchMedia } from '@alfalab/core-components-mq';
4
+
5
+ import { TitleBase, TitleProps } from '../title/component';
4
6
 
5
7
  import commonStyles from '../title/common.module.css';
6
8
  import styles from './index.module.css';
7
9
 
8
10
  export const TitleResponsive = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>(
9
- (props, ref) => <Title {...props} styles={Object.assign(commonStyles, styles)} ref={ref} />,
11
+ (props, ref) => {
12
+ const [isDesktop] = useMatchMedia('(min-width: 1024px)');
13
+
14
+ return (
15
+ <TitleBase
16
+ {...props}
17
+ styles={Object.assign(commonStyles, styles)}
18
+ ref={ref}
19
+ platform={isDesktop ? 'desktop' : 'mobile'}
20
+ />
21
+ );
22
+ },
10
23
  );
package/text/component.js CHANGED
@@ -7,9 +7,7 @@ var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var hooks_useSkeleton = require('../hooks/use-skeleton.js');
10
- var colors_module = require('../colors.module-120e4dd7.js');
11
- require('@alfalab/core-components-skeleton');
12
- require('@alfalab/hooks');
10
+ var colors_module = require('../colors.module-dd1edd45.js');
13
11
 
14
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
13
 
@@ -17,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
17
 
20
- var styles = {"paragraph":"typography__paragraph_10zie","paragraphWithMargins":"typography__paragraphWithMargins_10zie","primary-large":"typography__primary-large_10zie","primary-medium":"typography__primary-medium_10zie","primary-small":"typography__primary-small_10zie","secondary-large":"typography__secondary-large_10zie","secondary-medium":"typography__secondary-medium_10zie","secondary-small":"typography__secondary-small_10zie","component":"typography__component_10zie","component-primary":"typography__component-primary_10zie","component-secondary":"typography__component-secondary_10zie","caps":"typography__caps_10zie","bold":"typography__bold_10zie","medium":"typography__medium_10zie","regular":"typography__regular_10zie","monospace":"typography__monospace_10zie","rowLimit1":"typography__rowLimit1_10zie","rowLimit2":"typography__rowLimit2_10zie","rowLimit3":"typography__rowLimit3_10zie"};
18
+ var styles = {"paragraph":"typography__paragraph_mn433","paragraphWithMargins":"typography__paragraphWithMargins_mn433","primary-large":"typography__primary-large_mn433","primary-medium":"typography__primary-medium_mn433","primary-small":"typography__primary-small_mn433","secondary-large":"typography__secondary-large_mn433","secondary-medium":"typography__secondary-medium_mn433","secondary-small":"typography__secondary-small_mn433","component":"typography__component_mn433","component-primary":"typography__component-primary_mn433","component-secondary":"typography__component-secondary_mn433","caps":"typography__caps_mn433","bold":"typography__bold_mn433","medium":"typography__medium_mn433","regular":"typography__regular_mn433","monospace":"typography__monospace_mn433","rowLimit1":"typography__rowLimit1_mn433","rowLimit2":"typography__rowLimit2_mn433","rowLimit3":"typography__rowLimit3_mn433"};
21
19
  require('./index.css')
22
20
 
23
21
  var logWarning = function (view) {
package/text/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 19d1r */
2
- :root {
1
+ /* hash: yruvv */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root {
@@ -17,74 +17,74 @@
17
17
  } :root {
18
18
  } :root {
19
19
  --text-paragraph-margin-bottom: 0 0 var(--gap-s);
20
- } .typography__paragraph_10zie {
20
+ } .typography__paragraph_mn433 {
21
21
  margin: 0;
22
22
  padding: 0;
23
- } .typography__paragraphWithMargins_10zie {
23
+ } .typography__paragraphWithMargins_mn433 {
24
24
  padding: 0;
25
25
  margin: var(--text-paragraph-margin-bottom);
26
- } .typography__primary-large_10zie {
26
+ } .typography__primary-large_mn433 {
27
27
  font-size: 18px;
28
28
  line-height: 24px;
29
29
  font-weight: 400;
30
- } .typography__primary-medium_10zie {
30
+ } .typography__primary-medium_mn433 {
31
31
  font-size: 16px;
32
32
  line-height: 24px;
33
33
  font-weight: 400;
34
- } .typography__primary-small_10zie {
34
+ } .typography__primary-small_mn433 {
35
35
  font-size: 14px;
36
36
  line-height: 20px;
37
37
  font-weight: 400;
38
- } .typography__secondary-large_10zie {
38
+ } .typography__secondary-large_mn433 {
39
39
  font-size: 13px;
40
40
  line-height: 16px;
41
41
  font-weight: 400;
42
- } .typography__secondary-medium_10zie {
42
+ } .typography__secondary-medium_mn433 {
43
43
  font-size: 12px;
44
44
  line-height: 16px;
45
45
  font-weight: 400;
46
- } .typography__secondary-small_10zie {
46
+ } .typography__secondary-small_mn433 {
47
47
  font-size: 11px;
48
48
  line-height: 16px;
49
49
  font-weight: 400;
50
- } .typography__component_10zie {
50
+ } .typography__component_mn433 {
51
51
  font-size: 16px;
52
52
  line-height: 20px;
53
53
  font-weight: 400;
54
- } .typography__component-primary_10zie {
54
+ } .typography__component-primary_mn433 {
55
55
  font-size: 16px;
56
56
  line-height: 20px;
57
57
  font-weight: 400;
58
- } .typography__component-secondary_10zie {
58
+ } .typography__component-secondary_mn433 {
59
59
  font-size: 14px;
60
60
  line-height: 18px;
61
61
  font-weight: 400;
62
- } .typography__caps_10zie {
62
+ } .typography__caps_mn433 {
63
63
  font-size: 12px;
64
64
  line-height: 16px;
65
65
  font-weight: 500;
66
66
  letter-spacing: 1.25px;
67
67
  text-transform: uppercase;
68
- } .typography__bold_10zie {
68
+ } .typography__bold_mn433 {
69
69
  font-weight: bold;
70
- } .typography__medium_10zie {
70
+ } .typography__medium_mn433 {
71
71
  font-weight: 500;
72
- } .typography__regular_10zie {
72
+ } .typography__regular_mn433 {
73
73
  font-weight: normal;
74
- } .typography__monospace_10zie {
74
+ } .typography__monospace_mn433 {
75
75
  font-variant-numeric: tabular-nums;
76
- } .typography__rowLimit1_10zie {
76
+ } .typography__rowLimit1_mn433 {
77
77
  -webkit-line-clamp: 1;
78
78
  display: -webkit-box;
79
79
  -webkit-box-orient: vertical;
80
80
  overflow: hidden;
81
81
  word-break: break-all;
82
- } .typography__rowLimit2_10zie {
82
+ } .typography__rowLimit2_mn433 {
83
83
  -webkit-line-clamp: 2;
84
84
  display: -webkit-box;
85
85
  -webkit-box-orient: vertical;
86
86
  overflow: hidden;
87
- } .typography__rowLimit3_10zie {
87
+ } .typography__rowLimit3_mn433 {
88
88
  -webkit-line-clamp: 3;
89
89
  display: -webkit-box;
90
90
  -webkit-box-orient: vertical;
package/text/index.js CHANGED
@@ -3,14 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var text_component = require('./component.js');
6
- require('tslib');
7
- require('react');
8
- require('react-merge-refs');
9
- require('classnames');
10
- require('../hooks/use-skeleton.js');
11
- require('@alfalab/core-components-skeleton');
12
- require('@alfalab/hooks');
13
- require('../colors.module-120e4dd7.js');
14
6
 
15
7
 
16
8
 
package/title/common.css CHANGED
@@ -1,14 +1,17 @@
1
- /* hash: 1cdpn */
2
- .typography__component_vlv7e {
1
+ /* hash: 1mywj */
2
+ .typography__component_pc80t {
3
3
  margin: 0;
4
4
  padding: 0
5
5
  }
6
- .typography__component_vlv7e.typography__bold_vlv7e {
6
+ .typography__component_pc80t.typography__bold_pc80t {
7
7
  font-weight: bold;
8
8
  }
9
- .typography__component_vlv7e.typography__medium_vlv7e {
9
+ .typography__component_pc80t.typography__semibold_pc80t {
10
+ font-weight: 600;
11
+ }
12
+ .typography__component_pc80t.typography__medium_pc80t {
10
13
  font-weight: 500;
11
14
  }
12
- .typography__component_vlv7e.typography__regular_vlv7e {
15
+ .typography__component_pc80t.typography__regular_pc80t {
13
16
  font-weight: normal;
14
17
  }
@@ -20,7 +20,7 @@ type TitleProps = Omit<NativeProps, 'color'> & {
20
20
  /**
21
21
  * Толщина шрифта
22
22
  */
23
- weight?: 'regular' | 'medium' | 'bold';
23
+ weight?: 'regular' | 'medium' | 'bold' | 'semibold';
24
24
  /**
25
25
  * Шрифт текста
26
26
  */
@@ -54,13 +54,14 @@ type TitleProps = Omit<NativeProps, 'color'> & {
54
54
  */
55
55
  skeletonProps?: TextSkeletonProps;
56
56
  };
57
- type Styles = {
57
+ type PrivateProps = {
58
58
  styles: {
59
59
  [key: string]: string;
60
60
  };
61
+ platform: 'mobile' | 'desktop';
61
62
  };
62
63
  type TitleElementType = HTMLHeadingElement | HTMLDivElement;
63
- declare const Title: React.ForwardRefExoticComponent<Omit<NativeProps, "color"> & {
64
+ declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps, "color"> & {
64
65
  /**
65
66
  * HTML тег
66
67
  */
@@ -76,7 +77,7 @@ declare const Title: React.ForwardRefExoticComponent<Omit<NativeProps, "color">
76
77
  /**
77
78
  * Толщина шрифта
78
79
  */
79
- weight?: "bold" | "regular" | "medium" | undefined;
80
+ weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
80
81
  /**
81
82
  * Шрифт текста
82
83
  */
@@ -109,5 +110,5 @@ declare const Title: React.ForwardRefExoticComponent<Omit<NativeProps, "color">
109
110
  * Пропы для скелетона
110
111
  */
111
112
  skeletonProps?: TextSkeletonProps | undefined;
112
- } & Styles & React.RefAttributes<TitleElementType>>;
113
- export { TitleProps, Title };
113
+ } & PrivateProps & React.RefAttributes<TitleElementType>>;
114
+ export { TitleProps, TitleBase };
@@ -7,9 +7,8 @@ var React = require('react');
7
7
  var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var hooks_useSkeleton = require('../hooks/use-skeleton.js');
10
- var colors_module = require('../colors.module-120e4dd7.js');
11
- require('@alfalab/core-components-skeleton');
12
- require('@alfalab/hooks');
10
+ var title_utils = require('./utils.js');
11
+ var colors_module = require('../colors.module-dd1edd45.js');
13
12
 
14
13
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
14
 
@@ -17,9 +16,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
16
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
18
 
20
- var Title = React.forwardRef(function (_a, ref) {
19
+ var TitleBase = React.forwardRef(function (_a, ref) {
21
20
  var _b;
22
- var _c = _a.tag, Component = _c === void 0 ? 'div' : _c, _d = _a.view, view = _d === void 0 ? 'medium' : _d, _e = _a.font, font = _e === void 0 ? 'styrene' : _e, _f = _a.weight, weight = _f === void 0 ? font === 'styrene' ? 'medium' : 'bold' : _f, _g = _a.defaultMargins, defaultMargins = _g === void 0 ? false : _g, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, rowLimit = _a.rowLimit, styles = _a.styles, skeletonProps = _a.skeletonProps, showSkeleton = _a.showSkeleton, restProps = tslib.__rest(_a, ["tag", "view", "font", "weight", "defaultMargins", "color", "className", "dataTestId", "children", "rowLimit", "styles", "skeletonProps", "showSkeleton"]);
21
+ var _c = _a.tag, Component = _c === void 0 ? 'div' : _c, _d = _a.view, view = _d === void 0 ? 'medium' : _d, _e = _a.font, font = _e === void 0 ? 'styrene' : _e, platform = _a.platform, _f = _a.weight, weight = _f === void 0 ? title_utils.getDefaultWeight(font, platform) : _f, _g = _a.defaultMargins, defaultMargins = _g === void 0 ? false : _g, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, rowLimit = _a.rowLimit, styles = _a.styles, skeletonProps = _a.skeletonProps, showSkeleton = _a.showSkeleton, restProps = tslib.__rest(_a, ["tag", "view", "font", "platform", "weight", "defaultMargins", "color", "className", "dataTestId", "children", "rowLimit", "styles", "skeletonProps", "showSkeleton"]);
23
22
  var _h = hooks_useSkeleton.useSkeleton(showSkeleton, skeletonProps), renderSkeleton = _h.renderSkeleton, textRef = _h.textRef;
24
23
  var skeleton = renderSkeleton({
25
24
  wrapperClassName: cn__default.default(defaultMargins && styles["margins-".concat(view)]),
@@ -31,4 +30,4 @@ var Title = React.forwardRef(function (_a, ref) {
31
30
  return (React__default.default.createElement(Component, tslib.__assign({ className: cn__default.default(styles.component, className, styles["".concat(font, "-").concat(view)], defaultMargins && styles["margins-".concat(view)], styles[weight], color && colors_module.colors[color], (_b = {}, _b[styles["rowLimit".concat(rowLimit)]] = rowLimit, _b)), "data-test-id": dataTestId, ref: mergeRefs__default.default([ref, textRef]) }, restProps), children));
32
31
  });
33
32
 
34
- exports.Title = Title;
33
+ exports.TitleBase = TitleBase;