@vellira-ui/react-native 2.31.0 → 2.33.0

package/dist/index.js

@@ -60,18 +60,30 @@ function useTheme() {
 
 // src/theme/useThemeStyles.ts
 import { useMemo as useMemo2 } from "react";
-function useThemeStyles(createStyles25) {
+function useThemeStyles(createStyles23) {
   const { theme } = useTheme();
-  return useMemo2(() => createStyles25(theme), [createStyles25, theme]);
+  return useMemo2(() => createStyles23(theme), [createStyles23, theme]);
 }
 
 // src/components/Dropdown/Content/DropdownContent.styles.ts
 import { StyleSheet } from "react-native";
 var createStyles = (theme) => StyleSheet.create({
   modalRoot: {
-    flex: 1,
+    flex: 1
+  },
+  sheet: {
     justifyContent: "flex-end"
   },
+  modal: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
+  popover: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
   backdrop: {
     ...StyleSheet.absoluteFill,
     backgroundColor: theme.semantic.overlay.backdrop
@@ -93,6 +105,24 @@ var createStyles = (theme) => StyleSheet.create({
     shadowOpacity: 0.24,
     shadowRadius: 16,
     elevation: 12
+  },
+  sheetMenu: {
+    width: "100%",
+    maxHeight: "70%",
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg
+  },
+  modalMenu: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "70%",
+    borderRadius: theme.tokens.radius.lg
+  },
+  popoverMenu: {
+    width: "100%",
+    maxWidth: 360,
+    maxHeight: "60%",
+    borderRadius: theme.tokens.radius.md
   }
 });
 
@@ -103,17 +133,19 @@ function DropdownContent({
   children,
   onClose,
   contentStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  presentation
 }) {
   const styles = useThemeStyles(createStyles);
+  const isSheet = presentation === "sheet";
   return /* @__PURE__ */ jsx2(
     Modal,
     {
       transparent: true,
       visible: isOpen,
-      animationType: "slide",
+      animationType: isSheet ? "slide" : "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxs(View, { style: styles.modalRoot, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: [styles.modalRoot, styles[presentation]], children: [
         /* @__PURE__ */ jsx2(
           Pressable,
           {
@@ -128,7 +160,7 @@ function DropdownContent({
           {
             accessibilityRole: "menu",
             accessibilityLabel,
-            style: [styles.menu, contentStyle],
+            style: [styles.menu, styles[`${presentation}Menu`], contentStyle],
             children
           }
         )
@@ -139,9 +171,16 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useCallback, useMemo as useMemo3 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { useDropdown } from "@vellira-ui/core";
-import { View as View4 } from "react-native";
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  FlatList,
+  Text as Text4,
+  useWindowDimensions,
+  View as View4
+} from "react-native";
 
 // src/components/Dropdown/Group/DropdownGroup.tsx
 import { Text } from "react-native";
@@ -168,8 +207,100 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 
+// src/components/Dropdown/internal/DropdownCollection.ts
+import { Children, isValidElement } from "react";
+function createDropdownSlot(name, displayName) {
+  const Slot = () => null;
+  Slot.__velliraDropdownPart = name;
+  Slot.displayName = displayName;
+  return Slot;
+}
+function parseDropdownChildren(children) {
+  let generatedId = 0;
+  let trigger;
+  let triggerProps;
+  let contentProps;
+  const entries = [];
+  const items = [];
+  const nextId = (prefix) => `${prefix}-${generatedId++}`;
+  function pushItem(props) {
+    const entry = {
+      type: "item",
+      id: nextId("item"),
+      props,
+      label: getItemLabel(props.children) || props.value || "",
+      disabled: props.disabled
+    };
+    items.push(entry);
+    entries.push(entry);
+  }
+  function visit(node) {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) return;
+      const type = child.type;
+      switch (type.__velliraDropdownPart) {
+        case "trigger":
+          triggerProps = child.props;
+          trigger = triggerProps.children;
+          return;
+        case "content":
+          contentProps = child.props;
+          visit(contentProps.children);
+          return;
+        case "group":
+          visit(child.props.children);
+          return;
+        case "label":
+          entries.push({
+            type: "label",
+            id: nextId("label"),
+            props: child.props
+          });
+          return;
+        case "separator":
+          entries.push({
+            type: "separator",
+            id: nextId("separator"),
+            props: child.props
+          });
+          return;
+        case "empty":
+          entries.push({
+            type: "empty",
+            id: nextId("empty"),
+            props: child.props
+          });
+          return;
+        case "loading":
+          entries.push({
+            type: "loading",
+            id: nextId("loading"),
+            props: child.props
+          });
+          return;
+        case "item":
+          pushItem(child.props);
+          return;
+        default:
+          visit(child.props.children);
+      }
+    });
+  }
+  visit(children);
+  return { contentProps, entries, items, trigger, triggerProps };
+}
+function getItemLabel(children) {
+  const labelParts = [];
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      labelParts.push(String(child));
+    }
+  });
+  return labelParts.join("").trim();
+}
+
 // src/components/Dropdown/Item/DropdownItem.tsx
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement as isValidElement2 } from "react";
 import { Pressable as Pressable2, Text as Text2 } from "react-native";
 
 // src/components/Dropdown/Item/DropdownItem.styles.ts
@@ -177,6 +308,7 @@ import { StyleSheet as StyleSheet3 } from "react-native";
 var createStyles3 = (theme) => StyleSheet3.create({
   item: {
     minWidth: 0,
+    minHeight: 44,
     alignItems: "center",
     flexDirection: "row",
     gap: theme.tokens.spacing[4],
@@ -235,7 +367,7 @@ function DropdownItem({
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles3);
   const renderColoredNode = (node, color) => {
-    if (!isValidElement(node)) return node;
+    if (!isValidElement2(node)) return node;
     return cloneElement(node, { color });
   };
   const getContentColor = (pressed) => {
@@ -320,7 +452,7 @@ DropdownSeparator.displayName = "DropdownSeparator";
 // src/components/Dropdown/Trigger/DropdownTrigger.tsx
 import {
   cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement3,
   useEffect,
   useRef,
   useState
@@ -431,6 +563,7 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownTrigger({
   label,
   trigger,
+  children,
   icon,
   arrowIcon,
   showArrow = true,
@@ -438,6 +571,7 @@ function DropdownTrigger({
   disabled = false,
   isOpen,
   triggerStyle,
+  triggerRef,
   accessibilityLabel,
   accessibilityHint,
   onPress
@@ -485,15 +619,34 @@ function DropdownTrigger({
         }
       );
     }
-    if (!isValidElement2(node)) return node;
+    if (!isValidElement3(node)) return node;
     return cloneElement2(node, { color });
   };
   const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? theme.components.dropdown.trigger.hover.fg : theme.components.dropdown.trigger.default.fg;
   const arrow = arrowIcon ? renderColoredNode(arrowIcon, contentColor) : /* @__PURE__ */ jsx6(ChevronDown, { width: 16, height: 16, color: contentColor });
   const renderedIcon = icon ? renderColoredNode(icon, contentColor) : null;
+  const triggerContent = trigger ?? children;
+  if (isValidElement3(triggerContent)) {
+    const child = triggerContent;
+    const isChildDisabled = disabled || child.props.disabled;
+    return cloneElement2(child, {
+      ref: triggerRef,
+      disabled: isChildDisabled,
+      accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+      accessibilityHint,
+      accessibilityState: { expanded: isOpen, disabled: isChildDisabled },
+      onPress: () => {
+        child.props.onPress?.();
+        if (!isChildDisabled) {
+          onPress();
+        }
+      }
+    });
+  }
   return /* @__PURE__ */ jsxs3(
     Pressable3,
     {
+      ref: triggerRef,
       disabled,
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
@@ -513,7 +666,7 @@ function DropdownTrigger({
       ],
       children: [
         hasIcon && /* @__PURE__ */ jsx6(View3, { style: styles.icon, children: renderedIcon }),
-        !isIconOnly && (trigger ? renderColoredNode(trigger, contentColor) : /* @__PURE__ */ jsx6(
+        !isIconOnly && (triggerContent ? renderColoredNode(triggerContent, contentColor) : /* @__PURE__ */ jsx6(
           Text3,
           {
             numberOfLines: 1,
@@ -541,31 +694,38 @@ DropdownTrigger.displayName = "DropdownTrigger";
 
 // src/components/Dropdown/Dropdown.styles.ts
 import { StyleSheet as StyleSheet6 } from "react-native";
-var createStyles6 = () => StyleSheet6.create({
+var createStyles6 = (theme) => StyleSheet6.create({
   root: {
     alignSelf: "flex-start"
+  },
+  emptyText: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[3],
+    color: theme.components.dropdown.item.disabled.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   }
 });
 
-// src/components/Dropdown/types.ts
-var isMenuItem = (item) => item.type === void 0 || item.type === "item";
-var isGroup = (item) => item.type === "group";
-var isSeparator = (item) => item.type === "separator";
-
 // src/components/Dropdown/Dropdown.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function Dropdown({
+function DropdownRoot({
+  children,
   label = "Menu",
   trigger,
   icon,
   arrowIcon,
   showArrow = true,
-  items,
-  onSelect,
   open,
   defaultOpen = false,
   onOpenChange,
+  presentation = "auto",
+  closeOnSelect = true,
   disabled = false,
+  loading = false,
+  loadingText = "Loading actions...",
   size = "md",
   style,
   triggerStyle,
@@ -576,13 +736,21 @@ function Dropdown({
   accessibilityHint
 }) {
   const styles = useThemeStyles(createStyles6);
+  const { width } = useWindowDimensions();
+  const triggerRef = useRef2(null);
+  const parsed = useMemo3(() => parseDropdownChildren(children), [children]);
+  const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
   const menuAccessibilityLabel = useMemo3(() => {
     if (accessibilityLabel) return accessibilityLabel;
     return typeof label === "string" ? label : "Menu";
   }, [accessibilityLabel, label]);
   const navigableItems = useMemo3(
-    () => items.filter((item) => isMenuItem(item)),
-    [items]
+    () => parsed.items.map((item) => ({
+      disabled: item.disabled,
+      label: item.label,
+      value: item.id
+    })),
+    [parsed.items]
   );
   const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
     items: navigableItems,
@@ -590,32 +758,96 @@ function Dropdown({
     defaultOpen,
     disabled,
     onOpenChange,
-    onSelect,
     getItemValue: (item) => item.value,
     getItemText: (item) => typeof item.label === "string" ? item.label : item.value
   });
+  useEffect2(() => {
+    if (!isOpen) return;
+    AccessibilityInfo.announceForAccessibility(
+      `${menuAccessibilityLabel} opened`
+    );
+  }, [isOpen, menuAccessibilityLabel]);
+  const focusTrigger = useCallback(() => {
+    if (typeof findNodeHandle !== "function") return;
+    const handle = findNodeHandle(triggerRef.current);
+    if (handle && AccessibilityInfo.setAccessibilityFocus) {
+      AccessibilityInfo.setAccessibilityFocus(handle);
+    }
+  }, []);
+  const closeAndFocusTrigger = useCallback(() => {
+    closeDropdown();
+    requestAnimationFrame(focusTrigger);
+  }, [closeDropdown, focusTrigger]);
   const handleSelect = useCallback(
-    (value) => {
-      onSelect?.(value);
-      closeDropdown();
+    (entry) => {
+      if (entry.disabled || loading) return;
+      const event = createDropdownSelectEvent();
+      entry.props.onSelect?.(event);
+      const shouldClose = entry.props.closeOnSelect ?? closeOnSelect;
+      if (!event.defaultPrevented && shouldClose) {
+        closeAndFocusTrigger();
+      }
     },
-    [closeDropdown, onSelect]
+    [closeAndFocusTrigger, closeOnSelect, loading]
   );
   const handleTriggerPress = useCallback(() => {
     toggleDropdown();
   }, [toggleDropdown]);
+  const renderEntry = useCallback(
+    ({ item }) => {
+      if (item.type === "label") {
+        return /* @__PURE__ */ jsx7(DropdownGroup, { label: item.props.children });
+      }
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsx7(DropdownSeparator, {});
+      }
+      if (item.type === "empty") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      if (item.type === "loading") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      return /* @__PURE__ */ jsx7(
+        DropdownItem,
+        {
+          label: item.props.children,
+          value: item.props.value ?? item.id,
+          icon: item.props.icon,
+          danger: item.props.danger,
+          disabled: item.props.disabled,
+          textWrap: item.props.textWrap,
+          itemStyle,
+          textStyle,
+          onSelect: () => handleSelect(item)
+        }
+      );
+    },
+    [handleSelect, itemStyle, styles.emptyText, textStyle]
+  );
+  const data = loading ? [
+    {
+      type: "loading",
+      id: "loading",
+      props: { children: loadingText }
+    }
+  ] : parsed.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: [
     /* @__PURE__ */ jsx7(
       DropdownTrigger,
       {
         label,
-        trigger,
+        trigger: trigger ?? parsed.trigger,
         icon,
         arrowIcon,
         showArrow,
-        disabled,
+        disabled: disabled || parsed.triggerProps?.disabled,
         isOpen,
         size,
+        triggerRef: (node) => {
+          triggerRef.current = node;
+        },
         triggerStyle,
         accessibilityLabel,
         accessibilityHint,
@@ -626,50 +858,82 @@ function Dropdown({
       DropdownContent,
       {
         isOpen,
-        onClose: closeDropdown,
-        contentStyle,
+        onClose: closeAndFocusTrigger,
+        contentStyle: [contentStyle, contentStyleFromSlot],
         accessibilityLabel: menuAccessibilityLabel,
-        children: items.map((item, index) => {
-          if (isGroup(item)) {
-            return /* @__PURE__ */ jsx7(
-              DropdownGroup,
-              {
-                label: item.label
-              },
-              `group-${item.label}-${index}`
-            );
-          }
-          if (isSeparator(item)) {
-            return /* @__PURE__ */ jsx7(DropdownSeparator, {}, `separator-${index}`);
-          }
-          if (!isMenuItem(item)) {
-            return null;
+        presentation: presentationFromSlot ?? resolvedPresentation,
+        children: /* @__PURE__ */ jsx7(
+          FlatList,
+          {
+            data,
+            keyExtractor: (item) => item.id,
+            renderItem: renderEntry,
+            keyboardShouldPersistTaps: "handled",
+            removeClippedSubviews: data.length > 24
           }
-          return /* @__PURE__ */ jsx7(
-            DropdownItem,
-            {
-              label: item.label,
-              value: item.value,
-              icon: item.icon,
-              danger: item.danger,
-              disabled: item.disabled,
-              textWrap: item.textWrap,
-              itemStyle,
-              textStyle,
-              onSelect: handleSelect
-            },
-            `${item.value}-${index}`
-          );
-        })
+        )
       }
     )
   ] });
 }
-Dropdown.displayName = "Dropdown";
+DropdownRoot.displayName = "Dropdown";
+function createDropdownSelectEvent() {
+  let defaultPrevented = false;
+  return {
+    preventDefault: () => {
+      defaultPrevented = true;
+    },
+    get defaultPrevented() {
+      return defaultPrevented;
+    }
+  };
+}
+var DropdownTriggerSlot = createDropdownSlot(
+  "trigger",
+  "Dropdown.Trigger"
+);
+var DropdownContentSlot = createDropdownSlot(
+  "content",
+  "Dropdown.Content"
+);
+var DropdownItemSlot = createDropdownSlot(
+  "item",
+  "Dropdown.Item"
+);
+var DropdownGroupSlot = createDropdownSlot(
+  "group",
+  "Dropdown.Group"
+);
+var DropdownLabelSlot = createDropdownSlot(
+  "label",
+  "Dropdown.Label"
+);
+var DropdownSeparatorSlot = createDropdownSlot(
+  "separator",
+  "Dropdown.Separator"
+);
+var DropdownEmptySlot = createDropdownSlot(
+  "empty",
+  "Dropdown.Empty"
+);
+var DropdownLoadingSlot = createDropdownSlot(
+  "loading",
+  "Dropdown.Loading"
+);
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTriggerSlot,
+  Content: DropdownContentSlot,
+  Item: DropdownItemSlot,
+  Group: DropdownGroupSlot,
+  Label: DropdownLabelSlot,
+  Separator: DropdownSeparatorSlot,
+  Empty: DropdownEmptySlot,
+  Loading: DropdownLoadingSlot
+});
 
 // src/components/Modal/Body/ModalBody.tsx
-import { Children, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
-import { Text as Text4, View as View5 } from "react-native";
+import { Children as Children2, cloneElement as cloneElement3, isValidElement as isValidElement4 } from "react";
+import { Text as Text5, View as View5 } from "react-native";
 
 // src/components/Modal/Body/ModalBody.styles.ts
 import { StyleSheet as StyleSheet7 } from "react-native";
@@ -693,10 +957,10 @@ var createStyles7 = (theme) => StyleSheet7.create({
 
 // src/components/Modal/Body/ModalBody.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var isTextElement = (child) => isValidElement3(child) && child.type === Text4;
-var renderBodyChildren = (children, textStyle) => Children.map(children, (child) => {
+var isTextElement = (child) => isValidElement4(child) && child.type === Text5;
+var renderBodyChildren = (children, textStyle) => Children2.map(children, (child) => {
   if (typeof child === "string" || typeof child === "number") {
-    return /* @__PURE__ */ jsx8(Text4, { style: textStyle, children: child });
+    return /* @__PURE__ */ jsx8(Text5, { style: textStyle, children: child });
   }
   if (!isTextElement(child)) {
     return child;
@@ -770,7 +1034,7 @@ ModalFooter.displayName = "ModalFooter";
 
 // src/components/Modal/Header/ModalHeader.tsx
 import { Close } from "@vellira-ui/icons";
-import { Pressable as Pressable4, Text as Text5, View as View8 } from "react-native";
+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";
@@ -829,7 +1093,7 @@ var ModalHeader = ({
   const styles = useThemeStyles(createStyles10);
   const { onClose } = useModalContext();
   return /* @__PURE__ */ jsxs5(View8, { style: [styles.header, style], children: [
-    /* @__PURE__ */ jsx11(Text5, { style: [styles.title, textStyle], children }),
+    /* @__PURE__ */ jsx11(Text6, { style: [styles.title, textStyle], children }),
     onClose && /* @__PURE__ */ jsx11(
       Pressable4,
       {
@@ -945,7 +1209,7 @@ import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
 import { useId } from "react";
-import { Text as Text6, View as View10 } from "react-native";
+import { Text as Text7, View as View10 } from "react-native";
 
 // src/patterns/FormField/FormField.styles.ts
 import { StyleSheet as StyleSheet12 } from "react-native";
@@ -1055,6 +1319,8 @@ function FormField({
     labelId,
     descriptionId,
     errorId,
+    description,
+    error,
     required,
     disabled,
     invalid: isInvalid,
@@ -1070,7 +1336,7 @@ function FormField({
       style: [styles.root, { gap: sizeTokens.gap }, style],
       children: [
         label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
-          Text6,
+          Text7,
           {
             style: [
               styles.label,
@@ -1084,7 +1350,7 @@ function FormField({
             children: [
               label,
               required && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: styles.required,
                   accessible: false,
@@ -1093,7 +1359,7 @@ function FormField({
                 }
               ),
               !required && optionalText && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.optional,
@@ -1106,7 +1372,7 @@ function FormField({
                 }
               ),
               labelInfo && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.labelInfo,
@@ -1123,7 +1389,7 @@ function FormField({
         ) : /* @__PURE__ */ jsxs7(View10, { style: styles.customLabel, children: [
           label,
           required && /* @__PURE__ */ jsx14(
-            Text6,
+            Text7,
             {
               style: styles.required,
               accessible: false,
@@ -1135,7 +1401,7 @@ function FormField({
           labelInfo
         ] })),
         description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
-          Text6,
+          Text7,
           {
             style: [
               styles.description,
@@ -1151,7 +1417,7 @@ function FormField({
         ) : 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(
-          Text6,
+          Text7,
           {
             accessibilityLiveRegion: "polite",
             style: [
@@ -1286,184 +1552,1543 @@ var RadioGroup = forwardRef(
 );
 RadioGroup.displayName = "RadioGroup";
 
-// src/components/Select/Select.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { Picker } from "@react-native-picker/picker";
-import { useSelect } from "@vellira-ui/core";
-import { Modal as Modal3, Pressable as Pressable7, Text as Text8, View as View13 } from "react-native";
+// src/components/Select/Content/SelectContent.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { FlatList as FlatList2, Pressable as Pressable10, Text as Text12, View as View21 } from "react-native";
+
+// src/components/Select/Group/SelectGroup.tsx
+import { Pressable as Pressable6, Text as Text8 } from "react-native";
+
+// src/components/Select/internal/SelectCollection.ts
+import { Children as Children3, isValidElement as isValidElement5 } from "react";
+
+// src/components/Select/internal/types.ts
+var selectSlotName = /* @__PURE__ */ Symbol("VelliraNativeSelectSlot");
 
-// src/components/Select/SelectTrigger/SelectTrigger.tsx
-import { ChevronDown as ChevronDown2 } from "@vellira-ui/icons";
-import { Pressable as Pressable6, Text as Text7, View as View12 } from "react-native";
+// src/components/Select/internal/SelectCollection.ts
+var createSelectSlot = (name, displayName) => {
+  const Slot = (_props) => null;
+  Slot[selectSlotName] = name;
+  Slot.displayName = displayName;
+  return Slot;
+};
+var getSelectSlot = (type) => type?.[selectSlotName];
+var defaultSelectFilter = (option, query) => option.label.toLowerCase().includes(query.trim().toLowerCase());
+var getTextFromNode = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  return void 0;
+};
+var getGroupLabel = (props) => {
+  if (props.label) return props.label;
+  let label;
+  Children3.forEach(props.children, (child) => {
+    if (label || !isValidElement5(child)) return;
+    if (getSelectSlot(child.type) === "label") {
+      label = getTextFromNode(child.props.children);
+    }
+  });
+  return label;
+};
+var getGroupItemValues = (children) => {
+  const values = [];
+  const visit = (node) => {
+    Children3.forEach(node, (child) => {
+      if (!isValidElement5(child)) return;
+      const slot = getSelectSlot(child.type);
+      if (slot === "content") {
+        visit(child.props.children);
+        return;
+      }
+      if (slot === "group") {
+        visit(child.props.children);
+        return;
+      }
+      if (slot === "item") {
+        values.push(child.props.value);
+      }
+    });
+  };
+  visit(children);
+  return values;
+};
+var parseSelectChildren = (children) => {
+  const options = [];
+  const rows = [];
+  let searchable = false;
+  let searchPlaceholder;
+  let empty;
+  let loading;
+  const visit = (node, group) => {
+    Children3.forEach(node, (child) => {
+      if (!isValidElement5(child)) return;
+      const slot = getSelectSlot(child.type);
+      if (slot === "content") {
+        visit(child.props.children, group);
+        return;
+      }
+      if (slot === "search") {
+        searchable = true;
+        searchPlaceholder = child.props.placeholder;
+        return;
+      }
+      if (slot === "empty") {
+        empty = child.props.children;
+        return;
+      }
+      if (slot === "loading") {
+        loading = child.props.children;
+        return;
+      }
+      if (slot === "group") {
+        const props = child.props;
+        const groupLabel = getGroupLabel(props);
+        if (groupLabel) {
+          rows.push({
+            type: "group",
+            key: `group-${groupLabel}-${rows.length}`,
+            label: groupLabel,
+            selectable: props.selectable,
+            selectLabel: props.selectLabel,
+            itemValues: getGroupItemValues(props.children)
+          });
+        }
+        visit(props.children, groupLabel);
+        return;
+      }
+      if (slot === "label") {
+        return;
+      }
+      if (slot === "separator") {
+        rows.push({ type: "separator", key: `separator-${rows.length}` });
+        return;
+      }
+      if (slot === "item") {
+        const props = child.props;
+        const option = {
+          value: props.value,
+          label: props.label,
+          disabled: props.disabled,
+          description: props.description,
+          icon: props.icon,
+          badge: props.badge,
+          color: props.color,
+          accessibilityLabel: props.accessibilityLabel,
+          accessibilityHint: props.accessibilityHint ?? group
+        };
+        options.push(option);
+        rows.push({
+          type: "item",
+          key: `item-${props.value}`,
+          option
+        });
+      }
+    });
+  };
+  visit(children);
+  return { options, rows, searchable, searchPlaceholder, empty, loading };
+};
 
-// src/components/Select/SelectTrigger/SelectTrigger.styles.ts
+// src/components/Select/Group/SelectGroup.styles.ts
 import { StyleSheet as StyleSheet14 } from "react-native";
-var createStyles14 = (theme) => StyleSheet14.create({
-  trigger: {
-    width: "100%",
-    minWidth: 0,
-    alignItems: "center",
-    justifyContent: "space-between",
-    flexDirection: "row",
-    paddingHorizontal: theme.tokens.spacing[4],
-    paddingVertical: theme.tokens.spacing[3],
-    backgroundColor: theme.components.select.trigger.default.bg,
-    borderColor: theme.components.select.trigger.default.border,
-    borderRadius: theme.tokens.radius.md,
-    borderWidth: 1
+var createGroupStyles = (theme) => StyleSheet14.create({
+  groupLabel: {
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingTop: theme.tokens.spacing[4],
+    paddingBottom: theme.tokens.spacing[1],
+    color: theme.components.select.dropdown.groupLabel.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
   },
-  sm: {
+  groupAction: {
     minHeight: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.tokens.spacing[2],
     paddingHorizontal: theme.tokens.spacing[3],
-    paddingVertical: theme.tokens.spacing[2]
-  },
-  md: {
-    minHeight: 44,
-    paddingHorizontal: theme.tokens.spacing[4],
-    paddingVertical: theme.tokens.spacing[3]
-  },
-  lg: {
-    minHeight: 52,
-    paddingHorizontal: theme.tokens.spacing[5],
-    paddingVertical: theme.tokens.spacing[4]
-  },
-  textSm: {
-    fontSize: theme.tokens.typography.size.sm,
-    lineHeight: theme.tokens.typography.lineHeight.sm
-  },
-  textMd: {
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
-  },
-  textLg: {
-    fontSize: theme.tokens.typography.size.lg,
-    lineHeight: theme.tokens.typography.lineHeight.lg
-  },
-  triggerOpen: {
-    backgroundColor: theme.components.select.trigger.focus.bg,
-    borderColor: theme.components.select.trigger.focus.border,
-    borderWidth: 2
-  },
-  triggerError: {
-    borderColor: theme.components.select.trigger.error.border
-  },
-  triggerErrorOpen: {
-    borderColor: theme.components.select.trigger.error.border,
-    shadowColor: theme.components.select.trigger.error.ring,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
-    elevation: 1
-  },
-  textOpen: {
-    color: theme.components.select.trigger.focus.fg
-  },
-  triggerDisabled: {
-    backgroundColor: theme.components.select.trigger.disabled.bg,
-    borderColor: theme.components.select.trigger.disabled.border
-  },
-  text: {
-    flex: 1,
-    minWidth: 0,
-    color: theme.components.select.trigger.default.fg,
-    fontFamily: theme.tokens.typography.family.regular
-  },
-  textDisabled: {
-    color: theme.components.select.trigger.disabled.fg
+    paddingTop: theme.tokens.spacing[4],
+    paddingBottom: theme.tokens.spacing[1]
   },
-  placeholder: {
-    color: theme.components.select.trigger.placeholder.fg
+  groupActionText: {
+    color: theme.components.select.dropdown.groupLabel.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
   },
-  icon: {
-    width: 16,
-    height: 16,
-    marginLeft: theme.tokens.spacing[2],
-    alignItems: "center",
-    justifyContent: "center"
+  groupActionMeta: {
+    color: theme.components.select.option.default.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs
   },
-  iconOpen: {
-    transform: [{ rotate: "180deg" }]
+  separator: {
+    height: 1,
+    marginHorizontal: theme.tokens.spacing[3],
+    marginVertical: theme.tokens.spacing[2],
+    backgroundColor: theme.components.select.dropdown.separator.bg
   }
 });
 
-// src/components/Select/SelectTrigger/SelectTrigger.tsx
+// src/components/Select/Group/SelectGroup.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-function SelectTrigger({
-  displayText,
-  isPlaceholder,
-  isOpen,
-  size = "md",
-  disabled = false,
-  required = false,
-  hasError = false,
-  accessibilityLabel,
-  accessibilityHint,
-  triggerStyle,
-  textStyle,
+var SelectGroup = createSelectSlot(
+  "group",
+  "Select.Group"
+);
+var SelectGroupLabelRow = ({ label }) => {
+  const styles = useThemeStyles(createGroupStyles);
+  return /* @__PURE__ */ jsx16(Text8, { style: styles.groupLabel, children: label });
+};
+var SelectGroupActionRow = ({
+  label,
+  selectLabel,
+  selectedCount,
+  itemCount,
   onPress
-}) {
-  const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles14);
-  const textSizeStyle = {
-    sm: styles.textSm,
-    md: styles.textMd,
-    lg: styles.textLg
-  };
-  const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a picker" : required ? "Required. Opens a picker" : "Opens a picker");
+}) => {
+  const styles = useThemeStyles(createGroupStyles);
+  const isSelected = itemCount > 0 && selectedCount === itemCount;
+  const isMixed = selectedCount > 0 && selectedCount < itemCount;
+  const resolvedLabel = selectLabel ?? label;
   return /* @__PURE__ */ jsxs8(
     Pressable6,
     {
-      disabled,
       accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityHint: resolvedAccessibilityHint,
+      accessibilityLabel: resolvedLabel,
+      accessibilityHint: `Selects all options in ${label}`,
       accessibilityState: {
-        expanded: isOpen,
-        disabled
+        selected: isSelected,
+        checked: isMixed ? "mixed" : isSelected,
+        disabled: itemCount === 0
       },
+      disabled: itemCount === 0,
       onPress,
-      style: [
-        styles.trigger,
-        styles[size],
-        isOpen && styles.triggerOpen,
-        hasError && styles.triggerError,
-        disabled && styles.triggerDisabled,
+      style: styles.groupAction,
+      children: [
+        /* @__PURE__ */ jsx16(Text8, { style: styles.groupActionText, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs8(Text8, { style: styles.groupActionMeta, children: [
+          selectedCount,
+          "/",
+          itemCount
+        ] })
+      ]
+    }
+  );
+};
+SelectGroupLabelRow.displayName = "Select.GroupLabelRow";
+SelectGroupActionRow.displayName = "Select.GroupActionRow";
+
+// src/components/Select/Group/SelectLabel.tsx
+var SelectLabel = createSelectSlot(
+  "label",
+  "Select.Label"
+);
+
+// src/components/Select/Group/SelectSeparator.tsx
+import { View as View12 } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var SelectSeparator = createSelectSlot(
+  "separator",
+  "Select.Separator"
+);
+var SelectSeparatorRow = () => {
+  const styles = useThemeStyles(createGroupStyles);
+  return /* @__PURE__ */ jsx17(View12, { style: styles.separator });
+};
+SelectSeparatorRow.displayName = "Select.SeparatorRow";
+
+// src/components/Select/internal/SelectContext.tsx
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var SelectContext = createContext5(null);
+var useSelectContext = () => {
+  const context = useContext5(SelectContext);
+  if (!context) {
+    throw new Error("Select compound components must be used inside Select");
+  }
+  return context;
+};
+
+// src/components/Select/Item/SelectItem.tsx
+import { cloneElement as cloneElement4, isValidElement as isValidElement6 } from "react";
+import { Check } from "@vellira-ui/icons";
+import { Pressable as Pressable7, Text as Text9, View as View13 } from "react-native";
+
+// src/components/Select/Item/SelectItem.styles.ts
+import { StyleSheet as StyleSheet15 } from "react-native";
+var createItemStyles = (theme) => StyleSheet15.create({
+  option: {
+    minHeight: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.tokens.spacing[3],
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2],
+    marginBottom: 2,
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  optionDisabled: {
+    opacity: 0.55
+  },
+  optionIcon: {
+    width: 22,
+    minWidth: 22,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  optionTextWrap: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  optionLabel: {
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  optionDescription: {
+    color: theme.components.select.option.description.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  badge: {
+    paddingHorizontal: theme.tokens.spacing[2],
+    paddingVertical: 2,
+    borderRadius: 999,
+    borderWidth: 1
+  },
+  badgeText: {
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    lineHeight: theme.tokens.typography.lineHeight.xs
+  },
+  check: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/Select/Item/SelectItem.tsx
+import { Fragment as Fragment2, jsx as jsx18, 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 });
+  }
+  if (isValidElement6(node) && node.type === Text9) {
+    return cloneElement4(node, {
+      style: [textStyle, node.props.style]
+    });
+  }
+  return node ?? (fallback ? /* @__PURE__ */ jsx18(Text9, { style: textStyle, children: fallback }) : null);
+};
+var SelectItem = createSelectSlot(
+  "item",
+  "Select.Item"
+);
+var SelectItemRow = ({
+  option,
+  isSelected,
+  isDisabled,
+  optionStyle,
+  onSelect
+}) => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createItemStyles);
+  const { color, variant, renderOption } = useSelectContext();
+  const optionPalette = theme.components.select[option.color ?? color][variant].option;
+  const getOptionState = (pressed) => {
+    if (isDisabled) return theme.components.select.option.disabled;
+    if (isSelected) {
+      return pressed ? optionPalette.selectedPressed : optionPalette.selected;
+    }
+    return pressed ? optionPalette.pressed : theme.components.select.option.default;
+  };
+  return /* @__PURE__ */ jsx18(
+    Pressable7,
+    {
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityLabel: option.accessibilityLabel ?? option.label,
+      accessibilityHint: option.accessibilityHint,
+      accessibilityState: {
+        selected: isSelected,
+        disabled: isDisabled
+      },
+      onPress: () => onSelect(option),
+      style: ({ pressed }) => {
+        const optionState = getOptionState(pressed);
+        return [
+          styles.option,
+          {
+            backgroundColor: optionState.bg,
+            borderColor: optionState.border
+          },
+          isDisabled && styles.optionDisabled,
+          optionStyle
+        ];
+      },
+      children: ({ pressed }) => {
+        const optionState = getOptionState(pressed);
+        const optionFg = optionState.fg;
+        const descriptionFg = isSelected || pressed ? optionFg : theme.components.select.option.description.fg;
+        return renderOption ? renderNodeOrText(
+          renderOption(option, {
+            selected: isSelected,
+            disabled: isDisabled
+          }),
+          [styles.optionLabel, { color: optionFg }]
+        ) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          option.icon && /* @__PURE__ */ jsx18(View13, { style: styles.optionIcon, children: isValidElement6(option.icon) ? cloneElement4(
+            option.icon,
+            {
+              color: optionFg,
+              size: 18
+            }
+          ) : option.icon }),
+          /* @__PURE__ */ jsxs9(View13, { style: styles.optionTextWrap, children: [
+            /* @__PURE__ */ jsx18(
+              Text9,
+              {
+                numberOfLines: 1,
+                style: [styles.optionLabel, { color: optionFg }],
+                children: option.label
+              }
+            ),
+            option.description && /* @__PURE__ */ jsx18(
+              Text9,
+              {
+                numberOfLines: 2,
+                style: [styles.optionDescription, { color: descriptionFg }],
+                children: option.description
+              }
+            )
+          ] }),
+          option.badge && /* @__PURE__ */ jsx18(
+            View13,
+            {
+              style: [
+                styles.badge,
+                {
+                  backgroundColor: optionPalette.badge.bg,
+                  borderColor: optionPalette.badge.border
+                }
+              ],
+              children: renderNodeOrText(option.badge, [
+                styles.badgeText,
+                { color: optionPalette.badge.fg }
+              ])
+            }
+          ),
+          isSelected && /* @__PURE__ */ jsx18(View13, { style: styles.check, children: /* @__PURE__ */ jsx18(Check, { width: 16, height: 16, color: optionFg }) })
+        ] });
+      }
+    }
+  );
+};
+SelectItemRow.displayName = "Select.ItemRow";
+
+// src/components/Select/Item/SelectItemBadge.tsx
+var SelectItemBadge = createSelectSlot(
+  "itemBadge",
+  "Select.ItemBadge"
+);
+
+// src/components/Select/Item/SelectItemDescription.tsx
+var SelectItemDescription = createSelectSlot(
+  "itemDescription",
+  "Select.ItemDescription"
+);
+
+// src/components/Select/Item/SelectItemIcon.tsx
+var SelectItemIcon = createSelectSlot(
+  "itemIcon",
+  "Select.ItemIcon"
+);
+
+// src/components/Select/Presentation/SelectBackdrop.tsx
+import { Pressable as Pressable8 } from "react-native";
+
+// src/components/Select/Presentation/SelectPresentation.styles.ts
+import { StyleSheet as StyleSheet16 } from "react-native";
+var createPresentationStyles = (theme) => StyleSheet16.create({
+  modalRoot: {
+    flex: 1
+  },
+  sheetRoot: {
+    justifyContent: "flex-end"
+  },
+  modalPresentationRoot: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
+  popoverRoot: {
+    padding: theme.tokens.spacing[4]
+  },
+  popoverRootTop: {
+    justifyContent: "flex-start"
+  },
+  popoverRootBottom: {
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet16.absoluteFill,
+    backgroundColor: theme.semantic.overlay.backdrop
+  },
+  content: {
+    overflow: "hidden",
+    backgroundColor: theme.components.select.dropdown.bg,
+    borderColor: theme.components.select.dropdown.border,
+    borderWidth: 1
+  },
+  sheet: {
+    maxHeight: "74%",
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg,
+    borderBottomWidth: 0
+  },
+  modalPresentation: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "74%",
+    borderRadius: theme.tokens.radius.lg
+  },
+  popover: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "60%",
+    alignSelf: "center",
+    borderRadius: theme.tokens.radius.lg
+  },
+  popoverTop: {
+    marginBottom: theme.tokens.spacing[8],
+    alignSelf: "center"
+  },
+  popoverBottom: {
+    marginTop: theme.tokens.spacing[8],
+    alignSelf: "center"
+  },
+  handleWrap: {
+    alignItems: "center",
+    paddingTop: theme.tokens.spacing[3]
+  },
+  handle: {
+    width: 44,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: theme.semantic.border.muted
+  }
+});
+
+// src/components/Select/Presentation/SelectBackdrop.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var SelectBackdrop = ({
+  onClose,
+  dismissOnBackdropPress
+}) => {
+  const styles = useThemeStyles(createPresentationStyles);
+  return /* @__PURE__ */ jsx19(
+    Pressable8,
+    {
+      style: styles.backdrop,
+      onPress: dismissOnBackdropPress ? onClose : void 0,
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss select"
+    }
+  );
+};
+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";
+var SelectHandle = () => {
+  const styles = useThemeStyles(createPresentationStyles);
+  return /* @__PURE__ */ jsx20(View14, { style: styles.handleWrap, accessible: false, children: /* @__PURE__ */ jsx20(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";
+var SelectModal = ({
+  visible,
+  onClose,
+  dismissOnBackdropPress,
+  contentStyle,
+  children
+}) => {
+  const styles = useThemeStyles(createPresentationStyles);
+  return /* @__PURE__ */ jsx21(
+    Modal3,
+    {
+      transparent: true,
+      visible,
+      animationType: "slide",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs10(
+        View15,
+        {
+          style: [styles.modalRoot, styles.modalPresentationRoot],
+          testID: "select-content-root",
+          children: [
+            /* @__PURE__ */ jsx21(
+              SelectBackdrop,
+              {
+                onClose,
+                dismissOnBackdropPress
+              }
+            ),
+            /* @__PURE__ */ jsx21(
+              View15,
+              {
+                style: [styles.content, styles.modalPresentation, contentStyle],
+                testID: "select-modal",
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+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";
+var SelectPopover = ({
+  visible,
+  onClose,
+  dismissOnBackdropPress,
+  placement,
+  matchTriggerWidth,
+  triggerWidth,
+  contentStyle,
+  children
+}) => {
+  const styles = useThemeStyles(createPresentationStyles);
+  return /* @__PURE__ */ jsx22(
+    Modal4,
+    {
+      transparent: true,
+      visible,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs11(
+        View16,
+        {
+          style: [
+            styles.modalRoot,
+            styles.popoverRoot,
+            placement === "top" ? styles.popoverRootTop : styles.popoverRootBottom
+          ],
+          testID: "select-content-root",
+          children: [
+            /* @__PURE__ */ jsx22(
+              SelectBackdrop,
+              {
+                onClose,
+                dismissOnBackdropPress
+              }
+            ),
+            /* @__PURE__ */ jsx22(
+              View16,
+              {
+                style: [
+                  styles.content,
+                  styles.popover,
+                  placement === "top" ? styles.popoverTop : styles.popoverBottom,
+                  matchTriggerWidth && triggerWidth ? { width: triggerWidth } : null,
+                  contentStyle
+                ],
+                testID: "select-popover",
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+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";
+var SelectSheet = ({
+  visible,
+  onClose,
+  dismissOnBackdropPress,
+  contentStyle,
+  children
+}) => {
+  const styles = useThemeStyles(createPresentationStyles);
+  return /* @__PURE__ */ jsx23(
+    Modal5,
+    {
+      transparent: true,
+      visible,
+      animationType: "slide",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs12(
+        View17,
+        {
+          style: [styles.modalRoot, styles.sheetRoot],
+          testID: "select-content-root",
+          children: [
+            /* @__PURE__ */ jsx23(
+              SelectBackdrop,
+              {
+                onClose,
+                dismissOnBackdropPress
+              }
+            ),
+            /* @__PURE__ */ jsxs12(
+              View17,
+              {
+                style: [styles.content, styles.sheet, contentStyle],
+                testID: "select-sheet",
+                children: [
+                  /* @__PURE__ */ jsx23(SelectHandle, {}),
+                  children
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+SelectSheet.displayName = "Select.Sheet";
+
+// src/components/Select/Content/SelectContent.styles.ts
+import { StyleSheet as StyleSheet17 } from "react-native";
+var createContentStyles = (theme) => StyleSheet17.create({
+  toolbar: {
+    minHeight: 52,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.tokens.spacing[4],
+    borderBottomColor: theme.components.select.dropdown.separator.bg,
+    borderBottomWidth: 1
+  },
+  title: {
+    flex: 1,
+    marginHorizontal: theme.tokens.spacing[3],
+    color: theme.components.select.dropdown.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    textAlign: "center"
+  },
+  toolbarAction: {
+    minWidth: 64,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cancelText: {
+    color: theme.components.select.trigger.placeholder.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  doneText: {
+    color: theme.semantic.text.interactive,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  list: {
+    maxHeight: 420
+  },
+  listContent: {
+    paddingHorizontal: theme.tokens.spacing[2],
+    paddingVertical: theme.tokens.spacing[2]
+  },
+  empty: {
+    minHeight: 72,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
+  emptyText: {
+    color: theme.components.select.dropdown.empty.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    textAlign: "center"
+  },
+  loading: {
+    minHeight: 72,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.tokens.spacing[2],
+    padding: theme.tokens.spacing[4]
+  },
+  loadingText: {
+    color: theme.components.select.dropdown.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  }
+});
+
+// src/components/Select/Content/SelectEmpty.tsx
+import { Text as Text10, View as View18 } from "react-native";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var renderText = (node, style) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ jsx24(Text10, { style, children: node });
+  }
+  return node;
+};
+var SelectEmpty = createSelectSlot(
+  "empty",
+  "Select.Empty"
+);
+var SelectEmptyState = () => {
+  const styles = useThemeStyles(createContentStyles);
+  const { empty } = useSelectContext();
+  return /* @__PURE__ */ jsx24(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";
+var renderText2 = (node, style) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ jsx25(Text11, { style, children: node });
+  }
+  return node;
+};
+var SelectLoading = createSelectSlot(
+  "loading",
+  "Select.Loading"
+);
+var SelectLoadingState = () => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createContentStyles);
+  const { loadingContent } = useSelectContext();
+  return /* @__PURE__ */ jsxs13(View19, { style: styles.loading, children: [
+    /* @__PURE__ */ jsx25(
+      ActivityIndicator,
+      {
+        testID: "select-content-loading-indicator",
+        size: "small",
+        color: theme.components.select.dropdown.fg
+      }
+    ),
+    renderText2(loadingContent, styles.loadingText)
+  ] });
+};
+SelectLoadingState.displayName = "Select.LoadingState";
+
+// src/components/Select/Content/SelectSearch.tsx
+import { useEffect as useEffect3 } from "react";
+import { Close as Close2, Search } from "@vellira-ui/icons";
+import { Pressable as Pressable9, TextInput, View as View20 } from "react-native";
+
+// src/components/Select/Content/SelectSearch.styles.ts
+import { StyleSheet as StyleSheet18 } from "react-native";
+var createSearchStyles = (theme) => StyleSheet18.create({
+  searchWrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginHorizontal: theme.tokens.spacing[4],
+    marginTop: theme.tokens.spacing[3],
+    marginBottom: theme.tokens.spacing[2],
+    paddingHorizontal: theme.tokens.spacing[3],
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: theme.tokens.radius.md,
+    borderColor: theme.components.select.dropdown.search.border,
+    backgroundColor: theme.components.select.dropdown.search.bg
+  },
+  searchInput: {
+    flex: 1,
+    minWidth: 0,
+    color: theme.components.select.dropdown.search.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    paddingVertical: 0
+  },
+  searchIcon: {
+    width: 18,
+    height: 18,
+    marginRight: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  searchClearButton: {
+    width: 28,
+    height: 28,
+    marginLeft: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+    backgroundColor: theme.components.select.clearButton.hoverBg
+  }
+});
+
+// src/components/Select/Content/SelectSearch.tsx
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var SelectSearch = createSelectSlot(
+  "search",
+  "Select.Search"
+);
+var SelectSearchField = () => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createSearchStyles);
+  const {
+    query,
+    setQuery,
+    searchPlaceholder,
+    searchInputRef,
+    searchStyle,
+    selectedRowIndex,
+    virtual
+  } = useSelectContext();
+  const shouldAutoFocus = !virtual || selectedRowIndex === 0;
+  useEffect3(() => {
+    if (!shouldAutoFocus) return;
+    const focusTimer = setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 0);
+    return () => clearTimeout(focusTimer);
+  }, [searchInputRef, shouldAutoFocus]);
+  return /* @__PURE__ */ jsxs14(View20, { style: styles.searchWrap, children: [
+    /* @__PURE__ */ jsx26(
+      View20,
+      {
+        style: styles.searchIcon,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: /* @__PURE__ */ jsx26(
+          Search,
+          {
+            width: 16,
+            height: 16,
+            color: theme.components.select.dropdown.search.placeholder
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx26(
+      TextInput,
+      {
+        ref: searchInputRef,
+        value: query,
+        onChangeText: setQuery,
+        placeholder: searchPlaceholder,
+        autoFocus: shouldAutoFocus,
+        returnKeyType: "search",
+        placeholderTextColor: theme.components.select.dropdown.search.placeholder,
+        accessibilityLabel: searchPlaceholder,
+        style: [styles.searchInput, searchStyle]
+      }
+    ),
+    query && /* @__PURE__ */ jsx26(
+      Pressable9,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear search",
+        hitSlop: 8,
+        onPress: () => setQuery(""),
+        style: styles.searchClearButton,
+        children: /* @__PURE__ */ jsx26(
+          Close2,
+          {
+            width: 14,
+            height: 14,
+            color: theme.components.select.clearButton.hoverFg
+          }
+        )
+      }
+    )
+  ] });
+};
+SelectSearchField.displayName = "Select.SearchField";
+
+// src/components/Select/Content/SelectContent.tsx
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+var SelectContent = createSelectSlot(
+  "content",
+  "Select.Content"
+);
+var SelectContentSurface = () => {
+  const styles = useThemeStyles(createContentStyles);
+  const wasOpenRef = useRef3(false);
+  const [openCycle, setOpenCycle] = useState2(0);
+  const context = useSelectContext();
+  const {
+    isOpen,
+    resolvedPresentation,
+    placement,
+    dismissOnBackdropPress,
+    contentStyle,
+    matchTriggerWidth,
+    triggerWidth,
+    resolvedLabel,
+    closeContent,
+    searchable,
+    loading,
+    filteredRows,
+    selectedValues,
+    selectedOptions,
+    maxSelected,
+    optionStyle,
+    selectOption,
+    selectGroup,
+    itemHeight,
+    selectedRowIndex,
+    query
+  } = context;
+  const shouldSeedSelectedPosition = Boolean(context.virtual) && selectedRowIndex > 0 && query === "";
+  const initialScrollIndex = shouldSeedSelectedPosition ? selectedRowIndex : void 0;
+  useEffect4(() => {
+    if (isOpen && !wasOpenRef.current) {
+      setOpenCycle((cycle) => cycle + 1);
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  const renderRow = ({ item }) => {
+    if (item.type === "group") {
+      if (item.selectable && context.multiple) {
+        const enabledGroupValues = item.itemValues.filter(
+          (value) => context.optionsByValue.get(value)
+        );
+        const selectedGroupCount = selectedOptions.filter(
+          (option) => enabledGroupValues.includes(option.value)
+        ).length;
+        return /* @__PURE__ */ jsx27(
+          SelectGroupActionRow,
+          {
+            label: item.label,
+            selectLabel: item.selectLabel,
+            selectedCount: selectedGroupCount,
+            itemCount: enabledGroupValues.length,
+            onPress: () => selectGroup(enabledGroupValues)
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx27(SelectGroupLabelRow, { label: item.label });
+    }
+    if (item.type === "separator") {
+      return /* @__PURE__ */ jsx27(SelectSeparatorRow, {});
+    }
+    const isSelected = selectedValues.includes(item.option.value);
+    const maxReached = !isSelected && typeof maxSelected === "number" && selectedValues.length >= maxSelected;
+    return /* @__PURE__ */ jsx27(
+      SelectItemRow,
+      {
+        option: item.option,
+        isSelected,
+        isDisabled: Boolean(item.option.disabled || maxReached),
+        optionStyle,
+        onSelect: selectOption
+      }
+    );
+  };
+  const body = /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsxs15(
+      View21,
+      {
+        style: styles.toolbar,
+        accessible: true,
+        accessibilityRole: "toolbar",
+        accessibilityLabel: `${resolvedLabel} selection actions`,
+        children: [
+          /* @__PURE__ */ jsx27(
+            Pressable10,
+            {
+              onPress: closeContent,
+              hitSlop: 8,
+              style: styles.toolbarAction,
+              accessibilityRole: "button",
+              accessibilityLabel: "Close selection",
+              children: /* @__PURE__ */ jsx27(Text12, { style: styles.cancelText, children: "Cancel" })
+            }
+          ),
+          /* @__PURE__ */ jsx27(Text12, { style: styles.title, numberOfLines: 1, accessibilityRole: "header", children: resolvedLabel }),
+          /* @__PURE__ */ jsx27(
+            Pressable10,
+            {
+              onPress: closeContent,
+              hitSlop: 8,
+              style: styles.toolbarAction,
+              accessibilityRole: "button",
+              accessibilityLabel: "Done",
+              children: /* @__PURE__ */ jsx27(Text12, { style: styles.doneText, children: "Done" })
+            }
+          )
+        ]
+      }
+    ),
+    searchable && /* @__PURE__ */ jsx27(SelectSearchField, {}),
+    loading && filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectLoadingState, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectEmptyState, {}) : /* @__PURE__ */ jsx27(
+      FlatList2,
+      {
+        data: filteredRows,
+        keyExtractor: (item) => item.key,
+        renderItem: renderRow,
+        style: styles.list,
+        contentContainerStyle: styles.listContent,
+        keyboardShouldPersistTaps: "handled",
+        initialScrollIndex,
+        initialNumToRender: typeof context.virtual === "object" ? context.virtual.initialNumToRender : 12,
+        windowSize: typeof context.virtual === "object" ? context.virtual.windowSize : 7,
+        getItemLayout: (_data, index) => ({
+          length: itemHeight,
+          offset: itemHeight * index,
+          index
+        })
+      },
+      `select-list-${openCycle}`
+    )
+  ] });
+  if (resolvedPresentation === "sheet") {
+    return /* @__PURE__ */ jsx27(
+      SelectSheet,
+      {
+        visible: isOpen,
+        onClose: closeContent,
+        dismissOnBackdropPress,
+        contentStyle,
+        children: body
+      }
+    );
+  }
+  if (resolvedPresentation === "popover") {
+    return /* @__PURE__ */ jsx27(
+      SelectPopover,
+      {
+        visible: isOpen,
+        onClose: closeContent,
+        dismissOnBackdropPress,
+        placement,
+        matchTriggerWidth,
+        triggerWidth,
+        contentStyle,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx27(
+    SelectModal,
+    {
+      visible: isOpen,
+      onClose: closeContent,
+      dismissOnBackdropPress,
+      contentStyle,
+      children: body
+    }
+  );
+};
+SelectContentSurface.displayName = "Select.ContentSurface";
+
+// src/components/Select/Root/SelectRoot.tsx
+import { useMemo as useMemo6, useRef as useRef4, useState as useState4 } from "react";
+import { useSelect } from "@vellira-ui/core";
+import { View as View23 } from "react-native";
+
+// src/components/Select/internal/useSelectAccessibility.ts
+import { AccessibilityInfo as AccessibilityInfo2 } from "react-native";
+var useSelectAccessibility = ({
+  accessibilityLabel,
+  accessibilityHint,
+  label,
+  description,
+  error,
+  invalid,
+  placeholder,
+  selectedLabel,
+  hasFieldContext,
+  fieldDescribedBy
+}) => {
+  const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : void 0;
+  const errorText = typeof error === "string" || typeof error === "number" ? String(error) : void 0;
+  const resolvedLabel = accessibilityLabel ?? label ?? selectedLabel ?? placeholder ?? "Select";
+  const resolvedHint = accessibilityHint ?? (invalid && errorText ? errorText : descriptionText ? descriptionText : hasFieldContext && fieldDescribedBy ? "Opens a list of options" : void 0);
+  return {
+    resolvedLabel,
+    resolvedHint,
+    announce: (message) => {
+      AccessibilityInfo2.announceForAccessibility?.(message);
+    }
+  };
+};
+
+// src/components/Select/internal/useSelectCollection.ts
+import { useMemo as useMemo4 } from "react";
+var useSelectCollection = (children, optionsProp) => {
+  const parsedChildren = useMemo4(
+    () => parseSelectChildren(children),
+    [children]
+  );
+  const options = useMemo4(
+    () => [...optionsProp ?? [], ...parsedChildren.options],
+    [optionsProp, parsedChildren.options]
+  );
+  const rows = useMemo4(() => {
+    if (parsedChildren.rows.length > 0) {
+      return parsedChildren.rows;
+    }
+    return options.map((option) => ({
+      type: "item",
+      key: `item-${option.value}`,
+      option
+    }));
+  }, [options, parsedChildren.rows]);
+  return {
+    options,
+    rows,
+    searchableFromChildren: parsedChildren.searchable,
+    searchPlaceholderFromChildren: parsedChildren.searchPlaceholder,
+    emptyFromChildren: parsedChildren.empty,
+    loadingFromChildren: parsedChildren.loading
+  };
+};
+
+// src/components/Select/internal/useSelectPresentation.ts
+import { useWindowDimensions as useWindowDimensions2 } from "react-native";
+var useSelectPresentation = (presentation = "auto") => {
+  const { width } = useWindowDimensions2();
+  if (presentation === "auto") {
+    return width >= 768 ? "popover" : "sheet";
+  }
+  return presentation;
+};
+
+// src/components/Select/internal/useSelectSearch.ts
+import { useEffect as useEffect5, useMemo as useMemo5, useState as useState3 } from "react";
+var useSelectSearch = ({
+  rows,
+  isOpen,
+  searchable,
+  searchableFromChildren,
+  onSearch,
+  filterOptions,
+  filter = defaultSelectFilter
+}) => {
+  const [query, setQuery] = useState3("");
+  const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
+  const shouldFilter = filterOptions ?? !onSearch;
+  const filteredRows = useMemo5(() => {
+    if (!query || !shouldFilter) return rows;
+    const visibleRows = [];
+    let pendingGroup;
+    rows.forEach((row) => {
+      if (row.type === "group") {
+        pendingGroup = row;
+        return;
+      }
+      if (row.type === "separator") {
+        if (visibleRows.length > 0 && visibleRows[visibleRows.length - 1]?.type !== "separator") {
+          visibleRows.push(row);
+        }
+        return;
+      }
+      if (!filter(row.option, query)) return;
+      if (pendingGroup) {
+        visibleRows.push(pendingGroup);
+        pendingGroup = void 0;
+      }
+      visibleRows.push(row);
+    });
+    return visibleRows.filter((row, index, collection) => {
+      if (row.type !== "separator") return true;
+      return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
+    });
+  }, [filter, query, rows, shouldFilter]);
+  useEffect5(() => {
+    if (!isOpen) {
+      setQuery("");
+      return;
+    }
+    if (shouldSearch) {
+      onSearch?.(query);
+    }
+  }, [isOpen, onSearch, query, shouldSearch]);
+  return {
+    query,
+    setQuery,
+    shouldSearch,
+    filteredRows
+  };
+};
+
+// src/components/Select/Trigger/SelectIcon.tsx
+var SelectIcon = createSelectSlot(
+  "icon",
+  "Select.Icon"
+);
+
+// src/components/Select/Trigger/SelectTrigger.tsx
+import { cloneElement as cloneElement5, isValidElement as isValidElement7 } 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";
+
+// src/components/Select/Trigger/SelectTrigger.styles.ts
+import { StyleSheet as StyleSheet19 } from "react-native";
+var createTriggerStyles = (theme) => StyleSheet19.create({
+  trigger: {
+    width: "100%",
+    minWidth: 0,
+    minHeight: 44,
+    alignItems: "center",
+    flexDirection: "row",
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 1
+  },
+  sm: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2]
+  },
+  md: {
+    minHeight: 46,
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3]
+  },
+  lg: {
+    minHeight: 52,
+    paddingHorizontal: theme.tokens.spacing[5],
+    paddingVertical: theme.tokens.spacing[4]
+  },
+  value: {
+    flex: 1,
+    minWidth: 0
+  },
+  text: {
+    fontFamily: theme.tokens.typography.family.regular
+  },
+  textSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  textMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  textLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
+  affix: {
+    flexShrink: 0,
+    color: theme.semantic.text.secondary,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  startIcon: {
+    width: 18,
+    height: 18,
+    marginRight: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  endIcon: {
+    width: 18,
+    height: 18,
+    marginLeft: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconOpen: {
+    transform: [{ rotate: "180deg" }]
+  },
+  clearButton: {
+    width: 28,
+    height: 28,
+    marginLeft: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+    backgroundColor: theme.components.select.clearButton.hoverBg
+  }
+});
+
+// src/components/Select/Trigger/SelectTrigger.tsx
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var SelectTriggerSlot = createSelectSlot(
+  "trigger",
+  "Select.Trigger"
+);
+function SelectTrigger({
+  displayText,
+  isPlaceholder,
+  isOpen,
+  size = "md",
+  color = "primary",
+  variant = "outline",
+  disabled = false,
+  required = false,
+  hasError = false,
+  hasValue = false,
+  loading = false,
+  clearable = false,
+  startIcon,
+  endIcon,
+  prefix,
+  suffix,
+  accessibilityLabel,
+  accessibilityHint,
+  nativeID,
+  accessibilityLabelledBy,
+  ariaDescribedBy,
+  triggerStyle,
+  textStyle,
+  onPress,
+  onClear
+}) {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createTriggerStyles);
+  const palette = theme.components.select[color][variant];
+  const triggerState = isOpen ? palette.focus : palette.default;
+  const resolvedIconSize = size === "lg" ? 18 : 16;
+  const textSizeStyle = {
+    sm: styles.textSm,
+    md: styles.textMd,
+    lg: styles.textLg
+  };
+  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 renderValue = () => {
+    const valueStyle = [
+      styles.text,
+      textSizeStyle[size],
+      { color: triggerState.fg },
+      isPlaceholder && { color: triggerState.placeholder },
+      disabled && {
+        color: theme.components.select.trigger.disabled.fg
+      },
+      textStyle
+    ];
+    if (typeof displayText === "string" || typeof displayText === "number") {
+      return /* @__PURE__ */ jsx28(Text13, { numberOfLines: 1, style: valueStyle, children: displayText });
+    }
+    if (isValidElement7(displayText) && displayText.type === Text13) {
+      return cloneElement5(displayText, {
+        numberOfLines: displayText.props.numberOfLines ?? 1,
+        style: [valueStyle, displayText.props.style]
+      });
+    }
+    return displayText;
+  };
+  return /* @__PURE__ */ jsxs16(
+    Pressable11,
+    {
+      nativeID,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityHint: resolvedAccessibilityHint,
+      accessibilityLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      accessibilityState: {
+        expanded: isOpen,
+        disabled,
+        selected: hasValue,
+        busy: loading
+      },
+      onPress,
+      style: [
+        styles.trigger,
+        {
+          backgroundColor: triggerState.bg,
+          borderColor: triggerState.border
+        },
+        styles[size],
+        isOpen && {
+          shadowColor: theme.components.select[color].ring,
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0.16,
+          shadowRadius: 6,
+          elevation: 1
+        },
+        hasError && {
+          borderColor: theme.components.select.trigger.error.border
+        },
+        disabled && {
+          backgroundColor: theme.components.select.trigger.disabled.bg,
+          borderColor: theme.components.select.trigger.disabled.border
+        },
         triggerStyle
       ],
       children: [
-        /* @__PURE__ */ jsx16(
-          Text7,
+        startIcon && /* @__PURE__ */ jsx28(
+          View22,
           {
-            numberOfLines: 1,
-            style: [
-              styles.text,
-              textSizeStyle[size],
-              isPlaceholder && styles.placeholder,
-              isOpen && styles.textOpen,
-              disabled && styles.textDisabled,
-              textStyle
-            ],
-            children: displayText
+            pointerEvents: "none",
+            style: styles.startIcon,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no",
+            children: renderIcon(startIcon)
           }
         ),
-        /* @__PURE__ */ jsx16(
-          View12,
+        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(
+          ActivityIndicator2,
           {
-            style: [styles.icon, isOpen && styles.iconOpen],
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no",
-            children: /* @__PURE__ */ jsx16(
-              ChevronDown2,
+            testID: "select-loading-indicator",
+            size: "small",
+            color: iconColor
+          }
+        ) : clearable && hasValue && !disabled ? /* @__PURE__ */ jsx28(
+          Pressable11,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Clear selection",
+            hitSlop: 8,
+            onPress: onClear,
+            style: styles.clearButton,
+            children: /* @__PURE__ */ jsx28(
+              Close3,
               {
-                width: 16,
-                height: 16,
-                color: disabled ? theme.components.select.trigger.disabled.fg : theme.components.select.trigger.placeholder.fg
+                width: 14,
+                height: 14,
+                color: theme.components.select.clearButton.hoverFg
               }
             )
           }
+        ) : endIcon ? /* @__PURE__ */ jsx28(
+          View22,
+          {
+            pointerEvents: "none",
+            style: styles.endIcon,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no",
+            children: renderIcon(endIcon)
+          }
+        ) : /* @__PURE__ */ jsx28(
+          View22,
+          {
+            style: [styles.endIcon, isOpen && styles.iconOpen],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no",
+            children: /* @__PURE__ */ jsx28(ChevronDown2, { width: 16, height: 16, color: iconColor })
+          }
         )
       ]
     }
@@ -1471,290 +3096,371 @@ function SelectTrigger({
 }
 SelectTrigger.displayName = "SelectTrigger";
 
-// src/components/Select/Select.styles.ts
-import { StyleSheet as StyleSheet15 } from "react-native";
-var createStyles15 = (theme) => StyleSheet15.create({
-  modalRoot: {
-    flex: 1,
-    justifyContent: "flex-end"
-  },
-  backdrop: {
-    ...StyleSheet15.absoluteFill,
-    backgroundColor: theme.semantic.overlay.backdrop
-  },
-  sheet: {
-    maxHeight: "50%",
-    overflow: "hidden",
-    backgroundColor: theme.components.select.dropdown.bg,
-    borderColor: theme.components.select.dropdown.border,
-    borderTopLeftRadius: theme.tokens.radius.lg,
-    borderTopRightRadius: theme.tokens.radius.lg,
-    borderWidth: 1,
-    borderBottomWidth: 0,
-    shadowColor: theme.tokens.shadows.lg.color,
-    shadowOffset: {
-      width: theme.tokens.shadows.lg.x,
-      height: -theme.tokens.shadows.lg.y
-    },
-    shadowOpacity: theme.tokens.shadows.lg.opacity,
-    shadowRadius: theme.tokens.shadows.lg.blur,
-    elevation: theme.tokens.shadows.lg.elevation
-  },
-  toolbar: {
-    minHeight: 48,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: theme.tokens.spacing[4],
-    borderBottomColor: theme.components.select.dropdown.border,
-    borderBottomWidth: 1
-  },
-  title: {
-    flex: 1,
-    marginHorizontal: theme.tokens.spacing[3],
-    color: theme.components.select.dropdown.fg,
-    fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md,
-    textAlign: "center"
-  },
-  toolbarAction: {
-    minWidth: 64,
-    minHeight: 44,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  cancelText: {
-    color: theme.components.select.trigger.placeholder.fg,
-    fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
-  },
-  doneText: {
-    color: theme.semantic.text.interactive,
-    fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
-  },
-  picker: {
-    width: "100%"
-  }
-});
+// src/components/Select/Trigger/SelectValue.tsx
+var SelectValue = createSelectSlot(
+  "value",
+  "Select.Value"
+);
 
-// src/components/Select/Select.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-function Select({
-  label,
-  description,
-  value,
-  defaultValue,
-  onValueChange,
-  options: optionsProp,
-  multiple = false,
-  maxSelected,
-  closeOnSelect,
-  placeholder = "Select...",
-  size = "md",
-  required = false,
-  disabled = false,
-  error,
-  style,
-  triggerStyle,
-  textStyle,
-  pickerStyle,
-  accessibilityLabel,
-  accessibilityHint
-}) {
-  const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles15);
-  const options = optionsProp ?? [];
+// src/components/Select/Root/SelectRoot.tsx
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+function SelectRoot(props) {
+  const {
+    label,
+    description,
+    error,
+    invalid = false,
+    required = false,
+    disabled = false,
+    placeholder = "Select...",
+    color = "primary",
+    variant = "outline",
+    size,
+    open,
+    defaultOpen,
+    onOpenChange,
+    clearable = false,
+    searchable: searchableProp,
+    searchPlaceholder,
+    loading = false,
+    loadingText = "Loading...",
+    onSearch,
+    filterOptions,
+    filter,
+    empty,
+    startIcon,
+    endIcon,
+    prefix,
+    suffix,
+    renderValue,
+    renderOption,
+    closeOnSelect,
+    maxSelected,
+    presentation = "auto",
+    placement = "bottom",
+    matchTriggerWidth = false,
+    dismissOnBackdropPress = true,
+    virtual,
+    options: optionsProp,
+    children,
+    style,
+    triggerStyle,
+    textStyle,
+    contentStyle,
+    optionStyle,
+    searchStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    testID
+  } = props;
+  const field = useFormFieldContext();
+  const hasOwnField = Boolean(label || description || error);
+  const [triggerWidth, setTriggerWidth] = useState4();
+  const searchInputRef = useRef4(null);
+  const selectedFocusValueRef = useRef4(void 0);
+  const resolvedPresentation = useSelectPresentation(presentation);
+  const {
+    options,
+    rows,
+    searchableFromChildren,
+    searchPlaceholderFromChildren,
+    emptyFromChildren,
+    loadingFromChildren
+  } = useSelectCollection(children, optionsProp);
+  const resolvedSize = size ?? field?.size ?? "md";
+  const isInvalid = invalid || Boolean(error) || !hasOwnField && Boolean(field?.invalid);
+  const isDisabled = disabled || !hasOwnField && Boolean(field?.disabled);
+  const isRequired = required || !hasOwnField && Boolean(field?.required);
+  const controlledValue = props.multiple ? props.value : props.value === null ? "" : props.value;
+  const controlledDefaultValue = props.multiple ? props.defaultValue : props.defaultValue === null ? "" : props.defaultValue;
   const {
     selectedValue,
-    selectedValues,
-    selectedOption,
-    selectedOptions,
+    setSelectedValue,
     isOpen,
-    setIsOpen,
+    openDropdown,
+    closeDropdown,
     selectValue
   } = useSelect({
-    value,
-    defaultValue,
-    onValueChange,
+    value: controlledValue,
+    defaultValue: controlledDefaultValue,
+    onValueChange: (nextValue) => {
+      if (props.multiple) {
+        props.onValueChange?.(
+          nextValue
+        );
+        return;
+      }
+      props.onValueChange?.(
+        nextValue === "" ? null : nextValue
+      );
+    },
     options,
-    multiple,
+    multiple: props.multiple,
     maxSelected,
     closeOnSelect,
-    disabled
+    disabled: isDisabled,
+    open,
+    defaultOpen,
+    onOpenChange
   });
-  const resolvedSelectedValues = selectedValues ?? [];
-  const resolvedSelectedOptions = selectedOptions ?? [];
-  const selectedValueText = Array.isArray(selectedValue) ? selectedValue[0] ?? "" : selectedValue ?? "";
-  const [draftValue, setDraftValue] = useState2(selectedValueText);
-  const hasError = !!error;
-  useEffect2(() => {
-    if (isOpen) {
-      setDraftValue(selectedValueText);
+  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
+  const selectedOption = options.find(
+    (option) => selectedValues.includes(option.value)
+  );
+  const selectedOptions = options.filter(
+    (option) => selectedValues.includes(option.value)
+  );
+  const optionsByValue = useMemo6(
+    () => new Map(
+      options.filter((option) => !option.disabled).map((option) => [option.value, option])
+    ),
+    [options]
+  );
+  const { query, setQuery, shouldSearch, filteredRows } = useSelectSearch({
+    rows,
+    isOpen,
+    searchable: searchableProp,
+    searchableFromChildren,
+    onSearch,
+    filterOptions,
+    filter
+  });
+  const selectedFocusValue = selectedValues.includes(
+    selectedFocusValueRef.current ?? ""
+  ) ? selectedFocusValueRef.current : selectedValues[0];
+  const selectedRowIndex = Math.max(
+    0,
+    filteredRows.findIndex(
+      (row) => row.type === "item" && row.option.value === selectedFocusValue
+    )
+  );
+  const itemHeight = typeof virtual === "object" ? virtual.estimatedItemSize ?? 46 : 46;
+  const displayValue = useMemo6(() => {
+    if (renderValue) {
+      return renderValue(
+        props.multiple ? selectedOptions : selectedOption ?? null,
+        { placeholder, multiple: Boolean(props.multiple) }
+      );
     }
-  }, [isOpen, selectedValueText]);
-  const resolvedLabel = accessibilityLabel ?? label ?? selectedOption?.label ?? placeholder ?? "Select";
-  const openPicker = () => {
-    if (disabled) return;
-    setDraftValue(selectedValueText);
-    setIsOpen(true);
+    if (props.multiple && selectedOptions.length > 0) {
+      const visibleLabels = selectedOptions.slice(0, 2).map((option) => option.label);
+      return selectedOptions.length > 2 ? `${visibleLabels.join(", ")} +${selectedOptions.length - 2}` : visibleLabels.join(", ");
+    }
+    return selectedOption?.label ?? placeholder;
+  }, [
+    placeholder,
+    props.multiple,
+    renderValue,
+    selectedOption,
+    selectedOptions
+  ]);
+  const { resolvedLabel, resolvedHint, announce } = useSelectAccessibility({
+    accessibilityLabel,
+    accessibilityHint,
+    label: !hasOwnField ? void 0 : label,
+    description: !hasOwnField ? field?.description : description,
+    error: !hasOwnField ? field?.error : error,
+    invalid: isInvalid,
+    placeholder,
+    selectedLabel: selectedOption?.label,
+    hasFieldContext: !hasOwnField && Boolean(field),
+    fieldDescribedBy: field?.ariaDescribedBy
+  });
+  const hasValue = selectedValues.length > 0;
+  const clearValue = () => {
+    selectedFocusValueRef.current = void 0;
+    selectValue("");
+    announce("Selection cleared");
   };
-  const closePicker = () => {
-    setIsOpen(false);
+  const selectOption = (option) => {
+    if (option.disabled) return;
+    const selectedBefore = selectedValues.includes(option.value);
+    const maxReached = Boolean(props.multiple) && !selectedBefore && typeof maxSelected === "number" && selectedValues.length >= maxSelected;
+    if (maxReached) return;
+    selectedFocusValueRef.current = option.value;
+    selectValue(option.value);
+    announce(`${option.label} selected`);
   };
-  const handleValueChange = (nextValue) => {
-    const nextOption = options.find((option) => option.value === nextValue);
-    if (!nextOption || nextOption.disabled) {
+  const selectGroup = (values) => {
+    if (!props.multiple || values.length === 0) return;
+    const enabledValues = values.filter((value) => optionsByValue.has(value));
+    const selectedGroupValues = enabledValues.filter(
+      (value) => selectedValues.includes(value)
+    );
+    const outsideSelectedCount = selectedValues.filter(
+      (value) => !enabledValues.includes(value)
+    ).length;
+    const maxSelectableGroupCount = typeof maxSelected === "number" ? Math.max(
+      0,
+      Math.min(enabledValues.length, maxSelected - outsideSelectedCount)
+    ) : enabledValues.length;
+    const shouldClearGroup = selectedGroupValues.length > 0 && selectedGroupValues.length >= maxSelectableGroupCount;
+    if (shouldClearGroup) {
+      selectedFocusValueRef.current = void 0;
+      setSelectedValue(
+        selectedValues.filter((value) => !enabledValues.includes(value))
+      );
+      announce("Group selection cleared");
       return;
     }
-    setDraftValue(nextValue);
-  };
-  const confirmPicker = () => {
-    const nextOption = options.find((option) => option.value === draftValue);
-    if (!nextOption || nextOption.disabled) {
-      setIsOpen(false);
-      return;
+    const nextValues = [...selectedValues];
+    for (const value of enabledValues) {
+      if (nextValues.includes(value)) continue;
+      if (typeof maxSelected === "number" && nextValues.length >= maxSelected) {
+        break;
+      }
+      nextValues.push(value);
+    }
+    setSelectedValue(nextValues);
+    selectedFocusValueRef.current = nextValues.at(-1);
+    announce("Group selected");
+    if (closeOnSelect) {
+      closeDropdown();
     }
-    selectValue(draftValue);
-    setIsOpen(false);
   };
-  const displayText = multiple && resolvedSelectedOptions.length ? resolvedSelectedOptions.map((option) => option.label).join(", ") : selectedOption?.label ?? placeholder;
-  return /* @__PURE__ */ jsxs9(
-    FormField,
+  const contextValue = {
+    label,
+    description,
+    error,
+    placeholder,
+    color,
+    variant,
+    size: resolvedSize,
+    isOpen,
+    hasValue,
+    loading,
+    clearable,
+    searchable: shouldSearch,
+    multiple: Boolean(props.multiple),
+    maxSelected,
+    virtual,
+    resolvedLabel,
+    resolvedHint,
+    resolvedPresentation,
+    placement,
+    dismissOnBackdropPress,
+    matchTriggerWidth,
+    triggerWidth,
+    selectedValues,
+    selectedOptions,
+    optionsByValue,
+    rows,
+    filteredRows,
+    selectedRowIndex,
+    itemHeight,
+    query,
+    searchPlaceholder: searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...",
+    searchInputRef,
+    empty: empty ?? emptyFromChildren ?? "Nothing found",
+    loadingContent: loadingFromChildren ?? loadingText,
+    closeContent: closeDropdown,
+    openContent: openDropdown,
+    clearValue,
+    selectOption,
+    selectGroup,
+    setQuery,
+    renderValue,
+    renderOption,
+    startIcon,
+    endIcon,
+    prefix,
+    suffix,
+    triggerStyle,
+    textStyle,
+    contentStyle,
+    optionStyle,
+    searchStyle,
+    fieldControlId: !hasOwnField ? field?.controlId : void 0,
+    fieldLabelId: !hasOwnField ? field?.labelId : void 0,
+    fieldDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0
+  };
+  const control = /* @__PURE__ */ jsx29(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17(
+    View23,
     {
-      label,
-      description,
-      error,
-      required,
-      disabled,
-      style,
+      testID,
+      onLayout: (event) => setTriggerWidth(event.nativeEvent.layout.width),
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx29(
           SelectTrigger,
           {
-            displayText,
-            isPlaceholder: resolvedSelectedValues.length === 0,
+            displayText: displayValue,
+            isPlaceholder: !hasValue,
             isOpen,
-            size,
-            disabled,
-            required,
-            hasError,
+            hasValue,
+            size: resolvedSize,
+            color,
+            variant,
+            disabled: isDisabled,
+            required: isRequired,
+            hasError: isInvalid,
+            loading,
+            clearable,
+            startIcon,
+            endIcon,
+            prefix,
+            suffix,
+            nativeID: !hasOwnField ? field?.controlId : void 0,
             accessibilityLabel: resolvedLabel,
-            accessibilityHint,
+            accessibilityHint: resolvedHint,
+            accessibilityLabelledBy: !hasOwnField ? field?.labelId : void 0,
+            ariaDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0,
             triggerStyle,
             textStyle,
-            onPress: openPicker
+            onPress: openDropdown,
+            onClear: clearValue
           }
         ),
-        /* @__PURE__ */ jsx17(
-          Modal3,
-          {
-            transparent: true,
-            visible: isOpen,
-            animationType: "slide",
-            onRequestClose: closePicker,
-            children: /* @__PURE__ */ jsxs9(View13, { style: styles.modalRoot, children: [
-              /* @__PURE__ */ jsx17(Pressable7, { style: styles.backdrop, onPress: closePicker }),
-              /* @__PURE__ */ jsxs9(View13, { style: styles.sheet, children: [
-                /* @__PURE__ */ jsxs9(
-                  View13,
-                  {
-                    style: styles.toolbar,
-                    accessible: true,
-                    accessibilityRole: "toolbar",
-                    accessibilityLabel: `${resolvedLabel} picker actions`,
-                    children: [
-                      /* @__PURE__ */ jsx17(
-                        Pressable7,
-                        {
-                          onPress: closePicker,
-                          hitSlop: 8,
-                          style: styles.toolbarAction,
-                          accessibilityRole: "button",
-                          accessibilityLabel: "Cancel selection",
-                          accessibilityHint: "Closes the picker without changing the selected value",
-                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.cancelText, children: "Cancel" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx17(
-                        Text8,
-                        {
-                          style: styles.title,
-                          numberOfLines: 1,
-                          accessibilityRole: "header",
-                          children: resolvedLabel
-                        }
-                      ),
-                      /* @__PURE__ */ jsx17(
-                        Pressable7,
-                        {
-                          onPress: confirmPicker,
-                          hitSlop: 8,
-                          style: styles.toolbarAction,
-                          accessibilityRole: "button",
-                          accessibilityLabel: "Confirm selection",
-                          accessibilityHint: "Applies the highlighted picker value",
-                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.doneText, children: "Done" })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs9(
-                  Picker,
-                  {
-                    selectedValue: draftValue,
-                    onValueChange: handleValueChange,
-                    enabled: !disabled,
-                    style: [styles.picker, pickerStyle],
-                    itemStyle: {
-                      color: theme.components.select.option.default.fg
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx17(
-                        Picker.Item,
-                        {
-                          label: placeholder,
-                          value: "",
-                          enabled: false,
-                          color: theme.components.select.option.disabled.fg
-                        }
-                      ),
-                      options.map((option) => /* @__PURE__ */ jsx17(
-                        Picker.Item,
-                        {
-                          label: option.disabled ? `${option.label} - unavailable` : option.label,
-                          value: option.value,
-                          enabled: !option.disabled,
-                          color: option.disabled ? theme.components.select.option.disabled.fg : theme.components.select.option.default.fg
-                        },
-                        option.value
-                      ))
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          }
-        )
+        /* @__PURE__ */ jsx29(SelectContentSurface, {})
       ]
     }
+  ) });
+  if (!hasOwnField && field) {
+    return control;
+  }
+  return /* @__PURE__ */ jsx29(
+    FormField,
+    {
+      label,
+      description,
+      error,
+      required: isRequired,
+      disabled: isDisabled,
+      invalid: isInvalid,
+      size: resolvedSize,
+      style,
+      children: control
+    }
   );
 }
-Select.displayName = "Select";
+SelectRoot.displayName = "Select";
+
+// src/components/Select/Select.tsx
+var Select = Object.assign(SelectRoot, {
+  Trigger: SelectTriggerSlot,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Content: SelectContent,
+  Search: SelectSearch,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Item: SelectItem,
+  ItemIcon: SelectItemIcon,
+  ItemDescription: SelectItemDescription,
+  ItemBadge: SelectItemBadge,
+  Separator: SelectSeparator,
+  Empty: SelectEmpty,
+  Loading: SelectLoading
+});
 
 // src/components/Tabs/List/TabsList.tsx
-import { View as View14 } from "react-native";
+import { View as View24 } from "react-native";
 
 // src/components/Tabs/TabsContext.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var TabsContext = createContext5(null);
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var TabsContext = createContext6(null);
 var TabsProvider = TabsContext.Provider;
 var useTabs = () => {
-  const context = useContext5(TabsContext);
+  const context = useContext6(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used inside <Tabs>.");
   }
@@ -1763,8 +3469,8 @@ var useTabs = () => {
 TabsContext.displayName = "TabsContext";
 
 // src/components/Tabs/List/TabsList.styles.ts
-import { StyleSheet as StyleSheet16 } from "react-native";
-var createStyles16 = (theme) => StyleSheet16.create({
+import { StyleSheet as StyleSheet20 } from "react-native";
+var createStyles14 = (theme) => StyleSheet20.create({
   list: {
     flexDirection: "row",
     alignSelf: "stretch",
@@ -1790,12 +3496,12 @@ var createStyles16 = (theme) => StyleSheet16.create({
 });
 
 // src/components/Tabs/List/TabsList.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var TabsList = ({ children, style }) => {
-  const styles = useThemeStyles(createStyles16);
+  const styles = useThemeStyles(createStyles14);
   const { orientation, appearance } = useTabs();
-  return /* @__PURE__ */ jsx18(
-    View14,
+  return /* @__PURE__ */ jsx30(
+    View24,
     {
       accessibilityRole: "tablist",
       style: [
@@ -1811,11 +3517,11 @@ var TabsList = ({ children, style }) => {
 TabsList.displayName = "TabsList";
 
 // src/components/Tabs/Panel/TabsPanel.tsx
-import { View as View15 } from "react-native";
+import { View as View25 } from "react-native";
 
 // src/components/Tabs/Panel/TabsPanel.styles.ts
-import { StyleSheet as StyleSheet17 } from "react-native";
-var createStyles17 = (theme) => StyleSheet17.create({
+import { StyleSheet as StyleSheet21 } from "react-native";
+var createStyles15 = (theme) => StyleSheet21.create({
   panel: {
     width: "100%",
     minWidth: 0,
@@ -1842,13 +3548,13 @@ var createStyles17 = (theme) => StyleSheet17.create({
 });
 
 // src/components/Tabs/Panel/TabsPanel.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var TabsPanel = ({ index, children, style }) => {
-  const styles = useThemeStyles(createStyles17);
+  const styles = useThemeStyles(createStyles15);
   const { activeIndex, orientation } = useTabs();
   if (activeIndex !== index) return null;
-  return /* @__PURE__ */ jsx19(
-    View15,
+  return /* @__PURE__ */ jsx31(
+    View25,
     {
       style: [
         styles.panel,
@@ -1862,13 +3568,13 @@ var TabsPanel = ({ index, children, style }) => {
 TabsPanel.displayName = "TabsPanel";
 
 // src/components/Tabs/Tab/Tab.tsx
-import { cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
-import { Pressable as Pressable8, Text as Text9, View as View16 } from "react-native";
+import { cloneElement as cloneElement6, isValidElement as isValidElement8 } from "react";
+import { Pressable as Pressable12, Text as Text14, View as View26 } from "react-native";
 
 // src/components/Tabs/Tab/Tab.styles.ts
-import { StyleSheet as StyleSheet18 } from "react-native";
+import { StyleSheet as StyleSheet22 } from "react-native";
 var fontWeight2 = (value) => value;
-var createStyles18 = (theme) => StyleSheet18.create({
+var createStyles16 = (theme) => StyleSheet22.create({
   tab: {
     minHeight: 40,
     alignItems: "center",
@@ -1986,7 +3692,7 @@ var createStyles18 = (theme) => StyleSheet18.create({
 });
 
 // src/components/Tabs/Tab/Tab.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var Tab = ({
   index,
   children,
@@ -1996,7 +3702,7 @@ var Tab = ({
   textStyle
 }) => {
   const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles18);
+  const styles = useThemeStyles(createStyles16);
   const { activeIndex, appearance, orientation, setActiveIndex } = useTabs();
   const isActive = activeIndex === index;
   const isPills = appearance === "pills";
@@ -2004,11 +3710,11 @@ var Tab = ({
   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 = isValidElement4(icon) ? cloneElement4(icon, {
+  const renderedIcon = isValidElement8(icon) ? cloneElement6(icon, {
     color: iconColor
   }) : icon;
-  return /* @__PURE__ */ jsx20(
-    Pressable8,
+  return /* @__PURE__ */ jsx32(
+    Pressable12,
     {
       disabled,
       accessibilityRole: "tab",
@@ -2028,9 +3734,9 @@ var Tab = ({
         disabled && styles.tabDisabled,
         style
       ],
-      children: ({ pressed }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
-        isUnderline && !isVertical && /* @__PURE__ */ jsx20(
-          View16,
+      children: ({ pressed }) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
+        isUnderline && !isVertical && /* @__PURE__ */ jsx32(
+          View26,
           {
             pointerEvents: "none",
             style: [
@@ -2039,8 +3745,8 @@ var Tab = ({
             ]
           }
         ),
-        isUnderline && isVertical && /* @__PURE__ */ jsx20(
-          View16,
+        isUnderline && isVertical && /* @__PURE__ */ jsx32(
+          View26,
           {
             pointerEvents: "none",
             style: [
@@ -2050,9 +3756,9 @@ var Tab = ({
             ]
           }
         ),
-        icon != null && /* @__PURE__ */ jsx20(View16, { style: styles.tabIcon, children: renderedIcon }),
-        children != null && /* @__PURE__ */ jsx20(
-          Text9,
+        icon != null && /* @__PURE__ */ jsx32(View26, { style: styles.tabIcon, children: renderedIcon }),
+        children != null && /* @__PURE__ */ jsx32(
+          Text14,
           {
             numberOfLines: 2,
             ellipsizeMode: "tail",
@@ -2073,13 +3779,13 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/Tabs.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { useTabs as useTabs2 } from "@vellira-ui/core";
-import { View as View17 } from "react-native";
+import { View as View27 } from "react-native";
 
 // src/components/Tabs/Tabs.styles.ts
-import { StyleSheet as StyleSheet19 } from "react-native";
-var createStyles19 = (theme) => StyleSheet19.create({
+import { StyleSheet as StyleSheet23 } from "react-native";
+var createStyles17 = (theme) => StyleSheet23.create({
   root: {
     width: "100%",
     minWidth: 0
@@ -2094,7 +3800,7 @@ var createStyles19 = (theme) => StyleSheet19.create({
 });
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var TabsRoot = ({
   children,
   activeIndex: controlledActiveIndex,
@@ -2104,19 +3810,19 @@ var TabsRoot = ({
   appearance = "pills",
   style
 }) => {
-  const styles = useThemeStyles(createStyles19);
+  const styles = useThemeStyles(createStyles17);
   const { activeIndex, setActiveIndex } = useTabs2({
     activeIndex: controlledActiveIndex,
     defaultActiveIndex,
     onChange,
     orientation
   });
-  const value = useMemo4(
+  const value = useMemo7(
     () => ({ activeIndex, appearance, orientation, setActiveIndex }),
     [activeIndex, appearance, orientation, setActiveIndex]
   );
-  return /* @__PURE__ */ jsx21(TabsProvider, { value, children: /* @__PURE__ */ jsx21(
-    View17,
+  return /* @__PURE__ */ jsx33(TabsProvider, { value, children: /* @__PURE__ */ jsx33(
+    View27,
     {
       style: [
         styles.root,
@@ -2137,20 +3843,20 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { Modal as Modal4, Pressable as Pressable9, Text as Text10, View as View18 } from "react-native";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } 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 useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useRef as useRef5, useState as useState5 } from "react";
 import { Dimensions } from "react-native";
 var safePadding = 12;
 function useNativeFloatingPosition(placement = "top", offset = 8) {
-  const [position, setPosition] = useState3({ top: 0, left: 0 });
-  const floatingSizeRef = useRef2({
+  const [position, setPosition] = useState5({ top: 0, left: 0 });
+  const floatingSizeRef = useRef5({
     width: 0,
     height: 0
   });
-  const lastTriggerRef = useRef2(null);
+  const lastTriggerRef = useRef5(null);
   const clamp = useCallback2((value, min, max) => {
     return Math.min(Math.max(value, min), Math.max(min, max));
   }, []);
@@ -2207,13 +3913,13 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 }
 
 // src/components/Tooltip/Tooltip.styles.ts
-import { StyleSheet as StyleSheet20 } from "react-native";
-var createStyles20 = (theme) => StyleSheet20.create({
+import { StyleSheet as StyleSheet24 } from "react-native";
+var createStyles18 = (theme) => StyleSheet24.create({
   root: {
     alignSelf: "flex-start"
   },
   overlay: {
-    ...StyleSheet20.absoluteFill
+    ...StyleSheet24.absoluteFill
   },
   bubble: {
     position: "absolute",
@@ -2245,7 +3951,7 @@ var createStyles20 = (theme) => StyleSheet20.create({
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -2257,10 +3963,10 @@ function Tooltip({
   contentStyle,
   textStyle
 }) {
-  const styles = useThemeStyles(createStyles20);
-  const [visible, setVisible] = useState4(false);
-  const triggerRef = useRef3(null);
-  const closeTimerRef = useRef3(null);
+  const styles = useThemeStyles(createStyles18);
+  const [visible, setVisible] = useState6(false);
+  const triggerRef = useRef6(null);
+  const closeTimerRef = useRef6(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
   const hideDelay = delay?.close ?? 2500;
   const clearCloseTimer = () => {
@@ -2279,21 +3985,21 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect3(() => {
+  useEffect6(() => {
     return clearCloseTimer;
   }, []);
-  return /* @__PURE__ */ jsxs11(View18, { style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx22(Pressable9, { ref: triggerRef, onLongPress: showTooltip, children }),
-    /* @__PURE__ */ jsx22(Modal4, { visible: visible && !disabled, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx22(
-      Pressable9,
+  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,
       {
         style: styles.overlay,
         onPress: () => {
           clearCloseTimer();
           setVisible(false);
         },
-        children: /* @__PURE__ */ jsx22(
-          View18,
+        children: /* @__PURE__ */ jsx34(
+          View28,
           {
             pointerEvents: "none",
             style: [
@@ -2306,7 +4012,7 @@ function Tooltip({
               contentStyle
             ],
             onLayout: onFloatingLayout,
-            children: typeof content === "string" ? /* @__PURE__ */ jsx22(Text10, { style: [styles.text, textStyle], children: content }) : content
+            children: typeof content === "string" ? /* @__PURE__ */ jsx34(Text15, { style: [styles.text, textStyle], children: content }) : content
           }
         )
       }
@@ -2316,8 +4022,8 @@ function Tooltip({
 Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
-import { cloneElement as cloneElement5, useState as useState5 } from "react";
-import { ActivityIndicator, Pressable as Pressable10, Text as Text11, View as View19 } from "react-native";
+import { cloneElement as cloneElement7, useState as useState7 } from "react";
+import { ActivityIndicator as ActivityIndicator3, Pressable as Pressable14, Text as Text16, View as View29 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -2327,9 +4033,9 @@ var devWarning = (condition, message) => {
 };
 
 // src/primitives/Button/Button.styles.ts
-import { StyleSheet as StyleSheet21 } from "react-native";
+import { StyleSheet as StyleSheet25 } from "react-native";
 var fontWeight3 = (value) => value;
-var createStyles21 = (theme) => StyleSheet21.create({
+var createStyles19 = (theme) => StyleSheet25.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -2394,7 +4100,7 @@ var createStyles21 = (theme) => StyleSheet21.create({
 });
 
 // src/primitives/Button/Button.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     px: 12,
@@ -2446,13 +4152,13 @@ function Button({
   ...props
 }) {
   const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles21);
+  const styles = useThemeStyles(createStyles19);
   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] = useState5(false);
-  const [isFocused, setIsFocused] = useState5(false);
-  const [labelWidth, setLabelWidth] = useState5(0);
+  const [isHovered, setIsHovered] = useState7(false);
+  const [isFocused, setIsFocused] = useState7(false);
+  const [labelWidth, setLabelWidth] = useState7(0);
   const isDisabled = disabled || loading;
   const iconOnly = iconOnlyProp || !children && Boolean(iconStart || iconEnd);
   const content = loading && loadingText ? loadingText : children;
@@ -2478,7 +4184,7 @@ function Button({
     setIsHovered(false);
     onHoverOut?.(event);
   };
-  const renderIcon = (icon, iconColor) => cloneElement5(icon, {
+  const renderIcon = (icon, iconColor) => cloneElement7(icon, {
     color: iconColor,
     size: resolvedIconSize
   });
@@ -2489,8 +4195,8 @@ function Button({
     );
   };
   const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? appearanceTheme.pressed : isHovered ? appearanceTheme.hover : appearanceTheme.default;
-  return /* @__PURE__ */ jsx23(
-    Pressable10,
+  return /* @__PURE__ */ jsx35(
+    Pressable14,
     {
       ...props,
       testID,
@@ -2526,12 +4232,12 @@ function Button({
       children: ({ pressed }) => {
         const interactionTheme = getInteractionTheme(pressed);
         const contentColor = interactionTheme.fg;
-        return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-          loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
+        return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+          loading && /* @__PURE__ */ jsx35(ActivityIndicator3, { size: "small", color: contentColor }),
           !loading && iconStart && renderIcon(iconStart, contentColor),
-          content && !iconOnly && /* @__PURE__ */ jsxs12(View19, { style: styles.labelSlot, children: [
-            /* @__PURE__ */ jsx23(
-              Text11,
+          content && !iconOnly && /* @__PURE__ */ jsxs20(View29, { style: styles.labelSlot, children: [
+            /* @__PURE__ */ jsx35(
+              Text16,
               {
                 onLayout: handleLabelLayout,
                 style: [
@@ -2546,8 +4252,8 @@ function Button({
                 children: content
               }
             ),
-            measureLabel && /* @__PURE__ */ jsx23(
-              Text11,
+            measureLabel && /* @__PURE__ */ jsx35(
+              Text16,
               {
                 accessibilityElementsHidden: true,
                 importantForAccessibility: "no-hide-descendants",
@@ -2564,8 +4270,8 @@ function Button({
               }
             )
           ] }),
-          badge && !iconOnly && /* @__PURE__ */ jsx23(
-            Text11,
+          badge && !iconOnly && /* @__PURE__ */ jsx35(
+            Text16,
             {
               style: [
                 styles.badge,
@@ -2577,8 +4283,8 @@ function Button({
               children: badge
             }
           ),
-          shortcut && !iconOnly && /* @__PURE__ */ jsx23(
-            Text11,
+          shortcut && !iconOnly && /* @__PURE__ */ jsx35(
+            Text16,
             {
               style: [
                 styles.shortcut,
@@ -2597,14 +4303,14 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect4 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect7 } from "react";
 import { useControllableState as useControllableState3 } from "@vellira-ui/core";
-import { Check } from "@vellira-ui/icons";
-import { Pressable as Pressable11, Text as Text12, View as View20 } from "react-native";
+import { Check as Check2 } from "@vellira-ui/icons";
+import { Pressable as Pressable15, Text as Text17, View as View30 } from "react-native";
 
 // src/primitives/Checkbox/Checkbox.styles.ts
-import { StyleSheet as StyleSheet22 } from "react-native";
-var createStyles22 = (theme) => StyleSheet22.create({
+import { StyleSheet as StyleSheet26 } from "react-native";
+var createStyles20 = (theme) => StyleSheet26.create({
   container: {
     gap: theme.tokens.spacing[2]
   },
@@ -2747,7 +4453,7 @@ var createStyles22 = (theme) => StyleSheet22.create({
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var iconSizeBySize = {
   sm: 10,
   md: 12,
@@ -2775,7 +4481,7 @@ var Checkbox = forwardRef2(
     ...PressableProps
   }, ref) => {
     const { theme } = useTheme();
-    const styles = useThemeStyles(createStyles22);
+    const styles = useThemeStyles(createStyles20);
     const checkboxColor = theme.components.checkbox[color];
     const boxSizeStyle = {
       sm: styles.boxSm,
@@ -2805,15 +4511,15 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect4(() => {
+    useEffect7(() => {
       devWarning(
         Boolean(resolvedAccessibilityLabel),
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
       );
     }, [resolvedAccessibilityLabel]);
-    return /* @__PURE__ */ jsxs13(View20, { style: styles.container, children: [
-      /* @__PURE__ */ jsx24(
-        Pressable11,
+    return /* @__PURE__ */ jsxs21(View30, { style: styles.container, children: [
+      /* @__PURE__ */ jsx36(
+        Pressable15,
         {
           ...PressableProps,
           ref,
@@ -2836,9 +4542,9 @@ var Checkbox = forwardRef2(
           children: ({ pressed }) => {
             const isSelected = isChecked || indeterminate;
             const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? checkboxColor.pressed.fg : checkboxColor.default.fg;
-            return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-              /* @__PURE__ */ jsx24(
-                View20,
+            return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+              /* @__PURE__ */ jsx36(
+                View30,
                 {
                   style: [
                     styles.box,
@@ -2855,8 +4561,8 @@ var Checkbox = forwardRef2(
                     hasError && styles.boxError,
                     disabled && styles.boxDisabled
                   ],
-                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx24(
-                    View20,
+                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx36(
+                    View30,
                     {
                       style: [
                         styles.indeterminateMark,
@@ -2865,11 +4571,11 @@ var Checkbox = forwardRef2(
                         }
                       ]
                     }
-                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor }))
+                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx36(Check2, { size: iconSizeBySize[size], color: checkColor }))
                 }
               ),
-              label && /* @__PURE__ */ jsxs13(
-                Text12,
+              label && /* @__PURE__ */ jsxs21(
+                Text17,
                 {
                   style: [
                     styles.label,
@@ -2882,7 +4588,7 @@ var Checkbox = forwardRef2(
                   ],
                   children: [
                     label,
-                    required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
+                    required && /* @__PURE__ */ jsx36(Text17, { style: styles.requiredMark, children: " *" })
                   ]
                 }
               )
@@ -2890,8 +4596,8 @@ var Checkbox = forwardRef2(
           }
         }
       ),
-      description && /* @__PURE__ */ jsx24(
-        Text12,
+      description && /* @__PURE__ */ jsx36(
+        Text17,
         {
           style: [
             styles.descriptionText,
@@ -2901,21 +4607,21 @@ var Checkbox = forwardRef2(
           children: description
         }
       ),
-      hasError && /* @__PURE__ */ jsx24(Text12, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
+      hasError && /* @__PURE__ */ jsx36(Text17, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as cloneElement6, forwardRef as forwardRef3, useState as useState6 } from "react";
-import { Pressable as Pressable12, Text as Text13, TextInput, View as View21 } from "react-native";
+import { cloneElement as cloneElement8, forwardRef as forwardRef3, useState as useState8 } from "react";
+import { Pressable as Pressable16, Text as Text18, TextInput as TextInput2, View as View31 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
-import { StyleSheet as StyleSheet23 } from "react-native";
+import { StyleSheet as StyleSheet27 } from "react-native";
 var getDisabledPlaceholderTextColor = (theme) => theme.components.input.disabled.placeholder;
 var resolveRingColor = (ring) => typeof ring === "string" ? ring : ring.color;
-var createStyles23 = (theme) => StyleSheet23.create({
+var createStyles21 = (theme) => StyleSheet27.create({
   inputWrapper: {
     position: "relative",
     width: "100%",
@@ -3059,7 +4765,7 @@ var createStyles23 = (theme) => StyleSheet23.create({
 });
 
 // src/primitives/Input/Input.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var keyboardTypeByInputType = {
   text: "default",
   email: "email-address",
@@ -3157,11 +4863,11 @@ var Input = forwardRef3(
     ...props
   }, ref) => {
     const { theme } = useTheme();
-    const styles = useThemeStyles(createStyles23);
+    const styles = useThemeStyles(createStyles21);
     const field = useFormFieldContext();
     const hasOwnField = Boolean(label || description || error);
-    const [isFocused, setIsFocused] = useState6(false);
-    const [uncontrolledValue, setUncontrolledValue] = useState6(
+    const [isFocused, setIsFocused] = useState8(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState8(
       defaultValue ?? ""
     );
     const isControlled = value !== void 0;
@@ -3178,7 +4884,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] = useState6(false);
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState8(false);
     const resolvedIconSize = iconSize ?? 16;
     const handleFocus = (event) => {
       setIsFocused(true);
@@ -3209,22 +4915,22 @@ var Input = forwardRef3(
     const startIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[startIconTone];
     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__ */ jsxs14(View21, { style: styles.inputWrapper, children: [
-      startIcon && /* @__PURE__ */ jsx25(
-        View21,
+    const control = /* @__PURE__ */ jsxs22(View31, { style: styles.inputWrapper, children: [
+      startIcon && /* @__PURE__ */ jsx37(
+        View31,
         {
           pointerEvents: "none",
           style: styles.leftIcon,
           accessibilityElementsHidden: true,
           importantForAccessibility: "no",
-          children: cloneElement6(startIcon, {
+          children: cloneElement8(startIcon, {
             color: startIconColor,
             size: resolvedIconSize
           })
         }
       ),
-      /* @__PURE__ */ jsx25(
-        TextInput,
+      /* @__PURE__ */ jsx37(
+        TextInput2,
         {
           ...props,
           ref,
@@ -3279,37 +4985,37 @@ var Input = forwardRef3(
           ]
         }
       ),
-      showClearButton ? /* @__PURE__ */ jsx25(
-        Pressable12,
+      showClearButton ? /* @__PURE__ */ jsx37(
+        Pressable16,
         {
           accessibilityRole: "button",
           accessibilityLabel: "Clear input",
           hitSlop: 8,
           onPress: handleClear,
           style: styles.clearButton,
-          children: clearIcon ? cloneElement6(clearIcon, {
+          children: clearIcon ? cloneElement8(clearIcon, {
             color: clearIconColor,
             size: resolvedIconSize
-          }) : /* @__PURE__ */ jsx25(Text13, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
+          }) : /* @__PURE__ */ jsx37(Text18, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
         }
-      ) : showRevealButton ? /* @__PURE__ */ jsx25(
-        Pressable12,
+      ) : showRevealButton ? /* @__PURE__ */ jsx37(
+        Pressable16,
         {
           accessibilityRole: "button",
           accessibilityLabel: isPasswordRevealed ? "Hide password" : "Show password",
           hitSlop: 8,
           onPress: () => setIsPasswordRevealed((revealed) => !revealed),
           style: styles.revealButton,
-          children: /* @__PURE__ */ jsx25(Text13, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
+          children: /* @__PURE__ */ jsx37(Text18, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
         }
-      ) : showRightIcon && endIcon && /* @__PURE__ */ jsx25(
-        View21,
+      ) : showRightIcon && endIcon && /* @__PURE__ */ jsx37(
+        View31,
         {
           pointerEvents: "none",
           style: styles.rightIcon,
           accessibilityElementsHidden: true,
           importantForAccessibility: "no",
-          children: cloneElement6(endIcon, {
+          children: cloneElement8(endIcon, {
             color: endIconColor,
             size: resolvedIconSize
           })
@@ -3319,7 +5025,7 @@ var Input = forwardRef3(
     if (!hasOwnField && field) {
       return control;
     }
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx37(
       FormField,
       {
         label,
@@ -3338,17 +5044,17 @@ var Input = forwardRef3(
 Input.displayName = "Input";
 
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect5 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect8 } from "react";
 import { useControllableState as useControllableState4 } from "@vellira-ui/core";
 import {
-  Pressable as Pressable13,
-  Text as Text14,
-  View as View22
+  Pressable as Pressable17,
+  Text as Text19,
+  View as View32
 } from "react-native";
 
 // src/primitives/Radio/Radio.styles.ts
-import { StyleSheet as StyleSheet24 } from "react-native";
-var createStyles24 = (theme) => StyleSheet24.create({
+import { StyleSheet as StyleSheet28 } from "react-native";
+var createStyles22 = (theme) => StyleSheet28.create({
   root: {
     alignSelf: "flex-start"
   },
@@ -3433,7 +5139,7 @@ var createStyles24 = (theme) => StyleSheet24.create({
 });
 
 // src/primitives/Radio/Radio.tsx
-import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var controlSizeBySize = {
   sm: 14,
   md: 16,
@@ -3468,7 +5174,7 @@ var Radio = forwardRef4(
     ...rest
   }, ref) => {
     const { theme } = useTheme();
-    const styles = createStyles24(theme);
+    const styles = createStyles22(theme);
     const group = useRadioGroupContext();
     const isInsideGroup = group !== null;
     const [standaloneChecked, setStandaloneChecked] = useControllableState4({
@@ -3507,7 +5213,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect5(() => {
+    useEffect8(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."
@@ -3536,9 +5242,9 @@ var Radio = forwardRef4(
       state.pressed && !resolvedDisabled && styles.pressablePressed,
       typeof style === "function" ? style(state) : style
     ];
-    return /* @__PURE__ */ jsxs15(View22, { style: [styles.root, containerStyle], children: [
-      /* @__PURE__ */ jsx26(
-        Pressable13,
+    return /* @__PURE__ */ jsxs23(View32, { style: [styles.root, containerStyle], children: [
+      /* @__PURE__ */ jsx38(
+        Pressable17,
         {
           ...rest,
           ref,
@@ -3552,9 +5258,9 @@ var Radio = forwardRef4(
           disabled: resolvedDisabled,
           onPress: handlePress,
           style: resolvePressableStyle,
-          children: (state) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
-            /* @__PURE__ */ jsx26(
-              View22,
+          children: (state) => /* @__PURE__ */ jsxs23(Fragment7, { children: [
+            /* @__PURE__ */ jsx38(
+              View32,
               {
                 pointerEvents: "none",
                 style: [
@@ -3577,8 +5283,8 @@ var Radio = forwardRef4(
                   resolvedDisabled && styles.controlDisabled,
                   resolvedChecked && resolvedDisabled && styles.controlCheckedDisabled
                 ],
-                children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx26(
-                  View22,
+                children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx38(
+                  View32,
                   {
                     style: [
                       styles.indicator,
@@ -3593,9 +5299,9 @@ var Radio = forwardRef4(
                 ))
               }
             ),
-            (label || description) && /* @__PURE__ */ jsxs15(View22, { pointerEvents: "none", style: styles.content, children: [
-              label && (typeof label === "string" ? /* @__PURE__ */ jsx26(
-                Text14,
+            (label || description) && /* @__PURE__ */ jsxs23(View32, { pointerEvents: "none", style: styles.content, children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx38(
+                Text19,
                 {
                   style: [
                     styles.label,
@@ -3616,8 +5322,8 @@ var Radio = forwardRef4(
                   children: label
                 }
               ) : label),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx26(
-                Text14,
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx38(
+                Text19,
                 {
                   style: [
                     styles.description,
@@ -3635,8 +5341,8 @@ var Radio = forwardRef4(
           ] })
         }
       ),
-      error && /* @__PURE__ */ jsx26(
-        Text14,
+      error && /* @__PURE__ */ jsx38(
+        Text19,
         {
           accessibilityLiveRegion: "polite",
           style: [