@itcase/ui 1.8.107 → 1.8.109

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 (227) hide show
  1. package/dist/{Avatar_cjs_bOSuIjlv.js → Avatar_cjs_joB9qjwk.js} +36 -60
  2. package/dist/{Avatar_es_CEiiRkAd.js → Avatar_es_C3HGSiHU.js} +36 -60
  3. package/dist/{Button_cjs_eGfgY2Dz.js → Button_cjs_mau_55Fl.js} +6 -6
  4. package/dist/{Button_es_CEXL2diU.js → Button_es_D_IlkeBp.js} +6 -6
  5. package/dist/{ChipsGroup_cjs_DKLEgUi2.js → ChipsGroup_cjs_D454M1-p.js} +2 -2
  6. package/dist/{ChipsGroup_es_vMh6YMRm.js → ChipsGroup_es_BKG5mK5N.js} +2 -2
  7. package/dist/{DatePicker_cjs_T63y9kcH.js → DatePicker_cjs_Bm8nwWKa.js} +4 -4
  8. package/dist/{DatePicker_es_B87jj8h6.js → DatePicker_es_DAV92A4A.js} +4 -4
  9. package/dist/{DropdownItem_cjs_BGp4XAme.js → DropdownItem_cjs_D2hHKA5E.js} +2 -2
  10. package/dist/{DropdownItem_es_BwdenrJx.js → DropdownItem_es_D9JBMV70.js} +2 -2
  11. package/dist/{Group_cjs_CHcrOFx0.js → Group_cjs_BxBk5T7A.js} +2 -2
  12. package/dist/{Group_es_DHJcG2MA.js → Group_es_DIfmrMSM.js} +2 -2
  13. package/dist/{Icon_cjs_LSfBwmrG.js → Icon_cjs_ZerVip3X.js} +32 -47
  14. package/dist/{Icon_es_BYO1LdXJ.js → Icon_es_C76te22j.js} +32 -47
  15. package/dist/{Label_cjs_Df_mrKBf.js → Label_cjs_CaTh_laL.js} +2 -2
  16. package/dist/{Label_es_Dl5zb0RD.js → Label_es_CoIII7Ty.js} +2 -2
  17. package/dist/{Loader_cjs_Db9diKuF.js → Loader_cjs_c6yF7akz.js} +1 -1
  18. package/dist/{Loader_es_AhHU-s7_.js → Loader_es_C8ETXkiZ.js} +1 -1
  19. package/dist/{Text_cjs_CeJHeRfI.js → Text_cjs_DpRclhwc.js} +2 -5
  20. package/dist/{Text_es_BXh9Y3hR.js → Text_es_CtCwsa3V.js} +2 -5
  21. package/dist/cjs/components/Accordion.js +4 -3
  22. package/dist/cjs/components/Avatar.js +5 -4
  23. package/dist/cjs/components/AvatarStack.js +6 -5
  24. package/dist/cjs/components/Badge.js +4 -3
  25. package/dist/cjs/components/Breadcrumbs.js +4 -3
  26. package/dist/cjs/components/Button.js +6 -5
  27. package/dist/cjs/components/Cell.js +5 -4
  28. package/dist/cjs/components/Checkbox.js +3 -2
  29. package/dist/cjs/components/Checkmark.js +2 -1
  30. package/dist/cjs/components/Chips.js +5 -4
  31. package/dist/cjs/components/Choice.js +5 -4
  32. package/dist/cjs/components/Code.js +2 -0
  33. package/dist/cjs/components/CookiesWarning.js +6 -5
  34. package/dist/cjs/components/Dadata.js +2 -0
  35. package/dist/cjs/components/DatePeriod.js +8 -7
  36. package/dist/cjs/components/DatePicker.js +8 -7
  37. package/dist/cjs/components/Divider.js +2 -1
  38. package/dist/cjs/components/Dot.js +2 -1
  39. package/dist/cjs/components/Drawer.js +3 -2
  40. package/dist/cjs/components/Dropdown.js +5 -4
  41. package/dist/cjs/components/Flex.js +2 -1
  42. package/dist/cjs/components/Grid.js +2 -1
  43. package/dist/cjs/components/Group.js +3 -2
  44. package/dist/cjs/components/HTMLContent.js +2 -1
  45. package/dist/cjs/components/HeroTitle.js +4 -3
  46. package/dist/cjs/components/Icon.js +4 -3
  47. package/dist/cjs/components/Image.js +2 -1
  48. package/dist/cjs/components/Input.js +2 -0
  49. package/dist/cjs/components/InputPassword.js +4 -3
  50. package/dist/cjs/components/Label.js +5 -4
  51. package/dist/cjs/components/Link.js +2 -1
  52. package/dist/cjs/components/List.js +2 -1
  53. package/dist/cjs/components/Loader.js +4 -3
  54. package/dist/cjs/components/Logo.js +2 -1
  55. package/dist/cjs/components/MenuItem.js +4 -3
  56. package/dist/cjs/components/Modal.js +5 -4
  57. package/dist/cjs/components/ModalSheetBottom.js +4 -3
  58. package/dist/cjs/components/Notification.js +4 -3
  59. package/dist/cjs/components/Overlay.js +2 -1
  60. package/dist/cjs/components/Pagination.js +5 -4
  61. package/dist/cjs/components/Radio.js +8 -4
  62. package/dist/cjs/components/RangeSlider.js +2 -1
  63. package/dist/cjs/components/Response.js +7 -6
  64. package/dist/cjs/components/SVGContent.js +2 -1
  65. package/dist/cjs/components/ScrollOnDrag.js +2 -1
  66. package/dist/cjs/components/ScrollToView.js +2 -1
  67. package/dist/cjs/components/Search.js +4 -3
  68. package/dist/cjs/components/Segmented.js +3 -2
  69. package/dist/cjs/components/Select.js +5 -4
  70. package/dist/cjs/components/Swiper.js +4 -3
  71. package/dist/cjs/components/Switch.js +3 -2
  72. package/dist/cjs/components/Tab.js +14 -16
  73. package/dist/cjs/components/Text.js +3 -2
  74. package/dist/cjs/components/Textarea.js +2 -0
  75. package/dist/cjs/components/Tile.js +4 -3
  76. package/dist/cjs/components/Title.js +4 -3
  77. package/dist/cjs/components/Tooltip.js +4 -3
  78. package/dist/cjs/components/Video.js +1 -0
  79. package/dist/cjs/components/Warning.js +4 -3
  80. package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +120 -0
  81. package/dist/cjs/hooks/useActiveClasses/useActiveClasses.interface.js +65 -0
  82. package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +64 -0
  83. package/dist/cjs/hooks/useActiveClasses.js +9 -0
  84. package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +11 -1
  85. package/dist/cjs/hooks/useDevicePropsGenerator.js +2 -0
  86. package/dist/cjs/hooks/useStyles/useStyles.js +5 -3
  87. package/dist/cjs/hooks/useStyles.js +1 -0
  88. package/dist/cjs/hooks.js +9 -0
  89. package/dist/components/Accordion.js +4 -3
  90. package/dist/components/Avatar.js +5 -4
  91. package/dist/components/AvatarStack.js +6 -5
  92. package/dist/components/Badge.js +4 -3
  93. package/dist/components/Breadcrumbs.js +4 -3
  94. package/dist/components/Button.js +6 -5
  95. package/dist/components/Cell.js +5 -4
  96. package/dist/components/Checkbox.js +3 -2
  97. package/dist/components/Checkmark.js +2 -1
  98. package/dist/components/Chips.js +5 -4
  99. package/dist/components/Choice.js +5 -4
  100. package/dist/components/Code.js +2 -0
  101. package/dist/components/CookiesWarning.js +6 -5
  102. package/dist/components/Dadata.js +2 -0
  103. package/dist/components/DatePeriod.js +8 -7
  104. package/dist/components/DatePicker.js +8 -7
  105. package/dist/components/Divider.js +2 -1
  106. package/dist/components/Dot.js +2 -1
  107. package/dist/components/Drawer.js +3 -2
  108. package/dist/components/Dropdown.js +5 -4
  109. package/dist/components/Flex.js +2 -1
  110. package/dist/components/Grid.js +2 -1
  111. package/dist/components/Group.js +3 -2
  112. package/dist/components/HTMLContent.js +2 -1
  113. package/dist/components/HeroTitle.js +4 -3
  114. package/dist/components/Icon.js +4 -3
  115. package/dist/components/Image.js +2 -1
  116. package/dist/components/Input.js +2 -0
  117. package/dist/components/InputPassword.js +4 -3
  118. package/dist/components/Label.js +5 -4
  119. package/dist/components/Link.js +2 -1
  120. package/dist/components/List.js +2 -1
  121. package/dist/components/Loader.js +4 -3
  122. package/dist/components/Logo.js +2 -1
  123. package/dist/components/MenuItem.js +4 -3
  124. package/dist/components/Modal.js +5 -4
  125. package/dist/components/ModalSheetBottom.js +4 -3
  126. package/dist/components/Notification.js +4 -3
  127. package/dist/components/Overlay.js +2 -1
  128. package/dist/components/Pagination.js +5 -4
  129. package/dist/components/Radio.js +8 -4
  130. package/dist/components/RangeSlider.js +2 -1
  131. package/dist/components/Response.js +7 -6
  132. package/dist/components/SVGContent.js +2 -1
  133. package/dist/components/ScrollOnDrag.js +2 -1
  134. package/dist/components/ScrollToView.js +2 -1
  135. package/dist/components/Search.js +4 -3
  136. package/dist/components/Segmented.js +3 -2
  137. package/dist/components/Select.js +5 -4
  138. package/dist/components/Swiper.js +4 -3
  139. package/dist/components/Switch.js +3 -2
  140. package/dist/components/Tab.js +14 -16
  141. package/dist/components/Text.js +3 -2
  142. package/dist/components/Textarea.js +2 -0
  143. package/dist/components/Tile.js +4 -3
  144. package/dist/components/Title.js +4 -3
  145. package/dist/components/Tooltip.js +4 -3
  146. package/dist/components/Video.js +1 -0
  147. package/dist/components/Warning.js +4 -3
  148. package/dist/css/components/Icon/Icon.css +12 -19
  149. package/dist/css/components/Radio/Radio.css +0 -1
  150. package/dist/css/styles/align/align.css +1 -1
  151. package/dist/css/styles/align/align_horizontal-reverse.css +1 -1
  152. package/dist/css/styles/align/align_horizontal.css +1 -1
  153. package/dist/css/styles/align/align_vertical-reverse.css +1 -1
  154. package/dist/css/styles/align/align_vertical.css +1 -1
  155. package/dist/css/styles/border-color/border-color.css +1 -1
  156. package/dist/css/styles/border-color/border-color_active.css +1 -1
  157. package/dist/css/styles/border-color/border-color_active_hover.css +1 -1
  158. package/dist/css/styles/border-color/border-color_focus.css +1 -1
  159. package/dist/css/styles/border-color/border-color_hover.css +1 -1
  160. package/dist/css/styles/bundle.css +15 -15
  161. package/dist/css/styles/fill/fill.css +1 -1
  162. package/dist/css/styles/fill/fill_active.css +1 -1
  163. package/dist/css/styles/fill/fill_active_hover.css +1 -1
  164. package/dist/css/styles/fill/fill_gradient.css +1 -1
  165. package/dist/css/styles/fill/fill_hover.css +1 -1
  166. package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +116 -0
  167. package/dist/hooks/useActiveClasses/useActiveClasses.interface.js +63 -0
  168. package/dist/hooks/useActiveClasses/useActiveClasses.js +62 -0
  169. package/dist/hooks/useActiveClasses.js +3 -0
  170. package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +11 -1
  171. package/dist/hooks/useDevicePropsGenerator.js +2 -0
  172. package/dist/hooks/useStyles/useStyles.js +5 -3
  173. package/dist/hooks/useStyles.js +1 -0
  174. package/dist/hooks.js +7 -0
  175. package/dist/stories/useActiveClasses.mdx +134 -0
  176. package/dist/types/components/Avatar/Avatar.appearance.d.ts +1878 -2
  177. package/dist/types/components/Avatar/Avatar.interface.d.ts +48 -37
  178. package/dist/types/components/Avatar/appearance/avatarDefault.d.ts +2 -19
  179. package/dist/types/components/Avatar/appearance/avatarShape.d.ts +2 -24
  180. package/dist/types/components/Avatar/appearance/avatarSize.d.ts +2 -83
  181. package/dist/types/components/Avatar/appearance/avatarStyle.d.ts +2 -15
  182. package/dist/types/components/Badge/Badge.appearance.d.ts +986 -228
  183. package/dist/types/components/Badge/Badge.interface.d.ts +6 -6
  184. package/dist/types/components/Badge/appearance/badgeAccent.d.ts +2 -37
  185. package/dist/types/components/Badge/appearance/badgeDanger.d.ts +2 -16
  186. package/dist/types/components/Badge/appearance/badgeDisabled.d.ts +2 -14
  187. package/dist/types/components/Badge/appearance/badgeError.d.ts +2 -16
  188. package/dist/types/components/Badge/appearance/badgeInfo.d.ts +2 -15
  189. package/dist/types/components/Badge/appearance/badgePrimary.d.ts +2 -16
  190. package/dist/types/components/Badge/appearance/badgeSecondary.d.ts +2 -16
  191. package/dist/types/components/Badge/appearance/badgeShape.d.ts +2 -24
  192. package/dist/types/components/Badge/appearance/badgeSize.d.ts +2 -31
  193. package/dist/types/components/Badge/appearance/badgeStyle.d.ts +2 -13
  194. package/dist/types/components/Badge/appearance/badgeSuccess.d.ts +2 -16
  195. package/dist/types/components/Badge/appearance/badgeSurface.d.ts +2 -24
  196. package/dist/types/components/Badge/appearance/badgeWarning.d.ts +2 -16
  197. package/dist/types/components/Icon/Icon.d.ts +30 -6
  198. package/dist/types/components/Icon/Icon.interface.d.ts +2 -0
  199. package/dist/types/components/Radio/Radio.appearance.d.ts +3 -0
  200. package/dist/types/components/Radio/appearance/radioDefault.d.ts +3 -0
  201. package/dist/types/components/Tab/appearance/tabSurface.d.ts +1 -0
  202. package/dist/types/components/Text/Text.appearance.d.ts +698 -2
  203. package/dist/types/components/Text/Text.interface.d.ts +32 -47
  204. package/dist/types/components/Text/appearance/textSize.d.ts +2 -23
  205. package/dist/types/components/Title/Title.appearance.d.ts +2225 -2
  206. package/dist/types/components/Title/Title.interface.d.ts +56 -38
  207. package/dist/types/components/Title/appearance/titleAccent.d.ts +2 -19
  208. package/dist/types/components/Title/appearance/titleDanger.d.ts +2 -6
  209. package/dist/types/components/Title/appearance/titleDisabled.d.ts +2 -19
  210. package/dist/types/components/Title/appearance/titleError.d.ts +2 -10
  211. package/dist/types/components/Title/appearance/titleInfo.d.ts +2 -20
  212. package/dist/types/components/Title/appearance/titlePrimary.d.ts +2 -7
  213. package/dist/types/components/Title/appearance/titleRequire.d.ts +2 -19
  214. package/dist/types/components/Title/appearance/titleSecondary.d.ts +2 -7
  215. package/dist/types/components/Title/appearance/titleSize.d.ts +2 -44
  216. package/dist/types/components/Title/appearance/titleStyle.d.ts +2 -15
  217. package/dist/types/components/Title/appearance/titleSuccess.d.ts +2 -10
  218. package/dist/types/components/Title/appearance/titleSurface.d.ts +2 -24
  219. package/dist/types/components/Title/appearance/titleWarning.d.ts +2 -10
  220. package/dist/types/hooks/index.helpers.d.ts +3 -0
  221. package/dist/types/hooks/useActiveClasses/index.d.ts +2 -0
  222. package/dist/types/hooks/useActiveClasses/useActiveClasses.d.ts +3 -0
  223. package/dist/types/hooks/useActiveClasses/useActiveClasses.helpers.d.ts +5 -0
  224. package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts +26 -0
  225. package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts +1 -1
  226. package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts +3 -0
  227. package/package.json +6 -6
