@btndprojects/loam-ui-native 0.0.0-stage → 0.1.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 (269) hide show
  1. package/LICENSE +21 -0
  2. package/dist/accordion/index.js +3 -0
  3. package/dist/adaptive/index.js +2 -0
  4. package/dist/alert/index.js +3 -0
  5. package/dist/analyzer/index.js +6 -0
  6. package/dist/announcement/index.js +6 -0
  7. package/dist/audio-player/index.js +3 -0
  8. package/dist/avatar/index.js +3 -0
  9. package/dist/avatar-group/index.js +3 -0
  10. package/dist/badge/index.js +5 -0
  11. package/dist/banner/index.js +2 -0
  12. package/dist/board/index.js +7 -0
  13. package/dist/button/index.js +5 -0
  14. package/dist/camera-permission/index.js +13 -0
  15. package/dist/capture-result/index.js +18 -0
  16. package/dist/card/index.js +4 -0
  17. package/dist/card-form/index.js +10 -0
  18. package/dist/carousel/index.js +2 -0
  19. package/dist/chart/index.js +6 -0
  20. package/dist/charts/index.js +7 -0
  21. package/dist/checkbox/index.js +7 -0
  22. package/dist/checklist/index.js +10 -0
  23. package/dist/checkout/index.js +13 -0
  24. package/dist/chip/index.js +7 -0
  25. package/dist/chunk-223Q2T2Q.js +229 -0
  26. package/dist/chunk-2A5NIQAK.js +254 -0
  27. package/dist/chunk-2GK6PHGE.js +363 -0
  28. package/dist/chunk-2WUTXHMU.js +1 -0
  29. package/dist/chunk-2ZZ7TDJ4.js +324 -0
  30. package/dist/chunk-35OFI3JG.js +499 -0
  31. package/dist/chunk-3ARE4TES.js +195 -0
  32. package/dist/chunk-3ECPOSKO.js +1 -0
  33. package/dist/chunk-3ENTMPQY.js +229 -0
  34. package/dist/chunk-3HJH6FF4.js +98 -0
  35. package/dist/chunk-3NMD74ZU.js +4 -0
  36. package/dist/chunk-3WPW4KUN.js +182 -0
  37. package/dist/chunk-47FWHGUN.js +394 -0
  38. package/dist/chunk-4BXMXBJO.js +141 -0
  39. package/dist/chunk-4DS5ZWVC.js +83 -0
  40. package/dist/chunk-4GBOGOTV.js +295 -0
  41. package/dist/chunk-4SZYY6AN.js +99 -0
  42. package/dist/chunk-4YIP3CWS.js +237 -0
  43. package/dist/chunk-4YQOR7JM.js +204 -0
  44. package/dist/chunk-4ZAHCY44.js +177 -0
  45. package/dist/chunk-52X2VYTD.js +228 -0
  46. package/dist/chunk-5P26LBDL.js +1 -0
  47. package/dist/chunk-5XLRYDAX.js +1 -0
  48. package/dist/chunk-5YNTNN5A.js +177 -0
  49. package/dist/chunk-66SG2H23.js +129 -0
  50. package/dist/chunk-6HT2LP62.js +504 -0
  51. package/dist/chunk-6N33LFQA.js +35 -0
  52. package/dist/chunk-6X6PQ443.js +432 -0
  53. package/dist/chunk-7CFF4HXS.js +126 -0
  54. package/dist/chunk-7O2FMUPT.js +755 -0
  55. package/dist/chunk-AI4DWZCD.js +162 -0
  56. package/dist/chunk-AWJOCGFZ.js +213 -0
  57. package/dist/chunk-AZRX6SAC.js +285 -0
  58. package/dist/chunk-B54QE2FN.js +1 -0
  59. package/dist/chunk-BC475SJH.js +1 -0
  60. package/dist/chunk-BEDBFJND.js +202 -0
  61. package/dist/chunk-BTTFCMKG.js +166 -0
  62. package/dist/chunk-BV3B2HYZ.js +1635 -0
  63. package/dist/chunk-C2NTXVWM.js +98 -0
  64. package/dist/chunk-CDRZHT42.js +424 -0
  65. package/dist/chunk-CJ5EOYZE.js +62 -0
  66. package/dist/chunk-CUMUNPXY.js +128 -0
  67. package/dist/chunk-CUS3ZSCU.js +1 -0
  68. package/dist/chunk-CYRBHQQZ.js +411 -0
  69. package/dist/chunk-DHWADYZX.js +144 -0
  70. package/dist/chunk-DKCSPATL.js +1 -0
  71. package/dist/chunk-DM5QUKKO.js +326 -0
  72. package/dist/chunk-DSJBXLUG.js +845 -0
  73. package/dist/chunk-DYBH2I6W.js +1 -0
  74. package/dist/chunk-DZ255O2F.js +1 -0
  75. package/dist/chunk-E35BPSGW.js +1 -0
  76. package/dist/chunk-EJBDRVIH.js +166 -0
  77. package/dist/chunk-F43NP42L.js +1 -0
  78. package/dist/chunk-F5XNPWS7.js +1024 -0
  79. package/dist/chunk-FIF2M24N.js +1521 -0
  80. package/dist/chunk-FOKG57CR.js +993 -0
  81. package/dist/chunk-G3HOYSF7.js +1 -0
  82. package/dist/chunk-GDKZTW34.js +395 -0
  83. package/dist/chunk-GL7B2DOW.js +134 -0
  84. package/dist/chunk-GNNJ4GCC.js +471 -0
  85. package/dist/chunk-GNZ56EUI.js +1 -0
  86. package/dist/chunk-H6NIOQHK.js +346 -0
  87. package/dist/chunk-H6PC7RDA.js +1 -0
  88. package/dist/chunk-HPPW424V.js +334 -0
  89. package/dist/chunk-HQOQIBJI.js +1 -0
  90. package/dist/chunk-HU2EQNRZ.js +44 -0
  91. package/dist/chunk-IIQTAY3J.js +715 -0
  92. package/dist/chunk-ITTYJZWX.js +271 -0
  93. package/dist/chunk-IVNRBPGC.js +1018 -0
  94. package/dist/chunk-J4KLDGI4.js +1 -0
  95. package/dist/chunk-J7Q7VCVC.js +254 -0
  96. package/dist/chunk-JDEOITQ2.js +1 -0
  97. package/dist/chunk-JNH2TYIN.js +96 -0
  98. package/dist/chunk-JRLTGLN4.js +1 -0
  99. package/dist/chunk-JTRJJLKL.js +1 -0
  100. package/dist/chunk-JUAMLEHX.js +379 -0
  101. package/dist/chunk-JXJB2X6M.js +131 -0
  102. package/dist/chunk-KMI5ML5I.js +262 -0
  103. package/dist/chunk-KTAC4MGE.js +4 -0
  104. package/dist/chunk-LAECSR4H.js +178 -0
  105. package/dist/chunk-LK4BCSGX.js +1 -0
  106. package/dist/chunk-LOE5YNN3.js +470 -0
  107. package/dist/chunk-LRJNDEIA.js +302 -0
  108. package/dist/chunk-LSS54GLJ.js +116 -0
  109. package/dist/chunk-LZLHELAG.js +137 -0
  110. package/dist/chunk-M2LUXGKZ.js +1 -0
  111. package/dist/chunk-MOUJOP55.js +425 -0
  112. package/dist/chunk-N32RGOA5.js +159 -0
  113. package/dist/chunk-N5ZNE2YE.js +1 -0
  114. package/dist/chunk-NBNCBML6.js +1 -0
  115. package/dist/chunk-NKB7BZYK.js +167 -0
  116. package/dist/chunk-NQYBUO3K.js +1795 -0
  117. package/dist/chunk-NY2U3PBI.js +59 -0
  118. package/dist/chunk-O4AEHWII.js +464 -0
  119. package/dist/chunk-O7AE6DAF.js +146 -0
  120. package/dist/chunk-OETCUXQP.js +134 -0
  121. package/dist/chunk-OOPPQH27.js +179 -0
  122. package/dist/chunk-OPXFZ4Y5.js +204 -0
  123. package/dist/chunk-P23EQNRQ.js +338 -0
  124. package/dist/chunk-PJXUJYS6.js +248 -0
  125. package/dist/chunk-PNWUWOBF.js +1 -0
  126. package/dist/chunk-PUPM2YGF.js +376 -0
  127. package/dist/chunk-PZXZJBMP.js +620 -0
  128. package/dist/chunk-Q72LJOVE.js +169 -0
  129. package/dist/chunk-QCDXZBC5.js +247 -0
  130. package/dist/chunk-QDYDBCFP.js +197 -0
  131. package/dist/chunk-QJJ6MADV.js +274 -0
  132. package/dist/chunk-QKXCPTFS.js +349 -0
  133. package/dist/chunk-QWCMU5B2.js +860 -0
  134. package/dist/chunk-RGQWWKLA.js +634 -0
  135. package/dist/chunk-RIBDXGUG.js +108 -0
  136. package/dist/chunk-RJQOOHT2.js +214 -0
  137. package/dist/chunk-RNGLIHFA.js +191 -0
  138. package/dist/chunk-RQ3HASCC.js +6 -0
  139. package/dist/chunk-RSOJT5YW.js +124 -0
  140. package/dist/chunk-RTIKSY6A.js +1 -0
  141. package/dist/chunk-RUZHTGKB.js +237 -0
  142. package/dist/chunk-RW6ZL2FQ.js +284 -0
  143. package/dist/chunk-S7F6XLTK.js +540 -0
  144. package/dist/chunk-SBMNWWBV.js +155 -0
  145. package/dist/chunk-SDTQPRRB.js +1 -0
  146. package/dist/chunk-SYNOJOQO.js +377 -0
  147. package/dist/chunk-T753XT36.js +1 -0
  148. package/dist/chunk-TKQYWZ5V.js +196 -0
  149. package/dist/chunk-TKVFVF5D.js +95 -0
  150. package/dist/chunk-TOXAGRDQ.js +144 -0
  151. package/dist/chunk-TUTI5HOZ.js +112 -0
  152. package/dist/chunk-U7TFM2JA.js +140 -0
  153. package/dist/chunk-UC2WGUP3.js +627 -0
  154. package/dist/chunk-UWFLYMAR.js +1126 -0
  155. package/dist/chunk-UWSZB7BJ.js +1 -0
  156. package/dist/chunk-UYG5L34B.js +87 -0
  157. package/dist/chunk-VBOXAEPI.js +336 -0
  158. package/dist/chunk-VCDBXW5H.js +188 -0
  159. package/dist/chunk-VCXPHHDS.js +1 -0
  160. package/dist/chunk-VEAYTRPX.js +414 -0
  161. package/dist/chunk-VFCUIDRT.js +1 -0
  162. package/dist/chunk-VQHPQEUH.js +273 -0
  163. package/dist/chunk-VXDZFJGP.js +874 -0
  164. package/dist/chunk-WS56BL3D.js +1 -0
  165. package/dist/chunk-WSW6ZFAQ.js +98 -0
  166. package/dist/chunk-WVKKJA6U.js +870 -0
  167. package/dist/chunk-XNUVB5OL.js +375 -0
  168. package/dist/chunk-XOSCY2CW.js +242 -0
  169. package/dist/chunk-XXXEFXY5.js +99 -0
  170. package/dist/chunk-Y5CSSPV4.js +1 -0
  171. package/dist/chunk-Y6DU4J47.js +1 -0
  172. package/dist/chunk-YC6WORFL.js +535 -0
  173. package/dist/chunk-YDGVJETP.js +60 -0
  174. package/dist/chunk-YF4NSSMT.js +366 -0
  175. package/dist/chunk-YG3ZJHGU.js +223 -0
  176. package/dist/chunk-YIJ55TBC.js +1 -0
  177. package/dist/chunk-YKZ4RZZF.js +1 -0
  178. package/dist/chunk-YLLCXTMC.js +37 -0
  179. package/dist/chunk-YTA74UZR.js +1 -0
  180. package/dist/chunk-Z7H7VSFZ.js +323 -0
  181. package/dist/chunk-ZK2H4O5P.js +1 -0
  182. package/dist/chunk-ZVFE5QGU.js +524 -0
  183. package/dist/coachmark/index.js +4 -0
  184. package/dist/code-block/index.js +4 -0
  185. package/dist/color-field/index.js +7 -0
  186. package/dist/commerce/index.js +20 -0
  187. package/dist/connectivity/index.js +2 -0
  188. package/dist/context-menu/index.js +5 -0
  189. package/dist/copy-button/index.js +3 -0
  190. package/dist/data-grid/index.js +24 -0
  191. package/dist/date-range-picker/index.js +13 -0
  192. package/dist/description-list/index.js +2 -0
  193. package/dist/dialog/index.js +3 -0
  194. package/dist/empty-state/index.js +3 -0
  195. package/dist/error-summary/index.js +3 -0
  196. package/dist/fab/index.js +2 -0
  197. package/dist/file-upload/index.js +9 -0
  198. package/dist/filter-bar/index.js +8 -0
  199. package/dist/flow-run/index.js +14 -0
  200. package/dist/form/index.js +3 -0
  201. package/dist/gallery/index.js +2 -0
  202. package/dist/header/index.js +5 -0
  203. package/dist/hold-to-confirm/index.js +4 -0
  204. package/dist/index.d.ts +22883 -0
  205. package/dist/index.js +158 -0
  206. package/dist/infinite-list/index.js +2 -0
  207. package/dist/inline-edit/index.js +5 -0
  208. package/dist/input/index.js +5 -0
  209. package/dist/interactions/index.js +2 -0
  210. package/dist/invoice/index.js +10 -0
  211. package/dist/kbd/index.js +1 -0
  212. package/dist/keyboard/index.js +3 -0
  213. package/dist/list-row/index.js +7 -0
  214. package/dist/log-viewer/index.js +2 -0
  215. package/dist/map-view/index.js +3 -0
  216. package/dist/markdown/index.js +6 -0
  217. package/dist/metric/index.js +4 -0
  218. package/dist/money/index.js +3 -0
  219. package/dist/nav-drawer/index.js +2 -0
  220. package/dist/navigation/index.js +2 -0
  221. package/dist/notification-center/index.js +16 -0
  222. package/dist/number-roll/index.js +3 -0
  223. package/dist/one-handed/index.js +5 -0
  224. package/dist/os-surfaces/index.js +3 -0
  225. package/dist/otp/index.js +7 -0
  226. package/dist/page-header/index.js +1 -0
  227. package/dist/payment-method/index.js +12 -0
  228. package/dist/payment-status/index.js +16 -0
  229. package/dist/permission/index.js +2 -0
  230. package/dist/picker/index.js +7 -0
  231. package/dist/progress/index.js +5 -0
  232. package/dist/pull-to-refresh/index.js +4 -0
  233. package/dist/radio-group/index.js +6 -0
  234. package/dist/rating/index.js +2 -0
  235. package/dist/receivables/index.js +20 -0
  236. package/dist/refund/index.js +16 -0
  237. package/dist/save-status/index.js +3 -0
  238. package/dist/scroll-area/index.js +1 -0
  239. package/dist/search-bar/index.js +5 -0
  240. package/dist/segmented-control/index.js +5 -0
  241. package/dist/sheet/index.js +4 -0
  242. package/dist/skeleton/index.js +2 -0
  243. package/dist/slider/index.js +5 -0
  244. package/dist/spinner/index.js +2 -0
  245. package/dist/split-button/index.js +7 -0
  246. package/dist/spotlight/index.js +2 -0
  247. package/dist/stage-timeline/index.js +4 -0
  248. package/dist/status-dot/index.js +2 -0
  249. package/dist/stepper/index.js +6 -0
  250. package/dist/streaming-text/index.js +3 -0
  251. package/dist/survey/index.js +19 -0
  252. package/dist/switch/index.js +5 -0
  253. package/dist/system-state/index.js +4 -0
  254. package/dist/tab-bar/index.js +2 -0
  255. package/dist/tabs/index.js +2 -0
  256. package/dist/textarea/index.js +6 -0
  257. package/dist/thinking/index.js +2 -0
  258. package/dist/timeline/index.js +4 -0
  259. package/dist/toast/index.js +2 -0
  260. package/dist/toolbar/index.js +2 -0
  261. package/dist/tour/index.js +11 -0
  262. package/dist/truncation-notice/index.js +2 -0
  263. package/dist/update-notice/index.js +11 -0
  264. package/dist/video-player/index.js +2 -0
  265. package/dist/viewfinder/index.js +5 -0
  266. package/dist/widget/index.js +4 -0
  267. package/dist/wizard/index.js +6 -0
  268. package/package.json +76 -3
  269. package/README.md +0 -3
