@retray-dev/ui-kit 6.1.0 → 7.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (321) hide show
  1. package/COMPONENTS.md +447 -13
  2. package/EXAMPLES.md +248 -0
  3. package/README.md +11 -10
  4. package/dist/Accordion.d.mts +28 -0
  5. package/dist/Accordion.d.ts +28 -0
  6. package/dist/Accordion.js +340 -0
  7. package/dist/Accordion.mjs +6 -0
  8. package/dist/AlertBanner.d.mts +16 -0
  9. package/dist/AlertBanner.d.ts +16 -0
  10. package/dist/AlertBanner.js +247 -0
  11. package/dist/AlertBanner.mjs +5 -0
  12. package/dist/Avatar.d.mts +20 -0
  13. package/dist/Avatar.d.ts +20 -0
  14. package/dist/Avatar.js +234 -0
  15. package/dist/Avatar.mjs +3 -0
  16. package/dist/Badge.d.mts +26 -0
  17. package/dist/Badge.d.ts +26 -0
  18. package/dist/Badge.js +247 -0
  19. package/dist/Badge.mjs +4 -0
  20. package/dist/Button.d.mts +25 -0
  21. package/dist/Button.d.ts +25 -0
  22. package/dist/Button.js +414 -0
  23. package/dist/Button.mjs +8 -0
  24. package/dist/ButtonGroup.d.mts +26 -0
  25. package/dist/ButtonGroup.d.ts +26 -0
  26. package/dist/ButtonGroup.js +52 -0
  27. package/dist/ButtonGroup.mjs +2 -0
  28. package/dist/Card.d.mts +39 -0
  29. package/dist/Card.d.ts +39 -0
  30. package/dist/Card.js +329 -0
  31. package/dist/Card.mjs +7 -0
  32. package/dist/CategoryStrip.d.mts +26 -0
  33. package/dist/CategoryStrip.d.ts +26 -0
  34. package/dist/CategoryStrip.js +396 -0
  35. package/dist/CategoryStrip.mjs +9 -0
  36. package/dist/Checkbox.d.mts +14 -0
  37. package/dist/Checkbox.d.ts +14 -0
  38. package/dist/Checkbox.js +304 -0
  39. package/dist/Checkbox.mjs +7 -0
  40. package/dist/Chip.d.mts +31 -0
  41. package/dist/Chip.d.ts +31 -0
  42. package/dist/Chip.js +370 -0
  43. package/dist/Chip.mjs +8 -0
  44. package/dist/ConfirmDialog.d.mts +15 -0
  45. package/dist/ConfirmDialog.d.ts +15 -0
  46. package/dist/ConfirmDialog.js +530 -0
  47. package/dist/ConfirmDialog.mjs +9 -0
  48. package/dist/CurrencyDisplay.d.mts +24 -0
  49. package/dist/CurrencyDisplay.d.ts +24 -0
  50. package/dist/CurrencyDisplay.js +189 -0
  51. package/dist/CurrencyDisplay.mjs +3 -0
  52. package/dist/CurrencyInput.d.mts +26 -0
  53. package/dist/CurrencyInput.d.ts +26 -0
  54. package/dist/CurrencyInput.js +404 -0
  55. package/dist/CurrencyInput.mjs +7 -0
  56. package/dist/DetailRow.d.mts +32 -0
  57. package/dist/DetailRow.d.ts +32 -0
  58. package/dist/DetailRow.js +275 -0
  59. package/dist/DetailRow.mjs +4 -0
  60. package/dist/EmptyState.d.mts +27 -0
  61. package/dist/EmptyState.d.ts +27 -0
  62. package/dist/EmptyState.js +503 -0
  63. package/dist/EmptyState.mjs +9 -0
  64. package/dist/Form.d.mts +52 -0
  65. package/dist/Form.d.ts +52 -0
  66. package/dist/Form.js +204 -0
  67. package/dist/Form.mjs +3 -0
  68. package/dist/IconButton.d.mts +22 -0
  69. package/dist/IconButton.d.ts +22 -0
  70. package/dist/IconButton.js +383 -0
  71. package/dist/IconButton.mjs +7 -0
  72. package/dist/Input.d.mts +23 -0
  73. package/dist/Input.d.ts +23 -0
  74. package/dist/Input.js +351 -0
  75. package/dist/Input.mjs +6 -0
  76. package/dist/LabelValue.d.mts +16 -0
  77. package/dist/LabelValue.d.ts +16 -0
  78. package/dist/LabelValue.js +225 -0
  79. package/dist/LabelValue.mjs +4 -0
  80. package/dist/ListGroup.d.mts +34 -0
  81. package/dist/ListGroup.d.ts +34 -0
  82. package/dist/ListGroup.js +217 -0
  83. package/dist/ListGroup.mjs +4 -0
  84. package/dist/ListItem.d.mts +64 -0
  85. package/dist/ListItem.d.ts +64 -0
  86. package/dist/ListItem.js +430 -0
  87. package/dist/ListItem.mjs +8 -0
  88. package/dist/MediaCard.d.mts +39 -0
  89. package/dist/MediaCard.d.ts +39 -0
  90. package/dist/MediaCard.js +427 -0
  91. package/dist/MediaCard.mjs +8 -0
  92. package/dist/MenuGroup.d.mts +34 -0
  93. package/dist/MenuGroup.d.ts +34 -0
  94. package/dist/MenuGroup.js +217 -0
  95. package/dist/MenuGroup.mjs +4 -0
  96. package/dist/MenuItem.d.mts +48 -0
  97. package/dist/MenuItem.d.ts +48 -0
  98. package/dist/MenuItem.js +403 -0
  99. package/dist/MenuItem.mjs +8 -0
  100. package/dist/MonthPicker.d.mts +20 -0
  101. package/dist/MonthPicker.d.ts +20 -0
  102. package/dist/MonthPicker.js +234 -0
  103. package/dist/MonthPicker.mjs +4 -0
  104. package/dist/Pressable.d.mts +34 -0
  105. package/dist/Pressable.d.ts +34 -0
  106. package/dist/Pressable.js +132 -0
  107. package/dist/Pressable.mjs +4 -0
  108. package/dist/Progress.d.mts +14 -0
  109. package/dist/Progress.d.ts +14 -0
  110. package/dist/Progress.js +191 -0
  111. package/dist/Progress.mjs +4 -0
  112. package/dist/RadioGroup.d.mts +19 -0
  113. package/dist/RadioGroup.d.ts +19 -0
  114. package/dist/RadioGroup.js +341 -0
  115. package/dist/RadioGroup.mjs +7 -0
  116. package/dist/Select.d.mts +22 -0
  117. package/dist/Select.d.ts +22 -0
  118. package/dist/Select.js +441 -0
  119. package/dist/Select.mjs +6 -0
  120. package/dist/Separator.d.mts +10 -0
  121. package/dist/Separator.d.ts +10 -0
  122. package/dist/Separator.js +156 -0
  123. package/dist/Separator.mjs +2 -0
  124. package/dist/Sheet.d.mts +81 -0
  125. package/dist/Sheet.d.ts +81 -0
  126. package/dist/Sheet.js +340 -0
  127. package/dist/Sheet.mjs +4 -0
  128. package/dist/Skeleton.d.mts +17 -0
  129. package/dist/Skeleton.d.ts +17 -0
  130. package/dist/Skeleton.js +205 -0
  131. package/dist/Skeleton.mjs +4 -0
  132. package/dist/Slider.d.mts +20 -0
  133. package/dist/Slider.d.ts +20 -0
  134. package/dist/Slider.js +232 -0
  135. package/dist/Slider.mjs +4 -0
  136. package/dist/Spinner.d.mts +12 -0
  137. package/dist/Spinner.d.ts +12 -0
  138. package/dist/Spinner.js +172 -0
  139. package/dist/Spinner.mjs +3 -0
  140. package/dist/Switch.d.mts +13 -0
  141. package/dist/Switch.d.ts +13 -0
  142. package/dist/Switch.js +261 -0
  143. package/dist/Switch.mjs +5 -0
  144. package/dist/Tabs.d.mts +27 -0
  145. package/dist/Tabs.d.ts +27 -0
  146. package/dist/Tabs.js +389 -0
  147. package/dist/Tabs.mjs +6 -0
  148. package/dist/Text.d.mts +12 -0
  149. package/dist/Text.d.ts +12 -0
  150. package/dist/Text.js +311 -0
  151. package/dist/Text.mjs +4 -0
  152. package/dist/Textarea.d.mts +16 -0
  153. package/dist/Textarea.d.ts +16 -0
  154. package/dist/Textarea.js +333 -0
  155. package/dist/Textarea.mjs +6 -0
  156. package/dist/Toast.d.mts +47 -0
  157. package/dist/Toast.d.ts +47 -0
  158. package/dist/Toast.js +185 -0
  159. package/dist/Toast.mjs +3 -0
  160. package/dist/Toggle.d.mts +33 -0
  161. package/dist/Toggle.d.ts +33 -0
  162. package/dist/Toggle.js +397 -0
  163. package/dist/Toggle.mjs +8 -0
  164. package/dist/VirtualList.d.mts +19 -0
  165. package/dist/VirtualList.d.ts +19 -0
  166. package/dist/VirtualList.js +38 -0
  167. package/dist/VirtualList.mjs +1 -0
  168. package/dist/chunk-2CE3TQVY.mjs +11 -0
  169. package/dist/chunk-2UYENBLV.mjs +49 -0
  170. package/dist/chunk-3BBOZ3OQ.mjs +41 -0
  171. package/dist/chunk-5IKW3VNC.mjs +43 -0
  172. package/dist/chunk-63357L2X.mjs +51 -0
  173. package/dist/chunk-6LQYY7HC.mjs +127 -0
  174. package/dist/chunk-6Q64UFIA.mjs +71 -0
  175. package/dist/chunk-76PFOSM2.mjs +41 -0
  176. package/dist/chunk-7H2OR44A.mjs +14 -0
  177. package/dist/chunk-A4MDAP7G.mjs +42 -0
  178. package/dist/chunk-AU2VDY4P.mjs +190 -0
  179. package/dist/chunk-BRKYVJVV.mjs +60 -0
  180. package/dist/chunk-CRYBX2CM.mjs +146 -0
  181. package/dist/chunk-DITNP6PL.mjs +106 -0
  182. package/dist/chunk-FTLJOUOQ.mjs +97 -0
  183. package/dist/chunk-GCWOGZYL.mjs +104 -0
  184. package/dist/chunk-GNGLDL6Z.mjs +60 -0
  185. package/dist/chunk-GPOUINK5.mjs +148 -0
  186. package/dist/chunk-HSPSMN6U.mjs +115 -0
  187. package/dist/chunk-IRRY3CRZ.mjs +82 -0
  188. package/dist/chunk-JB67UOB5.mjs +92 -0
  189. package/dist/chunk-JBLL7U3U.mjs +64 -0
  190. package/dist/chunk-KWCPOM6W.mjs +136 -0
  191. package/dist/chunk-KZJRQOIU.mjs +64 -0
  192. package/dist/chunk-L7E7TVEZ.mjs +145 -0
  193. package/dist/chunk-LG4DO3DK.mjs +174 -0
  194. package/dist/chunk-LWG526VX.mjs +139 -0
  195. package/dist/chunk-MN7OG7IY.mjs +96 -0
  196. package/dist/chunk-MX6HRKMI.mjs +29 -0
  197. package/dist/chunk-NC5ZTR2Y.mjs +32 -0
  198. package/dist/chunk-NQGVLMWG.mjs +90 -0
  199. package/dist/chunk-QCNARS3X.mjs +46 -0
  200. package/dist/chunk-QXGYKWI7.mjs +134 -0
  201. package/dist/chunk-QY3X2UYR.mjs +191 -0
  202. package/dist/chunk-RKLHUDZS.mjs +92 -0
  203. package/dist/chunk-RMMK64W5.mjs +54 -0
  204. package/dist/chunk-RR2VQLKE.mjs +190 -0
  205. package/dist/chunk-RTC3CFXF.mjs +29 -0
  206. package/dist/chunk-SBZYEV4S.mjs +61 -0
  207. package/dist/chunk-SOA2Z4RB.mjs +82 -0
  208. package/dist/chunk-SOYNZDVY.mjs +151 -0
  209. package/dist/chunk-T7XZ7H7Y.mjs +57 -0
  210. package/dist/chunk-TAJ2PQ2O.mjs +163 -0
  211. package/dist/chunk-U4N7WF4Z.mjs +108 -0
  212. package/dist/chunk-URDE3EUU.mjs +132 -0
  213. package/dist/chunk-URLL5JBR.mjs +245 -0
  214. package/dist/chunk-XDMN67KV.mjs +59 -0
  215. package/dist/chunk-Y6MXOREN.mjs +120 -0
  216. package/dist/chunk-YZJAFS4P.mjs +131 -0
  217. package/dist/index.d.mts +94 -852
  218. package/dist/index.d.ts +94 -852
  219. package/dist/index.js +1387 -942
  220. package/dist/index.mjs +50 -3844
  221. package/package.json +23 -14
  222. package/src/assets/fonts/Sohne-Bold.otf +0 -0
  223. package/src/assets/fonts/Sohne-BoldItalic.otf +0 -0
  224. package/src/assets/fonts/Sohne-ExtraBold.otf +0 -0
  225. package/src/assets/fonts/Sohne-ExtraBoldItalic.otf +0 -0
  226. package/src/assets/fonts/Sohne-ExtraLight.otf +0 -0
  227. package/src/assets/fonts/Sohne-ExtraLightItalic.otf +0 -0
  228. package/src/assets/fonts/Sohne-Italic.otf +0 -0
  229. package/src/assets/fonts/Sohne-Light.otf +0 -0
  230. package/src/assets/fonts/Sohne-LightItalic.otf +0 -0
  231. package/src/assets/fonts/Sohne-Medium.otf +0 -0
  232. package/src/assets/fonts/Sohne-MediumItalic.otf +0 -0
  233. package/src/assets/fonts/Sohne-Regular.otf +0 -0
  234. package/src/assets/fonts/Sohne-SemiBold.otf +0 -0
  235. package/src/assets/fonts/Sohne-SemiBoldItalic.otf +0 -0
  236. package/src/assets/fonts/SohneMono-Bold.otf +0 -0
  237. package/src/assets/fonts/SohneMono-BoldItalic.otf +0 -0
  238. package/src/assets/fonts/SohneMono-ExtraBold.otf +0 -0
  239. package/src/assets/fonts/SohneMono-ExtraBoldItalic.otf +0 -0
  240. package/src/assets/fonts/SohneMono-ExtraLight.otf +0 -0
  241. package/src/assets/fonts/SohneMono-ExtraLightItalic.otf +0 -0
  242. package/src/assets/fonts/SohneMono-Italic.otf +0 -0
  243. package/src/assets/fonts/SohneMono-Light.otf +0 -0
  244. package/src/assets/fonts/SohneMono-LightItalic.otf +0 -0
  245. package/src/assets/fonts/SohneMono-Medium.otf +0 -0
  246. package/src/assets/fonts/SohneMono-MediumItalic.otf +0 -0
  247. package/src/assets/fonts/SohneMono-Regular.otf +0 -0
  248. package/src/assets/fonts/SohneMono-SemiBold.otf +0 -0
  249. package/src/assets/fonts/SohneMono-SemiBoldItalic.otf +0 -0
  250. package/src/components/Accordion/Accordion.tsx +13 -15
  251. package/src/components/AlertBanner/AlertBanner.tsx +33 -12
  252. package/src/components/Avatar/Avatar.tsx +4 -2
  253. package/src/components/Badge/Badge.tsx +4 -2
  254. package/src/components/Button/Button.tsx +30 -29
  255. package/src/components/ButtonGroup/ButtonGroup.tsx +13 -10
  256. package/src/components/Card/Card.tsx +36 -65
  257. package/src/components/CategoryStrip/CategoryStrip.tsx +68 -58
  258. package/src/components/Checkbox/Checkbox.tsx +41 -55
  259. package/src/components/Chip/Chip.tsx +49 -84
  260. package/src/components/ConfirmDialog/ConfirmDialog.tsx +2 -2
  261. package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +4 -2
  262. package/src/components/CurrencyInput/CurrencyInput.tsx +2 -2
  263. package/src/components/DetailRow/DetailRow.tsx +9 -7
  264. package/src/components/EmptyState/EmptyState.tsx +2 -2
  265. package/src/components/Form/Form.tsx +149 -0
  266. package/src/components/Form/index.ts +1 -0
  267. package/src/components/IconButton/IconButton.tsx +24 -20
  268. package/src/components/Input/Input.tsx +63 -50
  269. package/src/components/LabelValue/LabelValue.tsx +6 -4
  270. package/src/components/ListGroup/ListGroup.tsx +145 -0
  271. package/src/components/ListGroup/index.ts +1 -0
  272. package/src/components/ListItem/ListItem.tsx +30 -43
  273. package/src/components/MediaCard/MediaCard.tsx +31 -29
  274. package/src/components/MenuGroup/MenuGroup.tsx +145 -0
  275. package/src/components/MenuGroup/index.ts +1 -0
  276. package/src/components/MenuItem/MenuItem.tsx +29 -40
  277. package/src/components/MonthPicker/MonthPicker.tsx +14 -4
  278. package/src/components/Pressable/Pressable.tsx +27 -46
  279. package/src/components/Progress/Progress.tsx +21 -12
  280. package/src/components/RadioGroup/RadioGroup.tsx +55 -32
  281. package/src/components/Select/Select.tsx +23 -21
  282. package/src/components/Separator/Separator.tsx +1 -3
  283. package/src/components/Sheet/Sheet.tsx +85 -18
  284. package/src/components/Skeleton/Skeleton.tsx +25 -14
  285. package/src/components/Slider/Slider.tsx +13 -3
  286. package/src/components/Spinner/Spinner.tsx +1 -1
  287. package/src/components/Switch/Switch.tsx +70 -52
  288. package/src/components/Tabs/Tabs.tsx +59 -47
  289. package/src/components/Text/Text.tsx +3 -1
  290. package/src/components/Textarea/Textarea.tsx +44 -23
  291. package/src/components/Toast/Toast.tsx +6 -6
  292. package/src/components/Toggle/Toggle.tsx +86 -68
  293. package/src/components/VirtualList/VirtualList.tsx +60 -0
  294. package/src/components/VirtualList/index.ts +1 -0
  295. package/src/fonts.ts +38 -20
  296. package/src/index.ts +5 -1
  297. package/src/theme/colors.ts +53 -39
  298. package/src/theme/types.ts +3 -0
  299. package/src/tokens.ts +49 -39
  300. package/src/utils/animations.ts +58 -0
  301. package/src/utils/icons.ts +47 -20
  302. package/src/utils/useColorTransition.ts +40 -0
  303. package/src/utils/usePressScale.ts +75 -0
  304. package/src/assets/fonts/Poppins-Black.ttf +0 -0
  305. package/src/assets/fonts/Poppins-BlackItalic.ttf +0 -0
  306. package/src/assets/fonts/Poppins-Bold.ttf +0 -0
  307. package/src/assets/fonts/Poppins-BoldItalic.ttf +0 -0
  308. package/src/assets/fonts/Poppins-ExtraBold.ttf +0 -0
  309. package/src/assets/fonts/Poppins-ExtraBoldItalic.ttf +0 -0
  310. package/src/assets/fonts/Poppins-ExtraLight.ttf +0 -0
  311. package/src/assets/fonts/Poppins-ExtraLightItalic.ttf +0 -0
  312. package/src/assets/fonts/Poppins-Italic.ttf +0 -0
  313. package/src/assets/fonts/Poppins-Light.ttf +0 -0
  314. package/src/assets/fonts/Poppins-LightItalic.ttf +0 -0
  315. package/src/assets/fonts/Poppins-Medium.ttf +0 -0
  316. package/src/assets/fonts/Poppins-MediumItalic.ttf +0 -0
  317. package/src/assets/fonts/Poppins-Regular.ttf +0 -0
  318. package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
  319. package/src/assets/fonts/Poppins-SemiBoldItalic.ttf +0 -0
  320. package/src/assets/fonts/Poppins-Thin.ttf +0 -0
  321. package/src/assets/fonts/Poppins-ThinItalic.ttf +0 -0