@@ -0,0 +1,120 @@
1
+ 'use strict';
2
+
3
+ var CLASS_RULES = {
4
+ fill: [
5
+ {
6
+ key: 'fillClass',
7
+ stateFn: function (_a) {
8
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
9
+ return !isActive && !isDisabled;
10
+ },
11
+ },
12
+ {
13
+ key: 'fillHoverClass',
14
+ stateFn: function (_a) {
15
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
16
+ return !isActive && !isDisabled;
17
+ },
18
+ },
19
+ {
20
+ key: 'fillActiveClass',
21
+ stateFn: function (_a) {
22
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
23
+ return Boolean(isActive) && !isDisabled;
24
+ },
25
+ },
26
+ {
27
+ key: 'fillActiveHoverClass',
28
+ stateFn: function (_a) {
29
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
30
+ return Boolean(isActive) && !isDisabled;
31
+ },
32
+ },
33
+ {
34
+ key: 'fillDisabledClass',
35
+ stateFn: function (_a) {
36
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
37
+ return !isActive && Boolean(isDisabled);
38
+ },
39
+ },
40
+ ],
41
+ borderColor: [
42
+ {
43
+ key: 'borderColorClass',
44
+ stateFn: function (_a) {
45
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
46
+ return !isActive && !isDisabled;
47
+ },
48
+ },
49
+ {
50
+ key: 'borderColorHoverClass',
51
+ stateFn: function (_a) {
52
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
53
+ return !isActive && !isDisabled;
54
+ },
55
+ },
56
+ {
57
+ key: 'borderColorActiveClass',
58
+ stateFn: function (_a) {
59
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
60
+ return Boolean(isActive) && !isDisabled;
61
+ },
62
+ },
63
+ ],
64
+ textColor: [
65
+ {
66
+ key: 'textColorClass',
67
+ stateFn: function (_a) {
68
+ var isDisabled = _a.isDisabled, isActive = _a.isActive;
69
+ return !isActive && !isDisabled;
70
+ },
71
+ },
72
+ ],
73
+ };
74
+ var formatState = function (key) {
75
+ // Try to find one of the state tokens in the input key:
76
+ // - matches "ActiveHover", "Active", "Hover" or "Disabled"
77
+ // - case-insensitive because of the /i flag
78
+ // Examples of matches:
79
+ // "fillActiveHoverColor" -> match[0] === "ActiveHover"
80
+ // "borderDisabled" -> match[0] === "Disabled"
81
+ var stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
82
+ if (!stateMatch) {
83
+ return '';
84
+ }
85
+ // Replace the matched token with a normalized snake-like form and
86
+ // prepend an underscore. The chained replace calls map:
87
+ // ActiveHover -> active_hover
88
+ // Active -> active
89
+ // Hover -> hover
90
+ // Disabled -> disabled
91
+ // The final .toLowerCase() ensures output is lowercased regardless of input casing.
92
+ // Examples:
93
+ // "fillActiveHoverColor" -> "_active_hover"
94
+ // "borderDisabled" -> "disabled"
95
+ return ('_' +
96
+ stateMatch[0]
97
+ .replace(/ActiveHover/i, 'active_hover')
98
+ .replace(/Active/i, 'active')
99
+ .replace(/Hover/i, 'hover')
100
+ .replace(/Disabled/i, 'disabled')
101
+ .toLowerCase());
102
+ };
103
+ // Insert a hyphen between a lowercase letter followed by an uppercase letter:
104
+ // - regex: /([a-z])([A-Z])/g
105
+ // ([a-z]) -> capture group 1: a lowercase letter
106
+ // ([A-Z]) -> capture group 2: an uppercase letter
107
+ // g -> global: replace all occurrences
108
+ // - replacement: '$1-$2' puts a hyphen between the two captured groups
109
+ // - finally .toLowerCase() to produce a full kebab-case string
110
+ //
111
+ // Examples:
112
+ // "myTestString" -> "my-test-string"
113
+ // "borderColorActiveHover" -> "border-color-active-hover"
114
+ var toKebabCase = function (str) {
115
+ return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
116
+ };
117
+
118
+ exports.CLASS_RULES = CLASS_RULES;
119
+ exports.formatState = formatState;
120
+ exports.toKebabCase = toKebabCase;
@@ -0,0 +1,65 @@
1
+ 'use strict';
2
+
3
+ var suffix = [
4
+ 'Button',
5
+ 'Checkbox',
6
+ 'Radio',
7
+ 'Checkmark',
8
+ 'Avatar',
9
+ 'AvatarStack',
10
+ 'Badge',
11
+ 'Breadcrumbs',
12
+ 'Cell',
13
+ 'Chips',
14
+ 'Choice',
15
+ 'Code',
16
+ 'CookiesWarning',
17
+ 'Dadata',
18
+ 'DatePeriod',
19
+ 'Divider',
20
+ 'Dot',
21
+ 'Drawer',
22
+ 'Dropdown',
23
+ 'DropdownItem',
24
+ 'Flex',
25
+ 'Grid',
26
+ 'Group',
27
+ 'HeroTitle',
28
+ 'HTMLContent',
29
+ 'Icon',
30
+ 'Image',
31
+ 'Input',
32
+ 'InputPassword',
33
+ 'Label',
34
+ 'Link',
35
+ 'List',
36
+ 'Loader',
37
+ 'Logo',
38
+ 'MenuItem',
39
+ 'Modal',
40
+ 'ModalSheetBottom',
41
+ 'Notification',
42
+ 'Overlay',
43
+ 'Pagination',
44
+ 'RangeSlider',
45
+ 'Response',
46
+ 'ScrollBar',
47
+ 'ScrollOnDrag',
48
+ 'ScrollToView',
49
+ 'Search',
50
+ 'Segmented',
51
+ 'Select',
52
+ 'SvgContent',
53
+ 'Swiper',
54
+ 'Switch',
55
+ 'Tab',
56
+ 'Text',
57
+ 'Textarea',
58
+ 'Tile',
59
+ 'Title',
60
+ 'Tooltip',
61
+ 'Video',
62
+ 'Warning',
63
+ ];
64
+
65
+ exports.suffix = suffix;
@@ -0,0 +1,64 @@
1
+ 'use strict';
2
+
3
+ var clsx = require('clsx');
4
+ var useActiveClasses_helpers = require('./useActiveClasses.helpers.js');
5
+
6
+ var useActiveClasses = function (params) {
7
+ var isDisabled = params.isDisabled, propsGenerator = params.propsGenerator, _a = params.suffixes, suffixes = _a === void 0 ? [] : _a, isActive = params.isActive;
8
+ var rootClassesArray = [];
9
+ Object.entries(useActiveClasses_helpers.CLASS_RULES).forEach(function (_a) {
10
+ var rulesName = _a[0], rules = _a[1];
11
+ var kebabRuleName = useActiveClasses_helpers.toKebabCase(rulesName);
12
+ rules.forEach(function (_a) {
13
+ var key = _a.key, stateFn = _a.stateFn;
14
+ var value = propsGenerator[key];
15
+ if (!value) {
16
+ return;
17
+ }
18
+ if (stateFn) {
19
+ var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
20
+ if (!active) {
21
+ return;
22
+ }
23
+ }
24
+ var stateName = useActiveClasses_helpers.formatState(key);
25
+ rootClassesArray.push("".concat(kebabRuleName).concat(stateName, "_").concat(value));
26
+ });
27
+ });
28
+ var rootClasses = clsx(rootClassesArray);
29
+ var suffixClasses = suffixes.reduce(function (acc, suffix) {
30
+ var classes = [];
31
+ Object.entries(useActiveClasses_helpers.CLASS_RULES).forEach(function (_a) {
32
+ var rulesName = _a[0], rules = _a[1];
33
+ rules.forEach(function (_a) {
34
+ var key = _a.key, stateFn = _a.stateFn;
35
+ var withoutPrefixRulesName = key.replace(rulesName, '');
36
+ var propKey = rulesName + suffix + withoutPrefixRulesName;
37
+ var value = propsGenerator[propKey];
38
+ if (!value) {
39
+ return;
40
+ }
41
+ if (stateFn) {
42
+ var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
43
+ if (!active) {
44
+ return;
45
+ }
46
+ }
47
+ var state = useActiveClasses_helpers.formatState(propKey);
48
+ var kebabName = useActiveClasses_helpers.toKebabCase(rulesName);
49
+ classes.push("".concat(kebabName).concat(state, "_").concat(value));
50
+ });
51
+ });
52
+ var suffixKey = suffix === 'HTMLContent'
53
+ ? 'htmlContent'
54
+ : (suffix[0].toLowerCase() + suffix.slice(1));
55
+ acc[suffixKey] = clsx(classes);
56
+ return acc;
57
+ }, {});
58
+ return {
59
+ rootClasses: rootClasses,
60
+ suffixClasses: suffixClasses,
61
+ };
62
+ };
63
+
64
+ exports.useActiveClasses = useActiveClasses;
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
4
+ require('clsx');
5
+ require('./useActiveClasses/useActiveClasses.helpers.js');
6
+
7
+
8
+
9
+ exports.useActiveClasses = useActiveClasses.useActiveClasses;
@@ -7,6 +7,8 @@ var castArray = require('lodash/castArray');
7
7
  var upperFirst = require('lodash/upperFirst');
