@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.
- package/COMPONENTS.md +183 -147
- package/CONSUMER.md +2 -2
- package/DESIGN.md +2 -2
- package/README.md +13 -8
- package/dist/Accordion.d.mts +6 -0
- package/dist/Accordion.d.ts +6 -0
- package/dist/Accordion.js +62 -208
- package/dist/Accordion.mjs +6 -5
- package/dist/AlertBanner.js +29 -151
- package/dist/AlertBanner.mjs +3 -3
- package/dist/AppHeader.js +37 -233
- package/dist/AppHeader.mjs +6 -7
- package/dist/Avatar.d.mts +17 -1
- package/dist/Avatar.d.ts +17 -1
- package/dist/Avatar.js +80 -113
- package/dist/Avatar.mjs +2 -2
- package/dist/Badge.js +24 -147
- package/dist/Badge.mjs +3 -3
- package/dist/Button.js +86 -274
- package/dist/Button.mjs +6 -6
- package/dist/Card.js +15 -198
- package/dist/Card.mjs +4 -5
- package/dist/CategoryStrip.d.mts +0 -5
- package/dist/CategoryStrip.d.ts +0 -5
- package/dist/CategoryStrip.js +47 -263
- package/dist/CategoryStrip.mjs +6 -6
- package/dist/Checkbox.js +15 -198
- package/dist/Checkbox.mjs +5 -5
- package/dist/Chip.js +44 -234
- package/dist/Chip.mjs +7 -6
- package/dist/ConfirmDialog.js +100 -296
- package/dist/ConfirmDialog.mjs +7 -7
- package/dist/CurrencyDisplay.js +1 -112
- package/dist/CurrencyDisplay.mjs +2 -2
- package/dist/CurrencyInput.js +35 -160
- package/dist/CurrencyInput.mjs +5 -5
- package/dist/DetailRow.js +25 -148
- package/dist/DetailRow.mjs +3 -3
- package/dist/EmptyState.js +87 -275
- package/dist/EmptyState.mjs +7 -7
- package/dist/ErrorBoundary.js +32 -197
- package/dist/ErrorBoundary.mjs +4 -4
- package/dist/Form.js +1 -112
- package/dist/Form.mjs +2 -2
- package/dist/HolographicCard.d.mts +0 -28
- package/dist/HolographicCard.d.ts +0 -28
- package/dist/HolographicCard.js +20 -130
- package/dist/HolographicCard.mjs +9 -32
- package/dist/IconButton.js +36 -232
- package/dist/IconButton.mjs +5 -6
- package/dist/IconPicker.js +222 -927
- package/dist/IconPicker.mjs +5 -5
- package/dist/ImageUpload.d.mts +5 -1
- package/dist/ImageUpload.d.ts +5 -1
- package/dist/ImageUpload.js +32 -215
- package/dist/ImageUpload.mjs +5 -6
- package/dist/ImageViewer.js +75 -264
- package/dist/ImageViewer.mjs +8 -8
- package/dist/Input.d.mts +1 -1
- package/dist/Input.d.ts +1 -1
- package/dist/Input.js +35 -160
- package/dist/Input.mjs +4 -4
- package/dist/LabelValue.js +24 -147
- package/dist/LabelValue.mjs +3 -3
- package/dist/ListGroup.js +1 -112
- package/dist/ListGroup.mjs +2 -2
- package/dist/ListItem.js +38 -233
- package/dist/ListItem.mjs +5 -6
- package/dist/MediaCard.d.mts +0 -14
- package/dist/MediaCard.d.ts +0 -14
- package/dist/MediaCard.js +69 -313
- package/dist/MediaCard.mjs +5 -6
- package/dist/MenuGroup.js +1 -112
- package/dist/MenuGroup.mjs +2 -2
- package/dist/MenuItem.js +36 -232
- package/dist/MenuItem.mjs +5 -6
- package/dist/MonthPicker.js +8 -161
- package/dist/MonthPicker.mjs +3 -3
- package/dist/NumberStepper.js +40 -236
- package/dist/NumberStepper.mjs +5 -6
- package/dist/PagerDots.d.mts +1 -1
- package/dist/PagerDots.d.ts +1 -1
- package/dist/PagerDots.js +69 -222
- package/dist/PagerDots.mjs +6 -5
- package/dist/Pressable.js +14 -85
- package/dist/Pressable.mjs +4 -4
- package/dist/PricingCard.js +94 -279
- package/dist/PricingCard.mjs +8 -8
- package/dist/Progress.js +3 -121
- package/dist/Progress.mjs +3 -3
- package/dist/RadioGroup.js +52 -263
- package/dist/RadioGroup.mjs +5 -5
- package/dist/RetrayProvider.d.mts +1 -1
- package/dist/RetrayProvider.d.ts +1 -1
- package/dist/RetrayProvider.js +5 -6
- package/dist/RetrayProvider.mjs +3 -3
- package/dist/Select.d.mts +2 -1
- package/dist/Select.d.ts +2 -1
- package/dist/Select.js +24 -230
- package/dist/Select.mjs +4 -5
- package/dist/SelectableCard.d.mts +27 -0
- package/dist/SelectableCard.d.ts +27 -0
- package/dist/SelectableCard.js +335 -0
- package/dist/SelectableCard.mjs +8 -0
- package/dist/SelectableGrid.d.mts +0 -21
- package/dist/SelectableGrid.d.ts +0 -21
- package/dist/SelectableGrid.js +49 -269
- package/dist/SelectableGrid.mjs +5 -6
- package/dist/Separator.js +1 -112
- package/dist/Separator.mjs +2 -2
- package/dist/Sheet.js +16 -163
- package/dist/Sheet.mjs +3 -3
- package/dist/SheetSelect.js +39 -234
- package/dist/SheetSelect.mjs +6 -6
- package/dist/Skeleton.d.mts +3 -1
- package/dist/Skeleton.d.ts +3 -1
- package/dist/Skeleton.js +7 -124
- package/dist/Skeleton.mjs +3 -3
- package/dist/Slider.js +6 -159
- package/dist/Slider.mjs +3 -3
- package/dist/Spinner.js +3 -114
- package/dist/Spinner.mjs +2 -2
- package/dist/Stats.d.mts +4 -1
- package/dist/Stats.d.ts +4 -1
- package/dist/Stats.js +60 -234
- package/dist/Stats.mjs +5 -6
- package/dist/Switch.js +24 -173
- package/dist/Switch.mjs +5 -4
- package/dist/TabBar.js +43 -198
- package/dist/TabBar.mjs +5 -4
- package/dist/Tabs.js +15 -197
- package/dist/Tabs.mjs +5 -5
- package/dist/Text.js +9 -128
- package/dist/Text.mjs +2 -2
- package/dist/Textarea.d.mts +2 -1
- package/dist/Textarea.d.ts +2 -1
- package/dist/Textarea.js +71 -217
- package/dist/Textarea.mjs +4 -4
- package/dist/Toast.js +1 -112
- package/dist/Toast.mjs +2 -2
- package/dist/Toggle.js +39 -234
- package/dist/Toggle.mjs +6 -6
- package/dist/{chunk-FFTYLPSB.mjs → chunk-2QOHHBJC.mjs} +13 -7
- package/dist/{chunk-BCWEHE34.mjs → chunk-2VIDP72N.mjs} +3 -3
- package/dist/{chunk-PGERH3P7.mjs → chunk-4NQFTHN3.mjs} +13 -7
- package/dist/{chunk-3N2M3WZL.mjs → chunk-4ZO5PTKF.mjs} +4 -4
- package/dist/{chunk-MYZ2EDYU.mjs → chunk-5MYNAAFE.mjs} +13 -17
- package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs} +3 -3
- package/dist/{chunk-ISY26JQJ.mjs → chunk-6CR4S6W2.mjs} +3 -3
- package/dist/{chunk-FUVYSVGR.mjs → chunk-6QLBHUEG.mjs} +8 -7
- package/dist/chunk-ARONDO7M.mjs +40 -0
- package/dist/{chunk-3UYAZ7I4.mjs → chunk-AZV7KNJI.mjs} +3 -3
- package/dist/{chunk-HLMPMUK2.mjs → chunk-BTUW5LSG.mjs} +11 -8
- package/dist/chunk-BULKGOIZ.mjs +235 -0
- package/dist/{chunk-265G6A46.mjs → chunk-CBIZLRYH.mjs} +29 -12
- package/dist/chunk-CM2DG4MR.mjs +142 -0
- package/dist/{chunk-2I2AYECM.mjs → chunk-DBHSUUKU.mjs} +2 -2
- package/dist/{chunk-P64WHW4A.mjs → chunk-DE25XTVQ.mjs} +3 -3
- package/dist/{chunk-DI7CBDL6.mjs → chunk-E4EQSCKR.mjs} +5 -5
- package/dist/{chunk-357YO24D.mjs → chunk-EHGBHFMH.mjs} +9 -17
- package/dist/{chunk-GK4VRMNE.mjs → chunk-EROPDCB5.mjs} +24 -27
- package/dist/{chunk-XBAGGKLW.mjs → chunk-ERWJPVX7.mjs} +2 -2
- package/dist/{chunk-LRM4AVYY.mjs → chunk-ESQDPO5E.mjs} +7 -7
- package/dist/{chunk-EFLFRAHD.mjs → chunk-EW2FIDSM.mjs} +1 -1
- package/dist/{chunk-7HSILTC4.mjs → chunk-FTTI6T5Q.mjs} +4 -4
- package/dist/{chunk-X26S5EVZ.mjs → chunk-HUSSF6TF.mjs} +1 -1
- package/dist/chunk-IFYMBOEN.mjs +14 -0
- package/dist/{chunk-S3KJCPEJ.mjs → chunk-IGU223UM.mjs} +80 -4
- package/dist/chunk-IJCMPVW5.mjs +121 -0
- package/dist/{chunk-I4V5XZPS.mjs → chunk-ITG4JQM3.mjs} +4 -4
- package/dist/{chunk-F4V6XLP4.mjs → chunk-K3QX2M26.mjs} +11 -8
- package/dist/{chunk-V6NFJXKO.mjs → chunk-K7TKID3V.mjs} +8 -7
- package/dist/{chunk-ZHMSAYLT.mjs → chunk-KAGADD2O.mjs} +4 -4
- package/dist/{chunk-3GEYJ7I5.mjs → chunk-KC5QDYGZ.mjs} +4 -4
- package/dist/{chunk-HJ46DTJE.mjs → chunk-KPTY7UYQ.mjs} +1 -1
- package/dist/{chunk-EMUWGDWC.mjs → chunk-KSSVIFYR.mjs} +11 -12
- package/dist/chunk-L3YKPTJQ.mjs +119 -0
- package/dist/chunk-M53LC4Q7.mjs +35 -0
- package/dist/{chunk-NXI4YDZ2.mjs → chunk-MP7GLMIR.mjs} +17 -25
- package/dist/chunk-MZ6WRTD2.mjs +40 -0
- package/dist/chunk-NGEN2EES.mjs +581 -0
- package/dist/{chunk-JULSIZDM.mjs → chunk-OBV72JD4.mjs} +1 -1
- package/dist/{chunk-2A2LEFZG.mjs → chunk-PGQ6FMXS.mjs} +6 -5
- package/dist/{chunk-BQZE3HAW.mjs → chunk-PI6RULJX.mjs} +1 -1
- package/dist/{chunk-FA2KMTH5.mjs → chunk-RA6SAAFE.mjs} +9 -8
- package/dist/{chunk-FVTVCJAH.mjs → chunk-RRKM4MKB.mjs} +7 -7
- package/dist/{chunk-AKM4EPOT.mjs → chunk-S2VGME7X.mjs} +1 -1
- package/dist/{chunk-OULVKTWL.mjs → chunk-S44XWTTC.mjs} +35 -25
- package/dist/{chunk-QSFV2P7O.mjs → chunk-SZEKQAOY.mjs} +1 -1
- package/dist/{chunk-N4ZPVCJH.mjs → chunk-TETMEKZE.mjs} +9 -9
- package/dist/{chunk-2CBQKU7H.mjs → chunk-TMH263OK.mjs} +5 -4
- package/dist/{chunk-D3Y2T42P.mjs → chunk-U6DEBYU5.mjs} +10 -9
- package/dist/{chunk-4WFMPFZB.mjs → chunk-UOKFSFNJ.mjs} +2 -2
- package/dist/{chunk-WOEWGSTU.mjs → chunk-URIH43IJ.mjs} +13 -21
- package/dist/{chunk-JCZQOY4O.mjs → chunk-V2ZB2XNS.mjs} +16 -10
- package/dist/{chunk-P73V2EKS.mjs → chunk-WIPEDNSD.mjs} +7 -7
- package/dist/{chunk-BOVUP27T.mjs → chunk-XCIG6HT2.mjs} +6 -5
- package/dist/chunk-Y6YS33GM.mjs +131 -0
- package/dist/{chunk-5OLNXP3S.mjs → chunk-ZKDKKQCE.mjs} +29 -7
- package/dist/{chunk-DF6DU42P.mjs → chunk-ZTPYUU5C.mjs} +5 -5
- package/dist/{index-wt-orHUi.d.ts → index-CY34hxPN.d.mts} +1 -0
- package/dist/{index-wt-orHUi.d.mts → index-CY34hxPN.d.ts} +1 -0
- package/dist/index.d.mts +15 -74
- package/dist/index.d.ts +15 -74
- package/dist/index.js +1055 -1562
- package/dist/index.mjs +81 -84
- package/package.json +8 -10
- package/src/components/Accordion/Accordion.tsx +32 -9
- package/src/components/AlertBanner/AlertBanner.tsx +7 -6
- package/src/components/AppHeader/AppHeader.tsx +1 -1
- package/src/components/Avatar/Avatar.tsx +92 -1
- package/src/components/Avatar/index.ts +2 -2
- package/src/components/Badge/Badge.tsx +2 -2
- package/src/components/Button/Button.tsx +64 -57
- package/src/components/Card/Card.tsx +1 -0
- package/src/components/CategoryStrip/CategoryStrip.tsx +36 -49
- package/src/components/Chip/Chip.tsx +5 -4
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +13 -6
- package/src/components/DetailRow/DetailRow.tsx +3 -3
- package/src/components/EmptyState/EmptyState.tsx +2 -2
- package/src/components/ErrorBoundary/ErrorBoundary.tsx +6 -6
- package/src/components/HolographicCard/HolographicCard.tsx +14 -95
- package/src/components/IconButton/IconButton.tsx +2 -2
- package/src/components/IconPicker/IconPicker.tsx +13 -12
- package/src/components/ImageUpload/ImageUpload.tsx +24 -28
- package/src/components/ImageViewer/ImageViewer.tsx +3 -3
- package/src/components/Input/Input.tsx +11 -5
- package/src/components/LabelValue/LabelValue.tsx +2 -2
- package/src/components/ListItem/ListItem.tsx +4 -4
- package/src/components/MediaCard/MediaCard.tsx +21 -59
- package/src/components/MenuItem/MenuItem.tsx +2 -2
- package/src/components/MonthPicker/MonthPicker.tsx +2 -2
- package/src/components/NumberStepper/NumberStepper.tsx +6 -6
- package/src/components/PagerDots/PagerDots.tsx +38 -28
- package/src/components/PricingCard/PricingCard.tsx +6 -6
- package/src/components/RadioGroup/RadioGroup.tsx +18 -31
- package/src/components/Select/Select.tsx +32 -39
- package/src/components/SelectableCard/SelectableCard.tsx +302 -0
- package/src/components/SelectableCard/index.ts +1 -0
- package/src/components/SelectableGrid/SelectableGrid.tsx +38 -72
- package/src/components/Sheet/Sheet.tsx +11 -4
- package/src/components/SheetSelect/SheetSelect.tsx +3 -3
- package/src/components/Skeleton/Skeleton.tsx +6 -3
- package/src/components/Spinner/Spinner.tsx +2 -2
- package/src/components/Stats/Stats.tsx +36 -8
- package/src/components/Switch/Switch.tsx +9 -6
- package/src/components/TabBar/TabBar.tsx +9 -8
- package/src/components/Text/Text.tsx +12 -1
- package/src/components/Textarea/Textarea.tsx +18 -32
- package/src/components/Toggle/Toggle.tsx +3 -3
- package/src/hooks/useConfirmDialog.ts +31 -42
- package/src/index.ts +4 -4
- package/src/theme/ThemeProvider.tsx +1 -4
- package/src/theme/colorUtils.ts +1 -72
- package/src/theme/colors.ts +47 -1
- package/src/theme/types.ts +6 -3
- package/src/utils/animations.ts +0 -47
- package/src/utils/curatedIcons.ts +93 -801
- package/src/utils/haptics.ts +13 -208
- package/src/utils/icons.ts +27 -91
- package/src/utils/pressable.ts +10 -61
- package/dist/VirtualList.d.mts +0 -19
- package/dist/VirtualList.d.ts +0 -19
- package/dist/VirtualList.js +0 -38
- package/dist/VirtualList.mjs +0 -2
- package/dist/chunk-3DKJ2GIC.mjs +0 -30
- package/dist/chunk-AQEVCEXV.mjs +0 -164
- package/dist/chunk-DOGIPOF5.mjs +0 -131
- package/dist/chunk-DVK4G2GT.mjs +0 -59
- package/dist/chunk-EJ7ZPXOH.mjs +0 -163
- package/dist/chunk-J6Q2YJEV.mjs +0 -134
- package/dist/chunk-JNVAIDLK.mjs +0 -136
- package/dist/chunk-KA7LTET3.mjs +0 -71
- package/dist/chunk-KHYX4IOM.mjs +0 -1114
- package/dist/chunk-NC5ZTR2Y.mjs +0 -32
- package/dist/chunk-YNROWHQJ.mjs +0 -46
- package/src/components/VirtualList/VirtualList.tsx +0 -60
- package/src/components/VirtualList/index.ts +0 -1
- package/src/utils/fontGuard.ts +0 -35
- package/src/utils/hover.ts +0 -25
- package/src/utils/useColorTransition.ts +0 -40
- package/src/utils/usePressScale.ts +0 -75
package/dist/ErrorBoundary.js
CHANGED
|
@@ -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
|
-
|
|
24
|
-
|
|
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: "
|
|
151
|
-
{ name: "
|
|
152
|
-
{ name: "
|
|
153
|
-
{ name: "
|
|
154
|
-
{ name: "
|
|
155
|
-
{ name: "
|
|
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
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
for (const
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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
|
|
73
|
+
var _loaded = false;
|
|
202
74
|
async function getHaptics() {
|
|
203
75
|
if (reactNative.Platform.OS === "web") return null;
|
|
204
|
-
if (!
|
|
205
|
-
|
|
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
|
-
|
|
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 = "
|
|
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 }] },
|
|
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: "
|
|
109
|
+
accessibilityLabel: "Intentar de nuevo"
|
|
275
110
|
},
|
|
276
|
-
/* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "
|
|
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 {
|
package/dist/ErrorBoundary.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { ErrorBoundary } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
|
|
2
|
+
import './chunk-ARONDO7M.mjs';
|
|
3
3
|
import './chunk-QY3X2UYR.mjs';
|
|
4
|
-
import './chunk-
|
|
5
|
-
import './chunk-
|
|
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-
|
|
2
|
-
import './chunk-
|
|
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 };
|