@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/module/components/SearchBar/SearchBar.js

@@ -5,31 +5,8 @@ import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from '
 import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
-import { AppIcon } from "../AppIcon/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    height: 36,
-    paddingHorizontal: 10,
-    fontSize: 13,
-    iconSize: 16,
-    gap: 6
-  },
-  md: {
-    height: 44,
-    paddingHorizontal: 12,
-    fontSize: 15,
-    iconSize: 18,
-    gap: 8
-  },
-  lg: {
-    height: 52,
-    paddingHorizontal: 14,
-    fontSize: 16,
-    iconSize: 20,
-    gap: 10
-  }
-};
 const CANCEL_WIDTH = 72;
 const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -45,7 +22,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     leftIcon,
     debounceMs,
     size = 'md',
-    variant = 'filled',
+    variant: variantProp,
     cancelLabel = 'Cancel',
     style,
     accessibilityLabel,
@@ -53,11 +30,21 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
+  // Resolution chain mirrors every other field-family control: caller prop →
+  // component-specific token (`components.searchBar.defaultVariant`) → shared
+  // field-family token (`components.field.defaultVariant`) → library default.
+  // Library default stays `'filled'` so SearchBar reads as the traditional
+  // pill-shaped, borderless search box when no theme opinion is expressed.
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  const fieldTokens = resolveFieldSize(theme, size);
   const sizeStyles = {
-    ...sizeMap[size],
+    ...fieldTokens,
     ...(theme.components.searchBar?.[size] ?? {})
   };
   const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
   const styles = useMemo(() => buildStyles(theme), [theme]);
 
   // Coerce nullable inputs to '' once at the top so every downstream read is
@@ -68,15 +55,11 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);
   const cancelAnim = useRef(createAnimatedValue(0)).current;
-
-  // Keep internal value in sync with controlled value when debouncing.
   useEffect(() => {
     if (debounceMs === undefined) return;
     if (value !== internalValue) setInternalValue(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, debounceMs]);
-
-  // Fire debounced onChangeText when debounce is configured.
   const lastSentRef = useRef(value);
   useEffect(() => {
     if (debounceMs === undefined) return;
@@ -90,7 +73,6 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
       toValue: showCancelButton ? 1 : 0,
       duration: 200,
       easing: Easing.bezier(...theme.motion.easing.standard),
-      // Container width / margin animates with this value, so layout-aware.
       useNativeDriver: false
     }).start();
   }, [showCancelButton, cancelAnim, theme.motion.easing.standard]);
@@ -125,81 +107,86 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, [onSubmit, debounceMs, internalValue, value]);
   const displayValue = debounceMs !== undefined ? internalValue : value;
   const hasValue = displayValue.length > 0;
-  const containerBackground = variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.primary;
-  const containerBorder = variant === 'outlined' ? theme.colors.border.primary : 'transparent';
-
-  // Container shrinks left to make room for cancel button on right.
   const cancelTranslateX = cancelAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [cancelWidth, 0]
   });
   const cancelOpacity = cancelAnim;
+  const fieldMarginRight = cancelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, cancelWidth + theme.spacing.sm]
+  });
+  const leading = leftIcon ? leftIcon : theme.icons?.search ? theme.icons.search({
+    size: sizeStyles.iconSize,
+    color: theme.colors.text.tertiary
+  }) : /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: sizeStyles.iconSize,
+      color: theme.colors.text.tertiary
+    },
+    children: "\uD83D\uDD0D"
+  });
+  const trailing = hasValue && !disabled ? /*#__PURE__*/_jsx(Pressable, {
+    onPress: handleClear,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: "Clear search",
+    children: theme.icons?.close ? theme.icons.close({
+      size: sizeStyles.iconSize,
+      color: theme.colors.text.secondary
+    }) : /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: sizeStyles.iconSize,
+        color: theme.colors.text.secondary
+      },
+      children: "\xD7"
+    })
+  }) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.root, style],
     testID: testID,
