@xaui/native 0.1.5 → 0.2.0

package/dist/autocomplete/index.d.cts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
 import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
 
-type AutocompleteVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type AutocompleteVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type AutocompleteMenuTrigger = 'focus' | 'input' | 'manual';
 type AutocompleteCustomAppearance = {

package/dist/autocomplete/index.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
 import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
 
-type AutocompleteVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type AutocompleteVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type AutocompleteMenuTrigger = 'focus' | 'input' | 'manual';
 type AutocompleteCustomAppearance = {

package/dist/autocomplete/index.js

@@ -5,7 +5,7 @@ import "../chunk-SHBDANQN.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/autocomplete/autocomplete.tsx
 import React4, { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
@@ -21,7 +21,7 @@ var AutocompleteContext = createContext({
 
 // src/components/autocomplete/autocomplete.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 import { colors } from "@xaui/core/palette";
 var useAutocompleteColorScheme = (themeColor) => {
   const theme = useXUITheme();
@@ -93,28 +93,23 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
   return useMemo(() => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+    if (variant === "bordered" && themeColor === "default") {
       borderColor = colors.gray[300];
     }
     const styles4 = {
-      outlined: {
+      bordered: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
         borderColor
       },
-      flat: {
-        backgroundColor: colorScheme.background,
+      colored: {
+        backgroundColor: withOpacity(colorScheme.container, 0.5),
         borderWidth: 0
       },
       light: {
         backgroundColor: "transparent",
         borderWidth: 0
       },
-      faded: {
-        backgroundColor: `${colorScheme.background}90`,
-        borderWidth: theme.borderWidth.md,
-        borderColor
-      },
       underlined: {
         backgroundColor: "transparent",
         borderBottomWidth: theme.borderWidth.md,
@@ -420,7 +415,7 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-import { withOpacity } from "@xaui/core";
+import { withOpacity as withOpacity2 } from "@xaui/core";
 var AutocompleteDialogHeader = ({
   title,
   inputValue,
@@ -451,11 +446,11 @@ var AutocompleteDialogHeader = ({
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: withOpacity(theme.colors.foreground, 0.5),
+      placeholderTextColor: withOpacity2(theme.colors.foreground, 0.5),
       style: [
         styles2.input,
         {
-          backgroundColor: theme.colors.default.background,
+          backgroundColor: theme.colors.default.container,
           color: theme.colors.foreground
         },
         inputTextStyle
@@ -562,7 +557,7 @@ var AutocompleteDialog = ({
     [children]
   );
   const checkmarkColor = theme.colors[themeColor].main;
-  const checkmarkBackgroundColor = theme.colors[themeColor].background;
+  const checkmarkBackgroundColor = theme.colors[themeColor].container;
   useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
   useEffect3(() => {
     if (!visible) return;
@@ -748,7 +743,7 @@ var AutocompleteTrigger = ({
 var defaultPlaceholder = "Search...";
 var Autocomplete = ({
   children,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",

package/dist/avatar/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/avatar/avatar.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -50,7 +50,7 @@ function resolveAvatarSize(size) {
   return sizeMap[size];
 }
 function useAvatarSizeStyles(size) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const resolvedSize = _react.useMemo.call(void 0, () => resolveAvatarSize(size), [size]);
   const fontSize = _react.useMemo.call(void 0, () => {
     if (typeof size === "number") {
@@ -64,7 +64,7 @@ function useAvatarSizeStyles(size) {
   };
 }
 function useAvatarRadiusStyles(radius, size) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (radius === "full") {
       return { borderRadius: size / 2 };
@@ -80,21 +80,21 @@ function useAvatarRadiusStyles(radius, size) {
   }, [radius, size, theme]);
 }
 function useAvatarColors(themeColor, isDisabled) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const backgroundColor = _react.useMemo.call(void 0, () => {
     if (isDisabled) {
       return theme.colors.background;
     }
-    return colorScheme.background;
-  }, [colorScheme.background, isDisabled, theme.colors.background]);
+    return colorScheme.container;
+  }, [colorScheme.container, isDisabled, theme.colors.background]);
   const textColor = _react.useMemo.call(void 0, () => {
     if (safeThemeColor === "default") {
       return theme.colors.foreground;
     }
-    return colorScheme.main;
-  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
+    return colorScheme.onContainer;
+  }, [safeThemeColor, colorScheme.onContainer, theme.colors.foreground]);
   return {
     backgroundColor,
     textColor,
@@ -199,7 +199,7 @@ var AvatarGroup = ({
   renderCount,
   customAppearance
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const resolvedSize = resolveAvatarSize(size);
   const spacing = theme.spacing.xs;
   const overlap = Math.round(resolvedSize * 0.28);

package/dist/avatar/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/avatar/avatar.tsx
 import React from "react";
@@ -87,14 +87,14 @@ function useAvatarColors(themeColor, isDisabled) {
     if (isDisabled) {
       return theme.colors.background;
     }
-    return colorScheme.background;
-  }, [colorScheme.background, isDisabled, theme.colors.background]);
+    return colorScheme.container;
+  }, [colorScheme.container, isDisabled, theme.colors.background]);
   const textColor = useMemo(() => {
     if (safeThemeColor === "default") {
       return theme.colors.foreground;
     }
-    return colorScheme.main;
-  }, [safeThemeColor, colorScheme.main, theme.colors.foreground]);
+    return colorScheme.onContainer;
+  }, [safeThemeColor, colorScheme.onContainer, theme.colors.foreground]);
   return {
     backgroundColor,
     textColor,

package/dist/badge/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/badge/badge.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -41,7 +41,7 @@ var fontSizeMap = {
   lg: 12
 };
 function useBadgeSizeStyles(size, isDot, isOneChar) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const { height, minWidth, dot } = sizeMap[size];
     const fontSize = fontSizeMap[size];
@@ -71,38 +71,37 @@ function useBadgeSizeStyles(size, isDot, isOneChar) {
   }, [isDot, isOneChar, size, theme]);
 }
 function useBadgeVariantStyles(themeColor, variant) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
     if (variant === "flat") {
       return {
-        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
-        color: colorScheme.main
+        backgroundColor: colorScheme.container,
+        color: colorScheme.onContainer
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.35) : _core.withOpacity.call(void 0, colorScheme.background, 0.7),
-        color: colorScheme.main
+        backgroundColor: _core.withOpacity.call(void 0, colorScheme.container, 0.7),
+        color: colorScheme.onContainer
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
-        color: isDark ? colorScheme.main : colorScheme.foreground,
+        backgroundColor: colorScheme.main,
+        color: colorScheme.onMain,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
-      color: isDark ? colorScheme.main : colorScheme.foreground
+      backgroundColor: colorScheme.main,
+      color: colorScheme.onMain
     };
   }, [colorScheme, theme, variant]);
 }
 function useBadgeRadiusStyles(radius, height) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (radius === "full") {
       return { borderRadius: height / 2 };
@@ -148,7 +147,7 @@ var Badge = ({
   if (!shouldRender && !children) {
     return null;
   }
-  const forceOneChar = isOneChar || radius === "full";
+  const forceOneChar = isOneChar;
   const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
   const variantStyles = useBadgeVariantStyles(themeColor, variant);
   const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);

package/dist/badge/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/badge/badge.tsx
 import React from "react";
@@ -75,29 +75,28 @@ function useBadgeVariantStyles(themeColor, variant) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return useMemo(() => {
-    const isDark = theme.mode === "dark";
     if (variant === "flat") {
       return {
-        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
-        color: colorScheme.main
+        backgroundColor: colorScheme.container,
+        color: colorScheme.onContainer
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.35) : withOpacity(colorScheme.background, 0.7),
-        color: colorScheme.main
+        backgroundColor: withOpacity(colorScheme.container, 0.7),
+        color: colorScheme.onContainer
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
-        color: isDark ? colorScheme.main : colorScheme.foreground,
+        backgroundColor: colorScheme.main,
+        color: colorScheme.onMain,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
-      color: isDark ? colorScheme.main : colorScheme.foreground
+      backgroundColor: colorScheme.main,
+      color: colorScheme.onMain
     };
   }, [colorScheme, theme, variant]);
 }
@@ -148,7 +147,7 @@ var Badge = ({
   if (!shouldRender && !children) {
     return null;
   }
-  const forceOneChar = isOneChar || radius === "full";
+  const forceOneChar = isOneChar;
   const sizeStyles = useBadgeSizeStyles(size, isDot, forceOneChar);
   const variantStyles = useBadgeVariantStyles(themeColor, variant);
   const radiusStyles = useBadgeRadiusStyles(radius, sizeStyles.height);

package/dist/bottom-sheet/index.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-EUQDGTST.cjs');
 
 
-var _chunk3XWF77Y3cjs = require('../chunk-3XWF77Y3.cjs');
+var _chunkBYWUAPC4cjs = require('../chunk-BYWUAPC4.cjs');
 require('../chunk-56RPWZD2.cjs');
-require('../chunk-RZJFCDFS.cjs');
+require('../chunk-7UFBLUMV.cjs');
 
 
-exports.BottomSheet = _chunk3XWF77Y3cjs.BottomSheet;
+exports.BottomSheet = _chunkBYWUAPC4cjs.BottomSheet;

package/dist/bottom-sheet/index.js

@@ -1,9 +1,9 @@
 import "../chunk-DECMUMCI.js";
 import {
   BottomSheet
-} from "../chunk-K24VDBNN.js";
+} from "../chunk-4JFWQ5XT.js";
 import "../chunk-SHBDANQN.js";
-import "../chunk-LVNBYERF.js";
+import "../chunk-RBSA4NH4.js";
 export {
   BottomSheet
 };

package/dist/bottom-tab-bar/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/bottom-tab-bar/bottom-tab-bar.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -49,7 +49,7 @@ var useBottomTabBarSizeStyles = (size) => {
   return _react.useMemo.call(void 0, () => sizeMap[size], [size]);
 };
 var useBottomTabBarColors = (themeColor, activeColor, inactiveColor, indicatorColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
   return _react.useMemo.call(void 0, () => {
     return {

package/dist/bottom-tab-bar/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/bottom-tab-bar/bottom-tab-bar.tsx
 import React2, { useMemo as useMemo3, useState as useState2 } from "react";

package/dist/button/index.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkFBTBWI3Pcjs = require('../chunk-FBTBWI3P.cjs');
+var _chunkYIEUN3G5cjs = require('../chunk-YIEUN3G5.cjs');
 require('../chunk-56RPWZD2.cjs');
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/button/button.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -56,22 +56,20 @@ var styles = _reactnative.StyleSheet.create({
 
 var _core = require('@xaui/core');
 var useTextStyles = (themeColor, variant) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
-    if (variant === "solid") {
-      return isDark ? colorScheme.main : colorScheme.foreground;
-    }
+    if (variant === "solid") return colorScheme.onMain;
+    if (variant === "flat" || variant === "faded") return colorScheme.onContainer;
     return colorScheme.main;
-  }, [variant, colorScheme, theme]);
+  }, [variant, colorScheme]);
   return {
     textColor
   };
 };
 function useSizesStyles(size) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const sizeStyles = _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -113,23 +111,22 @@ function useSizesStyles(size) {
   return { sizeStyles, spinnerSize };
 }
 function useVariantSizesStyles(themeColor, variant, elevation = 0) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = _react.useMemo.call(void 0, () => {
-    const isDark = theme.mode === "dark";
     const styles2 = {
       solid: {
-        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        backgroundColor: colorScheme.main,
         borderWidth: 0
       },
-      outlined: {
+      bordered: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
+        backgroundColor: colorScheme.container,
         borderWidth: 0
       },
       light: {
@@ -137,13 +134,13 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderWidth: 0
       },
       faded: {
-        backgroundColor: `${colorScheme.background}95`,
+        backgroundColor: colorScheme.container,
         borderWidth: theme.borderWidth.md,
-        borderColor: `${colorScheme.main}90`
+        borderColor: colorScheme.main
       }
     };
     const baseStyle = styles2[variant];
-    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shouldApplyElevation = variant !== "bordered" && 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,
@@ -210,7 +207,7 @@ var Button = ({
   const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
   const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
   const { sizeStyles, spinnerSize } = useSizesStyles(size);
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
@@ -226,7 +223,7 @@ var Button = ({
     _optionalChain([onPressOut, 'optionalCall', _2 => _2(event)]);
   };
   const spinner = /* @__PURE__ */ _react2.default.createElement(
-    _chunkFBTBWI3Pcjs.ActivityIndicator,
+    _chunkYIEUN3G5cjs.ActivityIndicator,
     {
       variant: "circular",
       themeColor: variant === "solid" ? void 0 : themeColor,
@@ -300,7 +297,7 @@ var iconButtonStyles = _reactnative.StyleSheet.create({
 // src/components/button/icon-button.hook.ts
 
 var useIconButtonSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizeMap = {
       xs: { width: theme.componentSizes.xs, height: theme.componentSizes.xs },
@@ -331,7 +328,7 @@ var IconButton = ({
   const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
   const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
   const sizeStyles = useIconButtonSizeStyles(size);
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
   const { textColor } = useTextStyles(themeColor, variant);
   const handlePressIn = (event) => {
@@ -378,7 +375,7 @@ var IconButton = ({
         ]
       },
       isLoading ? /* @__PURE__ */ _react2.default.createElement(
-        _chunkFBTBWI3Pcjs.ActivityIndicator,
+        _chunkYIEUN3G5cjs.ActivityIndicator,
         {
           variant: "circular",
           themeColor: variant === "solid" ? void 0 : themeColor,

package/dist/button/index.d.cts

@@ -2,7 +2,7 @@ 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' | 'faded';
+type ButtonVariant = 'solid' | 'bordered' | 'flat' | 'light' | 'faded';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type SpinnerPlacement = 'start' | 'end';
 type ElevationLevel = 0 | 1 | 2 | 3 | 4;
@@ -75,7 +75,7 @@ type ButtonProps = {
     isLoading?: boolean;
     /**
      * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
+     * Does not apply to `bordered` and `light` variants.
      * @default 0
      */
     elevation?: ElevationLevel;
@@ -140,7 +140,7 @@ type IconButtonProps = {
     isLoading?: boolean;
     /**
      * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
+     * Does not apply to `bordered` and `light` variants.
      * @default 0
      */
     elevation?: ElevationLevel;

package/dist/button/index.d.ts

@@ -2,7 +2,7 @@ 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' | 'faded';
+type ButtonVariant = 'solid' | 'bordered' | 'flat' | 'light' | 'faded';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type SpinnerPlacement = 'start' | 'end';
 type ElevationLevel = 0 | 1 | 2 | 3 | 4;
@@ -75,7 +75,7 @@ type ButtonProps = {
     isLoading?: boolean;
     /**
      * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
+     * Does not apply to `bordered` and `light` variants.
      * @default 0
      */
     elevation?: ElevationLevel;
@@ -140,7 +140,7 @@ type IconButtonProps = {
     isLoading?: boolean;
     /**
      * Android elevation level from 0 to 4.
-     * Does not apply to `outlined` and `light` variants.
+     * Does not apply to `bordered` and `light` variants.
      * @default 0
      */
     elevation?: ElevationLevel;

package/dist/button/index.js

@@ -1,11 +1,11 @@
 import {
   ActivityIndicator
-} from "../chunk-J3BOFXIH.js";
+} from "../chunk-VSZEXOUN.js";
 import "../chunk-SHBDANQN.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/button/button.tsx
 import React from "react";
@@ -54,18 +54,16 @@ var styles = StyleSheet.create({
 
 // src/components/button/button.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
+import { getSafeThemeColor } from "@xaui/core";
 var useTextStyles = (themeColor, variant) => {
   const theme = useXUITheme();
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const textColor = useMemo(() => {
-    const isDark = theme.mode === "dark";
-    if (variant === "solid") {
-      return isDark ? colorScheme.main : colorScheme.foreground;
-    }
+    if (variant === "solid") return colorScheme.onMain;
+    if (variant === "flat" || variant === "faded") return colorScheme.onContainer;
     return colorScheme.main;
-  }, [variant, colorScheme, theme]);
+  }, [variant, colorScheme]);
   return {
     textColor
   };
@@ -117,19 +115,18 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = useMemo(() => {
-    const isDark = theme.mode === "dark";
     const styles2 = {
       solid: {
-        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        backgroundColor: colorScheme.main,
         borderWidth: 0
       },
-      outlined: {
+      bordered: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
+        backgroundColor: colorScheme.container,
         borderWidth: 0
       },
       light: {
@@ -137,13 +134,13 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderWidth: 0
       },
       faded: {
-        backgroundColor: `${colorScheme.background}95`,
+        backgroundColor: colorScheme.container,
         borderWidth: theme.borderWidth.md,
-        borderColor: `${colorScheme.main}90`
+        borderColor: colorScheme.main
       }
     };
     const baseStyle = styles2[variant];
-    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shouldApplyElevation = variant !== "bordered" && 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,