@xaui/native 0.0.14 → 0.0.16

package/README.md

@@ -58,7 +58,7 @@ function Banner() {
 
 ### `Button`
 
-- Variants: `solid`, `outlined`, `flat`, `light`, `elevated`, `faded`
+- Variants: `solid`, `outlined`, `flat`, `light`, `faded`
 - Sizes: `xs`, `sm`, `md`, `lg`
 - Radii: `none`, `sm`, `md`, `lg`, `full`
 - Supports start/end content, `fullWidth`, `isDisabled`, `isLoading` with an integrated spinner
@@ -67,7 +67,8 @@ function Banner() {
 ```tsx
 <Button
   themeColor="primary"
-  variant="elevated"
+  variant="solid"
+  elevation={2}
   size="lg"
   radius="full"
   isLoading={saving}

package/dist/button/index.cjs

@@ -511,7 +511,7 @@ var useTextStyles = (themeColor, variant) => {
   const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = (0, import_react10.useMemo)(() => {
-    if (variant === "solid" || variant === "elevated") {
+    if (variant === "solid") {
       return colorScheme.foreground;
     }
     return colorScheme.main;
@@ -562,7 +562,7 @@ function useSizesStyles(size) {
   }, [size]);
   return { sizeStyles, spinnerSize };
 }
-function useVariantSizesStyles(themeColor, variant) {
+function useVariantSizesStyles(themeColor, variant, elevation = 0) {
   const theme = useXUITheme();
   const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
@@ -585,19 +585,21 @@ function useVariantSizesStyles(themeColor, variant) {
         backgroundColor: "transparent",
         borderWidth: 0
       },
-      elevated: {
-        backgroundColor: colorScheme.main,
-        borderWidth: 0,
-        ...theme.shadows.md
-      },
       faded: {
         backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
         borderColor: `${colorScheme.main}90`
       }
     };
-    return styles3[variant];
-  }, [variant, colorScheme, theme]);
+    const baseStyle = styles3[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;
 }
 
@@ -647,6 +649,7 @@ var Button = ({
   fullWidth = false,
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -657,7 +660,7 @@ var Button = ({
   const animatedOpacity = import_react11.default.useRef(new import_react_native10.Animated.Value(1)).current;
   const { sizeStyles, spinnerSize } = useSizesStyles(size);
   const radiusStyles = useBorderRadiusStyles(radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
@@ -675,8 +678,8 @@ var Button = ({
     ActivityIndicator,
     {
       variant: "circular",
-      themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
-      color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+      themeColor: variant === "solid" ? void 0 : themeColor,
+      color: variant === "solid" ? textColor : void 0,
       size: spinnerSize
     }
   );
@@ -767,6 +770,7 @@ var IconButton = ({
   radius = "md",
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -777,7 +781,7 @@ var IconButton = ({
   const animatedOpacity = import_react13.default.useRef(new import_react_native12.Animated.Value(1)).current;
   const sizeStyles = useIconButtonSizeStyles(size);
   const radiusStyles = useBorderRadiusStyles(radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
@@ -826,8 +830,8 @@ var IconButton = ({
         ActivityIndicator,
         {
           variant: "circular",
-          themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
-          color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? textColor : void 0,
           size: spinnerSize
         }
       ) : icon

package/dist/button/index.d.cts

@@ -1,98 +1,8 @@
 import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
-
-type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
-type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type SpinnerPlacement = 'start' | 'end';
-type ButtonCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the button
-     */
-    button?: ViewStyle;
-    /**
-     * Custom styles for the button text
-     */
-    text?: TextStyle;
-};
-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?: Size;
-    /**
-     * 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 appearance styles for button parts
-     */
-    customAppearance?: ButtonCustomAppearance;
-    /**
-     * 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;
-};
+import { a as ButtonProps, b as ButtonVariant, B as ButtonRadius, E as ElevationLevel } from '../button.type-ikaWzhIg.cjs';
+export { S as SpinnerPlacement } from '../button.type-ikaWzhIg.cjs';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { S as Size, T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 declare const Button: React.FC<ButtonProps>;
 
@@ -131,6 +41,12 @@ type IconButtonProps = {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
     /**
      * Custom appearance overrides
      */
@@ -158,4 +74,4 @@ type IconButtonProps = {
 
 declare const IconButton: React.FC<IconButtonProps>;
 
-export { Button, type ButtonProps, type ButtonRadius, type ButtonVariant, IconButton, type IconButtonProps, type SpinnerPlacement };
+export { Button, ButtonProps, ButtonRadius, ButtonVariant, IconButton, type IconButtonProps };

package/dist/button/index.d.ts

@@ -1,98 +1,8 @@
 import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
-
-type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
-type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type SpinnerPlacement = 'start' | 'end';
-type ButtonCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the button
-     */
-    button?: ViewStyle;
-    /**
-     * Custom styles for the button text
-     */
-    text?: TextStyle;
-};
-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?: Size;
-    /**
-     * 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 appearance styles for button parts
-     */
-    customAppearance?: ButtonCustomAppearance;
-    /**
-     * 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;
-};
+import { a as ButtonProps, b as ButtonVariant, B as ButtonRadius, E as ElevationLevel } from '../button.type-D8tzEBo7.js';
+export { S as SpinnerPlacement } from '../button.type-D8tzEBo7.js';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { S as Size, T as ThemeColor } from '../index-BOw6tbkc.js';
 
 declare const Button: React.FC<ButtonProps>;
 
@@ -131,6 +41,12 @@ type IconButtonProps = {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
     /**
      * Custom appearance overrides
      */
@@ -158,4 +74,4 @@ type IconButtonProps = {
 
 declare const IconButton: React.FC<IconButtonProps>;
 
-export { Button, type ButtonProps, type ButtonRadius, type ButtonVariant, IconButton, type IconButtonProps, type SpinnerPlacement };
+export { Button, ButtonProps, ButtonRadius, ButtonVariant, IconButton, type IconButtonProps };

package/dist/button/index.js

@@ -59,7 +59,7 @@ var useTextStyles = (themeColor, variant) => {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = useMemo(() => {
-    if (variant === "solid" || variant === "elevated") {
+    if (variant === "solid") {
       return colorScheme.foreground;
     }
     return colorScheme.main;
@@ -110,7 +110,7 @@ function useSizesStyles(size) {
   }, [size]);
   return { sizeStyles, spinnerSize };
 }
-function useVariantSizesStyles(themeColor, variant) {
+function useVariantSizesStyles(themeColor, variant, elevation = 0) {
   const theme = useXUITheme();
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
@@ -133,19 +133,21 @@ function useVariantSizesStyles(themeColor, variant) {
         backgroundColor: "transparent",
         borderWidth: 0
       },
-      elevated: {
-        backgroundColor: colorScheme.main,
-        borderWidth: 0,
-        ...theme.shadows.md
-      },
       faded: {
         backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
         borderColor: `${colorScheme.main}90`
       }
     };
-    return styles2[variant];
-  }, [variant, colorScheme, theme]);
+    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;
 }
 
@@ -195,6 +197,7 @@ var Button = ({
   fullWidth = false,
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -205,7 +208,7 @@ var Button = ({
   const animatedOpacity = React.useRef(new Animated2.Value(1)).current;
   const { sizeStyles, spinnerSize } = useSizesStyles(size);
   const radiusStyles = useBorderRadiusStyles(radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
@@ -223,8 +226,8 @@ var Button = ({
     ActivityIndicator,
     {
       variant: "circular",
-      themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
-      color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+      themeColor: variant === "solid" ? void 0 : themeColor,
+      color: variant === "solid" ? textColor : void 0,
       size: spinnerSize
     }
   );
@@ -315,6 +318,7 @@ var IconButton = ({
   radius = "md",
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -325,7 +329,7 @@ var IconButton = ({
   const animatedOpacity = React2.useRef(new Animated3.Value(1)).current;
   const sizeStyles = useIconButtonSizeStyles(size);
   const radiusStyles = useBorderRadiusStyles(radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
     if (!isDisabled && !isLoading) {
@@ -374,8 +378,8 @@ var IconButton = ({
         ActivityIndicator,
         {
           variant: "circular",
-          themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
-          color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? textColor : void 0,
           size: spinnerSize
         }
       ) : icon

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

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, S as Size } from './index-BOw6tbkc.js';
+
+type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'faded';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SpinnerPlacement = 'start' | 'end';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+type ButtonCustomAppearance = {
+    /**
+     * Custom styles for the outer container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the button
+     */
+    button?: ViewStyle;
+    /**
+     * Custom styles for the button text
+     */
+    text?: TextStyle;
+};
+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?: Size;
+    /**
+     * 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;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Custom appearance styles for button parts
+     */
+    customAppearance?: ButtonCustomAppearance;
+    /**
+     * 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;
+};
+
+export type { ButtonRadius as B, ElevationLevel as E, SpinnerPlacement as S, ButtonProps as a, ButtonVariant as b };

package/dist/button.type-ikaWzhIg.d.cts

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, S as Size } from './index-BOw6tbkc.cjs';
+
+type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'faded';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SpinnerPlacement = 'start' | 'end';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+type ButtonCustomAppearance = {
+    /**
+     * Custom styles for the outer container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the button
+     */
+    button?: ViewStyle;
+    /**
+     * Custom styles for the button text
+     */
+    text?: TextStyle;
+};
+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?: Size;
+    /**
+     * 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;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Custom appearance styles for button parts
+     */
+    customAppearance?: ButtonCustomAppearance;
+    /**
+     * 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;
+};
+
+export type { ButtonRadius as B, ElevationLevel as E, SpinnerPlacement as S, ButtonProps as a, ButtonVariant as b };