@cdek-it/react-native-ui-kit 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (261) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +151 -0
  3. package/dist/components/Accordion/Accordion.d.ts +39 -0
  4. package/dist/components/Accordion/Accordion.js +103 -0
  5. package/dist/components/Accordion/index.d.ts +1 -0
  6. package/dist/components/Accordion/index.js +1 -0
  7. package/dist/components/Avatar/Avatar.d.ts +96 -0
  8. package/dist/components/Avatar/Avatar.js +121 -0
  9. package/dist/components/Avatar/index.d.ts +1 -0
  10. package/dist/components/Avatar/index.js +1 -0
  11. package/dist/components/Badge/Badge.d.ts +35 -0
  12. package/dist/components/Badge/Badge.js +74 -0
  13. package/dist/components/Badge/index.d.ts +1 -0
  14. package/dist/components/Badge/index.js +1 -0
  15. package/dist/components/Button/BaseButton.d.ts +5 -0
  16. package/dist/components/Button/BaseButton.js +62 -0
  17. package/dist/components/Button/Button.d.ts +16 -0
  18. package/dist/components/Button/Button.js +21 -0
  19. package/dist/components/Button/ButtonBadge.d.ts +21 -0
  20. package/dist/components/Button/ButtonBadge.js +53 -0
  21. package/dist/components/Button/ButtonSeverity.d.ts +17 -0
  22. package/dist/components/Button/ButtonSeverity.js +22 -0
  23. package/dist/components/Button/index.d.ts +4 -0
  24. package/dist/components/Button/index.js +3 -0
  25. package/dist/components/Button/styles/index.d.ts +2 -0
  26. package/dist/components/Button/styles/index.js +2 -0
  27. package/dist/components/Button/styles/useBasicButtonStyles.d.ts +98 -0
  28. package/dist/components/Button/styles/useBasicButtonStyles.js +81 -0
  29. package/dist/components/Button/styles/useDangerButtonStyles.d.ts +63 -0
  30. package/dist/components/Button/styles/useDangerButtonStyles.js +57 -0
  31. package/dist/components/Button/styles/useInfoButtonStyles.d.ts +63 -0
  32. package/dist/components/Button/styles/useInfoButtonStyles.js +56 -0
  33. package/dist/components/Button/styles/useSeverityButtonStyles.d.ts +64 -0
  34. package/dist/components/Button/styles/useSeverityButtonStyles.js +29 -0
  35. package/dist/components/Button/styles/useSuccessButtonStyles.d.ts +63 -0
  36. package/dist/components/Button/styles/useSuccessButtonStyles.js +61 -0
  37. package/dist/components/Button/styles/useWarningButtonStyles.d.ts +63 -0
  38. package/dist/components/Button/styles/useWarningButtonStyles.js +61 -0
  39. package/dist/components/Button/types.d.ts +107 -0
  40. package/dist/components/Button/types.js +0 -0
  41. package/dist/components/Button/utils/ButtonActivityIndicator.d.ts +3 -0
  42. package/dist/components/Button/utils/ButtonActivityIndicator.js +17 -0
  43. package/dist/components/Button/utils/ButtonContainer.d.ts +7 -0
  44. package/dist/components/Button/utils/ButtonContainer.js +10 -0
  45. package/dist/components/Button/utils/ButtonIcon.d.ts +4 -0
  46. package/dist/components/Button/utils/ButtonIcon.js +11 -0
  47. package/dist/components/Button/utils/ButtonLabel.d.ts +4 -0
  48. package/dist/components/Button/utils/ButtonLabel.js +13 -0
  49. package/dist/components/Button/utils/ButtonLeftArea.d.ts +4 -0
  50. package/dist/components/Button/utils/ButtonLeftArea.js +13 -0
  51. package/dist/components/Button/utils/ButtonRightArea.d.ts +3 -0
  52. package/dist/components/Button/utils/ButtonRightArea.js +13 -0
  53. package/dist/components/Button/utils/index.d.ts +4 -0
  54. package/dist/components/Button/utils/index.js +4 -0
  55. package/dist/components/Button/utils/useButtonContainerCallbackStyle.d.ts +3 -0
  56. package/dist/components/Button/utils/useButtonContainerCallbackStyle.js +141 -0
  57. package/dist/components/Button/utils/useButtonLabelStyle.d.ts +3 -0
  58. package/dist/components/Button/utils/useButtonLabelStyle.js +40 -0
  59. package/dist/components/Button/utils/useIconStyle.d.ts +7 -0
  60. package/dist/components/Button/utils/useIconStyle.js +35 -0
  61. package/dist/components/Button/utils/useTypeBasedStyle.d.ts +2 -0
  62. package/dist/components/Button/utils/useTypeBasedStyle.js +4 -0
  63. package/dist/components/Checkbox/Checkbox.d.ts +31 -0
  64. package/dist/components/Checkbox/Checkbox.js +55 -0
  65. package/dist/components/Checkbox/hooks/usePressableStyles.d.ts +15 -0
  66. package/dist/components/Checkbox/hooks/usePressableStyles.js +91 -0
  67. package/dist/components/Checkbox/index.d.ts +1 -0
  68. package/dist/components/Checkbox/index.js +1 -0
  69. package/dist/components/Chip/Chip.d.ts +30 -0
  70. package/dist/components/Chip/Chip.js +70 -0
  71. package/dist/components/Chip/index.d.ts +1 -0
  72. package/dist/components/Chip/index.js +1 -0
  73. package/dist/components/Dialog/Dialog.d.ts +14 -0
  74. package/dist/components/Dialog/Dialog.js +96 -0
  75. package/dist/components/Dialog/DialogComponent.d.ts +7 -0
  76. package/dist/components/Dialog/DialogComponent.js +34 -0
  77. package/dist/components/Dialog/DialogHeader.d.ts +12 -0
  78. package/dist/components/Dialog/DialogHeader.js +68 -0
  79. package/dist/components/Dialog/index.d.ts +3 -0
  80. package/dist/components/Dialog/index.js +3 -0
  81. package/dist/components/Divider/Divider.d.ts +42 -0
  82. package/dist/components/Divider/Divider.js +95 -0
  83. package/dist/components/Divider/index.d.ts +1 -0
  84. package/dist/components/Divider/index.js +1 -0
  85. package/dist/components/Input/FloatLabel.d.ts +22 -0
  86. package/dist/components/Input/FloatLabel.js +19 -0
  87. package/dist/components/Input/InputGroup.d.ts +21 -0
  88. package/dist/components/Input/InputGroup.js +52 -0
  89. package/dist/components/Input/InputGroupAddon.d.ts +17 -0
  90. package/dist/components/Input/InputGroupAddon.js +57 -0
  91. package/dist/components/Input/InputSwitch/InputSwitch.d.ts +8 -0
  92. package/dist/components/Input/InputSwitch/InputSwitch.js +16 -0
  93. package/dist/components/Input/InputSwitch/index.d.ts +1 -0
  94. package/dist/components/Input/InputSwitch/index.js +1 -0
  95. package/dist/components/Input/InputSwitch/styles/index.d.ts +2 -0
  96. package/dist/components/Input/InputSwitch/styles/index.js +2 -0
  97. package/dist/components/Input/InputSwitch/styles/useHandleStyles.d.ts +13 -0
  98. package/dist/components/Input/InputSwitch/styles/useHandleStyles.js +47 -0
  99. package/dist/components/Input/InputSwitch/styles/useSliderStyles.d.ts +17 -0
  100. package/dist/components/Input/InputSwitch/styles/useSliderStyles.js +95 -0
  101. package/dist/components/Input/InputText.d.ts +13 -0
  102. package/dist/components/Input/InputText.js +14 -0
  103. package/dist/components/Input/InputTextBase/InputTextBase.d.ts +13 -0
  104. package/dist/components/Input/InputTextBase/InputTextBase.js +124 -0
  105. package/dist/components/Input/InputTextBase/testIds.d.ts +11 -0
  106. package/dist/components/Input/InputTextBase/testIds.js +11 -0
  107. package/dist/components/Input/InputTextBase/types.d.ts +41 -0
  108. package/dist/components/Input/InputTextBase/types.js +0 -0
  109. package/dist/components/Input/InputTextBase/useStyles.d.ts +86 -0
  110. package/dist/components/Input/InputTextBase/useStyles.js +78 -0
  111. package/dist/components/Input/index.d.ts +5 -0
  112. package/dist/components/Input/index.js +4 -0
  113. package/dist/components/List/Base/ListBase.d.ts +32 -0
  114. package/dist/components/List/Base/ListBase.js +88 -0
  115. package/dist/components/List/Base/index.d.ts +1 -0
  116. package/dist/components/List/Base/index.js +1 -0
  117. package/dist/components/MenuItem/MenuItemAccessory.d.ts +11 -0
  118. package/dist/components/MenuItem/MenuItemAccessory.js +23 -0
  119. package/dist/components/MenuItem/MenuItemIcon.d.ts +36 -0
  120. package/dist/components/MenuItem/MenuItemIcon.js +33 -0
  121. package/dist/components/MenuItem/Template/MenuItemTemplate.d.ts +42 -0
  122. package/dist/components/MenuItem/Template/MenuItemTemplate.js +79 -0
  123. package/dist/components/MenuItem/index.d.ts +1 -0
  124. package/dist/components/MenuItem/index.js +1 -0
  125. package/dist/components/Message/Message.d.ts +65 -0
  126. package/dist/components/Message/Message.js +126 -0
  127. package/dist/components/Message/index.d.ts +1 -0
  128. package/dist/components/Message/index.js +1 -0
  129. package/dist/components/ProgressBar/ProgressBar.d.ts +33 -0
  130. package/dist/components/ProgressBar/ProgressBar.js +62 -0
  131. package/dist/components/ProgressBar/index.d.ts +1 -0
  132. package/dist/components/ProgressBar/index.js +1 -0
  133. package/dist/components/ProgressSpinner/ProgressSpinner.d.ts +17 -0
  134. package/dist/components/ProgressSpinner/ProgressSpinner.js +68 -0
  135. package/dist/components/ProgressSpinner/index.d.ts +1 -0
  136. package/dist/components/ProgressSpinner/index.js +1 -0
  137. package/dist/components/RadioButton/RadioButton.d.ts +18 -0
  138. package/dist/components/RadioButton/RadioButton.js +134 -0
  139. package/dist/components/RadioButton/index.d.ts +1 -0
  140. package/dist/components/RadioButton/index.js +1 -0
  141. package/dist/components/Rating/Rating.d.ts +48 -0
  142. package/dist/components/Rating/Rating.js +37 -0
  143. package/dist/components/Rating/RatingClear.d.ts +14 -0
  144. package/dist/components/Rating/RatingClear.js +28 -0
  145. package/dist/components/Rating/RatingItem.d.ts +19 -0
  146. package/dist/components/Rating/RatingItem.js +44 -0
  147. package/dist/components/Rating/RatingItemContainer.d.ts +37 -0
  148. package/dist/components/Rating/RatingItemContainer.js +30 -0
  149. package/dist/components/Rating/index.d.ts +1 -0
  150. package/dist/components/Rating/index.js +1 -0
  151. package/dist/components/SelectButton/SelectButton.d.ts +32 -0
  152. package/dist/components/SelectButton/SelectButton.js +75 -0
  153. package/dist/components/SelectButton/SelectButtonItem.d.ts +35 -0
  154. package/dist/components/SelectButton/SelectButtonItem.js +133 -0
  155. package/dist/components/SelectButton/index.d.ts +1 -0
  156. package/dist/components/SelectButton/index.js +1 -0
  157. package/dist/components/Skeleton/Skeleton.d.ts +15 -0
  158. package/dist/components/Skeleton/Skeleton.js +53 -0
  159. package/dist/components/Skeleton/index.d.ts +1 -0
  160. package/dist/components/Skeleton/index.js +1 -0
  161. package/dist/components/Slider/Slider.d.ts +36 -0
  162. package/dist/components/Slider/Slider.js +153 -0
  163. package/dist/components/Slider/index.d.ts +1 -0
  164. package/dist/components/Slider/index.js +1 -0
  165. package/dist/components/Tabs/TabItem/TabItem.d.ts +24 -0
  166. package/dist/components/Tabs/TabItem/TabItem.js +82 -0
  167. package/dist/components/Tabs/TabItem/index.d.ts +1 -0
  168. package/dist/components/Tabs/TabItem/index.js +1 -0
  169. package/dist/components/Tabs/TabPanel/TabPanel.d.ts +9 -0
  170. package/dist/components/Tabs/TabPanel/TabPanel.js +11 -0
  171. package/dist/components/Tabs/TabPanel/index.d.ts +1 -0
  172. package/dist/components/Tabs/TabPanel/index.js +1 -0
  173. package/dist/components/Tabs/Tabs.d.ts +15 -0
  174. package/dist/components/Tabs/Tabs.js +48 -0
  175. package/dist/components/Tabs/index.d.ts +2 -0
  176. package/dist/components/Tabs/index.js +2 -0
  177. package/dist/components/Tag/Tag.d.ts +33 -0
  178. package/dist/components/Tag/Tag.js +71 -0
  179. package/dist/components/Tag/index.d.ts +1 -0
  180. package/dist/components/Tag/index.js +1 -0
  181. package/dist/components/Timer/Timer.d.ts +18 -0
  182. package/dist/components/Timer/Timer.js +74 -0
  183. package/dist/components/Timer/TimerFlip.d.ts +7 -0
  184. package/dist/components/Timer/TimerFlip.js +69 -0
  185. package/dist/components/Timer/constants.d.ts +1 -0
  186. package/dist/components/Timer/constants.js +1 -0
  187. package/dist/components/ToggleButton/ToggleButton.d.ts +45 -0
  188. package/dist/components/ToggleButton/ToggleButton.js +85 -0
  189. package/dist/components/ToggleButton/hooks/useIconSize.d.ts +14 -0
  190. package/dist/components/ToggleButton/hooks/useIconSize.js +26 -0
  191. package/dist/components/ToggleButton/hooks/useLabelSize.d.ts +8 -0
  192. package/dist/components/ToggleButton/hooks/useLabelSize.js +19 -0
  193. package/dist/components/ToggleButton/hooks/useStateStyles.d.ts +11 -0
  194. package/dist/components/ToggleButton/hooks/useStateStyles.js +92 -0
  195. package/dist/components/ToggleButton/index.d.ts +1 -0
  196. package/dist/components/ToggleButton/index.js +1 -0
  197. package/dist/components/Typography/Anchor.d.ts +31 -0
  198. package/dist/components/Typography/Anchor.js +75 -0
  199. package/dist/components/Typography/Body.d.ts +9 -0
  200. package/dist/components/Typography/Body.js +32 -0
  201. package/dist/components/Typography/Caption.d.ts +9 -0
  202. package/dist/components/Typography/Caption.js +38 -0
  203. package/dist/components/Typography/Service.d.ts +25 -0
  204. package/dist/components/Typography/Service.js +63 -0
  205. package/dist/components/Typography/Subtitle.d.ts +18 -0
  206. package/dist/components/Typography/Subtitle.js +23 -0
  207. package/dist/components/Typography/Title.d.ts +5 -0
  208. package/dist/components/Typography/Title.js +24 -0
  209. package/dist/components/Typography/index.d.ts +6 -0
  210. package/dist/components/Typography/index.js +6 -0
  211. package/dist/components/index.d.ts +23 -0
  212. package/dist/components/index.js +23 -0
  213. package/dist/hooks/useChangeTheme.d.ts +1 -0
  214. package/dist/hooks/useChangeTheme.js +5 -0
  215. package/dist/hooks/useFonts.d.ts +1 -0
  216. package/dist/hooks/useFonts.js +5 -0
  217. package/dist/hooks/useLoadingRotationAnimation.d.ts +5 -0
  218. package/dist/hooks/useLoadingRotationAnimation.js +19 -0
  219. package/dist/hooks/useMakeTestId.d.ts +3 -0
  220. package/dist/hooks/useMakeTestId.js +7 -0
  221. package/dist/hooks/useTheme.d.ts +1 -0
  222. package/dist/hooks/useTheme.js +5 -0
  223. package/dist/index.d.ts +6 -0
  224. package/dist/index.js +6 -0
  225. package/dist/theme/ThemeContext.d.ts +15 -0
  226. package/dist/theme/ThemeContext.js +20 -0
  227. package/dist/theme/assets/background.json +149 -0
  228. package/dist/theme/assets/border.json +103 -0
  229. package/dist/theme/assets/customCommon.d.ts +4 -0
  230. package/dist/theme/assets/customCommon.js +4 -0
  231. package/dist/theme/assets/customDark.d.ts +5 -0
  232. package/dist/theme/assets/customDark.js +15 -0
  233. package/dist/theme/assets/customLight.d.ts +15 -0
  234. package/dist/theme/assets/customLight.js +15 -0
  235. package/dist/theme/assets/effects.json +15 -0
  236. package/dist/theme/assets/global.json +114 -0
  237. package/dist/theme/assets/primaryColors.json +14 -0
  238. package/dist/theme/assets/shadow.d.ts +6 -0
  239. package/dist/theme/assets/shadow.js +6 -0
  240. package/dist/theme/assets/sizing.json +78 -0
  241. package/dist/theme/assets/spacing.json +48 -0
  242. package/dist/theme/assets/themeDark.json +1141 -0
  243. package/dist/theme/assets/themeLight.json +1141 -0
  244. package/dist/theme/assets/typography.json +45 -0
  245. package/dist/theme/commonTheme.d.ts +582 -0
  246. package/dist/theme/commonTheme.js +22 -0
  247. package/dist/theme/darkTheme.d.ts +2 -0
  248. package/dist/theme/darkTheme.js +7 -0
  249. package/dist/theme/index.d.ts +4 -0
  250. package/dist/theme/index.js +4 -0
  251. package/dist/theme/lightTheme.d.ts +2 -0
  252. package/dist/theme/lightTheme.js +7 -0
  253. package/dist/theme/types.d.ts +40 -0
  254. package/dist/theme/types.js +5 -0
  255. package/dist/utils/SvgUniversal.d.ts +29 -0
  256. package/dist/utils/SvgUniversal.js +28 -0
  257. package/dist/utils/genericMemo.d.ts +1 -0
  258. package/dist/utils/genericMemo.js +2 -0
  259. package/dist/utils/makeStyles.d.ts +11 -0
  260. package/dist/utils/makeStyles.js +19 -0
  261. package/package.json +159 -0
