@vellira-ui/react-native 2.32.0 → 2.33.0

package/dist/index.js

@@ -69,9 +69,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 +105,24 @@ var createStyles = (theme) => StyleSheet.create({
     shadowOpacity: 0.24,
     shadowRadius: 16,
     elevation: 12
+  },
+  sheetMenu: {
+    width: "100%",
+    maxHeight: "70%",
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg
+  },
+  modalMenu: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "70%",
+    borderRadius: theme.tokens.radius.lg
+  },
+  popoverMenu: {
+    width: "100%",
+    maxWidth: 360,
+    maxHeight: "60%",
+    borderRadius: theme.tokens.radius.md
   }
 });
 
@@ -103,17 +133,19 @@ function DropdownContent({
   children,
   onClose,
   contentStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  presentation
 }) {
   const styles = useThemeStyles(createStyles);
+  const isSheet = presentation === "sheet";
   return /* @__PURE__ */ jsx2(
     Modal,
     {
       transparent: true,
       visible: isOpen,
-      animationType: "slide",
+      animationType: isSheet ? "slide" : "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxs(View, { style: styles.modalRoot, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: [styles.modalRoot, styles[presentation]], children: [
         /* @__PURE__ */ jsx2(
           Pressable,
           {
@@ -128,7 +160,7 @@ function DropdownContent({
           {
             accessibilityRole: "menu",
             accessibilityLabel,
-            style: [styles.menu, contentStyle],
+            style: [styles.menu, styles[`${presentation}Menu`], contentStyle],
             children
           }
         )
@@ -139,9 +171,16 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useCallback, useMemo as useMemo3 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { useDropdown } from "@vellira-ui/core";
-import { View as View4 } from "react-native";
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  FlatList,
+  Text as Text4,
+  useWindowDimensions,
+  View as View4
+} from "react-native";
 
 // src/components/Dropdown/Group/DropdownGroup.tsx
 import { Text } from "react-native";
@@ -168,8 +207,100 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 
+// src/components/Dropdown/internal/DropdownCollection.ts
+import { Children, isValidElement } from "react";
+function createDropdownSlot(name, displayName) {
+  const Slot = () => null;
+  Slot.__velliraDropdownPart = name;
+  Slot.displayName = displayName;
+  return Slot;
+}
+function parseDropdownChildren(children) {
+  let generatedId = 0;
+  let trigger;
+  let triggerProps;
+  let contentProps;
+  const entries = [];
+  const items = [];
+  const nextId = (prefix) => `${prefix}-${generatedId++}`;
+  function pushItem(props) {
+    const entry = {
+      type: "item",
+      id: nextId("item"),
+      props,
+      label: getItemLabel(props.children) || props.value || "",
+      disabled: props.disabled
+    };
+    items.push(entry);
+    entries.push(entry);
+  }
+  function visit(node) {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) return;
+      const type = child.type;
+      switch (type.__velliraDropdownPart) {
+        case "trigger":
+          triggerProps = child.props;
+          trigger = triggerProps.children;
+          return;
+        case "content":
+          contentProps = child.props;
+          visit(contentProps.children);
+          return;
+        case "group":
+          visit(child.props.children);
+          return;
+        case "label":
+          entries.push({
+            type: "label",
+            id: nextId("label"),
+            props: child.props
+          });
+          return;
+        case "separator":
+          entries.push({
+            type: "separator",
+            id: nextId("separator"),
+            props: child.props
+          });
+          return;
+        case "empty":
+          entries.push({
+            type: "empty",
+            id: nextId("empty"),
+            props: child.props
+          });
+          return;
+        case "loading":
+          entries.push({
+            type: "loading",
+            id: nextId("loading"),
+            props: child.props
+          });
+          return;
+        case "item":
+          pushItem(child.props);
+          return;
+        default:
+          visit(child.props.children);
+      }
+    });
+  }
+  visit(children);
+  return { contentProps, entries, items, trigger, triggerProps };
+}
+function getItemLabel(children) {
+  const labelParts = [];
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      labelParts.push(String(child));
+    }
+  });
+  return labelParts.join("").trim();
+}
+
 // src/components/Dropdown/Item/DropdownItem.tsx
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement as isValidElement2 } from "react";
 import { Pressable as Pressable2, Text as Text2 } from "react-native";
 
 // src/components/Dropdown/Item/DropdownItem.styles.ts