@@ -0,0 +1,82 @@
1
+ import { RADIUS } from './chunk-QY3X2UYR.mjs';
2
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
3
+ import { vs, s } from './chunk-2CE3TQVY.mjs';
4
+ import React from 'react';
5
+ import { StyleSheet, View, Text } from 'react-native';
6
+
7
+ function MenuGroup({ children, variant = "plain", style }) {
8
+ const { colors } = useTheme();
9
+ const processedChildren = React.Children.map(children, (child, index) => {
10
+ if (!React.isValidElement(child)) return child;
11
+ if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
12
+ return child;
13
+ }
14
+ const childProps = child.props;
15
+ const isMenuItem = "onPress" in childProps;
16
+ if (!isMenuItem) return child;
17
+ const isLast = index === React.Children.count(children) - 1;
18
+ if (childProps["showSeparator"] === void 0 && !isLast) {
19
+ return React.cloneElement(child, {
20
+ showSeparator: true
21
+ });
22
+ }
23
+ return child;
24
+ });
25
+ const cardStyle = variant === "card" ? {
26
+ backgroundColor: colors.card,
27
+ borderRadius: RADIUS.md,
28
+ borderWidth: 1,
29
+ borderColor: colors.border,
30
+ shadowColor: "#000",
31
+ shadowOffset: { width: 0, height: 2 },
32
+ shadowOpacity: 0.06,
33
+ shadowRadius: 6,
34
+ elevation: 2,
35
+ paddingVertical: vs(4)
36
+ } : {};
37
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.container, cardStyle, style] }, processedChildren);
38
+ }
39
+ function MenuGroupHeader({ children, style }) {
40
+ const { colors } = useTheme();
41
+ if (typeof children === "string") {
42
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
43
+ }
44
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, children);
45
+ }
46
+ function MenuGroupFooter({ children, style }) {
47
+ const { colors } = useTheme();
48
+ if (typeof children === "string") {
49
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
50
+ }
51
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
52
+ }
53
+ MenuGroup.Header = MenuGroupHeader;
54
+ MenuGroup.Footer = MenuGroupFooter;
55
+ var styles = StyleSheet.create({
56
+ container: {
57
+ overflow: "hidden"
58
+ },
59
+ header: {
60
+ paddingHorizontal: s(16),
61
+ paddingTop: vs(12),
62
+ paddingBottom: vs(8),
63
+ borderBottomWidth: StyleSheet.hairlineWidth
64
+ },
65
+ headerText: {
66
+ fontFamily: "Sohne-SemiBold",
67
+ fontSize: 13,
68
+ letterSpacing: 0.32,
69
+ textTransform: "uppercase"
70
+ },
71
+ footer: {
72
+ paddingHorizontal: s(16),
73
+ paddingTop: vs(8),
74
+ paddingBottom: vs(12)
75
+ },
76
+ footerText: {
77
+ fontFamily: "Sohne-Regular",
78
+ fontSize: 12
79
+ }
80
+ });
81
+
82
+ export { MenuGroup, MenuGroupFooter, MenuGroupHeader };
@@ -0,0 +1,92 @@
1
+ import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
2
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
3
+ import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
4
+ import React from 'react';
5
+ import { StyleSheet, View, Text } from 'react-native';
6
+
7
+ var weightMap = {
8
+ normal: "Sohne-Regular",
9
+ medium: "Sohne-Medium",
10
+ semibold: "Sohne-SemiBold",
11
+ bold: "Sohne-Bold"
12
+ };
13
+ function DetailRowBase({
14
+ label,
15
+ value,
16
+ separator = "dotted",
17
+ labelWeight = "normal",
18
+ valueColor,
19
+ leftIcon,
20
+ leftIconName,
21
+ leftIconColor,
22
+ rightIconName,
23
+ rightIconColor,
24
+ style,
25
+ labelStyle,
26
+ valueStyle
27
+ }) {
28
+ const { colors } = useTheme();
29
+ const resolvedLeftIcon = leftIconName ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted) : leftIcon;
30
+ const resolvedRightIcon = rightIconName ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted) : null;
31
+ const separatorStyle = separator === "none" ? null : {
32
+ flex: 1,
33
+ height: 1,
34
+ borderBottomWidth: 1,
35
+ borderStyle: separator,
36
+ borderColor: "rgba(128,128,128,0.3)",
37
+ marginHorizontal: s(4)
38
+ };
39
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.row, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.labelSide }, resolvedLeftIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedLeftIcon) : null, typeof label === "string" ? /* @__PURE__ */ React.createElement(
40
+ Text,
41
+ {
42
+ style: [styles.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle],
43
+ allowFontScaling: true
44
+ },
45
+ label
46
+ ) : label), separatorStyle ? /* @__PURE__ */ React.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React.createElement(View, { style: styles.spacer }), /* @__PURE__ */ React.createElement(View, { style: styles.valueSide }, typeof value === "string" ? /* @__PURE__ */ React.createElement(
47
+ Text,
48
+ {
49
+ style: [styles.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
50
+ allowFontScaling: true
51
+ },
52
+ value
53
+ ) : value, resolvedRightIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedRightIcon) : null));
54
+ }
55
+ var DetailRow = React.memo(DetailRowBase);
56
+ var styles = StyleSheet.create({
57
+ row: {
58
+ flexDirection: "row",
59
+ alignItems: "center",
60
+ gap: s(4)
61
+ },
62
+ labelSide: {
63
+ flexDirection: "row",
64
+ alignItems: "center",
65
+ gap: s(4),
66
+ flexShrink: 0
67
+ },
68
+ icon: {
69
+ alignItems: "center",
70
+ justifyContent: "center"
71
+ },
72
+ spacer: {
73
+ flex: 1
74
+ },
75
+ labelText: {
76
+ fontSize: ms(13),
77
+ lineHeight: mvs(18)
78
+ },
79
+ valueSide: {
80
+ flexDirection: "row",
81
+ alignItems: "center",
82
+ gap: s(4),
83
+ flexShrink: 0
84
+ },
85
+ valueText: {
86
+ fontFamily: "Sohne-SemiBold",
87
+ fontSize: ms(13),
88
+ lineHeight: mvs(18)
89
+ }
90
+ });
91
+
92
+ export { DetailRow };
@@ -0,0 +1,64 @@
1
+ import { TIMINGS } from './chunk-5IKW3VNC.mjs';
2
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
3
+ import { s } from './chunk-2CE3TQVY.mjs';
4
+ import React, { useState, useEffect } from 'react';
5
+ import { StyleSheet, View } from 'react-native';
6
+ import Animated, { useSharedValue, withRepeat, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
7
+ import { LinearGradient } from 'expo-linear-gradient';
8
+
9
+ function Skeleton({
10
+ width = "100%",
11
+ height = 16,
12
+ borderRadius = 6,
13
+ preset = "base",
14
+ diameter = 40,
15
+ style
16
+ }) {
17
+ const { colors, colorScheme } = useTheme();
18
+ const shimmer = useSharedValue(0);
19
+ const [containerWidth, setContainerWidth] = useState(300);
20
+ const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
21
+ useEffect(() => {
22
+ shimmer.value = withRepeat(
23
+ withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
24
+ -1,
25
+ false
26
+ );
27
+ }, [shimmer]);
28
+ const shimmerStyle = useAnimatedStyle(() => ({
29
+ transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
30
+ }));
31
+ const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
32
+ const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
33
+ const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
34
+ return /* @__PURE__ */ React.createElement(
35
+ View,
36
+ {
37
+ style: [
38
+ styles.base,
39
+ { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
40
+ style
41
+ ],
42
+ onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
43
+ accessibilityRole: "progressbar",
44
+ accessibilityLabel: "Loading",
45
+ accessibilityState: { busy: true }
46
+ },
47
+ /* @__PURE__ */ React.createElement(Animated.View, { style: [StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React.createElement(
48
+ LinearGradient,
49
+ {
50
+ colors: ["transparent", shimmerHighlight, "transparent"],
51
+ start: { x: 0, y: 0 },
52
+ end: { x: 1, y: 0 },
53
+ style: StyleSheet.absoluteFill
54
+ }
55
+ ))
56
+ );
57
+ }
58
+ var styles = StyleSheet.create({
59
+ base: {
60
+ overflow: "hidden"
61
+ }
62
+ });
63
+
64
+ export { Skeleton };
@@ -0,0 +1,136 @@
1
+ import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
2
+ import { usePressScale } from './chunk-QCNARS3X.mjs';
3
+ import { impactLight } from './chunk-RTC3CFXF.mjs';
4
+ import { PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
5
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
6
+ import { s, ms } from './chunk-2CE3TQVY.mjs';
7
+ import React from 'react';
8
+ import { StyleSheet, TouchableOpacity, ActivityIndicator, View, Text } from 'react-native';
9
+ import Animated from 'react-native-reanimated';
10
+
11
+ var sizeMap = {
12
+ sm: { container: s(32), icon: 16 },
13
+ md: { container: s(44), icon: 20 },
14
+ lg: { container: s(52), icon: 24 }
15
+ };
16
+ function IconButtonBase({
17
+ iconName,
18
+ icon,
19
+ iconColor,
20
+ variant = "primary",
21
+ size = "md",
22
+ loading = false,
23
+ badge,
24
+ disabled,
25
+ style,
26
+ onPress,
27
+ accessibilityLabel,
28
+ accessibilityHint,
29
+ ...props
30
+ }) {
31
+ const { colors } = useTheme();
32
+ const isDisabled = disabled || loading;
33
+ const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
34
+ pressScale: PRESS_SCALE.button,
35
+ disabled: isDisabled
36
+ });
37
+ const handlePress = (e) => {
38
+ impactLight();
39
+ onPress?.(e);
40
+ };
41
+ const containerVariantStyle = {
42
+ primary: { backgroundColor: colors.primary },
43
+ secondary: { backgroundColor: colors.surface },
44
+ outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
45
+ text: { backgroundColor: "transparent" },
46
+ destructive: { backgroundColor: colors.destructive }
47
+ }[variant];
48
+ const defaultIconColor = {
49
+ primary: colors.primaryForeground,
50
+ secondary: colors.foreground,
51
+ outline: colors.foreground,
52
+ text: colors.foreground,
53
+ destructive: colors.destructiveForeground
54
+ }[variant];
55
+ const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
56
+ const { container: containerSize, icon: iconSize } = sizeMap[size];
57
+ const resolvedIcon = iconName ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor) : icon;
58
+ const showBadge = badge !== void 0 && badge !== false && badge !== 0;
59
+ const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
60
+ const showCount = typeof badge === "number" && badge > 0;
61
+ return /* @__PURE__ */ React.createElement(
62
+ Animated.View,
63
+ {
64
+ style: [styles.wrapper, animatedStyle],
65
+ ...hoverHandlers
66
+ },
67
+ /* @__PURE__ */ React.createElement(
68
+ TouchableOpacity,
69
+ {
70
+ style: [
71
+ styles.base,
72
+ containerVariantStyle,
73
+ { width: containerSize, height: containerSize },
74
+ isDisabled && styles.disabled,
75
+ style
76
+ ],
77
+ disabled: isDisabled,
78
+ activeOpacity: 1,
79
+ touchSoundDisabled: true,
80
+ onPress: handlePress,
81
+ onPressIn,
82
+ onPressOut,
83
+ accessibilityRole: "button",
84
+ accessibilityLabel: accessibilityLabel ?? iconName ?? "icon button",
85
+ accessibilityHint,
86
+ accessibilityState: { disabled: isDisabled, busy: loading },
87
+ ...props
88
+ },
89
+ loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
90
+ ),
91
+ showBadge && /* @__PURE__ */ React.createElement(View, { style: [
92
+ styles.badge,
93
+ { backgroundColor: colors.primary },
94
+ showCount ? styles.badgeCount : styles.badgeDot
95
+ ] }, showCount && /* @__PURE__ */ React.createElement(Text, { style: [styles.badgeText, { color: colors.primaryForeground }] }, badgeCount))
96
+ );
97
+ }
98
+ var IconButton = React.memo(IconButtonBase);
99
+ var styles = StyleSheet.create({
100
+ wrapper: {
101
+ alignSelf: "flex-start"
102
+ },
103
+ base: {
104
+ borderRadius: 9999,
105
+ alignItems: "center",
106
+ justifyContent: "center"
107
+ },
108
+ disabled: {
109
+ opacity: 0.45
110
+ },
111
+ badge: {
112
+ position: "absolute",
113
+ top: -2,
114
+ right: -2,
115
+ alignItems: "center",
116
+ justifyContent: "center"
117
+ },
118
+ badgeDot: {
119
+ width: 8,
120
+ height: 8,
121
+ borderRadius: 9999
122
+ },
123
+ badgeCount: {
124
+ minWidth: 16,
125
+ height: 16,
126
+ borderRadius: 9999,
127
+ paddingHorizontal: 3
128
+ },
129
+ badgeText: {
130
+ fontFamily: "Sohne-Bold",
131
+ fontSize: ms(9),
132
+ lineHeight: 14
133
+ }
134
+ });
135
+
136
+ export { IconButton };
@@ -0,0 +1,64 @@
1
+ import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
2
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
3
+ import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
4
+ import React from 'react';
5
+ import { StyleSheet, View, Text } from 'react-native';
6
+
7
+ var sizePadding = {
8
+ sm: { paddingHorizontal: s(8), paddingVertical: vs(2) },
9
+ md: { paddingHorizontal: s(10), paddingVertical: vs(4) },
10
+ lg: { paddingHorizontal: s(12), paddingVertical: vs(6) }
11
+ };
12
+ var sizeFontSize = {
13
+ sm: { fontSize: ms(11) },
14
+ md: { fontSize: ms(13) },
15
+ lg: { fontSize: ms(15) }
16
+ };
17
+ var sizeIconGap = {
18
+ sm: s(4),
19
+ md: s(6),
20
+ lg: s(6)
21
+ };
22
+ var sizeIconSize = { sm: 10, md: 12, lg: 14 };
23
+ function BadgeBase({ label, children, variant = "default", size = "md", icon, iconName, iconColor, style }) {
24
+ const { colors } = useTheme();
25
+ const containerStyle = {
26
+ default: { backgroundColor: colors.primary },
27
+ secondary: { backgroundColor: colors.surface },
28
+ destructive: { backgroundColor: colors.destructive },
29
+ outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: colors.border },
30
+ success: { backgroundColor: colors.success },
31
+ warning: { backgroundColor: colors.warning },
32
+ successOutline: { backgroundColor: colors.successTint, borderWidth: 1, borderColor: colors.successBorder },
33
+ destructiveOutline: { backgroundColor: colors.destructiveTint, borderWidth: 1, borderColor: colors.destructiveBorder },
34
+ warningOutline: { backgroundColor: colors.warningTint, borderWidth: 1, borderColor: colors.warningBorder }
35
+ }[variant];
36
+ const textColor = {
37
+ default: colors.primaryForeground,
38
+ secondary: colors.foreground,
39
+ destructive: colors.destructiveForeground,
40
+ outline: colors.foreground,
41
+ success: colors.successForeground,
42
+ warning: colors.warningForeground,
43
+ successOutline: colors.success,
44
+ destructiveOutline: colors.destructive,
45
+ warningOutline: colors.warning
46
+ }[variant];
47
+ const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
48
+ const content = children ?? label;
49
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, effectiveIcon, typeof content === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
50
+ }
51
+ var Badge = React.memo(BadgeBase);
52
+ var styles = StyleSheet.create({
53
+ container: {
54
+ borderRadius: 9999,
55
+ alignSelf: "flex-start",
56
+ flexDirection: "row",
57
+ alignItems: "center"
58
+ },
59
+ label: {
60
+ fontFamily: "Sohne-Medium"
61
+ }
62
+ });
63
+
64
+ export { Badge };
@@ -0,0 +1,145 @@
1
+ import { useColorTransition } from './chunk-7H2OR44A.mjs';
2
+ import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
3
+ import { TIMINGS } from './chunk-5IKW3VNC.mjs';
4
+ import { useTheme } from './chunk-SOYNZDVY.mjs';
5
+ import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
6
+ import React, { useState } from 'react';
7
+ import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
8
+ import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
9
+ import { AntDesign } from '@expo/vector-icons';
10
+
11
+ var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
12
+ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
13
+ const { colors } = useTheme();
14
+ const [focused, setFocused] = useState(false);
15
+ const [showPassword, setShowPassword] = useState(false);
16
+ const focusProgress = useColorTransition(focused, {
17
+ duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
18
+ });
19
+ const isDisabled = disabled || editable === false;
20
+ const isPassword = type === "password";
21
+ const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
22
+ const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
23
+ const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React.createElement(
24
+ TouchableOpacity,
25
+ {
26
+ onPress: () => setShowPassword(!showPassword),
27
+ style: styles.passwordToggle,
28
+ activeOpacity: 0.6,
29
+ accessibilityRole: "button",
30
+ accessibilityLabel: showPassword ? "Hide password" : "Show password"
31
+ },
32
+ /* @__PURE__ */ React.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
33
+ ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
34
+ const borderAnimStyle = useAnimatedStyle(() => ({
35
+ borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
36
+ borderWidth: error ? 2 : interpolate(focusProgress.value, [0, 1], [1, 2])
37
+ }));
38
+ return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
39
+ Animated.View,
40
+ {
41
+ style: [
42
+ styles.inputWrapper,
43
+ { backgroundColor: isDisabled ? colors.surface : colors.background },
44
+ inputWrapperStyle
45
+ ]
46
+ },
47
+ /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
48
+ effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React.createElement(View, { style: styles.prefixContainer }, effectivePrefix) : null,
49
+ /* @__PURE__ */ React.createElement(
50
+ TextInput,
51
+ {
52
+ style: [
53
+ styles.input,
54
+ { color: colors.foreground },
55
+ webInputResetStyle,
56
+ style
57
+ ],
58
+ onFocus: (e) => {
59
+ setFocused(true);
60
+ onFocus?.(e);
61
+ },
62
+ onBlur: (e) => {
63
+ setFocused(false);
64
+ onBlur?.(e);
65
+ },
66
+ placeholderTextColor: colors.foregroundMuted,
67
+ allowFontScaling: true,
68
+ secureTextEntry: effectiveSecure,
69
+ editable: isDisabled ? false : editable,
70
+ accessibilityLabel: accessibilityLabel ?? label,
71
+ ...props
72
+ }
73
+ ),
74
+ effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.suffixText, { color: colors.foregroundMuted }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React.createElement(View, { style: styles.suffixContainer }, effectiveSuffix) : null
75
+ ), error ? /* @__PURE__ */ React.createElement(
76
+ Text,
77
+ {
78
+ style: [styles.helperText, { color: colors.destructive }],
79
+ allowFontScaling: true,
80
+ accessibilityLiveRegion: "polite"
81
+ },
82
+ error
83
+ ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
84
+ }
85
+ var styles = StyleSheet.create({
86
+ container: {
87
+ gap: vs(8)
88
+ },
89
+ containerDisabled: {
90
+ opacity: 0.6
91
+ },
92
+ label: {
93
+ fontFamily: "Sohne-Medium",
94
+ fontSize: ms(14)
95
+ },
96
+ inputWrapper: {
97
+ flexDirection: "row",
98
+ alignItems: "center",
99
+ // Border lives on borderOverlay (absolute) so its 1px→2px focus change
100
+ // never resizes this box. Wrapper itself carries no border.
101
+ borderRadius: 8,
102
+ paddingHorizontal: s(14),
103
+ paddingVertical: vs(11),
104
+ minHeight: 48
105
+ },
106
+ borderOverlay: {
107
+ ...StyleSheet.absoluteFillObject,
108
+ borderRadius: 8
109
+ },
110
+ input: {
111
+ fontFamily: "Sohne-Regular",
112
+ flex: 1,
113
+ fontSize: ms(16),
114
+ paddingVertical: vs(2),
115
+ includeFontPadding: false
116
+ },
117
+ prefixContainer: {
118
+ marginRight: s(8)
119
+ },
120
+ prefixText: {
121
+ fontFamily: "Sohne-Regular",
122
+ fontSize: ms(15),
123
+ marginRight: s(8)
124
+ },
125
+ suffixContainer: {
126
+ marginLeft: s(8)
127
+ },
128
+ suffixText: {
129
+ fontFamily: "Sohne-Regular",
130
+ fontSize: ms(15),
131
+ marginLeft: s(8)
132
+ },
133
+ // AUDIT FIX: was padding: s(4) → ~28px tap target. Now 12px padding → ~44px.
134
+ // Negative margin compensates so the visual icon position is unchanged.
135
+ passwordToggle: {
136
+ padding: s(12),
137
+ margin: -s(8)
138
+ },
139
+ helperText: {
140
+ fontFamily: "Sohne-Regular",
141
+ fontSize: ms(13)
142
+ }
143
+ });
144
+
145
+ export { Input };