@xaui/native 0.0.23 → 0.0.24

package/dist/drawer/index.js

@@ -1,8 +1,236 @@
 import {
-  Drawer
-} from "../chunk-U3VQ4VNH.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+  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/expansion-panel/index.cjs

@@ -41,13 +41,13 @@ var import_react_native9 = require("react-native");
 
 // src/components/expansion-panel/expansion-panel-context.ts
 var import_react = require("react");
-var ExpansionPanelContext = (0, import_react.createContext)(
-  void 0
-);
+var ExpansionPanelContext = (0, import_react.createContext)(void 0);
 var useExpansionPanelContext = () => {
   const context = (0, import_react.useContext)(ExpansionPanelContext);
   if (!context) {
-    throw new Error("ExpansionPanelItem must be used within an ExpansionPanel component");
+    throw new Error(
+      "ExpansionPanelItem must be used within an ExpansionPanel component"
+    );
   }
   return context;
 };

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

@@ -0,0 +1,153 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type ExpansionPanelVariant = 'light' | 'bordered' | 'splitted';
+type ExpansionPanelSelectionMode = 'toggle' | 'multiple';
+type ExpansionPanelEvents = {
+    onSelectionChange?: (selectedKeys: string[]) => void;
+};
+type ExpansionPanelCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for individual items
+     */
+    item?: ViewStyle;
+};
+type ExpansionPanelProps = {
+    /**
+     * List of ExpansionPanelItem components
+     */
+    children: ReactNode;
+    /**
+     * Visual variant of the expansion-panel
+     * @default 'light'
+     */
+    variant?: ExpansionPanelVariant;
+    /**
+     * Selection behavior mode
+     * - toggle: Only one expansion-panel item can be expanded at a time
+     * - multiple: Multiple expansion-panel items can be expanded simultaneously
+     * @default 'toggle'
+     */
+    selectionMode?: ExpansionPanelSelectionMode;
+    /**
+     * Show dividers between expansion-panel items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Hide the collapse/expand indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Whether the expansion-panel should take full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled expanded keys
+     */
+    expandedKeys?: string[];
+    /**
+     * Default expanded keys for uncontrolled mode
+     * Items with these keys will be expanded by default
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * Keys of disabled expansion-panel items
+     */
+    disabledKeys?: string[];
+    /**
+     * Disable animations
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Make the expansion-panel items more compact
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Custom appearance styles for all expansion-panel parts
+     */
+    customAppearance?: ExpansionPanelCustomAppearance;
+} & ExpansionPanelEvents;
+
+declare const ExpansionPanel: React.FC<ExpansionPanelProps>;
+
+type ExpansionPanelItemEvents = {
+    onSelected?: (isSelected: boolean) => void;
+};
+type ExpansionPanelItemCustomAppearance = {
+    /**
+     * Custom styles for the base container
+     */
+    base?: ViewStyle;
+    /**
+     * Custom styles for the header container
+     */
+    heading?: ViewStyle;
+    /**
+     * Custom styles for the trigger button
+     */
+    trigger?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for the subtitle text
+     */
+    subtitle?: TextStyle;
+    /**
+     * Custom styles for the content container
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the start content container
+     */
+    startContent?: ViewStyle;
+    /**
+     * Custom styles for the indicator
+     */
+    indicator?: ViewStyle;
+};
+type ExpansionPanelItemProps = {
+    /**
+     * Unique key for the expansion-panel item
+     */
+    itemKey?: string;
+    /**
+     * Content to display when expansion-panel item is expanded
+     */
+    children: ReactNode;
+    /**
+     * Title displayed in the expansion-panel header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: ReactNode;
+    /**
+     * Content displayed at the start of the header (left side)
+     */
+    startContent?: ReactNode;
+    /**
+     * Custom indicator for the expanded/collapsed state
+     * @default ChevronRight icon
+     */
+    indicator?: ReactNode;
+    /**
+     * Custom appearance styles for all expansion-panel item parts
+     */
+    customAppearance?: ExpansionPanelItemCustomAppearance;
+} & ExpansionPanelItemEvents;
+
+declare const ExpansionPanelItem: React.FC<ExpansionPanelItemProps>;
+
+export { ExpansionPanel, ExpansionPanelItem };

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

