@retray-dev/ui-kit 10.2.0 → 12.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 (220) hide show
  1. package/COMPONENTS.md +384 -40
  2. package/README.md +14 -5
  3. package/dist/Accordion.d.mts +6 -0
  4. package/dist/Accordion.d.ts +6 -0
  5. package/dist/Accordion.js +16 -0
  6. package/dist/Accordion.mjs +2 -2
  7. package/dist/AlertBanner.js +2 -0
  8. package/dist/AlertBanner.mjs +2 -2
  9. package/dist/AppHeader.js +2 -0
  10. package/dist/AppHeader.mjs +3 -3
  11. package/dist/Avatar.js +2 -0
  12. package/dist/Avatar.mjs +2 -2
  13. package/dist/Badge.js +2 -0
  14. package/dist/Badge.mjs +2 -2
  15. package/dist/Button.js +17 -17
  16. package/dist/Button.mjs +2 -2
  17. package/dist/Card.js +2 -0
  18. package/dist/Card.mjs +2 -2
  19. package/dist/CategoryStrip.js +2 -0
  20. package/dist/CategoryStrip.mjs +2 -2
  21. package/dist/Checkbox.js +2 -0
  22. package/dist/Checkbox.mjs +2 -2
  23. package/dist/Chip.js +2 -0
  24. package/dist/Chip.mjs +2 -2
  25. package/dist/ConfirmDialog.d.mts +1 -6
  26. package/dist/ConfirmDialog.d.ts +1 -6
  27. package/dist/ConfirmDialog.js +53 -41
  28. package/dist/ConfirmDialog.mjs +3 -3
  29. package/dist/CurrencyDisplay.js +2 -0
  30. package/dist/CurrencyDisplay.mjs +2 -2
  31. package/dist/CurrencyInput.d.mts +3 -8
  32. package/dist/CurrencyInput.d.ts +3 -8
  33. package/dist/CurrencyInput.js +5 -1
  34. package/dist/CurrencyInput.mjs +3 -3
  35. package/dist/DetailRow.js +2 -0
  36. package/dist/DetailRow.mjs +2 -2
  37. package/dist/EmptyState.js +17 -17
  38. package/dist/EmptyState.mjs +3 -3
  39. package/dist/ErrorBoundary.js +2 -0
  40. package/dist/ErrorBoundary.mjs +2 -2
  41. package/dist/Form.js +2 -0
  42. package/dist/Form.mjs +2 -2
  43. package/dist/IconButton.js +2 -0
  44. package/dist/IconButton.mjs +2 -2
  45. package/dist/IconPicker.js +677 -248
  46. package/dist/IconPicker.mjs +3 -2
  47. package/dist/ImageUpload.d.mts +3 -1
  48. package/dist/ImageUpload.d.ts +3 -1
  49. package/dist/ImageUpload.js +10 -3
  50. package/dist/ImageUpload.mjs +3 -3
  51. package/dist/ImageViewer.js +2 -0
  52. package/dist/ImageViewer.mjs +4 -4
  53. package/dist/Input.js +2 -0
  54. package/dist/Input.mjs +2 -2
  55. package/dist/LabelValue.js +2 -0
  56. package/dist/LabelValue.mjs +2 -2
  57. package/dist/ListGroup.js +2 -0
  58. package/dist/ListGroup.mjs +2 -2
  59. package/dist/ListItem.d.mts +7 -7
  60. package/dist/ListItem.d.ts +7 -7
  61. package/dist/ListItem.js +14 -7
  62. package/dist/ListItem.mjs +2 -2
  63. package/dist/MediaCard.js +2 -0
  64. package/dist/MediaCard.mjs +2 -2
  65. package/dist/MenuGroup.js +2 -0
  66. package/dist/MenuGroup.mjs +2 -2
  67. package/dist/MenuItem.js +2 -0
  68. package/dist/MenuItem.mjs +2 -2
  69. package/dist/MonthPicker.js +2 -0
  70. package/dist/MonthPicker.mjs +2 -2
  71. package/dist/NumberStepper.js +2 -0
  72. package/dist/NumberStepper.mjs +2 -2
  73. package/dist/PagerDots.js +2 -0
  74. package/dist/PagerDots.mjs +2 -2
  75. package/dist/Pressable.d.mts +15 -7
  76. package/dist/Pressable.d.ts +15 -7
  77. package/dist/Pressable.js +7 -3
  78. package/dist/Pressable.mjs +1 -1
  79. package/dist/PricingCard.js +17 -17
  80. package/dist/PricingCard.mjs +4 -4
  81. package/dist/Progress.js +2 -0
  82. package/dist/Progress.mjs +2 -2
  83. package/dist/RadioGroup.js +2 -0
  84. package/dist/RadioGroup.mjs +2 -2
  85. package/dist/RetrayProvider.d.mts +1 -1
  86. package/dist/RetrayProvider.d.ts +1 -1
  87. package/dist/RetrayProvider.js +2 -0
  88. package/dist/RetrayProvider.mjs +3 -3
  89. package/dist/Select.js +2 -0
  90. package/dist/Select.mjs +2 -2
  91. package/dist/SelectableCard.d.mts +27 -0
  92. package/dist/SelectableCard.d.ts +27 -0
  93. package/dist/SelectableCard.js +511 -0
  94. package/dist/SelectableCard.mjs +8 -0
  95. package/dist/SelectableGrid.js +2 -0
  96. package/dist/SelectableGrid.mjs +2 -2
  97. package/dist/Separator.js +2 -0
  98. package/dist/Separator.mjs +2 -2
  99. package/dist/Sheet.d.mts +4 -46
  100. package/dist/Sheet.d.ts +4 -46
  101. package/dist/Sheet.js +55 -115
  102. package/dist/Sheet.mjs +2 -3
  103. package/dist/SheetSelect.js +2 -0
  104. package/dist/SheetSelect.mjs +2 -2
  105. package/dist/Skeleton.d.mts +3 -1
  106. package/dist/Skeleton.d.ts +3 -1
  107. package/dist/Skeleton.js +5 -2
  108. package/dist/Skeleton.mjs +2 -2
  109. package/dist/Slider.js +2 -0
  110. package/dist/Slider.mjs +2 -2
  111. package/dist/Spinner.js +2 -0
  112. package/dist/Spinner.mjs +2 -2
  113. package/dist/Stats.d.mts +33 -0
  114. package/dist/Stats.d.ts +33 -0
  115. package/dist/Stats.js +453 -0
  116. package/dist/Stats.mjs +9 -0
  117. package/dist/Switch.js +2 -0
  118. package/dist/Switch.mjs +2 -2
  119. package/dist/TabBar.js +2 -0
  120. package/dist/TabBar.mjs +2 -2
  121. package/dist/Tabs.js +2 -0
  122. package/dist/Tabs.mjs +2 -2
  123. package/dist/Text.d.mts +3 -1
  124. package/dist/Text.d.ts +3 -1
  125. package/dist/Text.js +5 -3
  126. package/dist/Text.mjs +2 -2
  127. package/dist/Textarea.js +2 -0
  128. package/dist/Textarea.mjs +2 -2
  129. package/dist/Toast.js +2 -0
  130. package/dist/Toast.mjs +2 -2
  131. package/dist/Toggle.js +2 -0
  132. package/dist/Toggle.mjs +2 -2
  133. package/dist/{chunk-U2XJFYED.mjs → chunk-2BA3JMKK.mjs} +1 -1
  134. package/dist/{chunk-NMU5FMQJ.mjs → chunk-2HFD4IHU.mjs} +4 -2
  135. package/dist/{chunk-S2R7UVOE.mjs → chunk-2LG326TT.mjs} +1 -1
  136. package/dist/chunk-2P2CB235.mjs +236 -0
  137. package/dist/{chunk-6L4G6PBT.mjs → chunk-3XCFYSX4.mjs} +1 -1
  138. package/dist/{chunk-HTHGSXFG.mjs → chunk-4J2PXL36.mjs} +16 -18
  139. package/dist/{chunk-BEMIQXXU.mjs → chunk-4OORJ2DY.mjs} +1 -1
  140. package/dist/chunk-4XOB5TTD.mjs +166 -0
  141. package/dist/{chunk-FCSSQK3L.mjs → chunk-57V2LXCK.mjs} +1 -1
  142. package/dist/{chunk-6Q64UFIA.mjs → chunk-7AFZWSCI.mjs} +1 -1
  143. package/dist/{chunk-IX3NYLYQ.mjs → chunk-7ELGZ66G.mjs} +1 -1
  144. package/dist/{chunk-GD6KXMG5.mjs → chunk-AENAVIKT.mjs} +1 -1
  145. package/dist/{chunk-ID72TK46.mjs → chunk-BXF4AMHY.mjs} +1 -1
  146. package/dist/{chunk-SOA2Z4RB.mjs → chunk-C43HRKXH.mjs} +1 -1
  147. package/dist/{chunk-TZDGAP5N.mjs → chunk-CF27NBXO.mjs} +11 -6
  148. package/dist/{chunk-SXLKNTA4.mjs → chunk-DF7JA72E.mjs} +1 -1
  149. package/dist/{chunk-AJRVDP2H.mjs → chunk-E5UKLSJZ.mjs} +3 -3
  150. package/dist/{chunk-MBMXYJJV.mjs → chunk-E7NEHHXV.mjs} +7 -3
  151. package/dist/{chunk-VKID2D2I.mjs → chunk-EDLCGYIO.mjs} +13 -8
  152. package/dist/{chunk-BUMAMSTZ.mjs → chunk-ELGEOM7I.mjs} +1 -1
  153. package/dist/{chunk-DYT7BG5I.mjs → chunk-F3YTWO3T.mjs} +1 -1
  154. package/dist/{chunk-VF2ATYN3.mjs → chunk-GH67YXG6.mjs} +1 -1
  155. package/dist/{chunk-WJLKJMKR.mjs → chunk-GUTDFUNF.mjs} +4 -4
  156. package/dist/{chunk-6SECQ2ZF.mjs → chunk-HC4VVCWY.mjs} +2 -2
  157. package/dist/{chunk-A3A6KNQN.mjs → chunk-HEDQPK4I.mjs} +1 -1
  158. package/dist/{chunk-GQYFLP3D.mjs → chunk-IVSRW4HS.mjs} +1 -1
  159. package/dist/{chunk-KOO4WITD.mjs → chunk-KSUWPU2F.mjs} +1 -1
  160. package/dist/{chunk-WBOOUHSS.mjs → chunk-LIS6I5UP.mjs} +1 -1
  161. package/dist/{chunk-X4G6APW6.mjs → chunk-LNPKGWBG.mjs} +1 -1
  162. package/dist/{chunk-T2KCAHOS.mjs → chunk-LOBLCFMN.mjs} +1 -1
  163. package/dist/{chunk-ELXBDILQ.mjs → chunk-LPV4NJJK.mjs} +2 -2
  164. package/dist/{chunk-Y2NS74WS.mjs → chunk-M3C7XM2M.mjs} +53 -99
  165. package/dist/{chunk-BRKYVJVV.mjs → chunk-MEPSKGBO.mjs} +1 -1
  166. package/dist/{chunk-TBNZHU6C.mjs → chunk-MVMGPZN6.mjs} +2 -2
  167. package/dist/{chunk-YJ7I257J.mjs → chunk-NHDI3VQB.mjs} +15 -1
  168. package/dist/{chunk-Z6SFHN6T.mjs → chunk-NJG7DHVF.mjs} +1 -1
  169. package/dist/{chunk-RYZC432S.mjs → chunk-NLZY4TXU.mjs} +1 -1
  170. package/dist/{chunk-ZZ2R6KZ3.mjs → chunk-OLVJFKXS.mjs} +1 -1
  171. package/dist/{chunk-AJ7ZDNBT.mjs → chunk-QDAZGZUF.mjs} +4 -3
  172. package/dist/{chunk-JT7HKXRB.mjs → chunk-QOLWA2PW.mjs} +1 -1
  173. package/dist/{chunk-WYEUNUTP.mjs → chunk-QXDGGOLC.mjs} +38 -25
  174. package/dist/{chunk-JMOZEC77.mjs → chunk-RJNLAH76.mjs} +1 -1
  175. package/dist/{chunk-WF2XDFRK.mjs → chunk-RMRS44MQ.mjs} +1 -1
  176. package/dist/chunk-SAWUXP3A.mjs +1114 -0
  177. package/dist/{chunk-OB4JUQ3O.mjs → chunk-TS7DGUIR.mjs} +1 -1
  178. package/dist/{chunk-AV4EMIRH.mjs → chunk-UBUXUMER.mjs} +1 -1
  179. package/dist/{chunk-IRRY3CRZ.mjs → chunk-ULGNQPNE.mjs} +1 -1
  180. package/dist/{chunk-7LWRKMF5.mjs → chunk-UNNRUJTM.mjs} +1 -1
  181. package/dist/{chunk-TB6SD2FT.mjs → chunk-UQ4742ET.mjs} +1 -1
  182. package/dist/{chunk-MX6HRKMI.mjs → chunk-VJBUCITV.mjs} +1 -1
  183. package/dist/{chunk-2UYENBLV.mjs → chunk-YMYIEVZP.mjs} +1 -1
  184. package/dist/{chunk-SOYNZDVY.mjs → chunk-YTXRIXNZ.mjs} +8 -1
  185. package/dist/{chunk-YFZ3ELX5.mjs → chunk-ZIMY2QUM.mjs} +2 -2
  186. package/dist/{chunk-Z4VHZ7B5.mjs → chunk-ZR6HSEAB.mjs} +1 -1
  187. package/dist/fonts.d.mts +1 -7
  188. package/dist/fonts.d.ts +1 -7
  189. package/dist/fonts.js +0 -2
  190. package/dist/fonts.mjs +1 -2
  191. package/dist/{index-wt-orHUi.d.ts → index-CY34hxPN.d.mts} +1 -0
  192. package/dist/{index-wt-orHUi.d.mts → index-CY34hxPN.d.ts} +1 -0
  193. package/dist/index.d.mts +7 -3
  194. package/dist/index.d.ts +7 -3
  195. package/dist/index.js +1517 -761
  196. package/dist/index.mjs +54 -52
  197. package/package.json +3 -3
  198. package/src/components/Accordion/Accordion.tsx +20 -0
  199. package/src/components/Button/Button.tsx +29 -26
  200. package/src/components/ConfirmDialog/ConfirmDialog.tsx +47 -31
  201. package/src/components/CurrencyInput/CurrencyInput.tsx +4 -7
  202. package/src/components/IconPicker/IconPicker.tsx +124 -112
  203. package/src/components/ImageUpload/ImageUpload.tsx +10 -3
  204. package/src/components/ListItem/ListItem.tsx +43 -28
  205. package/src/components/Pressable/Pressable.tsx +20 -8
  206. package/src/components/SelectableCard/SelectableCard.tsx +304 -0
  207. package/src/components/SelectableCard/index.ts +1 -0
  208. package/src/components/Sheet/Sheet.tsx +72 -173
  209. package/src/components/Skeleton/Skeleton.tsx +5 -2
  210. package/src/components/Stats/Stats.tsx +254 -0
  211. package/src/components/Stats/index.ts +2 -0
  212. package/src/components/Text/Text.tsx +4 -2
  213. package/src/fonts.ts +0 -7
  214. package/src/index.ts +5 -0
  215. package/src/theme/colorUtils.ts +9 -0
  216. package/src/theme/colors.ts +7 -0
  217. package/src/theme/types.ts +4 -1
  218. package/src/utils/curatedIcons.ts +698 -135
  219. package/src/utils/fontGuard.ts +2 -1
  220. package/dist/chunk-53Z3NYGE.mjs +0 -742
