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