@retray-dev/ui-kit 2.5.1 → 2.5.2
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 +2 -2
- package/dist/index.js +374 -362
- package/dist/index.mjs +362 -331
- package/package.json +23 -21
- package/src/components/Accordion/Accordion.tsx +61 -57
- package/src/components/Alert/Alert.tsx +11 -10
- package/src/components/AlertBanner/AlertBanner.tsx +9 -8
- package/src/components/Avatar/Avatar.tsx +9 -8
- package/src/components/Badge/Badge.tsx +11 -10
- package/src/components/Button/Button.tsx +10 -9
- package/src/components/Card/Card.tsx +12 -11
- package/src/components/Checkbox/Checkbox.tsx +16 -13
- package/src/components/Chip/Chip.tsx +8 -7
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +12 -11
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +2 -1
- package/src/components/CurrencyInput/CurrencyInput.tsx +2 -1
- package/src/components/EmptyState/EmptyState.tsx +19 -18
- package/src/components/Input/Input.tsx +15 -14
- package/src/components/LabelValue/LabelValue.tsx +6 -5
- package/src/components/ListItem/ListItem.tsx +20 -19
- package/src/components/MonthPicker/MonthPicker.tsx +9 -8
- package/src/components/Progress/Progress.tsx +2 -1
- package/src/components/RadioGroup/RadioGroup.tsx +18 -15
- package/src/components/Select/Select.tsx +25 -24
- package/src/components/Sheet/Sheet.tsx +15 -14
- package/src/components/Slider/Slider.tsx +7 -6
- package/src/components/Switch/Switch.tsx +7 -6
- package/src/components/Tabs/Tabs.tsx +17 -14
- package/src/components/Text/Text.tsx +7 -6
- package/src/components/Textarea/Textarea.tsx +9 -8
- package/src/components/Toast/Toast.tsx +19 -18
- package/src/components/Toggle/Toggle.tsx +9 -8
- package/src/utils/haptics.ts +32 -0
- package/src/utils/scaling.ts +26 -0
package/dist/index.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var React23 = require('react');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
|
-
var
|
|
5
|
+
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
6
6
|
var vectorIcons = require('@expo/vector-icons');
|
|
7
7
|
var expoLinearGradient = require('expo-linear-gradient');
|
|
8
|
-
var
|
|
8
|
+
var Animated10 = require('react-native-reanimated');
|
|
9
9
|
var RNSlider = require('@react-native-community/slider');
|
|
10
10
|
var bottomSheet = require('@gorhom/bottom-sheet');
|
|
11
11
|
var picker = require('@react-native-picker/picker');
|
|
@@ -15,30 +15,16 @@ var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
|
15
15
|
|
|
16
16
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
17
|
|
|
18
|
-
function _interopNamespace(e) {
|
|
19
|
-
if (e && e.__esModule) return e;
|
|
20
|
-
var n = Object.create(null);
|
|
21
|
-
if (e) {
|
|
22
|
-
Object.keys(e).forEach(function (k) {
|
|
23
|
-
if (k !== 'default') {
|
|
24
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
25
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function () { return e[k]; }
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
n.default = e;
|
|
33
|
-
return Object.freeze(n);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
18
|
var React23__default = /*#__PURE__*/_interopDefault(React23);
|
|
37
|
-
var
|
|
38
|
-
var ReanimatedAnimated__default = /*#__PURE__*/_interopDefault(ReanimatedAnimated);
|
|
19
|
+
var Animated10__default = /*#__PURE__*/_interopDefault(Animated10);
|
|
39
20
|
var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
|
|
40
21
|
|
|
41
|
-
|
|
22
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
23
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
24
|
+
}) : x)(function(x) {
|
|
25
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
26
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
27
|
+
});
|
|
42
28
|
|
|
43
29
|
// src/theme/colors.ts
|
|
44
30
|
var defaultLight = {
|
|
@@ -106,16 +92,39 @@ function useTheme() {
|
|
|
106
92
|
}
|
|
107
93
|
return context;
|
|
108
94
|
}
|
|
95
|
+
var Haptics = null;
|
|
96
|
+
if (reactNative.Platform.OS !== "web") {
|
|
97
|
+
Haptics = __require("expo-haptics");
|
|
98
|
+
}
|
|
99
|
+
function selectionAsync() {
|
|
100
|
+
Haptics?.selectionAsync();
|
|
101
|
+
}
|
|
102
|
+
function impactLight() {
|
|
103
|
+
Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
104
|
+
}
|
|
105
|
+
function notificationSuccess() {
|
|
106
|
+
Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
|
107
|
+
}
|
|
108
|
+
function notificationError() {
|
|
109
|
+
Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
|
110
|
+
}
|
|
111
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
112
|
+
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
113
|
+
var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
|
|
114
|
+
var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
|
|
115
|
+
var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
|
|
116
|
+
|
|
117
|
+
// src/components/Button/Button.tsx
|
|
109
118
|
var nativeDriver = reactNative.Platform.OS !== "web";
|
|
110
119
|
var containerSizeStyles = {
|
|
111
|
-
sm: { paddingHorizontal: 20, paddingVertical: 10 },
|
|
112
|
-
md: { paddingHorizontal: 24, paddingVertical: 14 },
|
|
113
|
-
lg: { paddingHorizontal: 32, paddingVertical: 18 }
|
|
120
|
+
sm: { paddingHorizontal: s(20), paddingVertical: vs(10) },
|
|
121
|
+
md: { paddingHorizontal: s(24), paddingVertical: vs(14) },
|
|
122
|
+
lg: { paddingHorizontal: s(32), paddingVertical: vs(18) }
|
|
114
123
|
};
|
|
115
124
|
var labelSizeStyles = {
|
|
116
|
-
sm: { fontSize: 15 },
|
|
117
|
-
md: { fontSize: 17 },
|
|
118
|
-
lg: { fontSize: 18 }
|
|
125
|
+
sm: { fontSize: ms(15) },
|
|
126
|
+
md: { fontSize: ms(17) },
|
|
127
|
+
lg: { fontSize: ms(18) }
|
|
119
128
|
};
|
|
120
129
|
function Button({
|
|
121
130
|
label,
|
|
@@ -132,10 +141,10 @@ function Button({
|
|
|
132
141
|
}) {
|
|
133
142
|
const { colors } = useTheme();
|
|
134
143
|
const isDisabled = disabled || loading;
|
|
135
|
-
const
|
|
144
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
136
145
|
const handlePressIn = () => {
|
|
137
146
|
if (isDisabled) return;
|
|
138
|
-
reactNative.Animated.spring(
|
|
147
|
+
reactNative.Animated.spring(scale2, {
|
|
139
148
|
toValue: 0.95,
|
|
140
149
|
useNativeDriver: nativeDriver,
|
|
141
150
|
speed: 40,
|
|
@@ -143,10 +152,10 @@ function Button({
|
|
|
143
152
|
}).start();
|
|
144
153
|
};
|
|
145
154
|
const handlePressOut = () => {
|
|
146
|
-
reactNative.Animated.spring(
|
|
155
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
|
|
147
156
|
};
|
|
148
157
|
const handlePress = (e) => {
|
|
149
|
-
|
|
158
|
+
impactLight();
|
|
150
159
|
onPress?.(e);
|
|
151
160
|
};
|
|
152
161
|
const containerVariantStyle = {
|
|
@@ -164,7 +173,7 @@ function Button({
|
|
|
164
173
|
destructive: { color: colors.destructiveForeground }
|
|
165
174
|
}[variant];
|
|
166
175
|
const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
|
|
167
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale }] }] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
176
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
168
177
|
reactNative.TouchableOpacity,
|
|
169
178
|
{
|
|
170
179
|
style: [
|
|
@@ -203,16 +212,16 @@ var styles = reactNative.StyleSheet.create({
|
|
|
203
212
|
fontWeight: "600"
|
|
204
213
|
},
|
|
205
214
|
labelWithIcon: {
|
|
206
|
-
marginHorizontal: 8
|
|
215
|
+
marginHorizontal: s(8)
|
|
207
216
|
}
|
|
208
217
|
});
|
|
209
218
|
var variantStyles = {
|
|
210
|
-
h1: { fontSize: 40, fontWeight: "700", lineHeight: 52 },
|
|
211
|
-
h2: { fontSize: 28, fontWeight: "700", lineHeight: 36 },
|
|
212
|
-
h3: { fontSize: 22, fontWeight: "600", lineHeight: 30 },
|
|
213
|
-
body: { fontSize: 17, fontWeight: "400", lineHeight: 26 },
|
|
214
|
-
caption: { fontSize: 13, fontWeight: "400", lineHeight: 20 },
|
|
215
|
-
label: { fontSize: 15, fontWeight: "500", lineHeight: 22 }
|
|
219
|
+
h1: { fontSize: ms(40), fontWeight: "700", lineHeight: mvs(52) },
|
|
220
|
+
h2: { fontSize: ms(28), fontWeight: "700", lineHeight: mvs(36) },
|
|
221
|
+
h3: { fontSize: ms(22), fontWeight: "600", lineHeight: mvs(30) },
|
|
222
|
+
body: { fontSize: ms(17), fontWeight: "400", lineHeight: mvs(26) },
|
|
223
|
+
caption: { fontSize: ms(13), fontWeight: "400", lineHeight: mvs(20) },
|
|
224
|
+
label: { fontSize: ms(15), fontWeight: "500", lineHeight: mvs(22) }
|
|
216
225
|
};
|
|
217
226
|
function Text2({ variant = "body", color, style, children, ...props }) {
|
|
218
227
|
const { colors } = useTheme();
|
|
@@ -277,60 +286,60 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, t
|
|
|
277
286
|
}
|
|
278
287
|
var styles2 = reactNative.StyleSheet.create({
|
|
279
288
|
container: {
|
|
280
|
-
gap: 8
|
|
289
|
+
gap: vs(8)
|
|
281
290
|
},
|
|
282
291
|
label: {
|
|
283
|
-
fontSize: 15,
|
|
292
|
+
fontSize: ms(15),
|
|
284
293
|
fontWeight: "500"
|
|
285
294
|
},
|
|
286
295
|
inputWrapper: {
|
|
287
296
|
flexDirection: "row",
|
|
288
297
|
alignItems: "center",
|
|
289
298
|
borderWidth: 1.5,
|
|
290
|
-
borderRadius: 8,
|
|
291
|
-
paddingHorizontal: 16,
|
|
292
|
-
paddingVertical: 14
|
|
299
|
+
borderRadius: ms(8),
|
|
300
|
+
paddingHorizontal: s(16),
|
|
301
|
+
paddingVertical: vs(14)
|
|
293
302
|
},
|
|
294
303
|
input: {
|
|
295
304
|
flex: 1,
|
|
296
|
-
fontSize: 17,
|
|
305
|
+
fontSize: ms(17),
|
|
297
306
|
paddingVertical: 0
|
|
298
307
|
},
|
|
299
308
|
prefixContainer: {
|
|
300
|
-
marginRight: 8
|
|
309
|
+
marginRight: s(8)
|
|
301
310
|
},
|
|
302
311
|
prefixText: {
|
|
303
|
-
fontSize: 17,
|
|
304
|
-
marginRight: 8
|
|
312
|
+
fontSize: ms(17),
|
|
313
|
+
marginRight: s(8)
|
|
305
314
|
},
|
|
306
315
|
suffixContainer: {
|
|
307
|
-
marginLeft: 8
|
|
316
|
+
marginLeft: s(8)
|
|
308
317
|
},
|
|
309
318
|
suffixText: {
|
|
310
|
-
fontSize: 17,
|
|
311
|
-
marginLeft: 8
|
|
319
|
+
fontSize: ms(17),
|
|
320
|
+
marginLeft: s(8)
|
|
312
321
|
},
|
|
313
322
|
passwordToggle: {
|
|
314
|
-
padding: 4
|
|
323
|
+
padding: s(4)
|
|
315
324
|
},
|
|
316
325
|
helperText: {
|
|
317
|
-
fontSize: 13
|
|
326
|
+
fontSize: ms(13)
|
|
318
327
|
}
|
|
319
328
|
});
|
|
320
329
|
var sizePadding = {
|
|
321
|
-
sm: { paddingHorizontal: 8, paddingVertical: 2 },
|
|
322
|
-
md: { paddingHorizontal: 10, paddingVertical: 4 },
|
|
323
|
-
lg: { paddingHorizontal: 12, paddingVertical: 6 }
|
|
330
|
+
sm: { paddingHorizontal: s(8), paddingVertical: vs(2) },
|
|
331
|
+
md: { paddingHorizontal: s(10), paddingVertical: vs(4) },
|
|
332
|
+
lg: { paddingHorizontal: s(12), paddingVertical: vs(6) }
|
|
324
333
|
};
|
|
325
334
|
var sizeFontSize = {
|
|
326
|
-
sm: { fontSize: 11 },
|
|
327
|
-
md: { fontSize: 13 },
|
|
328
|
-
lg: { fontSize: 15 }
|
|
335
|
+
sm: { fontSize: ms(11) },
|
|
336
|
+
md: { fontSize: ms(13) },
|
|
337
|
+
lg: { fontSize: ms(15) }
|
|
329
338
|
};
|
|
330
339
|
var sizeIconGap = {
|
|
331
|
-
sm: 4,
|
|
332
|
-
md: 6,
|
|
333
|
-
lg: 6
|
|
340
|
+
sm: s(4),
|
|
341
|
+
md: s(6),
|
|
342
|
+
lg: s(6)
|
|
334
343
|
};
|
|
335
344
|
function Badge({ label, children, variant = "default", size = "md", icon, style }) {
|
|
336
345
|
const { colors } = useTheme();
|
|
@@ -351,7 +360,7 @@ function Badge({ label, children, variant = "default", size = "md", icon, style
|
|
|
351
360
|
}
|
|
352
361
|
var styles3 = reactNative.StyleSheet.create({
|
|
353
362
|
container: {
|
|
354
|
-
borderRadius: 6,
|
|
363
|
+
borderRadius: ms(6),
|
|
355
364
|
alignSelf: "flex-start",
|
|
356
365
|
flexDirection: "row",
|
|
357
366
|
alignItems: "center"
|
|
@@ -367,10 +376,10 @@ var styles3 = reactNative.StyleSheet.create({
|
|
|
367
376
|
var nativeDriver2 = reactNative.Platform.OS !== "web";
|
|
368
377
|
function Card({ children, variant = "elevated", onPress, style }) {
|
|
369
378
|
const { colors } = useTheme();
|
|
370
|
-
const
|
|
379
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
371
380
|
const handlePressIn = () => {
|
|
372
381
|
if (!onPress) return;
|
|
373
|
-
reactNative.Animated.spring(
|
|
382
|
+
reactNative.Animated.spring(scale2, {
|
|
374
383
|
toValue: 0.98,
|
|
375
384
|
useNativeDriver: nativeDriver2,
|
|
376
385
|
speed: 40,
|
|
@@ -379,7 +388,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
379
388
|
};
|
|
380
389
|
const handlePressOut = () => {
|
|
381
390
|
if (!onPress) return;
|
|
382
|
-
reactNative.Animated.spring(
|
|
391
|
+
reactNative.Animated.spring(scale2, {
|
|
383
392
|
toValue: 1,
|
|
384
393
|
useNativeDriver: nativeDriver2,
|
|
385
394
|
speed: 40,
|
|
@@ -388,7 +397,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
388
397
|
};
|
|
389
398
|
const handlePress = () => {
|
|
390
399
|
if (!onPress) return;
|
|
391
|
-
|
|
400
|
+
impactLight();
|
|
392
401
|
onPress();
|
|
393
402
|
};
|
|
394
403
|
const variantStyle = {
|
|
@@ -416,7 +425,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
416
425
|
}[variant];
|
|
417
426
|
const cardContent = /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles4.card, variantStyle, style] }, children);
|
|
418
427
|
if (onPress) {
|
|
419
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
428
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
420
429
|
reactNative.TouchableOpacity,
|
|
421
430
|
{
|
|
422
431
|
onPress: handlePress,
|
|
@@ -449,28 +458,28 @@ function CardFooter({ children, style }) {
|
|
|
449
458
|
}
|
|
450
459
|
var styles4 = reactNative.StyleSheet.create({
|
|
451
460
|
card: {
|
|
452
|
-
borderRadius: 12,
|
|
461
|
+
borderRadius: ms(12),
|
|
453
462
|
borderWidth: 1
|
|
454
463
|
},
|
|
455
464
|
header: {
|
|
456
|
-
padding: 24,
|
|
465
|
+
padding: s(24),
|
|
457
466
|
paddingBottom: 0,
|
|
458
|
-
gap: 8
|
|
467
|
+
gap: vs(8)
|
|
459
468
|
},
|
|
460
469
|
title: {
|
|
461
|
-
fontSize: 20,
|
|
470
|
+
fontSize: ms(20),
|
|
462
471
|
fontWeight: "600",
|
|
463
|
-
lineHeight: 28
|
|
472
|
+
lineHeight: mvs(28)
|
|
464
473
|
},
|
|
465
474
|
description: {
|
|
466
|
-
fontSize: 15,
|
|
467
|
-
lineHeight: 22
|
|
475
|
+
fontSize: ms(15),
|
|
476
|
+
lineHeight: mvs(22)
|
|
468
477
|
},
|
|
469
478
|
content: {
|
|
470
|
-
padding: 24
|
|
479
|
+
padding: s(24)
|
|
471
480
|
},
|
|
472
481
|
footer: {
|
|
473
|
-
padding: 24,
|
|
482
|
+
padding: s(24),
|
|
474
483
|
paddingTop: 0,
|
|
475
484
|
flexDirection: "row",
|
|
476
485
|
alignItems: "center"
|
|
@@ -555,16 +564,16 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
555
564
|
}
|
|
556
565
|
});
|
|
557
566
|
var sizeMap2 = {
|
|
558
|
-
sm: 28,
|
|
559
|
-
md: 40,
|
|
560
|
-
lg: 56,
|
|
561
|
-
xl: 72
|
|
567
|
+
sm: s(28),
|
|
568
|
+
md: s(40),
|
|
569
|
+
lg: s(56),
|
|
570
|
+
xl: s(72)
|
|
562
571
|
};
|
|
563
572
|
var fontSizeMap = {
|
|
564
|
-
sm: 12,
|
|
565
|
-
md: 16,
|
|
566
|
-
lg: 22,
|
|
567
|
-
xl: 28
|
|
573
|
+
sm: ms(12),
|
|
574
|
+
md: ms(16),
|
|
575
|
+
lg: ms(22),
|
|
576
|
+
xl: ms(28)
|
|
568
577
|
};
|
|
569
578
|
function Avatar({ src, fallback, size = "md", style }) {
|
|
570
579
|
const { colors } = useTheme();
|
|
@@ -615,9 +624,9 @@ var styles8 = reactNative.StyleSheet.create({
|
|
|
615
624
|
container: {
|
|
616
625
|
flexDirection: "row",
|
|
617
626
|
borderWidth: 1,
|
|
618
|
-
borderRadius: 12,
|
|
619
|
-
padding: 16,
|
|
620
|
-
gap: 12,
|
|
627
|
+
borderRadius: ms(12),
|
|
628
|
+
padding: s(16),
|
|
629
|
+
gap: s(12),
|
|
621
630
|
shadowColor: "#000",
|
|
622
631
|
shadowOffset: { width: 0, height: 4 },
|
|
623
632
|
shadowOpacity: 0.06,
|
|
@@ -629,16 +638,16 @@ var styles8 = reactNative.StyleSheet.create({
|
|
|
629
638
|
},
|
|
630
639
|
content: {
|
|
631
640
|
flex: 1,
|
|
632
|
-
gap: 4
|
|
641
|
+
gap: vs(4)
|
|
633
642
|
},
|
|
634
643
|
title: {
|
|
635
|
-
fontSize: 14,
|
|
644
|
+
fontSize: ms(14),
|
|
636
645
|
fontWeight: "500",
|
|
637
|
-
lineHeight: 20
|
|
646
|
+
lineHeight: mvs(20)
|
|
638
647
|
},
|
|
639
648
|
description: {
|
|
640
|
-
fontSize: 14,
|
|
641
|
-
lineHeight: 20
|
|
649
|
+
fontSize: ms(14),
|
|
650
|
+
lineHeight: mvs(20)
|
|
642
651
|
}
|
|
643
652
|
});
|
|
644
653
|
function Progress({ value = 0, max = 100, style }) {
|
|
@@ -671,7 +680,7 @@ function Progress({ value = 0, max = 100, style }) {
|
|
|
671
680
|
}
|
|
672
681
|
var styles9 = reactNative.StyleSheet.create({
|
|
673
682
|
track: {
|
|
674
|
-
height: 8,
|
|
683
|
+
height: vs(8),
|
|
675
684
|
borderRadius: 999,
|
|
676
685
|
overflow: "hidden",
|
|
677
686
|
width: "100%"
|
|
@@ -722,46 +731,46 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
722
731
|
justifyContent: "center",
|
|
723
732
|
borderWidth: 1,
|
|
724
733
|
borderStyle: "dashed",
|
|
725
|
-
borderRadius: 12,
|
|
726
|
-
padding: 32,
|
|
727
|
-
gap: 16
|
|
734
|
+
borderRadius: ms(12),
|
|
735
|
+
padding: s(32),
|
|
736
|
+
gap: vs(16)
|
|
728
737
|
},
|
|
729
738
|
containerCompact: {
|
|
730
|
-
padding: 20,
|
|
731
|
-
gap: 10
|
|
739
|
+
padding: s(20),
|
|
740
|
+
gap: vs(10)
|
|
732
741
|
},
|
|
733
742
|
iconWrapper: {
|
|
734
|
-
width: 48,
|
|
735
|
-
height: 48,
|
|
736
|
-
borderRadius: 12,
|
|
743
|
+
width: s(48),
|
|
744
|
+
height: s(48),
|
|
745
|
+
borderRadius: ms(12),
|
|
737
746
|
alignItems: "center",
|
|
738
747
|
justifyContent: "center"
|
|
739
748
|
},
|
|
740
749
|
iconWrapperCompact: {
|
|
741
|
-
width: 36,
|
|
742
|
-
height: 36,
|
|
743
|
-
borderRadius: 8
|
|
750
|
+
width: s(36),
|
|
751
|
+
height: s(36),
|
|
752
|
+
borderRadius: ms(8)
|
|
744
753
|
},
|
|
745
754
|
textWrapper: {
|
|
746
755
|
alignItems: "center",
|
|
747
|
-
gap: 8,
|
|
748
|
-
maxWidth: 320
|
|
756
|
+
gap: vs(8),
|
|
757
|
+
maxWidth: s(320)
|
|
749
758
|
},
|
|
750
759
|
title: {
|
|
751
|
-
fontSize: 18,
|
|
760
|
+
fontSize: ms(18),
|
|
752
761
|
fontWeight: "500",
|
|
753
762
|
textAlign: "center"
|
|
754
763
|
},
|
|
755
764
|
titleCompact: {
|
|
756
|
-
fontSize: 15
|
|
765
|
+
fontSize: ms(15)
|
|
757
766
|
},
|
|
758
767
|
description: {
|
|
759
|
-
fontSize: 14,
|
|
760
|
-
lineHeight: 20,
|
|
768
|
+
fontSize: ms(14),
|
|
769
|
+
lineHeight: mvs(20),
|
|
761
770
|
textAlign: "center"
|
|
762
771
|
},
|
|
763
772
|
action: {
|
|
764
|
-
marginTop: 8
|
|
773
|
+
marginTop: vs(8)
|
|
765
774
|
}
|
|
766
775
|
});
|
|
767
776
|
var webInputResetStyle2 = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
@@ -790,7 +799,7 @@ function Textarea({
|
|
|
790
799
|
borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
|
|
791
800
|
color: colors.foreground,
|
|
792
801
|
backgroundColor: colors.background,
|
|
793
|
-
minHeight: rows * 30
|
|
802
|
+
minHeight: rows * vs(30)
|
|
794
803
|
},
|
|
795
804
|
webInputResetStyle2,
|
|
796
805
|
style
|
|
@@ -811,23 +820,24 @@ function Textarea({
|
|
|
811
820
|
}
|
|
812
821
|
var styles11 = reactNative.StyleSheet.create({
|
|
813
822
|
container: {
|
|
814
|
-
gap: 8
|
|
823
|
+
gap: vs(8)
|
|
815
824
|
},
|
|
816
825
|
label: {
|
|
817
|
-
fontSize: 15,
|
|
826
|
+
fontSize: ms(15),
|
|
818
827
|
fontWeight: "500"
|
|
819
828
|
},
|
|
820
829
|
input: {
|
|
821
830
|
borderWidth: 1.5,
|
|
822
|
-
borderRadius: 8,
|
|
823
|
-
paddingHorizontal: 16,
|
|
824
|
-
paddingVertical: 14,
|
|
825
|
-
fontSize: 17
|
|
831
|
+
borderRadius: ms(8),
|
|
832
|
+
paddingHorizontal: s(16),
|
|
833
|
+
paddingVertical: vs(14),
|
|
834
|
+
fontSize: ms(17)
|
|
826
835
|
},
|
|
827
836
|
helperText: {
|
|
828
|
-
fontSize: 13
|
|
837
|
+
fontSize: ms(13)
|
|
829
838
|
}
|
|
830
839
|
});
|
|
840
|
+
var nativeDriver3 = reactNative.Platform.OS !== "web";
|
|
831
841
|
function Checkbox({
|
|
832
842
|
checked = false,
|
|
833
843
|
onCheckedChange,
|
|
@@ -836,20 +846,20 @@ function Checkbox({
|
|
|
836
846
|
style
|
|
837
847
|
}) {
|
|
838
848
|
const { colors } = useTheme();
|
|
839
|
-
const
|
|
849
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
840
850
|
const handlePressIn = () => {
|
|
841
851
|
if (disabled) return;
|
|
842
|
-
reactNative.Animated.spring(
|
|
852
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver3, speed: 40, bounciness: 0 }).start();
|
|
843
853
|
};
|
|
844
854
|
const handlePressOut = () => {
|
|
845
|
-
reactNative.Animated.spring(
|
|
855
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver3, speed: 40, bounciness: 4 }).start();
|
|
846
856
|
};
|
|
847
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
857
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
848
858
|
reactNative.TouchableOpacity,
|
|
849
859
|
{
|
|
850
860
|
style: [styles12.row, style],
|
|
851
861
|
onPress: () => {
|
|
852
|
-
|
|
862
|
+
selectionAsync();
|
|
853
863
|
onCheckedChange?.(!checked);
|
|
854
864
|
},
|
|
855
865
|
onPressIn: handlePressIn,
|
|
@@ -885,33 +895,33 @@ var styles12 = reactNative.StyleSheet.create({
|
|
|
885
895
|
row: {
|
|
886
896
|
flexDirection: "row",
|
|
887
897
|
alignItems: "center",
|
|
888
|
-
gap: 12
|
|
898
|
+
gap: s(12)
|
|
889
899
|
},
|
|
890
900
|
box: {
|
|
891
|
-
width: 24,
|
|
892
|
-
height: 24,
|
|
893
|
-
borderRadius: 8,
|
|
901
|
+
width: s(24),
|
|
902
|
+
height: s(24),
|
|
903
|
+
borderRadius: ms(8),
|
|
894
904
|
borderWidth: 1.5,
|
|
895
905
|
alignItems: "center",
|
|
896
906
|
justifyContent: "center"
|
|
897
907
|
},
|
|
898
908
|
checkmark: {
|
|
899
|
-
width: 12,
|
|
900
|
-
height: 7,
|
|
909
|
+
width: s(12),
|
|
910
|
+
height: vs(7),
|
|
901
911
|
borderLeftWidth: 2,
|
|
902
912
|
borderBottomWidth: 2,
|
|
903
913
|
transform: [{ rotate: "-45deg" }, { translateY: -1 }]
|
|
904
914
|
},
|
|
905
915
|
label: {
|
|
906
|
-
fontSize: 15,
|
|
907
|
-
lineHeight: 22
|
|
916
|
+
fontSize: ms(15),
|
|
917
|
+
lineHeight: mvs(22)
|
|
908
918
|
}
|
|
909
919
|
});
|
|
910
|
-
var
|
|
911
|
-
var TRACK_WIDTH = 60;
|
|
912
|
-
var TRACK_HEIGHT = 36;
|
|
913
|
-
var THUMB_SIZE = 28;
|
|
914
|
-
var THUMB_OFFSET = 4;
|
|
920
|
+
var nativeDriver4 = reactNative.Platform.OS !== "web";
|
|
921
|
+
var TRACK_WIDTH = s(60);
|
|
922
|
+
var TRACK_HEIGHT = vs(36);
|
|
923
|
+
var THUMB_SIZE = s(28);
|
|
924
|
+
var THUMB_OFFSET = s(4);
|
|
915
925
|
var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
|
|
916
926
|
function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
917
927
|
const { colors } = useTheme();
|
|
@@ -921,7 +931,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
921
931
|
reactNative.Animated.parallel([
|
|
922
932
|
reactNative.Animated.spring(translateX, {
|
|
923
933
|
toValue: checked ? THUMB_TRAVEL : 0,
|
|
924
|
-
useNativeDriver:
|
|
934
|
+
useNativeDriver: nativeDriver4,
|
|
925
935
|
bounciness: 4
|
|
926
936
|
}),
|
|
927
937
|
reactNative.Animated.timing(trackOpacity, {
|
|
@@ -939,7 +949,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
939
949
|
reactNative.TouchableOpacity,
|
|
940
950
|
{
|
|
941
951
|
onPress: () => {
|
|
942
|
-
|
|
952
|
+
selectionAsync();
|
|
943
953
|
onCheckedChange?.(!checked);
|
|
944
954
|
},
|
|
945
955
|
disabled,
|
|
@@ -982,9 +992,9 @@ var styles13 = reactNative.StyleSheet.create({
|
|
|
982
992
|
}
|
|
983
993
|
});
|
|
984
994
|
var sizeStyles = {
|
|
985
|
-
sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
|
|
986
|
-
md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
|
|
987
|
-
lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 }
|
|
995
|
+
sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
|
|
996
|
+
md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
|
|
997
|
+
lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) }
|
|
988
998
|
};
|
|
989
999
|
function Toggle({
|
|
990
1000
|
pressed = false,
|
|
@@ -999,7 +1009,7 @@ function Toggle({
|
|
|
999
1009
|
...props
|
|
1000
1010
|
}) {
|
|
1001
1011
|
const { colors } = useTheme();
|
|
1002
|
-
const
|
|
1012
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1003
1013
|
const pressAnim = React23.useRef(new reactNative.Animated.Value(pressed ? 1 : 0)).current;
|
|
1004
1014
|
React23.useEffect(() => {
|
|
1005
1015
|
reactNative.Animated.timing(pressAnim, {
|
|
@@ -1011,10 +1021,10 @@ function Toggle({
|
|
|
1011
1021
|
}, [pressed, pressAnim]);
|
|
1012
1022
|
const handlePressIn = () => {
|
|
1013
1023
|
if (disabled) return;
|
|
1014
|
-
reactNative.Animated.spring(
|
|
1024
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
|
|
1015
1025
|
};
|
|
1016
1026
|
const handlePressOut = () => {
|
|
1017
|
-
reactNative.Animated.spring(
|
|
1027
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
|
|
1018
1028
|
};
|
|
1019
1029
|
const borderColor = pressAnim.interpolate({
|
|
1020
1030
|
inputRange: [0, 1],
|
|
@@ -1043,11 +1053,11 @@ function Toggle({
|
|
|
1043
1053
|
if (custom) return /* @__PURE__ */ React23__default.default.createElement(React23__default.default.Fragment, null, custom);
|
|
1044
1054
|
return /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "circle", size: 20, color: colors.mutedForeground });
|
|
1045
1055
|
};
|
|
1046
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1056
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles14.disabled, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1047
1057
|
reactNative.TouchableOpacity,
|
|
1048
1058
|
{
|
|
1049
1059
|
onPress: () => {
|
|
1050
|
-
|
|
1060
|
+
selectionAsync();
|
|
1051
1061
|
onPressedChange?.(!pressed);
|
|
1052
1062
|
},
|
|
1053
1063
|
onPressIn: handlePressIn,
|
|
@@ -1072,43 +1082,44 @@ function Toggle({
|
|
|
1072
1082
|
}
|
|
1073
1083
|
var styles14 = reactNative.StyleSheet.create({
|
|
1074
1084
|
base: {
|
|
1075
|
-
borderRadius: 8
|
|
1085
|
+
borderRadius: ms(8)
|
|
1076
1086
|
},
|
|
1077
1087
|
inner: {
|
|
1078
1088
|
flexDirection: "row",
|
|
1079
1089
|
alignItems: "center",
|
|
1080
1090
|
justifyContent: "center",
|
|
1081
|
-
gap: 8
|
|
1091
|
+
gap: s(8)
|
|
1082
1092
|
},
|
|
1083
1093
|
disabled: {
|
|
1084
1094
|
opacity: 0.45
|
|
1085
1095
|
},
|
|
1086
1096
|
label: {
|
|
1087
|
-
fontSize: 14,
|
|
1097
|
+
fontSize: ms(14),
|
|
1088
1098
|
fontWeight: "500"
|
|
1089
1099
|
}
|
|
1090
1100
|
});
|
|
1101
|
+
var nativeDriver5 = reactNative.Platform.OS !== "web";
|
|
1091
1102
|
function RadioItem({
|
|
1092
1103
|
option,
|
|
1093
1104
|
selected,
|
|
1094
1105
|
onSelect
|
|
1095
1106
|
}) {
|
|
1096
1107
|
const { colors } = useTheme();
|
|
1097
|
-
const
|
|
1108
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1098
1109
|
const handlePressIn = () => {
|
|
1099
1110
|
if (option.disabled) return;
|
|
1100
|
-
reactNative.Animated.spring(
|
|
1111
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver5, speed: 40, bounciness: 0 }).start();
|
|
1101
1112
|
};
|
|
1102
1113
|
const handlePressOut = () => {
|
|
1103
|
-
reactNative.Animated.spring(
|
|
1114
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver5, speed: 40, bounciness: 4 }).start();
|
|
1104
1115
|
};
|
|
1105
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1116
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1106
1117
|
reactNative.TouchableOpacity,
|
|
1107
1118
|
{
|
|
1108
1119
|
style: styles15.row,
|
|
1109
1120
|
onPress: () => {
|
|
1110
1121
|
if (!option.disabled) {
|
|
1111
|
-
|
|
1122
|
+
selectionAsync();
|
|
1112
1123
|
onSelect();
|
|
1113
1124
|
}
|
|
1114
1125
|
},
|
|
@@ -1162,7 +1173,7 @@ function RadioGroup({
|
|
|
1162
1173
|
}
|
|
1163
1174
|
var styles15 = reactNative.StyleSheet.create({
|
|
1164
1175
|
container: {
|
|
1165
|
-
gap: 12
|
|
1176
|
+
gap: vs(12)
|
|
1166
1177
|
},
|
|
1167
1178
|
horizontal: {
|
|
1168
1179
|
flexDirection: "row",
|
|
@@ -1171,26 +1182,27 @@ var styles15 = reactNative.StyleSheet.create({
|
|
|
1171
1182
|
row: {
|
|
1172
1183
|
flexDirection: "row",
|
|
1173
1184
|
alignItems: "center",
|
|
1174
|
-
gap: 12
|
|
1185
|
+
gap: s(12)
|
|
1175
1186
|
},
|
|
1176
1187
|
radio: {
|
|
1177
|
-
width: 24,
|
|
1178
|
-
height: 24,
|
|
1179
|
-
borderRadius: 12,
|
|
1188
|
+
width: s(24),
|
|
1189
|
+
height: s(24),
|
|
1190
|
+
borderRadius: s(12),
|
|
1180
1191
|
borderWidth: 1.5,
|
|
1181
1192
|
alignItems: "center",
|
|
1182
1193
|
justifyContent: "center"
|
|
1183
1194
|
},
|
|
1184
1195
|
dot: {
|
|
1185
|
-
width: 10,
|
|
1186
|
-
height: 10,
|
|
1187
|
-
borderRadius: 5
|
|
1196
|
+
width: s(10),
|
|
1197
|
+
height: s(10),
|
|
1198
|
+
borderRadius: s(5)
|
|
1188
1199
|
},
|
|
1189
1200
|
label: {
|
|
1190
|
-
fontSize: 14,
|
|
1191
|
-
lineHeight: 20
|
|
1201
|
+
fontSize: ms(14),
|
|
1202
|
+
lineHeight: mvs(20)
|
|
1192
1203
|
}
|
|
1193
1204
|
});
|
|
1205
|
+
var nativeDriver6 = reactNative.Platform.OS !== "web";
|
|
1194
1206
|
function TabTrigger({
|
|
1195
1207
|
tab,
|
|
1196
1208
|
isActive,
|
|
@@ -1198,12 +1210,12 @@ function TabTrigger({
|
|
|
1198
1210
|
onLayout
|
|
1199
1211
|
}) {
|
|
1200
1212
|
const { colors } = useTheme();
|
|
1201
|
-
const
|
|
1213
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1202
1214
|
const handlePressIn = () => {
|
|
1203
|
-
reactNative.Animated.spring(
|
|
1215
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver6, speed: 40, bounciness: 0 }).start();
|
|
1204
1216
|
};
|
|
1205
1217
|
const handlePressOut = () => {
|
|
1206
|
-
reactNative.Animated.spring(
|
|
1218
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver6, speed: 40, bounciness: 4 }).start();
|
|
1207
1219
|
};
|
|
1208
1220
|
return /* @__PURE__ */ React23__default.default.createElement(
|
|
1209
1221
|
reactNative.TouchableOpacity,
|
|
@@ -1216,7 +1228,7 @@ function TabTrigger({
|
|
|
1216
1228
|
activeOpacity: 1,
|
|
1217
1229
|
touchSoundDisabled: true
|
|
1218
1230
|
},
|
|
1219
|
-
/* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles16.triggerInner }, tab.icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles16.triggerIcon }, typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon) : null, /* @__PURE__ */ React23__default.default.createElement(
|
|
1231
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles16.triggerInner }, tab.icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles16.triggerIcon }, typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon) : null, /* @__PURE__ */ React23__default.default.createElement(
|
|
1220
1232
|
reactNative.Text,
|
|
1221
1233
|
{
|
|
1222
1234
|
style: [
|
|
@@ -1266,7 +1278,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
|
|
|
1266
1278
|
}
|
|
1267
1279
|
}, [active]);
|
|
1268
1280
|
const handlePress = (v) => {
|
|
1269
|
-
|
|
1281
|
+
selectionAsync();
|
|
1270
1282
|
if (!value) setInternal(v);
|
|
1271
1283
|
onValueChange?.(v);
|
|
1272
1284
|
};
|
|
@@ -1316,16 +1328,16 @@ function TabsContent({ value, activeValue, children, style }) {
|
|
|
1316
1328
|
var styles16 = reactNative.StyleSheet.create({
|
|
1317
1329
|
list: {
|
|
1318
1330
|
flexDirection: "row",
|
|
1319
|
-
borderRadius: 12,
|
|
1320
|
-
padding: 4,
|
|
1321
|
-
gap: 4
|
|
1331
|
+
borderRadius: ms(12),
|
|
1332
|
+
padding: s(4),
|
|
1333
|
+
gap: s(4)
|
|
1322
1334
|
},
|
|
1323
1335
|
pill: {},
|
|
1324
1336
|
trigger: {
|
|
1325
1337
|
flex: 1,
|
|
1326
|
-
paddingVertical: 12,
|
|
1327
|
-
paddingHorizontal: 16,
|
|
1328
|
-
borderRadius: 8,
|
|
1338
|
+
paddingVertical: vs(12),
|
|
1339
|
+
paddingHorizontal: s(16),
|
|
1340
|
+
borderRadius: ms(8),
|
|
1329
1341
|
alignItems: "center",
|
|
1330
1342
|
justifyContent: "center",
|
|
1331
1343
|
zIndex: 1
|
|
@@ -1334,15 +1346,15 @@ var styles16 = reactNative.StyleSheet.create({
|
|
|
1334
1346
|
flexDirection: "row",
|
|
1335
1347
|
alignItems: "center",
|
|
1336
1348
|
justifyContent: "center",
|
|
1337
|
-
gap: 8
|
|
1349
|
+
gap: s(8)
|
|
1338
1350
|
},
|
|
1339
1351
|
triggerIcon: {
|
|
1340
|
-
marginRight: 6,
|
|
1352
|
+
marginRight: s(6),
|
|
1341
1353
|
alignItems: "center",
|
|
1342
1354
|
justifyContent: "center"
|
|
1343
1355
|
},
|
|
1344
1356
|
triggerLabel: {
|
|
1345
|
-
fontSize: 15,
|
|
1357
|
+
fontSize: ms(15),
|
|
1346
1358
|
fontWeight: "400"
|
|
1347
1359
|
},
|
|
1348
1360
|
activeTriggerLabel: {
|
|
@@ -1355,53 +1367,51 @@ function AccordionItemComponent({
|
|
|
1355
1367
|
onToggle
|
|
1356
1368
|
}) {
|
|
1357
1369
|
const { colors } = useTheme();
|
|
1358
|
-
const
|
|
1359
|
-
const
|
|
1360
|
-
const contentHeight = React23.useRef(0);
|
|
1361
|
-
const scale = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1362
|
-
const toggle = (open) => {
|
|
1363
|
-
const easing = open ? ReanimatedAnimated.Easing.out(ReanimatedAnimated.Easing.ease) : ReanimatedAnimated.Easing.in(ReanimatedAnimated.Easing.ease);
|
|
1364
|
-
animatedHeight.value = ReanimatedAnimated.withTiming(open ? contentHeight.current : 0, { duration: 220, easing });
|
|
1365
|
-
animatedRotation.value = ReanimatedAnimated.withTiming(open ? 1 : 0, { duration: 220, easing });
|
|
1366
|
-
};
|
|
1370
|
+
const isExpanded = Animated10.useSharedValue(isOpen);
|
|
1371
|
+
const height = Animated10.useSharedValue(0);
|
|
1367
1372
|
React23__default.default.useEffect(() => {
|
|
1368
|
-
|
|
1373
|
+
isExpanded.value = isOpen;
|
|
1369
1374
|
}, [isOpen]);
|
|
1370
|
-
const
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
}
|
|
1375
|
-
|
|
1376
|
-
const
|
|
1377
|
-
|
|
1375
|
+
const derivedHeight = Animated10.useDerivedValue(
|
|
1376
|
+
() => Animated10.withTiming(height.value * Number(isExpanded.value), {
|
|
1377
|
+
duration: 220,
|
|
1378
|
+
easing: isExpanded.value ? Animated10.Easing.out(Animated10.Easing.ease) : Animated10.Easing.in(Animated10.Easing.ease)
|
|
1379
|
+
})
|
|
1380
|
+
);
|
|
1381
|
+
const derivedRotation = Animated10.useDerivedValue(
|
|
1382
|
+
() => Animated10.withTiming(isExpanded.value ? 1 : 0, {
|
|
1383
|
+
duration: 220,
|
|
1384
|
+
easing: isExpanded.value ? Animated10.Easing.out(Animated10.Easing.ease) : Animated10.Easing.in(Animated10.Easing.ease)
|
|
1385
|
+
})
|
|
1386
|
+
);
|
|
1387
|
+
const bodyStyle = Animated10.useAnimatedStyle(() => ({
|
|
1388
|
+
height: derivedHeight.value,
|
|
1378
1389
|
overflow: "hidden"
|
|
1379
1390
|
}));
|
|
1380
|
-
const rotationStyle =
|
|
1381
|
-
transform: [{ rotate: `${
|
|
1391
|
+
const rotationStyle = Animated10.useAnimatedStyle(() => ({
|
|
1392
|
+
transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
|
|
1382
1393
|
}));
|
|
1383
|
-
|
|
1384
|
-
reactNative.
|
|
1385
|
-
};
|
|
1386
|
-
const handlePressOut = () => {
|
|
1387
|
-
reactNative.Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
|
|
1388
|
-
};
|
|
1389
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1390
|
-
reactNative.TouchableOpacity,
|
|
1394
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles17.item, { borderBottomColor: colors.border }] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1395
|
+
reactNative.Pressable,
|
|
1391
1396
|
{
|
|
1392
|
-
style: styles17.trigger,
|
|
1397
|
+
style: ({ pressed }) => [styles17.trigger, { opacity: pressed ? 0.6 : 1 }],
|
|
1393
1398
|
onPress: () => {
|
|
1394
|
-
|
|
1399
|
+
selectionAsync();
|
|
1395
1400
|
onToggle();
|
|
1396
|
-
}
|
|
1397
|
-
onPressIn: handlePressIn,
|
|
1398
|
-
onPressOut: handlePressOut,
|
|
1399
|
-
activeOpacity: 1,
|
|
1400
|
-
touchSoundDisabled: true
|
|
1401
|
+
}
|
|
1401
1402
|
},
|
|
1402
1403
|
/* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles17.triggerText, { color: colors.foreground }] }, item.trigger),
|
|
1403
|
-
/* @__PURE__ */ React23__default.default.createElement(
|
|
1404
|
-
)
|
|
1404
|
+
/* @__PURE__ */ React23__default.default.createElement(Animated10__default.default.View, { style: [styles17.chevron, rotationStyle] }, /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 20, color: colors.foreground }))
|
|
1405
|
+
), /* @__PURE__ */ React23__default.default.createElement(Animated10__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1406
|
+
reactNative.View,
|
|
1407
|
+
{
|
|
1408
|
+
style: styles17.content,
|
|
1409
|
+
onLayout: (e) => {
|
|
1410
|
+
height.value = e.nativeEvent.layout.height;
|
|
1411
|
+
}
|
|
1412
|
+
},
|
|
1413
|
+
item.content
|
|
1414
|
+
)));
|
|
1405
1415
|
}
|
|
1406
1416
|
function Accordion({ items, type = "single", defaultValue, style }) {
|
|
1407
1417
|
const [openValues, setOpenValues] = React23.useState(() => {
|
|
@@ -1435,18 +1445,20 @@ var styles17 = reactNative.StyleSheet.create({
|
|
|
1435
1445
|
flexDirection: "row",
|
|
1436
1446
|
justifyContent: "space-between",
|
|
1437
1447
|
alignItems: "center",
|
|
1438
|
-
paddingVertical: 20
|
|
1448
|
+
paddingVertical: vs(20)
|
|
1439
1449
|
},
|
|
1440
1450
|
triggerText: {
|
|
1441
|
-
fontSize: 17,
|
|
1451
|
+
fontSize: ms(17),
|
|
1442
1452
|
fontWeight: "500",
|
|
1443
1453
|
flex: 1
|
|
1444
1454
|
},
|
|
1445
1455
|
chevron: {
|
|
1446
|
-
marginLeft: 8
|
|
1456
|
+
marginLeft: s(8)
|
|
1447
1457
|
},
|
|
1458
|
+
// position:'absolute' is the key — the inner View escapes the animated wrapper's
|
|
1459
|
+
// clipped height so onLayout always reports the true content height.
|
|
1448
1460
|
content: {
|
|
1449
|
-
paddingBottom: 20,
|
|
1461
|
+
paddingBottom: vs(20),
|
|
1450
1462
|
position: "absolute",
|
|
1451
1463
|
width: "100%"
|
|
1452
1464
|
}
|
|
@@ -1470,7 +1482,7 @@ function Slider({
|
|
|
1470
1482
|
const handleValueChange = (v) => {
|
|
1471
1483
|
if (step && v !== lastSteppedValue.current) {
|
|
1472
1484
|
lastSteppedValue.current = v;
|
|
1473
|
-
|
|
1485
|
+
selectionAsync();
|
|
1474
1486
|
}
|
|
1475
1487
|
onValueChange?.(v);
|
|
1476
1488
|
};
|
|
@@ -1494,7 +1506,7 @@ function Slider({
|
|
|
1494
1506
|
}
|
|
1495
1507
|
var styles18 = reactNative.StyleSheet.create({
|
|
1496
1508
|
wrapper: {
|
|
1497
|
-
gap: 8
|
|
1509
|
+
gap: vs(8)
|
|
1498
1510
|
},
|
|
1499
1511
|
header: {
|
|
1500
1512
|
flexDirection: "row",
|
|
@@ -1502,16 +1514,16 @@ var styles18 = reactNative.StyleSheet.create({
|
|
|
1502
1514
|
alignItems: "center"
|
|
1503
1515
|
},
|
|
1504
1516
|
label: {
|
|
1505
|
-
fontSize: 15,
|
|
1517
|
+
fontSize: ms(15),
|
|
1506
1518
|
fontWeight: "500"
|
|
1507
1519
|
},
|
|
1508
1520
|
valueText: {
|
|
1509
|
-
fontSize: 14,
|
|
1521
|
+
fontSize: ms(14),
|
|
1510
1522
|
fontWeight: "500"
|
|
1511
1523
|
},
|
|
1512
1524
|
slider: {
|
|
1513
1525
|
width: "100%",
|
|
1514
|
-
height: 40
|
|
1526
|
+
height: vs(40)
|
|
1515
1527
|
},
|
|
1516
1528
|
disabled: {
|
|
1517
1529
|
opacity: 0.45
|
|
@@ -1530,7 +1542,7 @@ function Sheet({
|
|
|
1530
1542
|
const ref = React23.useRef(null);
|
|
1531
1543
|
React23.useEffect(() => {
|
|
1532
1544
|
if (open) {
|
|
1533
|
-
|
|
1545
|
+
impactLight();
|
|
1534
1546
|
ref.current?.present();
|
|
1535
1547
|
} else {
|
|
1536
1548
|
ref.current?.dismiss();
|
|
@@ -1561,34 +1573,34 @@ function Sheet({
|
|
|
1561
1573
|
}
|
|
1562
1574
|
var styles19 = reactNative.StyleSheet.create({
|
|
1563
1575
|
background: {
|
|
1564
|
-
borderTopLeftRadius: 16,
|
|
1565
|
-
borderTopRightRadius: 16
|
|
1576
|
+
borderTopLeftRadius: ms(16),
|
|
1577
|
+
borderTopRightRadius: ms(16)
|
|
1566
1578
|
},
|
|
1567
1579
|
handle: {
|
|
1568
|
-
width: 36,
|
|
1569
|
-
height: 4,
|
|
1570
|
-
borderRadius: 2
|
|
1580
|
+
width: s(36),
|
|
1581
|
+
height: vs(4),
|
|
1582
|
+
borderRadius: ms(2)
|
|
1571
1583
|
},
|
|
1572
1584
|
content: {
|
|
1573
|
-
paddingHorizontal: 24,
|
|
1574
|
-
paddingBottom: 32
|
|
1585
|
+
paddingHorizontal: s(24),
|
|
1586
|
+
paddingBottom: vs(32)
|
|
1575
1587
|
},
|
|
1576
1588
|
header: {
|
|
1577
|
-
gap: 8,
|
|
1578
|
-
marginBottom: 16
|
|
1589
|
+
gap: vs(8),
|
|
1590
|
+
marginBottom: vs(16)
|
|
1579
1591
|
},
|
|
1580
1592
|
title: {
|
|
1581
|
-
fontSize: 18,
|
|
1593
|
+
fontSize: ms(18),
|
|
1582
1594
|
fontWeight: "600"
|
|
1583
1595
|
},
|
|
1584
1596
|
description: {
|
|
1585
|
-
fontSize: 14,
|
|
1586
|
-
lineHeight: 20
|
|
1597
|
+
fontSize: ms(14),
|
|
1598
|
+
lineHeight: mvs(20)
|
|
1587
1599
|
}
|
|
1588
1600
|
});
|
|
1589
1601
|
var isIOS = reactNative.Platform.OS === "ios";
|
|
1590
1602
|
var isAndroid = reactNative.Platform.OS === "android";
|
|
1591
|
-
var
|
|
1603
|
+
var isWeb2 = reactNative.Platform.OS === "web";
|
|
1592
1604
|
function Select({
|
|
1593
1605
|
options,
|
|
1594
1606
|
value,
|
|
@@ -1600,21 +1612,21 @@ function Select({
|
|
|
1600
1612
|
style
|
|
1601
1613
|
}) {
|
|
1602
1614
|
const { colors } = useTheme();
|
|
1603
|
-
const
|
|
1615
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1604
1616
|
const [pickerVisible, setPickerVisible] = React23.useState(false);
|
|
1605
1617
|
const [pendingValue, setPendingValue] = React23.useState(value);
|
|
1606
1618
|
const pickerRef = React23.useRef(null);
|
|
1607
1619
|
const selected = options.find((o) => o.value === value);
|
|
1608
1620
|
const handlePressIn = () => {
|
|
1609
1621
|
if (disabled) return;
|
|
1610
|
-
reactNative.Animated.spring(
|
|
1622
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start();
|
|
1611
1623
|
};
|
|
1612
1624
|
const handlePressOut = () => {
|
|
1613
|
-
reactNative.Animated.spring(
|
|
1625
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
|
|
1614
1626
|
};
|
|
1615
1627
|
const handleOpen = () => {
|
|
1616
1628
|
if (disabled) return;
|
|
1617
|
-
|
|
1629
|
+
selectionAsync();
|
|
1618
1630
|
if (isIOS) {
|
|
1619
1631
|
setPendingValue(value);
|
|
1620
1632
|
setPickerVisible(true);
|
|
@@ -1627,12 +1639,12 @@ function Select({
|
|
|
1627
1639
|
};
|
|
1628
1640
|
const handleConfirm = () => {
|
|
1629
1641
|
if (pendingValue !== void 0 && pendingValue !== "") {
|
|
1630
|
-
|
|
1642
|
+
selectionAsync();
|
|
1631
1643
|
onValueChange?.(pendingValue);
|
|
1632
1644
|
}
|
|
1633
1645
|
setPickerVisible(false);
|
|
1634
1646
|
};
|
|
1635
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !
|
|
1647
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb2 ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1636
1648
|
reactNative.TouchableOpacity,
|
|
1637
1649
|
{
|
|
1638
1650
|
style: [
|
|
@@ -1696,7 +1708,7 @@ function Select({
|
|
|
1696
1708
|
selectedValue: value ?? "",
|
|
1697
1709
|
onValueChange: (val) => {
|
|
1698
1710
|
if (val !== "") {
|
|
1699
|
-
|
|
1711
|
+
selectionAsync();
|
|
1700
1712
|
onValueChange?.(val);
|
|
1701
1713
|
}
|
|
1702
1714
|
},
|
|
@@ -1715,7 +1727,7 @@ function Select({
|
|
|
1715
1727
|
enabled: !o.disabled
|
|
1716
1728
|
}
|
|
1717
1729
|
))
|
|
1718
|
-
) : null,
|
|
1730
|
+
) : null, isWeb2 ? /* @__PURE__ */ React23__default.default.createElement(
|
|
1719
1731
|
picker.Picker,
|
|
1720
1732
|
{
|
|
1721
1733
|
selectedValue: value ?? "",
|
|
@@ -1749,10 +1761,10 @@ function Select({
|
|
|
1749
1761
|
}
|
|
1750
1762
|
var styles20 = reactNative.StyleSheet.create({
|
|
1751
1763
|
container: {
|
|
1752
|
-
gap: 8
|
|
1764
|
+
gap: vs(8)
|
|
1753
1765
|
},
|
|
1754
1766
|
label: {
|
|
1755
|
-
fontSize: 15,
|
|
1767
|
+
fontSize: ms(15),
|
|
1756
1768
|
fontWeight: "500"
|
|
1757
1769
|
},
|
|
1758
1770
|
trigger: {
|
|
@@ -1760,9 +1772,9 @@ var styles20 = reactNative.StyleSheet.create({
|
|
|
1760
1772
|
alignItems: "center",
|
|
1761
1773
|
justifyContent: "space-between",
|
|
1762
1774
|
borderWidth: 1.5,
|
|
1763
|
-
borderRadius: 8,
|
|
1764
|
-
paddingHorizontal: 16,
|
|
1765
|
-
paddingVertical: 14,
|
|
1775
|
+
borderRadius: ms(8),
|
|
1776
|
+
paddingHorizontal: s(16),
|
|
1777
|
+
paddingVertical: vs(14),
|
|
1766
1778
|
shadowColor: "#000",
|
|
1767
1779
|
shadowOffset: { width: 0, height: 1 },
|
|
1768
1780
|
shadowOpacity: 0.04,
|
|
@@ -1770,41 +1782,41 @@ var styles20 = reactNative.StyleSheet.create({
|
|
|
1770
1782
|
elevation: 1
|
|
1771
1783
|
},
|
|
1772
1784
|
triggerText: {
|
|
1773
|
-
fontSize: 17,
|
|
1785
|
+
fontSize: ms(17),
|
|
1774
1786
|
flex: 1
|
|
1775
1787
|
},
|
|
1776
1788
|
chevron: {
|
|
1777
|
-
marginLeft: 8
|
|
1789
|
+
marginLeft: s(8)
|
|
1778
1790
|
},
|
|
1779
1791
|
helperText: {
|
|
1780
|
-
fontSize: 13
|
|
1792
|
+
fontSize: ms(13)
|
|
1781
1793
|
},
|
|
1782
1794
|
iosBackdrop: {
|
|
1783
1795
|
flex: 1,
|
|
1784
1796
|
backgroundColor: "rgba(0,0,0,0.4)"
|
|
1785
1797
|
},
|
|
1786
1798
|
iosSheet: {
|
|
1787
|
-
borderTopLeftRadius: 16,
|
|
1788
|
-
borderTopRightRadius: 16,
|
|
1789
|
-
paddingBottom: 32
|
|
1799
|
+
borderTopLeftRadius: ms(16),
|
|
1800
|
+
borderTopRightRadius: ms(16),
|
|
1801
|
+
paddingBottom: vs(32)
|
|
1790
1802
|
},
|
|
1791
1803
|
iosToolbar: {
|
|
1792
1804
|
flexDirection: "row",
|
|
1793
1805
|
alignItems: "center",
|
|
1794
1806
|
justifyContent: "space-between",
|
|
1795
|
-
paddingHorizontal: 16,
|
|
1796
|
-
paddingVertical: 12,
|
|
1807
|
+
paddingHorizontal: s(16),
|
|
1808
|
+
paddingVertical: vs(12),
|
|
1797
1809
|
borderBottomWidth: 1
|
|
1798
1810
|
},
|
|
1799
1811
|
iosToolbarTitle: {
|
|
1800
|
-
fontSize: 17,
|
|
1812
|
+
fontSize: ms(17),
|
|
1801
1813
|
fontWeight: "600"
|
|
1802
1814
|
},
|
|
1803
1815
|
iosDoneBtn: {
|
|
1804
|
-
padding: 4
|
|
1816
|
+
padding: s(4)
|
|
1805
1817
|
},
|
|
1806
1818
|
iosDoneBtnText: {
|
|
1807
|
-
fontSize: 17,
|
|
1819
|
+
fontSize: ms(17),
|
|
1808
1820
|
fontWeight: "600"
|
|
1809
1821
|
},
|
|
1810
1822
|
androidHiddenPicker: {
|
|
@@ -1814,10 +1826,10 @@ var styles20 = reactNative.StyleSheet.create({
|
|
|
1814
1826
|
},
|
|
1815
1827
|
webPicker: {
|
|
1816
1828
|
borderWidth: 1.5,
|
|
1817
|
-
borderRadius: 8,
|
|
1818
|
-
paddingHorizontal: 16,
|
|
1819
|
-
paddingVertical: 14,
|
|
1820
|
-
fontSize: 17
|
|
1829
|
+
borderRadius: ms(8),
|
|
1830
|
+
paddingHorizontal: s(16),
|
|
1831
|
+
paddingVertical: vs(14),
|
|
1832
|
+
fontSize: ms(17)
|
|
1821
1833
|
}
|
|
1822
1834
|
});
|
|
1823
1835
|
var ToastContext = React23.createContext({
|
|
@@ -1833,15 +1845,15 @@ var SWIPE_THRESHOLD = 80;
|
|
|
1833
1845
|
var VELOCITY_THRESHOLD = 800;
|
|
1834
1846
|
function ToastNotification({ item, onDismiss }) {
|
|
1835
1847
|
const { colors } = useTheme();
|
|
1836
|
-
const translateY =
|
|
1837
|
-
const translateX =
|
|
1838
|
-
const opacity =
|
|
1848
|
+
const translateY = Animated10.useSharedValue(-80);
|
|
1849
|
+
const translateX = Animated10.useSharedValue(0);
|
|
1850
|
+
const opacity = Animated10.useSharedValue(0);
|
|
1839
1851
|
React23.useEffect(() => {
|
|
1840
|
-
translateY.value =
|
|
1841
|
-
opacity.value =
|
|
1852
|
+
translateY.value = Animated10.withTiming(0, { duration: 120, easing: Animated10.Easing.out(Animated10.Easing.exp) });
|
|
1853
|
+
opacity.value = Animated10.withTiming(1, { duration: 100 });
|
|
1842
1854
|
const timer = setTimeout(() => {
|
|
1843
|
-
translateY.value =
|
|
1844
|
-
opacity.value =
|
|
1855
|
+
translateY.value = Animated10.withTiming(-80, { duration: 200 });
|
|
1856
|
+
opacity.value = Animated10.withTiming(0, { duration: 200 }, (done) => {
|
|
1845
1857
|
if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
|
|
1846
1858
|
});
|
|
1847
1859
|
}, item.duration ?? 3e3);
|
|
@@ -1853,15 +1865,15 @@ function ToastNotification({ item, onDismiss }) {
|
|
|
1853
1865
|
const shouldDismiss = Math.abs(translateX.value) > SWIPE_THRESHOLD || Math.abs(e.velocityX) > VELOCITY_THRESHOLD;
|
|
1854
1866
|
if (shouldDismiss) {
|
|
1855
1867
|
const direction = translateX.value > 0 ? 1 : -1;
|
|
1856
|
-
translateX.value =
|
|
1868
|
+
translateX.value = Animated10.withTiming(direction * 500, { duration: 200 }, (done) => {
|
|
1857
1869
|
if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
|
|
1858
1870
|
});
|
|
1859
|
-
opacity.value =
|
|
1871
|
+
opacity.value = Animated10.withTiming(0, { duration: 150 });
|
|
1860
1872
|
} else {
|
|
1861
|
-
translateX.value =
|
|
1873
|
+
translateX.value = Animated10.withSpring(0, { damping: 20, stiffness: 300 });
|
|
1862
1874
|
}
|
|
1863
1875
|
});
|
|
1864
|
-
const animatedStyle =
|
|
1876
|
+
const animatedStyle = Animated10.useAnimatedStyle(() => ({
|
|
1865
1877
|
opacity: opacity.value,
|
|
1866
1878
|
transform: [{ translateY: translateY.value }, { translateX: translateX.value }]
|
|
1867
1879
|
}));
|
|
@@ -1877,7 +1889,7 @@ function ToastNotification({ item, onDismiss }) {
|
|
|
1877
1889
|
}[item.variant ?? "default"];
|
|
1878
1890
|
const defaultIcon = item.variant === "success" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: 22, color: textColor }) : item.variant === "destructive" ? /* @__PURE__ */ React23__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: 24, color: textColor }) : /* @__PURE__ */ React23__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: 22, color: textColor });
|
|
1879
1891
|
const leftIcon = item.icon ?? defaultIcon;
|
|
1880
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1892
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React23__default.default.createElement(Animated10__default.default.View, { style: [styles21.toast, { backgroundColor: bgColor }, animatedStyle] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.leftIconContainer }, leftIcon), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles21.toastContent }, item.title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastTitle, { color: textColor }] }, item.title) : null, item.description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles21.toastDescription, { color: textColor, opacity: 0.85 }] }, item.description) : null), /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: onDismiss, style: styles21.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React23__default.default.createElement(vectorIcons.AntDesign, { name: "close-circle", size: 18, color: textColor }))));
|
|
1881
1893
|
}
|
|
1882
1894
|
function ToastProvider({ children }) {
|
|
1883
1895
|
const [toasts, setToasts] = React23.useState([]);
|
|
@@ -1885,11 +1897,11 @@ function ToastProvider({ children }) {
|
|
|
1885
1897
|
const toast = React23.useCallback((item) => {
|
|
1886
1898
|
const id = Math.random().toString(36).slice(2);
|
|
1887
1899
|
if (item.variant === "success") {
|
|
1888
|
-
|
|
1900
|
+
notificationSuccess();
|
|
1889
1901
|
} else if (item.variant === "destructive") {
|
|
1890
|
-
|
|
1902
|
+
notificationError();
|
|
1891
1903
|
} else {
|
|
1892
|
-
|
|
1904
|
+
impactLight();
|
|
1893
1905
|
}
|
|
1894
1906
|
setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
|
|
1895
1907
|
}, []);
|
|
@@ -1901,23 +1913,23 @@ function ToastProvider({ children }) {
|
|
|
1901
1913
|
var styles21 = reactNative.StyleSheet.create({
|
|
1902
1914
|
container: {
|
|
1903
1915
|
position: "absolute",
|
|
1904
|
-
left: 16,
|
|
1905
|
-
right: 16,
|
|
1906
|
-
gap: 8,
|
|
1916
|
+
left: s(16),
|
|
1917
|
+
right: s(16),
|
|
1918
|
+
gap: vs(8),
|
|
1907
1919
|
zIndex: 9999
|
|
1908
1920
|
},
|
|
1909
1921
|
containerWeb: {
|
|
1910
1922
|
left: void 0,
|
|
1911
1923
|
right: void 0,
|
|
1912
1924
|
alignSelf: "center",
|
|
1913
|
-
width: 400
|
|
1925
|
+
width: s(400)
|
|
1914
1926
|
},
|
|
1915
1927
|
toast: {
|
|
1916
1928
|
flexDirection: "row",
|
|
1917
1929
|
alignItems: "center",
|
|
1918
|
-
borderRadius: 16,
|
|
1919
|
-
paddingHorizontal: 20,
|
|
1920
|
-
paddingVertical: 14,
|
|
1930
|
+
borderRadius: ms(16),
|
|
1931
|
+
paddingHorizontal: s(20),
|
|
1932
|
+
paddingVertical: vs(14),
|
|
1921
1933
|
shadowColor: "#000",
|
|
1922
1934
|
shadowOffset: { width: 0, height: 4 },
|
|
1923
1935
|
shadowOpacity: 0.15,
|
|
@@ -1926,24 +1938,24 @@ var styles21 = reactNative.StyleSheet.create({
|
|
|
1926
1938
|
},
|
|
1927
1939
|
toastContent: {
|
|
1928
1940
|
flex: 1,
|
|
1929
|
-
gap: 4
|
|
1941
|
+
gap: vs(4)
|
|
1930
1942
|
},
|
|
1931
1943
|
leftIconContainer: {
|
|
1932
|
-
width: 40,
|
|
1944
|
+
width: s(40),
|
|
1933
1945
|
alignItems: "center",
|
|
1934
1946
|
justifyContent: "center",
|
|
1935
|
-
marginRight: 8
|
|
1947
|
+
marginRight: s(8)
|
|
1936
1948
|
},
|
|
1937
1949
|
toastTitle: {
|
|
1938
|
-
fontSize: 15,
|
|
1950
|
+
fontSize: ms(15),
|
|
1939
1951
|
fontWeight: "600"
|
|
1940
1952
|
},
|
|
1941
1953
|
toastDescription: {
|
|
1942
|
-
fontSize: 14
|
|
1954
|
+
fontSize: ms(14)
|
|
1943
1955
|
},
|
|
1944
1956
|
dismissButton: {
|
|
1945
|
-
padding: 8,
|
|
1946
|
-
marginLeft: 4
|
|
1957
|
+
padding: s(8),
|
|
1958
|
+
marginLeft: s(4)
|
|
1947
1959
|
}
|
|
1948
1960
|
});
|
|
1949
1961
|
function formatCurrency(raw, separator) {
|
|
@@ -1975,7 +1987,7 @@ function CurrencyInput({
|
|
|
1975
1987
|
const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
|
|
1976
1988
|
onChangeValue?.(isNaN(raw) ? 0 : raw);
|
|
1977
1989
|
};
|
|
1978
|
-
const inputStyle = size === "large" ? { fontSize: 36 } : {};
|
|
1990
|
+
const inputStyle = size === "large" ? { fontSize: ms(36) } : {};
|
|
1979
1991
|
return /* @__PURE__ */ React23__default.default.createElement(
|
|
1980
1992
|
Input,
|
|
1981
1993
|
{
|
|
@@ -2012,11 +2024,11 @@ function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor,
|
|
|
2012
2024
|
var styles22 = reactNative.StyleSheet.create({
|
|
2013
2025
|
container: {},
|
|
2014
2026
|
amount: {
|
|
2015
|
-
fontSize: 56,
|
|
2027
|
+
fontSize: ms(56),
|
|
2016
2028
|
fontWeight: "700"
|
|
2017
2029
|
}
|
|
2018
2030
|
});
|
|
2019
|
-
var
|
|
2031
|
+
var nativeDriver7 = reactNative.Platform.OS !== "web";
|
|
2020
2032
|
function ListItem({
|
|
2021
2033
|
leftRender,
|
|
2022
2034
|
rightRender,
|
|
@@ -2036,26 +2048,26 @@ function ListItem({
|
|
|
2036
2048
|
captionStyle
|
|
2037
2049
|
}) {
|
|
2038
2050
|
const { colors } = useTheme();
|
|
2039
|
-
const
|
|
2051
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
2040
2052
|
const handlePressIn = () => {
|
|
2041
2053
|
if (!onPress || disabled) return;
|
|
2042
|
-
reactNative.Animated.spring(
|
|
2054
|
+
reactNative.Animated.spring(scale2, {
|
|
2043
2055
|
toValue: 0.97,
|
|
2044
|
-
useNativeDriver:
|
|
2056
|
+
useNativeDriver: nativeDriver7,
|
|
2045
2057
|
speed: 40,
|
|
2046
2058
|
bounciness: 0
|
|
2047
2059
|
}).start();
|
|
2048
2060
|
};
|
|
2049
2061
|
const handlePressOut = () => {
|
|
2050
|
-
reactNative.Animated.spring(
|
|
2062
|
+
reactNative.Animated.spring(scale2, {
|
|
2051
2063
|
toValue: 1,
|
|
2052
|
-
useNativeDriver:
|
|
2064
|
+
useNativeDriver: nativeDriver7,
|
|
2053
2065
|
speed: 40,
|
|
2054
2066
|
bounciness: 4
|
|
2055
2067
|
}).start();
|
|
2056
2068
|
};
|
|
2057
2069
|
const handlePress = () => {
|
|
2058
|
-
|
|
2070
|
+
selectionAsync();
|
|
2059
2071
|
onPress?.();
|
|
2060
2072
|
};
|
|
2061
2073
|
const effectiveLeft = leftRender ?? icon;
|
|
@@ -2071,7 +2083,7 @@ function ListItem({
|
|
|
2071
2083
|
shadowRadius: 6,
|
|
2072
2084
|
elevation: 2
|
|
2073
2085
|
} : {};
|
|
2074
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2086
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2075
2087
|
reactNative.TouchableOpacity,
|
|
2076
2088
|
{
|
|
2077
2089
|
style: [styles23.container, cardStyle, style],
|
|
@@ -2121,7 +2133,7 @@ function ListItem({
|
|
|
2121
2133
|
{
|
|
2122
2134
|
style: [
|
|
2123
2135
|
styles23.separator,
|
|
2124
|
-
{ backgroundColor: colors.border, marginLeft: effectiveLeft ? 16 + 44 + 12 : 16 }
|
|
2136
|
+
{ backgroundColor: colors.border, marginLeft: effectiveLeft ? s(16) + s(44) + s(12) : s(16) }
|
|
2125
2137
|
]
|
|
2126
2138
|
}
|
|
2127
2139
|
) : null);
|
|
@@ -2130,61 +2142,61 @@ var styles23 = reactNative.StyleSheet.create({
|
|
|
2130
2142
|
container: {
|
|
2131
2143
|
flexDirection: "row",
|
|
2132
2144
|
alignItems: "center",
|
|
2133
|
-
paddingHorizontal: 16,
|
|
2134
|
-
paddingVertical: 14,
|
|
2135
|
-
gap: 12
|
|
2145
|
+
paddingHorizontal: s(16),
|
|
2146
|
+
paddingVertical: vs(14),
|
|
2147
|
+
gap: s(12)
|
|
2136
2148
|
},
|
|
2137
2149
|
leftContainer: {
|
|
2138
|
-
width: 44,
|
|
2139
|
-
height: 44,
|
|
2150
|
+
width: s(44),
|
|
2151
|
+
height: s(44),
|
|
2140
2152
|
alignItems: "center",
|
|
2141
2153
|
justifyContent: "center",
|
|
2142
2154
|
flexShrink: 0
|
|
2143
2155
|
},
|
|
2144
2156
|
content: {
|
|
2145
2157
|
flex: 1,
|
|
2146
|
-
gap: 4
|
|
2158
|
+
gap: vs(4)
|
|
2147
2159
|
},
|
|
2148
2160
|
title: {
|
|
2149
|
-
fontSize: 17,
|
|
2161
|
+
fontSize: ms(17),
|
|
2150
2162
|
fontWeight: "500",
|
|
2151
|
-
lineHeight: 24
|
|
2163
|
+
lineHeight: mvs(24)
|
|
2152
2164
|
},
|
|
2153
2165
|
subtitle: {
|
|
2154
|
-
fontSize: 14,
|
|
2166
|
+
fontSize: ms(14),
|
|
2155
2167
|
fontWeight: "400",
|
|
2156
|
-
lineHeight: 20
|
|
2168
|
+
lineHeight: mvs(20)
|
|
2157
2169
|
},
|
|
2158
2170
|
caption: {
|
|
2159
|
-
fontSize: 12,
|
|
2171
|
+
fontSize: ms(12),
|
|
2160
2172
|
fontWeight: "400",
|
|
2161
|
-
lineHeight: 16,
|
|
2173
|
+
lineHeight: mvs(16),
|
|
2162
2174
|
opacity: 0.7
|
|
2163
2175
|
},
|
|
2164
2176
|
rightContainer: {
|
|
2165
2177
|
alignItems: "flex-end",
|
|
2166
2178
|
justifyContent: "center",
|
|
2167
2179
|
flexShrink: 0,
|
|
2168
|
-
maxWidth: 160
|
|
2180
|
+
maxWidth: s(160)
|
|
2169
2181
|
},
|
|
2170
2182
|
rightText: {
|
|
2171
|
-
fontSize: 15
|
|
2183
|
+
fontSize: ms(15)
|
|
2172
2184
|
},
|
|
2173
2185
|
chevron: {
|
|
2174
|
-
marginLeft: 4
|
|
2186
|
+
marginLeft: s(4)
|
|
2175
2187
|
},
|
|
2176
2188
|
separator: {
|
|
2177
2189
|
height: reactNative.StyleSheet.hairlineWidth,
|
|
2178
|
-
marginRight: 16
|
|
2190
|
+
marginRight: s(16)
|
|
2179
2191
|
},
|
|
2180
2192
|
disabled: {
|
|
2181
2193
|
opacity: 0.45
|
|
2182
2194
|
}
|
|
2183
2195
|
});
|
|
2184
|
-
var
|
|
2196
|
+
var nativeDriver8 = reactNative.Platform.OS !== "web";
|
|
2185
2197
|
function Chip({ label, selected = false, onPress, style }) {
|
|
2186
2198
|
const { colors } = useTheme();
|
|
2187
|
-
const
|
|
2199
|
+
const scale2 = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
2188
2200
|
const pressAnim = React23.useRef(new reactNative.Animated.Value(selected ? 1 : 0)).current;
|
|
2189
2201
|
React23.useEffect(() => {
|
|
2190
2202
|
reactNative.Animated.timing(pressAnim, {
|
|
@@ -2195,23 +2207,23 @@ function Chip({ label, selected = false, onPress, style }) {
|
|
|
2195
2207
|
}).start();
|
|
2196
2208
|
}, [selected, pressAnim]);
|
|
2197
2209
|
const handlePressIn = () => {
|
|
2198
|
-
reactNative.Animated.spring(
|
|
2210
|
+
reactNative.Animated.spring(scale2, {
|
|
2199
2211
|
toValue: 0.95,
|
|
2200
|
-
useNativeDriver:
|
|
2212
|
+
useNativeDriver: nativeDriver8,
|
|
2201
2213
|
speed: 40,
|
|
2202
2214
|
bounciness: 0
|
|
2203
2215
|
}).start();
|
|
2204
2216
|
};
|
|
2205
2217
|
const handlePressOut = () => {
|
|
2206
|
-
reactNative.Animated.spring(
|
|
2218
|
+
reactNative.Animated.spring(scale2, {
|
|
2207
2219
|
toValue: 1,
|
|
2208
|
-
useNativeDriver:
|
|
2220
|
+
useNativeDriver: nativeDriver8,
|
|
2209
2221
|
speed: 40,
|
|
2210
2222
|
bounciness: 4
|
|
2211
2223
|
}).start();
|
|
2212
2224
|
};
|
|
2213
2225
|
const handlePress = () => {
|
|
2214
|
-
|
|
2226
|
+
selectionAsync();
|
|
2215
2227
|
onPress?.();
|
|
2216
2228
|
};
|
|
2217
2229
|
const backgroundColor = pressAnim.interpolate({
|
|
@@ -2226,7 +2238,7 @@ function Chip({ label, selected = false, onPress, style }) {
|
|
|
2226
2238
|
inputRange: [0, 1],
|
|
2227
2239
|
outputRange: [colors.border, colors.primary]
|
|
2228
2240
|
});
|
|
2229
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [styles24.wrapper, { transform: [{ scale }] }, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2241
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [styles24.wrapper, { transform: [{ scale: scale2 }] }, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2230
2242
|
reactNative.TouchableOpacity,
|
|
2231
2243
|
{
|
|
2232
2244
|
onPress: handlePress,
|
|
@@ -2274,21 +2286,21 @@ var styles24 = reactNative.StyleSheet.create({
|
|
|
2274
2286
|
wrapper: {},
|
|
2275
2287
|
chip: {
|
|
2276
2288
|
borderRadius: 999,
|
|
2277
|
-
paddingHorizontal: 14,
|
|
2278
|
-
paddingVertical: 8,
|
|
2289
|
+
paddingHorizontal: s(14),
|
|
2290
|
+
paddingVertical: vs(8),
|
|
2279
2291
|
borderWidth: 1.5,
|
|
2280
2292
|
alignItems: "center",
|
|
2281
2293
|
justifyContent: "center"
|
|
2282
2294
|
},
|
|
2283
2295
|
label: {
|
|
2284
|
-
fontSize: 14,
|
|
2296
|
+
fontSize: ms(14),
|
|
2285
2297
|
fontWeight: "500",
|
|
2286
|
-
lineHeight: 20
|
|
2298
|
+
lineHeight: mvs(20)
|
|
2287
2299
|
},
|
|
2288
2300
|
group: {
|
|
2289
2301
|
flexDirection: "row",
|
|
2290
2302
|
flexWrap: "wrap",
|
|
2291
|
-
gap: 8
|
|
2303
|
+
gap: s(8)
|
|
2292
2304
|
}
|
|
2293
2305
|
});
|
|
2294
2306
|
function ConfirmDialog({
|
|
@@ -2319,14 +2331,14 @@ var styles25 = reactNative.StyleSheet.create({
|
|
|
2319
2331
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
2320
2332
|
justifyContent: "center",
|
|
2321
2333
|
alignItems: "center",
|
|
2322
|
-
padding: 24
|
|
2334
|
+
padding: s(24)
|
|
2323
2335
|
},
|
|
2324
2336
|
dialog: {
|
|
2325
2337
|
width: "100%",
|
|
2326
|
-
maxWidth: 400,
|
|
2327
|
-
borderRadius: 16,
|
|
2328
|
-
padding: 24,
|
|
2329
|
-
gap: 12,
|
|
2338
|
+
maxWidth: s(400),
|
|
2339
|
+
borderRadius: ms(16),
|
|
2340
|
+
padding: s(24),
|
|
2341
|
+
gap: vs(12),
|
|
2330
2342
|
shadowColor: "#000",
|
|
2331
2343
|
shadowOffset: { width: 0, height: 8 },
|
|
2332
2344
|
shadowOpacity: 0.15,
|
|
@@ -2334,17 +2346,17 @@ var styles25 = reactNative.StyleSheet.create({
|
|
|
2334
2346
|
elevation: 8
|
|
2335
2347
|
},
|
|
2336
2348
|
title: {
|
|
2337
|
-
fontSize: 18,
|
|
2349
|
+
fontSize: ms(18),
|
|
2338
2350
|
fontWeight: "600",
|
|
2339
|
-
lineHeight: 26
|
|
2351
|
+
lineHeight: mvs(26)
|
|
2340
2352
|
},
|
|
2341
2353
|
description: {
|
|
2342
|
-
fontSize: 15,
|
|
2343
|
-
lineHeight: 22
|
|
2354
|
+
fontSize: ms(15),
|
|
2355
|
+
lineHeight: mvs(22)
|
|
2344
2356
|
},
|
|
2345
2357
|
actions: {
|
|
2346
|
-
gap: 10,
|
|
2347
|
-
marginTop: 8
|
|
2358
|
+
gap: vs(10),
|
|
2359
|
+
marginTop: vs(8)
|
|
2348
2360
|
}
|
|
2349
2361
|
});
|
|
2350
2362
|
function LabelValue({ label, value, style }) {
|
|
@@ -2356,16 +2368,16 @@ var styles26 = reactNative.StyleSheet.create({
|
|
|
2356
2368
|
flexDirection: "row",
|
|
2357
2369
|
justifyContent: "space-between",
|
|
2358
2370
|
alignItems: "center",
|
|
2359
|
-
gap: 12
|
|
2371
|
+
gap: s(12)
|
|
2360
2372
|
},
|
|
2361
2373
|
label: {
|
|
2362
|
-
fontSize: 13,
|
|
2363
|
-
lineHeight: 18
|
|
2374
|
+
fontSize: ms(13),
|
|
2375
|
+
lineHeight: mvs(18)
|
|
2364
2376
|
},
|
|
2365
2377
|
value: {
|
|
2366
|
-
fontSize: 15,
|
|
2378
|
+
fontSize: ms(15),
|
|
2367
2379
|
fontWeight: "500",
|
|
2368
|
-
lineHeight: 22,
|
|
2380
|
+
lineHeight: mvs(22),
|
|
2369
2381
|
textAlign: "right"
|
|
2370
2382
|
}
|
|
2371
2383
|
});
|
|
@@ -2386,7 +2398,7 @@ var MONTH_NAMES = [
|
|
|
2386
2398
|
function MonthPicker({ value, onChange, style }) {
|
|
2387
2399
|
const { colors } = useTheme();
|
|
2388
2400
|
const handlePrev = () => {
|
|
2389
|
-
|
|
2401
|
+
selectionAsync();
|
|
2390
2402
|
if (value.month === 1) {
|
|
2391
2403
|
onChange({ month: 12, year: value.year - 1 });
|
|
2392
2404
|
} else {
|
|
@@ -2394,7 +2406,7 @@ function MonthPicker({ value, onChange, style }) {
|
|
|
2394
2406
|
}
|
|
2395
2407
|
};
|
|
2396
2408
|
const handleNext = () => {
|
|
2397
|
-
|
|
2409
|
+
selectionAsync();
|
|
2398
2410
|
if (value.month === 12) {
|
|
2399
2411
|
onChange({ month: 1, year: value.year + 1 });
|
|
2400
2412
|
} else {
|
|
@@ -2428,17 +2440,17 @@ var styles27 = reactNative.StyleSheet.create({
|
|
|
2428
2440
|
justifyContent: "space-between"
|
|
2429
2441
|
},
|
|
2430
2442
|
arrow: {
|
|
2431
|
-
width: 44,
|
|
2432
|
-
height: 44,
|
|
2443
|
+
width: s(44),
|
|
2444
|
+
height: s(44),
|
|
2433
2445
|
alignItems: "center",
|
|
2434
2446
|
justifyContent: "center"
|
|
2435
2447
|
},
|
|
2436
2448
|
label: {
|
|
2437
|
-
fontSize: 17,
|
|
2449
|
+
fontSize: ms(17),
|
|
2438
2450
|
fontWeight: "500",
|
|
2439
|
-
lineHeight: 24,
|
|
2451
|
+
lineHeight: mvs(24),
|
|
2440
2452
|
textAlign: "center",
|
|
2441
|
-
minWidth: 160
|
|
2453
|
+
minWidth: s(160)
|
|
2442
2454
|
}
|
|
2443
2455
|
});
|
|
2444
2456
|
|