@vellira-ui/react-native 2.33.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";
@@ -138,29 +146,92 @@ function DropdownContent({
 }) {
   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: isSheet ? "slide" : "fade",
+      animationType: "none",
       onRequestClose: onClose,
       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, styles[`${presentation}Menu`], contentStyle],
+            style: [
+              styles.menu,
+              styles[`${presentation}Menu`],
+              contentStyle,
+              menuAnimatedStyle
+            ],
             children
           }
         )
@@ -171,10 +242,10 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
 import { useDropdown } from "@vellira-ui/core";
 import {
-  AccessibilityInfo,
+  AccessibilityInfo as AccessibilityInfo2,
   findNodeHandle,
   FlatList,
   Text as Text4,
@@ -186,8 +257,8 @@ import {
 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],
@@ -304,8 +375,8 @@ 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,
@@ -433,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
@@ -453,16 +524,16 @@ DropdownSeparator.displayName = "DropdownSeparator";
 import {
   cloneElement as cloneElement2,
   isValidElement as isValidElement3,
-  useEffect,
-  useRef,
-  useState
+  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",
@@ -590,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
@@ -680,7 +751,7 @@ function DropdownTrigger({
           }
         )),
         showArrow && /* @__PURE__ */ jsx6(
-          Animated.View,
+          Animated2.View,
           {
             style: [styles.arrow, { transform: [{ rotate: arrowRotate }] }],
             children: arrow
@@ -693,8 +764,8 @@ function DropdownTrigger({
 DropdownTrigger.displayName = "DropdownTrigger";
 
 // src/components/Dropdown/Dropdown.styles.ts
-import { StyleSheet as StyleSheet6 } from "react-native";
-var createStyles6 = (theme) => StyleSheet6.create({
+import { StyleSheet as StyleSheet7 } from "react-native";
+var createStyles6 = (theme) => StyleSheet7.create({
   root: {
     alignSelf: "flex-start"
   },
@@ -737,14 +808,14 @@ function DropdownRoot({
 }) {
   const styles = useThemeStyles(createStyles6);
   const { width } = useWindowDimensions();
-  const triggerRef = useRef2(null);
-  const parsed = useMemo3(() => parseDropdownChildren(children), [children]);
+  const triggerRef = useRef3(null);
+  const parsed = useMemo4(() => parseDropdownChildren(children), [children]);
   const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
-  const menuAccessibilityLabel = useMemo3(() => {
+  const menuAccessibilityLabel = useMemo4(() => {
     if (accessibilityLabel) return accessibilityLabel;
     return typeof label === "string" ? label : "Menu";
   }, [accessibilityLabel, label]);
-  const navigableItems = useMemo3(
+  const navigableItems = useMemo4(
     () => parsed.items.map((item) => ({
       disabled: item.disabled,
       label: item.label,
@@ -761,17 +832,17 @@ function DropdownRoot({
     getItemValue: (item) => item.value,
     getItemText: (item) => typeof item.label === "string" ? item.label : item.value
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isOpen) return;
-    AccessibilityInfo.announceForAccessibility(
+    AccessibilityInfo2.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);
+    if (handle && AccessibilityInfo2.setAccessibilityFocus) {
+      AccessibilityInfo2.setAccessibilityFocus(handle);
     }
   }, []);
   const closeAndFocusTrigger = useCallback(() => {
@@ -936,8 +1007,8 @@ import { Children as Children2, cloneElement as cloneElement3, isValidElement as
 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]
   },
@@ -979,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,
@@ -1014,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],
@@ -1050,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",
@@ -1118,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,
@@ -1127,7 +1198,7 @@ var createStyles11 = (theme) => StyleSheet11.create({
     padding: theme.tokens.spacing[5]
   },
   backdrop: {
-    ...StyleSheet11.absoluteFill,
+    ...StyleSheet12.absoluteFill,
     backgroundColor: theme.components.modal.overlay.bg
   }
 });
@@ -1212,9 +1283,9 @@ import { useId } from "react";
 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,
@@ -1438,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,
@@ -1553,7 +1624,7 @@ var RadioGroup = forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Content/SelectContent.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+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
@@ -1691,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],
@@ -1818,8 +1889,8 @@ import { Check } from "@vellira-ui/icons";
 import { Pressable as Pressable7, Text as Text9, View as View13 } from "react-native";
 
 // src/components/Select/Item/SelectItem.styles.ts
-import { StyleSheet as StyleSheet15 } from "react-native";
-var createItemStyles = (theme) => StyleSheet15.create({
+import { StyleSheet as StyleSheet16 } from "react-native";
+var createItemStyles = (theme) => StyleSheet16.create({
   option: {
     minHeight: 44,
     flexDirection: "row",
@@ -2017,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
   },
@@ -2040,7 +2111,7 @@ var createPresentationStyles = (theme) => StyleSheet16.create({
     justifyContent: "flex-end"
   },
   backdrop: {
-    ...StyleSheet16.absoluteFill,
+    ...StyleSheet17.absoluteFill,
     backgroundColor: theme.semantic.overlay.backdrop
   },
   content: {
@@ -2274,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",
@@ -2400,13 +2471,13 @@ var SelectLoadingState = () => {
 SelectLoadingState.displayName = "Select.LoadingState";
 
 // src/components/Select/Content/SelectSearch.tsx
-import { useEffect as useEffect3 } 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",
@@ -2466,7 +2537,7 @@ var SelectSearchField = () => {
     virtual
   } = useSelectContext();
   const shouldAutoFocus = !virtual || selectedRowIndex === 0;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!shouldAutoFocus) return;
     const focusTimer = setTimeout(() => {
       searchInputRef.current?.focus();
@@ -2534,8 +2605,8 @@ var SelectContent = createSelectSlot(
 );
 var SelectContentSurface = () => {
   const styles = useThemeStyles(createContentStyles);
-  const wasOpenRef = useRef3(false);
-  const [openCycle, setOpenCycle] = useState2(0);
+  const wasOpenRef = useRef4(false);
+  const [openCycle, setOpenCycle] = useState3(0);
   const context = useSelectContext();
   const {
     isOpen,
@@ -2562,7 +2633,7 @@ var SelectContentSurface = () => {
   } = context;
   const shouldSeedSelectedPosition = Boolean(context.virtual) && selectedRowIndex > 0 && query === "";
   const initialScrollIndex = shouldSeedSelectedPosition ? selectedRowIndex : void 0;
-  useEffect4(() => {
+  useEffect5(() => {
     if (isOpen && !wasOpenRef.current) {
       setOpenCycle((cycle) => cycle + 1);
     }
@@ -2704,12 +2775,12 @@ var SelectContentSurface = () => {
 SelectContentSurface.displayName = "Select.ContentSurface";
 
 // src/components/Select/Root/SelectRoot.tsx
-import { useMemo as useMemo6, useRef as useRef4, 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 as AccessibilityInfo2 } from "react-native";
+import { AccessibilityInfo as AccessibilityInfo3 } from "react-native";
 var useSelectAccessibility = ({
   accessibilityLabel,
   accessibilityHint,
@@ -2730,23 +2801,23 @@ var useSelectAccessibility = ({
     resolvedLabel,
     resolvedHint,
     announce: (message) => {
-      AccessibilityInfo2.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;
     }
@@ -2777,7 +2848,7 @@ var useSelectPresentation = (presentation = "auto") => {
 };
 
 // src/components/Select/internal/useSelectSearch.ts
-import { useEffect as useEffect5, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState4 } from "react";
 var useSelectSearch = ({
   rows,
   isOpen,
@@ -2787,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;
@@ -2817,7 +2888,7 @@ var useSelectSearch = ({
       return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
     });
   }, [filter, query, rows, shouldFilter]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) {
       setQuery("");
       return;
@@ -2846,8 +2917,8 @@ import { ChevronDown as ChevronDown2, Close as Close3 } from "@vellira-ui/icons"
 import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable11, Text as Text13, View as View22 } from "react-native";
 
 // src/components/Select/Trigger/SelectTrigger.styles.ts
-import { StyleSheet as StyleSheet19 } from "react-native";
-var createTriggerStyles = (theme) => StyleSheet19.create({
+import { StyleSheet as StyleSheet20 } from "react-native";
+var createTriggerStyles = (theme) => StyleSheet20.create({
   trigger: {
     width: "100%",
     minWidth: 0,
@@ -3155,9 +3226,9 @@ function SelectRoot(props) {
   } = props;
   const field = useFormFieldContext();
   const hasOwnField = Boolean(label || description || error);
-  const [triggerWidth, setTriggerWidth] = useState4();
-  const searchInputRef = useRef4(null);
-  const selectedFocusValueRef = useRef4(void 0);
+  const [triggerWidth, setTriggerWidth] = useState5();
+  const searchInputRef = useRef5(null);
+  const selectedFocusValueRef = useRef5(void 0);
   const resolvedPresentation = useSelectPresentation(presentation);
   const {
     options,
@@ -3210,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])
     ),
@@ -3235,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,
@@ -3469,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",
@@ -3520,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,
@@ -3572,9 +3643,9 @@ import { cloneElement as cloneElement6, isValidElement as isValidElement8 } from
 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",
@@ -3779,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
@@ -3817,7 +3888,7 @@ var TabsRoot = ({
     onChange,
     orientation
   });
-  const value = useMemo7(
+  const value = useMemo8(
     () => ({ activeIndex, appearance, orientation, setActiveIndex }),
     [activeIndex, appearance, orientation, setActiveIndex]
   );
@@ -3843,20 +3914,20 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
+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 useRef5, 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 = useRef5({
+  const [position, setPosition] = useState6({ top: 0, left: 0 });
+  const floatingSizeRef = useRef6({
     width: 0,
     height: 0
   });
-  const lastTriggerRef = useRef5(null);
+  const lastTriggerRef = useRef6(null);
   const clamp = useCallback2((value, min, max) => {
     return Math.min(Math.max(value, min), Math.max(min, max));
   }, []);
@@ -3913,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",
@@ -3964,9 +4035,9 @@ function Tooltip({
   textStyle
 }) {
   const styles = useThemeStyles(createStyles18);
-  const [visible, setVisible] = useState6(false);
-  const triggerRef = useRef6(null);
-  const closeTimerRef = useRef6(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 = () => {
@@ -3985,7 +4056,7 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect6(() => {
+  useEffect7(() => {
     return clearCloseTimer;
   }, []);
   return /* @__PURE__ */ jsxs19(View28, { style: [styles.root, style], children: [
@@ -4022,7 +4093,7 @@ function Tooltip({
 Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
-import { cloneElement as cloneElement7, useState as useState7 } from "react";
+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
@@ -4033,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",
@@ -4156,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;
@@ -4303,14 +4374,14 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect7 } 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 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]
   },
@@ -4511,7 +4582,7 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    useEffect7(() => {
+    useEffect8(() => {
       devWarning(
         Boolean(resolvedAccessibilityLabel),
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
@@ -4614,14 +4685,14 @@ var Checkbox = forwardRef2(
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as cloneElement8, forwardRef as forwardRef3, useState as useState8 } from "react";
+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%",
@@ -4866,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;
@@ -4884,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);
@@ -5044,7 +5115,7 @@ var Input = forwardRef3(
 Input.displayName = "Input";
 
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect8 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect9 } from "react";
 import { useControllableState as useControllableState4 } from "@vellira-ui/core";
 import {
   Pressable as Pressable17,
@@ -5053,8 +5124,8 @@ import {
 } 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"
   },
@@ -5213,7 +5284,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect8(() => {
+    useEffect9(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.33.0",
+  "version": "2.34.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",