8
8
  require('../../context/Notifications.js');
9
9
  var UIContext = require('../../context/UIContext.js');
10
+ var index_helpers = require('../../hooks.js');
11
+ var styleAttributes = require('../useStyles/styleAttributes.js');
10
12
  require('react/jsx-runtime');
11
13
  require('uuid');
12
14
  require('@itcase/common');
@@ -72,8 +74,16 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
72
74
  // eslint-disable-next-line perfectionist/sort-objects
73
75
  getClassName: function (propKey, params) {
74
76
  var _a = params || {}, _b = _a.prefix, prefix = _b === void 0 ? '' : _b, _c = _a.replace, replace = _c === void 0 ? [/([A-Z])/g, '-$1'] : _c;
75
- // prettier-ignore
76
77
  var targetClassValue = this.getProp(String(propKey));
78
+ var styleAttributeKeys = styleAttributes.default.map(function (attr) {
79
+ return index_helpers.getStyleAttributeKey(attr);
80
+ });
81
+ if (styleAttributeKeys.includes(String(propKey)) &&
82
+ (typeof targetClassValue === 'number' ||
83
+ (typeof targetClassValue === 'string' &&
84
+ !isNaN(parseFloat(targetClassValue))))) {
85
+ return '';
86
+ }
77
87
  if (targetClassValue) {
78
88
  var cleanClassValue = String(targetClassValue);
79
89
  if (!cleanClassValue.includes('.')) {
@@ -14,6 +14,8 @@ require('../context/UIContext.js');
14
14
  require('./useMediaQueries/useMediaQueries.js');
15
15
  require('react-responsive');
16
16
  require('../utils/setViewportProperty.js');
17
+ require('../hooks.js');
18
+ require('./useStyles/styleAttributes.js');
17
19
 
18
20
 
19
21
 
@@ -6,6 +6,7 @@ var maxBy = require('lodash/maxBy');
6
6
  var upperFirst = require('lodash/upperFirst');
7
7
  require('../../context/Notifications.js');
8
8
  var UIContext = require('../../context/UIContext.js');
9
+ var index_helpers = require('../../hooks.js');
9
10
  var styleAttributes = require('./styleAttributes.js');
10
11
  require('../../../tslib.es6_cjs_CCZ3TN_7.js');
11
12
  require('react/jsx-runtime');
@@ -139,6 +140,7 @@ function useStyles(props) {
139
140
  return resultStylesGroups;
140
141
  // eslint-disable-next-line react-hooks/exhaustive-deps
141
142
  }, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
143
+ console.error('collectedStyles', collectedStyles);
142
144
  return collectedStyles;
143
145
  }
144
146
  const removeDeviceType = (originalKey, deviceTypesList) => {
@@ -183,10 +185,10 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
183
185
 
184
186
  // Get longest style key (e.g. "borderLeftWidth")
185
187
  const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
186
- const styleAttributeKey = Array.isArray(styleAttribute) ? styleAttribute[0] : styleAttribute;
187
- return styleAttributeKey.length;
188
+ const key = index_helpers.getStyleAttributeKey(styleAttribute);
189
+ return key.length;
188
190
  });
189
- const styleAttributeKey = Array.isArray(targetStyleAttribute) ? targetStyleAttribute[0] : targetStyleAttribute;
191
+ const styleAttributeKey = index_helpers.getStyleAttributeKey(targetStyleAttribute);
190
192
  return styleAttributeKey;
191
193
  };
