@xaui/native 0.0.17 → 0.0.18

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.
Files changed (47) hide show
  1. package/dist/accordion/index.js +2 -2
  2. package/dist/alert/index.js +352 -4
  3. package/dist/autocomplete/index.js +1121 -5
  4. package/dist/avatar/index.js +276 -5
  5. package/dist/badge/index.js +193 -4
  6. package/dist/bottom-sheet/index.js +364 -4
  7. package/dist/button/index.js +2 -2
  8. package/dist/card/index.cjs +429 -0
  9. package/dist/card/index.d.cts +186 -0
  10. package/dist/card/index.d.ts +186 -0
  11. package/dist/card/index.js +336 -0
  12. package/dist/carousel/index.js +377 -3
  13. package/dist/checkbox/index.js +1 -1
  14. package/dist/chip/index.js +497 -6
  15. package/dist/{chunk-VUVE6PK7.js → chunk-F7WH4DMG.js} +1 -1
  16. package/dist/{chunk-TJ2FPLLZ.js → chunk-JEGEPGVU.js} +2 -2
  17. package/dist/{chunk-MZL77KV5.js → chunk-LTKYHG5V.js} +1 -1
  18. package/dist/{chunk-RIVFFZRO.js → chunk-LUBWRVI2.js} +1 -1
  19. package/dist/core/index.cjs +1 -1
  20. package/dist/core/index.js +1 -1
  21. package/dist/datepicker/index.js +1623 -4
  22. package/dist/divider/index.js +2 -2
  23. package/dist/fab/index.js +3 -3
  24. package/dist/fab-menu/index.js +324 -6
  25. package/dist/index.cjs +0 -6446
  26. package/dist/index.d.cts +2 -19
  27. package/dist/index.d.ts +2 -19
  28. package/dist/index.js +0 -73
  29. package/dist/indicator/index.js +2 -2
  30. package/dist/menu/index.js +1 -1
  31. package/dist/progress/index.js +1 -1
  32. package/dist/segment-button/index.js +400 -5
  33. package/dist/select/index.js +1 -1
  34. package/dist/switch/index.js +1 -1
  35. package/dist/typography/index.js +146 -4
  36. package/package.json +6 -1
  37. package/dist/chunk-6PXMB5CH.js +0 -503
  38. package/dist/chunk-DBKVHMSA.js +0 -329
  39. package/dist/chunk-EW5YLICE.js +0 -382
  40. package/dist/chunk-JJOVGRNI.js +0 -1627
  41. package/dist/chunk-K2HSVISE.js +0 -281
  42. package/dist/chunk-OXVIVNIJ.js +0 -356
  43. package/dist/chunk-PWCUULAL.js +0 -150
  44. package/dist/chunk-S3MGBM3G.js +0 -368
  45. package/dist/chunk-STUNTRKJ.js +0 -405
  46. package/dist/chunk-UGDGCMGC.js +0 -197
  47. package/dist/chunk-XUYIAA3A.js +0 -1127
