@xaui/native 0.2.8 → 0.9.1-alpha.1

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 (234) hide show
  1. package/dist/chunk-KFCORXWW.cjs +150 -0
  2. package/dist/chunk-M7P46XKI.cjs +100 -0
  3. package/dist/chunk-N357EQCZ.js +150 -0
  4. package/dist/chunk-NHPQQQ7P.cjs +734 -0
  5. package/dist/chunk-PBVPOX7D.js +734 -0
  6. package/dist/chunk-RBNCR5KB.js +100 -0
  7. package/dist/index.cjs +40 -1
  8. package/dist/index.d.cts +5 -2
  9. package/dist/index.d.ts +5 -2
  10. package/dist/index.js +40 -0
  11. package/dist/system/index.cjs +7 -0
  12. package/dist/system/index.d.cts +83 -0
  13. package/dist/system/index.d.ts +83 -0
  14. package/dist/system/index.js +7 -0
  15. package/dist/theme/index.cjs +36 -0
  16. package/dist/theme/index.d.cts +539 -0
  17. package/dist/theme/index.d.ts +539 -0
  18. package/dist/theme/index.js +36 -0
  19. package/dist/theme.type-B3ODSLbB.d.cts +153 -0
  20. package/dist/theme.type-B3ODSLbB.d.ts +153 -0
  21. package/package.json +30 -248
  22. package/README.md +0 -178
  23. package/dist/alert/index.cjs +0 -340
  24. package/dist/alert/index.d.cts +0 -46
  25. package/dist/alert/index.d.ts +0 -46
  26. package/dist/alert/index.js +0 -340
  27. package/dist/app-bar/index.cjs +0 -148
  28. package/dist/app-bar/index.d.cts +0 -59
  29. package/dist/app-bar/index.d.ts +0 -59
  30. package/dist/app-bar/index.js +0 -148
  31. package/dist/autocomplete/index.cjs +0 -1122
  32. package/dist/autocomplete/index.d.cts +0 -88
  33. package/dist/autocomplete/index.d.ts +0 -88
  34. package/dist/autocomplete/index.js +0 -1122
  35. package/dist/avatar/index.cjs +0 -281
  36. package/dist/avatar/index.d.cts +0 -123
  37. package/dist/avatar/index.d.ts +0 -123
  38. package/dist/avatar/index.js +0 -281
  39. package/dist/badge/index.cjs +0 -197
  40. package/dist/badge/index.d.cts +0 -94
  41. package/dist/badge/index.d.ts +0 -94
  42. package/dist/badge/index.js +0 -197
  43. package/dist/bottom-sheet/index.cjs +0 -9
  44. package/dist/bottom-sheet/index.d.cts +0 -84
  45. package/dist/bottom-sheet/index.d.ts +0 -84
  46. package/dist/bottom-sheet/index.js +0 -9
  47. package/dist/bottom-tab-bar/index.cjs +0 -497
  48. package/dist/bottom-tab-bar/index.d.cts +0 -211
  49. package/dist/bottom-tab-bar/index.d.ts +0 -211
  50. package/dist/bottom-tab-bar/index.js +0 -497
  51. package/dist/button/index.cjs +0 -392
  52. package/dist/button/index.d.cts +0 -174
  53. package/dist/button/index.d.ts +0 -174
  54. package/dist/button/index.js +0 -392
  55. package/dist/button.type-j1ZdkkSl.d.cts +0 -4
  56. package/dist/button.type-j1ZdkkSl.d.ts +0 -4
  57. package/dist/card/index.cjs +0 -338
  58. package/dist/card/index.d.cts +0 -191
  59. package/dist/card/index.d.ts +0 -191
  60. package/dist/card/index.js +0 -338
  61. package/dist/carousel/index.cjs +0 -381
  62. package/dist/carousel/index.d.cts +0 -147
  63. package/dist/carousel/index.d.ts +0 -147
  64. package/dist/carousel/index.js +0 -381
  65. package/dist/chart/index.cjs +0 -1026
  66. package/dist/chart/index.d.cts +0 -218
  67. package/dist/chart/index.d.ts +0 -218
  68. package/dist/chart/index.js +0 -1026
  69. package/dist/checkbox/index.cjs +0 -443
  70. package/dist/checkbox/index.d.cts +0 -73
  71. package/dist/checkbox/index.d.ts +0 -73
  72. package/dist/checkbox/index.js +0 -443
  73. package/dist/chip/index.cjs +0 -503
  74. package/dist/chip/index.d.cts +0 -195
  75. package/dist/chip/index.d.ts +0 -195
  76. package/dist/chip/index.js +0 -503
  77. package/dist/chunk-4JFWQ5XT.js +0 -368
  78. package/dist/chunk-56RPWZD2.cjs +0 -9
  79. package/dist/chunk-7UFBLUMV.cjs +0 -136
  80. package/dist/chunk-A45TVXU5.js +0 -337
  81. package/dist/chunk-BYWUAPC4.cjs +0 -368
  82. package/dist/chunk-DECMUMCI.js +0 -0
  83. package/dist/chunk-DHSTKO3K.cjs +0 -19
  84. package/dist/chunk-DJ4Q37UT.cjs +0 -75
  85. package/dist/chunk-EUQDGTST.cjs +0 -1
  86. package/dist/chunk-GBHQCAKW.js +0 -19
  87. package/dist/chunk-RBSA4NH4.js +0 -136
  88. package/dist/chunk-SHBDANQN.js +0 -9
  89. package/dist/chunk-UGEINZM7.cjs +0 -290
  90. package/dist/chunk-UU4HHBDN.js +0 -290
  91. package/dist/chunk-VSZEXOUN.js +0 -384
  92. package/dist/chunk-YIEUN3G5.cjs +0 -384
  93. package/dist/chunk-ZH6ZSV2Q.cjs +0 -337
  94. package/dist/chunk-ZY7IUTAT.js +0 -75
  95. package/dist/color-picker/index.cjs +0 -457
  96. package/dist/color-picker/index.d.cts +0 -124
  97. package/dist/color-picker/index.d.ts +0 -124
  98. package/dist/color-picker/index.js +0 -457
  99. package/dist/core/index.cjs +0 -24
  100. package/dist/core/index.d.cts +0 -28
  101. package/dist/core/index.d.ts +0 -28
  102. package/dist/core/index.js +0 -24
  103. package/dist/datepicker/index.cjs +0 -1625
  104. package/dist/datepicker/index.d.cts +0 -45
  105. package/dist/datepicker/index.d.ts +0 -45
  106. package/dist/datepicker/index.js +0 -1625
  107. package/dist/dialog/index.cjs +0 -372
  108. package/dist/dialog/index.d.cts +0 -151
  109. package/dist/dialog/index.d.ts +0 -151
  110. package/dist/dialog/index.js +0 -372
  111. package/dist/divider/index.cjs +0 -8
  112. package/dist/divider/index.d.cts +0 -30
  113. package/dist/divider/index.d.ts +0 -30
  114. package/dist/divider/index.js +0 -8
  115. package/dist/drawer/index.cjs +0 -237
  116. package/dist/drawer/index.d.cts +0 -58
  117. package/dist/drawer/index.d.ts +0 -58
  118. package/dist/drawer/index.js +0 -237
  119. package/dist/expansion-panel/index.cjs +0 -441
  120. package/dist/expansion-panel/index.d.cts +0 -153
  121. package/dist/expansion-panel/index.d.ts +0 -153
  122. package/dist/expansion-panel/index.js +0 -441
  123. package/dist/fab/index.cjs +0 -9
  124. package/dist/fab/index.d.cts +0 -10
  125. package/dist/fab/index.d.ts +0 -10
  126. package/dist/fab/index.js +0 -9
  127. package/dist/fab-menu/index.cjs +0 -330
  128. package/dist/fab-menu/index.d.cts +0 -125
  129. package/dist/fab-menu/index.d.ts +0 -125
  130. package/dist/fab-menu/index.js +0 -330
  131. package/dist/fab.type-CkUHmXU_.d.ts +0 -86
  132. package/dist/fab.type-DN0vtAh6.d.cts +0 -86
  133. package/dist/feature-discovery/index.cjs +0 -464
  134. package/dist/feature-discovery/index.d.cts +0 -82
  135. package/dist/feature-discovery/index.d.ts +0 -82
  136. package/dist/feature-discovery/index.js +0 -464
  137. package/dist/indicator/index.cjs +0 -8
  138. package/dist/indicator/index.d.cts +0 -47
  139. package/dist/indicator/index.d.ts +0 -47
  140. package/dist/indicator/index.js +0 -8
  141. package/dist/input/index.cjs +0 -1462
  142. package/dist/input/index.d.cts +0 -522
  143. package/dist/input/index.d.ts +0 -522
  144. package/dist/input/index.js +0 -1462
  145. package/dist/input-trigger/index.cjs +0 -197
  146. package/dist/input-trigger/index.d.cts +0 -11
  147. package/dist/input-trigger/index.d.ts +0 -11
  148. package/dist/input-trigger/index.js +0 -197
  149. package/dist/input-trigger.type-Ba4bM3Qp.d.cts +0 -180
  150. package/dist/input-trigger.type-Ba4bM3Qp.d.ts +0 -180
  151. package/dist/list/index.cjs +0 -395
  152. package/dist/list/index.d.cts +0 -188
  153. package/dist/list/index.d.ts +0 -188
  154. package/dist/list/index.js +0 -395
  155. package/dist/menu/index.cjs +0 -316
  156. package/dist/menu/index.d.cts +0 -115
  157. package/dist/menu/index.d.ts +0 -115
  158. package/dist/menu/index.js +0 -316
  159. package/dist/menubox/index.cjs +0 -297
  160. package/dist/menubox/index.d.cts +0 -98
  161. package/dist/menubox/index.d.ts +0 -98
  162. package/dist/menubox/index.js +0 -297
  163. package/dist/pager/index.cjs +0 -205
  164. package/dist/pager/index.d.cts +0 -93
  165. package/dist/pager/index.d.ts +0 -93
  166. package/dist/pager/index.js +0 -205
  167. package/dist/picker/index.cjs +0 -244
  168. package/dist/picker/index.d.cts +0 -121
  169. package/dist/picker/index.d.ts +0 -121
  170. package/dist/picker/index.js +0 -244
  171. package/dist/progress/index.cjs +0 -219
  172. package/dist/progress/index.d.cts +0 -47
  173. package/dist/progress/index.d.ts +0 -47
  174. package/dist/progress/index.js +0 -219
  175. package/dist/radio/index.cjs +0 -465
  176. package/dist/radio/index.d.cts +0 -145
  177. package/dist/radio/index.d.ts +0 -145
  178. package/dist/radio/index.js +0 -465
  179. package/dist/refresh-control/index.cjs +0 -45
  180. package/dist/refresh-control/index.d.cts +0 -55
  181. package/dist/refresh-control/index.d.ts +0 -55
  182. package/dist/refresh-control/index.js +0 -45
  183. package/dist/segment-button/index.cjs +0 -405
  184. package/dist/segment-button/index.d.cts +0 -141
  185. package/dist/segment-button/index.d.ts +0 -141
  186. package/dist/segment-button/index.js +0 -405
  187. package/dist/select/index.cjs +0 -878
  188. package/dist/select/index.d.cts +0 -192
  189. package/dist/select/index.d.ts +0 -192
  190. package/dist/select/index.js +0 -878
  191. package/dist/skeleton/index.cjs +0 -89
  192. package/dist/skeleton/index.d.cts +0 -45
  193. package/dist/skeleton/index.d.ts +0 -45
  194. package/dist/skeleton/index.js +0 -89
  195. package/dist/slider/index.cjs +0 -576
  196. package/dist/slider/index.d.cts +0 -171
  197. package/dist/slider/index.d.ts +0 -171
  198. package/dist/slider/index.js +0 -576
  199. package/dist/snackbar/index.cjs +0 -436
  200. package/dist/snackbar/index.d.cts +0 -174
  201. package/dist/snackbar/index.d.ts +0 -174
  202. package/dist/snackbar/index.js +0 -436
  203. package/dist/snippet/index.cjs +0 -314
  204. package/dist/snippet/index.d.cts +0 -95
  205. package/dist/snippet/index.d.ts +0 -95
  206. package/dist/snippet/index.js +0 -314
  207. package/dist/stepper/index.cjs +0 -550
  208. package/dist/stepper/index.d.cts +0 -137
  209. package/dist/stepper/index.d.ts +0 -137
  210. package/dist/stepper/index.js +0 -550
  211. package/dist/switch/index.cjs +0 -358
  212. package/dist/switch/index.d.cts +0 -28
  213. package/dist/switch/index.d.ts +0 -28
  214. package/dist/switch/index.js +0 -358
  215. package/dist/tabs/index.cjs +0 -440
  216. package/dist/tabs/index.d.cts +0 -180
  217. package/dist/tabs/index.d.ts +0 -180
  218. package/dist/tabs/index.js +0 -440
  219. package/dist/timepicker/index.cjs +0 -823
  220. package/dist/timepicker/index.d.cts +0 -215
  221. package/dist/timepicker/index.d.ts +0 -215
  222. package/dist/timepicker/index.js +0 -823
  223. package/dist/toolbar/index.cjs +0 -333
  224. package/dist/toolbar/index.d.cts +0 -100
  225. package/dist/toolbar/index.d.ts +0 -100
  226. package/dist/toolbar/index.js +0 -333
  227. package/dist/typography/index.cjs +0 -238
  228. package/dist/typography/index.d.cts +0 -113
  229. package/dist/typography/index.d.ts +0 -113
  230. package/dist/typography/index.js +0 -238
  231. package/dist/view/index.cjs +0 -1361
  232. package/dist/view/index.d.cts +0 -833
  233. package/dist/view/index.d.ts +0 -833
  234. package/dist/view/index.js +0 -1361