-    children: [/*#__PURE__*/_jsxs(Animated.View, {
-      style: [styles.searchContainer, {
-        height: sizeStyles.height,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        backgroundColor: containerBackground,
-        borderColor: containerBorder,
-        borderWidth: variant === 'outlined' ? 1 : 0,
-        borderRadius: theme.radius.full,
-        opacity: disabled ? 0.55 : 1,
-        marginRight: cancelAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, cancelWidth + theme.spacing.sm]
-        })
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.fieldWrap, {
+        marginRight: fieldMarginRight
       }],
-      accessibilityRole: "search",
-      accessibilityLabel: accessibilityLabel ?? placeholder,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.leftSlot, {
-          marginRight: sizeStyles.gap
-        }],
-        children: leftIcon ? leftIcon : /*#__PURE__*/_jsx(AppIcon, {
-          name: "search",
-          family: "feather",
-          size: sizeStyles.iconSize,
-          color: theme.colors.text.tertiary
-        })
-      }), /*#__PURE__*/_jsx(TextInput, {
-        ref: ref,
-        style: [styles.input, {
-          fontSize: sizeStyles.fontSize,
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
-        }],
-        value: displayValue,
-        onChangeText: handleChangeText,
-        onSubmitEditing: handleSubmit,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        placeholder: placeholder,
-        placeholderTextColor: theme.colors.text.tertiary,
-        autoFocus: autoFocus,
-        editable: !disabled,
-        returnKeyType: "search",
-        selectionColor: theme.colors.border.focus,
+      children: /*#__PURE__*/_jsx(FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        filled: hasValue,
+        minHeight: sizeStyles.minHeight,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        borderRadius: sizeStyles.borderRadius,
+        leading: leading,
+        trailing: trailing,
+        accessibilityRole: "search",
         accessibilityLabel: accessibilityLabel ?? placeholder,
-        accessibilityState: {
-          disabled
-        },
-        ...rest
-      }), hasValue && !disabled ? /*#__PURE__*/_jsx(Pressable, {
-        onPress: handleClear,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: "Clear search",
-        style: [styles.rightSlot, {
-          marginLeft: sizeStyles.gap
-        }],
-        children: /*#__PURE__*/_jsx(AppIcon, {
-          name: "x",
-          family: "feather",
-          size: sizeStyles.iconSize,
-          color: theme.colors.text.secondary
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            fontSize: sizeStyles.fontSize,
+            color: fieldText.color,
+            ...fieldText.weightStyle
+          }],
+          value: displayValue,
+          onChangeText: handleChangeText,
+          onSubmitEditing: handleSubmit,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          placeholder: placeholder,
+          placeholderTextColor: fieldText.placeholderColor,
+          autoFocus: autoFocus,
+          editable: !disabled,
+          returnKeyType: "search",
+          selectionColor: resolveVariantColors(theme, variant).borderFocused,
+          accessibilityLabel: accessibilityLabel ?? placeholder,
+          accessibilityState: {
+            disabled
+          },
+          ...rest
         })
-      }) : null]
+      })
     }), showCancel ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
@@ -237,14 +224,8 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'relative',
     overflow: 'hidden'
   },
