@xaui/native 0.0.2 → 0.0.4

package/dist/button/index.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(button_exports);
 
 // src/components/button/button.tsx
 var import_react8 = __toESM(require("react"), 1);
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 
 // src/components/indicator/indicator.tsx
 var import_react6 = __toESM(require("react"), 1);
@@ -58,6 +58,20 @@ function useXUITheme() {
   }
   return theme;
 }
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = (0, import_react2.useMemo)(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
 
 // src/components/indicator/circular-activity-indicator.tsx
 var import_react3 = __toESM(require("react"), 1);
@@ -458,10 +472,22 @@ var styles2 = import_react_native7.StyleSheet.create({
 // src/components/button/button.hook.ts
 var import_react7 = require("react");
 var import_core6 = require("@xaui/core");
-var useButtonStyles = (themeColor, variant, size, radius) => {
+var useTextStyles = (themeColor, variant) => {
   const theme = useXUITheme();
   const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
+  const textColor = (0, import_react7.useMemo)(() => {
+    if (variant === "solid" || variant === "elevated") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return {
+    textColor
+  };
+};
+function useSizesStyles(size) {
+  const theme = useXUITheme();
   const sizeStyles = (0, import_react7.useMemo)(() => {
     const sizes = {
       xs: {
@@ -491,16 +517,21 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size, theme]);
-  const radiusStyles = (0, import_react7.useMemo)(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
+  const spinnerSize = (0, import_react7.useMemo)(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
     };
-    return { borderRadius: radii[radius] };
-  }, [radius, theme]);
+    return sizes[size];
+  }, [size]);
+  return { sizeStyles, spinnerSize };
+}
+function useVariantSizesStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = (0, import_react7.useMemo)(() => {
     const styles3 = {
       solid: {
@@ -526,35 +557,47 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
         ...theme.shadows.md
       },
       faded: {
-        backgroundColor: `${colorScheme.background}90`,
+        backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
+        borderColor: `${colorScheme.main}90`
       }
     };
     return styles3[variant];
   }, [variant, colorScheme, theme]);
-  const textColor = (0, import_react7.useMemo)(() => {
-    if (variant === "solid" || variant === "elevated") {
-      return colorScheme.foreground;
-    }
-    return colorScheme.main;
-  }, [variant, colorScheme]);
-  const spinnerSize = (0, import_react7.useMemo)(() => {
-    const sizes = {
-      xs: 14,
-      sm: 16,
-      md: 18,
-      lg: 20
-    };
-    return sizes[size];
-  }, [size]);
-  return {
-    sizeStyles,
-    radiusStyles,
-    variantStyles,
-    textColor,
-    spinnerSize
-  };
+  return variantStyles;
+}
+
+// src/components/button/button.animation.ts
+var import_react_native8 = require("react-native");
+var runPressInAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native8.Animated.parallel([
+    import_react_native8.Animated.spring(animatedScale, {
+      toValue: 0.965,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native8.Animated.timing(animatedOpacity, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressOutAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native8.Animated.parallel([
+    import_react_native8.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native8.Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
 };
 
 // src/components/button/button.tsx
@@ -577,42 +620,21 @@ var Button = ({
   onPressIn,
   onPressOut
 }) => {
-  const animatedScale = import_react8.default.useRef(new import_react_native8.Animated.Value(1)).current;
-  const animatedOpacity = import_react8.default.useRef(new import_react_native8.Animated.Value(1)).current;
-  const { sizeStyles, radiusStyles, variantStyles, textColor, spinnerSize } = useButtonStyles(themeColor, variant, size, radius);
+  const animatedScale = import_react8.default.useRef(new import_react_native9.Animated.Value(1)).current;
+  const animatedOpacity = import_react8.default.useRef(new import_react_native9.Animated.Value(1)).current;
+  const { sizeStyles, spinnerSize } = useSizesStyles(size);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const variantStyles = useVariantSizesStyles(themeColor, variant);
+  const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
-      import_react_native8.Animated.parallel([
-        import_react_native8.Animated.spring(animatedScale, {
-          toValue: 0.975,
-          useNativeDriver: true,
-          speed: 50,
-          bounciness: 0
-        }),
-        import_react_native8.Animated.timing(animatedOpacity, {
-          toValue: 0.9,
-          duration: 100,
-          useNativeDriver: true
-        })
-      ]).start();
+      runPressInAnimation(animatedScale, animatedOpacity);
     }
     onPressIn?.(event);
   };
   const handlePressOut = (event) => {
     if (!isDisabled && !isLoading) {
-      import_react_native8.Animated.parallel([
-        import_react_native8.Animated.spring(animatedScale, {
-          toValue: 1,
-          useNativeDriver: true,
-          speed: 50,
-          bounciness: 0
-        }),
-        import_react_native8.Animated.timing(animatedOpacity, {
-          toValue: 1,
-          duration: 100,
-          useNativeDriver: true
-        })
-      ]).start();
+      runPressOutAnimation(animatedScale, animatedOpacity);
     }
     onPressOut?.(event);
   };
@@ -625,8 +647,8 @@ var Button = ({
       size: spinnerSize
     }
   );
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: [fullWidth && styles2.fullWidth] }, /* @__PURE__ */ import_react8.default.createElement(
-    import_react_native8.Pressable,
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: [fullWidth && styles2.fullWidth] }, /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native9.Pressable,
     {
       onPress: isDisabled || isLoading ? void 0 : onPress,
       onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
@@ -635,7 +657,7 @@ var Button = ({
       disabled: isDisabled || isLoading
     },
     /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native8.Animated.View,
+      import_react_native9.Animated.View,
       {
         style: [
           styles2.button,
@@ -651,8 +673,8 @@ var Button = ({
           style
         ]
       },
-      /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.contentContainer }, startContent && !isLoading && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.spinner }, spinner), /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native8.Text,
+      /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: styles2.contentContainer }, startContent && !isLoading && spinnerPlacement !== "start" && /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: styles2.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: styles2.spinner }, spinner), /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native9.Text,
         {
           style: [
             styles2.text,
@@ -662,7 +684,7 @@ var Button = ({
           ]
         },
         children
-      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.spinner }, spinner), endContent && !isLoading && /* @__PURE__ */ import_react8.default.createElement(import_react_native8.View, { style: styles2.endContent }, endContent))
+      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: styles2.spinner }, spinner), endContent && !isLoading && spinnerPlacement !== "end" && /* @__PURE__ */ import_react8.default.createElement(import_react_native9.View, { style: styles2.endContent }, endContent))
     )
   ));
 };