@@ -0,0 +1,511 @@
1
+ 'use strict';
2
+
3
+ var React3 = require('react');
4
+ var reactNative = require('react-native');
5
+ var reactNativeEase = require('react-native-ease');
6
+ var reactNativeSizeMatters = require('react-native-size-matters');
7
+ var AntDesign = require('@expo/vector-icons/AntDesign');
8
+ var Entypo = require('@expo/vector-icons/Entypo');
9
+ var Feather = require('@expo/vector-icons/Feather');
10
+ var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
11
+ var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
12
+ var Ionicons = require('@expo/vector-icons/Ionicons');
13
+ var reactNativeReanimated = require('react-native-reanimated');
14
+
15
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
+
17
+ var React3__default = /*#__PURE__*/_interopDefault(React3);
18
+ var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
19
+ var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
20
+ var Feather__default = /*#__PURE__*/_interopDefault(Feather);
21
+ var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
22
+ var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
23
+ var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
24
+
25
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
26
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
27
+ }) : x)(function(x) {
28
+ if (typeof require !== "undefined") return require.apply(this, arguments);
29
+ throw Error('Dynamic require of "' + x + '" is not supported');
30
+ });
31
+ var _haptics = null;
32
+ var _hapticsLoaded = false;
33
+ async function getHaptics() {
34
+ if (reactNative.Platform.OS === "web") return null;
35
+ if (!_hapticsLoaded) {
36
+ _hapticsLoaded = true;
37
+ try {
38
+ _haptics = await import('expo-haptics');
39
+ } catch {
40
+ _haptics = null;
41
+ }
42
+ }
43
+ return _haptics;
44
+ }
45
+ var _pulsar = null;
46
+ var _pulsarChecked = false;
47
+ var _pulsarAvailable = false;
48
+ function isPulsarNativeRegistered() {
49
+ try {
50
+ const g = globalThis;
51
+ if (typeof g.__turboModuleProxy === "function") {
52
+ return g.__turboModuleProxy("RNPulsar") != null;
53
+ }
54
+ return reactNative.NativeModules?.RNPulsar != null;
55
+ } catch {
56
+ return false;
57
+ }
58
+ }
59
+ function getPulsar() {
60
+ if (reactNative.Platform.OS === "web") return null;
61
+ if (!_pulsarChecked) {
62
+ _pulsarChecked = true;
63
+ try {
64
+ if (isPulsarNativeRegistered()) {
65
+ _pulsar = __require("react-native-pulsar");
66
+ _pulsarAvailable = true;
67
+ }
68
+ } catch {
69
+ _pulsar = null;
70
+ _pulsarAvailable = false;
71
+ }
72
+ }
73
+ return _pulsarAvailable ? _pulsar : null;
74
+ }
75
+ function impactLight() {
76
+ if (reactNative.Platform.OS === "web") return;
77
+ getHaptics().then((h) => {
78
+ if (h) {
79
+ h.impactAsync(h.ImpactFeedbackStyle.Light);
80
+ } else {
81
+ getPulsar()?.Presets.System.impactLight();
82
+ }
83
+ });
84
+ }
85
+
86
+ // src/theme/colorUtils.ts
87
+ function hexToRgb(hex) {
88
+ const clean = hex.replace("#", "");
89
+ const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
90
+ if (full.length !== 6) return null;
91
+ return {
92
+ r: parseInt(full.slice(0, 2), 16),
93
+ g: parseInt(full.slice(2, 4), 16),
94
+ b: parseInt(full.slice(4, 6), 16)
95
+ };
96
+ }
97
+ function componentToHex(c) {
98
+ return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
99
+ }
100
+ function rgbToHex(r, g, b) {
101
+ return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
102
+ }
103
+ function withAlphaOnWhite(hex, alpha) {
104
+ const rgb = hexToRgb(hex);
105
+ if (!rgb) return hex;
106
+ const r = rgb.r * alpha + 255 * (1 - alpha);
107
+ const g = rgb.g * alpha + 255 * (1 - alpha);
108
+ const b = rgb.b * alpha + 255 * (1 - alpha);
109
+ return rgbToHex(r, g, b);
110
+ }
111
+ function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
112
+ const rgb = hexToRgb(hex);
113
+ const bg = hexToRgb(bgHex);
114
+ if (!rgb || !bg) return hex;
115
+ const r = rgb.r * alpha + bg.r * (1 - alpha);
116
+ const g = rgb.g * alpha + bg.g * (1 - alpha);
117
+ const b = rgb.b * alpha + bg.b * (1 - alpha);
118
+ return rgbToHex(r, g, b);
119
+ }
120
+ function mixWithBackground(fgHex, bgHex, opacity) {
121
+ const fg = hexToRgb(fgHex);
122
+ const bg = hexToRgb(bgHex);
123
+ if (!fg || !bg) return fgHex;
124
+ const r = fg.r * opacity + bg.r * (1 - opacity);
125
+ const g = fg.g * opacity + bg.g * (1 - opacity);
126
+ const b = fg.b * opacity + bg.b * (1 - opacity);
127
+ return rgbToHex(r, g, b);
128
+ }
129
+ function lighten(hex, amount) {
130
+ return withAlphaOnWhite(hex, 1 - amount);
131
+ }
132
+ function darken(hex, amount) {
133
+ const rgb = hexToRgb(hex);
134
+ if (!rgb) return hex;
135
+ return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
136
+ }
137
+
138
+ // src/theme/colors.ts
139
+ var defaultLight = {
140
+ background: "#ffffff",
141
+ foreground: "#1a1a1a",
142
+ card: "#ffffff",
143
+ primary: "#1a1a1a",
144
+ primaryForeground: "#ffffff",
145
+ // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
146
+ accent: "#d4561d",
147
+ accentForeground: "#ffffff",
148
+ border: "#dddddd",
149
+ // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
150
+ destructive: "#c72828",
151
+ destructiveForeground: "#ffffff",
152
+ success: "#1a7a45",
153
+ successForeground: "#ffffff",
154
+ // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
155
+ warning: "#9a5200",
156
+ warningForeground: "#ffffff"
157
+ };
158
+ function deriveColors(t, scheme) {
159
+ const dark = scheme === "dark";
160
+ const bg = t.background;
161
+ const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
162
+ const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
163
+ const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
164
+ const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
165
+ const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
166
+ const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
167
+ const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
168
+ const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
169
+ const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
170
+ const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
171
+ const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
172
+ return {
173
+ ...t,
174
+ foregroundSubtle,
175
+ foregroundMuted,
176
+ surface,
177
+ surfaceStrong,
178
+ skeleton,
179
+ destructiveTint,
180
+ destructiveBorder,
181
+ successTint,
182
+ successBorder,
183
+ warningTint,
184
+ warningBorder,
185
+ overlay: t.overlay ?? "rgba(0,0,0,0.45)",
186
+ accentResolved: t.accent ?? t.primary,
187
+ accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
188
+ ring: t.accent ?? t.primary,
189
+ input: t.border,
190
+ separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
191
+ };
192
+ }
193
+
194
+ // src/theme/ThemeProvider.tsx
195
+ var ThemeContext = React3.createContext({
196
+ colors: deriveColors(defaultLight, "light"),
197
+ colorScheme: "light"
198
+ });
199
+ function useTheme() {
200
+ const context = React3.useContext(ThemeContext);
201
+ if (!context) {
202
+ throw new Error("useTheme must be used within a ThemeProvider");
203
+ }
204
+ return context;
205
+ }
206
+ var isWeb = reactNative.Platform.OS === "web";
207
+ var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
208
+ var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
209
+ var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
210
+ var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
211
+
212
+ // src/tokens.ts
213
+ var RADIUS = {
214
+ md: 14};
215
+ var glyphMapOf = (mod) => mod.glyphMap ?? {};
216
+ var ALL_FAMILIES = [
217
+ { name: "Ionicons", component: Ionicons__default.default, getGlyphMap: () => glyphMapOf(Ionicons__default.default) },
218
+ { name: "MaterialIcons", component: MaterialIcons__default.default, getGlyphMap: () => glyphMapOf(MaterialIcons__default.default) },
219
+ { name: "FontAwesome5", component: FontAwesome5__default.default, getGlyphMap: () => glyphMapOf(FontAwesome5__default.default) },
220
+ { name: "Entypo", component: Entypo__default.default, getGlyphMap: () => glyphMapOf(Entypo__default.default) },
221
+ { name: "AntDesign", component: AntDesign__default.default, getGlyphMap: () => glyphMapOf(AntDesign__default.default) },
222
+ { name: "Feather", component: Feather__default.default, getGlyphMap: () => glyphMapOf(Feather__default.default) }
223
+ ];
224
+ var activeFamilies = ALL_FAMILIES;
225
+ var resolvedCache = null;
226
+ function buildCache(families) {
227
+ const cache = /* @__PURE__ */ new Map();
228
+ for (const family of activeFamilies) {
229
+ const glyphMap = family.getGlyphMap();
230
+ for (const iconName of Object.keys(glyphMap)) {
231
+ cache.set(iconName, family);
232
+ }
233
+ }
234
+ return cache;
235
+ }
236
+ function resolveFamily(name) {
237
+ if (!resolvedCache) {
238
+ resolvedCache = buildCache();
239
+ }
240
+ return resolvedCache.get(name) ?? null;
241
+ }
242
+ function Icon({ name, size, color, family }) {
243
+ let resolved = null;
244
+ if (family) {
245
+ resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null;
246
+ } else {
247
+ resolved = resolveFamily(name);
248
+ }
249
+ if (!resolved) return null;
250
+ const Component = resolved.component;
251
+ return React3__default.default.createElement(Component, { name, size, color });
252
+ }
253
+ function renderIcon(name, size, color) {
254
+ return React3__default.default.createElement(Icon, { name, size, color });
255
+ }
256
+ var TIMINGS = {
257
+ /** Color/opacity transitions on toggles, checkboxes, switches. */
258
+ state: { duration: 160 }};
259
+ ({
260
+ /** Material-style ease-out — natural deceleration for state changes. */
261
+ standard: reactNativeReanimated.Easing.bezier(0.2, 0, 0, 1),
262
+ /** Strong ease-out for expanding surfaces (Accordion open). */
263
+ expand: reactNativeReanimated.Easing.bezier(0.23, 1, 0.32, 1),
264
+ /** Quick ease-in for collapsing. */
265
+ collapse: reactNativeReanimated.Easing.in(reactNativeReanimated.Easing.ease)
266
+ });
267
+ var COLOR_TRANSITION = {
268
+ type: "timing",
269
+ duration: TIMINGS.state.duration,
270
+ easing: [0.2, 0, 0, 1]
271
+ };
272
+ var OPACITY_TRANSITION = {
273
+ type: "timing",
274
+ duration: TIMINGS.state.duration,
275
+ easing: [0.2, 0, 0, 1]
276
+ };
277
+ var SPRING_ELASTIC = {
278
+ type: "spring",
279
+ stiffness: 320,
280
+ damping: 22,
281
+ mass: 0.7
282
+ };
283
+
284
+ // src/components/SelectableCard/SelectableCard.tsx
285
+ var SelectableCardContext = React3.createContext(null);
286
+ function SelectableCardGroup({
287
+ type,
288
+ value,
289
+ onValueChange,
290
+ variant = "elevated",
291
+ gap = s(8),
292
+ style,
293
+ children
294
+ }) {
295
+ return /* @__PURE__ */ React3__default.default.createElement(SelectableCardContext.Provider, { value: { type, value, onValueChange, variant } }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.group, { gap }, style] }, children));
296
+ }
297
+ function SelectableCard({
298
+ value,
299
+ title,
300
+ description,
301
+ iconName,
302
+ icon,
303
+ disabled = false,
304
+ style
305
+ }) {
306
+ const ctx = React3.useContext(SelectableCardContext);
307
+ if (!ctx) {
308
+ throw new Error("SelectableCard must be used inside <SelectableCard.Group>");
309
+ }
310
+ const { colors } = useTheme();
311
+ const { type, value: selectedValue, onValueChange, variant } = ctx;
312
+ const isSelected = type === "radio" ? selectedValue === value : Array.isArray(selectedValue) && selectedValue.includes(value);
313
+ const handlePress = () => {
314
+ if (disabled) return;
315
+ impactLight();
316
+ if (type === "radio") {
317
+ onValueChange(value);
318
+ } else {
319
+ const arr = Array.isArray(selectedValue) ? selectedValue : [];
320
+ if (arr.includes(value)) {
321
+ onValueChange(arr.filter((v) => v !== value));
322
+ } else {
323
+ onValueChange([...arr, value]);
324
+ }
325
+ }
326
+ };
327
+ const variantStyle = (() => {
328
+ const borderWidth = 2;
329
+ const base = {
330
+ elevated: {
331
+ backgroundColor: colors.card,
332
+ borderWidth,
333
+ borderColor: "transparent"
334
+ // reserve space for selected border
335
+ },
336
+ outlined: {
337
+ backgroundColor: colors.card,
338
+ borderWidth,
339
+ borderColor: colors.border
340
+ },
341
+ filled: {
342
+ backgroundColor: colors.surfaceStrong,
343
+ borderWidth,
344
+ borderColor: colors.border
345
+ }
346
+ }[variant];
347
+ if (isSelected && !disabled) {
348
+ return {
349
+ ...base,
350
+ borderColor: colors.primary,
351
+ shadowColor: "transparent",
352
+ shadowOpacity: 0,
353
+ shadowRadius: 0,
354
+ elevation: 0
355
+ };
356
+ }
357
+ if (disabled) {
358
+ return {
359
+ ...base,
360
+ shadowColor: "transparent",
361
+ shadowOpacity: 0,
362
+ shadowRadius: 0,
363
+ elevation: 0,
364
+ borderColor: colors.border
365
+ };
366
+ }
367
+ return base;
368
+ })();
369
+ const resolvedIcon = iconName ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted) : icon;
370
+ const resolvedIconElement = resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.iconWrapper, disabled && { opacity: 0.45 }] }, resolvedIcon) : null;
371
+ const selectorAccessibilityRole = type === "radio" ? "radio" : "checkbox";
372
+ return /* @__PURE__ */ React3__default.default.createElement(
373
+ reactNative.Pressable,
374
+ {
375
+ onPress: handlePress,
376
+ disabled,
377
+ accessibilityRole: "button",
378
+ accessibilityLabel: `${title}${description ? `, ${description}` : ""}`,
379
+ accessibilityState: { selected: isSelected, disabled },
380
+ style: [
381
+ styles.card,
382
+ variantStyle,
383
+ isSelected && !disabled && styles.cardSelected,
384
+ style
385
+ ]
386
+ },
387
+ /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.selectorContainer, accessibilityRole: selectorAccessibilityRole, accessibilityState: { selected: isSelected, disabled } }, type === "radio" ? /* @__PURE__ */ React3__default.default.createElement(
388
+ reactNativeEase.EaseView,
389
+ {
390
+ style: styles.radioCircle,
391
+ animate: { borderColor: !disabled && isSelected ? colors.primary : colors.border },
392
+ transition: COLOR_TRANSITION
393
+ },
394
+ /* @__PURE__ */ React3__default.default.createElement(
395
+ reactNativeEase.EaseView,
396
+ {
397
+ animate: {
398
+ scale: !disabled && isSelected ? 1 : 0,
399
+ opacity: !disabled && isSelected ? 1 : 0
400
+ },
401
+ transition: SPRING_ELASTIC
402
+ },
403
+ /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.radioDot, { backgroundColor: colors.primary }] })
404
+ )
405
+ ) : /* @__PURE__ */ React3__default.default.createElement(
406
+ reactNativeEase.EaseView,
407
+ {
408
+ style: styles.checkboxBox,
409
+ animate: {
410
+ borderColor: !disabled && isSelected ? colors.primary : colors.border,
411
+ backgroundColor: !disabled && isSelected ? colors.primary : "transparent"
412
+ },
413
+ transition: COLOR_TRANSITION
414
+ },
415
+ /* @__PURE__ */ React3__default.default.createElement(
416
+ reactNativeEase.EaseView,
417
+ {
418
+ animate: { opacity: !disabled && isSelected ? 1 : 0 },
419
+ transition: OPACITY_TRANSITION
420
+ },
421
+ /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] })
422
+ )
423
+ )), resolvedIconElement, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.textArea }, /* @__PURE__ */ React3__default.default.createElement(
424
+ reactNative.Text,
425
+ {
426
+ style: [styles.title, { color: disabled ? colors.foregroundMuted : colors.foreground }],
427
+ allowFontScaling: true,
428
+ numberOfLines: 2
429
+ },
430
+ title
431
+ ), description ? /* @__PURE__ */ React3__default.default.createElement(
432
+ reactNative.Text,
433
+ {
434
+ style: [styles.description, { color: disabled ? colors.foregroundMuted : colors.foregroundSubtle }],
435
+ allowFontScaling: true,
436
+ numberOfLines: 4
437
+ },
438
+ description
439
+ ) : null))
440
+ );
441
+ }
442
+ var styles = reactNative.StyleSheet.create({
443
+ group: {
444
+ width: "100%"
445
+ },
446
+ card: {
447
+ borderRadius: RADIUS.md,
448
+ borderWidth: 1
449
+ },
450
+ cardSelected: {
451
+ backgroundColor: void 0
452
+ // overridden by variantStyle
453
+ },
454
+ row: {
455
+ flexDirection: "row",
456
+ alignItems: "flex-start",
457
+ padding: s(16),
458
+ gap: s(12)
459
+ },
460
+ selectorContainer: {
461
+ paddingTop: vs(1)
462
+ },
463
+ radioCircle: {
464
+ width: s(24),
465
+ height: s(24),
466
+ borderRadius: s(12),
467
+ borderWidth: 2,
468
+ alignItems: "center",
469
+ justifyContent: "center"
470
+ },
471
+ radioDot: {
472
+ width: s(10),
473
+ height: s(10),
474
+ borderRadius: s(5)
475
+ },
476
+ checkboxBox: {
477
+ width: s(24),
478
+ height: s(24),
479
+ borderRadius: ms(4),
480
+ borderWidth: 2,
481
+ alignItems: "center",
482
+ justifyContent: "center"
483
+ },
484
+ checkmark: {
485
+ width: s(12),
486
+ height: vs(7),
487
+ borderLeftWidth: 2,
488
+ borderBottomWidth: 2,
489
+ transform: [{ rotate: "-45deg" }, { translateY: -1 }]
490
+ },
491
+ iconWrapper: {
492
+ paddingTop: vs(1)
493
+ },
494
+ textArea: {
495
+ flex: 1,
496
+ gap: vs(4)
497
+ },
498
+ title: {
499
+ fontFamily: "Sohne-SemiBold",
500
+ fontSize: ms(16),
501
+ lineHeight: mvs(22)
502
+ },
503
+ description: {
504
+ fontFamily: "Sohne-Regular",
505
+ fontSize: ms(13),
506
+ lineHeight: mvs(18)
507
+ }
508
+ });
509
+
510
+ exports.SelectableCard = SelectableCard;
511
+ exports.SelectableCardGroup = SelectableCardGroup;
@@ -0,0 +1,8 @@
1
+ export { SelectableCard, SelectableCardGroup } from './chunk-2P2CB235.mjs';
2
+ import './chunk-EJ7ZPXOH.mjs';
3
+ import './chunk-DVK4G2GT.mjs';
4
+ import './chunk-QY3X2UYR.mjs';
5
+ import './chunk-KA7LTET3.mjs';
6
+ import './chunk-YTXRIXNZ.mjs';
7
+ import './chunk-2CE3TQVY.mjs';
8
+ import './chunk-Y6FXYEAI.mjs';
@@ -108,6 +108,7 @@ function deriveColors(t, scheme) {
108
108
  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
109
109
  const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
110
110
  const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
111
+ const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
111
112
  const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
112
113
  const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
113
114
  const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -120,6 +121,7 @@ function deriveColors(t, scheme) {
120
121
  foregroundMuted,
121
122
  surface,
122
123
  surfaceStrong,
124
+ skeleton,
123
125
  destructiveTint,
124
126
  destructiveBorder,
125
127
  successTint,
@@ -1,9 +1,9 @@
1
- export { SelectableGrid } from './chunk-Z4VHZ7B5.mjs';
1
+ export { SelectableGrid } from './chunk-ZR6HSEAB.mjs';
2
2
  import './chunk-YNROWHQJ.mjs';
3
3
  import './chunk-EJ7ZPXOH.mjs';
4
4
  import './chunk-DVK4G2GT.mjs';
5
5
  import './chunk-QY3X2UYR.mjs';
6
6
  import './chunk-KA7LTET3.mjs';
7
- import './chunk-SOYNZDVY.mjs';
7
+ import './chunk-YTXRIXNZ.mjs';
8
8
  import './chunk-2CE3TQVY.mjs';
9
9
  import './chunk-Y6FXYEAI.mjs';
package/dist/Separator.js CHANGED
@@ -88,6 +88,7 @@ function deriveColors(t, scheme) {
88
88
  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
89
89
  const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
90
90
  const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
91
+ const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
91
92
  const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
92
93
  const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
93
94
  const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -100,6 +101,7 @@ function deriveColors(t, scheme) {
100
101
  foregroundMuted,
101
102
  surface,
102
103
  surfaceStrong,
104
+ skeleton,
103
105
  destructiveTint,
104
106
  destructiveBorder,
105
107
  successTint,
@@ -1,3 +1,3 @@
1
- export { Separator } from './chunk-MX6HRKMI.mjs';
2
- import './chunk-SOYNZDVY.mjs';
1
+ export { Separator } from './chunk-VJBUCITV.mjs';
2
+ import './chunk-YTXRIXNZ.mjs';
3
3
  import './chunk-Y6FXYEAI.mjs';
package/dist/Sheet.d.mts CHANGED
@@ -18,72 +18,30 @@ interface SheetProps {
18
18
  open: boolean;
19
19
  onClose: () => void;
20
20
  title?: string;
21
- /** Secondary text below title. */
22
21
  subtitle?: string;
23
- /** @deprecated Use `subtitle` instead. */
24
- description?: string;
25
- /** Show an X close button in the header. */
26
22
  showCloseButton?: boolean;
27
23
  children?: React.ReactNode;
28
- /** Style for the inner content container. */
29
24
  style?: ViewStyle;
30
- /** Style for the content wrapper (outside the scroll container). */
31
25
  contentStyle?: ViewStyle;
32
- /** Render children inside BottomSheetScrollView. */
26
+ /** Render children inside BottomSheetScrollView instead of BottomSheetView. */
33
27
  scrollable?: boolean;
34
- /** Cap sheet height (dp). Children scroll when content exceeds this value. */
28
+ /** Cap sheet height (dp). Content scrolls when exceeding this value. Requires `scrollable`. */
35
29
  maxHeight?: number;
36
- /**
37
- * Keyboard behavior — how the sheet responds to keyboard appearance.
38
- * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
39
- * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
40
- * - 'extend': extend sheet to maximum snap point
41
- *
42
- * Default: 'interactive' on both platforms.
43
- */
44
30
  keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
45
- /**
46
- * Keyboard blur behavior — what happens when keyboard dismisses.
47
- * - 'none': do nothing
48
- * - 'restore': restore sheet to previous position (default)
49
- */
50
31
  keyboardBlurBehavior?: 'none' | 'restore';
51
- /**
52
- * Blur keyboard when user starts dragging the sheet down.
53
- * Default: true (recommended for better UX)
54
- */
55
32
  enableBlurKeyboardOnGesture?: boolean;
56
- /**
57
- * Android-only: defines keyboard input mode.
58
- * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
59
- * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
60
- */
61
33
  android_keyboardInputMode?: 'adjustPan' | 'adjustResize';
62
- /** Sticky footer rendered below the scroll area. */
63
34
  footer?: React.ReactNode;
64
35
  /**
65
- * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
36
+ * Array of snap points (e.g., ['50%', '85%'] or [200, 500]).
66
37
  * When provided, disables enableDynamicSizing.
67
- * When omitted, sheet uses dynamic sizing (auto-fits content).
68
38
  */
69
39
  snapPoints?: (string | number)[];
70
- /**
71
- * When true, render as a centered modal dialog on wide screens (width ≥
72
- * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
73
- * bottom sheet. Use for store/category/picker dialogs that should feel native
74
- * on tablets and web.
75
- *
76
- * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
77
- * is not required there — use a regular `TextInput`.
78
- */
79
- responsive?: boolean;
80
- /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
81
- dialogMaxWidth?: number;
82
40
  }
83
41
  declare function SheetHeader({ children, style }: SheetHeaderProps): React.JSX.Element;
84
42
  declare function SheetContent({ children, style }: SheetContentProps): React.JSX.Element;
85
43
  declare function SheetFooter({ children, style }: SheetFooterProps): React.JSX.Element;
86
- declare function Sheet({ open, onClose, title, subtitle, description, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, responsive, dialogMaxWidth, }: SheetProps): React.JSX.Element;
44
+ declare function Sheet({ open, onClose, title, subtitle, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, }: SheetProps): React.JSX.Element;
87
45
  declare namespace Sheet {
88
46
  var Header: typeof SheetHeader;
89
47
  var Content: typeof SheetContent;