192
194
 
@@ -14,6 +14,7 @@ require('../context/UIContext.js');
14
14
  require('./useMediaQueries/useMediaQueries.js');
15
15
  require('react-responsive');
16
16
  require('../utils/setViewportProperty.js');
17
+ require('../hooks.js');
17
18
  require('./useStyles/styleAttributes.js');
18
19
 
19
20
 
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var getStyleAttributeKey = function (targetStyleAttribute) {
4
+ return Array.isArray(targetStyleAttribute)
5
+ ? targetStyleAttribute[0]
6
+ : targetStyleAttribute;
7
+ };
8
+
9
+ exports.getStyleAttributeKey = getStyleAttributeKey;
@@ -6,9 +6,9 @@ import castArray from 'lodash/castArray';
6
6
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
7
7
  import { useStyles } from '../hooks/useStyles/useStyles.js';
8
8
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
9
- import { B as Badge, I as Icon } from '../Icon_es_BYO1LdXJ.js';
9
+ import { B as Badge, I as Icon } from '../Icon_es_C76te22j.js';
10
10
  import { D as Divider } from '../Divider_es_CCLBFIx6.js';
11
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
11
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
12
12
  import { icons16 } from '@itcase/icons/default';
13
13
  import 'lodash/camelCase';
14
14
  import 'lodash/upperFirst';
