@xaui/native 0.0.21 → 0.0.23

package/dist/drawer/index.cjs

@@ -0,0 +1,302 @@
+"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
+});

package/dist/drawer/index.d.mts

@@ -0,0 +1,3 @@
+export { Drawer } from './drawer';
+export type { DrawerProps, DrawerPosition } from './drawer.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer } from './drawer';
+export type { DrawerProps, DrawerPosition } from './drawer.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/drawer/index.js

@@ -0,0 +1,8 @@
+import {
+  Drawer
+} from "../chunk-U3VQ4VNH.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-LTKYHG5V.js";
+export {
+  Drawer
+};

package/dist/{accordion → expansion-panel}/index.cjs

@@ -27,32 +27,32 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/accordion/index.ts
-var accordion_exports = {};
-__export(accordion_exports, {
-  Accordion: () => Accordion,
-  AccordionItem: () => AccordionItem
+// src/components/expansion-panel/index.ts
+var expansion_panel_exports = {};
+__export(expansion_panel_exports, {
+  ExpansionPanel: () => ExpansionPanel,
+  ExpansionPanelItem: () => ExpansionPanelItem
 });
-module.exports = __toCommonJS(accordion_exports);
+module.exports = __toCommonJS(expansion_panel_exports);
 
-// src/components/accordion/accordion.tsx
+// src/components/expansion-panel/expansion-panel.tsx
 var import_react14 = __toESM(require("react"), 1);
 var import_react_native9 = require("react-native");
 
-// src/components/accordion/accordion-context.ts
+// src/components/expansion-panel/expansion-panel-context.ts
 var import_react = require("react");
-var AccordionContext = (0, import_react.createContext)(
+var ExpansionPanelContext = (0, import_react.createContext)(
   void 0
 );
-var useAccordionContext = () => {
-  const context = (0, import_react.useContext)(AccordionContext);
+var useExpansionPanelContext = () => {
+  const context = (0, import_react.useContext)(ExpansionPanelContext);
   if (!context) {
-    throw new Error("AccordionItem must be used within an Accordion component");
+    throw new Error("ExpansionPanelItem must be used within an ExpansionPanel component");
   }
   return context;
 };
 
-// src/components/accordion/accordion.hook.ts
+// src/components/expansion-panel/expansion-panel.hook.ts
 var import_react7 = require("react");
 
 // src/core/theme-context.tsx
@@ -98,8 +98,8 @@ function useXUIPalette() {
 // src/core/index.ts
 var import_theme2 = require("@xaui/core/theme");
 
-// src/components/accordion/accordion.hook.ts
-var useAccordionStyles = ({
+// src/components/expansion-panel/expansion-panel.hook.ts
+var useExpansionPanelStyles = ({
   variant,
   fullWidth
 }) => {
@@ -125,7 +125,7 @@ var useAccordionStyles = ({
   const dividerOpacity = variant === "bordered" ? 1 : 0.2;
   return { containerStyles, dividerColor, dividerOpacity };
 };
-var useAccordionSelection = ({
+var useExpansionPanelSelection = ({
   selectionMode,
   expandedKeys,
   defaultExpandedKeys,
@@ -147,8 +147,8 @@ var useAccordionSelection = ({
   );
   return { currentExpandedKeys, toggleItem };
 };
-var useAccordionContextValue = (config) => {
-  const { currentExpandedKeys, toggleItem } = useAccordionSelection({
+var useExpansionPanelContextValue = (config) => {
+  const { currentExpandedKeys, toggleItem } = useExpansionPanelSelection({
     selectionMode: config.selectionMode,
     expandedKeys: config.expandedKeys,
     defaultExpandedKeys: config.defaultExpandedKeys,
@@ -178,11 +178,11 @@ var useAccordionContextValue = (config) => {
   );
 };
 
-// src/components/accordion/accordion-item.tsx
+// src/components/expansion-panel/expansion-panel-item.tsx
 var import_react10 = __toESM(require("react"), 1);
 var import_react_native6 = require("react-native");
 
-// src/components/accordion/accordion-item.style.ts
+// src/components/expansion-panel/expansion-panel-item.style.ts
 var import_react_native4 = require("react-native");
 var styles = import_react_native4.StyleSheet.create({
   startContent: {
@@ -206,13 +206,13 @@ var styles = import_react_native4.StyleSheet.create({
   }
 });
 
-// src/components/accordion/accordion-item.hook.ts
+// src/components/expansion-panel/expansion-panel-item.hook.ts
 var import_react8 = require("react");
 var import_react_native5 = require("react-native");
 var import_palette2 = require("@xaui/core/palette");
 var import_core3 = require("@xaui/core");
-var useAccordionItemState = (itemKey) => {
-  const context = useAccordionContext();
+var useExpansionPanelItemState = (itemKey) => {
+  const context = useExpansionPanelContext();
   const resolvedItemKey = itemKey ?? "";
   const isExpanded = resolvedItemKey ? context.expandedKeys.includes(resolvedItemKey) : false;
   const isDisabled = resolvedItemKey ? context.disabledKeys.includes(resolvedItemKey) : false;
@@ -222,7 +222,7 @@ var useAccordionItemState = (itemKey) => {
   }, [isDisabled, resolvedItemKey, context]);
   return { ...context, resolvedItemKey, isExpanded, isDisabled, handlePress };
 };
-var useAccordionItemAnimation = (isExpanded, disableAnimation) => {
+var useExpansionPanelItemAnimation = (isExpanded, disableAnimation) => {
   const [contentHeight, setContentHeight] = (0, import_react8.useState)(0);
   const [isMeasured, setIsMeasured] = (0, import_react8.useState)(false);
   const animatedHeight = (0, import_react8.useRef)(new import_react_native5.Animated.Value(isExpanded ? 1 : 0)).current;
@@ -359,7 +359,7 @@ var useForegroundColor = () => {
   return theme.colors.foreground;
 };
 
-// src/components/accordion/chevron-right-icon.tsx
+// src/components/expansion-panel/chevron-right-icon.tsx
 var import_react9 = __toESM(require("react"), 1);
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 var ChevronRightIcon = ({
@@ -378,8 +378,8 @@ var ChevronRightIcon = ({
   ));
 };
 
-// src/components/accordion/accordion-item.tsx
-var AccordionItem = ({
+// src/components/expansion-panel/expansion-panel-item.tsx
+var ExpansionPanelItem = ({
   itemKey,
   children,
   title,
@@ -397,12 +397,12 @@ var AccordionItem = ({
     isExpanded,
     isDisabled,
     handlePress: togglePress
-  } = useAccordionItemState(itemKey);
+  } = useExpansionPanelItemState(itemKey);
   const handlePress = () => {
     togglePress();
     onSelected?.(!isExpanded);
   };
-  const { onContentLayout, heightInterpolation, rotationInterpolation } = useAccordionItemAnimation(isExpanded, disableAnimation);
+  const { onContentLayout, heightInterpolation, rotationInterpolation } = useExpansionPanelItemAnimation(isExpanded, disableAnimation);
   const baseStyles = useBaseStyles(variant, isDisabled);
   const triggerStyles = useTriggerStyles(variant, isCompact);
   const titleTextStyle = useTitleTextStyle(isCompact);
@@ -449,9 +449,9 @@ var AccordionItem = ({
     /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [contentContainerStyle, customAppearance?.content] }, children)
   ));
 };
-AccordionItem.displayName = "AccordionItem";
+ExpansionPanelItem.displayName = "ExpansionPanelItem";
 
-// src/components/accordion/accordion.utils.ts
+// src/components/expansion-panel/expansion-panel.utils.ts
 var import_react11 = __toESM(require("react"), 1);
 var getItemKey = (value, fallback) => {
   if (value === null || value === void 0) return String(fallback);
@@ -462,8 +462,8 @@ var normalizeElementKey = (value) => {
   if (typeof value !== "string") return value;
   return value.startsWith(".$") ? value.slice(2) : value.startsWith(".") ? value.slice(1) : value;
 };
-var isAccordionItem = (value) => import_react11.default.isValidElement(value) && (value.type === AccordionItem || typeof value.type === "function" && value.type.displayName === "AccordionItem");
-var buildAccordionContextParams = (props) => {
+var isExpansionPanelItem = (value) => import_react11.default.isValidElement(value) && (value.type === ExpansionPanelItem || typeof value.type === "function" && value.type.displayName === "ExpansionPanelItem");
+var buildExpansionPanelContextParams = (props) => {
   return {
     variant: props.variant || "light",
     hideIndicator: Boolean(props.hideIndicator),
@@ -546,8 +546,8 @@ var Divider = ({
   );
 };
 
-// src/components/accordion/accordion.tsx
-var Accordion = (props) => {
+// src/components/expansion-panel/expansion-panel.tsx
+var ExpansionPanel = (props) => {
   const {
     children,
     variant = "light",
@@ -555,28 +555,28 @@ var Accordion = (props) => {
     fullWidth = true,
     customAppearance
   } = props;
-  const { containerStyles, dividerColor } = useAccordionStyles({
+  const { containerStyles, dividerColor } = useExpansionPanelStyles({
     variant,
     fullWidth
   });
-  const contextParams = buildAccordionContextParams(props);
-  const contextValue = useAccordionContextValue(contextParams);
+  const contextParams = buildExpansionPanelContextParams(props);
+  const contextValue = useExpansionPanelContextValue(contextParams);
   const childrenArray = import_react14.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react14.default.createElement(AccordionContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
+  return /* @__PURE__ */ import_react14.default.createElement(ExpansionPanelContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { style: [containerStyles, customAppearance?.container] }, childrenArray.map((child, index) => {
     const isLast = index === childrenArray.length - 1;
     const showBottomDivider = (showDivider || variant === "bordered") && !isLast && variant !== "splitted";
-    const resolvedChildKey = isAccordionItem(child) ? getItemKey(
+    const resolvedChildKey = isExpansionPanelItem(child) ? getItemKey(
       child.props.itemKey ?? normalizeElementKey(child.key),
       index
     ) : getItemKey(
       import_react14.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );
-    return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { key: resolvedChildKey, style: customAppearance?.item }, isAccordionItem(child) ? import_react14.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react14.default.createElement(Divider, { color: dividerColor, size: 2 }));
+    return /* @__PURE__ */ import_react14.default.createElement(import_react_native9.View, { key: resolvedChildKey, style: customAppearance?.item }, isExpansionPanelItem(child) ? import_react14.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ import_react14.default.createElement(Divider, { color: dividerColor, size: 2 }));
   })));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Accordion,
-  AccordionItem
+  ExpansionPanel,
+  ExpansionPanelItem
 });

package/dist/expansion-panel/index.d.mts

@@ -0,0 +1,5 @@
+export { ExpansionPanel } from './expansion-panel';
+export { ExpansionPanelItem } from './expansion-panel-item';
+export type { ExpansionPanelProps, ExpansionPanelVariant, ExpansionPanelSelectionMode, } from './expansion-panel.type';
+export type { ExpansionPanelItemProps } from './expansion-panel-item.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/expansion-panel/index.d.ts

@@ -0,0 +1,5 @@
+export { ExpansionPanel } from './expansion-panel';
+export { ExpansionPanelItem } from './expansion-panel-item';
+export type { ExpansionPanelProps, ExpansionPanelVariant, ExpansionPanelSelectionMode, } from './expansion-panel.type';
+export type { ExpansionPanelItemProps } from './expansion-panel-item.type';
+//# sourceMappingURL=index.d.ts.map