@xaui/native 0.0.26 → 0.0.28

package/dist/chunk-XFPPR2VB.cjs

@@ -0,0 +1,368 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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; }
+
+
+var _chunkOQ2BLOOGcjs = require('./chunk-OQ2BLOOG.cjs');
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+
+
+var _core = require('@xaui/core');
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: _reactnative.Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = _reactnative.Animated.parallel([
+    _reactnative.Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    _reactnative.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = _reactnative.Animated.parallel([
+    _reactnative.Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    _reactnative.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = _reactnative.Animated.spring(translateY, {
+    ...SPRING_CONFIG,
+    toValue: targetTranslateY
+  });
+  animation.start();
+  return animation;
+};
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var DISMISS_VELOCITY_THRESHOLD = 0.5;
+var DISMISS_DISTANCE_FRACTION = 0.3;
+var SCREEN_HEIGHT = _reactnative.Dimensions.get("window").height;
+var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  onClose,
+  onSnapChange
+}) => {
+  const [shouldRender, setShouldRender] = _react.useState.call(void 0, false);
+  const currentSnapIndex = _react.useRef.call(void 0, initialSnapIndex);
+  const animationRef = _react.useRef.call(void 0, null);
+  const translateY = _react.useRef.call(void 0, new _reactnative.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
+  const sortedSnapPoints = _react.useMemo.call(void 0, 
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = _react.useMemo.call(void 0, 
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = _react.useCallback.call(void 0, () => {
+    setShouldRender(true);
+    const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
+    currentSnapIndex.current = targetIndex;
+    if (disableAnimation) {
+      translateY.setValue(snapTranslateValues[targetIndex]);
+      backdropOpacity.setValue(1);
+      return;
+    }
+    translateY.setValue(SCREEN_HEIGHT);
+    backdropOpacity.setValue(0);
+    _optionalChain([animationRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.stop, 'call', _4 => _4()]);
+    animationRef.current = runOpenAnimation(
+      translateY,
+      backdropOpacity,
+      snapTranslateValues[targetIndex]
+    );
+  }, [
+    initialSnapIndex,
+    sortedSnapPoints,
+    snapTranslateValues,
+    disableAnimation,
+    translateY,
+    backdropOpacity
+  ]);
+  const close = _react.useCallback.call(void 0, () => {
+    if (disableAnimation) {
+      translateY.setValue(SCREEN_HEIGHT);
+      backdropOpacity.setValue(0);
+      setShouldRender(false);
+      _optionalChain([onClose, 'optionalCall', _5 => _5()]);
+      return;
+    }
+    _optionalChain([animationRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.stop, 'call', _8 => _8()]);
+    animationRef.current = runCloseAnimation(
+      translateY,
+      backdropOpacity,
+      SCREEN_HEIGHT,
+      () => {
+        setShouldRender(false);
+        _optionalChain([onClose, 'optionalCall', _9 => _9()]);
+      }
+    );
+  }, [disableAnimation, translateY, backdropOpacity, onClose]);
+  const snapTo = _react.useCallback.call(void 0, 
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
+      currentSnapIndex.current = clampedIndex;
+      _optionalChain([onSnapChange, 'optionalCall', _10 => _10(clampedIndex)]);
+      if (disableAnimation) {
+        translateY.setValue(snapTranslateValues[clampedIndex]);
+        return;
+      }
+      _optionalChain([animationRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.stop, 'call', _13 => _13()]);
+      animationRef.current = runSnapAnimation(
+        translateY,
+        snapTranslateValues[clampedIndex]
+      );
+    },
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = _react.useMemo.call(void 0, 
+    () => _reactnative.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
+      onPanResponderMove: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const newTranslateY = currentTranslate + gestureState.dy;
+        const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
+        const clamped = Math.max(maxExpanded, newTranslateY);
+        translateY.setValue(clamped);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const finalPosition = currentTranslate + gestureState.dy;
+        if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
+          close();
+          return;
+        }
+        if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
+          const nextIndex = Math.min(
+            currentSnapIndex.current + 1,
+            sortedSnapPoints.length - 1
+          );
+          snapTo(nextIndex);
+          return;
+        }
+        if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
+          const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
+          if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
+            close();
+            return;
+          }
+          snapTo(prevIndex);
+          return;
+        }
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        snapTranslateValues.forEach((snapVal, index) => {
+          const distance = Math.abs(finalPosition - snapVal);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = index;
+          }
+        });
+        snapTo(closestIndex);
+      }
+    }),
+    [
+      snapTranslateValues,
+      sortedSnapPoints,
+      enableSwipeToDismiss,
+      translateY,
+      close,
+      snapTo
+    ]
+  );
+  return {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    snapTo,
+    screenHeight: SCREEN_HEIGHT
+  };
+};
+var useBottomSheetStyles = (themeColor, radius) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = _react.useMemo.call(void 0, 
+    () => ({
+      backgroundColor: _nullishCoalesce(_nullishCoalesce(colorScheme.background, () => ( theme.colors.background)), () => ( "#ffffff")),
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = _react.useMemo.call(void 0, 
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+
+var styles = _reactnative.StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10
+  },
+  handleIndicator: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var BottomSheet = ({
+  children,
+  isOpen,
+  snapPoints = [0.4, 0.9],
+  initialSnapIndex = 0,
+  themeColor = "default",
+  radius = "lg",
+  showBackdrop = true,
+  closeOnBackdropPress = true,
+  enableSwipeToDismiss = true,
+  showHandle = true,
+  disableAnimation = false,
+  style,
+  handleContent,
+  onClose,
+  onSnapChange
+}) => {
+  const {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    screenHeight
+  } = useBottomSheetAnimation({
+    isOpen,
+    snapPoints,
+    initialSnapIndex,
+    enableSwipeToDismiss,
+    disableAnimation,
+    onClose,
+    onSnapChange
+  });
+  const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
+    themeColor,
+    radius
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ _react2.default.createElement(_chunkOQ2BLOOGcjs.Portal, null, showBackdrop && /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Animated.View,
+    {
+      style: [
+        styles.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.handle }, _nullishCoalesce(handleContent, () => ( /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.View,
+        {
+          style: [
+            styles.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )))),
+      /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.content }, children)
+    )
+  ));
+};
+
+
+
+exports.BottomSheet = BottomSheet;