-  searchContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  leftSlot: {
-    alignItems: 'center',
-    justifyContent: 'center'
+  fieldWrap: {
+    flex: 1
   },
   input: {
     flex: 1,
@@ -252,10 +233,6 @@ const buildStyles = _theme => StyleSheet.create({
     margin: 0,
     includeFontPadding: false
   },
-  rightSlot: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
   cancelWrap: {
     position: 'absolute',
     right: 0,

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -37,13 +37,24 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'primary',
     accessibilityLabel,
     style,
+    containerStyle,
     segmentStyle,
+    selectedIndicatorStyle,
     textStyle,
+    labelStyle,
     testID
   } = props;
   const theme = useTheme();
+  const segTheme = theme.components.segmentedControl;
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const baseSize = sizeMap[size];
+  const sizeStyles = {
+    height: segTheme?.[size]?.height ?? baseSize.height,
+    fontSize: segTheme?.[size]?.fontSize ?? baseSize.fontSize,
+    paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
+  };
+  const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
+  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // Track width is measured from onLayout. Thumb width is a regular number (not
   // animated) — `width` cannot be driven by the native animated module, and mixing
@@ -54,10 +65,10 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   const [trackWidth, setTrackWidth] = useState(0);
   const thumbTranslateX = useRef(createAnimatedValue(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
-  const segmentWidth = trackWidth > 0 ? (trackWidth - TRACK_PADDING * 2) / Math.max(segments.length, 1) : 0;
+  const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
   const animateThumb = useCallback((index, segWidth) => {
     if (segWidth <= 0) return;
-    const targetX = TRACK_PADDING + segWidth * index;
+    const targetX = trackPadding + segWidth * index;
     const spring = theme.motion.spring.snappy;
     Animated.spring(thumbTranslateX, {
       toValue: targetX,
@@ -81,9 +92,9 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = useCallback(segment => {
     if (disabled) return;
     if (segment.value === value) return;
-    triggerHaptic('selection');
+    if (changeHapticEnabled) triggerHaptic('selection');
     onChange(segment.value);
-  }, [disabled, onChange, value]);
+  }, [disabled, onChange, value, changeHapticEnabled]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/_jsxs(View, {
@@ -95,23 +106,24 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
       height: sizeStyles.height,
       borderRadius: theme.radius.md,
       backgroundColor: theme.colors.background.tertiary,
-      padding: TRACK_PADDING,
+      padding: trackPadding,
       opacity: disabled ? 0.55 : 1,
       alignSelf: fullWidth ? 'stretch' : 'flex-start'
-    }, style],
+    }, containerStyle, style],
     onLayout: handleTrackLayout,
     children: [segmentWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       style: [styles.thumb, {
+        top: trackPadding,
         width: segmentWidth,
-        height: sizeStyles.height - TRACK_PADDING * 2,
+        height: sizeStyles.height - trackPadding * 2,
         borderRadius: theme.radius.sm,
         backgroundColor: thumbBg,
         transform: [{
           translateX: thumbTranslateX
         }],
         ...theme.shadows.sm
-      }]
+      }, selectedIndicatorStyle]
     }) : null, segments.map(segment => {
       const isActive = segment.value === value;
       return /*#__PURE__*/_jsxs(Pressable, {
@@ -137,7 +149,7 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
             color: isActive ? activeTextColor : theme.colors.text.tertiary,
             fontSize: sizeStyles.fontSize,
             fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-          }, textStyle],
+          }, textStyle, labelStyle],
           numberOfLines: 1,
           children: segment.label
         })]
@@ -154,7 +166,6 @@ const buildStyles = _theme => StyleSheet.create({
   },
   thumb: {
     position: 'absolute',
-    top: TRACK_PADDING,
     left: 0
   },
   segment: {

package/lib/module/components/Select/Select.js

@@ -10,36 +10,11 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    minHeight: 38,
-    fontSize: 13,
-    borderRadius: 10,
-    iconSize: 16
-  },
-  md: {
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    minHeight: 46,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18
-  },
-  lg: {
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    minHeight: 54,
-    fontSize: 16,
-    borderRadius: 14,
-    iconSize: 20
-  }
-};
-
 // `unknown` here keeps the forwardRef signature non-generic — consumers who
 // pass non-`SelectOption` shapes use the accessor props; type inference is
 // preserved at the call site via the `SelectProps<T>` union.