package/dist/button/index.d.cts

@@ -1,9 +1,8 @@
 import React, { ReactNode } from 'react';
 import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor } from '../theme-qvIXI4kF.cjs';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
 
 type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type SpinnerPlacement = 'start' | 'end';
 type ButtonProps = {
@@ -25,7 +24,7 @@ type ButtonProps = {
      * The size of the button.
      * @default 'md'
      */
-    size?: ButtonSize;
+    size?: Size;
     /**
      * The border radius of the button.
      * @default 'md'
@@ -87,4 +86,4 @@ type ButtonProps = {
 
 declare const Button: React.FC<ButtonProps>;
 
-export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };
+export { Button, type ButtonProps, type ButtonRadius, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.d.ts

@@ -1,9 +1,8 @@
 import React, { ReactNode } from 'react';
 import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor } from '../theme-qvIXI4kF.js';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
 
 type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type SpinnerPlacement = 'start' | 'end';
 type ButtonProps = {
@@ -25,7 +24,7 @@ type ButtonProps = {
      * The size of the button.
      * @default 'md'
      */
-    size?: ButtonSize;
+    size?: Size;
     /**
      * The border radius of the button.
      * @default 'md'
@@ -87,4 +86,4 @@ type ButtonProps = {
 
 declare const Button: React.FC<ButtonProps>;
 
-export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };
+export { Button, type ButtonProps, type ButtonRadius, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.js

@@ -1,13 +1,14 @@
 import {
   ActivityIndicator
-} from "../chunk-6ITFLLAM.js";
+} from "../chunk-52PIZF2Z.js";
 import {
+  useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-SHT66VET.js";
+} from "../chunk-DNJWBME5.js";
 
 // src/components/button/button.tsx
 import React from "react";
-import { Pressable, Text, View, Animated } from "react-native";
+import { Pressable, Text, View, Animated as Animated2 } from "react-native";
 
 // src/components/button/button.style.ts
 import { StyleSheet } from "react-native";
@@ -51,10 +52,22 @@ var styles = StyleSheet.create({
 // src/components/button/button.hook.ts
 import { useMemo } from "react";
 import { getSafeThemeColor } from "@xaui/core";
-var useButtonStyles = (themeColor, variant, size, radius) => {
+var useTextStyles = (themeColor, variant) => {
   const theme = useXUITheme();
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
+  const textColor = useMemo(() => {
+    if (variant === "solid" || variant === "elevated") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return {
+    textColor
+  };
+};
+function useSizesStyles(size) {
+  const theme = useXUITheme();
   const sizeStyles = useMemo(() => {
     const sizes = {
       xs: {
@@ -84,16 +97,21 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size, theme]);
-  const radiusStyles = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
+  const spinnerSize = useMemo(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
     };
-    return { borderRadius: radii[radius] };
-  }, [radius, theme]);
+    return sizes[size];
+  }, [size]);
+  return { sizeStyles, spinnerSize };
+}
+function useVariantSizesStyles(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = useMemo(() => {
     const styles2 = {
       solid: {
@@ -119,35 +137,47 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
         ...theme.shadows.md
       },
       faded: {
-        backgroundColor: `${colorScheme.background}90`,
+        backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
+        borderColor: `${colorScheme.main}90`
       }
     };
     return styles2[variant];
   }, [variant, colorScheme, theme]);
-  const textColor = useMemo(() => {
-    if (variant === "solid" || variant === "elevated") {
-      return colorScheme.foreground;
-    }
-    return colorScheme.main;
-  }, [variant, colorScheme]);
-  const spinnerSize = useMemo(() => {
-    const sizes = {
-      xs: 14,
-      sm: 16,
-      md: 18,
-      lg: 20
-    };
-    return sizes[size];
-  }, [size]);
-  return {
-    sizeStyles,
-    radiusStyles,
-    variantStyles,
-    textColor,
-    spinnerSize
-  };
+  return variantStyles;
+}
+
+// src/components/button/button.animation.ts
+import { Animated } from "react-native";
+var runPressInAnimation = (animatedScale, animatedOpacity) => {
+  Animated.parallel([
+    Animated.spring(animatedScale, {
+      toValue: 0.965,
+      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
@@ -170,42 +200,21 @@ var Button = ({
   onPressIn,
   onPressOut
 }) => {
-  const animatedScale = React.useRef(new Animated.Value(1)).current;
-  const animatedOpacity = React.useRef(new Animated.Value(1)).current;
-  const { sizeStyles, radiusStyles, variantStyles, textColor, spinnerSize } = useButtonStyles(themeColor, variant, size, radius);
+  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);
+  const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
-      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();
+      runPressInAnimation(animatedScale, animatedOpacity);
     }
     onPressIn?.(event);
   };
   const handlePressOut = (event) => {
     if (!isDisabled && !isLoading) {
-      Animated.parallel([
-        Animated.spring(animatedScale, {
-          toValue: 1,
-          useNativeDriver: true,
-          speed: 50,
-          bounciness: 0
-        }),
-        Animated.timing(animatedOpacity, {
-          toValue: 1,
-          duration: 100,
-          useNativeDriver: true
-        })
-      ]).start();
+      runPressOutAnimation(animatedScale, animatedOpacity);
     }
     onPressOut?.(event);
   };
@@ -228,7 +237,7 @@ var Button = ({
       disabled: isDisabled || isLoading
     },
     /* @__PURE__ */ React.createElement(
-      Animated.View,
+      Animated2.View,
       {
         style: [
           styles.button,
@@ -244,7 +253,7 @@ var Button = ({
           style
         ]
       },
-      /* @__PURE__ */ React.createElement(View, { style: styles.contentContainer }, startContent && !isLoading && /* @__PURE__ */ React.createElement(View, { style: styles.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), /* @__PURE__ */ React.createElement(
+      /* @__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: [
@@ -255,7 +264,7 @@ var Button = ({
           ]
         },
         children
-      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), endContent && !isLoading && /* @__PURE__ */ React.createElement(View, { style: styles.endContent }, endContent))
+      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), endContent && !isLoading && spinnerPlacement !== "end" && /* @__PURE__ */ React.createElement(View, { style: styles.endContent }, endContent))
     )
   ));
 };