@xaui/native 0.1.4 → 0.2.0

package/dist/card/index.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/card/card.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -59,20 +59,20 @@ var styles = _reactnative.StyleSheet.create({
 
 var _core = require('@xaui/core');
 var useCardContainerStyles = (themeColor, isBlurred) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
     const colorScheme = theme.colors[safeThemeColor];
     const isDefaultThemeColor = safeThemeColor === "default";
-    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
     return {
-      backgroundColor: isBlurred ? theme.mode === "dark" ? "rgba(24, 24, 27, 0.82)" : "rgba(255, 255, 255, 0.82)" : isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background,
+      backgroundColor: isBlurred ? theme.mode === "dark" ? "rgba(24, 24, 27, 0.82)" : "rgba(255, 255, 255, 0.82)" : isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container,
       borderColor: _core.withOpacity.call(void 0, colorScheme.main, 0.05)
     };
   }, [isBlurred, theme, themeColor]);
 };
 var useCardElevationStyles = (elevation = 0) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
     return {
@@ -82,7 +82,7 @@ var useCardElevationStyles = (elevation = 0) => {
   }, [elevation, theme]);
 };
 var useCardTextStyles = (themeColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
     const colorScheme = theme.colors[safeThemeColor];
@@ -93,7 +93,7 @@ var useCardTextStyles = (themeColor) => {
   }, [theme, themeColor]);
 };
 var useCardFooterStyles = (themeColor, isFooterBlurred) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
     const colorScheme = theme.colors[safeThemeColor];