@@ -19,8 +19,9 @@ import '../context/UIContext.js';
19
19
  import '../hooks/useMediaQueries/useMediaQueries.js';
20
20
  import 'react-responsive';
21
21
  import '../utils/setViewportProperty.js';
22
- import 'lodash/maxBy';
22
+ import '../hooks.js';
23
23
  import '../hooks/useStyles/styleAttributes.js';
24
+ import 'lodash/maxBy';
24
25
  import 'react-inlinesvg';
25
26
  import '../hoc/urlWithAssetPrefix.js';
26
27
  import '../context/UrlAssetPrefix.js';
@@ -1,4 +1,4 @@
1
- export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_CEiiRkAd.js';
1
+ export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_C3HGSiHU.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
@@ -15,13 +15,14 @@ import '../context/UIContext.js';
15
15
  import '../hooks/useMediaQueries/useMediaQueries.js';
16
16
  import 'react-responsive';
17
17
  import '../utils/setViewportProperty.js';
18
- import '../Icon_es_BYO1LdXJ.js';
18
+ import '../hooks.js';
19
+ import '../hooks/useStyles/styleAttributes.js';
20
+ import '../Icon_es_C76te22j.js';
19
21
  import 'react-inlinesvg';
20
22
  import '../hoc/urlWithAssetPrefix.js';
