@xaui/native 0.0.23 → 0.0.24

package/dist/button/index.js

@@ -1,10 +1,391 @@
 import {
-  Button,
-  IconButton
-} from "../chunk-XJ3SAU2M.js";
-import "../chunk-F7WH4DMG.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+  ActivityIndicator
+} from "../chunk-UI5L26KD.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-GHCVNQET.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/button.type-j1ZdkkSl.d.cts

@@ -0,0 +1,4 @@
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+
+export type { ButtonRadius as B, ElevationLevel as E };

package/dist/button.type-j1ZdkkSl.d.ts

@@ -0,0 +1,4 @@
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+
+export type { ButtonRadius as B, ElevationLevel as E };

package/dist/{components/card/card.type.d.mts → card/index.d.cts}

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
-import type { GestureResponderEvent, TextStyle, ViewStyle } from 'react-native';
-import type { Radius, ThemeColor } from '../../types';
-import type { ElevationLevel } from '../button/button.type';
-export type CardCustomAppearance = {
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
+import { E as ElevationLevel } from '../button.type-j1ZdkkSl.cjs';
+
+type CardCustomAppearance = {
     /**
      * Custom styles for the card container
      */
@@ -28,7 +29,7 @@ export type CardCustomAppearance = {
      */
     description?: TextStyle;
 };
-export type CardProps = {
+type CardProps = {
     /**
      * Content to render inside the card.
      */
@@ -119,7 +120,7 @@ export type CardProps = {
      */
     onPressOut?: (event: GestureResponderEvent) => void;
 };
-export type CardHeaderProps = {
+type CardHeaderProps = {
     /**
      * Header content.
      */
@@ -131,7 +132,7 @@ export type CardHeaderProps = {
         container?: ViewStyle;
     };
 };
-export type CardBodyProps = {
+type CardBodyProps = {
     /**
      * Body content.
      */
@@ -143,7 +144,7 @@ export type CardBodyProps = {
         container?: ViewStyle;
     };
 };
-export type CardFooterProps = {
+type CardFooterProps = {
     /**
      * Footer content.
      */
@@ -155,7 +156,7 @@ export type CardFooterProps = {
         container?: ViewStyle;
     };
 };
-export type CardTitleProps = {
+type CardTitleProps = {
     /**
      * Title content.
      */
@@ -167,7 +168,7 @@ export type CardTitleProps = {
         text?: TextStyle;
     };
 };
-export type CardDescriptionProps = {
+type CardDescriptionProps = {
     /**
      * Description content.
      */
@@ -179,4 +180,12 @@ export type CardDescriptionProps = {
         text?: TextStyle;
     };
 };
-//# sourceMappingURL=card.type.d.ts.map
+
+declare const Card: React.FC<CardProps>;
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardBody: React.FC<CardBodyProps>;
+declare const CardFooter: React.FC<CardFooterProps>;
+declare const CardTitle: React.FC<CardTitleProps>;
+declare const CardDescription: React.FC<CardDescriptionProps>;
+
+export { Card, CardBody, type CardBodyProps, type CardCustomAppearance, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/card/index.d.ts

@@ -1,3 +1,191 @@
-export { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription, } from './card';
-export type { CardProps, CardCustomAppearance, CardHeaderProps, CardBodyProps, CardFooterProps, CardTitleProps, CardDescriptionProps, } from './card.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
+import { E as ElevationLevel } from '../button.type-j1ZdkkSl.js';
+
+type CardCustomAppearance = {
+    /**
+     * Custom styles for the card container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the card header section
+     */
+    header?: ViewStyle;
+    /**
+     * Custom styles for the card body section
+     */
+    body?: ViewStyle;
+    /**
+     * Custom styles for the card footer section
+     */
+    footer?: ViewStyle;
+    /**
+     * Custom styles for title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for description text
+     */
+    description?: TextStyle;
+};
+type CardProps = {
+    /**
+     * Content to render inside the card.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the card.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Card corner radius.
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Card padding (applies to all sides).
+     * @default 16
+     */
+    padding?: number;
+    /**
+     * Android elevation level from 0 to 4.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Whether the card should take full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether hover interactions are enabled.
+     * @default false
+     */
+    isHoverable?: boolean;
+    /**
+     * Whether press interactions are enabled.
+     * @default false
+     */
+    isPressable?: boolean;
+    /**
+     * Whether the whole card should be blurred.
+     * @default false
+     */
+    isBlurred?: boolean;
+    /**
+     * Whether the footer section should be blurred.
+     * @default false
+     */
+    isFooterBlurred?: boolean;
+    /**
+     * Whether the card is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disable all card animations.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Disable press ripple animation.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Allow text selection while pressing a pressable card.
+     * @default false
+     */
+    allowTextSelectionOnPress?: boolean;
+    /**
+     * Custom appearance styles for card parts.
+     */
+    customAppearance?: CardCustomAppearance;
+    /**
+     * Callback fired when card is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card is long pressed.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card press starts.
+     */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when card press ends.
+     */
+    onPressOut?: (event: GestureResponderEvent) => void;
+};
+type CardHeaderProps = {
+    /**
+     * Header content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the header container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardBodyProps = {
+    /**
+     * Body content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the body container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardFooterProps = {
+    /**
+     * Footer content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the footer container.
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+type CardTitleProps = {
+    /**
+     * Title content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the title text.
+     */
+    customAppearance?: {
+        text?: TextStyle;
+    };
+};
+type CardDescriptionProps = {
+    /**
+     * Description content.
+     */
+    children: ReactNode;
+    /**
+     * Custom styles for the description text.
+     */
+    customAppearance?: {
+        text?: TextStyle;
+    };
+};
+
+declare const Card: React.FC<CardProps>;
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardBody: React.FC<CardBodyProps>;
+declare const CardFooter: React.FC<CardFooterProps>;
+declare const CardTitle: React.FC<CardTitleProps>;
+declare const CardDescription: React.FC<CardDescriptionProps>;
+
+export { Card, CardBody, type CardBodyProps, type CardCustomAppearance, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/card/index.js

@@ -1,8 +1,8 @@
-import "../chunk-DXXNBF5P.js";
+import "../chunk-CZFDZPAS.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-I4V5Y5GD.js";
 
 // src/components/card/card.tsx
 import React from "react";