@@ -136,7 +136,7 @@ var Card = ({
 }) => {
   const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
   const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const containerStyles = useCardContainerStyles(themeColor, isBlurred);
   const elevationStyles = useCardElevationStyles(elevation);
   const contextValue = _react2.default.useMemo(

package/dist/card/index.js

@@ -2,7 +2,7 @@ import "../chunk-SHBDANQN.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/card/card.tsx
 import React from "react";
@@ -64,9 +64,9 @@ var useCardContainerStyles = (themeColor, isBlurred) => {
     const safeThemeColor = getSafeThemeColor(themeColor);
     const colorScheme = theme.colors[safeThemeColor];
     const isDefaultThemeColor = safeThemeColor === "default";
-    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
     return {
-      backgroundColor: isBlurred ? theme.mode === "dark" ? "rgba(24, 24, 27, 0.82)" : "rgba(255, 255, 255, 0.82)" : isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background,
+      backgroundColor: isBlurred ? theme.mode === "dark" ? "rgba(24, 24, 27, 0.82)" : "rgba(255, 255, 255, 0.82)" : isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container,
       borderColor: withOpacity(colorScheme.main, 0.05)
     };
   }, [isBlurred, theme, themeColor]);

package/dist/carousel/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 _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/carousel/carousel.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -253,7 +253,7 @@ function Carousel({
   const onActiveItemChangeRef = _react.useRef.call(void 0, onActiveItemChange);
   onActiveItemChangeRef.current = onActiveItemChange;
   const scrollX = _reactnativereanimated.useSharedValue.call(void 0, 0);
-  const { borderRadius } = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const { borderRadius } = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const defaultSpacing = layout === "multi-browse" ? DEFAULT_ITEM_SPACING_MULTI_BROWSE : DEFAULT_ITEM_SPACING;
   const resolvedSpacing = _nullishCoalesce(itemSpacing, () => ( defaultSpacing));
   const isFullScreen = layout === "full-screen";

package/dist/carousel/index.js

@@ -1,6 +1,6 @@
 import {
   useBorderRadiusStyles
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/carousel/carousel.tsx
 import React3, { useState, useRef, useCallback, useEffect } from "react";

package/dist/checkbox/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/checkbox/checkbox.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -158,7 +158,7 @@ function CheckboxIcon({
 
 var _core = require('@xaui/core');
 function useSizeStyles(size, variant) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const sizeStyles = _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -187,7 +187,7 @@ function useSizeStyles(size, variant) {
   return sizeStyles;
 }
 function useRadiusStyles(radius) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const radiusStyles = _react.useMemo.call(void 0, () => {
     const radii = {
       none: theme.borderRadius.none,
@@ -201,13 +201,13 @@ function useRadiusStyles(radius) {
   return radiusStyles;
 }
 function useCheckmarkColors(themeColor, variant, isActive) {
-  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 checkmarkColors = _react.useMemo.call(void 0, () => {
     if (variant === "filled") {
       return {
-        checked: colorScheme.foreground,
+        checked: colorScheme.onMain,
         unchecked: void 0
       };
     }
@@ -219,25 +219,25 @@ function useCheckmarkColors(themeColor, variant, isActive) {
     }
     if (themeColor !== "default") {
       return {
-        checked: colorScheme.foreground,
-        unchecked: colorScheme.background
+        checked: colorScheme.onMain,
+        unchecked: colorScheme.container
       };
     }
     return {
       checked: theme.colors.foreground,
-      unchecked: colorScheme.background
+      unchecked: colorScheme.container
     };
   }, [variant, colorScheme, isActive, themeColor, theme.colors]);
   return checkmarkColors;
 }
 function useVariantStyles(themeColor, variant, isActive) {
-  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, () => {
     if (variant === "filled") {
       return {
-        backgroundColor: "transparent",
+        backgroundColor: isActive ? colorScheme.main : "transparent",
         borderWidth: isActive ? 0 : theme.borderWidth.md,
         borderColor: isActive ? "transparent" : colorScheme.main
       };
@@ -318,7 +318,7 @@ var Checkbox = ({
   style,
   onValueChange
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
   const isControlled = typeof isCheckedProp === "boolean";
   const [internalChecked, setInternalChecked] = _react.useState.call(void 0, _nullishCoalesce(isCheckedProp, () => ( false)));

package/dist/checkbox/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/checkbox/checkbox.tsx
 import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
@@ -207,7 +207,7 @@ function useCheckmarkColors(themeColor, variant, isActive) {
   const checkmarkColors = useMemo(() => {
     if (variant === "filled") {
       return {
-        checked: colorScheme.foreground,
+        checked: colorScheme.onMain,
         unchecked: void 0
       };
     }
@@ -219,13 +219,13 @@ function useCheckmarkColors(themeColor, variant, isActive) {
     }
     if (themeColor !== "default") {
       return {
-        checked: colorScheme.foreground,
-        unchecked: colorScheme.background
+        checked: colorScheme.onMain,
+        unchecked: colorScheme.container
       };
     }
     return {
       checked: theme.colors.foreground,
-      unchecked: colorScheme.background
+      unchecked: colorScheme.container
     };
   }, [variant, colorScheme, isActive, themeColor, theme.colors]);
   return checkmarkColors;
@@ -237,7 +237,7 @@ function useVariantStyles(themeColor, variant, isActive) {
   const variantStyles = useMemo(() => {
     if (variant === "filled") {
       return {
-        backgroundColor: "transparent",
+        backgroundColor: isActive ? colorScheme.main : "transparent",
         borderWidth: isActive ? 0 : theme.borderWidth.md,
         borderColor: isActive ? "transparent" : colorScheme.main
       };

package/dist/chip/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/chip/chip.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -78,7 +78,7 @@ function useChipCloseSize(size) {
   return _react.useMemo.call(void 0, () => closeSizeMap[size], [size]);
 }
 function useChipRadiusStyles(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 };
@@ -87,7 +87,7 @@ function useChipRadiusStyles(radius, height) {
   }, [height, radius, theme.borderRadius]);
 }
 function useChipVariantStyles(themeColor, variant) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const safeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeColor];
   return _react.useMemo.call(void 0, () => {
@@ -106,33 +106,33 @@ function useChipVariantStyles(themeColor, variant) {
         };
       case "flat":
         return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main
+          backgroundColor: colorScheme.container,
+          color: colorScheme.onContainer
         };
       case "faded":
         return {
-          backgroundColor: _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,
           borderWidth: 1,
           borderColor: _core.withOpacity.call(void 0, colorScheme.main, 0.3)
         };
       case "shadow":
         return {
           backgroundColor: colorScheme.main,
-          color: colorScheme.foreground,
+          color: colorScheme.onMain,
           shadow: theme.shadows.sm
         };
       case "dot":
         return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main,
+          backgroundColor: colorScheme.container,
+          color: colorScheme.onContainer,
           dotColor: colorScheme.main
         };
       case "solid":
       default:
         return {
           backgroundColor: colorScheme.main,
-          color: colorScheme.foreground
+          color: colorScheme.onMain
         };
     }
   }, [colorScheme, theme, variant]);

package/dist/chip/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/chip/chip.tsx
 import React from "react";
@@ -106,33 +106,33 @@ function useChipVariantStyles(themeColor, variant) {
         };
       case "flat":
         return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main
+          backgroundColor: colorScheme.container,
+          color: colorScheme.onContainer
         };
       case "faded":
         return {
-          backgroundColor: withOpacity(colorScheme.background, 0.7),
-          color: colorScheme.main,
+          backgroundColor: withOpacity(colorScheme.container, 0.7),
+          color: colorScheme.onContainer,
           borderWidth: 1,
           borderColor: withOpacity(colorScheme.main, 0.3)
         };
       case "shadow":
         return {
           backgroundColor: colorScheme.main,
-          color: colorScheme.foreground,
+          color: colorScheme.onMain,
           shadow: theme.shadows.sm
         };
       case "dot":
         return {
-          backgroundColor: colorScheme.background,
-          color: colorScheme.main,
+          backgroundColor: colorScheme.container,
+          color: colorScheme.onContainer,
           dotColor: colorScheme.main
         };
       case "solid":
       default:
         return {
           backgroundColor: colorScheme.main,
-          color: colorScheme.foreground
+          color: colorScheme.onMain
         };
     }
   }, [colorScheme, theme, variant]);

package/dist/{chunk-K24VDBNN.js → chunk-4JFWQ5XT.js}

@@ -1,7 +1,7 @@
 import {
   Portal,
   useXUITheme
-} from "./chunk-LVNBYERF.js";
+} from "./chunk-RBSA4NH4.js";
 
 // src/components/bottom-sheet/bottom-sheet.tsx
 import React from "react";
@@ -238,7 +238,7 @@ var useBottomSheetStyles = (themeColor, radius) => {
   const colorScheme = theme.colors[safeThemeColor];
   const sheetStyles = useMemo(
     () => ({
-      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      backgroundColor: colorScheme.container ?? theme.colors.background ?? "#ffffff",
       borderTopLeftRadius: theme.borderRadius[radius],
       borderTopRightRadius: theme.borderRadius[radius]
     }),

package/dist/{chunk-RZJFCDFS.cjs → chunk-7UFBLUMV.cjs}

@@ -1,4 +1,4 @@
-"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(); } }// src/core/portal/portal.tsx
+"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; }// src/core/portal/portal.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // src/core/portal/portal-context.ts
@@ -56,41 +56,35 @@ var PortalHost = ({ children }) => {
 var _theme = require('@xaui/core/theme');
 var _palette = require('@xaui/core/palette');
 var XUIThemeContext = _react.createContext.call(void 0, null);
-function XUIProvider({
-  children,
-  theme: lightTheme,
-  darkTheme
-}) {
+function XUIProvider({ children, theme }) {
   const colorScheme = _nullishCoalesce(_reactnative.useColorScheme.call(void 0, ), () => ( "light"));
-  const theme = _react2.default.useMemo(() => {
-    if (!darkTheme && !lightTheme) return _theme.defaultTheme;
-    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
-    if (!activeTheme) return _theme.defaultTheme;
+  const appTheme = _react2.default.useMemo(() => {
+    const isDarkMode = colorScheme === "dark";
+    if (!theme) return isDarkMode ? _theme.defaultDarkTheme : _theme.defaultTheme;
     return {
       ..._theme.defaultTheme,
-      ...activeTheme,
-      mode,
+      ...theme,
+      mode: colorScheme,
       colors: {
         ..._theme.defaultTheme.colors,
-        ...activeTheme.colors
+        ..._optionalChain([theme, 'optionalAccess', _ => _.colors])
       },
       fontFamilies: {
         ..._theme.defaultTheme.fontFamilies,
-        ...activeTheme.fontFamilies
+        ..._optionalChain([theme, 'optionalAccess', _2 => _2.fontFamilies])
       },
       fontSizes: {
         ..._theme.defaultTheme.fontSizes,
-        ...activeTheme.fontSizes
+        ..._optionalChain([theme, 'optionalAccess', _3 => _3.fontSizes])
       },
       componentSizes: {
         ..._theme.defaultTheme.componentSizes,
-        ...activeTheme.componentSizes
+        ..._optionalChain([theme, 'optionalAccess', _4 => _4.componentSizes])
       },
       palette: _palette.colors
     };
-  }, [lightTheme, darkTheme, colorScheme]);
-  return /* @__PURE__ */ _react2.default.createElement(XUIThemeContext.Provider, { value: theme }, /* @__PURE__ */ _react2.default.createElement(PortalHost, null, children));
+  }, [colorScheme, theme]);
+  return /* @__PURE__ */ _react2.default.createElement(XUIThemeContext.Provider, { value: appTheme }, /* @__PURE__ */ _react2.default.createElement(PortalHost, null, children));
 }
 
 // src/core/theme-hooks.ts

package/dist/{chunk-M6A23KUM.js → chunk-A45TVXU5.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-LVNBYERF.js";
+} from "./chunk-RBSA4NH4.js";
 
 // src/components/input-trigger/input-trigger.tsx
 import React from "react";
@@ -63,6 +63,7 @@ var useInputTriggerVariantStyles = ({
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return useMemo(() => {
+    const isDark = theme.mode === "dark";
     const neutralBorder = withOpacity(theme.colors.foreground, 0.1);
     const textColor = isDisabled ? withOpacity(theme.colors.foreground, 0.55) : theme.colors.foreground;
     const placeholderColor = withOpacity(theme.colors.foreground, 0.45);
@@ -96,10 +97,9 @@ var useInputTriggerVariantStyles = ({
         helperColor
       };
     }
-    if (variant === "faded") {
+    if (variant === "light") {
       return {
         container: {
-          backgroundColor: withOpacity(colorScheme.background, 0.68),
           borderColor: isInvalid ? theme.colors.danger.main : "transparent",
           borderWidth: isInvalid ? theme.borderWidth.md : 0
         },
@@ -112,7 +112,7 @@ var useInputTriggerVariantStyles = ({
     }
     return {
       container: {
-        backgroundColor: colorScheme.background,
+        backgroundColor: withOpacity(colorScheme.container, isDark ? 0.25 : 0.4),
         borderColor: isInvalid ? withPaletteNumber(theme.colors.danger.main, 500) : "transparent",
         borderWidth: isInvalid ? theme.borderWidth.md : 0
       },
@@ -145,6 +145,26 @@ var styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center"
   },
+  fileTrigger: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  filePlusButton: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fileContent: {
+    textAlign: "center"
+  },
+  fileCustomContent: {
+    alignItems: "center"
+  },
+  fileSelectedContent: {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
   underlinedWrapper: {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
@@ -177,7 +197,7 @@ var InputTrigger = ({
   startContent,
   endContent,
   themeColor = "primary",
-  variant = "flat",
+  variant = "colored",
   size = "md",
   radius = "md",
   isDisabled = false,
@@ -309,5 +329,9 @@ var InputTrigger = ({
 };
 
 export {
+  useInputTriggerSizeStyles,
+  useInputTriggerRadiusStyles,
+  useInputTriggerVariantStyles,
+  styles,
   InputTrigger
 };

package/dist/{chunk-3XWF77Y3.cjs → chunk-BYWUAPC4.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; }
 
 
-var _chunkRZJFCDFScjs = require('./chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('./chunk-7UFBLUMV.cjs');
 
 // src/components/bottom-sheet/bottom-sheet.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -233,12 +233,12 @@ var useBottomSheetAnimation = ({
   };
 };
 var useBottomSheetStyles = (themeColor, radius) => {
-  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 sheetStyles = _react.useMemo.call(void 0, 
     () => ({
-      backgroundColor: _nullishCoalesce(_nullishCoalesce(colorScheme.background, () => ( theme.colors.background)), () => ( "#ffffff")),
+      backgroundColor: _nullishCoalesce(_nullishCoalesce(colorScheme.container, () => ( theme.colors.background)), () => ( "#ffffff")),
       borderTopLeftRadius: theme.borderRadius[radius],
       borderTopRightRadius: theme.borderRadius[radius]
     }),
@@ -332,7 +332,7 @@ var BottomSheet = ({
       close();
     }
   };
-  return /* @__PURE__ */ _react2.default.createElement(_chunkRZJFCDFScjs.Portal, null, showBackdrop && /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ _react2.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(_chunk7UFBLUMVcjs.Portal, null, showBackdrop && /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Animated.View,
     {
       style: [

package/dist/{chunk-X5KNZ6YJ.cjs → chunk-DJ4Q37UT.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkRZJFCDFScjs = require('./chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('./chunk-7UFBLUMV.cjs');
 
 // src/components/divider/divider.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -25,7 +25,7 @@ var styles = _reactnative.StyleSheet.create({
 
 var _core = require('@xaui/core');
 var useDividerColor = (themeColor, customColor) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const dividerColor = _react.useMemo.call(void 0, () => {
     if (customColor) {
       return customColor;

package/dist/{chunk-LVNBYERF.js → chunk-RBSA4NH4.js}

@@ -53,44 +53,38 @@ var PortalHost = ({ children }) => {
 // src/core/theme-context.tsx
 import React3, { createContext as createContext2 } from "react";
 import { useColorScheme } from "react-native";
-import { defaultTheme } from "@xaui/core/theme";
+import { defaultDarkTheme, defaultTheme } from "@xaui/core/theme";
 import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext2(null);
-function XUIProvider({
-  children,
-  theme: lightTheme,
-  darkTheme
-}) {
+function XUIProvider({ children, theme }) {
   const colorScheme = useColorScheme() ?? "light";
-  const theme = React3.useMemo(() => {
-    if (!darkTheme && !lightTheme) return defaultTheme;
-    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    const mode = colorScheme === "dark" && darkTheme ? "dark" : "light";
-    if (!activeTheme) return defaultTheme;
+  const appTheme = React3.useMemo(() => {
+    const isDarkMode = colorScheme === "dark";
+    if (!theme) return isDarkMode ? defaultDarkTheme : defaultTheme;
     return {
       ...defaultTheme,
-      ...activeTheme,
-      mode,
+      ...theme,
+      mode: colorScheme,
       colors: {
         ...defaultTheme.colors,
-        ...activeTheme.colors
+        ...theme?.colors
       },
       fontFamilies: {
         ...defaultTheme.fontFamilies,
-        ...activeTheme.fontFamilies
+        ...theme?.fontFamilies
       },
       fontSizes: {
         ...defaultTheme.fontSizes,
-        ...activeTheme.fontSizes
+        ...theme?.fontSizes
       },
       componentSizes: {
         ...defaultTheme.componentSizes,
-        ...activeTheme.componentSizes
+        ...theme?.componentSizes
       },
       palette: colors
     };
-  }, [lightTheme, darkTheme, colorScheme]);
-  return /* @__PURE__ */ React3.createElement(XUIThemeContext.Provider, { value: theme }, /* @__PURE__ */ React3.createElement(PortalHost, null, children));
+  }, [colorScheme, theme]);
+  return /* @__PURE__ */ React3.createElement(XUIThemeContext.Provider, { value: appTheme }, /* @__PURE__ */ React3.createElement(PortalHost, null, children));
 }
 
 // src/core/theme-hooks.ts