@@ -1,19 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/select/checkmark-icon.tsx
2
- var _react = require('react'); var _react2 = _interopRequireDefault(_react);
3
- var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
4
- function CheckmarkIcon({ color, size }) {
5
- return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(
6
- _reactnativesvg.Polyline,
7
- {
8
- points: "1 9 7 14 15 4",
9
- stroke: color,
10
- strokeWidth: 2,
11
- strokeLinecap: "round",
12
- strokeLinejoin: "round"
13
- }
14
- ));
15
- }
16
-
17
-
18
-
19
- exports.CheckmarkIcon = CheckmarkIcon;
@@ -1,75 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2
-
3
- var _chunk7UFBLUMVcjs = require('./chunk-7UFBLUMV.cjs');
4
-
5
- // src/components/divider/divider.tsx
6
- var _react = require('react'); var _react2 = _interopRequireDefault(_react);
7
- var _reactnative = require('react-native');
8
-
9
- // src/components/divider/divider.style.ts
10
-
11
- var styles = _reactnative.StyleSheet.create({
12
- horizontal: {
13
- height: 1,
14
- flexShrink: 1,
15
- flexBasis: "auto",
16
- width: "100%"
17
- },
18
- vertical: {
19
- width: 1,
20
- alignSelf: "stretch"
21
- }
22
- });
23
-
24
- // src/components/divider/divider.hook.ts
25
-
26
- var _core = require('@xaui/core');
27
- var useDividerColor = (themeColor, customColor) => {
28
- const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
29
- const dividerColor = _react.useMemo.call(void 0, () => {
30
- if (customColor) {
31
- return customColor;
32
- }
33
- const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
34
- return theme.colors[safeThemeColor].main;
35
- }, [customColor, themeColor, theme]);
36
- return dividerColor;
37
- };
38
- var useDividerSize = (size, orientation) => {
39
- const sizeStyles = _react.useMemo.call(void 0, () => {
40
- if (orientation === "horizontal") {
41
- return {
42
- height: size
43
- };
44
- }
45
- return {
46
- width: size
47
- };
48
- }, [size, orientation]);
49
- return sizeStyles;
50
- };
51
-
52
- // src/components/divider/divider.tsx
53
- var Divider = ({
54
- size = 1,
55
- themeColor = "default",
56
- color,
57
- orientation = "horizontal"
58
- }) => {
59
- const dividerColor = useDividerColor(themeColor, color);
60
- const sizeStyles = useDividerSize(size, orientation);
61
- return /* @__PURE__ */ _react2.default.createElement(
62
- _reactnative.View,
63
- {
64
- style: [
65
- orientation === "horizontal" ? styles.horizontal : styles.vertical,
66
- sizeStyles,
67
- { backgroundColor: dividerColor }
68
- ]
69
- }
70
- );
71
- };
72
-
73
-
74
-
75
- exports.Divider = Divider;
@@ -1 +0,0 @@
1
- "use strict";
@@ -1,19 +0,0 @@
1
- // src/components/select/checkmark-icon.tsx
2
- import React from "react";
3
- import Svg, { Polyline } from "react-native-svg";
4
- function CheckmarkIcon({ color, size }) {
5
- return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ React.createElement(
6
- Polyline,
7
- {
8
- points: "1 9 7 14 15 4",
9
- stroke: color,
10
- strokeWidth: 2,
11
- strokeLinecap: "round",
12
- strokeLinejoin: "round"
13
- }
14
- ));
15
- }
16
-
17
- export {
18
- CheckmarkIcon
19
- };
@@ -1,136 +0,0 @@
1
- // src/core/portal/portal.tsx
2
- import { useContext, useEffect, useLayoutEffect, useRef } from "react";
3
-
4
- // src/core/portal/portal-context.ts
5
- import { createContext } from "react";
6
- var PortalContext = createContext(null);
7
-
8
- // src/core/portal/portal.tsx
9
- var portalId = 0;
10
- var Portal = ({ children }) => {
11
- const context = useContext(PortalContext);
12
- const keyRef = useRef(`portal-${++portalId}`);
13
- useLayoutEffect(() => {
14
- if (!context) return;
15
- context.addPortal(keyRef.current, children);
16
- }, [children, context]);
17
- useEffect(() => {
18
- if (!context) return;
19
- const key = keyRef.current;
20
- return () => {
21
- context.removePortal(key);
22
- };
23
- }, [context]);
24
- return null;
25
- };
26
-
27
- // src/core/portal/portal-host.tsx
28
- import React2, { useCallback, useMemo, useRef as useRef2, useState } from "react";
29
- import { StyleSheet, View } from "react-native";
30
- var hostStyles = StyleSheet.create({
31
- container: {
32
- flex: 1
33
- }
34
- });
35
- var PortalHost = ({ children }) => {
36
- const portals = useRef2(/* @__PURE__ */ new Map());
37
- const [, forceUpdate] = useState(0);
38
- const addPortal = useCallback((key, element) => {
39
- portals.current.set(key, element);
40
- forceUpdate((n) => n + 1);
41
- }, []);
42
- const removePortal = useCallback((key) => {
43
- portals.current.delete(key);
44
- forceUpdate((n) => n + 1);
45
- }, []);
46
- const contextValue = useMemo(
47
- () => ({ addPortal, removePortal }),
48
- [addPortal, removePortal]
49
- );
50
- return /* @__PURE__ */ React2.createElement(PortalContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement(View, { style: hostStyles.container }, children, Array.from(portals.current.entries()).map(([key, element]) => /* @__PURE__ */ React2.createElement(React2.Fragment, { key }, element))));
51
- };
52
-
53
- // src/core/theme-context.tsx
54
- import React3, { createContext as createContext2 } from "react";
55
- import { useColorScheme } from "react-native";
56
- import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
57
- import { colors } from "@xaui/core/palette";
58
- var XUIThemeContext = createContext2(null);
59
- function XUIProvider({ children, theme }) {
60
- const colorScheme = useColorScheme() ?? "light";
61
- const appTheme = React3.useMemo(() => {
62
- const isDarkMode = colorScheme === "dark";
63
- if (!theme) return isDarkMode ? defaultDarkTheme : defaultTheme;
64
- return {
65
- ...defaultTheme,
66
- ...theme,
67
- mode: colorScheme,
68
- colors: {
69
- ...defaultTheme.colors,
70
- ...theme?.colors
71
- },
72
- fontFamilies: {
73
- ...defaultTheme.fontFamilies,
74
- ...theme?.fontFamilies
75
- },
76
- fontSizes: {
77
- ...defaultTheme.fontSizes,
78
- ...theme?.fontSizes
79
- },
80
- componentSizes: {
81
- ...defaultTheme.componentSizes,
82
- ...theme?.componentSizes
83
- },
84
- palette: colors
85
- };
86
- }, [colorScheme, theme]);
87
- return /* @__PURE__ */ React3.createElement(XUIThemeContext.Provider, { value: appTheme }, /* @__PURE__ */ React3.createElement(PortalHost, null, children));
88
- }
89
-
90
- // src/core/theme-hooks.ts
91
- import { useContext as useContext2, useMemo as useMemo2 } from "react";
92
- import { useColorScheme as useColorScheme2 } from "react-native";
93
- function useColorMode() {
94
- const nativeScheme = useColorScheme2();
95
- return nativeScheme ?? "light";
96
- }
97
- function useXUITheme() {
98
- const theme = useContext2(XUIThemeContext);
99
- if (!theme) {
100
- throw new Error("useXUITheme must be used within XUIProvider");
101
- }
102
- return theme;
103
- }
104
- function useXUIColors() {
105
- const theme = useXUITheme();
106
- return theme.colors;
107
- }
108
- function useXUIPalette() {
109
- const theme = useXUITheme();
110
- return useMemo2(() => theme.palette, [theme]);
111
- }
112
- function useBorderRadiusStyles(radius) {
113
- const theme = useXUITheme();
114
- const borderRadius = useMemo2(() => {
115
- const radiusMap = {
116
- none: theme.borderRadius.none,
117
- sm: theme.borderRadius.sm,
118
- md: theme.borderRadius.md,
119
- lg: theme.borderRadius.lg,
120
- full: theme.borderRadius.full
121
- };
122
- return { borderRadius: radiusMap[radius] };
123
- }, [radius, theme]);
124
- return borderRadius;
125
- }
126
-
127
- export {
128
- Portal,
129
- PortalHost,
130
- XUIProvider,
131
- useColorMode,
132
- useXUITheme,
133
- useXUIColors,
134
- useXUIPalette,
135
- useBorderRadiusStyles
136
- };
@@ -1,9 +0,0 @@
1
- // src/core/index.ts
2
- import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
3
- import { colors } from "@xaui/core/palette";
4
-
5
- export {
6
- defaultDarkTheme,
7
- defaultTheme,
8
- colors
9
- };
@@ -1,290 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
-
3
- var _chunkYIEUN3G5cjs = require('./chunk-YIEUN3G5.cjs');
4
-
5
-
6
- var _chunk7UFBLUMVcjs = require('./chunk-7UFBLUMV.cjs');
7
-
8
- // src/components/fab/fab.tsx
9
- var _react = require('react'); var _react2 = _interopRequireDefault(_react);
10
- var _reactnative = require('react-native');
11
-
12
- // src/components/fab/fab.style.ts
13
-
14
- var styles = _reactnative.StyleSheet.create({
15
- container: {
16
- alignSelf: "flex-start"
17
- },
18
- fab: {
19
- flexDirection: "row",
20
- alignItems: "center",
21
- justifyContent: "center",
22
- overflow: "hidden"
23
- },
24
- contentContainer: {
25
- flexDirection: "row",
26
- alignItems: "center",
27
- justifyContent: "center",
28
- gap: 12
29
- },
30
- label: {
31
- fontWeight: "500"
32
- },
33
- disabled: {
34
- opacity: 0.5
35
- }
36
- });
37
-
38
- // src/components/fab/fab.hook.ts
39
-
40
- var _core = require('@xaui/core');
41
- function useFabSizeStyles(size) {
42
- const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
43
- const sizeStyles = _react.useMemo.call(void 0, () => {
44
- const sizes = {
45
- sm: {
46
- width: 40,
47
- height: 40,
48
- borderRadius: theme.borderRadius.lg,
49
- iconSize: 24,
50
- fontSize: theme.fontSizes.sm
51
- },
52
- md: {
53
- width: 56,
54
- height: 56,
55
- borderRadius: theme.borderRadius.xl,
56
- iconSize: 24,
57
- fontSize: theme.fontSizes.md
58
- },
59
- lg: {
60
- width: 96,
61
- height: 96,
62
- borderRadius: theme.borderRadius["2xl"],
63
- iconSize: 36,
64
- fontSize: theme.fontSizes.lg
65
- }
66
- };
67
- return sizes[size];
68
- }, [size, theme]);
69
- const extendedSizeStyles = _react.useMemo.call(void 0, () => {
70
- const sizes = {
71
- sm: {
72
- height: 40,
73
- borderRadius: theme.borderRadius.lg,
74
- paddingHorizontal: theme.spacing.md,
75
- iconSize: 20,
76
- fontSize: theme.fontSizes.sm
77
- },
78
- md: {
79
- height: 56,
80
- borderRadius: theme.borderRadius.xl,
81
- paddingHorizontal: theme.spacing.lg,
82
- iconSize: 24,
83
- fontSize: theme.fontSizes.md
84
- },
85
- lg: {
86
- height: 80,
87
- borderRadius: theme.borderRadius["2xl"],
88
- paddingHorizontal: theme.spacing.xl,
89
- iconSize: 28,
90
- fontSize: theme.fontSizes.lg
91
- }
92
- };
93
- return sizes[size];
94
- }, [size, theme]);
95
- return { sizeStyles, extendedSizeStyles };
96
- }
97
- function useFabVariantStyles(themeColor, variant, elevation = 0) {
98
- const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
99
- const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
100
- const colorScheme = theme.colors[safeThemeColor];
101
- const variantStyles = _react.useMemo.call(void 0, () => {
102
- const variantMap = {
103
- solid: {
104
- backgroundColor: colorScheme.main,
105
- borderWidth: 0
106
- },
107
- flat: {
108
- backgroundColor: colorScheme.container,
109
- borderWidth: 0
110
- },
111
- outlined: {
112
- backgroundColor: "transparent",
113
- borderWidth: theme.borderWidth.md,
114
- borderColor: colorScheme.main
115
- }
116
- };
117
- const baseStyle = variantMap[variant];
118
- const shouldApplyElevation = variant !== "outlined";
119
- const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
120
- return {
121
- ...baseStyle,
122
- ...shouldApplyElevation ? shadowStyles : {},
123
- ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
124
- };
125
- }, [variant, colorScheme, theme, elevation]);
126
- return variantStyles;
127
- }
128
- function useFabIconColor(themeColor, variant) {
129
- const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
130
- const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
131
- const colorScheme = theme.colors[safeThemeColor];
132
- const iconColor = _react.useMemo.call(void 0, () => {
133
- if (variant === "solid") {
134
- return colorScheme.onMain;
135
- }
136
- if (variant === "flat") {
137
- return colorScheme.onContainer;
138
- }
139
- return colorScheme.main;
140
- }, [variant, colorScheme]);
141
- return { iconColor };
142
- }
143
- function useFabRadiusValue(radius, fallback) {
144
- const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
145
- return _react.useMemo.call(void 0, () => {
146
- if (!radius) return fallback;
147
- const radiusMap = {
148
- none: theme.borderRadius.none,
149
- sm: theme.borderRadius.sm,
150
- md: theme.borderRadius.md,
151
- lg: theme.borderRadius.lg,
152
- full: theme.borderRadius.full
153
- };
154
- return radiusMap[radius];
155
- }, [fallback, radius, theme]);
156
- }
157
-
158
- // src/components/fab/fab.animation.ts
159
-
160
- var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
161
- _reactnative.Animated.parallel([
162
- _reactnative.Animated.spring(animatedScale, {
163
- toValue: 0.92,
164
- useNativeDriver: true,
165
- speed: 50,
166
- bounciness: 0
167
- }),
168
- _reactnative.Animated.timing(animatedOpacity, {
169
- toValue: 0.85,
170
- duration: 100,
171
- useNativeDriver: true
172
- })
173
- ]).start();
174
- };
175
- var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
176
- _reactnative.Animated.parallel([
177
- _reactnative.Animated.spring(animatedScale, {
178
- toValue: 1,
179
- useNativeDriver: true,
180
- speed: 50,
181
- bounciness: 0
182
- }),
183
- _reactnative.Animated.timing(animatedOpacity, {
184
- toValue: 1,
185
- duration: 100,
186
- useNativeDriver: true
187
- })
188
- ]).start();
189
- };
190
-
191
- // src/components/fab/fab.tsx
192
- var Fab = ({
193
- icon,
194
- label,
195
- themeColor = "primary",
196
- variant = "solid",
197
- size = "md",
198
- radius,
199
- isDisabled = false,
200
- isLoading = false,
201
- elevation = 0,
202
- customAppearance,
203
- onPress,
204
- onLongPress,
205
- onPressIn,
206
- onPressOut
207
- }) => {
208
- const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
209
- const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
210
- const { sizeStyles, extendedSizeStyles } = useFabSizeStyles(size);
211
- const variantStyles = useFabVariantStyles(themeColor, variant, elevation);
212
- const { iconColor } = useFabIconColor(themeColor, variant);
213
- const isExtended = !!label;
214
- const resolvedRadius = useFabRadiusValue(
215
- radius,
216
- isExtended ? extendedSizeStyles.borderRadius : sizeStyles.borderRadius
217
- );
218
- const handlePressIn = (event) => {
219
- if (!isDisabled && !isLoading) {
220
- runFabPressInAnimation(animatedScale, animatedOpacity);
221
- }
222
- _optionalChain([onPressIn, 'optionalCall', _ => _(event)]);
223
- };
224
- const handlePressOut = (event) => {
225
- if (!isDisabled && !isLoading) {
226
- runFabPressOutAnimation(animatedScale, animatedOpacity);
227
- }
228
- _optionalChain([onPressOut, 'optionalCall', _2 => _2(event)]);
229
- };
230
- const fabDimensionStyles = isExtended ? {
231
- height: extendedSizeStyles.height,
232
- borderRadius: resolvedRadius,
233
- paddingHorizontal: extendedSizeStyles.paddingHorizontal
234
- } : {
235
- width: sizeStyles.width,
236
- height: sizeStyles.height,
237
- borderRadius: resolvedRadius
238
- };
239
- return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _3 => _3.container])] }, /* @__PURE__ */ _react2.default.createElement(
240
- _reactnative.Pressable,
241
- {
242
- onPress: isDisabled || isLoading ? void 0 : onPress,
243
- onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
244
- onPressIn: handlePressIn,
245
- onPressOut: handlePressOut,
246
- disabled: isDisabled || isLoading
247
- },
248
- /* @__PURE__ */ _react2.default.createElement(
249
- _reactnative.Animated.View,
250
- {
251
- style: [
252
- styles.fab,
253
- fabDimensionStyles,
254
- variantStyles,
255
- isDisabled && styles.disabled,
256
- {
257
- transform: [{ scale: animatedScale }],
258
- opacity: animatedOpacity
259
- },
260
- _optionalChain([customAppearance, 'optionalAccess', _4 => _4.fab])
261
- ]
262
- },
263
- isLoading ? /* @__PURE__ */ _react2.default.createElement(
264
- _chunkYIEUN3G5cjs.ActivityIndicator,
265
- {
266
- variant: "circular",
267
- themeColor: variant === "solid" ? void 0 : themeColor,
268
- color: variant === "solid" ? iconColor : void 0,
269
- size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
270
- }
271
- ) : /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.contentContainer }, icon, isExtended && /* @__PURE__ */ _react2.default.createElement(
272
- _reactnative.Text,
273
- {
274
- style: [
275
- styles.label,
276
- {
277
- fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
278
- color: iconColor
279
- }
280
- ]
281
- },
282
- label
283
- ))
284
- )
285
- ));
286
- };
287
-
288
-
289
-
290
- exports.Fab = Fab;