package/dist/core/index.cjs

@@ -1,168 +1,22 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/core/index.ts
-var core_exports = {};
-__export(core_exports, {
-  Portal: () => Portal,
-  PortalHost: () => PortalHost,
-  XUIProvider: () => XUIProvider,
-  defaultDarkTheme: () => import_theme2.defaultDarkTheme,
-  defaultTheme: () => import_theme2.defaultTheme,
-  useColorMode: () => useColorMode,
-  useXUIColors: () => useXUIColors,
-  useXUITheme: () => useXUITheme
-});
-module.exports = __toCommonJS(core_exports);
-
-// src/core/theme-context.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
-var import_theme = require("@xaui/core/theme");
-var import_palette = require("@xaui/core/palette");
-
-// src/core/portal/portal.tsx
-var import_react2 = require("react");
-
-// src/core/portal/portal-context.ts
-var import_react = require("react");
-var PortalContext = (0, import_react.createContext)(null);
-
-// src/core/portal/portal.tsx
-var portalId = 0;
-var Portal = ({ children }) => {
-  const context = (0, import_react2.useContext)(PortalContext);
-  const keyRef = (0, import_react2.useRef)(`portal-${++portalId}`);
-  (0, import_react2.useLayoutEffect)(() => {
-    if (!context) return;
-    context.addPortal(keyRef.current, children);
-  }, [children, context]);
-  (0, import_react2.useEffect)(() => {
-    if (!context) return;
-    const key = keyRef.current;
-    return () => {
-      context.removePortal(key);
-    };
-  }, [context]);
-  return null;
-};
-
-// src/core/portal/portal-host.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
-var hostStyles = import_react_native.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-var PortalHost = ({ children }) => {
-  const portals = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
-  const [, forceUpdate] = (0, import_react3.useState)(0);
-  const addPortal = (0, import_react3.useCallback)((key, element) => {
-    portals.current.set(key, element);
-    forceUpdate((n) => n + 1);
-  }, []);
-  const removePortal = (0, import_react3.useCallback)((key) => {
-    portals.current.delete(key);
-    forceUpdate((n) => n + 1);
-  }, []);
-  const contextValue = (0, import_react3.useMemo)(
-    () => ({ addPortal, removePortal }),
-    [addPortal, removePortal]
-  );
-  return /* @__PURE__ */ import_react3.default.createElement(PortalContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react3.default.createElement(import_react_native.View, { style: hostStyles.container }, children, Array.from(portals.current.entries()).map(([key, element]) => /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, { key }, element))));
-};
-
-// src/core/theme-context.tsx
-var XUIThemeContext = (0, import_react4.createContext)(null);
-function XUIProvider({
-  children,
-  theme: lightTheme,
-  darkTheme
-}) {
-  const colorScheme = (0, import_react_native2.useColorScheme)() ?? "light";
-  const theme = import_react4.default.useMemo(() => {
-    if (!darkTheme && !lightTheme) return import_theme.defaultTheme;
-    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
-    if (!activeTheme) return import_theme.defaultTheme;
-    return {
-      ...import_theme.defaultTheme,
-      ...activeTheme,
-      mode,
-      colors: {
-        ...import_theme.defaultTheme.colors,
-        ...activeTheme.colors
-      },
-      fontFamilies: {
-        ...import_theme.defaultTheme.fontFamilies,
-        ...activeTheme.fontFamilies
-      },
-      fontSizes: {
-        ...import_theme.defaultTheme.fontSizes,
-        ...activeTheme.fontSizes
-      },
-      palette: import_palette.colors
-    };
-  }, [lightTheme, darkTheme, colorScheme]);
-  return /* @__PURE__ */ import_react4.default.createElement(XUIThemeContext.Provider, { value: theme }, /* @__PURE__ */ import_react4.default.createElement(PortalHost, null, children));
-}
-
-// src/core/theme-hooks.ts
-var import_react5 = require("react");
-var import_react_native3 = require("react-native");
-function useColorMode() {
-  const nativeScheme = (0, import_react_native3.useColorScheme)();
-  return nativeScheme ?? "light";
-}
-function useXUITheme() {
-  const theme = (0, import_react5.useContext)(XUIThemeContext);
-  if (!theme) {
-    throw new Error("useXUITheme must be used within XUIProvider");
-  }
-  return theme;
-}
-function useXUIColors() {
-  const theme = useXUITheme();
-  return theme.colors;
-}
-
-// src/core/index.ts
-var import_theme2 = require("@xaui/core/theme");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Portal,
-  PortalHost,
-  XUIProvider,
-  defaultDarkTheme,
-  defaultTheme,
-  useColorMode,
-  useXUIColors,
-  useXUITheme
-});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkHSPTLUFAcjs = require('../chunk-HSPTLUFA.cjs');
+
+
+
+
+
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+
+
+
+
+
+
+
+
+exports.Portal = _chunkOQ2BLOOGcjs.Portal; exports.PortalHost = _chunkOQ2BLOOGcjs.PortalHost; exports.XUIProvider = _chunkOQ2BLOOGcjs.XUIProvider; exports.defaultDarkTheme = _chunkHSPTLUFAcjs.defaultDarkTheme; exports.defaultTheme = _chunkHSPTLUFAcjs.defaultTheme; exports.useColorMode = _chunkOQ2BLOOGcjs.useColorMode; exports.useXUIColors = _chunkOQ2BLOOGcjs.useXUIColors; exports.useXUITheme = _chunkOQ2BLOOGcjs.useXUITheme;

package/dist/core/index.d.cts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { XUITheme } from '@xaui/core/theme';
-export { defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
+export { PartialXUITheme as XUITheme, defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
 
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];

package/dist/core/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { XUITheme } from '@xaui/core/theme';
-export { defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
+export { PartialXUITheme as XUITheme, defaultDarkTheme, defaultTheme } from '@xaui/core/theme';
 
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];

package/dist/core/index.js

@@ -1,13 +1,15 @@
+import {
+  defaultDarkTheme,
+  defaultTheme
+} from "../chunk-DXXNBF5P.js";
 import {
   Portal,
   PortalHost,
   XUIProvider,
-  defaultDarkTheme,
-  defaultTheme,
   useColorMode,
   useXUIColors,
   useXUITheme
-} from "../chunk-GHCVNQET.js";
+} from "../chunk-LTKYHG5V.js";
 export {
   Portal,
   PortalHost,