@xaui/native 0.1.4 → 0.2.0

package/dist/refresh-control/index.js

@@ -0,0 +1,45 @@
+import "../chunk-SHBDANQN.js";
+import {
+  useXUITheme
+} from "../chunk-RBSA4NH4.js";
+
+// src/components/refresh-control/refresh-control.tsx
+import React from "react";
+import { RefreshControl as RNRefreshControl } from "react-native";
+var PullToRefresh = ({
+  refreshing,
+  onRefresh,
+  enabled = true,
+  themeColor = "primary",
+  color,
+  title,
+  titleColor,
+  progressViewOffset,
+  children,
+  refreshControlProps
+}) => {
+  const theme = useXUITheme();
+  const indicatorColor = color ?? theme.colors[themeColor].main;
+  const indicatorTitleColor = titleColor ?? theme.colors.foreground;
+  const refreshControl = /* @__PURE__ */ React.createElement(
+    RNRefreshControl,
+    {
+      refreshing,
+      onRefresh,
+      enabled,
+      colors: [indicatorColor],
+      tintColor: indicatorColor,
+      title,
+      titleColor: indicatorTitleColor,
+      progressViewOffset,
+      ...refreshControlProps
+    }
+  );
+  return React.cloneElement(children, {
+    refreshControl
+  });
+};
+PullToRefresh.displayName = "PullToRefresh";
+export {
+  PullToRefresh
+};

