@xaui/native 0.0.7 → 0.0.9

package/dist/autocomplete/index.cjs

@@ -0,0 +1,1503 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/autocomplete/index.ts
+var autocomplete_exports = {};
+__export(autocomplete_exports, {
+  Autocomplete: () => Autocomplete,
+  AutocompleteItem: () => AutocompleteItem
+});
+module.exports = __toCommonJS(autocomplete_exports);
+
+// src/components/autocomplete/autocomplete.tsx
+var import_react18 = __toESM(require("react"), 1);
+var import_react_native14 = require("react-native");
+
+// src/components/autocomplete/autocomplete-context.ts
+var import_react = require("react");
+var AutocompleteContext = (0, import_react.createContext)({
+  size: "md",
+  themeColor: "default",
+  isDisabled: false
+});
+
+// src/components/autocomplete/autocomplete.hook.ts
+var import_react7 = require("react");
+var import_core = require("@xaui/core");
+var import_palette2 = require("@xaui/core/palette");
+
+// src/core/theme-context.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react3 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react2 = require("react");
+var PortalContext = (0, import_react2.createContext)(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = (0, import_react3.useContext)(PortalContext);
+  const keyRef = (0, import_react3.useRef)(`portal-${++portalId}`);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  (0, import_react3.useEffect)(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/portal/portal-host.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react5.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react6 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react6.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/autocomplete/autocomplete.hook.ts
+var useAutocompleteColorScheme = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return { theme, colorScheme };
+};
+var useAutocompleteSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react7.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 = (0, import_react7.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 = (0, import_react7.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 (0, import_react7.useMemo)(() => {
+    let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
+    if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
+      borderColor = import_palette2.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 (0, import_react7.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 (0, import_react7.useMemo)(() => {
+    if (isInvalid) {
+      return theme.colors.danger.main;
+    }
+    return import_palette2.colors.gray[600];
+  }, [isInvalid, theme]);
+};
+
+// src/components/autocomplete/autocomplete.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.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
+var import_react8 = require("react");
+var useAutocompleteOpenState = ({
+  isOpened,
+  isDisabled,
+  onOpenChange,
+  onClose
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react8.useState)(false);
+  const isOpen = isOpened !== void 0 ? isOpened : internalIsOpen;
+  const setOpen = (0, import_react8.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] = (0, import_react8.useState)(defaultInputValue ?? "");
+  const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
+  const updateInputValue = (0, import_react8.useCallback)(
+    (value) => {
+      if (inputValue === void 0) {
+        setInternalInputValue(value);
+      }
+      onInputChange?.(value);
+    },
+    [inputValue, onInputChange]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (selectedKey === null && inputValue === void 0) {
+      setInternalInputValue("");
+    }
+  }, [selectedKey, inputValue]);
+  return { currentInputValue, updateInputValue };
+};
+var useAutocompleteSelection = ({
+  onSelectionChange
+}) => {
+  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react8.useState)(null);
+  const updateSelection = (0, import_react8.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
+var import_react16 = __toESM(require("react"), 1);
+var import_react_native12 = require("react-native");
+
+// src/components/select/checkmark-icon.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
+function CheckmarkIcon({ color, size }) {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native_svg.Polyline,
+    {
+      points: "1 9 7 14 15 4",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
+var import_react14 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
+
+// src/components/icon/icons/arrow-back.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
+
+// src/components/icon/icon.utils.ts
+var isThemeColor = (color) => {
+  const themeColors = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "danger",
+    "warning",
+    "success",
+    "default"
+  ];
+  return themeColors.includes(color);
+};
+
+// src/components/icon/icons/arrow-back.tsx
+var AnimatedPath = import_react_native5.Animated.createAnimatedComponent(import_react_native_svg2.Path);
+var ArrowBackIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react10.useRef)(new import_react_native5.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react10.useRef)(new import_react_native5.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react10.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react10.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native5.Animated.parallel([
+        import_react_native5.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native5.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderArrow = () => /* @__PURE__ */ import_react10.default.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M244 400L100 256l144-144M120 256h292",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
+    }
+  ), renderArrow());
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native_svg2.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderArrow());
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native_svg2.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderArrow());
+  const renderVariant = () => {
+    switch (variant) {
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "filled":
+      case "round-filled":
+      case "square-filled":
+      case "baseline":
+      default:
+        return renderArrow();
+    }
+  };
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/checkmark.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath2 = import_react_native6.Animated.createAnimatedComponent(import_react_native_svg3.Path);
+
+// src/components/icon/icons/chevron-down.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath3 = import_react_native7.Animated.createAnimatedComponent(import_react_native_svg4.Path);
+
+// src/components/icon/icons/close.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
+var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
+var AnimatedPath4 = import_react_native8.Animated.createAnimatedComponent(import_react_native_svg5.Path);
+var CloseIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = (0, import_react13.useRef)(new import_react_native8.Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = (0, import_react13.useRef)(new import_react_native8.Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = (0, import_react13.useMemo)(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  (0, import_react13.useEffect)(() => {
+    if (isAnimated) {
+      import_react_native8.Animated.parallel([
+        import_react_native8.Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        import_react_native8.Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native_svg5.Path,
+    {
+      fill: resolvedColor,
+      opacity: 0.3,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native_svg5.Circle,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native_svg5.Rect,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
+      ...animatedProps
+    }
+  );
+  const renderSquareFilled = () => /* @__PURE__ */ import_react13.default.createElement(
+    AnimatedPath4,
+    {
+      fill: resolvedColor,
+      d: "M400 64H112a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-59.31 244.69a16 16 0 1 1-22.62 22.62L256 278.63l-62.07 52.68a16 16 0 0 1-22.62-22.62L223.37 256l-52.06-52.69a16 16 0 0 1 22.62-22.62L256 233.37l62.07-52.68a16 16 0 0 1 22.62 22.62L288.63 256z",
+      ...animatedProps
+    }
+  );
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+        return renderRoundFilled();
+      case "square-filled":
+        return renderSquareFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ import_react13.default.createElement(import_react_native_svg5.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
+var import_react_native9 = require("react-native");
+var styles2 = import_react_native9.StyleSheet.create({
+  backdrop: {
+    ...import_react_native9.StyleSheet.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
+var addOpacityToColor = (color, opacity) => {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+var AutocompleteDialogHeader = ({
+  title,
+  inputValue,
+  placeholder = "Search...",
+  inputRef,
+  inputAnimatedStyle,
+  inputTextStyle,
+  onInputChange,
+  onClose,
+  onCheckmarkPress,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useXUITheme();
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, { style: styles2.header }, title ? /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, { style: styles2.titleRow }, /* @__PURE__ */ import_react14.default.createElement(
+    import_react_native10.Pressable,
+    {
+      style: styles2.backButton,
+      onPress: onClose,
+      accessibilityLabel: "Back",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react14.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react14.default.createElement(import_react_native10.Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, { style: styles2.inputContainer }, /* @__PURE__ */ import_react14.default.createElement(import_react_native10.Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react14.default.createElement(
+    import_react_native10.TextInput,
+    {
+      ref: inputRef,
+      value: inputValue,
+      onChangeText: onInputChange,
+      placeholder,
+      placeholderTextColor: addOpacityToColor(
+        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__ */ import_react14.default.createElement(
+    import_react_native10.Pressable,
+    {
+      style: styles2.clearInputButton,
+      onPress: () => onInputChange?.(""),
+      accessibilityLabel: "Clear input",
+      accessibilityRole: "button"
+    },
+    /* @__PURE__ */ import_react14.default.createElement(CloseIcon, { color: theme.colors.foreground })
+  ) : null)));
+};
+
+// src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
+var import_react15 = require("react");
+var import_react_native11 = require("react-native");
+var useAutocompleteDialogAnimation = ({
+  visible,
+  fadeAnim,
+  slideAnim,
+  scaleAnim
+}) => {
+  (0, import_react15.useEffect)(() => {
+    if (visible) {
+      import_react_native11.Animated.parallel([
+        import_react_native11.Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true
+        }),
+        import_react_native11.Animated.spring(slideAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 65,
+          friction: 10
+        }),
+        import_react_native11.Animated.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 } = (0, import_react_native12.useWindowDimensions)();
+  const fadeAnim = (0, import_react16.useRef)(new import_react_native12.Animated.Value(0)).current;
+  const slideAnim = (0, import_react16.useRef)(new import_react_native12.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react16.useRef)(new import_react_native12.Animated.Value(0)).current;
+  const inputRef = (0, import_react16.useRef)(null);
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react16.useState)(0);
+  (0, import_react16.useEffect)(() => {
+    const showEvent = import_react_native12.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = import_react_native12.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = import_react_native12.Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSub = import_react_native12.Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  const items = (0, import_react16.useMemo)(
+    () => import_react16.default.Children.toArray(children).filter(
+      import_react16.default.isValidElement
+    ),
+    [children]
+  );
+  const checkmarkColor = theme.colors[themeColor].main;
+  const checkmarkBackgroundColor = theme.colors[themeColor].background;
+  useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
+  (0, import_react16.useEffect)(() => {
+    if (!visible) return;
+    const sub = import_react_native12.BackHandler.addEventListener("hardwareBackPress", () => {
+      onClose?.();
+      return true;
+    });
+    return () => sub.remove();
+  }, [visible, onClose]);
+  const focusInput = (0, import_react16.useCallback)(() => {
+    const delay = import_react_native12.Platform.OS === "android" ? 300 : 100;
+    import_react_native12.InteractionManager.runAfterInteractions(() => {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, delay);
+    });
+  }, []);
+  const handleCheckmarkPress = () => {
+    onCheckmark?.();
+    import_react_native12.Keyboard.dismiss();
+  };
+  (0, import_react16.useEffect)(() => {
+    if (!visible) {
+      import_react_native12.Keyboard.dismiss();
+      return;
+    }
+    focusInput();
+  }, [focusInput, visible]);
+  const listBottomPadding = (0, import_react16.useMemo)(() => {
+    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__ */ import_react16.default.createElement(
+    AutocompleteDialogHeader,
+    {
+      title,
+      inputValue,
+      placeholder,
+      inputRef,
+      inputAnimatedStyle,
+      inputTextStyle,
+      onInputChange,
+      onClose,
+      onCheckmarkPress: handleCheckmarkPress,
+      onFocus,
+      onBlur
+    }
+  );
+  return /* @__PURE__ */ import_react16.default.createElement(Portal, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native12.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react16.default.createElement(import_react_native12.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react16.default.createElement(import_react_native12.Animated.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react16.default.createElement(
+    import_react_native12.View,
+    {
+      style: [styles2.container, { backgroundColor: theme.colors.background }]
+    },
+    listHeader,
+    /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native12.FlatList,
+      {
+        data: items,
+        renderItem: ({ item }) => item,
+        keyExtractor: (_, index) => String(index),
+        style: styles2.listContainer,
+        contentContainerStyle: {
+          paddingBottom: listBottomPadding
+        },
+        keyboardShouldPersistTaps: "always",
+        keyboardDismissMode: "none",
+        showsVerticalScrollIndicator: false
+      }
+    ),
+    showCheckmark ? /* @__PURE__ */ import_react16.default.createElement(import_react_native12.View, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native12.Pressable,
+      {
+        style: [
+          styles2.checkmarkButton,
+          { backgroundColor: checkmarkBackgroundColor }
+        ],
+        onPress: handleCheckmarkPress,
+        accessibilityLabel: "Confirm",
+        accessibilityRole: "button"
+      },
+      checkmarkIcon ?? /* @__PURE__ */ import_react16.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+    )) : null
+  ))));
+};
+
+// src/components/autocomplete/autocomplete-trigger.tsx
+var import_react17 = __toESM(require("react"), 1);
+var import_react_native13 = require("react-native");
+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__ */ import_react17.default.createElement(
+    import_react_native13.Pressable,
+    {
+      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__ */ import_react17.default.createElement(import_react_native13.View, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react17.default.createElement(
+      import_react_native13.Text,
+      {
+        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__ */ import_react17.default.createElement(
+      import_react_native13.TouchableOpacity,
+      {
+        onPress: handleClear,
+        style: styles.clearButton,
+        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
+      },
+      clearIcon ?? /* @__PURE__ */ import_react17.default.createElement(CloseIcon, { 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,
+  style,
+  textStyle,
+  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 = (0, import_react18.useRef)(null);
+  const [triggerLayout, setTriggerLayout] = (0, import_react18.useState)();
+  const handleTriggerLayout = (0, import_react18.useCallback)(() => {
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerLayout({ x, y, width, height });
+    });
+  }, []);
+  const items = (0, import_react18.useMemo)(() => {
+    const elements = import_react18.default.Children.toArray(children).filter(Boolean);
+    return elements.map((child, index) => {
+      if (!import_react18.default.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 = (0, import_react18.useMemo)(() => {
+    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 = (0, import_react18.useCallback)(
+    (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 = (0, import_react18.useCallback)(
+    (key, itemLabel) => {
+      if (isDisabled) {
+        return;
+      }
+      updateSelection(key);
+      updateInputValue(itemLabel);
+      setTimeout(() => {
+        import_react_native14.Keyboard.dismiss();
+        setOpen(false);
+      }, 50);
+    },
+    [isDisabled, updateSelection, updateInputValue, setOpen]
+  );
+  const handleCheckmark = (0, import_react18.useCallback)(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const handleClear = (0, import_react18.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
+    updateSelection(null);
+    updateInputValue("");
+    onClear?.();
+  }, [isDisabled, updateSelection, updateInputValue, onClear]);
+  const handleTriggerPress = (0, import_react18.useCallback)(() => {
+    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 import_react18.default.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__ */ import_react18.default.createElement(import_react_native14.Text, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ import_react18.default.createElement(import_react_native14.View, null, label) : null;
+  const shouldShowHelper = Boolean(description || errorMessage);
+  const helperContent = isInvalid && errorMessage ? errorMessage : description;
+  const triggerContent = /* @__PURE__ */ import_react18.default.createElement(
+    AutocompleteTrigger,
+    {
+      triggerRef,
+      isDisabled,
+      currentSelectedKey,
+      currentInputValue,
+      displayValue,
+      sizeStyles,
+      radiusStyles,
+      variantStyles,
+      theme,
+      isClearable,
+      label: renderLabel,
+      labelText: typeof label === "string" ? label : void 0,
+      isLabelInside,
+      clearIcon,
+      style,
+      textStyle,
+      onPress: handleTriggerPress,
+      onClear: handleClear,
+      onLayout: handleTriggerLayout
+    }
+  );
+  const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native14.View, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react18.default.createElement(import_react_native14.View, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react18.default.createElement(import_react_native14.Text, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react18.default.createElement(import_react_native14.View, null, helperContent) : null, /* @__PURE__ */ import_react18.default.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__ */ import_react18.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react18.default.createElement(import_react_native14.Text, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+  ));
+};
+
+// src/components/autocomplete/autocomplete-item.tsx
+var import_react20 = __toESM(require("react"), 1);
+var import_react_native16 = require("react-native");
+
+// src/components/autocomplete/autocomplete-item.style.ts
+var import_react_native15 = require("react-native");
+var styles3 = import_react_native15.StyleSheet.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
+var import_react19 = require("react");
+var import_core10 = require("@xaui/core");
+var useAutocompleteItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react19.useMemo)(() => {
+    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 = (0, import_core10.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react19.useMemo)(() => {
+    return "transparent";
+  }, [isSelected, colorScheme]);
+};
+var useAutocompleteItemTextColors = () => {
+  const theme = useXUITheme();
+  return (0, import_react19.useMemo)(() => {
+    return {
+      textColor: theme.colors.foreground,
+      descriptionColor: theme.colors.foreground
+    };
+  }, [theme]);
+};
+var useAutocompleteItemCheckmarkColor = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core10.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  return (0, import_react19.useMemo)(() => {
+    if (themeColor === "default") {
+      return theme.colors.primary.main;
+    }
+    return colorScheme.main;
+  }, [themeColor, colorScheme, theme]);
+};
+var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
+  const context = (0, import_react19.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,
+  style,
+  textStyle,
+  onSelected
+}) => {
+  const context = (0, import_react20.useContext)(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__ */ import_react20.default.createElement(
+    import_react_native16.Pressable,
+    {
+      onPress: handlePress,
+      disabled: isItemDisabled,
+      style: [
+        styles3.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor
+        },
+        isItemDisabled && styles3.disabled,
+        style
+      ]
+    },
+    startContent,
+    /* @__PURE__ */ import_react20.default.createElement(import_react_native16.View, { style: styles3.content }, /* @__PURE__ */ import_react20.default.createElement(
+      import_react_native16.Text,
+      {
+        style: [
+          styles3.title,
+          { fontSize: sizeStyles.titleSize, color: labelColor },
+          textStyle
+        ]
+      },
+      label
+    ), description && /* @__PURE__ */ import_react20.default.createElement(
+      import_react_native16.Text,
+      {
+        style: [
+          styles3.description,
+          { fontSize: sizeStyles.descriptionSize, color: descriptionColor }
+        ]
+      },
+      description
+    )),
+    endContent
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Autocomplete,
+  AutocompleteItem
+});