@xaui/native 0.0.23 → 0.0.24

package/dist/chunk-U3VQ4VNH.js

@@ -1,229 +0,0 @@
-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

@@ -1,393 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,31 +0,0 @@
-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