@xaui/native 0.0.15 → 0.0.17

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/accordion/index.cjs

@@ -290,7 +290,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = (0, import_core3.addOpacityToColor)(theme.colors.default.background, 0.5);
+      base.backgroundColor = (0, import_core3.withOpacity)(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/accordion/index.js

@@ -1,10 +1,11 @@
 import {
   Divider
-} from "../chunk-GNJIET26.js";
+} from "../chunk-RIVFFZRO.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useXUIPalette,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-MZL77KV5.js";
 
 // src/components/accordion/accordion.tsx
 import React4 from "react";
@@ -139,7 +140,7 @@ import {
   Easing
 } from "react-native";
 import { colors as palette } from "@xaui/core/palette";
-import { addOpacityToColor } from "@xaui/core";
+import { withOpacity } from "@xaui/core";
 var useAccordionItemState = (itemKey) => {
   const context = useAccordionContext();
   const resolvedItemKey = itemKey ?? "";
@@ -219,7 +220,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = addOpacityToColor(theme.colors.default.background, 0.5);
+      base.backgroundColor = withOpacity(theme.colors.default.background, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/alert/index.js

@@ -1,7 +1,8 @@
 import {
   Alert
-} from "../chunk-2T6FKPJW.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-OXVIVNIJ.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Alert
 };

package/dist/autocomplete/index.cjs

@@ -508,13 +508,7 @@ var styles2 = import_react_native5.StyleSheet.create({
 });
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var addOpacityToColor = (color, opacity) => {
-  const hex = color.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
+var import_core4 = require("@xaui/core");
 var AutocompleteDialogHeader = ({
   title,
   inputValue,
@@ -545,7 +539,7 @@ var AutocompleteDialogHeader = ({
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
+      placeholderTextColor: (0, import_core4.withOpacity)(theme.colors.foreground, 0.5),
       style: [
         styles2.input,
         {
@@ -1073,7 +1067,7 @@ var styles3 = import_react_native11.StyleSheet.create({
 
 // src/components/autocomplete/autocomplete-item.hook.ts
 var import_react15 = require("react");
-var import_core6 = require("@xaui/core");
+var import_core7 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
   return (0, import_react15.useMemo)(() => {
@@ -1108,7 +1102,7 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     return "transparent";
@@ -1125,7 +1119,7 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core7.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return (0, import_react15.useMemo)(() => {
     if (themeColor === "default") {

package/dist/autocomplete/index.js

@@ -1,9 +1,10 @@
 import {
   Autocomplete,
   AutocompleteItem
-} from "../chunk-NMZUPH3R.js";
+} from "../chunk-XUYIAA3A.js";
 import "../chunk-GBHQCAKW.js";
-import "../chunk-NBRASCX4.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Autocomplete,
   AutocompleteItem

package/dist/avatar/index.js

@@ -1,8 +1,9 @@
 import {
   Avatar,
   AvatarGroup
-} from "../chunk-4LFRYVSR.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-K2HSVISE.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Avatar,
   AvatarGroup

package/dist/badge/index.js

@@ -1,7 +1,8 @@
 import {
   Badge
-} from "../chunk-XJKA22BK.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-UGDGCMGC.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   Badge
 };

package/dist/bottom-sheet/index.cjs

@@ -242,7 +242,13 @@ var useBottomSheetAnimation = ({
         snapTranslateValues[clampedIndex]
       );
     },
-    [sortedSnapPoints, snapTranslateValues, disableAnimation, translateY, onSnapChange]
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
   );
   (0, import_react6.useEffect)(() => {
     if (isOpen) {
@@ -417,19 +423,7 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native7.Animated.View,
-    {
-      style: [styles.backdrop, { opacity: backdropOpacity }]
-    },
-    /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native7.Pressable,
-      {
-        style: styles.backdrop,
-        onPress: handleBackdropPress
-      }
-    )
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native7.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react7.default.createElement(
     import_react_native7.Animated.View,
     {
       style: [
@@ -443,12 +437,7 @@ var BottomSheet = ({
     /* @__PURE__ */ import_react7.default.createElement(
       import_react_native7.View,
       {
-        style: [
-          styles.sheet,
-          { height: screenHeight },
-          sheetStyles,
-          style
-        ],
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
         ...panResponder.panHandlers
       },
       showHandle && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ import_react7.default.createElement(

package/dist/bottom-sheet/index.js

@@ -1,7 +1,8 @@
 import {
   BottomSheet
-} from "../chunk-GAOI4KIV.js";
-import "../chunk-NBRASCX4.js";
+} from "../chunk-S3MGBM3G.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-MZL77KV5.js";
 export {
   BottomSheet
 };

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

@@ -1,10 +1,11 @@
 import {
   ActivityIndicator
-} from "../chunk-MKHBEJLO.js";
+} from "../chunk-VUVE6PK7.js";
+import "../chunk-DXXNBF5P.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-NBRASCX4.js";
+} from "../chunk-MZL77KV5.js";
 
 // src/components/button/button.tsx
 import React from "react";
@@ -59,7 +60,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 +111,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 +134,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 +198,7 @@ var Button = ({
   fullWidth = false,
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -205,7 +209,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 +227,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 +319,7 @@ var IconButton = ({
   radius = "md",
   isDisabled = false,
   isLoading = false,
+  elevation = 0,
   customAppearance,
   onPress,
   onLongPress,
@@ -325,7 +330,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 +379,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