@retray-dev/ui-kit 5.2.0 → 5.4.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 +242 -17
- package/EXAMPLES.md +666 -0
- package/README.md +3 -3
- package/dist/index.d.mts +112 -11
- package/dist/index.d.ts +112 -11
- package/dist/index.js +579 -358
- package/dist/index.mjs +516 -298
- package/package.json +3 -2
- package/src/components/Accordion/Accordion.tsx +25 -2
- package/src/components/Avatar/Avatar.tsx +21 -7
- package/src/components/Button/Button.tsx +16 -7
- package/src/components/ButtonGroup/ButtonGroup.tsx +60 -0
- package/src/components/ButtonGroup/index.ts +1 -0
- package/src/components/Chip/Chip.tsx +8 -1
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +25 -3
- package/src/components/DetailRow/DetailRow.tsx +140 -0
- package/src/components/DetailRow/index.ts +1 -0
- package/src/components/LabelValue/LabelValue.tsx +25 -4
- package/src/components/MonthPicker/MonthPicker.tsx +18 -6
- package/src/components/Sheet/Sheet.tsx +19 -3
- package/src/components/Textarea/Textarea.tsx +66 -29
- package/src/index.ts +5 -0
- package/src/tokens.ts +1 -1
- package/src/utils/typography.ts +24 -0
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React26 = require('react');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
5
|
var reactNativeSizeMatters = require('react-native-size-matters');
|
|
6
6
|
var AntDesign = require('@expo/vector-icons/AntDesign');
|
|
@@ -21,7 +21,7 @@ var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
|
21
21
|
|
|
22
22
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var React26__default = /*#__PURE__*/_interopDefault(React26);
|
|
25
25
|
var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
|
|
26
26
|
var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
|
|
27
27
|
var Feather__default = /*#__PURE__*/_interopDefault(Feather);
|
|
@@ -150,23 +150,23 @@ function deriveColors(t, scheme) {
|
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
// src/theme/ThemeProvider.tsx
|
|
153
|
-
var ThemeContext =
|
|
153
|
+
var ThemeContext = React26.createContext({
|
|
154
154
|
colors: deriveColors(defaultLight, "light"),
|
|
155
155
|
colorScheme: "light"
|
|
156
156
|
});
|
|
157
157
|
function ThemeProvider({ children, theme, colorScheme = "system" }) {
|
|
158
158
|
const systemScheme = reactNative.useColorScheme() ?? "light";
|
|
159
159
|
const resolvedScheme = colorScheme === "system" ? systemScheme : colorScheme;
|
|
160
|
-
const colors =
|
|
160
|
+
const colors = React26.useMemo(() => {
|
|
161
161
|
const base = resolvedScheme === "dark" ? defaultDark : defaultLight;
|
|
162
162
|
const override = resolvedScheme === "dark" ? theme?.dark : theme?.light;
|
|
163
163
|
const merged = override ? { ...base, ...override } : base;
|
|
164
164
|
return deriveColors(merged, resolvedScheme);
|
|
165
165
|
}, [resolvedScheme, theme]);
|
|
166
|
-
return /* @__PURE__ */
|
|
166
|
+
return /* @__PURE__ */ React26__default.default.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
|
|
167
167
|
}
|
|
168
168
|
function useTheme() {
|
|
169
|
-
const context =
|
|
169
|
+
const context = React26.useContext(ThemeContext);
|
|
170
170
|
if (!context) {
|
|
171
171
|
throw new Error("useTheme must be used within a ThemeProvider");
|
|
172
172
|
}
|
|
@@ -235,10 +235,10 @@ function Icon({ name, size, color, family }) {
|
|
|
235
235
|
}
|
|
236
236
|
if (!resolved) return null;
|
|
237
237
|
const Component = resolved.component;
|
|
238
|
-
return
|
|
238
|
+
return React26__default.default.createElement(Component, { name, size, color });
|
|
239
239
|
}
|
|
240
240
|
function renderIcon(name, size, color) {
|
|
241
|
-
return
|
|
241
|
+
return React26__default.default.createElement(Icon, { name, size, color });
|
|
242
242
|
}
|
|
243
243
|
|
|
244
244
|
// src/tokens.ts
|
|
@@ -406,7 +406,7 @@ var TYPOGRAPHY = {
|
|
|
406
406
|
fontFamily: "Poppins-Medium",
|
|
407
407
|
fontSize: 16,
|
|
408
408
|
fontWeight: "500",
|
|
409
|
-
lineHeight:
|
|
409
|
+
lineHeight: 22,
|
|
410
410
|
letterSpacing: 0
|
|
411
411
|
},
|
|
412
412
|
"button-sm": {
|
|
@@ -428,7 +428,7 @@ var containerSizeStyles = {
|
|
|
428
428
|
var labelSizeStyles = {
|
|
429
429
|
sm: { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize) },
|
|
430
430
|
md: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize) },
|
|
431
|
-
lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1) }
|
|
431
|
+
lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1), lineHeight: mvs(24) }
|
|
432
432
|
};
|
|
433
433
|
var iconSizeMap = { sm: 16, md: 18, lg: 20 };
|
|
434
434
|
function Button({
|
|
@@ -448,7 +448,7 @@ function Button({
|
|
|
448
448
|
}) {
|
|
449
449
|
const { colors } = useTheme();
|
|
450
450
|
const isDisabled = disabled || loading;
|
|
451
|
-
const scale2 =
|
|
451
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
452
452
|
const handlePressIn = () => {
|
|
453
453
|
if (isDisabled) return;
|
|
454
454
|
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start();
|
|
@@ -472,9 +472,13 @@ function Button({
|
|
|
472
472
|
text: { color: colors.foreground },
|
|
473
473
|
destructive: { color: colors.destructiveForeground }
|
|
474
474
|
}[variant];
|
|
475
|
-
const
|
|
475
|
+
const textColor = iconColor ?? labelVariantStyle.color;
|
|
476
|
+
const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
|
|
476
477
|
const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
|
|
477
|
-
|
|
478
|
+
const styleArray = Array.isArray(style) ? style : style ? [style] : [];
|
|
479
|
+
const flatStyle = reactNative.StyleSheet.flatten(styleArray);
|
|
480
|
+
const { flex, ...restStyle } = flatStyle || {};
|
|
481
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
478
482
|
reactNative.TouchableOpacity,
|
|
479
483
|
{
|
|
480
484
|
style: [
|
|
@@ -483,7 +487,7 @@ function Button({
|
|
|
483
487
|
containerSizeStyles[size],
|
|
484
488
|
fullWidth && styles.fullWidth,
|
|
485
489
|
isDisabled && styles.disabled,
|
|
486
|
-
|
|
490
|
+
restStyle
|
|
487
491
|
],
|
|
488
492
|
disabled: isDisabled,
|
|
489
493
|
activeOpacity: 1,
|
|
@@ -493,14 +497,15 @@ function Button({
|
|
|
493
497
|
onPressOut: handlePressOut,
|
|
494
498
|
...props
|
|
495
499
|
},
|
|
496
|
-
loading ? /* @__PURE__ */
|
|
500
|
+
loading ? /* @__PURE__ */ React26__default.default.createElement(reactNative.ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__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(
|
|
497
501
|
reactNative.Text,
|
|
498
502
|
{
|
|
499
503
|
style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
|
|
500
|
-
allowFontScaling: true
|
|
504
|
+
allowFontScaling: true,
|
|
505
|
+
numberOfLines: 1
|
|
501
506
|
},
|
|
502
507
|
label
|
|
503
|
-
), effectiveIcon && iconPosition === "right" && /* @__PURE__ */
|
|
508
|
+
), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, effectiveIcon))
|
|
504
509
|
));
|
|
505
510
|
}
|
|
506
511
|
var styles = reactNative.StyleSheet.create({
|
|
@@ -518,12 +523,46 @@ var styles = reactNative.StyleSheet.create({
|
|
|
518
523
|
opacity: 0.45
|
|
519
524
|
},
|
|
520
525
|
label: {
|
|
521
|
-
fontFamily: "Poppins-Medium"
|
|
526
|
+
fontFamily: "Poppins-Medium",
|
|
527
|
+
flexShrink: 1
|
|
522
528
|
},
|
|
523
529
|
labelWithIcon: {
|
|
524
530
|
marginHorizontal: s(6)
|
|
525
531
|
}
|
|
526
532
|
});
|
|
533
|
+
function ButtonGroup({ children, gap = 12, vertical = false, style }) {
|
|
534
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
535
|
+
reactNative.View,
|
|
536
|
+
{
|
|
537
|
+
style: [
|
|
538
|
+
styles2.container,
|
|
539
|
+
vertical ? styles2.vertical : styles2.horizontal,
|
|
540
|
+
{ gap: s(gap) },
|
|
541
|
+
style
|
|
542
|
+
]
|
|
543
|
+
},
|
|
544
|
+
React26__default.default.Children.map(
|
|
545
|
+
children,
|
|
546
|
+
(child) => React26__default.default.isValidElement(child) ? React26__default.default.cloneElement(child, {
|
|
547
|
+
style: [
|
|
548
|
+
child.props.style,
|
|
549
|
+
{ flex: 1 }
|
|
550
|
+
]
|
|
551
|
+
}) : child
|
|
552
|
+
)
|
|
553
|
+
);
|
|
554
|
+
}
|
|
555
|
+
var styles2 = reactNative.StyleSheet.create({
|
|
556
|
+
container: {
|
|
557
|
+
width: "100%"
|
|
558
|
+
},
|
|
559
|
+
horizontal: {
|
|
560
|
+
flexDirection: "row"
|
|
561
|
+
},
|
|
562
|
+
vertical: {
|
|
563
|
+
flexDirection: "column"
|
|
564
|
+
}
|
|
565
|
+
});
|
|
527
566
|
var nativeDriver2 = reactNative.Platform.OS !== "web";
|
|
528
567
|
var sizeMap = {
|
|
529
568
|
sm: { container: s(32), icon: 16 },
|
|
@@ -545,7 +584,7 @@ function IconButton({
|
|
|
545
584
|
}) {
|
|
546
585
|
const { colors } = useTheme();
|
|
547
586
|
const isDisabled = disabled || loading;
|
|
548
|
-
const scale2 =
|
|
587
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
549
588
|
const handlePressIn = () => {
|
|
550
589
|
if (isDisabled) return;
|
|
551
590
|
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver2, speed: 40, bounciness: 0 }).start();
|
|
@@ -577,14 +616,14 @@ function IconButton({
|
|
|
577
616
|
const showBadge = badge !== void 0 && badge !== false && badge !== 0;
|
|
578
617
|
const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
|
|
579
618
|
const showCount = typeof badge === "number" && badge > 0;
|
|
580
|
-
return /* @__PURE__ */
|
|
619
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles3.wrapper, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
581
620
|
reactNative.TouchableOpacity,
|
|
582
621
|
{
|
|
583
622
|
style: [
|
|
584
|
-
|
|
623
|
+
styles3.base,
|
|
585
624
|
containerVariantStyle,
|
|
586
625
|
{ width: containerSize, height: containerSize },
|
|
587
|
-
isDisabled &&
|
|
626
|
+
isDisabled && styles3.disabled,
|
|
588
627
|
style
|
|
589
628
|
],
|
|
590
629
|
disabled: isDisabled,
|
|
@@ -595,14 +634,14 @@ function IconButton({
|
|
|
595
634
|
onPressOut: handlePressOut,
|
|
596
635
|
...props
|
|
597
636
|
},
|
|
598
|
-
loading ? /* @__PURE__ */
|
|
599
|
-
), showBadge && /* @__PURE__ */
|
|
600
|
-
|
|
637
|
+
loading ? /* @__PURE__ */ React26__default.default.createElement(reactNative.ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
|
|
638
|
+
), showBadge && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [
|
|
639
|
+
styles3.badge,
|
|
601
640
|
{ backgroundColor: colors.primary },
|
|
602
|
-
showCount ?
|
|
603
|
-
] }, showCount && /* @__PURE__ */
|
|
641
|
+
showCount ? styles3.badgeCount : styles3.badgeDot
|
|
642
|
+
] }, showCount && /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles3.badgeText, { color: colors.primaryForeground }] }, badgeCount)));
|
|
604
643
|
}
|
|
605
|
-
var
|
|
644
|
+
var styles3 = reactNative.StyleSheet.create({
|
|
606
645
|
wrapper: {
|
|
607
646
|
alignSelf: "flex-start"
|
|
608
647
|
},
|
|
@@ -679,7 +718,7 @@ function Text3({ variant = "body-md", color, style, children, ...props }) {
|
|
|
679
718
|
const { colors } = useTheme();
|
|
680
719
|
const colorKey = defaultColorVariant[variant] ?? "foreground";
|
|
681
720
|
const resolvedColor = color ?? colors[colorKey];
|
|
682
|
-
return /* @__PURE__ */
|
|
721
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
683
722
|
reactNative.Text,
|
|
684
723
|
{
|
|
685
724
|
style: [variantStyles[variant], { color: resolvedColor }, style],
|
|
@@ -692,17 +731,17 @@ function Text3({ variant = "body-md", color, style, children, ...props }) {
|
|
|
692
731
|
var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
693
732
|
function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
|
|
694
733
|
const { colors } = useTheme();
|
|
695
|
-
const [focused, setFocused] =
|
|
696
|
-
const [showPassword, setShowPassword] =
|
|
734
|
+
const [focused, setFocused] = React26.useState(false);
|
|
735
|
+
const [showPassword, setShowPassword] = React26.useState(false);
|
|
697
736
|
const isPassword = type === "password";
|
|
698
737
|
const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
|
|
699
738
|
const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
|
|
700
|
-
const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */
|
|
701
|
-
return /* @__PURE__ */
|
|
739
|
+
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(
|
|
702
741
|
reactNative.View,
|
|
703
742
|
{
|
|
704
743
|
style: [
|
|
705
|
-
|
|
744
|
+
styles4.inputWrapper,
|
|
706
745
|
{
|
|
707
746
|
borderColor: error ? colors.destructive : focused ? colors.primary : colors.border,
|
|
708
747
|
backgroundColor: colors.background
|
|
@@ -710,12 +749,12 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
|
|
|
710
749
|
inputWrapperStyle
|
|
711
750
|
]
|
|
712
751
|
},
|
|
713
|
-
effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */
|
|
714
|
-
/* @__PURE__ */
|
|
752
|
+
effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles4.prefixContainer }, effectivePrefix) : null,
|
|
753
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
715
754
|
reactNative.TextInput,
|
|
716
755
|
{
|
|
717
756
|
style: [
|
|
718
|
-
|
|
757
|
+
styles4.input,
|
|
719
758
|
{
|
|
720
759
|
color: colors.foreground
|
|
721
760
|
},
|
|
@@ -736,10 +775,10 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
|
|
|
736
775
|
...props
|
|
737
776
|
}
|
|
738
777
|
),
|
|
739
|
-
effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */
|
|
740
|
-
), error ? /* @__PURE__ */
|
|
778
|
+
effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.suffixText, { color: colors.foregroundMuted }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles4.suffixContainer }, effectiveSuffix) : null
|
|
779
|
+
), error ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles4.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
|
|
741
780
|
}
|
|
742
|
-
var
|
|
781
|
+
var styles4 = reactNative.StyleSheet.create({
|
|
743
782
|
container: {
|
|
744
783
|
gap: vs(8)
|
|
745
784
|
},
|
|
@@ -830,9 +869,9 @@ function Badge({ label, children, variant = "default", size = "md", icon, iconNa
|
|
|
830
869
|
}[variant];
|
|
831
870
|
const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
|
|
832
871
|
const content = children ?? label;
|
|
833
|
-
return /* @__PURE__ */
|
|
872
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles5.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, effectiveIcon, typeof content === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles5.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
|
|
834
873
|
}
|
|
835
|
-
var
|
|
874
|
+
var styles5 = reactNative.StyleSheet.create({
|
|
836
875
|
container: {
|
|
837
876
|
borderRadius: 9999,
|
|
838
877
|
alignSelf: "flex-start",
|
|
@@ -846,7 +885,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
846
885
|
var nativeDriver3 = reactNative.Platform.OS !== "web";
|
|
847
886
|
function Card({ children, variant = "elevated", onPress, style }) {
|
|
848
887
|
const { colors } = useTheme();
|
|
849
|
-
const scale2 =
|
|
888
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
850
889
|
const handlePressIn = () => {
|
|
851
890
|
if (!onPress) return;
|
|
852
891
|
reactNative.Animated.spring(scale2, {
|
|
@@ -893,9 +932,9 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
893
932
|
elevation: 0
|
|
894
933
|
}
|
|
895
934
|
}[variant];
|
|
896
|
-
const cardContent = /* @__PURE__ */
|
|
935
|
+
const cardContent = /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles6.card, variantStyle, style] }, children);
|
|
897
936
|
if (onPress) {
|
|
898
|
-
return /* @__PURE__ */
|
|
937
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26__default.default.createElement(
|
|
899
938
|
reactNative.TouchableOpacity,
|
|
900
939
|
{
|
|
901
940
|
onPress: handlePress,
|
|
@@ -910,23 +949,23 @@ function Card({ children, variant = "elevated", onPress, style }) {
|
|
|
910
949
|
return cardContent;
|
|
911
950
|
}
|
|
912
951
|
function CardHeader({ children, style }) {
|
|
913
|
-
return /* @__PURE__ */
|
|
952
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles6.header, style] }, children);
|
|
914
953
|
}
|
|
915
954
|
function CardTitle({ children, style }) {
|
|
916
955
|
const { colors } = useTheme();
|
|
917
|
-
return /* @__PURE__ */
|
|
956
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles6.title, { color: colors.foreground }, style], allowFontScaling: true }, children);
|
|
918
957
|
}
|
|
919
958
|
function CardDescription({ children, style }) {
|
|
920
959
|
const { colors } = useTheme();
|
|
921
|
-
return /* @__PURE__ */
|
|
960
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles6.description, { color: colors.foregroundMuted }, style], allowFontScaling: true }, children);
|
|
922
961
|
}
|
|
923
962
|
function CardContent({ children, style }) {
|
|
924
|
-
return /* @__PURE__ */
|
|
963
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles6.content, style] }, children);
|
|
925
964
|
}
|
|
926
965
|
function CardFooter({ children, style }) {
|
|
927
|
-
return /* @__PURE__ */
|
|
966
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles6.footer, style] }, children);
|
|
928
967
|
}
|
|
929
|
-
var
|
|
968
|
+
var styles6 = reactNative.StyleSheet.create({
|
|
930
969
|
card: {
|
|
931
970
|
borderRadius: 14,
|
|
932
971
|
// RADIUS.md — Airbnb property card spec
|
|
@@ -961,18 +1000,18 @@ var styles5 = reactNative.StyleSheet.create({
|
|
|
961
1000
|
});
|
|
962
1001
|
function Separator({ orientation = "horizontal", style }) {
|
|
963
1002
|
const { colors } = useTheme();
|
|
964
|
-
return /* @__PURE__ */
|
|
1003
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
965
1004
|
reactNative.View,
|
|
966
1005
|
{
|
|
967
1006
|
style: [
|
|
968
|
-
orientation === "horizontal" ?
|
|
1007
|
+
orientation === "horizontal" ? styles7.horizontal : styles7.vertical,
|
|
969
1008
|
{ backgroundColor: colors.border },
|
|
970
1009
|
style
|
|
971
1010
|
]
|
|
972
1011
|
}
|
|
973
1012
|
);
|
|
974
1013
|
}
|
|
975
|
-
var
|
|
1014
|
+
var styles7 = reactNative.StyleSheet.create({
|
|
976
1015
|
horizontal: {
|
|
977
1016
|
height: 1,
|
|
978
1017
|
width: "100%"
|
|
@@ -995,18 +1034,18 @@ var labelFontSize = {
|
|
|
995
1034
|
function Spinner({ size = "md", color, label, ...props }) {
|
|
996
1035
|
const { colors } = useTheme();
|
|
997
1036
|
if (label) {
|
|
998
|
-
return /* @__PURE__ */
|
|
1037
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles8.wrapper }, /* @__PURE__ */ React26__default.default.createElement(reactNative.ActivityIndicator, { size: sizeMap2[size], color: color ?? colors.primary, ...props }), /* @__PURE__ */ React26__default.default.createElement(
|
|
999
1038
|
reactNative.Text,
|
|
1000
1039
|
{
|
|
1001
|
-
style: [
|
|
1040
|
+
style: [styles8.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
|
|
1002
1041
|
allowFontScaling: true
|
|
1003
1042
|
},
|
|
1004
1043
|
label
|
|
1005
1044
|
));
|
|
1006
1045
|
}
|
|
1007
|
-
return /* @__PURE__ */
|
|
1046
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.ActivityIndicator, { size: sizeMap2[size], color: color ?? colors.primary, ...props });
|
|
1008
1047
|
}
|
|
1009
|
-
var
|
|
1048
|
+
var styles8 = reactNative.StyleSheet.create({
|
|
1010
1049
|
wrapper: {
|
|
1011
1050
|
alignItems: "center",
|
|
1012
1051
|
gap: vs(6)
|
|
@@ -1025,10 +1064,10 @@ function Skeleton({
|
|
|
1025
1064
|
style
|
|
1026
1065
|
}) {
|
|
1027
1066
|
const { colors, colorScheme } = useTheme();
|
|
1028
|
-
const shimmerAnim =
|
|
1029
|
-
const [containerWidth, setContainerWidth] =
|
|
1067
|
+
const shimmerAnim = React26.useRef(new reactNative.Animated.Value(0)).current;
|
|
1068
|
+
const [containerWidth, setContainerWidth] = React26.useState(300);
|
|
1030
1069
|
const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
|
|
1031
|
-
|
|
1070
|
+
React26.useEffect(() => {
|
|
1032
1071
|
const animation = reactNative.Animated.loop(
|
|
1033
1072
|
reactNative.Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
|
|
1034
1073
|
);
|
|
@@ -1042,17 +1081,17 @@ function Skeleton({
|
|
|
1042
1081
|
const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
|
|
1043
1082
|
const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
|
|
1044
1083
|
const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
|
|
1045
|
-
return /* @__PURE__ */
|
|
1084
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1046
1085
|
reactNative.View,
|
|
1047
1086
|
{
|
|
1048
1087
|
style: [
|
|
1049
|
-
|
|
1088
|
+
styles9.base,
|
|
1050
1089
|
{ width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
|
|
1051
1090
|
style
|
|
1052
1091
|
],
|
|
1053
1092
|
onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width)
|
|
1054
1093
|
},
|
|
1055
|
-
/* @__PURE__ */
|
|
1094
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [reactNative.StyleSheet.absoluteFill, { transform: [{ translateX }] }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1056
1095
|
expoLinearGradient.LinearGradient,
|
|
1057
1096
|
{
|
|
1058
1097
|
colors: ["transparent", shimmerHighlight, "transparent"],
|
|
@@ -1063,7 +1102,7 @@ function Skeleton({
|
|
|
1063
1102
|
))
|
|
1064
1103
|
);
|
|
1065
1104
|
}
|
|
1066
|
-
var
|
|
1105
|
+
var styles9 = reactNative.StyleSheet.create({
|
|
1067
1106
|
base: {
|
|
1068
1107
|
overflow: "hidden"
|
|
1069
1108
|
}
|
|
@@ -1086,12 +1125,22 @@ var statusSizeMap = {
|
|
|
1086
1125
|
lg: 13,
|
|
1087
1126
|
xl: 16
|
|
1088
1127
|
};
|
|
1089
|
-
function
|
|
1128
|
+
function getInitials(fallback, fallbackText) {
|
|
1129
|
+
if (fallback) return fallback.slice(0, 2).toUpperCase();
|
|
1130
|
+
if (fallbackText) {
|
|
1131
|
+
const words = fallbackText.trim().split(/\s+/);
|
|
1132
|
+
if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
|
|
1133
|
+
return (words[0][0] + words[words.length - 1][0]).toUpperCase();
|
|
1134
|
+
}
|
|
1135
|
+
return "?";
|
|
1136
|
+
}
|
|
1137
|
+
function Avatar({ src, fallback, fallbackText, size = "md", status, style }) {
|
|
1090
1138
|
const { colors } = useTheme();
|
|
1091
|
-
const [imageError, setImageError] =
|
|
1092
|
-
const dimension = sizeMap3[size];
|
|
1139
|
+
const [imageError, setImageError] = React26.useState(false);
|
|
1140
|
+
const dimension = typeof size === "number" ? size : sizeMap3[size];
|
|
1141
|
+
const fontSize = typeof size === "number" ? size * 0.38 : fontSizeMap[size];
|
|
1093
1142
|
const showFallback = !src || imageError;
|
|
1094
|
-
const statusSize = statusSizeMap[size];
|
|
1143
|
+
const statusSize = typeof size === "number" ? size * 0.25 : statusSizeMap[size];
|
|
1095
1144
|
const statusColor = {
|
|
1096
1145
|
online: "#22c55e",
|
|
1097
1146
|
offline: "transparent",
|
|
@@ -1105,25 +1154,25 @@ function Avatar({ src, fallback, size = "md", status, style }) {
|
|
|
1105
1154
|
backgroundColor: colors.surface,
|
|
1106
1155
|
overflow: "hidden"
|
|
1107
1156
|
};
|
|
1108
|
-
return /* @__PURE__ */
|
|
1157
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles10.wrapper, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles10.base, containerStyle] }, !showFallback ? /* @__PURE__ */ React26__default.default.createElement(
|
|
1109
1158
|
reactNative.Image,
|
|
1110
1159
|
{
|
|
1111
1160
|
source: { uri: src },
|
|
1112
1161
|
style: { width: dimension, height: dimension },
|
|
1113
1162
|
onError: () => setImageError(true)
|
|
1114
1163
|
}
|
|
1115
|
-
) : /* @__PURE__ */
|
|
1164
|
+
) : /* @__PURE__ */ React26__default.default.createElement(
|
|
1116
1165
|
reactNative.Text,
|
|
1117
1166
|
{
|
|
1118
|
-
style: [
|
|
1167
|
+
style: [styles10.fallback, { color: colors.foregroundMuted, fontSize }],
|
|
1119
1168
|
allowFontScaling: true
|
|
1120
1169
|
},
|
|
1121
|
-
fallback
|
|
1122
|
-
)), status && /* @__PURE__ */
|
|
1170
|
+
getInitials(fallback, fallbackText)
|
|
1171
|
+
)), status && /* @__PURE__ */ React26__default.default.createElement(
|
|
1123
1172
|
reactNative.View,
|
|
1124
1173
|
{
|
|
1125
1174
|
style: [
|
|
1126
|
-
|
|
1175
|
+
styles10.statusDot,
|
|
1127
1176
|
{
|
|
1128
1177
|
width: statusSize,
|
|
1129
1178
|
height: statusSize,
|
|
@@ -1136,7 +1185,7 @@ function Avatar({ src, fallback, size = "md", status, style }) {
|
|
|
1136
1185
|
}
|
|
1137
1186
|
));
|
|
1138
1187
|
}
|
|
1139
|
-
var
|
|
1188
|
+
var styles10 = reactNative.StyleSheet.create({
|
|
1140
1189
|
wrapper: {
|
|
1141
1190
|
alignSelf: "flex-start",
|
|
1142
1191
|
position: "relative"
|
|
@@ -1161,11 +1210,11 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
|
|
|
1161
1210
|
const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.primary;
|
|
1162
1211
|
const titleColor = variant === "default" ? colors.foreground : accentColor;
|
|
1163
1212
|
const descColor = variant === "default" ? colors.foregroundMuted : accentColor;
|
|
1164
|
-
const defaultIcon = variant === "success" ? /* @__PURE__ */
|
|
1213
|
+
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.MaterialIcons, { name: "error-outline", size: 17, 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 });
|
|
1165
1214
|
const effectiveIcon = iconName ? renderIcon(iconName, 16, iconColor ?? accentColor) : icon ?? defaultIcon;
|
|
1166
|
-
return /* @__PURE__ */
|
|
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));
|
|
1167
1216
|
}
|
|
1168
|
-
var
|
|
1217
|
+
var styles11 = reactNative.StyleSheet.create({
|
|
1169
1218
|
container: {
|
|
1170
1219
|
flexDirection: "row",
|
|
1171
1220
|
alignItems: "flex-start",
|
|
@@ -1197,9 +1246,9 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
1197
1246
|
function Progress({ value = 0, max = 100, variant = "default", style }) {
|
|
1198
1247
|
const { colors } = useTheme();
|
|
1199
1248
|
const percent = Math.min(Math.max(value / max * 100, 0), 100);
|
|
1200
|
-
const [trackWidth, setTrackWidth] =
|
|
1201
|
-
const animatedWidth =
|
|
1202
|
-
|
|
1249
|
+
const [trackWidth, setTrackWidth] = React26.useState(0);
|
|
1250
|
+
const animatedWidth = React26.useRef(new reactNative.Animated.Value(0)).current;
|
|
1251
|
+
React26.useEffect(() => {
|
|
1203
1252
|
if (trackWidth === 0) return;
|
|
1204
1253
|
reactNative.Animated.spring(animatedWidth, {
|
|
1205
1254
|
toValue: percent / 100 * trackWidth,
|
|
@@ -1209,21 +1258,21 @@ function Progress({ value = 0, max = 100, variant = "default", style }) {
|
|
|
1209
1258
|
}).start();
|
|
1210
1259
|
}, [percent, trackWidth]);
|
|
1211
1260
|
const indicatorColor = variant === "success" ? colors.success : variant === "warning" ? colors.warning : variant === "destructive" ? colors.destructive : colors.primary;
|
|
1212
|
-
return /* @__PURE__ */
|
|
1261
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1213
1262
|
reactNative.View,
|
|
1214
1263
|
{
|
|
1215
|
-
style: [
|
|
1264
|
+
style: [styles12.track, { backgroundColor: colors.surface }, style],
|
|
1216
1265
|
onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width)
|
|
1217
1266
|
},
|
|
1218
|
-
/* @__PURE__ */
|
|
1267
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
1219
1268
|
reactNative.Animated.View,
|
|
1220
1269
|
{
|
|
1221
|
-
style: [
|
|
1270
|
+
style: [styles12.indicator, { width: animatedWidth, backgroundColor: indicatorColor }]
|
|
1222
1271
|
}
|
|
1223
1272
|
)
|
|
1224
1273
|
);
|
|
1225
1274
|
}
|
|
1226
|
-
var
|
|
1275
|
+
var styles12 = reactNative.StyleSheet.create({
|
|
1227
1276
|
track: {
|
|
1228
1277
|
height: vs(8),
|
|
1229
1278
|
borderRadius: 9999,
|
|
@@ -1239,39 +1288,39 @@ function EmptyState({ icon, iconName, iconColor, title, description, action, siz
|
|
|
1239
1288
|
const { colors } = useTheme();
|
|
1240
1289
|
const isCompact = size === "compact";
|
|
1241
1290
|
const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted) : icon;
|
|
1242
|
-
return /* @__PURE__ */
|
|
1291
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1243
1292
|
reactNative.View,
|
|
1244
1293
|
{
|
|
1245
1294
|
style: [
|
|
1246
|
-
|
|
1247
|
-
isCompact &&
|
|
1295
|
+
styles13.container,
|
|
1296
|
+
isCompact && styles13.containerCompact,
|
|
1248
1297
|
{ borderColor: colors.border },
|
|
1249
1298
|
style
|
|
1250
1299
|
]
|
|
1251
1300
|
},
|
|
1252
|
-
effectiveIcon ? /* @__PURE__ */
|
|
1301
|
+
effectiveIcon ? /* @__PURE__ */ React26__default.default.createElement(
|
|
1253
1302
|
reactNative.View,
|
|
1254
1303
|
{
|
|
1255
1304
|
style: [
|
|
1256
|
-
|
|
1257
|
-
isCompact &&
|
|
1305
|
+
styles13.iconWrapper,
|
|
1306
|
+
isCompact && styles13.iconWrapperCompact,
|
|
1258
1307
|
{ backgroundColor: colors.surface }
|
|
1259
1308
|
]
|
|
1260
1309
|
},
|
|
1261
1310
|
effectiveIcon
|
|
1262
1311
|
) : null,
|
|
1263
|
-
/* @__PURE__ */
|
|
1312
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles13.textWrapper }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1264
1313
|
reactNative.Text,
|
|
1265
1314
|
{
|
|
1266
|
-
style: [
|
|
1315
|
+
style: [styles13.title, isCompact && styles13.titleCompact, { color: colors.foreground }],
|
|
1267
1316
|
allowFontScaling: true
|
|
1268
1317
|
},
|
|
1269
1318
|
title
|
|
1270
|
-
), description && !isCompact ? /* @__PURE__ */
|
|
1271
|
-
action && !isCompact ? /* @__PURE__ */
|
|
1319
|
+
), description && !isCompact ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles13.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null),
|
|
1320
|
+
action && !isCompact ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles13.action }, action) : null
|
|
1272
1321
|
);
|
|
1273
1322
|
}
|
|
1274
|
-
var
|
|
1323
|
+
var styles13 = reactNative.StyleSheet.create({
|
|
1275
1324
|
container: {
|
|
1276
1325
|
alignItems: "center",
|
|
1277
1326
|
justifyContent: "center",
|
|
@@ -1326,6 +1375,9 @@ function Textarea({
|
|
|
1326
1375
|
error,
|
|
1327
1376
|
hint,
|
|
1328
1377
|
rows = 4,
|
|
1378
|
+
prefixIcon,
|
|
1379
|
+
prefixIconNode,
|
|
1380
|
+
prefixIconColor,
|
|
1329
1381
|
containerStyle,
|
|
1330
1382
|
style,
|
|
1331
1383
|
onFocus,
|
|
@@ -1333,58 +1385,84 @@ function Textarea({
|
|
|
1333
1385
|
...props
|
|
1334
1386
|
}) {
|
|
1335
1387
|
const { colors } = useTheme();
|
|
1336
|
-
const [focused, setFocused] =
|
|
1337
|
-
|
|
1338
|
-
|
|
1388
|
+
const [focused, setFocused] = React26.useState(false);
|
|
1389
|
+
const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
|
|
1390
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles14.container, containerStyle] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles14.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React26__default.default.createElement(
|
|
1391
|
+
reactNative.View,
|
|
1339
1392
|
{
|
|
1340
|
-
multiline: true,
|
|
1341
|
-
numberOfLines: rows,
|
|
1342
|
-
textAlignVertical: "top",
|
|
1343
1393
|
style: [
|
|
1344
|
-
|
|
1394
|
+
styles14.inputWrapper,
|
|
1345
1395
|
{
|
|
1346
1396
|
borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1397
|
+
backgroundColor: colors.background
|
|
1398
|
+
}
|
|
1399
|
+
]
|
|
1400
|
+
},
|
|
1401
|
+
resolvedPrefixIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles14.prefixIcon }, resolvedPrefixIcon) : null,
|
|
1402
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
1403
|
+
reactNative.TextInput,
|
|
1404
|
+
{
|
|
1405
|
+
multiline: true,
|
|
1406
|
+
numberOfLines: rows,
|
|
1407
|
+
textAlignVertical: "top",
|
|
1408
|
+
style: [
|
|
1409
|
+
styles14.input,
|
|
1410
|
+
{
|
|
1411
|
+
color: colors.foreground,
|
|
1412
|
+
minHeight: rows * vs(30)
|
|
1413
|
+
},
|
|
1414
|
+
webInputResetStyle2,
|
|
1415
|
+
style
|
|
1416
|
+
],
|
|
1417
|
+
onFocus: (e) => {
|
|
1418
|
+
setFocused(true);
|
|
1419
|
+
onFocus?.(e);
|
|
1350
1420
|
},
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
},
|
|
1362
|
-
placeholderTextColor: colors.foregroundMuted,
|
|
1363
|
-
allowFontScaling: true,
|
|
1364
|
-
...props
|
|
1365
|
-
}
|
|
1366
|
-
), error ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles13.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles13.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
|
|
1421
|
+
onBlur: (e) => {
|
|
1422
|
+
setFocused(false);
|
|
1423
|
+
onBlur?.(e);
|
|
1424
|
+
},
|
|
1425
|
+
placeholderTextColor: colors.foregroundMuted,
|
|
1426
|
+
allowFontScaling: true,
|
|
1427
|
+
...props
|
|
1428
|
+
}
|
|
1429
|
+
)
|
|
1430
|
+
), error ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles14.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles14.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
|
|
1367
1431
|
}
|
|
1368
|
-
var
|
|
1432
|
+
var styles14 = reactNative.StyleSheet.create({
|
|
1369
1433
|
container: {
|
|
1370
|
-
gap: vs(
|
|
1434
|
+
gap: vs(4)
|
|
1371
1435
|
},
|
|
1372
1436
|
label: {
|
|
1373
1437
|
fontFamily: "Poppins-Medium",
|
|
1374
|
-
fontSize: ms(13)
|
|
1438
|
+
fontSize: ms(13),
|
|
1439
|
+
lineHeight: vs(18),
|
|
1440
|
+
marginBottom: vs(2)
|
|
1375
1441
|
},
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
borderRadius: ms(8),
|
|
1442
|
+
inputWrapper: {
|
|
1443
|
+
borderWidth: 1,
|
|
1444
|
+
borderRadius: 8,
|
|
1380
1445
|
paddingHorizontal: s(14),
|
|
1381
1446
|
paddingVertical: vs(11),
|
|
1382
|
-
|
|
1383
|
-
|
|
1447
|
+
gap: s(8)
|
|
1448
|
+
},
|
|
1449
|
+
prefixIcon: {
|
|
1450
|
+
alignItems: "flex-start",
|
|
1451
|
+
justifyContent: "flex-start",
|
|
1452
|
+
paddingTop: vs(2)
|
|
1453
|
+
},
|
|
1454
|
+
input: {
|
|
1455
|
+
fontFamily: "Poppins-Regular",
|
|
1456
|
+
fontSize: ms(14),
|
|
1457
|
+
lineHeight: vs(22),
|
|
1458
|
+
padding: 0,
|
|
1459
|
+
margin: 0
|
|
1384
1460
|
},
|
|
1385
1461
|
helperText: {
|
|
1386
1462
|
fontFamily: "Poppins-Regular",
|
|
1387
|
-
fontSize: ms(
|
|
1463
|
+
fontSize: ms(12),
|
|
1464
|
+
lineHeight: vs(16),
|
|
1465
|
+
marginTop: vs(4)
|
|
1388
1466
|
}
|
|
1389
1467
|
});
|
|
1390
1468
|
var nativeDriver4 = reactNative.Platform.OS !== "web";
|
|
@@ -1396,10 +1474,10 @@ function Checkbox({
|
|
|
1396
1474
|
style
|
|
1397
1475
|
}) {
|
|
1398
1476
|
const { colors } = useTheme();
|
|
1399
|
-
const scale2 =
|
|
1400
|
-
const bgOpacity =
|
|
1401
|
-
const checkOpacity =
|
|
1402
|
-
|
|
1477
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
1478
|
+
const bgOpacity = React26.useRef(new reactNative.Animated.Value(checked ? 1 : 0)).current;
|
|
1479
|
+
const checkOpacity = React26.useRef(new reactNative.Animated.Value(checked ? 1 : 0)).current;
|
|
1480
|
+
React26.useEffect(() => {
|
|
1403
1481
|
reactNative.Animated.parallel([
|
|
1404
1482
|
reactNative.Animated.timing(bgOpacity, {
|
|
1405
1483
|
toValue: checked ? 1 : 0,
|
|
@@ -1428,10 +1506,10 @@ function Checkbox({
|
|
|
1428
1506
|
const handlePressOut = () => {
|
|
1429
1507
|
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver4, speed: 40, bounciness: 0 }).start();
|
|
1430
1508
|
};
|
|
1431
|
-
return /* @__PURE__ */
|
|
1509
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1432
1510
|
reactNative.TouchableOpacity,
|
|
1433
1511
|
{
|
|
1434
|
-
style: [
|
|
1512
|
+
style: [styles15.row, style],
|
|
1435
1513
|
onPress: () => {
|
|
1436
1514
|
selectionAsync();
|
|
1437
1515
|
onCheckedChange?.(!checked);
|
|
@@ -1442,11 +1520,11 @@ function Checkbox({
|
|
|
1442
1520
|
activeOpacity: 1,
|
|
1443
1521
|
touchSoundDisabled: true
|
|
1444
1522
|
},
|
|
1445
|
-
/* @__PURE__ */
|
|
1523
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1446
1524
|
reactNative.Animated.View,
|
|
1447
1525
|
{
|
|
1448
1526
|
style: [
|
|
1449
|
-
|
|
1527
|
+
styles15.box,
|
|
1450
1528
|
{
|
|
1451
1529
|
borderColor,
|
|
1452
1530
|
backgroundColor,
|
|
@@ -1454,19 +1532,19 @@ function Checkbox({
|
|
|
1454
1532
|
}
|
|
1455
1533
|
]
|
|
1456
1534
|
},
|
|
1457
|
-
/* @__PURE__ */
|
|
1535
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { opacity: checkOpacity } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles15.checkmark, { borderColor: colors.primaryForeground }] }))
|
|
1458
1536
|
)),
|
|
1459
|
-
label ? /* @__PURE__ */
|
|
1537
|
+
label ? /* @__PURE__ */ React26__default.default.createElement(
|
|
1460
1538
|
reactNative.Text,
|
|
1461
1539
|
{
|
|
1462
|
-
style: [
|
|
1540
|
+
style: [styles15.label, { color: disabled ? colors.foregroundMuted : colors.foreground }],
|
|
1463
1541
|
allowFontScaling: true
|
|
1464
1542
|
},
|
|
1465
1543
|
label
|
|
1466
1544
|
) : null
|
|
1467
1545
|
);
|
|
1468
1546
|
}
|
|
1469
|
-
var
|
|
1547
|
+
var styles15 = reactNative.StyleSheet.create({
|
|
1470
1548
|
row: {
|
|
1471
1549
|
flexDirection: "row",
|
|
1472
1550
|
alignItems: "center",
|
|
@@ -1502,11 +1580,11 @@ var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
|
|
|
1502
1580
|
var ICON_SIZE = s(13);
|
|
1503
1581
|
function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
1504
1582
|
const { colors } = useTheme();
|
|
1505
|
-
const translateX =
|
|
1506
|
-
const trackOpacity =
|
|
1507
|
-
const checkOpacity =
|
|
1508
|
-
const crossOpacity =
|
|
1509
|
-
|
|
1583
|
+
const translateX = React26.useRef(new reactNative.Animated.Value(checked ? THUMB_TRAVEL : 0)).current;
|
|
1584
|
+
const trackOpacity = React26.useRef(new reactNative.Animated.Value(checked ? 1 : 0)).current;
|
|
1585
|
+
const checkOpacity = React26.useRef(new reactNative.Animated.Value(checked ? 1 : 0)).current;
|
|
1586
|
+
const crossOpacity = React26.useRef(new reactNative.Animated.Value(checked ? 0 : 1)).current;
|
|
1587
|
+
React26.useEffect(() => {
|
|
1510
1588
|
reactNative.Animated.parallel([
|
|
1511
1589
|
reactNative.Animated.spring(translateX, {
|
|
1512
1590
|
toValue: checked ? THUMB_TRAVEL : 0,
|
|
@@ -1534,7 +1612,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
1534
1612
|
inputRange: [0, 1],
|
|
1535
1613
|
outputRange: [colors.surface, colors.primary]
|
|
1536
1614
|
});
|
|
1537
|
-
return /* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1538
1616
|
reactNative.TouchableOpacity,
|
|
1539
1617
|
{
|
|
1540
1618
|
onPress: () => {
|
|
@@ -1544,22 +1622,22 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
1544
1622
|
disabled,
|
|
1545
1623
|
activeOpacity: 0.8,
|
|
1546
1624
|
touchSoundDisabled: true,
|
|
1547
|
-
style:
|
|
1625
|
+
style: styles16.wrapper
|
|
1548
1626
|
},
|
|
1549
|
-
/* @__PURE__ */
|
|
1627
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles16.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1550
1628
|
reactNative.Animated.View,
|
|
1551
1629
|
{
|
|
1552
1630
|
style: [
|
|
1553
|
-
|
|
1631
|
+
styles16.thumb,
|
|
1554
1632
|
{ backgroundColor: colors.primaryForeground, transform: [{ translateX }] }
|
|
1555
1633
|
]
|
|
1556
1634
|
},
|
|
1557
|
-
/* @__PURE__ */
|
|
1558
|
-
/* @__PURE__ */
|
|
1635
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles16.iconWrapper, { opacity: checkOpacity }] }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
|
|
1636
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles16.iconWrapper, { opacity: crossOpacity }] }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
|
|
1559
1637
|
))
|
|
1560
1638
|
));
|
|
1561
1639
|
}
|
|
1562
|
-
var
|
|
1640
|
+
var styles16 = reactNative.StyleSheet.create({
|
|
1563
1641
|
wrapper: {},
|
|
1564
1642
|
track: {
|
|
1565
1643
|
width: TRACK_WIDTH,
|
|
@@ -1611,9 +1689,9 @@ function Toggle({
|
|
|
1611
1689
|
...props
|
|
1612
1690
|
}) {
|
|
1613
1691
|
const { colors } = useTheme();
|
|
1614
|
-
const scale2 =
|
|
1615
|
-
const pressAnim =
|
|
1616
|
-
|
|
1692
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
1693
|
+
const pressAnim = React26.useRef(new reactNative.Animated.Value(pressed ? 1 : 0)).current;
|
|
1694
|
+
React26.useEffect(() => {
|
|
1617
1695
|
reactNative.Animated.timing(pressAnim, {
|
|
1618
1696
|
toValue: pressed ? 1 : 0,
|
|
1619
1697
|
duration: 150,
|
|
@@ -1648,17 +1726,17 @@ function Toggle({
|
|
|
1648
1726
|
return prop;
|
|
1649
1727
|
};
|
|
1650
1728
|
if (pressed) {
|
|
1651
|
-
if (activeIconName) return /* @__PURE__ */
|
|
1729
|
+
if (activeIconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary));
|
|
1652
1730
|
const active = renderProp(activeIcon);
|
|
1653
|
-
if (active) return /* @__PURE__ */
|
|
1654
|
-
return /* @__PURE__ */
|
|
1731
|
+
if (active) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, active);
|
|
1732
|
+
return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "check-circle", size: iconSize, color: colors.primary });
|
|
1655
1733
|
}
|
|
1656
|
-
if (iconName) return /* @__PURE__ */
|
|
1734
|
+
if (iconName) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted));
|
|
1657
1735
|
const custom = renderProp(icon);
|
|
1658
|
-
if (custom) return /* @__PURE__ */
|
|
1659
|
-
return /* @__PURE__ */
|
|
1736
|
+
if (custom) return /* @__PURE__ */ React26__default.default.createElement(React26__default.default.Fragment, null, custom);
|
|
1737
|
+
return /* @__PURE__ */ React26__default.default.createElement(vectorIcons.FontAwesome5, { name: "circle", size: iconSize, color: colors.foregroundMuted });
|
|
1660
1738
|
};
|
|
1661
|
-
return /* @__PURE__ */
|
|
1739
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles17.disabled, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
1662
1740
|
reactNative.TouchableOpacity,
|
|
1663
1741
|
{
|
|
1664
1742
|
onPress: () => {
|
|
@@ -1672,20 +1750,20 @@ function Toggle({
|
|
|
1672
1750
|
touchSoundDisabled: true,
|
|
1673
1751
|
...props
|
|
1674
1752
|
},
|
|
1675
|
-
/* @__PURE__ */
|
|
1753
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
1676
1754
|
reactNative.Animated.View,
|
|
1677
1755
|
{
|
|
1678
1756
|
style: [
|
|
1679
|
-
|
|
1757
|
+
styles17.base,
|
|
1680
1758
|
sizeStyles[size],
|
|
1681
1759
|
{ borderColor, backgroundColor, borderWidth: 2 }
|
|
1682
1760
|
]
|
|
1683
1761
|
},
|
|
1684
|
-
/* @__PURE__ */
|
|
1762
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles17.inner }, /* @__PURE__ */ React26__default.default.createElement(LeftIcon, null), label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.Text, { style: [styles17.label, { color: textColor }], allowFontScaling: true }, label) : null)
|
|
1685
1763
|
)
|
|
1686
1764
|
));
|
|
1687
1765
|
}
|
|
1688
|
-
var
|
|
1766
|
+
var styles17 = reactNative.StyleSheet.create({
|
|
1689
1767
|
base: {
|
|
1690
1768
|
borderRadius: ms(8)
|
|
1691
1769
|
},
|
|
@@ -1710,7 +1788,7 @@ function RadioItem({
|
|
|
1710
1788
|
onSelect
|
|
1711
1789
|
}) {
|
|
1712
1790
|
const { colors } = useTheme();
|
|
1713
|
-
const scale2 =
|
|
1791
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
1714
1792
|
const handlePressIn = () => {
|
|
1715
1793
|
if (option.disabled) return;
|
|
1716
1794
|
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver7, speed: 40, bounciness: 0 }).start();
|
|
@@ -1718,10 +1796,10 @@ function RadioItem({
|
|
|
1718
1796
|
const handlePressOut = () => {
|
|
1719
1797
|
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver7, speed: 40, bounciness: 4 }).start();
|
|
1720
1798
|
};
|
|
1721
|
-
return /* @__PURE__ */
|
|
1799
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1722
1800
|
reactNative.TouchableOpacity,
|
|
1723
1801
|
{
|
|
1724
|
-
style:
|
|
1802
|
+
style: styles18.row,
|
|
1725
1803
|
onPress: () => {
|
|
1726
1804
|
if (!option.disabled) {
|
|
1727
1805
|
selectionAsync();
|
|
@@ -1734,11 +1812,11 @@ function RadioItem({
|
|
|
1734
1812
|
touchSoundDisabled: true,
|
|
1735
1813
|
disabled: option.disabled
|
|
1736
1814
|
},
|
|
1737
|
-
/* @__PURE__ */
|
|
1815
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
1738
1816
|
reactNative.Animated.View,
|
|
1739
1817
|
{
|
|
1740
1818
|
style: [
|
|
1741
|
-
|
|
1819
|
+
styles18.radio,
|
|
1742
1820
|
{
|
|
1743
1821
|
borderColor: selected ? colors.primary : colors.border,
|
|
1744
1822
|
opacity: option.disabled ? 0.45 : 1,
|
|
@@ -1746,13 +1824,13 @@ function RadioItem({
|
|
|
1746
1824
|
}
|
|
1747
1825
|
]
|
|
1748
1826
|
},
|
|
1749
|
-
selected ? /* @__PURE__ */
|
|
1827
|
+
selected ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles18.dot, { backgroundColor: colors.primary }] }) : null
|
|
1750
1828
|
),
|
|
1751
|
-
/* @__PURE__ */
|
|
1829
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
1752
1830
|
reactNative.Text,
|
|
1753
1831
|
{
|
|
1754
1832
|
style: [
|
|
1755
|
-
|
|
1833
|
+
styles18.label,
|
|
1756
1834
|
{ color: option.disabled ? colors.foregroundMuted : colors.foreground }
|
|
1757
1835
|
],
|
|
1758
1836
|
allowFontScaling: true
|
|
@@ -1768,7 +1846,7 @@ function RadioGroup({
|
|
|
1768
1846
|
orientation = "vertical",
|
|
1769
1847
|
style
|
|
1770
1848
|
}) {
|
|
1771
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles18.container, orientation === "horizontal" && styles18.horizontal, style] }, options.map((option) => /* @__PURE__ */ React26__default.default.createElement(
|
|
1772
1850
|
RadioItem,
|
|
1773
1851
|
{
|
|
1774
1852
|
key: option.value,
|
|
@@ -1778,7 +1856,7 @@ function RadioGroup({
|
|
|
1778
1856
|
}
|
|
1779
1857
|
)));
|
|
1780
1858
|
}
|
|
1781
|
-
var
|
|
1859
|
+
var styles18 = reactNative.StyleSheet.create({
|
|
1782
1860
|
container: {
|
|
1783
1861
|
gap: vs(12)
|
|
1784
1862
|
},
|
|
@@ -1819,7 +1897,7 @@ function TabTrigger({
|
|
|
1819
1897
|
variant
|
|
1820
1898
|
}) {
|
|
1821
1899
|
const { colors } = useTheme();
|
|
1822
|
-
const scale2 =
|
|
1900
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
1823
1901
|
const handlePressIn = () => {
|
|
1824
1902
|
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver8, speed: 40, bounciness: 0 }).start();
|
|
1825
1903
|
};
|
|
@@ -1827,12 +1905,12 @@ function TabTrigger({
|
|
|
1827
1905
|
reactNative.Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver8, speed: 40, bounciness: 4 }).start();
|
|
1828
1906
|
};
|
|
1829
1907
|
const isUnderline = variant === "underline";
|
|
1830
|
-
return /* @__PURE__ */
|
|
1908
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
1831
1909
|
reactNative.TouchableOpacity,
|
|
1832
1910
|
{
|
|
1833
1911
|
style: [
|
|
1834
|
-
|
|
1835
|
-
isUnderline &&
|
|
1912
|
+
styles19.trigger,
|
|
1913
|
+
isUnderline && styles19.triggerUnderline,
|
|
1836
1914
|
isUnderline && isActive && { borderBottomColor: colors.primary }
|
|
1837
1915
|
],
|
|
1838
1916
|
onPress,
|
|
@@ -1842,13 +1920,13 @@ function TabTrigger({
|
|
|
1842
1920
|
activeOpacity: 1,
|
|
1843
1921
|
touchSoundDisabled: true
|
|
1844
1922
|
},
|
|
1845
|
-
/* @__PURE__ */
|
|
1923
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles19.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React26__default.default.createElement(
|
|
1846
1924
|
reactNative.Text,
|
|
1847
1925
|
{
|
|
1848
1926
|
style: [
|
|
1849
|
-
|
|
1927
|
+
styles19.triggerLabel,
|
|
1850
1928
|
{ color: isActive ? colors.foreground : colors.foregroundMuted },
|
|
1851
|
-
isActive && (isUnderline ?
|
|
1929
|
+
isActive && (isUnderline ? styles19.activeTriggerLabelUnderline : styles19.activeTriggerLabel)
|
|
1852
1930
|
],
|
|
1853
1931
|
allowFontScaling: true
|
|
1854
1932
|
},
|
|
@@ -1857,13 +1935,13 @@ function TabTrigger({
|
|
|
1857
1935
|
);
|
|
1858
1936
|
}
|
|
1859
1937
|
function Tabs({ tabs, variant = "pill", value, onValueChange, children, style }) {
|
|
1860
|
-
const [internal, setInternal] =
|
|
1938
|
+
const [internal, setInternal] = React26.useState(tabs[0]?.value ?? "");
|
|
1861
1939
|
const { colors } = useTheme();
|
|
1862
1940
|
const active = value ?? internal;
|
|
1863
|
-
const tabLayouts =
|
|
1864
|
-
const pillX =
|
|
1865
|
-
const pillWidth =
|
|
1866
|
-
const initialised =
|
|
1941
|
+
const tabLayouts = React26.useRef({});
|
|
1942
|
+
const pillX = React26.useRef(new reactNative.Animated.Value(0)).current;
|
|
1943
|
+
const pillWidth = React26.useRef(new reactNative.Animated.Value(0)).current;
|
|
1944
|
+
const initialised = React26.useRef(false);
|
|
1867
1945
|
const animatePill = (tabValue, animate) => {
|
|
1868
1946
|
const layout = tabLayouts.current[tabValue];
|
|
1869
1947
|
if (!layout) return;
|
|
@@ -1877,7 +1955,7 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
|
|
|
1877
1955
|
pillWidth.setValue(layout.width);
|
|
1878
1956
|
}
|
|
1879
1957
|
};
|
|
1880
|
-
|
|
1958
|
+
React26.useEffect(() => {
|
|
1881
1959
|
if (initialised.current) animatePill(active, true);
|
|
1882
1960
|
}, [active]);
|
|
1883
1961
|
const handlePress = (v) => {
|
|
@@ -1885,13 +1963,13 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
|
|
|
1885
1963
|
if (!value) setInternal(v);
|
|
1886
1964
|
onValueChange?.(v);
|
|
1887
1965
|
};
|
|
1888
|
-
return /* @__PURE__ */
|
|
1889
|
-
variant === "pill" ? [
|
|
1890
|
-
] }, variant === "pill" && /* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [
|
|
1967
|
+
variant === "pill" ? [styles19.list, { backgroundColor: colors.surface }] : styles19.listUnderline
|
|
1968
|
+
] }, variant === "pill" && /* @__PURE__ */ React26__default.default.createElement(
|
|
1891
1969
|
reactNative.Animated.View,
|
|
1892
1970
|
{
|
|
1893
1971
|
style: [
|
|
1894
|
-
|
|
1972
|
+
styles19.pill,
|
|
1895
1973
|
{
|
|
1896
1974
|
backgroundColor: colors.background,
|
|
1897
1975
|
position: "absolute",
|
|
@@ -1908,7 +1986,7 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
|
|
|
1908
1986
|
}
|
|
1909
1987
|
]
|
|
1910
1988
|
}
|
|
1911
|
-
), tabs.map((tab) => /* @__PURE__ */
|
|
1989
|
+
), tabs.map((tab) => /* @__PURE__ */ React26__default.default.createElement(
|
|
1912
1990
|
TabTrigger,
|
|
1913
1991
|
{
|
|
1914
1992
|
key: tab.value,
|
|
@@ -1929,9 +2007,9 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
|
|
|
1929
2007
|
}
|
|
1930
2008
|
function TabsContent({ value, activeValue, children, style }) {
|
|
1931
2009
|
if (value !== activeValue) return null;
|
|
1932
|
-
return /* @__PURE__ */
|
|
2010
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style }, children);
|
|
1933
2011
|
}
|
|
1934
|
-
var
|
|
2012
|
+
var styles19 = reactNative.StyleSheet.create({
|
|
1935
2013
|
list: {
|
|
1936
2014
|
flexDirection: "row",
|
|
1937
2015
|
borderRadius: 12,
|
|
@@ -1984,9 +2062,10 @@ function AccordionItemComponent({
|
|
|
1984
2062
|
onToggle
|
|
1985
2063
|
}) {
|
|
1986
2064
|
const { colors } = useTheme();
|
|
2065
|
+
const resolvedIcon = item.iconName ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted) : item.icon;
|
|
1987
2066
|
const isExpanded = Animated11.useSharedValue(isOpen);
|
|
1988
2067
|
const height = Animated11.useSharedValue(0);
|
|
1989
|
-
|
|
2068
|
+
React26__default.default.useEffect(() => {
|
|
1990
2069
|
isExpanded.value = isOpen;
|
|
1991
2070
|
}, [isOpen]);
|
|
1992
2071
|
const derivedHeight = Animated11.useDerivedValue(
|
|
@@ -2008,21 +2087,21 @@ function AccordionItemComponent({
|
|
|
2008
2087
|
const rotationStyle = Animated11.useAnimatedStyle(() => ({
|
|
2009
2088
|
transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
|
|
2010
2089
|
}));
|
|
2011
|
-
return /* @__PURE__ */
|
|
2090
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles20.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2012
2091
|
reactNative.Pressable,
|
|
2013
2092
|
{
|
|
2014
|
-
style: ({ pressed }) => [
|
|
2093
|
+
style: ({ pressed }) => [styles20.trigger, { opacity: pressed ? 0.6 : 1 }],
|
|
2015
2094
|
onPress: () => {
|
|
2016
2095
|
selectionAsync();
|
|
2017
2096
|
onToggle();
|
|
2018
2097
|
}
|
|
2019
2098
|
},
|
|
2020
|
-
/* @__PURE__ */
|
|
2021
|
-
/* @__PURE__ */
|
|
2022
|
-
), /* @__PURE__ */
|
|
2099
|
+
/* @__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(Animated11__default.default.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
|
|
2101
|
+
), /* @__PURE__ */ React26__default.default.createElement(Animated11__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2023
2102
|
reactNative.View,
|
|
2024
2103
|
{
|
|
2025
|
-
style:
|
|
2104
|
+
style: styles20.content,
|
|
2026
2105
|
onLayout: (e) => {
|
|
2027
2106
|
height.value = e.nativeEvent.layout.height;
|
|
2028
2107
|
}
|
|
@@ -2031,7 +2110,7 @@ function AccordionItemComponent({
|
|
|
2031
2110
|
)));
|
|
2032
2111
|
}
|
|
2033
2112
|
function Accordion({ items, type = "single", defaultValue, style }) {
|
|
2034
|
-
const [openValues, setOpenValues] =
|
|
2113
|
+
const [openValues, setOpenValues] = React26.useState(() => {
|
|
2035
2114
|
if (!defaultValue) return [];
|
|
2036
2115
|
return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
|
|
2037
2116
|
});
|
|
@@ -2044,7 +2123,7 @@ function Accordion({ items, type = "single", defaultValue, style }) {
|
|
|
2044
2123
|
);
|
|
2045
2124
|
}
|
|
2046
2125
|
};
|
|
2047
|
-
return /* @__PURE__ */
|
|
2126
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles20.list, style] }, items.map((item) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2048
2127
|
AccordionItemComponent,
|
|
2049
2128
|
{
|
|
2050
2129
|
key: item.value,
|
|
@@ -2054,7 +2133,7 @@ function Accordion({ items, type = "single", defaultValue, style }) {
|
|
|
2054
2133
|
}
|
|
2055
2134
|
)));
|
|
2056
2135
|
}
|
|
2057
|
-
var
|
|
2136
|
+
var styles20 = reactNative.StyleSheet.create({
|
|
2058
2137
|
list: {
|
|
2059
2138
|
gap: s(6)
|
|
2060
2139
|
},
|
|
@@ -2070,10 +2149,19 @@ var styles19 = reactNative.StyleSheet.create({
|
|
|
2070
2149
|
paddingHorizontal: s(14),
|
|
2071
2150
|
paddingVertical: vs(12)
|
|
2072
2151
|
},
|
|
2152
|
+
triggerContent: {
|
|
2153
|
+
flexDirection: "row",
|
|
2154
|
+
alignItems: "center",
|
|
2155
|
+
gap: s(8),
|
|
2156
|
+
flex: 1
|
|
2157
|
+
},
|
|
2158
|
+
icon: {
|
|
2159
|
+
alignItems: "center",
|
|
2160
|
+
justifyContent: "center"
|
|
2161
|
+
},
|
|
2073
2162
|
triggerText: {
|
|
2074
2163
|
fontFamily: "Poppins-Medium",
|
|
2075
|
-
fontSize: ms(14)
|
|
2076
|
-
flex: 1
|
|
2164
|
+
fontSize: ms(14)
|
|
2077
2165
|
},
|
|
2078
2166
|
chevron: {
|
|
2079
2167
|
marginLeft: s(8)
|
|
@@ -2102,7 +2190,7 @@ function Slider({
|
|
|
2102
2190
|
style
|
|
2103
2191
|
}) {
|
|
2104
2192
|
const { colors } = useTheme();
|
|
2105
|
-
const lastSteppedValue =
|
|
2193
|
+
const lastSteppedValue = React26.useRef(value);
|
|
2106
2194
|
const handleValueChange = (v) => {
|
|
2107
2195
|
if (step && v !== lastSteppedValue.current) {
|
|
2108
2196
|
lastSteppedValue.current = v;
|
|
@@ -2110,7 +2198,7 @@ function Slider({
|
|
|
2110
2198
|
}
|
|
2111
2199
|
onValueChange?.(v);
|
|
2112
2200
|
};
|
|
2113
|
-
return /* @__PURE__ */
|
|
2201
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles21.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles21.header }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles21.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles21.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: disabled ? styles21.disabled : void 0 }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2114
2202
|
RNSlider__default.default,
|
|
2115
2203
|
{
|
|
2116
2204
|
value,
|
|
@@ -2123,12 +2211,12 @@ function Slider({
|
|
|
2123
2211
|
minimumTrackTintColor: colors.primary,
|
|
2124
2212
|
maximumTrackTintColor: colors.surface,
|
|
2125
2213
|
thumbTintColor: colors.primary,
|
|
2126
|
-
style:
|
|
2214
|
+
style: styles21.slider,
|
|
2127
2215
|
accessibilityLabel
|
|
2128
2216
|
}
|
|
2129
2217
|
)));
|
|
2130
2218
|
}
|
|
2131
|
-
var
|
|
2219
|
+
var styles21 = reactNative.StyleSheet.create({
|
|
2132
2220
|
wrapper: {
|
|
2133
2221
|
gap: vs(8)
|
|
2134
2222
|
},
|
|
@@ -2161,11 +2249,13 @@ function Sheet({
|
|
|
2161
2249
|
children,
|
|
2162
2250
|
style,
|
|
2163
2251
|
scrollable,
|
|
2164
|
-
maxHeight
|
|
2252
|
+
maxHeight,
|
|
2253
|
+
keyboardBehavior,
|
|
2254
|
+
keyboardOffset = 0
|
|
2165
2255
|
}) {
|
|
2166
2256
|
const { colors } = useTheme();
|
|
2167
|
-
const ref =
|
|
2168
|
-
|
|
2257
|
+
const ref = React26.useRef(null);
|
|
2258
|
+
React26.useEffect(() => {
|
|
2169
2259
|
if (open) {
|
|
2170
2260
|
impactLight();
|
|
2171
2261
|
ref.current?.present();
|
|
@@ -2173,7 +2263,7 @@ function Sheet({
|
|
|
2173
2263
|
ref.current?.dismiss();
|
|
2174
2264
|
}
|
|
2175
2265
|
}, [open]);
|
|
2176
|
-
const renderBackdrop = (props) => /* @__PURE__ */
|
|
2266
|
+
const renderBackdrop = (props) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2177
2267
|
bottomSheet.BottomSheetBackdrop,
|
|
2178
2268
|
{
|
|
2179
2269
|
...props,
|
|
@@ -2182,23 +2272,28 @@ function Sheet({
|
|
|
2182
2272
|
pressBehavior: "close"
|
|
2183
2273
|
}
|
|
2184
2274
|
);
|
|
2185
|
-
const headerNode = title || description ? /* @__PURE__ */
|
|
2275
|
+
const headerNode = title || description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles22.header }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles22.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null;
|
|
2186
2276
|
const useScroll = scrollable || !!maxHeight;
|
|
2187
|
-
|
|
2277
|
+
const wrapKeyboard = (node) => {
|
|
2278
|
+
if (!keyboardBehavior || keyboardBehavior === "none") return node;
|
|
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
|
+
};
|
|
2282
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
2188
2283
|
bottomSheet.BottomSheetModal,
|
|
2189
2284
|
{
|
|
2190
2285
|
ref,
|
|
2191
2286
|
enableDynamicSizing: true,
|
|
2192
2287
|
onDismiss: onClose,
|
|
2193
2288
|
backdropComponent: renderBackdrop,
|
|
2194
|
-
backgroundStyle: [
|
|
2195
|
-
handleIndicatorStyle: [
|
|
2289
|
+
backgroundStyle: [styles22.background, { backgroundColor: colors.card }],
|
|
2290
|
+
handleIndicatorStyle: [styles22.handle, { backgroundColor: colors.border }],
|
|
2196
2291
|
enablePanDownToClose: true
|
|
2197
2292
|
},
|
|
2198
|
-
/* @__PURE__ */
|
|
2293
|
+
/* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: maxHeight ? { maxHeight } : void 0 }, wrapKeyboard(useScroll ? /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetScrollView, { contentContainerStyle: [styles22.content, style] }, headerNode, children) : /* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles22.content, style] }, headerNode, children)))
|
|
2199
2294
|
);
|
|
2200
2295
|
}
|
|
2201
|
-
var
|
|
2296
|
+
var styles22 = reactNative.StyleSheet.create({
|
|
2202
2297
|
background: {
|
|
2203
2298
|
borderTopLeftRadius: ms(16),
|
|
2204
2299
|
borderTopRightRadius: ms(16)
|
|
@@ -2241,10 +2336,10 @@ function Select({
|
|
|
2241
2336
|
style
|
|
2242
2337
|
}) {
|
|
2243
2338
|
const { colors } = useTheme();
|
|
2244
|
-
const scale2 =
|
|
2245
|
-
const [pickerVisible, setPickerVisible] =
|
|
2246
|
-
const [pendingValue, setPendingValue] =
|
|
2247
|
-
const pickerRef =
|
|
2339
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
2340
|
+
const [pickerVisible, setPickerVisible] = React26.useState(false);
|
|
2341
|
+
const [pendingValue, setPendingValue] = React26.useState(value);
|
|
2342
|
+
const pickerRef = React26.useRef(null);
|
|
2248
2343
|
const selected = options.find((o) => o.value === value);
|
|
2249
2344
|
const handlePressIn = () => {
|
|
2250
2345
|
if (disabled) return;
|
|
@@ -2273,11 +2368,11 @@ function Select({
|
|
|
2273
2368
|
}
|
|
2274
2369
|
setPickerVisible(false);
|
|
2275
2370
|
};
|
|
2276
|
-
return /* @__PURE__ */
|
|
2371
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles23.container, style] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles23.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb2 ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2277
2372
|
reactNative.TouchableOpacity,
|
|
2278
2373
|
{
|
|
2279
2374
|
style: [
|
|
2280
|
-
|
|
2375
|
+
styles23.trigger,
|
|
2281
2376
|
{
|
|
2282
2377
|
borderColor: error ? colors.destructive : colors.border,
|
|
2283
2378
|
backgroundColor: colors.background
|
|
@@ -2289,11 +2384,11 @@ function Select({
|
|
|
2289
2384
|
activeOpacity: 1,
|
|
2290
2385
|
touchSoundDisabled: true
|
|
2291
2386
|
},
|
|
2292
|
-
/* @__PURE__ */
|
|
2387
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
2293
2388
|
reactNative.Text,
|
|
2294
2389
|
{
|
|
2295
2390
|
style: [
|
|
2296
|
-
|
|
2391
|
+
styles23.triggerText,
|
|
2297
2392
|
{ color: selected ? colors.foreground : colors.foregroundMuted }
|
|
2298
2393
|
],
|
|
2299
2394
|
numberOfLines: 1,
|
|
@@ -2301,8 +2396,8 @@ function Select({
|
|
|
2301
2396
|
},
|
|
2302
2397
|
selected?.label ?? placeholder
|
|
2303
2398
|
),
|
|
2304
|
-
/* @__PURE__ */
|
|
2305
|
-
)) : null, isIOS ? /* @__PURE__ */
|
|
2399
|
+
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-with-circle-down", size: 20, color: colors.foregroundMuted })
|
|
2400
|
+
)) : null, isIOS ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2306
2401
|
reactNative.Modal,
|
|
2307
2402
|
{
|
|
2308
2403
|
visible: pickerVisible,
|
|
@@ -2310,16 +2405,16 @@ function Select({
|
|
|
2310
2405
|
animationType: "slide",
|
|
2311
2406
|
onRequestClose: handleDismiss
|
|
2312
2407
|
},
|
|
2313
|
-
/* @__PURE__ */
|
|
2314
|
-
/* @__PURE__ */
|
|
2408
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.TouchableOpacity, { style: styles23.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
|
|
2409
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles23.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles23.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles23.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, null), /* @__PURE__ */ React26__default.default.createElement(reactNative.TouchableOpacity, { onPress: handleConfirm, style: styles23.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles23.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React26__default.default.createElement(
|
|
2315
2410
|
picker.Picker,
|
|
2316
2411
|
{
|
|
2317
2412
|
selectedValue: pendingValue ?? "",
|
|
2318
2413
|
onValueChange: (val) => setPendingValue(val),
|
|
2319
2414
|
itemStyle: { color: colors.foreground }
|
|
2320
2415
|
},
|
|
2321
|
-
!value ? /* @__PURE__ */
|
|
2322
|
-
options.map((o) => /* @__PURE__ */
|
|
2416
|
+
!value ? /* @__PURE__ */ React26__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", color: colors.foregroundMuted, enabled: false }) : null,
|
|
2417
|
+
options.map((o) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2323
2418
|
picker.Picker.Item,
|
|
2324
2419
|
{
|
|
2325
2420
|
key: o.value,
|
|
@@ -2330,7 +2425,7 @@ function Select({
|
|
|
2330
2425
|
}
|
|
2331
2426
|
))
|
|
2332
2427
|
))
|
|
2333
|
-
) : null, isAndroid ? /* @__PURE__ */
|
|
2428
|
+
) : null, isAndroid ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2334
2429
|
picker.Picker,
|
|
2335
2430
|
{
|
|
2336
2431
|
ref: pickerRef,
|
|
@@ -2344,10 +2439,10 @@ function Select({
|
|
|
2344
2439
|
mode: "dialog",
|
|
2345
2440
|
enabled: !disabled,
|
|
2346
2441
|
prompt: label,
|
|
2347
|
-
style:
|
|
2442
|
+
style: styles23.androidHiddenPicker
|
|
2348
2443
|
},
|
|
2349
|
-
!value ? /* @__PURE__ */
|
|
2350
|
-
options.map((o) => /* @__PURE__ */
|
|
2444
|
+
!value ? /* @__PURE__ */ React26__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
|
|
2445
|
+
options.map((o) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2351
2446
|
picker.Picker.Item,
|
|
2352
2447
|
{
|
|
2353
2448
|
key: o.value,
|
|
@@ -2356,7 +2451,7 @@ function Select({
|
|
|
2356
2451
|
enabled: !o.disabled
|
|
2357
2452
|
}
|
|
2358
2453
|
))
|
|
2359
|
-
) : null, isWeb2 ? /* @__PURE__ */
|
|
2454
|
+
) : null, isWeb2 ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2360
2455
|
picker.Picker,
|
|
2361
2456
|
{
|
|
2362
2457
|
selectedValue: value ?? "",
|
|
@@ -2367,7 +2462,7 @@ function Select({
|
|
|
2367
2462
|
},
|
|
2368
2463
|
enabled: !disabled,
|
|
2369
2464
|
style: [
|
|
2370
|
-
|
|
2465
|
+
styles23.webPicker,
|
|
2371
2466
|
{
|
|
2372
2467
|
borderColor: error ? colors.destructive : colors.border,
|
|
2373
2468
|
color: selected ? colors.foreground : colors.foregroundMuted,
|
|
@@ -2376,8 +2471,8 @@ function Select({
|
|
|
2376
2471
|
}
|
|
2377
2472
|
]
|
|
2378
2473
|
},
|
|
2379
|
-
/* @__PURE__ */
|
|
2380
|
-
options.map((o) => /* @__PURE__ */
|
|
2474
|
+
/* @__PURE__ */ React26__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", enabled: false }),
|
|
2475
|
+
options.map((o) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2381
2476
|
picker.Picker.Item,
|
|
2382
2477
|
{
|
|
2383
2478
|
key: o.value,
|
|
@@ -2386,9 +2481,9 @@ function Select({
|
|
|
2386
2481
|
enabled: !o.disabled
|
|
2387
2482
|
}
|
|
2388
2483
|
))
|
|
2389
|
-
) : null, error ? /* @__PURE__ */
|
|
2484
|
+
) : null, error ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles23.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null);
|
|
2390
2485
|
}
|
|
2391
|
-
var
|
|
2486
|
+
var styles23 = reactNative.StyleSheet.create({
|
|
2392
2487
|
container: {
|
|
2393
2488
|
gap: vs(8)
|
|
2394
2489
|
},
|
|
@@ -2458,14 +2553,14 @@ var styles22 = reactNative.StyleSheet.create({
|
|
|
2458
2553
|
fontSize: ms(15)
|
|
2459
2554
|
}
|
|
2460
2555
|
});
|
|
2461
|
-
var ToastContext =
|
|
2556
|
+
var ToastContext = React26.createContext({
|
|
2462
2557
|
toast: () => {
|
|
2463
2558
|
},
|
|
2464
2559
|
dismiss: () => {
|
|
2465
2560
|
}
|
|
2466
2561
|
});
|
|
2467
2562
|
function useToast() {
|
|
2468
|
-
return
|
|
2563
|
+
return React26.useContext(ToastContext);
|
|
2469
2564
|
}
|
|
2470
2565
|
var SWIPE_THRESHOLD = 80;
|
|
2471
2566
|
var VELOCITY_THRESHOLD = 800;
|
|
@@ -2474,7 +2569,7 @@ function ToastNotification({ item, onDismiss }) {
|
|
|
2474
2569
|
const translateY = Animated11.useSharedValue(-80);
|
|
2475
2570
|
const translateX = Animated11.useSharedValue(0);
|
|
2476
2571
|
const opacity = Animated11.useSharedValue(0);
|
|
2477
|
-
|
|
2572
|
+
React26.useEffect(() => {
|
|
2478
2573
|
translateY.value = Animated11.withTiming(0, { duration: 120, easing: Animated11.Easing.out(Animated11.Easing.exp) });
|
|
2479
2574
|
opacity.value = Animated11.withTiming(1, { duration: 100 });
|
|
2480
2575
|
const timer = setTimeout(() => {
|
|
@@ -2524,25 +2619,25 @@ function ToastNotification({ item, onDismiss }) {
|
|
|
2524
2619
|
}[variant];
|
|
2525
2620
|
const titleColor = variant === "default" ? colors.foreground : accentColor;
|
|
2526
2621
|
const descColor = variant === "default" ? colors.foregroundMuted : accentColor;
|
|
2527
|
-
const defaultIcon = variant === "success" ? /* @__PURE__ */
|
|
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 });
|
|
2528
2623
|
const leftIcon = item.iconName ? renderIcon(item.iconName, 16, item.iconColor ?? accentColor) : item.icon ?? defaultIcon;
|
|
2529
|
-
return /* @__PURE__ */
|
|
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(
|
|
2530
2625
|
reactNative.TouchableOpacity,
|
|
2531
2626
|
{
|
|
2532
2627
|
onPress: () => {
|
|
2533
2628
|
item.action.onPress();
|
|
2534
2629
|
onDismiss();
|
|
2535
2630
|
},
|
|
2536
|
-
style:
|
|
2631
|
+
style: styles24.actionButton,
|
|
2537
2632
|
touchSoundDisabled: true
|
|
2538
2633
|
},
|
|
2539
|
-
/* @__PURE__ */
|
|
2540
|
-
), /* @__PURE__ */
|
|
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 }))));
|
|
2541
2636
|
}
|
|
2542
2637
|
function ToastProvider({ children }) {
|
|
2543
|
-
const [toasts, setToasts] =
|
|
2638
|
+
const [toasts, setToasts] = React26.useState([]);
|
|
2544
2639
|
const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
|
|
2545
|
-
const toast =
|
|
2640
|
+
const toast = React26.useCallback((item) => {
|
|
2546
2641
|
const id = Math.random().toString(36).slice(2);
|
|
2547
2642
|
if (item.variant === "success") {
|
|
2548
2643
|
notificationSuccess();
|
|
@@ -2555,12 +2650,12 @@ function ToastProvider({ children }) {
|
|
|
2555
2650
|
}
|
|
2556
2651
|
setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
|
|
2557
2652
|
}, []);
|
|
2558
|
-
const dismiss =
|
|
2653
|
+
const dismiss = React26.useCallback((id) => {
|
|
2559
2654
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
2560
2655
|
}, []);
|
|
2561
|
-
return /* @__PURE__ */
|
|
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) }))));
|
|
2562
2657
|
}
|
|
2563
|
-
var
|
|
2658
|
+
var styles24 = reactNative.StyleSheet.create({
|
|
2564
2659
|
container: {
|
|
2565
2660
|
position: "absolute",
|
|
2566
2661
|
left: s(16),
|
|
@@ -2657,7 +2752,7 @@ function CurrencyInput({
|
|
|
2657
2752
|
const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
|
|
2658
2753
|
const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.foregroundMuted);
|
|
2659
2754
|
const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
|
|
2660
|
-
return /* @__PURE__ */
|
|
2755
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
2661
2756
|
Input,
|
|
2662
2757
|
{
|
|
2663
2758
|
value: displayValue,
|
|
@@ -2675,6 +2770,12 @@ function CurrencyInput({
|
|
|
2675
2770
|
}
|
|
2676
2771
|
);
|
|
2677
2772
|
}
|
|
2773
|
+
var variantFontSize = {
|
|
2774
|
+
hero: ms(48),
|
|
2775
|
+
large: ms(32),
|
|
2776
|
+
medium: ms(18),
|
|
2777
|
+
small: ms(14)
|
|
2778
|
+
};
|
|
2678
2779
|
function formatValue(value, prefix, showDecimals) {
|
|
2679
2780
|
const num = typeof value === "string" ? parseFloat(value.replace(/[^0-9.-]/g, "")) : value;
|
|
2680
2781
|
if (isNaN(num)) return `${prefix}0`;
|
|
@@ -2687,16 +2788,27 @@ function formatValue(value, prefix, showDecimals) {
|
|
|
2687
2788
|
}
|
|
2688
2789
|
return `${sign}${prefix}${intPart}`;
|
|
2689
2790
|
}
|
|
2690
|
-
function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, style }) {
|
|
2791
|
+
function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, variant, autoScale, maxFontSize, style }) {
|
|
2691
2792
|
const { colors } = useTheme();
|
|
2692
2793
|
const formatted = formatValue(value, prefix, showDecimals);
|
|
2693
|
-
|
|
2794
|
+
const baseFontSize = variant ? variantFontSize[variant] : ms(56);
|
|
2795
|
+
const fontSize = maxFontSize ?? baseFontSize;
|
|
2796
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles25.container, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2797
|
+
reactNative.Text,
|
|
2798
|
+
{
|
|
2799
|
+
style: [styles25.amount, { color: textColor ?? colors.foreground, fontSize }],
|
|
2800
|
+
allowFontScaling: true,
|
|
2801
|
+
numberOfLines: autoScale ? 1 : void 0,
|
|
2802
|
+
adjustsFontSizeToFit: autoScale,
|
|
2803
|
+
minimumFontScale: autoScale ? 0.5 : void 0
|
|
2804
|
+
},
|
|
2805
|
+
formatted
|
|
2806
|
+
));
|
|
2694
2807
|
}
|
|
2695
|
-
var
|
|
2808
|
+
var styles25 = reactNative.StyleSheet.create({
|
|
2696
2809
|
container: {},
|
|
2697
2810
|
amount: {
|
|
2698
2811
|
fontFamily: "Poppins-Bold",
|
|
2699
|
-
fontSize: ms(56),
|
|
2700
2812
|
letterSpacing: -2
|
|
2701
2813
|
}
|
|
2702
2814
|
});
|
|
@@ -2724,7 +2836,7 @@ function ListItem({
|
|
|
2724
2836
|
captionStyle
|
|
2725
2837
|
}) {
|
|
2726
2838
|
const { colors } = useTheme();
|
|
2727
|
-
const scale2 =
|
|
2839
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
2728
2840
|
const handlePressIn = () => {
|
|
2729
2841
|
if (!onPress || disabled) return;
|
|
2730
2842
|
reactNative.Animated.spring(scale2, {
|
|
@@ -2759,10 +2871,10 @@ function ListItem({
|
|
|
2759
2871
|
shadowRadius: 6,
|
|
2760
2872
|
elevation: 2
|
|
2761
2873
|
} : {};
|
|
2762
|
-
return /* @__PURE__ */
|
|
2874
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles26.disabled] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2763
2875
|
reactNative.TouchableOpacity,
|
|
2764
2876
|
{
|
|
2765
|
-
style: [
|
|
2877
|
+
style: [styles26.container, cardStyle, style],
|
|
2766
2878
|
onPress: onPress ? handlePress : void 0,
|
|
2767
2879
|
onPressIn: handlePressIn,
|
|
2768
2880
|
onPressOut: handlePressOut,
|
|
@@ -2770,51 +2882,51 @@ function ListItem({
|
|
|
2770
2882
|
activeOpacity: 1,
|
|
2771
2883
|
touchSoundDisabled: true
|
|
2772
2884
|
},
|
|
2773
|
-
effectiveLeft ? /* @__PURE__ */
|
|
2774
|
-
/* @__PURE__ */
|
|
2885
|
+
effectiveLeft ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.leftContainer }, effectiveLeft) : null,
|
|
2886
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.content }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2775
2887
|
reactNative.Text,
|
|
2776
2888
|
{
|
|
2777
|
-
style: [
|
|
2889
|
+
style: [styles26.title, { color: colors.foreground }, titleStyle],
|
|
2778
2890
|
numberOfLines: 2,
|
|
2779
2891
|
allowFontScaling: true
|
|
2780
2892
|
},
|
|
2781
2893
|
title
|
|
2782
|
-
), subtitle ? /* @__PURE__ */
|
|
2894
|
+
), subtitle ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2783
2895
|
reactNative.Text,
|
|
2784
2896
|
{
|
|
2785
|
-
style: [
|
|
2897
|
+
style: [styles26.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
|
|
2786
2898
|
numberOfLines: 2,
|
|
2787
2899
|
allowFontScaling: true
|
|
2788
2900
|
},
|
|
2789
2901
|
subtitle
|
|
2790
|
-
) : null, caption ? /* @__PURE__ */
|
|
2902
|
+
) : null, caption ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2791
2903
|
reactNative.Text,
|
|
2792
2904
|
{
|
|
2793
|
-
style: [
|
|
2905
|
+
style: [styles26.caption, { color: colors.foregroundMuted }, captionStyle],
|
|
2794
2906
|
numberOfLines: 1,
|
|
2795
2907
|
allowFontScaling: true
|
|
2796
2908
|
},
|
|
2797
2909
|
caption
|
|
2798
2910
|
) : null),
|
|
2799
|
-
effectiveRight !== void 0 ? /* @__PURE__ */
|
|
2911
|
+
effectiveRight !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2800
2912
|
reactNative.Text,
|
|
2801
2913
|
{
|
|
2802
|
-
style: [
|
|
2914
|
+
style: [styles26.rightText, { color: colors.foregroundMuted }],
|
|
2803
2915
|
allowFontScaling: true
|
|
2804
2916
|
},
|
|
2805
2917
|
effectiveRight
|
|
2806
|
-
) : effectiveRight) : showChevron ? /* @__PURE__ */
|
|
2807
|
-
), showSeparator ? /* @__PURE__ */
|
|
2918
|
+
) : effectiveRight) : showChevron ? /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null
|
|
2919
|
+
), showSeparator ? /* @__PURE__ */ React26__default.default.createElement(
|
|
2808
2920
|
reactNative.View,
|
|
2809
2921
|
{
|
|
2810
2922
|
style: [
|
|
2811
|
-
|
|
2923
|
+
styles26.separator,
|
|
2812
2924
|
{ backgroundColor: colors.border, marginLeft: effectiveLeft ? s(16) + s(44) + s(12) : s(16) }
|
|
2813
2925
|
]
|
|
2814
2926
|
}
|
|
2815
2927
|
) : null);
|
|
2816
2928
|
}
|
|
2817
|
-
var
|
|
2929
|
+
var styles26 = reactNative.StyleSheet.create({
|
|
2818
2930
|
container: {
|
|
2819
2931
|
flexDirection: "row",
|
|
2820
2932
|
alignItems: "center",
|
|
@@ -2873,9 +2985,9 @@ var styles25 = reactNative.StyleSheet.create({
|
|
|
2873
2985
|
var nativeDriver11 = reactNative.Platform.OS !== "web";
|
|
2874
2986
|
function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
2875
2987
|
const { colors } = useTheme();
|
|
2876
|
-
const scale2 =
|
|
2877
|
-
const pressAnim =
|
|
2878
|
-
|
|
2988
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
2989
|
+
const pressAnim = React26.useRef(new reactNative.Animated.Value(selected ? 1 : 0)).current;
|
|
2990
|
+
React26.useEffect(() => {
|
|
2879
2991
|
reactNative.Animated.timing(pressAnim, {
|
|
2880
2992
|
toValue: selected ? 1 : 0,
|
|
2881
2993
|
duration: 150,
|
|
@@ -2916,7 +3028,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
|
2916
3028
|
outputRange: [colors.border, colors.primary]
|
|
2917
3029
|
});
|
|
2918
3030
|
const resolvedIcon = iconName ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground) : icon;
|
|
2919
|
-
return /* @__PURE__ */
|
|
3031
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles27.wrapper, { transform: [{ scale: scale2 }] }, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
2920
3032
|
reactNative.TouchableOpacity,
|
|
2921
3033
|
{
|
|
2922
3034
|
onPress: handlePress,
|
|
@@ -2925,7 +3037,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style }) {
|
|
|
2925
3037
|
activeOpacity: 1,
|
|
2926
3038
|
touchSoundDisabled: true
|
|
2927
3039
|
},
|
|
2928
|
-
/* @__PURE__ */
|
|
3040
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: [styles27.chip, { backgroundColor, borderColor }] }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles27.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.Text, { style: [styles27.label, { color: textColor }], allowFontScaling: true }, label))
|
|
2929
3041
|
));
|
|
2930
3042
|
}
|
|
2931
3043
|
function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
|
|
@@ -2950,17 +3062,19 @@ function ChipGroup({ options, value, onValueChange, multiSelect = false, style }
|
|
|
2950
3062
|
}
|
|
2951
3063
|
return optionValue === value;
|
|
2952
3064
|
};
|
|
2953
|
-
return /* @__PURE__ */
|
|
3065
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles27.group, style] }, options.map((opt) => /* @__PURE__ */ React26__default.default.createElement(
|
|
2954
3066
|
Chip,
|
|
2955
3067
|
{
|
|
2956
3068
|
key: opt.value,
|
|
2957
3069
|
label: opt.label,
|
|
2958
3070
|
selected: isSelected(opt.value),
|
|
2959
|
-
onPress: () => handlePress(opt.value)
|
|
3071
|
+
onPress: opt.disabled ? void 0 : () => handlePress(opt.value),
|
|
3072
|
+
iconName: opt.iconName,
|
|
3073
|
+
style: opt.disabled ? { opacity: 0.4 } : void 0
|
|
2960
3074
|
}
|
|
2961
3075
|
)));
|
|
2962
3076
|
}
|
|
2963
|
-
var
|
|
3077
|
+
var styles27 = reactNative.StyleSheet.create({
|
|
2964
3078
|
wrapper: {},
|
|
2965
3079
|
chip: {
|
|
2966
3080
|
borderRadius: 999,
|
|
@@ -2998,8 +3112,8 @@ function ConfirmDialog({
|
|
|
2998
3112
|
onCancel
|
|
2999
3113
|
}) {
|
|
3000
3114
|
const { colors } = useTheme();
|
|
3001
|
-
const ref =
|
|
3002
|
-
|
|
3115
|
+
const ref = React26.useRef(null);
|
|
3116
|
+
React26.useEffect(() => {
|
|
3003
3117
|
if (visible) {
|
|
3004
3118
|
impactLight();
|
|
3005
3119
|
ref.current?.present();
|
|
@@ -3007,7 +3121,7 @@ function ConfirmDialog({
|
|
|
3007
3121
|
ref.current?.dismiss();
|
|
3008
3122
|
}
|
|
3009
3123
|
}, [visible]);
|
|
3010
|
-
const renderBackdrop = (props) => /* @__PURE__ */
|
|
3124
|
+
const renderBackdrop = (props) => /* @__PURE__ */ React26__default.default.createElement(
|
|
3011
3125
|
bottomSheet.BottomSheetBackdrop,
|
|
3012
3126
|
{
|
|
3013
3127
|
...props,
|
|
@@ -3016,25 +3130,25 @@ function ConfirmDialog({
|
|
|
3016
3130
|
pressBehavior: "close"
|
|
3017
3131
|
}
|
|
3018
3132
|
);
|
|
3019
|
-
return /* @__PURE__ */
|
|
3133
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
3020
3134
|
bottomSheet.BottomSheetModal,
|
|
3021
3135
|
{
|
|
3022
3136
|
ref,
|
|
3023
3137
|
enableDynamicSizing: true,
|
|
3024
3138
|
onDismiss: onCancel,
|
|
3025
3139
|
backdropComponent: renderBackdrop,
|
|
3026
|
-
backgroundStyle: [
|
|
3027
|
-
handleIndicatorStyle: [
|
|
3140
|
+
backgroundStyle: [styles28.background, { backgroundColor: colors.card }],
|
|
3141
|
+
handleIndicatorStyle: [styles28.handle, { backgroundColor: colors.border }],
|
|
3028
3142
|
enablePanDownToClose: true
|
|
3029
3143
|
},
|
|
3030
|
-
/* @__PURE__ */
|
|
3144
|
+
/* @__PURE__ */ React26__default.default.createElement(bottomSheet.BottomSheetView, { style: styles28.content }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles28.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles28.actions }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3031
3145
|
Button,
|
|
3032
3146
|
{
|
|
3033
3147
|
label: confirmLabel,
|
|
3034
3148
|
variant: confirmVariant,
|
|
3035
3149
|
fullWidth: true,
|
|
3036
3150
|
onPress: onConfirm,
|
|
3037
|
-
icon: /* @__PURE__ */
|
|
3151
|
+
icon: /* @__PURE__ */ React26__default.default.createElement(
|
|
3038
3152
|
vectorIcons.Feather,
|
|
3039
3153
|
{
|
|
3040
3154
|
name: confirmVariant === "destructive" ? "trash-2" : "check",
|
|
@@ -3043,19 +3157,19 @@ function ConfirmDialog({
|
|
|
3043
3157
|
}
|
|
3044
3158
|
)
|
|
3045
3159
|
}
|
|
3046
|
-
), /* @__PURE__ */
|
|
3160
|
+
), /* @__PURE__ */ React26__default.default.createElement(
|
|
3047
3161
|
Button,
|
|
3048
3162
|
{
|
|
3049
3163
|
label: cancelLabel,
|
|
3050
3164
|
variant: "secondary",
|
|
3051
3165
|
fullWidth: true,
|
|
3052
3166
|
onPress: onCancel,
|
|
3053
|
-
icon: /* @__PURE__ */
|
|
3167
|
+
icon: /* @__PURE__ */ React26__default.default.createElement(vectorIcons.Feather, { name: "x", size: 15, color: colors.foreground })
|
|
3054
3168
|
}
|
|
3055
3169
|
)))
|
|
3056
3170
|
);
|
|
3057
3171
|
}
|
|
3058
|
-
var
|
|
3172
|
+
var styles28 = reactNative.StyleSheet.create({
|
|
3059
3173
|
background: {
|
|
3060
3174
|
borderTopLeftRadius: ms(16),
|
|
3061
3175
|
borderTopRightRadius: ms(16)
|
|
@@ -3085,17 +3199,27 @@ var styles27 = reactNative.StyleSheet.create({
|
|
|
3085
3199
|
marginTop: vs(8)
|
|
3086
3200
|
}
|
|
3087
3201
|
});
|
|
3088
|
-
function LabelValue({ label, value, style }) {
|
|
3202
|
+
function LabelValue({ label, value, iconName, iconColor, style }) {
|
|
3089
3203
|
const { colors } = useTheme();
|
|
3090
|
-
|
|
3204
|
+
const resolvedIcon = iconName ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted) : null;
|
|
3205
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles29.container, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles29.labelSide }, resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles29.icon }, resolvedIcon) : null, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles29.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label)), typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles29.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
|
|
3091
3206
|
}
|
|
3092
|
-
var
|
|
3207
|
+
var styles29 = reactNative.StyleSheet.create({
|
|
3093
3208
|
container: {
|
|
3094
3209
|
flexDirection: "row",
|
|
3095
3210
|
justifyContent: "space-between",
|
|
3096
3211
|
alignItems: "center",
|
|
3097
3212
|
gap: s(12)
|
|
3098
3213
|
},
|
|
3214
|
+
labelSide: {
|
|
3215
|
+
flexDirection: "row",
|
|
3216
|
+
alignItems: "center",
|
|
3217
|
+
gap: s(4)
|
|
3218
|
+
},
|
|
3219
|
+
icon: {
|
|
3220
|
+
alignItems: "center",
|
|
3221
|
+
justifyContent: "center"
|
|
3222
|
+
},
|
|
3099
3223
|
label: {
|
|
3100
3224
|
fontFamily: "Poppins-Regular",
|
|
3101
3225
|
fontSize: ms(13),
|
|
@@ -3108,22 +3232,19 @@ var styles28 = reactNative.StyleSheet.create({
|
|
|
3108
3232
|
textAlign: "right"
|
|
3109
3233
|
}
|
|
3110
3234
|
});
|
|
3111
|
-
var MONTH_NAMES =
|
|
3112
|
-
"January",
|
|
3113
|
-
"
|
|
3114
|
-
"
|
|
3115
|
-
"
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
"July",
|
|
3119
|
-
"August",
|
|
3120
|
-
"September",
|
|
3121
|
-
"October",
|
|
3122
|
-
"November",
|
|
3123
|
-
"December"
|
|
3124
|
-
];
|
|
3125
|
-
function MonthPicker({ value, onChange, style }) {
|
|
3235
|
+
var MONTH_NAMES = {
|
|
3236
|
+
en: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
|
3237
|
+
es: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
|
|
3238
|
+
pt: ["janeiro", "fevereiro", "mar\xE7o", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"],
|
|
3239
|
+
fr: ["janvier", "f\xE9vrier", "mars", "avril", "mai", "juin", "juillet", "ao\xFBt", "septembre", "octobre", "novembre", "d\xE9cembre"]
|
|
3240
|
+
};
|
|
3241
|
+
function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
|
|
3126
3242
|
const { colors } = useTheme();
|
|
3243
|
+
const getLabel = () => {
|
|
3244
|
+
if (formatLabel) return formatLabel(value);
|
|
3245
|
+
const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en;
|
|
3246
|
+
return `${names[value.month - 1]} ${value.year}`;
|
|
3247
|
+
};
|
|
3127
3248
|
const handlePrev = () => {
|
|
3128
3249
|
selectionAsync();
|
|
3129
3250
|
if (value.month === 1) {
|
|
@@ -3140,27 +3261,27 @@ function MonthPicker({ value, onChange, style }) {
|
|
|
3140
3261
|
onChange({ month: value.month + 1, year: value.year });
|
|
3141
3262
|
}
|
|
3142
3263
|
};
|
|
3143
|
-
return /* @__PURE__ */
|
|
3264
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles30.container, style] }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3144
3265
|
reactNative.TouchableOpacity,
|
|
3145
3266
|
{
|
|
3146
|
-
style:
|
|
3267
|
+
style: styles30.arrow,
|
|
3147
3268
|
onPress: handlePrev,
|
|
3148
3269
|
activeOpacity: 0.6,
|
|
3149
3270
|
touchSoundDisabled: true
|
|
3150
3271
|
},
|
|
3151
|
-
/* @__PURE__ */
|
|
3152
|
-
), /* @__PURE__ */
|
|
3272
|
+
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
|
|
3273
|
+
), /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles30.label, { color: colors.foreground }], allowFontScaling: true }, getLabel()), /* @__PURE__ */ React26__default.default.createElement(
|
|
3153
3274
|
reactNative.TouchableOpacity,
|
|
3154
3275
|
{
|
|
3155
|
-
style:
|
|
3276
|
+
style: styles30.arrow,
|
|
3156
3277
|
onPress: handleNext,
|
|
3157
3278
|
activeOpacity: 0.6,
|
|
3158
3279
|
touchSoundDisabled: true
|
|
3159
3280
|
},
|
|
3160
|
-
/* @__PURE__ */
|
|
3281
|
+
/* @__PURE__ */ React26__default.default.createElement(vectorIcons.Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
|
|
3161
3282
|
));
|
|
3162
3283
|
}
|
|
3163
|
-
var
|
|
3284
|
+
var styles30 = reactNative.StyleSheet.create({
|
|
3164
3285
|
container: {
|
|
3165
3286
|
flexDirection: "row",
|
|
3166
3287
|
alignItems: "center",
|
|
@@ -3181,9 +3302,9 @@ var styles29 = reactNative.StyleSheet.create({
|
|
|
3181
3302
|
}
|
|
3182
3303
|
});
|
|
3183
3304
|
function useHover() {
|
|
3184
|
-
const [hovered, setHovered] =
|
|
3185
|
-
const onMouseEnter =
|
|
3186
|
-
const onMouseLeave =
|
|
3305
|
+
const [hovered, setHovered] = React26.useState(false);
|
|
3306
|
+
const onMouseEnter = React26.useCallback(() => setHovered(true), []);
|
|
3307
|
+
const onMouseLeave = React26.useCallback(() => setHovered(false), []);
|
|
3187
3308
|
if (reactNative.Platform.OS !== "web") {
|
|
3188
3309
|
return { hovered: false, hoverHandlers: {} };
|
|
3189
3310
|
}
|
|
@@ -3216,7 +3337,7 @@ function MediaCard({
|
|
|
3216
3337
|
footer
|
|
3217
3338
|
}) {
|
|
3218
3339
|
const { colors } = useTheme();
|
|
3219
|
-
const scale2 =
|
|
3340
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
3220
3341
|
const { hovered, hoverHandlers } = useHover();
|
|
3221
3342
|
const handlePressIn = () => {
|
|
3222
3343
|
if (!onPress) return;
|
|
@@ -3233,27 +3354,27 @@ function MediaCard({
|
|
|
3233
3354
|
};
|
|
3234
3355
|
const ratio = aspectRatioMap[aspectRatio];
|
|
3235
3356
|
const resolvedActionIcon = actionIconName ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background) : actionIcon ?? renderIcon("heart", 18, actionActive ? colors.primary : colors.background);
|
|
3236
|
-
const cardContent = /* @__PURE__ */
|
|
3357
|
+
const cardContent = /* @__PURE__ */ React26__default.default.createElement(
|
|
3237
3358
|
reactNative.View,
|
|
3238
3359
|
{
|
|
3239
3360
|
style: [
|
|
3240
|
-
|
|
3241
|
-
hovered &&
|
|
3361
|
+
styles31.card,
|
|
3362
|
+
hovered && styles31.cardHovered,
|
|
3242
3363
|
style
|
|
3243
3364
|
],
|
|
3244
3365
|
...reactNative.Platform.OS === "web" ? hoverHandlers : {}
|
|
3245
3366
|
},
|
|
3246
|
-
/* @__PURE__ */
|
|
3367
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles31.imageContainer, imageStyle] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: reactNative.StyleSheet.absoluteFill }, imageSource ? /* @__PURE__ */ React26__default.default.createElement(
|
|
3247
3368
|
reactNative.Image,
|
|
3248
3369
|
{
|
|
3249
3370
|
source: imageSource,
|
|
3250
|
-
style:
|
|
3371
|
+
style: styles31.image,
|
|
3251
3372
|
resizeMode: "cover"
|
|
3252
3373
|
}
|
|
3253
|
-
) : /* @__PURE__ */
|
|
3374
|
+
) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles31.imagePlaceholder, { backgroundColor: colors.surface }] }))), badge && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.badgeContainer }, badge), (onActionPress || actionIcon || actionIconName) && /* @__PURE__ */ React26__default.default.createElement(
|
|
3254
3375
|
reactNative.TouchableOpacity,
|
|
3255
3376
|
{
|
|
3256
|
-
style: [
|
|
3377
|
+
style: [styles31.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
|
|
3257
3378
|
onPress: () => {
|
|
3258
3379
|
impactLight();
|
|
3259
3380
|
onActionPress?.();
|
|
@@ -3263,10 +3384,10 @@ function MediaCard({
|
|
|
3263
3384
|
},
|
|
3264
3385
|
resolvedActionIcon
|
|
3265
3386
|
)),
|
|
3266
|
-
(title || subtitle || caption || footer) && /* @__PURE__ */
|
|
3387
|
+
(title || subtitle || caption || footer) && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles31.meta }, title ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles31.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
|
|
3267
3388
|
);
|
|
3268
3389
|
if (onPress) {
|
|
3269
|
-
return /* @__PURE__ */
|
|
3390
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3270
3391
|
reactNative.TouchableOpacity,
|
|
3271
3392
|
{
|
|
3272
3393
|
onPress: handlePress,
|
|
@@ -3280,7 +3401,7 @@ function MediaCard({
|
|
|
3280
3401
|
}
|
|
3281
3402
|
return cardContent;
|
|
3282
3403
|
}
|
|
3283
|
-
var
|
|
3404
|
+
var styles31 = reactNative.StyleSheet.create({
|
|
3284
3405
|
card: {
|
|
3285
3406
|
borderRadius: RADIUS.md,
|
|
3286
3407
|
// 14px — Airbnb property card spec
|
|
@@ -3345,7 +3466,7 @@ function CategoryChip({
|
|
|
3345
3466
|
onPress
|
|
3346
3467
|
}) {
|
|
3347
3468
|
const { colors } = useTheme();
|
|
3348
|
-
const scale2 =
|
|
3469
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
3349
3470
|
const handlePressIn = () => {
|
|
3350
3471
|
reactNative.Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver13, speed: 40, bounciness: 0 }).start();
|
|
3351
3472
|
};
|
|
@@ -3356,11 +3477,11 @@ function CategoryChip({
|
|
|
3356
3477
|
const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
|
|
3357
3478
|
const borderColor = selected ? colors.primary : colors.border;
|
|
3358
3479
|
const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, textColor) : item.icon ?? null;
|
|
3359
|
-
return /* @__PURE__ */
|
|
3480
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3360
3481
|
reactNative.TouchableOpacity,
|
|
3361
3482
|
{
|
|
3362
3483
|
style: [
|
|
3363
|
-
|
|
3484
|
+
styles32.chip,
|
|
3364
3485
|
{
|
|
3365
3486
|
backgroundColor: bgColor,
|
|
3366
3487
|
borderColor
|
|
@@ -3372,9 +3493,9 @@ function CategoryChip({
|
|
|
3372
3493
|
activeOpacity: 1,
|
|
3373
3494
|
touchSoundDisabled: true
|
|
3374
3495
|
},
|
|
3375
|
-
resolvedIcon && /* @__PURE__ */
|
|
3376
|
-
/* @__PURE__ */
|
|
3377
|
-
item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */
|
|
3496
|
+
resolvedIcon && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles32.chipIcon }, resolvedIcon),
|
|
3497
|
+
/* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles32.chipLabel, { color: textColor }], allowFontScaling: true }, item.label),
|
|
3498
|
+
item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles32.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.Text, { style: [styles32.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
|
|
3378
3499
|
));
|
|
3379
3500
|
}
|
|
3380
3501
|
function CategoryStrip({
|
|
@@ -3396,15 +3517,15 @@ function CategoryStrip({
|
|
|
3396
3517
|
onValueChange?.(v === value ? "" : v);
|
|
3397
3518
|
}
|
|
3398
3519
|
};
|
|
3399
|
-
return /* @__PURE__ */
|
|
3520
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
3400
3521
|
reactNative.ScrollView,
|
|
3401
3522
|
{
|
|
3402
3523
|
horizontal: true,
|
|
3403
3524
|
showsHorizontalScrollIndicator: false,
|
|
3404
|
-
contentContainerStyle: [
|
|
3405
|
-
style:
|
|
3525
|
+
contentContainerStyle: [styles32.container, style],
|
|
3526
|
+
style: styles32.scroll
|
|
3406
3527
|
},
|
|
3407
|
-
categories.map((cat) => /* @__PURE__ */
|
|
3528
|
+
categories.map((cat) => /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { key: cat.value, style: itemStyle }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3408
3529
|
CategoryChip,
|
|
3409
3530
|
{
|
|
3410
3531
|
item: cat,
|
|
@@ -3414,7 +3535,7 @@ function CategoryStrip({
|
|
|
3414
3535
|
)))
|
|
3415
3536
|
);
|
|
3416
3537
|
}
|
|
3417
|
-
var
|
|
3538
|
+
var styles32 = reactNative.StyleSheet.create({
|
|
3418
3539
|
scroll: {
|
|
3419
3540
|
flexGrow: 0
|
|
3420
3541
|
},
|
|
@@ -3467,7 +3588,7 @@ function Pressable2({
|
|
|
3467
3588
|
hoverScale = 1.02,
|
|
3468
3589
|
...touchableProps
|
|
3469
3590
|
}) {
|
|
3470
|
-
const scale2 =
|
|
3591
|
+
const scale2 = React26.useRef(new reactNative.Animated.Value(1)).current;
|
|
3471
3592
|
const { hovered, hoverHandlers } = useHover();
|
|
3472
3593
|
const handlePressIn = () => {
|
|
3473
3594
|
if (disabled) return;
|
|
@@ -3493,7 +3614,7 @@ function Pressable2({
|
|
|
3493
3614
|
onPress();
|
|
3494
3615
|
};
|
|
3495
3616
|
const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1;
|
|
3496
|
-
return /* @__PURE__ */
|
|
3617
|
+
return /* @__PURE__ */ React26__default.default.createElement(
|
|
3497
3618
|
reactNative.Animated.View,
|
|
3498
3619
|
{
|
|
3499
3620
|
style: [
|
|
@@ -3502,7 +3623,7 @@ function Pressable2({
|
|
|
3502
3623
|
],
|
|
3503
3624
|
...reactNative.Platform.OS === "web" ? hoverHandlers : {}
|
|
3504
3625
|
},
|
|
3505
|
-
/* @__PURE__ */
|
|
3626
|
+
/* @__PURE__ */ React26__default.default.createElement(
|
|
3506
3627
|
reactNative.TouchableOpacity,
|
|
3507
3628
|
{
|
|
3508
3629
|
onPress: handlePress,
|
|
@@ -3517,6 +3638,103 @@ function Pressable2({
|
|
|
3517
3638
|
)
|
|
3518
3639
|
);
|
|
3519
3640
|
}
|
|
3641
|
+
var weightMap = {
|
|
3642
|
+
normal: "Poppins-Regular",
|
|
3643
|
+
medium: "Poppins-Medium",
|
|
3644
|
+
semibold: "Poppins-SemiBold",
|
|
3645
|
+
bold: "Poppins-Bold"
|
|
3646
|
+
};
|
|
3647
|
+
function DetailRow({
|
|
3648
|
+
label,
|
|
3649
|
+
value,
|
|
3650
|
+
separator = "dotted",
|
|
3651
|
+
labelWeight = "normal",
|
|
3652
|
+
valueColor,
|
|
3653
|
+
leftIcon,
|
|
3654
|
+
leftIconName,
|
|
3655
|
+
leftIconColor,
|
|
3656
|
+
rightIconName,
|
|
3657
|
+
rightIconColor,
|
|
3658
|
+
style,
|
|
3659
|
+
labelStyle,
|
|
3660
|
+
valueStyle
|
|
3661
|
+
}) {
|
|
3662
|
+
const { colors } = useTheme();
|
|
3663
|
+
const resolvedLeftIcon = leftIconName ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted) : leftIcon;
|
|
3664
|
+
const resolvedRightIcon = rightIconName ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted) : null;
|
|
3665
|
+
const separatorStyle = separator === "none" ? null : {
|
|
3666
|
+
flex: 1,
|
|
3667
|
+
height: 1,
|
|
3668
|
+
borderBottomWidth: 1,
|
|
3669
|
+
borderStyle: separator,
|
|
3670
|
+
borderColor: "rgba(128,128,128,0.3)",
|
|
3671
|
+
marginHorizontal: s(4)
|
|
3672
|
+
};
|
|
3673
|
+
return /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: [styles33.row, style] }, /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.labelSide }, resolvedLeftIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedLeftIcon) : null, typeof label === "string" ? /* @__PURE__ */ React26__default.default.createElement(
|
|
3674
|
+
reactNative.Text,
|
|
3675
|
+
{
|
|
3676
|
+
style: [styles33.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle],
|
|
3677
|
+
allowFontScaling: true
|
|
3678
|
+
},
|
|
3679
|
+
label
|
|
3680
|
+
) : label), separatorStyle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: separatorStyle }) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.spacer }), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.valueSide }, /* @__PURE__ */ React26__default.default.createElement(
|
|
3681
|
+
reactNative.Text,
|
|
3682
|
+
{
|
|
3683
|
+
style: [styles33.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
|
|
3684
|
+
allowFontScaling: true
|
|
3685
|
+
},
|
|
3686
|
+
value
|
|
3687
|
+
), resolvedRightIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedRightIcon) : null));
|
|
3688
|
+
}
|
|
3689
|
+
var styles33 = reactNative.StyleSheet.create({
|
|
3690
|
+
row: {
|
|
3691
|
+
flexDirection: "row",
|
|
3692
|
+
alignItems: "center",
|
|
3693
|
+
gap: s(4)
|
|
3694
|
+
},
|
|
3695
|
+
labelSide: {
|
|
3696
|
+
flexDirection: "row",
|
|
3697
|
+
alignItems: "center",
|
|
3698
|
+
gap: s(4),
|
|
3699
|
+
flexShrink: 0
|
|
3700
|
+
},
|
|
3701
|
+
icon: {
|
|
3702
|
+
alignItems: "center",
|
|
3703
|
+
justifyContent: "center"
|
|
3704
|
+
},
|
|
3705
|
+
spacer: {
|
|
3706
|
+
flex: 1
|
|
3707
|
+
},
|
|
3708
|
+
labelText: {
|
|
3709
|
+
fontSize: ms(13),
|
|
3710
|
+
lineHeight: mvs(18)
|
|
3711
|
+
},
|
|
3712
|
+
valueSide: {
|
|
3713
|
+
flexDirection: "row",
|
|
3714
|
+
alignItems: "center",
|
|
3715
|
+
gap: s(4),
|
|
3716
|
+
flexShrink: 0
|
|
3717
|
+
},
|
|
3718
|
+
valueText: {
|
|
3719
|
+
fontFamily: "Poppins-SemiBold",
|
|
3720
|
+
fontSize: ms(13),
|
|
3721
|
+
lineHeight: mvs(18)
|
|
3722
|
+
}
|
|
3723
|
+
});
|
|
3724
|
+
|
|
3725
|
+
// src/utils/typography.ts
|
|
3726
|
+
function getResponsiveFontSize(text, maxSize, steps = [
|
|
3727
|
+
{ maxLen: 10, subtract: 0 },
|
|
3728
|
+
{ maxLen: 12, subtract: 4 },
|
|
3729
|
+
{ maxLen: 14, subtract: 6 }
|
|
3730
|
+
]) {
|
|
3731
|
+
const len = text.length;
|
|
3732
|
+
const sorted = [...steps].sort((a, b) => a.maxLen - b.maxLen);
|
|
3733
|
+
for (const step of sorted) {
|
|
3734
|
+
if (len <= step.maxLen) return maxSize - step.subtract;
|
|
3735
|
+
}
|
|
3736
|
+
return maxSize - 8;
|
|
3737
|
+
}
|
|
3520
3738
|
|
|
3521
3739
|
Object.defineProperty(exports, "BottomSheetModalProvider", {
|
|
3522
3740
|
enumerable: true,
|
|
@@ -3528,6 +3746,7 @@ exports.Avatar = Avatar;
|
|
|
3528
3746
|
exports.BREAKPOINTS = BREAKPOINTS;
|
|
3529
3747
|
exports.Badge = Badge;
|
|
3530
3748
|
exports.Button = Button;
|
|
3749
|
+
exports.ButtonGroup = ButtonGroup;
|
|
3531
3750
|
exports.Card = Card;
|
|
3532
3751
|
exports.CardContent = CardContent;
|
|
3533
3752
|
exports.CardDescription = CardDescription;
|
|
@@ -3542,6 +3761,7 @@ exports.ConfirmDialog = ConfirmDialog;
|
|
|
3542
3761
|
exports.CurrencyDisplay = CurrencyDisplay;
|
|
3543
3762
|
exports.CurrencyInput = CurrencyInput;
|
|
3544
3763
|
exports.CurrencyInputLarge = CurrencyInput;
|
|
3764
|
+
exports.DetailRow = DetailRow;
|
|
3545
3765
|
exports.EmptyState = EmptyState;
|
|
3546
3766
|
exports.ICON_SIZES = ICON_SIZES;
|
|
3547
3767
|
exports.Icon = Icon;
|
|
@@ -3575,6 +3795,7 @@ exports.Toggle = Toggle;
|
|
|
3575
3795
|
exports.defaultDark = defaultDark;
|
|
3576
3796
|
exports.defaultLight = defaultLight;
|
|
3577
3797
|
exports.deriveColors = deriveColors;
|
|
3798
|
+
exports.getResponsiveFontSize = getResponsiveFontSize;
|
|
3578
3799
|
exports.renderIcon = renderIcon;
|
|
3579
3800
|
exports.useTheme = useTheme;
|
|
3580
3801
|
exports.useToast = useToast;
|