@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,46 +1,15 @@
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}); 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; }require('../chunk-HSPTLUFA.cjs');
29
2
 
30
- // src/components/badge/index.ts
31
- var badge_exports = {};
32
- __export(badge_exports, {
33
- Badge: () => Badge
34
- });
35
- module.exports = __toCommonJS(badge_exports);
3
+
4
+ var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
36
5
 
37
6
  // src/components/badge/badge.tsx
38
- var import_react7 = __toESM(require("react"), 1);
39
- var import_react_native5 = require("react-native");
7
+ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
8
+ var _reactnative = require('react-native');
40
9
 
41
10
  // src/components/badge/badge.style.ts
42
- var import_react_native = require("react-native");
43
- var styles = import_react_native.StyleSheet.create({
11
+
12
+ var styles = _reactnative.StyleSheet.create({
44
13
  container: {
45
14
  position: "relative",
46
15
  alignSelf: "flex-start"
@@ -59,49 +28,8 @@ var styles = import_react_native.StyleSheet.create({
59
28
  });
60
29
 
61
30
  // src/components/badge/badge.hook.ts
62
- var import_react6 = require("react");
63
- var import_core = require("@xaui/core");
64
-
65
- // src/core/theme-context.tsx
66
- var import_react4 = __toESM(require("react"), 1);
67
- var import_react_native3 = require("react-native");
68
- var import_theme = require("@xaui/core/theme");
69
- var import_palette = require("@xaui/core/palette");
70
-
71
- // src/core/portal/portal.tsx
72
- var import_react2 = require("react");
73
-
74
- // src/core/portal/portal-context.ts
75
- var import_react = require("react");
76
- var PortalContext = (0, import_react.createContext)(null);
77
-
78
- // src/core/portal/portal-host.tsx
79
- var import_react3 = __toESM(require("react"), 1);
80
- var import_react_native2 = require("react-native");
81
- var hostStyles = import_react_native2.StyleSheet.create({
82
- container: {
83
- flex: 1
84
- }
85
- });
86
-
87
- // src/core/theme-context.tsx
88
- var XUIThemeContext = (0, import_react4.createContext)(null);
89
-
90
- // src/core/theme-hooks.ts
91
- var import_react5 = require("react");
92
- var import_react_native4 = require("react-native");
93
- function useXUITheme() {
94
- const theme = (0, import_react5.useContext)(XUIThemeContext);
95
- if (!theme) {
96
- throw new Error("useXUITheme must be used within XUIProvider");
97
- }
98
- return theme;
99
- }
100
31
 
101
- // src/core/index.ts
102
- var import_theme2 = require("@xaui/core/theme");
103
-
104
- // src/components/badge/badge.hook.ts
32
+ var _core = require('@xaui/core');
105
33
  var sizeMap = {
106
34
  sm: { height: 16, minWidth: 16, dot: 8 },
107
35
  md: { height: 20, minWidth: 20, dot: 10 },
@@ -113,8 +41,8 @@ var fontSizeMap = {
113
41
  lg: 12
114
42
  };
115
43
  function useBadgeSizeStyles(size, isDot, isOneChar) {
116
- const theme = useXUITheme();
117
- return (0, import_react6.useMemo)(() => {
44
+ const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
45
+ return _react.useMemo.call(void 0, () => {
118
46
  const { height, minWidth, dot } = sizeMap[size];
119
47
  const fontSize = fontSizeMap[size];
120
48
  if (isDot) {
@@ -143,10 +71,10 @@ function useBadgeSizeStyles(size, isDot, isOneChar) {
143
71
  }, [isDot, isOneChar, size, theme]);
144
72
  }
145
73
  function useBadgeVariantStyles(themeColor, variant) {
146
- const theme = useXUITheme();
147
- const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
74
+ const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
75
+ const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
148
76
  const colorScheme = theme.colors[safeThemeColor];
149
- return (0, import_react6.useMemo)(() => {
77
+ return _react.useMemo.call(void 0, () => {
150
78
  if (variant === "flat") {
151
79
  return {
152
80
  backgroundColor: colorScheme.background,
@@ -155,7 +83,7 @@ function useBadgeVariantStyles(themeColor, variant) {
155
83
  }
156
84
  if (variant === "faded") {
157
85
  return {
158
- backgroundColor: (0, import_core.withOpacity)(colorScheme.background, 0.7),
86
+ backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
159
87
  color: colorScheme.main
160
88
  };
161
89
  }
@@ -173,8 +101,8 @@ function useBadgeVariantStyles(themeColor, variant) {
173
101
  }, [colorScheme, theme, variant]);
174
102
  }
175
103
  function useBadgeRadiusStyles(radius, height) {
176
- const theme = useXUITheme();
177
- return (0, import_react6.useMemo)(() => {
104
+ const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
105
+ return _react.useMemo.call(void 0, () => {
178
106
  if (radius === "full") {
179
107
  return { borderRadius: height / 2 };
180
108
  }
@@ -182,7 +110,7 @@ function useBadgeRadiusStyles(radius, height) {
182
110
  }, [height, radius, theme.borderRadius]);
183
111
  }
184
112
  function useBadgePlacementStyles(placement, height) {
185
- return (0, import_react6.useMemo)(() => {
113
+ return _react.useMemo.call(void 0, () => {
186
114
  const offset = Math.round(height * 0.3);
187
115
  switch (placement) {
188
116
  case "top-left":
@@ -227,8 +155,8 @@ var Badge = ({
227
155
  const outlineEnabled = disableOutline ? false : showOutline;
228
156
  const outlineStyles = outlineEnabled ? { borderWidth: 1, borderColor: "#FFFFFF" } : { borderWidth: 0, borderColor: "transparent" };
229
157
  const badgeContent = isDot ? null : content;
230
- return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, customAppearance?.container] }, children, shouldRender && /* @__PURE__ */ import_react7.default.createElement(
231
- import_react_native5.View,
158
+ return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _ => _.container])] }, children, shouldRender && /* @__PURE__ */ _react2.default.createElement(
159
+ _reactnative.View,
232
160
  {
233
161
  style: [
234
162
  styles.badge,
@@ -243,13 +171,13 @@ var Badge = ({
243
171
  placementStyles,
244
172
  outlineStyles,
245
173
  variantStyles.shadow,
246
- customAppearance?.badge
174
+ _optionalChain([customAppearance, 'optionalAccess', _2 => _2.badge])
247
175
  ],
248
176
  accessible: true,
249
177
  accessibilityRole: "text"
250
178
  },
251
- badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ import_react7.default.createElement(
252
- import_react_native5.Text,
179
+ badgeContent !== void 0 && badgeContent !== null && /* @__PURE__ */ _react2.default.createElement(
180
+ _reactnative.Text,
253
181
  {
254
182
  style: [
255
183
  styles.text,
@@ -257,14 +185,13 @@ var Badge = ({
257
185
  fontSize: sizeStyles.fontSize,
258
186
  color: variantStyles.color
259
187
  },
260
- customAppearance?.text
188
+ _optionalChain([customAppearance, 'optionalAccess', _3 => _3.text])
261
189
  ]
262
190
  },
263
191
  badgeContent
264
192
  )
265
193
  ));
266
194
  };
267
- // Annotate the CommonJS export names for ESM import in node:
268
- 0 && (module.exports = {
269
- Badge
270
- });
195
+
196
+
197
+ exports.Badge = Badge;
@@ -1,6 +1,7 @@
1
+ import "../chunk-DXXNBF5P.js";
1
2
  import {
2
3
  useXUITheme
3
- } from "../chunk-URBEEDFX.js";
4
+ } from "../chunk-LTKYHG5V.js";
4
5
 
5
6
  // src/components/badge/badge.tsx
6
7
  import React from "react";
@@ -1,459 +1,8 @@
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/bottom-sheet/index.ts
31
- var bottom_sheet_exports = {};
32
- __export(bottom_sheet_exports, {
33
- BottomSheet: () => BottomSheet
34
- });
35
- module.exports = __toCommonJS(bottom_sheet_exports);
3
+ var _chunkXFPPR2VBcjs = require('../chunk-XFPPR2VB.cjs');
4
+ require('../chunk-HSPTLUFA.cjs');
5
+ require('../chunk-OQ2BLOOG.cjs');
36
6
 
37
- // src/components/bottom-sheet/bottom-sheet.tsx
38
- var import_react7 = __toESM(require("react"), 1);
39
- var import_react_native7 = require("react-native");
40
7
 
41
- // src/core/portal/portal.tsx
42
- var import_react2 = require("react");
43
-
44
- // src/core/portal/portal-context.ts
45
- var import_react = require("react");
46
- var PortalContext = (0, import_react.createContext)(null);
47
-
48
- // src/core/portal/portal.tsx
49
- var portalId = 0;
50
- var Portal = ({ children }) => {
51
- const context = (0, import_react2.useContext)(PortalContext);
52
- const keyRef = (0, import_react2.useRef)(`portal-${++portalId}`);
53
- (0, import_react2.useLayoutEffect)(() => {
54
- if (!context) return;
55
- context.addPortal(keyRef.current, children);
56
- }, [children, context]);
57
- (0, import_react2.useEffect)(() => {
58
- if (!context) return;
59
- const key = keyRef.current;
60
- return () => {
61
- context.removePortal(key);
62
- };
63
- }, [context]);
64
- return null;
65
- };
66
-
67
- // src/components/bottom-sheet/bottom-sheet.hook.ts
68
- var import_react6 = require("react");
69
- var import_react_native5 = require("react-native");
70
-
71
- // src/core/theme-context.tsx
72
- var import_react4 = __toESM(require("react"), 1);
73
- var import_react_native2 = require("react-native");
74
- var import_theme = require("@xaui/core/theme");
75
- var import_palette = require("@xaui/core/palette");
76
-
77
- // src/core/portal/portal-host.tsx
78
- var import_react3 = __toESM(require("react"), 1);
79
- var import_react_native = require("react-native");
80
- var hostStyles = import_react_native.StyleSheet.create({
81
- container: {
82
- flex: 1
83
- }
84
- });
85
-
86
- // src/core/theme-context.tsx
87
- var XUIThemeContext = (0, import_react4.createContext)(null);
88
-
89
- // src/core/theme-hooks.ts
90
- var import_react5 = require("react");
91
- var import_react_native3 = require("react-native");
92
- function useXUITheme() {
93
- const theme = (0, import_react5.useContext)(XUIThemeContext);
94
- if (!theme) {
95
- throw new Error("useXUITheme must be used within XUIProvider");
96
- }
97
- return theme;
98
- }
99
-
100
- // src/core/index.ts
101
- var import_theme2 = require("@xaui/core/theme");
102
-
103
- // src/components/bottom-sheet/bottom-sheet.hook.ts
104
- var import_core2 = require("@xaui/core");
105
-
106
- // src/components/bottom-sheet/bottom-sheet.animation.ts
107
- var import_react_native4 = require("react-native");
108
- var SPRING_CONFIG = {
109
- useNativeDriver: true,
110
- speed: 14,
111
- bounciness: 4
112
- };
113
- var TIMING_CONFIG = {
114
- duration: 280,
115
- easing: import_react_native4.Easing.bezier(0.2, 0, 0, 1),
116
- useNativeDriver: true
117
- };
118
- var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
119
- const animation = import_react_native4.Animated.parallel([
120
- import_react_native4.Animated.spring(translateY, {
121
- ...SPRING_CONFIG,
122
- toValue: targetTranslateY
123
- }),
124
- import_react_native4.Animated.timing(backdropOpacity, {
125
- ...TIMING_CONFIG,
126
- toValue: 1
127
- })
128
- ]);
129
- animation.start();
130
- return animation;
131
- };
132
- var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
133
- const animation = import_react_native4.Animated.parallel([
134
- import_react_native4.Animated.timing(translateY, {
135
- ...TIMING_CONFIG,
136
- toValue: screenHeight
137
- }),
138
- import_react_native4.Animated.timing(backdropOpacity, {
139
- ...TIMING_CONFIG,
140
- toValue: 0
141
- })
142
- ]);
143
- animation.start(({ finished }) => {
144
- if (finished && onComplete) {
145
- onComplete();
146
- }
147
- });
148
- return animation;
149
- };
150
- var runSnapAnimation = (translateY, targetTranslateY) => {
151
- const animation = import_react_native4.Animated.spring(translateY, {
152
- ...SPRING_CONFIG,
153
- toValue: targetTranslateY
154
- });
155
- animation.start();
156
- return animation;
157
- };
158
-
159
- // src/components/bottom-sheet/bottom-sheet.hook.ts
160
- var DISMISS_VELOCITY_THRESHOLD = 0.5;
161
- var DISMISS_DISTANCE_FRACTION = 0.3;
162
- var SCREEN_HEIGHT = import_react_native5.Dimensions.get("window").height;
163
- var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
164
- var useBottomSheetAnimation = ({
165
- isOpen,
166
- snapPoints,
167
- initialSnapIndex,
168
- enableSwipeToDismiss,
169
- disableAnimation,
170
- onClose,
171
- onSnapChange
172
- }) => {
173
- const [shouldRender, setShouldRender] = (0, import_react6.useState)(false);
174
- const currentSnapIndex = (0, import_react6.useRef)(initialSnapIndex);
175
- const animationRef = (0, import_react6.useRef)(null);
176
- const translateY = (0, import_react6.useRef)(new import_react_native5.Animated.Value(SCREEN_HEIGHT)).current;
177
- const backdropOpacity = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
178
- const sortedSnapPoints = (0, import_react6.useMemo)(
179
- () => [...snapPoints].sort((a, b) => a - b),
180
- [snapPoints]
181
- );
182
- const snapTranslateValues = (0, import_react6.useMemo)(
183
- () => sortedSnapPoints.map(getTranslateYForSnap),
184
- [sortedSnapPoints]
185
- );
186
- const open = (0, import_react6.useCallback)(() => {
187
- setShouldRender(true);
188
- const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
189
- currentSnapIndex.current = targetIndex;
190
- if (disableAnimation) {
191
- translateY.setValue(snapTranslateValues[targetIndex]);
192
- backdropOpacity.setValue(1);
193
- return;
194
- }
195
- translateY.setValue(SCREEN_HEIGHT);
196
- backdropOpacity.setValue(0);
197
- animationRef.current?.stop();
198
- animationRef.current = runOpenAnimation(
199
- translateY,
200
- backdropOpacity,
201
- snapTranslateValues[targetIndex]
202
- );
203
- }, [
204
- initialSnapIndex,
205
- sortedSnapPoints,
206
- snapTranslateValues,
207
- disableAnimation,
208
- translateY,
209
- backdropOpacity
210
- ]);
211
- const close = (0, import_react6.useCallback)(() => {
212
- if (disableAnimation) {
213
- translateY.setValue(SCREEN_HEIGHT);
214
- backdropOpacity.setValue(0);
215
- setShouldRender(false);
216
- onClose?.();
217
- return;
218
- }
219
- animationRef.current?.stop();
220
- animationRef.current = runCloseAnimation(
221
- translateY,
222
- backdropOpacity,
223
- SCREEN_HEIGHT,
224
- () => {
225
- setShouldRender(false);
226
- onClose?.();
227
- }
228
- );
229
- }, [disableAnimation, translateY, backdropOpacity, onClose]);
230
- const snapTo = (0, import_react6.useCallback)(
231
- (index) => {
232
- const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
233
- currentSnapIndex.current = clampedIndex;
234
- onSnapChange?.(clampedIndex);
235
- if (disableAnimation) {
236
- translateY.setValue(snapTranslateValues[clampedIndex]);
237
- return;
238
- }
239
- animationRef.current?.stop();
240
- animationRef.current = runSnapAnimation(
241
- translateY,
242
- snapTranslateValues[clampedIndex]
243
- );
244
- },
245
- [
246
- sortedSnapPoints,
247
- snapTranslateValues,
248
- disableAnimation,
249
- translateY,
250
- onSnapChange
251
- ]
252
- );
253
- (0, import_react6.useEffect)(() => {
254
- if (isOpen) {
255
- open();
256
- } else if (shouldRender) {
257
- close();
258
- }
259
- }, [isOpen]);
260
- const panResponder = (0, import_react6.useMemo)(
261
- () => import_react_native5.PanResponder.create({
262
- onStartShouldSetPanResponder: () => true,
263
- onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
264
- onPanResponderMove: (_, gestureState) => {
265
- const currentTranslate = snapTranslateValues[currentSnapIndex.current];
266
- const newTranslateY = currentTranslate + gestureState.dy;
267
- const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
268
- const clamped = Math.max(maxExpanded, newTranslateY);
269
- translateY.setValue(clamped);
270
- },
271
- onPanResponderRelease: (_, gestureState) => {
272
- const currentTranslate = snapTranslateValues[currentSnapIndex.current];
273
- const finalPosition = currentTranslate + gestureState.dy;
274
- if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
275
- close();
276
- return;
277
- }
278
- if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
279
- const nextIndex = Math.min(
280
- currentSnapIndex.current + 1,
281
- sortedSnapPoints.length - 1
282
- );
283
- snapTo(nextIndex);
284
- return;
285
- }
286
- if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
287
- const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
288
- if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
289
- close();
290
- return;
291
- }
292
- snapTo(prevIndex);
293
- return;
294
- }
295
- let closestIndex = 0;
296
- let minDistance = Infinity;
297
- snapTranslateValues.forEach((snapVal, index) => {
298
- const distance = Math.abs(finalPosition - snapVal);
299
- if (distance < minDistance) {
300
- minDistance = distance;
301
- closestIndex = index;
302
- }
303
- });
304
- snapTo(closestIndex);
305
- }
306
- }),
307
- [
308
- snapTranslateValues,
309
- sortedSnapPoints,
310
- enableSwipeToDismiss,
311
- translateY,
312
- close,
313
- snapTo
314
- ]
315
- );
316
- return {
317
- shouldRender,
318
- translateY,
319
- backdropOpacity,
320
- panResponder,
321
- close,
322
- snapTo,
323
- screenHeight: SCREEN_HEIGHT
324
- };
325
- };
326
- var useBottomSheetStyles = (themeColor, radius) => {
327
- const theme = useXUITheme();
328
- const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
329
- const colorScheme = theme.colors[safeThemeColor];
330
- const sheetStyles = (0, import_react6.useMemo)(
331
- () => ({
332
- backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
333
- borderTopLeftRadius: theme.borderRadius[radius],
334
- borderTopRightRadius: theme.borderRadius[radius]
335
- }),
336
- [theme, colorScheme, radius]
337
- );
338
- const handleIndicatorColor = (0, import_react6.useMemo)(
339
- () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
340
- [theme, colorScheme]
341
- );
342
- return { sheetStyles, handleIndicatorColor };
343
- };
344
-
345
- // src/components/bottom-sheet/bottom-sheet.style.ts
346
- var import_react_native6 = require("react-native");
347
- var styles = import_react_native6.StyleSheet.create({
348
- backdrop: {
349
- position: "absolute",
350
- top: 0,
351
- left: 0,
352
- right: 0,
353
- bottom: 0,
354
- backgroundColor: "rgba(0, 0, 0, 0.5)"
355
- },
356
- container: {
357
- position: "absolute",
358
- left: 0,
359
- right: 0,
360
- bottom: 0
361
- },
362
- sheet: {
363
- overflow: "hidden"
364
- },
365
- handle: {
366
- alignItems: "center",
367
- justifyContent: "center",
368
- paddingVertical: 10
369
- },
370
- handleIndicator: {
371
- width: 36,
372
- height: 4,
373
- borderRadius: 2
374
- },
375
- content: {
376
- flex: 1
377
- }
378
- });
379
-
380
- // src/components/bottom-sheet/bottom-sheet.tsx
381
- var BottomSheet = ({
382
- children,
383
- isOpen,
384
- snapPoints = [0.4, 0.9],
385
- initialSnapIndex = 0,
386
- themeColor = "default",
387
- radius = "lg",
388
- showBackdrop = true,
389
- closeOnBackdropPress = true,
390
- enableSwipeToDismiss = true,
391
- showHandle = true,
392
- disableAnimation = false,
393
- style,
394
- handleContent,
395
- onClose,
396
- onSnapChange
397
- }) => {
398
- const {
399
- shouldRender,
400
- translateY,
401
- backdropOpacity,
402
- panResponder,
403
- close,
404
- screenHeight
405
- } = useBottomSheetAnimation({
406
- isOpen,
407
- snapPoints,
408
- initialSnapIndex,
409
- enableSwipeToDismiss,
410
- disableAnimation,
411
- onClose,
412
- onSnapChange
413
- });
414
- const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
415
- themeColor,
416
- radius
417
- );
418
- if (!shouldRender) {
419
- return null;
420
- }
421
- const handleBackdropPress = () => {
422
- if (closeOnBackdropPress) {
423
- close();
424
- }
425
- };
426
- return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react7.default.createElement(
427
- import_react_native7.Animated.View,
428
- {
429
- style: [
430
- styles.container,
431
- {
432
- height: screenHeight,
433
- transform: [{ translateY }]
434
- }
435
- ]
436
- },
437
- /* @__PURE__ */ import_react7.default.createElement(
438
- import_react_native7.View,
439
- {
440
- style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
441
- ...panResponder.panHandlers
442
- },
443
- showHandle && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ import_react7.default.createElement(
444
- import_react_native7.View,
445
- {
446
- style: [
447
- styles.handleIndicator,
448
- { backgroundColor: handleIndicatorColor }
449
- ]
450
- }
451
- )),
452
- /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.content }, children)
453
- )
454
- ));
455
- };
456
- // Annotate the CommonJS export names for ESM import in node:
457
- 0 && (module.exports = {
458
- BottomSheet
459
- });
8
+ exports.BottomSheet = _chunkXFPPR2VBcjs.BottomSheet;