@retray-dev/ui-kit 12.1.0 → 13.0.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 (282) hide show
  1. package/COMPONENTS.md +183 -147
  2. package/CONSUMER.md +2 -2
  3. package/DESIGN.md +2 -2
  4. package/README.md +13 -8
  5. package/dist/Accordion.d.mts +6 -0
  6. package/dist/Accordion.d.ts +6 -0
  7. package/dist/Accordion.js +62 -208
  8. package/dist/Accordion.mjs +6 -5
  9. package/dist/AlertBanner.js +29 -151
  10. package/dist/AlertBanner.mjs +3 -3
  11. package/dist/AppHeader.js +37 -233
  12. package/dist/AppHeader.mjs +6 -7
  13. package/dist/Avatar.d.mts +17 -1
  14. package/dist/Avatar.d.ts +17 -1
  15. package/dist/Avatar.js +80 -113
  16. package/dist/Avatar.mjs +2 -2
  17. package/dist/Badge.js +24 -147
  18. package/dist/Badge.mjs +3 -3
  19. package/dist/Button.js +86 -274
  20. package/dist/Button.mjs +6 -6
  21. package/dist/Card.js +15 -198
  22. package/dist/Card.mjs +4 -5
  23. package/dist/CategoryStrip.d.mts +0 -5
  24. package/dist/CategoryStrip.d.ts +0 -5
  25. package/dist/CategoryStrip.js +47 -263
  26. package/dist/CategoryStrip.mjs +6 -6
  27. package/dist/Checkbox.js +15 -198
  28. package/dist/Checkbox.mjs +5 -5
  29. package/dist/Chip.js +44 -234
  30. package/dist/Chip.mjs +7 -6
  31. package/dist/ConfirmDialog.js +100 -296
  32. package/dist/ConfirmDialog.mjs +7 -7
  33. package/dist/CurrencyDisplay.js +1 -112
  34. package/dist/CurrencyDisplay.mjs +2 -2
  35. package/dist/CurrencyInput.js +35 -160
  36. package/dist/CurrencyInput.mjs +5 -5
  37. package/dist/DetailRow.js +25 -148
  38. package/dist/DetailRow.mjs +3 -3
  39. package/dist/EmptyState.js +87 -275
  40. package/dist/EmptyState.mjs +7 -7
  41. package/dist/ErrorBoundary.js +32 -197
  42. package/dist/ErrorBoundary.mjs +4 -4
  43. package/dist/Form.js +1 -112
  44. package/dist/Form.mjs +2 -2
  45. package/dist/HolographicCard.d.mts +0 -28
  46. package/dist/HolographicCard.d.ts +0 -28
  47. package/dist/HolographicCard.js +20 -130
  48. package/dist/HolographicCard.mjs +9 -32
  49. package/dist/IconButton.js +36 -232
  50. package/dist/IconButton.mjs +5 -6
  51. package/dist/IconPicker.js +222 -927
  52. package/dist/IconPicker.mjs +5 -5
  53. package/dist/ImageUpload.d.mts +5 -1
  54. package/dist/ImageUpload.d.ts +5 -1
  55. package/dist/ImageUpload.js +32 -215
  56. package/dist/ImageUpload.mjs +5 -6
  57. package/dist/ImageViewer.js +75 -264
  58. package/dist/ImageViewer.mjs +8 -8
  59. package/dist/Input.d.mts +1 -1
  60. package/dist/Input.d.ts +1 -1
  61. package/dist/Input.js +35 -160
  62. package/dist/Input.mjs +4 -4
  63. package/dist/LabelValue.js +24 -147
  64. package/dist/LabelValue.mjs +3 -3
  65. package/dist/ListGroup.js +1 -112
  66. package/dist/ListGroup.mjs +2 -2
  67. package/dist/ListItem.js +38 -233
  68. package/dist/ListItem.mjs +5 -6
  69. package/dist/MediaCard.d.mts +0 -14
  70. package/dist/MediaCard.d.ts +0 -14
  71. package/dist/MediaCard.js +69 -313
  72. package/dist/MediaCard.mjs +5 -6
  73. package/dist/MenuGroup.js +1 -112
  74. package/dist/MenuGroup.mjs +2 -2
  75. package/dist/MenuItem.js +36 -232
  76. package/dist/MenuItem.mjs +5 -6
  77. package/dist/MonthPicker.js +8 -161
  78. package/dist/MonthPicker.mjs +3 -3
  79. package/dist/NumberStepper.js +40 -236
  80. package/dist/NumberStepper.mjs +5 -6
  81. package/dist/PagerDots.d.mts +1 -1
  82. package/dist/PagerDots.d.ts +1 -1
  83. package/dist/PagerDots.js +69 -222
  84. package/dist/PagerDots.mjs +6 -5
  85. package/dist/Pressable.js +14 -85
  86. package/dist/Pressable.mjs +4 -4
  87. package/dist/PricingCard.js +94 -279
  88. package/dist/PricingCard.mjs +8 -8
  89. package/dist/Progress.js +3 -121
  90. package/dist/Progress.mjs +3 -3
  91. package/dist/RadioGroup.js +52 -263
  92. package/dist/RadioGroup.mjs +5 -5
  93. package/dist/RetrayProvider.d.mts +1 -1
  94. package/dist/RetrayProvider.d.ts +1 -1
  95. package/dist/RetrayProvider.js +5 -6
  96. package/dist/RetrayProvider.mjs +3 -3
  97. package/dist/Select.d.mts +2 -1
  98. package/dist/Select.d.ts +2 -1
  99. package/dist/Select.js +24 -230
  100. package/dist/Select.mjs +4 -5
  101. package/dist/SelectableCard.d.mts +27 -0
  102. package/dist/SelectableCard.d.ts +27 -0
  103. package/dist/SelectableCard.js +335 -0
  104. package/dist/SelectableCard.mjs +8 -0
  105. package/dist/SelectableGrid.d.mts +0 -21
  106. package/dist/SelectableGrid.d.ts +0 -21
  107. package/dist/SelectableGrid.js +49 -269
  108. package/dist/SelectableGrid.mjs +5 -6
  109. package/dist/Separator.js +1 -112
  110. package/dist/Separator.mjs +2 -2
  111. package/dist/Sheet.js +16 -163
  112. package/dist/Sheet.mjs +3 -3
  113. package/dist/SheetSelect.js +39 -234
  114. package/dist/SheetSelect.mjs +6 -6
  115. package/dist/Skeleton.d.mts +3 -1
  116. package/dist/Skeleton.d.ts +3 -1
  117. package/dist/Skeleton.js +7 -124
  118. package/dist/Skeleton.mjs +3 -3
  119. package/dist/Slider.js +6 -159
  120. package/dist/Slider.mjs +3 -3
  121. package/dist/Spinner.js +3 -114
  122. package/dist/Spinner.mjs +2 -2
  123. package/dist/Stats.d.mts +4 -1
  124. package/dist/Stats.d.ts +4 -1
  125. package/dist/Stats.js +60 -234
  126. package/dist/Stats.mjs +5 -6
  127. package/dist/Switch.js +24 -173
  128. package/dist/Switch.mjs +5 -4
  129. package/dist/TabBar.js +43 -198
  130. package/dist/TabBar.mjs +5 -4
  131. package/dist/Tabs.js +15 -197
  132. package/dist/Tabs.mjs +5 -5
  133. package/dist/Text.js +9 -128
  134. package/dist/Text.mjs +2 -2
  135. package/dist/Textarea.d.mts +2 -1
  136. package/dist/Textarea.d.ts +2 -1
  137. package/dist/Textarea.js +71 -217
  138. package/dist/Textarea.mjs +4 -4
  139. package/dist/Toast.js +1 -112
  140. package/dist/Toast.mjs +2 -2
  141. package/dist/Toggle.js +39 -234
  142. package/dist/Toggle.mjs +6 -6
  143. package/dist/{chunk-FFTYLPSB.mjs → chunk-2QOHHBJC.mjs} +13 -7
  144. package/dist/{chunk-BCWEHE34.mjs → chunk-2VIDP72N.mjs} +3 -3
  145. package/dist/{chunk-PGERH3P7.mjs → chunk-4NQFTHN3.mjs} +13 -7
  146. package/dist/{chunk-3N2M3WZL.mjs → chunk-4ZO5PTKF.mjs} +4 -4
  147. package/dist/{chunk-MYZ2EDYU.mjs → chunk-5MYNAAFE.mjs} +13 -17
  148. package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs} +3 -3
  149. package/dist/{chunk-ISY26JQJ.mjs → chunk-6CR4S6W2.mjs} +3 -3
  150. package/dist/{chunk-FUVYSVGR.mjs → chunk-6QLBHUEG.mjs} +8 -7
  151. package/dist/chunk-ARONDO7M.mjs +40 -0
  152. package/dist/{chunk-3UYAZ7I4.mjs → chunk-AZV7KNJI.mjs} +3 -3
  153. package/dist/{chunk-HLMPMUK2.mjs → chunk-BTUW5LSG.mjs} +11 -8
  154. package/dist/chunk-BULKGOIZ.mjs +235 -0
  155. package/dist/{chunk-265G6A46.mjs → chunk-CBIZLRYH.mjs} +29 -12
  156. package/dist/chunk-CM2DG4MR.mjs +142 -0
  157. package/dist/{chunk-2I2AYECM.mjs → chunk-DBHSUUKU.mjs} +2 -2
  158. package/dist/{chunk-P64WHW4A.mjs → chunk-DE25XTVQ.mjs} +3 -3
  159. package/dist/{chunk-DI7CBDL6.mjs → chunk-E4EQSCKR.mjs} +5 -5
  160. package/dist/{chunk-357YO24D.mjs → chunk-EHGBHFMH.mjs} +9 -17
  161. package/dist/{chunk-GK4VRMNE.mjs → chunk-EROPDCB5.mjs} +24 -27
  162. package/dist/{chunk-XBAGGKLW.mjs → chunk-ERWJPVX7.mjs} +2 -2
  163. package/dist/{chunk-LRM4AVYY.mjs → chunk-ESQDPO5E.mjs} +7 -7
  164. package/dist/{chunk-EFLFRAHD.mjs → chunk-EW2FIDSM.mjs} +1 -1
  165. package/dist/{chunk-7HSILTC4.mjs → chunk-FTTI6T5Q.mjs} +4 -4
  166. package/dist/{chunk-X26S5EVZ.mjs → chunk-HUSSF6TF.mjs} +1 -1
  167. package/dist/chunk-IFYMBOEN.mjs +14 -0
  168. package/dist/{chunk-S3KJCPEJ.mjs → chunk-IGU223UM.mjs} +80 -4
  169. package/dist/chunk-IJCMPVW5.mjs +121 -0
  170. package/dist/{chunk-I4V5XZPS.mjs → chunk-ITG4JQM3.mjs} +4 -4
  171. package/dist/{chunk-F4V6XLP4.mjs → chunk-K3QX2M26.mjs} +11 -8
  172. package/dist/{chunk-V6NFJXKO.mjs → chunk-K7TKID3V.mjs} +8 -7
  173. package/dist/{chunk-ZHMSAYLT.mjs → chunk-KAGADD2O.mjs} +4 -4
  174. package/dist/{chunk-3GEYJ7I5.mjs → chunk-KC5QDYGZ.mjs} +4 -4
  175. package/dist/{chunk-HJ46DTJE.mjs → chunk-KPTY7UYQ.mjs} +1 -1
  176. package/dist/{chunk-EMUWGDWC.mjs → chunk-KSSVIFYR.mjs} +11 -12
  177. package/dist/chunk-L3YKPTJQ.mjs +119 -0
  178. package/dist/chunk-M53LC4Q7.mjs +35 -0
  179. package/dist/{chunk-NXI4YDZ2.mjs → chunk-MP7GLMIR.mjs} +17 -25
  180. package/dist/chunk-MZ6WRTD2.mjs +40 -0
  181. package/dist/chunk-NGEN2EES.mjs +581 -0
  182. package/dist/{chunk-JULSIZDM.mjs → chunk-OBV72JD4.mjs} +1 -1
  183. package/dist/{chunk-2A2LEFZG.mjs → chunk-PGQ6FMXS.mjs} +6 -5
  184. package/dist/{chunk-BQZE3HAW.mjs → chunk-PI6RULJX.mjs} +1 -1
  185. package/dist/{chunk-FA2KMTH5.mjs → chunk-RA6SAAFE.mjs} +9 -8
  186. package/dist/{chunk-FVTVCJAH.mjs → chunk-RRKM4MKB.mjs} +7 -7
  187. package/dist/{chunk-AKM4EPOT.mjs → chunk-S2VGME7X.mjs} +1 -1
  188. package/dist/{chunk-OULVKTWL.mjs → chunk-S44XWTTC.mjs} +35 -25
  189. package/dist/{chunk-QSFV2P7O.mjs → chunk-SZEKQAOY.mjs} +1 -1
  190. package/dist/{chunk-N4ZPVCJH.mjs → chunk-TETMEKZE.mjs} +9 -9
  191. package/dist/{chunk-2CBQKU7H.mjs → chunk-TMH263OK.mjs} +5 -4
  192. package/dist/{chunk-D3Y2T42P.mjs → chunk-U6DEBYU5.mjs} +10 -9
  193. package/dist/{chunk-4WFMPFZB.mjs → chunk-UOKFSFNJ.mjs} +2 -2
  194. package/dist/{chunk-WOEWGSTU.mjs → chunk-URIH43IJ.mjs} +13 -21
  195. package/dist/{chunk-JCZQOY4O.mjs → chunk-V2ZB2XNS.mjs} +16 -10
  196. package/dist/{chunk-P73V2EKS.mjs → chunk-WIPEDNSD.mjs} +7 -7
  197. package/dist/{chunk-BOVUP27T.mjs → chunk-XCIG6HT2.mjs} +6 -5
  198. package/dist/chunk-Y6YS33GM.mjs +131 -0
  199. package/dist/{chunk-5OLNXP3S.mjs → chunk-ZKDKKQCE.mjs} +29 -7
  200. package/dist/{chunk-DF6DU42P.mjs → chunk-ZTPYUU5C.mjs} +5 -5
  201. package/dist/{index-wt-orHUi.d.ts → index-CY34hxPN.d.mts} +1 -0
  202. package/dist/{index-wt-orHUi.d.mts → index-CY34hxPN.d.ts} +1 -0
  203. package/dist/index.d.mts +15 -74
  204. package/dist/index.d.ts +15 -74
  205. package/dist/index.js +1055 -1562
  206. package/dist/index.mjs +81 -84
  207. package/package.json +8 -10
  208. package/src/components/Accordion/Accordion.tsx +32 -9
  209. package/src/components/AlertBanner/AlertBanner.tsx +7 -6
  210. package/src/components/AppHeader/AppHeader.tsx +1 -1
  211. package/src/components/Avatar/Avatar.tsx +92 -1
  212. package/src/components/Avatar/index.ts +2 -2
  213. package/src/components/Badge/Badge.tsx +2 -2
  214. package/src/components/Button/Button.tsx +64 -57
  215. package/src/components/Card/Card.tsx +1 -0
  216. package/src/components/CategoryStrip/CategoryStrip.tsx +36 -49
  217. package/src/components/Chip/Chip.tsx +5 -4
  218. package/src/components/ConfirmDialog/ConfirmDialog.tsx +13 -6
  219. package/src/components/DetailRow/DetailRow.tsx +3 -3
  220. package/src/components/EmptyState/EmptyState.tsx +2 -2
  221. package/src/components/ErrorBoundary/ErrorBoundary.tsx +6 -6
  222. package/src/components/HolographicCard/HolographicCard.tsx +14 -95
  223. package/src/components/IconButton/IconButton.tsx +2 -2
  224. package/src/components/IconPicker/IconPicker.tsx +13 -12
  225. package/src/components/ImageUpload/ImageUpload.tsx +24 -28
  226. package/src/components/ImageViewer/ImageViewer.tsx +3 -3
  227. package/src/components/Input/Input.tsx +11 -5
  228. package/src/components/LabelValue/LabelValue.tsx +2 -2
  229. package/src/components/ListItem/ListItem.tsx +4 -4
  230. package/src/components/MediaCard/MediaCard.tsx +21 -59
  231. package/src/components/MenuItem/MenuItem.tsx +2 -2
  232. package/src/components/MonthPicker/MonthPicker.tsx +2 -2
  233. package/src/components/NumberStepper/NumberStepper.tsx +6 -6
  234. package/src/components/PagerDots/PagerDots.tsx +38 -28
  235. package/src/components/PricingCard/PricingCard.tsx +6 -6
  236. package/src/components/RadioGroup/RadioGroup.tsx +18 -31
  237. package/src/components/Select/Select.tsx +32 -39
  238. package/src/components/SelectableCard/SelectableCard.tsx +302 -0
  239. package/src/components/SelectableCard/index.ts +1 -0
  240. package/src/components/SelectableGrid/SelectableGrid.tsx +38 -72
  241. package/src/components/Sheet/Sheet.tsx +11 -4
  242. package/src/components/SheetSelect/SheetSelect.tsx +3 -3
  243. package/src/components/Skeleton/Skeleton.tsx +6 -3
  244. package/src/components/Spinner/Spinner.tsx +2 -2
  245. package/src/components/Stats/Stats.tsx +36 -8
  246. package/src/components/Switch/Switch.tsx +9 -6
  247. package/src/components/TabBar/TabBar.tsx +9 -8
  248. package/src/components/Text/Text.tsx +12 -1
  249. package/src/components/Textarea/Textarea.tsx +18 -32
  250. package/src/components/Toggle/Toggle.tsx +3 -3
  251. package/src/hooks/useConfirmDialog.ts +31 -42
  252. package/src/index.ts +4 -4
  253. package/src/theme/ThemeProvider.tsx +1 -4
  254. package/src/theme/colorUtils.ts +1 -72
  255. package/src/theme/colors.ts +47 -1
  256. package/src/theme/types.ts +6 -3
  257. package/src/utils/animations.ts +0 -47
  258. package/src/utils/curatedIcons.ts +93 -801
  259. package/src/utils/haptics.ts +13 -208
  260. package/src/utils/icons.ts +27 -91
  261. package/src/utils/pressable.ts +10 -61
  262. package/dist/VirtualList.d.mts +0 -19
  263. package/dist/VirtualList.d.ts +0 -19
  264. package/dist/VirtualList.js +0 -38
  265. package/dist/VirtualList.mjs +0 -2
  266. package/dist/chunk-3DKJ2GIC.mjs +0 -30
  267. package/dist/chunk-AQEVCEXV.mjs +0 -164
  268. package/dist/chunk-DOGIPOF5.mjs +0 -131
  269. package/dist/chunk-DVK4G2GT.mjs +0 -59
  270. package/dist/chunk-EJ7ZPXOH.mjs +0 -163
  271. package/dist/chunk-J6Q2YJEV.mjs +0 -134
  272. package/dist/chunk-JNVAIDLK.mjs +0 -136
  273. package/dist/chunk-KA7LTET3.mjs +0 -71
  274. package/dist/chunk-KHYX4IOM.mjs +0 -1114
  275. package/dist/chunk-NC5ZTR2Y.mjs +0 -32
  276. package/dist/chunk-YNROWHQJ.mjs +0 -46
  277. package/src/components/VirtualList/VirtualList.tsx +0 -60
  278. package/src/components/VirtualList/index.ts +0 -1
  279. package/src/utils/fontGuard.ts +0 -35
  280. package/src/utils/hover.ts +0 -25
  281. package/src/utils/useColorTransition.ts +0 -40
  282. package/src/utils/usePressScale.ts +0 -75
