@vellira-ui/react-native 2.32.0 → 2.34.0

package/dist/index.js

@@ -1,5 +1,13 @@
 // src/components/Dropdown/Content/DropdownContent.tsx
-import { Modal, Pressable, View } from "react-native";
+import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
+import {
+  AccessibilityInfo,
+  Animated,
+  Modal,
+  Pressable,
+  StyleSheet as StyleSheet2,
+  View
+} from "react-native";
 
 // src/theme/ThemeProvider.tsx
 import { useMemo } from "react";
@@ -69,9 +77,21 @@ function useThemeStyles(createStyles23) {
 import { StyleSheet } from "react-native";
 var createStyles = (theme) => StyleSheet.create({
   modalRoot: {
-    flex: 1,
+    flex: 1
+  },
+  sheet: {
     justifyContent: "flex-end"
   },
+  modal: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
+  popover: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.tokens.spacing[4]
+  },
   backdrop: {
     ...StyleSheet.absoluteFill,
     backgroundColor: theme.semantic.overlay.backdrop
@@ -93,6 +113,24 @@ var createStyles = (theme) => StyleSheet.create({
     shadowOpacity: 0.24,
     shadowRadius: 16,
     elevation: 12
+  },
+  sheetMenu: {
+    width: "100%",
+    maxHeight: "70%",
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg
+  },
+  modalMenu: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "70%",
+    borderRadius: theme.tokens.radius.lg
+  },
+  popoverMenu: {
+    width: "100%",
+    maxWidth: 360,
+    maxHeight: "60%",
+    borderRadius: theme.tokens.radius.md
   }
 });
 
@@ -103,32 +141,97 @@ function DropdownContent({
   children,
   onClose,
   contentStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  presentation
 }) {
   const styles = useThemeStyles(createStyles);
+  const isSheet = presentation === "sheet";
+  const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  const [reduceMotion, setReduceMotion] = useState(false);
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
+    const subscription = AccessibilityInfo.addEventListener?.(
+      "reduceMotionChanged",
+      setReduceMotion
+    );
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+  useEffect(() => {
+    if (!isOpen) {
+      animation.setValue(0);
+      return;
+    }
+    if (reduceMotion) {
+      animation.setValue(1);
+      return;
+    }
+    animation.setValue(0);
+    Animated.timing(animation, {
+      toValue: 1,
+      duration: isSheet ? 220 : 160,
+      useNativeDriver: true
+    }).start();
+  }, [animation, isOpen, isSheet, reduceMotion]);
+  const backdropAnimatedStyle = useMemo3(
+    () => ({
+      opacity: animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1]
+      })
+    }),
+    [animation]
+  );
+  const menuAnimatedStyle = useMemo3(() => {
+    const translateY = animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: isSheet ? [24, 0] : [-6, 0]
+    });
+    const scale = animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: isSheet ? [1, 1] : [0.98, 1]
+    });
+    return {
+      opacity: animation,
+      transform: [{ translateY }, { scale }]
+    };
+  }, [animation, isSheet]);
   return /* @__PURE__ */ jsx2(
     Modal,
     {
       transparent: true,
       visible: isOpen,
-      animationType: "slide",
+      animationType: "none",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxs(View, { style: styles.modalRoot, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: [styles.modalRoot, styles[presentation]], children: [
         /* @__PURE__ */ jsx2(
-          Pressable,
+          Animated.View,
           {
-            accessibilityRole: "button",
-            accessibilityLabel: "Close menu",
-            style: styles.backdrop,
-            onPress: onClose
+            pointerEvents: "box-none",
+            style: [styles.backdrop, backdropAnimatedStyle],
+            children: /* @__PURE__ */ jsx2(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: "Close menu",
+                style: StyleSheet2.absoluteFill,
+                onPress: onClose
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx2(
-          View,
+          Animated.View,
           {
             accessibilityRole: "menu",
             accessibilityLabel,
-            style: [styles.menu, contentStyle],
+            style: [
+              styles.menu,
+              styles[`${presentation}Menu`],
+              contentStyle,
+              menuAnimatedStyle
+            ],
             children
           }
         )
@@ -139,16 +242,23 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useCallback, useMemo as useMemo3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
 import { useDropdown } from "@vellira-ui/core";
-import { View as View4 } from "react-native";
+import {
+  AccessibilityInfo as AccessibilityInfo2,
+  findNodeHandle,
+  FlatList,
+  Text as Text4,
+  useWindowDimensions,
+  View as View4
+} from "react-native";
 
 // src/components/Dropdown/Group/DropdownGroup.tsx
 import { Text } from "react-native";
 
 // src/components/Dropdown/Group/DropdownGroup.styles.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var createStyles2 = (theme) => StyleSheet2.create({
+import { StyleSheet as StyleSheet3 } from "react-native";
+var createStyles2 = (theme) => StyleSheet3.create({
   groupLabel: {
     paddingHorizontal: theme.tokens.spacing[4],
     paddingVertical: theme.tokens.spacing[2],
@@ -168,15 +278,108 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 
+// src/components/Dropdown/internal/DropdownCollection.ts
+import { Children, isValidElement } from "react";
+function createDropdownSlot(name, displayName) {
+  const Slot = () => null;
+  Slot.__velliraDropdownPart = name;
+  Slot.displayName = displayName;
+  return Slot;
+}
+function parseDropdownChildren(children) {
+  let generatedId = 0;
+  let trigger;
+  let triggerProps;
+  let contentProps;
+  const entries = [];
+  const items = [];
+  const nextId = (prefix) => `${prefix}-${generatedId++}`;
+  function pushItem(props) {
+    const entry = {
+      type: "item",
+      id: nextId("item"),
+      props,
+      label: getItemLabel(props.children) || props.value || "",
+      disabled: props.disabled
+    };
+    items.push(entry);
+    entries.push(entry);
+  }
+  function visit(node) {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) return;
+      const type = child.type;
+      switch (type.__velliraDropdownPart) {
+        case "trigger":
+          triggerProps = child.props;
+          trigger = triggerProps.children;
+          return;
+        case "content":
+          contentProps = child.props;
+          visit(contentProps.children);
+          return;
+        case "group":
+          visit(child.props.children);
+          return;
+        case "label":
+          entries.push({
+            type: "label",
+            id: nextId("label"),
+            props: child.props
+          });
+          return;
+        case "separator":
+          entries.push({
+            type: "separator",
+            id: nextId("separator"),
+            props: child.props
+          });
+          return;
+        case "empty":
+          entries.push({
+            type: "empty",
+            id: nextId("empty"),
+            props: child.props
+          });
+          return;
+        case "loading":
+          entries.push({
+            type: "loading",
+            id: nextId("loading"),
+            props: child.props
+          });
+          return;
+        case "item":
+          pushItem(child.props);
+          return;
+        default:
+          visit(child.props.children);
+      }
+    });
+  }
+  visit(children);
+  return { contentProps, entries, items, trigger, triggerProps };
+}
+function getItemLabel(children) {
+  const labelParts = [];
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      labelParts.push(String(child));
+    }
+  });
+  return labelParts.join("").trim();
+}
+
 // src/components/Dropdown/Item/DropdownItem.tsx
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement as isValidElement2 } from "react";
 import { Pressable as Pressable2, Text as Text2 } from "react-native";
 
 // src/components/Dropdown/Item/DropdownItem.styles.ts
-import { StyleSheet as StyleSheet3 } from "react-native";
-var createStyles3 = (theme) => StyleSheet3.create({
+import { StyleSheet as StyleSheet4 } from "react-native";
+var createStyles3 = (theme) => StyleSheet4.create({
   item: {
     minWidth: 0,
+    minHeight: 44,
     alignItems: "center",
     flexDirection: "row",
     gap: theme.tokens.spacing[4],
@@ -235,7 +438,7 @@ function DropdownItem({
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles3);
   const renderColoredNode = (node, color) => {
-    if (!isValidElement(node)) return node;
+    if (!isValidElement2(node)) return node;
     return cloneElement(node, { color });
   };
   const getContentColor = (pressed) => {
@@ -301,8 +504,8 @@ DropdownItem.displayName = "DropdownItem";
 import { View as View2 } from "react-native";
 
 // src/components/Dropdown/Separator/DropdownSeparator.styles.ts
-import { StyleSheet as StyleSheet4 } from "react-native";
-var createStyles4 = (theme) => StyleSheet4.create({
+import { StyleSheet as StyleSheet5 } from "react-native";
+var createStyles4 = (theme) => StyleSheet5.create({
   separator: {
     height: 1,
     backgroundColor: theme.components.dropdown.separator.bg
@@ -320,17 +523,17 @@ DropdownSeparator.displayName = "DropdownSeparator";
 // src/components/Dropdown/Trigger/DropdownTrigger.tsx
 import {
   cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
-  useEffect,
-  useRef,
-  useState
+  isValidElement as isValidElement3,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 import { ChevronDown } from "@vellira-ui/icons";
-import { Animated, Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
+import { Animated as Animated2, Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
 
 // src/components/Dropdown/Trigger/DropdownTrigger.styles.ts
-import { StyleSheet as StyleSheet5 } from "react-native";
-var createStyles5 = (theme) => StyleSheet5.create({
+import { StyleSheet as StyleSheet6 } from "react-native";
+var createStyles5 = (theme) => StyleSheet6.create({
   trigger: {
     alignItems: "center",
     justifyContent: "center",
@@ -431,6 +634,7 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownTrigger({
   label,
   trigger,
+  children,
   icon,
   arrowIcon,
   showArrow = true,
@@ -438,6 +642,7 @@ function DropdownTrigger({
   disabled = false,
   isOpen,
   triggerStyle,
+  triggerRef,
   accessibilityLabel,
   accessibilityHint,
   onPress
@@ -456,10 +661,10 @@ function DropdownTrigger({
   }[size];
   const hasIcon = Boolean(icon);
   const isIconOnly = !trigger && hasIcon && !showArrow;
-  const [isPressed, setIsPressed] = useState(false);
-  const rotateAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(rotateAnim, {
+  const [isPressed, setIsPressed] = useState2(false);
+  const rotateAnim = useRef2(new Animated2.Value(isOpen ? 1 : 0)).current;
+  useEffect2(() => {
+    Animated2.timing(rotateAnim, {
       toValue: isOpen ? 1 : 0,
       duration: 180,
       useNativeDriver: true
@@ -485,15 +690,34 @@ function DropdownTrigger({
         }
       );
     }
-    if (!isValidElement2(node)) return node;
+    if (!isValidElement3(node)) return node;
     return cloneElement2(node, { color });
   };
   const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? theme.components.dropdown.trigger.hover.fg : theme.components.dropdown.trigger.default.fg;
   const arrow = arrowIcon ? renderColoredNode(arrowIcon, contentColor) : /* @__PURE__ */ jsx6(ChevronDown, { width: 16, height: 16, color: contentColor });
   const renderedIcon = icon ? renderColoredNode(icon, contentColor) : null;
+  const triggerContent = trigger ?? children;
+  if (isValidElement3(triggerContent)) {
+    const child = triggerContent;
+    const isChildDisabled = disabled || child.props.disabled;
+    return cloneElement2(child, {
+      ref: triggerRef,
+      disabled: isChildDisabled,
+      accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+      accessibilityHint,
+      accessibilityState: { expanded: isOpen, disabled: isChildDisabled },
+      onPress: () => {
+        child.props.onPress?.();
+        if (!isChildDisabled) {
+          onPress();
+        }
+      }
+    });
+  }
   return /* @__PURE__ */ jsxs3(
     Pressable3,
     {
+      ref: triggerRef,
       disabled,
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
@@ -513,7 +737,7 @@ function DropdownTrigger({
       ],
       children: [
         hasIcon && /* @__PURE__ */ jsx6(View3, { style: styles.icon, children: renderedIcon }),
-        !isIconOnly && (trigger ? renderColoredNode(trigger, contentColor) : /* @__PURE__ */ jsx6(
+        !isIconOnly && (triggerContent ? renderColoredNode(triggerContent, contentColor) : /* @__PURE__ */ jsx6(
           Text3,
           {
             numberOfLines: 1,
@@ -527,7 +751,7 @@ function DropdownTrigger({
           }
         )),
         showArrow && /* @__PURE__ */ jsx6(
-          Animated.View,
+          Animated2.View,
           {
             style: [styles.arrow, { transform: [{ rotate: arrowRotate }] }],
             children: arrow
@@ -540,32 +764,39 @@ function DropdownTrigger({
 DropdownTrigger.displayName = "DropdownTrigger";
 
 // src/components/Dropdown/Dropdown.styles.ts
-import { StyleSheet as StyleSheet6 } from "react-native";
-var createStyles6 = () => StyleSheet6.create({
+import { StyleSheet as StyleSheet7 } from "react-native";
+var createStyles6 = (theme) => StyleSheet7.create({
   root: {
     alignSelf: "flex-start"
+  },
+  emptyText: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[3],
+    color: theme.components.dropdown.item.disabled.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   }
 });
 
-// src/components/Dropdown/types.ts
-var isMenuItem = (item) => item.type === void 0 || item.type === "item";
-var isGroup = (item) => item.type === "group";
-var isSeparator = (item) => item.type === "separator";
-
 // src/components/Dropdown/Dropdown.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function Dropdown({
+function DropdownRoot({
+  children,
   label = "Menu",
   trigger,
   icon,
   arrowIcon,
   showArrow = true,
-  items,
-  onSelect,
   open,
   defaultOpen = false,
   onOpenChange,
+  presentation = "auto",
+  closeOnSelect = true,
   disabled = false,
+  loading = false,
+  loadingText = "Loading actions...",
   size = "md",
   style,
   triggerStyle,
@@ -576,13 +807,21 @@ function Dropdown({
   accessibilityHint
 }) {
   const styles = useThemeStyles(createStyles6);
-  const menuAccessibilityLabel = useMemo3(() => {
+  const { width } = useWindowDimensions();
+  const triggerRef = useRef3(null);
+  const parsed = useMemo4(() => parseDropdownChildren(children), [children]);
+  const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
+  const menuAccessibilityLabel = useMemo4(() => {
     if (accessibilityLabel) return accessibilityLabel;
     return typeof label === "string" ? label : "Menu";
   }, [accessibilityLabel, label]);
-  const navigableItems = useMemo3(
-    () => items.filter((item) => isMenuItem(item)),
-    [items]
+  const navigableItems = useMemo4(
+    () => parsed.items.map((item) => ({
+      disabled: item.disabled,
+      label: item.label,
+      value: item.id
+    })),
+    [parsed.items]
   );
   const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
     items: navigableItems,
@@ -590,32 +829,96 @@ function Dropdown({
     defaultOpen,
     disabled,
     onOpenChange,
-    onSelect,
     getItemValue: (item) => item.value,
     getItemText: (item) => typeof item.label === "string" ? item.label : item.value
   });
+  useEffect3(() => {
+    if (!isOpen) return;
+    AccessibilityInfo2.announceForAccessibility(
+      `${menuAccessibilityLabel} opened`
+    );
+  }, [isOpen, menuAccessibilityLabel]);
+  const focusTrigger = useCallback(() => {
+    if (typeof findNodeHandle !== "function") return;
+    const handle = findNodeHandle(triggerRef.current);
+    if (handle && AccessibilityInfo2.setAccessibilityFocus) {
+      AccessibilityInfo2.setAccessibilityFocus(handle);
+    }
+  }, []);
+  const closeAndFocusTrigger = useCallback(() => {
+    closeDropdown();
+    requestAnimationFrame(focusTrigger);
+  }, [closeDropdown, focusTrigger]);
   const handleSelect = useCallback(
-    (value) => {
-      onSelect?.(value);
-      closeDropdown();
+    (entry) => {
+      if (entry.disabled || loading) return;
+      const event = createDropdownSelectEvent();
+      entry.props.onSelect?.(event);
+      const shouldClose = entry.props.closeOnSelect ?? closeOnSelect;
+      if (!event.defaultPrevented && shouldClose) {
+        closeAndFocusTrigger();
+      }
     },
-    [closeDropdown, onSelect]
+    [closeAndFocusTrigger, closeOnSelect, loading]
   );
   const handleTriggerPress = useCallback(() => {
     toggleDropdown();
   }, [toggleDropdown]);
+  const renderEntry = useCallback(
+    ({ item }) => {
+      if (item.type === "label") {
+        return /* @__PURE__ */ jsx7(DropdownGroup, { label: item.props.children });
+      }
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsx7(DropdownSeparator, {});
+      }
+      if (item.type === "empty") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      if (item.type === "loading") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      return /* @__PURE__ */ jsx7(
+        DropdownItem,
+        {
+          label: item.props.children,
+          value: item.props.value ?? item.id,
+          icon: item.props.icon,
+          danger: item.props.danger,
+          disabled: item.props.disabled,
+          textWrap: item.props.textWrap,
+          itemStyle,
+          textStyle,
+          onSelect: () => handleSelect(item)
+        }
+      );
+    },
+    [handleSelect, itemStyle, styles.emptyText, textStyle]
+  );
+  const data = loading ? [
+    {
+      type: "loading",
+      id: "loading",
+      props: { children: loadingText }
+    }
+  ] : parsed.entries;
+  const contentStyleFromSlot = parsed.contentProps?.style;
+  const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
   return /* @__PURE__ */ jsxs4(View4, { style: [styles.root, style], children: [
     /* @__PURE__ */ jsx7(
       DropdownTrigger,
       {
         label,
-        trigger,
+        trigger: trigger ?? parsed.trigger,
         icon,
         arrowIcon,
         showArrow,
-        disabled,
+        disabled: disabled || parsed.triggerProps?.disabled,
         isOpen,
         size,
+        triggerRef: (node) => {
+          triggerRef.current = node;
+        },
         triggerStyle,
         accessibilityLabel,
         accessibilityHint,
@@ -626,54 +929,86 @@ function Dropdown({
       DropdownContent,
       {
         isOpen,
-        onClose: closeDropdown,
-        contentStyle,
+        onClose: closeAndFocusTrigger,
+        contentStyle: [contentStyle, contentStyleFromSlot],
         accessibilityLabel: menuAccessibilityLabel,
-        children: items.map((item, index) => {
-          if (isGroup(item)) {
-            return /* @__PURE__ */ jsx7(
-              DropdownGroup,
-              {
-                label: item.label
-              },
-              `group-${item.label}-${index}`
-            );
-          }
-          if (isSeparator(item)) {
-            return /* @__PURE__ */ jsx7(DropdownSeparator, {}, `separator-${index}`);
-          }
-          if (!isMenuItem(item)) {
-            return null;
+        presentation: presentationFromSlot ?? resolvedPresentation,
+        children: /* @__PURE__ */ jsx7(
+          FlatList,
+          {
+            data,
+            keyExtractor: (item) => item.id,
+            renderItem: renderEntry,
+            keyboardShouldPersistTaps: "handled",
+            removeClippedSubviews: data.length > 24
           }
-          return /* @__PURE__ */ jsx7(
-            DropdownItem,
-            {
-              label: item.label,
-              value: item.value,
-              icon: item.icon,
-              danger: item.danger,
-              disabled: item.disabled,
-              textWrap: item.textWrap,
-              itemStyle,
-              textStyle,
-              onSelect: handleSelect
-            },
-            `${item.value}-${index}`
-          );
-        })
+        )
       }
     )
   ] });
 }
-Dropdown.displayName = "Dropdown";
+DropdownRoot.displayName = "Dropdown";
+function createDropdownSelectEvent() {
+  let defaultPrevented = false;
+  return {
+    preventDefault: () => {
+      defaultPrevented = true;
+    },
+    get defaultPrevented() {
+      return defaultPrevented;
+    }
+  };
+}
+var DropdownTriggerSlot = createDropdownSlot(
+  "trigger",
+  "Dropdown.Trigger"
+);
+var DropdownContentSlot = createDropdownSlot(
+  "content",
+  "Dropdown.Content"
+);
+var DropdownItemSlot = createDropdownSlot(
+  "item",
+  "Dropdown.Item"
+);
+var DropdownGroupSlot = createDropdownSlot(
+  "group",
+  "Dropdown.Group"
+);
+var DropdownLabelSlot = createDropdownSlot(
+  "label",
+  "Dropdown.Label"
+);
+var DropdownSeparatorSlot = createDropdownSlot(
+  "separator",
+  "Dropdown.Separator"
+);
+var DropdownEmptySlot = createDropdownSlot(
+  "empty",
+  "Dropdown.Empty"
+);
+var DropdownLoadingSlot = createDropdownSlot(
+  "loading",
+  "Dropdown.Loading"
+);
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTriggerSlot,
+  Content: DropdownContentSlot,
+  Item: DropdownItemSlot,
+  Group: DropdownGroupSlot,
+  Label: DropdownLabelSlot,
+  Separator: DropdownSeparatorSlot,
+  Empty: DropdownEmptySlot,
+  Loading: DropdownLoadingSlot
+});
 
 // src/components/Modal/Body/ModalBody.tsx
-import { Children, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
-import { Text as Text4, View as View5 } from "react-native";
+import { Children as Children2, cloneElement as cloneElement3, isValidElement as isValidElement4 } from "react";
+import { Text as Text5, View as View5 } from "react-native";
 
 // src/components/Modal/Body/ModalBody.styles.ts
-import { StyleSheet as StyleSheet7 } from "react-native";
-var createStyles7 = (theme) => StyleSheet7.create({
+import { StyleSheet as StyleSheet8 } from "react-native";
+var createStyles7 = (theme) => StyleSheet8.create({
   body: {
     paddingBottom: theme.tokens.spacing[4]
   },
@@ -693,10 +1028,10 @@ var createStyles7 = (theme) => StyleSheet7.create({
 
 // src/components/Modal/Body/ModalBody.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var isTextElement = (child) => isValidElement3(child) && child.type === Text4;
-var renderBodyChildren = (children, textStyle) => Children.map(children, (child) => {
+var isTextElement = (child) => isValidElement4(child) && child.type === Text5;
+var renderBodyChildren = (children, textStyle) => Children2.map(children, (child) => {
   if (typeof child === "string" || typeof child === "number") {
-    return /* @__PURE__ */ jsx8(Text4, { style: textStyle, children: child });
+    return /* @__PURE__ */ jsx8(Text5, { style: textStyle, children: child });
   }
   if (!isTextElement(child)) {
     return child;
@@ -715,8 +1050,8 @@ ModalBody.displayName = "ModalBody";
 import { View as View6 } from "react-native";
 
 // src/components/Modal/Content/ModalContent.styles.ts
-import { StyleSheet as StyleSheet8 } from "react-native";
-var createStyles8 = (theme) => StyleSheet8.create({
+import { StyleSheet as StyleSheet9 } from "react-native";
+var createStyles8 = (theme) => StyleSheet9.create({
   content: {
     width: "100%",
     maxWidth: 600,
@@ -750,8 +1085,8 @@ ModalContent.displayName = "ModalContent";
 import { View as View7 } from "react-native";
 
 // src/components/Modal/Footer/ModalFooter.styles.ts
-import { StyleSheet as StyleSheet9 } from "react-native";
-var createStyles9 = (theme) => StyleSheet9.create({
+import { StyleSheet as StyleSheet10 } from "react-native";
+var createStyles9 = (theme) => StyleSheet10.create({
   footer: {
     flexDirection: "row",
     gap: theme.tokens.spacing[3],
@@ -770,7 +1105,7 @@ ModalFooter.displayName = "ModalFooter";
 
 // src/components/Modal/Header/ModalHeader.tsx
 import { Close } from "@vellira-ui/icons";
-import { Pressable as Pressable4, Text as Text5, View as View8 } from "react-native";
+import { Pressable as Pressable4, Text as Text6, View as View8 } from "react-native";
 
 // src/components/Modal/ModalContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -786,8 +1121,8 @@ var useModalContext = () => {
 var ModalContext_default = ModalContext;
 
 // src/components/Modal/Header/ModalHeader.styles.ts
-import { StyleSheet as StyleSheet10 } from "react-native";
-var createStyles10 = (theme) => StyleSheet10.create({
+import { StyleSheet as StyleSheet11 } from "react-native";
+var createStyles10 = (theme) => StyleSheet11.create({
   header: {
     alignItems: "center",
     flexDirection: "row",
@@ -829,7 +1164,7 @@ var ModalHeader = ({
   const styles = useThemeStyles(createStyles10);
   const { onClose } = useModalContext();
   return /* @__PURE__ */ jsxs5(View8, { style: [styles.header, style], children: [
-    /* @__PURE__ */ jsx11(Text5, { style: [styles.title, textStyle], children }),
+    /* @__PURE__ */ jsx11(Text6, { style: [styles.title, textStyle], children }),
     onClose && /* @__PURE__ */ jsx11(
       Pressable4,
       {
@@ -854,8 +1189,8 @@ import { useModal } from "@vellira-ui/core";
 import { Modal as RNModal, Pressable as Pressable5, View as View9 } from "react-native";
 
 // src/components/Modal/Modal.styles.ts
-import { StyleSheet as StyleSheet11 } from "react-native";
-var createStyles11 = (theme) => StyleSheet11.create({
+import { StyleSheet as StyleSheet12 } from "react-native";
+var createStyles11 = (theme) => StyleSheet12.create({
   overlay: {
     alignItems: "center",
     flex: 1,
@@ -863,7 +1198,7 @@ var createStyles11 = (theme) => StyleSheet11.create({
     padding: theme.tokens.spacing[5]
   },
   backdrop: {
-    ...StyleSheet11.absoluteFill,
+    ...StyleSheet12.absoluteFill,
     backgroundColor: theme.components.modal.overlay.bg
   }
 });
@@ -945,12 +1280,12 @@ import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
 import { useId } from "react";
-import { Text as Text6, View as View10 } from "react-native";
+import { Text as Text7, View as View10 } from "react-native";
 
 // src/patterns/FormField/FormField.styles.ts
-import { StyleSheet as StyleSheet12 } from "react-native";
+import { StyleSheet as StyleSheet13 } from "react-native";
 var fontWeight = (value) => value;
-var createStyles12 = (theme) => StyleSheet12.create({
+var createStyles12 = (theme) => StyleSheet13.create({
   root: {
     width: "100%",
     minWidth: 0,
@@ -1072,7 +1407,7 @@ function FormField({
       style: [styles.root, { gap: sizeTokens.gap }, style],
       children: [
         label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
-          Text6,
+          Text7,
           {
             style: [
               styles.label,
@@ -1086,7 +1421,7 @@ function FormField({
             children: [
               label,
               required && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: styles.required,
                   accessible: false,
@@ -1095,7 +1430,7 @@ function FormField({
                 }
               ),
               !required && optionalText && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.optional,
@@ -1108,7 +1443,7 @@ function FormField({
                 }
               ),
               labelInfo && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.labelInfo,
@@ -1125,7 +1460,7 @@ function FormField({
         ) : /* @__PURE__ */ jsxs7(View10, { style: styles.customLabel, children: [
           label,
           required && /* @__PURE__ */ jsx14(
-            Text6,
+            Text7,
             {
               style: styles.required,
               accessible: false,
@@ -1137,7 +1472,7 @@ function FormField({
           labelInfo
         ] })),
         description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
-          Text6,
+          Text7,
           {
             style: [
               styles.description,
@@ -1153,7 +1488,7 @@ function FormField({
         ) : description),
         /* @__PURE__ */ jsx14(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx14(View10, { style: [styles.control, { gap: sizeTokens.gap }, controlStyle], children }) }),
         error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx14(
-          Text6,
+          Text7,
           {
             accessibilityLiveRegion: "polite",
             style: [
@@ -1174,8 +1509,8 @@ function FormField({
 }
 
 // src/components/RadioGroup/RadioGroup.styles.ts
-import { StyleSheet as StyleSheet13 } from "react-native";
-var createStyles13 = (theme) => StyleSheet13.create({
+import { StyleSheet as StyleSheet14 } from "react-native";
+var createStyles13 = (theme) => StyleSheet14.create({
   items: {
     width: "100%",
     minWidth: 0,
@@ -1289,14 +1624,14 @@ var RadioGroup = forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // 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";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState3 } from "react";
+import { FlatList as FlatList2, Pressable as Pressable10, Text as Text12, View as View21 } from "react-native";
 
 // src/components/Select/Group/SelectGroup.tsx
-import { Pressable as Pressable6, Text as Text7 } from "react-native";
+import { Pressable as Pressable6, Text as Text8 } from "react-native";
 
 // src/components/Select/internal/SelectCollection.ts
-import { Children as Children2, isValidElement as isValidElement4 } from "react";
+import { Children as Children3, isValidElement as isValidElement5 } from "react";
 
 // src/components/Select/internal/types.ts
 var selectSlotName = /* @__PURE__ */ Symbol("VelliraNativeSelectSlot");
@@ -1319,8 +1654,8 @@ var getTextFromNode = (node) => {
 var getGroupLabel = (props) => {
   if (props.label) return props.label;
   let label;
-  Children2.forEach(props.children, (child) => {
-    if (label || !isValidElement4(child)) return;
+  Children3.forEach(props.children, (child) => {
+    if (label || !isValidElement5(child)) return;
     if (getSelectSlot(child.type) === "label") {
       label = getTextFromNode(child.props.children);
     }
@@ -1330,8 +1665,8 @@ var getGroupLabel = (props) => {
 var getGroupItemValues = (children) => {
   const values = [];
   const visit = (node) => {
-    Children2.forEach(node, (child) => {
-      if (!isValidElement4(child)) return;
+    Children3.forEach(node, (child) => {
+      if (!isValidElement5(child)) return;
       const slot = getSelectSlot(child.type);
       if (slot === "content") {
         visit(child.props.children);
@@ -1357,8 +1692,8 @@ var parseSelectChildren = (children) => {
   let empty;
   let loading;
   const visit = (node, group) => {
-    Children2.forEach(node, (child) => {
-      if (!isValidElement4(child)) return;
+    Children3.forEach(node, (child) => {
+      if (!isValidElement5(child)) return;
       const slot = getSelectSlot(child.type);
       if (slot === "content") {
         visit(child.props.children, group);
@@ -1427,8 +1762,8 @@ var parseSelectChildren = (children) => {
 };
 
 // src/components/Select/Group/SelectGroup.styles.ts
-import { StyleSheet as StyleSheet14 } from "react-native";
-var createGroupStyles = (theme) => StyleSheet14.create({
+import { StyleSheet as StyleSheet15 } from "react-native";
+var createGroupStyles = (theme) => StyleSheet15.create({
   groupLabel: {
     paddingHorizontal: theme.tokens.spacing[3],
     paddingTop: theme.tokens.spacing[4],
@@ -1477,7 +1812,7 @@ var SelectGroup = createSelectSlot(
 );
 var SelectGroupLabelRow = ({ label }) => {
   const styles = useThemeStyles(createGroupStyles);
-  return /* @__PURE__ */ jsx16(Text7, { style: styles.groupLabel, children: label });
+  return /* @__PURE__ */ jsx16(Text8, { style: styles.groupLabel, children: label });
 };
 var SelectGroupActionRow = ({
   label,
@@ -1505,8 +1840,8 @@ var SelectGroupActionRow = ({
       onPress,
       style: styles.groupAction,
       children: [
-        /* @__PURE__ */ jsx16(Text7, { style: styles.groupActionText, children: resolvedLabel }),
-        /* @__PURE__ */ jsxs8(Text7, { style: styles.groupActionMeta, children: [
+        /* @__PURE__ */ jsx16(Text8, { style: styles.groupActionText, children: resolvedLabel }),
+        /* @__PURE__ */ jsxs8(Text8, { style: styles.groupActionMeta, children: [
           selectedCount,
           "/",
           itemCount
@@ -1549,13 +1884,13 @@ var useSelectContext = () => {
 };
 
 // src/components/Select/Item/SelectItem.tsx
-import { cloneElement as cloneElement4, isValidElement as isValidElement5 } from "react";
+import { cloneElement as cloneElement4, isValidElement as isValidElement6 } from "react";
 import { Check } from "@vellira-ui/icons";
-import { Pressable as Pressable7, Text as Text8, View as View13 } from "react-native";
+import { Pressable as Pressable7, Text as Text9, View as View13 } from "react-native";
 
 // src/components/Select/Item/SelectItem.styles.ts
-import { StyleSheet as StyleSheet15 } from "react-native";
-var createItemStyles = (theme) => StyleSheet15.create({
+import { StyleSheet as StyleSheet16 } from "react-native";
+var createItemStyles = (theme) => StyleSheet16.create({
   option: {
     minHeight: 44,
     flexDirection: "row",
@@ -1616,14 +1951,14 @@ var createItemStyles = (theme) => StyleSheet15.create({
 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 });
+    return /* @__PURE__ */ jsx18(Text9, { style: textStyle, children: node });
   }
-  if (isValidElement5(node) && node.type === Text8) {
+  if (isValidElement6(node) && node.type === Text9) {
     return cloneElement4(node, {
       style: [textStyle, node.props.style]
     });
   }
-  return node ?? (fallback ? /* @__PURE__ */ jsx18(Text8, { style: textStyle, children: fallback }) : null);
+  return node ?? (fallback ? /* @__PURE__ */ jsx18(Text9, { style: textStyle, children: fallback }) : null);
 };
 var SelectItem = createSelectSlot(
   "item",
@@ -1640,8 +1975,13 @@ var SelectItemRow = ({
   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;
+  const getOptionState = (pressed) => {
+    if (isDisabled) return theme.components.select.option.disabled;
+    if (isSelected) {
+      return pressed ? optionPalette.selectedPressed : optionPalette.selected;
+    }
+    return pressed ? optionPalette.pressed : theme.components.select.option.default;
+  };
   return /* @__PURE__ */ jsx18(
     Pressable7,
     {
@@ -1654,58 +1994,73 @@ var SelectItemRow = ({
         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,
+      style: ({ pressed }) => {
+        const optionState = getOptionState(pressed);
+        return [
+          styles.option,
           {
-            color: optionFg,
-            size: 18
-          }
-        ) : option.icon }),
-        /* @__PURE__ */ jsxs9(View13, { style: styles.optionTextWrap, children: [
-          /* @__PURE__ */ jsx18(
-            Text8,
+            backgroundColor: optionState.bg,
+            borderColor: optionState.border
+          },
+          isDisabled && styles.optionDisabled,
+          optionStyle
+        ];
+      },
+      children: ({ pressed }) => {
+        const optionState = getOptionState(pressed);
+        const optionFg = optionState.fg;
+        const descriptionFg = isSelected || pressed ? optionFg : theme.components.select.option.description.fg;
+        return renderOption ? renderNodeOrText(
+          renderOption(option, {
+            selected: isSelected,
+            disabled: isDisabled
+          }),
+          [styles.optionLabel, { color: optionFg }]
+        ) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          option.icon && /* @__PURE__ */ jsx18(View13, { style: styles.optionIcon, children: isValidElement6(option.icon) ? cloneElement4(
+            option.icon,
             {
-              numberOfLines: 1,
-              style: [styles.optionLabel, { color: optionFg }],
-              children: option.label
+              color: optionFg,
+              size: 18
             }
-          ),
-          option.description && /* @__PURE__ */ jsx18(Text8, { numberOfLines: 2, style: styles.optionDescription, children: option.description })
-        ] }),
-        option.badge && /* @__PURE__ */ jsx18(
-          View13,
-          {
-            style: [
-              styles.badge,
+          ) : option.icon }),
+          /* @__PURE__ */ jsxs9(View13, { style: styles.optionTextWrap, children: [
+            /* @__PURE__ */ jsx18(
+              Text9,
               {
-                backgroundColor: optionPalette.badge.bg,
-                borderColor: optionPalette.badge.border
+                numberOfLines: 1,
+                style: [styles.optionLabel, { color: optionFg }],
+                children: option.label
               }
-            ],
-            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 }) })
-      ] })
+            ),
+            option.description && /* @__PURE__ */ jsx18(
+              Text9,
+              {
+                numberOfLines: 2,
+                style: [styles.optionDescription, { color: descriptionFg }],
+                children: option.description
+              }
+            )
+          ] }),
+          option.badge && /* @__PURE__ */ jsx18(
+            View13,
+            {
+              style: [
+                styles.badge,
+                {
+                  backgroundColor: optionPalette.badge.bg,
+                  borderColor: optionPalette.badge.border
+                }
+              ],
+              children: renderNodeOrText(option.badge, [
+                styles.badgeText,
+                { color: optionPalette.badge.fg }
+              ])
+            }
+          ),
+          isSelected && /* @__PURE__ */ jsx18(View13, { style: styles.check, children: /* @__PURE__ */ jsx18(Check, { width: 16, height: 16, color: optionFg }) })
+        ] });
+      }
     }
   );
 };
@@ -1733,8 +2088,8 @@ var SelectItemIcon = createSelectSlot(
 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({
+import { StyleSheet as StyleSheet17 } from "react-native";
+var createPresentationStyles = (theme) => StyleSheet17.create({
   modalRoot: {
     flex: 1
   },
@@ -1756,7 +2111,7 @@ var createPresentationStyles = (theme) => StyleSheet16.create({
     justifyContent: "flex-end"
   },
   backdrop: {
-    ...StyleSheet16.absoluteFill,
+    ...StyleSheet17.absoluteFill,
     backgroundColor: theme.semantic.overlay.backdrop
   },
   content: {
@@ -1990,8 +2345,8 @@ var SelectSheet = ({
 SelectSheet.displayName = "Select.Sheet";
 
 // src/components/Select/Content/SelectContent.styles.ts
-import { StyleSheet as StyleSheet17 } from "react-native";
-var createContentStyles = (theme) => StyleSheet17.create({
+import { StyleSheet as StyleSheet18 } from "react-native";
+var createContentStyles = (theme) => StyleSheet18.create({
   toolbar: {
     minHeight: 52,
     flexDirection: "row",
@@ -2065,11 +2420,11 @@ var createContentStyles = (theme) => StyleSheet17.create({
 });
 
 // src/components/Select/Content/SelectEmpty.tsx
-import { Text as Text9, View as View18 } from "react-native";
+import { Text as Text10, View as View18 } from "react-native";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var renderText = (node, style) => {
   if (typeof node === "string" || typeof node === "number") {
-    return /* @__PURE__ */ jsx24(Text9, { style, children: node });
+    return /* @__PURE__ */ jsx24(Text10, { style, children: node });
   }
   return node;
 };
@@ -2085,11 +2440,11 @@ var SelectEmptyState = () => {
 SelectEmptyState.displayName = "Select.EmptyState";
 
 // src/components/Select/Content/SelectLoading.tsx
-import { ActivityIndicator, Text as Text10, View as View19 } from "react-native";
+import { ActivityIndicator, Text as Text11, View as View19 } from "react-native";
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var renderText2 = (node, style) => {
   if (typeof node === "string" || typeof node === "number") {
-    return /* @__PURE__ */ jsx25(Text10, { style, children: node });
+    return /* @__PURE__ */ jsx25(Text11, { style, children: node });
   }
   return node;
 };
@@ -2116,13 +2471,13 @@ var SelectLoadingState = () => {
 SelectLoadingState.displayName = "Select.LoadingState";
 
 // src/components/Select/Content/SelectSearch.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { Close as Close2, Search } from "@vellira-ui/icons";
 import { Pressable as Pressable9, TextInput, View as View20 } from "react-native";
 
 // src/components/Select/Content/SelectSearch.styles.ts
-import { StyleSheet as StyleSheet18 } from "react-native";
-var createSearchStyles = (theme) => StyleSheet18.create({
+import { StyleSheet as StyleSheet19 } from "react-native";
+var createSearchStyles = (theme) => StyleSheet19.create({
   searchWrap: {
     flexDirection: "row",
     alignItems: "center",
@@ -2159,7 +2514,7 @@ var createSearchStyles = (theme) => StyleSheet18.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 999,
-    backgroundColor: theme.semantic.status.error.bg
+    backgroundColor: theme.components.select.clearButton.hoverBg
   }
 });
 
@@ -2182,7 +2537,7 @@ var SelectSearchField = () => {
     virtual
   } = useSelectContext();
   const shouldAutoFocus = !virtual || selectedRowIndex === 0;
-  useEffect2(() => {
+  useEffect4(() => {
     if (!shouldAutoFocus) return;
     const focusTimer = setTimeout(() => {
       searchInputRef.current?.focus();
@@ -2233,7 +2588,7 @@ var SelectSearchField = () => {
           {
             width: 14,
             height: 14,
-            color: theme.semantic.status.error.fg
+            color: theme.components.select.clearButton.hoverFg
           }
         )
       }
@@ -2250,8 +2605,8 @@ var SelectContent = createSelectSlot(
 );
 var SelectContentSurface = () => {
   const styles = useThemeStyles(createContentStyles);
-  const wasOpenRef = useRef2(false);
-  const [openCycle, setOpenCycle] = useState2(0);
+  const wasOpenRef = useRef4(false);
+  const [openCycle, setOpenCycle] = useState3(0);
   const context = useSelectContext();
   const {
     isOpen,
@@ -2278,7 +2633,7 @@ var SelectContentSurface = () => {
   } = context;
   const shouldSeedSelectedPosition = Boolean(context.virtual) && selectedRowIndex > 0 && query === "";
   const initialScrollIndex = shouldSeedSelectedPosition ? selectedRowIndex : void 0;
-  useEffect3(() => {
+  useEffect5(() => {
     if (isOpen && !wasOpenRef.current) {
       setOpenCycle((cycle) => cycle + 1);
     }
@@ -2339,10 +2694,10 @@ var SelectContentSurface = () => {
               style: styles.toolbarAction,
               accessibilityRole: "button",
               accessibilityLabel: "Close selection",
-              children: /* @__PURE__ */ jsx27(Text11, { style: styles.cancelText, children: "Cancel" })
+              children: /* @__PURE__ */ jsx27(Text12, { style: styles.cancelText, children: "Cancel" })
             }
           ),
-          /* @__PURE__ */ jsx27(Text11, { style: styles.title, numberOfLines: 1, accessibilityRole: "header", children: resolvedLabel }),
+          /* @__PURE__ */ jsx27(Text12, { style: styles.title, numberOfLines: 1, accessibilityRole: "header", children: resolvedLabel }),
           /* @__PURE__ */ jsx27(
             Pressable10,
             {
@@ -2351,7 +2706,7 @@ var SelectContentSurface = () => {
               style: styles.toolbarAction,
               accessibilityRole: "button",
               accessibilityLabel: "Done",
-              children: /* @__PURE__ */ jsx27(Text11, { style: styles.doneText, children: "Done" })
+              children: /* @__PURE__ */ jsx27(Text12, { style: styles.doneText, children: "Done" })
             }
           )
         ]
@@ -2359,7 +2714,7 @@ var SelectContentSurface = () => {
     ),
     searchable && /* @__PURE__ */ jsx27(SelectSearchField, {}),
     loading && filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectLoadingState, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx27(SelectEmptyState, {}) : /* @__PURE__ */ jsx27(
-      FlatList,
+      FlatList2,
       {
         data: filteredRows,
         keyExtractor: (item) => item.key,
@@ -2420,12 +2775,12 @@ var SelectContentSurface = () => {
 SelectContentSurface.displayName = "Select.ContentSurface";
 
 // src/components/Select/Root/SelectRoot.tsx
-import { useMemo as useMemo6, useRef as useRef3, useState as useState4 } from "react";
+import { useMemo as useMemo7, useRef as useRef5, useState as useState5 } 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";
+import { AccessibilityInfo as AccessibilityInfo3 } from "react-native";
 var useSelectAccessibility = ({
   accessibilityLabel,
   accessibilityHint,
@@ -2446,23 +2801,23 @@ var useSelectAccessibility = ({
     resolvedLabel,
     resolvedHint,
     announce: (message) => {
-      AccessibilityInfo.announceForAccessibility?.(message);
+      AccessibilityInfo3.announceForAccessibility?.(message);
     }
   };
 };
 
 // src/components/Select/internal/useSelectCollection.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var useSelectCollection = (children, optionsProp) => {
-  const parsedChildren = useMemo4(
+  const parsedChildren = useMemo5(
     () => parseSelectChildren(children),
     [children]
   );
-  const options = useMemo4(
+  const options = useMemo5(
     () => [...optionsProp ?? [], ...parsedChildren.options],
     [optionsProp, parsedChildren.options]
   );
-  const rows = useMemo4(() => {
+  const rows = useMemo5(() => {
     if (parsedChildren.rows.length > 0) {
       return parsedChildren.rows;
     }
@@ -2483,9 +2838,9 @@ var useSelectCollection = (children, optionsProp) => {
 };
 
 // src/components/Select/internal/useSelectPresentation.ts
-import { useWindowDimensions } from "react-native";
+import { useWindowDimensions as useWindowDimensions2 } from "react-native";
 var useSelectPresentation = (presentation = "auto") => {
-  const { width } = useWindowDimensions();
+  const { width } = useWindowDimensions2();
   if (presentation === "auto") {
     return width >= 768 ? "popover" : "sheet";
   }
@@ -2493,7 +2848,7 @@ var useSelectPresentation = (presentation = "auto") => {
 };
 
 // src/components/Select/internal/useSelectSearch.ts
-import { useEffect as useEffect4, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState4 } from "react";
 var useSelectSearch = ({
   rows,
   isOpen,
@@ -2503,10 +2858,10 @@ var useSelectSearch = ({
   filterOptions,
   filter = defaultSelectFilter
 }) => {
-  const [query, setQuery] = useState3("");
+  const [query, setQuery] = useState4("");
   const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
   const shouldFilter = filterOptions ?? !onSearch;
-  const filteredRows = useMemo5(() => {
+  const filteredRows = useMemo6(() => {
     if (!query || !shouldFilter) return rows;
     const visibleRows = [];
     let pendingGroup;
@@ -2533,7 +2888,7 @@ var useSelectSearch = ({
       return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
     });
   }, [filter, query, rows, shouldFilter]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isOpen) {
       setQuery("");
       return;
@@ -2557,13 +2912,13 @@ var SelectIcon = createSelectSlot(
 );
 
 // src/components/Select/Trigger/SelectTrigger.tsx
-import { cloneElement as cloneElement5, isValidElement as isValidElement6 } from "react";
+import { cloneElement as cloneElement5, isValidElement as isValidElement7 } from "react";
 import { ChevronDown as ChevronDown2, Close as Close3 } from "@vellira-ui/icons";
-import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable11, Text as Text12, View as View22 } from "react-native";
+import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable11, Text as Text13, View as View22 } from "react-native";
 
 // src/components/Select/Trigger/SelectTrigger.styles.ts
-import { StyleSheet as StyleSheet19 } from "react-native";
-var createTriggerStyles = (theme) => StyleSheet19.create({
+import { StyleSheet as StyleSheet20 } from "react-native";
+var createTriggerStyles = (theme) => StyleSheet20.create({
   trigger: {
     width: "100%",
     minWidth: 0,
@@ -2638,7 +2993,7 @@ var createTriggerStyles = (theme) => StyleSheet19.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 999,
-    backgroundColor: theme.semantic.status.error.bg
+    backgroundColor: theme.components.select.clearButton.hoverBg
   }
 });
 
@@ -2687,7 +3042,7 @@ function SelectTrigger({
   };
   const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a list of options" : required ? "Required. Opens a list of options" : "Opens a list of options");
   const iconColor = disabled ? theme.components.select.trigger.disabled.icon : triggerState.icon;
-  const renderIcon = (icon) => isValidElement6(icon) ? cloneElement5(icon, { color: iconColor, size: resolvedIconSize }) : null;
+  const renderIcon = (icon) => isValidElement7(icon) ? cloneElement5(icon, { color: iconColor, size: resolvedIconSize }) : null;
   const renderValue = () => {
     const valueStyle = [
       styles.text,
@@ -2700,9 +3055,9 @@ function SelectTrigger({
       textStyle
     ];
     if (typeof displayText === "string" || typeof displayText === "number") {
-      return /* @__PURE__ */ jsx28(Text12, { numberOfLines: 1, style: valueStyle, children: displayText });
+      return /* @__PURE__ */ jsx28(Text13, { numberOfLines: 1, style: valueStyle, children: displayText });
     }
-    if (isValidElement6(displayText) && displayText.type === Text12) {
+    if (isValidElement7(displayText) && displayText.type === Text13) {
       return cloneElement5(displayText, {
         numberOfLines: displayText.props.numberOfLines ?? 1,
         style: [valueStyle, displayText.props.style]
@@ -2761,9 +3116,9 @@ function SelectTrigger({
             children: renderIcon(startIcon)
           }
         ),
-        prefix && /* @__PURE__ */ jsx28(Text12, { style: styles.affix, children: prefix }),
+        prefix && /* @__PURE__ */ jsx28(Text13, { style: styles.affix, children: prefix }),
         /* @__PURE__ */ jsx28(View22, { style: styles.value, children: renderValue() }),
-        suffix && /* @__PURE__ */ jsx28(Text12, { style: styles.affix, children: suffix }),
+        suffix && /* @__PURE__ */ jsx28(Text13, { style: styles.affix, children: suffix }),
         loading ? /* @__PURE__ */ jsx28(
           ActivityIndicator2,
           {
@@ -2784,7 +3139,7 @@ function SelectTrigger({
               {
                 width: 14,
                 height: 14,
-                color: theme.semantic.status.error.fg
+                color: theme.components.select.clearButton.hoverFg
               }
             )
           }
@@ -2871,9 +3226,9 @@ function SelectRoot(props) {
   } = props;
   const field = useFormFieldContext();
   const hasOwnField = Boolean(label || description || error);
-  const [triggerWidth, setTriggerWidth] = useState4();
-  const searchInputRef = useRef3(null);
-  const selectedFocusValueRef = useRef3(void 0);
+  const [triggerWidth, setTriggerWidth] = useState5();
+  const searchInputRef = useRef5(null);
+  const selectedFocusValueRef = useRef5(void 0);
   const resolvedPresentation = useSelectPresentation(presentation);
   const {
     options,
@@ -2926,7 +3281,7 @@ function SelectRoot(props) {
   const selectedOptions = options.filter(
     (option) => selectedValues.includes(option.value)
   );
-  const optionsByValue = useMemo6(
+  const optionsByValue = useMemo7(
     () => new Map(
       options.filter((option) => !option.disabled).map((option) => [option.value, option])
     ),
@@ -2951,7 +3306,7 @@ function SelectRoot(props) {
     )
   );
   const itemHeight = typeof virtual === "object" ? virtual.estimatedItemSize ?? 46 : 46;
-  const displayValue = useMemo6(() => {
+  const displayValue = useMemo7(() => {
     if (renderValue) {
       return renderValue(
         props.multiple ? selectedOptions : selectedOption ?? null,
@@ -3185,8 +3540,8 @@ var useTabs = () => {
 TabsContext.displayName = "TabsContext";
 
 // src/components/Tabs/List/TabsList.styles.ts
-import { StyleSheet as StyleSheet20 } from "react-native";
-var createStyles14 = (theme) => StyleSheet20.create({
+import { StyleSheet as StyleSheet21 } from "react-native";
+var createStyles14 = (theme) => StyleSheet21.create({
   list: {
     flexDirection: "row",
     alignSelf: "stretch",
@@ -3236,8 +3591,8 @@ TabsList.displayName = "TabsList";
 import { View as View25 } from "react-native";
 
 // src/components/Tabs/Panel/TabsPanel.styles.ts
-import { StyleSheet as StyleSheet21 } from "react-native";
-var createStyles15 = (theme) => StyleSheet21.create({
+import { StyleSheet as StyleSheet22 } from "react-native";
+var createStyles15 = (theme) => StyleSheet22.create({
   panel: {
     width: "100%",
     minWidth: 0,
@@ -3284,13 +3639,13 @@ var TabsPanel = ({ index, children, style }) => {
 TabsPanel.displayName = "TabsPanel";
 
 // src/components/Tabs/Tab/Tab.tsx
-import { cloneElement as cloneElement6, isValidElement as isValidElement7 } from "react";
-import { Pressable as Pressable12, Text as Text13, View as View26 } from "react-native";
+import { cloneElement as cloneElement6, isValidElement as isValidElement8 } from "react";
+import { Pressable as Pressable12, Text as Text14, View as View26 } from "react-native";
 
 // src/components/Tabs/Tab/Tab.styles.ts
-import { StyleSheet as StyleSheet22 } from "react-native";
+import { StyleSheet as StyleSheet23 } from "react-native";
 var fontWeight2 = (value) => value;
-var createStyles16 = (theme) => StyleSheet22.create({
+var createStyles16 = (theme) => StyleSheet23.create({
   tab: {
     minHeight: 40,
     alignItems: "center",
@@ -3426,7 +3781,7 @@ 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 = isValidElement7(icon) ? cloneElement6(icon, {
+  const renderedIcon = isValidElement8(icon) ? cloneElement6(icon, {
     color: iconColor
   }) : icon;
   return /* @__PURE__ */ jsx32(
@@ -3474,7 +3829,7 @@ var Tab = ({
         ),
         icon != null && /* @__PURE__ */ jsx32(View26, { style: styles.tabIcon, children: renderedIcon }),
         children != null && /* @__PURE__ */ jsx32(
-          Text13,
+          Text14,
           {
             numberOfLines: 2,
             ellipsizeMode: "tail",
@@ -3495,13 +3850,13 @@ var Tab = ({
 Tab.displayName = "Tab";
 
 // src/components/Tabs/Tabs.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { useTabs as useTabs2 } from "@vellira-ui/core";
 import { View as View27 } from "react-native";
 
 // src/components/Tabs/Tabs.styles.ts
-import { StyleSheet as StyleSheet23 } from "react-native";
-var createStyles17 = (theme) => StyleSheet23.create({
+import { StyleSheet as StyleSheet24 } from "react-native";
+var createStyles17 = (theme) => StyleSheet24.create({
   root: {
     width: "100%",
     minWidth: 0
@@ -3533,7 +3888,7 @@ var TabsRoot = ({
     onChange,
     orientation
   });
-  const value = useMemo7(
+  const value = useMemo8(
     () => ({ activeIndex, appearance, orientation, setActiveIndex }),
     [activeIndex, appearance, orientation, setActiveIndex]
   );
@@ -3559,20 +3914,20 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-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";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
+import { Modal as Modal6, Pressable as Pressable13, Text as Text15, View as View28 } from "react-native";
 
 // src/hooks/useNativeFloatingPosition.ts
-import { useCallback as useCallback2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useRef as useRef6, useState as useState6 } from "react";
 import { Dimensions } from "react-native";
 var safePadding = 12;
 function useNativeFloatingPosition(placement = "top", offset = 8) {
-  const [position, setPosition] = useState5({ top: 0, left: 0 });
-  const floatingSizeRef = useRef4({
+  const [position, setPosition] = useState6({ top: 0, left: 0 });
+  const floatingSizeRef = useRef6({
     width: 0,
     height: 0
   });
-  const lastTriggerRef = useRef4(null);
+  const lastTriggerRef = useRef6(null);
   const clamp = useCallback2((value, min, max) => {
     return Math.min(Math.max(value, min), Math.max(min, max));
   }, []);
@@ -3629,13 +3984,13 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 }
 
 // src/components/Tooltip/Tooltip.styles.ts
-import { StyleSheet as StyleSheet24 } from "react-native";
-var createStyles18 = (theme) => StyleSheet24.create({
+import { StyleSheet as StyleSheet25 } from "react-native";
+var createStyles18 = (theme) => StyleSheet25.create({
   root: {
     alignSelf: "flex-start"
   },
   overlay: {
-    ...StyleSheet24.absoluteFill
+    ...StyleSheet25.absoluteFill
   },
   bubble: {
     position: "absolute",
@@ -3680,9 +4035,9 @@ function Tooltip({
   textStyle
 }) {
   const styles = useThemeStyles(createStyles18);
-  const [visible, setVisible] = useState6(false);
-  const triggerRef = useRef5(null);
-  const closeTimerRef = useRef5(null);
+  const [visible, setVisible] = useState7(false);
+  const triggerRef = useRef7(null);
+  const closeTimerRef = useRef7(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
   const hideDelay = delay?.close ?? 2500;
   const clearCloseTimer = () => {
@@ -3701,7 +4056,7 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect5(() => {
+  useEffect7(() => {
     return clearCloseTimer;
   }, []);
   return /* @__PURE__ */ jsxs19(View28, { style: [styles.root, style], children: [
@@ -3728,7 +4083,7 @@ function Tooltip({
               contentStyle
             ],
             onLayout: onFloatingLayout,
-            children: typeof content === "string" ? /* @__PURE__ */ jsx34(Text14, { style: [styles.text, textStyle], children: content }) : content
+            children: typeof content === "string" ? /* @__PURE__ */ jsx34(Text15, { style: [styles.text, textStyle], children: content }) : content
           }
         )
       }
@@ -3738,8 +4093,8 @@ function Tooltip({
 Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
-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";
+import { cloneElement as cloneElement7, useState as useState8 } from "react";
+import { ActivityIndicator as ActivityIndicator3, Pressable as Pressable14, Text as Text16, View as View29 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -3749,9 +4104,9 @@ var devWarning = (condition, message) => {
 };
 
 // src/primitives/Button/Button.styles.ts
-import { StyleSheet as StyleSheet25 } from "react-native";
+import { StyleSheet as StyleSheet26 } from "react-native";
 var fontWeight3 = (value) => value;
-var createStyles19 = (theme) => StyleSheet25.create({
+var createStyles19 = (theme) => StyleSheet26.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -3872,9 +4227,9 @@ function Button({
   const config = sizeMap[size];
   const radius = shape === "square" ? theme.tokens.radius.sm : shape === "rounded" ? theme.tokens.radius.md : theme.tokens.radius.full;
   const appearanceTheme = theme.components.button[color][appearance];
-  const [isHovered, setIsHovered] = useState7(false);
-  const [isFocused, setIsFocused] = useState7(false);
-  const [labelWidth, setLabelWidth] = useState7(0);
+  const [isHovered, setIsHovered] = useState8(false);
+  const [isFocused, setIsFocused] = useState8(false);
+  const [labelWidth, setLabelWidth] = useState8(0);
   const isDisabled = disabled || loading;
   const iconOnly = iconOnlyProp || !children && Boolean(iconStart || iconEnd);
   const content = loading && loadingText ? loadingText : children;
@@ -3953,7 +4308,7 @@ function Button({
           !loading && iconStart && renderIcon(iconStart, contentColor),
           content && !iconOnly && /* @__PURE__ */ jsxs20(View29, { style: styles.labelSlot, children: [
             /* @__PURE__ */ jsx35(
-              Text15,
+              Text16,
               {
                 onLayout: handleLabelLayout,
                 style: [
@@ -3969,7 +4324,7 @@ function Button({
               }
             ),
             measureLabel && /* @__PURE__ */ jsx35(
-              Text15,
+              Text16,
               {
                 accessibilityElementsHidden: true,
                 importantForAccessibility: "no-hide-descendants",
@@ -3987,7 +4342,7 @@ function Button({
             )
           ] }),
           badge && !iconOnly && /* @__PURE__ */ jsx35(
-            Text15,
+            Text16,
             {
               style: [
                 styles.badge,
@@ -4000,7 +4355,7 @@ function Button({
             }
           ),
           shortcut && !iconOnly && /* @__PURE__ */ jsx35(
-            Text15,
+            Text16,
             {
               style: [
                 styles.shortcut,
@@ -4019,14 +4374,14 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect6 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect8 } from "react";
 import { useControllableState as useControllableState3 } from "@vellira-ui/core";
 import { Check as Check2 } from "@vellira-ui/icons";
-import { Pressable as Pressable15, Text as Text16, View as View30 } from "react-native";
+import { Pressable as Pressable15, Text as Text17, View as View30 } from "react-native";
 
 // src/primitives/Checkbox/Checkbox.styles.ts
-import { StyleSheet as StyleSheet26 } from "react-native";
-var createStyles20 = (theme) => StyleSheet26.create({
+import { StyleSheet as StyleSheet27 } from "react-native";
+var createStyles20 = (theme) => StyleSheet27.create({
   container: {
     gap: theme.tokens.spacing[2]
   },
@@ -4227,7 +4582,7 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect6(() => {
+    useEffect8(() => {
       devWarning(
         Boolean(resolvedAccessibilityLabel),
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
@@ -4291,7 +4646,7 @@ var Checkbox = forwardRef2(
                 }
               ),
               label && /* @__PURE__ */ jsxs21(
-                Text16,
+                Text17,
                 {
                   style: [
                     styles.label,
@@ -4304,7 +4659,7 @@ var Checkbox = forwardRef2(
                   ],
                   children: [
                     label,
-                    required && /* @__PURE__ */ jsx36(Text16, { style: styles.requiredMark, children: " *" })
+                    required && /* @__PURE__ */ jsx36(Text17, { style: styles.requiredMark, children: " *" })
                   ]
                 }
               )
@@ -4313,7 +4668,7 @@ var Checkbox = forwardRef2(
         }
       ),
       description && /* @__PURE__ */ jsx36(
-        Text16,
+        Text17,
         {
           style: [
             styles.descriptionText,
@@ -4323,21 +4678,21 @@ var Checkbox = forwardRef2(
           children: description
         }
       ),
-      hasError && /* @__PURE__ */ jsx36(Text16, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
+      hasError && /* @__PURE__ */ jsx36(Text17, { style: [styles.errorText, helperTextSizeStyle[size]], children: error })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as 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";
+import { cloneElement as cloneElement8, forwardRef as forwardRef3, useState as useState9 } from "react";
+import { Pressable as Pressable16, Text as Text18, TextInput as TextInput2, View as View31 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
-import { StyleSheet as StyleSheet27 } from "react-native";
+import { StyleSheet as StyleSheet28 } from "react-native";
 var getDisabledPlaceholderTextColor = (theme) => theme.components.input.disabled.placeholder;
 var resolveRingColor = (ring) => typeof ring === "string" ? ring : ring.color;
-var createStyles21 = (theme) => StyleSheet27.create({
+var createStyles21 = (theme) => StyleSheet28.create({
   inputWrapper: {
     position: "relative",
     width: "100%",
@@ -4582,8 +4937,8 @@ var Input = forwardRef3(
     const styles = useThemeStyles(createStyles21);
     const field = useFormFieldContext();
     const hasOwnField = Boolean(label || description || error);
-    const [isFocused, setIsFocused] = useState8(false);
-    const [uncontrolledValue, setUncontrolledValue] = useState8(
+    const [isFocused, setIsFocused] = useState9(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState9(
       defaultValue ?? ""
     );
     const isControlled = value !== void 0;
@@ -4600,7 +4955,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] = useState8(false);
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState9(false);
     const resolvedIconSize = iconSize ?? 16;
     const handleFocus = (event) => {
       setIsFocused(true);
@@ -4712,7 +5067,7 @@ var Input = forwardRef3(
           children: clearIcon ? cloneElement8(clearIcon, {
             color: clearIconColor,
             size: resolvedIconSize
-          }) : /* @__PURE__ */ jsx37(Text17, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
+          }) : /* @__PURE__ */ jsx37(Text18, { style: [styles.clearButtonText, { color: clearIconColor }], children: "\xD7" })
         }
       ) : showRevealButton ? /* @__PURE__ */ jsx37(
         Pressable16,
@@ -4722,7 +5077,7 @@ var Input = forwardRef3(
           hitSlop: 8,
           onPress: () => setIsPasswordRevealed((revealed) => !revealed),
           style: styles.revealButton,
-          children: /* @__PURE__ */ jsx37(Text17, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
+          children: /* @__PURE__ */ jsx37(Text18, { style: styles.revealButtonText, children: isPasswordRevealed ? "Hide" : "Show" })
         }
       ) : showRightIcon && endIcon && /* @__PURE__ */ jsx37(
         View31,
@@ -4760,17 +5115,17 @@ var Input = forwardRef3(
 Input.displayName = "Input";
 
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect7 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect9 } from "react";
 import { useControllableState as useControllableState4 } from "@vellira-ui/core";
 import {
   Pressable as Pressable17,
-  Text as Text18,
+  Text as Text19,
   View as View32
 } from "react-native";
 
 // src/primitives/Radio/Radio.styles.ts
-import { StyleSheet as StyleSheet28 } from "react-native";
-var createStyles22 = (theme) => StyleSheet28.create({
+import { StyleSheet as StyleSheet29 } from "react-native";
+var createStyles22 = (theme) => StyleSheet29.create({
   root: {
     alignSelf: "flex-start"
   },
@@ -4929,7 +5284,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect7(() => {
+    useEffect9(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."
@@ -5017,7 +5372,7 @@ var Radio = forwardRef4(
             ),
             (label || description) && /* @__PURE__ */ jsxs23(View32, { pointerEvents: "none", style: styles.content, children: [
               label && (typeof label === "string" ? /* @__PURE__ */ jsx38(
-                Text18,
+                Text19,
                 {
                   style: [
                     styles.label,
@@ -5039,7 +5394,7 @@ var Radio = forwardRef4(
                 }
               ) : label),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx38(
-                Text18,
+                Text19,
                 {
                   style: [
                     styles.description,
@@ -5058,7 +5413,7 @@ var Radio = forwardRef4(
         }
       ),
       error && /* @__PURE__ */ jsx38(
-        Text18,
+        Text19,
         {
           accessibilityLiveRegion: "polite",
           style: [