@retray-dev/ui-kit 1.7.0 → 2.3.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 +258 -54
- package/README.md +6 -5
- package/dist/index.d.mts +113 -44
- package/dist/index.d.ts +113 -44
- package/dist/index.js +802 -324
- package/dist/index.mjs +794 -323
- package/package.json +6 -2
- package/src/components/Alert/Alert.tsx +24 -12
- package/src/components/AlertBanner/AlertBanner.tsx +83 -0
- package/src/components/AlertBanner/index.ts +2 -0
- package/src/components/Avatar/Avatar.tsx +1 -0
- package/src/components/Badge/Badge.tsx +44 -8
- package/src/components/Button/Button.tsx +12 -5
- package/src/components/Card/Card.tsx +86 -9
- package/src/components/Chip/Chip.tsx +173 -0
- package/src/components/Chip/index.ts +2 -0
- package/src/components/ConfirmDialog/ConfirmDialog.tsx +87 -0
- package/src/components/ConfirmDialog/index.ts +2 -0
- package/src/components/CurrencyDisplay/CurrencyDisplay.tsx +4 -2
- package/src/components/CurrencyInput/CurrencyInput.tsx +9 -1
- package/src/components/EmptyState/EmptyState.tsx +42 -7
- package/src/components/Input/Input.tsx +102 -21
- package/src/components/LabelValue/LabelValue.tsx +47 -0
- package/src/components/LabelValue/index.ts +2 -0
- package/src/components/ListItem/ListItem.tsx +121 -0
- package/src/components/ListItem/index.ts +2 -0
- package/src/components/MonthPicker/MonthPicker.tsx +92 -0
- package/src/components/MonthPicker/index.ts +2 -0
- package/src/components/Select/Select.tsx +189 -125
- package/src/components/Slider/Slider.tsx +64 -100
- package/src/components/Switch/Switch.tsx +25 -21
- package/src/components/Textarea/Textarea.tsx +12 -2
- package/src/components/Toggle/Toggle.tsx +13 -6
- package/src/index.ts +8 -2
- package/src/theme/ThemeProvider.tsx +11 -8
- package/src/theme/colors.ts +19 -18
- package/src/theme/types.ts +2 -0
- package/src/components/Alert/index.ts +0 -2
- package/src/components/CurrencyInputLarge/CurrencyInputLarge.tsx +0 -66
- package/src/components/CurrencyInputLarge/index.ts +0 -1
package/dist/index.js
CHANGED
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var React23 = require('react');
|
|
4
4
|
var reactNative = require('react-native');
|
|
5
|
-
var
|
|
5
|
+
var Haptics12 = require('expo-haptics');
|
|
6
6
|
var expoLinearGradient = require('expo-linear-gradient');
|
|
7
7
|
var ReanimatedAnimated = require('react-native-reanimated');
|
|
8
|
+
var RNSlider = require('@react-native-community/slider');
|
|
8
9
|
var bottomSheet = require('@gorhom/bottom-sheet');
|
|
10
|
+
var picker = require('@react-native-picker/picker');
|
|
9
11
|
var reactNativeWorklets = require('react-native-worklets');
|
|
10
12
|
var reactNativeGestureHandler = require('react-native-gesture-handler');
|
|
11
13
|
var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
@@ -31,8 +33,9 @@ function _interopNamespace(e) {
|
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
var React23__default = /*#__PURE__*/_interopDefault(React23);
|
|
34
|
-
var
|
|
36
|
+
var Haptics12__namespace = /*#__PURE__*/_interopNamespace(Haptics12);
|
|
35
37
|
var ReanimatedAnimated__default = /*#__PURE__*/_interopDefault(ReanimatedAnimated);
|
|
38
|
+
var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
|
|
36
39
|
|
|
37
40
|
// src/theme/ThemeProvider.tsx
|
|
38
41
|
|
|
@@ -43,41 +46,41 @@ var defaultLight = {
|
|
|
43
46
|
card: "#ffffff",
|
|
44
47
|
cardForeground: "#171717",
|
|
45
48
|
primary: "#1a1a1a",
|
|
46
|
-
primaryForeground: "#
|
|
47
|
-
secondary: "#
|
|
48
|
-
secondaryForeground: "#
|
|
49
|
-
muted: "#
|
|
50
|
-
mutedForeground: "#
|
|
51
|
-
accent: "#
|
|
52
|
-
accentForeground: "#
|
|
49
|
+
primaryForeground: "#ffffff",
|
|
50
|
+
secondary: "#f1f1f1",
|
|
51
|
+
secondaryForeground: "#171717",
|
|
52
|
+
muted: "#f1f1f1",
|
|
53
|
+
mutedForeground: "#a2a2a2",
|
|
54
|
+
accent: "#e4e4e4",
|
|
55
|
+
accentForeground: "#171717",
|
|
53
56
|
destructive: "#ef4444",
|
|
54
|
-
destructiveForeground: "#
|
|
57
|
+
destructiveForeground: "#1a1a1a",
|
|
55
58
|
border: "#e5e5e5",
|
|
56
59
|
input: "#e5e5e5",
|
|
57
|
-
ring: "#
|
|
60
|
+
ring: "#1a1a1a",
|
|
58
61
|
success: "#16a34a",
|
|
59
|
-
successForeground: "#
|
|
62
|
+
successForeground: "#1a1a1a"
|
|
60
63
|
};
|
|
61
64
|
var defaultDark = {
|
|
62
65
|
background: "#171717",
|
|
63
66
|
foreground: "#fafafa",
|
|
64
|
-
card: "#
|
|
67
|
+
card: "#222222",
|
|
65
68
|
cardForeground: "#fafafa",
|
|
66
69
|
primary: "#fafafa",
|
|
67
70
|
primaryForeground: "#1a1a1a",
|
|
68
|
-
secondary: "#
|
|
71
|
+
secondary: "#323232",
|
|
69
72
|
secondaryForeground: "#fafafa",
|
|
70
|
-
muted: "#
|
|
71
|
-
mutedForeground: "#
|
|
72
|
-
accent: "#
|
|
73
|
+
muted: "#323232",
|
|
74
|
+
mutedForeground: "#888888",
|
|
75
|
+
accent: "#323232",
|
|
73
76
|
accentForeground: "#fafafa",
|
|
74
77
|
destructive: "#dc2626",
|
|
75
|
-
destructiveForeground: "#
|
|
78
|
+
destructiveForeground: "#1a1a1a",
|
|
76
79
|
border: "#2a2a2a",
|
|
77
80
|
input: "#2a2a2a",
|
|
78
|
-
ring: "#
|
|
81
|
+
ring: "#fafafa",
|
|
79
82
|
success: "#22c55e",
|
|
80
|
-
successForeground: "#
|
|
83
|
+
successForeground: "#1a1a1a"
|
|
81
84
|
};
|
|
82
85
|
|
|
83
86
|
// src/theme/ThemeProvider.tsx
|
|
@@ -90,14 +93,19 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
|
|
|
90
93
|
const resolvedScheme = colorScheme === "system" ? systemScheme : colorScheme;
|
|
91
94
|
const colors = React23.useMemo(() => {
|
|
92
95
|
const base = resolvedScheme === "dark" ? defaultDark : defaultLight;
|
|
93
|
-
const
|
|
94
|
-
return { ...base, ...
|
|
96
|
+
const override = resolvedScheme === "dark" ? theme?.dark : theme?.light;
|
|
97
|
+
return override ? { ...base, ...override } : base;
|
|
95
98
|
}, [resolvedScheme, theme]);
|
|
96
99
|
return /* @__PURE__ */ React23__default.default.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
|
|
97
100
|
}
|
|
98
101
|
function useTheme() {
|
|
99
|
-
|
|
102
|
+
const context = React23.useContext(ThemeContext);
|
|
103
|
+
if (!context) {
|
|
104
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
105
|
+
}
|
|
106
|
+
return context;
|
|
100
107
|
}
|
|
108
|
+
var nativeDriver = reactNative.Platform.OS !== "web";
|
|
101
109
|
var containerSizeStyles = {
|
|
102
110
|
sm: { paddingHorizontal: 20, paddingVertical: 12 },
|
|
103
111
|
md: { paddingHorizontal: 24, paddingVertical: 16 },
|
|
@@ -128,31 +136,33 @@ function Button({
|
|
|
128
136
|
if (isDisabled) return;
|
|
129
137
|
reactNative.Animated.spring(scale, {
|
|
130
138
|
toValue: 0.95,
|
|
131
|
-
useNativeDriver:
|
|
139
|
+
useNativeDriver: nativeDriver,
|
|
132
140
|
speed: 40,
|
|
133
141
|
bounciness: 0
|
|
134
142
|
}).start();
|
|
135
143
|
};
|
|
136
144
|
const handlePressOut = () => {
|
|
137
|
-
reactNative.Animated.spring(scale, { toValue: 1, useNativeDriver:
|
|
145
|
+
reactNative.Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
|
|
138
146
|
};
|
|
139
147
|
const handlePress = (e) => {
|
|
140
|
-
|
|
148
|
+
Haptics12__namespace.impactAsync(Haptics12__namespace.ImpactFeedbackStyle.Light);
|
|
141
149
|
onPress?.(e);
|
|
142
150
|
};
|
|
143
151
|
const containerVariantStyle = {
|
|
144
152
|
primary: { backgroundColor: colors.primary },
|
|
145
153
|
secondary: { backgroundColor: colors.secondary },
|
|
146
154
|
outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
|
|
147
|
-
ghost: { backgroundColor: "transparent" }
|
|
155
|
+
ghost: { backgroundColor: "transparent" },
|
|
156
|
+
destructive: { backgroundColor: colors.destructive }
|
|
148
157
|
}[variant];
|
|
149
158
|
const labelVariantStyle = {
|
|
150
159
|
primary: { color: colors.primaryForeground },
|
|
151
160
|
secondary: { color: colors.secondaryForeground },
|
|
152
161
|
outline: { color: colors.foreground },
|
|
153
|
-
ghost: { color: colors.foreground }
|
|
162
|
+
ghost: { color: colors.foreground },
|
|
163
|
+
destructive: { color: colors.destructiveForeground }
|
|
154
164
|
}[variant];
|
|
155
|
-
const spinnerColor = variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
|
|
165
|
+
const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
|
|
156
166
|
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale }] }] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
157
167
|
reactNative.TouchableOpacity,
|
|
158
168
|
{
|
|
@@ -186,7 +196,7 @@ var styles = reactNative.StyleSheet.create({
|
|
|
186
196
|
width: "100%"
|
|
187
197
|
},
|
|
188
198
|
disabled: {
|
|
189
|
-
opacity: 0.
|
|
199
|
+
opacity: 0.5
|
|
190
200
|
},
|
|
191
201
|
label: {
|
|
192
202
|
fontWeight: "600"
|
|
@@ -216,33 +226,52 @@ function Text2({ variant = "body", color, style, children, ...props }) {
|
|
|
216
226
|
children
|
|
217
227
|
);
|
|
218
228
|
}
|
|
219
|
-
|
|
229
|
+
var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
230
|
+
function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
|
|
220
231
|
const { colors } = useTheme();
|
|
221
232
|
const [focused, setFocused] = React23.useState(false);
|
|
233
|
+
const [showPassword, setShowPassword] = React23.useState(false);
|
|
234
|
+
const isPassword = type === "password";
|
|
235
|
+
const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
|
|
236
|
+
const effectiveSuffix = isPassword && !suffix ? /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles2.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.suffixText, { color: colors.mutedForeground }] }, showPassword ? "\u{1F441}" : "\u{1F441}\u200D\u{1F5E8}")) : suffix;
|
|
222
237
|
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles2.container, containerStyle] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React23__default.default.createElement(
|
|
223
|
-
reactNative.
|
|
238
|
+
reactNative.View,
|
|
224
239
|
{
|
|
225
240
|
style: [
|
|
226
|
-
styles2.
|
|
241
|
+
styles2.inputWrapper,
|
|
227
242
|
{
|
|
228
|
-
borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
|
|
229
|
-
color: colors.foreground,
|
|
243
|
+
borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
|
|
230
244
|
backgroundColor: colors.background
|
|
245
|
+
}
|
|
246
|
+
]
|
|
247
|
+
},
|
|
248
|
+
prefix ? typeof prefix === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, prefix) : /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles2.prefixContainer }, prefix) : null,
|
|
249
|
+
/* @__PURE__ */ React23__default.default.createElement(
|
|
250
|
+
reactNative.TextInput,
|
|
251
|
+
{
|
|
252
|
+
style: [
|
|
253
|
+
styles2.input,
|
|
254
|
+
{
|
|
255
|
+
color: colors.foreground
|
|
256
|
+
},
|
|
257
|
+
webInputResetStyle,
|
|
258
|
+
style
|
|
259
|
+
],
|
|
260
|
+
onFocus: (e) => {
|
|
261
|
+
setFocused(true);
|
|
262
|
+
onFocus?.(e);
|
|
231
263
|
},
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
allowFontScaling: true,
|
|
244
|
-
...props
|
|
245
|
-
}
|
|
264
|
+
onBlur: (e) => {
|
|
265
|
+
setFocused(false);
|
|
266
|
+
onBlur?.(e);
|
|
267
|
+
},
|
|
268
|
+
placeholderTextColor: colors.mutedForeground,
|
|
269
|
+
allowFontScaling: true,
|
|
270
|
+
secureTextEntry: effectiveSecure,
|
|
271
|
+
...props
|
|
272
|
+
}
|
|
273
|
+
),
|
|
274
|
+
effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.suffixText, { color: colors.mutedForeground }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles2.suffixContainer }, effectiveSuffix) : null
|
|
246
275
|
), error ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles2.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
|
|
247
276
|
}
|
|
248
277
|
var styles2 = reactNative.StyleSheet.create({
|
|
@@ -254,18 +283,56 @@ var styles2 = reactNative.StyleSheet.create({
|
|
|
254
283
|
fontWeight: "500",
|
|
255
284
|
marginBottom: 6
|
|
256
285
|
},
|
|
257
|
-
|
|
286
|
+
inputWrapper: {
|
|
287
|
+
flexDirection: "row",
|
|
288
|
+
alignItems: "center",
|
|
258
289
|
borderWidth: 1.5,
|
|
259
290
|
borderRadius: 14,
|
|
260
291
|
paddingHorizontal: 20,
|
|
261
|
-
paddingVertical: 16
|
|
262
|
-
|
|
292
|
+
paddingVertical: 16
|
|
293
|
+
},
|
|
294
|
+
input: {
|
|
295
|
+
flex: 1,
|
|
296
|
+
fontSize: 17,
|
|
297
|
+
paddingVertical: 0
|
|
298
|
+
},
|
|
299
|
+
prefixContainer: {
|
|
300
|
+
marginRight: 8
|
|
301
|
+
},
|
|
302
|
+
prefixText: {
|
|
303
|
+
fontSize: 17,
|
|
304
|
+
marginRight: 8
|
|
305
|
+
},
|
|
306
|
+
suffixContainer: {
|
|
307
|
+
marginLeft: 8
|
|
308
|
+
},
|
|
309
|
+
suffixText: {
|
|
310
|
+
fontSize: 17,
|
|
311
|
+
marginLeft: 8
|
|
312
|
+
},
|
|
313
|
+
passwordToggle: {
|
|
314
|
+
padding: 4
|
|
263
315
|
},
|
|
264
316
|
helperText: {
|
|
265
317
|
fontSize: 13
|
|
266
318
|
}
|
|
267
319
|
});
|
|
268
|
-
|
|
320
|
+
var sizePadding = {
|
|
321
|
+
sm: { paddingHorizontal: 8, paddingVertical: 2 },
|
|
322
|
+
md: { paddingHorizontal: 10, paddingVertical: 4 },
|
|
323
|
+
lg: { paddingHorizontal: 12, paddingVertical: 6 }
|
|
324
|
+
};
|
|
325
|
+
var sizeFontSize = {
|
|
326
|
+
sm: { fontSize: 11 },
|
|
327
|
+
md: { fontSize: 13 },
|
|
328
|
+
lg: { fontSize: 15 }
|
|
329
|
+
};
|
|
330
|
+
var sizeIconGap = {
|
|
331
|
+
sm: 4,
|
|
332
|
+
md: 6,
|
|
333
|
+
lg: 6
|
|
334
|
+
};
|
|
335
|
+
function Badge({ label, children, variant = "default", size = "md", icon, style }) {
|
|
269
336
|
const { colors } = useTheme();
|
|
270
337
|
const containerStyle = {
|
|
271
338
|
default: { backgroundColor: colors.primary },
|
|
@@ -279,40 +346,100 @@ function Badge({ label, variant = "default", style }) {
|
|
|
279
346
|
destructive: colors.destructiveForeground,
|
|
280
347
|
outline: colors.foreground
|
|
281
348
|
}[variant];
|
|
282
|
-
|
|
349
|
+
const content = children ?? label;
|
|
350
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles3.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles3.iconContainer }, icon) : null, typeof content === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles3.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
|
|
283
351
|
}
|
|
284
352
|
var styles3 = reactNative.StyleSheet.create({
|
|
285
353
|
container: {
|
|
286
354
|
borderRadius: 8,
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
355
|
+
alignSelf: "flex-start",
|
|
356
|
+
flexDirection: "row",
|
|
357
|
+
alignItems: "center"
|
|
358
|
+
},
|
|
359
|
+
iconContainer: {
|
|
360
|
+
justifyContent: "center",
|
|
361
|
+
alignItems: "center"
|
|
290
362
|
},
|
|
291
363
|
label: {
|
|
292
|
-
fontSize: 13,
|
|
293
364
|
fontWeight: "500"
|
|
294
365
|
}
|
|
295
366
|
});
|
|
296
|
-
|
|
367
|
+
var nativeDriver2 = reactNative.Platform.OS !== "web";
|
|
368
|
+
function Card({ children, variant = "elevated", onPress, style }) {
|
|
297
369
|
const { colors } = useTheme();
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
370
|
+
const scale = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
371
|
+
const handlePressIn = () => {
|
|
372
|
+
if (!onPress) return;
|
|
373
|
+
reactNative.Animated.spring(scale, {
|
|
374
|
+
toValue: 0.98,
|
|
375
|
+
useNativeDriver: nativeDriver2,
|
|
376
|
+
speed: 40,
|
|
377
|
+
bounciness: 0
|
|
378
|
+
}).start();
|
|
379
|
+
};
|
|
380
|
+
const handlePressOut = () => {
|
|
381
|
+
if (!onPress) return;
|
|
382
|
+
reactNative.Animated.spring(scale, {
|
|
383
|
+
toValue: 1,
|
|
384
|
+
useNativeDriver: nativeDriver2,
|
|
385
|
+
speed: 40,
|
|
386
|
+
bounciness: 4
|
|
387
|
+
}).start();
|
|
388
|
+
};
|
|
389
|
+
const handlePress = () => {
|
|
390
|
+
if (!onPress) return;
|
|
391
|
+
Haptics12__namespace.impactAsync(Haptics12__namespace.ImpactFeedbackStyle.Light);
|
|
392
|
+
onPress();
|
|
393
|
+
};
|
|
394
|
+
const variantStyle = {
|
|
395
|
+
elevated: {
|
|
396
|
+
backgroundColor: colors.card,
|
|
397
|
+
borderColor: colors.border,
|
|
398
|
+
shadowColor: "#000",
|
|
399
|
+
shadowOffset: { width: 0, height: 1 },
|
|
400
|
+
shadowOpacity: 0.05,
|
|
401
|
+
shadowRadius: 2,
|
|
402
|
+
elevation: 1
|
|
302
403
|
},
|
|
303
|
-
|
|
304
|
-
|
|
404
|
+
outlined: {
|
|
405
|
+
backgroundColor: colors.card,
|
|
406
|
+
borderColor: colors.border,
|
|
407
|
+
shadowOpacity: 0,
|
|
408
|
+
elevation: 0
|
|
409
|
+
},
|
|
410
|
+
filled: {
|
|
411
|
+
backgroundColor: colors.accent,
|
|
412
|
+
borderColor: colors.border,
|
|
413
|
+
shadowOpacity: 0,
|
|
414
|
+
elevation: 0
|
|
415
|
+
}
|
|
416
|
+
}[variant];
|
|
417
|
+
const cardContent = /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles4.card, variantStyle, style] }, children);
|
|
418
|
+
if (onPress) {
|
|
419
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
420
|
+
reactNative.TouchableOpacity,
|
|
421
|
+
{
|
|
422
|
+
onPress: handlePress,
|
|
423
|
+
onPressIn: handlePressIn,
|
|
424
|
+
onPressOut: handlePressOut,
|
|
425
|
+
activeOpacity: 1,
|
|
426
|
+
touchSoundDisabled: true
|
|
427
|
+
},
|
|
428
|
+
cardContent
|
|
429
|
+
));
|
|
430
|
+
}
|
|
431
|
+
return cardContent;
|
|
305
432
|
}
|
|
306
433
|
function CardHeader({ children, style }) {
|
|
307
434
|
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles4.header, style] }, children);
|
|
308
435
|
}
|
|
309
436
|
function CardTitle({ children, style }) {
|
|
310
437
|
const { colors } = useTheme();
|
|
311
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles4.title, { color: colors.cardForeground }, style] }, children);
|
|
438
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles4.title, { color: colors.cardForeground }, style], allowFontScaling: true }, children);
|
|
312
439
|
}
|
|
313
440
|
function CardDescription({ children, style }) {
|
|
314
441
|
const { colors } = useTheme();
|
|
315
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles4.description, { color: colors.mutedForeground }, style] }, children);
|
|
442
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles4.description, { color: colors.mutedForeground }, style], allowFontScaling: true }, children);
|
|
316
443
|
}
|
|
317
444
|
function CardContent({ children, style }) {
|
|
318
445
|
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles4.content, style] }, children);
|
|
@@ -466,7 +593,8 @@ function Avatar({ src, fallback, size = "md", style }) {
|
|
|
466
593
|
) : /* @__PURE__ */ React23__default.default.createElement(
|
|
467
594
|
reactNative.Text,
|
|
468
595
|
{
|
|
469
|
-
style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }]
|
|
596
|
+
style: [styles7.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }],
|
|
597
|
+
allowFontScaling: true
|
|
470
598
|
},
|
|
471
599
|
fallback?.slice(0, 2).toUpperCase() ?? "?"
|
|
472
600
|
));
|
|
@@ -480,12 +608,13 @@ var styles7 = reactNative.StyleSheet.create({
|
|
|
480
608
|
fontWeight: "500"
|
|
481
609
|
}
|
|
482
610
|
});
|
|
483
|
-
function
|
|
611
|
+
function AlertBanner({ title, description, variant = "default", icon, style }) {
|
|
484
612
|
const { colors } = useTheme();
|
|
485
|
-
const borderColor = variant === "destructive" ? colors.destructive : colors.border;
|
|
486
|
-
const titleColor = variant === "destructive" ? colors.destructive : colors.foreground;
|
|
487
|
-
const descColor = variant === "destructive" ? colors.destructive : colors.mutedForeground;
|
|
488
|
-
|
|
613
|
+
const borderColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.border;
|
|
614
|
+
const titleColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.foreground;
|
|
615
|
+
const descColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : colors.mutedForeground;
|
|
616
|
+
const defaultIcon = variant === "destructive" ? "\u26A0" : variant === "success" ? "\u2713" : "\u2139";
|
|
617
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles8.container, { backgroundColor: colors.card, borderColor }, style] }, icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.icon }, icon) : /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.icon }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.defaultIcon, { color: titleColor }], allowFontScaling: true }, defaultIcon)), /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles8.content }, title ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.title, { color: titleColor }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles8.description, { color: descColor }], allowFontScaling: true }, description) : null));
|
|
489
618
|
}
|
|
490
619
|
var styles8 = reactNative.StyleSheet.create({
|
|
491
620
|
container: {
|
|
@@ -556,9 +685,40 @@ var styles9 = reactNative.StyleSheet.create({
|
|
|
556
685
|
borderRadius: 999
|
|
557
686
|
}
|
|
558
687
|
});
|
|
559
|
-
function EmptyState({ icon, title, description, action, style }) {
|
|
688
|
+
function EmptyState({ icon, title, description, action, size = "default", style }) {
|
|
560
689
|
const { colors } = useTheme();
|
|
561
|
-
|
|
690
|
+
const isCompact = size === "compact";
|
|
691
|
+
return /* @__PURE__ */ React23__default.default.createElement(
|
|
692
|
+
reactNative.View,
|
|
693
|
+
{
|
|
694
|
+
style: [
|
|
695
|
+
styles10.container,
|
|
696
|
+
isCompact && styles10.containerCompact,
|
|
697
|
+
{ borderColor: colors.border },
|
|
698
|
+
style
|
|
699
|
+
]
|
|
700
|
+
},
|
|
701
|
+
icon ? /* @__PURE__ */ React23__default.default.createElement(
|
|
702
|
+
reactNative.View,
|
|
703
|
+
{
|
|
704
|
+
style: [
|
|
705
|
+
styles10.iconWrapper,
|
|
706
|
+
isCompact && styles10.iconWrapperCompact,
|
|
707
|
+
{ backgroundColor: colors.muted }
|
|
708
|
+
]
|
|
709
|
+
},
|
|
710
|
+
icon
|
|
711
|
+
) : null,
|
|
712
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles10.textWrapper }, /* @__PURE__ */ React23__default.default.createElement(
|
|
713
|
+
reactNative.Text,
|
|
714
|
+
{
|
|
715
|
+
style: [styles10.title, isCompact && styles10.titleCompact, { color: colors.foreground }],
|
|
716
|
+
allowFontScaling: true
|
|
717
|
+
},
|
|
718
|
+
title
|
|
719
|
+
), description && !isCompact ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles10.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null),
|
|
720
|
+
action && !isCompact ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles10.action }, action) : null
|
|
721
|
+
);
|
|
562
722
|
}
|
|
563
723
|
var styles10 = reactNative.StyleSheet.create({
|
|
564
724
|
container: {
|
|
@@ -570,6 +730,10 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
570
730
|
padding: 32,
|
|
571
731
|
gap: 16
|
|
572
732
|
},
|
|
733
|
+
containerCompact: {
|
|
734
|
+
padding: 20,
|
|
735
|
+
gap: 10
|
|
736
|
+
},
|
|
573
737
|
iconWrapper: {
|
|
574
738
|
width: 48,
|
|
575
739
|
height: 48,
|
|
@@ -577,6 +741,11 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
577
741
|
alignItems: "center",
|
|
578
742
|
justifyContent: "center"
|
|
579
743
|
},
|
|
744
|
+
iconWrapperCompact: {
|
|
745
|
+
width: 36,
|
|
746
|
+
height: 36,
|
|
747
|
+
borderRadius: 8
|
|
748
|
+
},
|
|
580
749
|
textWrapper: {
|
|
581
750
|
alignItems: "center",
|
|
582
751
|
gap: 8,
|
|
@@ -587,6 +756,9 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
587
756
|
fontWeight: "500",
|
|
588
757
|
textAlign: "center"
|
|
589
758
|
},
|
|
759
|
+
titleCompact: {
|
|
760
|
+
fontSize: 15
|
|
761
|
+
},
|
|
590
762
|
description: {
|
|
591
763
|
fontSize: 14,
|
|
592
764
|
lineHeight: 20,
|
|
@@ -596,6 +768,7 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
596
768
|
marginTop: 8
|
|
597
769
|
}
|
|
598
770
|
});
|
|
771
|
+
var webInputResetStyle2 = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
|
|
599
772
|
function Textarea({
|
|
600
773
|
label,
|
|
601
774
|
error,
|
|
@@ -618,11 +791,12 @@ function Textarea({
|
|
|
618
791
|
style: [
|
|
619
792
|
styles11.input,
|
|
620
793
|
{
|
|
621
|
-
borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
|
|
794
|
+
borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
|
|
622
795
|
color: colors.foreground,
|
|
623
796
|
backgroundColor: colors.background,
|
|
624
797
|
minHeight: rows * 30
|
|
625
798
|
},
|
|
799
|
+
webInputResetStyle2,
|
|
626
800
|
style
|
|
627
801
|
],
|
|
628
802
|
onFocus: (e) => {
|
|
@@ -680,7 +854,7 @@ function Checkbox({
|
|
|
680
854
|
{
|
|
681
855
|
style: [styles12.row, style],
|
|
682
856
|
onPress: () => {
|
|
683
|
-
|
|
857
|
+
Haptics12__namespace.selectionAsync();
|
|
684
858
|
onCheckedChange?.(!checked);
|
|
685
859
|
},
|
|
686
860
|
onPressIn: handlePressIn,
|
|
@@ -738,6 +912,7 @@ var styles12 = reactNative.StyleSheet.create({
|
|
|
738
912
|
lineHeight: 22
|
|
739
913
|
}
|
|
740
914
|
});
|
|
915
|
+
var nativeDriver3 = reactNative.Platform.OS !== "web";
|
|
741
916
|
var TRACK_WIDTH = 60;
|
|
742
917
|
var TRACK_HEIGHT = 36;
|
|
743
918
|
var THUMB_SIZE = 28;
|
|
@@ -751,7 +926,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
751
926
|
reactNative.Animated.parallel([
|
|
752
927
|
reactNative.Animated.spring(translateX, {
|
|
753
928
|
toValue: checked ? THUMB_TRAVEL : 0,
|
|
754
|
-
useNativeDriver:
|
|
929
|
+
useNativeDriver: nativeDriver3,
|
|
755
930
|
bounciness: 4
|
|
756
931
|
}),
|
|
757
932
|
reactNative.Animated.timing(trackOpacity, {
|
|
@@ -765,17 +940,17 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
765
940
|
inputRange: [0, 1],
|
|
766
941
|
outputRange: [colors.muted, colors.primary]
|
|
767
942
|
});
|
|
768
|
-
return /* @__PURE__ */ React23__default.default.createElement(
|
|
943
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
769
944
|
reactNative.TouchableOpacity,
|
|
770
945
|
{
|
|
771
946
|
onPress: () => {
|
|
772
|
-
|
|
947
|
+
Haptics12__namespace.selectionAsync();
|
|
773
948
|
onCheckedChange?.(!checked);
|
|
774
949
|
},
|
|
775
950
|
disabled,
|
|
776
951
|
activeOpacity: 0.8,
|
|
777
952
|
touchSoundDisabled: true,
|
|
778
|
-
style:
|
|
953
|
+
style: styles13.wrapper
|
|
779
954
|
},
|
|
780
955
|
/* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [styles13.track, { backgroundColor: trackColor }] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
781
956
|
reactNative.Animated.View,
|
|
@@ -786,7 +961,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
|
|
|
786
961
|
]
|
|
787
962
|
}
|
|
788
963
|
))
|
|
789
|
-
);
|
|
964
|
+
));
|
|
790
965
|
}
|
|
791
966
|
var styles13 = reactNative.StyleSheet.create({
|
|
792
967
|
wrapper: {},
|
|
@@ -864,10 +1039,14 @@ function Toggle({
|
|
|
864
1039
|
if (typeof prop === "function") return prop(pressed);
|
|
865
1040
|
return prop;
|
|
866
1041
|
};
|
|
867
|
-
if (
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
1042
|
+
if (pressed) {
|
|
1043
|
+
const active = renderProp(activeIcon);
|
|
1044
|
+
if (active) return /* @__PURE__ */ React23__default.default.createElement(React23__default.default.Fragment, null, active);
|
|
1045
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles14.checkContainer, { borderColor: colors.primary, backgroundColor: colors.primary }] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles14.checkMark, { color: colors.primaryForeground }] }, "\u2713"));
|
|
1046
|
+
}
|
|
1047
|
+
const custom = renderProp(icon);
|
|
1048
|
+
if (custom) return /* @__PURE__ */ React23__default.default.createElement(React23__default.default.Fragment, null, custom);
|
|
1049
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles14.checkContainer, { borderColor: colors.mutedForeground }] });
|
|
871
1050
|
};
|
|
872
1051
|
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }] } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
873
1052
|
reactNative.Animated.View,
|
|
@@ -885,7 +1064,7 @@ function Toggle({
|
|
|
885
1064
|
{
|
|
886
1065
|
style: styles14.touchable,
|
|
887
1066
|
onPress: () => {
|
|
888
|
-
|
|
1067
|
+
Haptics12__namespace.selectionAsync();
|
|
889
1068
|
onPressedChange?.(!pressed);
|
|
890
1069
|
},
|
|
891
1070
|
onPressIn: handlePressIn,
|
|
@@ -952,7 +1131,7 @@ function RadioItem({
|
|
|
952
1131
|
style: styles15.row,
|
|
953
1132
|
onPress: () => {
|
|
954
1133
|
if (!option.disabled) {
|
|
955
|
-
|
|
1134
|
+
Haptics12__namespace.selectionAsync();
|
|
956
1135
|
onSelect();
|
|
957
1136
|
}
|
|
958
1137
|
},
|
|
@@ -1110,7 +1289,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
|
|
|
1110
1289
|
}
|
|
1111
1290
|
}, [active]);
|
|
1112
1291
|
const handlePress = (v) => {
|
|
1113
|
-
|
|
1292
|
+
Haptics12__namespace.selectionAsync();
|
|
1114
1293
|
if (!value) setInternal(v);
|
|
1115
1294
|
onValueChange?.(v);
|
|
1116
1295
|
};
|
|
@@ -1235,7 +1414,7 @@ function AccordionItemComponent({
|
|
|
1235
1414
|
{
|
|
1236
1415
|
style: styles17.trigger,
|
|
1237
1416
|
onPress: () => {
|
|
1238
|
-
|
|
1417
|
+
Haptics12__namespace.selectionAsync();
|
|
1239
1418
|
onToggle();
|
|
1240
1419
|
},
|
|
1241
1420
|
onPressIn: handlePressIn,
|
|
@@ -1309,116 +1488,63 @@ function Slider({
|
|
|
1309
1488
|
step = 0,
|
|
1310
1489
|
onValueChange,
|
|
1311
1490
|
onSlidingComplete,
|
|
1491
|
+
label,
|
|
1492
|
+
showValue = false,
|
|
1493
|
+
formatValue: formatValue2 = (v) => v.toFixed(2),
|
|
1494
|
+
accessibilityLabel,
|
|
1312
1495
|
disabled,
|
|
1313
1496
|
style
|
|
1314
1497
|
}) {
|
|
1315
1498
|
const { colors } = useTheme();
|
|
1316
|
-
const trackWidth = React23.useRef(0);
|
|
1317
1499
|
const lastSteppedValue = React23.useRef(value);
|
|
1318
|
-
const
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
};
|
|
1325
|
-
const xToValue = (x) => {
|
|
1326
|
-
const ratio = Math.min(Math.max(x / trackWidth.current, 0), 1);
|
|
1327
|
-
const raw = ratio * (maximumValue - minimumValue) + minimumValue;
|
|
1328
|
-
return clamp(snapToStep(raw));
|
|
1329
|
-
};
|
|
1330
|
-
const panResponder = React23.useRef(
|
|
1331
|
-
reactNative.PanResponder.create({
|
|
1332
|
-
onStartShouldSetPanResponder: () => !disabled,
|
|
1333
|
-
onMoveShouldSetPanResponder: () => !disabled,
|
|
1334
|
-
onPanResponderGrant: (e) => {
|
|
1335
|
-
const x = e.nativeEvent.locationX;
|
|
1336
|
-
const newValue = xToValue(x);
|
|
1337
|
-
setInternalValue(newValue);
|
|
1338
|
-
onValueChange?.(newValue);
|
|
1339
|
-
},
|
|
1340
|
-
onPanResponderMove: (e) => {
|
|
1341
|
-
const x = e.nativeEvent.locationX;
|
|
1342
|
-
const newValue = xToValue(x);
|
|
1343
|
-
if (newValue !== lastSteppedValue.current) {
|
|
1344
|
-
lastSteppedValue.current = newValue;
|
|
1345
|
-
Haptics11__namespace.selectionAsync();
|
|
1346
|
-
}
|
|
1347
|
-
setInternalValue(newValue);
|
|
1348
|
-
onValueChange?.(newValue);
|
|
1349
|
-
},
|
|
1350
|
-
onPanResponderRelease: (e) => {
|
|
1351
|
-
const x = e.nativeEvent.locationX;
|
|
1352
|
-
const newValue = xToValue(x);
|
|
1353
|
-
setInternalValue(newValue);
|
|
1354
|
-
onSlidingComplete?.(newValue);
|
|
1355
|
-
}
|
|
1356
|
-
})
|
|
1357
|
-
).current;
|
|
1358
|
-
const onLayout = (e) => {
|
|
1359
|
-
trackWidth.current = e.nativeEvent.layout.width;
|
|
1500
|
+
const handleValueChange = (v) => {
|
|
1501
|
+
if (step && v !== lastSteppedValue.current) {
|
|
1502
|
+
lastSteppedValue.current = v;
|
|
1503
|
+
Haptics12__namespace.selectionAsync();
|
|
1504
|
+
}
|
|
1505
|
+
onValueChange?.(v);
|
|
1360
1506
|
};
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
reactNative.View,
|
|
1507
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles18.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles18.header }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles18.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles18.valueText, { color: colors.mutedForeground }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: disabled ? styles18.disabled : void 0 }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1508
|
+
RNSlider__default.default,
|
|
1364
1509
|
{
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
styles18.thumb,
|
|
1380
|
-
{
|
|
1381
|
-
left: `${percent}%`,
|
|
1382
|
-
backgroundColor: colors.primary,
|
|
1383
|
-
borderColor: colors.background,
|
|
1384
|
-
transform: [{ translateX: -14 }]
|
|
1385
|
-
}
|
|
1386
|
-
],
|
|
1387
|
-
pointerEvents: "none"
|
|
1388
|
-
}
|
|
1389
|
-
)
|
|
1390
|
-
);
|
|
1510
|
+
value,
|
|
1511
|
+
minimumValue,
|
|
1512
|
+
maximumValue,
|
|
1513
|
+
step: step || 0,
|
|
1514
|
+
disabled,
|
|
1515
|
+
onValueChange: handleValueChange,
|
|
1516
|
+
onSlidingComplete,
|
|
1517
|
+
minimumTrackTintColor: colors.primary,
|
|
1518
|
+
maximumTrackTintColor: colors.muted,
|
|
1519
|
+
thumbTintColor: colors.primary,
|
|
1520
|
+
style: styles18.slider,
|
|
1521
|
+
accessibilityLabel
|
|
1522
|
+
}
|
|
1523
|
+
)));
|
|
1391
1524
|
}
|
|
1392
1525
|
var styles18 = reactNative.StyleSheet.create({
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
justifyContent: "center",
|
|
1396
|
-
position: "relative"
|
|
1526
|
+
wrapper: {
|
|
1527
|
+
gap: 8
|
|
1397
1528
|
},
|
|
1398
|
-
|
|
1399
|
-
|
|
1529
|
+
header: {
|
|
1530
|
+
flexDirection: "row",
|
|
1531
|
+
justifyContent: "space-between",
|
|
1532
|
+
alignItems: "center"
|
|
1400
1533
|
},
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
overflow: "hidden",
|
|
1405
|
-
width: "100%"
|
|
1534
|
+
label: {
|
|
1535
|
+
fontSize: 15,
|
|
1536
|
+
fontWeight: "500"
|
|
1406
1537
|
},
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1538
|
+
valueText: {
|
|
1539
|
+
fontSize: 14,
|
|
1540
|
+
fontWeight: "500"
|
|
1410
1541
|
},
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
shadowColor: "#000",
|
|
1418
|
-
shadowOffset: { width: 0, height: 1 },
|
|
1419
|
-
shadowOpacity: 0.2,
|
|
1420
|
-
shadowRadius: 2,
|
|
1421
|
-
elevation: 2
|
|
1542
|
+
slider: {
|
|
1543
|
+
width: "100%",
|
|
1544
|
+
height: 40
|
|
1545
|
+
},
|
|
1546
|
+
disabled: {
|
|
1547
|
+
opacity: 0.45
|
|
1422
1548
|
}
|
|
1423
1549
|
});
|
|
1424
1550
|
function Sheet({
|
|
@@ -1434,7 +1560,7 @@ function Sheet({
|
|
|
1434
1560
|
const ref = React23.useRef(null);
|
|
1435
1561
|
React23.useEffect(() => {
|
|
1436
1562
|
if (open) {
|
|
1437
|
-
|
|
1563
|
+
Haptics12__namespace.impactAsync(Haptics12__namespace.ImpactFeedbackStyle.Light);
|
|
1438
1564
|
ref.current?.present();
|
|
1439
1565
|
} else {
|
|
1440
1566
|
ref.current?.dismiss();
|
|
@@ -1490,6 +1616,9 @@ var styles19 = reactNative.StyleSheet.create({
|
|
|
1490
1616
|
lineHeight: 20
|
|
1491
1617
|
}
|
|
1492
1618
|
});
|
|
1619
|
+
var isIOS = reactNative.Platform.OS === "ios";
|
|
1620
|
+
var isAndroid = reactNative.Platform.OS === "android";
|
|
1621
|
+
var isWeb = reactNative.Platform.OS === "web";
|
|
1493
1622
|
function Select({
|
|
1494
1623
|
options,
|
|
1495
1624
|
value,
|
|
@@ -1501,8 +1630,10 @@ function Select({
|
|
|
1501
1630
|
style
|
|
1502
1631
|
}) {
|
|
1503
1632
|
const { colors } = useTheme();
|
|
1504
|
-
const bottomSheetRef = React23.useRef(null);
|
|
1505
1633
|
const scale = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
1634
|
+
const [pickerVisible, setPickerVisible] = React23.useState(false);
|
|
1635
|
+
const [pendingValue, setPendingValue] = React23.useState(value);
|
|
1636
|
+
const pickerRef = React23.useRef(null);
|
|
1506
1637
|
const selected = options.find((o) => o.value === value);
|
|
1507
1638
|
const handlePressIn = () => {
|
|
1508
1639
|
if (disabled) return;
|
|
@@ -1512,24 +1643,26 @@ function Select({
|
|
|
1512
1643
|
reactNative.Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start();
|
|
1513
1644
|
};
|
|
1514
1645
|
const handleOpen = () => {
|
|
1515
|
-
if (
|
|
1516
|
-
|
|
1517
|
-
|
|
1646
|
+
if (disabled) return;
|
|
1647
|
+
Haptics12__namespace.selectionAsync();
|
|
1648
|
+
if (isIOS) {
|
|
1649
|
+
setPendingValue(value);
|
|
1650
|
+
setPickerVisible(true);
|
|
1651
|
+
} else if (isAndroid) {
|
|
1652
|
+
pickerRef.current?.focus();
|
|
1518
1653
|
}
|
|
1519
1654
|
};
|
|
1520
|
-
const
|
|
1521
|
-
(
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
);
|
|
1532
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1655
|
+
const handleDismiss = () => {
|
|
1656
|
+
setPickerVisible(false);
|
|
1657
|
+
};
|
|
1658
|
+
const handleConfirm = () => {
|
|
1659
|
+
if (pendingValue !== void 0 && pendingValue !== "") {
|
|
1660
|
+
Haptics12__namespace.selectionAsync();
|
|
1661
|
+
onValueChange?.(pendingValue);
|
|
1662
|
+
}
|
|
1663
|
+
setPickerVisible(false);
|
|
1664
|
+
};
|
|
1665
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.container, style] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.label, { color: colors.foreground }] }, label) : null, !isWeb ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: { transform: [{ scale }], opacity: disabled ? 0.45 : 1 } }, /* @__PURE__ */ React23__default.default.createElement(
|
|
1533
1666
|
reactNative.TouchableOpacity,
|
|
1534
1667
|
{
|
|
1535
1668
|
style: [
|
|
@@ -1552,57 +1685,97 @@ function Select({
|
|
|
1552
1685
|
styles20.triggerText,
|
|
1553
1686
|
{ color: selected ? colors.foreground : colors.mutedForeground }
|
|
1554
1687
|
],
|
|
1555
|
-
numberOfLines: 1
|
|
1688
|
+
numberOfLines: 1,
|
|
1689
|
+
allowFontScaling: true
|
|
1556
1690
|
},
|
|
1557
1691
|
selected?.label ?? placeholder
|
|
1558
1692
|
),
|
|
1559
1693
|
/* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.chevron, { color: colors.mutedForeground }] }, "\u25BE")
|
|
1560
|
-
))
|
|
1561
|
-
|
|
1694
|
+
)) : null, isIOS ? /* @__PURE__ */ React23__default.default.createElement(
|
|
1695
|
+
reactNative.Modal,
|
|
1562
1696
|
{
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
backgroundStyle: [styles20.sheetBackground, { backgroundColor: colors.card }],
|
|
1568
|
-
handleIndicatorStyle: [styles20.sheetHandle, { backgroundColor: colors.border }]
|
|
1697
|
+
visible: pickerVisible,
|
|
1698
|
+
transparent: true,
|
|
1699
|
+
animationType: "slide",
|
|
1700
|
+
onRequestClose: handleDismiss
|
|
1569
1701
|
},
|
|
1570
|
-
/* @__PURE__ */ React23__default.default.createElement(
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1702
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { style: styles20.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
|
|
1703
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles20.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React23__default.default.createElement(reactNative.View, null), /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { onPress: handleConfirm, style: styles20.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React23__default.default.createElement(
|
|
1704
|
+
picker.Picker,
|
|
1705
|
+
{
|
|
1706
|
+
selectedValue: pendingValue ?? "",
|
|
1707
|
+
onValueChange: (val) => setPendingValue(val),
|
|
1708
|
+
itemStyle: { color: colors.foreground }
|
|
1709
|
+
},
|
|
1710
|
+
!value ? /* @__PURE__ */ React23__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", color: colors.mutedForeground, enabled: false }) : null,
|
|
1711
|
+
options.map((o) => /* @__PURE__ */ React23__default.default.createElement(
|
|
1712
|
+
picker.Picker.Item,
|
|
1574
1713
|
{
|
|
1575
|
-
key:
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1714
|
+
key: o.value,
|
|
1715
|
+
label: o.label,
|
|
1716
|
+
value: o.value,
|
|
1717
|
+
enabled: !o.disabled,
|
|
1718
|
+
color: o.disabled ? colors.mutedForeground : colors.foreground
|
|
1719
|
+
}
|
|
1720
|
+
))
|
|
1721
|
+
))
|
|
1722
|
+
) : null, isAndroid ? /* @__PURE__ */ React23__default.default.createElement(
|
|
1723
|
+
picker.Picker,
|
|
1724
|
+
{
|
|
1725
|
+
ref: pickerRef,
|
|
1726
|
+
selectedValue: value ?? "",
|
|
1727
|
+
onValueChange: (val) => {
|
|
1728
|
+
if (val !== "") {
|
|
1729
|
+
Haptics12__namespace.selectionAsync();
|
|
1730
|
+
onValueChange?.(val);
|
|
1731
|
+
}
|
|
1732
|
+
},
|
|
1733
|
+
mode: "dialog",
|
|
1734
|
+
enabled: !disabled,
|
|
1735
|
+
prompt: label,
|
|
1736
|
+
style: styles20.androidHiddenPicker
|
|
1737
|
+
},
|
|
1738
|
+
!value ? /* @__PURE__ */ React23__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
|
|
1739
|
+
options.map((o) => /* @__PURE__ */ React23__default.default.createElement(
|
|
1740
|
+
picker.Picker.Item,
|
|
1741
|
+
{
|
|
1742
|
+
key: o.value,
|
|
1743
|
+
label: o.label,
|
|
1744
|
+
value: o.value,
|
|
1745
|
+
enabled: !o.disabled
|
|
1746
|
+
}
|
|
1747
|
+
))
|
|
1748
|
+
) : null, isWeb ? /* @__PURE__ */ React23__default.default.createElement(
|
|
1749
|
+
picker.Picker,
|
|
1750
|
+
{
|
|
1751
|
+
selectedValue: value ?? "",
|
|
1752
|
+
onValueChange: (val) => {
|
|
1753
|
+
if (val !== "") {
|
|
1754
|
+
onValueChange?.(val);
|
|
1755
|
+
}
|
|
1756
|
+
},
|
|
1757
|
+
enabled: !disabled,
|
|
1758
|
+
style: [
|
|
1759
|
+
styles20.webPicker,
|
|
1760
|
+
{
|
|
1761
|
+
borderColor: error ? colors.destructive : colors.border,
|
|
1762
|
+
color: selected ? colors.foreground : colors.mutedForeground,
|
|
1763
|
+
backgroundColor: colors.background,
|
|
1764
|
+
opacity: disabled ? 0.45 : 1
|
|
1765
|
+
}
|
|
1766
|
+
]
|
|
1767
|
+
},
|
|
1768
|
+
/* @__PURE__ */ React23__default.default.createElement(picker.Picker.Item, { label: placeholder, value: "", enabled: false }),
|
|
1769
|
+
options.map((o) => /* @__PURE__ */ React23__default.default.createElement(
|
|
1770
|
+
picker.Picker.Item,
|
|
1771
|
+
{
|
|
1772
|
+
key: o.value,
|
|
1773
|
+
label: o.label,
|
|
1774
|
+
value: o.value,
|
|
1775
|
+
enabled: !o.disabled
|
|
1776
|
+
}
|
|
1777
|
+
))
|
|
1778
|
+
) : null, error ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles20.helperText, { color: colors.destructive }] }, error) : null);
|
|
1606
1779
|
}
|
|
1607
1780
|
var styles20 = reactNative.StyleSheet.create({
|
|
1608
1781
|
container: {
|
|
@@ -1633,44 +1806,45 @@ var styles20 = reactNative.StyleSheet.create({
|
|
|
1633
1806
|
helperText: {
|
|
1634
1807
|
fontSize: 13
|
|
1635
1808
|
},
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1809
|
+
iosBackdrop: {
|
|
1810
|
+
flex: 1,
|
|
1811
|
+
backgroundColor: "rgba(0,0,0,0.4)"
|
|
1639
1812
|
},
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1813
|
+
iosSheet: {
|
|
1814
|
+
borderTopLeftRadius: 24,
|
|
1815
|
+
borderTopRightRadius: 24,
|
|
1816
|
+
paddingBottom: 32
|
|
1644
1817
|
},
|
|
1645
|
-
|
|
1818
|
+
iosToolbar: {
|
|
1819
|
+
flexDirection: "row",
|
|
1820
|
+
alignItems: "center",
|
|
1821
|
+
justifyContent: "space-between",
|
|
1646
1822
|
paddingHorizontal: 20,
|
|
1647
|
-
|
|
1823
|
+
paddingVertical: 12,
|
|
1824
|
+
borderBottomWidth: 1
|
|
1648
1825
|
},
|
|
1649
|
-
|
|
1826
|
+
iosToolbarTitle: {
|
|
1650
1827
|
fontSize: 17,
|
|
1651
|
-
fontWeight: "600"
|
|
1652
|
-
paddingVertical: 16,
|
|
1653
|
-
paddingHorizontal: 4
|
|
1828
|
+
fontWeight: "600"
|
|
1654
1829
|
},
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
alignItems: "center",
|
|
1658
|
-
justifyContent: "space-between",
|
|
1659
|
-
paddingHorizontal: 16,
|
|
1660
|
-
paddingVertical: 16,
|
|
1661
|
-
borderRadius: 12
|
|
1830
|
+
iosDoneBtn: {
|
|
1831
|
+
padding: 4
|
|
1662
1832
|
},
|
|
1663
|
-
|
|
1833
|
+
iosDoneBtnText: {
|
|
1664
1834
|
fontSize: 17,
|
|
1665
|
-
|
|
1835
|
+
fontWeight: "600"
|
|
1666
1836
|
},
|
|
1667
|
-
|
|
1668
|
-
|
|
1837
|
+
androidHiddenPicker: {
|
|
1838
|
+
height: 0,
|
|
1839
|
+
opacity: 0,
|
|
1840
|
+
position: "absolute"
|
|
1669
1841
|
},
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1842
|
+
webPicker: {
|
|
1843
|
+
borderWidth: 1.5,
|
|
1844
|
+
borderRadius: 14,
|
|
1845
|
+
paddingHorizontal: 20,
|
|
1846
|
+
paddingVertical: 16,
|
|
1847
|
+
fontSize: 17
|
|
1674
1848
|
}
|
|
1675
1849
|
});
|
|
1676
1850
|
var ToastContext = React23.createContext({
|
|
@@ -1737,11 +1911,11 @@ function ToastProvider({ children }) {
|
|
|
1737
1911
|
const toast = React23.useCallback((item) => {
|
|
1738
1912
|
const id = Math.random().toString(36).slice(2);
|
|
1739
1913
|
if (item.variant === "success") {
|
|
1740
|
-
|
|
1914
|
+
Haptics12__namespace.notificationAsync(Haptics12__namespace.NotificationFeedbackType.Success);
|
|
1741
1915
|
} else if (item.variant === "destructive") {
|
|
1742
|
-
|
|
1916
|
+
Haptics12__namespace.notificationAsync(Haptics12__namespace.NotificationFeedbackType.Error);
|
|
1743
1917
|
} else {
|
|
1744
|
-
|
|
1918
|
+
Haptics12__namespace.impactAsync(Haptics12__namespace.ImpactFeedbackStyle.Light);
|
|
1745
1919
|
}
|
|
1746
1920
|
setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3));
|
|
1747
1921
|
}, []);
|
|
@@ -1810,12 +1984,14 @@ function CurrencyInput({
|
|
|
1810
1984
|
onChangeValue,
|
|
1811
1985
|
prefix = "$",
|
|
1812
1986
|
thousandsSeparator = ".",
|
|
1987
|
+
size = "default",
|
|
1813
1988
|
label,
|
|
1814
1989
|
error,
|
|
1815
1990
|
hint,
|
|
1816
1991
|
placeholder,
|
|
1817
1992
|
editable,
|
|
1818
|
-
containerStyle
|
|
1993
|
+
containerStyle,
|
|
1994
|
+
style
|
|
1819
1995
|
}) {
|
|
1820
1996
|
const handleChange = (text) => {
|
|
1821
1997
|
const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
|
|
@@ -1826,6 +2002,7 @@ function CurrencyInput({
|
|
|
1826
2002
|
const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
|
|
1827
2003
|
onChangeValue?.(isNaN(raw) ? 0 : raw);
|
|
1828
2004
|
};
|
|
2005
|
+
const inputStyle = size === "large" ? { fontSize: 36 } : {};
|
|
1829
2006
|
return /* @__PURE__ */ React23__default.default.createElement(
|
|
1830
2007
|
Input,
|
|
1831
2008
|
{
|
|
@@ -1837,7 +2014,8 @@ function CurrencyInput({
|
|
|
1837
2014
|
hint,
|
|
1838
2015
|
placeholder: placeholder ?? `${prefix}0`,
|
|
1839
2016
|
editable,
|
|
1840
|
-
containerStyle
|
|
2017
|
+
containerStyle,
|
|
2018
|
+
style: [inputStyle, style]
|
|
1841
2019
|
}
|
|
1842
2020
|
);
|
|
1843
2021
|
}
|
|
@@ -1853,10 +2031,10 @@ function formatValue(value, prefix, showDecimals) {
|
|
|
1853
2031
|
}
|
|
1854
2032
|
return `${sign}${prefix}${intPart}`;
|
|
1855
2033
|
}
|
|
1856
|
-
function CurrencyDisplay({ value, prefix = "$", showDecimals = false, style }) {
|
|
2034
|
+
function CurrencyDisplay({ value, prefix = "$", showDecimals = false, textColor, style }) {
|
|
1857
2035
|
const { colors } = useTheme();
|
|
1858
2036
|
const formatted = formatValue(value, prefix, showDecimals);
|
|
1859
|
-
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles22.container, style] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles22.amount, { color: colors.foreground }], allowFontScaling: true }, formatted));
|
|
2037
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles22.container, style] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles22.amount, { color: textColor ?? colors.foreground }], allowFontScaling: true }, formatted));
|
|
1860
2038
|
}
|
|
1861
2039
|
var styles22 = reactNative.StyleSheet.create({
|
|
1862
2040
|
container: {},
|
|
@@ -1865,56 +2043,350 @@ var styles22 = reactNative.StyleSheet.create({
|
|
|
1865
2043
|
fontWeight: "700"
|
|
1866
2044
|
}
|
|
1867
2045
|
});
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
2046
|
+
var nativeDriver4 = reactNative.Platform.OS !== "web";
|
|
2047
|
+
function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }) {
|
|
2048
|
+
const { colors } = useTheme();
|
|
2049
|
+
const scale = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
2050
|
+
const handlePressIn = () => {
|
|
2051
|
+
if (!onPress || disabled) return;
|
|
2052
|
+
reactNative.Animated.spring(scale, {
|
|
2053
|
+
toValue: 0.97,
|
|
2054
|
+
useNativeDriver: nativeDriver4,
|
|
2055
|
+
speed: 40,
|
|
2056
|
+
bounciness: 0
|
|
2057
|
+
}).start();
|
|
2058
|
+
};
|
|
2059
|
+
const handlePressOut = () => {
|
|
2060
|
+
reactNative.Animated.spring(scale, {
|
|
2061
|
+
toValue: 1,
|
|
2062
|
+
useNativeDriver: nativeDriver4,
|
|
2063
|
+
speed: 40,
|
|
2064
|
+
bounciness: 4
|
|
2065
|
+
}).start();
|
|
2066
|
+
};
|
|
2067
|
+
const handlePress = () => {
|
|
2068
|
+
Haptics12__namespace.selectionAsync();
|
|
2069
|
+
onPress?.();
|
|
2070
|
+
};
|
|
2071
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [{ transform: [{ scale }] }, disabled && styles23.disabled] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2072
|
+
reactNative.TouchableOpacity,
|
|
2073
|
+
{
|
|
2074
|
+
style: [styles23.container, style],
|
|
2075
|
+
onPress: onPress ? handlePress : void 0,
|
|
2076
|
+
onPressIn: handlePressIn,
|
|
2077
|
+
onPressOut: handlePressOut,
|
|
2078
|
+
disabled,
|
|
2079
|
+
activeOpacity: 1,
|
|
2080
|
+
touchSoundDisabled: true
|
|
2081
|
+
},
|
|
2082
|
+
icon ? /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.iconWrapper }, icon) : null,
|
|
2083
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles23.content }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.title, { color: colors.foreground }], allowFontScaling: true }, title), subtitle ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.subtitle, { color: colors.mutedForeground }], allowFontScaling: true }, subtitle) : null),
|
|
2084
|
+
trailing !== void 0 ? typeof trailing === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles23.trailing, { color: colors.mutedForeground }], allowFontScaling: true }, trailing) : trailing : null
|
|
2085
|
+
));
|
|
1872
2086
|
}
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
2087
|
+
var styles23 = reactNative.StyleSheet.create({
|
|
2088
|
+
container: {
|
|
2089
|
+
flexDirection: "row",
|
|
2090
|
+
alignItems: "center",
|
|
2091
|
+
paddingHorizontal: 16,
|
|
2092
|
+
paddingVertical: 14,
|
|
2093
|
+
gap: 12
|
|
2094
|
+
},
|
|
2095
|
+
iconWrapper: {
|
|
2096
|
+
alignItems: "center",
|
|
2097
|
+
justifyContent: "center"
|
|
2098
|
+
},
|
|
2099
|
+
content: {
|
|
2100
|
+
flex: 1,
|
|
2101
|
+
gap: 3
|
|
2102
|
+
},
|
|
2103
|
+
title: {
|
|
2104
|
+
fontSize: 16,
|
|
2105
|
+
fontWeight: "500",
|
|
2106
|
+
lineHeight: 22
|
|
2107
|
+
},
|
|
2108
|
+
subtitle: {
|
|
2109
|
+
fontSize: 13,
|
|
2110
|
+
lineHeight: 18
|
|
2111
|
+
},
|
|
2112
|
+
trailing: {
|
|
2113
|
+
fontSize: 15
|
|
2114
|
+
},
|
|
2115
|
+
disabled: {
|
|
2116
|
+
opacity: 0.45
|
|
2117
|
+
}
|
|
2118
|
+
});
|
|
2119
|
+
var nativeDriver5 = reactNative.Platform.OS !== "web";
|
|
2120
|
+
function Chip({ label, selected = false, onPress, style }) {
|
|
2121
|
+
const { colors } = useTheme();
|
|
2122
|
+
const scale = React23.useRef(new reactNative.Animated.Value(1)).current;
|
|
2123
|
+
const pressAnim = React23.useRef(new reactNative.Animated.Value(selected ? 1 : 0)).current;
|
|
2124
|
+
React23.useEffect(() => {
|
|
2125
|
+
reactNative.Animated.timing(pressAnim, {
|
|
2126
|
+
toValue: selected ? 1 : 0,
|
|
2127
|
+
duration: 150,
|
|
2128
|
+
easing: reactNative.Easing.out(reactNative.Easing.ease),
|
|
2129
|
+
useNativeDriver: false
|
|
2130
|
+
}).start();
|
|
2131
|
+
}, [selected, pressAnim]);
|
|
2132
|
+
const handlePressIn = () => {
|
|
2133
|
+
reactNative.Animated.spring(scale, {
|
|
2134
|
+
toValue: 0.95,
|
|
2135
|
+
useNativeDriver: nativeDriver5,
|
|
2136
|
+
speed: 40,
|
|
2137
|
+
bounciness: 0
|
|
2138
|
+
}).start();
|
|
1894
2139
|
};
|
|
1895
|
-
|
|
1896
|
-
|
|
2140
|
+
const handlePressOut = () => {
|
|
2141
|
+
reactNative.Animated.spring(scale, {
|
|
2142
|
+
toValue: 1,
|
|
2143
|
+
useNativeDriver: nativeDriver5,
|
|
2144
|
+
speed: 40,
|
|
2145
|
+
bounciness: 4
|
|
2146
|
+
}).start();
|
|
2147
|
+
};
|
|
2148
|
+
const handlePress = () => {
|
|
2149
|
+
Haptics12__namespace.selectionAsync();
|
|
2150
|
+
onPress?.();
|
|
2151
|
+
};
|
|
2152
|
+
const backgroundColor = pressAnim.interpolate({
|
|
2153
|
+
inputRange: [0, 1],
|
|
2154
|
+
outputRange: [colors.secondary, colors.primary]
|
|
2155
|
+
});
|
|
2156
|
+
const textColor = pressAnim.interpolate({
|
|
2157
|
+
inputRange: [0, 1],
|
|
2158
|
+
outputRange: [colors.foreground, colors.primaryForeground]
|
|
2159
|
+
});
|
|
2160
|
+
const borderColor = pressAnim.interpolate({
|
|
2161
|
+
inputRange: [0, 1],
|
|
2162
|
+
outputRange: [colors.border, colors.primary]
|
|
2163
|
+
});
|
|
2164
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [styles24.wrapper, { transform: [{ scale }] }, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2165
|
+
reactNative.TouchableOpacity,
|
|
1897
2166
|
{
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
2167
|
+
onPress: handlePress,
|
|
2168
|
+
onPressIn: handlePressIn,
|
|
2169
|
+
onPressOut: handlePressOut,
|
|
2170
|
+
activeOpacity: 1,
|
|
2171
|
+
touchSoundDisabled: true
|
|
2172
|
+
},
|
|
2173
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.View, { style: [styles24.chip, { backgroundColor, borderColor }] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Animated.Text, { style: [styles24.label, { color: textColor }], allowFontScaling: true }, label))
|
|
2174
|
+
));
|
|
2175
|
+
}
|
|
2176
|
+
function ChipGroup({ options, value, onValueChange, multiSelect = false, style }) {
|
|
2177
|
+
const handlePress = (optionValue) => {
|
|
2178
|
+
if (!multiSelect) {
|
|
2179
|
+
onValueChange?.(optionValue);
|
|
2180
|
+
return;
|
|
1908
2181
|
}
|
|
1909
|
-
|
|
2182
|
+
const currentArray = Array.isArray(value) ? value : value ? [value] : [];
|
|
2183
|
+
const isSelected2 = currentArray.includes(optionValue);
|
|
2184
|
+
let newArray;
|
|
2185
|
+
if (isSelected2) {
|
|
2186
|
+
newArray = currentArray.filter((v) => v !== optionValue);
|
|
2187
|
+
} else {
|
|
2188
|
+
newArray = [...currentArray, optionValue];
|
|
2189
|
+
}
|
|
2190
|
+
onValueChange?.(newArray);
|
|
2191
|
+
};
|
|
2192
|
+
const isSelected = (optionValue) => {
|
|
2193
|
+
if (Array.isArray(value)) {
|
|
2194
|
+
return value.includes(optionValue);
|
|
2195
|
+
}
|
|
2196
|
+
return optionValue === value;
|
|
2197
|
+
};
|
|
2198
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles24.group, style] }, options.map((opt) => /* @__PURE__ */ React23__default.default.createElement(
|
|
2199
|
+
Chip,
|
|
2200
|
+
{
|
|
2201
|
+
key: opt.value,
|
|
2202
|
+
label: opt.label,
|
|
2203
|
+
selected: isSelected(opt.value),
|
|
2204
|
+
onPress: () => handlePress(opt.value)
|
|
2205
|
+
}
|
|
2206
|
+
)));
|
|
1910
2207
|
}
|
|
2208
|
+
var styles24 = reactNative.StyleSheet.create({
|
|
2209
|
+
wrapper: {},
|
|
2210
|
+
chip: {
|
|
2211
|
+
borderRadius: 999,
|
|
2212
|
+
paddingHorizontal: 14,
|
|
2213
|
+
paddingVertical: 8,
|
|
2214
|
+
borderWidth: 1.5,
|
|
2215
|
+
alignItems: "center",
|
|
2216
|
+
justifyContent: "center"
|
|
2217
|
+
},
|
|
2218
|
+
label: {
|
|
2219
|
+
fontSize: 14,
|
|
2220
|
+
fontWeight: "500",
|
|
2221
|
+
lineHeight: 20
|
|
2222
|
+
},
|
|
2223
|
+
group: {
|
|
2224
|
+
flexDirection: "row",
|
|
2225
|
+
flexWrap: "wrap",
|
|
2226
|
+
gap: 8
|
|
2227
|
+
}
|
|
2228
|
+
});
|
|
2229
|
+
function ConfirmDialog({
|
|
2230
|
+
visible,
|
|
2231
|
+
title,
|
|
2232
|
+
description,
|
|
2233
|
+
confirmLabel = "Confirm",
|
|
2234
|
+
cancelLabel = "Cancel",
|
|
2235
|
+
confirmVariant = "primary",
|
|
2236
|
+
onConfirm,
|
|
2237
|
+
onCancel
|
|
2238
|
+
}) {
|
|
2239
|
+
const { colors } = useTheme();
|
|
2240
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onCancel }, /* @__PURE__ */ React23__default.default.createElement(reactNative.TouchableOpacity, { style: styles25.overlay, activeOpacity: 1, onPress: onCancel }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2241
|
+
reactNative.View,
|
|
2242
|
+
{
|
|
2243
|
+
style: [styles25.dialog, { backgroundColor: colors.card }],
|
|
2244
|
+
onStartShouldSetResponder: () => true
|
|
2245
|
+
},
|
|
2246
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles25.title, { color: colors.cardForeground }], allowFontScaling: true }, title),
|
|
2247
|
+
description ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles25.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null,
|
|
2248
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: styles25.actions }, /* @__PURE__ */ React23__default.default.createElement(Button, { label: cancelLabel, variant: "outline", fullWidth: true, onPress: onCancel }), /* @__PURE__ */ React23__default.default.createElement(Button, { label: confirmLabel, variant: confirmVariant, fullWidth: true, onPress: onConfirm }))
|
|
2249
|
+
)));
|
|
2250
|
+
}
|
|
2251
|
+
var styles25 = reactNative.StyleSheet.create({
|
|
2252
|
+
overlay: {
|
|
2253
|
+
flex: 1,
|
|
2254
|
+
backgroundColor: "rgba(0,0,0,0.5)",
|
|
2255
|
+
justifyContent: "center",
|
|
2256
|
+
alignItems: "center",
|
|
2257
|
+
padding: 24
|
|
2258
|
+
},
|
|
2259
|
+
dialog: {
|
|
2260
|
+
width: "100%",
|
|
2261
|
+
maxWidth: 400,
|
|
2262
|
+
borderRadius: 16,
|
|
2263
|
+
padding: 24,
|
|
2264
|
+
gap: 12,
|
|
2265
|
+
shadowColor: "#000",
|
|
2266
|
+
shadowOffset: { width: 0, height: 8 },
|
|
2267
|
+
shadowOpacity: 0.15,
|
|
2268
|
+
shadowRadius: 16,
|
|
2269
|
+
elevation: 8
|
|
2270
|
+
},
|
|
2271
|
+
title: {
|
|
2272
|
+
fontSize: 18,
|
|
2273
|
+
fontWeight: "600",
|
|
2274
|
+
lineHeight: 26
|
|
2275
|
+
},
|
|
2276
|
+
description: {
|
|
2277
|
+
fontSize: 15,
|
|
2278
|
+
lineHeight: 22
|
|
2279
|
+
},
|
|
2280
|
+
actions: {
|
|
2281
|
+
gap: 10,
|
|
2282
|
+
marginTop: 8
|
|
2283
|
+
}
|
|
2284
|
+
});
|
|
2285
|
+
function LabelValue({ label, value, style }) {
|
|
2286
|
+
const { colors } = useTheme();
|
|
2287
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles26.container, style] }, /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles26.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles26.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
|
|
2288
|
+
}
|
|
2289
|
+
var styles26 = reactNative.StyleSheet.create({
|
|
2290
|
+
container: {
|
|
2291
|
+
flexDirection: "row",
|
|
2292
|
+
justifyContent: "space-between",
|
|
2293
|
+
alignItems: "center",
|
|
2294
|
+
gap: 12
|
|
2295
|
+
},
|
|
2296
|
+
label: {
|
|
2297
|
+
fontSize: 13,
|
|
2298
|
+
lineHeight: 18
|
|
2299
|
+
},
|
|
2300
|
+
value: {
|
|
2301
|
+
fontSize: 15,
|
|
2302
|
+
fontWeight: "500",
|
|
2303
|
+
lineHeight: 22,
|
|
2304
|
+
textAlign: "right"
|
|
2305
|
+
}
|
|
2306
|
+
});
|
|
2307
|
+
var MONTH_NAMES = [
|
|
2308
|
+
"January",
|
|
2309
|
+
"February",
|
|
2310
|
+
"March",
|
|
2311
|
+
"April",
|
|
2312
|
+
"May",
|
|
2313
|
+
"June",
|
|
2314
|
+
"July",
|
|
2315
|
+
"August",
|
|
2316
|
+
"September",
|
|
2317
|
+
"October",
|
|
2318
|
+
"November",
|
|
2319
|
+
"December"
|
|
2320
|
+
];
|
|
2321
|
+
function MonthPicker({ value, onChange, style }) {
|
|
2322
|
+
const { colors } = useTheme();
|
|
2323
|
+
const handlePrev = () => {
|
|
2324
|
+
Haptics12__namespace.selectionAsync();
|
|
2325
|
+
if (value.month === 1) {
|
|
2326
|
+
onChange({ month: 12, year: value.year - 1 });
|
|
2327
|
+
} else {
|
|
2328
|
+
onChange({ month: value.month - 1, year: value.year });
|
|
2329
|
+
}
|
|
2330
|
+
};
|
|
2331
|
+
const handleNext = () => {
|
|
2332
|
+
Haptics12__namespace.selectionAsync();
|
|
2333
|
+
if (value.month === 12) {
|
|
2334
|
+
onChange({ month: 1, year: value.year + 1 });
|
|
2335
|
+
} else {
|
|
2336
|
+
onChange({ month: value.month + 1, year: value.year });
|
|
2337
|
+
}
|
|
2338
|
+
};
|
|
2339
|
+
return /* @__PURE__ */ React23__default.default.createElement(reactNative.View, { style: [styles27.container, style] }, /* @__PURE__ */ React23__default.default.createElement(
|
|
2340
|
+
reactNative.TouchableOpacity,
|
|
2341
|
+
{
|
|
2342
|
+
style: styles27.arrow,
|
|
2343
|
+
onPress: handlePrev,
|
|
2344
|
+
activeOpacity: 0.6,
|
|
2345
|
+
touchSoundDisabled: true
|
|
2346
|
+
},
|
|
2347
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u2039")
|
|
2348
|
+
), /* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.label, { color: colors.foreground }], allowFontScaling: true }, MONTH_NAMES[value.month - 1], " ", value.year), /* @__PURE__ */ React23__default.default.createElement(
|
|
2349
|
+
reactNative.TouchableOpacity,
|
|
2350
|
+
{
|
|
2351
|
+
style: styles27.arrow,
|
|
2352
|
+
onPress: handleNext,
|
|
2353
|
+
activeOpacity: 0.6,
|
|
2354
|
+
touchSoundDisabled: true
|
|
2355
|
+
},
|
|
2356
|
+
/* @__PURE__ */ React23__default.default.createElement(reactNative.Text, { style: [styles27.arrowText, { color: colors.foreground }], allowFontScaling: true }, "\u203A")
|
|
2357
|
+
));
|
|
2358
|
+
}
|
|
2359
|
+
var styles27 = reactNative.StyleSheet.create({
|
|
2360
|
+
container: {
|
|
2361
|
+
flexDirection: "row",
|
|
2362
|
+
alignItems: "center",
|
|
2363
|
+
justifyContent: "space-between"
|
|
2364
|
+
},
|
|
2365
|
+
arrow: {
|
|
2366
|
+
width: 44,
|
|
2367
|
+
height: 44,
|
|
2368
|
+
alignItems: "center",
|
|
2369
|
+
justifyContent: "center"
|
|
2370
|
+
},
|
|
2371
|
+
arrowText: {
|
|
2372
|
+
fontSize: 24,
|
|
2373
|
+
lineHeight: 30
|
|
2374
|
+
},
|
|
2375
|
+
label: {
|
|
2376
|
+
fontSize: 17,
|
|
2377
|
+
fontWeight: "500",
|
|
2378
|
+
lineHeight: 24,
|
|
2379
|
+
textAlign: "center",
|
|
2380
|
+
minWidth: 160
|
|
2381
|
+
}
|
|
2382
|
+
});
|
|
1911
2383
|
|
|
1912
2384
|
Object.defineProperty(exports, "BottomSheetModalProvider", {
|
|
1913
2385
|
enumerable: true,
|
|
1914
2386
|
get: function () { return bottomSheet.BottomSheetModalProvider; }
|
|
1915
2387
|
});
|
|
1916
2388
|
exports.Accordion = Accordion;
|
|
1917
|
-
exports.
|
|
2389
|
+
exports.AlertBanner = AlertBanner;
|
|
1918
2390
|
exports.Avatar = Avatar;
|
|
1919
2391
|
exports.Badge = Badge;
|
|
1920
2392
|
exports.Button = Button;
|
|
@@ -1925,11 +2397,17 @@ exports.CardFooter = CardFooter;
|
|
|
1925
2397
|
exports.CardHeader = CardHeader;
|
|
1926
2398
|
exports.CardTitle = CardTitle;
|
|
1927
2399
|
exports.Checkbox = Checkbox;
|
|
2400
|
+
exports.Chip = Chip;
|
|
2401
|
+
exports.ChipGroup = ChipGroup;
|
|
2402
|
+
exports.ConfirmDialog = ConfirmDialog;
|
|
1928
2403
|
exports.CurrencyDisplay = CurrencyDisplay;
|
|
1929
2404
|
exports.CurrencyInput = CurrencyInput;
|
|
1930
|
-
exports.CurrencyInputLarge =
|
|
2405
|
+
exports.CurrencyInputLarge = CurrencyInput;
|
|
1931
2406
|
exports.EmptyState = EmptyState;
|
|
1932
2407
|
exports.Input = Input;
|
|
2408
|
+
exports.LabelValue = LabelValue;
|
|
2409
|
+
exports.ListItem = ListItem;
|
|
2410
|
+
exports.MonthPicker = MonthPicker;
|
|
1933
2411
|
exports.Progress = Progress;
|
|
1934
2412
|
exports.RadioGroup = RadioGroup;
|
|
1935
2413
|
exports.Select = Select;
|