@vellira-ui/react-native 2.31.0 → 2.32.0

package/dist/index.js

@@ -60,9 +60,9 @@ 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
@@ -1055,6 +1055,8 @@ function FormField({
     labelId,
     descriptionId,
     errorId,
+    description,
+    error,
     required,
     disabled,
     invalid: isInvalid,
@@ -1286,184 +1288,1523 @@ 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 useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { FlatList, Pressable as Pressable10, Text as Text11, View as View21 } from "react-native";
 
-// 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/Group/SelectGroup.tsx
+import { Pressable as Pressable6, Text as Text7 } from "react-native";
+
+// src/components/Select/internal/SelectCollection.ts
+import { Children as Children2, isValidElement as isValidElement4 } from "react";
+
+// src/components/Select/internal/types.ts
+var selectSlotName = /* @__PURE__ */ Symbol("VelliraNativeSelectSlot");
+
+// 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;
+  Children2.forEach(props.children, (child) => {
+    if (label || !isValidElement4(child)) return;
+    if (getSelectSlot(child.type) === "label") {
+      label = getTextFromNode(child.props.children);
+    }
+  });
+  return label;
+};
+var getGroupItemValues = (children) => {
+  const values = [];
+  const visit = (node) => {
+    Children2.forEach(node, (child) => {
+      if (!isValidElement4(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) => {
+    Children2.forEach(node, (child) => {
+      if (!isValidElement4(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,
+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"
+  },
+  groupAction: {
+    minHeight: 36,
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
+    gap: theme.tokens.spacing[2],
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingTop: theme.tokens.spacing[4],
+    paddingBottom: theme.tokens.spacing[1]
+  },
+  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"
+  },
+  groupActionMeta: {
+    color: theme.components.select.option.default.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: theme.tokens.spacing[3],
+    marginVertical: theme.tokens.spacing[2],
+    backgroundColor: theme.components.select.dropdown.separator.bg
+  }
+});
+
+// src/components/Select/Group/SelectGroup.tsx
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var SelectGroup = createSelectSlot(
+  "group",
+  "Select.Group"
+);
+var SelectGroupLabelRow = ({ label }) => {
+  const styles = useThemeStyles(createGroupStyles);
+  return /* @__PURE__ */ jsx16(Text7, { style: styles.groupLabel, children: label });
+};
+var SelectGroupActionRow = ({
+  label,
+  selectLabel,
+  selectedCount,
+  itemCount,
+  onPress
+}) => {
+  const styles = useThemeStyles(createGroupStyles);
+  const isSelected = itemCount > 0 && selectedCount === itemCount;
+  const isMixed = selectedCount > 0 && selectedCount < itemCount;
+  const resolvedLabel = selectLabel ?? label;
+  return /* @__PURE__ */ jsxs8(
+    Pressable6,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedLabel,
+      accessibilityHint: `Selects all options in ${label}`,
+      accessibilityState: {
+        selected: isSelected,
+        checked: isMixed ? "mixed" : isSelected,
+        disabled: itemCount === 0
+      },
+      disabled: itemCount === 0,
+      onPress,
+      style: styles.groupAction,
+      children: [
+        /* @__PURE__ */ jsx16(Text7, { style: styles.groupActionText, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs8(Text7, { 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 isValidElement5 } from "react";
+import { Check } from "@vellira-ui/icons";
+import { Pressable as Pressable7, Text as Text8, 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",
-    paddingHorizontal: theme.tokens.spacing[4],
-    paddingVertical: theme.tokens.spacing[3],
-    backgroundColor: theme.components.select.trigger.default.bg,
-    borderColor: theme.components.select.trigger.default.border,
+    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
+    borderWidth: 1,
+    borderColor: "transparent"
   },
-  sm: {
-    minHeight: 36,
-    paddingHorizontal: theme.tokens.spacing[3],
-    paddingVertical: theme.tokens.spacing[2]
+  optionDisabled: {
+    opacity: 0.55
   },
-  md: {
-    minHeight: 44,
-    paddingHorizontal: theme.tokens.spacing[4],
-    paddingVertical: theme.tokens.spacing[3]
+  optionIcon: {
+    width: 22,
+    minWidth: 22,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  lg: {
-    minHeight: 52,
-    paddingHorizontal: theme.tokens.spacing[5],
-    paddingVertical: theme.tokens.spacing[4]
+  optionTextWrap: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
   },
-  textSm: {
+  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
   },
-  textMd: {
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
+  badge: {
+    paddingHorizontal: theme.tokens.spacing[2],
+    paddingVertical: 2,
+    borderRadius: 999,
+    borderWidth: 1
   },
-  textLg: {
-    fontSize: theme.tokens.typography.size.lg,
-    lineHeight: theme.tokens.typography.lineHeight.lg
+  badgeText: {
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    lineHeight: theme.tokens.typography.lineHeight.xs
   },
-  triggerOpen: {
-    backgroundColor: theme.components.select.trigger.focus.bg,
-    borderColor: theme.components.select.trigger.focus.border,
-    borderWidth: 2
+  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(Text8, { style: textStyle, children: node });
+  }
+  if (isValidElement5(node) && node.type === Text8) {
+    return cloneElement4(node, {
+      style: [textStyle, node.props.style]
+    });
+  }
+  return node ?? (fallback ? /* @__PURE__ */ jsx18(Text8, { 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 optionState = isSelected ? theme.components.select.option.selected : optionPalette.hover;
+  const optionFg = isDisabled ? theme.components.select.option.disabled.fg : isSelected ? optionState.fg : theme.components.select.option.default.fg;
+  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: [
+        styles.option,
+        {
+          backgroundColor: isSelected ? optionState.bg : theme.components.select.option.default.bg,
+          borderColor: isSelected ? optionState.border : "transparent"
+        },
+        isDisabled && styles.optionDisabled,
+        optionStyle
+      ],
+      children: 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: isValidElement5(option.icon) ? cloneElement4(
+          option.icon,
+          {
+            color: optionFg,
+            size: 18
+          }
+        ) : option.icon }),
+        /* @__PURE__ */ jsxs9(View13, { style: styles.optionTextWrap, children: [
+          /* @__PURE__ */ jsx18(
+            Text8,
+            {
+              numberOfLines: 1,
+              style: [styles.optionLabel, { color: optionFg }],
+              children: option.label
+            }
+          ),
+          option.description && /* @__PURE__ */ jsx18(Text8, { numberOfLines: 2, style: styles.optionDescription, 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
   },
-  triggerError: {
-    borderColor: theme.components.select.trigger.error.border
+  sheetRoot: {
+    justifyContent: "flex-end"
   },
-  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
+  modalPresentationRoot: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
   },
-  textOpen: {
-    color: theme.components.select.trigger.focus.fg
+  popoverRoot: {
+    padding: theme.tokens.spacing[4]
   },
-  triggerDisabled: {
-    backgroundColor: theme.components.select.trigger.disabled.bg,
-    borderColor: theme.components.select.trigger.disabled.border
+  popoverRootTop: {
+    justifyContent: "flex-start"
   },
-  text: {
-    flex: 1,
-    minWidth: 0,
-    color: theme.components.select.trigger.default.fg,
-    fontFamily: theme.tokens.typography.family.regular
+  popoverRootBottom: {
+    justifyContent: "flex-end"
   },
-  textDisabled: {
-    color: theme.components.select.trigger.disabled.fg
+  backdrop: {
+    ...StyleSheet16.absoluteFill,
+    backgroundColor: theme.semantic.overlay.backdrop
   },
-  placeholder: {
-    color: theme.components.select.trigger.placeholder.fg
+  content: {
+    overflow: "hidden",
+    backgroundColor: theme.components.select.dropdown.bg,
+    borderColor: theme.components.select.dropdown.border,
+    borderWidth: 1
   },
-  icon: {
-    width: 16,
-    height: 16,
-    marginLeft: theme.tokens.spacing[2],
+  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",
-    justifyContent: "center"
+    paddingTop: theme.tokens.spacing[3]
   },
-  iconOpen: {
-    transform: [{ rotate: "180deg" }]
+  handle: {
+    width: 44,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: theme.semantic.border.muted
   }
 });
 
-// src/components/Select/SelectTrigger/SelectTrigger.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,
-  onPress
-}) {
-  const { theme } = useTheme();
-  const styles = useThemeStyles(createStyles14);
+// 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 Text9, 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(Text9, { 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 Text10, 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(Text10, { 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 useEffect2 } 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.semantic.status.error.bg
+  }
+});
+
+// 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;
+  useEffect2(() => {
+    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.semantic.status.error.fg
+          }
+        )
+      }
+    )
+  ] });
+};
+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 = useRef2(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;
+  useEffect3(() => {
+    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(Text11, { style: styles.cancelText, children: "Cancel" })
+            }
+          ),
+          /* @__PURE__ */ jsx27(Text11, { 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(Text11, { style: styles.doneText, children: "Done" })
+            }
+          )
+        ]
+      }
+    ),
+    searchable && /* @__PURE__ */ jsx27(SelectSearchField, {}),
+    loading && filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectLoadingState, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectEmptyState, {}) : /* @__PURE__ */ jsx27(
+      FlatList,
+      {
+        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 useRef3, 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 } 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) => {
+      AccessibilityInfo.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 } from "react-native";
+var useSelectPresentation = (presentation = "auto") => {
+  const { width } = useWindowDimensions();
+  if (presentation === "auto") {
+    return width >= 768 ? "popover" : "sheet";
+  }
+  return presentation;
+};
+
+// src/components/Select/internal/useSelectSearch.ts
+import { useEffect as useEffect4, 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]);
+  useEffect4(() => {
+    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 isValidElement6 } from "react";
+import { ChevronDown as ChevronDown2, Close as Close3 } from "@vellira-ui/icons";
+import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable11, Text as Text12, 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.semantic.status.error.bg
+  }
+});
+
+// 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 picker" : required ? "Required. Opens a picker" : "Opens a picker");
-  return /* @__PURE__ */ jsxs8(
-    Pressable6,
+  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) => isValidElement6(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(Text12, { numberOfLines: 1, style: valueStyle, children: displayText });
+    }
+    if (isValidElement6(displayText) && displayText.type === Text12) {
+      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
+        disabled,
+        selected: hasValue,
+        busy: loading
       },
       onPress,
       style: [
         styles.trigger,
+        {
+          backgroundColor: triggerState.bg,
+          borderColor: triggerState.border
+        },
         styles[size],
-        isOpen && styles.triggerOpen,
-        hasError && styles.triggerError,
-        disabled && styles.triggerDisabled,
+        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(Text12, { style: styles.affix, children: prefix }),
+        /* @__PURE__ */ jsx28(View22, { style: styles.value, children: renderValue() }),
+        suffix && /* @__PURE__ */ jsx28(Text12, { 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.semantic.status.error.fg
               }
             )
           }
+        ) : 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 +2812,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 = useRef3(null);
+  const selectedFocusValueRef = useRef3(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 +3185,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 +3212,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 +3233,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 +3264,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 +3284,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 isValidElement7 } from "react";
+import { Pressable as Pressable12, Text as Text13, 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 +3408,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 +3418,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 +3426,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 = isValidElement7(icon) ? cloneElement6(icon, {
     color: iconColor
   }) : icon;
-  return /* @__PURE__ */ jsx20(
-    Pressable8,
+  return /* @__PURE__ */ jsx32(
+    Pressable12,
     {
       disabled,
       accessibilityRole: "tab",
@@ -2028,9 +3450,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 +3461,8 @@ var Tab = ({
             ]
           }
         ),
-        isUnderline && isVertical && /* @__PURE__ */ jsx20(
-          View16,
+        isUnderline && isVertical && /* @__PURE__ */ jsx32(
+          View26,
           {
             pointerEvents: "none",
             style: [
@@ -2050,9 +3472,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(
+          Text13,
           {
             numberOfLines: 2,
             ellipsizeMode: "tail",
@@ -2073,13 +3495,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 +3516,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 +3526,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 +3559,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 useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { Modal as Modal6, Pressable as Pressable13, Text as Text14, 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 useRef4, 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 = useRef4({
     width: 0,
     height: 0
   });
-  const lastTriggerRef = useRef2(null);
+  const lastTriggerRef = useRef4(null);
   const clamp = useCallback2((value, min, max) => {
     return Math.min(Math.max(value, min), Math.max(min, max));
   }, []);
@@ -2207,13 +3629,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 +3667,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 +3679,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 = useRef5(null);
+  const closeTimerRef = useRef5(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
   const hideDelay = delay?.close ?? 2500;
   const clearCloseTimer = () => {
@@ -2279,21 +3701,21 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect3(() => {
+  useEffect5(() => {
     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 +3728,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(Text14, { style: [styles.text, textStyle], children: content }) : content
           }
         )
       }
@@ -2316,8 +3738,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 Text15, View as View29 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -2327,9 +3749,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 +3816,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 +3868,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 +3900,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 +3911,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 +3948,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(
+              Text15,
               {
                 onLayout: handleLabelLayout,
                 style: [
@@ -2546,8 +3968,8 @@ function Button({
                 children: content
               }
             ),
-            measureLabel && /* @__PURE__ */ jsx23(
-              Text11,
+            measureLabel && /* @__PURE__ */ jsx35(
+              Text15,
               {
                 accessibilityElementsHidden: true,
                 importantForAccessibility: "no-hide-descendants",
@@ -2564,8 +3986,8 @@ function Button({
               }
             )
           ] }),
-          badge && !iconOnly && /* @__PURE__ */ jsx23(
-            Text11,
+          badge && !iconOnly && /* @__PURE__ */ jsx35(
+            Text15,
             {
               style: [
                 styles.badge,
@@ -2577,8 +3999,8 @@ function Button({
               children: badge
             }
           ),
-          shortcut && !iconOnly && /* @__PURE__ */ jsx23(
-            Text11,
+          shortcut && !iconOnly && /* @__PURE__ */ jsx35(
+            Text15,
             {
               style: [
                 styles.shortcut,
@@ -2597,14 +4019,14 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect4 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect6 } 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 Text16, 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 +4169,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 +4197,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 +4227,15 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect4(() => {
+    useEffect6(() => {
       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 +4258,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 +4277,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 +4287,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(
+                Text16,
                 {
                   style: [
                     styles.label,
@@ -2882,7 +4304,7 @@ var Checkbox = forwardRef2(
                   ],
                   children: [
                     label,
-                    required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
+                    required && /* @__PURE__ */ jsx36(Text16, { style: styles.requiredMark, children: " *" })
                   ]
                 }
               )
@@ -2890,8 +4312,8 @@ var Checkbox = forwardRef2(
           }
         }
       ),
-      description && /* @__PURE__ */ jsx24(
-        Text12,
+      description && /* @__PURE__ */ jsx36(
+        Text16,
         {
           style: [
             styles.descriptionText,
@@ -2901,21 +4323,21 @@ var Checkbox = forwardRef2(
           children: description
         }
       ),
-      hasError && /* @__PURE__ */ jsx24(Text12, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
+      hasError && /* @__PURE__ */ jsx36(Text16, { 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 Text17, 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 +4481,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 +4579,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 +4600,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 +4631,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 +4701,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(Text17, { 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(Text17, { 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 +4741,7 @@ var Input = forwardRef3(
     if (!hasOwnField && field) {
       return control;
     }
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx37(
       FormField,
       {
         label,
@@ -3338,17 +4760,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 useEffect7 } 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 Text18,
+  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 +4855,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 +4890,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 +4929,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect5(() => {
+    useEffect7(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."
@@ -3536,9 +4958,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 +4974,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 +4999,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 +5015,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(
+                Text18,
                 {
                   style: [
                     styles.label,
@@ -3616,8 +5038,8 @@ var Radio = forwardRef4(
                   children: label
                 }
               ) : label),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx26(
-                Text14,
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx38(
+                Text18,
                 {
                   style: [
                     styles.description,
@@ -3635,8 +5057,8 @@ var Radio = forwardRef4(
           ] })
         }
       ),
-      error && /* @__PURE__ */ jsx26(
-        Text14,
+      error && /* @__PURE__ */ jsx38(
+        Text18,
         {
           accessibilityLiveRegion: "polite",
           style: [