package/dist/components/Dialog/DialogComponent.js ADDED
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { View, useWindowDimensions } from 'react-native';
3
+ import { makeStyles } from '../../utils/makeStyles';
4
+ export const DialogComponent = ({ body: Body, footer: Footer, header = null, }) => {
5
+ const styles = useStyles();
6
+ const { width, height } = useWindowDimensions();
7
+ const maxSize = { maxWidth: width - 40, maxHeight: height - 100 };
8
+ return (<View style={[styles.root, maxSize]}>
9
+ {header}
10
+
11
+ {Body ? (<View style={styles.body}>
12
+ <Body />
13
+ </View>) : null}
14
+
15
+ {Footer ? (<View style={styles.footer}>
16
+ <Footer />
17
+ </View>) : null}
18
+ </View>);
19
+ };
20
+ const useStyles = makeStyles(({ theme }) => ({
21
+ root: {
22
+ backgroundColor: theme.Overlay.Dialog.Header.dialogHeaderBg,
23
+ borderColor: theme.Overlay.Overlay.overlayContentBorderColor,
24
+ borderRadius: theme.General.borderRadius2XL,
25
+ },
26
+ body: {
27
+ paddingVertical: theme.Overlay.Dialog.Body.dialogContentPaddingTopBottom,
28
+ paddingHorizontal: theme.Overlay.Dialog.Body.dialogContentPaddingLeftRight,
29
+ },
30
+ footer: {
31
+ paddingBottom: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight,
32
+ paddingHorizontal: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight,
33
+ },
34
+ }));
package/dist/components/Dialog/DialogHeader.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ type Severity = 'danger' | 'warning' | 'info' | 'success' | 'help';
2
+ export interface DialogHeaderProps {
3
+ readonly title: string;
4
+ readonly onClose?: () => void;
5
+ readonly severity?: Severity;
6
+ }
7
+ export declare const DialogHeader: ({ title, onClose, severity, }: DialogHeaderProps) => import("react").JSX.Element;
8
+ export declare const DialogHeaderTestId: {
9
+ title: string;
10
+ closeButton: string;
11
+ };
12
+ export {};
package/dist/components/Dialog/DialogHeader.js ADDED
@@ -0,0 +1,68 @@
1
+ import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconHelpCircle, IconInfoCircle, IconX, } from '@tabler/icons-react-native';
2
+ import { useMemo } from 'react';
3
+ import { TouchableOpacity, View } from 'react-native';
4
+ import { makeStyles } from '../../utils/makeStyles';
5
+ import { Title } from '../Typography';
6
+ const iconsMap = {
7
+ danger: IconCircleX,
8
+ warning: IconAlertTriangle,
9
+ info: IconInfoCircle,
10
+ success: IconCircleCheck,
11
+ help: IconHelpCircle,
12
+ };
13
+ export const DialogHeader = ({ title, onClose, severity, }) => {
14
+ const styles = useStyles();
15
+ const tids = DialogHeaderTestId;
16
+ const icon = useMemo(() => {
17
+ if (!severity)
18
+ return null;
19
+ const Icon = iconsMap[severity];
20
+ return <Icon {...styles.severityIcon} {...styles[severity]}/>;
21
+ }, [severity, styles]);
22
+ return (<>
23
+ <View style={styles.header}>
24
+ {icon}
25
+ <Title level='h3' style={styles.text} testID={tids.title}>
26
+ {title}
27
+ </Title>
28
+ {onClose ? (<TouchableOpacity style={styles.closeTouchable} testID={tids.closeButton} onPress={onClose}>
29
+ <IconX {...styles.closeIcon}/>
30
+ </TouchableOpacity>) : null}
31
+ </View>
32
+
33
+ <View style={styles.separator}/>
34
+ </>);
35
+ };
36
+ const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
37
+ text: { flex: 1 },
38
+ header: {
39
+ flexDirection: 'row',
40
+ gap: spacing.Gap['gap-4'],
41
+ alignItems: 'center',
42
+ paddingBottom: theme.Overlay.Dialog.Header.dialogHeaderPaddingTopBottom,
43
+ padding: theme.Overlay.Dialog.Header.dialogHeaderPaddingLeftRight,
44
+ },
45
+ closeTouchable: { padding: 8 },
46
+ separator: {
47
+ height: border.Width.border,
48
+ backgroundColor: theme.Overlay.Overlay.overlayContentBorderColor,
49
+ },
50
+ closeIcon: {
51
+ width: typography.Size['text-base'],
52
+ height: typography.Size['text-base'],
53
+ color: theme.General.actionIconColor,
54
+ },
55
+ severityIcon: {
56
+ width: typography.Size['text-2xl'],
57
+ height: typography.Size['text-2xl'],
58
+ },
59
+ danger: { color: typography.Color.Service['text-danger'] },
60
+ warning: { color: typography.Color.Service['text-warning'] },
61
+ info: { color: typography.Color.Service['text-info'] },
62
+ success: { color: typography.Color.Service['text-success'] },
63
+ help: { color: typography.Color.Service['text-help'] },
64
+ }));
65
+ export const DialogHeaderTestId = {
66
+ title: 'DialogTitle',
67
+ closeButton: 'DialogCloseButton',
68
+ };
package/dist/components/Dialog/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { Dialog, type DialogProps, DialogTestId } from './Dialog';
2
+ export { DialogComponent, type DialogComponentProps } from './DialogComponent';
3
+ export { DialogHeader, type DialogHeaderProps, DialogHeaderTestId, } from './DialogHeader';
package/dist/components/Dialog/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { Dialog, DialogTestId } from './Dialog';
2
+ export { DialogComponent } from './DialogComponent';
3
+ export { DialogHeader, DialogHeaderTestId, } from './DialogHeader';
package/dist/components/Divider/Divider.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import { type ViewStyle, type StyleProp } from 'react-native';
2
+ import { type SvgSource } from '../../utils/SvgUniversal';
3
+ export interface DividerProps {
4
+ /**
5
+ * Выбор расположения контента относительно линии.
6
+ * В фигме вместо `start/end` используются `left/right`
7
+ * для горизонтальной ориентации и `top/bottom` для вертикальной
8
+ * @default 'center'
9
+ */
10
+ align?: 'start' | 'center' | 'end';
11
+ /**
12
+ * Выбор ориентации компонента (горизонтальная либо вертикальная)
13
+ * @default 'horizontal'
14
+ */
15
+ layout?: 'horizontal' | 'vertical';
16
+ /**
17
+ * Показать или скрыть контейнер контента поверх линии
18
+ * @default true
19
+ */
20
+ showContent?: boolean;
21
+ /**
22
+ * Показать или скрыть иконку внутри контейнера с контентом
23
+ * @default true
24
+ */
25
+ showIcon?: boolean;
26
+ /** Текст */
27
+ text?: string;
28
+ /**
29
+ * Выбор стиля линии
30
+ * @default 'solid'
31
+ */
32
+ type?: 'solid' | 'dash';
33
+ /** Дополнительная стилизация для контейнера компонента */
34
+ style?: StyleProp<ViewStyle>;
35
+ /** SVG-иконка */
36
+ Icon?: SvgSource;
37
+ }
38
+ /**
39
+ * Используется для визуального разделения контента
40
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5178
41
+ */
42
+ export declare const Divider: import("react").NamedExoticComponent<DividerProps>;
package/dist/components/Divider/Divider.js ADDED
@@ -0,0 +1,95 @@
1
+ import { memo, useMemo } from 'react';
2
+ import { View } from 'react-native';
3
+ import { SvgUniversal } from '../../utils/SvgUniversal';
4
+ import { makeStyles } from '../../utils/makeStyles';
5
+ import { Subtitle } from '../Typography';
6
+ /**
7
+ * Используется для визуального разделения контента
8
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5178
9
+ */
10
+ export const Divider = memo(({ align = 'center', layout = 'horizontal', showContent: showContentProp = true, showIcon: showIconProp = true, text, type = 'solid', style, Icon, }) => {
11
+ const styles = useStyles();
12
+ const isVertical = useMemo(() => layout === 'vertical', [layout]);
13
+ const showIcon = useMemo(() => !!(showIconProp && Icon), [Icon, showIconProp]);
14
+ const showContent = useMemo(() => !!(showContentProp && (showIcon || text)), [showContentProp, showIcon, text]);
15
+ const lineStyle = useMemo(() => [styles.line, type === 'dash' && styles.lineDash], [styles.line, styles.lineDash, type]);
16
+ return (<View style={[
17
+ styles.container,
18
+ isVertical && styles.containerVertical,
19
+ showContent &&
20
+ align === 'end' &&
21
+ (isVertical
22
+ ? styles.containerColumnReverse
23
+ : styles.containerRowReverse),
24
+ style,
25
+ ]}>
26
+ {showContent ? (<>
27
+ <View style={[
28
+ styles.lineContainer,
29
+ align !== 'center' && styles.lineContainerSide,
30
+ ]}>
31
+ <View style={lineStyle}/>
32
+ </View>
33
+
34
+ <View style={[styles.content, isVertical && styles.contentVertical]}>
35
+ {showIcon && Icon ? (<SvgUniversal height={styles.icon.height} source={Icon} style={styles.icon} width={styles.icon.width}/>) : null}
36
+ {text ? (<Subtitle color='secondary' style={styles.text}>
37
+ {text}
38
+ </Subtitle>) : null}
39
+ </View>
40
+ </>) : null}
41
+
42
+ <View style={styles.lineContainer}>
43
+ <View style={lineStyle}/>
44
+ </View>
45
+ </View>);
46
+ });
47
+ const useStyles = makeStyles(({ spacing, theme, sizing, typography }) => ({
48
+ container: {
49
+ minHeight: sizing.Height['h-2'],
50
+ flexDirection: 'row',
51
+ justifyContent: 'center',
52
+ alignItems: 'center',
53
+ },
54
+ containerVertical: {
55
+ minWidth: sizing.Width['w-2'],
56
+ flexDirection: 'column',
57
+ flexGrow: 1,
58
+ alignSelf: 'flex-start',
59
+ },
60
+ containerRowReverse: { flexDirection: 'row-reverse' },
61
+ containerColumnReverse: { flexDirection: 'column-reverse' },
62
+ lineContainer: {
63
+ flexGrow: 1,
64
+ flexBasis: spacing.Gap['gap-4'],
65
+ width: 1,
66
+ height: 1,
67
+ overflow: 'hidden',
68
+ },
69
+ lineContainerSide: { flexGrow: 0 },
70
+ line: {
71
+ width: '100%',
72
+ height: '100%',
73
+ borderWidth: 1,
74
+ borderColor: theme.General.dividerColor,
75
+ },
76
+ lineDash: { borderStyle: 'dashed' },
77
+ content: {
78
+ flexShrink: 1,
79
+ flexDirection: 'row',
80
+ alignItems: 'center',
81
+ paddingHorizontal: theme.General.inlineSpacing,
82
+ gap: spacing.Gap['gap-2'],
83
+ backgroundColor: theme.Panel.Panel.Body.panelContentBg,
84
+ },
85
+ contentVertical: {
86
+ paddingHorizontal: 0,
87
+ paddingVertical: theme.General.inlineSpacing,
88
+ },
89
+ icon: {
90
+ width: typography.Size['text-base'],
91
+ height: typography.Size['text-base'],
92
+ color: theme.General.textSecondaryColor,
93
+ },
94
+ text: { flexShrink: 1 },
95
+ }));
package/dist/components/Divider/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Divider, type DividerProps } from './Divider';
package/dist/components/Divider/index.js ADDED
@@ -0,0 +1 @@
1
+ export { Divider } from './Divider';
package/dist/components/Input/FloatLabel.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { type ViewStyle } from 'react-native';
2
+ import type { InputTextBaseProps } from './InputTextBase/types';
3
+ export interface FloatLabelProps extends InputTextBaseProps {
4
+ /** Текст плейсхолдера */
5
+ placeholder: string;
6
+ /** Показать индикатор загрузки в поле */
7
+ loading?: boolean;
8
+ /** Дополнительная стилизация для контейнера компонента */
9
+ style?: ViewStyle;
10
+ }
11
+ /**
12
+ * Компонент для ввода текста с плавающим плейсхолдером
13
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=2168-9279
14
+ * @see InputTextBaseProps
15
+ * @deprecated Используйте {@link InputText} с `floatLabel={true}`
16
+ */
17
+ export declare const FloatLabel: import("react").NamedExoticComponent<FloatLabelProps>;
18
+ export declare const FloatLabelTestId: {
19
+ root: string;
20
+ pressable: string;
21
+ placeholder: string;
22
+ };
package/dist/components/Input/FloatLabel.js ADDED
@@ -0,0 +1,19 @@
1
+ import { memo } from 'react';
2
+ import { View } from 'react-native';
3
+ import { InputTextBase } from './InputTextBase/InputTextBase';
4
+ /**
5
+ * Компонент для ввода текста с плавающим плейсхолдером
6
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=2168-9279
7
+ * @see InputTextBaseProps
8
+ * @deprecated Используйте {@link InputText} с `floatLabel={true}`
9
+ */
10
+ export const FloatLabel = memo(({ style, ...otherProps }) => {
11
+ return (<View style={style}>
12
+ <InputTextBase {...otherProps}/>
13
+ </View>);
14
+ });
15
+ export const FloatLabelTestId = {
16
+ root: 'FloatLabel',
17
+ pressable: 'PressableContainer',
18
+ placeholder: 'Placeholder',
19
+ };
package/dist/components/Input/InputGroup.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { type ViewStyle } from 'react-native';
2
+ import { type InputGroupAddonProps } from './InputGroupAddon';
3
+ import type { InputTextBaseProps } from './InputTextBase/types';
4
+ /** @see InputTextBaseProps */
5
+ interface InputGroupBaseProps {
6
+ /** Содержимое левого аддона группы */
7
+ left?: InputGroupAddonProps['content'];
8
+ /** Содержимое правого аддона группы */
9
+ right?: InputGroupAddonProps['content'];
10
+ /** Дополнительная стилизация для контейнера компонента */
11
+ style?: ViewStyle;
12
+ }
13
+ export type InputGroupProps = InputGroupBaseProps & InputTextBaseProps;
14
+ /**
15
+ * Компонент группы инпута. Позволяет обернуть инпут в группу и добавить кнопки-аддоны слева и справа
16
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5932&m=dev
17
+ * @see InputTextBase
18
+ * @see InputGroupAddon
19
+ */
20
+ export declare const InputGroup: import("react").NamedExoticComponent<InputGroupProps>;
21
+ export {};
package/dist/components/Input/InputGroup.js ADDED
@@ -0,0 +1,52 @@
1
+ import { memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
2
+ import { View, StyleSheet } from 'react-native';
3
+ import { makeStyles } from '../../utils/makeStyles';
4
+ import { InputGroupAddon } from './InputGroupAddon';
5
+ import { InputTextBase } from './InputTextBase/InputTextBase';
6
+ /**
7
+ * Компонент группы инпута. Позволяет обернуть инпут в группу и добавить кнопки-аддоны слева и справа
8
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5932&m=dev
9
+ * @see InputTextBase
10
+ * @see InputGroupAddon
11
+ */
12
+ export const InputGroup = memo(({ left, right, style, disabled, inputRef: propsInputRef, ...otherProps }) => {
13
+ const styles = useStyles();
14
+ const inputRef = useRef(null);
15
+ const focus = useCallback(() => inputRef.current?.focus(), [inputRef]);
16
+ useImperativeHandle(propsInputRef, () => (inputRef.current ? inputRef.current : null), [inputRef]);
17
+ const containerStyle = useMemo(() => {
18
+ return StyleSheet.flatten([
19
+ styles.inputContainer,
20
+ !!left && styles.inputContainerForLeftAddon,
21
+ !!right && styles.inputContainerForRightAddon,
22
+ ]);
23
+ }, [
24
+ left,
25
+ right,
26
+ styles.inputContainer,
27
+ styles.inputContainerForLeftAddon,
28
+ styles.inputContainerForRightAddon,
29
+ ]);
30
+ return (<View style={[styles.container, style]}>
31
+ {left ? (<InputGroupAddon content={left} disabled={disabled} position='left' onPress={focus}/>) : null}
32
+
33
+ <View style={styles.inputWrapper}>
34
+ <InputTextBase containerStyle={containerStyle} disabled={disabled} inputRef={inputRef} {...otherProps}/>
35
+ </View>
36
+
37
+ {right ? (<InputGroupAddon content={right} disabled={disabled} position='right' onPress={focus}/>) : null}
38
+ </View>);
39
+ });
40
+ const useStyles = makeStyles(() => ({
41
+ container: { flexDirection: 'row' },
42
+ inputWrapper: { flexGrow: 1, zIndex: 10 },
43
+ inputContainer: { flexGrow: 1 },
44
+ inputContainerForLeftAddon: {
45
+ borderTopLeftRadius: 0,
46
+ borderBottomLeftRadius: 0,
47
+ },
48
+ inputContainerForRightAddon: {
49
+ borderTopRightRadius: 0,
50
+ borderBottomRightRadius: 0,
51
+ },
52
+ }));
package/dist/components/Input/InputGroupAddon.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { type SvgSource } from '../../utils/SvgUniversal';
2
+ export interface InputGroupAddonProps {
3
+ /** Содержимое аддона инпут группы, текст или SVG-иконка */
4
+ content: string | SvgSource;
5
+ /** Расположение аддона слева или справа в группе */
6
+ position: 'left' | 'right';
7
+ /** Управление активностью аддона */
8
+ disabled?: boolean;
9
+ /** Обработчик нажатия */
10
+ onPress?: () => void;
11
+ }
12
+ /**
13
+ * Служебный компонент для группировки инпута
14
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5932&m=dev
15
+ * @see InputGroup
16
+ */
17
+ export declare const InputGroupAddon: import("react").NamedExoticComponent<InputGroupAddonProps>;
package/dist/components/Input/InputGroupAddon.js ADDED
@@ -0,0 +1,57 @@
1
+ import { memo } from 'react';
2
+ import { Pressable, Text } from 'react-native';
3
+ import { SvgUniversal } from '../../utils/SvgUniversal';
4
+ import { makeStyles } from '../../utils/makeStyles';
5
+ /**
6
+ * Служебный компонент для группировки инпута
7
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5932&m=dev
8
+ * @see InputGroup
9
+ */
10
+ export const InputGroupAddon = memo(({ content, onPress, position, disabled }) => {
11
+ const styles = useStyles();
12
+ return (<Pressable collapsable={false} disabled={disabled} style={[
13
+ styles.container,
14
+ styles[position],
15
+ disabled && styles.disabled,
16
+ ]} testID='InputGroupAddon_Pressable' onPress={onPress}>
17
+ {typeof content === 'string' ? (<Text style={styles.text}>{content}</Text>) : (<SvgUniversal height={styles.icon.height} source={content} style={styles.icon} width={styles.icon.width}/>)}
18
+ </Pressable>);
19
+ });
20
+ const useStyles = makeStyles(({ theme, typography, fonts }) => ({
21
+ container: {
22
+ paddingVertical: theme.Form.InputText.inputPaddingTopBottom,
23
+ paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
24
+ justifyContent: 'center',
25
+ borderRadius: theme.General.borderRadiusXL,
26
+ borderWidth: 1,
27
+ borderColor: theme.Form.InputText.inputBorderColor,
28
+ backgroundColor: theme.Form.InputGroup.inputGroupBg,
29
+ },
30
+ left: {
31
+ borderRightWidth: 0,
32
+ // При меньших значениях возникает баг рендера
33
+ borderTopRightRadius: 0.2,
34
+ borderBottomRightRadius: 0.2,
35
+ },
36
+ right: {
37
+ borderLeftWidth: 0,
38
+ borderTopLeftRadius: 0,
39
+ borderBottomLeftRadius: 0,
40
+ },
41
+ disabled: {
42
+ opacity: 0.6,
43
+ backgroundColor: theme.Button.Disabled.disabledButtonBg,
44
+ },
45
+ text: {
46
+ fontSize: typography.Size['text-base'],
47
+ color: theme.Form.InputGroup.inputGroupTextColor,
48
+ includeFontPadding: false,
49
+ verticalAlign: 'middle',
50
+ fontFamily: fonts.secondary,
51
+ },
52
+ icon: {
53
+ width: typography.Size['text-base'],
54
+ height: typography.Size['text-base'],
55
+ color: theme.Form.InputGroup.inputGroupTextColor,
56
+ },
57
+ }));
package/dist/components/Input/InputSwitch/InputSwitch.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { type PressableProps } from 'react-native';
2
+ export interface InputSwitchProps extends PressableProps {
3
+ checked: boolean;
4
+ onCheckedChange?: (checked: boolean) => void;
5
+ disabled?: boolean;
6
+ danger?: boolean;
7
+ }
8
+ export declare const InputSwitch: import("react").NamedExoticComponent<InputSwitchProps>;
package/dist/components/Input/InputSwitch/InputSwitch.js ADDED
@@ -0,0 +1,16 @@
1
+ import { memo, useCallback } from 'react';
2
+ import { Pressable } from 'react-native';
3
+ import Animated from 'react-native-reanimated';
4
+ import { useHandleStyles, useSliderStyles } from './styles';
5
+ export const InputSwitch = memo(({ checked, onCheckedChange, disabled = false, danger = false, ...props }) => {
6
+ const { sliderStyle, onPressedChange } = useSliderStyles(checked, disabled, danger);
7
+ const { handleStyle } = useHandleStyles(checked);
8
+ const handlePress = useCallback(() => {
9
+ onCheckedChange?.(!checked);
10
+ }, [checked, onCheckedChange]);
11
+ return (<Pressable disabled={disabled} style={onPressedChange} onPress={handlePress} {...props}>
12
+ <Animated.View style={sliderStyle}>
13
+ <Animated.View style={handleStyle}/>
14
+ </Animated.View>
15
+ </Pressable>);
16
+ });
package/dist/components/Input/InputSwitch/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { InputSwitch } from './InputSwitch';
package/dist/components/Input/InputSwitch/index.js ADDED
@@ -0,0 +1 @@
1
+ export { InputSwitch } from './InputSwitch';
package/dist/components/Input/InputSwitch/styles/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { useHandleStyles } from './useHandleStyles';
2
+ export { useSliderStyles } from './useSliderStyles';
package/dist/components/Input/InputSwitch/styles/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { useHandleStyles } from './useHandleStyles';
2
+ export { useSliderStyles } from './useSliderStyles';
package/dist/components/Input/InputSwitch/styles/useHandleStyles.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export declare const useHandleStyles: (checked: boolean) => {
2
+ handleStyle: {
3
+ height: number;
4
+ width: number;
5
+ borderRadius: number;
6
+ backgroundColor: string;
7
+ position: "absolute";
8
+ top: number;
9
+ } | {
10
+ left: import("react-native-reanimated").SharedValue<number>;
11
+ backgroundColor: import("react-native-reanimated").SharedValue<string>;
12
+ };
13
+ };
package/dist/components/Input/InputSwitch/styles/useHandleStyles.js ADDED
@@ -0,0 +1,47 @@
1
+ import { useCallback, useEffect, useMemo } from 'react';
2
+ import { StyleSheet } from 'react-native';
3
+ import { useSharedValue, withTiming } from 'react-native-reanimated';
4
+ import { makeStyles } from '../../../../utils/makeStyles';
5
+ export const useHandleStyles = (checked) => {
6
+ const styles = useStyles();
7
+ const calculateHandleLeftPosition = useCallback((checked) => checked ? styles.handleOn.left : styles.handleOff.left, [styles.handleOff.left, styles.handleOn.left]);
8
+ const calculateHandleBackground = useCallback((checked) => checked ? styles.handleOn.backgroundColor : styles.handle.backgroundColor, [styles.handle.backgroundColor, styles.handleOn.backgroundColor]);
9
+ const handleLeftPosition = useSharedValue(calculateHandleLeftPosition(checked));
10
+ const handlerBackgrouind = useSharedValue(calculateHandleBackground(checked));
11
+ useEffect(() => {
12
+ handleLeftPosition.value = withTiming(calculateHandleLeftPosition(checked));
13
+ handlerBackgrouind.value = withTiming(calculateHandleBackground(checked));
14
+ }, [
15
+ calculateHandleBackground,
16
+ calculateHandleLeftPosition,
17
+ checked,
18
+ handleLeftPosition,
19
+ handlerBackgrouind,
20
+ ]);
21
+ const handleStyle = useMemo(() => StyleSheet.flatten([
22
+ styles.handle,
23
+ { left: handleLeftPosition, backgroundColor: handlerBackgrouind },
24
+ ]), [handleLeftPosition, handlerBackgrouind, styles.handle]);
25
+ return { handleStyle };
26
+ };
27
+ const useStyles = makeStyles(({ theme, border }) => ({
28
+ handle: {
29
+ height: theme.Form.inputSwitch.inputSwitchHandleHeight,
30
+ width: theme.Form.inputSwitch.inputSwitchHandleWidth,
31
+ borderRadius: border.Radius['rounded-full'],
32
+ backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg,
33
+ position: 'absolute',
34
+ top: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border,
35
+ },
36
+ handleOff: {
37
+ backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg,
38
+ left: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border,
39
+ },
40
+ handleOn: {
41
+ backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOnBg,
42
+ left: theme.Form.inputSwitch.inputSwitchWidth -
43
+ theme.Form.inputSwitch.inputSwitchSliderPadding -
44
+ theme.Form.inputSwitch.inputSwitchHandleWidth -
45
+ 1,
46
+ },
47
+ }));
package/dist/components/Input/InputSwitch/styles/useSliderStyles.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { type PressableStateCallbackType } from 'react-native';
2
+ export declare const useSliderStyles: (checked: boolean, disabled: boolean, danger: boolean) => {
3
+ sliderStyle: {
4
+ padding: number;
5
+ height: number;
6
+ width: number;
7
+ borderRadius: number;
8
+ borderWidth: number;
9
+ } | {
10
+ backgroundColor: import("react-native-reanimated").SharedValue<string>;
11
+ borderColor: import("react-native-reanimated").SharedValue<string>;
12
+ };
13
+ onPressedChange: ({ pressed }: PressableStateCallbackType) => {
14
+ height: number;
15
+ width: number;
16
+ };
17
+ };