21
23
  import '../context/UrlAssetPrefix.js';
22
24
  import '../hooks/useStyles/useStyles.js';
23
25
  import 'lodash/maxBy';
24
- import '../hooks/useStyles/styleAttributes.js';
25
26
  import '../Link_es_BnUIX0QT.js';
26
- import '../Text_es_BXh9Y3hR.js';
27
+ import '../Text_es_CtCwsa3V.js';
27
28
  import '../Image_es_BvYo_cHH.js';
@@ -3,9 +3,9 @@ import clsx from 'clsx';
3
3
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
4
4
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
5
5
  import { useStyles } from '../hooks/useStyles/useStyles.js';
6
- import { A as Avatar } from '../Avatar_es_CEiiRkAd.js';
7
- import { G as Group } from '../Group_es_DHJcG2MA.js';
8
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
6
+ import { A as Avatar } from '../Avatar_es_C3HGSiHU.js';
7
+ import { G as Group } from '../Group_es_DIfmrMSM.js';
8
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
9
9
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
10
10
  import 'react';
11
11
  import 'lodash/camelCase';
@@ -18,9 +18,10 @@ import '../context/UIContext.js';
18
18
  import '../hooks/useMediaQueries/useMediaQueries.js';
19
19
  import 'react-responsive';
20
20
  import '../utils/setViewportProperty.js';
21
- import 'lodash/maxBy';
21
+ import '../hooks.js';
22
22
  import '../hooks/useStyles/styleAttributes.js';