@@ -71,8 +46,12 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
   const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeTokens = resolveFieldSize(theme, size);
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const screenHeight = Dimensions.get('window').height;
@@ -83,11 +62,13 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
   useEffect(() => {
     if (open) {
-      Animated.parallel([Animated.timing(backdropAnim, {
+      Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      Animated.timing(backdropAnim, {
         toValue: 1,
         duration: theme.motion.duration.fast,
         easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
+        useNativeDriver: false
       }), Animated.spring(sheetAnim, {
         toValue: 0,
         damping: theme.motion.spring.snappy.damping,
@@ -100,7 +81,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: 0,
         duration: theme.motion.duration.fast,
         easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
+        useNativeDriver: false
       }), Animated.timing(sheetAnim, {
         toValue: sheetMaxHeight,
         duration: theme.motion.duration.fast,
@@ -160,7 +141,6 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
   const showingPlaceholder = selectedOptions.length === 0;
   const hasError = typeof error === 'string' && error.length > 0;
-  const borderColor = hasError ? theme.colors.border.error : theme.colors.border.primary;
   const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
   const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
   const renderOption = ({
@@ -240,45 +220,37 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         marginBottom: theme.spacing.xxs
       }],
       children: label
-    }) : null, /*#__PURE__*/_jsxs(Pressable, {
+    }) : null, /*#__PURE__*/_jsx(View, {
       ref: ref,
-      onPress: handleOpen,
-      disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityLabel: a11yLabel,
-      accessibilityState: {
-        disabled,
-        expanded: open
-      },
-      android_ripple: {
-        color: theme.colors.surface.pressed,
-        borderless: false
-      },
-      style: ({
-        pressed
-      }) => [styles.trigger, {
-        minHeight: sizeStyles.minHeight,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        paddingVertical: sizeStyles.paddingVertical,
-        borderRadius: sizeStyles.borderRadius,
-        borderColor,
-        borderWidth: 1.5,
-        backgroundColor: disabled ? theme.colors.surface.disabled : pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
-        opacity: disabled ? 0.65 : 1
-      }, triggerStyle],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.triggerText, {
-          color: showingPlaceholder ? theme.colors.text.tertiary : theme.colors.text.primary,
-          fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.medium
-        }, textStyle],
-        numberOfLines: 1,
-        children: triggerText
-      }), /*#__PURE__*/_jsx(Chevron, {
-        color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
-        size: sizeStyles.iconSize,
-        open: open
-      })]
+      collapsable: false,
+      children: /*#__PURE__*/_jsx(FieldBase, {
+        size: size,
+        disabled: disabled,
+        error: hasError,
+        filled: selectedOptions.length > 0,
+        onPress: handleOpen,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          disabled,
+          expanded: open
+        },
+        style: triggerStyle,
+        trailing: /*#__PURE__*/_jsx(Chevron, {
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
+          size: sizeTokens.iconSize,
+          open: open
+        }),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.triggerText, {
+            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle
+          }, textStyle],
+          numberOfLines: 1,
+          children: triggerText
+        })
+      })
     }), hasError ? /*#__PURE__*/_jsx(Text, {
       style: [styles.errorText, {
         color: theme.colors.error,
@@ -292,25 +264,29 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
       transparent: true,
       animationType: "none",
       onRequestClose: handleClose,
-      statusBarTranslucent: true,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: StyleSheet.absoluteFill,
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          style: [StyleSheet.absoluteFillObject, {
-            backgroundColor: theme.colors.background.overlay,
-            opacity: backdropAnim
-          }],
-          children: /*#__PURE__*/_jsx(Pressable, {
-            style: StyleSheet.absoluteFill,
-            onPress: handleClose,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close picker"
-          })
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+      ,
+      navigationBarTranslucent: true,
+      children: /*#__PURE__*/_jsxs(View
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      , {
+        collapsable: false,
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: handleClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close picker"
         }), /*#__PURE__*/_jsxs(Animated.View, {
           accessibilityViewIsModal: true,
           accessibilityLabel: label ?? placeholder ?? 'Options',
           style: [styles.sheet, {
             maxHeight: sheetMaxHeight,
+            paddingBottom: insets.bottom + 16,
             backgroundColor: theme.colors.background.elevated,
             borderTopLeftRadius: theme.radius.xl,
             borderTopRightRadius: theme.radius.xl,
@@ -323,7 +299,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
             style: styles.sheetHandleRow,
             children: /*#__PURE__*/_jsx(View, {
               style: [styles.sheetHandle, {
-                backgroundColor: theme.colors.border.primary
+                backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
               }]
             })
           }), label ? /*#__PURE__*/_jsx(Text, {
@@ -345,7 +321,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
               onChangeText: setQuery,
               placeholder: "Search\u2026",
               placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: theme.colors.border.focus,
+              selectionColor: resolveVariantColors(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocused,
               accessibilityLabel: "Search options",
               style: [styles.searchInput, {
                 color: theme.colors.text.primary,
@@ -456,11 +432,6 @@ const buildStyles = _theme => StyleSheet.create({
   label: {
     includeFontPadding: false
   },
-  trigger: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
   triggerText: {
     flex: 1,
     includeFontPadding: false