@@ -20,124 +20,8 @@ var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
20
20
  var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
21
21
  var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
22
22
 
23
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
24
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
25
- }) : x)(function(x) {
26
- if (typeof require !== "undefined") return require.apply(this, arguments);
27
- throw Error('Dynamic require of "' + x + '" is not supported');
28
- });
29
-
30
- // src/theme/colorUtils.ts
31
- function hexToRgb(hex) {
32
- const clean = hex.replace("#", "");
33
- const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
34
- if (full.length !== 6) return null;
35
- return {
36
- r: parseInt(full.slice(0, 2), 16),
37
- g: parseInt(full.slice(2, 4), 16),
38
- b: parseInt(full.slice(4, 6), 16)
39
- };
40
- }
41
- function componentToHex(c) {
42
- return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
43
- }
44
- function rgbToHex(r, g, b) {
45
- return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
46
- }
47
- function withAlphaOnWhite(hex, alpha) {
48
- const rgb = hexToRgb(hex);
49
- if (!rgb) return hex;
50
- const r = rgb.r * alpha + 255 * (1 - alpha);
51
- const g = rgb.g * alpha + 255 * (1 - alpha);
52
- const b = rgb.b * alpha + 255 * (1 - alpha);
53
- return rgbToHex(r, g, b);
54
- }
55
- function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
56
- const rgb = hexToRgb(hex);
57
- const bg = hexToRgb(bgHex);
58
- if (!rgb || !bg) return hex;
59
- const r = rgb.r * alpha + bg.r * (1 - alpha);
60
- const g = rgb.g * alpha + bg.g * (1 - alpha);
61
- const b = rgb.b * alpha + bg.b * (1 - alpha);
62
- return rgbToHex(r, g, b);
63
- }
64
- function mixWithBackground(fgHex, bgHex, opacity) {
65
- const fg = hexToRgb(fgHex);
66
- const bg = hexToRgb(bgHex);
67
- if (!fg || !bg) return fgHex;
68
- const r = fg.r * opacity + bg.r * (1 - opacity);
69
- const g = fg.g * opacity + bg.g * (1 - opacity);
70
- const b = fg.b * opacity + bg.b * (1 - opacity);
71
- return rgbToHex(r, g, b);
72
- }
73
- function lighten(hex, amount) {
74
- return withAlphaOnWhite(hex, 1 - amount);
75
- }
76
- function darken(hex, amount) {
77
- const rgb = hexToRgb(hex);
78
- if (!rgb) return hex;
79
- return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
80
- }
81
-
82
- // src/theme/colors.ts
83
- var defaultLight = {
84
- background: "#ffffff",
85
- foreground: "#1a1a1a",
86
- card: "#ffffff",
87
- primary: "#1a1a1a",
88
- primaryForeground: "#ffffff",
89
- // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
90
- accent: "#d4561d",
91
- accentForeground: "#ffffff",
92
- border: "#dddddd",
93
- // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
94
- destructive: "#c72828",
95
- destructiveForeground: "#ffffff",
96
- success: "#1a7a45",
97
- successForeground: "#ffffff",
98
- // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
99
- warning: "#9a5200",
100
- warningForeground: "#ffffff"
101
- };
102
- function deriveColors(t, scheme) {
103
- const dark = scheme === "dark";
104
- const bg = t.background;
105
- const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
106
- const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
107
- const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
108
- const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
109
- const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
110
- const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
111
- const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
112
- const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
113
- const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
114
- const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
115
- return {
116
- ...t,
117
- foregroundSubtle,
118
- foregroundMuted,
119
- surface,
120
- surfaceStrong,
121
- destructiveTint,
122
- destructiveBorder,
123
- successTint,
124
- successBorder,
125
- warningTint,
126
- warningBorder,
127
- overlay: t.overlay ?? "rgba(0,0,0,0.45)",
128
- accentResolved: t.accent ?? t.primary,
129
- accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
130
- ring: t.accent ?? t.primary,
131
- input: t.border,
132
- separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
133
- };
134
- }
135
-
136
- // src/theme/ThemeProvider.tsx
137
- var ThemeContext = React3.createContext({
138
- colors: deriveColors(defaultLight, "light"),
139
- colorScheme: "light"
140
- });
23
+ // src/components/ErrorBoundary/ErrorBoundary.tsx
24
+ var ThemeContext = React3.createContext(void 0);
141
25
  function useTheme() {
142
26
  const context = React3.useContext(ThemeContext);
143
27
  if (!context) {
@@ -145,46 +29,34 @@ function useTheme() {
145
29
  }
146
30
  return context;
147
31
  }
148
- var glyphMapOf = (mod) => mod.glyphMap ?? {};
149
32
  var ALL_FAMILIES = [
150
- { name: "Ionicons", component: Ionicons__default.default, getGlyphMap: () => glyphMapOf(Ionicons__default.default) },
151
- { name: "MaterialIcons", component: MaterialIcons__default.default, getGlyphMap: () => glyphMapOf(MaterialIcons__default.default) },
152
- { name: "FontAwesome5", component: FontAwesome5__default.default, getGlyphMap: () => glyphMapOf(FontAwesome5__default.default) },
153
- { name: "Entypo", component: Entypo__default.default, getGlyphMap: () => glyphMapOf(Entypo__default.default) },
154
- { name: "AntDesign", component: AntDesign__default.default, getGlyphMap: () => glyphMapOf(AntDesign__default.default) },
155
- { name: "Feather", component: Feather__default.default, getGlyphMap: () => glyphMapOf(Feather__default.default) }
33
+ { name: "Feather", component: Feather__default.default },
34
+ { name: "AntDesign", component: AntDesign__default.default },
35
+ { name: "Entypo", component: Entypo__default.default },
36
+ { name: "FontAwesome5", component: FontAwesome5__default.default },
37
+ { name: "MaterialIcons", component: MaterialIcons__default.default },
38
+ { name: "Ionicons", component: Ionicons__default.default }
156
39
  ];
157
- var activeFamilies = ALL_FAMILIES;
158
- var resolvedCache = null;
159
- function buildCache(families) {
160
- const cache = /* @__PURE__ */ new Map();
161
- for (const family of activeFamilies) {
162
- const glyphMap = family.getGlyphMap();
163
- for (const iconName of Object.keys(glyphMap)) {
164
- cache.set(iconName, family);
40
+ var glyphCacheInitialized = false;
41
+ function ensureGlyphCache() {
42
+ if (glyphCacheInitialized) return;
43
+ glyphCacheInitialized = true;
44
+ for (const entry of ALL_FAMILIES) {
45
+ try {
46
+ entry.glyphMap = entry.component.glyphMap;
47
+ } catch {
48
+ entry.glyphMap = {};
165
49
  }
166
50
  }
167
- return cache;
168
- }
169
- function resolveFamily(name) {
170
- if (!resolvedCache) {
171
- resolvedCache = buildCache();
172
- }
173
- return resolvedCache.get(name) ?? null;
174
51
  }
175
52
  function Icon({ name, size, color, family }) {
176
- let resolved = null;
177
- if (family) {
178
- resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null;
179
- } else {
180
- resolved = resolveFamily(name);
181
- }
182
- if (!resolved) return null;
183
- const Component = resolved.component;
184
- return React3__default.default.createElement(Component, { name, size, color });
185
- }
186
- function renderIcon(name, size, color) {
187
- return React3__default.default.createElement(Icon, { name, size, color });
53
+ ensureGlyphCache();
54
+ const entry = family ? ALL_FAMILIES.find((f) => f.name === family) : ALL_FAMILIES.find((f) => {
55
+ const glyphMap = f.glyphMap;
56
+ return glyphMap ? name in glyphMap : false;
57
+ });
58
+ if (!entry) return null;
59
+ return React3__default.default.createElement(entry.component, { name, size, color });
188
60
  }
189
61
  var isWeb = reactNative.Platform.OS === "web";
190
62
  var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
@@ -198,11 +70,11 @@ var RADIUS = {
198
70
  full: 9999
199
71
  };
200
72
  var _haptics = null;
201
- var _hapticsLoaded = false;
73
+ var _loaded = false;
202
74
  async function getHaptics() {
203
75
  if (reactNative.Platform.OS === "web") return null;
204
- if (!_hapticsLoaded) {
205
- _hapticsLoaded = true;
76
+ if (!_loaded) {
77
+ _loaded = true;
206
78
  try {
207
79
  _haptics = await import('expo-haptics');
208
80
  } catch {
@@ -211,56 +83,19 @@ async function getHaptics() {
211
83
  }
212
84
  return _haptics;
213
85
  }
214
- var _pulsar = null;
215
- var _pulsarChecked = false;
216
- var _pulsarAvailable = false;
217
- function isPulsarNativeRegistered() {
218
- try {
219
- const g = globalThis;
220
- if (typeof g.__turboModuleProxy === "function") {
221
- return g.__turboModuleProxy("RNPulsar") != null;
222
- }
223
- return reactNative.NativeModules?.RNPulsar != null;
224
- } catch {
225
- return false;
226
- }
227
- }
228
- function getPulsar() {
229
- if (reactNative.Platform.OS === "web") return null;
230
- if (!_pulsarChecked) {
231
- _pulsarChecked = true;
232
- try {
233
- if (isPulsarNativeRegistered()) {
234
- _pulsar = __require("react-native-pulsar");
235
- _pulsarAvailable = true;
236
- }
237
- } catch {
238
- _pulsar = null;
239
- _pulsarAvailable = false;
240
- }
241
- }
242
- return _pulsarAvailable ? _pulsar : null;
243
- }
244
86
  function impactLight() {
245
- if (reactNative.Platform.OS === "web") return;
246
- getHaptics().then((h) => {
247
- if (h) {
248
- h.impactAsync(h.ImpactFeedbackStyle.Light);
249
- } else {
250
- getPulsar()?.Presets.System.impactLight();
251
- }
252
- });
87
+ getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
253
88
  }
254
89
 
255
90
  // src/components/ErrorBoundary/ErrorBoundary.tsx
256
91
  function DefaultErrorFallback({
257
92
  error,
258
93
  reset,
259
- title = "Something went wrong",
94
+ title = "Algo sali\xF3 mal",
260
95
  message
261
96
  }) {
262
97
  const { colors } = useTheme();
263
- return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, renderIcon("alert-triangle", ms(28), colors.destructive)), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "An unexpected error occurred."), /* @__PURE__ */ React3__default.default.createElement(
98
+ return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, /* @__PURE__ */ React3__default.default.createElement(Icon, { name: "alert-triangle", size: ms(28), color: colors.destructive })), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "Ocurri\xF3 un error inesperado."), /* @__PURE__ */ React3__default.default.createElement(
264
99
  reactNative.TouchableOpacity,
265
100
  {
266
101
  style: [styles.button, { backgroundColor: colors.primary }],
@@ -271,9 +106,9 @@ function DefaultErrorFallback({
271
106
  activeOpacity: 0.85,
272
107
  touchSoundDisabled: true,
273
108
  accessibilityRole: "button",
274
- accessibilityLabel: "Try again"
109
+ accessibilityLabel: "Intentar de nuevo"
275
110
  },
276
- /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Try again")
111
+ /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Intentar de nuevo")
277
112
  ));
278
113
  }
279
114
  var ErrorBoundary = class extends React3__default.default.Component {
@@ -1,7 +1,7 @@
1
- export { ErrorBoundary } from './chunk-LRM4AVYY.mjs';
2
- import './chunk-EJ7ZPXOH.mjs';
1
+ export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
2
+ import './chunk-ARONDO7M.mjs';
3
3
  import './chunk-QY3X2UYR.mjs';
4
- import './chunk-KA7LTET3.mjs';
5
- import './chunk-EMUWGDWC.mjs';
4
+ import './chunk-MZ6WRTD2.mjs';
5
+ import './chunk-KSSVIFYR.mjs';
6
6
  import './chunk-2CE3TQVY.mjs';
7
7
  import './chunk-Y6FXYEAI.mjs';
package/dist/Form.js CHANGED
@@ -9,118 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
9
  var React2__default = /*#__PURE__*/_interopDefault(React2);
10
10
 
11
11
  // src/components/Form/Form.tsx
12
-
13
- // src/theme/colorUtils.ts
14
- function hexToRgb(hex) {
15
- const clean = hex.replace("#", "");
16
- const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
17
- if (full.length !== 6) return null;
18
- return {
19
- r: parseInt(full.slice(0, 2), 16),
20
- g: parseInt(full.slice(2, 4), 16),
21
- b: parseInt(full.slice(4, 6), 16)
22
- };
23
- }
24
- function componentToHex(c) {
25
- return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
26
- }
27
- function rgbToHex(r, g, b) {
28
- return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
29
- }
30
- function withAlphaOnWhite(hex, alpha) {
31
- const rgb = hexToRgb(hex);
32
- if (!rgb) return hex;
33
- const r = rgb.r * alpha + 255 * (1 - alpha);
34
- const g = rgb.g * alpha + 255 * (1 - alpha);
35
- const b = rgb.b * alpha + 255 * (1 - alpha);
36
- return rgbToHex(r, g, b);
37
- }
38
- function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
39
- const rgb = hexToRgb(hex);
40
- const bg = hexToRgb(bgHex);
41
- if (!rgb || !bg) return hex;
42
- const r = rgb.r * alpha + bg.r * (1 - alpha);
43
- const g = rgb.g * alpha + bg.g * (1 - alpha);
44
- const b = rgb.b * alpha + bg.b * (1 - alpha);
45
- return rgbToHex(r, g, b);
46
- }
47
- function mixWithBackground(fgHex, bgHex, opacity) {
48
- const fg = hexToRgb(fgHex);
49
- const bg = hexToRgb(bgHex);
50
- if (!fg || !bg) return fgHex;
51
- const r = fg.r * opacity + bg.r * (1 - opacity);
52
- const g = fg.g * opacity + bg.g * (1 - opacity);
53
- const b = fg.b * opacity + bg.b * (1 - opacity);
54
- return rgbToHex(r, g, b);
55
- }
56
- function lighten(hex, amount) {
57
- return withAlphaOnWhite(hex, 1 - amount);
58
- }
59
- function darken(hex, amount) {
60
- const rgb = hexToRgb(hex);
61
- if (!rgb) return hex;
62
- return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
63
- }
64
-
65
- // src/theme/colors.ts
66
- var defaultLight = {
67
- background: "#ffffff",
68
- foreground: "#1a1a1a",
69
- card: "#ffffff",
70
- primary: "#1a1a1a",
71
- primaryForeground: "#ffffff",
72
- // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
73
- accent: "#d4561d",
74
- accentForeground: "#ffffff",
75
- border: "#dddddd",
76
- // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
77
- destructive: "#c72828",
78
- destructiveForeground: "#ffffff",
79
- success: "#1a7a45",
80
- successForeground: "#ffffff",
81
- // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
82
- warning: "#9a5200",
83
- warningForeground: "#ffffff"
84
- };
85
- function deriveColors(t, scheme) {
86
- const dark = scheme === "dark";
87
- const bg = t.background;
88
- const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
89
- const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
90
- const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
91
- const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
92
- const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
93
- const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
94
- const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
95
- const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
96
- const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
97
- const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
98
- return {
99
- ...t,
100
- foregroundSubtle,
101
- foregroundMuted,
102
- surface,
103
- surfaceStrong,
104
- destructiveTint,
105
- destructiveBorder,
106
- successTint,
107
- successBorder,
108
- warningTint,
109
- warningBorder,
110
- overlay: t.overlay ?? "rgba(0,0,0,0.45)",
111
- accentResolved: t.accent ?? t.primary,
112
- accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
113
- ring: t.accent ?? t.primary,
114
- input: t.border,
115
- separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
116
- };
117
- }
118
-
119
- // src/theme/ThemeProvider.tsx
120
- var ThemeContext = React2.createContext({
121
- colors: deriveColors(defaultLight, "light"),
122
- colorScheme: "light"
123
- });
12
+ var ThemeContext = React2.createContext(void 0);
124
13
  function useTheme() {
125
14
  const context = React2.useContext(ThemeContext);
126
15
  if (!context) {
package/dist/Form.mjs CHANGED
@@ -1,4 +1,4 @@
1
- export { Form, FormField, FormFooter, FormSection } from './chunk-HJ46DTJE.mjs';
2
- import './chunk-EMUWGDWC.mjs';
1
+ export { Form, FormField, FormFooter, FormSection } from './chunk-KPTY7UYQ.mjs';
2
+ import './chunk-KSSVIFYR.mjs';
3
3
  import './chunk-2CE3TQVY.mjs';
4
4
  import './chunk-Y6FXYEAI.mjs';
@@ -2,54 +2,26 @@ import React from 'react';
2
2
  import { ViewStyle } from 'react-native';
3
3
  import { useImage } from '@shopify/react-native-skia';
4
4
 
5
- /** Available foil color preset names */
6
5
  type FoilPreset = 'rainbow' | 'gold' | 'silver' | 'cosmic' | 'emerald' | 'rose' | 'ocean' | 'fire' | 'aurora' | 'neon';
7
- /** Foil color presets — each is an array of RGBA colors for the gradient */
8
6
  declare const FOIL_PRESETS: Record<FoilPreset, string[]>;
9
7
  interface HolographicCardProps {
10
- /** Card art — `require()` asset or `{ uri }`. Omitted = gradient-only foil surface. */
11
8
  source?: Parameters<typeof useImage>[0];
12
- /** Card width (dp). Defaults to 300. */
13
9
  width?: number;
14
- /** Card height (dp). Defaults to `width * 1.4` (trading-card ratio). */
15
10
  height?: number;
16
- /** Corner radius (dp). Defaults to `RADIUS.md`. */
17
11
  borderRadius?: number;
18
- /** React to device motion (gyroscope) for parallax tilt + sheen. Defaults to true. */
19
12
  enableTilt?: boolean;
20
- /** Strength of the foil sheen, 0–1. Defaults to 1. */
21
13
  intensity?: number;
22
- /** Called when the card is pressed. */
23
14
  onPress?: () => void;
24
15
  style?: ViewStyle;
25
- /** Foil color preset. Defaults to 'rainbow'. Ignored if `foilColors` is provided. */
26
16
  foilPreset?: FoilPreset;
27
- /** Custom foil gradient colors (array of RGBA strings). Overrides `foilPreset`. */
28
17
  foilColors?: string[];
29
- /** Maximum tilt angle in degrees (0–45). Defaults to 10. */
30
18
  maxTiltDegrees?: number;
31
- /** Sensitivity of tilt to device motion (0.1–2). Higher = more responsive. Defaults to 1. */
32
19
  tiltSensitivity?: number;
33
- /** How far the sheen moves relative to tilt (0–1). Defaults to 0.6. */
34
20
  sheenSpread?: number;
35
- /** Animation duration for tilt smoothing in ms. Defaults to 80. */
36
21
  tiltAnimationDuration?: number;
37
- /** Perspective depth for 3D effect (200–2000). Defaults to 800. */
38
22
  perspective?: number;
39
- /** Blend mode for the foil overlay. Defaults to 'plus'. */
40
23
  blendMode?: 'plus' | 'screen' | 'overlay' | 'softLight' | 'hardLight';
41
24
  }
42
- /**
43
- * Holographic / foil trading-card surface (Pokémon-TCG style). Renders the art
44
- * on a Skia canvas with an animated rainbow sheen, and tilts in 3D toward device
45
- * motion. The sheen position tracks the tilt so the foil "catches the light".
46
- *
47
- * Deep-import only — keeps Skia out of the main bundle:
48
- * `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`
49
- *
50
- * Requires the optional peers `@shopify/react-native-skia` and (for tilt)
51
- * `expo-sensors`. Without `expo-sensors` the card renders with a static sheen.
52
- */
53
25
  declare function HolographicCard({ source, width, height, borderRadius, enableTilt, intensity, onPress, style, foilPreset, foilColors, maxTiltDegrees, tiltSensitivity, sheenSpread, tiltAnimationDuration, perspective, blendMode, }: HolographicCardProps): React.JSX.Element;
54
26
 
55
27
  export { FOIL_PRESETS, type FoilPreset, HolographicCard, type HolographicCardProps };
@@ -2,54 +2,26 @@ import React from 'react';
2
2
  import { ViewStyle } from 'react-native';
3
3
  import { useImage } from '@shopify/react-native-skia';
4
4
 
5
- /** Available foil color preset names */
6
5
  type FoilPreset = 'rainbow' | 'gold' | 'silver' | 'cosmic' | 'emerald' | 'rose' | 'ocean' | 'fire' | 'aurora' | 'neon';
7
- /** Foil color presets — each is an array of RGBA colors for the gradient */
8
6
  declare const FOIL_PRESETS: Record<FoilPreset, string[]>;
9
7
  interface HolographicCardProps {
10
- /** Card art — `require()` asset or `{ uri }`. Omitted = gradient-only foil surface. */
11
8
  source?: Parameters<typeof useImage>[0];
12
- /** Card width (dp). Defaults to 300. */
13
9
  width?: number;
14
- /** Card height (dp). Defaults to `width * 1.4` (trading-card ratio). */
15
10
  height?: number;
16
- /** Corner radius (dp). Defaults to `RADIUS.md`. */
17
11
  borderRadius?: number;
18
- /** React to device motion (gyroscope) for parallax tilt + sheen. Defaults to true. */
19
12
  enableTilt?: boolean;
20
- /** Strength of the foil sheen, 0–1. Defaults to 1. */
21
13
  intensity?: number;
22
- /** Called when the card is pressed. */
23
14
  onPress?: () => void;
24
15
  style?: ViewStyle;
25
- /** Foil color preset. Defaults to 'rainbow'. Ignored if `foilColors` is provided. */
26
16
  foilPreset?: FoilPreset;
27
- /** Custom foil gradient colors (array of RGBA strings). Overrides `foilPreset`. */
28
17
  foilColors?: string[];
29
- /** Maximum tilt angle in degrees (0–45). Defaults to 10. */
30
18
  maxTiltDegrees?: number;
31
- /** Sensitivity of tilt to device motion (0.1–2). Higher = more responsive. Defaults to 1. */
32
19
  tiltSensitivity?: number;
33
- /** How far the sheen moves relative to tilt (0–1). Defaults to 0.6. */
34
20
  sheenSpread?: number;
35
- /** Animation duration for tilt smoothing in ms. Defaults to 80. */
36
21
  tiltAnimationDuration?: number;
37
- /** Perspective depth for 3D effect (200–2000). Defaults to 800. */
38
22
  perspective?: number;
39
- /** Blend mode for the foil overlay. Defaults to 'plus'. */
40
23
  blendMode?: 'plus' | 'screen' | 'overlay' | 'softLight' | 'hardLight';
41
24
  }
42
- /**
43
- * Holographic / foil trading-card surface (Pokémon-TCG style). Renders the art
44
- * on a Skia canvas with an animated rainbow sheen, and tilts in 3D toward device
45
- * motion. The sheen position tracks the tilt so the foil "catches the light".
46
- *
47
- * Deep-import only — keeps Skia out of the main bundle:
48
- * `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`
49
- *
50
- * Requires the optional peers `@shopify/react-native-skia` and (for tilt)
51
- * `expo-sensors`. Without `expo-sensors` the card renders with a static sheen.
52
- */
53
25
  declare function HolographicCard({ source, width, height, borderRadius, enableTilt, intensity, onPress, style, foilPreset, foilColors, maxTiltDegrees, tiltSensitivity, sheenSpread, tiltAnimationDuration, perspective, blendMode, }: HolographicCardProps): React.JSX.Element;
54
26
 
55
27
  export { FOIL_PRESETS, type FoilPreset, HolographicCard, type HolographicCardProps };