@itcase/ui 1.2.27 → 1.2.29

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 (238) hide show
  1. package/dist/{Badge-CrhdvxY6.js → Badge-BZYBmgBK.js} +4 -7
  2. package/dist/{Badge-2JkquAEb.js → Badge-TyPbVqR_.js} +4 -7
  3. package/dist/{Button-COsywjkv.js → Button-BcOsYgoT.js} +5 -4
  4. package/dist/{Button-C0M-Ap20.js → Button-avhviao1.js} +6 -5
  5. package/dist/{DropdownItem-D0dOP4NL.js → DropdownItem-CFkRx8LX.js} +2 -2
  6. package/dist/{DropdownItem-D52wxY6I.js → DropdownItem-toApJyeB.js} +1 -1
  7. package/dist/{Group-B2oTJg0t.js → Group-BiN0haVp.js} +2 -1
  8. package/dist/{Group-CVUfaHaS.js → Group-Dc70Z4_7.js} +2 -1
  9. package/dist/{Icon-CkynFJm4.js → Icon-B2BwTQnP.js} +3 -2
  10. package/dist/{Icon-CliIEdbp.js → Icon-ClsRaxDk.js} +4 -3
  11. package/dist/{Input-BSpFMsrf.js → Input-BaicBuyd.js} +4 -4
  12. package/dist/{Input-UkM-ag48.js → Input-DbzsXvEf.js} +4 -4
  13. package/dist/{Label-ukXod6pv.js → Label-BfotYOmD.js} +7 -6
  14. package/dist/{Label-BPP0om7_.js → Label-fp2Bus_T.js} +7 -6
  15. package/dist/{Link-CeQuavin.js → Link-CzC1kU5C.js} +1 -1
  16. package/dist/{Loader-CJ8ZCdwy.js → Loader-CU_5Ydmy.js} +4 -3
  17. package/dist/{Loader-fA11tUEJ.js → Loader-Ck59IXGG.js} +4 -3
  18. package/dist/{MenuItem-BL6WBNjL.js → MenuItem-BEYVY0Vf.js} +8 -7
  19. package/dist/{MenuItem-B5ypY7Uo.js → MenuItem-BJ3uGKCH.js} +7 -6
  20. package/dist/{Text-_YhyTsQ1.js → Text-CC0xnhmx.js} +4 -3
  21. package/dist/{Text-CG3xPG27.js → Text-kxGZButz.js} +4 -3
  22. package/dist/{Title-CqwqEtm7.js → Title-CQ_Fr1hO.js} +4 -3
  23. package/dist/{Title-B-N0qkn3.js → Title-Ze_OL1Co.js} +4 -3
  24. package/dist/{Tooltip-DsTCGS6h.js → Tooltip-PrwacZFC.js} +5 -4
  25. package/dist/{Tooltip-B2vv4OAX.js → Tooltip-ccRCMYQM.js} +5 -4
  26. package/dist/appearance/Badge.js +44 -0
  27. package/dist/appearance/Button.js +53 -0
  28. package/dist/appearance/Checkbox.js +21 -0
  29. package/dist/appearance/Chips.js +40 -0
  30. package/dist/appearance/Choice.js +15 -0
  31. package/dist/appearance/DatePicker.js +5 -0
  32. package/dist/appearance/Group.js +11 -0
  33. package/dist/appearance/Icon.js +12 -0
  34. package/dist/appearance/Input.js +56 -0
  35. package/dist/appearance/InputPassword.js +55 -0
  36. package/dist/appearance/Label.js +54 -0
  37. package/dist/appearance/Loader.js +28 -0
  38. package/dist/appearance/MenuItem.js +10 -0
  39. package/dist/appearance/Notification.js +34 -0
  40. package/dist/appearance/Radio.js +20 -0
  41. package/dist/appearance/Response.js +92 -0
  42. package/dist/appearance/Search.js +11 -0
  43. package/dist/appearance/Segmented.js +14 -0
  44. package/dist/appearance/Select.js +24 -0
  45. package/dist/appearance/Tab.js +118 -0
  46. package/dist/appearance/Text.js +8 -0
  47. package/dist/appearance/Textarea.js +56 -0
  48. package/dist/appearance/Title.js +7 -0
  49. package/dist/appearance/Tooltip.js +19 -0
  50. package/dist/cjs/appearance/Badge.js +46 -0
  51. package/dist/cjs/appearance/Button.js +55 -0
  52. package/dist/cjs/appearance/Checkbox.js +24 -0
  53. package/dist/cjs/appearance/Chips.js +42 -0
  54. package/dist/cjs/appearance/Choice.js +17 -0
  55. package/dist/cjs/appearance/DatePicker.js +7 -0
  56. package/dist/cjs/appearance/Group.js +13 -0
  57. package/dist/cjs/appearance/Icon.js +14 -0
  58. package/dist/cjs/appearance/Input.js +59 -0
  59. package/dist/cjs/appearance/InputPassword.js +58 -0
  60. package/dist/cjs/appearance/Label.js +56 -0
  61. package/dist/cjs/appearance/Loader.js +30 -0
  62. package/dist/cjs/appearance/MenuItem.js +12 -0
  63. package/dist/cjs/appearance/Notification.js +36 -0
  64. package/dist/cjs/appearance/Radio.js +23 -0
  65. package/dist/cjs/appearance/Response.js +94 -0
  66. package/dist/cjs/appearance/Search.js +13 -0
  67. package/dist/cjs/appearance/Segmented.js +16 -0
  68. package/dist/cjs/appearance/Select.js +26 -0
  69. package/dist/cjs/appearance/Tab.js +120 -0
  70. package/dist/cjs/appearance/Text.js +10 -0
  71. package/dist/cjs/appearance/Textarea.js +59 -0
  72. package/dist/cjs/appearance/Title.js +9 -0
  73. package/dist/cjs/appearance/Tooltip.js +21 -0
  74. package/dist/cjs/components/Accordion.js +8 -4
  75. package/dist/cjs/components/Avatar.js +8 -4
  76. package/dist/cjs/components/Badge.js +4 -2
  77. package/dist/cjs/components/Breadcrumbs.js +8 -4
  78. package/dist/cjs/components/Button.js +12 -6
  79. package/dist/cjs/components/Card.js +2 -1
  80. package/dist/cjs/components/Cell.js +10 -5
  81. package/dist/cjs/components/Checkbox.js +8 -7
  82. package/dist/cjs/components/Chips.js +5 -4
  83. package/dist/cjs/components/Choice.js +13 -8
  84. package/dist/cjs/components/Code.js +1 -1
  85. package/dist/cjs/components/ContextMenu.js +8 -4
  86. package/dist/cjs/components/CookiesWarning.js +14 -7
  87. package/dist/cjs/components/DadataHintField.js +2 -1
  88. package/dist/cjs/components/DatePicker.js +38 -16
  89. package/dist/cjs/components/Dropdown.js +3 -2
  90. package/dist/cjs/components/Group.js +2 -1
  91. package/dist/cjs/components/Icon.js +8 -4
  92. package/dist/cjs/components/Input.js +2 -1
  93. package/dist/cjs/components/InputPassword.js +12 -6
  94. package/dist/cjs/components/Label.js +8 -4
  95. package/dist/cjs/components/LanguageSelector.js +8 -4
  96. package/dist/cjs/components/Loader.js +4 -2
  97. package/dist/cjs/components/Menu.js +4 -2
  98. package/dist/cjs/components/MenuItem.js +4 -2
  99. package/dist/cjs/components/Modal.js +4 -2
  100. package/dist/cjs/components/Notification.js +12 -9
  101. package/dist/cjs/components/Pagination.js +9 -5
  102. package/dist/cjs/components/Panel.js +4 -2
  103. package/dist/cjs/components/Radio.js +11 -8
  104. package/dist/cjs/components/Response.js +18 -11
  105. package/dist/cjs/components/Search.js +12 -7
  106. package/dist/cjs/components/Segmented.js +16 -10
  107. package/dist/cjs/components/Select.js +14 -7
  108. package/dist/cjs/components/SiteMenu.js +8 -4
  109. package/dist/cjs/components/Swiper.js +2 -1
  110. package/dist/cjs/components/Tab.js +11 -8
  111. package/dist/cjs/components/Text.js +2 -1
  112. package/dist/cjs/components/Textarea.js +9 -7
  113. package/dist/cjs/components/Tile.js +6 -3
  114. package/dist/cjs/components/Title.js +2 -1
  115. package/dist/cjs/components/Tooltip.js +6 -3
  116. package/dist/cjs/components/Video.js +4 -4
  117. package/dist/cjs/hooks.js +1 -0
  118. package/dist/components/Accordion.js +10 -6
  119. package/dist/components/Avatar.js +10 -6
  120. package/dist/components/Badge.js +4 -2
  121. package/dist/components/Breadcrumbs.js +10 -6
  122. package/dist/components/Button.js +14 -8
  123. package/dist/components/Card.js +2 -1
  124. package/dist/components/Cell.js +12 -7
  125. package/dist/components/Checkbox.js +8 -7
  126. package/dist/components/Chips.js +5 -4
  127. package/dist/components/Choice.js +15 -10
  128. package/dist/components/Code.js +2 -2
  129. package/dist/components/ContextMenu.js +10 -6
  130. package/dist/components/CookiesWarning.js +16 -9
  131. package/dist/components/DadataHintField.js +3 -2
  132. package/dist/components/DatePicker.js +40 -19
  133. package/dist/components/Dropdown.js +5 -4
  134. package/dist/components/Group.js +2 -1
  135. package/dist/components/Icon.js +10 -6
  136. package/dist/components/Input.js +2 -1
  137. package/dist/components/InputPassword.js +14 -8
  138. package/dist/components/Label.js +8 -4
  139. package/dist/components/LanguageSelector.js +10 -6
  140. package/dist/components/Link.js +2 -2
  141. package/dist/components/List.js +2 -2
  142. package/dist/components/Loader.js +4 -2
  143. package/dist/components/Logo.js +2 -2
  144. package/dist/components/Menu.js +6 -4
  145. package/dist/components/MenuItem.js +6 -4
  146. package/dist/components/Modal.js +4 -2
  147. package/dist/components/Notification.js +13 -10
  148. package/dist/components/Pagination.js +11 -7
  149. package/dist/components/Panel.js +4 -2
  150. package/dist/components/Radio.js +11 -8
  151. package/dist/components/Response.js +20 -13
  152. package/dist/components/ScrollOnDrag.js +1 -1
  153. package/dist/components/Search.js +14 -9
  154. package/dist/components/Segmented.js +16 -10
  155. package/dist/components/Select.js +16 -9
  156. package/dist/components/SiteMenu.js +10 -6
  157. package/dist/components/Swiper.js +2 -1
  158. package/dist/components/Tab.js +13 -10
  159. package/dist/components/Text.js +2 -1
  160. package/dist/components/Textarea.js +9 -7
  161. package/dist/components/Tile.js +6 -3
  162. package/dist/components/Title.js +2 -1
  163. package/dist/components/Tooltip.js +6 -3
  164. package/dist/components/Video.js +4 -4
  165. package/dist/context/Notifications.js +1 -1
  166. package/dist/css/components/Badge/Badge.css +0 -16
  167. package/dist/css/components/Badge/Badge.tokens.css +20 -0
  168. package/dist/css/components/Pagination/Pagination.css +1 -1
  169. package/dist/css/components/Segmented/Segmented.css +1 -1
  170. package/dist/hooks.js +1 -1
  171. package/dist/stories/Appearance.stories.js +2 -2
  172. package/dist/stories/Badge.stories.js +1 -1
  173. package/dist/stories/Button.stories.js +2 -2
  174. package/dist/stories/Checkbox.stories.js +1 -1
  175. package/dist/stories/Chips.stories.js +1 -1
  176. package/dist/stories/Group.stories.js +2 -3
  177. package/dist/stories/Icon.stories.js +2 -2
  178. package/dist/stories/Input.stories.js +1 -1
  179. package/dist/stories/InputPassword.stories.js +2 -2
  180. package/dist/stories/Label.stories.js +1 -1
  181. package/dist/stories/Loader.stories.js +1 -1
  182. package/dist/stories/MenuItem.stories.js +1 -1
  183. package/dist/stories/ModalConfirm.stories.js +1 -3
  184. package/dist/stories/ModalDefault.stories.js +1 -3
  185. package/dist/stories/Notification.stories.js +3 -3
  186. package/dist/stories/Radio.stories.js +1 -1
  187. package/dist/stories/SearchInput.stories.js +2 -2
  188. package/dist/stories/Size.stories.js +2 -3
  189. package/dist/stories/State.stories.js +2 -4
  190. package/dist/stories/Textarea.stories.js +1 -1
  191. package/dist/stories/Tile.stories.js +2 -3
  192. package/dist/stories/Tooltip.stories.js +1 -1
  193. package/dist/stories/appearance.mdx +63 -1
  194. package/dist/stories/settings.mdx +3 -0
  195. package/dist/{tslib.es6-5FtW-kfi.js → tslib.es6-w7hdJ3oZ.js} +1 -1
  196. package/dist/types/appearance/Badge/index.d.ts +2 -0
  197. package/dist/types/appearance/Button/index.d.ts +2 -0
  198. package/dist/types/appearance/Checkbox/index.d.ts +3 -0
  199. package/dist/types/appearance/Chips/index.d.ts +2 -0
  200. package/dist/types/appearance/Choice/index.d.ts +2 -0
  201. package/dist/types/appearance/DatePicker/index.d.ts +2 -0
  202. package/dist/types/appearance/Group/index.d.ts +2 -0
  203. package/dist/types/appearance/Icon/index.d.ts +2 -0
  204. package/dist/types/appearance/Input/index.d.ts +3 -0
  205. package/dist/types/appearance/InputPassword/index.d.ts +3 -0
  206. package/dist/types/appearance/Label/index.d.ts +2 -0
  207. package/dist/types/appearance/Loader/index.d.ts +2 -0
  208. package/dist/types/appearance/MenuItem/index.d.ts +2 -0
  209. package/dist/types/appearance/Notification/index.d.ts +2 -0
  210. package/dist/types/appearance/Radio/index.d.ts +3 -0
  211. package/dist/types/appearance/Response/index.d.ts +2 -0
  212. package/dist/types/appearance/Search/index.d.ts +2 -0
  213. package/dist/types/appearance/Segmented/index.d.ts +2 -0
  214. package/dist/types/appearance/Select/index.d.ts +2 -0
  215. package/dist/types/appearance/Tab/index.d.ts +2 -0
  216. package/dist/types/appearance/Text/index.d.ts +2 -0
  217. package/dist/types/appearance/Textarea/index.d.ts +3 -0
  218. package/dist/types/appearance/Title/index.d.ts +2 -0
  219. package/dist/types/appearance/Tooltip/index.d.ts +2 -0
  220. package/dist/types/components/Badge/Badge.appearance.d.ts +2 -0
  221. package/dist/types/components/Badge/Badge.d.ts +0 -6
  222. package/dist/types/components/DatePicker/DatePicker.d.ts +2 -1
  223. package/dist/types/components/DatePicker/DatePicker.interface.d.ts +10 -1
  224. package/dist/types/components/DatePicker/index.d.ts +1 -1
  225. package/dist/types/components/Group/Group.interface.d.ts +1 -1
  226. package/dist/types/components/MenuItem/MenuItem.d.ts +2 -2
  227. package/dist/types/components/Text/Text.interface.d.ts +2 -2
  228. package/dist/types/components/Title/Title.interface.d.ts +2 -2
  229. package/dist/types/types/componentProps/appearanceKeys.d.ts +1 -1
  230. package/package.json +5 -1
  231. package/dist/cjs/components.js +0 -3
  232. package/dist/components.js +0 -1
  233. /package/dist/stories/{mixins_animation.mdx → mixin_animation.mdx} +0 -0
  234. /package/dist/stories/{mixins_dark-light.mdx → mixin_dark-light.mdx} +0 -0
  235. /package/dist/stories/{mixins_elevation.mdx → mixin_elevation.mdx} +0 -0
  236. /package/dist/stories/{mixins_fill-gradient.mdx → mixin_fill-gradient.mdx} +0 -0
  237. /package/dist/stories/{mixins_typography.mdx → mixin_typography.mdx} +0 -0
  238. /package/dist/stories/{mixins_utils.mdx → mixin_utils.mdx} +0 -0
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { useMemo } from 'react';
3
3
  import clsx from 'clsx';
