@xaui/native 0.1.4 → 0.2.0

package/dist/datepicker/index.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/datepicker/datepicker.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -13,13 +13,13 @@ var _reactnative = require('react-native');
 var _core = require('@xaui/core');
 var _palette = require('@xaui/core/palette');
 var useDatePickerColorScheme = (themeColor) => {
-  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 { theme, colorScheme };
 };
 var useDatePickerSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -55,7 +55,7 @@ var useDatePickerSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useDatePickerRadiusStyles = (radius) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const radii = {
       none: theme.borderRadius.none,
@@ -71,28 +71,23 @@ var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
   return _react.useMemo.call(void 0, () => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+    if (variant === "bordered" && themeColor === "default") {
       borderColor = _palette.colors.gray[300];
     }
     const variantStyles = {
-      outlined: {
+      bordered: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
         borderColor
       },
-      flat: {
-        backgroundColor: colorScheme.background,
+      colored: {
+        backgroundColor: _core.withOpacity.call(void 0, 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,
@@ -118,7 +113,7 @@ var useDatePickerLabelStyle = (themeColor, isInvalid, labelSize) => {
   }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
 };
 var useDatePickerHelperColor = (isInvalid) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     if (isInvalid) {
       return theme.colors.danger.main;
@@ -771,11 +766,11 @@ var AnimatedDayCell = ({
   themeColor,
   onSelectDay
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = _nullishCoalesce(theme.colors[themeColor], () => ( theme.colors.primary));
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const scaleAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(isSelected ? 1 : 0)).current;
   _react.useEffect.call(void 0, () => {
     if (isSelected) {
@@ -855,7 +850,7 @@ var DatePickerDialogCalendar = ({
   onPreviousMonth,
   onNextMonth
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const swipeHandledRef = _react.useRef.call(void 0, false);
   const weekdays = _react.useMemo.call(void 0, 
     () => getWeekdayNames(locale, firstDayOfWeek),
@@ -948,7 +943,7 @@ var DatePickerDialogHeader = ({
   onNextMonth,
   onToggleYearPicker
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = _nullishCoalesce(theme.colors[themeColor], () => ( theme.colors.primary));
   const dateText = _react.useMemo.call(void 0, () => {
     if (!selectedDate) return "---";
@@ -958,7 +953,7 @@ var DatePickerDialogHeader = ({
     const month = getMonthName(viewDate.getMonth(), locale);
     return `${month} ${viewDate.getFullYear()}`;
   }, [viewDate, locale]);
-  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles2.headerLabel, { color: colorScheme.foreground }] }, selectDateLabel), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.headerDateRow }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles2.headerDate, { color: colorScheme.foreground }] }, dateText), selectedDate ? /* @__PURE__ */ _react2.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles2.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles2.headerLabel, { color: colorScheme.onMain }] }, selectDateLabel), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.headerDateRow }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles2.headerDate, { color: colorScheme.onMain }] }, dateText), selectedDate ? /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
       onPress: onClearValue,
@@ -966,7 +961,7 @@ var DatePickerDialogHeader = ({
       accessibilityLabel: "Clear date",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ _react2.default.createElement(_close.CloseIcon, { size: 20, color: colorScheme.foreground })
+    /* @__PURE__ */ _react2.default.createElement(_close.CloseIcon, { size: 20, color: colorScheme.onMain })
   ) : null)), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles2.navigationRow }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
@@ -1002,11 +997,11 @@ var DatePickerDialogHeader = ({
 
 
 var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = _nullishCoalesce(theme.colors[themeColor], () => ( theme.colors.primary));
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const months = _react.useMemo.call(void 0, () => getMonthNames(locale), [locale]);
   const currentMonth = viewDate.getMonth();
   const groupAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
@@ -1076,11 +1071,11 @@ var NUM_COLUMNS = 4;
 var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSelectYear }) => {
   const listRef = _react.useRef.call(void 0, null);
   const groupAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const colorScheme = _nullishCoalesce(theme.colors[themeColor], () => ( theme.colors.primary));
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const years = _react.useMemo.call(void 0, () => getYearRange(minDate, maxDate), [minDate, maxDate]);
   const currentYear = viewDate.getFullYear();
   const initialIndex = _react.useMemo.call(void 0, () => {
@@ -1186,7 +1181,7 @@ var DatePickerDialog = ({
   onClearValue,
   onClose
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const { width: screenWidth, height: screenHeight } = _reactnative.useWindowDimensions.call(void 0, );
   const fadeAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
   const slideAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
@@ -1355,7 +1350,7 @@ var DatePickerDialog = ({
         ));
     }
   };
-  return /* @__PURE__ */ _react2.default.createElement(_chunkRZJFCDFScjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnativegesturehandler.GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: overlayStyle }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ _react2.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(_chunk7UFBLUMVcjs.Portal, null, /* @__PURE__ */ _react2.default.createElement(_reactnativegesturehandler.GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: overlayStyle }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
       style: { flex: 1 },
@@ -1419,6 +1414,7 @@ var DatePickerTrigger = ({
   hasValue,
   displayValue,
   sizeStyles,
+  variant,
   radiusStyles,
   variantStyles,
   theme,
@@ -1434,6 +1430,7 @@ var DatePickerTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
+  const horizontalPadding = variant === "light" || variant === "underlined" ? 0 : sizeStyles.paddingHorizontal;
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,
     {
@@ -1445,10 +1442,10 @@ var DatePickerTrigger = ({
         styles.trigger,
         {
           minHeight: sizeStyles.minHeight,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
+          paddingHorizontal: horizontalPadding,
           paddingVertical: sizeStyles.paddingVertical
         },
-        radiusStyles,
+        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
         variantStyles,
         isDisabled && styles.disabled,
         style
@@ -1492,7 +1489,7 @@ var DatePicker = ({
   minDate,
   maxDate,
   firstDayOfWeek: firstDayOfWeekProp,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",
@@ -1512,7 +1509,7 @@ var DatePicker = ({
   onClose,
   onOpenChange
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const { selectedDate, updateDate } = useDatePickerState({
     value,
     defaultValue,
@@ -1576,6 +1573,7 @@ var DatePicker = ({
       hasValue: !!selectedDate,
       displayValue,
       sizeStyles,
+      variant,
       radiusStyles,
       variantStyles,
       theme,

package/dist/datepicker/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 DatePickerVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type DatePickerVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type DatePickerLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type DatePickerCustomAppearance = {
     container?: ViewStyle;

package/dist/datepicker/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 DatePickerVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type DatePickerVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type DatePickerLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type DatePickerCustomAppearance = {
     container?: ViewStyle;

package/dist/datepicker/index.js

@@ -2,7 +2,7 @@ import "../chunk-SHBDANQN.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/datepicker/datepicker.tsx
 import React7, { useCallback as useCallback5, useMemo as useMemo6, useRef as useRef6 } from "react";
@@ -10,7 +10,7 @@ import { Text as Text7, View as View7 } from "react-native";
 
 // src/components/datepicker/datepicker.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 import { colors } from "@xaui/core/palette";
 var useDatePickerColorScheme = (themeColor) => {
   const theme = useXUITheme();
@@ -71,28 +71,23 @@ var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useDatePickerColorScheme(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 variantStyles = {
-      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,
@@ -775,7 +770,7 @@ var AnimatedDayCell = ({
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const scaleAnim = useRef2(new Animated2.Value(isSelected ? 1 : 0)).current;
   useEffect2(() => {
     if (isSelected) {
@@ -958,7 +953,7 @@ var DatePickerDialogHeader = ({
     const month = getMonthName(viewDate.getMonth(), locale);
     return `${month} ${viewDate.getFullYear()}`;
   }, [viewDate, locale]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View2, { style: [styles2.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerLabel, { color: colorScheme.foreground }] }, selectDateLabel), /* @__PURE__ */ React2.createElement(View2, { style: styles2.headerDateRow }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerDate, { color: colorScheme.foreground }] }, dateText), selectedDate ? /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View2, { style: [styles2.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerLabel, { color: colorScheme.onMain }] }, selectDateLabel), /* @__PURE__ */ React2.createElement(View2, { style: styles2.headerDateRow }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerDate, { color: colorScheme.onMain }] }, dateText), selectedDate ? /* @__PURE__ */ React2.createElement(
     Pressable2,
     {
       onPress: onClearValue,
@@ -966,7 +961,7 @@ var DatePickerDialogHeader = ({
       accessibilityLabel: "Clear date",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ React2.createElement(CloseIcon, { size: 20, color: colorScheme.foreground })
+    /* @__PURE__ */ React2.createElement(CloseIcon, { size: 20, color: colorScheme.onMain })
   ) : null)), /* @__PURE__ */ React2.createElement(View2, { style: styles2.navigationRow }, /* @__PURE__ */ React2.createElement(
     Pressable2,
     {
@@ -1006,7 +1001,7 @@ var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const months = useMemo4(() => getMonthNames(locale), [locale]);
   const currentMonth = viewDate.getMonth();
   const groupAnim = useRef3(new Animated3.Value(0)).current;
@@ -1080,7 +1075,7 @@ var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSe
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
+  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
   const years = useMemo5(() => getYearRange(minDate, maxDate), [minDate, maxDate]);
   const currentYear = viewDate.getFullYear();
   const initialIndex = useMemo5(() => {
@@ -1419,6 +1414,7 @@ var DatePickerTrigger = ({
   hasValue,
   displayValue,
   sizeStyles,
+  variant,
   radiusStyles,
   variantStyles,
   theme,
@@ -1434,6 +1430,7 @@ var DatePickerTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
+  const horizontalPadding = variant === "light" || variant === "underlined" ? 0 : sizeStyles.paddingHorizontal;
   return /* @__PURE__ */ React6.createElement(
     Pressable6,
     {
@@ -1445,10 +1442,10 @@ var DatePickerTrigger = ({
         styles.trigger,
         {
           minHeight: sizeStyles.minHeight,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
+          paddingHorizontal: horizontalPadding,
           paddingVertical: sizeStyles.paddingVertical
         },
-        radiusStyles,
+        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
         variantStyles,
         isDisabled && styles.disabled,
         style
@@ -1492,7 +1489,7 @@ var DatePicker = ({
   minDate,
   maxDate,
   firstDayOfWeek: firstDayOfWeekProp,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",
@@ -1576,6 +1573,7 @@ var DatePicker = ({
       hasValue: !!selectedDate,
       displayValue,
       sizeStyles,
+      variant,
       radiusStyles,
       variantStyles,
       theme,

package/dist/dialog/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; }
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/dialog/dialog.tsx
 
@@ -175,8 +175,8 @@ var Dialog = ({
   style,
   customAppearance
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const [shouldRender, setShouldRender] = _react.useState.call(void 0, isOpen);
   const openRef = _react.useRef.call(void 0, isOpen);
   const shouldAnimate = !disableAnimation && animationType !== "none";
@@ -342,7 +342,7 @@ var DialogHeader = ({
   onClose,
   style
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const { onClose: contextClose, customAppearance } = _react.useContext.call(void 0, DialogContext);
   const close = _nullishCoalesce(onClose, () => ( contextClose));
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.header, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.header]), style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.headerContent }, resolveChildrenContent(children, [
@@ -361,7 +361,7 @@ var DialogHeader = ({
   ));
 };
 var DialogBody = ({ children, style }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const { customAppearance } = _react.useContext.call(void 0, DialogContext);
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.body, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.body]), style] }, resolveChildrenContent(children, [
     styles.bodyText,

package/dist/dialog/index.js

@@ -1,7 +1,7 @@
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/dialog/dialog.tsx
 import React, {

package/dist/divider/index.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkX5KNZ6YJcjs = require('../chunk-X5KNZ6YJ.cjs');
+var _chunkDJ4Q37UTcjs = require('../chunk-DJ4Q37UT.cjs');
 require('../chunk-56RPWZD2.cjs');
-require('../chunk-RZJFCDFS.cjs');
+require('../chunk-7UFBLUMV.cjs');
 
 
-exports.Divider = _chunkX5KNZ6YJcjs.Divider;
+exports.Divider = _chunkDJ4Q37UTcjs.Divider;

package/dist/divider/index.js

@@ -1,8 +1,8 @@
 import {
   Divider
-} from "../chunk-2JKWVIPB.js";
+} from "../chunk-ZY7IUTAT.js";
 import "../chunk-SHBDANQN.js";
-import "../chunk-LVNBYERF.js";
+import "../chunk-RBSA4NH4.js";
 export {
   Divider
 };

package/dist/drawer/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/drawer/drawer.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -11,13 +11,13 @@ var _reactnative = require('react-native');
 
 var _core = require('@xaui/core');
 var useDrawerStyles = (themeColor, position, width, height) => {
-  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 backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background;
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
+    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container;
     const sizeStyle = position === "left" || position === "right" ? { width } : { height };
     return {
       backgroundColor,

package/dist/drawer/index.js

@@ -1,7 +1,7 @@
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/drawer/drawer.tsx
 import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";
@@ -16,8 +16,8 @@ var useDrawerStyles = (themeColor, position, width, height) => {
     const safeThemeColor = getSafeThemeColor(themeColor);
     const colorScheme = theme.colors[safeThemeColor];
     const isDefaultThemeColor = safeThemeColor === "default";
-    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
-    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background;
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
+    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container;
     const sizeStyle = position === "left" || position === "right" ? { width } : { height };
     return {
       backgroundColor,

package/dist/expansion-panel/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 _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 _chunkX5KNZ6YJcjs = require('../chunk-X5KNZ6YJ.cjs');
+var _chunkDJ4Q37UTcjs = require('../chunk-DJ4Q37UT.cjs');
 require('../chunk-56RPWZD2.cjs');
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/expansion-panel/expansion-panel.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -30,8 +30,8 @@ var useExpansionPanelStyles = ({
   variant,
   fullWidth
 }) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
-  const palette2 = _chunkRZJFCDFScjs.useXUIPalette.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
+  const palette2 = _chunk7UFBLUMVcjs.useXUIPalette.call(void 0, );
   const containerStyles = _react.useMemo.call(void 0, () => {
     const base = {};
     if (fullWidth) {
@@ -213,12 +213,12 @@ var useExpansionPanelItemAnimation = (isExpanded, disableAnimation) => {
   };
 };
 var useBaseStyles = (variant, isDisabled) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const baseStyles = _react.useMemo.call(void 0, () => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = _core.withOpacity.call(void 0, theme.colors.default.background, 0.5);
+      base.backgroundColor = _core.withOpacity.call(void 0, theme.colors.default.container, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {
@@ -232,7 +232,7 @@ var useBaseStyles = (variant, isDisabled) => {
   return baseStyles;
 };
 var useTriggerStyles = (variant, isCompact) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const triggerStyles = _react.useMemo.call(void 0, () => {
     const trigger = {
       flexDirection: "row",
@@ -248,7 +248,7 @@ var useTriggerStyles = (variant, isCompact) => {
   return triggerStyles;
 };
 var useTitleTextStyle = (isCompact) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const titleTextStyle = _react.useMemo.call(void 0, 
     () => ({
       fontSize: isCompact ? theme.fontSizes.md : theme.fontSizes.lg,
@@ -260,7 +260,7 @@ var useTitleTextStyle = (isCompact) => {
   return titleTextStyle;
 };
 var useSubtitleTextStyle = () => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const subtitleTextStyle = _react.useMemo.call(void 0, 
     () => ({
       fontSize: theme.fontSizes.sm,
@@ -272,7 +272,7 @@ var useSubtitleTextStyle = () => {
   return subtitleTextStyle;
 };
 var useContentContainerStyle = (isCompact, variant) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const contentContainerStyle = _react.useMemo.call(void 0, 
     () => ({
       paddingBottom: isCompact ? theme.spacing.xs : theme.spacing.sm,
@@ -283,7 +283,7 @@ var useContentContainerStyle = (isCompact, variant) => {
   return contentContainerStyle;
 };
 var useForegroundColor = () => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return theme.colors.foreground;
 };
 
@@ -432,7 +432,7 @@ var ExpansionPanel = (props) => {
       _react2.default.isValidElement(child) ? normalizeElementKey(child.key) : void 0,
       index
     );
-    return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { key: resolvedChildKey, style: _optionalChain([customAppearance, 'optionalAccess', _13 => _13.item]) }, isExpansionPanelItem(child) ? _react2.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ _react2.default.createElement(_chunkX5KNZ6YJcjs.Divider, { color: dividerColor, size: 1 }));
+    return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { key: resolvedChildKey, style: _optionalChain([customAppearance, 'optionalAccess', _13 => _13.item]) }, isExpansionPanelItem(child) ? _react2.default.cloneElement(child, { itemKey: resolvedChildKey }) : child, showBottomDivider && /* @__PURE__ */ _react2.default.createElement(_chunkDJ4Q37UTcjs.Divider, { color: dividerColor, size: 1 }));
   })));
 };
 

package/dist/expansion-panel/index.js

@@ -1,11 +1,11 @@
 import {
   Divider
-} from "../chunk-2JKWVIPB.js";
+} from "../chunk-ZY7IUTAT.js";
 import "../chunk-SHBDANQN.js";
 import {
   useXUIPalette,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/expansion-panel/expansion-panel.tsx
 import React4 from "react";
@@ -218,7 +218,7 @@ var useBaseStyles = (variant, isDisabled) => {
     const base = { overflow: "hidden" };
     if (variant === "splitted") {
       base.paddingHorizontal = theme.spacing.md;
-      base.backgroundColor = withOpacity(theme.colors.default.background, 0.5);
+      base.backgroundColor = withOpacity(theme.colors.default.container, 0.5);
       base.borderRadius = theme.borderRadius.md;
       base.marginBottom = theme.spacing.xs;
     } else if (variant === "bordered") {

package/dist/fab/index.cjs

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

package/dist/fab/index.js

@@ -1,9 +1,9 @@
 import {
   Fab
-} from "../chunk-WGWXGIZ3.js";
-import "../chunk-J3BOFXIH.js";
+} from "../chunk-UU4HHBDN.js";
+import "../chunk-VSZEXOUN.js";
 import "../chunk-SHBDANQN.js";
-import "../chunk-LVNBYERF.js";
+import "../chunk-RBSA4NH4.js";
 export {
   Fab
 };