@xaui/native 0.0.21 → 0.0.24

package/dist/drawer/index.d.cts

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type DrawerPosition = 'top' | 'left' | 'bottom' | 'right';
+type DrawerProps = {
+    /**
+     * Content to render inside the drawer.
+     */
+    children: ReactNode;
+    /**
+     * Whether the drawer is visible.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Position of the drawer.
+     * @default 'left'
+     */
+    position?: DrawerPosition;
+    /**
+     * The theme color of the drawer.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Width of the drawer (for left/right position).
+     * @default 280
+     */
+    width?: number;
+    /**
+     * Height of the drawer (for top/bottom position).
+     * @default 280
+     */
+    height?: number;
+    /**
+     * Whether to show overlay backdrop.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Callback fired when drawer should close (overlay tap or back button).
+     */
+    onClose?: () => void;
+    /**
+     * Custom styles for the drawer container.
+     */
+    customStyle?: ViewStyle;
+    /**
+     * Disable slide animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+};
+
+declare const Drawer: React.FC<DrawerProps>;
+
+export { Drawer, type DrawerPosition, type DrawerProps };

package/dist/drawer/index.d.ts

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type DrawerPosition = 'top' | 'left' | 'bottom' | 'right';
+type DrawerProps = {
+    /**
+     * Content to render inside the drawer.
+     */
+    children: ReactNode;
+    /**
+     * Whether the drawer is visible.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Position of the drawer.
+     * @default 'left'
+     */
+    position?: DrawerPosition;
+    /**
+     * The theme color of the drawer.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Width of the drawer (for left/right position).
+     * @default 280
+     */
+    width?: number;
+    /**
+     * Height of the drawer (for top/bottom position).
+     * @default 280
+     */
+    height?: number;
+    /**
+     * Whether to show overlay backdrop.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Callback fired when drawer should close (overlay tap or back button).
+     */
+    onClose?: () => void;
+    /**
+     * Custom styles for the drawer container.
+     */
+    customStyle?: ViewStyle;
+    /**
+     * Disable slide animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+};
+
+declare const Drawer: React.FC<DrawerProps>;
+
+export { Drawer, type DrawerPosition, type DrawerProps };

package/dist/drawer/index.js

@@ -0,0 +1,236 @@
+import {
+  useXUITheme
+} from "../chunk-URBEEDFX.js";
+
+// src/components/drawer/drawer.tsx
+import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { Animated, Easing, Modal, Pressable, View } from "react-native";
+
+// src/components/drawer/drawer.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+var useDrawerStyles = (themeColor, position, width, height) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const safeThemeColor = 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
+import { StyleSheet } from "react-native";
+var styles = 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] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const isModalMountedRef = useRef(false);
+  const animationRef = useRef(null);
+  const size = position === "left" || position === "right" ? width : height;
+  const initialTranslateValues = useMemo2(
+    () => getTranslateValue(position, size),
+    [position, size]
+  );
+  const translateX = useRef(new Animated.Value(initialTranslateValues.x)).current;
+  const translateY = useRef(new Animated.Value(initialTranslateValues.y)).current;
+  const overlayOpacity = useRef(new 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;
+  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 = Animated.parallel([
+        Animated.timing(translateX, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true
+        }),
+        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 = Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: translateValues.x,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true
+      }),
+      Animated.timing(translateY, {
+        toValue: translateValues.y,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true
+      }),
+      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__ */ React.createElement(
+    Modal,
+    {
+      transparent: true,
+      visible: isModalVisible,
+      animationType: "none",
+      onRequestClose: onClose
+    },
+    /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, showOverlay && /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.overlay, { opacity: overlayOpacity }] })), /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          styles.drawerContainer,
+          positionStyle,
+          containerStyle,
+          {
+            transform: [{ translateX }, { translateY }]
+          },
+          customStyle
+        ]
+      },
+      children
+    ))
+  );
+};
+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)(
-  void 0
-);
-var useAccordionContext = () => {
-  const context = (0, import_react.useContext)(AccordionContext);
+var ExpansionPanelContext = (0, import_react.createContext)(void 0);
+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
 });