@@ -1,5 +1,153 @@
-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
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type ExpansionPanelVariant = 'light' | 'bordered' | 'splitted';
+type ExpansionPanelSelectionMode = 'toggle' | 'multiple';
+type ExpansionPanelEvents = {
+    onSelectionChange?: (selectedKeys: string[]) => void;
+};
+type ExpansionPanelCustomAppearance = {
+    /**
+     * Custom styles for the container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for individual items
+     */
+    item?: ViewStyle;
+};
+type ExpansionPanelProps = {
+    /**
+     * List of ExpansionPanelItem components
+     */
+    children: ReactNode;
+    /**
+     * Visual variant of the expansion-panel
+     * @default 'light'
+     */
+    variant?: ExpansionPanelVariant;
+    /**
+     * Selection behavior mode
+     * - toggle: Only one expansion-panel item can be expanded at a time
+     * - multiple: Multiple expansion-panel items can be expanded simultaneously
+     * @default 'toggle'
+     */
+    selectionMode?: ExpansionPanelSelectionMode;
+    /**
+     * Show dividers between expansion-panel items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Hide the collapse/expand indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Whether the expansion-panel should take full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled expanded keys
+     */
+    expandedKeys?: string[];
+    /**
+     * Default expanded keys for uncontrolled mode
+     * Items with these keys will be expanded by default
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * Keys of disabled expansion-panel items
+     */
+    disabledKeys?: string[];
+    /**
+     * Disable animations
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Make the expansion-panel items more compact
+     * @default false
+     */
+    isCompact?: boolean;
+    /**
+     * Custom appearance styles for all expansion-panel parts
+     */
+    customAppearance?: ExpansionPanelCustomAppearance;
+} & ExpansionPanelEvents;
+
+declare const ExpansionPanel: React.FC<ExpansionPanelProps>;
+
+type ExpansionPanelItemEvents = {
+    onSelected?: (isSelected: boolean) => void;
+};
+type ExpansionPanelItemCustomAppearance = {
+    /**
+     * Custom styles for the base container
+     */
+    base?: ViewStyle;
+    /**
+     * Custom styles for the header container
+     */
+    heading?: ViewStyle;
+    /**
+     * Custom styles for the trigger button
+     */
+    trigger?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for the subtitle text
+     */
+    subtitle?: TextStyle;
+    /**
+     * Custom styles for the content container
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the start content container
+     */
+    startContent?: ViewStyle;
+    /**
+     * Custom styles for the indicator
+     */
+    indicator?: ViewStyle;
+};
+type ExpansionPanelItemProps = {
+    /**
+     * Unique key for the expansion-panel item
+     */
+    itemKey?: string;
+    /**
+     * Content to display when expansion-panel item is expanded
+     */
+    children: ReactNode;
+    /**
+     * Title displayed in the expansion-panel header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: ReactNode;
+    /**
+     * Content displayed at the start of the header (left side)
+     */
+    startContent?: ReactNode;
+    /**
+     * Custom indicator for the expanded/collapsed state
+     * @default ChevronRight icon
+     */
+    indicator?: ReactNode;
+    /**
+     * Custom appearance styles for all expansion-panel item parts
+     */
+    customAppearance?: ExpansionPanelItemCustomAppearance;
+} & ExpansionPanelItemEvents;
+
+declare const ExpansionPanelItem: React.FC<ExpansionPanelItemProps>;
+
+export { ExpansionPanel, ExpansionPanelItem };

package/dist/expansion-panel/index.js

@@ -1,11 +1,10 @@
 import {
   Divider
-} from "../chunk-LUBWRVI2.js";
-import "../chunk-DXXNBF5P.js";
+} from "../chunk-ULJSCNPE.js";
 import {
   useXUIPalette,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-GHCVNQET.js";
 
 // src/components/expansion-panel/expansion-panel.tsx
 import React4 from "react";
@@ -13,13 +12,13 @@ import { View as View2 } from "react-native";
 
 // src/components/expansion-panel/expansion-panel-context.ts
 import { createContext, useContext } from "react";
-var ExpansionPanelContext = createContext(
-  void 0
-);
+var ExpansionPanelContext = createContext(void 0);
 var useExpansionPanelContext = () => {
   const context = useContext(ExpansionPanelContext);
   if (!context) {
-    throw new Error("ExpansionPanelItem must be used within an ExpansionPanel component");
+    throw new Error(
+      "ExpansionPanelItem must be used within an ExpansionPanel component"
+    );
   }
   return context;
 };

package/dist/fab/index.d.cts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { F as FabProps } from '../fab.type-l2vjG8-p.cjs';
+export { b as FabSize, a as FabVariant } from '../fab.type-l2vjG8-p.cjs';
+import 'react-native';
+import '../index-BOw6tbkc.cjs';
+import '../button.type-j1ZdkkSl.cjs';
+
+declare const Fab: React.FC<FabProps>;
+
+export { Fab, FabProps };

package/dist/fab/index.d.ts

@@ -1,3 +1,10 @@
-export { Fab } from './fab';
-export type { FabProps, FabVariant, FabSize } from './fab.type';
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+import { F as FabProps } from '../fab.type-CgIYqQlT.js';
+export { b as FabSize, a as FabVariant } from '../fab.type-CgIYqQlT.js';
+import 'react-native';
+import '../index-BOw6tbkc.js';
+import '../button.type-j1ZdkkSl.js';
+
+declare const Fab: React.FC<FabProps>;
+
+export { Fab, FabProps };

package/dist/fab/index.js

@@ -1,9 +1,8 @@
 import {
   Fab
-} from "../chunk-JEGEPGVU.js";
-import "../chunk-F7WH4DMG.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+} from "../chunk-3XSXTM3G.js";
+import "../chunk-CZFDZPAS.js";
+import "../chunk-I4V5Y5GD.js";
 export {
   Fab
 };

package/dist/{components/fab-menu/fab-menu.type.d.mts → fab-menu/index.d.cts}

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
-import type { ViewStyle, GestureResponderEvent } from 'react-native';
-import type { ThemeColor } from '../../types';
-import type { FabVariant, FabSize } from '../fab/fab.type';
-import type { ButtonRadius, ElevationLevel } from '../button/button.type';
-export type FabMenuItemProps = {
+import React, { ReactNode } from 'react';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+import { a as FabVariant, b as FabSize } from '../fab.type-l2vjG8-p.cjs';
+import { B as ButtonRadius, E as ElevationLevel } from '../button.type-j1ZdkkSl.cjs';
+
+type FabMenuItemProps = {
     /**
      * The icon to display in the menu item.
      */
@@ -53,7 +54,7 @@ type FabMenuCustomAppearance = {
      */
     overlay?: ViewStyle;
 };
-export type FabMenuProps = {
+type FabMenuProps = {
     /**
      * The icon to display when the FAB menu is collapsed.
      */
@@ -116,5 +117,9 @@ export type FabMenuProps = {
      */
     customAppearance?: FabMenuCustomAppearance;
 };
-export {};
-//# sourceMappingURL=fab-menu.type.d.ts.map
+
+declare const FabMenu: React.FC<FabMenuProps>;
+
+declare const FabMenuItem: React.FC<FabMenuItemProps>;
+
+export { FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps };