@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/autocomplete/index.js

@@ -1,1122 +0,0 @@
-import {
-  CheckmarkIcon
-} from "../chunk-GBHQCAKW.js";
-import "../chunk-SHBDANQN.js";
-import {
-  Portal,
-  useXUITheme
-} from "../chunk-RBSA4NH4.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, withOpacity } 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: theme.componentSizes.xs,
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.xs,
-        labelSize: theme.fontSizes.xs
-      },
-      sm: {
-        minHeight: theme.componentSizes.sm,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.sm,
-        labelSize: theme.fontSizes.xs
-      },
-      md: {
-        minHeight: theme.componentSizes.md,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        fontSize: theme.fontSizes.md,
-        labelSize: theme.fontSizes.sm
-      },
-      lg: {
-        minHeight: theme.componentSizes.lg,
-        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 === "bordered" && themeColor === "default") {
-      borderColor = colors.gray[300];
-    }
-    const styles4 = {
-      bordered: {
-        backgroundColor: "transparent",
-        borderWidth: theme.borderWidth.md,
-        borderColor
-      },
-      colored: {
-        backgroundColor: withOpacity(colorScheme.container, 0.5),
-        borderWidth: 0
-      },
-      light: {
-        backgroundColor: "transparent",
-        borderWidth: 0
-      },
-      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 as withOpacity2 } 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: withOpacity2(theme.colors.foreground, 0.5),
-      style: [
-        styles2.input,
-        {
-          backgroundColor: theme.colors.default.container,
-          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].container;
-  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 = "colored",
-  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
-};