package/dist/segment-button/index.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/segment-button/segment-button.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -53,7 +53,7 @@ var styles = _reactnative.StyleSheet.create({
 
 var _core = require('@xaui/core');
 function useSegmentSizeStyles(size) {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -89,7 +89,7 @@ function useSegmentSizeStyles(size) {
   }, [size, theme]);
 }
 function useSegmentVariantStyles(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 selectedBackgroundColor = _core.withPaletteNumber.call(void 0, colorScheme.main, 400);
@@ -101,11 +101,11 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBorderColor: colorScheme.main,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.onMain,
         unselectedTextColor: colorScheme.main
       },
       flat: {
-        containerBackground: colorScheme.background,
+        containerBackground: colorScheme.container,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
         selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
@@ -119,11 +119,11 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBorderColor: "transparent",
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.onMain,
         unselectedTextColor: colorScheme.main
       },
       faded: {
-        containerBackground: `${colorScheme.background}95`,
+        containerBackground: _core.withOpacity.call(void 0, colorScheme.container, 0.58),
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
         selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
@@ -182,7 +182,7 @@ var SegmentButton = ({
     return selected ? [selected] : [];
   }, [selected]);
   const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
-  const radiusStyles = _chunkRZJFCDFScjs.useBorderRadiusStyles.call(void 0, radius);
+  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
   const toggleItem = _react.useCallback.call(void 0, 
     (key) => {
       let nextSelected;

package/dist/segment-button/index.js

@@ -2,7 +2,7 @@ import "../chunk-SHBDANQN.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/segment-button/segment-button.tsx
 import React, { useCallback, useMemo as useMemo2, useState } from "react";
@@ -101,11 +101,11 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBorderColor: colorScheme.main,
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.onMain,
         unselectedTextColor: colorScheme.main
       },
       flat: {
-        containerBackground: colorScheme.background,
+        containerBackground: colorScheme.container,
         containerBorderWidth: 0,
         containerBorderColor: "transparent",
         selectedBackground: withOpacity(colorScheme.main, 0.2),
@@ -119,11 +119,11 @@ function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
         containerBorderColor: "transparent",
         selectedBackground: selectedBackgroundColor,
         unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.foreground,
+        selectedTextColor: colorScheme.onMain,
         unselectedTextColor: colorScheme.main
       },
       faded: {
-        containerBackground: `${colorScheme.background}95`,
+        containerBackground: withOpacity(colorScheme.container, 0.58),
         containerBorderWidth: theme.borderWidth.md,
         containerBorderColor: `${colorScheme.main}90`,
         selectedBackground: withOpacity(colorScheme.main, 0.2),

package/dist/select/index.cjs

@@ -4,7 +4,7 @@ var _chunkDHSTKO3Kcjs = require('../chunk-DHSTKO3K.cjs');
 require('../chunk-56RPWZD2.cjs');
 
 
-var _chunkRZJFCDFScjs = require('../chunk-RZJFCDFS.cjs');
+var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
 
 // src/components/select/select.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -27,13 +27,13 @@ var SelectContext = _react.createContext.call(void 0, null);
 var _core = require('@xaui/core');
 var _palette = require('@xaui/core/palette');
 var useSelectColorScheme = (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 useSelectSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -69,7 +69,7 @@ var useSelectSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useSelectRadiusStyles = (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,
@@ -96,28 +96,23 @@ var useSelectVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useSelectColorScheme(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 styles3 = {
-      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,
@@ -143,7 +138,7 @@ var useSelectLabelStyle = (themeColor, isInvalid, labelSize) => {
   }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
 };
 var useSelectValueColor = (isInvalid, shouldShowPlaceholder) => {
-  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;
@@ -155,7 +150,7 @@ var useSelectValueColor = (isInvalid, shouldShowPlaceholder) => {
   }, [isInvalid, shouldShowPlaceholder, theme]);
 };
 var useSelectHelperColor = (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;
@@ -164,7 +159,7 @@ var useSelectHelperColor = (isInvalid) => {
   }, [isInvalid, theme]);
 };
 var useSelectSelectorColor = (isInvalid, shouldShowPlaceholder) => {
-  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;
@@ -236,13 +231,15 @@ var styles = _reactnative.StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.25)"
+    backgroundColor: "rgba(0, 0, 0, 0.70)",
+    justifyContent: "center",
+    alignItems: "center"
   },
   listbox: {
     overflow: "hidden"
   },
   listboxContent: {
-    flex: 1
+    minWidth: "100%"
   },
   dialogTitle: {
     fontWeight: "600",
@@ -334,7 +331,7 @@ var SelectTrigger = ({
       accessibilityState: { disabled: isDisabled, expanded: isOpen },
       style: [
         styles.trigger,
-        radiusStyles,
+        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
         variantStyles,
         {
           minHeight: sizeStyles.minHeight,
@@ -501,7 +498,7 @@ var Select = ({
   selectedKeys,
   disabledKeys,
   defaultSelectedKeys,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",
@@ -538,8 +535,9 @@ var Select = ({
     onSelectionChange,
     onClear
   });
-  const { triggerRef, triggerWidth, triggerPosition, handleTriggerLayout } = useSelectTriggerMeasurements(isOpen);
+  const { triggerRef, handleTriggerLayout } = useSelectTriggerMeasurements(isOpen);
   const { animationOpacity, animationScale } = useSelectListboxAnimation(isOpen);
+  const { width: screenWidth, height: screenHeight } = _reactnative.useWindowDimensions.call(void 0, );
   const disabledKeySet = _react.useMemo.call(void 0, () => {
     return new Set(_nullishCoalesce(disabledKeys, () => ( [])));
   }, [disabledKeys]);
@@ -564,7 +562,7 @@ var Select = ({
   }, [currentSelectedKeys, items]);
   const displayValue = selectedLabels.length ? selectedLabels.join(", ") : placeholder;
   const shouldShowPlaceholder = selectedLabels.length === 0;
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   const sizeStyles = useSelectSizeStyles(size);
   const { radiusStyles, listboxRadius } = useSelectRadiusStyles(radius);
   const variantStyles = useSelectVariantStyles(themeColor, variant, isInvalid);
@@ -607,18 +605,8 @@ var Select = ({
   const dialogTitle = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
   const shouldShowHelper = Boolean(hint || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : hint;
-  const listboxWidth = fullWidth ? _nullishCoalesce(_nullishCoalesce(triggerWidth, () => ( _optionalChain([triggerPosition, 'optionalAccess', _8 => _8.width]))), () => ( 200)) : 280;
-  const screenWidth = _reactnative.Dimensions.get("window").width;
-  const listboxPosition = _react.useMemo.call(void 0, () => {
-    if (!triggerPosition) {
-      return { top: 0, left: 0 };
-    }
-    const listWidth = listboxWidth || 0;
-    const centeredLeft = triggerPosition.x + triggerPosition.width / 2 - listWidth / 2;
-    const left = Math.max(12, Math.min(centeredLeft, screenWidth - listWidth - 12));
-    const top = Math.max(12, triggerPosition.y);
-    return { top, left };
-  }, [triggerPosition, listboxWidth, screenWidth]);
+  const dialogWidth = screenWidth * 0.9;
+  const dialogMaxHeight = Math.min(screenHeight * 0.6, maxListboxHeight);
   const listItems = items.map((item) => {
     const itemProps = item.element.props;
     const itemDisabled = isDisabled || itemProps.isDisabled || disabledKeySet.has(item.key);
@@ -628,7 +616,7 @@ var Select = ({
         return;
       }
       handleItemSelection(item.key);
-      _optionalChain([itemProps, 'access', _9 => _9.onSelected, 'optionalCall', _10 => _10()]);
+      _optionalChain([itemProps, 'access', _8 => _8.onSelected, 'optionalCall', _9 => _9()]);
     };
     return _react2.default.cloneElement(item.element, {
       key: item.key,
@@ -682,11 +670,8 @@ var Select = ({
         style: [
           styles.listbox,
           {
-            width: listboxWidth,
-            maxHeight: maxListboxHeight,
-            position: "absolute",
-            top: listboxPosition.top,
-            left: listboxPosition.left,
+            width: dialogWidth,
+            maxHeight: dialogMaxHeight,
             borderRadius: listboxRadius,
             backgroundColor: theme.colors.background,
             opacity: animationOpacity,
@@ -699,18 +684,25 @@ var Select = ({
         _reactnative.Pressable,
         {
           onPress: (event) => event.stopPropagation(),
-          style: { flex: 1 }
+          style: { maxHeight: dialogMaxHeight }
         },
-        /* @__PURE__ */ _react2.default.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Text,
+        /* @__PURE__ */ _react2.default.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ _react2.default.createElement(
+          _reactnative.View,
           {
-            style: [
-              styles.dialogTitle,
-              { color: theme.colors.foreground }
-            ]
+            style: [styles.listboxContent, { maxHeight: dialogMaxHeight }]
           },
-          dialogTitle
-        ) : null, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems)))
+          dialogTitle ? /* @__PURE__ */ _react2.default.createElement(
+            _reactnative.Text,
+            {
+              style: [
+                styles.dialogTitle,
+                { color: theme.colors.foreground }
+              ]
+            },
+            dialogTitle
+          ) : null,
+          /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, { style: { maxHeight: dialogMaxHeight } }, listItems)
+        ))
       )
     ))
   ));
@@ -724,7 +716,7 @@ var Select = ({
 
 
 var useSelectItemSizeStyles = (size) => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     const sizes = {
       xs: {
@@ -756,18 +748,18 @@ var useSelectItemSizeStyles = (size) => {
   }, [size, theme]);
 };
 var useSelectItemBackgroundColor = (themeColor, isSelected) => {
-  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, () => {
     if (isSelected) {
-      return colorScheme.background;
+      return colorScheme.container;
     }
     return "transparent";
   }, [isSelected, colorScheme]);
 };
 var useSelectItemTextColors = () => {
-  const theme = _chunkRZJFCDFScjs.useXUITheme.call(void 0, );
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
   return _react.useMemo.call(void 0, () => {
     return {
       textColor: theme.colors.foreground,
@@ -776,7 +768,7 @@ var useSelectItemTextColors = () => {
   }, [theme]);
 };
 var useSelectItemCheckmarkColor = (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 _react.useMemo.call(void 0, () => {
@@ -826,9 +818,9 @@ var SelectItem = ({
   onSelected
 }) => {
   const context = _react.useContext.call(void 0, SelectContext);
-  const size = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _11 => _11.size]), () => ( defaultSize));
-  const themeColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _12 => _12.themeColor]), () => ( "default"));
-  const isItemDisabled = _optionalChain([context, 'optionalAccess', _13 => _13.isDisabled]) ? true : isDisabled;
+  const size = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _10 => _10.size]), () => ( defaultSize));
+  const themeColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _11 => _11.themeColor]), () => ( "default"));
+  const isItemDisabled = _optionalChain([context, 'optionalAccess', _12 => _12.isDisabled]) ? true : isDisabled;
   const sizeStyles = useSelectItemSizeStyles(size);
   const backgroundColor = useSelectItemBackgroundColor(themeColor, isSelected);
   const { textColor, descriptionColor } = useSelectItemTextColors();
@@ -837,7 +829,7 @@ var SelectItem = ({
     if (isItemDisabled || isReadOnly) {
       return;
     }
-    _optionalChain([onSelected, 'optionalCall', _14 => _14()]);
+    _optionalChain([onSelected, 'optionalCall', _13 => _13()]);
   };
   return /* @__PURE__ */ _react2.default.createElement(
     _reactnative.Pressable,

package/dist/select/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 SelectVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type SelectVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type SelectLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type SelectSelectionMode = 'single' | 'multiple';
 type SelectProps = {
@@ -29,7 +29,7 @@ type SelectProps = {
     defaultSelectedKeys?: string[];
     /**
      * Variant of the select trigger.
-     * @default 'flat'
+     * @default 'colored'
      */
     variant?: SelectVariant;
     /**

package/dist/select/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 SelectVariant = 'outlined' | 'flat' | 'light' | 'faded' | 'underlined';
+type SelectVariant = 'bordered' | 'colored' | 'light' | 'underlined';
 type SelectLabelPlacement = 'inside' | 'outside' | 'outside-left' | 'outside-top';
 type SelectSelectionMode = 'single' | 'multiple';
 type SelectProps = {
@@ -29,7 +29,7 @@ type SelectProps = {
     defaultSelectedKeys?: string[];
     /**
      * Variant of the select trigger.
-     * @default 'flat'
+     * @default 'colored'
      */
     variant?: SelectVariant;
     /**

package/dist/select/index.js

@@ -4,18 +4,18 @@ import {
 import "../chunk-SHBDANQN.js";
 import {
   useXUITheme
-} from "../chunk-LVNBYERF.js";
+} from "../chunk-RBSA4NH4.js";
 
 // src/components/select/select.tsx
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import {
   Animated as Animated3,
-  Dimensions,
   Modal,
   Pressable as Pressable2,
   ScrollView,
   Text as Text2,
-  View as View2
+  View as View2,
+  useWindowDimensions
 } from "react-native";
 
 // src/components/select/select-context.ts
@@ -24,7 +24,7 @@ var SelectContext = createContext(null);
 
 // src/components/select/select.hook.ts
 import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
 import { colors } from "@xaui/core/palette";
 var useSelectColorScheme = (themeColor) => {
   const theme = useXUITheme();
@@ -96,28 +96,23 @@ var useSelectVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useSelectColorScheme(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 styles3 = {
-      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,
@@ -236,13 +231,15 @@ var styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.25)"
+    backgroundColor: "rgba(0, 0, 0, 0.70)",
+    justifyContent: "center",
+    alignItems: "center"
   },
   listbox: {
     overflow: "hidden"
   },
   listboxContent: {
-    flex: 1
+    minWidth: "100%"
   },
   dialogTitle: {
     fontWeight: "600",
@@ -334,7 +331,7 @@ var SelectTrigger = ({
       accessibilityState: { disabled: isDisabled, expanded: isOpen },
       style: [
         styles.trigger,
-        radiusStyles,
+        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
         variantStyles,
         {
           minHeight: sizeStyles.minHeight,
@@ -501,7 +498,7 @@ var Select = ({
   selectedKeys,
   disabledKeys,
   defaultSelectedKeys,
-  variant = "flat",
+  variant = "colored",
   themeColor = "default",
   size = "md",
   radius = "md",
@@ -538,8 +535,9 @@ var Select = ({
     onSelectionChange,
     onClear
   });
-  const { triggerRef, triggerWidth, triggerPosition, handleTriggerLayout } = useSelectTriggerMeasurements(isOpen);
+  const { triggerRef, handleTriggerLayout } = useSelectTriggerMeasurements(isOpen);
   const { animationOpacity, animationScale } = useSelectListboxAnimation(isOpen);
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const disabledKeySet = useMemo2(() => {
     return new Set(disabledKeys ?? []);
   }, [disabledKeys]);
@@ -607,18 +605,8 @@ var Select = ({
   const dialogTitle = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
   const shouldShowHelper = Boolean(hint || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : hint;
-  const listboxWidth = fullWidth ? triggerWidth ?? triggerPosition?.width ?? 200 : 280;
-  const screenWidth = Dimensions.get("window").width;
-  const listboxPosition = useMemo2(() => {
-    if (!triggerPosition) {
-      return { top: 0, left: 0 };
-    }
-    const listWidth = listboxWidth || 0;
-    const centeredLeft = triggerPosition.x + triggerPosition.width / 2 - listWidth / 2;
-    const left = Math.max(12, Math.min(centeredLeft, screenWidth - listWidth - 12));
-    const top = Math.max(12, triggerPosition.y);
-    return { top, left };
-  }, [triggerPosition, listboxWidth, screenWidth]);
+  const dialogWidth = screenWidth * 0.9;
+  const dialogMaxHeight = Math.min(screenHeight * 0.6, maxListboxHeight);
   const listItems = items.map((item) => {
     const itemProps = item.element.props;
     const itemDisabled = isDisabled || itemProps.isDisabled || disabledKeySet.has(item.key);
@@ -682,11 +670,8 @@ var Select = ({
         style: [
           styles.listbox,
           {
-            width: listboxWidth,
-            maxHeight: maxListboxHeight,
-            position: "absolute",
-            top: listboxPosition.top,
-            left: listboxPosition.left,
+            width: dialogWidth,
+            maxHeight: dialogMaxHeight,
             borderRadius: listboxRadius,
             backgroundColor: theme.colors.background,
             opacity: animationOpacity,
@@ -699,18 +684,25 @@ var Select = ({
         Pressable2,
         {
           onPress: (event) => event.stopPropagation(),
-          style: { flex: 1 }
+          style: { maxHeight: dialogMaxHeight }
         },
-        /* @__PURE__ */ React3.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ React3.createElement(View2, { style: styles.listboxContent }, dialogTitle ? /* @__PURE__ */ React3.createElement(
-          Text2,
+        /* @__PURE__ */ React3.createElement(SelectContext.Provider, { value: { size, themeColor, isDisabled } }, /* @__PURE__ */ React3.createElement(
+          View2,
           {
-            style: [
-              styles.dialogTitle,
-              { color: theme.colors.foreground }
-            ]
+            style: [styles.listboxContent, { maxHeight: dialogMaxHeight }]
           },
-          dialogTitle
-        ) : null, /* @__PURE__ */ React3.createElement(ScrollView, { style: { maxHeight: maxListboxHeight } }, listItems)))
+          dialogTitle ? /* @__PURE__ */ React3.createElement(
+            Text2,
+            {
+              style: [
+                styles.dialogTitle,
+                { color: theme.colors.foreground }
+              ]
+            },
+            dialogTitle
+          ) : null,
+          /* @__PURE__ */ React3.createElement(ScrollView, { style: { maxHeight: dialogMaxHeight } }, listItems)
+        ))
       )
     ))
   ));
@@ -761,7 +753,7 @@ var useSelectItemBackgroundColor = (themeColor, isSelected) => {
   const colorScheme = theme.colors[safeThemeColor];
   return useMemo3(() => {
     if (isSelected) {
-      return colorScheme.background;
+      return colorScheme.container;
     }
     return "transparent";
   }, [isSelected, colorScheme]);