@xaui/native 0.0.2

package/dist/button/index.d.cts

@@ -0,0 +1,90 @@
+import React, { ReactNode } from 'react';
+import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../theme-qvIXI4kF.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 = {
+    /**
+     * The content to display in the button.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the button.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * The border radius of the button.
+     * @default 'md'
+     */
+    radius?: ButtonRadius;
+    /**
+     * Content to display at the start of the button.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the button.
+     */
+    endContent?: ReactNode;
+    /**
+     * The placement of the spinner when isLoading is true.
+     * @default 'start'
+     */
+    spinnerPlacement?: SpinnerPlacement;
+    /**
+     * Whether the button should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Custom text style for the button label.
+     */
+    textStyle?: TextStyle;
+    /**
+     * Custom style for the button container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the button is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button is long pressed.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button press starts.
+     */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button press ends.
+     */
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+
+declare const Button: React.FC<ButtonProps>;
+
+export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.d.ts

@@ -0,0 +1,90 @@
+import React, { ReactNode } from 'react';
+import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../theme-qvIXI4kF.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 = {
+    /**
+     * The content to display in the button.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the button.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * The border radius of the button.
+     * @default 'md'
+     */
+    radius?: ButtonRadius;
+    /**
+     * Content to display at the start of the button.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the button.
+     */
+    endContent?: ReactNode;
+    /**
+     * The placement of the spinner when isLoading is true.
+     * @default 'start'
+     */
+    spinnerPlacement?: SpinnerPlacement;
+    /**
+     * Whether the button should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Custom text style for the button label.
+     */
+    textStyle?: TextStyle;
+    /**
+     * Custom style for the button container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the button is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button is long pressed.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button press starts.
+     */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when the button press ends.
+     */
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+
+declare const Button: React.FC<ButtonProps>;
+
+export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.js

@@ -0,0 +1,264 @@
+import {
+  ActivityIndicator
+} from "../chunk-6ITFLLAM.js";
+import {
+  useXUITheme
+} from "../chunk-SHT66VET.js";
+
+// src/components/button/button.tsx
+import React from "react";
+import { Pressable, Text, View, Animated } 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: {
+    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 useButtonStyles = (themeColor, variant, size, radius) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  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 radiusStyles = useMemo(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, theme]);
+  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
+      },
+      elevated: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0,
+        ...theme.shadows.md
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      }
+    };
+    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
+  };
+};
+
+// src/components/button/button.tsx
+var Button = ({
+  children,
+  themeColor = "default",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  startContent,
+  endContent,
+  spinnerPlacement = "start",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  textStyle,
+  style,
+  onPress,
+  onLongPress,
+  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 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();
+    }
+    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();
+    }
+    onPressOut?.(event);
+  };
+  const spinner = /* @__PURE__ */ React.createElement(
+    ActivityIndicator,
+    {
+      variant: "circular",
+      themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
+      color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+      size: spinnerSize
+    }
+  );
+  return /* @__PURE__ */ React.createElement(View, { style: [fullWidth && styles.fullWidth] }, /* @__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(
+      Animated.View,
+      {
+        style: [
+          styles.button,
+          sizeStyles,
+          radiusStyles,
+          variantStyles,
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          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(
+        Text,
+        {
+          style: [
+            styles.text,
+            { fontSize: sizeStyles.fontSize, color: textColor },
+            isDisabled && styles.disabledText,
+            textStyle
+          ]
+        },
+        children
+      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ React.createElement(View, { style: styles.spinner }, spinner), endContent && !isLoading && /* @__PURE__ */ React.createElement(View, { style: styles.endContent }, endContent))
+    )
+  ));
+};
+export {
+  Button
+};