@@ -0,0 +1,128 @@
1
+ import { useResolvedMotion } from './chunk-6N33LFQA.js';
2
+ import * as React from 'react';
3
+ import { StyleSheet, AccessibilityInfo, View, Text, Animated, Easing } from 'react-native';
4
+ import { useLoamTheme } from '@btndprojects/loam-theme-native';
5
+ import { jsx } from 'react/jsx-runtime';
6
+
7
+ var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
8
+ function isDigit(ch) {
9
+ return ch >= "0" && ch <= "9";
10
+ }
11
+ function RollDigit({
12
+ digit,
13
+ index,
14
+ lineHeight,
15
+ glyphStyle,
16
+ animate,
17
+ duration,
18
+ easing,
19
+ stagger
20
+ }) {
21
+ const anim = React.useRef(new Animated.Value(digit)).current;
22
+ const mounted = React.useRef(false);
23
+ React.useEffect(() => {
24
+ if (!mounted.current) {
25
+ mounted.current = true;
26
+ anim.setValue(digit);
27
+ return;
28
+ }
29
+ if (!animate) {
30
+ anim.setValue(digit);
31
+ return;
32
+ }
33
+ Animated.timing(anim, {
34
+ toValue: digit,
35
+ duration,
36
+ delay: index * stagger,
37
+ easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
38
+ useNativeDriver: true
39
+ }).start();
40
+ }, [digit, animate, duration, index, stagger, easing, anim]);
41
+ const translateY = Animated.multiply(anim, -lineHeight);
42
+ return /* @__PURE__ */ jsx(View, { style: { height: lineHeight, overflow: "hidden" }, children: /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ translateY }] }, children: DIGITS.map((d) => /* @__PURE__ */ jsx(Text, { style: [glyphStyle, { height: lineHeight, lineHeight }], children: d }, d)) }) });
43
+ }
44
+ function NumberRoll({
45
+ value,
46
+ format,
47
+ locale,
48
+ formatValue,
49
+ textStyle,
50
+ motion = "full",
51
+ animateOnMount = false,
52
+ announce = false,
53
+ decorative = false,
54
+ accessibilityLabel,
55
+ style,
56
+ testID
57
+ }) {
58
+ const theme = useLoamTheme();
59
+ const resolved = useResolvedMotion(motion);
60
+ const canAnimate = resolved === "full";
61
+ const text = React.useMemo(() => {
62
+ if (formatValue) return formatValue(value);
63
+ if (format) return new Intl.NumberFormat(locale, format).format(value);
64
+ return String(value);
65
+ }, [formatValue, format, locale, value]);
66
+ const [ready, setReady] = React.useState(false);
67
+ React.useEffect(() => {
68
+ setReady(true);
69
+ }, []);
70
+ const animate = canAnimate && (ready || animateOnMount);
71
+ const rollInPending = animateOnMount && canAnimate && !ready;
72
+ React.useEffect(() => {
73
+ if (announce && !decorative) AccessibilityInfo.announceForAccessibility(text);
74
+ }, [announce, decorative, text]);
75
+ const flat = StyleSheet.flatten(textStyle) ?? {};
76
+ const fontSize = typeof flat.fontSize === "number" ? flat.fontSize : 16;
77
+ const lineHeight = typeof flat.lineHeight === "number" ? flat.lineHeight : Math.round(fontSize * 1.2);
78
+ const glyphStyle = {
79
+ ...flat,
80
+ lineHeight,
81
+ textAlign: "center",
82
+ fontVariant: ["tabular-nums"]
83
+ };
84
+ const springEasing = theme.motion.spring.easing;
85
+ const duration = theme.motion.spring.duration;
86
+ const stagger = theme.timing.stagger;
87
+ const tokens = React.useMemo(() => Array.from(text), [text]);
88
+ let digitIndex = 0;
89
+ const a11y = decorative ? { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" } : {
90
+ accessibilityRole: "text",
91
+ accessibilityLabel: accessibilityLabel ?? text,
92
+ accessibilityLiveRegion: announce ? "polite" : "none"
93
+ };
94
+ return /* @__PURE__ */ jsx(View, { style: [styles.row, style], testID, ...a11y, children: /* @__PURE__ */ jsx(
95
+ View,
96
+ {
97
+ style: styles.row,
98
+ accessibilityElementsHidden: true,
99
+ importantForAccessibility: "no-hide-descendants",
100
+ children: tokens.map((ch, i) => {
101
+ const key = String(tokens.length - 1 - i);
102
+ if (isDigit(ch)) {
103
+ const index = digitIndex++;
104
+ return /* @__PURE__ */ jsx(
105
+ RollDigit,
106
+ {
107
+ digit: rollInPending ? 0 : Number(ch),
108
+ index,
109
+ lineHeight,
110
+ glyphStyle,
111
+ animate,
112
+ duration,
113
+ easing: springEasing,
114
+ stagger
115
+ },
116
+ key
117
+ );
118
+ }
119
+ return /* @__PURE__ */ jsx(Text, { style: glyphStyle, children: ch }, key);
120
+ })
121
+ }
122
+ ) });
123
+ }
124
+ var styles = StyleSheet.create({
125
+ row: { flexDirection: "row", alignItems: "center" }
126
+ });
127
+
128
+ export { NumberRoll };
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,411 @@
1
+ import { Icon } from './chunk-TKVFVF5D.js';
2
+ import * as React from 'react';
3
+ import { View, Text, Pressable, Animated, Easing, PanResponder } from 'react-native';
4
+ import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
5
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
+
7
+ var SEVERITY_ICON = {
8
+ info: "info",
9
+ success: "check-circle",
10
+ warning: "alert-triangle",
11
+ error: "alert-circle"
12
+ };
13
+ var SEVERITY_DURATION = {
14
+ info: 4e3,
15
+ success: 7e3,
16
+ warning: 7e3,
17
+ error: Number.POSITIVE_INFINITY
18
+ };
19
+ function severityColors(theme, severity) {
20
+ switch (severity) {
21
+ case "success":
22
+ return { glyph: theme.color.goodOnSoft, soft: theme.color.goodSoft, edge: theme.edge.good };
23
+ case "warning":
24
+ return { glyph: theme.color.warnOnSoft, soft: theme.color.warnSoft, edge: theme.edge.warn };
25
+ case "error":
26
+ return {
27
+ glyph: theme.color.dangerOnSoft,
28
+ soft: theme.color.dangerSoft,
29
+ edge: theme.edge.danger
30
+ };
31
+ default:
32
+ return { glyph: theme.color.infoOnSoft, soft: theme.color.infoSoft, edge: theme.edge.info };
33
+ }
34
+ }
35
+ function ToastCard({
36
+ message,
37
+ severity = "info",
38
+ action,
39
+ countdown,
40
+ onPress
41
+ }) {
42
+ const { styles } = useStyles(sheet);
43
+ const theme = useLoamTheme();
44
+ const colors = severityColors(theme, severity);
45
+ const actionHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
46
+ const copy = /* @__PURE__ */ jsxs(Fragment, { children: [
47
+ /* @__PURE__ */ jsx(
48
+ View,
49
+ {
50
+ style: [styles.disc, { backgroundColor: colors.soft, borderColor: colors.edge }],
51
+ accessibilityElementsHidden: true,
52
+ importantForAccessibility: "no-hide-descendants",
53
+ children: /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[severity], size: theme.icon.sm, color: colors.glyph })
54
+ }
55
+ ),
56
+ /* @__PURE__ */ jsx(Text, { style: styles.message, children: message })
57
+ ] });
58
+ return /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
59
+ /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
60
+ onPress ? /* @__PURE__ */ jsx(
61
+ Pressable,
62
+ {
63
+ accessibilityRole: "button",
64
+ accessibilityLabel: "Dismiss",
65
+ onPress,
66
+ style: styles.copyRegion,
67
+ children: copy
68
+ }
69
+ ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
70
+ action ? /* @__PURE__ */ jsx(
71
+ Pressable,
72
+ {
73
+ accessibilityRole: "button",
74
+ accessibilityLabel: action.label,
75
+ onPress: action.onPress,
76
+ hitSlop: actionHitSlop,
77
+ style: styles.action,
78
+ children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
79
+ }
80
+ ) : null
81
+ ] }),
82
+ countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
83
+ ] });
84
+ }
85
+ var TRAVEL = 12;
86
+ function Toast({
87
+ message,
88
+ severity = "info",
89
+ action,
90
+ open = true,
91
+ duration,
92
+ onDismiss,
93
+ countdown = false,
94
+ motion = "full",
95
+ safeAreaTop = 0
96
+ }) {
97
+ const theme = useLoamTheme();
98
+ const { styles } = useStyles(sheet);
99
+ const reduced = theme.reduceMotion || motion === "reduced";
100
+ const instant = motion === "none";
101
+ const offset = reduced || instant ? 0 : TRAVEL;
102
+ const resolvedDuration = duration ?? SEVERITY_DURATION[severity];
103
+ const progress = React.useRef(new Animated.Value(open ? 1 : 0)).current;
104
+ const enterEasing = React.useMemo(
105
+ () => Easing.bezier(...theme.motion.enter.easing),
106
+ [theme.motion.enter.easing]
107
+ );
108
+ const exitEasing = React.useMemo(
109
+ () => Easing.bezier(...theme.motion.exit.easing),
110
+ [theme.motion.exit.easing]
111
+ );
112
+ const dismissedRef = React.useRef(false);
113
+ const onDismissRef = React.useRef(onDismiss);
114
+ onDismissRef.current = onDismiss;
115
+ const requestDismiss = React.useCallback(() => {
116
+ if (dismissedRef.current) return;
117
+ dismissedRef.current = true;
118
+ onDismissRef.current?.();
119
+ }, []);
120
+ React.useEffect(() => {
121
+ if (open) {
122
+ dismissedRef.current = false;
123
+ if (instant) {
124
+ progress.setValue(1);
125
+ return;
126
+ }
127
+ Animated.timing(progress, {
128
+ toValue: 1,
129
+ duration: theme.motion.enter.duration,
130
+ easing: enterEasing,
131
+ useNativeDriver: true
132
+ }).start();
133
+ } else {
134
+ if (instant) {
135
+ progress.setValue(0);
136
+ return;
137
+ }
138
+ Animated.timing(progress, {
139
+ toValue: 0,
140
+ duration: theme.motion.exit.duration,
141
+ easing: exitEasing,
142
+ useNativeDriver: true
143
+ }).start();
144
+ }
145
+ }, [
146
+ open,
147
+ instant,
148
+ progress,
149
+ enterEasing,
150
+ exitEasing,
151
+ theme.motion.enter.duration,
152
+ theme.motion.exit.duration
153
+ ]);
154
+ React.useEffect(() => {
155
+ if (!open || !Number.isFinite(resolvedDuration)) return;
156
+ const id = setTimeout(requestDismiss, resolvedDuration);
157
+ return () => clearTimeout(id);
158
+ }, [open, resolvedDuration, requestDismiss]);
159
+ const [barWidth, setBarWidth] = React.useState(0);
160
+ const showCountdown = countdown && Number.isFinite(resolvedDuration) && !reduced && !instant;
161
+ const countdownX = React.useRef(new Animated.Value(0)).current;
162
+ React.useEffect(() => {
163
+ if (!open || !showCountdown || barWidth <= 0) return;
164
+ countdownX.setValue(0);
165
+ Animated.timing(countdownX, {
166
+ toValue: -barWidth,
167
+ duration: resolvedDuration,
168
+ easing: Easing.linear,
169
+ useNativeDriver: true
170
+ }).start();
171
+ }, [open, showCountdown, barWidth, resolvedDuration, countdownX]);
172
+ const onCardLayout = (e) => setBarWidth(e.nativeEvent.layout.width);
173
+ const pan = React.useRef(
174
+ // eslint-disable-next-line loam/no-pan-responder
175
+ PanResponder.create({
176
+ onMoveShouldSetPanResponder: (_e, g) => g.dy < -2 && Math.abs(g.dy) > Math.abs(g.dx),
177
+ onPanResponderMove: (_e, g) => {
178
+ const up = Math.min(0, g.dy);
179
+ progress.setValue(Math.max(0, 1 + up / 80));
180
+ },
181
+ onPanResponderRelease: (_e, g) => {
182
+ if (g.dy < -32 || g.vy < -0.5) {
183
+ requestDismiss();
184
+ } else {
185
+ Animated.timing(progress, {
186
+ toValue: 1,
187
+ duration: theme.motion.exit.duration,
188
+ easing: exitEasing,
189
+ useNativeDriver: true
190
+ }).start();
191
+ }
192
+ }
193
+ })
194
+ ).current;
195
+ const translateY = progress.interpolate({
196
+ inputRange: [0, 1],
197
+ outputRange: [-offset, 0]
198
+ });
199
+ const bar = showCountdown ? /* @__PURE__ */ jsx(
200
+ Animated.View,
201
+ {
202
+ style: [
203
+ styles.countdownBar,
204
+ {
205
+ backgroundColor: severityColors(theme, severity).edge,
206
+ transform: [{ translateX: countdownX }]
207
+ }
208
+ ]
209
+ }
210
+ ) : null;
211
+ return /* @__PURE__ */ jsx(
212
+ View,
213
+ {
214
+ style: [styles.root, { paddingTop: safeAreaTop + theme.space.s2 }],
215
+ pointerEvents: "box-none",
216
+ children: /* @__PURE__ */ jsx(
217
+ Animated.View,
218
+ {
219
+ accessibilityRole: "alert",
220
+ accessibilityLiveRegion: severity === "error" ? "assertive" : "polite",
221
+ style: [styles.animated, { opacity: progress, transform: [{ translateY }] }],
222
+ pointerEvents: open ? "auto" : "none",
223
+ onLayout: onCardLayout,
224
+ ...pan.panHandlers,
225
+ children: /* @__PURE__ */ jsx(
226
+ ToastCard,
227
+ {
228
+ message,
229
+ severity,
230
+ action,
231
+ countdown: bar,
232
+ onPress: requestDismiss
233
+ }
234
+ )
235
+ }
236
+ )
237
+ }
238
+ );
239
+ }
240
+ var ToastContext = React.createContext(null);
241
+ var REMOVE_DELAY = 320;
242
+ var idCounter = 0;
243
+ var nextId = () => `loam-toast-${++idCounter}`;
244
+ function ToastProvider({
245
+ children,
246
+ safeAreaTop = 0,
247
+ motion = "full"
248
+ }) {
249
+ const [queue, setQueue] = React.useState([]);
250
+ const timers = React.useRef(/* @__PURE__ */ new Map());
251
+ const remove = React.useCallback((id) => {
252
+ setQueue((prev) => prev.filter((t) => t.id !== id));
253
+ const timer = timers.current.get(id);
254
+ if (timer) {
255
+ clearTimeout(timer);
256
+ timers.current.delete(id);
257
+ }
258
+ }, []);
259
+ const close = React.useCallback(
260
+ (id) => {
261
+ setQueue((prev) => prev.map((t) => t.id === id ? { ...t, open: false } : t));
262
+ if (!timers.current.has(id)) {
263
+ timers.current.set(
264
+ id,
265
+ setTimeout(() => remove(id), REMOVE_DELAY)
266
+ );
267
+ }
268
+ },
269
+ [remove]
270
+ );
271
+ const controls = React.useMemo(
272
+ () => ({
273
+ show: (options) => {
274
+ const id = nextId();
275
+ setQueue((prev) => [...prev, { ...options, id, open: true }]);
276
+ return id;
277
+ },
278
+ dismiss: (id) => {
279
+ setQueue((prev) => {
280
+ const target = id ?? prev.find((t) => t.open)?.id;
281
+ if (target && !timers.current.has(target)) {
282
+ timers.current.set(
283
+ target,
284
+ setTimeout(() => remove(target), REMOVE_DELAY)
285
+ );
286
+ }
287
+ return prev.map((t) => t.id === target ? { ...t, open: false } : t);
288
+ });
289
+ }
290
+ }),
291
+ [remove]
292
+ );
293
+ React.useEffect(() => {
294
+ const map = timers.current;
295
+ return () => {
296
+ for (const timer of map.values()) clearTimeout(timer);
297
+ map.clear();
298
+ };
299
+ }, []);
300
+ const current = queue[0];
301
+ return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: controls, children: [
302
+ children,
303
+ current ? /* @__PURE__ */ jsx(
304
+ Toast,
305
+ {
306
+ open: current.open,
307
+ message: current.message,
308
+ severity: current.severity,
309
+ action: current.action,
310
+ duration: current.duration,
311
+ countdown: current.countdown,
312
+ motion,
313
+ safeAreaTop,
314
+ onDismiss: () => close(current.id)
315
+ },
316
+ current.id
317
+ ) : null
318
+ ] });
319
+ }
320
+ function useToast() {
321
+ const ctx = React.useContext(ToastContext);
322
+ if (!ctx) {
323
+ throw new Error("useToast must be used within a <ToastProvider>.");
324
+ }
325
+ return ctx;
326
+ }
327
+ var TOAST_MAX_W = 480;
328
+ var sheet = createStyleSheet((theme) => ({
329
+ // Full-bleed top overlay; `box-none` so touches pass through the empty gutters.
330
+ root: {
331
+ position: "absolute",
332
+ top: 0,
333
+ start: 0,
334
+ end: 0,
335
+ zIndex: theme.z.toast,
336
+ paddingHorizontal: theme.space.s4,
337
+ alignItems: "center"
338
+ },
339
+ animated: {
340
+ width: "100%",
341
+ maxWidth: TOAST_MAX_W
342
+ },
343
+ // The surface card. `overflow: hidden` clips the countdown bar to the radius.
344
+ card: {
345
+ borderRadius: theme.radius.lg,
346
+ borderWidth: theme.borderWidth.base,
347
+ borderColor: theme.color.border,
348
+ backgroundColor: theme.color.surface,
349
+ overflow: "hidden",
350
+ ...theme.shadow.lg
351
+ },
352
+ body: {
353
+ flexDirection: "row",
354
+ alignItems: "center",
355
+ gap: theme.space.s3,
356
+ paddingVertical: theme.space.s3,
357
+ paddingHorizontal: theme.space.s4
358
+ },
359
+ // The tap-to-dismiss region: icon + message. `flex: 1` lets it absorb the
360
+ // width so the action sits flush at the trailing edge.
361
+ copyRegion: {
362
+ flex: 1,
363
+ minWidth: 0,
364
+ flexDirection: "row",
365
+ alignItems: "center",
366
+ gap: theme.space.s3
367
+ },
368
+ disc: {
369
+ width: theme.space[32],
370
+ height: theme.space[32],
371
+ borderRadius: theme.radius.full,
372
+ borderWidth: theme.borderWidth.base,
373
+ alignItems: "center",
374
+ justifyContent: "center"
375
+ },
376
+ // `flex: 1` + `minWidth: 0` lets the message wrap instead of shoving the action off-card.
377
+ message: {
378
+ flex: 1,
379
+ minWidth: 0,
380
+ fontFamily: theme.font.sans,
381
+ fontSize: theme.type.subheadline.fontSize,
382
+ lineHeight: theme.type.subheadline.lineHeight,
383
+ color: theme.color.text
384
+ },
385
+ action: {
386
+ flexShrink: 0,
387
+ paddingHorizontal: theme.space.s2,
388
+ paddingVertical: theme.space.s1,
389
+ borderRadius: theme.radius.sm
390
+ },
391
+ actionLabel: {
392
+ fontFamily: theme.font.sans,
393
+ fontWeight: theme.fontWeight.bold,
394
+ fontSize: theme.type.footnote.fontSize,
395
+ color: theme.color.accentStrong
396
+ },
397
+ countdownTrack: {
398
+ position: "absolute",
399
+ bottom: 0,
400
+ start: 0,
401
+ end: 0,
402
+ height: theme.space[3],
403
+ overflow: "hidden"
404
+ },
405
+ countdownBar: {
406
+ width: "100%",
407
+ height: theme.space[3]
408
+ }
409
+ }));
410
+
411
+ export { SEVERITY_DURATION, Toast, ToastCard, ToastProvider, useToast };
@@ -0,0 +1,144 @@
1
+ import { Avatar } from './chunk-QDYDBCFP.js';
2
+ import * as React from 'react';
3
+ import { Animated, Easing, View, Text, Pressable } from 'react-native';
4
+ import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
5
+ import { jsxs, jsx } from 'react/jsx-runtime';
6
+
7
+ var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
8
+ function summarise(avatars, visibleCount) {
9
+ const total = avatars.length;
10
+ if (total === 0) return "No people";
11
+ const noun = total === 1 ? "person" : "people";
12
+ const names = avatars.slice(0, visibleCount).map((a) => a.name);
13
+ const hidden = total - visibleCount;
14
+ const parts = hidden > 0 ? [...names, `+${hidden}`] : names;
15
+ return `${total} ${noun}: ${parts.join(", ")}`;
16
+ }
17
+ function AvatarStack({
18
+ avatars,
19
+ max = 4,
20
+ size = "md",
21
+ onPress,
22
+ ring = true,
23
+ motion = "reduced",
24
+ label
25
+ }) {
26
+ const { styles } = useStyles(sheet, { size });
27
+ const theme = useLoamTheme();
28
+ const dim = SIZE_PX[size];
29
+ const overlap = Math.round(dim * 0.3);
30
+ const ringWidth = theme.borderWidth.thick;
31
+ const visible = avatars.slice(0, Math.max(0, max));
32
+ const hidden = avatars.length - visible.length;
33
+ const summary = label ?? summarise(avatars, visible.length);
34
+ const cellCount = visible.length + (hidden > 0 ? 1 : 0);
35
+ const pressAnimated = Boolean(onPress) && motion !== "none" && !theme.reduceMotion;
36
+ const scale = React.useRef(new Animated.Value(1)).current;
37
+ const springTo = (to) => Animated.spring(scale, {
38
+ toValue: to,
39
+ useNativeDriver: true,
40
+ speed: 40,
41
+ bounciness: 6
42
+ }).start();
43
+ const staggerAnimated = motion === "full" && !theme.reduceMotion;
44
+ const enter = React.useMemo(
45
+ () => Array.from({ length: cellCount }, () => new Animated.Value(staggerAnimated ? 0 : 1)),
46
+ [cellCount, staggerAnimated]
47
+ );
48
+ const enterEasing = React.useMemo(
49
+ () => Easing.bezier(...theme.motion.enter.easing),
50
+ [theme.motion.enter.easing]
51
+ );
52
+ React.useEffect(() => {
53
+ if (!staggerAnimated) return;
54
+ Animated.stagger(
55
+ Math.max(1, theme.motion.enter.duration / 3),
56
+ enter.map(
57
+ (v) => Animated.timing(v, {
58
+ toValue: 1,
59
+ duration: theme.motion.enter.duration,
60
+ easing: enterEasing,
61
+ useNativeDriver: true
62
+ })
63
+ )
64
+ ).start();
65
+ }, [staggerAnimated, enter, enterEasing, theme.motion.enter.duration]);
66
+ const cellStyle = (index) => ({
67
+ marginStart: index === 0 ? 0 : -overlap,
68
+ ...ring ? {
69
+ backgroundColor: theme.color.surface,
70
+ borderRadius: theme.radius.full,
71
+ padding: ringWidth
72
+ } : null
73
+ });
74
+ const enterStyle = (index) => {
75
+ const v = enter[index];
76
+ if (!staggerAnimated || !v) return {};
77
+ return {
78
+ opacity: v,
79
+ transform: [{ translateX: v.interpolate({ inputRange: [0, 1], outputRange: [overlap, 0] }) }]
80
+ };
81
+ };
82
+ const content = /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, pressAnimated ? { transform: [{ scale }] } : null], children: [
83
+ visible.map((a, i) => /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(i), enterStyle(i)], children: /* @__PURE__ */ jsx(Avatar, { name: a.name, src: a.src, size }) }, a.id)),
84
+ hidden > 0 ? /* @__PURE__ */ jsx(Animated.View, { style: [cellStyle(visible.length), enterStyle(visible.length)], children: /* @__PURE__ */ jsx(View, { style: styles.chip, children: /* @__PURE__ */ jsxs(Text, { style: styles.chipText, children: [
85
+ "+",
86
+ hidden
87
+ ] }) }) }) : null
88
+ ] });
89
+ if (onPress) {
90
+ return /* @__PURE__ */ jsx(
91
+ Pressable,
92
+ {
93
+ accessibilityRole: "button",
94
+ accessibilityLabel: summary,
95
+ onPress,
96
+ onPressIn: pressAnimated ? () => springTo(0.97) : void 0,
97
+ onPressOut: pressAnimated ? () => springTo(1) : void 0,
98
+ style: styles.pressable,
99
+ children: content
100
+ }
101
+ );
102
+ }
103
+ return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityLabel: summary, style: styles.pressable, children: content });
104
+ }
105
+ var sheet = createStyleSheet((theme) => ({
106
+ // `alignSelf: 'flex-start'` so the stack hugs its avatars instead of stretching
107
+ // across the parent and letting taps land on empty space.
108
+ pressable: { alignSelf: "flex-start" },
109
+ row: { flexDirection: "row", alignItems: "center" },
110
+ // The `+N` chip: a same-sized circle in the neutral surface-2 fill, mirroring
111
+ // the overflow bubble the lightweight AvatarGroup draws.
112
+ chip: {
113
+ alignItems: "center",
114
+ justifyContent: "center",
115
+ overflow: "hidden",
116
+ borderRadius: theme.radius.full,
117
+ backgroundColor: theme.color.surface2,
118
+ variants: {
119
+ size: {
120
+ xs: { width: theme.space[28], height: theme.space[28] },
121
+ sm: { width: theme.space[36], height: theme.space[36] },
122
+ md: { width: theme.space[48], height: theme.space[48] },
123
+ lg: { width: theme.space[60], height: theme.space[60] },
124
+ xl: { width: theme.space[76], height: theme.space[76] }
125
+ }
126
+ }
127
+ },
128
+ chipText: {
129
+ fontFamily: theme.font.sans,
130
+ fontWeight: theme.fontWeight.bold,
131
+ color: theme.color.text2,
132
+ variants: {
133
+ size: {
134
+ xs: { fontSize: theme.fontSize[9] },
135
+ sm: { fontSize: theme.fontSize[12] },
136
+ md: { fontSize: theme.fontSize[16] },
137
+ lg: { fontSize: theme.fontSize[20] },
138
+ xl: { fontSize: theme.fontSize[25] }
139
+ }
140
+ }
141
+ }
142
+ }));
143
+
144
+ export { AvatarStack };
@@ -0,0 +1 @@
1
+