4
+ import { textareaAppearance, textareaState } from '../appearance/Textarea.js';
4
5
  import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
5
6
  import 'lodash/castArray';
6
7
  import 'lodash/camelCase';
@@ -10,17 +11,18 @@ import '../hooks/useMediaQueries.js';
10
11
  import 'react-responsive';
11
12
 
12
13
  var textareaConfig = {
13
- state: {},
14
- setState: function (newComponent) {
15
- textareaConfig.state = newComponent;
16
- },
17
- appearance: {},
14
+ appearance: textareaAppearance,
18
15
  setAppearance: function (newComponent) {
19
16
  textareaConfig.appearance = newComponent;
20
17
  },
18
+ state: textareaState,
19
+ // eslint-disable-next-line perfectionist/sort-objects
20
+ setState: function (newComponent) {
21
+ textareaConfig.state = newComponent;
22
+ },
21
23
  };
22
24
  function Textarea(props) {
23
- var appearance = props.appearance, id = props.id, className = props.className, placeholder = props.placeholder, disabled = props.disabled, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
25
+ var id = props.id, appearance = props.appearance, className = props.className, disabled = props.disabled, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
24
26
  var fillClass = useDeviceTargetClass(props, {
25
27
  prefix: 'fill_',
26
28
  propsKey: 'fill',
@@ -93,7 +95,7 @@ function Textarea(props) {
93
95
  ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
94
96
  "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
95
97
  ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
96
- "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), id: id, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
98
+ "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), disabled: disabled, id: id, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
97
99
  }
98
100
  Textarea.defaultProps = {
99
101
  size: 'm',
@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
4
4
  import { useStyles } from '../hooks/useStyles.js';
5
- import { B as Badge } from '../Badge-CrhdvxY6.js';
6
- import { T as Text } from '../Text-CG3xPG27.js';
7
- import { T as Title } from '../Title-CqwqEtm7.js';
5
+ import { B as Badge } from '../Badge-BZYBmgBK.js';
6
+ import { T as Text } from '../Text-kxGZButz.js';
7
+ import { T as Title } from '../Title-CQ_Fr1hO.js';
8
8
  import 'react';
9
9
  import 'lodash/castArray';
10
10
  import 'lodash/camelCase';
@@ -15,6 +15,9 @@ import 'react-responsive';
15
15
  import 'lodash/maxBy';
16
16
  import 'lodash/upperFirst';
17
17
  import '../hooks/styleAttributes.js';
18
+ import '../appearance/Badge.js';
19
+ import '../appearance/Text.js';
20
+ import '../appearance/Title.js';
18
21
 
19
22
  function Tile(props) {
20
23
  var children = props.children, direction = props.direction, after = props.after, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
@@ -1,7 +1,8 @@
1
- export { T as Title, t as titleConfig } from '../Title-CqwqEtm7.js';
1
+ export { T as Title, t as titleConfig } from '../Title-CQ_Fr1hO.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
5
+ import '../appearance/Title.js';
5
6
  import '../context/UIContext.js';
6
7
  import 'prop-types';
7
8
  import '../hooks/useMediaQueries.js';
@@ -1,7 +1,8 @@
1
- export { T as Tooltip, t as tooltipConfig } from '../Tooltip-B2vv4OAX.js';
1
+ export { T as Tooltip, t as tooltipConfig } from '../Tooltip-ccRCMYQM.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
5
+ import '../appearance/Tooltip.js';
5
6
  import '../hooks/useDeviceTargetClass.js';
6
7
  import 'lodash/castArray';
7
8
  import 'lodash/camelCase';
@@ -13,5 +14,7 @@ import '../hooks/useStyles.js';
13
14
  import 'lodash/maxBy';
14
15
  import 'lodash/upperFirst';
15
16
  import '../hooks/styleAttributes.js';
16
- import '../Text-CG3xPG27.js';
17
- import '../Title-CqwqEtm7.js';
17
+ import '../Text-kxGZButz.js';
18
+ import '../appearance/Text.js';
19
+ import '../Title-CQ_Fr1hO.js';
20
+ import '../appearance/Title.js';
@@ -15,13 +15,13 @@ function Video(props) {
15
15
  var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
16
16
  // @ts-expect-error
17
17
  var videoStyles = useStyles(props).styles;
18
- return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsx("source", { src: webm, type: "video/webm",
18
+ return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm",
19
19
  // @ts-expect-error
20
- codecs: "vp8, vorbis" }), ogv && jsx("source", { src: ogv, type: "video/ogg",
20
+ codecs: "vp8, vorbis" })), ogv && (jsx("source", { src: ogv, type: "video/ogg",
21
21
  // @ts-expect-error
22
- codecs: "theora, vorbis" }), mp4 && jsx("source", { src: mp4, type: "video/mp4",
22
+ codecs: "theora, vorbis" })), mp4 && (jsx("source", { src: mp4, type: "video/mp4",
23
23
  // @ts-expect-error
24
- codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
24
+ codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
25
25
  }
26
26
 
27
27
  export { Video };
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
2
+ import { b as __spreadArray } from '../tslib.es6-w7hdJ3oZ.js';
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
  import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
5
5
  import PropTypes from 'prop-types';
@@ -64,19 +64,3 @@
64
64
  }
65
65
  }
66
66
  }
67
- :root {
68
- --badge-width-size-xxs: 16px;
69
- --badge-height-size-xxs: 16px;
70
- --badge-width-size-xs: 18px;
71
- --badge-height-size-xs: 18px;
72
- --badge-width-size-s: 20px;
73
- --badge-height-size-s: 20px;
74
- --badge-width-size-m: 24px;
75
- --badge-height-size-m: 24px;
76
- --badge-width-size-l: 32px;
77
- --badge-height-size-l: 32px;
78
- --badge-width-size-xl: 40px;
79
- --badge-height-size-xl: 40px;
80
- --badge-width-size-xxl: 48px;
81
- --badge-height-size-xxl: 48px;
82
- }
@@ -0,0 +1,20 @@
1
+ :root {
2
+ /* Size */
3
+ --badge-width-size-xxs: 14px;
4
+ --badge-height-size-xxs: 14px;
5
+ --badge-width-size-xs: 14px;
6
+ --badge-height-size-xs: 14px;
7
+ --badge-width-size-s: 20px;
8
+ --badge-height-size-s: 20px;
9
+ --badge-width-size-m: 23px;
10
+ --badge-height-size-m: 23px;
11
+ --badge-width-size-l: 32px;
12
+ --badge-height-size-l: 32px;
13
+ --badge-width-size-xl: 40px;
14
+ --badge-height-size-xl: 40px;
15
+ --badge-width-size-xxl: 48px;
16
+ --badge-height-size-xxl: 48px;
17
+ /* Status */
18
+ --badge-status-width-size-xxs: 8px;
19
+ --badge-status-height-size-xxs: 8px;
20
+ }
@@ -17,7 +17,7 @@
17
17
  &__input {
18
18
  background: var(--color-surface-primary);
19
19
  padding: 3px 7px;
20
- border: 1px solid var(--color-surface-border-tertiary);
20
+ border: 1px solid var(--pagination-input-color, --color-surface-border-tertiary);
21
21
  border-radius: 8px;
22
22
  position: relative;
23
23
  display: flex;
@@ -88,7 +88,7 @@
88
88
  }
89
89
  .segmented {
90
90
  &_size {
91
- @each $size in normal, compact {
91
+ @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl {
92
92
  &_$(size) {
93
93
  ^^&__item {
94
94
  &-label {
package/dist/hooks.js CHANGED
@@ -1 +1 @@
1
-
1
+ 'use strict';
@@ -1,6 +1,6 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { tabAppearance } from '../../../appearance/Tab'
1
3
  import { badgeConfig } from '../../Badge'
2
- import badgeAppearance from '../../Badge/appearance.json'
3
- import tabAppearance from '../appearance.json'
4
4
  import { Tab, tabConfig } from '../Tab'
5
5
  import { argTypes } from './args'
6
6
 
@@ -1,3 +1,4 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
1
2
  import {
2
3
  borderColorHoverProps,
3
4
  borderColorProps,
@@ -8,7 +9,6 @@ import {
8
9
  sizeProps,
9
10
  textColorProps,
10
11
  } from '../../../constants'
11
- import badgeAppearance from '../../Badge/appearance.json'
12
12
  import { Badge, badgeConfig } from '../Badge'
13
13
 
14
14
  badgeConfig.setAppearance(badgeAppearance)
@@ -1,7 +1,7 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { buttonAppearance } from '../../../appearance/Button'
1
3
  import { icon24 } from '../../../icons'
2
4
  import { Badge, badgeConfig } from '../../Badge'
3
- import badgeAppearance from '../../Badge/appearance.json'
4
- import buttonAppearance from '../../Button/appearance.json'
5
5
  import { Button, buttonConfig } from '../Button'
6
6
  import { argTypes } from './args'
7
7
 
@@ -1,6 +1,6 @@
1
+ import { checkboxState } from '../../../appearance/Checkbox'
1
2
  import { fillProps, textColorProps, textSizeProps } from '../../../constants'
2
3
  import { Checkbox, checkboxConfig } from '../Checkbox'
3
- import checkboxState from '../state.json'
4
4
 
5
5
  checkboxConfig.setState(checkboxState)
6
6
 
@@ -1,5 +1,5 @@
1
+ import { chipsAppearance } from '../../../appearance/Chips'
1
2
  import { Icon } from '../../Icon'
2
- import chipsAppearance from '../appearance.json'
3
3
  import { Chips, chipsConfig } from '../Chips'
4
4
  import { argTypes } from './args'
5
5
 
@@ -1,3 +1,5 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { tabAppearance } from '../../../appearance/Tab'
1
3
  import {
2
4
  directionProps,
3
5
  fillProps,
@@ -7,13 +9,10 @@ import {
7
9
  wrapProps,
8
10
  } from '../../../constants'
9
11
  import { badgeConfig } from '../../Badge'
10
- import badgeAppearance from '../../Badge/appearance.json'
11
- import tabAppearance from '../appearance.json'
12
12
  import { Tab, tabConfig } from '../Tab'
13
13
  import { TabGroup } from '../TabGroup'
14
14
 
15
15
  tabConfig.setAppearance(tabAppearance)
16
-
17
16
  badgeConfig.setAppearance(badgeAppearance)
18
17
 
19
18
  const tabs = {
@@ -1,3 +1,5 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { iconAppearance } from '../../../appearance/Icon'
1
3
  import {
2
4
  borderColorHoverProps,
3
5
  borderColorProps,
@@ -9,8 +11,6 @@ import {
9
11
  sizePXProps,
10
12
  } from '../../../constants'
11
13
  import { Badge, badgeConfig } from '../../Badge'
12
- import badgeAppearance from '../../Badge/appearance.json'
13
- import iconAppearance from '../appearance.json'
14
14
  import { Icon, iconConfig } from '../Icon'
15
15
 
16
16
  iconConfig.setAppearance(iconAppearance)
@@ -1,6 +1,6 @@
1
+ import { inputState } from '../../../appearance/Input'
1
2
  import { borderColorProps, textColorProps, textSizeProps } from '../../../constants'
2
3
  import { Input, inputConfig } from '../Input'
3
- import inputState from '../state.json'
4
4
 
5
5
  inputConfig.setState(inputState)
6
6
 
@@ -1,3 +1,4 @@
1
+ import { InputPasswordState } from '../../../appearance/InputPassword'
1
2
  import {
2
3
  borderColorProps,
3
4
  fillProps,
@@ -6,9 +7,8 @@ import {
6
7
  textSizeProps,
7
8
  } from '../../../constants'
8
9
  import { InputPassword, inputPasswordConfig } from '../InputPassword'
9
- import inputPasswordState from '../state.json'
10
10
 
11
- inputPasswordConfig.setState(inputPasswordState)
11
+ inputPasswordConfig.setState(InputPasswordState)
12
12
 
13
13
  export default {
14
14
  argTypes: {
@@ -1,3 +1,4 @@
1
+ import { labelAppearance } from '../../../appearance/Label'
1
2
  import {
2
3
  borderColorProps,
3
4
  borderTypeProps,
@@ -8,7 +9,6 @@ import {
8
9
  textSizeProps,
9
10
  widthProps,
10
11
  } from '../../../constants'
11
- import labelAppearance from '../appearance.json'
12
12
  import { Label, labelConfig } from '../Label'
13
13
 
14
14
  labelConfig.setAppearance(labelAppearance)
@@ -1,3 +1,4 @@
1
+ import { loaderAppearance } from '../../../appearance/Loader'
1
2
  import {
2
3
  heightProps,
3
4
  positionProps,
@@ -5,7 +6,6 @@ import {
5
6
  textSizeProps,
6
7
  widthProps,
7
8
  } from '../../../constants'
8
- import loaderAppearance from '../appearance.json'
9
9
  import { Loader, loaderConfig } from '../Loader'
10
10
 
11
11
  loaderConfig.setAppearance(loaderAppearance)
@@ -1,3 +1,4 @@
1
+ import { menuItemAppearance } from '../../../appearance/MenuItem'
1
2
  import {
2
3
  fillProps,
3
4
  shapeProps,
@@ -12,7 +13,6 @@ import {
12
13
  textWrapProps,
13
14
  underlineProps,
14
15
  } from '../../../constants'
15
- import menuItemAppearance from '../appearance.json'
16
16
  import { MenuItem, menuItemConfig } from '../MenuItem'
17
17
 
18
18
  menuItemConfig.setAppearance(menuItemAppearance)
@@ -1,11 +1,9 @@
1
+ import { buttonAppearance } from '../../../appearance/Button'
1
2
  import { Button, buttonConfig } from '../../Button'
2
- import buttonAppearance from '../../Button/appearance.json'
3
3
  import { Group } from '../../Group'
4
4
  import { Title } from '../../Title'
5
5
  import { Modal } from '../Modal'
6
6
 
7
- import { icon24 } from 'src/icons'
8
-
9
7
  buttonConfig.setAppearance(buttonAppearance)
10
8
 
11
9
  export default {
@@ -1,9 +1,7 @@
1
+ import { buttonAppearance } from '../../../appearance/Button'
1
2
  import { Button, buttonConfig } from '../../Button'
2
- import buttonAppearance from '../../Button/appearance.json'
3
3
  import { Modal } from '../Modal'
4
4
 
5
- import { icon24 } from 'src/icons'
6
-
7
5
  buttonConfig.setAppearance(buttonAppearance)
8
6
 
9
7
  export default {
@@ -1,12 +1,12 @@
1
+ import { buttonAppearance } from '../../../appearance/Button'
2
+ import { notificationItemAppearance } from '../../../appearance/Notification'
1
3
  import { textSizeProps, titleSizeProps } from '../../../constants'
2
4
  import { Button, buttonConfig } from '../../Button'
3
- import buttonAppearance from '../../Button/appearance.json'
4
5
  import { Icon } from '../../Icon'
5
- import notificationAppearance from '../appearance.json'
6
6
  import { NotificationItem, notificationItemConfig } from '../NotificationItem'
7
7
 
8
8
  buttonConfig.setAppearance(buttonAppearance)
9
- notificationItemConfig.setAppearance(notificationAppearance)
9
+ notificationItemConfig.setAppearance(notificationItemAppearance)
10
10
 
11
11
  export default {
12
12
  argTypes: {
@@ -1,6 +1,6 @@
1
+ import { radioState } from '../../../appearance/Radio'
1
2
  import { shapeProps, textColorProps, textSizeProps } from '../../../constants'
2
3
  import { Radio, radioConfig } from '../Radio'
3
- import radioState from '../state.json'
4
4
 
5
5
  radioConfig.setState(radioState)
6
6
 
@@ -1,5 +1,6 @@
1
1
  import { SearchInput, searchInputConfig } from '@itcase/ui/components/Search'
2
2
 
3
+ import { searchAppearance } from '../../../appearance/Search'
3
4
  import {
4
5
  borderColorHoverProps,
5
6
  borderColorProps,
@@ -8,9 +9,8 @@ import {
8
9
  textColorProps,
9
10
  textSizeProps,
10
11
  } from '../../../constants'
11
- import searchInputAppearance from '../appearance.json'
12
12
 
13
- searchInputConfig.setAppearance(searchInputAppearance)
13
+ searchInputConfig.setAppearance(searchAppearance)
14
14
 
15
15
  export default {
16
16
  argTypes: {
@@ -1,11 +1,10 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { tabAppearance } from '../../../appearance/Tab'
1
3
  import { badgeConfig } from '../../Badge'
2
- import badgeAppearance from '../../Badge/appearance.json'
3
- import tabAppearance from '../appearance.json'
4
4
  import { Tab, tabConfig } from '../Tab'
5
5
  import { argTypes } from './args'
6
6
 
7
7
  badgeConfig.setAppearance(badgeAppearance)
8
-
9
8
  tabConfig.setAppearance(tabAppearance)
10
9
 
11
10
  export default {
@@ -1,12 +1,10 @@
1
-
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { tabAppearance } from '../../../appearance/Tab'
2
3
  import { badgeConfig } from '../../Badge'
3
- import badgeAppearance from '../../Badge/appearance.json'
4
- import tabAppearance from '../appearance.json'
5
4
  import { Tab, tabConfig } from '../Tab'
6
5
  import { argTypes } from './args'
7
6
 
8
7
  badgeConfig.setAppearance(badgeAppearance)
9
-
10
8
  tabConfig.setAppearance(tabAppearance)
11
9
 
12
10
  export default {
@@ -1,5 +1,5 @@
1
+ import { textareaState } from '../../../appearance/Textarea'
1
2
  import { borderColorProps, sizeProps, textColorProps, textSizeProps } from '../../../constants'
2
- import textareaState from '../state.json'
3
3
  import { Textarea, textareaConfig } from '../Textarea'
4
4
 
5
5
  textareaConfig.setState(textareaState)
@@ -1,3 +1,5 @@
1
+ import { badgeAppearance } from '../../../appearance/Badge'
2
+ import { buttonAppearance } from '../../../appearance/Button'
1
3
  import {
2
4
  alignDirectionProps,
3
5
  alignProps,
@@ -18,13 +20,10 @@ import {
18
20
  } from '../../../constants'
19
21
  import { icon24 } from '../../../icons'
20
22
  import { badgeConfig } from '../../Badge'
21
- import badgeAppearance from '../../Badge/appearance.json'
22
23
  import { Button, buttonConfig } from '../../Button'
23
- import buttonAppearance from '../../Button/appearance.json'
24
24
  import { Tile } from '../Tile'
25
25
 
26
26
  badgeConfig.setAppearance(badgeAppearance)
27
-
28
27
  buttonConfig.setAppearance(buttonAppearance)
29
28
 
30
29
  export default {
@@ -1,3 +1,4 @@
1
+ import { tooltipAppearance } from '../../../appearance/Tooltip'
1
2
  import {
2
3
  alignDirectionProps,
3
4
  alignmentProps,
@@ -12,7 +13,6 @@ import {
12
13
  titleSizeProps,
13
14
  widthProps,
14
15
  } from '../../../constants'
15
- import tooltipAppearance from '../appearance.json'
16
16
  import { Tooltip, tooltipConfig } from '../Tooltip'
17
17
 
18
18
  tooltipConfig.setAppearance(tooltipAppearance)
@@ -2,4 +2,66 @@ import { Meta } from '@storybook/blocks'
2
2
 
3
3
  <Meta title="Appearance / Overview" />
4
4
 
5
- # Overview
5
+ # Appearance
6
+
7
+ `Appearance` - это заранее прописанные стили (по сути пропсы с указанными значениями) для более быстрого применения в коде.
8
+
9
+ Для того чтобы добавить возможность использовать `Appearance` для компонента необходимо:
10
+
11
+ - добавить `appearance` в пропсы компонента
12
+ `const { appearance, children, className, textColor, textSize, value } = props`
13
+
14
+ - а также конфиг:
15
+
16
+ ```
17
+ const badgeConfig: IBadgeConfig = {
18
+ appearance: badgeAppearance,
19
+ setAppearance: (newComponent) => {
20
+ badgeConfig.appearance = newComponent
21
+ },
22
+ }
23
+ ```
24
+
25
+ - записать в переменную сокращенное название для дальнейшего использования в коде компонента:
26
+
27
+ ```
28
+ const appearanceConfig =
29
+ appearance && badgeConfig.appearance && badgeConfig.appearance[appearance]
30
+ ```
31
+
32
+ - использовать для пропсов:
33
+
34
+ ```
35
+ fillClass ||
36
+ (appearanceConfig?.fill &&
37
+ `fill_${appearanceConfig.fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
38
+
39
+ fillHoverClass ||
40
+ (appearanceConfig?.fillHover &&
41
+ `fill_hover_${appearanceConfig.fillHover}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
42
+
43
+ textColor={textColor || appearanceConfig?.textColor}
44
+ ```
45
+
46
+ - описать варианты `Appearance` необходимо в `src/appearance/Badge/index.ts`
47
+
48
+ ```
49
+ import { badgeAppearanceType } from '../../components/Badge/Badge.interface'
50
+
51
+ export const badgeAppearance: badgeAppearanceType = {
52
+ surfacePrimary: {
53
+ fill: 'surfacePrimary',
54
+ fillHover: 'surfacePrimaryHover',
55
+ textColor: 'surfaceTextPrimary',
56
+ },
57
+ surfaceSecondary: {
58
+ fill: 'surfaceSecondary',
59
+ fillHover: 'surfaceSecondaryHover',
60
+ textColor: 'surfaceTextPrimary',
61
+ }
62
+ ...
63
+ }
64
+ ```
65
+
66
+ - в коде на проекте использовать:
67
+ `<Badge appearance="surfacePrimary" ..../>`
@@ -0,0 +1,3 @@
1
+ import { Meta, Typeset } from '@storybook/blocks'
2
+
3
+ <Meta title="Tokens / Settings" />
@@ -53,4 +53,4 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
53
53
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
54
54
  };
55
55
 
56
- export { __assign as _, __rest as a, __spreadArray as b };
56
+ export { __rest as _, __assign as a, __spreadArray as b };
@@ -0,0 +1,2 @@
1
+ import { badgeAppearanceType } from '../../components/Badge/Badge.interface';
2
+ export declare const badgeAppearance: badgeAppearanceType;
@@ -0,0 +1,2 @@
1
+ import { buttonAppearanceType } from '../../components/Button/Button.interface';
2
+ export declare const buttonAppearance: buttonAppearanceType;
@@ -0,0 +1,3 @@
1
+ import { tCheckboxAppearance, tCheckboxState } from '../../components/Checkbox/Checkbox.interface';
2
+ export declare const checkboxAppearance: tCheckboxAppearance;
3
+ export declare const checkboxState: tCheckboxState;
@@ -0,0 +1,2 @@
1
+ import { tChipsAppearance } from '../../components/Chips/Chips.interface';
2
+ export declare const chipsAppearance: tChipsAppearance;
@@ -0,0 +1,2 @@
1
+ import { tChoiceAppearance } from '../../components/Choice/Choice.interface';
2
+ export declare const choiceAppearance: tChoiceAppearance;
@@ -0,0 +1,2 @@
1
+ import { datePickerAppearanceType } from '../../components/DatePicker/DatePicker.interface';
2
+ export declare const datePickerAppearance: datePickerAppearanceType;
@@ -0,0 +1,2 @@
1
+ import { tAppearance } from '../../components/Group/Group.interface';
2
+ export declare const groupAppearance: tAppearance;
@@ -0,0 +1,2 @@
1
+ import { tIconAppearance } from '../../components/Icon/Icon.interface';
2
+ export declare const iconAppearance: tIconAppearance;
@@ -0,0 +1,3 @@
1
+ import { tInputAppearance, tInputState } from '../../components/Input/Input.interface';
2
+ export declare const inputAppearance: tInputAppearance;
3
+ export declare const inputState: tInputState;
@@ -0,0 +1,3 @@
1
+ import { tInputAppearance, tInputState } from '../../components/InputPassword/InputPassword.interface';
2
+ export declare const InputPasswordAppearance: tInputAppearance;
3
+ export declare const InputPasswordState: tInputState;
@@ -0,0 +1,2 @@
1
+ import { labelAppearanceType } from '../../components/Label/Label.interface';
2
+ export declare const labelAppearance: labelAppearanceType;
@@ -0,0 +1,2 @@
1
+ import { loaderAppearanceType } from '../../components/Loader/Loader.interface';
2
+ export declare const loaderAppearance: loaderAppearanceType;
@@ -0,0 +1,2 @@
1
+ import { menuItemAppearanceType } from '../../components/MenuItem/MenuItem.interface';
2
+ export declare const menuItemAppearance: menuItemAppearanceType;
@@ -0,0 +1,2 @@
1
+ import { notificationItemAppearanceType } from '../../components/Notification/Notification.interface';
2
+ export declare const notificationItemAppearance: notificationItemAppearanceType;