@xaui/native 0.0.21 → 0.0.24

package/dist/chunk-4KSZLONZ.js

@@ -0,0 +1,79 @@
+// src/core/theme-hooks.ts
+import { useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useColorScheme as useColorScheme2 } from "react-native";
+
+// src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
+
+// src/core/portal/portal.tsx
+import { useContext, useEffect, useLayoutEffect, useRef } from "react";
+
+// src/core/portal/portal-context.ts
+import { createContext } from "react";
+var PortalContext = createContext(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = useContext(PortalContext);
+  const keyRef = useRef(`portal-${++portalId}`);
+  useLayoutEffect(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  useEffect(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/portal/portal-host.tsx
+import React2, { useCallback, useMemo, useRef as useRef2, useState } from "react";
+import { StyleSheet, View } from "react-native";
+var hostStyles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = createContext2(null);
+
+// src/core/theme-hooks.ts
+function useXUITheme() {
+  const theme = useContext2(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = useMemo2(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+// src/core/index.ts
+import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
+
+export {
+  Portal,
+  useXUITheme,
+  useBorderRadiusStyles
+};

package/dist/{chunk-DXXNBF5P.js → chunk-CZFDZPAS.js}

@@ -1,7 +1,2 @@
 // src/core/index.ts
 import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
-
-export {
-  defaultDarkTheme,
-  defaultTheme
-};

package/dist/{chunk-LTKYHG5V.js → chunk-GHCVNQET.js}

@@ -1,3 +1,9 @@
+// src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
+
 // src/core/portal/portal.tsx
 import { useContext, useEffect, useLayoutEffect, useRef } from "react";
 
@@ -51,10 +57,6 @@ var PortalHost = ({ children }) => {
 };
 
 // src/core/theme-context.tsx
-import React3, { createContext as createContext2 } from "react";
-import { useColorScheme } from "react-native";
-import { defaultTheme } from "@xaui/core/theme";
-import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext2(null);
 function XUIProvider({
   children,
@@ -126,6 +128,9 @@ function useBorderRadiusStyles(radius) {
   return borderRadius;
 }
 
+// src/core/index.ts
+import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
+
 export {
   Portal,
   PortalHost,
@@ -134,5 +139,7 @@ export {
   useXUITheme,
   useXUIColors,
   useXUIPalette,
-  useBorderRadiusStyles
+  useBorderRadiusStyles,
+  defaultDarkTheme,
+  defaultTheme2 as defaultTheme
 };

package/dist/chunk-I4V5Y5GD.js

@@ -0,0 +1,76 @@
+// src/core/portal/portal.tsx
+import { useContext, useEffect, useLayoutEffect, useRef } from "react";
+
+// src/core/portal/portal-context.ts
+import { createContext } from "react";
+var PortalContext = createContext(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = useContext(PortalContext);
+  const keyRef = useRef(`portal-${++portalId}`);
+  useLayoutEffect(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  useEffect(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/theme-hooks.ts
+import { useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useColorScheme as useColorScheme2 } from "react-native";
+
+// src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
+
+// src/core/portal/portal-host.tsx
+import React2, { useCallback, useMemo, useRef as useRef2, useState } from "react";
+import { StyleSheet, View } from "react-native";
+var hostStyles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = createContext2(null);
+
+// src/core/theme-hooks.ts
+function useXUITheme() {
+  const theme = useContext2(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = useMemo2(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+export {
+  Portal,
+  useXUITheme,
+  useBorderRadiusStyles
+};

package/dist/{chunk-F7WH4DMG.js → chunk-UI5L26KD.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-LTKYHG5V.js";
+} from "./chunk-GHCVNQET.js";
 
 // src/components/indicator/indicator.tsx
 import React3 from "react";

package/dist/{chunk-LUBWRVI2.js → chunk-ULJSCNPE.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-LTKYHG5V.js";
+} from "./chunk-GHCVNQET.js";
 
 // src/components/divider/divider.tsx
 import React from "react";

package/dist/chunk-URBEEDFX.js

@@ -0,0 +1,79 @@
+// src/core/portal/portal.tsx
+import { useContext, useEffect, useLayoutEffect, useRef } from "react";
+
+// src/core/portal/portal-context.ts
+import { createContext } from "react";
+var PortalContext = createContext(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = useContext(PortalContext);
+  const keyRef = useRef(`portal-${++portalId}`);
+  useLayoutEffect(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  useEffect(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/theme-hooks.ts
+import { useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useColorScheme as useColorScheme2 } from "react-native";
+
+// src/core/theme-context.tsx
+import React3, { createContext as createContext2 } from "react";
+import { useColorScheme } from "react-native";
+import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
+
+// src/core/portal/portal-host.tsx
+import React2, { useCallback, useMemo, useRef as useRef2, useState } from "react";
+import { StyleSheet, View } from "react-native";
+var hostStyles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = createContext2(null);
+
+// src/core/theme-hooks.ts
+function useXUITheme() {
+  const theme = useContext2(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = useMemo2(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+// src/core/index.ts
+import { defaultDarkTheme, defaultTheme as defaultTheme2 } from "@xaui/core/theme";
+
+export {
+  Portal,
+  useXUITheme,
+  useBorderRadiusStyles
+};

package/dist/core/index.js

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

package/dist/datepicker/index.js

@@ -1,8 +1,7 @@
-import "../chunk-DXXNBF5P.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-URBEEDFX.js";
 
 // src/components/datepicker/datepicker.tsx
 import React7, { useCallback as useCallback5, useMemo as useMemo6, useRef as useRef6 } from "react";

package/dist/divider/index.js

@@ -1,8 +1,7 @@
 import {
   Divider
-} from "../chunk-LUBWRVI2.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+} from "../chunk-ULJSCNPE.js";
+import "../chunk-GHCVNQET.js";
 export {
   Divider
 };

package/dist/drawer/index.cjs

@@ -0,0 +1,310 @@
+"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/components/drawer/index.ts
+var drawer_exports = {};
+__export(drawer_exports, {
+  Drawer: () => Drawer
+});
+module.exports = __toCommonJS(drawer_exports);
+
+// src/components/drawer/drawer.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/drawer/drawer.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// 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-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
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/drawer/drawer.hook.ts
+var useDrawerStyles = (themeColor, position, width, height) => {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    const isDefaultThemeColor = safeThemeColor === "default";
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
+    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background;
+    const sizeStyle = position === "left" || position === "right" ? { width } : { height };
+    return {
+      backgroundColor,
+      ...sizeStyle
+    };
+  }, [height, position, theme, themeColor, width]);
+};
+var getTranslateValue = (position, size) => {
+  switch (position) {
+    case "left":
+      return { x: -size, y: 0 };
+    case "right":
+      return { x: size, y: 0 };
+    case "top":
+      return { x: 0, y: -size };
+    case "bottom":
+      return { x: 0, y: size };
+    default:
+      return { x: -size, y: 0 };
+  }
+};
+
+// src/components/drawer/drawer.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  drawerContainer: {
+    position: "absolute",
+    backgroundColor: "#ffffff"
+  },
+  drawerLeft: {
+    top: 0,
+    left: 0,
+    bottom: 0
+  },
+  drawerRight: {
+    top: 0,
+    right: 0,
+    bottom: 0
+  },
+  drawerTop: {
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  drawerBottom: {
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
+
+// src/components/drawer/drawer.tsx
+var Drawer = ({
+  children,
+  isOpen,
+  position = "left",
+  themeColor = "default",
+  width = 280,
+  height = 280,
+  showOverlay = true,
+  onClose,
+  customStyle,
+  disableAnimation = false
+}) => {
+  const DRAWER_ANIMATION_DURATION = 250;
+  const [isModalMounted, setIsModalMounted] = (0, import_react7.useState)(false);
+  const [isModalVisible, setIsModalVisible] = (0, import_react7.useState)(false);
+  const isModalMountedRef = (0, import_react7.useRef)(false);
+  const animationRef = (0, import_react7.useRef)(null);
+  const size = position === "left" || position === "right" ? width : height;
+  const initialTranslateValues = (0, import_react7.useMemo)(
+    () => getTranslateValue(position, size),
+    [position, size]
+  );
+  const translateX = (0, import_react7.useRef)(new import_react_native5.Animated.Value(initialTranslateValues.x)).current;
+  const translateY = (0, import_react7.useRef)(new import_react_native5.Animated.Value(initialTranslateValues.y)).current;
+  const overlayOpacity = (0, import_react7.useRef)(new import_react_native5.Animated.Value(0)).current;
+  const containerStyle = useDrawerStyles(themeColor, position, width, height);
+  const positionStyle = position === "left" ? styles.drawerLeft : position === "right" ? styles.drawerRight : position === "top" ? styles.drawerTop : styles.drawerBottom;
+  (0, import_react7.useEffect)(() => {
+    const translateValues = getTranslateValue(position, size);
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
+    }
+    if (isOpen) {
+      if (!isModalMountedRef.current) {
+        translateX.setValue(translateValues.x);
+        translateY.setValue(translateValues.y);
+        overlayOpacity.setValue(0);
+        isModalMountedRef.current = true;
+        setIsModalMounted(true);
+        setIsModalVisible(true);
+      }
+      if (disableAnimation) {
+        translateX.setValue(0);
+        translateY.setValue(0);
+        overlayOpacity.setValue(1);
+        return;
+      }
+      const animation2 = import_react_native5.Animated.parallel([
+        import_react_native5.Animated.timing(translateX, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic),
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(translateY, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic),
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(overlayOpacity, {
+          toValue: 1,
+          duration: DRAWER_ANIMATION_DURATION,
+          useNativeDriver: true
+        })
+      ]);
+      animationRef.current = animation2;
+      animation2.start(() => {
+        if (animationRef.current === animation2) {
+          animationRef.current = null;
+        }
+      });
+      return;
+    }
+    if (!isModalMountedRef.current) {
+      return;
+    }
+    if (disableAnimation) {
+      translateX.setValue(translateValues.x);
+      translateY.setValue(translateValues.y);
+      overlayOpacity.setValue(0);
+      isModalMountedRef.current = false;
+      setIsModalVisible(false);
+      setIsModalMounted(false);
+      return;
+    }
+    const animation = import_react_native5.Animated.parallel([
+      import_react_native5.Animated.timing(translateX, {
+        toValue: translateValues.x,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: import_react_native5.Easing.in(import_react_native5.Easing.cubic),
+        useNativeDriver: true
+      }),
+      import_react_native5.Animated.timing(translateY, {
+        toValue: translateValues.y,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: import_react_native5.Easing.in(import_react_native5.Easing.cubic),
+        useNativeDriver: true
+      }),
+      import_react_native5.Animated.timing(overlayOpacity, {
+        toValue: 0,
+        duration: DRAWER_ANIMATION_DURATION,
+        useNativeDriver: true
+      })
+    ]);
+    animationRef.current = animation;
+    animation.start(({ finished }) => {
+      if (animationRef.current === animation) {
+        animationRef.current = null;
+      }
+      if (finished) {
+        isModalMountedRef.current = false;
+        setIsModalVisible(false);
+        setIsModalMounted(false);
+      }
+    });
+  }, [
+    isOpen,
+    position,
+    size,
+    disableAnimation,
+    translateX,
+    translateY,
+    overlayOpacity
+  ]);
+  if (!isModalMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.Modal,
+    {
+      transparent: true,
+      visible: isModalVisible,
+      animationType: "none",
+      onRequestClose: onClose
+    },
+    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: { flex: 1 } }, showOverlay && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Pressable, { onPress: onClose, style: { flex: 1 } }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Animated.View, { style: [styles.overlay, { opacity: overlayOpacity }] })), /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Animated.View,
+      {
+        style: [
+          styles.drawerContainer,
+          positionStyle,
+          containerStyle,
+          {
+            transform: [{ translateX }, { translateY }]
+          },
+          customStyle
+        ]
+      },
+      children
+    ))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer
+});