@@ -1,150 +0,0 @@
1
- import {
2
- useXUITheme
3
- } from "./chunk-MZL77KV5.js";
4
-
5
- // src/components/typography/typography.tsx
6
- import React, { useMemo as useMemo2 } from "react";
7
- import { Text } from "react-native";
8
-
9
- // src/components/typography/typography.style.ts
10
- import { StyleSheet } from "react-native";
11
- var styles = StyleSheet.create({
12
- text: {
13
- includeFontPadding: false
14
- }
15
- });
16
-
17
- // src/components/typography/typography.hook.ts
18
- import { useMemo } from "react";
19
- import { getSafeThemeColor } from "@xaui/core";
20
- var knownVariants = {
21
- caption: true,
22
- headlineLarge: true,
23
- headlineMedium: true,
24
- headlineSmall: true,
25
- subtitleLarge: true,
26
- subtitleMedium: true,
27
- subtitleSmall: true,
28
- bodyLarge: true,
29
- bodyMedium: true,
30
- bodySmall: true
31
- };
32
- var isKnownVariant = (variant) => {
33
- return Boolean(knownVariants[variant]);
34
- };
35
- var useTypographyColor = (themeColor) => {
36
- const theme = useXUITheme();
37
- const color = useMemo(() => {
38
- if (themeColor === "default") {
39
- return theme.colors.foreground;
40
- }
41
- const safeThemeColor = getSafeThemeColor(themeColor);
42
- return theme.colors[safeThemeColor].main;
43
- }, [theme, themeColor]);
44
- return color;
45
- };
46
- var useTypographyVariantStyles = (variant) => {
47
- const theme = useXUITheme();
48
- const variantStyles = useMemo(() => {
49
- if (!isKnownVariant(variant)) {
50
- return {
51
- fontFamily: theme.fontFamilies.body,
52
- fontSize: theme.fontSizes.md,
53
- fontWeight: theme.fontWeights.normal
54
- };
55
- }
56
- const styles2 = {
57
- caption: {
58
- fontFamily: theme.fontFamilies.body,
59
- fontSize: theme.fontSizes.xs,
60
- fontWeight: theme.fontWeights.normal
61
- },
62
- headlineLarge: {
63
- fontFamily: theme.fontFamilies.heading,
64
- fontSize: theme.fontSizes["4xl"] + 3,
65
- fontWeight: theme.fontWeights.bold
66
- },
67
- headlineMedium: {
68
- fontFamily: theme.fontFamilies.heading,
69
- fontSize: theme.fontSizes["3xl"] + 3,
70
- fontWeight: theme.fontWeights.bold
71
- },
72
- headlineSmall: {
73
- fontFamily: theme.fontFamilies.heading,
74
- fontSize: theme.fontSizes["2xl"] + 3,
75
- fontWeight: theme.fontWeights.semibold
76
- },
77
- subtitleLarge: {
78
- fontFamily: theme.fontFamilies.body,
79
- fontSize: theme.fontSizes.md + 5,
80
- fontWeight: theme.fontWeights.medium
81
- },
82
- subtitleMedium: {
83
- fontFamily: theme.fontFamilies.body,
84
- fontSize: theme.fontSizes.sm + 5,
85
- fontWeight: theme.fontWeights.medium
86
- },
87
- subtitleSmall: {
88
- fontFamily: theme.fontFamilies.body,
89
- fontSize: theme.fontSizes.xs + 5,
90
- fontWeight: theme.fontWeights.medium
91
- },
92
- bodyLarge: {
93
- fontFamily: theme.fontFamilies.body,
94
- fontSize: theme.fontSizes.md,
95
- fontWeight: theme.fontWeights.normal
96
- },
97
- bodyMedium: {
98
- fontFamily: theme.fontFamilies.body,
99
- fontSize: theme.fontSizes.sm,
100
- fontWeight: theme.fontWeights.normal
101
- },
102
- bodySmall: {
103
- fontFamily: theme.fontFamilies.body,
104
- fontSize: theme.fontSizes.xs,
105
- fontWeight: theme.fontWeights.normal
106
- }
107
- };
108
- return styles2[variant];
109
- }, [theme, variant]);
110
- return variantStyles;
111
- };
112
-
113
- // src/components/typography/typography.tsx
114
- var Typography = ({
115
- children,
116
- align,
117
- themeColor = "default",
118
- variant = "bodyMedium",
119
- maxLines,
120
- overflow = "clip",
121
- style
122
- }) => {
123
- const color = useTypographyColor(themeColor);
124
- const variantStyles = useTypographyVariantStyles(variant);
125
- const colorStyle = { color };
126
- const ellipsizeMode = useMemo2(() => {
127
- if (!maxLines) return void 0;
128
- if (overflow === "clip") return "clip";
129
- return "tail";
130
- }, [maxLines, overflow]);
131
- return /* @__PURE__ */ React.createElement(
132
- Text,
133
- {
134
- numberOfLines: maxLines,
135
- ellipsizeMode,
136
- style: [
137
- styles.text,
138
- variantStyles,
139
- align && { textAlign: align },
140
- colorStyle,
141
- style
142
- ]
143
- },
144
- children
145
- );
146
- };
147
-
148
- export {
149
- Typography
150
- };
@@ -1,368 +0,0 @@
1
- import {
2
- Portal,
3
- useXUITheme
4
- } from "./chunk-MZL77KV5.js";
5
-
6
- // src/components/bottom-sheet/bottom-sheet.tsx
7
- import React from "react";
8
- import { Animated as Animated3, Pressable, View } from "react-native";
9
-
10
- // src/components/bottom-sheet/bottom-sheet.hook.ts
11
- import { useCallback, useEffect, useMemo, useRef, useState } from "react";
12
- import { Animated as Animated2, Dimensions, PanResponder } from "react-native";
13
- import { getSafeThemeColor } from "@xaui/core";
14
-
15
- // src/components/bottom-sheet/bottom-sheet.animation.ts
16
- import { Animated, Easing } from "react-native";
17
- var SPRING_CONFIG = {
18
- useNativeDriver: true,
19
- speed: 14,
20
- bounciness: 4
21
- };
22
- var TIMING_CONFIG = {
23
- duration: 280,
24
- easing: Easing.bezier(0.2, 0, 0, 1),
25
- useNativeDriver: true
26
- };
27
- var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
28
- const animation = Animated.parallel([
29
- Animated.spring(translateY, {
30
- ...SPRING_CONFIG,
31
- toValue: targetTranslateY
32
- }),
33
- Animated.timing(backdropOpacity, {
34
- ...TIMING_CONFIG,
35
- toValue: 1
36
- })
37
- ]);
38
- animation.start();
39
- return animation;
40
- };
41
- var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
42
- const animation = Animated.parallel([
43
- Animated.timing(translateY, {
44
- ...TIMING_CONFIG,
45
- toValue: screenHeight
46
- }),
47
- Animated.timing(backdropOpacity, {
48
- ...TIMING_CONFIG,
49
- toValue: 0
50
- })
51
- ]);
52
- animation.start(({ finished }) => {
53
- if (finished && onComplete) {
54
- onComplete();
55
- }
56
- });
57
- return animation;
58
- };
59
- var runSnapAnimation = (translateY, targetTranslateY) => {
60
- const animation = Animated.spring(translateY, {
61
- ...SPRING_CONFIG,
62
- toValue: targetTranslateY
63
- });
64
- animation.start();
65
- return animation;
66
- };
67
-
68
- // src/components/bottom-sheet/bottom-sheet.hook.ts
69
- var DISMISS_VELOCITY_THRESHOLD = 0.5;
70
- var DISMISS_DISTANCE_FRACTION = 0.3;
71
- var SCREEN_HEIGHT = Dimensions.get("window").height;
72
- var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
73
- var useBottomSheetAnimation = ({
74
- isOpen,
75
- snapPoints,
76
- initialSnapIndex,
77
- enableSwipeToDismiss,
78
- disableAnimation,
79
- onClose,
80
- onSnapChange
81
- }) => {
82
- const [shouldRender, setShouldRender] = useState(false);
83
- const currentSnapIndex = useRef(initialSnapIndex);
84
- const animationRef = useRef(null);
85
- const translateY = useRef(new Animated2.Value(SCREEN_HEIGHT)).current;
86
- const backdropOpacity = useRef(new Animated2.Value(0)).current;
87
- const sortedSnapPoints = useMemo(
88
- () => [...snapPoints].sort((a, b) => a - b),
89
- [snapPoints]
90
- );
91
- const snapTranslateValues = useMemo(
92
- () => sortedSnapPoints.map(getTranslateYForSnap),
93
- [sortedSnapPoints]
94
- );
95
- const open = useCallback(() => {
96
- setShouldRender(true);
97
- const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
98
- currentSnapIndex.current = targetIndex;
99
- if (disableAnimation) {
100
- translateY.setValue(snapTranslateValues[targetIndex]);
101
- backdropOpacity.setValue(1);
102
- return;
103
- }
104
- translateY.setValue(SCREEN_HEIGHT);
105
- backdropOpacity.setValue(0);
106
- animationRef.current?.stop();
107
- animationRef.current = runOpenAnimation(
108
- translateY,
109
- backdropOpacity,
110
- snapTranslateValues[targetIndex]
111
- );
112
- }, [
113
- initialSnapIndex,
114
- sortedSnapPoints,
115
- snapTranslateValues,
116
- disableAnimation,
117
- translateY,
118
- backdropOpacity
119
- ]);
120
- const close = useCallback(() => {
121
- if (disableAnimation) {
122
- translateY.setValue(SCREEN_HEIGHT);
123
- backdropOpacity.setValue(0);
124
- setShouldRender(false);
125
- onClose?.();
126
- return;
127
- }
128
- animationRef.current?.stop();
129
- animationRef.current = runCloseAnimation(
130
- translateY,
131
- backdropOpacity,
132
- SCREEN_HEIGHT,
133
- () => {
134
- setShouldRender(false);
135
- onClose?.();
136
- }
137
- );
138
- }, [disableAnimation, translateY, backdropOpacity, onClose]);
139
- const snapTo = useCallback(
140
- (index) => {
141
- const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
142
- currentSnapIndex.current = clampedIndex;
143
- onSnapChange?.(clampedIndex);
144
- if (disableAnimation) {
145
- translateY.setValue(snapTranslateValues[clampedIndex]);
146
- return;
147
- }
148
- animationRef.current?.stop();
149
- animationRef.current = runSnapAnimation(
150
- translateY,
151
- snapTranslateValues[clampedIndex]
152
- );
153
- },
154
- [
155
- sortedSnapPoints,
156
- snapTranslateValues,
157
- disableAnimation,
158
- translateY,
159
- onSnapChange
160
- ]
161
- );
162
- useEffect(() => {
163
- if (isOpen) {
164
- open();
165
- } else if (shouldRender) {
166
- close();
167
- }
168
- }, [isOpen]);
169
- const panResponder = useMemo(
170
- () => PanResponder.create({
171
- onStartShouldSetPanResponder: () => true,
172
- onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
173
- onPanResponderMove: (_, gestureState) => {
174
- const currentTranslate = snapTranslateValues[currentSnapIndex.current];
175
- const newTranslateY = currentTranslate + gestureState.dy;
176
- const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
177
- const clamped = Math.max(maxExpanded, newTranslateY);
178
- translateY.setValue(clamped);
179
- },
180
- onPanResponderRelease: (_, gestureState) => {
181
- const currentTranslate = snapTranslateValues[currentSnapIndex.current];
182
- const finalPosition = currentTranslate + gestureState.dy;
183
- if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
184
- close();
185
- return;
186
- }
187
- if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
188
- const nextIndex = Math.min(
189
- currentSnapIndex.current + 1,
190
- sortedSnapPoints.length - 1
191
- );
192
- snapTo(nextIndex);
193
- return;
194
- }
195
- if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
196
- const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
197
- if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
198
- close();
199
- return;
200
- }
201
- snapTo(prevIndex);
202
- return;
203
- }
204
- let closestIndex = 0;
205
- let minDistance = Infinity;
206
- snapTranslateValues.forEach((snapVal, index) => {
207
- const distance = Math.abs(finalPosition - snapVal);
208
- if (distance < minDistance) {
209
- minDistance = distance;
210
- closestIndex = index;
211
- }
212
- });
213
- snapTo(closestIndex);
214
- }
215
- }),
216
- [
217
- snapTranslateValues,
218
- sortedSnapPoints,
219
- enableSwipeToDismiss,
220
- translateY,
221
- close,
222
- snapTo
223
- ]
224
- );
225
- return {
226
- shouldRender,
227
- translateY,
228
- backdropOpacity,
229
- panResponder,
230
- close,
231
- snapTo,
232
- screenHeight: SCREEN_HEIGHT
233
- };
234
- };
235
- var useBottomSheetStyles = (themeColor, radius) => {
236
- const theme = useXUITheme();
237
- const safeThemeColor = getSafeThemeColor(themeColor);
238
- const colorScheme = theme.colors[safeThemeColor];
239
- const sheetStyles = useMemo(
240
- () => ({
241
- backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
242
- borderTopLeftRadius: theme.borderRadius[radius],
243
- borderTopRightRadius: theme.borderRadius[radius]
244
- }),
245
- [theme, colorScheme, radius]
246
- );
247
- const handleIndicatorColor = useMemo(
248
- () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
249
- [theme, colorScheme]
250
- );
251
- return { sheetStyles, handleIndicatorColor };
252
- };
253
-
254
- // src/components/bottom-sheet/bottom-sheet.style.ts
255
- import { StyleSheet } from "react-native";
256
- var styles = StyleSheet.create({
257
- backdrop: {
258
- position: "absolute",
259
- top: 0,
260
- left: 0,
261
- right: 0,
262
- bottom: 0,
263
- backgroundColor: "rgba(0, 0, 0, 0.5)"
264
- },
265
- container: {
266
- position: "absolute",
267
- left: 0,
268
- right: 0,
269
- bottom: 0
270
- },
271
- sheet: {
272
- overflow: "hidden"
273
- },
274
- handle: {
275
- alignItems: "center",
276
- justifyContent: "center",
277
- paddingVertical: 10
278
- },
279
- handleIndicator: {
280
- width: 36,
281
- height: 4,
282
- borderRadius: 2
283
- },
284
- content: {
285
- flex: 1
286
- }
287
- });
288
-
289
- // src/components/bottom-sheet/bottom-sheet.tsx
290
- var BottomSheet = ({
291
- children,
292
- isOpen,
293
- snapPoints = [0.4, 0.9],
294
- initialSnapIndex = 0,
295
- themeColor = "default",
296
- radius = "lg",
297
- showBackdrop = true,
298
- closeOnBackdropPress = true,
299
- enableSwipeToDismiss = true,
300
- showHandle = true,
301
- disableAnimation = false,
302
- style,
303
- handleContent,
304
- onClose,
305
- onSnapChange
306
- }) => {
307
- const {
308
- shouldRender,
309
- translateY,
310
- backdropOpacity,
311
- panResponder,
312
- close,
313
- screenHeight
314
- } = useBottomSheetAnimation({
315
- isOpen,
316
- snapPoints,
317
- initialSnapIndex,
318
- enableSwipeToDismiss,
319
- disableAnimation,
320
- onClose,
321
- onSnapChange
322
- });
323
- const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
324
- themeColor,
325
- radius
326
- );
327
- if (!shouldRender) {
328
- return null;
329
- }
330
- const handleBackdropPress = () => {
331
- if (closeOnBackdropPress) {
332
- close();
333
- }
334
- };
335
- return /* @__PURE__ */ React.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React.createElement(Animated3.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React.createElement(
336
- Animated3.View,
337
- {
338
- style: [
339
- styles.container,
340
- {
341
- height: screenHeight,
342
- transform: [{ translateY }]
343
- }
344
- ]
345
- },
346
- /* @__PURE__ */ React.createElement(
347
- View,
348
- {
349
- style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
350
- ...panResponder.panHandlers
351
- },
352
- showHandle && /* @__PURE__ */ React.createElement(View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ React.createElement(
353
- View,
354
- {
355
- style: [
356
- styles.handleIndicator,
357
- { backgroundColor: handleIndicatorColor }
358
- ]
359
- }
360
- )),
361
- /* @__PURE__ */ React.createElement(View, { style: styles.content }, children)
362
- )
363
- ));
364
- };
365
-
366
- export {
367
- BottomSheet
368
- };