@retray-dev/ui-kit 12.2.0 → 13.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.
- package/CONSUMER.md +26 -11
- package/DESIGN.md +2 -2
- package/README.md +15 -11
- package/{COMPONENTS.md → SKILL.md} +374 -996
- package/dist/Accordion.d.mts +2 -0
- package/dist/Accordion.d.ts +2 -0
- package/dist/Accordion.js +49 -210
- package/dist/Accordion.mjs +6 -6
- package/dist/AlertBanner.js +29 -153
- package/dist/AlertBanner.mjs +3 -4
- package/dist/AppHeader.d.mts +5 -2
- package/dist/AppHeader.d.ts +5 -2
- package/dist/AppHeader.js +45 -239
- package/dist/AppHeader.mjs +6 -8
- package/dist/Avatar.d.mts +17 -1
- package/dist/Avatar.d.ts +17 -1
- package/dist/Avatar.js +80 -115
- package/dist/Avatar.mjs +2 -3
- package/dist/Badge.js +24 -149
- package/dist/Badge.mjs +3 -4
- package/dist/Button.js +79 -267
- package/dist/Button.mjs +6 -7
- package/dist/ButtonGroup.mjs +0 -1
- package/dist/Card.js +15 -200
- package/dist/Card.mjs +4 -6
- package/dist/CategoryStrip.d.mts +0 -5
- package/dist/CategoryStrip.d.ts +0 -5
- package/dist/CategoryStrip.js +47 -265
- package/dist/CategoryStrip.mjs +6 -7
- package/dist/Checkbox.d.mts +2 -1
- package/dist/Checkbox.d.ts +2 -1
- package/dist/Checkbox.js +18 -201
- package/dist/Checkbox.mjs +5 -6
- package/dist/Chip.js +44 -236
- package/dist/Chip.mjs +7 -7
- package/dist/ConfirmDialog.d.mts +2 -1
- package/dist/ConfirmDialog.d.ts +2 -1
- package/dist/ConfirmDialog.js +110 -300
- package/dist/ConfirmDialog.mjs +7 -8
- package/dist/CurrencyDisplay.js +1 -114
- package/dist/CurrencyDisplay.mjs +2 -3
- package/dist/CurrencyInput.js +35 -162
- package/dist/CurrencyInput.mjs +5 -6
- package/dist/DetailRow.js +25 -150
- package/dist/DetailRow.mjs +3 -4
- package/dist/EmptyState.js +80 -268
- package/dist/EmptyState.mjs +7 -8
- package/dist/ErrorBoundary.js +32 -199
- package/dist/ErrorBoundary.mjs +4 -5
- package/dist/Form.js +1 -114
- package/dist/Form.mjs +2 -3
- 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 -33
- package/dist/IconButton.js +36 -234
- package/dist/IconButton.mjs +5 -7
- package/dist/IconPicker.js +222 -929
- package/dist/IconPicker.mjs +5 -6
- package/dist/ImageUpload.d.mts +3 -3
- package/dist/ImageUpload.d.ts +3 -3
- package/dist/ImageUpload.js +49 -238
- package/dist/ImageUpload.mjs +5 -7
- package/dist/ImageViewer.js +75 -266
- package/dist/ImageViewer.mjs +8 -9
- package/dist/Input.d.mts +1 -1
- package/dist/Input.d.ts +1 -1
- package/dist/Input.js +35 -162
- package/dist/Input.mjs +4 -5
- package/dist/LabelValue.js +24 -149
- package/dist/LabelValue.mjs +3 -4
- package/dist/ListGroup.js +1 -114
- package/dist/ListGroup.mjs +2 -3
- package/dist/ListItem.d.mts +2 -1
- package/dist/ListItem.d.ts +2 -1
- package/dist/ListItem.js +41 -236
- package/dist/ListItem.mjs +5 -7
- package/dist/MediaCard.d.mts +0 -14
- package/dist/MediaCard.d.ts +0 -14
- package/dist/MediaCard.js +69 -315
- package/dist/MediaCard.mjs +5 -7
- package/dist/MenuGroup.js +1 -114
- package/dist/MenuGroup.mjs +2 -3
- package/dist/MenuItem.d.mts +2 -1
- package/dist/MenuItem.d.ts +2 -1
- package/dist/MenuItem.js +39 -235
- package/dist/MenuItem.mjs +5 -7
- package/dist/MonthPicker.js +8 -163
- package/dist/MonthPicker.mjs +3 -4
- package/dist/NumberStepper.d.mts +2 -1
- package/dist/NumberStepper.d.ts +2 -1
- package/dist/NumberStepper.js +44 -239
- package/dist/NumberStepper.mjs +5 -7
- package/dist/PagerDots.d.mts +1 -1
- package/dist/PagerDots.d.ts +1 -1
- package/dist/PagerDots.js +69 -224
- package/dist/PagerDots.mjs +6 -6
- package/dist/Pressable.js +14 -85
- package/dist/Pressable.mjs +4 -5
- package/dist/PricingCard.js +87 -272
- package/dist/PricingCard.mjs +8 -9
- package/dist/Progress.js +3 -123
- package/dist/Progress.mjs +3 -4
- package/dist/RadioGroup.js +52 -265
- package/dist/RadioGroup.mjs +5 -6
- package/dist/RetrayProvider.js +3 -6
- package/dist/RetrayProvider.mjs +3 -4
- package/dist/Select.d.mts +3 -1
- package/dist/Select.d.ts +3 -1
- package/dist/Select.js +27 -233
- package/dist/Select.mjs +4 -6
- package/dist/SelectableCard.js +33 -209
- package/dist/SelectableCard.mjs +5 -6
- package/dist/SelectableGrid.d.mts +0 -21
- package/dist/SelectableGrid.d.ts +0 -21
- package/dist/SelectableGrid.js +49 -272
- package/dist/SelectableGrid.mjs +5 -7
- package/dist/Separator.js +1 -114
- package/dist/Separator.mjs +2 -3
- package/dist/Sheet.d.mts +1 -1
- package/dist/Sheet.d.ts +1 -1
- package/dist/Sheet.js +33 -175
- package/dist/Sheet.mjs +3 -4
- package/dist/SheetSelect.js +39 -236
- package/dist/SheetSelect.mjs +6 -7
- package/dist/Skeleton.js +4 -124
- package/dist/Skeleton.mjs +3 -4
- package/dist/Slider.d.mts +2 -1
- package/dist/Slider.d.ts +2 -1
- package/dist/Slider.js +8 -161
- package/dist/Slider.mjs +3 -4
- package/dist/Spinner.js +3 -116
- package/dist/Spinner.mjs +2 -3
- package/dist/Stats.js +36 -234
- package/dist/Stats.mjs +5 -7
- package/dist/Switch.d.mts +2 -1
- package/dist/Switch.d.ts +2 -1
- package/dist/Switch.js +26 -176
- package/dist/Switch.mjs +5 -5
- package/dist/TabBar.js +43 -200
- package/dist/TabBar.mjs +5 -5
- package/dist/Tabs.js +15 -199
- package/dist/Tabs.mjs +5 -6
- package/dist/Text.js +9 -130
- package/dist/Text.mjs +2 -3
- package/dist/Textarea.d.mts +2 -1
- package/dist/Textarea.d.ts +2 -1
- package/dist/Textarea.js +71 -219
- package/dist/Textarea.mjs +4 -5
- package/dist/Toast.d.mts +12 -10
- package/dist/Toast.d.ts +12 -10
- package/dist/Toast.js +1 -114
- package/dist/Toast.mjs +2 -3
- package/dist/Toggle.js +39 -236
- package/dist/Toggle.mjs +6 -7
- package/dist/{chunk-ELGEOM7I.mjs → chunk-2QXJDRVU.mjs} +13 -10
- package/dist/{chunk-LIS6I5UP.mjs → chunk-2VIDP72N.mjs} +3 -3
- package/dist/{chunk-NHDI3VQB.mjs → chunk-422IVD3H.mjs} +16 -12
- package/dist/{chunk-DF7JA72E.mjs → chunk-4NQFTHN3.mjs} +13 -7
- package/dist/{chunk-3XCFYSX4.mjs → chunk-5MYNAAFE.mjs} +13 -17
- package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs} +3 -3
- package/dist/{chunk-UBUXUMER.mjs → chunk-77UOVFIS.mjs} +7 -5
- package/dist/{chunk-M3C7XM2M.mjs → chunk-7BZJRB77.mjs} +28 -18
- package/dist/chunk-ARONDO7M.mjs +40 -0
- package/dist/{chunk-GH67YXG6.mjs → chunk-AZV7KNJI.mjs} +3 -3
- package/dist/{chunk-2P2CB235.mjs → chunk-BULKGOIZ.mjs} +7 -8
- package/dist/{chunk-RJNLAH76.mjs → chunk-C5ZRMR2E.mjs} +4 -2
- package/dist/chunk-CM2DG4MR.mjs +142 -0
- package/dist/{chunk-UQ4742ET.mjs → chunk-COA2YZOX.mjs} +8 -6
- package/dist/{chunk-EDLCGYIO.mjs → chunk-CZN6L2QU.mjs} +11 -8
- package/dist/{chunk-TS7DGUIR.mjs → chunk-DBHSUUKU.mjs} +2 -2
- package/dist/{chunk-57V2LXCK.mjs → chunk-DE25XTVQ.mjs} +3 -3
- package/dist/{chunk-RMRS44MQ.mjs → chunk-E2PONRJG.mjs} +13 -9
- package/dist/{chunk-GUTDFUNF.mjs → chunk-EHGBHFMH.mjs} +9 -17
- package/dist/{chunk-ZIMY2QUM.mjs → chunk-ERWJPVX7.mjs} +2 -2
- package/dist/{chunk-NLZY4TXU.mjs → chunk-ESQDPO5E.mjs} +7 -7
- package/dist/{chunk-VJBUCITV.mjs → chunk-EW2FIDSM.mjs} +1 -1
- package/dist/{chunk-HC4VVCWY.mjs → chunk-FTTI6T5Q.mjs} +4 -4
- package/dist/{chunk-MVMGPZN6.mjs → chunk-H6MQL7PS.mjs} +12 -7
- package/dist/{chunk-CF27NBXO.mjs → chunk-HHOOFDBA.mjs} +38 -41
- package/dist/{chunk-2HFD4IHU.mjs → chunk-HUSSF6TF.mjs} +1 -1
- package/dist/{chunk-HEDQPK4I.mjs → chunk-IDVUZIVY.mjs} +16 -22
- package/dist/chunk-IFYMBOEN.mjs +14 -0
- package/dist/{chunk-QOLWA2PW.mjs → chunk-IGU223UM.mjs} +80 -4
- package/dist/chunk-IJCMPVW5.mjs +121 -0
- package/dist/{chunk-AENAVIKT.mjs → chunk-ITG4JQM3.mjs} +4 -4
- package/dist/{chunk-E5UKLSJZ.mjs → chunk-K3QX2M26.mjs} +11 -8
- package/dist/{chunk-4OORJ2DY.mjs → chunk-K7TKID3V.mjs} +8 -7
- package/dist/{chunk-2LG326TT.mjs → chunk-KAGADD2O.mjs} +4 -4
- package/dist/{chunk-IVSRW4HS.mjs → chunk-KC5QDYGZ.mjs} +4 -4
- package/dist/{chunk-7AFZWSCI.mjs → chunk-KPTY7UYQ.mjs} +1 -1
- package/dist/{chunk-YTXRIXNZ.mjs → chunk-KSSVIFYR.mjs} +9 -12
- package/dist/chunk-L3YKPTJQ.mjs +119 -0
- package/dist/chunk-M53LC4Q7.mjs +35 -0
- package/dist/chunk-MZ6WRTD2.mjs +40 -0
- package/dist/chunk-NGEN2EES.mjs +581 -0
- package/dist/{chunk-ZR6HSEAB.mjs → chunk-NPCBNGNE.mjs} +17 -26
- package/dist/{chunk-C43HRKXH.mjs → chunk-OBV72JD4.mjs} +1 -1
- package/dist/{chunk-LPV4NJJK.mjs → chunk-PGQ6FMXS.mjs} +6 -5
- package/dist/{chunk-MEPSKGBO.mjs → chunk-PI6RULJX.mjs} +1 -1
- package/dist/{chunk-F3YTWO3T.mjs → chunk-RA6SAAFE.mjs} +9 -8
- package/dist/{chunk-UNNRUJTM.mjs → chunk-RRKM4MKB.mjs} +7 -7
- package/dist/{chunk-ULGNQPNE.mjs → chunk-S2VGME7X.mjs} +1 -1
- package/dist/{chunk-OLVJFKXS.mjs → chunk-S44XWTTC.mjs} +35 -25
- package/dist/{chunk-YMYIEVZP.mjs → chunk-SZEKQAOY.mjs} +1 -1
- package/dist/{chunk-BXF4AMHY.mjs → chunk-TMH263OK.mjs} +5 -4
- package/dist/{chunk-NJG7DHVF.mjs → chunk-U6DEBYU5.mjs} +10 -9
- package/dist/{chunk-QXDGGOLC.mjs → chunk-UMZTPUB3.mjs} +33 -21
- package/dist/{chunk-KSUWPU2F.mjs → chunk-WIPEDNSD.mjs} +7 -7
- package/dist/{chunk-QDAZGZUF.mjs → chunk-XCIG6HT2.mjs} +3 -3
- package/dist/{chunk-4J2PXL36.mjs → chunk-Y6YS33GM.mjs} +40 -38
- package/dist/{chunk-4XOB5TTD.mjs → chunk-ZKDKKQCE.mjs} +5 -5
- package/dist/{chunk-LOBLCFMN.mjs → chunk-ZTPYUU5C.mjs} +5 -5
- package/dist/fonts.mjs +0 -2
- package/dist/index.d.mts +13 -73
- package/dist/index.d.ts +13 -73
- package/dist/index.js +1149 -1892
- package/dist/index.mjs +81 -86
- package/package.json +20 -20
- package/src/components/Accordion/Accordion.tsx +15 -9
- package/src/components/AlertBanner/AlertBanner.tsx +7 -6
- package/src/components/AppHeader/AppHeader.tsx +25 -10
- 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 +50 -46
- package/src/components/Card/Card.tsx +1 -0
- package/src/components/CategoryStrip/CategoryStrip.tsx +36 -49
- package/src/components/Checkbox/Checkbox.tsx +3 -0
- package/src/components/Chip/Chip.tsx +5 -4
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +33 -17
- 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 +43 -46
- 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 +7 -4
- package/src/components/MediaCard/MediaCard.tsx +21 -59
- package/src/components/MenuItem/MenuItem.tsx +5 -2
- package/src/components/MonthPicker/MonthPicker.tsx +2 -2
- package/src/components/NumberStepper/NumberStepper.tsx +10 -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 +35 -39
- package/src/components/SelectableCard/SelectableCard.tsx +4 -6
- package/src/components/SelectableGrid/SelectableGrid.tsx +37 -72
- package/src/components/Sheet/Sheet.tsx +28 -15
- package/src/components/Sheet/index.ts +2 -2
- package/src/components/SheetSelect/SheetSelect.tsx +3 -3
- package/src/components/Skeleton/Skeleton.tsx +1 -1
- package/src/components/Slider/Slider.tsx +3 -0
- package/src/components/Spinner/Spinner.tsx +2 -2
- package/src/components/Stats/Stats.tsx +2 -2
- package/src/components/Switch/Switch.tsx +12 -7
- package/src/components/TabBar/TabBar.tsx +9 -8
- package/src/components/Text/Text.tsx +13 -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 +3 -4
- package/src/theme/ThemeProvider.tsx +1 -4
- package/src/theme/colorUtils.ts +1 -72
- package/src/theme/colors.ts +40 -1
- package/src/theme/types.ts +2 -2
- 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-2BA3JMKK.mjs +0 -136
- package/dist/chunk-3DKJ2GIC.mjs +0 -30
- package/dist/chunk-7ELGZ66G.mjs +0 -164
- package/dist/chunk-DVK4G2GT.mjs +0 -59
- package/dist/chunk-EJ7ZPXOH.mjs +0 -163
- package/dist/chunk-KA7LTET3.mjs +0 -71
- package/dist/chunk-LNPKGWBG.mjs +0 -134
- package/dist/chunk-NC5ZTR2Y.mjs +0 -32
- package/dist/chunk-SAWUXP3A.mjs +0 -1114
- package/dist/chunk-Y6FXYEAI.mjs +0 -8
- 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,126 +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 skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
|
|
110
|
-
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
111
|
-
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
112
|
-
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
113
|
-
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
114
|
-
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
115
|
-
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
116
|
-
return {
|
|
117
|
-
...t,
|
|
118
|
-
foregroundSubtle,
|
|
119
|
-
foregroundMuted,
|
|
120
|
-
surface,
|
|
121
|
-
surfaceStrong,
|
|
122
|
-
skeleton,
|
|
123
|
-
destructiveTint,
|
|
124
|
-
destructiveBorder,
|
|
125
|
-
successTint,
|
|
126
|
-
successBorder,
|
|
127
|
-
warningTint,
|
|
128
|
-
warningBorder,
|
|
129
|
-
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
130
|
-
accentResolved: t.accent ?? t.primary,
|
|
131
|
-
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
132
|
-
ring: t.accent ?? t.primary,
|
|
133
|
-
input: t.border,
|
|
134
|
-
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
// src/theme/ThemeProvider.tsx
|
|
139
|
-
var ThemeContext = React3.createContext({
|
|
140
|
-
colors: deriveColors(defaultLight, "light"),
|
|
141
|
-
colorScheme: "light"
|
|
142
|
-
});
|
|
23
|
+
// src/components/ErrorBoundary/ErrorBoundary.tsx
|
|
24
|
+
var ThemeContext = React3.createContext(void 0);
|
|
143
25
|
function useTheme() {
|
|
144
26
|
const context = React3.useContext(ThemeContext);
|
|
145
27
|
if (!context) {
|
|
@@ -147,46 +29,34 @@ function useTheme() {
|
|
|
147
29
|
}
|
|
148
30
|
return context;
|
|
149
31
|
}
|
|
150
|
-
var glyphMapOf = (mod) => mod.glyphMap ?? {};
|
|
151
32
|
var ALL_FAMILIES = [
|
|
152
|
-
{ name: "
|
|
153
|
-
{ name: "
|
|
154
|
-
{ name: "
|
|
155
|
-
{ name: "
|
|
156
|
-
{ name: "
|
|
157
|
-
{ 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 }
|
|
158
39
|
];
|
|
159
|
-
var
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
for (const
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
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 = {};
|
|
167
49
|
}
|
|
168
50
|
}
|
|
169
|
-
return cache;
|
|
170
|
-
}
|
|
171
|
-
function resolveFamily(name) {
|
|
172
|
-
if (!resolvedCache) {
|
|
173
|
-
resolvedCache = buildCache();
|
|
174
|
-
}
|
|
175
|
-
return resolvedCache.get(name) ?? null;
|
|
176
51
|
}
|
|
177
52
|
function Icon({ name, size, color, family }) {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
const Component = resolved.component;
|
|
186
|
-
return React3__default.default.createElement(Component, { name, size, color });
|
|
187
|
-
}
|
|
188
|
-
function renderIcon(name, size, color) {
|
|
189
|
-
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 });
|
|
190
60
|
}
|
|
191
61
|
var isWeb = reactNative.Platform.OS === "web";
|
|
192
62
|
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
@@ -200,11 +70,11 @@ var RADIUS = {
|
|
|
200
70
|
full: 9999
|
|
201
71
|
};
|
|
202
72
|
var _haptics = null;
|
|
203
|
-
var
|
|
73
|
+
var _loaded = false;
|
|
204
74
|
async function getHaptics() {
|
|
205
75
|
if (reactNative.Platform.OS === "web") return null;
|
|
206
|
-
if (!
|
|
207
|
-
|
|
76
|
+
if (!_loaded) {
|
|
77
|
+
_loaded = true;
|
|
208
78
|
try {
|
|
209
79
|
_haptics = await import('expo-haptics');
|
|
210
80
|
} catch {
|
|
@@ -213,56 +83,19 @@ async function getHaptics() {
|
|
|
213
83
|
}
|
|
214
84
|
return _haptics;
|
|
215
85
|
}
|
|
216
|
-
var _pulsar = null;
|
|
217
|
-
var _pulsarChecked = false;
|
|
218
|
-
var _pulsarAvailable = false;
|
|
219
|
-
function isPulsarNativeRegistered() {
|
|
220
|
-
try {
|
|
221
|
-
const g = globalThis;
|
|
222
|
-
if (typeof g.__turboModuleProxy === "function") {
|
|
223
|
-
return g.__turboModuleProxy("RNPulsar") != null;
|
|
224
|
-
}
|
|
225
|
-
return reactNative.NativeModules?.RNPulsar != null;
|
|
226
|
-
} catch {
|
|
227
|
-
return false;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
function getPulsar() {
|
|
231
|
-
if (reactNative.Platform.OS === "web") return null;
|
|
232
|
-
if (!_pulsarChecked) {
|
|
233
|
-
_pulsarChecked = true;
|
|
234
|
-
try {
|
|
235
|
-
if (isPulsarNativeRegistered()) {
|
|
236
|
-
_pulsar = __require("react-native-pulsar");
|
|
237
|
-
_pulsarAvailable = true;
|
|
238
|
-
}
|
|
239
|
-
} catch {
|
|
240
|
-
_pulsar = null;
|
|
241
|
-
_pulsarAvailable = false;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
return _pulsarAvailable ? _pulsar : null;
|
|
245
|
-
}
|
|
246
86
|
function impactLight() {
|
|
247
|
-
|
|
248
|
-
getHaptics().then((h) => {
|
|
249
|
-
if (h) {
|
|
250
|
-
h.impactAsync(h.ImpactFeedbackStyle.Light);
|
|
251
|
-
} else {
|
|
252
|
-
getPulsar()?.Presets.System.impactLight();
|
|
253
|
-
}
|
|
254
|
-
});
|
|
87
|
+
getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
|
|
255
88
|
}
|
|
256
89
|
|
|
257
90
|
// src/components/ErrorBoundary/ErrorBoundary.tsx
|
|
258
91
|
function DefaultErrorFallback({
|
|
259
92
|
error,
|
|
260
93
|
reset,
|
|
261
|
-
title = "
|
|
94
|
+
title = "Algo sali\xF3 mal",
|
|
262
95
|
message
|
|
263
96
|
}) {
|
|
264
97
|
const { colors } = useTheme();
|
|
265
|
-
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(
|
|
266
99
|
reactNative.TouchableOpacity,
|
|
267
100
|
{
|
|
268
101
|
style: [styles.button, { backgroundColor: colors.primary }],
|
|
@@ -273,9 +106,9 @@ function DefaultErrorFallback({
|
|
|
273
106
|
activeOpacity: 0.85,
|
|
274
107
|
touchSoundDisabled: true,
|
|
275
108
|
accessibilityRole: "button",
|
|
276
|
-
accessibilityLabel: "
|
|
109
|
+
accessibilityLabel: "Intentar de nuevo"
|
|
277
110
|
},
|
|
278
|
-
/* @__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")
|
|
279
112
|
));
|
|
280
113
|
}
|
|
281
114
|
var ErrorBoundary = class extends React3__default.default.Component {
|
package/dist/ErrorBoundary.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
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
|
-
import './chunk-Y6FXYEAI.mjs';
|
package/dist/Form.js
CHANGED
|
@@ -9,120 +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 skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
|
|
93
|
-
const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
|
|
94
|
-
const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
|
|
95
|
-
const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
|
|
96
|
-
const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
|
|
97
|
-
const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
|
|
98
|
-
const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
|
|
99
|
-
return {
|
|
100
|
-
...t,
|
|
101
|
-
foregroundSubtle,
|
|
102
|
-
foregroundMuted,
|
|
103
|
-
surface,
|
|
104
|
-
surfaceStrong,
|
|
105
|
-
skeleton,
|
|
106
|
-
destructiveTint,
|
|
107
|
-
destructiveBorder,
|
|
108
|
-
successTint,
|
|
109
|
-
successBorder,
|
|
110
|
-
warningTint,
|
|
111
|
-
warningBorder,
|
|
112
|
-
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
113
|
-
accentResolved: t.accent ?? t.primary,
|
|
114
|
-
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
115
|
-
ring: t.accent ?? t.primary,
|
|
116
|
-
input: t.border,
|
|
117
|
-
separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// src/theme/ThemeProvider.tsx
|
|
122
|
-
var ThemeContext = React2.createContext({
|
|
123
|
-
colors: deriveColors(defaultLight, "light"),
|
|
124
|
-
colorScheme: "light"
|
|
125
|
-
});
|
|
12
|
+
var ThemeContext = React2.createContext(void 0);
|
|
126
13
|
function useTheme() {
|
|
127
14
|
const context = React2.useContext(ThemeContext);
|
|
128
15
|
if (!context) {
|
package/dist/Form.mjs
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
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
|
-
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 };
|