@retray-dev/ui-kit 5.4.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENTS.md +261 -126
- package/dist/index.d.mts +147 -44
- package/dist/index.d.ts +147 -44
- package/dist/index.js +429 -305
- package/dist/index.mjs +419 -303
- package/package.json +7 -2
- package/src/components/Accordion/Accordion.tsx +6 -2
- package/src/components/AlertBanner/AlertBanner.tsx +16 -33
- package/src/components/Button/Button.tsx +18 -6
- package/src/components/Card/Card.tsx +12 -9
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +4 -4
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +14 -3
- package/src/components/EmptyState/EmptyState.tsx +21 -6
- package/src/components/Input/Input.tsx +21 -10
- package/src/components/ListItem/ListItem.tsx +14 -8
- package/src/components/MediaCard/MediaCard.tsx +1 -0
- package/src/components/MenuItem/MenuItem.tsx +206 -0
- package/src/components/MenuItem/index.ts +2 -0
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/Separator/Separator.tsx +2 -0
- package/src/components/Sheet/Sheet.tsx +164 -51
- package/src/components/Sheet/index.ts +1 -1
- package/src/components/Tabs/Tabs.tsx +4 -4
- package/src/components/Toast/Toast.tsx +41 -267
- package/src/components/Toast/index.ts +1 -2
- package/src/components/Toggle/Toggle.tsx +2 -2
- package/src/index.ts +1 -0
- package/src/theme/colors.ts +3 -0
- package/src/theme/types.ts +11 -0
- package/src/tokens.ts +3 -3
package/dist/index.js
CHANGED
|
@@ -11,13 +11,12 @@ var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
|
|
|
11
11
|
var Ionicons = require('@expo/vector-icons/Ionicons');
|
|
12
12
|
var vectorIcons = require('@expo/vector-icons');
|
|
13
13
|
var expoLinearGradient = require('expo-linear-gradient');
|
|
14
|
-
var
|
|
14
|
+
var Animated12 = require('react-native-reanimated');
|
|
15
15
|
var RNSlider = require('@react-native-community/slider');
|
|
16
16
|
var bottomSheet = require('@gorhom/bottom-sheet');
|
|
17
|
-
var picker = require('@react-native-picker/picker');
|
|
18
|
-
var reactNativeWorklets = require('react-native-worklets');
|
|
19
|
-
var reactNativeGestureHandler = require('react-native-gesture-handler');
|
|
20
17
|
var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
18
|
+
var picker = require('@react-native-picker/picker');
|
|
19
|
+
var sonnerNative = require('sonner-native');
|
|
21
20
|
|
|
22
21
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
22
|
|
|
@@ -28,7 +27,7 @@ var Feather__default = /*#__PURE__*/_interopDefault(Feather);
|
|
|
28
27
|
var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
|
|
29
28
|
var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
|
|
30
29
|
var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
|
|
31
|
-
var
|
|
30
|
+
var Animated12__default = /*#__PURE__*/_interopDefault(Animated12);
|
|
32
31
|
var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
|
|
33
32
|
|
|
34
33
|
// src/theme/ThemeProvider.tsx
|
|
@@ -142,6 +141,9 @@ function deriveColors(t, scheme) {
|
|
|
142
141
|
successBorder,
|
|
143
142
|
warningTint,
|
|
144
143
|
warningBorder,
|
|
144
|
+
overlay: t.overlay ?? "rgba(0,0,0,0.45)",
|
|
145
|
+
accentResolved: t.accent ?? t.primary,
|
|
146
|
+
accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
|
|
145
147
|
ring: t.primary,
|
|
146
148
|
// focus ring always = primary
|
|
147
149
|
input: t.border
|
|
@@ -188,13 +190,13 @@ function impactLight() {
|
|
|
188
190
|
if (reactNative.Platform.OS === "web") return;
|
|
189
191
|
getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
|
|
190
192
|
}
|
|
191
|
-
function
|
|
193
|
+
function impactMedium() {
|
|
192
194
|
if (reactNative.Platform.OS === "web") return;
|
|
193
|
-
getHaptics().then((h) => h?.
|
|
195
|
+
getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium));
|
|
194
196
|
}
|
|
195
|
-
function
|
|
197
|
+
function notificationSuccess() {
|
|
196
198
|
if (reactNative.Platform.OS === "web") return;
|
|
197
|
-
getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.
|
|
199
|
+
getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
|
|
198
200
|
}
|
|
199
201
|
var isWeb = reactNative.Platform.OS === "web";
|
|
200
202
|
var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
|
|
@@ -396,10 +398,10 @@ var TYPOGRAPHY = {
|
|
|
396
398
|
},
|
|
397
399
|
"uppercase-tag": {
|
|
398
400
|
fontFamily: "Poppins-Bold",
|
|
399
|
-
fontSize:
|
|
401
|
+
fontSize: 10,
|
|
400
402
|
fontWeight: "700",
|
|
401
|
-
lineHeight:
|
|
402
|
-
letterSpacing: 0.
|
|
403
|
+
lineHeight: 13,
|
|
404
|
+
letterSpacing: 0.8,
|
|
403
405
|
textTransform: "uppercase"
|
|
404
406
|
},
|
|
405
407
|
"button-lg": {
|
|
@@ -451,13 +453,13 @@ function Button({
|
|
|
451
453
|
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
452
454
|
const handlePressIn = () => {
|
|
453
455
|
if (isDisabled) return;
|
|
454
|
-
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver,
|
|
456
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start();
|
|
455
457
|
};
|
|
456
458
|
const handlePressOut = () => {
|
|
457
|
-
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver,
|
|
459
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start();
|
|
458
460
|
};
|
|
459
461
|
const handlePress = (e) => {
|
|
460
|
-
|
|
462
|
+
impactMedium();
|
|
461
463
|
onPress?.(e);
|
|
462
464
|
};
|
|
463
465
|
const containerVariantStyle = {
|
|
@@ -497,7 +499,15 @@ function Button({
|
|
|
497
499
|
onPressOut: handlePressOut,
|
|
498
500
|
...props
|
|
499
501
|
},
|
|
500
|
-
loading ? /* @__PURE__ */ React26__default.default.createElement(
|
|
502
|
+
loading ? /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, /* @__PURE__ */ React26__default.default.createElement(reactNative.ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React26__default.default.createElement(
|
|
503
|
+
reactNative.Text,
|
|
504
|
+
{
|
|
505
|
+
style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
|
|
506
|
+
allowFontScaling: true,
|
|
507
|
+
numberOfLines: 1
|
|
508
|
+
},
|
|
509
|
+
label
|
|
510
|
+
)) : /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, effectiveIcon), /* @__PURE__ */ React26__default.default.createElement(
|
|
501
511
|
reactNative.Text,
|
|
502
512
|
{
|
|
503
513
|
style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
|
|
@@ -510,8 +520,8 @@ function Button({
|
|
|
510
520
|
}
|
|
511
521
|
var styles = reactNative.StyleSheet.create({
|
|
512
522
|
base: {
|
|
513
|
-
borderRadius: RADIUS.
|
|
514
|
-
//
|
|
523
|
+
borderRadius: RADIUS.md,
|
|
524
|
+
// 14px — Airbnb-aligned rounded rect (not pill)
|
|
515
525
|
alignItems: "center",
|
|
516
526
|
justifyContent: "center",
|
|
517
527
|
flexDirection: "row"
|
|
@@ -528,6 +538,9 @@ var styles = reactNative.StyleSheet.create({
|
|
|
528
538
|
},
|
|
529
539
|
labelWithIcon: {
|
|
530
540
|
marginHorizontal: s(6)
|
|
541
|
+
},
|
|
542
|
+
labelLoading: {
|
|
543
|
+
opacity: 0.6
|
|
531
544
|
}
|
|
532
545
|
});
|
|
533
546
|
function ButtonGroup({ children, gap = 12, vertical = false, style }) {
|
|
@@ -729,22 +742,27 @@ function Text3({ variant = "body-md", color, style, children, ...props }) {
|
|
|
729
742
|
);
|
|
730
743
|
}
|
|
731
744
|
var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
732
|
-
function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
|
|
745
|
+
function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }) {
|
|
733
746
|
const { colors } = useTheme();
|
|
734
747
|
const [focused, setFocused] = React26.useState(false);
|
|
735
748
|
const [showPassword, setShowPassword] = React26.useState(false);
|
|
749
|
+
const focusAnim = React26.useRef(new reactNative.Animated.Value(0)).current;
|
|
750
|
+
const isDisabled = disabled || editable === false;
|
|
736
751
|
const isPassword = type === "password";
|
|
737
752
|
const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
|
|
738
753
|
const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
|
|
739
754
|
const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles4.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
|
|
740
|
-
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles4.container, containerStyle] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26__default.default.createElement(
|
|
741
|
-
reactNative.View,
|
|
755
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles4.container, isDisabled && styles4.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26__default.default.createElement(
|
|
756
|
+
reactNative.Animated.View,
|
|
742
757
|
{
|
|
743
758
|
style: [
|
|
744
759
|
styles4.inputWrapper,
|
|
745
760
|
{
|
|
746
|
-
borderColor: error ? colors.destructive :
|
|
747
|
-
|
|
761
|
+
borderColor: error ? colors.destructive : focusAnim.interpolate({
|
|
762
|
+
inputRange: [0, 1],
|
|
763
|
+
outputRange: [colors.border, colors.primary]
|
|
764
|
+
}),
|
|
765
|
+
backgroundColor: isDisabled ? colors.surface : colors.background
|
|
748
766
|
},
|
|
749
767
|
inputWrapperStyle
|
|
750
768
|
]
|
|
@@ -763,15 +781,18 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
|
|
|
763
781
|
],
|
|
764
782
|
onFocus: (e) => {
|
|
765
783
|
setFocused(true);
|
|
784
|
+
reactNative.Animated.timing(focusAnim, { toValue: 1, duration: 120, easing: reactNative.Easing.out(reactNative.Easing.ease), useNativeDriver: false }).start();
|
|
766
785
|
onFocus?.(e);
|
|
767
786
|
},
|
|
768
787
|
onBlur: (e) => {
|
|
769
788
|
setFocused(false);
|
|
789
|
+
reactNative.Animated.timing(focusAnim, { toValue: 0, duration: 80, easing: reactNative.Easing.out(reactNative.Easing.ease), useNativeDriver: false }).start();
|
|
770
790
|
onBlur?.(e);
|
|
771
791
|
},
|
|
772
792
|
placeholderTextColor: colors.foregroundMuted,
|
|
773
793
|
allowFontScaling: true,
|
|
774
794
|
secureTextEntry: effectiveSecure,
|
|
795
|
+
editable: isDisabled ? false : editable,
|
|
775
796
|
...props
|
|
776
797
|
}
|
|
777
798
|
),
|
|
@@ -782,6 +803,9 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
782
803
|
container: {
|
|
783
804
|
gap: vs(8)
|
|
784
805
|
},
|
|
806
|
+
containerDisabled: {
|
|
807
|
+
opacity: 0.6
|
|
808
|
+
},
|
|
785
809
|
label: {
|
|
786
810
|
fontFamily: "Poppins-Medium",
|
|
787
811
|
fontSize: ms(14)
|
|
@@ -891,8 +915,9 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
891
915
|
reactNative.Animated.spring(scale2, {
|
|
892
916
|
toValue: 0.98,
|
|
893
917
|
useNativeDriver: nativeDriver3,
|
|
894
|
-
|
|
895
|
-
|
|
918
|
+
stiffness: 400,
|
|
919
|
+
damping: 30,
|
|
920
|
+
mass: 1
|
|
896
921
|
}).start();
|
|
897
922
|
};
|
|
898
923
|
const handlePressOut = () => {
|
|
@@ -900,8 +925,9 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
900
925
|
reactNative.Animated.spring(scale2, {
|
|
901
926
|
toValue: 1,
|
|
902
927
|
useNativeDriver: nativeDriver3,
|
|
903
|
-
|
|
904
|
-
|
|
928
|
+
stiffness: 250,
|
|
929
|
+
damping: 24,
|
|
930
|
+
mass: 1
|
|
905
931
|
}).start();
|
|
906
932
|
};
|
|
907
933
|
const handlePress = () => {
|
|
@@ -914,10 +940,10 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
914
940
|
backgroundColor: colors.card,
|
|
915
941
|
borderColor: colors.border,
|
|
916
942
|
shadowColor: "#000",
|
|
917
|
-
shadowOffset: { width: 0, height:
|
|
918
|
-
shadowOpacity: 0.
|
|
919
|
-
shadowRadius:
|
|
920
|
-
elevation:
|
|
943
|
+
shadowOffset: { width: 0, height: 6 },
|
|
944
|
+
shadowOpacity: 0.1,
|
|
945
|
+
shadowRadius: 16,
|
|
946
|
+
elevation: 4
|
|
921
947
|
},
|
|
922
948
|
outlined: {
|
|
923
949
|
backgroundColor: colors.card,
|
|
@@ -967,8 +993,8 @@ function CardFooter({ children, style }) {
|
|
|
967
993
|
}
|
|
968
994
|
var styles6 = reactNative.StyleSheet.create({
|
|
969
995
|
card: {
|
|
970
|
-
borderRadius:
|
|
971
|
-
//
|
|
996
|
+
borderRadius: RADIUS.md,
|
|
997
|
+
// 14px — Airbnb property card spec
|
|
972
998
|
borderWidth: 1
|
|
973
999
|
},
|
|
974
1000
|
header: {
|
|
@@ -1014,11 +1040,13 @@ function Separator({ orientation = "horizontal", style }) {
|
|
|
1014
1040
|
var styles7 = reactNative.StyleSheet.create({
|
|
1015
1041
|
horizontal: {
|
|
1016
1042
|
height: 1,
|
|
1017
|
-
width: "100%"
|
|
1043
|
+
width: "100%",
|
|
1044
|
+
opacity: 0.7
|
|
1018
1045
|
},
|
|
1019
1046
|
vertical: {
|
|
1020
1047
|
width: 1,
|
|
1021
|
-
height: "100%"
|
|
1048
|
+
height: "100%",
|
|
1049
|
+
opacity: 0.7
|
|
1022
1050
|
}
|
|
1023
1051
|
});
|
|
1024
1052
|
var sizeMap2 = {
|
|
@@ -1205,24 +1233,19 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
1205
1233
|
});
|
|
1206
1234
|
function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
|
|
1207
1235
|
const { colors } = useTheme();
|
|
1208
|
-
const bgColor = variant === "destructive" ? colors.destructiveTint : variant === "success" ? colors.successTint : variant === "warning" ? colors.warningTint : colors.card;
|
|
1209
|
-
const borderColor = variant === "destructive" ? colors.destructiveBorder : variant === "success" ? colors.successBorder : variant === "warning" ? colors.warningBorder : colors.border;
|
|
1210
1236
|
const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.primary;
|
|
1211
|
-
const
|
|
1212
|
-
const
|
|
1213
|
-
|
|
1214
|
-
const effectiveIcon = iconName ? renderIcon(iconName, 16, iconColor ?? accentColor) : icon ?? defaultIcon;
|
|
1215
|
-
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles11.container, { backgroundColor: bgColor, borderColor }, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.iconSlot }, effectiveIcon), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: titleColor }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: descColor }], allowFontScaling: true }, description) : null));
|
|
1237
|
+
const defaultIcon = variant === "success" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: ms(16), color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "error-outline", size: ms(17), color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "warning-amber", size: ms(17), color: accentColor }) : /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: ms(16), color: accentColor });
|
|
1238
|
+
const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
|
|
1239
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles11.container, { backgroundColor: colors.card }, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.iconSlot }, effectiveIcon), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null));
|
|
1216
1240
|
}
|
|
1217
1241
|
var styles11 = reactNative.StyleSheet.create({
|
|
1218
1242
|
container: {
|
|
1219
1243
|
flexDirection: "row",
|
|
1220
1244
|
alignItems: "flex-start",
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
gap: s(10)
|
|
1245
|
+
borderRadius: RADIUS.lg,
|
|
1246
|
+
gap: s(8),
|
|
1247
|
+
paddingVertical: vs(8),
|
|
1248
|
+
paddingHorizontal: s(10)
|
|
1226
1249
|
},
|
|
1227
1250
|
iconSlot: {
|
|
1228
1251
|
marginTop: vs(1)
|
|
@@ -1234,13 +1257,12 @@ var styles11 = reactNative.StyleSheet.create({
|
|
|
1234
1257
|
title: {
|
|
1235
1258
|
fontFamily: "Poppins-Medium",
|
|
1236
1259
|
fontSize: ms(13),
|
|
1237
|
-
lineHeight: ms(
|
|
1260
|
+
lineHeight: ms(19)
|
|
1238
1261
|
},
|
|
1239
1262
|
description: {
|
|
1240
1263
|
fontFamily: "Poppins-Regular",
|
|
1241
1264
|
fontSize: ms(12),
|
|
1242
|
-
lineHeight: ms(17)
|
|
1243
|
-
opacity: 0.85
|
|
1265
|
+
lineHeight: ms(17)
|
|
1244
1266
|
}
|
|
1245
1267
|
});
|
|
1246
1268
|
function Progress({ value = 0, max = 100, variant = "default", style }) {
|
|
@@ -1284,7 +1306,7 @@ var styles12 = reactNative.StyleSheet.create({
|
|
|
1284
1306
|
borderRadius: 9999
|
|
1285
1307
|
}
|
|
1286
1308
|
});
|
|
1287
|
-
function EmptyState({ icon, iconName, iconColor, title, description, action, size = "default", style }) {
|
|
1309
|
+
function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size = "default", style }) {
|
|
1288
1310
|
const { colors } = useTheme();
|
|
1289
1311
|
const isCompact = size === "compact";
|
|
1290
1312
|
const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted) : icon;
|
|
@@ -1317,7 +1339,7 @@ function EmptyState({ icon, iconName, iconColor, title, description, action, siz
|
|
|
1317
1339
|
},
|
|
1318
1340
|
title
|
|
1319
1341
|
), description && !isCompact ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles13.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null),
|
|
1320
|
-
|
|
1342
|
+
!isCompact && (action ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles13.action }, action) : actionLabel && onAction ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles13.action }, /* @__PURE__ */ React26__default.default.createElement(Button, { label: actionLabel, variant: "primary", onPress: onAction })) : null)
|
|
1321
1343
|
);
|
|
1322
1344
|
}
|
|
1323
1345
|
var styles13 = reactNative.StyleSheet.create({
|
|
@@ -1326,30 +1348,29 @@ var styles13 = reactNative.StyleSheet.create({
|
|
|
1326
1348
|
justifyContent: "center",
|
|
1327
1349
|
borderWidth: 1,
|
|
1328
1350
|
borderStyle: "dashed",
|
|
1329
|
-
borderRadius: ms(12)
|
|
1330
|
-
padding: s(32),
|
|
1331
|
-
gap: vs(16)
|
|
1332
|
-
},
|
|
1333
|
-
containerCompact: {
|
|
1334
|
-
padding: s(20),
|
|
1335
|
-
gap: vs(10)
|
|
1351
|
+
borderRadius: ms(12)
|
|
1336
1352
|
},
|
|
1353
|
+
containerCompact: {},
|
|
1337
1354
|
iconWrapper: {
|
|
1338
1355
|
width: s(80),
|
|
1339
1356
|
height: s(80),
|
|
1340
1357
|
borderRadius: ms(20),
|
|
1341
1358
|
alignItems: "center",
|
|
1342
|
-
justifyContent: "center"
|
|
1359
|
+
justifyContent: "center",
|
|
1360
|
+
marginTop: s(32)
|
|
1343
1361
|
},
|
|
1344
1362
|
iconWrapperCompact: {
|
|
1345
1363
|
width: s(56),
|
|
1346
1364
|
height: s(56),
|
|
1347
|
-
borderRadius: ms(14)
|
|
1365
|
+
borderRadius: ms(14),
|
|
1366
|
+
marginTop: s(20)
|
|
1348
1367
|
},
|
|
1349
1368
|
textWrapper: {
|
|
1350
1369
|
alignItems: "center",
|
|
1351
1370
|
gap: vs(8),
|
|
1352
|
-
maxWidth: s(320)
|
|
1371
|
+
maxWidth: s(320),
|
|
1372
|
+
paddingHorizontal: s(32),
|
|
1373
|
+
marginTop: vs(16)
|
|
1353
1374
|
},
|
|
1354
1375
|
title: {
|
|
1355
1376
|
fontFamily: "Poppins-Medium",
|
|
@@ -1357,7 +1378,8 @@ var styles13 = reactNative.StyleSheet.create({
|
|
|
1357
1378
|
textAlign: "center"
|
|
1358
1379
|
},
|
|
1359
1380
|
titleCompact: {
|
|
1360
|
-
fontSize: ms(15)
|
|
1381
|
+
fontSize: ms(15),
|
|
1382
|
+
marginTop: vs(10)
|
|
1361
1383
|
},
|
|
1362
1384
|
description: {
|
|
1363
1385
|
fontFamily: "Poppins-Regular",
|
|
@@ -1366,7 +1388,9 @@ var styles13 = reactNative.StyleSheet.create({
|
|
|
1366
1388
|
textAlign: "center"
|
|
1367
1389
|
},
|
|
1368
1390
|
action: {
|
|
1369
|
-
marginTop: vs(8)
|
|
1391
|
+
marginTop: vs(8),
|
|
1392
|
+
marginBottom: s(32),
|
|
1393
|
+
paddingHorizontal: s(32)
|
|
1370
1394
|
}
|
|
1371
1395
|
});
|
|
1372
1396
|
var webInputResetStyle2 = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
@@ -1701,10 +1725,10 @@ function Toggle({
|
|
|
1701
1725
|
}, [pressed, pressAnim]);
|
|
1702
1726
|
const handlePressIn = () => {
|
|
1703
1727
|
if (disabled) return;
|
|
1704
|
-
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver6,
|
|
1728
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver6, stiffness: 600, damping: 35, mass: 0.8 }).start();
|
|
1705
1729
|
};
|
|
1706
1730
|
const handlePressOut = () => {
|
|
1707
|
-
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver6,
|
|
1731
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver6, stiffness: 280, damping: 22, mass: 0.8 }).start();
|
|
1708
1732
|
};
|
|
1709
1733
|
const borderColor = pressAnim.interpolate({
|
|
1710
1734
|
inputRange: [0, 1],
|
|
@@ -1899,10 +1923,10 @@ function TabTrigger({
|
|
|
1899
1923
|
const { colors } = useTheme();
|
|
1900
1924
|
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
1901
1925
|
const handlePressIn = () => {
|
|
1902
|
-
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver8,
|
|
1926
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver8, stiffness: 600, damping: 35, mass: 0.8 }).start();
|
|
1903
1927
|
};
|
|
1904
1928
|
const handlePressOut = () => {
|
|
1905
|
-
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver8,
|
|
1929
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver8, stiffness: 280, damping: 22, mass: 0.8 }).start();
|
|
1906
1930
|
};
|
|
1907
1931
|
const isUnderline = variant === "underline";
|
|
1908
1932
|
return /* @__PURE__ */ React26__default.default.createElement(
|
|
@@ -1947,8 +1971,8 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
|
|
|
1947
1971
|
if (!layout) return;
|
|
1948
1972
|
if (animate) {
|
|
1949
1973
|
reactNative.Animated.parallel([
|
|
1950
|
-
reactNative.Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false,
|
|
1951
|
-
reactNative.Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false,
|
|
1974
|
+
reactNative.Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1 }),
|
|
1975
|
+
reactNative.Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, stiffness: 380, damping: 38, mass: 1 })
|
|
1952
1976
|
]).start();
|
|
1953
1977
|
} else {
|
|
1954
1978
|
pillX.setValue(layout.x);
|
|
@@ -2056,6 +2080,8 @@ var styles19 = reactNative.StyleSheet.create({
|
|
|
2056
2080
|
fontSize: ms(14)
|
|
2057
2081
|
}
|
|
2058
2082
|
});
|
|
2083
|
+
var easingExpand = Animated12.Easing.bezier(0.23, 1, 0.32, 1);
|
|
2084
|
+
var easingCollapse = Animated12.Easing.in(Animated12.Easing.ease);
|
|
2059
2085
|
function AccordionItemComponent({
|
|
2060
2086
|
item,
|
|
2061
2087
|
isOpen,
|
|
@@ -2063,28 +2089,28 @@ function AccordionItemComponent({
|
|
|
2063
2089
|
}) {
|
|
2064
2090
|
const { colors } = useTheme();
|
|
2065
2091
|
const resolvedIcon = item.iconName ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted) : item.icon;
|
|
2066
|
-
const isExpanded =
|
|
2067
|
-
const height =
|
|
2092
|
+
const isExpanded = Animated12.useSharedValue(isOpen);
|
|
2093
|
+
const height = Animated12.useSharedValue(0);
|
|
2068
2094
|
React26__default.default.useEffect(() => {
|
|
2069
2095
|
isExpanded.value = isOpen;
|
|
2070
2096
|
}, [isOpen]);
|
|
2071
|
-
const derivedHeight =
|
|
2072
|
-
() =>
|
|
2097
|
+
const derivedHeight = Animated12.useDerivedValue(
|
|
2098
|
+
() => Animated12.withTiming(height.value * Number(isExpanded.value), {
|
|
2073
2099
|
duration: 220,
|
|
2074
|
-
easing: isExpanded.value ?
|
|
2100
|
+
easing: isExpanded.value ? easingExpand : easingCollapse
|
|
2075
2101
|
})
|
|
2076
2102
|
);
|
|
2077
|
-
const derivedRotation =
|
|
2078
|
-
() =>
|
|
2103
|
+
const derivedRotation = Animated12.useDerivedValue(
|
|
2104
|
+
() => Animated12.withTiming(isExpanded.value ? 1 : 0, {
|
|
2079
2105
|
duration: 220,
|
|
2080
|
-
easing: isExpanded.value ?
|
|
2106
|
+
easing: isExpanded.value ? easingExpand : easingCollapse
|
|
2081
2107
|
})
|
|
2082
2108
|
);
|
|
2083
|
-
const bodyStyle =
|
|
2109
|
+
const bodyStyle = Animated12.useAnimatedStyle(() => ({
|
|
2084
2110
|
height: derivedHeight.value,
|
|
2085
2111
|
overflow: "hidden"
|
|
2086
2112
|
}));
|
|
2087
|
-
const rotationStyle =
|
|
2113
|
+
const rotationStyle = Animated12.useAnimatedStyle(() => ({
|
|
2088
2114
|
transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
|
|
2089
2115
|
}));
|
|
2090
2116
|
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles20.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
@@ -2097,8 +2123,8 @@ function AccordionItemComponent({
|
|
|
2097
2123
|
}
|
|
2098
2124
|
},
|
|
2099
2125
|
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles20.icon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
|
|
2100
|
-
/* @__PURE__ */ React26__default.default.createElement(
|
|
2101
|
-
), /* @__PURE__ */ React26__default.default.createElement(
|
|
2126
|
+
/* @__PURE__ */ React26__default.default.createElement(Animated12__default.default.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
|
|
2127
|
+
), /* @__PURE__ */ React26__default.default.createElement(Animated12__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2102
2128
|
reactNative.View,
|
|
2103
2129
|
{
|
|
2104
2130
|
style: styles20.content,
|
|
@@ -2241,29 +2267,41 @@ var styles21 = reactNative.StyleSheet.create({
|
|
|
2241
2267
|
opacity: 0.45
|
|
2242
2268
|
}
|
|
2243
2269
|
});
|
|
2270
|
+
var SCREEN_HEIGHT = reactNative.Dimensions.get("window").height;
|
|
2271
|
+
var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
|
|
2272
|
+
var isAndroid = reactNative.Platform.OS === "android";
|
|
2244
2273
|
function Sheet({
|
|
2245
2274
|
open,
|
|
2246
2275
|
onClose,
|
|
2247
2276
|
title,
|
|
2277
|
+
subtitle,
|
|
2248
2278
|
description,
|
|
2279
|
+
showCloseButton = false,
|
|
2249
2280
|
children,
|
|
2250
2281
|
style,
|
|
2282
|
+
contentStyle,
|
|
2251
2283
|
scrollable,
|
|
2252
2284
|
maxHeight,
|
|
2253
2285
|
keyboardBehavior,
|
|
2254
|
-
|
|
2286
|
+
keyboardBlurBehavior = "restore",
|
|
2287
|
+
enableBlurKeyboardOnGesture = true,
|
|
2288
|
+
android_keyboardInputMode = "adjustPan",
|
|
2289
|
+
footer,
|
|
2290
|
+
snapPoints
|
|
2255
2291
|
}) {
|
|
2256
2292
|
const { colors } = useTheme();
|
|
2293
|
+
const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
|
|
2257
2294
|
const ref = React26.useRef(null);
|
|
2295
|
+
const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
|
|
2258
2296
|
React26.useEffect(() => {
|
|
2259
2297
|
if (open) {
|
|
2260
|
-
|
|
2298
|
+
impactMedium();
|
|
2261
2299
|
ref.current?.present();
|
|
2262
2300
|
} else {
|
|
2263
2301
|
ref.current?.dismiss();
|
|
2264
2302
|
}
|
|
2265
2303
|
}, [open]);
|
|
2266
|
-
const renderBackdrop = (props) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2304
|
+
const renderBackdrop = React26.useCallback((props) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2267
2305
|
bottomSheet.BottomSheetBackdrop,
|
|
2268
2306
|
{
|
|
2269
2307
|
...props,
|
|
@@ -2271,26 +2309,60 @@ function Sheet({
|
|
|
2271
2309
|
appearsOnIndex: 0,
|
|
2272
2310
|
pressBehavior: "close"
|
|
2273
2311
|
}
|
|
2274
|
-
);
|
|
2275
|
-
const
|
|
2312
|
+
), []);
|
|
2313
|
+
const renderFooter = React26.useCallback((props) => {
|
|
2314
|
+
if (!footer) return null;
|
|
2315
|
+
return /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, footer);
|
|
2316
|
+
}, [footer]);
|
|
2317
|
+
const effectiveSubtitle = subtitle ?? description;
|
|
2318
|
+
const showHeader = !!(title || effectiveSubtitle || showCloseButton);
|
|
2319
|
+
const headerNode = showHeader ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.header }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.headerRow }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2320
|
+
reactNative.TouchableOpacity,
|
|
2321
|
+
{
|
|
2322
|
+
onPress: onClose,
|
|
2323
|
+
style: styles22.closeButton,
|
|
2324
|
+
activeOpacity: 0.6,
|
|
2325
|
+
touchSoundDisabled: true
|
|
2326
|
+
},
|
|
2327
|
+
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
|
|
2328
|
+
) : null), effectiveSubtitle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
|
|
2276
2329
|
const useScroll = scrollable || !!maxHeight;
|
|
2277
|
-
const
|
|
2278
|
-
|
|
2279
|
-
const behavior = keyboardBehavior ?? reactNative.Platform.select({ ios: "padding", android: "height" });
|
|
2280
|
-
return /* @__PURE__ */ React26__default.default.createElement(reactNative.KeyboardAvoidingView, { behavior, keyboardVerticalOffset: keyboardOffset }, node);
|
|
2281
|
-
};
|
|
2330
|
+
const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
|
|
2331
|
+
const useDynamicSizing = !snapPoints;
|
|
2282
2332
|
return /* @__PURE__ */ React26__default.default.createElement(
|
|
2283
2333
|
bottomSheet.BottomSheetModal,
|
|
2284
2334
|
{
|
|
2285
2335
|
ref,
|
|
2286
|
-
enableDynamicSizing:
|
|
2336
|
+
enableDynamicSizing: useDynamicSizing,
|
|
2337
|
+
snapPoints,
|
|
2338
|
+
maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
|
|
2287
2339
|
onDismiss: onClose,
|
|
2288
2340
|
backdropComponent: renderBackdrop,
|
|
2341
|
+
footerComponent: footer ? renderFooter : void 0,
|
|
2289
2342
|
backgroundStyle: [styles22.background, { backgroundColor: colors.card }],
|
|
2290
2343
|
handleIndicatorStyle: [styles22.handle, { backgroundColor: colors.border }],
|
|
2291
|
-
enablePanDownToClose: true
|
|
2344
|
+
enablePanDownToClose: true,
|
|
2345
|
+
topInset: insets.top,
|
|
2346
|
+
keyboardBehavior: effectiveKeyboardBehavior,
|
|
2347
|
+
keyboardBlurBehavior,
|
|
2348
|
+
android_keyboardInputMode,
|
|
2349
|
+
enableBlurKeyboardOnGesture
|
|
2292
2350
|
},
|
|
2293
|
-
|
|
2351
|
+
useScroll ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2352
|
+
bottomSheet.BottomSheetScrollView,
|
|
2353
|
+
{
|
|
2354
|
+
contentContainerStyle: [
|
|
2355
|
+
styles22.scrollContent,
|
|
2356
|
+
style
|
|
2357
|
+
],
|
|
2358
|
+
style: contentStyle,
|
|
2359
|
+
showsVerticalScrollIndicator: true,
|
|
2360
|
+
indicatorStyle: "black",
|
|
2361
|
+
persistentScrollbar: isAndroid
|
|
2362
|
+
},
|
|
2363
|
+
headerNode,
|
|
2364
|
+
children
|
|
2365
|
+
) : /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles22.content, contentStyle, style] }, headerNode, children)
|
|
2294
2366
|
);
|
|
2295
2367
|
}
|
|
2296
2368
|
var styles22 = reactNative.StyleSheet.create({
|
|
@@ -2303,26 +2375,43 @@ var styles22 = reactNative.StyleSheet.create({
|
|
|
2303
2375
|
height: vs(4),
|
|
2304
2376
|
borderRadius: ms(2)
|
|
2305
2377
|
},
|
|
2306
|
-
content: {
|
|
2307
|
-
paddingHorizontal: s(24),
|
|
2308
|
-
paddingBottom: vs(32)
|
|
2309
|
-
},
|
|
2310
2378
|
header: {
|
|
2311
|
-
|
|
2312
|
-
|
|
2379
|
+
paddingHorizontal: s(16),
|
|
2380
|
+
paddingTop: vs(4),
|
|
2381
|
+
paddingBottom: vs(12),
|
|
2382
|
+
gap: vs(4)
|
|
2383
|
+
},
|
|
2384
|
+
headerRow: {
|
|
2385
|
+
flexDirection: "row",
|
|
2386
|
+
alignItems: "center",
|
|
2387
|
+
justifyContent: "space-between"
|
|
2313
2388
|
},
|
|
2314
2389
|
title: {
|
|
2315
2390
|
fontFamily: "Poppins-SemiBold",
|
|
2316
|
-
fontSize: ms(18)
|
|
2391
|
+
fontSize: ms(18),
|
|
2392
|
+
flex: 1
|
|
2317
2393
|
},
|
|
2318
|
-
|
|
2394
|
+
subtitle: {
|
|
2319
2395
|
fontFamily: "Poppins-Regular",
|
|
2320
2396
|
fontSize: ms(14),
|
|
2321
2397
|
lineHeight: mvs(20)
|
|
2398
|
+
},
|
|
2399
|
+
closeButton: {
|
|
2400
|
+
padding: s(4),
|
|
2401
|
+
marginLeft: s(8)
|
|
2402
|
+
},
|
|
2403
|
+
content: {
|
|
2404
|
+
paddingHorizontal: s(16),
|
|
2405
|
+
paddingBottom: vs(32)
|
|
2406
|
+
},
|
|
2407
|
+
scrollContent: {
|
|
2408
|
+
paddingHorizontal: s(16),
|
|
2409
|
+
paddingBottom: vs(32),
|
|
2410
|
+
paddingRight: s(16)
|
|
2322
2411
|
}
|
|
2323
2412
|
});
|
|
2324
2413
|
var isIOS = reactNative.Platform.OS === "ios";
|
|
2325
|
-
var
|
|
2414
|
+
var isAndroid2 = reactNative.Platform.OS === "android";
|
|
2326
2415
|
var isWeb2 = reactNative.Platform.OS === "web";
|
|
2327
2416
|
var nativeDriver9 = reactNative.Platform.OS !== "web";
|
|
2328
2417
|
function Select({
|
|
@@ -2354,7 +2443,7 @@ function Select({
|
|
|
2354
2443
|
if (isIOS) {
|
|
2355
2444
|
setPendingValue(value);
|
|
2356
2445
|
setPickerVisible(true);
|
|
2357
|
-
} else if (
|
|
2446
|
+
} else if (isAndroid2) {
|
|
2358
2447
|
pickerRef.current?.focus();
|
|
2359
2448
|
}
|
|
2360
2449
|
};
|
|
@@ -2396,7 +2485,7 @@ function Select({
|
|
|
2396
2485
|
},
|
|
2397
2486
|
selected?.label ?? placeholder
|
|
2398
2487
|
),
|
|
2399
|
-
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-
|
|
2488
|
+
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 20, color: colors.foregroundMuted })
|
|
2400
2489
|
)) : null, isIOS ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2401
2490
|
reactNative.Modal,
|
|
2402
2491
|
{
|
|
@@ -2425,7 +2514,7 @@ function Select({
|
|
|
2425
2514
|
}
|
|
2426
2515
|
))
|
|
2427
2516
|
))
|
|
2428
|
-
) : null,
|
|
2517
|
+
) : null, isAndroid2 ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2429
2518
|
picker.Picker,
|
|
2430
2519
|
{
|
|
2431
2520
|
ref: pickerRef,
|
|
@@ -2553,172 +2642,46 @@ var styles23 = reactNative.StyleSheet.create({
|
|
|
2553
2642
|
fontSize: ms(15)
|
|
2554
2643
|
}
|
|
2555
2644
|
});
|
|
2556
|
-
var ToastContext = React26.createContext({
|
|
2557
|
-
toast: () => {
|
|
2558
|
-
},
|
|
2559
|
-
dismiss: () => {
|
|
2560
|
-
}
|
|
2561
|
-
});
|
|
2562
2645
|
function useToast() {
|
|
2563
|
-
return
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
function ToastNotification({ item, onDismiss }) {
|
|
2568
|
-
const { colors } = useTheme();
|
|
2569
|
-
const translateY = Animated11.useSharedValue(-80);
|
|
2570
|
-
const translateX = Animated11.useSharedValue(0);
|
|
2571
|
-
const opacity = Animated11.useSharedValue(0);
|
|
2572
|
-
React26.useEffect(() => {
|
|
2573
|
-
translateY.value = Animated11.withTiming(0, { duration: 120, easing: Animated11.Easing.out(Animated11.Easing.exp) });
|
|
2574
|
-
opacity.value = Animated11.withTiming(1, { duration: 100 });
|
|
2575
|
-
const timer = setTimeout(() => {
|
|
2576
|
-
translateY.value = Animated11.withTiming(-80, { duration: 200 });
|
|
2577
|
-
opacity.value = Animated11.withTiming(0, { duration: 200 }, (done) => {
|
|
2578
|
-
if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
|
|
2579
|
-
});
|
|
2580
|
-
}, item.duration ?? 3e3);
|
|
2581
|
-
return () => clearTimeout(timer);
|
|
2582
|
-
}, []);
|
|
2583
|
-
const panGesture = reactNativeGestureHandler.Gesture.Pan().onUpdate((e) => {
|
|
2584
|
-
translateX.value = e.translationX;
|
|
2585
|
-
}).onEnd((e) => {
|
|
2586
|
-
const shouldDismiss = Math.abs(translateX.value) > SWIPE_THRESHOLD || Math.abs(e.velocityX) > VELOCITY_THRESHOLD;
|
|
2587
|
-
if (shouldDismiss) {
|
|
2588
|
-
const direction = translateX.value > 0 ? 1 : -1;
|
|
2589
|
-
translateX.value = Animated11.withTiming(direction * 500, { duration: 200 }, (done) => {
|
|
2590
|
-
if (done) reactNativeWorklets.scheduleOnRN(onDismiss);
|
|
2591
|
-
});
|
|
2592
|
-
opacity.value = Animated11.withTiming(0, { duration: 150 });
|
|
2593
|
-
} else {
|
|
2594
|
-
translateX.value = Animated11.withSpring(0, { damping: 20, stiffness: 300 });
|
|
2595
|
-
}
|
|
2596
|
-
});
|
|
2597
|
-
const animatedStyle = Animated11.useAnimatedStyle(() => ({
|
|
2598
|
-
opacity: opacity.value,
|
|
2599
|
-
transform: [{ translateY: translateY.value }, { translateX: translateX.value }]
|
|
2600
|
-
}));
|
|
2601
|
-
const variant = item.variant ?? "default";
|
|
2602
|
-
const bgColor = {
|
|
2603
|
-
default: colors.card,
|
|
2604
|
-
destructive: colors.destructiveTint,
|
|
2605
|
-
success: colors.successTint,
|
|
2606
|
-
warning: colors.warningTint
|
|
2607
|
-
}[variant];
|
|
2608
|
-
const borderColor = {
|
|
2609
|
-
default: colors.border,
|
|
2610
|
-
destructive: colors.destructiveBorder,
|
|
2611
|
-
success: colors.successBorder,
|
|
2612
|
-
warning: colors.warningBorder
|
|
2613
|
-
}[variant];
|
|
2614
|
-
const accentColor = {
|
|
2615
|
-
default: colors.primary,
|
|
2616
|
-
destructive: colors.destructive,
|
|
2617
|
-
success: colors.success,
|
|
2618
|
-
warning: colors.warning
|
|
2619
|
-
}[variant];
|
|
2620
|
-
const titleColor = variant === "default" ? colors.foreground : accentColor;
|
|
2621
|
-
const descColor = variant === "default" ? colors.foregroundMuted : accentColor;
|
|
2622
|
-
const defaultIcon = variant === "success" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: 16, color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: "exclamation-circle", size: 16, color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.MaterialIcons, { name: "warning-amber", size: 17, color: accentColor }) : /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "info-with-circle", size: 16, color: accentColor });
|
|
2623
|
-
const leftIcon = item.iconName ? renderIcon(item.iconName, 16, item.iconColor ?? accentColor) : item.icon ?? defaultIcon;
|
|
2624
|
-
return /* @__PURE__ */ React26__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React26__default.default.createElement(Animated11__default.default.View, { style: [styles24.toast, { backgroundColor: bgColor, borderColor }, animatedStyle] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles24.leftIconContainer }, leftIcon), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles24.toastContent }, item.title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles24.toastTitle, { color: titleColor }], allowFontScaling: true }, item.title) : null, item.description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles24.toastDescription, { color: descColor }], allowFontScaling: true }, item.description) : null), item.action && /* @__PURE__ */ React26__default.default.createElement(
|
|
2625
|
-
reactNative.TouchableOpacity,
|
|
2626
|
-
{
|
|
2627
|
-
onPress: () => {
|
|
2628
|
-
item.action.onPress();
|
|
2629
|
-
onDismiss();
|
|
2630
|
-
},
|
|
2631
|
-
style: styles24.actionButton,
|
|
2632
|
-
touchSoundDisabled: true
|
|
2633
|
-
},
|
|
2634
|
-
/* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles24.actionLabel, { color: accentColor }], allowFontScaling: true }, item.action.label)
|
|
2635
|
-
), /* @__PURE__ */ React26__default.default.createElement(reactNative.TouchableOpacity, { onPress: onDismiss, style: styles24.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.AntDesign, { name: "close-circle", size: 16, color: descColor }))));
|
|
2646
|
+
return {
|
|
2647
|
+
toast: sonnerNative.toast,
|
|
2648
|
+
dismiss: sonnerNative.toast.dismiss
|
|
2649
|
+
};
|
|
2636
2650
|
}
|
|
2637
2651
|
function ToastProvider({ children }) {
|
|
2638
|
-
const
|
|
2652
|
+
const { colorScheme } = useTheme();
|
|
2639
2653
|
const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2654
|
+
return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, children, /* @__PURE__ */ React26__default.default.createElement(
|
|
2655
|
+
sonnerNative.Toaster,
|
|
2656
|
+
{
|
|
2657
|
+
theme: colorScheme,
|
|
2658
|
+
position: "top-center",
|
|
2659
|
+
richColors: false,
|
|
2660
|
+
gap: vs(8),
|
|
2661
|
+
offset: insets.top + vs(8),
|
|
2662
|
+
visibleToasts: 3,
|
|
2663
|
+
closeButton: false,
|
|
2664
|
+
swipeToDismissDirection: "up",
|
|
2665
|
+
duration: 4e3,
|
|
2666
|
+
toastOptions: {
|
|
2667
|
+
style: {
|
|
2668
|
+
borderRadius: ms(12),
|
|
2669
|
+
paddingHorizontal: s(12),
|
|
2670
|
+
paddingVertical: vs(10)
|
|
2671
|
+
},
|
|
2672
|
+
titleStyle: {
|
|
2673
|
+
fontFamily: "Poppins-Medium",
|
|
2674
|
+
fontSize: ms(13)
|
|
2675
|
+
},
|
|
2676
|
+
descriptionStyle: {
|
|
2677
|
+
fontFamily: "Poppins-Regular",
|
|
2678
|
+
fontSize: ms(12),
|
|
2679
|
+
opacity: 0.85
|
|
2680
|
+
}
|
|
2681
|
+
}
|
|
2650
2682
|
}
|
|
2651
|
-
|
|
2652
|
-
}, []);
|
|
2653
|
-
const dismiss = React26.useCallback((id) => {
|
|
2654
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
2655
|
-
}, []);
|
|
2656
|
-
return /* @__PURE__ */ React26__default.default.createElement(ToastContext.Provider, { value: { toast, dismiss } }, children, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles24.container, reactNative.Platform.OS === "web" && styles24.containerWeb, { top: insets.top + 8 }], pointerEvents: "box-none" }, toasts.map((item) => /* @__PURE__ */ React26__default.default.createElement(ToastNotification, { key: item.id, item, onDismiss: () => dismiss(item.id) }))));
|
|
2683
|
+
));
|
|
2657
2684
|
}
|
|
2658
|
-
var styles24 = reactNative.StyleSheet.create({
|
|
2659
|
-
container: {
|
|
2660
|
-
position: "absolute",
|
|
2661
|
-
left: s(16),
|
|
2662
|
-
right: s(16),
|
|
2663
|
-
gap: vs(8),
|
|
2664
|
-
zIndex: 9999
|
|
2665
|
-
},
|
|
2666
|
-
containerWeb: {
|
|
2667
|
-
left: void 0,
|
|
2668
|
-
right: void 0,
|
|
2669
|
-
alignSelf: "center",
|
|
2670
|
-
width: s(400)
|
|
2671
|
-
},
|
|
2672
|
-
toast: {
|
|
2673
|
-
flexDirection: "row",
|
|
2674
|
-
alignItems: "flex-start",
|
|
2675
|
-
borderRadius: ms(10),
|
|
2676
|
-
borderWidth: 0.5,
|
|
2677
|
-
paddingHorizontal: s(12),
|
|
2678
|
-
paddingVertical: vs(10),
|
|
2679
|
-
shadowColor: "#000",
|
|
2680
|
-
shadowOffset: { width: 0, height: 2 },
|
|
2681
|
-
shadowOpacity: 0.06,
|
|
2682
|
-
shadowRadius: 4,
|
|
2683
|
-
elevation: 3
|
|
2684
|
-
},
|
|
2685
|
-
toastContent: {
|
|
2686
|
-
flex: 1,
|
|
2687
|
-
gap: vs(2)
|
|
2688
|
-
},
|
|
2689
|
-
leftIconContainer: {
|
|
2690
|
-
marginTop: vs(1),
|
|
2691
|
-
alignItems: "center",
|
|
2692
|
-
justifyContent: "center",
|
|
2693
|
-
marginRight: s(10)
|
|
2694
|
-
},
|
|
2695
|
-
toastTitle: {
|
|
2696
|
-
fontFamily: "Poppins-Medium",
|
|
2697
|
-
fontSize: ms(13),
|
|
2698
|
-
lineHeight: ms(18)
|
|
2699
|
-
},
|
|
2700
|
-
toastDescription: {
|
|
2701
|
-
fontFamily: "Poppins-Regular",
|
|
2702
|
-
fontSize: ms(12),
|
|
2703
|
-
lineHeight: ms(17),
|
|
2704
|
-
opacity: 0.85
|
|
2705
|
-
},
|
|
2706
|
-
actionButton: {
|
|
2707
|
-
paddingHorizontal: s(8),
|
|
2708
|
-
paddingVertical: vs(4),
|
|
2709
|
-
marginLeft: s(4)
|
|
2710
|
-
},
|
|
2711
|
-
actionLabel: {
|
|
2712
|
-
fontFamily: "Poppins-Medium",
|
|
2713
|
-
fontSize: ms(12),
|
|
2714
|
-
textDecorationLine: "underline"
|
|
2715
|
-
},
|
|
2716
|
-
dismissButton: {
|
|
2717
|
-
padding: s(6),
|
|
2718
|
-
marginLeft: s(2),
|
|
2719
|
-
marginTop: vs(0)
|
|
2720
|
-
}
|
|
2721
|
-
});
|
|
2722
2685
|
function formatCurrency(raw, separator) {
|
|
2723
2686
|
const digits = raw.replace(/\D/g, "");
|
|
2724
2687
|
if (!digits) return "";
|
|
@@ -2776,6 +2739,12 @@ var variantFontSize = {
|
|
|
2776
2739
|
medium: ms(18),
|
|
2777
2740
|
small: ms(14)
|
|
2778
2741
|
};
|
|
2742
|
+
var variantLetterSpacing = {
|
|
2743
|
+
hero: -2,
|
|
2744
|
+
large: -1,
|
|
2745
|
+
medium: -0.5,
|
|
2746
|
+
small: 0
|
|
2747
|
+
};
|
|
2779
2748
|
function formatValue(value, prefix, showDecimals) {
|
|
2780
2749
|
const num = typeof value === "string" ? parseFloat(value.replace(/[^0-9.-]/g, "")) : value;
|
|
2781
2750
|
if (isNaN(num)) return `${prefix}0`;
|
|
@@ -2793,10 +2762,11 @@ function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor,
|
|
|
2793
2762
|
const formatted = formatValue(value, prefix, showDecimals);
|
|
2794
2763
|
const baseFontSize = variant ? variantFontSize[variant] : ms(56);
|
|
2795
2764
|
const fontSize = maxFontSize ?? baseFontSize;
|
|
2796
|
-
|
|
2765
|
+
const letterSpacing = variant ? variantLetterSpacing[variant] : -2;
|
|
2766
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles24.container, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2797
2767
|
reactNative.Text,
|
|
2798
2768
|
{
|
|
2799
|
-
style: [
|
|
2769
|
+
style: [styles24.amount, { color: textColor ?? colors.foreground, fontSize, letterSpacing }],
|
|
2800
2770
|
allowFontScaling: true,
|
|
2801
2771
|
numberOfLines: autoScale ? 1 : void 0,
|
|
2802
2772
|
adjustsFontSizeToFit: autoScale,
|
|
@@ -2805,11 +2775,14 @@ function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor,
|
|
|
2805
2775
|
formatted
|
|
2806
2776
|
));
|
|
2807
2777
|
}
|
|
2808
|
-
var
|
|
2809
|
-
container: {
|
|
2778
|
+
var styles24 = reactNative.StyleSheet.create({
|
|
2779
|
+
container: {
|
|
2780
|
+
alignSelf: "flex-start"
|
|
2781
|
+
},
|
|
2810
2782
|
amount: {
|
|
2811
2783
|
fontFamily: "Poppins-Bold",
|
|
2812
|
-
|
|
2784
|
+
includeFontPadding: false,
|
|
2785
|
+
textAlignVertical: "top"
|
|
2813
2786
|
}
|
|
2814
2787
|
});
|
|
2815
2788
|
var nativeDriver10 = reactNative.Platform.OS !== "web";
|
|
@@ -2842,16 +2815,18 @@ function ListItem({
|
|
|
2842
2815
|
reactNative.Animated.spring(scale2, {
|
|
2843
2816
|
toValue: 0.97,
|
|
2844
2817
|
useNativeDriver: nativeDriver10,
|
|
2845
|
-
|
|
2846
|
-
|
|
2818
|
+
stiffness: 350,
|
|
2819
|
+
damping: 28,
|
|
2820
|
+
mass: 0.9
|
|
2847
2821
|
}).start();
|
|
2848
2822
|
};
|
|
2849
2823
|
const handlePressOut = () => {
|
|
2850
2824
|
reactNative.Animated.spring(scale2, {
|
|
2851
2825
|
toValue: 1,
|
|
2852
2826
|
useNativeDriver: nativeDriver10,
|
|
2853
|
-
|
|
2854
|
-
|
|
2827
|
+
stiffness: 220,
|
|
2828
|
+
damping: 20,
|
|
2829
|
+
mass: 0.9
|
|
2855
2830
|
}).start();
|
|
2856
2831
|
};
|
|
2857
2832
|
const handlePress = () => {
|
|
@@ -2862,7 +2837,7 @@ function ListItem({
|
|
|
2862
2837
|
const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
|
|
2863
2838
|
const cardStyle = variant === "card" ? {
|
|
2864
2839
|
backgroundColor: colors.card,
|
|
2865
|
-
borderRadius:
|
|
2840
|
+
borderRadius: RADIUS.md,
|
|
2866
2841
|
borderWidth: 1,
|
|
2867
2842
|
borderColor: colors.border,
|
|
2868
2843
|
shadowColor: "#000",
|
|
@@ -2871,10 +2846,10 @@ function ListItem({
|
|
|
2871
2846
|
shadowRadius: 6,
|
|
2872
2847
|
elevation: 2
|
|
2873
2848
|
} : {};
|
|
2874
|
-
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled &&
|
|
2849
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles25.disabled] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2875
2850
|
reactNative.TouchableOpacity,
|
|
2876
2851
|
{
|
|
2877
|
-
style: [
|
|
2852
|
+
style: [styles25.container, cardStyle, style],
|
|
2878
2853
|
onPress: onPress ? handlePress : void 0,
|
|
2879
2854
|
onPressIn: handlePressIn,
|
|
2880
2855
|
onPressOut: handlePressOut,
|
|
@@ -2882,11 +2857,11 @@ function ListItem({
|
|
|
2882
2857
|
activeOpacity: 1,
|
|
2883
2858
|
touchSoundDisabled: true
|
|
2884
2859
|
},
|
|
2885
|
-
effectiveLeft ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style:
|
|
2886
|
-
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style:
|
|
2860
|
+
effectiveLeft ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles25.leftContainer }, effectiveLeft) : null,
|
|
2861
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles25.content }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2887
2862
|
reactNative.Text,
|
|
2888
2863
|
{
|
|
2889
|
-
style: [
|
|
2864
|
+
style: [styles25.title, { color: colors.foreground }, titleStyle],
|
|
2890
2865
|
numberOfLines: 2,
|
|
2891
2866
|
allowFontScaling: true
|
|
2892
2867
|
},
|
|
@@ -2894,7 +2869,7 @@ function ListItem({
|
|
|
2894
2869
|
), subtitle ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2895
2870
|
reactNative.Text,
|
|
2896
2871
|
{
|
|
2897
|
-
style: [
|
|
2872
|
+
style: [styles25.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
|
|
2898
2873
|
numberOfLines: 2,
|
|
2899
2874
|
allowFontScaling: true
|
|
2900
2875
|
},
|
|
@@ -2902,16 +2877,16 @@ function ListItem({
|
|
|
2902
2877
|
) : null, caption ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2903
2878
|
reactNative.Text,
|
|
2904
2879
|
{
|
|
2905
|
-
style: [
|
|
2880
|
+
style: [styles25.caption, { color: colors.foregroundMuted }, captionStyle],
|
|
2906
2881
|
numberOfLines: 1,
|
|
2907
2882
|
allowFontScaling: true
|
|
2908
2883
|
},
|
|
2909
2884
|
caption
|
|
2910
2885
|
) : null),
|
|
2911
|
-
effectiveRight !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style:
|
|
2886
|
+
effectiveRight !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles25.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2912
2887
|
reactNative.Text,
|
|
2913
2888
|
{
|
|
2914
|
-
style: [
|
|
2889
|
+
style: [styles25.rightText, { color: colors.foregroundMuted }],
|
|
2915
2890
|
allowFontScaling: true
|
|
2916
2891
|
},
|
|
2917
2892
|
effectiveRight
|
|
@@ -2920,17 +2895,20 @@ function ListItem({
|
|
|
2920
2895
|
reactNative.View,
|
|
2921
2896
|
{
|
|
2922
2897
|
style: [
|
|
2923
|
-
|
|
2924
|
-
{
|
|
2898
|
+
styles25.separator,
|
|
2899
|
+
{
|
|
2900
|
+
backgroundColor: colors.border,
|
|
2901
|
+
marginLeft: effectiveLeft ? s(44) + s(12) : 0
|
|
2902
|
+
}
|
|
2925
2903
|
]
|
|
2926
2904
|
}
|
|
2927
2905
|
) : null);
|
|
2928
2906
|
}
|
|
2929
|
-
var
|
|
2907
|
+
var styles25 = reactNative.StyleSheet.create({
|
|
2930
2908
|
container: {
|
|
2931
2909
|
flexDirection: "row",
|
|
2932
2910
|
alignItems: "center",
|
|
2933
|
-
paddingHorizontal:
|
|
2911
|
+
paddingHorizontal: 0,
|
|
2934
2912
|
paddingVertical: vs(10),
|
|
2935
2913
|
gap: s(12)
|
|
2936
2914
|
},
|
|
@@ -2976,13 +2954,143 @@ var styles26 = reactNative.StyleSheet.create({
|
|
|
2976
2954
|
},
|
|
2977
2955
|
separator: {
|
|
2978
2956
|
height: reactNative.StyleSheet.hairlineWidth,
|
|
2979
|
-
marginRight:
|
|
2957
|
+
marginRight: 0
|
|
2980
2958
|
},
|
|
2981
2959
|
disabled: {
|
|
2982
2960
|
opacity: 0.45
|
|
2983
2961
|
}
|
|
2984
2962
|
});
|
|
2985
2963
|
var nativeDriver11 = reactNative.Platform.OS !== "web";
|
|
2964
|
+
function MenuItem({
|
|
2965
|
+
label,
|
|
2966
|
+
iconName,
|
|
2967
|
+
icon,
|
|
2968
|
+
iconColor,
|
|
2969
|
+
rightRender,
|
|
2970
|
+
showChevron = true,
|
|
2971
|
+
onPress,
|
|
2972
|
+
disabled = false,
|
|
2973
|
+
variant = "plain",
|
|
2974
|
+
showSeparator = false,
|
|
2975
|
+
style,
|
|
2976
|
+
labelStyle
|
|
2977
|
+
}) {
|
|
2978
|
+
const { colors } = useTheme();
|
|
2979
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
2980
|
+
const handlePressIn = () => {
|
|
2981
|
+
if (disabled) return;
|
|
2982
|
+
reactNative.Animated.spring(scale2, {
|
|
2983
|
+
toValue: 0.97,
|
|
2984
|
+
useNativeDriver: nativeDriver11,
|
|
2985
|
+
stiffness: 350,
|
|
2986
|
+
damping: 28,
|
|
2987
|
+
mass: 0.9
|
|
2988
|
+
}).start();
|
|
2989
|
+
};
|
|
2990
|
+
const handlePressOut = () => {
|
|
2991
|
+
reactNative.Animated.spring(scale2, {
|
|
2992
|
+
toValue: 1,
|
|
2993
|
+
useNativeDriver: nativeDriver11,
|
|
2994
|
+
stiffness: 220,
|
|
2995
|
+
damping: 20,
|
|
2996
|
+
mass: 0.9
|
|
2997
|
+
}).start();
|
|
2998
|
+
};
|
|
2999
|
+
const handlePress = () => {
|
|
3000
|
+
selectionAsync();
|
|
3001
|
+
onPress();
|
|
3002
|
+
};
|
|
3003
|
+
const resolvedIcon = iconName ? renderIcon(iconName, 22, iconColor ?? colors.foreground) : icon;
|
|
3004
|
+
const cardStyle = variant === "card" ? {
|
|
3005
|
+
backgroundColor: colors.card,
|
|
3006
|
+
borderRadius: RADIUS.md,
|
|
3007
|
+
borderWidth: 1,
|
|
3008
|
+
borderColor: colors.border,
|
|
3009
|
+
shadowColor: "#000",
|
|
3010
|
+
shadowOffset: { width: 0, height: 2 },
|
|
3011
|
+
shadowOpacity: 0.06,
|
|
3012
|
+
shadowRadius: 6,
|
|
3013
|
+
elevation: 2
|
|
3014
|
+
} : {};
|
|
3015
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles26.disabled] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3016
|
+
reactNative.TouchableOpacity,
|
|
3017
|
+
{
|
|
3018
|
+
style: [styles26.container, cardStyle, style],
|
|
3019
|
+
onPress: handlePress,
|
|
3020
|
+
onPressIn: handlePressIn,
|
|
3021
|
+
onPressOut: handlePressOut,
|
|
3022
|
+
disabled,
|
|
3023
|
+
activeOpacity: 1,
|
|
3024
|
+
touchSoundDisabled: true
|
|
3025
|
+
},
|
|
3026
|
+
resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.iconContainer }, resolvedIcon) : null,
|
|
3027
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
3028
|
+
reactNative.Text,
|
|
3029
|
+
{
|
|
3030
|
+
style: [styles26.label, { color: colors.foreground }, labelStyle],
|
|
3031
|
+
numberOfLines: 1,
|
|
3032
|
+
allowFontScaling: true
|
|
3033
|
+
},
|
|
3034
|
+
label
|
|
3035
|
+
),
|
|
3036
|
+
rightRender !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(
|
|
3037
|
+
reactNative.View,
|
|
3038
|
+
{
|
|
3039
|
+
style: styles26.rightContainer,
|
|
3040
|
+
onStartShouldSetResponder: () => true,
|
|
3041
|
+
onResponderRelease: () => {
|
|
3042
|
+
}
|
|
3043
|
+
},
|
|
3044
|
+
rightRender
|
|
3045
|
+
) : showChevron ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 18, color: colors.foregroundMuted }) : null
|
|
3046
|
+
), showSeparator ? /* @__PURE__ */ React26__default.default.createElement(
|
|
3047
|
+
reactNative.View,
|
|
3048
|
+
{
|
|
3049
|
+
style: [
|
|
3050
|
+
styles26.separator,
|
|
3051
|
+
{
|
|
3052
|
+
backgroundColor: colors.border,
|
|
3053
|
+
marginLeft: resolvedIcon ? s(22) + s(12) : 0,
|
|
3054
|
+
opacity: 0.6
|
|
3055
|
+
}
|
|
3056
|
+
]
|
|
3057
|
+
}
|
|
3058
|
+
) : null);
|
|
3059
|
+
}
|
|
3060
|
+
var styles26 = reactNative.StyleSheet.create({
|
|
3061
|
+
container: {
|
|
3062
|
+
flexDirection: "row",
|
|
3063
|
+
alignItems: "center",
|
|
3064
|
+
paddingHorizontal: 0,
|
|
3065
|
+
paddingVertical: vs(16),
|
|
3066
|
+
minHeight: vs(54),
|
|
3067
|
+
gap: s(12)
|
|
3068
|
+
},
|
|
3069
|
+
iconContainer: {
|
|
3070
|
+
width: s(22),
|
|
3071
|
+
alignItems: "center",
|
|
3072
|
+
justifyContent: "center",
|
|
3073
|
+
flexShrink: 0
|
|
3074
|
+
},
|
|
3075
|
+
label: {
|
|
3076
|
+
fontFamily: "Poppins-Medium",
|
|
3077
|
+
fontSize: ms(15),
|
|
3078
|
+
flex: 1
|
|
3079
|
+
},
|
|
3080
|
+
rightContainer: {
|
|
3081
|
+
alignItems: "flex-end",
|
|
3082
|
+
justifyContent: "center",
|
|
3083
|
+
flexShrink: 0
|
|
3084
|
+
},
|
|
3085
|
+
separator: {
|
|
3086
|
+
height: reactNative.StyleSheet.hairlineWidth,
|
|
3087
|
+
marginRight: 0
|
|
3088
|
+
},
|
|
3089
|
+
disabled: {
|
|
3090
|
+
opacity: 0.45
|
|
3091
|
+
}
|
|
3092
|
+
});
|
|
3093
|
+
var nativeDriver12 = reactNative.Platform.OS !== "web";
|
|
2986
3094
|
function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
2987
3095
|
const { colors } = useTheme();
|
|
2988
3096
|
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
@@ -2998,7 +3106,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
|
2998
3106
|
const handlePressIn = () => {
|
|
2999
3107
|
reactNative.Animated.spring(scale2, {
|
|
3000
3108
|
toValue: 0.95,
|
|
3001
|
-
useNativeDriver:
|
|
3109
|
+
useNativeDriver: nativeDriver12,
|
|
3002
3110
|
speed: 40,
|
|
3003
3111
|
bounciness: 0
|
|
3004
3112
|
}).start();
|
|
@@ -3006,7 +3114,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
|
3006
3114
|
const handlePressOut = () => {
|
|
3007
3115
|
reactNative.Animated.spring(scale2, {
|
|
3008
3116
|
toValue: 1,
|
|
3009
|
-
useNativeDriver:
|
|
3117
|
+
useNativeDriver: nativeDriver12,
|
|
3010
3118
|
speed: 40,
|
|
3011
3119
|
bounciness: 4
|
|
3012
3120
|
}).start();
|
|
@@ -3115,7 +3223,7 @@ function ConfirmDialog({
|
|
|
3115
3223
|
const ref = React26.useRef(null);
|
|
3116
3224
|
React26.useEffect(() => {
|
|
3117
3225
|
if (visible) {
|
|
3118
|
-
|
|
3226
|
+
impactMedium();
|
|
3119
3227
|
ref.current?.present();
|
|
3120
3228
|
} else {
|
|
3121
3229
|
ref.current?.dismiss();
|
|
@@ -3147,7 +3255,10 @@ function ConfirmDialog({
|
|
|
3147
3255
|
label: confirmLabel,
|
|
3148
3256
|
variant: confirmVariant,
|
|
3149
3257
|
fullWidth: true,
|
|
3150
|
-
onPress:
|
|
3258
|
+
onPress: () => {
|
|
3259
|
+
notificationSuccess();
|
|
3260
|
+
onConfirm();
|
|
3261
|
+
},
|
|
3151
3262
|
icon: /* @__PURE__ */ React26__default.default.createElement(
|
|
3152
3263
|
vectorIcons.Feather,
|
|
3153
3264
|
{
|
|
@@ -3163,7 +3274,10 @@ function ConfirmDialog({
|
|
|
3163
3274
|
label: cancelLabel,
|
|
3164
3275
|
variant: "secondary",
|
|
3165
3276
|
fullWidth: true,
|
|
3166
|
-
onPress:
|
|
3277
|
+
onPress: () => {
|
|
3278
|
+
selectionAsync();
|
|
3279
|
+
onCancel();
|
|
3280
|
+
},
|
|
3167
3281
|
icon: /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Feather, { name: "x", size: 15, color: colors.foreground })
|
|
3168
3282
|
}
|
|
3169
3283
|
)))
|
|
@@ -3312,7 +3426,7 @@ function useHover() {
|
|
|
3312
3426
|
}
|
|
3313
3427
|
|
|
3314
3428
|
// src/components/MediaCard/MediaCard.tsx
|
|
3315
|
-
var
|
|
3429
|
+
var nativeDriver13 = reactNative.Platform.OS !== "web";
|
|
3316
3430
|
var aspectRatioMap = {
|
|
3317
3431
|
"1:1": 1,
|
|
3318
3432
|
"4:3": 3 / 4,
|
|
@@ -3341,11 +3455,11 @@ function MediaCard({
|
|
|
3341
3455
|
const { hovered, hoverHandlers } = useHover();
|
|
3342
3456
|
const handlePressIn = () => {
|
|
3343
3457
|
if (!onPress) return;
|
|
3344
|
-
reactNative.Animated.spring(scale2, { toValue: 0.98, useNativeDriver:
|
|
3458
|
+
reactNative.Animated.spring(scale2, { toValue: 0.98, useNativeDriver: nativeDriver13, speed: 40, bounciness: 0 }).start();
|
|
3345
3459
|
};
|
|
3346
3460
|
const handlePressOut = () => {
|
|
3347
3461
|
if (!onPress) return;
|
|
3348
|
-
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver:
|
|
3462
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver13, speed: 40, bounciness: 4 }).start();
|
|
3349
3463
|
};
|
|
3350
3464
|
const handlePress = () => {
|
|
3351
3465
|
if (!onPress) return;
|
|
@@ -3441,6 +3555,7 @@ var styles31 = reactNative.StyleSheet.create({
|
|
|
3441
3555
|
},
|
|
3442
3556
|
meta: {
|
|
3443
3557
|
paddingTop: vs(8),
|
|
3558
|
+
paddingBottom: vs(4),
|
|
3444
3559
|
gap: vs(2)
|
|
3445
3560
|
},
|
|
3446
3561
|
title: {
|
|
@@ -3459,7 +3574,7 @@ var styles31 = reactNative.StyleSheet.create({
|
|
|
3459
3574
|
lineHeight: mvs(16)
|
|
3460
3575
|
}
|
|
3461
3576
|
});
|
|
3462
|
-
var
|
|
3577
|
+
var nativeDriver14 = reactNative.Platform.OS !== "web";
|
|
3463
3578
|
function CategoryChip({
|
|
3464
3579
|
item,
|
|
3465
3580
|
selected,
|
|
@@ -3468,10 +3583,10 @@ function CategoryChip({
|
|
|
3468
3583
|
const { colors } = useTheme();
|
|
3469
3584
|
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
3470
3585
|
const handlePressIn = () => {
|
|
3471
|
-
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver:
|
|
3586
|
+
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver14, speed: 40, bounciness: 0 }).start();
|
|
3472
3587
|
};
|
|
3473
3588
|
const handlePressOut = () => {
|
|
3474
|
-
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver:
|
|
3589
|
+
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver14, speed: 40, bounciness: 4 }).start();
|
|
3475
3590
|
};
|
|
3476
3591
|
const bgColor = selected ? colors.primary : colors.surface;
|
|
3477
3592
|
const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
|
|
@@ -3576,7 +3691,7 @@ var styles32 = reactNative.StyleSheet.create({
|
|
|
3576
3691
|
lineHeight: 14
|
|
3577
3692
|
}
|
|
3578
3693
|
});
|
|
3579
|
-
var
|
|
3694
|
+
var nativeDriver15 = reactNative.Platform.OS !== "web";
|
|
3580
3695
|
function Pressable2({
|
|
3581
3696
|
children,
|
|
3582
3697
|
onPress,
|
|
@@ -3594,7 +3709,7 @@ function Pressable2({
|
|
|
3594
3709
|
if (disabled) return;
|
|
3595
3710
|
reactNative.Animated.spring(scale2, {
|
|
3596
3711
|
toValue: pressScale,
|
|
3597
|
-
useNativeDriver:
|
|
3712
|
+
useNativeDriver: nativeDriver15,
|
|
3598
3713
|
speed: 40,
|
|
3599
3714
|
bounciness: 0
|
|
3600
3715
|
}).start();
|
|
@@ -3603,7 +3718,7 @@ function Pressable2({
|
|
|
3603
3718
|
if (disabled) return;
|
|
3604
3719
|
reactNative.Animated.spring(scale2, {
|
|
3605
3720
|
toValue: 1,
|
|
3606
|
-
useNativeDriver:
|
|
3721
|
+
useNativeDriver: nativeDriver15,
|
|
3607
3722
|
speed: 40,
|
|
3608
3723
|
bounciness
|
|
3609
3724
|
}).start();
|
|
@@ -3740,6 +3855,14 @@ Object.defineProperty(exports, "BottomSheetModalProvider", {
|
|
|
3740
3855
|
enumerable: true,
|
|
3741
3856
|
get: function () { return bottomSheet.BottomSheetModalProvider; }
|
|
3742
3857
|
});
|
|
3858
|
+
Object.defineProperty(exports, "SheetTextInput", {
|
|
3859
|
+
enumerable: true,
|
|
3860
|
+
get: function () { return bottomSheet.BottomSheetTextInput; }
|
|
3861
|
+
});
|
|
3862
|
+
Object.defineProperty(exports, "toast", {
|
|
3863
|
+
enumerable: true,
|
|
3864
|
+
get: function () { return sonnerNative.toast; }
|
|
3865
|
+
});
|
|
3743
3866
|
exports.Accordion = Accordion;
|
|
3744
3867
|
exports.AlertBanner = AlertBanner;
|
|
3745
3868
|
exports.Avatar = Avatar;
|
|
@@ -3770,6 +3893,7 @@ exports.Input = Input;
|
|
|
3770
3893
|
exports.LabelValue = LabelValue;
|
|
3771
3894
|
exports.ListItem = ListItem;
|
|
3772
3895
|
exports.MediaCard = MediaCard;
|
|
3896
|
+
exports.MenuItem = MenuItem;
|
|
3773
3897
|
exports.MonthPicker = MonthPicker;
|
|
3774
3898
|
exports.Pressable = Pressable2;
|
|
3775
3899
|
exports.Progress = Progress;
|