23
- import '../Icon_es_BYO1LdXJ.js';
23
+ import 'lodash/maxBy';
24
+ import '../Icon_es_C76te22j.js';
24
25
  import 'react-inlinesvg';
25
26
  import '../hoc/urlWithAssetPrefix.js';
26
27
  import '../context/UrlAssetPrefix.js';
@@ -1,4 +1,4 @@
1
- export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_BYO1LdXJ.js';
1
+ export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_C76te22j.js';
2
2
  import '../tslib.es6_es_Bwu1Cn-t.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
@@ -18,8 +18,9 @@ import '../context/UIContext.js';
18
18
  import '../hooks/useMediaQueries/useMediaQueries.js';
19
19
  import 'react-responsive';
20
20
  import '../utils/setViewportProperty.js';
21
+ import '../hooks.js';
22
+ import '../hooks/useStyles/styleAttributes.js';
21
23
  import '../hooks/useStyles/useStyles.js';
22
24
  import 'lodash/maxBy';
23
- import '../hooks/useStyles/styleAttributes.js';
24
25
  import '../Link_es_BnUIX0QT.js';
25
- import '../Text_es_BXh9Y3hR.js';
26
+ import '../Text_es_CtCwsa3V.js';
@@ -4,9 +4,9 @@ import clsx from 'clsx';
4
4
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
5
5
  import { useStyles } from '../hooks/useStyles/useStyles.js';
6
6
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
7
- import { I as Icon } from '../Icon_es_BYO1LdXJ.js';
7
+ import { I as Icon } from '../Icon_es_C76te22j.js';
8
8
  import { a as LinkWrapper } from '../Link_es_BnUIX0QT.js';
9
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
9
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
10
10
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
11
11
  import { icons12, icons14, icons16, icons20, icons24 } from '@itcase/icons/default';
12
12
  import 'lodash/camelCase';
@@ -19,8 +19,9 @@ import '../context/UIContext.js';
19
19
  import '../hooks/useMediaQueries/useMediaQueries.js';
20
20
  import 'react-responsive';
21
21
  import '../utils/setViewportProperty.js';
22
- import 'lodash/maxBy';
22
+ import '../hooks.js';
23
23
  import '../hooks/useStyles/styleAttributes.js';
24
+ import 'lodash/maxBy';
24
25
  import 'react-inlinesvg';
25
26
  import '../hoc/urlWithAssetPrefix.js';
26
27
  import '../context/UrlAssetPrefix.js';
@@ -1,8 +1,8 @@
1
- export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_CEXL2diU.js';
1
+ export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_D_IlkeBp.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
5
- import '../Icon_es_BYO1LdXJ.js';
5
+ import '../Icon_es_C76te22j.js';
6
6
  import '../tslib.es6_es_Bwu1Cn-t.js';
7
7
  import 'react-inlinesvg';
8
8
  import '../hoc/urlWithAssetPrefix.js';
@@ -19,9 +19,10 @@ import '../context/UIContext.js';
19
19
  import '../hooks/useMediaQueries/useMediaQueries.js';
20
20
  import 'react-responsive';
21
21
  import '../utils/setViewportProperty.js';
22
+ import '../hooks.js';
23
+ import '../hooks/useStyles/styleAttributes.js';
22
24
  import '../hooks/useStyles/useStyles.js';
23
25
  import 'lodash/maxBy';
24
- import '../hooks/useStyles/styleAttributes.js';
25
26
  import '../Link_es_BnUIX0QT.js';
26
- import '../Text_es_BXh9Y3hR.js';
27
- import '../Loader_es_AhHU-s7_.js';
27
+ import '../Text_es_CtCwsa3V.js';
28
+ import '../Loader_es_C8ETXkiZ.js';
@@ -3,9 +3,9 @@ import clsx from 'clsx';
3
3
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
4
4
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
5
5
  import { useStyles } from '../hooks/useStyles/useStyles.js';
6
- import { I as Icon } from '../Icon_es_BYO1LdXJ.js';
7
- import { L as Label } from '../Label_es_Dl5zb0RD.js';
8
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
6
+ import { I as Icon } from '../Icon_es_C76te22j.js';
7
+ import { L as Label } from '../Label_es_CoIII7Ty.js';
8
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
9
9
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
10
10
  import 'react';
11
11
  import 'lodash/camelCase';
@@ -18,8 +18,9 @@ import '../context/UIContext.js';
18
18
  import '../hooks/useMediaQueries/useMediaQueries.js';
19
19
  import 'react-responsive';
20
20
  import '../utils/setViewportProperty.js';
21
- import 'lodash/maxBy';
21
+ import '../hooks.js';
22
22
  import '../hooks/useStyles/styleAttributes.js';
23
+ import 'lodash/maxBy';
23
24
  import 'react-inlinesvg';
24
25
  import '../hoc/urlWithAssetPrefix.js';
25
26
  import '../context/UrlAssetPrefix.js';
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
4
4
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
5
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
5
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
6
6
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
7
7
  import 'react';
8
8
  import 'lodash/camelCase';
@@ -15,9 +15,10 @@ import '../context/UIContext.js';
15
15
  import '../hooks/useMediaQueries/useMediaQueries.js';
16
16
  import 'react-responsive';
17
17
  import '../utils/setViewportProperty.js';
18
+ import '../hooks.js';
19
+ import '../hooks/useStyles/styleAttributes.js';
18
20
  import '../hooks/useStyles/useStyles.js';
19
21
  import 'lodash/maxBy';
20
- import '../hooks/useStyles/styleAttributes.js';
21
22
 
