@xaui/native 0.0.12 → 0.0.13

package/dist/autocomplete/index.cjs

@@ -36,8 +36,8 @@ __export(autocomplete_exports, {
 module.exports = __toCommonJS(autocomplete_exports);
 
 // src/components/autocomplete/autocomplete.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_react_native17 = require("react-native");
+var import_react14 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
 
 // src/components/autocomplete/autocomplete-context.ts
 var import_react = require("react");
@@ -358,7 +358,9 @@ var useAutocompleteInputState = ({
   selectedKey,
   onInputChange
 }) => {
-  const [internalInputValue, setInternalInputValue] = (0, import_react8.useState)(defaultInputValue ?? "");
+  const [internalInputValue, setInternalInputValue] = (0, import_react8.useState)(
+    defaultInputValue ?? ""
+  );
   const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
   const updateInputValue = (0, import_react8.useCallback)(
     (value) => {
@@ -404,8 +406,8 @@ var defaultFilterFunction = (textValue, inputValue) => {
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-var import_react19 = __toESM(require("react"), 1);
-var import_react_native15 = require("react-native");
+var import_react12 = __toESM(require("react"), 1);
+var import_react_native8 = require("react-native");
 
 // src/components/select/checkmark-icon.tsx
 var import_react9 = __toESM(require("react"), 1);
@@ -424,312 +426,15 @@ function CheckmarkIcon({ color, size }) {
 }
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var import_react17 = __toESM(require("react"), 1);
-var import_react_native13 = 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/calendar.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/checkmark.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/chevron-down.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);
-
-// src/components/icon/icons/chevron-left.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_react_native9 = require("react-native");
-var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath5 = import_react_native9.Animated.createAnimatedComponent(import_react_native_svg6.Path);
-
-// src/components/icon/icons/chevron-right.tsx
-var import_react15 = __toESM(require("react"), 1);
-var import_react_native10 = require("react-native");
-var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath6 = import_react_native10.Animated.createAnimatedComponent(import_react_native_svg7.Path);
-
-// src/components/icon/icons/close.tsx
-var import_react16 = __toESM(require("react"), 1);
-var import_react_native11 = require("react-native");
-var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath7 = import_react_native11.Animated.createAnimatedComponent(import_react_native_svg8.Path);
-var CloseIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react16.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react16.useRef)(new import_react_native11.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react16.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react16.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native11.Animated.parallel([
-        import_react_native11.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native11.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_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native_svg8.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_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native_svg8.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native_svg8.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(
-    AnimatedPath7,
-    {
-      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_react16.default.createElement(import_react_native_svg8.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
+var import_icons = require("@xaui/icons");
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
-var import_react_native12 = require("react-native");
-var styles2 = import_react_native12.StyleSheet.create({
+var import_react_native5 = require("react-native");
+var styles2 = import_react_native5.StyleSheet.create({
   backdrop: {
-    ...import_react_native12.StyleSheet.absoluteFillObject,
+    ...import_react_native5.StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   dialogContainer: {
@@ -824,26 +529,23 @@ var AutocompleteDialogHeader = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_native13.View, { style: styles2.header }, title ? /* @__PURE__ */ import_react17.default.createElement(import_react_native13.View, { style: styles2.titleRow }, /* @__PURE__ */ import_react17.default.createElement(
-    import_react_native13.Pressable,
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles2.header }, title ? /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles2.titleRow }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.Pressable,
     {
       style: styles2.backButton,
       onPress: onClose,
       accessibilityLabel: "Back",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react17.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ import_react17.default.createElement(import_react_native13.Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react17.default.createElement(import_react_native13.View, { style: styles2.inputContainer }, /* @__PURE__ */ import_react17.default.createElement(import_react_native13.Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react17.default.createElement(
-    import_react_native13.TextInput,
+    /* @__PURE__ */ import_react10.default.createElement(import_icons.ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Text, { style: [styles2.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles2.inputContainer }, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Animated.View, { style: [styles2.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.TextInput,
     {
       ref: inputRef,
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(
-        theme.colors.foreground,
-        0.5
-      ),
+      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
       style: [
         styles2.input,
         {
@@ -858,42 +560,42 @@ var AutocompleteDialogHeader = ({
       onFocus,
       onBlur
     }
-  ), inputValue ? /* @__PURE__ */ import_react17.default.createElement(
-    import_react_native13.Pressable,
+  ), inputValue ? /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native6.Pressable,
     {
       style: styles2.clearInputButton,
       onPress: () => onInputChange?.(""),
       accessibilityLabel: "Clear input",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react17.default.createElement(CloseIcon, { color: theme.colors.foreground })
+    /* @__PURE__ */ import_react10.default.createElement(import_icons.CloseIcon, { color: theme.colors.foreground })
   ) : null)));
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
-var import_react18 = require("react");
-var import_react_native14 = require("react-native");
+var import_react11 = require("react");
+var import_react_native7 = require("react-native");
 var useAutocompleteDialogAnimation = ({
   visible,
   fadeAnim,
   slideAnim,
   scaleAnim
 }) => {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (visible) {
-      import_react_native14.Animated.parallel([
-        import_react_native14.Animated.timing(fadeAnim, {
+      import_react_native7.Animated.parallel([
+        import_react_native7.Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 250,
           useNativeDriver: true
         }),
-        import_react_native14.Animated.spring(slideAnim, {
+        import_react_native7.Animated.spring(slideAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 65,
           friction: 10
         }),
-        import_react_native14.Animated.spring(scaleAnim, {
+        import_react_native7.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
@@ -927,19 +629,19 @@ var AutocompleteDialog = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native15.useWindowDimensions)();
-  const fadeAnim = (0, import_react19.useRef)(new import_react_native15.Animated.Value(0)).current;
-  const slideAnim = (0, import_react19.useRef)(new import_react_native15.Animated.Value(0)).current;
-  const scaleAnim = (0, import_react19.useRef)(new import_react_native15.Animated.Value(0)).current;
-  const inputRef = (0, import_react19.useRef)(null);
-  const [keyboardHeight, setKeyboardHeight] = (0, import_react19.useState)(0);
-  (0, import_react19.useEffect)(() => {
-    const showEvent = import_react_native15.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-    const hideEvent = import_react_native15.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-    const showSub = import_react_native15.Keyboard.addListener(showEvent, (e) => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native8.useWindowDimensions)();
+  const fadeAnim = (0, import_react12.useRef)(new import_react_native8.Animated.Value(0)).current;
+  const slideAnim = (0, import_react12.useRef)(new import_react_native8.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react12.useRef)(new import_react_native8.Animated.Value(0)).current;
+  const inputRef = (0, import_react12.useRef)(null);
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
+    const showEvent = import_react_native8.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = import_react_native8.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = import_react_native8.Keyboard.addListener(showEvent, (e) => {
       setKeyboardHeight(e.endCoordinates.height);
     });
-    const hideSub = import_react_native15.Keyboard.addListener(hideEvent, () => {
+    const hideSub = import_react_native8.Keyboard.addListener(hideEvent, () => {
       setKeyboardHeight(0);
     });
     return () => {
@@ -947,26 +649,26 @@ var AutocompleteDialog = ({
       hideSub.remove();
     };
   }, []);
-  const items = (0, import_react19.useMemo)(
-    () => import_react19.default.Children.toArray(children).filter(
-      import_react19.default.isValidElement
+  const items = (0, import_react12.useMemo)(
+    () => import_react12.default.Children.toArray(children).filter(
+      import_react12.default.isValidElement
     ),
     [children]
   );
   const checkmarkColor = theme.colors[themeColor].main;
   const checkmarkBackgroundColor = theme.colors[themeColor].background;
   useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
-  (0, import_react19.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!visible) return;
-    const sub = import_react_native15.BackHandler.addEventListener("hardwareBackPress", () => {
+    const sub = import_react_native8.BackHandler.addEventListener("hardwareBackPress", () => {
       onClose?.();
       return true;
     });
     return () => sub.remove();
   }, [visible, onClose]);
-  const focusInput = (0, import_react19.useCallback)(() => {
-    const delay = import_react_native15.Platform.OS === "android" ? 300 : 100;
-    import_react_native15.InteractionManager.runAfterInteractions(() => {
+  const focusInput = (0, import_react12.useCallback)(() => {
+    const delay = import_react_native8.Platform.OS === "android" ? 300 : 100;
+    import_react_native8.InteractionManager.runAfterInteractions(() => {
       setTimeout(() => {
         inputRef.current?.focus();
       }, delay);
@@ -974,16 +676,16 @@ var AutocompleteDialog = ({
   }, []);
   const handleCheckmarkPress = () => {
     onCheckmark?.();
-    import_react_native15.Keyboard.dismiss();
+    import_react_native8.Keyboard.dismiss();
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!visible) {
-      import_react_native15.Keyboard.dismiss();
+      import_react_native8.Keyboard.dismiss();
       return;
     }
     focusInput();
   }, [focusInput, visible]);
-  const listBottomPadding = (0, import_react19.useMemo)(() => {
+  const listBottomPadding = (0, import_react12.useMemo)(() => {
     const basePadding = showCheckmark ? 96 : 64;
     return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
   }, [keyboardHeight, showCheckmark]);
@@ -1008,7 +710,7 @@ var AutocompleteDialog = ({
   const inputAnimatedStyle = {
     transform: [{ scaleX: scaleAnim }]
   };
-  const listHeader = /* @__PURE__ */ import_react19.default.createElement(
+  const listHeader = /* @__PURE__ */ import_react12.default.createElement(
     AutocompleteDialogHeader,
     {
       title,
@@ -1024,14 +726,14 @@ var AutocompleteDialog = ({
       onBlur
     }
   );
-  return /* @__PURE__ */ import_react19.default.createElement(Portal, null, /* @__PURE__ */ import_react19.default.createElement(import_react_native15.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react19.default.createElement(import_react_native15.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react19.default.createElement(import_react_native15.Animated.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react19.default.createElement(
-    import_react_native15.View,
+  return /* @__PURE__ */ import_react12.default.createElement(Portal, null, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react12.default.createElement(import_react_native8.Animated.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react12.default.createElement(import_react_native8.Animated.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react12.default.createElement(
+    import_react_native8.View,
     {
       style: [styles2.container, { backgroundColor: theme.colors.background }]
     },
     listHeader,
-    /* @__PURE__ */ import_react19.default.createElement(
-      import_react_native15.FlatList,
+    /* @__PURE__ */ import_react12.default.createElement(
+      import_react_native8.FlatList,
       {
         data: items,
         renderItem: ({ item }) => item,
@@ -1045,8 +747,8 @@ var AutocompleteDialog = ({
         showsVerticalScrollIndicator: false
       }
     ),
-    showCheckmark ? /* @__PURE__ */ import_react19.default.createElement(import_react_native15.View, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ import_react19.default.createElement(
-      import_react_native15.Pressable,
+    showCheckmark ? /* @__PURE__ */ import_react12.default.createElement(import_react_native8.View, { style: styles2.checkmarkButtonContainer }, /* @__PURE__ */ import_react12.default.createElement(
+      import_react_native8.Pressable,
       {
         style: [
           styles2.checkmarkButton,
@@ -1056,14 +758,15 @@ var AutocompleteDialog = ({
         accessibilityLabel: "Confirm",
         accessibilityRole: "button"
       },
-      checkmarkIcon ?? /* @__PURE__ */ import_react19.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+      checkmarkIcon ?? /* @__PURE__ */ import_react12.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
     )) : null
   ))));
 };
 
 // src/components/autocomplete/autocomplete-trigger.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_react_native16 = require("react-native");
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
+var import_icons2 = require("@xaui/icons");
 var AutocompleteTrigger = ({
   triggerRef,
   isDisabled,
@@ -1086,8 +789,8 @@ var AutocompleteTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ import_react20.default.createElement(
-    import_react_native16.Pressable,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native9.Pressable,
     {
       ref: triggerRef,
       onPress: handleTriggerPress,
@@ -1109,8 +812,8 @@ var AutocompleteTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ import_react20.default.createElement(import_react_native16.View, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react20.default.createElement(
-      import_react_native16.Text,
+    /* @__PURE__ */ import_react13.default.createElement(import_react_native9.View, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native9.Text,
       {
         style: [
           styles.triggerText,
@@ -1123,14 +826,14 @@ var AutocompleteTrigger = ({
       },
       displayValue
     )),
-    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react20.default.createElement(
-      import_react_native16.TouchableOpacity,
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react13.default.createElement(
+      import_react_native9.TouchableOpacity,
       {
         onPress: handleClear,
         style: styles.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      clearIcon ?? /* @__PURE__ */ import_react20.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+      clearIcon ?? /* @__PURE__ */ import_react13.default.createElement(import_icons2.CloseIcon, { color: theme.colors.foreground, size: 20 })
     ) : null
   );
 };
@@ -1181,17 +884,17 @@ var Autocomplete = ({
     onOpenChange,
     onClose
   });
-  const triggerRef = (0, import_react21.useRef)(null);
-  const [triggerLayout, setTriggerLayout] = (0, import_react21.useState)();
-  const handleTriggerLayout = (0, import_react21.useCallback)(() => {
+  const triggerRef = (0, import_react14.useRef)(null);
+  const [triggerLayout, setTriggerLayout] = (0, import_react14.useState)();
+  const handleTriggerLayout = (0, import_react14.useCallback)(() => {
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setTriggerLayout({ x, y, width, height });
     });
   }, []);
-  const items = (0, import_react21.useMemo)(() => {
-    const elements = import_react21.default.Children.toArray(children).filter(Boolean);
+  const items = (0, import_react14.useMemo)(() => {
+    const elements = import_react14.default.Children.toArray(children).filter(Boolean);
     return elements.map((child, index) => {
-      if (!import_react21.default.isValidElement(child)) {
+      if (!import_react14.default.isValidElement(child)) {
         return null;
       }
       const key = child.props.value ?? String(index);
@@ -1203,7 +906,7 @@ var Autocomplete = ({
       };
     }).filter((item) => item !== null);
   }, [children]);
-  const filteredItems = (0, import_react21.useMemo)(() => {
+  const filteredItems = (0, import_react14.useMemo)(() => {
     if (disableLocalFilter || !currentInputValue.trim()) {
       return items;
     }
@@ -1223,7 +926,7 @@ var Autocomplete = ({
   const helperColor = useAutocompleteHelperColor(isInvalid);
   const selectedItem = items.find((item) => item.key === currentSelectedKey);
   const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
-  const handleInputChange = (0, import_react21.useCallback)(
+  const handleInputChange = (0, import_react14.useCallback)(
     (text) => {
       updateInputValue(text);
       const selectedLabel = selectedItem?.labelText ?? "";
@@ -1240,7 +943,7 @@ var Autocomplete = ({
       currentSelectedKey
     ]
   );
-  const handleItemSelection = (0, import_react21.useCallback)(
+  const handleItemSelection = (0, import_react14.useCallback)(
     (key, itemLabel) => {
       if (isDisabled) {
         return;
@@ -1248,16 +951,16 @@ var Autocomplete = ({
       updateSelection(key);
       updateInputValue(itemLabel);
       setTimeout(() => {
-        import_react_native17.Keyboard.dismiss();
+        import_react_native10.Keyboard.dismiss();
         setOpen(false);
       }, 50);
     },
     [isDisabled, updateSelection, updateInputValue, setOpen]
   );
-  const handleCheckmark = (0, import_react21.useCallback)(() => {
+  const handleCheckmark = (0, import_react14.useCallback)(() => {
     setOpen(false);
   }, [setOpen]);
-  const handleClear = (0, import_react21.useCallback)(() => {
+  const handleClear = (0, import_react14.useCallback)(() => {
     if (isDisabled) {
       return;
     }
@@ -1265,7 +968,7 @@ var Autocomplete = ({
     updateInputValue("");
     onClear?.();
   }, [isDisabled, updateSelection, updateInputValue, onClear]);
-  const handleTriggerPress = (0, import_react21.useCallback)(() => {
+  const handleTriggerPress = (0, import_react14.useCallback)(() => {
     if (!isDisabled) {
       if (selectedItem && !currentInputValue) {
         updateInputValue(selectedItem.labelText);
@@ -1284,7 +987,7 @@ var Autocomplete = ({
       handleItemSelection(item.key, item.labelText);
       itemProps.onSelected?.();
     };
-    return import_react21.default.cloneElement(item.element, {
+    return import_react14.default.cloneElement(item.element, {
       key: item.key,
       isDisabled: itemDisabled,
       isSelected: itemSelected,
@@ -1295,10 +998,10 @@ var Autocomplete = ({
   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_react21.default.createElement(import_react_native17.Text, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ import_react21.default.createElement(import_react_native17.View, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react14.default.createElement(import_react_native10.Text, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ import_react21.default.createElement(
+  const triggerContent = /* @__PURE__ */ import_react14.default.createElement(
     AutocompleteTrigger,
     {
       triggerRef,
@@ -1323,7 +1026,7 @@ var Autocomplete = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ import_react21.default.createElement(import_react_native17.View, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react21.default.createElement(import_react_native17.View, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react21.default.createElement(import_react_native17.Text, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react21.default.createElement(import_react_native17.View, null, helperContent) : null, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, { style: [styles.container, fullWidth ? styles.fullWidth : styles.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react14.default.createElement(import_react_native10.Text, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react14.default.createElement(import_react_native10.View, null, helperContent) : null, /* @__PURE__ */ import_react14.default.createElement(
     AutocompleteDialog,
     {
       visible: isOpen,
@@ -1337,17 +1040,17 @@ var Autocomplete = ({
       onClose: () => setOpen(false),
       onCheckmark: handleCheckmark
     },
-    /* @__PURE__ */ import_react21.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react21.default.createElement(import_react_native17.Text, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+    /* @__PURE__ */ import_react14.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react14.default.createElement(import_react_native10.Text, { style: [styles.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
   ));
 };
 
 // src/components/autocomplete/autocomplete-item.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_react_native19 = require("react-native");
+var import_react16 = __toESM(require("react"), 1);
+var import_react_native12 = require("react-native");
 
 // src/components/autocomplete/autocomplete-item.style.ts
-var import_react_native18 = require("react-native");
-var styles3 = import_react_native18.StyleSheet.create({
+var import_react_native11 = require("react-native");
+var styles3 = import_react_native11.StyleSheet.create({
   item: {
     flexDirection: "row",
     alignItems: "center",
@@ -1369,11 +1072,11 @@ var styles3 = import_react_native18.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete-item.hook.ts
-var import_react22 = require("react");
-var import_core13 = require("@xaui/core");
+var import_react15 = require("react");
+var import_core6 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     const sizes = {
       xs: {
         paddingVertical: theme.spacing.sm,
@@ -1405,15 +1108,15 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core13.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     return "transparent";
   }, [isSelected, colorScheme]);
 };
 var useAutocompleteItemTextColors = () => {
   const theme = useXUITheme();
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     return {
       textColor: theme.colors.foreground,
       descriptionColor: theme.colors.foreground
@@ -1422,9 +1125,9 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core13.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.primary.main;
     }
@@ -1432,7 +1135,7 @@ var useAutocompleteItemCheckmarkColor = (themeColor) => {
   }, [themeColor, colorScheme, theme]);
 };
 var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
-  const context = (0, import_react22.useContext)(AutocompleteContext);
+  const context = (0, import_react15.useContext)(AutocompleteContext);
   const backgroundColor = useAutocompleteItemBackgroundColor(
     context.themeColor,
     isSelected
@@ -1461,7 +1164,7 @@ var AutocompleteItem = ({
   customAppearance,
   onSelected
 }) => {
-  const context = (0, import_react23.useContext)(AutocompleteContext);
+  const context = (0, import_react16.useContext)(AutocompleteContext);
   const size = context?.size ?? defaultSize;
   const isItemDisabled = context?.isDisabled ? true : isDisabled;
   const sizeStyles = useAutocompleteItemSizeStyles(size);
@@ -1472,8 +1175,8 @@ var AutocompleteItem = ({
     }
     onSelected?.();
   };
-  return /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native19.Pressable,
+  return /* @__PURE__ */ import_react16.default.createElement(
+    import_react_native12.Pressable,
     {
       onPress: handlePress,
       disabled: isItemDisabled,
@@ -1489,8 +1192,8 @@ var AutocompleteItem = ({
       ]
     },
     startContent,
-    /* @__PURE__ */ import_react23.default.createElement(import_react_native19.View, { style: styles3.content }, /* @__PURE__ */ import_react23.default.createElement(
-      import_react_native19.Text,
+    /* @__PURE__ */ import_react16.default.createElement(import_react_native12.View, { style: styles3.content }, /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native12.Text,
       {
         style: [
           styles3.title,
@@ -1499,8 +1202,8 @@ var AutocompleteItem = ({
         ]
       },
       label
-    ), description && /* @__PURE__ */ import_react23.default.createElement(
-      import_react_native19.Text,
+    ), description && /* @__PURE__ */ import_react16.default.createElement(
+      import_react_native12.Text,
       {
         style: [
           styles3.description,