@xaui/native 0.0.16 → 0.0.18

package/dist/autocomplete/index.js

@@ -1,9 +1,1126 @@
 import {
-  Autocomplete,
-  AutocompleteItem
-} from "../chunk-NMZUPH3R.js";
-import "../chunk-GBHQCAKW.js";
-import "../chunk-NBRASCX4.js";
+  CheckmarkIcon
+} from "../chunk-GBHQCAKW.js";
+import "../chunk-DXXNBF5P.js";
+import {
+  Portal,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/autocomplete/autocomplete.tsx
+import React4, { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { Keyboard as Keyboard2, Text as Text3, View as View4 } from "react-native";
+
+// src/components/autocomplete/autocomplete-context.ts
+import { createContext } from "react";
+var AutocompleteContext = createContext({
+  size: "md",
+  themeColor: "default",
+  isDisabled: false
+});
+
+// src/components/autocomplete/autocomplete.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+import { colors } from "@xaui/core/palette";
+var useAutocompleteColorScheme = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return { theme, colorScheme };
+};
+var useAutocompleteSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const sizes = {
+      xs: {
+        minHeight: 34,
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.xs,
+        labelSize: theme.fontSizes.xs
+      },
+      sm: {
+        minHeight: 38,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.sm,
+        labelSize: theme.fontSizes.xs
+      },
+      md: {
+        minHeight: 42,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        fontSize: theme.fontSizes.md,
+        labelSize: theme.fontSizes.sm
+      },
+      lg: {
+        minHeight: 50,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        fontSize: theme.fontSizes.lg,
+        labelSize: theme.fontSizes.md
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+};
+var useAutocompleteRadiusStyles = (radius) => {
+  const theme = useXUITheme();
+  const radiusStyles = useMemo(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, theme]);
+  const listboxRadius = useMemo(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return Math.min(radii[radius], theme.borderRadius.lg);
+  }, [radius, theme]);
+  return { radiusStyles, listboxRadius };
+};
+var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
+  const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
+  return useMemo(() => {
+    let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
+    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+      borderColor = colors.gray[300];
+    }
+    const styles4 = {
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: 0
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      underlined: {
+        backgroundColor: "transparent",
+        borderBottomWidth: theme.borderWidth.md,
+        borderColor
+      }
+    };
+    return styles4[variant];
+  }, [variant, theme, colorScheme, isInvalid, themeColor]);
+};
+var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
+  const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
+  return useMemo(() => {
+    let baseColor = theme.colors.foreground;
+    if (isInvalid) {
+      baseColor = theme.colors.danger.main;
+    } else if (themeColor !== "default") {
+      baseColor = colorScheme.main;
+    }
+    return {
+      fontSize: labelSize,
+      color: baseColor
+    };
+  }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
+};
+var useAutocompleteHelperColor = (isInvalid) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    if (isInvalid) {
+      return theme.colors.danger.main;
+    }
+    return colors.gray[600];
+  }, [isInvalid, theme]);
+};
+
+// src/components/autocomplete/autocomplete.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    gap: 6,
+    position: "relative"
+  },
+  fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  minWidth: {
+    minWidth: 170
+  },
+  label: {
+    fontWeight: "500"
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  triggerText: {
+    flex: 1
+  },
+  triggerWrapper: {
+    position: "relative"
+  },
+  triggerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 8
+  },
+  triggerContentColumn: {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  inputWrapper: {
+    flex: 1,
+    gap: 2
+  },
+  input: {
+    flexShrink: 1,
+    padding: 0
+  },
+  endSlot: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  clearButton: {
+    padding: 2,
+    paddingLeft: 4,
+    marginRight: -4
+  },
+  helperText: {
+    fontSize: 12
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  listbox: {
+    overflow: "hidden",
+    marginTop: 0,
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    elevation: 4
+  },
+  listboxContent: {
+    flexShrink: 1
+  },
+  emptyMessage: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    textAlign: "center"
+  },
+  outsideLeftRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  }
+});
+
+// src/components/autocomplete/autocomplete.state.hook.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var useAutocompleteOpenState = ({
+  isOpened,
+  isDisabled,
+  onOpenChange,
+  onClose
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = isOpened !== void 0 ? isOpened : internalIsOpen;
+  const setOpen = useCallback(
+    (open) => {
+      if (isDisabled) {
+        return;
+      }
+      if (isOpened === void 0) {
+        setInternalIsOpen(open);
+      }
+      onOpenChange?.(open);
+      if (!open) {
+        onClose?.();
+      }
+    },
+    [isDisabled, isOpened, onOpenChange, onClose]
+  );
+  return { isOpen, setOpen };
+};
+var useAutocompleteInputState = ({
+  inputValue,
+  defaultInputValue,
+  selectedKey,
+  onInputChange
+}) => {
+  const [internalInputValue, setInternalInputValue] = useState(
+    defaultInputValue ?? ""
+  );
+  const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
+  const updateInputValue = useCallback(
+    (value) => {
+      if (inputValue === void 0) {
+        setInternalInputValue(value);
+      }
+      onInputChange?.(value);
+    },
+    [inputValue, onInputChange]
+  );
+  useEffect(() => {
+    if (selectedKey === null && inputValue === void 0) {
+      setInternalInputValue("");
+    }
+  }, [selectedKey, inputValue]);
+  return { currentInputValue, updateInputValue };
+};
+var useAutocompleteSelection = ({
+  onSelectionChange
+}) => {
+  const [currentSelectedKey, setCurrentSelectedKey] = useState(null);
+  const updateSelection = useCallback(
+    (key) => {
+      setCurrentSelectedKey(key);
+      onSelectionChange?.(key);
+    },
+    [onSelectionChange]
+  );
+  return { currentSelectedKey, updateSelection };
+};
+
+// src/components/autocomplete/autocomplete.utils.ts
+var getTextValue = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  return null;
+};
+var defaultFilterFunction = (textValue, inputValue) => {
+  const normalizedText = textValue.toLowerCase().trim();
+  const normalizedInput = inputValue.toLowerCase().trim();
+  return normalizedText.includes(normalizedInput);
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
+import React2, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  Animated as Animated3,
+  BackHandler,
+  FlatList,
+  InteractionManager,
+  Keyboard,
+  Platform,
+  Pressable as Pressable2,
+  View as View2,
+  useWindowDimensions
+} from "react-native";
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
+import React from "react";
+import {
+  Animated,
+  Pressable,
+  Text,
+  TextInput,
+  View
+} from "react-native";
+import { ArrowBackIcon, CloseIcon } from "@xaui/icons";
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var styles2 = StyleSheet2.create({
+  backdrop: {
+    ...StyleSheet2.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  dialogContainer: {
+    flex: 1,
+    zIndex: 1
+  },
+  container: {
+    flex: 1,
+    paddingTop: 55,
+    paddingHorizontal: 16
+  },
+  header: {
+    marginBottom: 12
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 16
+  },
+  backButton: {
+    padding: 4
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600"
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  inputWrapper: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative"
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    paddingRight: 40,
+    borderRadius: 8,
+    fontSize: 16
+  },
+  clearInputButton: {
+    position: "absolute",
+    right: 8,
+    padding: 4
+  },
+  listContainer: {
+    flex: 1
+  },
+  listContentContainer: {
+    paddingBottom: 80
+  },
+  checkmarkButtonContainer: {
+    position: "absolute",
+    bottom: 24,
+    right: 24
+  },
+  checkmarkButton: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+    justifyContent: "center",
+    alignItems: "center",
+    elevation: 8
+  }
+});
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
+import { withOpacity } from "@xaui/core";
+var AutocompleteDialogHeader = ({
+  title,
+  inputValue,
+  placeholder = "Search...",
+  inputRef,
+  inputAnimatedStyle,
+  inputTextStyle,
+  onInputChange,
+  onClose,
+  onCheckmarkPress,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useXUITheme();
+  return /* @__PURE__ */ React.createElement(View, { style: styles2.header }, title ? /* @__PURE__ */ React.createElement(View, { style: styles2.titleRow }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      style: styles2.backButton,
+      onPress: onClose,
+      accessibilityLabel: "Back",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ React.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ React.createElement(Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ React.createElement(View, { style: styles2.inputContainer }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ React.createElement(
+    TextInput,
+    {
+      ref: inputRef,
+      value: inputValue,
+      onChangeText: onInputChange,
+      placeholder,
+      placeholderTextColor: withOpacity(theme.colors.foreground, 0.5),
+      style: [
+        styles2.input,
+        {
+          backgroundColor: theme.colors.default.background,
+          color: theme.colors.foreground
+        },
+        inputTextStyle
+      ],
+      autoFocus: true,
+      returnKeyType: "done",
+      onSubmitEditing: onCheckmarkPress,
+      onFocus,
+      onBlur
+    }
+  ), inputValue ? /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      style: styles2.clearInputButton,
+      onPress: () => onInputChange?.(""),
+      accessibilityLabel: "Clear input",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ React.createElement(CloseIcon, { color: theme.colors.foreground })
+  ) : null)));
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
+import { useEffect as useEffect2 } from "react";
+import { Animated as Animated2 } from "react-native";
+var useAutocompleteDialogAnimation = ({
+  visible,
+  fadeAnim,
+  slideAnim,
+  scaleAnim
+}) => {
+  useEffect2(() => {
+    if (visible) {
+      Animated2.parallel([
+        Animated2.timing(fadeAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true
+        }),
+        Animated2.spring(slideAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 65,
+          friction: 10
+        }),
+        Animated2.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 8
+        })
+      ]).start();
+    } else {
+      fadeAnim.setValue(0);
+      slideAnim.setValue(0);
+      scaleAnim.setValue(0);
+    }
+  }, [visible, fadeAnim, slideAnim, scaleAnim]);
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
+var AutocompleteDialog = ({
+  visible,
+  inputValue,
+  placeholder = "Search...",
+  title,
+  themeColor = "primary",
+  children,
+  showCheckmark = true,
+  checkmarkIcon,
+  inputTextStyle,
+  style,
+  onInputChange,
+  onClose,
+  onCheckmark,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useXUITheme();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const fadeAnim = useRef2(new Animated3.Value(0)).current;
+  const slideAnim = useRef2(new Animated3.Value(0)).current;
+  const scaleAnim = useRef2(new Animated3.Value(0)).current;
+  const inputRef = useRef2(null);
+  const [keyboardHeight, setKeyboardHeight] = useState2(0);
+  useEffect3(() => {
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  const items = useMemo2(
+    () => React2.Children.toArray(children).filter(
+      React2.isValidElement
+    ),
+    [children]
+  );
+  const checkmarkColor = theme.colors[themeColor].main;
+  const checkmarkBackgroundColor = theme.colors[themeColor].background;
+  useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
+  useEffect3(() => {
+    if (!visible) return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose?.();
+      return true;
+    });
+    return () => sub.remove();
+  }, [visible, onClose]);
+  const focusInput = useCallback2(() => {
+    const delay = Platform.OS === "android" ? 300 : 100;
+    InteractionManager.runAfterInteractions(() => {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, delay);
+    });
+  }, []);
+  const handleCheckmarkPress = () => {
+    onCheckmark?.();
+    Keyboard.dismiss();
+  };
+  useEffect3(() => {
+    if (!visible) {
+      Keyboard.dismiss();
+      return;
+    }
+    focusInput();
+  }, [focusInput, visible]);
+  const listBottomPadding = useMemo2(() => {
+    const basePadding = showCheckmark ? 96 : 64;
+    return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
+  }, [keyboardHeight, showCheckmark]);
+  if (!visible) return null;
+  const overlayStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: screenWidth,
+    height: screenHeight
+  };
+  const containerAnimatedStyle = {
+    transform: [
+      {
+        translateY: slideAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [screenHeight, 0]
+        })
+      }
+    ]
+  };
+  const inputAnimatedStyle = {
+    transform: [{ scaleX: scaleAnim }]
+  };
+  const listHeader = /* @__PURE__ */ React2.createElement(
+    AutocompleteDialogHeader,
+    {
+      title,
+      inputValue,
+      placeholder,
+      inputRef,
+      inputAnimatedStyle,
+      inputTextStyle,
+      onInputChange,
+      onClose,
+      onCheckmarkPress: handleCheckmarkPress,
+      onFocus,
+      onBlur
+    }
+  );
+  return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(View2, { style: [overlayStyle, style] }, /* @__PURE__ */ React2.createElement(Animated3.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ React2.createElement(Animated3.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ React2.createElement(
+    View2,
+    {
+      style: [styles2.container, { backgroundColor: theme.colors.background }]
+    },
+    listHeader,
+    /* @__PURE__ */ React2.createElement(
+      FlatList,
+      {
+        data: items,
+        renderItem: ({ item }) => item,
+        keyExtractor: (_, index) => String(index),
+        style: styles2.listContainer,
+        contentContainerStyle: {
+          paddingBottom: listBottomPadding
+        },
+        keyboardShouldPersistTaps: "always",
+        keyboardDismissMode: "none",
+        showsVerticalScrollIndicator: false
+      }
+    ),
+    showCheckmark ? /* @__PURE__ */ React2.createElement(View2, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ React2.createElement(
+      Pressable2,
+      {
+        style: [
+          styles2.checkmarkButton,
+          { backgroundColor: checkmarkBackgroundColor }
+        ],
+        onPress: handleCheckmarkPress,
+        accessibilityLabel: "Confirm",
+        accessibilityRole: "button"
+      },
+      checkmarkIcon ?? /* @__PURE__ */ React2.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+    )) : null
+  ))));
+};
+
+// src/components/autocomplete/autocomplete-trigger.tsx
+import React3 from "react";
+import { Pressable as Pressable3, Text as Text2, TouchableOpacity, View as View3 } from "react-native";
+import { CloseIcon as CloseIcon2 } from "@xaui/icons";
+var AutocompleteTrigger = ({
+  triggerRef,
+  isDisabled,
+  currentSelectedKey,
+  currentInputValue,
+  displayValue,
+  sizeStyles,
+  radiusStyles,
+  variantStyles,
+  theme,
+  isClearable,
+  label,
+  labelText,
+  isLabelInside,
+  clearIcon,
+  style,
+  textStyle,
+  onPress: handleTriggerPress,
+  onClear: handleClear,
+  onLayout: handleTriggerLayout
+}) => {
+  const renderLabel = isLabelInside && label;
+  return /* @__PURE__ */ React3.createElement(
+    Pressable3,
+    {
+      ref: triggerRef,
+      onPress: handleTriggerPress,
+      onLayout: handleTriggerLayout,
+      disabled: isDisabled,
+      style: [
+        styles.trigger,
+        {
+          minHeight: sizeStyles.minHeight,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          paddingVertical: sizeStyles.paddingVertical
+        },
+        radiusStyles,
+        variantStyles,
+        isDisabled && styles.disabled,
+        style
+      ],
+      accessibilityLabel: labelText ?? (typeof label === "string" ? label : void 0),
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isDisabled }
+    },
+    /* @__PURE__ */ React3.createElement(View3, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ React3.createElement(
+      Text2,
+      {
+        style: [
+          styles.triggerText,
+          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
+          !currentSelectedKey && !currentInputValue && { opacity: 0.5 },
+          textStyle
+        ],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      },
+      displayValue
+    )),
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ React3.createElement(
+      TouchableOpacity,
+      {
+        onPress: handleClear,
+        style: styles.clearButton,
+        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
+      },
+      clearIcon ?? /* @__PURE__ */ React3.createElement(CloseIcon2, { color: theme.colors.foreground, size: 20 })
+    ) : null
+  );
+};
+
+// src/components/autocomplete/autocomplete.tsx
+var defaultPlaceholder = "Search...";
+var Autocomplete = ({
+  children,
+  variant = "flat",
+  themeColor = "default",
+  size = "md",
+  radius = "md",
+  placeholder = defaultPlaceholder,
+  labelPlacement = "outside",
+  label,
+  description,
+  errorMessage,
+  clearIcon,
+  fullWidth = false,
+  isDisabled = false,
+  isInvalid = false,
+  isClearable = true,
+  allowsCustomValue = false,
+  forceSelection = false,
+  allowsEmptyCollection = true,
+  disableLocalFilter = false,
+  inputValue,
+  defaultInputValue,
+  customAppearance,
+  onClose,
+  onOpenChange,
+  onSelectionChange,
+  onInputChange,
+  onClear
+}) => {
+  const { currentSelectedKey, updateSelection } = useAutocompleteSelection({
+    onSelectionChange
+  });
+  const { currentInputValue, updateInputValue } = useAutocompleteInputState({
+    inputValue,
+    defaultInputValue,
+    selectedKey: currentSelectedKey,
+    onInputChange
+  });
+  const { isOpen, setOpen } = useAutocompleteOpenState({
+    isOpened: void 0,
+    isDisabled,
+    onOpenChange,
+    onClose
+  });
+  const triggerRef = useRef3(null);
+  const [triggerLayout, setTriggerLayout] = useState3();
+  const handleTriggerLayout = useCallback3(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+    });
+  }, []);
+  const items = useMemo3(() => {
+    const elements = React4.Children.toArray(children).filter(Boolean);
+    return elements.map((child, index) => {
+      if (!React4.isValidElement(child)) {
+        return null;
+      }
+      const key = child.props.value ?? String(index);
+      const labelText = getTextValue(child.props.label) ?? key;
+      return {
+        key,
+        element: child,
+        labelText
+      };
+    }).filter((item) => item !== null);
+  }, [children]);
+  const filteredItems = useMemo3(() => {
+    if (disableLocalFilter || !currentInputValue.trim()) {
+      return items;
+    }
+    return items.filter(
+      (item) => defaultFilterFunction(item.labelText, currentInputValue)
+    );
+  }, [disableLocalFilter, items, currentInputValue]);
+  const theme = useXUITheme();
+  const sizeStyles = useAutocompleteSizeStyles(size);
+  const { radiusStyles } = useAutocompleteRadiusStyles(radius);
+  const variantStyles = useAutocompleteVariantStyles(themeColor, variant, isInvalid);
+  const labelStyle = useAutocompleteLabelStyle(
+    themeColor,
+    isInvalid,
+    sizeStyles.labelSize
+  );
+  const helperColor = useAutocompleteHelperColor(isInvalid);
+  const selectedItem = items.find((item) => item.key === currentSelectedKey);
+  const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
+  const handleInputChange = useCallback3(
+    (text) => {
+      updateInputValue(text);
+      const selectedLabel = selectedItem?.labelText ?? "";
+      const shouldClearSelection = !text.trim() && !allowsCustomValue || currentSelectedKey !== null && text !== selectedLabel;
+      if (shouldClearSelection) {
+        updateSelection(null);
+      }
+    },
+    [
+      updateInputValue,
+      allowsCustomValue,
+      updateSelection,
+      selectedItem,
+      currentSelectedKey
+    ]
+  );
+  const handleItemSelection = useCallback3(
+    (key, itemLabel) => {
+      if (isDisabled) {
+        return;
+      }
+      updateSelection(key);
+      updateInputValue(itemLabel);
+      setTimeout(() => {
+        Keyboard2.dismiss();
+        setOpen(false);
+      }, 50);
+    },
+    [isDisabled, updateSelection, updateInputValue, setOpen]
+  );
+  const handleCheckmark = useCallback3(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const handleClear = useCallback3(() => {
+    if (isDisabled) {
+      return;
+    }
+    updateSelection(null);
+    updateInputValue("");
+    onClear?.();
+  }, [isDisabled, updateSelection, updateInputValue, onClear]);
+  const handleTriggerPress = useCallback3(() => {
+    if (!isDisabled) {
+      if (selectedItem && !currentInputValue) {
+        updateInputValue(selectedItem.labelText);
+      }
+      setOpen(true);
+    }
+  }, [isDisabled, setOpen, selectedItem, currentInputValue, updateInputValue]);
+  const listItems = filteredItems.map((item) => {
+    const itemProps = item.element.props;
+    const itemDisabled = isDisabled || itemProps.isDisabled;
+    const itemSelected = itemProps.isSelected ?? currentSelectedKey === item.key;
+    const handleItemSelected = () => {
+      if (itemDisabled || itemProps.isReadOnly) {
+        return;
+      }
+      handleItemSelection(item.key, item.labelText);
+      itemProps.onSelected?.();
+    };
+    return React4.cloneElement(item.element, {
+      key: item.key,
+      isDisabled: itemDisabled,
+      isSelected: itemSelected,
+      onSelected: handleItemSelected
+    });
+  });
+  const showEmptyMessage = !allowsEmptyCollection && listItems.length === 0;
+  const isLabelInside = labelPlacement === "inside";
+  const isLabelOutsideLeft = labelPlacement === "outside-left";
+  const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ React4.createElement(View4, null, label) : null;
+  const shouldShowHelper = Boolean(description || errorMessage);
+  const helperContent = isInvalid && errorMessage ? errorMessage : description;
+  const triggerContent = /* @__PURE__ */ React4.createElement(
+    AutocompleteTrigger,
+    {
+      triggerRef,
+      isDisabled,
+      currentSelectedKey,
+      currentInputValue,
+      displayValue,
+      sizeStyles,
+      radiusStyles,
+      variantStyles,
+      theme,
+      isClearable,
+      label: renderLabel,
+      labelText: typeof label === "string" ? label : void 0,
+      isLabelInside,
+      clearIcon,
+      style: customAppearance?.container,
+      textStyle: customAppearance?.text,
+      onPress: handleTriggerPress,
+      onClear: handleClear,
+      onLayout: handleTriggerLayout
+    }
+  );
+  const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
+  return /* @__PURE__ */ React4.createElement(View4, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ React4.createElement(View4, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ React4.createElement(View4, null, helperContent) : null, /* @__PURE__ */ React4.createElement(
+    AutocompleteDialog,
+    {
+      visible: isOpen,
+      inputValue: currentInputValue,
+      placeholder,
+      title: typeof label === "string" ? label : void 0,
+      themeColor,
+      _triggerLayout: triggerLayout,
+      showCheckmark: false,
+      onInputChange: handleInputChange,
+      onClose: () => setOpen(false),
+      onCheckmark: handleCheckmark
+    },
+    /* @__PURE__ */ React4.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ React4.createElement(Text3, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+  ));
+};
+
+// src/components/autocomplete/autocomplete-item.tsx
+import React5, { useContext as useContext2 } from "react";
+import { Pressable as Pressable4, Text as Text4, View as View5 } from "react-native";
+
+// src/components/autocomplete/autocomplete-item.style.ts
+import { StyleSheet as StyleSheet3 } from "react-native";
+var styles3 = StyleSheet3.create({
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  content: {
+    flex: 1,
+    gap: 2
+  },
+  title: {
+    fontWeight: "500"
+  },
+  description: {
+    opacity: 0.7
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/autocomplete/autocomplete-item.hook.ts
+import { useContext, useMemo as useMemo4 } from "react";
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
+var useAutocompleteItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return useMemo4(() => {
+    const sizes = {
+      xs: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.xs,
+        descriptionSize: theme.fontSizes.xs
+      },
+      sm: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.sm,
+        descriptionSize: theme.fontSizes.xs
+      },
+      md: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.md,
+        descriptionSize: theme.fontSizes.xs
+      },
+      lg: {
+        paddingVertical: theme.spacing.sm,
+        paddingHorizontal: theme.spacing.sm,
+        titleSize: theme.fontSizes.lg,
+        descriptionSize: theme.fontSizes.md
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+};
+var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor2(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return useMemo4(() => {
+    return "transparent";
+  }, [isSelected, colorScheme]);
+};
+var useAutocompleteItemTextColors = () => {
+  const theme = useXUITheme();
+  return useMemo4(() => {
+    return {
+      textColor: theme.colors.foreground,
+      descriptionColor: theme.colors.foreground
+    };
+  }, [theme]);
+};
+var useAutocompleteItemCheckmarkColor = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor2(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return useMemo4(() => {
+    if (themeColor === "default") {
+      return theme.colors.primary.main;
+    }
+    return colorScheme.main;
+  }, [themeColor, colorScheme, theme]);
+};
+var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
+  const context = useContext(AutocompleteContext);
+  const backgroundColor = useAutocompleteItemBackgroundColor(
+    context.themeColor,
+    isSelected
+  );
+  const { textColor, descriptionColor } = useAutocompleteItemTextColors();
+  const checkmarkColor = useAutocompleteItemCheckmarkColor(context.themeColor);
+  return {
+    backgroundColor,
+    labelColor: textColor,
+    descriptionColor,
+    checkmarkColor
+  };
+};
+
+// src/components/autocomplete/autocomplete-item.tsx
+var defaultSize = "md";
+var AutocompleteItem = ({
+  label,
+  description,
+  startContent,
+  endContent,
+  selectedIcon: _selectedIcon,
+  isDisabled = false,
+  isSelected = false,
+  isReadOnly = false,
+  customAppearance,
+  onSelected
+}) => {
+  const context = useContext2(AutocompleteContext);
+  const size = context?.size ?? defaultSize;
+  const isItemDisabled = context?.isDisabled ? true : isDisabled;
+  const sizeStyles = useAutocompleteItemSizeStyles(size);
+  const { backgroundColor, labelColor, descriptionColor } = useAutocompleteItemStyles(isSelected, isItemDisabled);
+  const handlePress = () => {
+    if (isItemDisabled || isReadOnly) {
+      return;
+    }
+    onSelected?.();
+  };
+  return /* @__PURE__ */ React5.createElement(
+    Pressable4,
+    {
+      onPress: handlePress,
+      disabled: isItemDisabled,
+      style: [
+        styles3.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor
+        },
+        isItemDisabled && styles3.disabled,
+        customAppearance?.container
+      ]
+    },
+    startContent,
+    /* @__PURE__ */ React5.createElement(View5, { style: styles3.content }, /* @__PURE__ */ React5.createElement(
+      Text4,
+      {
+        style: [
+          styles3.title,
+          { fontSize: sizeStyles.titleSize, color: labelColor },
+          customAppearance?.text
+        ]
+      },
+      label
+    ), description && /* @__PURE__ */ React5.createElement(
+      Text4,
+      {
+        style: [
+          styles3.description,
+          { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
+        ]
+      },
+      description
+    )),
+    endContent
+  );
+};
 export {
   Autocomplete,
   AutocompleteItem