22
23
  var checkboxAppearanceDefault = {
23
24
  defaultPrimary: {
@@ -15,8 +15,9 @@ import '../context/UIContext.js';
15
15
  import '../hooks/useMediaQueries/useMediaQueries.js';
16
16
  import 'react-responsive';
17
17
  import '../utils/setViewportProperty.js';
18
- import 'lodash/maxBy';
18
+ import '../hooks.js';
19
19
  import '../hooks/useStyles/styleAttributes.js';
20
+ import 'lodash/maxBy';
20
21
 
21
22
  var checkmarkAppearanceAccent = {
22
23
  accentPrimary: {
@@ -1,4 +1,4 @@
1
- export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_vMh6YMRm.js';
1
+ export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_BKG5mK5N.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'clsx';
4
4
  import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
@@ -15,12 +15,13 @@ import '../context/UIContext.js';
15
15
  import '../hooks/useMediaQueries/useMediaQueries.js';
16
16
  import 'react-responsive';
17
17
  import '../utils/setViewportProperty.js';
18
+ import '../hooks.js';
19
+ import '../hooks/useStyles/styleAttributes.js';
18
20
  import '../hooks/useStyles/useStyles.js';
19
21
  import 'lodash/maxBy';
20
- import '../hooks/useStyles/styleAttributes.js';
21
- import '../Icon_es_BYO1LdXJ.js';
22
+ import '../Icon_es_C76te22j.js';
22
23
  import 'react-inlinesvg';
23
24
  import '../hoc/urlWithAssetPrefix.js';
24
25
  import '../context/UrlAssetPrefix.js';
25
26
  import '../Link_es_BnUIX0QT.js';
26
- import '../Text_es_BXh9Y3hR.js';
27
+ import '../Text_es_CtCwsa3V.js';
@@ -4,9 +4,9 @@ import clsx from 'clsx';
4
4
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
5
5
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
6
6
  import { useStyles } from '../hooks/useStyles/useStyles.js';
7
- import { I as Icon } from '../Icon_es_BYO1LdXJ.js';
8
- import { L as Loader } from '../Loader_es_AhHU-s7_.js';
9
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
7
+ import { I as Icon } from '../Icon_es_C76te22j.js';
8
+ import { L as Loader } from '../Loader_es_C8ETXkiZ.js';
9
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
10
10
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
11
11
  import 'lodash/camelCase';
12
12
  import 'lodash/castArray';
@@ -18,8 +18,9 @@ import '../context/UIContext.js';
18
18
  import '../hooks/useMediaQueries/useMediaQueries.js';
19
19
  import 'react-responsive';
20
20
  import '../utils/setViewportProperty.js';
21
- import 'lodash/maxBy';
21
+ import '../hooks.js';
22
22
  import '../hooks/useStyles/styleAttributes.js';
23
+ import 'lodash/maxBy';
23
24
  import 'react-inlinesvg';
24
25
  import '../hoc/urlWithAssetPrefix.js';
25
26
  import '../context/UrlAssetPrefix.js';
@@ -15,6 +15,8 @@ import '../context/UIContext.js';
15
15
  import '../hooks/useMediaQueries/useMediaQueries.js';
16
16
  import 'react-responsive';
17
17
  import '../utils/setViewportProperty.js';
18
+ import '../hooks.js';
19
+ import '../hooks/useStyles/styleAttributes.js';
18
20
 
19
21
  var codeAppearanceDefault = {
20
22
  defaultPrimary: {
@@ -4,8 +4,8 @@ import clsx from 'clsx';
4
4
  import Cookies from 'js-cookie';
5
5
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
6
6
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
7
- import { B as Button } from '../Button_es_CEXL2diU.js';
8
- import { T as Text } from '../Text_es_BXh9Y3hR.js';
7
+ import { B as Button } from '../Button_es_D_IlkeBp.js';
8
+ import { T as Text } from '../Text_es_CtCwsa3V.js';
9
9
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
10
10
  import 'lodash/camelCase';
11
11
  import 'lodash/castArray';
@@ -17,15 +17,16 @@ import '../context/UIContext.js';
17
17
  import '../hooks/useMediaQueries/useMediaQueries.js';
18
18
  import 'react-responsive';
19
19
  import '../utils/setViewportProperty.js';
20
- import '../Icon_es_BYO1LdXJ.js';
20
+ import '../hooks.js';
21
+ import '../hooks/useStyles/styleAttributes.js';
22
+ import '../Icon_es_C76te22j.js';
21
23
  import 'react-inlinesvg';
22
24
  import '../hoc/urlWithAssetPrefix.js';
23
25
  import '../context/UrlAssetPrefix.js';
24
26
  import '../hooks/useStyles/useStyles.js';
25
27
  import 'lodash/maxBy';
26
- import '../hooks/useStyles/styleAttributes.js';
27
28
  import '../Link_es_BnUIX0QT.js';
28
- import '../Loader_es_AhHU-s7_.js';
29
+ import '../Loader_es_C8ETXkiZ.js';
29
30
 
30
31
  var cookiesWarningAppearanceDefault = {
31
32
  defaultPrimary: {
@@ -16,6 +16,8 @@ import '../context/UIContext.js';
16
16
  import '../hooks/useMediaQueries/useMediaQueries.js';
17
17
  import 'react-responsive';
18
18
  import '../utils/setViewportProperty.js';
19
+ import '../hooks.js';
20
+ import '../hooks/useStyles/styleAttributes.js';
19
21
 
20
22
  function Dadata(props) {
21
23
  var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, token = props.token, setValue = props.setValue;