@vellira-ui/react-native 2.35.1 → 2.36.0

package/dist/index.js

@@ -1,17 +1,502 @@
 // src/components/Dropdown/Content/DropdownContent.tsx
-import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
+import { Search } from "@vellira-ui/icons";
 import {
   AccessibilityInfo,
   Animated,
   Modal,
   Pressable,
   StyleSheet as StyleSheet2,
+  TextInput,
   View
 } from "react-native";
 
 // src/theme/ThemeProvider.tsx
-import { useMemo } from "react";
-import { useControllableState } from "@vellira-ui/core";
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useControllableState.ts
+import { useCallback, useState } from "react";
+var useControllableState = ({
+  value,
+  defaultValue,
+  onChange
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [currentValue, setValue];
+};
+
+// src/hooks/useDropdown.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useKeyboardNavigation.ts
+import { useCallback as useCallback2, useEffect, useRef } from "react";
+var useKeyboardNavigation = ({
+  activeIndex,
+  setActiveIndex,
+  items,
+  isOpen,
+  onOpen,
+  onSelect,
+  onClose,
+  getItemText,
+  loop = true
+}) => {
+  const searchRef = useRef({
+    value: "",
+    timeoutId: void 0
+  });
+  useEffect(
+    () => () => {
+      if (searchRef.current.timeoutId) {
+        clearTimeout(searchRef.current.timeoutId);
+      }
+    },
+    []
+  );
+  const getNextEnabledIndex = useCallback2(
+    (current, direction) => {
+      if (!items.length) return current;
+      let index = current;
+      for (let i = 0; i < items.length; i++) {
+        const nextIndex = index + direction;
+        if (!loop && (nextIndex < 0 || nextIndex >= items.length)) {
+          return current;
+        }
+        index = (nextIndex + items.length) % items.length;
+        if (!items[index]?.disabled) {
+          return index;
+        }
+      }
+      return current;
+    },
+    [items, loop]
+  );
+  const getFirstEnabledIndex = useCallback2(
+    () => items.findIndex((item) => !item.disabled),
+    [items]
+  );
+  const getLastEnabledIndex = useCallback2(() => {
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!items[i].disabled) {
+        return i;
+      }
+    }
+    return -1;
+  }, [items]);
+  const getTypeaheadIndex = useCallback2(
+    (query) => {
+      if (!getItemText || !query) return -1;
+      const normalizedQuery = query.toLocaleLowerCase();
+      const startIndex = activeIndex >= 0 ? activeIndex + 1 : 0;
+      for (let offset = 0; offset < items.length; offset++) {
+        const index = (startIndex + offset) % items.length;
+        const item = items[index];
+        if (item && !item.disabled && getItemText(item).toLocaleLowerCase().startsWith(normalizedQuery)) {
+          return index;
+        }
+      }
+      return -1;
+    },
+    [activeIndex, getItemText, items]
+  );
+  const onKeyDown = useCallback2(
+    (event) => {
+      if (!isOpen) {
+        if (event.key === " " || event.key === "Enter" || event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          onOpen(event);
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setActiveIndex(getNextEnabledIndex(activeIndex, 1));
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setActiveIndex(getNextEnabledIndex(activeIndex, -1));
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          onSelect?.();
+          break;
+        case "Escape":
+          event.preventDefault();
+          onClose?.();
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveIndex(getFirstEnabledIndex());
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveIndex(getLastEnabledIndex());
+          break;
+        case "Tab":
+          onClose?.();
+          break;
+        default:
+          if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            event.preventDefault();
+            if (searchRef.current.timeoutId) {
+              clearTimeout(searchRef.current.timeoutId);
+            }
+            searchRef.current.value += event.key;
+            searchRef.current.timeoutId = setTimeout(() => {
+              searchRef.current.value = "";
+              searchRef.current.timeoutId = void 0;
+            }, 700);
+            const nextIndex = getTypeaheadIndex(searchRef.current.value);
+            if (nextIndex >= 0) {
+              setActiveIndex(nextIndex);
+            }
+          }
+          break;
+      }
+    },
+    [
+      activeIndex,
+      isOpen,
+      onOpen,
+      onSelect,
+      onClose,
+      setActiveIndex,
+      getNextEnabledIndex,
+      getFirstEnabledIndex,
+      getLastEnabledIndex,
+      getTypeaheadIndex
+    ]
+  );
+  return { onKeyDown };
+};
+
+// src/hooks/useDropdown.ts
+var useDropdown = ({
+  items,
+  open,
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange,
+  onSelect,
+  getItemValue,
+  getItemText,
+  loop = true
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const [activeIndex, setActiveIndex] = useState2(-1);
+  const isControlled = open !== void 0;
+  const isOpen = open ?? uncontrolledOpen;
+  const getFirstEnabledIndex = useCallback3(
+    () => items.findIndex((item) => !item.disabled),
+    [items]
+  );
+  const getLastEnabledIndex = useCallback3(() => {
+    for (let index = items.length - 1; index >= 0; index--) {
+      if (!items[index]?.disabled) {
+        return index;
+      }
+    }
+    return -1;
+  }, [items]);
+  const syncActiveIndex = useCallback3(
+    (nextOpen, initialIndex) => {
+      if (nextOpen) {
+        setActiveIndex((currentIndex) => {
+          if (currentIndex >= 0 && !items[currentIndex]?.disabled) {
+            return currentIndex;
+          }
+          return initialIndex ?? getFirstEnabledIndex();
+        });
+        return;
+      }
+      setActiveIndex(-1);
+    },
+    [getFirstEnabledIndex, items]
+  );
+  useEffect2(() => {
+    syncActiveIndex(isOpen);
+  }, [isOpen, syncActiveIndex]);
+  const setOpen = useCallback3(
+    (nextOpen, initialIndex) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+      syncActiveIndex(nextOpen, initialIndex);
+    },
+    [isControlled, onOpenChange, syncActiveIndex]
+  );
+  const openDropdown = useCallback3(
+    (initialIndex = getFirstEnabledIndex()) => {
+      if (disabled) return;
+      setOpen(true, initialIndex);
+    },
+    [disabled, getFirstEnabledIndex, setOpen]
+  );
+  const closeDropdown = useCallback3(() => {
+    if (!isOpen) return;
+    setOpen(false);
+  }, [isOpen, setOpen]);
+  const toggleDropdown = useCallback3(() => {
+    if (disabled) return;
+    if (isOpen) {
+      setOpen(false);
+      return;
+    }
+    openDropdown();
+  }, [disabled, isOpen, openDropdown, setOpen]);
+  const selectItem = useCallback3(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(getItemValue(item, items.indexOf(item)));
+      closeDropdown();
+    },
+    [closeDropdown, getItemValue, items, onSelect]
+  );
+  const selectActiveItem = useCallback3(() => {
+    const item = items[activeIndex];
+    if (!item) return;
+    selectItem(item);
+  }, [activeIndex, items, selectItem]);
+  const { onKeyDown } = useKeyboardNavigation({
+    activeIndex,
+    setActiveIndex,
+    items,
+    isOpen,
+    onOpen: (event) => {
+      openDropdown(
+        event.key === "ArrowUp" ? getLastEnabledIndex() : getFirstEnabledIndex()
+      );
+    },
+    onSelect: selectActiveItem,
+    onClose: closeDropdown,
+    getItemText,
+    loop
+  });
+  return {
+    activeIndex,
+    setActiveIndex,
+    isOpen,
+    open: isOpen,
+    setOpen,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectItem,
+    select: selectItem,
+    selectActiveItem,
+    onKeyDown,
+    getFirstEnabledIndex,
+    getLastEnabledIndex
+  };
+};
+
+// src/hooks/useModal.ts
+import { useCallback as useCallback4, useId } from "react";
+var useModal = ({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  closeOnEscape,
+  closeOnOutsidePress
+}) => {
+  const contentId = useId();
+  const titleId = useId();
+  const descriptionId = useId();
+  const [resolvedOpen, setResolvedOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const requestClose = useCallback4(() => {
+    setResolvedOpen(false);
+  }, [setResolvedOpen]);
+  return {
+    open: resolvedOpen,
+    shouldRender: resolvedOpen,
+    setOpen: setResolvedOpen,
+    requestClose,
+    closeOnOutsidePress: closeOnOutsidePress ?? true,
+    closeOnEscape: closeOnEscape ?? true,
+    contentId,
+    titleId,
+    descriptionId
+  };
+};
+
+// src/hooks/useSelect.ts
+import { useCallback as useCallback5, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+var useSelect = ({
+  value,
+  defaultValue,
+  onValueChange,
+  onChange,
+  options,
+  multiple = false,
+  maxSelected,
+  closeOnSelect = !multiple,
+  disabled = false,
+  open,
+  defaultOpen = false,
+  onOpenChange
+}) => {
+  const [selectedValue, setSelectedValue] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? (multiple ? [] : ""),
+    onChange: onValueChange ?? onChange
+  });
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [activeIndex, setActiveIndex] = useState3(-1);
+  const selectedValues = useMemo(
+    () => Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [],
+    [selectedValue]
+  );
+  const selectedOption = useMemo(
+    () => options.find((option) => selectedValues.includes(option.value)),
+    [options, selectedValues]
+  );
+  const selectedOptions = useMemo(
+    () => options.filter((option) => selectedValues.includes(option.value)),
+    [options, selectedValues]
+  );
+  const getInitialActiveIndex = useCallback5(() => {
+    const selectedIndex = options.findIndex(
+      (option) => selectedValues.includes(option.value) && !option.disabled
+    );
+    if (selectedIndex >= 0) return selectedIndex;
+    return options.findIndex((option) => !option.disabled);
+  }, [options, selectedValues]);
+  const openDropdown = useCallback5(() => {
+    if (disabled) return;
+    setActiveIndex(getInitialActiveIndex());
+    setIsOpen(true);
+  }, [disabled, getInitialActiveIndex, setIsOpen]);
+  const closeDropdown = useCallback5(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  const toggleDropdown = useCallback5(() => {
+    if (disabled) return;
+    if (isOpen) {
+      closeDropdown();
+      return;
+    }
+    openDropdown();
+  }, [closeDropdown, disabled, isOpen, openDropdown]);
+  useEffect3(() => {
+    if (!isOpen) return;
+    setActiveIndex((currentIndex) => {
+      const currentOption = options[currentIndex];
+      if (currentOption && !currentOption.disabled) {
+        return currentIndex;
+      }
+      return getInitialActiveIndex();
+    });
+  }, [getInitialActiveIndex, isOpen, options]);
+  const selectValue = useCallback5(
+    (nextValue) => {
+      if (nextValue === "") {
+        setSelectedValue(multiple ? [] : "");
+        closeDropdown();
+        return;
+      }
+      const nextOption = options.find((option) => option.value === nextValue);
+      if (!nextOption || nextOption.disabled) return;
+      if (multiple) {
+        const isSelected = selectedValues.includes(nextValue);
+        if (!isSelected && typeof maxSelected === "number" && selectedValues.length >= maxSelected) {
+          return;
+        }
+        const nextValues = selectedValues.includes(nextValue) ? selectedValues.filter((value2) => value2 !== nextValue) : [...selectedValues, nextValue];
+        setSelectedValue(nextValues);
+        if (closeOnSelect) {
+          closeDropdown();
+        }
+        return;
+      }
+      setSelectedValue(nextValue);
+      setActiveIndex(options.indexOf(nextOption));
+      closeDropdown();
+    },
+    [
+      closeDropdown,
+      closeOnSelect,
+      maxSelected,
+      multiple,
+      options,
+      selectedValues,
+      setSelectedValue
+    ]
+  );
+  const selectActiveOption = useCallback5(() => {
+    const activeOption = options[activeIndex];
+    if (!activeOption) return;
+    selectValue(activeOption.value);
+  }, [activeIndex, options, selectValue]);
+  const { onKeyDown } = useKeyboardNavigation({
+    activeIndex,
+    setActiveIndex,
+    items: options,
+    isOpen,
+    onOpen: openDropdown,
+    onClose: closeDropdown,
+    onSelect: selectActiveOption,
+    getItemText: (option) => option.label
+  });
+  return {
+    selectedValue,
+    selectedValues,
+    setSelectedValue,
+    selectedOption,
+    selectedOptions,
+    isOpen,
+    open: isOpen,
+    setIsOpen,
+    activeIndex,
+    setActiveIndex,
+    getInitialActiveIndex,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectValue,
+    select: selectValue,
+    selectActiveOption,
+    onKeyDown
+  };
+};
+
+// src/hooks/useTabs.ts
+var useTabs = ({
+  activeIndex: controlledActiveIndex,
+  defaultActiveIndex = 0,
+  onChange
+}) => {
+  const [activeIndex, setActiveIndex] = useControllableState({
+    value: controlledActiveIndex,
+    defaultValue: defaultActiveIndex,
+    onChange
+  });
+  return {
+    activeIndex,
+    setActiveIndex
+  };
+};
 
 // src/theme/ThemeContext.ts
 import { createContext } from "react";
@@ -48,7 +533,7 @@ var ThemeProvider = ({
     defaultValue: defaultTheme,
     onChange: onThemeChange
   });
-  const value = useMemo(
+  const value = useMemo2(
     () => ({
       themeName: currentTheme,
       theme: nativeThemes[currentTheme],
@@ -67,10 +552,10 @@ function useTheme() {
 }
 
 // src/theme/useThemeStyles.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 function useThemeStyles(createStyles23) {
   const { theme } = useTheme();
-  return useMemo2(() => createStyles23(theme), [createStyles23, theme]);
+  return useMemo3(() => createStyles23(theme), [createStyles23, theme]);
 }
 
 // src/components/Dropdown/Content/DropdownContent.styles.ts
@@ -131,6 +616,30 @@ var createStyles = (theme) => StyleSheet.create({
     maxWidth: 360,
     maxHeight: "60%",
     borderRadius: theme.tokens.radius.md
+  },
+  searchWrap: {
+    minHeight: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.tokens.spacing[2],
+    paddingHorizontal: theme.tokens.spacing[3],
+    borderBottomWidth: 1,
+    borderBottomColor: theme.components.dropdown.separator.bg
+  },
+  searchIcon: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  searchInput: {
+    flex: 1,
+    minWidth: 0,
+    paddingVertical: theme.tokens.spacing[2],
+    color: theme.components.dropdown.content.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
   }
 });
 
@@ -142,13 +651,19 @@ function DropdownContent({
   onClose,
   contentStyle,
   accessibilityLabel,
-  presentation
+  presentation,
+  searchable = false,
+  searchValue = "",
+  searchPlaceholder = "Search actions...",
+  searchAccessibilityLabel,
+  onSearchChange
 }) {
+  const { theme } = useTheme();
   const styles = useThemeStyles(createStyles);
   const isSheet = presentation === "sheet";
-  const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-  const [reduceMotion, setReduceMotion] = useState(false);
-  useEffect(() => {
+  const animation = useRef2(new Animated.Value(isOpen ? 1 : 0)).current;
+  const [reduceMotion, setReduceMotion] = useState4(false);
+  useEffect4(() => {
     AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
     const subscription = AccessibilityInfo.addEventListener?.(
       "reduceMotionChanged",
@@ -158,7 +673,7 @@ function DropdownContent({
       subscription?.remove();
     };
   }, []);
-  useEffect(() => {
+  useEffect4(() => {
     if (!isOpen) {
       animation.setValue(0);
       return;
@@ -174,7 +689,7 @@ function DropdownContent({
       useNativeDriver: true
     }).start();
   }, [animation, isOpen, isSheet, reduceMotion]);
-  const backdropAnimatedStyle = useMemo3(
+  const backdropAnimatedStyle = useMemo4(
     () => ({
       opacity: animation.interpolate({
         inputRange: [0, 1],
@@ -183,7 +698,7 @@ function DropdownContent({
     }),
     [animation]
   );
-  const menuAnimatedStyle = useMemo3(() => {
+  const menuAnimatedStyle = useMemo4(() => {
     const translateY = animation.interpolate({
       inputRange: [0, 1],
       outputRange: isSheet ? [24, 0] : [-6, 0]
@@ -221,7 +736,7 @@ function DropdownContent({
             )
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs(
           Animated.View,
           {
             accessibilityRole: "menu",
@@ -232,7 +747,39 @@ function DropdownContent({
               contentStyle,
               menuAnimatedStyle
             ],
-            children
+            children: [
+              searchable && /* @__PURE__ */ jsxs(View, { style: styles.searchWrap, children: [
+                /* @__PURE__ */ jsx2(
+                  View,
+                  {
+                    style: styles.searchIcon,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no",
+                    children: /* @__PURE__ */ jsx2(
+                      Search,
+                      {
+                        width: 16,
+                        height: 16,
+                        color: theme.components.dropdown.separator.fg
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  TextInput,
+                  {
+                    value: searchValue,
+                    onChangeText: onSearchChange,
+                    placeholder: searchPlaceholder,
+                    returnKeyType: "search",
+                    placeholderTextColor: theme.components.dropdown.separator.fg,
+                    accessibilityLabel: searchAccessibilityLabel ?? searchPlaceholder,
+                    style: styles.searchInput
+                  }
+                )
+              ] }),
+              children
+            ]
           }
         )
       ] })
@@ -242,8 +789,14 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useCallback, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
-import { useDropdown } from "@vellira-ui/core";
+import {
+  useCallback as useCallback9,
+  useEffect as useEffect7,
+  useId as useId2,
+  useMemo as useMemo5,
+  useRef as useRef5,
+  useState as useState7
+} from "react";
 import {
   AccessibilityInfo as AccessibilityInfo2,
   findNodeHandle,
@@ -253,6 +806,135 @@ import {
   View as View4
 } from "react-native";
 
+// src/managers/FloatingManager/useNativeFloatingPosition.ts
+import { useCallback as useCallback6, useRef as useRef3, useState as useState5 } from "react";
+import { Dimensions } from "react-native";
+var safePadding = 12;
+function useNativeFloatingPosition(placement = "top", offset = 8) {
+  const [position, setPosition] = useState5({ top: 0, left: 0 });
+  const floatingSizeRef = useRef3({
+    width: 0,
+    height: 0
+  });
+  const lastTriggerRef = useRef3(null);
+  const clamp = useCallback6((value, min, max) => {
+    return Math.min(Math.max(value, min), Math.max(min, max));
+  }, []);
+  const calculatePosition = useCallback6(
+    (triggerRect, size) => {
+      const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
+      const [side, align = "center"] = placement.split("-");
+      const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
+      const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
+      const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
+      const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
+      const rawPosition = side === "left" || side === "right" ? { top: verticalTop, left: verticalLeft } : { top: horizontalTop, left: horizontalLeft };
+      return {
+        top: clamp(
+          rawPosition.top,
+          safePadding,
+          screenHeight - size.height - safePadding
+        ),
+        left: clamp(
+          rawPosition.left,
+          safePadding,
+          screenWidth - size.width - safePadding
+        )
+      };
+    },
+    [placement, offset, clamp]
+  );
+  const updatePosition = useCallback6(
+    (triggerRef, measuredSize = floatingSizeRef.current) => {
+      lastTriggerRef.current = triggerRef;
+      const node = triggerRef.current;
+      if (!node || typeof node.measureInWindow !== "function") {
+        setPosition({ top: 0, left: 0 });
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        setPosition(calculatePosition({ x, y, width, height }, measuredSize));
+      });
+    },
+    [calculatePosition]
+  );
+  const onFloatingLayout = useCallback6(
+    (event) => {
+      const { width, height } = event.nativeEvent.layout;
+      const nextSize = { width, height };
+      floatingSizeRef.current = nextSize;
+      if (lastTriggerRef.current) {
+        updatePosition(lastTriggerRef.current, nextSize);
+      }
+    },
+    [updatePosition]
+  );
+  return { position, updatePosition, onFloatingLayout };
+}
+
+// src/managers/OverlayStack/useNativeDismiss.ts
+import { useCallback as useCallback8 } from "react";
+
+// src/managers/OverlayStack/useNativeOverlayStack.ts
+import { useCallback as useCallback7, useEffect as useEffect5 } from "react";
+
+// src/managers/OverlayStack/NativeOverlayStack.ts
+var stack = [];
+var nativeOverlayStackStore = {
+  add(id) {
+    stack = stack.filter((item) => item !== id);
+    stack.push(id);
+  },
+  remove(id) {
+    stack = stack.filter((item) => item !== id);
+  },
+  isTop(id) {
+    return stack[stack.length - 1] === id;
+  }
+};
+
+// src/managers/OverlayStack/useNativeOverlayStack.ts
+var useNativeOverlayStack = ({
+  id,
+  visible
+}) => {
+  useEffect5(() => {
+    if (!visible) return;
+    nativeOverlayStackStore.add(id);
+    return () => {
+      nativeOverlayStackStore.remove(id);
+    };
+  }, [id, visible]);
+  const isTopOverlay = useCallback7(
+    () => nativeOverlayStackStore.isTop(id),
+    [id]
+  );
+  return { isTopOverlay };
+};
+
+// src/managers/OverlayStack/useNativeDismiss.ts
+var useNativeDismiss = ({
+  id,
+  visible,
+  closeOnOutsidePress = true,
+  onClose
+}) => {
+  const { isTopOverlay } = useNativeOverlayStack({ id, visible });
+  const requestClose = useCallback8(() => {
+    if (!isTopOverlay()) return;
+    onClose();
+  }, [isTopOverlay, onClose]);
+  const requestOutsideClose = useCallback8(() => {
+    if (!closeOnOutsidePress) return;
+    requestClose();
+  }, [closeOnOutsidePress, requestClose]);
+  return {
+    isTopOverlay,
+    requestClose,
+    requestOutsideClose
+  };
+};
+
 // src/components/Dropdown/Group/DropdownGroup.tsx
 import { Text } from "react-native";
 
@@ -291,6 +973,7 @@ function parseDropdownChildren(children) {
   let trigger;
   let triggerProps;
   let contentProps;
+  let searchProps;
   const entries = [];
   const items = [];
   const nextId = (prefix) => `${prefix}-${generatedId++}`;
@@ -309,6 +992,10 @@ function parseDropdownChildren(children) {
     Children.forEach(node, (child) => {
       if (!isValidElement(child)) return;
       const type = child.type;
+      if (type.__velliraPortal) {
+        visit(child.props.children);
+        return;
+      }
       switch (type.__velliraDropdownPart) {
         case "trigger":
           triggerProps = child.props;
@@ -318,6 +1005,9 @@ function parseDropdownChildren(children) {
           contentProps = child.props;
           visit(contentProps.children);
           return;
+        case "search":
+          searchProps = child.props;
+          return;
         case "group":
           visit(child.props.children);
           return;
@@ -358,7 +1048,7 @@ function parseDropdownChildren(children) {
     });
   }
   visit(children);
-  return { contentProps, entries, items, trigger, triggerProps };
+  return { contentProps, entries, items, searchProps, trigger, triggerProps };
 }
 function getItemLabel(children) {
   const labelParts = [];
@@ -524,9 +1214,9 @@ DropdownSeparator.displayName = "DropdownSeparator";
 import {
   cloneElement as cloneElement2,
   isValidElement as isValidElement3,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState2
+  useEffect as useEffect6,
+  useRef as useRef4,
+  useState as useState6
 } from "react";
 import { ChevronDown } from "@vellira-ui/icons";
 import { Animated as Animated2, Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
@@ -661,9 +1351,9 @@ function DropdownTrigger({
   }[size];
   const hasIcon = Boolean(icon);
   const isIconOnly = !trigger && hasIcon && !showArrow;
-  const [isPressed, setIsPressed] = useState2(false);
-  const rotateAnim = useRef2(new Animated2.Value(isOpen ? 1 : 0)).current;
-  useEffect2(() => {
+  const [isPressed, setIsPressed] = useState6(false);
+  const rotateAnim = useRef4(new Animated2.Value(isOpen ? 1 : 0)).current;
+  useEffect6(() => {
     Animated2.timing(rotateAnim, {
       toValue: isOpen ? 1 : 0,
       duration: 180,
@@ -797,6 +1487,14 @@ function DropdownRoot({
   disabled = false,
   loading = false,
   loadingText = "Loading actions...",
+  searchable = false,
+  command = false,
+  searchValue,
+  defaultSearchValue = "",
+  searchPlaceholder,
+  onSearch,
+  empty,
+  noOptionsText,
   size = "md",
   style,
   triggerStyle,
@@ -807,15 +1505,20 @@ function DropdownRoot({
   accessibilityHint
 }) {
   const styles = useThemeStyles(createStyles6);
+  const overlayId = useId2();
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState7(defaultSearchValue);
+  const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
   const { width } = useWindowDimensions();
-  const triggerRef = useRef3(null);
-  const parsed = useMemo4(() => parseDropdownChildren(children), [children]);
+  const triggerRef = useRef5(null);
+  const parsed = useMemo5(() => parseDropdownChildren(children), [children]);
+  const contentCommand = parsed.contentProps?.command ?? false;
+  const isSearchable = searchable || command || contentCommand || !!parsed.searchProps;
   const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
-  const menuAccessibilityLabel = useMemo4(() => {
+  const menuAccessibilityLabel = useMemo5(() => {
     if (accessibilityLabel) return accessibilityLabel;
     return typeof label === "string" ? label : "Menu";
   }, [accessibilityLabel, label]);
-  const navigableItems = useMemo4(
+  const navigableItems = useMemo5(
     () => parsed.items.map((item) => ({
       disabled: item.disabled,
       label: item.label,
@@ -823,6 +1526,10 @@ function DropdownRoot({
     })),
     [parsed.items]
   );
+  const filteredParsed = useMemo5(() => {
+    if (!isSearchable || !resolvedSearchValue.trim()) return parsed;
+    return filterDropdownEntries(parsed, resolvedSearchValue);
+  }, [isSearchable, parsed, resolvedSearchValue]);
   const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
     items: navigableItems,
     open,
@@ -832,24 +1539,29 @@ function DropdownRoot({
     getItemValue: (item) => item.value,
     getItemText: (item) => typeof item.label === "string" ? item.label : item.value
   });
-  useEffect3(() => {
+  useEffect7(() => {
     if (!isOpen) return;
     AccessibilityInfo2.announceForAccessibility(
       `${menuAccessibilityLabel} opened`
     );
   }, [isOpen, menuAccessibilityLabel]);
-  const focusTrigger = useCallback(() => {
+  const focusTrigger = useCallback9(() => {
     if (typeof findNodeHandle !== "function") return;
     const handle = findNodeHandle(triggerRef.current);
     if (handle && AccessibilityInfo2.setAccessibilityFocus) {
       AccessibilityInfo2.setAccessibilityFocus(handle);
     }
   }, []);
-  const closeAndFocusTrigger = useCallback(() => {
+  const closeAndFocusTrigger = useCallback9(() => {
     closeDropdown();
     requestAnimationFrame(focusTrigger);
   }, [closeDropdown, focusTrigger]);
-  const handleSelect = useCallback(
+  const dismiss = useNativeDismiss({
+    id: overlayId,
+    visible: isOpen,
+    onClose: closeAndFocusTrigger
+  });
+  const handleSelect = useCallback9(
     (entry) => {
       if (entry.disabled || loading) return;
       const event = createDropdownSelectEvent();
@@ -861,10 +1573,19 @@ function DropdownRoot({
     },
     [closeAndFocusTrigger, closeOnSelect, loading]
   );
-  const handleTriggerPress = useCallback(() => {
+  const handleTriggerPress = useCallback9(() => {
     toggleDropdown();
   }, [toggleDropdown]);
-  const renderEntry = useCallback(
+  const handleSearchChange = useCallback9(
+    (value) => {
+      if (searchValue === void 0) {
+        setUncontrolledSearchValue(value);
+      }
+      onSearch?.(value);
+    },
+    [onSearch, searchValue]
+  );
+  const renderEntry = useCallback9(
     ({ item }) => {
       if (item.type === "label") {
         return /* @__PURE__ */ jsx7(DropdownGroup, { label: item.props.children });
@@ -901,7 +1622,13 @@ function DropdownRoot({
       id: "loading",
       props: { children: loadingText }
     }
-  ] : parsed.entries;
+  ] : isSearchable && filteredParsed.items.length === 0 ? [
+    {
+      type: "empty",
+      id: "empty",
+      props: { children: empty ?? noOptionsText ?? "No actions found" }
+    }
+  ] : filteredParsed.entries;
   const contentStyleFromSlot = parsed.contentProps?.style;
   const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
   return /* @__PURE__ */ jsxs4(View4, { style: [styles.root, style], children: [
@@ -929,10 +1656,15 @@ function DropdownRoot({
       DropdownContent,
       {
         isOpen,
-        onClose: closeAndFocusTrigger,
+        onClose: dismiss.requestClose,
         contentStyle: [contentStyle, contentStyleFromSlot],
         accessibilityLabel: menuAccessibilityLabel,
         presentation: presentationFromSlot ?? resolvedPresentation,
+        searchable: isSearchable,
+        searchValue: resolvedSearchValue,
+        searchPlaceholder: parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions..."),
+        searchAccessibilityLabel: parsed.searchProps?.accessibilityLabel,
+        onSearchChange: handleSearchChange,
         children: /* @__PURE__ */ jsx7(
           FlatList,
           {
@@ -959,6 +1691,21 @@ function createDropdownSelectEvent() {
     }
   };
 }
+function filterDropdownEntries(parsed, searchValue) {
+  const normalizedSearch = searchValue.trim().toLocaleLowerCase();
+  const matchedItems = new Set(
+    parsed.items.filter(
+      (item) => item.label.toLocaleLowerCase().includes(normalizedSearch)
+    ).map((item) => item.id)
+  );
+  return {
+    ...parsed,
+    items: parsed.items.filter((item) => matchedItems.has(item.id)),
+    entries: parsed.entries.filter(
+      (entry) => entry.type !== "item" || matchedItems.has(entry.id)
+    )
+  };
+}
 var DropdownTriggerSlot = createDropdownSlot(
   "trigger",
   "Dropdown.Trigger"
@@ -991,9 +1738,14 @@ var DropdownLoadingSlot = createDropdownSlot(
   "loading",
   "Dropdown.Loading"
 );
+var DropdownSearchSlot = createDropdownSlot(
+  "search",
+  "Dropdown.Search"
+);
 var Dropdown = Object.assign(DropdownRoot, {
   Trigger: DropdownTriggerSlot,
   Content: DropdownContentSlot,
+  Search: DropdownSearchSlot,
   Item: DropdownItemSlot,
   Group: DropdownGroupSlot,
   Label: DropdownLabelSlot,
@@ -1010,7 +1762,7 @@ import { Text as Text5, View as View5 } from "react-native";
 import { StyleSheet as StyleSheet8 } from "react-native";
 var createStyles7 = (theme) => StyleSheet8.create({
   body: {
-    paddingBottom: theme.tokens.spacing[4]
+    paddingBottom: theme.components.modal.body.paddingBottom
   },
   text: {
     color: theme.components.modal.content.fg,
@@ -1036,32 +1788,124 @@ var renderBodyChildren = (children, textStyle) => Children2.map(children, (child
   if (!isTextElement(child)) {
     return child;
   }
-  return cloneElement3(child, {
-    style: [textStyle, child.props.style]
-  });
-});
-var ModalBody = ({ children, style }) => {
-  const styles = useThemeStyles(createStyles7);
-  return /* @__PURE__ */ jsx8(View5, { style: [styles.body, style], children: renderBodyChildren(children, styles.text) });
+  return cloneElement3(child, {
+    style: [textStyle, child.props.style]
+  });
+});
+var ModalBody = ({ children, style }) => {
+  const styles = useThemeStyles(createStyles7);
+  return /* @__PURE__ */ jsx8(View5, { style: [styles.body, style], children: renderBodyChildren(children, styles.text) });
+};
+ModalBody.displayName = "ModalBody";
+
+// src/components/Modal/Close/ModalClose.tsx
+import { cloneElement as cloneElement4, isValidElement as isValidElement5 } from "react";
+import { Close } from "@vellira-ui/icons";
+import { Pressable as Pressable4 } from "react-native";
+
+// src/components/Modal/Header/ModalHeader.styles.ts
+import { StyleSheet as StyleSheet9 } from "react-native";
+var createStyles8 = (theme) => StyleSheet9.create({
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.components.modal.header.gap,
+    justifyContent: "space-between",
+    paddingBottom: theme.components.modal.header.paddingBottom
+  },
+  title: {
+    flex: 1,
+    color: theme.components.modal.title.fg,
+    fontFamily: theme.tokens.typography.family.semibold,
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  closeButton: {
+    width: theme.components.modal.closeButton.size,
+    height: theme.components.modal.closeButton.size,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.components.modal.closeButton.default.bg,
+    borderRadius: theme.components.modal.closeButton.radius
+  },
+  closeButtonPressed: {
+    backgroundColor: theme.components.modal.closeButton.hover.bg
+  },
+  closeButtonDisabled: {
+    backgroundColor: theme.components.modal.closeButton.disabled.bg
+  }
+});
+
+// src/components/Modal/internal/ModalContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ModalContext = createContext2(void 0);
+ModalContext.displayName = "ModalContext";
+var useModalContext = () => {
+  const context = useContext2(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used inside Modal");
+  }
+  return context;
+};
+var ModalContext_default = ModalContext;
+
+// src/components/Modal/Close/ModalClose.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ModalClose = ({
+  children,
+  accessibilityLabel,
+  style
+}) => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles8);
+  const { onClose } = useModalContext();
+  if (isValidElement5(children)) {
+    return cloneElement4(children, {
+      accessibilityLabel: children.props.accessibilityLabel ?? accessibilityLabel,
+      onPress: (event) => {
+        children.props.onPress?.(event);
+        onClose?.();
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx9(
+    Pressable4,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? "Close modal",
+      onPress: onClose,
+      style: [styles.closeButton, style],
+      children: ({ pressed }) => {
+        const closeIconColor = pressed ? theme.components.modal.closeButton.hover.fg : theme.components.modal.closeButton.default.fg;
+        return /* @__PURE__ */ jsx9(
+          Close,
+          {
+            size: theme.components.modal.closeButton.iconSize,
+            color: closeIconColor
+          }
+        );
+      }
+    }
+  );
 };
-ModalBody.displayName = "ModalBody";
+ModalClose.displayName = "Modal.Close";
 
 // src/components/Modal/Content/ModalContent.tsx
 import { View as View6 } from "react-native";
 
 // src/components/Modal/Content/ModalContent.styles.ts
-import { StyleSheet as StyleSheet9 } from "react-native";
-var createStyles8 = (theme) => StyleSheet9.create({
+import { StyleSheet as StyleSheet10 } from "react-native";
+var createStyles9 = (theme) => StyleSheet10.create({
   content: {
     width: "100%",
-    maxWidth: 600,
-    maxHeight: "90%",
-    padding: theme.tokens.spacing[4],
-    gap: theme.tokens.spacing[4],
+    maxWidth: theme.components.modal.content.size.md,
+    maxHeight: theme.components.modal.content.nativeMaxHeight,
+    padding: theme.components.modal.content.padding,
+    gap: theme.components.modal.content.gap,
     backgroundColor: theme.components.modal.content.bg,
     borderColor: theme.components.modal.content.border,
-    borderRadius: theme.tokens.radius.lg,
-    borderWidth: 1,
+    borderRadius: theme.components.modal.content.radius,
+    borderWidth: theme.components.modal.content.borderWidth,
     shadowColor: theme.tokens.shadows.lg.color,
     shadowOffset: {
       width: theme.tokens.shadows.lg.x,
@@ -1074,10 +1918,10 @@ var createStyles8 = (theme) => StyleSheet9.create({
 });
 
 // src/components/Modal/Content/ModalContent.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ModalContent = ({ children, style }) => {
-  const styles = useThemeStyles(createStyles8);
-  return /* @__PURE__ */ jsx9(View6, { style: [styles.content, style], children });
+  const styles = useThemeStyles(createStyles9);
+  return /* @__PURE__ */ jsx10(View6, { style: [styles.content, style], children });
 };
 ModalContent.displayName = "ModalContent";
 
@@ -1085,107 +1929,41 @@ ModalContent.displayName = "ModalContent";
 import { View as View7 } from "react-native";
 
 // src/components/Modal/Footer/ModalFooter.styles.ts
-import { StyleSheet as StyleSheet10 } from "react-native";
-var createStyles9 = (theme) => StyleSheet10.create({
+import { StyleSheet as StyleSheet11 } from "react-native";
+var createStyles10 = (theme) => StyleSheet11.create({
   footer: {
     flexDirection: "row",
-    gap: theme.tokens.spacing[3],
+    gap: theme.components.modal.footer.gap,
     justifyContent: "flex-end",
-    paddingTop: theme.tokens.spacing[4]
+    paddingTop: theme.components.modal.footer.paddingTop
   }
 });
 
 // src/components/Modal/Footer/ModalFooter.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var ModalFooter = ({ children, style }) => {
-  const styles = useThemeStyles(createStyles9);
-  return /* @__PURE__ */ jsx10(View7, { style: [styles.footer, style], children });
+  const styles = useThemeStyles(createStyles10);
+  return /* @__PURE__ */ jsx11(View7, { style: [styles.footer, style], children });
 };
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/Modal/Header/ModalHeader.tsx
-import { Close } from "@vellira-ui/icons";
-import { Pressable as Pressable4, Text as Text6, View as View8 } from "react-native";
-
-// src/components/Modal/ModalContext.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var ModalContext = createContext2(void 0);
-ModalContext.displayName = "ModalContext";
-var useModalContext = () => {
-  const context = useContext2(ModalContext);
-  if (!context) {
-    throw new Error("Modal compound components must be used inside Modal");
-  }
-  return context;
-};
-var ModalContext_default = ModalContext;
-
-// src/components/Modal/Header/ModalHeader.styles.ts
-import { StyleSheet as StyleSheet11 } from "react-native";
-var createStyles10 = (theme) => StyleSheet11.create({
-  header: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: theme.tokens.spacing[3],
-    justifyContent: "space-between",
-    paddingBottom: theme.tokens.spacing[4]
-  },
-  title: {
-    flex: 1,
-    color: theme.components.modal.title.fg,
-    fontFamily: theme.tokens.typography.family.semibold,
-    fontSize: theme.tokens.typography.size.lg,
-    lineHeight: theme.tokens.typography.lineHeight.md
-  },
-  closeButton: {
-    width: 32,
-    height: 32,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.components.modal.closeButton.default.bg,
-    borderRadius: theme.tokens.radius.full
-  },
-  closeButtonPressed: {
-    backgroundColor: theme.components.modal.closeButton.hover.bg
-  },
-  closeButtonDisabled: {
-    backgroundColor: theme.components.modal.closeButton.disabled.bg
-  }
-});
-
-// src/components/Modal/Header/ModalHeader.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Text as Text6, View as View8 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
   style,
   textStyle
 }) => {
-  const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles10);
-  const { onClose } = useModalContext();
+  const styles = useThemeStyles(createStyles8);
   return /* @__PURE__ */ jsxs5(View8, { style: [styles.header, style], children: [
-    /* @__PURE__ */ jsx11(Text6, { style: [styles.title, textStyle], children }),
-    onClose && /* @__PURE__ */ jsx11(
-      Pressable4,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Close modal",
-        onPress: onClose,
-        style: styles.closeButton,
-        children: ({ pressed }) => {
-          const closeIconColor = pressed ? theme.components.modal.closeButton.hover.fg : theme.components.modal.closeButton.default.fg;
-          return /* @__PURE__ */ jsx11(Close, { size: 16, color: closeIconColor });
-        }
-      }
-    )
+    /* @__PURE__ */ jsx12(Text6, { style: [styles.title, textStyle], children }),
+    /* @__PURE__ */ jsx12(ModalClose, {})
   ] });
 };
 ModalHeader.displayName = "ModalHeader";
 
-// src/components/Modal/Modal.tsx
-import { useModal } from "@vellira-ui/core";
-
-// src/components/Modal/ModalOverlay.tsx
+// src/components/Modal/Overlay/ModalOverlay.tsx
 import { Modal as RNModal, Pressable as Pressable5, View as View9 } from "react-native";
 
 // src/components/Modal/Modal.styles.ts
@@ -1195,7 +1973,7 @@ var createStyles11 = (theme) => StyleSheet12.create({
     alignItems: "center",
     flex: 1,
     justifyContent: "center",
-    padding: theme.tokens.spacing[5]
+    padding: theme.components.modal.content.viewportMargin
   },
   backdrop: {
     ...StyleSheet12.absoluteFill,
@@ -1203,32 +1981,27 @@ var createStyles11 = (theme) => StyleSheet12.create({
   }
 });
 
-// src/components/Modal/ModalOverlay.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var ModalOverlay = ({
-  isOpen,
-  onClose,
-  closeOnBackdrop = true,
-  children,
-  overlayStyle
-}) => {
+// src/components/Modal/Overlay/ModalOverlay.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var ModalOverlay = ({ children, overlayStyle }) => {
   const styles = useThemeStyles(createStyles11);
-  return /* @__PURE__ */ jsx12(
+  const { closeOnOutsidePress, onClose, onOutsideClose, open } = useModalContext();
+  return /* @__PURE__ */ jsx13(
     RNModal,
     {
-      visible: isOpen,
+      visible: open,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
       children: /* @__PURE__ */ jsxs6(View9, { style: [styles.overlay, overlayStyle], children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           Pressable5,
           {
             testID: "modal-backdrop",
-            accessibilityRole: closeOnBackdrop ? "button" : void 0,
-            accessibilityLabel: closeOnBackdrop ? "Close modal" : void 0,
+            accessibilityRole: closeOnOutsidePress ? "button" : void 0,
+            accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
             style: styles.backdrop,
-            onPress: closeOnBackdrop ? onClose : void 0
+            onPress: closeOnOutsidePress ? onOutsideClose : void 0
           }
         ),
         children
@@ -1237,50 +2010,111 @@ var ModalOverlay = ({
   );
 };
 
-// src/components/Modal/Modal.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+// src/components/Modal/Root/ModalRoot.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ModalRoot = ({
-  isOpen,
-  onClose,
-  closeOnBackdrop = true,
-  children,
-  overlayStyle,
-  contentStyle
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  closeOnOutsidePress = true,
+  children
 }) => {
   const modal = useModal({
-    isOpen,
-    onClose,
-    closeOnBackdrop
+    open,
+    defaultOpen,
+    onOpenChange,
+    closeOnOutsidePress
   });
-  return /* @__PURE__ */ jsx13(ModalContext_default.Provider, { value: { onClose: modal.onClose }, children: /* @__PURE__ */ jsx13(
-    ModalOverlay,
+  const dismiss = useNativeDismiss({
+    id: modal.contentId,
+    visible: modal.open,
+    closeOnOutsidePress: modal.closeOnOutsidePress,
+    onClose: modal.requestClose
+  });
+  return /* @__PURE__ */ jsx14(
+    ModalContext_default.Provider,
     {
-      isOpen: modal.isOpen,
-      onClose: modal.onClose,
-      closeOnBackdrop: modal.closeOnBackdrop,
-      overlayStyle,
-      children: /* @__PURE__ */ jsx13(ModalContent, { style: contentStyle, children })
+      value: {
+        closeOnOutsidePress: modal.closeOnOutsidePress,
+        onClose: dismiss.requestClose,
+        onOutsideClose: dismiss.requestOutsideClose,
+        open: modal.open,
+        setOpen: modal.setOpen
+      },
+      children
     }
-  ) });
+  );
+};
+ModalRoot.displayName = "ModalRoot";
+
+// src/components/Modal/Trigger/ModalTrigger.tsx
+import { cloneElement as cloneElement5, isValidElement as isValidElement6 } from "react";
+import { Pressable as Pressable6, Text as Text7 } from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ModalTrigger = ({
+  children,
+  asChild = false,
+  disabled = false,
+  accessibilityLabel,
+  style,
+  testID
+}) => {
+  const root = useModalContext();
+  const child = asChild && isValidElement6(children) ? children : void 0;
+  const handlePress = (event) => {
+    if (disabled || child?.props.disabled) return;
+    child?.props.onPress?.(event);
+    root.setOpen(true);
+  };
+  if (child) {
+    return cloneElement5(child, {
+      onPress: handlePress,
+      accessibilityRole: child.props.accessibilityRole ?? "button",
+      accessibilityState: {
+        ...child.props.accessibilityState,
+        expanded: root.open,
+        disabled: disabled || child.props.disabled
+      },
+      accessibilityLabel: accessibilityLabel ?? child.props.accessibilityLabel,
+      disabled: disabled || child.props.disabled,
+      style: child.props.style
+    });
+  }
+  return /* @__PURE__ */ jsx15(
+    Pressable6,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { expanded: root.open, disabled },
+      accessibilityLabel,
+      disabled,
+      onPress: handlePress,
+      style,
+      testID,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx15(Text7, { children }) : children
+    }
+  );
 };
-ModalRoot.displayName = "Modal";
+ModalTrigger.displayName = "Modal.Trigger";
 
-// src/components/Modal/index.ts
+// src/components/Modal/Modal.tsx
 var Modal2 = Object.assign(ModalRoot, {
+  Trigger: ModalTrigger,
+  Overlay: ModalOverlay,
+  Content: ModalContent,
   Header: ModalHeader,
   Body: ModalBody,
   Footer: ModalFooter,
-  Content: ModalContent
+  Close: ModalClose
 });
+Modal2.displayName = "Modal";
 
 // src/components/RadioGroup/RadioGroup.tsx
 import { forwardRef } from "react";
-import { useControllableState as useControllableState2 } from "@vellira-ui/core";
 import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
-import { useId } from "react";
-import { Text as Text7, View as View10 } from "react-native";
+import { useId as useId3 } from "react";
+import { Text as Text8, View as View10 } from "react-native";
 
 // src/patterns/FormField/FormField.styles.ts
 import { StyleSheet as StyleSheet13 } from "react-native";
@@ -1356,7 +2190,7 @@ var FormFieldContext = createContext3(null);
 var useFormFieldContext = () => useContext3(FormFieldContext);
 
 // src/patterns/FormField/FormField.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormField({
   id,
   label,
@@ -1379,7 +2213,7 @@ function FormField({
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles12);
   const sizeTokens = theme.components.formField.size[size];
-  const generatedId = useId();
+  const generatedId = useId3();
   const controlId = id ?? generatedId;
   const labelId = label ? `${controlId}-label` : void 0;
   const descriptionId = description ? `${controlId}-description` : void 0;
@@ -1407,7 +2241,7 @@ function FormField({
       style: [styles.root, { gap: sizeTokens.gap }, style],
       children: [
         label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
-          Text7,
+          Text8,
           {
             style: [
               styles.label,
@@ -1420,8 +2254,8 @@ function FormField({
             ],
             children: [
               label,
-              required && /* @__PURE__ */ jsx14(
-                Text7,
+              required && /* @__PURE__ */ jsx16(
+                Text8,
                 {
                   style: styles.required,
                   accessible: false,
@@ -1429,8 +2263,8 @@ function FormField({
                   children: " *"
                 }
               ),
-              !required && optionalText && /* @__PURE__ */ jsx14(
-                Text7,
+              !required && optionalText && /* @__PURE__ */ jsx16(
+                Text8,
                 {
                   style: [
                     styles.optional,
@@ -1442,8 +2276,8 @@ function FormField({
                   children: optionalText
                 }
               ),
-              labelInfo && /* @__PURE__ */ jsx14(
-                Text7,
+              labelInfo && /* @__PURE__ */ jsx16(
+                Text8,
                 {
                   style: [
                     styles.labelInfo,
@@ -1459,8 +2293,8 @@ function FormField({
           }
         ) : /* @__PURE__ */ jsxs7(View10, { style: styles.customLabel, children: [
           label,
-          required && /* @__PURE__ */ jsx14(
-            Text7,
+          required && /* @__PURE__ */ jsx16(
+            Text8,
             {
               style: styles.required,
               accessible: false,
@@ -1471,8 +2305,8 @@ function FormField({
           !required && optionalText,
           labelInfo
         ] })),
-        description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
-          Text7,
+        description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx16(
+          Text8,
           {
             style: [
               styles.description,
@@ -1486,9 +2320,9 @@ function FormField({
             children: description
           }
         ) : description),
-        /* @__PURE__ */ jsx14(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx14(View10, { style: [styles.control, { gap: sizeTokens.gap }, controlStyle], children }) }),
-        error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx14(
-          Text7,
+        /* @__PURE__ */ jsx16(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx16(View10, { style: [styles.control, { gap: sizeTokens.gap }, controlStyle], children }) }),
+        error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx16(
+          Text8,
           {
             accessibilityLiveRegion: "polite",
             style: [
@@ -1502,7 +2336,7 @@ function FormField({
             ],
             children: error
           }
-        ) : /* @__PURE__ */ jsx14(View10, { accessibilityLiveRegion: "polite", children: error }))
+        ) : /* @__PURE__ */ jsx16(View10, { accessibilityLiveRegion: "polite", children: error }))
       ]
     }
   );
@@ -1535,7 +2369,7 @@ function useRadioGroupContext() {
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var RadioGroup = forwardRef(
   ({
     value,
@@ -1560,7 +2394,7 @@ var RadioGroup = forwardRef(
     ...rest
   }, ref) => {
     const styles = useThemeStyles(createStyles13);
-    const [selectedValue, setSelectedValue] = useControllableState2({
+    const [selectedValue, setSelectedValue] = useControllableState({
       value,
       defaultValue,
       onChange: onValueChange
@@ -1572,7 +2406,7 @@ var RadioGroup = forwardRef(
       required ? "Required." : void 0,
       typeof error === "string" ? error : void 0
     ].filter(Boolean).join(" ")) || void 0;
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx17(
       FormField,
       {
         label,
@@ -1584,7 +2418,7 @@ var RadioGroup = forwardRef(
         descriptionStyle,
         errorStyle,
         style,
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx17(
           RadioGroupProvider,
           {
             value: {
@@ -1596,7 +2430,7 @@ var RadioGroup = forwardRef(
               color,
               onValueChange: setSelectedValue
             },
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx17(
               View11,
               {
                 ...rest,
@@ -1624,14 +2458,14 @@ var RadioGroup = forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Content/SelectContent.tsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState3 } from "react";
-import { FlatList as FlatList2, Pressable as Pressable10, Text as Text12, View as View21 } from "react-native";
+import { useEffect as useEffect9, useRef as useRef6, useState as useState8 } from "react";
+import { FlatList as FlatList2, Pressable as Pressable11, Text as Text13, View as View21 } from "react-native";
 
 // src/components/Select/Group/SelectGroup.tsx
-import { Pressable as Pressable6, Text as Text8 } from "react-native";
+import { Pressable as Pressable7, Text as Text9 } from "react-native";
 
 // src/components/Select/internal/SelectCollection.ts
-import { Children as Children3, isValidElement as isValidElement5 } from "react";
+import { Children as Children3, isValidElement as isValidElement7 } from "react";
 
 // src/components/Select/internal/types.ts
 var selectSlotName = /* @__PURE__ */ Symbol("VelliraNativeSelectSlot");
@@ -1655,7 +2489,7 @@ var getGroupLabel = (props) => {
   if (props.label) return props.label;
   let label;
   Children3.forEach(props.children, (child) => {
-    if (label || !isValidElement5(child)) return;
+    if (label || !isValidElement7(child)) return;
     if (getSelectSlot(child.type) === "label") {
       label = getTextFromNode(child.props.children);
     }
@@ -1666,7 +2500,7 @@ var getGroupItemValues = (children) => {
   const values = [];
   const visit = (node) => {
     Children3.forEach(node, (child) => {
-      if (!isValidElement5(child)) return;
+      if (!isValidElement7(child)) return;
       const slot = getSelectSlot(child.type);
       if (slot === "content") {
         visit(child.props.children);
@@ -1693,7 +2527,7 @@ var parseSelectChildren = (children) => {
   let loading;
   const visit = (node, group) => {
     Children3.forEach(node, (child) => {
-      if (!isValidElement5(child)) return;
+      if (!isValidElement7(child)) return;
       const slot = getSelectSlot(child.type);
       if (slot === "content") {
         visit(child.props.children, group);
@@ -1805,14 +2639,14 @@ var createGroupStyles = (theme) => StyleSheet15.create({
 });
 
 // src/components/Select/Group/SelectGroup.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectGroup = createSelectSlot(
   "group",
   "Select.Group"
 );
 var SelectGroupLabelRow = ({ label }) => {
   const styles = useThemeStyles(createGroupStyles);
-  return /* @__PURE__ */ jsx16(Text8, { style: styles.groupLabel, children: label });
+  return /* @__PURE__ */ jsx18(Text9, { style: styles.groupLabel, children: label });
 };
 var SelectGroupActionRow = ({
   label,
@@ -1826,7 +2660,7 @@ var SelectGroupActionRow = ({
   const isMixed = selectedCount > 0 && selectedCount < itemCount;
   const resolvedLabel = selectLabel ?? label;
   return /* @__PURE__ */ jsxs8(
-    Pressable6,
+    Pressable7,
     {
       accessibilityRole: "button",
       accessibilityLabel: resolvedLabel,
@@ -1840,8 +2674,8 @@ var SelectGroupActionRow = ({
       onPress,
       style: styles.groupAction,
       children: [
-        /* @__PURE__ */ jsx16(Text8, { style: styles.groupActionText, children: resolvedLabel }),
-        /* @__PURE__ */ jsxs8(Text8, { style: styles.groupActionMeta, children: [
+        /* @__PURE__ */ jsx18(Text9, { style: styles.groupActionText, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs8(Text9, { style: styles.groupActionMeta, children: [
           selectedCount,
           "/",
           itemCount
@@ -1861,14 +2695,14 @@ var SelectLabel = createSelectSlot(
 
 // src/components/Select/Group/SelectSeparator.tsx
 import { View as View12 } from "react-native";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SelectSeparator = createSelectSlot(
   "separator",
   "Select.Separator"
 );
 var SelectSeparatorRow = () => {
   const styles = useThemeStyles(createGroupStyles);
-  return /* @__PURE__ */ jsx17(View12, { style: styles.separator });
+  return /* @__PURE__ */ jsx19(View12, { style: styles.separator });
 };
 SelectSeparatorRow.displayName = "Select.SeparatorRow";
 
@@ -1884,9 +2718,9 @@ var useSelectContext = () => {
 };
 
 // src/components/Select/Item/SelectItem.tsx
-import { cloneElement as cloneElement4, isValidElement as isValidElement6 } from "react";
+import { cloneElement as cloneElement6, isValidElement as isValidElement8 } from "react";
 import { Check } from "@vellira-ui/icons";
-import { Pressable as Pressable7, Text as Text9, View as View13 } from "react-native";
+import { Pressable as Pressable8, Text as Text10, View as View13 } from "react-native";
 
 // src/components/Select/Item/SelectItem.styles.ts
 import { StyleSheet as StyleSheet16 } from "react-native";
@@ -1948,17 +2782,17 @@ var createItemStyles = (theme) => StyleSheet16.create({
 });
 
 // src/components/Select/Item/SelectItem.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var renderNodeOrText = (node, textStyle, fallback) => {
   if (typeof node === "string" || typeof node === "number") {
-    return /* @__PURE__ */ jsx18(Text9, { style: textStyle, children: node });
+    return /* @__PURE__ */ jsx20(Text10, { style: textStyle, children: node });
   }
-  if (isValidElement6(node) && node.type === Text9) {
-    return cloneElement4(node, {
+  if (isValidElement8(node) && node.type === Text10) {
+    return cloneElement6(node, {
       style: [textStyle, node.props.style]
     });
   }
-  return node ?? (fallback ? /* @__PURE__ */ jsx18(Text9, { style: textStyle, children: fallback }) : null);
+  return node ?? (fallback ? /* @__PURE__ */ jsx20(Text10, { style: textStyle, children: fallback }) : null);
 };
 var SelectItem = createSelectSlot(
   "item",
@@ -1982,8 +2816,8 @@ var SelectItemRow = ({
     }
     return pressed ? optionPalette.pressed : theme.components.select.option.default;
   };
-  return /* @__PURE__ */ jsx18(
-    Pressable7,
+  return /* @__PURE__ */ jsx20(
+    Pressable8,
     {
       disabled: isDisabled,
       accessibilityRole: "button",
@@ -2017,7 +2851,7 @@ var SelectItemRow = ({
           }),
           [styles.optionLabel, { color: optionFg }]
         ) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
-          option.icon && /* @__PURE__ */ jsx18(View13, { style: styles.optionIcon, children: isValidElement6(option.icon) ? cloneElement4(
+          option.icon && /* @__PURE__ */ jsx20(View13, { style: styles.optionIcon, children: isValidElement8(option.icon) ? cloneElement6(
             option.icon,
             {
               color: optionFg,
@@ -2025,16 +2859,16 @@ var SelectItemRow = ({
             }
           ) : option.icon }),
           /* @__PURE__ */ jsxs9(View13, { style: styles.optionTextWrap, children: [
-            /* @__PURE__ */ jsx18(
-              Text9,
+            /* @__PURE__ */ jsx20(
+              Text10,
               {
                 numberOfLines: 1,
                 style: [styles.optionLabel, { color: optionFg }],
                 children: option.label
               }
             ),
-            option.description && /* @__PURE__ */ jsx18(
-              Text9,
+            option.description && /* @__PURE__ */ jsx20(
+              Text10,
               {
                 numberOfLines: 2,
                 style: [styles.optionDescription, { color: descriptionFg }],
@@ -2042,7 +2876,7 @@ var SelectItemRow = ({
               }
             )
           ] }),
-          option.badge && /* @__PURE__ */ jsx18(
+          option.badge && /* @__PURE__ */ jsx20(
             View13,
             {
               style: [
@@ -2058,7 +2892,7 @@ var SelectItemRow = ({
               ])
             }
           ),
-          isSelected && /* @__PURE__ */ jsx18(View13, { style: styles.check, children: /* @__PURE__ */ jsx18(Check, { width: 16, height: 16, color: optionFg }) })
+          isSelected && /* @__PURE__ */ jsx20(View13, { style: styles.check, children: /* @__PURE__ */ jsx20(Check, { width: 16, height: 16, color: optionFg }) })
         ] });
       }
     }
@@ -2085,7 +2919,7 @@ var SelectItemIcon = createSelectSlot(
 );
 
 // src/components/Select/Presentation/SelectBackdrop.tsx
-import { Pressable as Pressable8 } from "react-native";
+import { Pressable as Pressable9 } from "react-native";
 
 // src/components/Select/Presentation/SelectPresentation.styles.ts
 import { StyleSheet as StyleSheet17 } from "react-native";
@@ -2160,14 +2994,14 @@ var createPresentationStyles = (theme) => StyleSheet17.create({
 });
 
 // src/components/Select/Presentation/SelectBackdrop.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var SelectBackdrop = ({
   onClose,
   dismissOnBackdropPress
 }) => {
   const styles = useThemeStyles(createPresentationStyles);
-  return /* @__PURE__ */ jsx19(
-    Pressable8,
+  return /* @__PURE__ */ jsx21(
+    Pressable9,
     {
       style: styles.backdrop,
       onPress: dismissOnBackdropPress ? onClose : void 0,
@@ -2180,16 +3014,16 @@ SelectBackdrop.displayName = "Select.Backdrop";
 
 // src/components/Select/Presentation/SelectHandle.tsx
 import { View as View14 } from "react-native";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SelectHandle = () => {
   const styles = useThemeStyles(createPresentationStyles);
-  return /* @__PURE__ */ jsx20(View14, { style: styles.handleWrap, accessible: false, children: /* @__PURE__ */ jsx20(View14, { style: styles.handle }) });
+  return /* @__PURE__ */ jsx22(View14, { style: styles.handleWrap, accessible: false, children: /* @__PURE__ */ jsx22(View14, { style: styles.handle }) });
 };
 SelectHandle.displayName = "Select.Handle";
 
 // src/components/Select/Presentation/SelectModal.tsx
 import { Modal as Modal3, View as View15 } from "react-native";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var SelectModal = ({
   visible,
   onClose,
@@ -2198,7 +3032,7 @@ var SelectModal = ({
   children
 }) => {
   const styles = useThemeStyles(createPresentationStyles);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     Modal3,
     {
       transparent: true,
@@ -2211,14 +3045,14 @@ var SelectModal = ({
           style: [styles.modalRoot, styles.modalPresentationRoot],
           testID: "select-content-root",
           children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx23(
               SelectBackdrop,
               {
                 onClose,
                 dismissOnBackdropPress
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx23(
               View15,
               {
                 style: [styles.content, styles.modalPresentation, contentStyle],
@@ -2236,7 +3070,7 @@ SelectModal.displayName = "Select.Modal";
 
 // src/components/Select/Presentation/SelectPopover.tsx
 import { Modal as Modal4, View as View16 } from "react-native";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var SelectPopover = ({
   visible,
   onClose,
@@ -2248,7 +3082,7 @@ var SelectPopover = ({
   children
 }) => {
   const styles = useThemeStyles(createPresentationStyles);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     Modal4,
     {
       transparent: true,
@@ -2265,14 +3099,14 @@ var SelectPopover = ({
           ],
           testID: "select-content-root",
           children: [
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx24(
               SelectBackdrop,
               {
                 onClose,
                 dismissOnBackdropPress
               }
             ),
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx24(
               View16,
               {
                 style: [
@@ -2296,7 +3130,7 @@ SelectPopover.displayName = "Select.Popover";
 
 // src/components/Select/Presentation/SelectSheet.tsx
 import { Modal as Modal5, View as View17 } from "react-native";
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectSheet = ({
   visible,
   onClose,
@@ -2305,7 +3139,7 @@ var SelectSheet = ({
   children
 }) => {
   const styles = useThemeStyles(createPresentationStyles);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     Modal5,
     {
       transparent: true,
@@ -2318,7 +3152,7 @@ var SelectSheet = ({
           style: [styles.modalRoot, styles.sheetRoot],
           testID: "select-content-root",
           children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx25(
               SelectBackdrop,
               {
                 onClose,
@@ -2331,7 +3165,7 @@ var SelectSheet = ({
                 style: [styles.content, styles.sheet, contentStyle],
                 testID: "select-sheet",
                 children: [
-                  /* @__PURE__ */ jsx23(SelectHandle, {}),
+                  /* @__PURE__ */ jsx25(SelectHandle, {}),
                   children
                 ]
               }
@@ -2420,11 +3254,11 @@ var createContentStyles = (theme) => StyleSheet18.create({
 });
 
 // src/components/Select/Content/SelectEmpty.tsx
-import { Text as Text10, View as View18 } from "react-native";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { Text as Text11, View as View18 } from "react-native";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var renderText = (node, style) => {
   if (typeof node === "string" || typeof node === "number") {
-    return /* @__PURE__ */ jsx24(Text10, { style, children: node });
+    return /* @__PURE__ */ jsx26(Text11, { style, children: node });
   }
   return node;
 };
@@ -2435,16 +3269,16 @@ var SelectEmpty = createSelectSlot(
 var SelectEmptyState = () => {
   const styles = useThemeStyles(createContentStyles);
   const { empty } = useSelectContext();
-  return /* @__PURE__ */ jsx24(View18, { style: styles.empty, children: renderText(empty, styles.emptyText) });
+  return /* @__PURE__ */ jsx26(View18, { style: styles.empty, children: renderText(empty, styles.emptyText) });
 };
 SelectEmptyState.displayName = "Select.EmptyState";
 
 // src/components/Select/Content/SelectLoading.tsx
-import { ActivityIndicator, Text as Text11, View as View19 } from "react-native";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { ActivityIndicator, Text as Text12, View as View19 } from "react-native";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var renderText2 = (node, style) => {
   if (typeof node === "string" || typeof node === "number") {
-    return /* @__PURE__ */ jsx25(Text11, { style, children: node });
+    return /* @__PURE__ */ jsx27(Text12, { style, children: node });
   }
   return node;
 };
@@ -2457,7 +3291,7 @@ var SelectLoadingState = () => {
   const styles = useThemeStyles(createContentStyles);
   const { loadingContent } = useSelectContext();
   return /* @__PURE__ */ jsxs13(View19, { style: styles.loading, children: [
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27(
       ActivityIndicator,
       {
         testID: "select-content-loading-indicator",
@@ -2471,9 +3305,9 @@ var SelectLoadingState = () => {
 SelectLoadingState.displayName = "Select.LoadingState";
 
 // src/components/Select/Content/SelectSearch.tsx
-import { useEffect as useEffect4 } from "react";
-import { Close as Close2, Search } from "@vellira-ui/icons";
-import { Pressable as Pressable9, TextInput, View as View20 } from "react-native";
+import { useEffect as useEffect8 } from "react";
+import { Close as Close2, Search as Search2 } from "@vellira-ui/icons";
+import { Pressable as Pressable10, TextInput as TextInput2, View as View20 } from "react-native";
 
 // src/components/Select/Content/SelectSearch.styles.ts
 import { StyleSheet as StyleSheet19 } from "react-native";
@@ -2519,7 +3353,7 @@ var createSearchStyles = (theme) => StyleSheet19.create({
 });
 
 // src/components/Select/Content/SelectSearch.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectSearch = createSelectSlot(
   "search",
   "Select.Search"
@@ -2537,7 +3371,7 @@ var SelectSearchField = () => {
     virtual
   } = useSelectContext();
   const shouldAutoFocus = !virtual || selectedRowIndex === 0;
-  useEffect4(() => {
+  useEffect8(() => {
     if (!shouldAutoFocus) return;
     const focusTimer = setTimeout(() => {
       searchInputRef.current?.focus();
@@ -2545,14 +3379,14 @@ var SelectSearchField = () => {
     return () => clearTimeout(focusTimer);
   }, [searchInputRef, shouldAutoFocus]);
   return /* @__PURE__ */ jsxs14(View20, { style: styles.searchWrap, children: [
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(
       View20,
       {
         style: styles.searchIcon,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
-        children: /* @__PURE__ */ jsx26(
-          Search,
+        children: /* @__PURE__ */ jsx28(
+          Search2,
           {
             width: 16,
             height: 16,
@@ -2561,8 +3395,8 @@ var SelectSearchField = () => {
         )
       }
     ),
-    /* @__PURE__ */ jsx26(
-      TextInput,
+    /* @__PURE__ */ jsx28(
+      TextInput2,
       {
         ref: searchInputRef,
         value: query,
@@ -2575,15 +3409,15 @@ var SelectSearchField = () => {
         style: [styles.searchInput, searchStyle]
       }
     ),
-    query && /* @__PURE__ */ jsx26(
-      Pressable9,
+    query && /* @__PURE__ */ jsx28(
+      Pressable10,
       {
         accessibilityRole: "button",
         accessibilityLabel: "Clear search",
         hitSlop: 8,
         onPress: () => setQuery(""),
         style: styles.searchClearButton,
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx28(
           Close2,
           {
             width: 14,
@@ -2598,15 +3432,15 @@ var SelectSearchField = () => {
 SelectSearchField.displayName = "Select.SearchField";
 
 // src/components/Select/Content/SelectContent.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var SelectContent = createSelectSlot(
   "content",
   "Select.Content"
 );
 var SelectContentSurface = () => {
   const styles = useThemeStyles(createContentStyles);
-  const wasOpenRef = useRef4(false);
-  const [openCycle, setOpenCycle] = useState3(0);
+  const wasOpenRef = useRef6(false);
+  const [openCycle, setOpenCycle] = useState8(0);
   const context = useSelectContext();
   const {
     isOpen,
@@ -2633,7 +3467,7 @@ var SelectContentSurface = () => {
   } = context;
   const shouldSeedSelectedPosition = Boolean(context.virtual) && selectedRowIndex > 0 && query === "";
   const initialScrollIndex = shouldSeedSelectedPosition ? selectedRowIndex : void 0;
-  useEffect5(() => {
+  useEffect9(() => {
     if (isOpen && !wasOpenRef.current) {
       setOpenCycle((cycle) => cycle + 1);
     }
@@ -2648,7 +3482,7 @@ var SelectContentSurface = () => {
         const selectedGroupCount = selectedOptions.filter(
           (option) => enabledGroupValues.includes(option.value)
         ).length;
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx29(
           SelectGroupActionRow,
           {
             label: item.label,
@@ -2659,14 +3493,14 @@ var SelectContentSurface = () => {
           }
         );
       }
-      return /* @__PURE__ */ jsx27(SelectGroupLabelRow, { label: item.label });
+      return /* @__PURE__ */ jsx29(SelectGroupLabelRow, { label: item.label });
     }
     if (item.type === "separator") {
-      return /* @__PURE__ */ jsx27(SelectSeparatorRow, {});
+      return /* @__PURE__ */ jsx29(SelectSeparatorRow, {});
     }
     const isSelected = selectedValues.includes(item.option.value);
     const maxReached = !isSelected && typeof maxSelected === "number" && selectedValues.length >= maxSelected;
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       SelectItemRow,
       {
         option: item.option,
@@ -2686,34 +3520,34 @@ var SelectContentSurface = () => {
         accessibilityRole: "toolbar",
         accessibilityLabel: `${resolvedLabel} selection actions`,
         children: [
-          /* @__PURE__ */ jsx27(
-            Pressable10,
+          /* @__PURE__ */ jsx29(
+            Pressable11,
             {
               onPress: closeContent,
               hitSlop: 8,
               style: styles.toolbarAction,
               accessibilityRole: "button",
               accessibilityLabel: "Close selection",
-              children: /* @__PURE__ */ jsx27(Text12, { style: styles.cancelText, children: "Cancel" })
+              children: /* @__PURE__ */ jsx29(Text13, { style: styles.cancelText, children: "Cancel" })
             }
           ),
-          /* @__PURE__ */ jsx27(Text12, { style: styles.title, numberOfLines: 1, accessibilityRole: "header", children: resolvedLabel }),
-          /* @__PURE__ */ jsx27(
-            Pressable10,
+          /* @__PURE__ */ jsx29(Text13, { style: styles.title, numberOfLines: 1, accessibilityRole: "header", children: resolvedLabel }),
+          /* @__PURE__ */ jsx29(
+            Pressable11,
             {
               onPress: closeContent,
               hitSlop: 8,
               style: styles.toolbarAction,
               accessibilityRole: "button",
               accessibilityLabel: "Done",
-              children: /* @__PURE__ */ jsx27(Text12, { style: styles.doneText, children: "Done" })
+              children: /* @__PURE__ */ jsx29(Text13, { style: styles.doneText, children: "Done" })
             }
           )
         ]
       }
     ),
-    searchable && /* @__PURE__ */ jsx27(SelectSearchField, {}),
-    loading && filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectLoadingState, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectEmptyState, {}) : /* @__PURE__ */ jsx27(
+    searchable && /* @__PURE__ */ jsx29(SelectSearchField, {}),
+    loading && filteredRows.length === 0 ? /* @__PURE__ */ jsx29(SelectLoadingState, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx29(SelectEmptyState, {}) : /* @__PURE__ */ jsx29(
       FlatList2,
       {
         data: filteredRows,
@@ -2735,7 +3569,7 @@ var SelectContentSurface = () => {
     )
   ] });
   if (resolvedPresentation === "sheet") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       SelectSheet,
       {
         visible: isOpen,
@@ -2747,7 +3581,7 @@ var SelectContentSurface = () => {
     );
   }
   if (resolvedPresentation === "popover") {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx29(
       SelectPopover,
       {
         visible: isOpen,
@@ -2761,7 +3595,7 @@ var SelectContentSurface = () => {
       }
     );
   }
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     SelectModal,
     {
       visible: isOpen,
@@ -2775,8 +3609,7 @@ var SelectContentSurface = () => {
 SelectContentSurface.displayName = "Select.ContentSurface";
 
 // src/components/Select/Root/SelectRoot.tsx
-import { useMemo as useMemo7, useRef as useRef5, useState as useState5 } from "react";
-import { useSelect } from "@vellira-ui/core";
+import { useId as useId4, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
 import { View as View23 } from "react-native";
 
 // src/components/Select/internal/useSelectAccessibility.ts
@@ -2807,17 +3640,17 @@ var useSelectAccessibility = ({
 };
 
 // src/components/Select/internal/useSelectCollection.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var useSelectCollection = (children, optionsProp) => {
-  const parsedChildren = useMemo5(
+  const parsedChildren = useMemo6(
     () => parseSelectChildren(children),
     [children]
   );
-  const options = useMemo5(
+  const options = useMemo6(
     () => [...optionsProp ?? [], ...parsedChildren.options],
     [optionsProp, parsedChildren.options]
   );
-  const rows = useMemo5(() => {
+  const rows = useMemo6(() => {
     if (parsedChildren.rows.length > 0) {
       return parsedChildren.rows;
     }
@@ -2848,7 +3681,7 @@ var useSelectPresentation = (presentation = "auto") => {
 };
 
 // src/components/Select/internal/useSelectSearch.ts
-import { useEffect as useEffect6, useMemo as useMemo6, useState as useState4 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo7, useState as useState9 } from "react";
 var useSelectSearch = ({
   rows,
   isOpen,
@@ -2858,10 +3691,10 @@ var useSelectSearch = ({
   filterOptions,
   filter = defaultSelectFilter
 }) => {
-  const [query, setQuery] = useState4("");
+  const [query, setQuery] = useState9("");
   const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
   const shouldFilter = filterOptions ?? !onSearch;
-  const filteredRows = useMemo6(() => {
+  const filteredRows = useMemo7(() => {
     if (!query || !shouldFilter) return rows;
     const visibleRows = [];
     let pendingGroup;
@@ -2888,7 +3721,7 @@ var useSelectSearch = ({
       return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
     });
   }, [filter, query, rows, shouldFilter]);
-  useEffect6(() => {
+  useEffect10(() => {
     if (!isOpen) {
       setQuery("");
       return;
@@ -2912,9 +3745,9 @@ var SelectIcon = createSelectSlot(
 );
 
 // src/components/Select/Trigger/SelectTrigger.tsx
-import { cloneElement as cloneElement5, isValidElement as isValidElement7 } from "react";
+import { cloneElement as cloneElement7, isValidElement as isValidElement9 } from "react";
 import { ChevronDown as ChevronDown2, Close as Close3 } from "@vellira-ui/icons";
-import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable11, Text as Text13, View as View22 } from "react-native";
+import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable12, Text as Text14, View as View22 } from "react-native";
 
 // src/components/Select/Trigger/SelectTrigger.styles.ts
 import { StyleSheet as StyleSheet20 } from "react-native";
@@ -2998,7 +3831,7 @@ var createTriggerStyles = (theme) => StyleSheet20.create({
 });
 
 // src/components/Select/Trigger/SelectTrigger.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var SelectTriggerSlot = createSelectSlot(
   "trigger",
   "Select.Trigger"
@@ -3042,7 +3875,7 @@ function SelectTrigger({
   };
   const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a list of options" : required ? "Required. Opens a list of options" : "Opens a list of options");
   const iconColor = disabled ? theme.components.select.trigger.disabled.icon : triggerState.icon;
-  const renderIcon = (icon) => isValidElement7(icon) ? cloneElement5(icon, { color: iconColor, size: resolvedIconSize }) : null;
+  const renderIcon = (icon) => isValidElement9(icon) ? cloneElement7(icon, { color: iconColor, size: resolvedIconSize }) : null;
   const renderValue = () => {
     const valueStyle = [
       styles.text,
@@ -3055,10 +3888,10 @@ function SelectTrigger({
       textStyle
     ];
     if (typeof displayText === "string" || typeof displayText === "number") {
-      return /* @__PURE__ */ jsx28(Text13, { numberOfLines: 1, style: valueStyle, children: displayText });
+      return /* @__PURE__ */ jsx30(Text14, { numberOfLines: 1, style: valueStyle, children: displayText });
     }
-    if (isValidElement7(displayText) && displayText.type === Text13) {
-      return cloneElement5(displayText, {
+    if (isValidElement9(displayText) && displayText.type === Text14) {
+      return cloneElement7(displayText, {
         numberOfLines: displayText.props.numberOfLines ?? 1,
         style: [valueStyle, displayText.props.style]
       });
@@ -3066,7 +3899,7 @@ function SelectTrigger({
     return displayText;
   };
   return /* @__PURE__ */ jsxs16(
-    Pressable11,
+    Pressable12,
     {
       nativeID,
       disabled,
@@ -3106,7 +3939,7 @@ function SelectTrigger({
         triggerStyle
       ],
       children: [
-        startIcon && /* @__PURE__ */ jsx28(
+        startIcon && /* @__PURE__ */ jsx30(
           View22,
           {
             pointerEvents: "none",
@@ -3116,25 +3949,25 @@ function SelectTrigger({
             children: renderIcon(startIcon)
           }
         ),
-        prefix && /* @__PURE__ */ jsx28(Text13, { style: styles.affix, children: prefix }),
-        /* @__PURE__ */ jsx28(View22, { style: styles.value, children: renderValue() }),
-        suffix && /* @__PURE__ */ jsx28(Text13, { style: styles.affix, children: suffix }),
-        loading ? /* @__PURE__ */ jsx28(
+        prefix && /* @__PURE__ */ jsx30(Text14, { style: styles.affix, children: prefix }),
+        /* @__PURE__ */ jsx30(View22, { style: styles.value, children: renderValue() }),
+        suffix && /* @__PURE__ */ jsx30(Text14, { style: styles.affix, children: suffix }),
+        loading ? /* @__PURE__ */ jsx30(
           ActivityIndicator2,
           {
             testID: "select-loading-indicator",
             size: "small",
             color: iconColor
           }
-        ) : clearable && hasValue && !disabled ? /* @__PURE__ */ jsx28(
-          Pressable11,
+        ) : clearable && hasValue && !disabled ? /* @__PURE__ */ jsx30(
+          Pressable12,
           {
             accessibilityRole: "button",
             accessibilityLabel: "Clear selection",
             hitSlop: 8,
             onPress: onClear,
             style: styles.clearButton,
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx30(
               Close3,
               {
                 width: 14,
@@ -3143,7 +3976,7 @@ function SelectTrigger({
               }
             )
           }
-        ) : endIcon ? /* @__PURE__ */ jsx28(
+        ) : endIcon ? /* @__PURE__ */ jsx30(
           View22,
           {
             pointerEvents: "none",
@@ -3152,13 +3985,13 @@ function SelectTrigger({
             importantForAccessibility: "no",
             children: renderIcon(endIcon)
           }
-        ) : /* @__PURE__ */ jsx28(
+        ) : /* @__PURE__ */ jsx30(
           View22,
           {
             style: [styles.endIcon, isOpen && styles.iconOpen],
             accessibilityElementsHidden: true,
             importantForAccessibility: "no",
-            children: /* @__PURE__ */ jsx28(ChevronDown2, { width: 16, height: 16, color: iconColor })
+            children: /* @__PURE__ */ jsx30(ChevronDown2, { width: 16, height: 16, color: iconColor })
           }
         )
       ]
@@ -3174,7 +4007,7 @@ var SelectValue = createSelectSlot(
 );
 
 // src/components/Select/Root/SelectRoot.tsx
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 function SelectRoot(props) {
   const {
     label,
@@ -3225,10 +4058,11 @@ function SelectRoot(props) {
     testID
   } = props;
   const field = useFormFieldContext();
+  const overlayId = useId4();
   const hasOwnField = Boolean(label || description || error);
-  const [triggerWidth, setTriggerWidth] = useState5();
-  const searchInputRef = useRef5(null);
-  const selectedFocusValueRef = useRef5(void 0);
+  const [triggerWidth, setTriggerWidth] = useState10();
+  const searchInputRef = useRef7(null);
+  const selectedFocusValueRef = useRef7(void 0);
   const resolvedPresentation = useSelectPresentation(presentation);
   const {
     options,
@@ -3281,7 +4115,7 @@ function SelectRoot(props) {
   const selectedOptions = options.filter(
     (option) => selectedValues.includes(option.value)
   );
-  const optionsByValue = useMemo7(
+  const optionsByValue = useMemo8(
     () => new Map(
       options.filter((option) => !option.disabled).map((option) => [option.value, option])
     ),
@@ -3306,7 +4140,7 @@ function SelectRoot(props) {
     )
   );
   const itemHeight = typeof virtual === "object" ? virtual.estimatedItemSize ?? 46 : 46;
-  const displayValue = useMemo7(() => {
+  const displayValue = useMemo8(() => {
     if (renderValue) {
       return renderValue(
         props.multiple ? selectedOptions : selectedOption ?? null,
@@ -3338,6 +4172,12 @@ function SelectRoot(props) {
     fieldDescribedBy: field?.ariaDescribedBy
   });
   const hasValue = selectedValues.length > 0;
+  const dismiss = useNativeDismiss({
+    id: overlayId,
+    visible: isOpen,
+    closeOnOutsidePress: dismissOnBackdropPress,
+    onClose: closeDropdown
+  });
   const clearValue = () => {
     selectedFocusValueRef.current = void 0;
     selectValue("");
@@ -3424,7 +4264,7 @@ function SelectRoot(props) {
     searchInputRef,
     empty: empty ?? emptyFromChildren ?? "Nothing found",
     loadingContent: loadingFromChildren ?? loadingText,
-    closeContent: closeDropdown,
+    closeContent: dismiss.requestClose,
     openContent: openDropdown,
     clearValue,
     selectOption,
@@ -3445,13 +4285,13 @@ function SelectRoot(props) {
     fieldLabelId: !hasOwnField ? field?.labelId : void 0,
     fieldDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0
   };
-  const control = /* @__PURE__ */ jsx29(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17(
+  const control = /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17(
     View23,
     {
       testID,
       onLayout: (event) => setTriggerWidth(event.nativeEvent.layout.width),
       children: [
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx31(
           SelectTrigger,
           {
             displayText: displayValue,
@@ -3481,14 +4321,14 @@ function SelectRoot(props) {
             onClear: clearValue
           }
         ),
-        /* @__PURE__ */ jsx29(SelectContentSurface, {})
+        /* @__PURE__ */ jsx31(SelectContentSurface, {})
       ]
     }
   ) });
   if (!hasOwnField && field) {
     return control;
   }
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     FormField,
     {
       label,
@@ -3530,7 +4370,7 @@ import { View as View24 } from "react-native";
 import { createContext as createContext6, useContext as useContext6 } from "react";
 var TabsContext = createContext6(null);
 var TabsProvider = TabsContext.Provider;
-var useTabs = () => {
+var useTabs2 = () => {
   const context = useContext6(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used inside <Tabs>.");
@@ -3567,11 +4407,11 @@ var createStyles14 = (theme) => StyleSheet21.create({
 });
 
 // src/components/Tabs/List/TabsList.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var TabsList = ({ children, style }) => {
   const styles = useThemeStyles(createStyles14);
-  const { orientation, appearance } = useTabs();
-  return /* @__PURE__ */ jsx30(
+  const { orientation, appearance } = useTabs2();
+  return /* @__PURE__ */ jsx32(
     View24,
     {
       accessibilityRole: "tablist",
@@ -3619,12 +4459,12 @@ var createStyles15 = (theme) => StyleSheet22.create({
 });
 
 // src/components/Tabs/Panel/TabsPanel.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TabsPanel = ({ index, children, style }) => {
   const styles = useThemeStyles(createStyles15);
-  const { activeIndex, orientation } = useTabs();
+  const { activeIndex, orientation } = useTabs2();
   if (activeIndex !== index) return null;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     View25,
     {
       style: [
@@ -3639,8 +4479,8 @@ var TabsPanel = ({ index, children, style }) => {
 TabsPanel.displayName = "TabsPanel";
 
 // src/components/Tabs/Tab/Tab.tsx
-import { cloneElement as cloneElement6, isValidElement as isValidElement8 } from "react";
-import { Pressable as Pressable12, Text as Text14, View as View26 } from "react-native";
+import { cloneElement as cloneElement8, isValidElement as isValidElement10 } from "react";
+import { Pressable as Pressable13, Text as Text15, View as View26 } from "react-native";
 
 // src/components/Tabs/Tab/Tab.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
@@ -3763,7 +4603,7 @@ var createStyles16 = (theme) => StyleSheet23.create({
 });
 
 // src/components/Tabs/Tab/Tab.tsx
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Tab = ({
   index,
   children,
@@ -3774,18 +4614,18 @@ var Tab = ({
 }) => {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles16);
-  const { activeIndex, appearance, orientation, setActiveIndex } = useTabs();
+  const { activeIndex, appearance, orientation, setActiveIndex } = useTabs2();
   const isActive = activeIndex === index;
   const isPills = appearance === "pills";
   const isUnderline = appearance === "underline";
   const isDefault = appearance === "default";
   const isVertical = orientation === "vertical";
   const iconColor = isPills && isActive ? theme.components.tabs.pills.active.fg : isActive ? theme.components.tabs.trigger.active.fg : theme.components.tabs.trigger.default.fg;
-  const renderedIcon = isValidElement8(icon) ? cloneElement6(icon, {
+  const renderedIcon = isValidElement10(icon) ? cloneElement8(icon, {
     color: iconColor
   }) : icon;
-  return /* @__PURE__ */ jsx32(
-    Pressable12,
+  return /* @__PURE__ */ jsx34(
+    Pressable13,
     {
       disabled,
       accessibilityRole: "tab",
@@ -3806,7 +4646,7 @@ var Tab = ({
         style
       ],
       children: ({ pressed }) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
-        isUnderline && !isVertical && /* @__PURE__ */ jsx32(
+        isUnderline && !isVertical && /* @__PURE__ */ jsx34(
           View26,
           {
             pointerEvents: "none",
@@ -3816,7 +4656,7 @@ var Tab = ({
             ]
           }
         ),
-        isUnderline && isVertical && /* @__PURE__ */ jsx32(
+        isUnderline && isVertical && /* @__PURE__ */ jsx34(
           View26,
           {
             pointerEvents: "none",
@@ -3827,9 +4667,9 @@ var Tab = ({
             ]
           }
         ),
-        icon != null && /* @__PURE__ */ jsx32(View26, { style: styles.tabIcon, children: renderedIcon }),
-        children != null && /* @__PURE__ */ jsx32(
-          Text14,
+        icon != null && /* @__PURE__ */ jsx34(View26, { style: styles.tabIcon, children: renderedIcon }),
+        children != null && /* @__PURE__ */ jsx34(
+          Text15,
           {
             numberOfLines: 2,
             ellipsizeMode: "tail",
@@ -3850,8 +4690,7 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/Tabs.tsx
-import { useMemo as useMemo8 } from "react";
-import { useTabs as useTabs2 } from "@vellira-ui/core";
+import { useMemo as useMemo9 } from "react";
 import { View as View27 } from "react-native";
 
 // src/components/Tabs/Tabs.styles.ts
@@ -3871,7 +4710,7 @@ var createStyles17 = (theme) => StyleSheet24.create({
 });
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TabsRoot = ({
   children,
   activeIndex: controlledActiveIndex,
@@ -3882,17 +4721,17 @@ var TabsRoot = ({
   style
 }) => {
   const styles = useThemeStyles(createStyles17);
-  const { activeIndex, setActiveIndex } = useTabs2({
+  const { activeIndex, setActiveIndex } = useTabs({
     activeIndex: controlledActiveIndex,
     defaultActiveIndex,
     onChange,
     orientation
   });
-  const value = useMemo8(
+  const value = useMemo9(
     () => ({ activeIndex, appearance, orientation, setActiveIndex }),
     [activeIndex, appearance, orientation, setActiveIndex]
   );
-  return /* @__PURE__ */ jsx33(TabsProvider, { value, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(TabsProvider, { value, children: /* @__PURE__ */ jsx35(
     View27,
     {
       style: [
@@ -3914,74 +4753,8 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
-import { Modal as Modal6, Pressable as Pressable13, Text as Text15, View as View28 } from "react-native";
-
-// src/hooks/useNativeFloatingPosition.ts
-import { useCallback as useCallback2, useRef as useRef6, useState as useState6 } from "react";
-import { Dimensions } from "react-native";
-var safePadding = 12;
-function useNativeFloatingPosition(placement = "top", offset = 8) {
-  const [position, setPosition] = useState6({ top: 0, left: 0 });
-  const floatingSizeRef = useRef6({
-    width: 0,
-    height: 0
-  });
-  const lastTriggerRef = useRef6(null);
-  const clamp = useCallback2((value, min, max) => {
-    return Math.min(Math.max(value, min), Math.max(min, max));
-  }, []);
-  const calculatePosition = useCallback2(
-    (triggerRect, size) => {
-      const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
-      const [side, align = "center"] = placement.split("-");
-      const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
-      const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
-      const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
-      const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
-      const rawPosition = side === "left" || side === "right" ? { top: verticalTop, left: verticalLeft } : { top: horizontalTop, left: horizontalLeft };
-      return {
-        top: clamp(
-          rawPosition.top,
-          safePadding,
-          screenHeight - size.height - safePadding
-        ),
-        left: clamp(
-          rawPosition.left,
-          safePadding,
-          screenWidth - size.width - safePadding
-        )
-      };
-    },
-    [placement, offset, clamp]
-  );
-  const updatePosition = useCallback2(
-    (triggerRef, measuredSize = floatingSizeRef.current) => {
-      lastTriggerRef.current = triggerRef;
-      const node = triggerRef.current;
-      if (!node || typeof node.measureInWindow !== "function") {
-        setPosition({ top: 0, left: 0 });
-        return;
-      }
-      node.measureInWindow((x, y, width, height) => {
-        setPosition(calculatePosition({ x, y, width, height }, measuredSize));
-      });
-    },
-    [calculatePosition]
-  );
-  const onFloatingLayout = useCallback2(
-    (event) => {
-      const { width, height } = event.nativeEvent.layout;
-      const nextSize = { width, height };
-      floatingSizeRef.current = nextSize;
-      if (lastTriggerRef.current) {
-        updatePosition(lastTriggerRef.current, nextSize);
-      }
-    },
-    [updatePosition]
-  );
-  return { position, updatePosition, onFloatingLayout };
-}
+import { useEffect as useEffect11, useId as useId5, useRef as useRef8, useState as useState11 } from "react";
+import { Modal as Modal6, Pressable as Pressable14, Text as Text16, View as View28 } from "react-native";
 
 // src/components/Tooltip/Tooltip.styles.ts
 import { StyleSheet as StyleSheet25 } from "react-native";
@@ -4022,7 +4795,7 @@ var createStyles18 = (theme) => StyleSheet25.create({
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -4035,9 +4808,10 @@ function Tooltip({
   textStyle
 }) {
   const styles = useThemeStyles(createStyles18);
-  const [visible, setVisible] = useState7(false);
-  const triggerRef = useRef7(null);
-  const closeTimerRef = useRef7(null);
+  const overlayId = useId5();
+  const [visible, setVisible] = useState11(false);
+  const triggerRef = useRef8(null);
+  const closeTimerRef = useRef8(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
   const hideDelay = delay?.close ?? 2500;
   const clearCloseTimer = () => {
@@ -4046,6 +4820,14 @@ function Tooltip({
       closeTimerRef.current = null;
     }
   };
+  const dismiss = useNativeDismiss({
+    id: overlayId,
+    visible: visible && !disabled,
+    onClose: () => {
+      clearCloseTimer();
+      setVisible(false);
+    }
+  });
   const showTooltip = () => {
     if (disabled) return;
     clearCloseTimer();
@@ -4056,20 +4838,19 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect7(() => {
+  useEffect11(() => {
     return clearCloseTimer;
   }, []);
   return /* @__PURE__ */ jsxs19(View28, { style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx34(Pressable13, { ref: triggerRef, onLongPress: showTooltip, children }),
-    /* @__PURE__ */ jsx34(Modal6, { visible: visible && !disabled, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx34(
-      Pressable13,
+    /* @__PURE__ */ jsx36(Pressable14, { ref: triggerRef, onLongPress: showTooltip, children }),
+    /* @__PURE__ */ jsx36(
+      Modal6,
       {
-        style: styles.overlay,
-        onPress: () => {
-          clearCloseTimer();
-          setVisible(false);
-        },
-        children: /* @__PURE__ */ jsx34(
+        visible: visible && !disabled,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: dismiss.requestClose,
+        children: /* @__PURE__ */ jsx36(Pressable14, { style: styles.overlay, onPress: dismiss.requestOutsideClose, children: /* @__PURE__ */ jsx36(
           View28,
           {
             pointerEvents: "none",
@@ -4083,18 +4864,18 @@ function Tooltip({
               contentStyle
             ],
             onLayout: onFloatingLayout,
-            children: typeof content === "string" ? /* @__PURE__ */ jsx34(Text15, { style: [styles.text, textStyle], children: content }) : content
+            children: typeof content === "string" ? /* @__PURE__ */ jsx36(Text16, { style: [styles.text, textStyle], children: content }) : content
           }
-        )
+        ) })
       }
-    ) })
+    )
   ] });
 }
 Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
-import { cloneElement as cloneElement7, useState as useState8 } from "react";
-import { ActivityIndicator as ActivityIndicator3, Pressable as Pressable14, Text as Text16, View as View29 } from "react-native";
+import { cloneElement as cloneElement9, useState as useState12 } from "react";
+import { ActivityIndicator as ActivityIndicator3, Pressable as Pressable15, Text as Text17, View as View29 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -4171,7 +4952,7 @@ var createStyles19 = (theme) => StyleSheet26.create({
 });
 
 // src/primitives/Button/Button.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     px: 12,
@@ -4227,9 +5008,9 @@ function Button({
   const config = sizeMap[size];
   const radius = shape === "square" ? theme.tokens.radius.sm : shape === "rounded" ? theme.tokens.radius.md : theme.tokens.radius.full;
   const appearanceTheme = theme.components.button[color][appearance];
-  const [isHovered, setIsHovered] = useState8(false);
-  const [isFocused, setIsFocused] = useState8(false);
-  const [labelWidth, setLabelWidth] = useState8(0);
+  const [isHovered, setIsHovered] = useState12(false);
+  const [isFocused, setIsFocused] = useState12(false);
+  const [labelWidth, setLabelWidth] = useState12(0);
   const isDisabled = disabled || loading;
   const iconOnly = iconOnlyProp || !children && Boolean(iconStart || iconEnd);
   const content = loading && loadingText ? loadingText : children;
@@ -4255,7 +5036,7 @@ function Button({
     setIsHovered(false);
     onHoverOut?.(event);
   };
-  const renderIcon = (icon, iconColor) => cloneElement7(icon, {
+  const renderIcon = (icon, iconColor) => cloneElement9(icon, {
     color: iconColor,
     size: resolvedIconSize
   });
@@ -4266,8 +5047,8 @@ function Button({
     );
   };
   const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? appearanceTheme.pressed : isHovered ? appearanceTheme.hover : appearanceTheme.default;
-  return /* @__PURE__ */ jsx35(
-    Pressable14,
+  return /* @__PURE__ */ jsx37(
+    Pressable15,
     {
       ...props,
       testID,
@@ -4304,11 +5085,11 @@ function Button({
         const interactionTheme = getInteractionTheme(pressed);
         const contentColor = interactionTheme.fg;
         return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-          loading && /* @__PURE__ */ jsx35(ActivityIndicator3, { size: "small", color: contentColor }),
+          loading && /* @__PURE__ */ jsx37(ActivityIndicator3, { size: "small", color: contentColor }),
           !loading && iconStart && renderIcon(iconStart, contentColor),
           content && !iconOnly && /* @__PURE__ */ jsxs20(View29, { style: styles.labelSlot, children: [
-            /* @__PURE__ */ jsx35(
-              Text16,
+            /* @__PURE__ */ jsx37(
+              Text17,
               {
                 onLayout: handleLabelLayout,
                 style: [
@@ -4323,8 +5104,8 @@ function Button({
                 children: content
               }
             ),
-            measureLabel && /* @__PURE__ */ jsx35(
-              Text16,
+            measureLabel && /* @__PURE__ */ jsx37(
+              Text17,
               {
                 accessibilityElementsHidden: true,
                 importantForAccessibility: "no-hide-descendants",
@@ -4341,8 +5122,8 @@ function Button({
               }
             )
           ] }),
-          badge && !iconOnly && /* @__PURE__ */ jsx35(
-            Text16,
+          badge && !iconOnly && /* @__PURE__ */ jsx37(
+            Text17,
             {
               style: [
                 styles.badge,
@@ -4354,8 +5135,8 @@ function Button({
               children: badge
             }
           ),
-          shortcut && !iconOnly && /* @__PURE__ */ jsx35(
-            Text16,
+          shortcut && !iconOnly && /* @__PURE__ */ jsx37(
+            Text17,
             {
               style: [
                 styles.shortcut,
@@ -4374,10 +5155,9 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect8 } from "react";
-import { useControllableState as useControllableState3 } from "@vellira-ui/core";
+import { forwardRef as forwardRef2, useEffect as useEffect12 } from "react";
 import { Check as Check2 } from "@vellira-ui/icons";
-import { Pressable as Pressable15, Text as Text17, View as View30 } from "react-native";
+import { Pressable as Pressable16, Text as Text18, View as View30 } from "react-native";
 
 // src/primitives/Checkbox/Checkbox.styles.ts
 import { StyleSheet as StyleSheet27 } from "react-native";
@@ -4524,7 +5304,7 @@ var createStyles20 = (theme) => StyleSheet27.create({
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var iconSizeBySize = {
   sm: 10,
   md: 12,
@@ -4570,7 +5350,7 @@ var Checkbox = forwardRef2(
       lg: styles.errorTextLg
     };
     const hasError = Boolean(error);
-    const [isChecked, setIsChecked] = useControllableState3({
+    const [isChecked, setIsChecked] = useControllableState({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
@@ -4582,15 +5362,15 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect8(() => {
+    useEffect12(() => {
       devWarning(
         Boolean(resolvedAccessibilityLabel),
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
       );
     }, [resolvedAccessibilityLabel]);
     return /* @__PURE__ */ jsxs21(View30, { style: styles.container, children: [
-      /* @__PURE__ */ jsx36(
-        Pressable15,
+      /* @__PURE__ */ jsx38(
+        Pressable16,
         {
           ...PressableProps,
           ref,
@@ -4614,7 +5394,7 @@ var Checkbox = forwardRef2(
             const isSelected = isChecked || indeterminate;
             const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? checkboxColor.pressed.fg : checkboxColor.default.fg;
             return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx38(
                 View30,
                 {
                   style: [
@@ -4632,7 +5412,7 @@ var Checkbox = forwardRef2(
                     hasError && styles.boxError,
                     disabled && styles.boxDisabled
                   ],
-                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx36(
+                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx38(
                     View30,
                     {
                       style: [
@@ -4642,11 +5422,11 @@ var Checkbox = forwardRef2(
                         }
                       ]
                     }
-                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx36(Check2, { size: iconSizeBySize[size], color: checkColor }))
+                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx38(Check2, { size: iconSizeBySize[size], color: checkColor }))
                 }
               ),
               label && /* @__PURE__ */ jsxs21(
-                Text17,
+                Text18,
                 {
                   style: [
                     styles.label,
@@ -4659,7 +5439,7 @@ var Checkbox = forwardRef2(
                   ],
                   children: [
                     label,
-                    required && /* @__PURE__ */ jsx36(Text17, { style: styles.requiredMark, children: " *" })
+                    required && /* @__PURE__ */ jsx38(Text18, { style: styles.requiredMark, children: " *" })
                   ]
                 }
               )
@@ -4667,8 +5447,8 @@ var Checkbox = forwardRef2(
           }
         }
       ),
-      description && /* @__PURE__ */ jsx36(
-        Text17,
+      description && /* @__PURE__ */ jsx38(
+        Text18,
         {
           style: [
             styles.descriptionText,
@@ -4678,15 +5458,15 @@ var Checkbox = forwardRef2(
           children: description
         }
       ),
-      hasError && /* @__PURE__ */ jsx36(Text17, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
+      hasError && /* @__PURE__ */ jsx38(Text18, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as cloneElement8, forwardRef as forwardRef3, useState as useState9 } from "react";
-import { Pressable as Pressable16, Text as Text18, TextInput as TextInput2, View as View31 } from "react-native";
+import { cloneElement as cloneElement10, forwardRef as forwardRef3, useState as useState13 } from "react";
+import { Pressable as Pressable17, Text as Text19, TextInput as TextInput3, View as View31 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet28 } from "react-native";
@@ -4836,7 +5616,7 @@ var createStyles21 = (theme) => StyleSheet28.create({
 });
 
 // src/primitives/Input/Input.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var keyboardTypeByInputType = {
   text: "default",
   email: "email-address",
@@ -4937,8 +5717,8 @@ var Input = forwardRef3(
     const styles = useThemeStyles(createStyles21);
     const field = useFormFieldContext();
     const hasOwnField = Boolean(label || description || error);
-    const [isFocused, setIsFocused] = useState9(false);
-    const [uncontrolledValue, setUncontrolledValue] = useState9(
+    const [isFocused, setIsFocused] = useState13(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState13(
       defaultValue ?? ""
     );
     const isControlled = value !== void 0;
@@ -4955,7 +5735,7 @@ var Input = forwardRef3(
     const isReadOnly = readOnly || loading;
     const placeholderTextColor = isDisabled ? getDisabledPlaceholderTextColor(theme) : readOnly ? theme.components.input.readOnly.placeholder : inputState.placeholder;
     const isPassword = type === "password";
-    const [isPasswordRevealed, setIsPasswordRevealed] = useState9(false);
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState13(false);
     const resolvedIconSize = iconSize ?? 16;
     const handleFocus = (event) => {
       setIsFocused(true);
@@ -4987,21 +5767,21 @@ var Input = forwardRef3(
     const endIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[endIconTone];
     const clearIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[clearIconTone];
     const control = /* @__PURE__ */ jsxs22(View31, { style: styles.inputWrapper, children: [
-      startIcon && /* @__PURE__ */ jsx37(
+      startIcon && /* @__PURE__ */ jsx39(
         View31,
         {
           pointerEvents: "none",
           style: styles.leftIcon,
           accessibilityElementsHidden: true,
           importantForAccessibility: "no",
-          children: cloneElement8(startIcon, {
+          children: cloneElement10(startIcon, {
             color: startIconColor,
             size: resolvedIconSize
           })
         }
       ),
-      /* @__PURE__ */ jsx37(
-        TextInput2,
+      /* @__PURE__ */ jsx39(
+        TextInput3,
         {
           ...props,
           ref,
@@ -5056,37 +5836,37 @@ var Input = forwardRef3(
           ]
         }
       ),
-      showClearButton ? /* @__PURE__ */ jsx37(
-        Pressable16,
+      showClearButton ? /* @__PURE__ */ jsx39(
+        Pressable17,
         {
           accessibilityRole: "button",
           accessibilityLabel: "Clear input",
           hitSlop: 8,
           onPress: handleClear,
           style: styles.clearButton,
-          children: clearIcon ? cloneElement8(clearIcon, {
+          children: clearIcon ? cloneElement10(clearIcon, {
             color: clearIconColor,
             size: resolvedIconSize
-          }) : /* @__PURE__ */ jsx37(Text18, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
+          }) : /* @__PURE__ */ jsx39(Text19, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
         }
-      ) : showRevealButton ? /* @__PURE__ */ jsx37(
-        Pressable16,
+      ) : showRevealButton ? /* @__PURE__ */ jsx39(
+        Pressable17,
         {
           accessibilityRole: "button",
           accessibilityLabel: isPasswordRevealed ? "Hide password" : "Show password",
           hitSlop: 8,
           onPress: () => setIsPasswordRevealed((revealed) => !revealed),
           style: styles.revealButton,
-          children: /* @__PURE__ */ jsx37(Text18, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
+          children: /* @__PURE__ */ jsx39(Text19, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
         }
-      ) : showRightIcon && endIcon && /* @__PURE__ */ jsx37(
+      ) : showRightIcon && endIcon && /* @__PURE__ */ jsx39(
         View31,
         {
           pointerEvents: "none",
           style: styles.rightIcon,
           accessibilityElementsHidden: true,
           importantForAccessibility: "no",
-          children: cloneElement8(endIcon, {
+          children: cloneElement10(endIcon, {
             color: endIconColor,
             size: resolvedIconSize
           })
@@ -5096,7 +5876,7 @@ var Input = forwardRef3(
     if (!hasOwnField && field) {
       return control;
     }
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx39(
       FormField,
       {
         label,
@@ -5114,12 +5894,27 @@ var Input = forwardRef3(
 );
 Input.displayName = "Input";
 
+// src/primitives/Portal/Portal.tsx
+import { createContext as createContext7, useContext as useContext7 } from "react";
+import { Fragment as Fragment7, jsx as jsx40 } from "react/jsx-runtime";
+var PortalContext = createContext7(null);
+var PortalProvider = ({
+  children,
+  container = null
+}) => /* @__PURE__ */ jsx40(PortalContext.Provider, { value: container, children });
+var Portal = ({ children }) => {
+  useContext7(PortalContext);
+  return /* @__PURE__ */ jsx40(Fragment7, { children });
+};
+Portal.__velliraPortal = true;
+Portal.displayName = "Portal";
+PortalProvider.displayName = "PortalProvider";
+
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect9 } from "react";
-import { useControllableState as useControllableState4 } from "@vellira-ui/core";
+import { forwardRef as forwardRef4, useEffect as useEffect13 } from "react";
 import {
-  Pressable as Pressable17,
-  Text as Text19,
+  Pressable as Pressable18,
+  Text as Text20,
   View as View32
 } from "react-native";
 
@@ -5210,7 +6005,7 @@ var createStyles22 = (theme) => StyleSheet29.create({
 });
 
 // src/primitives/Radio/Radio.tsx
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 var controlSizeBySize = {
   sm: 14,
   md: 16,
@@ -5248,7 +6043,7 @@ var Radio = forwardRef4(
     const styles = createStyles22(theme);
     const group = useRadioGroupContext();
     const isInsideGroup = group !== null;
-    const [standaloneChecked, setStandaloneChecked] = useControllableState4({
+    const [standaloneChecked, setStandaloneChecked] = useControllableState({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
@@ -5284,7 +6079,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect9(() => {
+    useEffect13(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."
@@ -5314,8 +6109,8 @@ var Radio = forwardRef4(
       typeof style === "function" ? style(state) : style
     ];
     return /* @__PURE__ */ jsxs23(View32, { style: [styles.root, containerStyle], children: [
-      /* @__PURE__ */ jsx38(
-        Pressable17,
+      /* @__PURE__ */ jsx41(
+        Pressable18,
         {
           ...rest,
           ref,
@@ -5329,8 +6124,8 @@ var Radio = forwardRef4(
           disabled: resolvedDisabled,
           onPress: handlePress,
           style: resolvePressableStyle,
-          children: (state) => /* @__PURE__ */ jsxs23(Fragment7, { children: [
-            /* @__PURE__ */ jsx38(
+          children: (state) => /* @__PURE__ */ jsxs23(Fragment8, { children: [
+            /* @__PURE__ */ jsx41(
               View32,
               {
                 pointerEvents: "none",
@@ -5354,7 +6149,7 @@ var Radio = forwardRef4(
                   resolvedDisabled && styles.controlDisabled,
                   resolvedChecked && resolvedDisabled && styles.controlCheckedDisabled
                 ],
-                children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx38(
+                children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx41(
                   View32,
                   {
                     style: [
@@ -5371,8 +6166,8 @@ var Radio = forwardRef4(
               }
             ),
             (label || description) && /* @__PURE__ */ jsxs23(View32, { pointerEvents: "none", style: styles.content, children: [
-              label && (typeof label === "string" ? /* @__PURE__ */ jsx38(
-                Text19,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx41(
+                Text20,
                 {
                   style: [
                     styles.label,
@@ -5393,8 +6188,8 @@ var Radio = forwardRef4(
                   children: label
                 }
               ) : label),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx38(
-                Text19,
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx41(
+                Text20,
                 {
                   style: [
                     styles.description,
@@ -5412,8 +6207,8 @@ var Radio = forwardRef4(
           ] })
         }
       ),
-      error && /* @__PURE__ */ jsx38(
-        Text19,
+      error && /* @__PURE__ */ jsx41(
+        Text20,
         {
           accessibilityLiveRegion: "polite",
           style: [
@@ -5439,6 +6234,8 @@ export {
   FormField,
   Input,
   Modal2 as Modal,
+  Portal,
+  PortalProvider,
   Radio,
   RadioGroup,
   Select,