@xaui/native 0.0.39 → 0.0.41

package/dist/alert/index.cjs

@@ -75,7 +75,8 @@ var useAlertColorScheme = (themeColor) => {
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const containerStyles = _react.useMemo.call(void 0, () => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? _core.withOpacity.call(void 0, colorScheme.background, 0.75) : "transparent";
+    const isDark = theme.mode === "dark";
+    const backgroundColor = variant === "solid" ? isDark ? colorScheme.background : colorScheme.main : variant === "flat" ? isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background : variant === "faded" ? _core.withOpacity.call(void 0, colorScheme.background, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
     const borderColor = variant === "bordered" ? _core.withOpacity.call(void 0, colorScheme.main, 0.75) : variant === "faded" ? _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
@@ -91,7 +92,8 @@ var useAlertContainerStyles = (themeColor, variant) => {
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const iconWrapperStyles = _react.useMemo.call(void 0, () => {
-    const backgroundColor = variant === "solid" ? _core.withOpacity.call(void 0, colorScheme.foreground, 0.16) : _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+    const isDark = theme.mode === "dark";
+    const backgroundColor = variant === "solid" ? _core.withOpacity.call(void 0, isDark ? colorScheme.main : colorScheme.foreground, 0.16) : _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
     const borderColor = _core.withOpacity.call(void 0, 
       isDefault ? theme.colors.foreground : colorScheme.main,
@@ -108,7 +110,8 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const textStyles = _react.useMemo.call(void 0, () => {
-    const baseTextColor = variant === "solid" ? colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
+    const isDark = theme.mode === "dark";
+    const baseTextColor = variant === "solid" ? isDark ? colorScheme.main : colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
         color: baseTextColor,

package/dist/alert/index.d.cts

@@ -87,4 +87,4 @@ type AlertProps = {
 
 declare const Alert: React.FC<AlertProps>;
 
-export { Alert, type AlertProps, type AlertVariant };
+export { Alert, type AlertProps, type AlertRadius, type AlertVariant };

package/dist/alert/index.d.ts

@@ -87,4 +87,4 @@ type AlertProps = {
 
 declare const Alert: React.FC<AlertProps>;
 
-export { Alert, type AlertProps, type AlertVariant };
+export { Alert, type AlertProps, type AlertRadius, type AlertVariant };

package/dist/alert/index.js

@@ -75,7 +75,8 @@ var useAlertColorScheme = (themeColor) => {
 var useAlertContainerStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const containerStyles = useMemo(() => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.background : variant === "faded" ? withOpacity(colorScheme.background, 0.75) : "transparent";
+    const isDark = theme.mode === "dark";
+    const backgroundColor = variant === "solid" ? isDark ? colorScheme.background : colorScheme.main : variant === "flat" ? isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background : variant === "faded" ? withOpacity(colorScheme.background, 0.75) : "transparent";
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
     const borderColor = variant === "bordered" ? withOpacity(colorScheme.main, 0.75) : variant === "faded" ? withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
     return {
@@ -91,7 +92,8 @@ var useAlertContainerStyles = (themeColor, variant) => {
 var useAlertIconWrapperStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const iconWrapperStyles = useMemo(() => {
-    const backgroundColor = variant === "solid" ? withOpacity(colorScheme.foreground, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
+    const isDark = theme.mode === "dark";
+    const backgroundColor = variant === "solid" ? withOpacity(isDark ? colorScheme.main : colorScheme.foreground, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
     const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
     const borderColor = withOpacity(
       isDefault ? theme.colors.foreground : colorScheme.main,
@@ -108,7 +110,8 @@ var useAlertIconWrapperStyles = (themeColor, variant) => {
 var useAlertTextStyles = (themeColor, variant) => {
   const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
   const textStyles = useMemo(() => {
-    const baseTextColor = variant === "solid" ? colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
+    const isDark = theme.mode === "dark";
+    const baseTextColor = variant === "solid" ? isDark ? colorScheme.main : colorScheme.foreground : isDefault ? theme.colors.foreground : colorScheme.main;
     return {
       titleStyles: {
         color: baseTextColor,

package/dist/badge/index.cjs

@@ -21,7 +21,7 @@ var styles = _reactnative.StyleSheet.create({
   },
   text: {
     textAlign: "center",
-    fontWeight: "600",
+    fontWeight: "700",
     includeFontPadding: false,
     textAlignVertical: "center"
   }
@@ -75,28 +75,29 @@ function useBadgeVariantStyles(themeColor, variant) {
   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: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         color: colorScheme.main
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: _core.withOpacity.call(void 0, colorScheme.background, 0.7),
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.35) : _core.withOpacity.call(void 0, colorScheme.background, 0.7),
         color: colorScheme.main
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.foreground,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        color: isDark ? colorScheme.main : colorScheme.foreground,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.foreground
+      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+      color: isDark ? colorScheme.main : colorScheme.foreground
     };
   }, [colorScheme, theme, variant]);
 }

package/dist/badge/index.js

@@ -21,7 +21,7 @@ var styles = StyleSheet.create({
   },
   text: {
     textAlign: "center",
-    fontWeight: "600",
+    fontWeight: "700",
     includeFontPadding: false,
     textAlignVertical: "center"
   }
@@ -75,28 +75,29 @@ 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: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         color: colorScheme.main
       };
     }
     if (variant === "faded") {
       return {
-        backgroundColor: withOpacity(colorScheme.background, 0.7),
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.35) : withOpacity(colorScheme.background, 0.7),
         color: colorScheme.main
       };
     }
     if (variant === "shadow") {
       return {
-        backgroundColor: colorScheme.main,
-        color: colorScheme.foreground,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+        color: isDark ? colorScheme.main : colorScheme.foreground,
         shadow: theme.shadows.sm
       };
     }
     return {
-      backgroundColor: colorScheme.main,
-      color: colorScheme.foreground
+      backgroundColor: isDark ? colorScheme.background : colorScheme.main,
+      color: isDark ? colorScheme.main : colorScheme.foreground
     };
   }, [colorScheme, theme, variant]);
 }

package/dist/button/index.cjs

@@ -60,11 +60,12 @@ var useTextStyles = (themeColor, variant) => {
   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 colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return {
     textColor
   };
@@ -116,9 +117,10 @@ function useVariantSizesStyles(themeColor, variant, elevation = 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: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       light: {

package/dist/button/index.js

@@ -54,17 +54,18 @@ var styles = StyleSheet.create({
 
 // src/components/button/button.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } 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 colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return {
     textColor
   };
@@ -116,9 +117,10 @@ 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: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       outlined: {
@@ -127,7 +129,7 @@ function useVariantSizesStyles(themeColor, variant, elevation = 0) {
         borderColor: colorScheme.main
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       light: {

package/dist/{chunk-XQED3KRW.cjs → chunk-HYL4EU3Y.cjs}

@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 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 variantMap = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? _core.withOpacity.call(void 0, colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const iconColor = _react.useMemo.call(void 0, () => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return { iconColor };
 }
 function useFabRadiusValue(radius, fallback) {

package/dist/{chunk-UVI56OO5.js → chunk-WGWXGIZ3.js}

@@ -37,7 +37,7 @@ var styles = StyleSheet.create({
 
 // src/components/fab/fab.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 function useFabSizeStyles(size) {
   const theme = useXUITheme();
   const sizeStyles = useMemo(() => {
@@ -99,13 +99,14 @@ function useFabVariantStyles(themeColor, variant, elevation = 0) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const variantStyles = useMemo(() => {
+    const isDark = theme.mode === "dark";
     const variantMap = {
       solid: {
-        backgroundColor: colorScheme.main,
+        backgroundColor: isDark ? colorScheme.background : colorScheme.main,
         borderWidth: 0
       },
       flat: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: isDark ? withOpacity(colorScheme.background, 0.5) : colorScheme.background,
         borderWidth: 0
       },
       outlined: {
@@ -130,11 +131,12 @@ function useFabIconColor(themeColor, variant) {
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const iconColor = useMemo(() => {
+    const isDark = theme.mode === "dark";
     if (variant === "solid") {
-      return colorScheme.foreground;
+      return isDark ? colorScheme.main : colorScheme.foreground;
     }
     return colorScheme.main;
-  }, [variant, colorScheme]);
+  }, [variant, colorScheme, theme]);
   return { iconColor };
 }
 function useFabRadiusValue(radius, fallback) {

package/dist/fab/index.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
+var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
 require('../chunk-FBTBWI3P.cjs');
 require('../chunk-56RPWZD2.cjs');
 require('../chunk-RZJFCDFS.cjs');
 
 
-exports.Fab = _chunkXQED3KRWcjs.Fab;
+exports.Fab = _chunkHYL4EU3Ycjs.Fab;

package/dist/fab/index.js

@@ -1,6 +1,6 @@
 import {
   Fab
-} from "../chunk-UVI56OO5.js";
+} from "../chunk-WGWXGIZ3.js";
 import "../chunk-J3BOFXIH.js";
 import "../chunk-SHBDANQN.js";
 import "../chunk-LVNBYERF.js";

package/dist/fab-menu/index.cjs

@@ -1,6 +1,6 @@
 "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; }
 
-var _chunkXQED3KRWcjs = require('../chunk-XQED3KRW.cjs');
+var _chunkHYL4EU3Ycjs = require('../chunk-HYL4EU3Y.cjs');
 require('../chunk-FBTBWI3P.cjs');
 require('../chunk-56RPWZD2.cjs');
 
@@ -209,7 +209,7 @@ var FabMenu = ({
       }
     },
     /* @__PURE__ */ _react2.default.createElement(
-      _chunkXQED3KRWcjs.Fab,
+      _chunkHYL4EU3Ycjs.Fab,
       {
         icon: currentIcon,
         label,

package/dist/fab-menu/index.js

@@ -1,6 +1,6 @@
 import {
   Fab
-} from "../chunk-UVI56OO5.js";
+} from "../chunk-WGWXGIZ3.js";
 import "../chunk-J3BOFXIH.js";
 import "../chunk-SHBDANQN.js";
 import {

package/dist/segment-button/index.cjs

@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: colorScheme.background,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       },
       light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: `${colorScheme.background}95`,
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       }
     };

package/dist/segment-button/index.js

@@ -51,7 +51,7 @@ var styles = StyleSheet.create({
 
 // src/components/segment-button/segment-button.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
+import { getSafeThemeColor, withOpacity, withPaletteNumber } from "@xaui/core";
 function useSegmentSizeStyles(size) {
   const theme = useXUITheme();
   return useMemo(() => {
@@ -108,9 +108,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: colorScheme.background,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: withOpacity(colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       },
       light: {
@@ -126,9 +126,9 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBackground: `${colorScheme.background}95`,
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: selectedBackgroundColor,
+        selectedBackground: withOpacity(colorScheme.main, 0.2),
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.main,
         unselectedTextColor: colorScheme.main
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",