@xaui/native 0.0.26 → 0.0.28

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 (107) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +105 -228
  3. package/dist/alert/index.cjs +92 -166
  4. package/dist/alert/index.js +2 -1
  5. package/dist/app-bar/index.cjs +24 -98
  6. package/dist/app-bar/index.js +2 -1
  7. package/dist/autocomplete/index.cjs +192 -281
  8. package/dist/autocomplete/index.js +36 -48
  9. package/dist/avatar/index.cjs +59 -133
  10. package/dist/avatar/index.js +2 -1
  11. package/dist/badge/index.cjs +26 -99
  12. package/dist/badge/index.js +2 -1
  13. package/dist/bottom-sheet/index.cjs +5 -456
  14. package/dist/bottom-sheet/index.js +4 -363
  15. package/dist/bottom-tab-bar/index.cjs +93 -167
  16. package/dist/bottom-tab-bar/index.js +2 -2
  17. package/dist/button/index.cjs +73 -525
  18. package/dist/button/index.js +3 -2
  19. package/dist/card/index.cjs +76 -169
  20. package/dist/card/index.js +2 -2
  21. package/dist/carousel/index.cjs +68 -145
  22. package/dist/carousel/index.js +1 -1
  23. package/dist/chart/index.cjs +132 -173
  24. package/dist/checkbox/index.cjs +70 -143
  25. package/dist/checkbox/index.js +2 -1
  26. package/dist/chip/index.cjs +89 -164
  27. package/dist/chip/index.js +2 -1
  28. package/dist/chunk-BD72HIPR.cjs +75 -0
  29. package/dist/chunk-DHSTKO3K.cjs +19 -0
  30. package/dist/{chunk-CZFDZPAS.js → chunk-DXXNBF5P.js} +5 -0
  31. package/dist/{chunk-UI5L26KD.js → chunk-F7WH4DMG.js} +1 -1
  32. package/dist/chunk-GBHQCAKW.js +19 -0
  33. package/dist/chunk-HC2SSHNU.js +368 -0
  34. package/dist/chunk-HSPTLUFA.cjs +7 -0
  35. package/dist/chunk-JEGEPGVU.js +287 -0
  36. package/dist/chunk-KTLGDLCB.cjs +287 -0
  37. package/dist/{chunk-GHCVNQET.js → chunk-LTKYHG5V.js} +5 -12
  38. package/dist/{chunk-ULJSCNPE.js → chunk-LUBWRVI2.js} +1 -1
  39. package/dist/chunk-OQ2BLOOG.cjs +138 -0
  40. package/dist/chunk-QMYWIWSX.cjs +384 -0
  41. package/dist/chunk-XFPPR2VB.cjs +368 -0
  42. package/dist/core/index.cjs +22 -168
  43. package/dist/core/index.d.cts +1 -1
  44. package/dist/core/index.d.ts +1 -1
  45. package/dist/core/index.js +5 -3
  46. package/dist/datepicker/index.cjs +239 -320
  47. package/dist/datepicker/index.js +2 -1
  48. package/dist/divider/index.cjs +5 -145
  49. package/dist/divider/index.js +3 -2
  50. package/dist/drawer/index.cjs +39 -112
  51. package/dist/drawer/index.js +2 -1
  52. package/dist/expansion-panel/index.cjs +91 -230
  53. package/dist/expansion-panel/index.js +3 -2
  54. package/dist/fab/index.cjs +6 -722
  55. package/dist/fab/index.js +4 -3
  56. package/dist/fab-menu/index.cjs +81 -814
  57. package/dist/fab-menu/index.js +4 -3
  58. package/dist/feature-discovery/index.cjs +72 -139
  59. package/dist/feature-discovery/index.js +2 -2
  60. package/dist/index.cjs +1 -18
  61. package/dist/indicator/index.cjs +5 -445
  62. package/dist/indicator/index.js +3 -2
  63. package/dist/input/index.cjs +214 -282
  64. package/dist/input/index.js +2 -2
  65. package/dist/list/index.cjs +71 -146
  66. package/dist/list/index.js +2 -1
  67. package/dist/menu/index.cjs +59 -127
  68. package/dist/menu/index.js +2 -2
  69. package/dist/menubox/index.cjs +60 -132
  70. package/dist/menubox/index.js +2 -1
  71. package/dist/pager/index.cjs +42 -80
  72. package/dist/progress/index.cjs +43 -114
  73. package/dist/progress/index.js +2 -1
  74. package/dist/radio/index.cjs +82 -154
  75. package/dist/radio/index.js +2 -1
  76. package/dist/segment-button/index.cjs +60 -147
  77. package/dist/segment-button/index.js +2 -2
  78. package/dist/select/index.cjs +149 -224
  79. package/dist/select/index.js +10 -22
  80. package/dist/skeleton/index.cjs +23 -94
  81. package/dist/skeleton/index.js +2 -2
  82. package/dist/slider/index.cjs +77 -156
  83. package/dist/slider/index.js +2 -1
  84. package/dist/snackbar/index.cjs +420 -0
  85. package/dist/snackbar/index.d.cts +175 -0
  86. package/dist/snackbar/index.d.ts +175 -0
  87. package/dist/snackbar/index.js +420 -0
  88. package/dist/stepper/index.cjs +121 -195
  89. package/dist/stepper/index.js +2 -1
  90. package/dist/switch/index.cjs +48 -121
  91. package/dist/switch/index.js +2 -1
  92. package/dist/tabs/index.cjs +67 -151
  93. package/dist/tabs/index.js +2 -1
  94. package/dist/timepicker/index.cjs +135 -593
  95. package/dist/timepicker/index.js +24 -383
  96. package/dist/toolbar/index.cjs +59 -128
  97. package/dist/toolbar/index.js +2 -1
  98. package/dist/typography/index.cjs +37 -92
  99. package/dist/typography/index.d.cts +1 -1
  100. package/dist/typography/index.d.ts +1 -1
  101. package/dist/typography/index.js +20 -1
  102. package/dist/view/index.cjs +178 -223
  103. package/package.json +7 -1
  104. package/dist/chunk-3XSXTM3G.js +0 -661
  105. package/dist/chunk-4KSZLONZ.js +0 -79
  106. package/dist/chunk-I4V5Y5GD.js +0 -76
  107. package/dist/chunk-URBEEDFX.js +0 -79
@@ -1,367 +1,8 @@
1
1
  import {
2
- Portal,
3
- useXUITheme
4
- } from "../chunk-URBEEDFX.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
- };
2
+ BottomSheet
3
+ } from "../chunk-HC2SSHNU.js";
4
+ import "../chunk-DXXNBF5P.js";
5
+ import "../chunk-LTKYHG5V.js";
365
6
  export {
366
7
  BottomSheet
367
8
  };