@xaui/native 0.0.21 → 0.0.23

package/dist/chunk-U3VQ4VNH.js

@@ -0,0 +1,229 @@
+import {
+  useXUITheme
+} from "./chunk-LTKYHG5V.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/chunk-XJ3SAU2M.js

@@ -0,0 +1,393 @@
+import {
+  ActivityIndicator
+} from "./chunk-F7WH4DMG.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "./chunk-LTKYHG5V.js";
+
+// src/components/button/button.tsx
+import React from "react";
+import { Pressable, Text, View, Animated as Animated2 } from "react-native";
+
+// src/components/button/button.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  text: {
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  startContent: {
+    marginRight: 4
+  },
+  endContent: {
+    marginLeft: 4
+  },
+  spinner: {
+    marginHorizontal: 4
+  },
+  fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  disabledText: {
+    opacity: 0.7
+  }
+});
+
+// src/components/button/button.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+var useTextStyles = (themeColor, variant) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const textColor = useMemo(() => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return {
+    textColor
+  };
+};
+function useSizesStyles(size) {
+  const theme = useXUITheme();
+  const sizeStyles = useMemo(() => {
+    const sizes = {
+      xs: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 34,
+        fontSize: theme.fontSizes.xs
+      },
+      sm: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 38,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        minHeight: 42,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 50,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const spinnerSize = useMemo(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
+    };
+    return sizes[size];
+  }, [size]);
+  return { sizeStyles, spinnerSize };
+}
+function useVariantSizesStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = useMemo(() => {
+    const styles2 = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: 0
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}95`,
+        borderWidth: theme.borderWidth.md,
+        borderColor: `${colorScheme.main}90`
+      }
+    };
+    const baseStyle = styles2[variant];
+    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      ...shouldApplyElevation ? shadowStyles : {},
+      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
+    };
+  }, [variant, colorScheme, theme, elevation]);
+  return variantStyles;
+}
+
+// src/components/button/button.animation.ts
+import { Animated } from "react-native";
+var runPressInAnimation = (animatedScale, animatedOpacity) => {
+  Animated.parallel([
+    Animated.spring(animatedScale, {
+      toValue: 0.975,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated.timing(animatedOpacity, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressOutAnimation = (animatedScale, animatedOpacity) => {
+  Animated.parallel([
+    Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/button/button.tsx
+var Button = ({
+  children,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  startContent,
+  endContent,
+  spinnerPlacement = "start",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = React.useRef(new Animated2.Value(1)).current;
+  const animatedOpacity = React.useRef(new Animated2.Value(1)).current;
+  const { sizeStyles, spinnerSize } = useSizesStyles(size);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
+  const { textColor } = useTextStyles(themeColor, variant);
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressInAnimation(animatedScale, animatedOpacity);
+    }
+    onPressIn?.(event);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    onPressOut?.(event);
+  };
+  const spinner = /* @__PURE__ */ React.createElement(
+    ActivityIndicator,
+    {
+      variant: "circular",
+      themeColor: variant === "solid" ? void 0 : themeColor,
+      color: variant === "solid" ? textColor : void 0,
+      size: spinnerSize
+    }
+  );
+  return /* @__PURE__ */ React.createElement(View, { style: [fullWidth && styles.fullWidth, customAppearance?.container] }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ React.createElement(
+      Animated2.View,
+      {
+        style: [
+          styles.button,
+          sizeStyles,
+          radiusStyles,
+          variantStyles,
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.button
+        ]
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.contentContainer }, startContent && !isLoading && spinnerPlacement !== "start" && /* @__PURE__ */ React.createElement(View, { style: styles.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles.text,
+            { fontSize: sizeStyles.fontSize, color: textColor },
+            isDisabled && styles.disabledText,
+            customAppearance?.text
+          ]
+        },
+        children
+      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), endContent && !isLoading && spinnerPlacement !== "end" && /* @__PURE__ */ React.createElement(View, { style: styles.endContent }, endContent))
+    )
+  ));
+};
+
+// src/components/button/icon-button.tsx
+import React2 from "react";
+import { Pressable as Pressable2, View as View2, Animated as Animated3 } from "react-native";
+
+// src/components/button/icon-button.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var iconButtonStyles = StyleSheet2.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 1
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/button/icon-button.hook.ts
+import { useMemo as useMemo2 } from "react";
+var useIconButtonSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return useMemo2(() => {
+    const sizeMap = {
+      xs: { width: 34, height: 34 },
+      sm: { width: 38, height: 38 },
+      md: { width: 42, height: 42 },
+      lg: { width: 50, height: 50 }
+    };
+    return sizeMap[size];
+  }, [size, theme]);
+};
+
+// src/components/button/icon-button.tsx
+var IconButton = ({
+  icon,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = React2.useRef(new Animated3.Value(1)).current;
+  const animatedOpacity = React2.useRef(new Animated3.Value(1)).current;
+  const sizeStyles = useIconButtonSizeStyles(size);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
+  const { textColor } = useTextStyles(themeColor, variant);
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressInAnimation(animatedScale, animatedOpacity);
+    }
+    onPressIn?.(event);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    onPressOut?.(event);
+  };
+  const spinnerSize = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20
+  }[size];
+  return /* @__PURE__ */ React2.createElement(View2, { style: [iconButtonStyles.container, customAppearance?.container] }, /* @__PURE__ */ React2.createElement(
+    Pressable2,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ React2.createElement(
+      Animated3.View,
+      {
+        style: [
+          iconButtonStyles.button,
+          sizeStyles,
+          radiusStyles,
+          variantStyles,
+          isDisabled && iconButtonStyles.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.button
+        ]
+      },
+      isLoading ? /* @__PURE__ */ React2.createElement(
+        ActivityIndicator,
+        {
+          variant: "circular",
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? textColor : void 0,
+          size: spinnerSize
+        }
+      ) : icon
+    )
+  ));
+};
+
+export {
+  Button,
+  IconButton
+};

package/dist/components/alert/alert-icons.d.mts

@@ -0,0 +1,11 @@
+import React from 'react';
+type AlertIconProps = {
+    color: string;
+    size: number;
+};
+export declare function InfoIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function SuccessIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function WarningIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function DangerIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=alert-icons.d.ts.map

package/dist/components/alert/alert-icons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type AlertIconProps = {
+    color: string;
+    size: number;
+};
+export declare function InfoIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function SuccessIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function WarningIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export declare function DangerIcon({ color, size }: AlertIconProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=alert-icons.d.ts.map

package/dist/components/alert/alert-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-icons.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,cAAc,qBAgBvD;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,cAAc,qBAa1D;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,cAAc,qBAqB1D;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,cAAc,qBAwBzD"}

package/dist/components/alert/alert.d.mts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AlertProps } from './alert.type';
+export declare const Alert: React.FC<AlertProps>;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AlertProps } from './alert.type';
+export declare const Alert: React.FC<AlertProps>;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AAcd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAmB9C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8KtC,CAAA"}

package/dist/components/alert/alert.hook.d.mts

@@ -0,0 +1,31 @@
+import type { TextStyle } from 'react-native';
+import type { ThemeColor } from '../../types';
+import type { AlertVariant } from './alert.type';
+export declare const useAlertColorScheme: (themeColor: ThemeColor) => {
+    theme: import("@xaui/core/theme").XUITheme;
+    colorScheme: {
+        main: string;
+        foreground: string;
+        background: string;
+    };
+    isDefault: boolean;
+};
+export declare const useAlertContainerStyles: (themeColor: ThemeColor, variant: AlertVariant) => {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+};
+export declare const useAlertIconWrapperStyles: (themeColor: ThemeColor, variant: AlertVariant) => {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+};
+export declare const useAlertTextStyles: (themeColor: ThemeColor, variant: AlertVariant) => {
+    titleStyles: TextStyle;
+    descriptionStyles: TextStyle;
+    iconColor: string;
+    closeButtonColor: string;
+};
+//# sourceMappingURL=alert.hook.d.ts.map