@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,725 +1,9 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
29
2
 
30
- // src/components/fab/index.ts
31
- var fab_exports = {};
32
- __export(fab_exports, {
33
- Fab: () => Fab
34
- });
35
- module.exports = __toCommonJS(fab_exports);
3
+ var _chunkKTLGDLCBcjs = require('../chunk-KTLGDLCB.cjs');
4
+ require('../chunk-QMYWIWSX.cjs');
5
+ require('../chunk-HSPTLUFA.cjs');
6
+ require('../chunk-OQ2BLOOG.cjs');
36
7
 
37
- // src/components/fab/fab.tsx
38
- var import_react11 = __toESM(require("react"), 1);
39
- var import_react_native10 = require("react-native");
40
8
 
41
- // src/components/indicator/indicator.tsx
42
- var import_react9 = __toESM(require("react"), 1);
43
- var import_react_native7 = require("react-native");
44
-
45
- // src/core/theme-context.tsx
46
- var import_react4 = __toESM(require("react"), 1);
47
- var import_react_native2 = require("react-native");
48
- var import_theme = require("@xaui/core/theme");
49
- var import_palette = require("@xaui/core/palette");
50
-
51
- // src/core/portal/portal.tsx
52
- var import_react2 = require("react");
53
-
54
- // src/core/portal/portal-context.ts
55
- var import_react = require("react");
56
- var PortalContext = (0, import_react.createContext)(null);
57
-
58
- // src/core/portal/portal-host.tsx
59
- var import_react3 = __toESM(require("react"), 1);
60
- var import_react_native = require("react-native");
61
- var hostStyles = import_react_native.StyleSheet.create({
62
- container: {
63
- flex: 1
64
- }
65
- });
66
-
67
- // src/core/theme-context.tsx
68
- var XUIThemeContext = (0, import_react4.createContext)(null);
69
-
70
- // src/core/theme-hooks.ts
71
- var import_react5 = require("react");
72
- var import_react_native3 = require("react-native");
73
- function useXUITheme() {
74
- const theme = (0, import_react5.useContext)(XUIThemeContext);
75
- if (!theme) {
76
- throw new Error("useXUITheme must be used within XUIProvider");
77
- }
78
- return theme;
79
- }
80
-
81
- // src/core/index.ts
82
- var import_theme2 = require("@xaui/core/theme");
83
-
84
- // src/components/indicator/circular-activity-indicator.tsx
85
- var import_react6 = __toESM(require("react"), 1);
86
- var import_react_native5 = require("react-native");
87
-
88
- // src/components/indicator/indicator.style.ts
89
- var import_react_native4 = require("react-native");
90
- var styles = import_react_native4.StyleSheet.create({
91
- container: {
92
- flexShrink: 1,
93
- flexBasis: "auto",
94
- width: "100%",
95
- justifyContent: "center"
96
- },
97
- layer: {
98
- ...import_react_native4.StyleSheet.absoluteFillObject,
99
- justifyContent: "center",
100
- alignItems: "center"
101
- },
102
- track: {
103
- width: "100%",
104
- overflow: "hidden"
105
- },
106
- progress: {
107
- height: "100%"
108
- }
109
- });
110
-
111
- // src/components/indicator/circular-activity-indicator.tsx
112
- var import_core2 = require("@xaui/core");
113
- var DURATION = 1800;
114
- var CircularActivityIndicator = ({
115
- size = 40,
116
- themeColor = "primary",
117
- color,
118
- backgroundColor,
119
- disableAnimation = false,
120
- showTrack = true
121
- }) => {
122
- const theme = useXUITheme();
123
- const { current: timer } = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0));
124
- const rotation = (0, import_react6.useRef)(void 0);
125
- const startRotation = import_react6.default.useCallback(() => {
126
- if (rotation.current) {
127
- timer.setValue(0);
128
- import_react_native5.Animated.loop(rotation.current).start();
129
- }
130
- }, [timer]);
131
- const stopRotation = () => {
132
- if (rotation.current) rotation.current.stop();
133
- };
134
- (0, import_react6.useEffect)(() => {
135
- if (rotation.current === void 0) {
136
- rotation.current = import_react_native5.Animated.timing(timer, {
137
- duration: DURATION,
138
- easing: import_react_native5.Easing.linear,
139
- useNativeDriver: import_react_native5.Platform.OS !== "web",
140
- toValue: 1
141
- });
142
- }
143
- if (!disableAnimation) startRotation();
144
- else stopRotation();
145
- }, [disableAnimation, startRotation, timer]);
146
- const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
147
- const colorScheme = theme.colors[safeThemeColor];
148
- const mainColor = color || colorScheme.main;
149
- const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
150
- const strokeWidth = size * 0.1;
151
- const frames = 60 * DURATION / 1e3;
152
- const easing = import_react_native5.Easing.bezier(0.4, 0, 0.7, 1);
153
- const containerStyle = {
154
- width: size,
155
- height: size / 2,
156
- overflow: "hidden"
157
- };
158
- return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: [styles.container, { width: size, height: size }] }, /* @__PURE__ */ import_react6.default.createElement(
159
- import_react_native5.View,
160
- {
161
- style: {
162
- width: size,
163
- height: size,
164
- borderRadius: size / 2,
165
- borderWidth: strokeWidth,
166
- borderColor: trackColor
167
- }
168
- }
169
- ), /* @__PURE__ */ import_react6.default.createElement(
170
- import_react_native5.View,
171
- {
172
- style: {
173
- width: size,
174
- height: size,
175
- position: "absolute"
176
- }
177
- },
178
- [0, 1].map((index) => {
179
- const inputRange = Array.from(
180
- new Array(frames),
181
- (_, frameIndex) => frameIndex / (frames - 1)
182
- );
183
- const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
184
- let progress = 2 * frameIndex / (frames - 1);
185
- const rotationValue = index ? +(360 - 15) : -(180 - 15);
186
- if (progress > 1) {
187
- progress = 2 - progress;
188
- }
189
- const direction = index ? -1 : 1;
190
- return `${direction * (180 - 30) * easing(progress) + rotationValue}deg`;
191
- });
192
- const layerStyle = {
193
- width: size,
194
- height: size,
195
- transform: [
196
- {
197
- rotate: timer.interpolate({
198
- inputRange: [0, 1],
199
- outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`]
200
- })
201
- }
202
- ]
203
- };
204
- const viewportStyle = {
205
- width: size,
206
- height: size,
207
- transform: [
208
- { translateY: index ? -size / 2 : 0 },
209
- {
210
- rotate: timer.interpolate({ inputRange, outputRange })
211
- }
212
- ]
213
- };
214
- const offsetStyle = index ? { top: size / 2 } : null;
215
- const lineStyle = {
216
- width: size,
217
- height: size,
218
- borderColor: mainColor,
219
- borderWidth: strokeWidth,
220
- borderRadius: size / 2
221
- };
222
- return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(
223
- import_react_native5.Animated.View,
224
- {
225
- style: [containerStyle, offsetStyle],
226
- collapsable: false
227
- },
228
- /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle })))
229
- )));
230
- })
231
- ));
232
- };
233
-
234
- // src/components/indicator/linear-activity-indicator.tsx
235
- var import_react8 = __toESM(require("react"), 1);
236
- var import_react_native6 = require("react-native");
237
- var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"), 1);
238
-
239
- // src/components/indicator/indicator.hook.ts
240
- var import_react7 = require("react");
241
- var import_react_native_reanimated = require("react-native-reanimated");
242
- var useLinearActivityIndicatorAnimation = (disableAnimation) => {
243
- const primaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
244
- const primaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
245
- const secondaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
246
- const secondaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
247
- (0, import_react7.useEffect)(() => {
248
- if (disableAnimation) {
249
- (0, import_react_native_reanimated.cancelAnimation)(primaryTranslateX);
250
- (0, import_react_native_reanimated.cancelAnimation)(primaryScaleX);
251
- (0, import_react_native_reanimated.cancelAnimation)(secondaryTranslateX);
252
- (0, import_react_native_reanimated.cancelAnimation)(secondaryScaleX);
253
- return;
254
- }
255
- primaryTranslateX.value = (0, import_react_native_reanimated.withRepeat)(
256
- (0, import_react_native_reanimated.withSequence)(
257
- (0, import_react_native_reanimated.withTiming)(0, { duration: 0 }),
258
- (0, import_react_native_reanimated.withTiming)(0, { duration: 400, easing: import_react_native_reanimated.Easing.linear }),
259
- (0, import_react_native_reanimated.withTiming)(0.836714, {
260
- duration: 783,
261
- easing: import_react_native_reanimated.Easing.bezier(0.5, 0, 0.701732, 0.495819)
262
- }),
263
- (0, import_react_native_reanimated.withTiming)(2.00611, {
264
- duration: 817,
265
- easing: import_react_native_reanimated.Easing.bezier(0.302435, 0.381352, 0.55, 0.956352)
266
- })
267
- ),
268
- -1,
269
- false
270
- );
271
- primaryScaleX.value = (0, import_react_native_reanimated.withRepeat)(
272
- (0, import_react_native_reanimated.withSequence)(
273
- (0, import_react_native_reanimated.withTiming)(0.08, { duration: 0 }),
274
- (0, import_react_native_reanimated.withTiming)(0.08, { duration: 733, easing: import_react_native_reanimated.Easing.linear }),
275
- (0, import_react_native_reanimated.withTiming)(0.661479, {
276
- duration: 650,
277
- easing: import_react_native_reanimated.Easing.bezier(0.334731, 0.12482, 0.785844, 1)
278
- }),
279
- (0, import_react_native_reanimated.withTiming)(0.08, {
280
- duration: 617,
281
- easing: import_react_native_reanimated.Easing.bezier(0.06, 0.11, 0.6, 1)
282
- })
283
- ),
284
- -1,
285
- false
286
- );
287
- secondaryTranslateX.value = (0, import_react_native_reanimated.withRepeat)(
288
- (0, import_react_native_reanimated.withSequence)(
289
- (0, import_react_native_reanimated.withTiming)(0, { duration: 0 }),
290
- (0, import_react_native_reanimated.withTiming)(0.376519, {
291
- duration: 500,
292
- easing: import_react_native_reanimated.Easing.bezier(0.15, 0, 0.515058, 0.409685)
293
- }),
294
- (0, import_react_native_reanimated.withTiming)(0.843862, {
295
- duration: 467,
296
- easing: import_react_native_reanimated.Easing.bezier(0.31033, 0.284058, 0.8, 0.733712)
297
- }),
298
- (0, import_react_native_reanimated.withTiming)(1.60278, {
299
- duration: 1033,
300
- easing: import_react_native_reanimated.Easing.bezier(0.4, 0.627035, 0.6, 0.902026)
301
- })
302
- ),
303
- -1,
304
- false
305
- );
306
- secondaryScaleX.value = (0, import_react_native_reanimated.withRepeat)(
307
- (0, import_react_native_reanimated.withSequence)(
308
- (0, import_react_native_reanimated.withTiming)(0.08, { duration: 0 }),
309
- (0, import_react_native_reanimated.withTiming)(0.457104, {
310
- duration: 383,
311
- easing: import_react_native_reanimated.Easing.bezier(0.205028, 0.057051, 0.57661, 0.453971)
312
- }),
313
- (0, import_react_native_reanimated.withTiming)(0.72796, {
314
- duration: 500,
315
- easing: import_react_native_reanimated.Easing.bezier(0.152313, 0.196432, 0.648374, 1.00432)
316
- }),
317
- (0, import_react_native_reanimated.withTiming)(0.08, {
318
- duration: 1117,
319
- easing: import_react_native_reanimated.Easing.bezier(0.257759, -3163e-6, 0.211762, 1.38179)
320
- })
321
- ),
322
- -1,
323
- false
324
- );
325
- return () => {
326
- (0, import_react_native_reanimated.cancelAnimation)(primaryTranslateX);
327
- (0, import_react_native_reanimated.cancelAnimation)(primaryScaleX);
328
- (0, import_react_native_reanimated.cancelAnimation)(secondaryTranslateX);
329
- (0, import_react_native_reanimated.cancelAnimation)(secondaryScaleX);
330
- };
331
- }, [disableAnimation]);
332
- return {
333
- primaryTranslateX,
334
- primaryScaleX,
335
- secondaryTranslateX,
336
- secondaryScaleX
337
- };
338
- };
339
-
340
- // src/components/indicator/linear-activity-indicator.tsx
341
- var LinearActivityIndicator = ({
342
- size = 4,
343
- themeColor = "primary",
344
- color,
345
- backgroundColor,
346
- disableAnimation = false,
347
- borderRadius = 0,
348
- showTrack = true
349
- }) => {
350
- const theme = useXUITheme();
351
- const { primaryTranslateX, primaryScaleX, secondaryTranslateX, secondaryScaleX } = useLinearActivityIndicatorAnimation(disableAnimation);
352
- const colorScheme = theme.colors[themeColor];
353
- const mainColor = color || colorScheme.main;
354
- const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
355
- const barStyle = {
356
- ...import_react_native6.StyleSheet.absoluteFillObject,
357
- backgroundColor: mainColor,
358
- borderRadius
359
- };
360
- const primaryStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
361
- transform: [
362
- { translateX: `${(primaryTranslateX.value - 1.45167) * 100}%` },
363
- { scaleX: primaryScaleX.value }
364
- ]
365
- }));
366
- const secondaryStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
367
- transform: [
368
- { translateX: `${(secondaryTranslateX.value - 0.548889) * 100}%` },
369
- { scaleX: secondaryScaleX.value }
370
- ]
371
- }));
372
- return /* @__PURE__ */ import_react8.default.createElement(
373
- import_react_native6.View,
374
- {
375
- style: {
376
- height: size,
377
- width: "100%",
378
- borderRadius,
379
- backgroundColor: trackColor,
380
- overflow: "hidden"
381
- }
382
- },
383
- /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, primaryStyle] }),
384
- /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, secondaryStyle] })
385
- );
386
- };
387
-
388
- // src/components/indicator/indicator.tsx
389
- var ActivityIndicator = (props) => {
390
- const {
391
- variant = "circular",
392
- themeColor = "primary",
393
- color,
394
- backgroundColor,
395
- size,
396
- disableAnimation = false,
397
- borderRadius,
398
- showTrack
399
- } = props;
400
- const theme = useXUITheme();
401
- const colorScheme = theme.colors[themeColor];
402
- const mainColor = color ?? colorScheme.main;
403
- const trackColor = backgroundColor ?? (showTrack ? colorScheme.background : "transparent");
404
- if (variant === "circular") {
405
- const circleSize = size ?? 40;
406
- return /* @__PURE__ */ import_react9.default.createElement(
407
- import_react_native7.View,
408
- {
409
- style: [styles.container, { width: circleSize, height: circleSize }],
410
- accessible: true,
411
- accessibilityRole: "progressbar",
412
- accessibilityLabel: "Loading"
413
- },
414
- /* @__PURE__ */ import_react9.default.createElement(
415
- CircularActivityIndicator,
416
- {
417
- size: circleSize,
418
- themeColor,
419
- color: mainColor,
420
- backgroundColor: trackColor,
421
- disableAnimation
422
- }
423
- )
424
- );
425
- }
426
- const linearSize = size ?? 4;
427
- return /* @__PURE__ */ import_react9.default.createElement(
428
- import_react_native7.View,
429
- {
430
- style: styles.container,
431
- accessible: true,
432
- accessibilityRole: "progressbar",
433
- accessibilityLabel: "Loading"
434
- },
435
- /* @__PURE__ */ import_react9.default.createElement(
436
- LinearActivityIndicator,
437
- {
438
- size: linearSize,
439
- themeColor,
440
- color: mainColor,
441
- backgroundColor: trackColor,
442
- disableAnimation,
443
- borderRadius,
444
- showTrack
445
- }
446
- )
447
- );
448
- };
449
-
450
- // src/components/fab/fab.style.ts
451
- var import_react_native8 = require("react-native");
452
- var styles2 = import_react_native8.StyleSheet.create({
453
- container: {
454
- alignSelf: "flex-start"
455
- },
456
- fab: {
457
- flexDirection: "row",
458
- alignItems: "center",
459
- justifyContent: "center",
460
- overflow: "hidden"
461
- },
462
- contentContainer: {
463
- flexDirection: "row",
464
- alignItems: "center",
465
- justifyContent: "center",
466
- gap: 12
467
- },
468
- label: {
469
- fontWeight: "500"
470
- },
471
- disabled: {
472
- opacity: 0.5
473
- }
474
- });
475
-
476
- // src/components/fab/fab.hook.ts
477
- var import_react10 = require("react");
478
- var import_core6 = require("@xaui/core");
479
- function useFabSizeStyles(size) {
480
- const theme = useXUITheme();
481
- const sizeStyles = (0, import_react10.useMemo)(() => {
482
- const sizes = {
483
- sm: {
484
- width: 40,
485
- height: 40,
486
- borderRadius: theme.borderRadius.lg,
487
- iconSize: 24,
488
- fontSize: theme.fontSizes.sm
489
- },
490
- md: {
491
- width: 56,
492
- height: 56,
493
- borderRadius: theme.borderRadius.xl,
494
- iconSize: 24,
495
- fontSize: theme.fontSizes.md
496
- },
497
- lg: {
498
- width: 96,
499
- height: 96,
500
- borderRadius: theme.borderRadius["2xl"],
501
- iconSize: 36,
502
- fontSize: theme.fontSizes.lg
503
- }
504
- };
505
- return sizes[size];
506
- }, [size, theme]);
507
- const extendedSizeStyles = (0, import_react10.useMemo)(() => {
508
- const sizes = {
509
- sm: {
510
- height: 40,
511
- borderRadius: theme.borderRadius.lg,
512
- paddingHorizontal: theme.spacing.md,
513
- iconSize: 20,
514
- fontSize: theme.fontSizes.sm
515
- },
516
- md: {
517
- height: 56,
518
- borderRadius: theme.borderRadius.xl,
519
- paddingHorizontal: theme.spacing.lg,
520
- iconSize: 24,
521
- fontSize: theme.fontSizes.md
522
- },
523
- lg: {
524
- height: 80,
525
- borderRadius: theme.borderRadius["2xl"],
526
- paddingHorizontal: theme.spacing.xl,
527
- iconSize: 28,
528
- fontSize: theme.fontSizes.lg
529
- }
530
- };
531
- return sizes[size];
532
- }, [size, theme]);
533
- return { sizeStyles, extendedSizeStyles };
534
- }
535
- function useFabVariantStyles(themeColor, variant, elevation = 0) {
536
- const theme = useXUITheme();
537
- const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
538
- const colorScheme = theme.colors[safeThemeColor];
539
- const variantStyles = (0, import_react10.useMemo)(() => {
540
- const variantMap = {
541
- solid: {
542
- backgroundColor: colorScheme.main,
543
- borderWidth: 0
544
- },
545
- flat: {
546
- backgroundColor: colorScheme.background,
547
- borderWidth: 0
548
- },
549
- outlined: {
550
- backgroundColor: "transparent",
551
- borderWidth: theme.borderWidth.md,
552
- borderColor: colorScheme.main
553
- }
554
- };
555
- const baseStyle = variantMap[variant];
556
- const shouldApplyElevation = variant !== "outlined";
557
- const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
558
- return {
559
- ...baseStyle,
560
- ...shouldApplyElevation ? shadowStyles : {},
561
- ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
562
- };
563
- }, [variant, colorScheme, theme, elevation]);
564
- return variantStyles;
565
- }
566
- function useFabIconColor(themeColor, variant) {
567
- const theme = useXUITheme();
568
- const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
569
- const colorScheme = theme.colors[safeThemeColor];
570
- const iconColor = (0, import_react10.useMemo)(() => {
571
- if (variant === "solid") {
572
- return colorScheme.foreground;
573
- }
574
- return colorScheme.main;
575
- }, [variant, colorScheme]);
576
- return { iconColor };
577
- }
578
- function useFabRadiusValue(radius, fallback) {
579
- const theme = useXUITheme();
580
- return (0, import_react10.useMemo)(() => {
581
- if (!radius) return fallback;
582
- const radiusMap = {
583
- none: theme.borderRadius.none,
584
- sm: theme.borderRadius.sm,
585
- md: theme.borderRadius.md,
586
- lg: theme.borderRadius.lg,
587
- full: theme.borderRadius.full
588
- };
589
- return radiusMap[radius];
590
- }, [fallback, radius, theme]);
591
- }
592
-
593
- // src/components/fab/fab.animation.ts
594
- var import_react_native9 = require("react-native");
595
- var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
596
- import_react_native9.Animated.parallel([
597
- import_react_native9.Animated.spring(animatedScale, {
598
- toValue: 0.92,
599
- useNativeDriver: true,
600
- speed: 50,
601
- bounciness: 0
602
- }),
603
- import_react_native9.Animated.timing(animatedOpacity, {
604
- toValue: 0.85,
605
- duration: 100,
606
- useNativeDriver: true
607
- })
608
- ]).start();
609
- };
610
- var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
611
- import_react_native9.Animated.parallel([
612
- import_react_native9.Animated.spring(animatedScale, {
613
- toValue: 1,
614
- useNativeDriver: true,
615
- speed: 50,
616
- bounciness: 0
617
- }),
618
- import_react_native9.Animated.timing(animatedOpacity, {
619
- toValue: 1,
620
- duration: 100,
621
- useNativeDriver: true
622
- })
623
- ]).start();
624
- };
625
-
626
- // src/components/fab/fab.tsx
627
- var Fab = ({
628
- icon,
629
- label,
630
- themeColor = "primary",
631
- variant = "solid",
632
- size = "md",
633
- radius,
634
- isDisabled = false,
635
- isLoading = false,
636
- elevation = 0,
637
- customAppearance,
638
- onPress,
639
- onLongPress,
640
- onPressIn,
641
- onPressOut
642
- }) => {
643
- const animatedScale = import_react11.default.useRef(new import_react_native10.Animated.Value(1)).current;
644
- const animatedOpacity = import_react11.default.useRef(new import_react_native10.Animated.Value(1)).current;
645
- const { sizeStyles, extendedSizeStyles } = useFabSizeStyles(size);
646
- const variantStyles = useFabVariantStyles(themeColor, variant, elevation);
647
- const { iconColor } = useFabIconColor(themeColor, variant);
648
- const isExtended = !!label;
649
- const resolvedRadius = useFabRadiusValue(
650
- radius,
651
- isExtended ? extendedSizeStyles.borderRadius : sizeStyles.borderRadius
652
- );
653
- const handlePressIn = (event) => {
654
- if (!isDisabled && !isLoading) {
655
- runFabPressInAnimation(animatedScale, animatedOpacity);
656
- }
657
- onPressIn?.(event);
658
- };
659
- const handlePressOut = (event) => {
660
- if (!isDisabled && !isLoading) {
661
- runFabPressOutAnimation(animatedScale, animatedOpacity);
662
- }
663
- onPressOut?.(event);
664
- };
665
- const fabDimensionStyles = isExtended ? {
666
- height: extendedSizeStyles.height,
667
- borderRadius: resolvedRadius,
668
- paddingHorizontal: extendedSizeStyles.paddingHorizontal
669
- } : {
670
- width: sizeStyles.width,
671
- height: sizeStyles.height,
672
- borderRadius: resolvedRadius
673
- };
674
- return /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: [styles2.container, customAppearance?.container] }, /* @__PURE__ */ import_react11.default.createElement(
675
- import_react_native10.Pressable,
676
- {
677
- onPress: isDisabled || isLoading ? void 0 : onPress,
678
- onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
679
- onPressIn: handlePressIn,
680
- onPressOut: handlePressOut,
681
- disabled: isDisabled || isLoading
682
- },
683
- /* @__PURE__ */ import_react11.default.createElement(
684
- import_react_native10.Animated.View,
685
- {
686
- style: [
687
- styles2.fab,
688
- fabDimensionStyles,
689
- variantStyles,
690
- isDisabled && styles2.disabled,
691
- {
692
- transform: [{ scale: animatedScale }],
693
- opacity: animatedOpacity
694
- },
695
- customAppearance?.fab
696
- ]
697
- },
698
- isLoading ? /* @__PURE__ */ import_react11.default.createElement(
699
- ActivityIndicator,
700
- {
701
- variant: "circular",
702
- themeColor: variant === "solid" ? void 0 : themeColor,
703
- color: variant === "solid" ? iconColor : void 0,
704
- size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
705
- }
706
- ) : /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.contentContainer }, icon, isExtended && /* @__PURE__ */ import_react11.default.createElement(
707
- import_react_native10.Text,
708
- {
709
- style: [
710
- styles2.label,
711
- {
712
- fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
713
- color: iconColor
714
- }
715
- ]
716
- },
717
- label
718
- ))
719
- )
720
- ));
721
- };
722
- // Annotate the CommonJS export names for ESM import in node:
723
- 0 && (module.exports = {
724
- Fab
725
- });
9
+ exports.Fab = _chunkKTLGDLCBcjs.Fab;