@vellira-ui/react-native 2.25.1 → 2.26.0

package/dist/index.js

@@ -66,7 +66,6 @@ function useThemeStyles(createStyles25) {
 }
 
 // src/components/Dropdown/Content/DropdownContent.styles.ts
-import { overlay } from "@vellira-ui/tokens";
 import { StyleSheet } from "react-native";
 var createStyles = (theme) => StyleSheet.create({
   modalRoot: {
@@ -75,7 +74,7 @@ var createStyles = (theme) => StyleSheet.create({
   },
   backdrop: {
     ...StyleSheet.absoluteFill,
-    backgroundColor: overlay.backdrop
+    backgroundColor: theme.semantic.overlay.backdrop
   },
   menu: {
     maxHeight: "50%",
@@ -85,7 +84,15 @@ var createStyles = (theme) => StyleSheet.create({
     borderColor: theme.components.dropdown.content.border,
     borderTopLeftRadius: theme.tokens.radius.lg,
     borderTopRightRadius: theme.tokens.radius.lg,
-    borderWidth: 1
+    borderWidth: 1,
+    shadowColor: "#000000",
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.24,
+    shadowRadius: 16,
+    elevation: 12
   }
 });
 
@@ -94,7 +101,9 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DropdownContent({
   isOpen,
   children,
-  onClose
+  onClose,
+  contentStyle,
+  accessibilityLabel
 }) {
   const styles = useThemeStyles(createStyles);
   return /* @__PURE__ */ jsx2(
@@ -114,7 +123,15 @@ function DropdownContent({
             onPress: onClose
           }
         ),
-        /* @__PURE__ */ jsx2(View, { accessibilityRole: "menu", style: styles.menu, children })
+        /* @__PURE__ */ jsx2(
+          View,
+          {
+            accessibilityRole: "menu",
+            accessibilityLabel,
+            style: [styles.menu, contentStyle],
+            children
+          }
+        )
       ] })
     }
   );
@@ -122,7 +139,8 @@ function DropdownContent({
 DropdownContent.displayName = "DropdownContent";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useState as useState2 } from "react";
+import { useCallback, useMemo as useMemo3 } from "react";
+import { useDropdown } from "@vellira-ui/core";
 import { View as View4 } from "react-native";
 
 // src/components/Dropdown/Group/DropdownGroup.tsx
@@ -146,11 +164,12 @@ var createStyles2 = (theme) => StyleSheet2.create({
 import { jsx as jsx3 } from "react/jsx-runtime";
 function DropdownGroup({ label }) {
   const styles = useThemeStyles(createStyles2);
-  return /* @__PURE__ */ jsx3(Text, { style: styles.groupLabel, children: label });
+  return /* @__PURE__ */ jsx3(Text, { accessibilityRole: "header", style: styles.groupLabel, children: label });
 }
 DropdownGroup.displayName = "DropdownGroup";
 
 // src/components/Dropdown/Item/DropdownItem.tsx
+import { cloneElement, isValidElement } from "react";
 import { Pressable as Pressable2, Text as Text2 } from "react-native";
 
 // src/components/Dropdown/Item/DropdownItem.styles.ts
@@ -167,13 +186,16 @@ var createStyles3 = (theme) => StyleSheet3.create({
     borderRadius: theme.tokens.radius.sm
   },
   itemPressed: {
-    backgroundColor: theme.components.dropdown.item.hover.bg
+    backgroundColor: theme.components.dropdown.item.pressed.bg
   },
   itemDisabled: {
     backgroundColor: theme.components.dropdown.item.disabled.bg
   },
+  itemDanger: {
+    backgroundColor: theme.components.dropdown.item.danger.default.bg
+  },
   itemDangerPressed: {
-    backgroundColor: theme.components.dropdown.item.danger.hover.bg
+    backgroundColor: theme.components.dropdown.item.danger.active.bg
   },
   itemText: {
     flex: 1,
@@ -181,18 +203,24 @@ var createStyles3 = (theme) => StyleSheet3.create({
     color: theme.components.dropdown.item.default.fg,
     fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.md,
-    lineHeight: 24
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  itemTextPressed: {
+    color: theme.components.dropdown.item.pressed.fg
   },
   itemTextDisabled: {
     color: theme.components.dropdown.item.disabled.fg
   },
-  dangerText: {
+  itemTextDanger: {
     color: theme.components.dropdown.item.danger.default.fg
+  },
+  itemTextDangerPressed: {
+    color: theme.components.dropdown.item.danger.active.fg
   }
 });
 
 // src/components/Dropdown/Item/DropdownItem.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function DropdownItem({
   label,
   value,
@@ -204,13 +232,39 @@ function DropdownItem({
   textStyle,
   onSelect
 }) {
+  const { theme } = useTheme();
   const styles = useThemeStyles(createStyles3);
-  return /* @__PURE__ */ jsxs2(
+  const renderColoredNode = (node, color) => {
+    if (!isValidElement(node)) return node;
+    return cloneElement(node, { color });
+  };
+  const getContentColor = (pressed) => {
+    if (disabled) {
+      return theme.components.dropdown.item.disabled.fg;
+    }
+    if (danger) {
+      return pressed ? theme.components.dropdown.item.danger.active.fg : theme.components.dropdown.item.danger.default.fg;
+    }
+    return pressed ? theme.components.dropdown.item.pressed.fg : theme.components.dropdown.item.default.fg;
+  };
+  const getBackgroundColor = (pressed) => {
+    if (disabled) {
+      return theme.components.dropdown.item.disabled.bg;
+    }
+    if (danger) {
+      return pressed ? theme.components.dropdown.item.danger.active.bg : theme.components.dropdown.item.danger.default.bg;
+    }
+    return pressed ? theme.components.dropdown.item.pressed.bg : theme.components.dropdown.item.default.bg;
+  };
+  const accessibilityLabel = typeof label === "string" ? label : value;
+  const numberOfLines = textWrap === "wrap" ? void 0 : 1;
+  const ellipsizeMode = textWrap === "truncate" ? "tail" : "clip";
+  return /* @__PURE__ */ jsx4(
     Pressable2,
     {
       disabled,
       accessibilityRole: "menuitem",
-      accessibilityLabel: label,
+      accessibilityLabel,
       accessibilityState: { disabled },
       onPress: () => {
         if (disabled) return;
@@ -218,27 +272,26 @@ function DropdownItem({
       },
       style: ({ pressed }) => [
         styles.item,
-        pressed && styles.itemPressed,
-        disabled && styles.itemDisabled,
-        pressed && danger && !disabled && styles.itemDangerPressed,
+        {
+          backgroundColor: getBackgroundColor(pressed)
+        },
         itemStyle
       ],
-      children: [
-        icon,
-        /* @__PURE__ */ jsx4(
-          Text2,
-          {
-            numberOfLines: textWrap === "wrap" ? void 0 : 1,
-            style: [
-              styles.itemText,
-              danger && styles.dangerText,
-              disabled && styles.itemTextDisabled,
-              textStyle
-            ],
-            children: label
-          }
-        )
-      ]
+      children: ({ pressed }) => {
+        const contentColor = getContentColor(pressed);
+        return /* @__PURE__ */ jsxs2(Fragment, { children: [
+          icon ? renderColoredNode(icon, contentColor) : null,
+          /* @__PURE__ */ jsx4(
+            Text2,
+            {
+              numberOfLines,
+              ellipsizeMode,
+              style: [styles.itemText, { color: contentColor }, textStyle],
+              children: label
+            }
+          )
+        ] });
+      }
     }
   );
 }
@@ -266,8 +319,8 @@ DropdownSeparator.displayName = "DropdownSeparator";
 
 // src/components/Dropdown/Trigger/DropdownTrigger.tsx
 import {
-  cloneElement,
-  isValidElement,
+  cloneElement as cloneElement2,
+  isValidElement as isValidElement2,
   useEffect,
   useRef,
   useState
@@ -279,41 +332,88 @@ import { Animated, Pressable as Pressable3, Text as Text3, View as View3 } from
 import { StyleSheet as StyleSheet5 } from "react-native";
 var createStyles5 = (theme) => StyleSheet5.create({
   trigger: {
-    minWidth: 32,
-    minHeight: 32,
     alignItems: "center",
-    justifyContent: "space-between",
+    justifyContent: "center",
     flexDirection: "row",
     gap: theme.tokens.spacing[2],
-    padding: theme.tokens.spacing[2],
     backgroundColor: theme.components.dropdown.trigger.default.bg,
     borderColor: theme.components.dropdown.trigger.default.border,
     borderRadius: theme.tokens.radius.lg,
     borderWidth: 2
   },
+  sm: {
+    minWidth: 36,
+    minHeight: 36,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2]
+  },
+  md: {
+    minWidth: 44,
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3]
+  },
+  lg: {
+    minWidth: 52,
+    minHeight: 52,
+    paddingHorizontal: theme.tokens.spacing[5],
+    paddingVertical: theme.tokens.spacing[4]
+  },
   iconOnly: {
-    width: 42,
-    height: 42,
-    padding: theme.tokens.spacing[2],
     borderRadius: theme.tokens.radius.full
   },
+  smIconOnly: {
+    width: 36,
+    height: 36,
+    minWidth: 36,
+    minHeight: 36,
+    padding: 0
+  },
+  mdIconOnly: {
+    width: 44,
+    height: 44,
+    minWidth: 44,
+    minHeight: 44,
+    padding: 0
+  },
+  lgIconOnly: {
+    width: 52,
+    height: 52,
+    minWidth: 52,
+    minHeight: 52,
+    padding: 0
+  },
+  triggerPressed: {
+    backgroundColor: theme.components.dropdown.trigger.hover.bg,
+    borderColor: theme.components.dropdown.trigger.hover.border
+  },
   triggerDisabled: {
     backgroundColor: theme.components.dropdown.trigger.disabled.bg,
     borderColor: theme.components.dropdown.trigger.disabled.border,
     borderStyle: "dashed"
   },
-  triggerPressed: {
-    backgroundColor: theme.components.dropdown.trigger.hover.bg
-  },
   triggerText: {
     color: theme.components.dropdown.trigger.default.fg,
-    fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
+    fontFamily: theme.tokens.typography.family.regular
+  },
+  triggerTextPressed: {
+    color: theme.components.dropdown.trigger.hover.fg
   },
   triggerTextDisabled: {
     color: theme.components.dropdown.trigger.disabled.fg
   },
+  textSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  textMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  textLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
   icon: {
     alignItems: "center",
     justifyContent: "center"
@@ -334,13 +434,26 @@ function DropdownTrigger({
   icon,
   arrowIcon,
   showArrow = true,
+  size = "md",
   disabled = false,
   isOpen,
   triggerStyle,
+  accessibilityLabel,
+  accessibilityHint,
   onPress
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles5);
+  const textSizeStyle = {
+    sm: styles.textSm,
+    md: styles.textMd,
+    lg: styles.textLg
+  }[size];
+  const iconOnlySizeStyle = {
+    sm: styles.smIconOnly,
+    md: styles.mdIconOnly,
+    lg: styles.lgIconOnly
+  }[size];
   const hasIcon = Boolean(icon);
   const isIconOnly = !trigger && hasIcon && !showArrow;
   const [isPressed, setIsPressed] = useState(false);
@@ -364,6 +477,7 @@ function DropdownTrigger({
           numberOfLines: 1,
           style: [
             styles.triggerText,
+            textSizeStyle,
             { color },
             disabled && styles.triggerTextDisabled
           ],
@@ -371,8 +485,8 @@ function DropdownTrigger({
         }
       );
     }
-    if (!isValidElement(node)) return node;
-    return cloneElement(node, { color });
+    if (!isValidElement2(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 });
@@ -382,16 +496,19 @@ function DropdownTrigger({
     {
       disabled,
       accessibilityRole: "button",
-      accessibilityLabel: label,
+      accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+      accessibilityHint,
       accessibilityState: { expanded: isOpen, disabled },
       onPress,
       onPressIn: () => setIsPressed(true),
       onPressOut: () => setIsPressed(false),
       style: [
         styles.trigger,
+        styles[size],
+        isIconOnly && styles.iconOnly,
+        isIconOnly && iconOnlySizeStyle,
         isPressed && !disabled && styles.triggerPressed,
         disabled && styles.triggerDisabled,
-        isIconOnly && styles.iconOnly,
         triggerStyle
       ],
       children: [
@@ -402,6 +519,7 @@ function DropdownTrigger({
             numberOfLines: 1,
             style: [
               styles.triggerText,
+              textSizeStyle,
               { color: contentColor },
               disabled && styles.triggerTextDisabled
             ],
@@ -430,6 +548,7 @@ var createStyles6 = () => StyleSheet6.create({
 });
 
 // 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";
 
@@ -443,19 +562,48 @@ function Dropdown({
   showArrow = true,
   items,
   onSelect,
+  open,
+  defaultOpen = false,
+  onOpenChange,
   disabled = false,
+  size = "md",
   style,
   triggerStyle,
+  contentStyle,
   itemStyle,
-  textStyle
+  textStyle,
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const styles = useThemeStyles(createStyles6);
-  const [isOpen, setIsOpen] = useState2(false);
-  const close = () => setIsOpen(false);
-  const handleSelect = (value) => {
-    onSelect?.(value);
-    close();
-  };
+  const menuAccessibilityLabel = useMemo3(() => {
+    if (accessibilityLabel) return accessibilityLabel;
+    return typeof label === "string" ? label : "Menu";
+  }, [accessibilityLabel, label]);
+  const navigableItems = useMemo3(
+    () => items.filter((item) => isMenuItem(item)),
+    [items]
+  );
+  const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
+    items: navigableItems,
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    onSelect,
+    getItemValue: (item) => item.value,
+    getItemText: (item) => typeof item.label === "string" ? item.label : item.value
+  });
+  const handleSelect = useCallback(
+    (value) => {
+      onSelect?.(value);
+      closeDropdown();
+    },
+    [closeDropdown, onSelect]
+  );
+  const handleTriggerPress = useCallback(() => {
+    toggleDropdown();
+  }, [toggleDropdown]);
   return /* @__PURE__ */ jsxs4(View4, { style: [styles.root, style], children: [
     /* @__PURE__ */ jsx7(
       DropdownTrigger,
@@ -467,48 +615,60 @@ function Dropdown({
         showArrow,
         disabled,
         isOpen,
+        size,
         triggerStyle,
-        onPress: () => {
-          if (disabled) return;
-          setIsOpen(true);
-        }
+        accessibilityLabel,
+        accessibilityHint,
+        onPress: handleTriggerPress
       }
     ),
-    /* @__PURE__ */ jsx7(DropdownContent, { isOpen, onClose: close, 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}`);
+    /* @__PURE__ */ jsx7(
+      DropdownContent,
+      {
+        isOpen,
+        onClose: closeDropdown,
+        contentStyle,
+        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;
+          }
+          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}`
+          );
+        })
       }
-      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
-      );
-    }) })
+    )
   ] });
 }
 Dropdown.displayName = "Dropdown";
 
 // src/components/Modal/Body/ModalBody.tsx
-import { Children, cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
+import { Children, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
 import { Text as Text4, View as View5 } from "react-native";
 
 // src/components/Modal/Body/ModalBody.styles.ts
@@ -522,12 +682,18 @@ var createStyles7 = (theme) => StyleSheet7.create({
     fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.md,
     lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  description: {
+    color: theme.components.modal.description.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
   }
 });
 
 // src/components/Modal/Body/ModalBody.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var isTextElement = (child) => isValidElement2(child) && child.type === Text4;
+var isTextElement = (child) => isValidElement3(child) && child.type === Text4;
 var renderBodyChildren = (children, textStyle) => Children.map(children, (child) => {
   if (typeof child === "string" || typeof child === "number") {
     return /* @__PURE__ */ jsx8(Text4, { style: textStyle, children: child });
@@ -535,7 +701,7 @@ var renderBodyChildren = (children, textStyle) => Children.map(children, (child)
   if (!isTextElement(child)) {
     return child;
   }
-  return cloneElement2(child, {
+  return cloneElement3(child, {
     style: [textStyle, child.props.style]
   });
 });
@@ -552,15 +718,15 @@ import { View as View6 } from "react-native";
 import { StyleSheet as StyleSheet8 } from "react-native";
 var createStyles8 = (theme) => StyleSheet8.create({
   content: {
-    minWidth: 320,
+    width: "100%",
     maxWidth: 600,
     maxHeight: "90%",
     padding: theme.tokens.spacing[4],
+    gap: theme.tokens.spacing[4],
     backgroundColor: theme.components.modal.content.bg,
     borderColor: theme.components.modal.content.border,
     borderRadius: theme.tokens.radius.lg,
     borderWidth: 1,
-    gap: theme.tokens.spacing[4],
     shadowColor: theme.tokens.shadows.lg.color,
     shadowOffset: {
       width: theme.tokens.shadows.lg.x,
@@ -627,23 +793,28 @@ var createStyles10 = (theme) => StyleSheet10.create({
     flexDirection: "row",
     gap: theme.tokens.spacing[3],
     justifyContent: "space-between",
-    paddingBottom: theme.tokens.spacing[4],
-    backgroundColor: theme.components.modal.content.bg
+    paddingBottom: theme.tokens.spacing[4]
   },
   title: {
-    color: theme.components.modal.title.fg,
     flex: 1,
+    color: theme.components.modal.title.fg,
     fontFamily: theme.tokens.typography.family.semibold,
     fontSize: theme.tokens.typography.size.lg,
     lineHeight: theme.tokens.typography.lineHeight.md
   },
   closeButton: {
-    alignItems: "center",
-    backgroundColor: theme.components.modal.closeButton.default.bg,
-    borderRadius: theme.tokens.radius.full,
+    width: 32,
     height: 32,
+    alignItems: "center",
     justifyContent: "center",
-    width: 32
+    backgroundColor: theme.components.modal.closeButton.default.bg,
+    borderRadius: theme.tokens.radius.full
+  },
+  closeButtonPressed: {
+    backgroundColor: theme.components.modal.closeButton.hover.bg
+  },
+  closeButtonDisabled: {
+    backgroundColor: theme.components.modal.closeButton.disabled.bg
   }
 });
 
@@ -666,19 +837,19 @@ var ModalHeader = ({
         accessibilityLabel: "Close modal",
         onPress: onClose,
         style: styles.closeButton,
-        children: /* @__PURE__ */ jsx11(
-          Close,
-          {
-            size: 16,
-            color: theme.components.modal.closeButton.default.fg
-          }
-        )
+        children: ({ pressed }) => {
+          const closeIconColor = pressed ? theme.components.modal.closeButton.hover.fg : theme.components.modal.closeButton.default.fg;
+          return /* @__PURE__ */ jsx11(Close, { size: 16, color: closeIconColor });
+        }
       }
     )
   ] });
 };
 ModalHeader.displayName = "ModalHeader";
 
+// src/components/Modal/Modal.tsx
+import { useModal } from "@vellira-ui/core";
+
 // src/components/Modal/ModalOverlay.tsx
 import { Modal as RNModal, Pressable as Pressable5, View as View9 } from "react-native";
 
@@ -741,12 +912,17 @@ var ModalRoot = ({
   overlayStyle,
   contentStyle
 }) => {
-  return /* @__PURE__ */ jsx13(ModalContext_default.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx13(
+  const modal = useModal({
+    isOpen,
+    onClose,
+    closeOnBackdrop
+  });
+  return /* @__PURE__ */ jsx13(ModalContext_default.Provider, { value: { onClose: modal.onClose }, children: /* @__PURE__ */ jsx13(
     ModalOverlay,
     {
-      isOpen,
-      onClose,
-      closeOnBackdrop,
+      isOpen: modal.isOpen,
+      onClose: modal.onClose,
+      closeOnBackdrop: modal.closeOnBackdrop,
       overlayStyle,
       children: /* @__PURE__ */ jsx13(ModalContent, { style: contentStyle, children })
     }
@@ -818,6 +994,9 @@ var createStyles12 = (theme) => StyleSheet12.create({
     fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.sm,
     lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  helperTextDisabled: {
+    color: theme.components.formField.disabled.helperTextFg
   }
 });
 
@@ -890,7 +1069,11 @@ function FormField({
           Text6,
           {
             accessibilityLiveRegion: "polite",
-            style: [styles.error, errorStyle],
+            style: [
+              styles.error,
+              disabled && styles.helperTextDisabled,
+              errorStyle
+            ],
             children: error
           }
         ) : /* @__PURE__ */ jsx14(View10, { accessibilityLiveRegion: "polite", children: error }))
@@ -1013,9 +1196,9 @@ var RadioGroup = forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { Picker } from "@react-native-picker/picker";
-import { useControllableState as useControllableState3 } from "@vellira-ui/core";
+import { useSelect } from "@vellira-ui/core";
 import { Modal as Modal3, Pressable as Pressable7, Text as Text8, View as View13 } from "react-native";
 
 // src/components/Select/SelectTrigger/SelectTrigger.tsx
@@ -1066,11 +1249,27 @@ var createStyles14 = (theme) => StyleSheet14.create({
     lineHeight: theme.tokens.typography.lineHeight.lg
   },
   triggerOpen: {
-    borderColor: theme.components.select.trigger.focus.border
+    backgroundColor: theme.components.select.trigger.focus.bg,
+    borderColor: theme.components.select.trigger.focus.border,
+    borderWidth: 2
   },
   triggerError: {
     borderColor: theme.components.select.trigger.error.border
   },
+  triggerErrorOpen: {
+    borderColor: theme.components.select.trigger.error.border,
+    shadowColor: theme.components.select.trigger.error.ring,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 1
+  },
+  textOpen: {
+    color: theme.components.select.trigger.focus.fg
+  },
   triggerDisabled: {
     backgroundColor: theme.components.select.trigger.disabled.bg,
     borderColor: theme.components.select.trigger.disabled.border
@@ -1121,7 +1320,7 @@ function SelectTrigger({
     sm: styles.textSm,
     md: styles.textMd,
     lg: styles.textLg
-  }[size];
+  };
   const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a picker" : required ? "Required. Opens a picker" : "Opens a picker");
   return /* @__PURE__ */ jsxs8(
     Pressable6,
@@ -1150,8 +1349,9 @@ function SelectTrigger({
             numberOfLines: 1,
             style: [
               styles.text,
-              textSizeStyle,
+              textSizeStyle[size],
               isPlaceholder && styles.placeholder,
+              isOpen && styles.textOpen,
               disabled && styles.textDisabled,
               textStyle
             ],
@@ -1181,7 +1381,6 @@ function SelectTrigger({
 SelectTrigger.displayName = "SelectTrigger";
 
 // src/components/Select/Select.styles.ts
-import { overlay as overlay2 } from "@vellira-ui/tokens";
 import { StyleSheet as StyleSheet15 } from "react-native";
 var createStyles15 = (theme) => StyleSheet15.create({
   modalRoot: {
@@ -1190,23 +1389,31 @@ var createStyles15 = (theme) => StyleSheet15.create({
   },
   backdrop: {
     ...StyleSheet15.absoluteFill,
-    backgroundColor: overlay2.backdrop
+    backgroundColor: theme.semantic.overlay.backdrop
   },
   sheet: {
     maxHeight: "50%",
+    overflow: "hidden",
     backgroundColor: theme.components.select.dropdown.bg,
     borderColor: theme.components.select.dropdown.border,
     borderTopLeftRadius: theme.tokens.radius.lg,
     borderTopRightRadius: theme.tokens.radius.lg,
     borderWidth: 1,
     borderBottomWidth: 0,
-    overflow: "hidden"
+    shadowColor: theme.tokens.shadows.lg.color,
+    shadowOffset: {
+      width: theme.tokens.shadows.lg.x,
+      height: -theme.tokens.shadows.lg.y
+    },
+    shadowOpacity: theme.tokens.shadows.lg.opacity,
+    shadowRadius: theme.tokens.shadows.lg.blur,
+    elevation: theme.tokens.shadows.lg.elevation
   },
   toolbar: {
     minHeight: 48,
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    flexDirection: "row",
     paddingHorizontal: theme.tokens.spacing[4],
     borderBottomColor: theme.components.select.dropdown.border,
     borderBottomWidth: 1
@@ -1233,7 +1440,7 @@ var createStyles15 = (theme) => StyleSheet15.create({
     lineHeight: theme.tokens.typography.lineHeight.md
   },
   doneText: {
-    color: theme.components.select.option.selected.bg,
+    color: theme.semantic.text.interactive,
     fontFamily: theme.tokens.typography.family.medium,
     fontSize: theme.tokens.typography.size.md,
     lineHeight: theme.tokens.typography.lineHeight.md
@@ -1266,14 +1473,14 @@ function Select({
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles15);
-  const [isOpen, setIsOpen] = useState3(false);
-  const [selectedValue, setSelectedValue] = useControllableState3({
+  const { selectedValue, setSelectedValue, selectedOption, isOpen, setIsOpen } = useSelect({
     value,
-    defaultValue: defaultValue ?? "",
-    onChange
+    defaultValue,
+    onChange,
+    options,
+    disabled
   });
-  const [draftValue, setDraftValue] = useState3(selectedValue);
-  const selectedOption = options.find((o) => o.value === selectedValue);
+  const [draftValue, setDraftValue] = useState2(selectedValue);
   const hasError = !!error;
   useEffect2(() => {
     if (isOpen) {
@@ -1457,13 +1664,17 @@ var createStyles16 = (theme) => StyleSheet16.create({
   },
   listPills: {
     backgroundColor: theme.components.tabs.pills.default.bg,
-    padding: 0
+    borderRadius: theme.tokens.radius.lg
   },
   listVertical: {
-    alignSelf: "flex-start",
     flexDirection: "column",
+    alignSelf: "flex-start",
+    width: 140,
+    minWidth: 140,
+    maxWidth: 140,
+    flexGrow: 0,
+    flexShrink: 0,
     gap: theme.tokens.spacing[1],
-    marginRight: theme.tokens.spacing[4],
     marginBottom: 0
   }
 });
@@ -1496,9 +1707,27 @@ import { View as View15 } from "react-native";
 import { StyleSheet as StyleSheet17 } from "react-native";
 var createStyles17 = (theme) => StyleSheet17.create({
   panel: {
-    flex: 1,
+    width: "100%",
     minWidth: 0,
+    alignSelf: "stretch",
     padding: theme.tokens.spacing[4]
+  },
+  panelVertical: {
+    flex: 1,
+    flexBasis: 0,
+    flexShrink: 1,
+    minWidth: 0,
+    alignSelf: "stretch"
+  },
+  panelHidden: {
+    display: "none"
+  },
+  text: {
+    flexShrink: 1,
+    color: theme.components.tabs.panel.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   }
 });
 
@@ -1506,14 +1735,24 @@ var createStyles17 = (theme) => StyleSheet17.create({
 import { jsx as jsx19 } from "react/jsx-runtime";
 var TabsPanel = ({ index, children, style }) => {
   const styles = useThemeStyles(createStyles17);
-  const { activeIndex } = useTabs();
+  const { activeIndex, orientation } = useTabs();
   if (activeIndex !== index) return null;
-  return /* @__PURE__ */ jsx19(View15, { style: [styles.panel, style], children });
+  return /* @__PURE__ */ jsx19(
+    View15,
+    {
+      style: [
+        styles.panel,
+        orientation === "vertical" && styles.panelVertical,
+        style
+      ],
+      children
+    }
+  );
 };
 TabsPanel.displayName = "TabsPanel";
 
 // src/components/Tabs/Tab/Tab.tsx
-import { cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
+import { cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
 import { Pressable as Pressable8, Text as Text9, View as View16 } from "react-native";
 
 // src/components/Tabs/Tab/Tab.styles.ts
@@ -1521,40 +1760,78 @@ import { StyleSheet as StyleSheet18 } from "react-native";
 var fontWeight2 = (value) => value;
 var createStyles18 = (theme) => StyleSheet18.create({
   tab: {
+    minHeight: 40,
     alignItems: "center",
     flexDirection: "row",
     gap: theme.tokens.spacing[2],
     justifyContent: "center",
     paddingHorizontal: theme.tokens.spacing[4],
     paddingVertical: theme.tokens.spacing[2],
-    backgroundColor: theme.components.tabs.trigger.default.bg,
-    borderWidth: 0
+    backgroundColor: theme.components.tabs.trigger.default.bg
   },
   tabVertical: {
-    flex: 0,
+    position: "relative",
     width: "100%",
+    minHeight: 40,
+    flexGrow: 0,
+    flexShrink: 0,
     justifyContent: "flex-start"
   },
-  tabActive: {
+  horizontalIndicator: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    left: 0,
+    height: 3,
+    backgroundColor: "transparent"
+  },
+  horizontalIndicatorActive: {
+    backgroundColor: theme.components.tabs.indicator.active.bg
+  },
+  verticalIndicator: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 3,
+    backgroundColor: "transparent"
+  },
+  verticalIndicatorActive: {
+    backgroundColor: theme.components.tabs.indicator.active.bg
+  },
+  verticalIndicatorPressed: {
+    backgroundColor: theme.components.tabs.indicator.hover.bg
+  },
+  tabHovered: {
+    backgroundColor: theme.components.tabs.trigger.hover.bg
+  },
+  tabPressed: {
     backgroundColor: theme.components.tabs.trigger.active.bg
   },
-  tabUnderline: {
-    borderBottomColor: "transparent",
-    borderBottomWidth: 3,
-    borderRadius: 0
+  tabFocused: {
+    borderColor: theme.semantic.focus.ring.color
   },
-  tabUnderlineActive: {
-    borderBottomColor: theme.components.tabs.indicator.active.bg
+  tabDefaultActive: {
+    backgroundColor: theme.components.tabs.trigger.active.bg
   },
   tabDisabled: {
     backgroundColor: theme.components.tabs.trigger.disabled.bg
   },
   tabText: {
+    flexShrink: 0,
+    textAlign: "center",
+    lineHeight: theme.tokens.typography.lineHeight.md,
     color: theme.components.tabs.trigger.default.fg,
     fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.md,
     fontWeight: fontWeight2(theme.tokens.typography.weight.regular)
   },
+  tabTextHover: {
+    color: theme.components.tabs.trigger.hover.fg
+  },
+  tabTextPressed: {
+    color: theme.components.tabs.trigger.active.fg
+  },
   tabTextDisabled: {
     color: theme.components.tabs.trigger.disabled.fg
   },
@@ -1564,17 +1841,32 @@ var createStyles18 = (theme) => StyleSheet18.create({
   tabTextPillsActive: {
     color: theme.components.tabs.pills.active.fg
   },
+  tabPills: {
+    minHeight: 36,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[1],
+    borderRadius: theme.tokens.radius.md
+  },
   tabPillsActive: {
     backgroundColor: theme.components.tabs.pills.active.bg,
     borderRadius: theme.tokens.radius.md
   },
-  tabDefaultActive: {
-    backgroundColor: theme.components.tabs.trigger.active.bg
+  tabPillsHover: {
+    backgroundColor: theme.components.tabs.pills.hover.bg
+  },
+  tabPillsPressed: {
+    backgroundColor: theme.components.tabs.pills.active.bg
   },
   tabIcon: {
     alignItems: "center",
     justifyContent: "center"
   },
+  tabIconHover: {
+    color: theme.components.tabs.trigger.hover.fg
+  },
+  tabIconPressed: {
+    color: theme.components.tabs.trigger.active.fg
+  },
   tabIconActive: {
     color: theme.components.tabs.trigger.active.fg
   },
@@ -1584,7 +1876,7 @@ var createStyles18 = (theme) => StyleSheet18.create({
 });
 
 // src/components/Tabs/Tab/Tab.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var Tab = ({
   index,
   children,
@@ -1600,32 +1892,60 @@ var Tab = ({
   const isPills = appearance === "pills";
   const isUnderline = appearance === "underline";
   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 = isValidElement3(icon) ? cloneElement3(icon, {
+  const renderedIcon = isValidElement4(icon) ? cloneElement4(icon, {
     color: iconColor
   }) : icon;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx20(
     Pressable8,
     {
       disabled,
       accessibilityRole: "tab",
       accessibilityState: { selected: isActive, disabled },
-      onPress: () => setActiveIndex(index),
-      style: [
+      onPress: () => {
+        if (!disabled && !isActive) {
+          setActiveIndex(index);
+        }
+      },
+      style: ({ pressed }) => [
         styles.tab,
-        orientation === "vertical" && styles.tabVertical,
+        isVertical && styles.tabVertical,
+        isPills && styles.tabPills,
         isPills && isActive && styles.tabPillsActive,
-        isUnderline && styles.tabUnderline,
-        isUnderline && isActive && styles.tabUnderlineActive,
+        pressed && !disabled && styles.tabPressed,
         isDefault && isActive && styles.tabDefaultActive,
         disabled && styles.tabDisabled,
         style
       ],
-      children: [
+      children: ({ pressed }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
+        isUnderline && !isVertical && /* @__PURE__ */ jsx20(
+          View16,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.horizontalIndicator,
+              isActive && styles.horizontalIndicatorActive
+            ]
+          }
+        ),
+        isUnderline && isVertical && /* @__PURE__ */ jsx20(
+          View16,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.verticalIndicator,
+              isActive && styles.verticalIndicatorActive,
+              pressed && !isActive && !disabled && styles.verticalIndicatorPressed
+            ]
+          }
+        ),
         icon != null && /* @__PURE__ */ jsx20(View16, { style: styles.tabIcon, children: renderedIcon }),
         children != null && /* @__PURE__ */ jsx20(
           Text9,
           {
+            numberOfLines: 2,
+            ellipsizeMode: "tail",
             style: [
               styles.tabText,
               isPills && isActive && styles.tabTextPillsActive,
@@ -1636,41 +1956,30 @@ var Tab = ({
             children
           }
         )
-      ]
+      ] })
     }
   );
 };
 Tab.displayName = "Tab";
 
 // src/components/Tabs/Tabs.tsx
-import { useCallback, useMemo as useMemo3, useState as useState4 } from "react";
+import { useMemo as useMemo4 } from "react";
+import { useTabs as useTabs2 } from "@vellira-ui/core";
 import { View as View17 } from "react-native";
 
 // src/components/Tabs/Tabs.styles.ts
 import { StyleSheet as StyleSheet19 } from "react-native";
 var createStyles19 = (theme) => StyleSheet19.create({
   root: {
-    width: "100%"
+    width: "100%",
+    minWidth: 0
   },
   rootVertical: {
     flexDirection: "row",
     alignItems: "flex-start",
-    gap: theme.tokens.spacing[6]
-  },
-  listVertical: {
-    flexDirection: "column",
-    width: 140,
-    flexShrink: 0
-  },
-  tabVertical: {
-    flex: 0,
     width: "100%",
-    justifyContent: "flex-start"
-  },
-  panel: {
-    flex: 1,
-    flexShrink: 1,
-    minWidth: 0
+    minWidth: 0,
+    gap: theme.tokens.spacing[6]
   }
 });
 
@@ -1686,19 +1995,13 @@ var TabsRoot = ({
   style
 }) => {
   const styles = useThemeStyles(createStyles19);
-  const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState4(defaultActiveIndex);
-  const isControlled = controlledActiveIndex !== void 0;
-  const activeIndex = isControlled ? controlledActiveIndex : uncontrolledActiveIndex;
-  const setActiveIndex = useCallback(
-    (nextIndex) => {
-      if (!isControlled) {
-        setUncontrolledActiveIndex(nextIndex);
-      }
-      onChange?.(nextIndex);
-    },
-    [isControlled, onChange]
-  );
-  const value = useMemo3(
+  const { activeIndex, setActiveIndex } = useTabs2({
+    activeIndex: controlledActiveIndex,
+    defaultActiveIndex,
+    onChange,
+    orientation
+  });
+  const value = useMemo4(
     () => ({ activeIndex, appearance, orientation, setActiveIndex }),
     [activeIndex, appearance, orientation, setActiveIndex]
   );
@@ -1724,15 +2027,15 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { Modal as Modal4, Pressable as Pressable9, Text as Text10, View as View18 } from "react-native";
 
 // src/hooks/useNativeFloatingPosition.ts
-import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useRef as useRef2, useState as useState3 } 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 [position, setPosition] = useState3({ top: 0, left: 0 });
   const floatingSizeRef = useRef2({
     width: 0,
     height: 0
@@ -1805,26 +2108,28 @@ var createStyles20 = (theme) => StyleSheet20.create({
   bubble: {
     position: "absolute",
     zIndex: 1e3,
+    maxWidth: 280,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2],
     backgroundColor: theme.components.tooltip.content.bg,
     borderColor: theme.components.tooltip.content.border,
     borderRadius: theme.tokens.radius.sm,
     borderWidth: 1,
-    paddingHorizontal: theme.tokens.spacing[3],
-    paddingVertical: theme.tokens.spacing[2],
-    shadowColor: theme.tokens.shadows.sm.color,
+    shadowColor: theme.tokens.shadows.md.color,
     shadowOffset: {
-      width: theme.tokens.shadows.sm.x,
-      height: theme.tokens.shadows.sm.y
+      width: theme.tokens.shadows.md.x,
+      height: theme.tokens.shadows.md.y
     },
-    shadowOpacity: theme.tokens.shadows.sm.opacity,
-    shadowRadius: theme.tokens.shadows.sm.blur,
-    elevation: theme.tokens.shadows.sm.elevation
+    shadowOpacity: theme.tokens.shadows.md.opacity,
+    shadowRadius: theme.tokens.shadows.md.blur,
+    elevation: theme.tokens.shadows.md.elevation
   },
   text: {
+    flexShrink: 1,
     color: theme.components.tooltip.content.fg,
     fontFamily: theme.tokens.typography.family.regular,
     fontSize: theme.tokens.typography.size.sm,
-    lineHeight: 20,
+    lineHeight: theme.tokens.typography.lineHeight.sm,
     textAlign: "center"
   }
 });
@@ -1843,7 +2148,7 @@ function Tooltip({
   textStyle
 }) {
   const styles = useThemeStyles(createStyles20);
-  const [visible, setVisible] = useState6(false);
+  const [visible, setVisible] = useState4(false);
   const triggerRef = useRef3(null);
   const closeTimerRef = useRef3(null);
   const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
@@ -1901,7 +2206,7 @@ function Tooltip({
 Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
-import { cloneElement as cloneElement4, useState as useState7 } from "react";
+import { cloneElement as cloneElement5, useState as useState5 } from "react";
 import { ActivityIndicator, Pressable as Pressable10, Text as Text11 } from "react-native";
 
 // src/utils/devWarning.ts
@@ -1942,14 +2247,15 @@ var createStyles21 = (theme) => StyleSheet21.create({
     borderColor: theme.components.button.disabled.border
   },
   focused: {
-    borderColor: theme.semantic.focus.ring,
-    shadowColor: theme.semantic.focus.ring,
+    borderColor: theme.semantic.focus.ring.color,
+    shadowColor: theme.semantic.focus.ring.color,
     shadowOffset: {
       width: 0,
       height: 0
     },
-    shadowOpacity: 0.35,
-    shadowRadius: 4
+    shadowOpacity: 0.18,
+    shadowRadius: 8,
+    elevation: 2
   },
   pressed: {
     transform: [{ scale: 0.98 }]
@@ -1957,7 +2263,7 @@ var createStyles21 = (theme) => StyleSheet21.create({
 });
 
 // src/primitives/Button/Button.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var sizeMap = {
   sm: {
     px: 12,
@@ -2009,8 +2315,8 @@ function Button({
   const styles = useThemeStyles(createStyles21);
   const config = sizeMap[size];
   const variantTheme = theme.components.button[color][variant];
-  const [isHovered, setIsHovered] = useState7(false);
-  const [isFocused, setIsFocused] = useState7(false);
+  const [isHovered, setIsHovered] = useState5(false);
+  const [isFocused, setIsFocused] = useState5(false);
   const isDisabled = disabled || loading;
   const iconOnly = iconOnlyProp || !children && Boolean(leftIcon || rightIcon);
   const content = loading && loadingText ? loadingText : children;
@@ -2035,7 +2341,7 @@ function Button({
     setIsHovered(false);
     onHoverOut?.(event);
   };
-  const renderIcon = (icon, iconColor) => cloneElement4(icon, {
+  const renderIcon = (icon, iconColor) => cloneElement5(icon, {
     color: iconColor,
     size: resolvedIconSize
   });
@@ -2076,7 +2382,7 @@ function Button({
       children: ({ pressed }) => {
         const interactionTheme = getInteractionTheme(pressed);
         const contentColor = interactionTheme.fg;
-        return /* @__PURE__ */ jsxs12(Fragment, { children: [
+        return /* @__PURE__ */ jsxs12(Fragment3, { children: [
           loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
           !loading && leftIcon && renderIcon(leftIcon, contentColor),
           content && !iconOnly && /* @__PURE__ */ jsx23(
@@ -2101,8 +2407,8 @@ function Button({
 }
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { useControllableState as useControllableState4 } from "@vellira-ui/core";
+import { forwardRef as forwardRef2, useEffect as useEffect4 } from "react";
+import { useControllableState as useControllableState3 } from "@vellira-ui/core";
 import { Check } from "@vellira-ui/icons";
 import { Pressable as Pressable11, Text as Text12, View as View19 } from "react-native";
 
@@ -2153,6 +2459,14 @@ var createStyles22 = (theme) => StyleSheet22.create({
     backgroundColor: theme.components.checkbox.checked.default.bg,
     borderColor: theme.components.checkbox.checked.default.border
   },
+  boxCheckedHover: {
+    backgroundColor: theme.components.checkbox.checked.hover.bg,
+    borderColor: theme.components.checkbox.checked.hover.border
+  },
+  boxCheckedPressed: {
+    backgroundColor: theme.components.checkbox.checked.pressed.bg,
+    borderColor: theme.components.checkbox.checked.pressed.border
+  },
   boxDisabled: {
     backgroundColor: theme.components.checkbox.disabled.bg,
     borderColor: theme.components.checkbox.disabled.border
@@ -2160,17 +2474,41 @@ var createStyles22 = (theme) => StyleSheet22.create({
   boxError: {
     borderColor: theme.components.checkbox.error.border
   },
+  checkmark: {
+    color: theme.components.checkbox.checked.default.fg
+  },
+  checkmarkHover: {
+    color: theme.components.checkbox.checked.hover.fg
+  },
+  checkmarkPressed: {
+    color: theme.components.checkbox.checked.pressed.fg
+  },
   indeterminateMark: {
     width: "60%",
     height: 2,
     backgroundColor: theme.components.checkbox.checked.default.fg,
     borderRadius: theme.tokens.radius.full
   },
+  indeterminateMarkHover: {
+    backgroundColor: theme.components.checkbox.checked.hover.fg
+  },
+  indeterminateMarkPressed: {
+    backgroundColor: theme.components.checkbox.checked.pressed.fg
+  },
   label: {
     flexShrink: 1,
     fontFamily: theme.tokens.typography.family.regular,
     color: theme.components.checkbox.default.fg
   },
+  labelChecked: {
+    color: theme.components.checkbox.checked.default.labelFg
+  },
+  labelCheckedHover: {
+    color: theme.components.checkbox.checked.hover.labelFg
+  },
+  labelCheckedPressed: {
+    color: theme.components.checkbox.checked.pressed.labelFg
+  },
   labelSm: {
     fontSize: theme.tokens.typography.size.sm,
     lineHeight: theme.tokens.typography.lineHeight.sm
@@ -2216,7 +2554,7 @@ var createStyles22 = (theme) => StyleSheet22.create({
 });
 
 // src/primitives/Checkbox/Checkbox.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var iconSizeBySize = {
   sm: 10,
   md: 12,
@@ -2257,7 +2595,7 @@ var Checkbox = forwardRef2(
       lg: styles.errorTextLg
     };
     const hasError = Boolean(error);
-    const [isChecked, setIsChecked] = useControllableState4({
+    const [isChecked, setIsChecked] = useControllableState3({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
@@ -2269,13 +2607,14 @@ var Checkbox = forwardRef2(
     const resolvedAccessibilityLabel = accessibilityLabel ?? label;
     const resolvedAccessibilityHint = [accessibilityHint, description, error].filter(Boolean).join(" ");
     const accessibilityChecked = indeterminate ? "mixed" : isChecked;
-    const checkColor = disabled ? theme.components.checkbox.disabled.fg : theme.components.checkbox.checked.default.fg;
-    devWarning(
-      Boolean(resolvedAccessibilityLabel),
-      "Checkbox: an accessible label must be provided through label or accessibilityLabel."
-    );
+    useEffect4(() => {
+      devWarning(
+        Boolean(resolvedAccessibilityLabel),
+        "Checkbox: an accessible label must be provided through label or accessibilityLabel."
+      );
+    }, [resolvedAccessibilityLabel]);
     return /* @__PURE__ */ jsxs13(View19, { style: styles.container, children: [
-      /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsx24(
         Pressable11,
         {
           ...PressableProps,
@@ -2295,35 +2634,50 @@ var Checkbox = forwardRef2(
             disabled && styles.disabled,
             style
           ],
-          children: [
-            /* @__PURE__ */ jsx24(
-              View19,
-              {
-                style: [
-                  styles.box,
-                  boxSizeStyle[size],
-                  (isChecked || indeterminate) && styles.boxChecked,
-                  hasError && styles.boxError,
-                  disabled && styles.boxDisabled
-                ],
-                children: indeterminate ? /* @__PURE__ */ jsx24(View19, { style: styles.indeterminateMark }) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
-              }
-            ),
-            label && /* @__PURE__ */ jsxs13(
-              Text12,
-              {
-                style: [
-                  styles.label,
-                  labelSizeStyle[size],
-                  disabled && styles.labelDisabled
-                ],
-                children: [
-                  label,
-                  required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
-                ]
-              }
-            )
-          ]
+          children: ({ pressed }) => {
+            const isSelected = isChecked || indeterminate;
+            const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? theme.components.checkbox.checked.pressed.fg : theme.components.checkbox.checked.default.fg;
+            return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+              /* @__PURE__ */ jsx24(
+                View19,
+                {
+                  style: [
+                    styles.box,
+                    boxSizeStyle[size],
+                    isSelected && styles.boxChecked,
+                    isSelected && pressed && styles.boxCheckedPressed,
+                    hasError && styles.boxError,
+                    disabled && styles.boxDisabled
+                  ],
+                  children: indeterminate ? /* @__PURE__ */ jsx24(
+                    View19,
+                    {
+                      style: [
+                        styles.indeterminateMark,
+                        pressed && styles.indeterminateMarkPressed
+                      ]
+                    }
+                  ) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
+                }
+              ),
+              label && /* @__PURE__ */ jsxs13(
+                Text12,
+                {
+                  style: [
+                    styles.label,
+                    labelSizeStyle[size],
+                    isSelected && styles.labelChecked,
+                    isSelected && pressed && styles.labelCheckedPressed,
+                    disabled && styles.labelDisabled
+                  ],
+                  children: [
+                    label,
+                    required && /* @__PURE__ */ jsx24(Text12, { style: styles.requiredMark, children: " *" })
+                  ]
+                }
+              )
+            ] });
+          }
         }
       ),
       description && /* @__PURE__ */ jsx24(
@@ -2344,13 +2698,14 @@ var Checkbox = forwardRef2(
 Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
-import { cloneElement as cloneElement5, forwardRef as forwardRef3, useState as useState8 } from "react";
+import { cloneElement as cloneElement6, forwardRef as forwardRef3, useState as useState6 } from "react";
 import { Pressable as Pressable12, Text as Text13, TextInput, View as View20 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
 var getPlaceholderTextColor = (theme) => theme.components.input.default.placeholder;
 var getDisabledPlaceholderTextColor = (theme) => theme.components.input.disabled.placeholder;
+var resolveRingColor = (ring) => typeof ring === "string" ? ring : ring.color;
 var createStyles23 = (theme) => StyleSheet23.create({
   inputWrapper: {
     position: "relative",
@@ -2406,15 +2761,18 @@ var createStyles23 = (theme) => StyleSheet23.create({
     width: 20,
     height: 20,
     marginTop: -10,
-    borderRadius: 999,
+    borderRadius: theme.tokens.radius.full,
     alignItems: "center",
     justifyContent: "center"
   },
   clearButtonText: {
-    color: theme.components.input.icon.danger,
+    color: theme.components.input.clearButton.fg,
     fontSize: 16,
     lineHeight: 20
   },
+  clearButtonPressed: {
+    backgroundColor: theme.components.input.clearButton.pressedBg
+  },
   sm: {
     minHeight: 36,
     paddingHorizontal: theme.tokens.spacing[3],
@@ -2433,17 +2791,47 @@ var createStyles23 = (theme) => StyleSheet23.create({
     paddingVertical: theme.tokens.spacing[4],
     fontSize: theme.tokens.typography.size.lg
   },
-  error: {
-    borderColor: theme.components.input.error.border
-  },
   focused: {
     color: theme.components.input.focus.fg,
     backgroundColor: theme.components.input.focus.bg,
-    borderColor: theme.components.input.focus.border
+    borderColor: theme.components.input.focus.border,
+    shadowColor: resolveRingColor(theme.components.input.focus.ring),
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    elevation: 1
   },
-  errorFocused: {
+  error: {
     borderColor: theme.components.input.error.border
   },
+  errorFocused: {
+    borderColor: theme.components.input.error.border,
+    shadowColor: resolveRingColor(theme.components.input.error.ring),
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 1
+  },
+  success: {
+    borderColor: theme.components.input.success.border
+  },
+  successFocused: {
+    borderColor: theme.components.input.success.border,
+    shadowColor: resolveRingColor(theme.components.input.success.ring),
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    elevation: 1
+  },
   readOnly: {
     color: theme.components.input.readOnly.fg,
     borderColor: theme.components.input.readOnly.border,
@@ -2526,8 +2914,8 @@ var Input = forwardRef3(
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles23);
-    const [isFocused, setIsFocused] = useState8(false);
-    const [uncontrolledValue, setUncontrolledValue] = useState8(
+    const [isFocused, setIsFocused] = useState6(false);
+    const [uncontrolledValue, setUncontrolledValue] = useState6(
       defaultValue ?? ""
     );
     const isControlled = value !== void 0;
@@ -2578,7 +2966,7 @@ var Input = forwardRef3(
               style: styles.leftIcon,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
-              children: cloneElement5(leftIcon, {
+              children: cloneElement6(leftIcon, {
                 color: leftIconColor,
                 size: resolvedIconSize
               })
@@ -2628,7 +3016,7 @@ var Input = forwardRef3(
               hitSlop: 8,
               onPress: handleClear,
               style: styles.clearButton,
-              children: clearIcon ? cloneElement5(clearIcon, {
+              children: clearIcon ? cloneElement6(clearIcon, {
                 color: clearIconColor,
                 size: resolvedIconSize
               }) : /* @__PURE__ */ jsx25(
@@ -2646,7 +3034,7 @@ var Input = forwardRef3(
               style: styles.rightIcon,
               accessibilityElementsHidden: true,
               importantForAccessibility: "no",
-              children: cloneElement5(rightIcon, {
+              children: cloneElement6(rightIcon, {
                 color: rightIconColor,
                 size: resolvedIconSize
               })
@@ -2660,8 +3048,8 @@ var Input = forwardRef3(
 Input.displayName = "Input";
 
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect4 } from "react";
-import { useControllableState as useControllableState5 } from "@vellira-ui/core";
+import { forwardRef as forwardRef4, useEffect as useEffect5 } from "react";
+import { useControllableState as useControllableState4 } from "@vellira-ui/core";
 import {
   Pressable as Pressable13,
   Text as Text14,
@@ -2697,7 +3085,11 @@ var createStyles24 = (theme) => StyleSheet24.create({
   },
   controlChecked: {
     borderColor: theme.components.radio.checked.default.border,
-    backgroundColor: theme.components.radio.default.bg
+    backgroundColor: theme.components.radio.checked.default.bg
+  },
+  controlCheckedPressed: {
+    borderColor: theme.components.radio.checked.pressed.border,
+    backgroundColor: theme.components.radio.checked.pressed.bg
   },
   controlInvalid: {
     borderColor: theme.components.radio.invalid.border
@@ -2706,12 +3098,19 @@ var createStyles24 = (theme) => StyleSheet24.create({
     borderColor: theme.components.radio.disabled.border,
     backgroundColor: theme.components.radio.disabled.bg
   },
+  controlCheckedDisabled: {
+    borderColor: theme.components.radio.checked.disabled.border,
+    backgroundColor: theme.components.radio.checked.disabled.bg
+  },
   indicator: {
     borderRadius: theme.tokens.radius.full,
-    backgroundColor: theme.components.radio.checked.default.bg
+    backgroundColor: theme.components.radio.checked.default.fg
+  },
+  indicatorPressed: {
+    backgroundColor: theme.components.radio.checked.pressed.fg
   },
   indicatorDisabled: {
-    backgroundColor: theme.components.radio.checked.disabled.bg
+    backgroundColor: theme.components.radio.checked.disabled.fg
   },
   content: {
     flexShrink: 1,
@@ -2722,7 +3121,10 @@ var createStyles24 = (theme) => StyleSheet24.create({
     fontFamily: theme.tokens.typography.family.regular
   },
   labelChecked: {
-    color: theme.components.radio.checked.default.fg
+    color: theme.components.radio.checked.default.labelFg
+  },
+  labelCheckedPressed: {
+    color: theme.components.radio.checked.pressed.labelFg
   },
   labelInvalid: {
     color: theme.components.radio.invalid.fg
@@ -2777,7 +3179,7 @@ var Radio = forwardRef4(
     const styles = createStyles24(theme);
     const group = useRadioGroupContext();
     const isInsideGroup = group !== null;
-    const [standaloneChecked, setStandaloneChecked] = useControllableState5({
+    const [standaloneChecked, setStandaloneChecked] = useControllableState4({
       value: checked,
       defaultValue: defaultChecked,
       onChange: onCheckedChange
@@ -2811,7 +3213,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect4(() => {
+    useEffect5(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."