@@ -177,6 +308,7 @@ import { StyleSheet as StyleSheet3 } from "react-native";
 var createStyles3 = (theme) => StyleSheet3.create({
   item: {
     minWidth: 0,
+    minHeight: 44,
     alignItems: "center",
     flexDirection: "row",
     gap: theme.tokens.spacing[4],
@@ -235,7 +367,7 @@ function DropdownItem({
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles3);
   const renderColoredNode = (node, color) => {
-    if (!isValidElement(node)) return node;
+    if (!isValidElement2(node)) return node;
     return cloneElement(node, { color });
   };
   const getContentColor = (pressed) => {
@@ -320,7 +452,7 @@ DropdownSeparator.displayName = "DropdownSeparator";
 // src/components/Dropdown/Trigger/DropdownTrigger.tsx
 import {
   cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement3,
   useEffect,
   useRef,
   useState
@@ -431,6 +563,7 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownTrigger({
   label,
   trigger,
+  children,
   icon,
   arrowIcon,
   showArrow = true,
@@ -438,6 +571,7 @@ function DropdownTrigger({
   disabled = false,
   isOpen,
   triggerStyle,
+  triggerRef,
   accessibilityLabel,
   accessibilityHint,
   onPress
@@ -485,15 +619,34 @@ function DropdownTrigger({
         }
       );
     }
-    if (!isValidElement2(node)) return node;
+    if (!isValidElement3(node)) return node;
     return cloneElement2(node, { color });
   };
   const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? theme.components.dropdown.trigger.hover.fg : theme.components.dropdown.trigger.default.fg;
   const arrow = arrowIcon ? renderColoredNode(arrowIcon, contentColor) : /* @__PURE__ */ jsx6(ChevronDown, { width: 16, height: 16, color: contentColor });
   const renderedIcon = icon ? renderColoredNode(icon, contentColor) : null;
+  const triggerContent = trigger ?? children;
+  if (isValidElement3(triggerContent)) {
+    const child = triggerContent;
+    const isChildDisabled = disabled || child.props.disabled;
+    return cloneElement2(child, {
+      ref: triggerRef,
+      disabled: isChildDisabled,
+      accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+      accessibilityHint,
+      accessibilityState: { expanded: isOpen, disabled: isChildDisabled },
+      onPress: () => {
+        child.props.onPress?.();
+        if (!isChildDisabled) {
+          onPress();
+        }
+      }
+    });
+  }
   return /* @__PURE__ */ jsxs3(
     Pressable3,
     {
+      ref: triggerRef,
       disabled,
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
@@ -513,7 +666,7 @@ function DropdownTrigger({
       ],
       children: [
         hasIcon && /* @__PURE__ */ jsx6(View3, { style: styles.icon, children: renderedIcon }),
-        !isIconOnly && (trigger ? renderColoredNode(trigger, contentColor) : /* @__PURE__ */ jsx6(
+        !isIconOnly && (triggerContent ? renderColoredNode(triggerContent, contentColor) : /* @__PURE__ */ jsx6(
           Text3,
           {
             numberOfLines: 1,
@@ -541,31 +694,38 @@ DropdownTrigger.displayName = "DropdownTrigger";
 
 // src/components/Dropdown/Dropdown.styles.ts
 import { StyleSheet as StyleSheet6 } from "react-native";
-var createStyles6 = () => StyleSheet6.create({
+var createStyles6 = (theme) => StyleSheet6.create({
   root: {
     alignSelf: "flex-start"
+  },
+  emptyText: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[3],
+    color: theme.components.dropdown.item.disabled.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   }
 });
 
-// src/components/Dropdown/types.ts
-var isMenuItem = (item) => item.type === void 0 || item.type === "item";
-var isGroup = (item) => item.type === "group";
-var isSeparator = (item) => item.type === "separator";
-
 // src/components/Dropdown/Dropdown.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function Dropdown({
+function DropdownRoot({
+  children,
   label = "Menu",
   trigger,
   icon,
   arrowIcon,
   showArrow = true,
-  items,
-  onSelect,
   open,
   defaultOpen = false,
   onOpenChange,
+  presentation = "auto",
+  closeOnSelect = true,
   disabled = false,
+  loading = false,
+  loadingText = "Loading actions...",
   size = "md",
   style,
   triggerStyle,
@@ -576,13 +736,21 @@ function Dropdown({
   accessibilityHint
 }) {
   const styles = useThemeStyles(createStyles6);
+  const { width } = useWindowDimensions();
+  const triggerRef = useRef2(null);
+  const parsed = useMemo3(() => parseDropdownChildren(children), [children]);
+  const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
   const menuAccessibilityLabel = useMemo3(() => {
     if (accessibilityLabel) return accessibilityLabel;
     return typeof label === "string" ? label : "Menu";
   }, [accessibilityLabel, label]);
   const navigableItems = useMemo3(
-    () => items.filter((item) => isMenuItem(item)),
-    [items]
+    () => parsed.items.map((item) => ({
+      disabled: item.disabled,
+      label: item.label,
+      value: item.id
+    })),
+    [parsed.items]
   );
   const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
     items: navigableItems,
@@ -590,32 +758,96 @@ function Dropdown({
     defaultOpen,
     disabled,
     onOpenChange,
-    onSelect,
     getItemValue: (item) => item.value,
     getItemText: (item) => typeof item.label === "string" ? item.label : item.value
   });
+  useEffect2(() => {
+    if (!isOpen) return;
+    AccessibilityInfo.announceForAccessibility(
+      `${menuAccessibilityLabel} opened`
+    );
+  }, [isOpen, menuAccessibilityLabel]);
+  const focusTrigger = useCallback(() => {
+    if (typeof findNodeHandle !== "function") return;
+    const handle = findNodeHandle(triggerRef.current);
+    if (handle && AccessibilityInfo.setAccessibilityFocus) {
+      AccessibilityInfo.setAccessibilityFocus(handle);
+    }
+  }, []);
+  const closeAndFocusTrigger = useCallback(() => {
+    closeDropdown();
+    requestAnimationFrame(focusTrigger);
+  }, [closeDropdown, focusTrigger]);
   const handleSelect = useCallback(
-    (value) => {
-      onSelect?.(value);
-      closeDropdown();
+    (entry) => {
+      if (entry.disabled || loading) return;
+      const event = createDropdownSelectEvent();
+      entry.props.onSelect?.(event);
+      const shouldClose = entry.props.closeOnSelect ?? closeOnSelect;
+      if (!event.defaultPrevented && shouldClose) {
+        closeAndFocusTrigger();
+      }
     },
-    [closeDropdown, onSelect]
+    [closeAndFocusTrigger, closeOnSelect, loading]
   );
   const handleTriggerPress = useCallback(() => {
     toggleDropdown();
   }, [toggleDropdown]);
+  const renderEntry = useCallback(
+    ({ item }) => {
+      if (item.type === "label") {
+        return /* @__PURE__ */ jsx7(DropdownGroup, { label: item.props.children });
+      }
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsx7(DropdownSeparator, {});
+      }
+      if (item.type === "empty") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      if (item.type === "loading") {
+        return /* @__PURE__ */ jsx7(Text4, { style: styles.emptyText, children: item.props.children });
+      }
+      return /* @__PURE__ */ jsx7(
+        DropdownItem,
+        {
+          label: item.props.children,
+          value: item.props.value ?? item.id,
+          icon: item.props.icon,
+          danger: item.props.danger,
+          disabled: item.props.disabled,
+          textWrap: item.props.textWrap,
+          itemStyle,
+          textStyle,
+          onSelect: () => handleSelect(item)
+        }
+      );
+    },
+    [handleSelect, itemStyle, styles.emptyText, textStyle]
+  );
+  const data = loading ? [
+    {
+      type: "loading",
+      id: "loading",
+      props: { children: loadingText }
+    }
+  ] : parsed.entries;
+  const contentStyleFromSlot = parsed.contentProps?.style;
+  const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
   return /* @__PURE__ */ jsxs4(View4, { style: [styles.root, style], children: [
     /* @__PURE__ */ jsx7(
       DropdownTrigger,
       {
         label,
-        trigger,
+        trigger: trigger ?? parsed.trigger,
         icon,
         arrowIcon,
         showArrow,
-        disabled,
+        disabled: disabled || parsed.triggerProps?.disabled,
         isOpen,
         size,
+        triggerRef: (node) => {
+          triggerRef.current = node;
+        },
         triggerStyle,
         accessibilityLabel,
         accessibilityHint,
@@ -626,50 +858,82 @@ function Dropdown({
       DropdownContent,
       {
         isOpen,
-        onClose: closeDropdown,
-        contentStyle,
+        onClose: closeAndFocusTrigger,
+        contentStyle: [contentStyle, contentStyleFromSlot],
         accessibilityLabel: menuAccessibilityLabel,
-        children: items.map((item, index) => {
-          if (isGroup(item)) {
-            return /* @__PURE__ */ jsx7(
-              DropdownGroup,
-              {
-                label: item.label
-              },
-              `group-${item.label}-${index}`
-            );
-          }
-          if (isSeparator(item)) {
-            return /* @__PURE__ */ jsx7(DropdownSeparator, {}, `separator-${index}`);
-          }
-          if (!isMenuItem(item)) {
-            return null;
+        presentation: presentationFromSlot ?? resolvedPresentation,
+        children: /* @__PURE__ */ jsx7(
+          FlatList,
+          {
+            data,
+            keyExtractor: (item) => item.id,
+            renderItem: renderEntry,
+            keyboardShouldPersistTaps: "handled",
+            removeClippedSubviews: data.length > 24
           }
-          return /* @__PURE__ */ jsx7(
-            DropdownItem,
-            {
-              label: item.label,
-              value: item.value,
-              icon: item.icon,
-              danger: item.danger,
-              disabled: item.disabled,
-              textWrap: item.textWrap,
-              itemStyle,
-              textStyle,
-              onSelect: handleSelect
-            },
-            `${item.value}-${index}`
-          );
-        })
+        )
       }
     )
   ] });
 }
-Dropdown.displayName = "Dropdown";
+DropdownRoot.displayName = "Dropdown";
+function createDropdownSelectEvent() {
+  let defaultPrevented = false;
+  return {
+    preventDefault: () => {
+      defaultPrevented = true;
+    },
+    get defaultPrevented() {
+      return defaultPrevented;
+    }
+  };
+}
+var DropdownTriggerSlot = createDropdownSlot(
+  "trigger",
+  "Dropdown.Trigger"
+);
+var DropdownContentSlot = createDropdownSlot(
+  "content",
+  "Dropdown.Content"
+);
+var DropdownItemSlot = createDropdownSlot(
+  "item",
+  "Dropdown.Item"
+);
+var DropdownGroupSlot = createDropdownSlot(
+  "group",
+  "Dropdown.Group"
+);
+var DropdownLabelSlot = createDropdownSlot(
+  "label",
+  "Dropdown.Label"
+);
+var DropdownSeparatorSlot = createDropdownSlot(
+  "separator",
+  "Dropdown.Separator"
+);
+var DropdownEmptySlot = createDropdownSlot(
+  "empty",
+  "Dropdown.Empty"
+);
+var DropdownLoadingSlot = createDropdownSlot(
+  "loading",
+  "Dropdown.Loading"
+);
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTriggerSlot,
+  Content: DropdownContentSlot,
+  Item: DropdownItemSlot,
+  Group: DropdownGroupSlot,
+  Label: DropdownLabelSlot,
+  Separator: DropdownSeparatorSlot,
+  Empty: DropdownEmptySlot,
+  Loading: DropdownLoadingSlot
+});
 
 // src/components/Modal/Body/ModalBody.tsx
-import { Children, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
-import { Text as Text4, View as View5 } from "react-native";
+import { Children as Children2, cloneElement as cloneElement3, isValidElement as isValidElement4 } from "react";
+import { Text as Text5, View as View5 } from "react-native";
 
 // src/components/Modal/Body/ModalBody.styles.ts
 import { StyleSheet as StyleSheet7 } from "react-native";
@@ -693,10 +957,10 @@ var createStyles7 = (theme) => StyleSheet7.create({
 
 // src/components/Modal/Body/ModalBody.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var isTextElement = (child) => isValidElement3(child) && child.type === Text4;
-var renderBodyChildren = (children, textStyle) => Children.map(children, (child) => {
+var isTextElement = (child) => isValidElement4(child) && child.type === Text5;
+var renderBodyChildren = (children, textStyle) => Children2.map(children, (child) => {
   if (typeof child === "string" || typeof child === "number") {
-    return /* @__PURE__ */ jsx8(Text4, { style: textStyle, children: child });
+    return /* @__PURE__ */ jsx8(Text5, { style: textStyle, children: child });
   }
   if (!isTextElement(child)) {
     return child;
@@ -770,7 +1034,7 @@ ModalFooter.displayName = "ModalFooter";
 
 // src/components/Modal/Header/ModalHeader.tsx
 import { Close } from "@vellira-ui/icons";
-import { Pressable as Pressable4, Text as Text5, View as View8 } from "react-native";
+import { Pressable as Pressable4, Text as Text6, View as View8 } from "react-native";
 
 // src/components/Modal/ModalContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -829,7 +1093,7 @@ var ModalHeader = ({
   const styles = useThemeStyles(createStyles10);
   const { onClose } = useModalContext();
   return /* @__PURE__ */ jsxs5(View8, { style: [styles.header, style], children: [
-    /* @__PURE__ */ jsx11(Text5, { style: [styles.title, textStyle], children }),
+    /* @__PURE__ */ jsx11(Text6, { style: [styles.title, textStyle], children }),
     onClose && /* @__PURE__ */ jsx11(
       Pressable4,
       {
@@ -945,7 +1209,7 @@ import { View as View11 } from "react-native";
 
 // src/patterns/FormField/FormField.tsx
 import { useId } from "react";
-import { Text as Text6, View as View10 } from "react-native";
+import { Text as Text7, View as View10 } from "react-native";
 
 // src/patterns/FormField/FormField.styles.ts
 import { StyleSheet as StyleSheet12 } from "react-native";
@@ -1072,7 +1336,7 @@ function FormField({
       style: [styles.root, { gap: sizeTokens.gap }, style],
       children: [
         label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs7(
-          Text6,
+          Text7,
           {
             style: [
               styles.label,
@@ -1086,7 +1350,7 @@ function FormField({
             children: [
               label,
               required && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: styles.required,
                   accessible: false,
@@ -1095,7 +1359,7 @@ function FormField({
                 }
               ),
               !required && optionalText && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.optional,
@@ -1108,7 +1372,7 @@ function FormField({
                 }
               ),
               labelInfo && /* @__PURE__ */ jsx14(
-                Text6,
+                Text7,
                 {
                   style: [
                     styles.labelInfo,
@@ -1125,7 +1389,7 @@ function FormField({
         ) : /* @__PURE__ */ jsxs7(View10, { style: styles.customLabel, children: [
           label,
           required && /* @__PURE__ */ jsx14(
-            Text6,
+            Text7,
             {
               style: styles.required,
               accessible: false,
@@ -1137,7 +1401,7 @@ function FormField({
           labelInfo
         ] })),
         description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx14(
-          Text6,
+          Text7,
           {
             style: [
               styles.description,
@@ -1153,7 +1417,7 @@ function FormField({
         ) : description),
         /* @__PURE__ */ jsx14(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx14(View10, { style: [styles.control, { gap: sizeTokens.gap }, controlStyle], children }) }),
         error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx14(
-          Text6,
+          Text7,
           {
             accessibilityLiveRegion: "polite",
             style: [
@@ -1289,14 +1553,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 useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { FlatList as FlatList2, Pressable as Pressable10, Text as Text12, View as View21 } from "react-native";
 
 // src/components/Select/Group/SelectGroup.tsx
-import { Pressable as Pressable6, Text as 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 +1583,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 +1594,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 +1621,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);
@@ -1477,7 +1741,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 +1769,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,9 +1813,9 @@ 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";
@@ -1616,14 +1880,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 +1904,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 +1923,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 }) })
+        ] });
+      }
     }
   );
 };
@@ -2065,11 +2349,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 +2369,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,7 +2400,7 @@ var SelectLoadingState = () => {
 SelectLoadingState.displayName = "Select.LoadingState";
 
 // src/components/Select/Content/SelectSearch.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { Close as Close2, Search } from "@vellira-ui/icons";
 import { Pressable as Pressable9, TextInput, View as View20 } from "react-native";
 
@@ -2159,7 +2443,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 +2466,7 @@ var SelectSearchField = () => {
     virtual
   } = useSelectContext();
   const shouldAutoFocus = !virtual || selectedRowIndex === 0;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!shouldAutoFocus) return;
     const focusTimer = setTimeout(() => {
       searchInputRef.current?.focus();
@@ -2233,7 +2517,7 @@ var SelectSearchField = () => {
           {
             width: 14,
             height: 14,
-            color: theme.semantic.status.error.fg
+            color: theme.components.select.clearButton.hoverFg
           }
         )
       }
@@ -2250,7 +2534,7 @@ var SelectContent = createSelectSlot(
 );
 var SelectContentSurface = () => {
   const styles = useThemeStyles(createContentStyles);
-  const wasOpenRef = useRef2(false);
+  const wasOpenRef = useRef3(false);
   const [openCycle, setOpenCycle] = useState2(0);
   const context = useSelectContext();
   const {
@@ -2278,7 +2562,7 @@ var SelectContentSurface = () => {
   } = context;
   const shouldSeedSelectedPosition = Boolean(context.virtual) && selectedRowIndex > 0 && query === "";
   const initialScrollIndex = shouldSeedSelectedPosition ? selectedRowIndex : void 0;
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen && !wasOpenRef.current) {
       setOpenCycle((cycle) => cycle + 1);
     }
@@ -2339,10 +2623,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 +2635,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 +2643,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 +2704,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 useMemo6, useRef as useRef4, useState as useState4 } from "react";
 import { useSelect } from "@vellira-ui/core";
 import { View as View23 } from "react-native";
 
 // src/components/Select/internal/useSelectAccessibility.ts
-import { AccessibilityInfo } from "react-native";
+import { AccessibilityInfo as AccessibilityInfo2 } from "react-native";
 var useSelectAccessibility = ({
   accessibilityLabel,
   accessibilityHint,
@@ -2446,7 +2730,7 @@ var useSelectAccessibility = ({
     resolvedLabel,
     resolvedHint,
     announce: (message) => {
-      AccessibilityInfo.announceForAccessibility?.(message);
+      AccessibilityInfo2.announceForAccessibility?.(message);
     }
   };
 };
@@ -2483,9 +2767,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 +2777,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 useEffect5, useMemo as useMemo5, useState as useState3 } from "react";
 var useSelectSearch = ({
   rows,
   isOpen,
@@ -2533,7 +2817,7 @@ var useSelectSearch = ({
       return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
     });
   }, [filter, query, rows, shouldFilter]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isOpen) {
       setQuery("");
       return;
@@ -2557,9 +2841,9 @@ 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";
@@ -2638,7 +2922,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 +2971,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 +2984,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 +3045,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 +3068,7 @@ function SelectTrigger({
               {
                 width: 14,
                 height: 14,
-                color: theme.semantic.status.error.fg
+                color: theme.components.select.clearButton.hoverFg
               }
             )
           }
@@ -2872,8 +3156,8 @@ function SelectRoot(props) {
   const field = useFormFieldContext();
   const hasOwnField = Boolean(label || description || error);
   const [triggerWidth, setTriggerWidth] = useState4();
-  const searchInputRef = useRef3(null);
-  const selectedFocusValueRef = useRef3(void 0);
+  const searchInputRef = useRef4(null);
+  const selectedFocusValueRef = useRef4(void 0);
   const resolvedPresentation = useSelectPresentation(presentation);
   const {
     options,
@@ -3284,8 +3568,8 @@ 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";
@@ -3426,7 +3710,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 +3758,7 @@ var Tab = ({
         ),
         icon != null && /* @__PURE__ */ jsx32(View26, { style: styles.tabIcon, children: renderedIcon }),
         children != null && /* @__PURE__ */ jsx32(
-          Text13,
+          Text14,
           {
             numberOfLines: 2,
             ellipsizeMode: "tail",
@@ -3559,20 +3843,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 useEffect6, useRef as useRef6, useState as useState6 } from "react";
+import { Modal as Modal6, Pressable as Pressable13, Text as Text15, View as View28 } from "react-native";
 
 // src/hooks/useNativeFloatingPosition.ts
-import { useCallback as useCallback2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useRef as useRef5, useState as useState5 } from "react";
 import { Dimensions } from "react-native";
 var safePadding = 12;
 function useNativeFloatingPosition(placement = "top", offset = 8) {
   const [position, setPosition] = useState5({ top: 0, left: 0 });
-  const floatingSizeRef = useRef4({
+  const floatingSizeRef = useRef5({
     width: 0,
     height: 0
   });
-  const lastTriggerRef = useRef4(null);
+  const lastTriggerRef = useRef5(null);
   const clamp = useCallback2((value, min, max) => {
     return Math.min(Math.max(value, min), Math.max(min, max));
   }, []);
@@ -3681,8 +3965,8 @@ function Tooltip({
 }) {
   const styles = useThemeStyles(createStyles18);
   const [visible, setVisible] = useState6(false);
-  const triggerRef = useRef5(null);
-  const closeTimerRef = useRef5(null);
+  const triggerRef = useRef6(null);
+  const closeTimerRef = useRef6(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
   const hideDelay = delay?.close ?? 2500;
   const clearCloseTimer = () => {
@@ -3701,7 +3985,7 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect5(() => {
+  useEffect6(() => {
     return clearCloseTimer;
   }, []);
   return /* @__PURE__ */ jsxs19(View28, { style: [styles.root, style], children: [
@@ -3728,7 +4012,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
           }
         )
       }
@@ -3739,7 +4023,7 @@ 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 { ActivityIndicator as ActivityIndicator3, Pressable as Pressable14, Text as Text16, View as View29 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -3953,7 +4237,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 +4253,7 @@ function Button({
               }
             ),
             measureLabel && /* @__PURE__ */ jsx35(
-              Text15,
+              Text16,
               {
                 accessibilityElementsHidden: true,
                 importantForAccessibility: "no-hide-descendants",
@@ -3987,7 +4271,7 @@ function Button({
             )
           ] }),
           badge && !iconOnly && /* @__PURE__ */ jsx35(
-            Text15,
+            Text16,
             {
               style: [
                 styles.badge,
@@ -4000,7 +4284,7 @@ function Button({
             }
           ),
           shortcut && !iconOnly && /* @__PURE__ */ jsx35(
-            Text15,
+            Text16,
             {
               style: [
                 styles.shortcut,
@@ -4019,10 +4303,10 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect6 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect7 } 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";
@@ -4227,7 +4511,7 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect6(() => {
+    useEffect7(() => {
       devWarning(
         Boolean(resolvedAccessibilityLabel),
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
@@ -4291,7 +4575,7 @@ var Checkbox = forwardRef2(
                 }
               ),
               label && /* @__PURE__ */ jsxs21(
-                Text16,
+                Text17,
                 {
                   style: [
                     styles.label,
@@ -4304,7 +4588,7 @@ var Checkbox = forwardRef2(
                   ],
                   children: [
                     label,
-                    required && /* @__PURE__ */ jsx36(Text16, { style: styles.requiredMark, children: " *" })
+                    required && /* @__PURE__ */ jsx36(Text17, { style: styles.requiredMark, children: " *" })
                   ]
                 }
               )
@@ -4313,7 +4597,7 @@ var Checkbox = forwardRef2(
         }
       ),
       description && /* @__PURE__ */ jsx36(
-        Text16,
+        Text17,
         {
           style: [
             styles.descriptionText,
@@ -4323,7 +4607,7 @@ 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 })
     ] });
   }
 );
@@ -4331,7 +4615,7 @@ 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 { 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";
@@ -4712,7 +4996,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 +5006,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,11 +5044,11 @@ 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 useEffect8 } 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";
 
@@ -4929,7 +5213,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect7(() => {
+    useEffect8(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."
@@ -5017,7 +5301,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 +5323,7 @@ var Radio = forwardRef4(
                 }
               ) : label),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx38(
-                Text18,
+                Text19,
                 {
                   style: [
                     styles.description,
@@ -5058,7 +5342,7 @@ var Radio = forwardRef4(
         }
       ),
       error && /* @__PURE__ */ jsx38(
-        Text18,
+        Text19,
         {
           accessibilityLiveRegion: "polite",
           style: [