@vellira-ui/react-native 2.19.6

package/dist/index.js

@@ -0,0 +1,2304 @@
+// src/components/Dropdown/Content/DropdownContent.tsx
+import { Modal, Pressable, View } from "react-native";
+
+// src/theme/ThemeProvider.tsx
+import { useMemo } from "react";
+import { useControllableState } from "@vellira-ui/core";
+
+// src/theme/ThemeContext.ts
+import { createContext } from "react";
+
+// src/theme/themes.ts
+import {
+  darkTheme,
+  highContrastTheme,
+  lightTheme
+} from "@vellira-ui/tokens";
+var nativeThemes = {
+  light: lightTheme,
+  dark: darkTheme,
+  highContrast: highContrastTheme
+};
+
+// src/theme/ThemeContext.ts
+var ThemeContext = createContext({
+  themeName: "light",
+  theme: nativeThemes.light,
+  setTheme: () => void 0
+});
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeProvider = ({
+  theme,
+  defaultTheme = "light",
+  onThemeChange,
+  children
+}) => {
+  const [currentTheme, setCurrentTheme] = useControllableState({
+    value: theme,
+    defaultValue: defaultTheme,
+    onChange: onThemeChange
+  });
+  const value = useMemo(
+    () => ({
+      themeName: currentTheme,
+      theme: nativeThemes[currentTheme],
+      setTheme: setCurrentTheme
+    }),
+    [currentTheme, setCurrentTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+// src/theme/useTheme.ts
+import { useContext } from "react";
+function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// src/theme/useThemeStyles.ts
+import { useMemo as useMemo2 } from "react";
+function useThemeStyles(createStyles24) {
+  const { theme } = useTheme();
+  return useMemo2(() => createStyles24(theme), [createStyles24, theme]);
+}
+
+// src/components/Dropdown/Content/DropdownContent.styles.ts
+import { overlay } from "@vellira-ui/tokens";
+import { StyleSheet } from "react-native";
+var createStyles = (theme) => StyleSheet.create({
+  modalRoot: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: overlay.backdrop
+  },
+  menu: {
+    maxHeight: "50%",
+    overflow: "hidden",
+    padding: theme.tokens.spacing[1],
+    backgroundColor: theme.components.dropdown.content.bg,
+    borderColor: theme.components.dropdown.content.border,
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg,
+    borderWidth: 1
+  }
+});
+
+// src/components/Dropdown/Content/DropdownContent.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DropdownContent({
+  isOpen,
+  children,
+  onClose
+}) {
+  const styles = useThemeStyles(createStyles);
+  return /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      transparent: true,
+      visible: isOpen,
+      animationType: "slide",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { style: styles.modalRoot, children: [
+        /* @__PURE__ */ jsx2(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Close menu",
+            style: styles.backdrop,
+            onPress: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx2(View, { accessibilityRole: "menu", style: styles.menu, children })
+      ] })
+    }
+  );
+}
+DropdownContent.displayName = "DropdownContent";
+
+// src/components/Dropdown/Dropdown.tsx
+import { useState as useState2 } from "react";
+import { View as View4 } from "react-native";
+
+// src/components/Dropdown/Group/DropdownGroup.tsx
+import { Text } from "react-native";
+
+// src/components/Dropdown/Group/DropdownGroup.styles.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var createStyles2 = (theme) => StyleSheet2.create({
+  groupLabel: {
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[2],
+    color: theme.components.dropdown.groupLabel.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.xs,
+    lineHeight: theme.tokens.typography.lineHeight.sm,
+    textTransform: "uppercase"
+  }
+});
+
+// src/components/Dropdown/Group/DropdownGroup.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DropdownGroup({ label }) {
+  const styles = useThemeStyles(createStyles2);
+  return /* @__PURE__ */ jsx3(Text, { style: styles.groupLabel, children: label });
+}
+DropdownGroup.displayName = "DropdownGroup";
+
+// src/components/Dropdown/Item/DropdownItem.tsx
+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({
+  item: {
+    minWidth: 0,
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.tokens.spacing[4],
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2],
+    backgroundColor: theme.components.dropdown.item.default.bg,
+    borderRadius: theme.tokens.radius.sm
+  },
+  itemPressed: {
+    backgroundColor: theme.components.dropdown.item.hover.bg
+  },
+  itemDisabled: {
+    backgroundColor: theme.components.dropdown.item.disabled.bg
+  },
+  itemDangerPressed: {
+    backgroundColor: theme.components.dropdown.item.danger.hover.bg
+  },
+  itemText: {
+    flex: 1,
+    minWidth: 0,
+    color: theme.components.dropdown.item.default.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: 24
+  },
+  itemTextDisabled: {
+    color: theme.components.dropdown.item.disabled.fg
+  },
+  dangerText: {
+    color: theme.components.dropdown.item.danger.default.fg
+  }
+});
+
+// src/components/Dropdown/Item/DropdownItem.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownItem({
+  label,
+  value,
+  icon,
+  danger = false,
+  disabled = false,
+  textWrap = "truncate",
+  itemStyle,
+  textStyle,
+  onSelect
+}) {
+  const styles = useThemeStyles(createStyles3);
+  return /* @__PURE__ */ jsxs2(
+    Pressable2,
+    {
+      disabled,
+      accessibilityRole: "menuitem",
+      accessibilityLabel: label,
+      accessibilityState: { disabled },
+      onPress: () => {
+        if (disabled) return;
+        onSelect(value);
+      },
+      style: ({ pressed }) => [
+        styles.item,
+        pressed && styles.itemPressed,
+        disabled && styles.itemDisabled,
+        pressed && danger && !disabled && styles.itemDangerPressed,
+        itemStyle
+      ],
+      children: [
+        icon,
+        /* @__PURE__ */ jsx4(
+          Text2,
+          {
+            numberOfLines: textWrap === "wrap" ? void 0 : 1,
+            style: [
+              styles.itemText,
+              danger && styles.dangerText,
+              disabled && styles.itemTextDisabled,
+              textStyle
+            ],
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+DropdownItem.displayName = "DropdownItem";
+
+// src/components/Dropdown/Separator/DropdownSeparator.tsx
+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({
+  separator: {
+    height: 1,
+    backgroundColor: theme.components.dropdown.separator.bg
+  }
+});
+
+// src/components/Dropdown/Separator/DropdownSeparator.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DropdownSeparator() {
+  const styles = useThemeStyles(createStyles4);
+  return /* @__PURE__ */ jsx5(View2, { style: styles.separator });
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+
+// src/components/Dropdown/Trigger/DropdownTrigger.tsx
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { ChevronDown } from "@vellira-ui/icons";
+import { Animated, 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({
+  trigger: {
+    minWidth: 32,
+    minHeight: 32,
+    alignItems: "center",
+    justifyContent: "space-between",
+    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
+  },
+  iconOnly: {
+    width: 42,
+    height: 42,
+    padding: theme.tokens.spacing[2],
+    borderRadius: theme.tokens.radius.full
+  },
+  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
+  },
+  triggerTextDisabled: {
+    color: theme.components.dropdown.trigger.disabled.fg
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  arrow: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/Dropdown/Trigger/DropdownTrigger.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function DropdownTrigger({
+  label,
+  trigger,
+  icon,
+  arrowIcon,
+  showArrow = true,
+  disabled = false,
+  isOpen,
+  triggerStyle,
+  onPress
+}) {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles5);
+  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, {
+      toValue: isOpen ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [isOpen, rotateAnim]);
+  const arrowRotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  const renderColoredNode = (node, color) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return /* @__PURE__ */ jsx6(
+        Text3,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.triggerText,
+            { color },
+            disabled && styles.triggerTextDisabled
+          ],
+          children: node
+        }
+      );
+    }
+    if (!isValidElement(node)) return node;
+    return cloneElement(node, { color });
+  };
+  const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? theme.components.dropdown.trigger.hover.fg : theme.components.dropdown.trigger.default.fg;
+  const arrow = arrowIcon ? renderColoredNode(arrowIcon, contentColor) : /* @__PURE__ */ jsx6(ChevronDown, { width: 16, height: 16, color: contentColor });
+  const renderedIcon = icon ? renderColoredNode(icon, contentColor) : null;
+  return /* @__PURE__ */ jsxs3(
+    Pressable3,
+    {
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { expanded: isOpen, disabled },
+      onPress,
+      onPressIn: () => setIsPressed(true),
+      onPressOut: () => setIsPressed(false),
+      style: [
+        styles.trigger,
+        isPressed && !disabled && styles.triggerPressed,
+        disabled && styles.triggerDisabled,
+        isIconOnly && styles.iconOnly,
+        triggerStyle
+      ],
+      children: [
+        hasIcon && /* @__PURE__ */ jsx6(View3, { style: styles.icon, children: renderedIcon }),
+        !isIconOnly && (trigger ? renderColoredNode(trigger, contentColor) : /* @__PURE__ */ jsx6(
+          Text3,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.triggerText,
+              { color: contentColor },
+              disabled && styles.triggerTextDisabled
+            ],
+            children: label
+          }
+        )),
+        showArrow && /* @__PURE__ */ jsx6(
+          Animated.View,
+          {
+            style: [styles.arrow, { transform: [{ rotate: arrowRotate }] }],
+            children: arrow
+          }
+        )
+      ]
+    }
+  );
+}
+DropdownTrigger.displayName = "DropdownTrigger";
+
+// src/components/Dropdown/Dropdown.styles.ts
+import { StyleSheet as StyleSheet6 } from "react-native";
+var createStyles6 = () => StyleSheet6.create({
+  root: {
+    alignSelf: "flex-start"
+  }
+});
+
+// src/components/Dropdown/types.ts
+var isGroup = (item) => item.type === "group";
+var isSeparator = (item) => item.type === "separator";
+
+// src/components/Dropdown/Dropdown.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function Dropdown({
+  label = "Menu",
+  trigger,
+  icon,
+  arrowIcon,
+  showArrow = true,
+  items,
+  onSelect,
+  disabled = false,
+  style,
+  triggerStyle,
+  itemStyle,
+  textStyle
+}) {
+  const styles = useThemeStyles(createStyles6);
+  const [isOpen, setIsOpen] = useState2(false);
+  const close = () => setIsOpen(false);
+  const handleSelect = (value) => {
+    onSelect?.(value);
+    close();
+  };
+  return /* @__PURE__ */ jsxs4(View4, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx7(
+      DropdownTrigger,
+      {
+        label,
+        trigger,
+        icon,
+        arrowIcon,
+        showArrow,
+        disabled,
+        isOpen,
+        triggerStyle,
+        onPress: () => {
+          if (disabled) return;
+          setIsOpen(true);
+        }
+      }
+    ),
+    /* @__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}`);
+      }
+      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 { Text as Text4, 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({
+  body: {
+    paddingBottom: theme.tokens.spacing[4]
+  },
+  text: {
+    color: theme.components.modal.content.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  }
+});
+
+// src/components/Modal/Body/ModalBody.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var isTextElement = (child) => isValidElement2(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 });
+  }
+  if (!isTextElement(child)) {
+    return child;
+  }
+  return cloneElement2(child, {
+    style: [textStyle, child.props.style]
+  });
+});
+var ModalBody = ({ children, style }) => {
+  const styles = useThemeStyles(createStyles7);
+  return /* @__PURE__ */ jsx8(View5, { style: [styles.body, style], children: renderBodyChildren(children, styles.text) });
+};
+ModalBody.displayName = "ModalBody";
+
+// src/components/Modal/Content/ModalContent.tsx
+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({
+  content: {
+    minWidth: 320,
+    maxWidth: 600,
+    maxHeight: "90%",
+    padding: 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,
+      height: theme.tokens.shadows.lg.y
+    },
+    shadowOpacity: theme.tokens.shadows.lg.opacity,
+    shadowRadius: theme.tokens.shadows.lg.blur,
+    elevation: theme.tokens.shadows.lg.elevation
+  }
+});
+
+// src/components/Modal/Content/ModalContent.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ModalContent = ({ children, style }) => {
+  const styles = useThemeStyles(createStyles8);
+  return /* @__PURE__ */ jsx9(View6, { style: [styles.content, style], children });
+};
+ModalContent.displayName = "ModalContent";
+
+// src/components/Modal/Footer/ModalFooter.tsx
+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({
+  footer: {
+    flexDirection: "row",
+    gap: theme.tokens.spacing[3],
+    justifyContent: "flex-end",
+    paddingTop: theme.tokens.spacing[4]
+  }
+});
+
+// src/components/Modal/Footer/ModalFooter.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ModalFooter = ({ children, style }) => {
+  const styles = useThemeStyles(createStyles9);
+  return /* @__PURE__ */ jsx10(View7, { style: [styles.footer, style], children });
+};
+ModalFooter.displayName = "ModalFooter";
+
+// src/components/Modal/Header/ModalHeader.tsx
+import { Close } from "@vellira-ui/icons";
+import { Pressable as Pressable4, Text as Text5, View as View8 } from "react-native";
+
+// src/components/Modal/ModalContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ModalContext = createContext2(void 0);
+ModalContext.displayName = "ModalContext";
+var useModalContext = () => {
+  const context = useContext2(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used inside Modal");
+  }
+  return context;
+};
+var ModalContext_default = ModalContext;
+
+// src/components/Modal/Header/ModalHeader.styles.ts
+import { StyleSheet as StyleSheet10 } from "react-native";
+var createStyles10 = (theme) => StyleSheet10.create({
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.tokens.spacing[3],
+    justifyContent: "space-between",
+    paddingBottom: theme.tokens.spacing[4],
+    backgroundColor: theme.components.modal.content.bg
+  },
+  title: {
+    color: theme.components.modal.title.fg,
+    flex: 1,
+    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,
+    height: 32,
+    justifyContent: "center",
+    width: 32
+  }
+});
+
+// src/components/Modal/Header/ModalHeader.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var ModalHeader = ({
+  children,
+  style,
+  textStyle
+}) => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles10);
+  const { onClose } = useModalContext();
+  return /* @__PURE__ */ jsxs5(View8, { style: [styles.header, style], children: [
+    /* @__PURE__ */ jsx11(Text5, { style: [styles.title, textStyle], children }),
+    onClose && /* @__PURE__ */ jsx11(
+      Pressable4,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close modal",
+        onPress: onClose,
+        style: styles.closeButton,
+        children: /* @__PURE__ */ jsx11(
+          Close,
+          {
+            size: 16,
+            color: theme.components.modal.closeButton.default.fg
+          }
+        )
+      }
+    )
+  ] });
+};
+ModalHeader.displayName = "ModalHeader";
+
+// src/components/Modal/ModalOverlay.tsx
+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({
+  overlay: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+    padding: theme.tokens.spacing[5]
+  },
+  backdrop: {
+    ...StyleSheet11.absoluteFill,
+    backgroundColor: theme.components.modal.overlay.bg
+  }
+});
+
+// src/components/Modal/ModalOverlay.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var ModalOverlay = ({
+  isOpen,
+  onClose,
+  closeOnBackdrop = true,
+  children,
+  overlayStyle
+}) => {
+  const styles = useThemeStyles(createStyles11);
+  return /* @__PURE__ */ jsx12(
+    RNModal,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs6(View9, { style: [styles.overlay, overlayStyle], children: [
+        /* @__PURE__ */ jsx12(
+          Pressable5,
+          {
+            testID: "modal-backdrop",
+            accessibilityRole: closeOnBackdrop ? "button" : void 0,
+            accessibilityLabel: closeOnBackdrop ? "Close modal" : void 0,
+            style: styles.backdrop,
+            onPress: closeOnBackdrop ? onClose : void 0
+          }
+        ),
+        children
+      ] })
+    }
+  );
+};
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ModalRoot = ({
+  isOpen,
+  onClose,
+  closeOnBackdrop = true,
+  children,
+  overlayStyle,
+  contentStyle
+}) => {
+  return /* @__PURE__ */ jsx13(ModalContext_default.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx13(
+    ModalOverlay,
+    {
+      isOpen,
+      onClose,
+      closeOnBackdrop,
+      overlayStyle,
+      children: /* @__PURE__ */ jsx13(ModalContent, { style: contentStyle, children })
+    }
+  ) });
+};
+ModalRoot.displayName = "Modal";
+
+// src/components/Modal/index.ts
+var Modal2 = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+  Content: ModalContent
+});
+
+// src/components/RadioGroup/RadioGroup.tsx
+import { useControllableState as useControllableState2 } from "@vellira-ui/core";
+import { Pressable as Pressable6, Text as Text7, View as View11 } from "react-native";
+
+// src/patterns/FormField/FormField.tsx
+import { Text as Text6, View as View10 } from "react-native";
+
+// src/patterns/FormField/FormField.styles.ts
+import { StyleSheet as StyleSheet12 } from "react-native";
+var fontWeight = (value) => value;
+var createStyles12 = (theme) => StyleSheet12.create({
+  root: {
+    width: "100%",
+    minWidth: 0,
+    alignSelf: "stretch",
+    gap: theme.tokens.spacing[2]
+  },
+  label: {
+    color: theme.components.formField.label.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md,
+    fontWeight: fontWeight(theme.tokens.typography.weight.medium),
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  labelDisabled: {
+    color: theme.components.formField.disabled.labelFg
+  },
+  required: {
+    marginLeft: theme.tokens.spacing[1],
+    color: theme.components.formField.requiredMark.fg
+  },
+  description: {
+    color: theme.components.formField.description.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  descriptionDisabled: {
+    color: theme.components.formField.disabled.descriptionFg
+  },
+  control: {
+    width: "100%",
+    minWidth: 0,
+    alignSelf: "stretch"
+  },
+  error: {
+    color: theme.components.formField.helperText.error.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  }
+});
+
+// src/patterns/FormField/FormField.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function FormField({
+  label,
+  description,
+  error,
+  required = false,
+  disabled = false,
+  children,
+  style,
+  controlStyle,
+  labelStyle,
+  descriptionStyle,
+  errorStyle
+}) {
+  const styles = useThemeStyles(createStyles12);
+  return /* @__PURE__ */ jsxs7(
+    View10,
+    {
+      style: [styles.root, style],
+      accessibilityState: {
+        disabled
+      },
+      children: [
+        label && /* @__PURE__ */ jsxs7(
+          Text6,
+          {
+            style: [styles.label, disabled && styles.labelDisabled, labelStyle],
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx14(Text6, { style: styles.required, children: " *" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx14(
+          Text6,
+          {
+            style: [
+              styles.description,
+              disabled && styles.descriptionDisabled,
+              descriptionStyle
+            ],
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx14(View10, { style: [styles.control, controlStyle], children }),
+        error && /* @__PURE__ */ jsx14(
+          Text6,
+          {
+            style: [styles.error, errorStyle],
+            accessibilityRole: "alert",
+            accessibilityLiveRegion: "polite",
+            children: error
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.styles.ts
+import { StyleSheet as StyleSheet13 } from "react-native";
+var createStyles13 = (theme) => StyleSheet13.create({
+  group: {
+    width: "100%",
+    minWidth: 0,
+    alignSelf: "stretch",
+    gap: theme.tokens.spacing[2]
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.tokens.spacing[4]
+  },
+  option: {
+    minWidth: 0,
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.tokens.spacing[2]
+  },
+  optionDisabled: {
+    opacity: 1
+  },
+  radio: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: theme.components.radio.default.border,
+    borderRadius: 999,
+    borderWidth: 1,
+    backgroundColor: theme.components.radio.default.bg
+  },
+  radioSelected: {
+    borderColor: theme.components.radio.checked.default.border
+  },
+  radioDisabled: {
+    borderColor: theme.components.radio.disabled.border,
+    backgroundColor: theme.components.radio.disabled.bg
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    backgroundColor: theme.components.radio.checked.default.bg,
+    borderRadius: 999
+  },
+  dotDisabled: {
+    backgroundColor: theme.components.radio.disabled.fg
+  },
+  label: {
+    minWidth: 0,
+    color: theme.components.radio.default.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  labelDisabled: {
+    color: theme.components.radio.disabled.fg
+  },
+  labelSelected: {
+    color: theme.components.radio.checked.default.fg
+  }
+});
+
+// src/components/RadioGroup/RadioGroup.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  description,
+  value,
+  defaultValue = "",
+  onChange,
+  options,
+  required = false,
+  disabled = false,
+  error,
+  orientation = "vertical",
+  style,
+  optionStyle,
+  labelStyle
+}) {
+  const styles = useThemeStyles(createStyles13);
+  const [selectedValue, setSelectedValue] = useControllableState2({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /* @__PURE__ */ jsx15(
+    FormField,
+    {
+      label,
+      description,
+      error,
+      required,
+      disabled,
+      children: /* @__PURE__ */ jsx15(
+        View11,
+        {
+          accessibilityRole: "radiogroup",
+          accessibilityState: { disabled },
+          style: [
+            styles.group,
+            orientation === "horizontal" && styles.horizontal,
+            style
+          ],
+          children: options.map((option) => {
+            const isSelected = selectedValue === option.value;
+            const isDisabled = disabled || !!option.disabled;
+            return /* @__PURE__ */ jsxs8(
+              Pressable6,
+              {
+                disabled: isDisabled,
+                accessibilityRole: "radio",
+                accessibilityLabel: option.label,
+                accessibilityState: {
+                  checked: isSelected,
+                  disabled: isDisabled
+                },
+                onPress: () => {
+                  if (isDisabled) return;
+                  setSelectedValue(option.value);
+                },
+                style: [
+                  styles.option,
+                  isDisabled && styles.optionDisabled,
+                  optionStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsx15(
+                    View11,
+                    {
+                      style: [
+                        styles.radio,
+                        isSelected && styles.radioSelected,
+                        isDisabled && styles.radioDisabled
+                      ],
+                      children: isSelected && /* @__PURE__ */ jsx15(
+                        View11,
+                        {
+                          style: [styles.dot, isDisabled && styles.dotDisabled]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx15(
+                    Text7,
+                    {
+                      style: [
+                        styles.label,
+                        isSelected && styles.labelSelected,
+                        isDisabled && styles.labelDisabled,
+                        labelStyle
+                      ],
+                      children: option.label
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      )
+    }
+  );
+}
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Select/Select.tsx
+import { useState as useState3 } from "react";
+import { Picker } from "@react-native-picker/picker";
+import { useControllableState as useControllableState3 } from "@vellira-ui/core";
+import { Modal as Modal3, Pressable as Pressable8, Text as Text9, View as View13 } from "react-native";
+
+// src/components/Select/SelectTrigger/SelectTrigger.tsx
+import { ChevronDown as ChevronDown2 } from "@vellira-ui/icons";
+import { Pressable as Pressable7, Text as Text8, View as View12 } from "react-native";
+
+// src/components/Select/SelectTrigger/SelectTrigger.styles.ts
+import { StyleSheet as StyleSheet14 } from "react-native";
+var createStyles14 = (theme) => StyleSheet14.create({
+  trigger: {
+    width: "100%",
+    minWidth: 0,
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3],
+    backgroundColor: theme.components.select.trigger.default.bg,
+    borderColor: theme.components.select.trigger.default.border,
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 1
+  },
+  triggerOpen: {
+    borderColor: theme.components.select.trigger.focus.border
+  },
+  triggerError: {
+    borderColor: theme.components.select.trigger.error.border
+  },
+  triggerDisabled: {
+    backgroundColor: theme.components.select.trigger.disabled.bg,
+    borderColor: theme.components.select.trigger.disabled.border
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+    color: theme.components.select.trigger.default.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  textDisabled: {
+    color: theme.components.select.trigger.disabled.fg
+  },
+  placeholder: {
+    color: theme.components.select.trigger.placeholder.fg
+  },
+  icon: {
+    width: 16,
+    height: 16,
+    marginLeft: theme.tokens.spacing[2],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconOpen: {
+    transform: [{ rotate: "180deg" }]
+  }
+});
+
+// src/components/Select/SelectTrigger/SelectTrigger.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function SelectTrigger({
+  displayText,
+  isPlaceholder,
+  isOpen,
+  disabled = false,
+  hasError = false,
+  accessibilityLabel,
+  triggerStyle,
+  textStyle,
+  onPress
+}) {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles14);
+  return /* @__PURE__ */ jsxs9(
+    Pressable7,
+    {
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityHint: "Opens a picker",
+      accessibilityState: {
+        expanded: isOpen,
+        disabled
+      },
+      onPress,
+      style: [
+        styles.trigger,
+        isOpen && styles.triggerOpen,
+        hasError && styles.triggerError,
+        disabled && styles.triggerDisabled,
+        triggerStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsx16(
+          Text8,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.text,
+              isPlaceholder && styles.placeholder,
+              disabled && styles.textDisabled,
+              textStyle
+            ],
+            children: displayText
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          View12,
+          {
+            style: [styles.icon, isOpen && styles.iconOpen],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no",
+            children: /* @__PURE__ */ jsx16(
+              ChevronDown2,
+              {
+                width: 16,
+                height: 16,
+                color: disabled ? theme.components.select.trigger.disabled.fg : theme.components.select.trigger.placeholder.fg
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+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: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  backdrop: {
+    ...StyleSheet15.absoluteFill,
+    backgroundColor: overlay2.backdrop
+  },
+  sheet: {
+    maxHeight: "50%",
+    backgroundColor: theme.components.select.dropdown.bg,
+    borderColor: theme.components.select.dropdown.border,
+    borderTopLeftRadius: theme.tokens.radius.lg,
+    borderTopRightRadius: theme.tokens.radius.lg,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  toolbar: {
+    minHeight: 48,
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    paddingHorizontal: theme.tokens.spacing[4],
+    borderBottomColor: theme.components.select.dropdown.border,
+    borderBottomWidth: 1
+  },
+  title: {
+    color: theme.components.select.dropdown.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md
+  },
+  cancelText: {
+    color: theme.components.select.trigger.placeholder.fg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md
+  },
+  doneText: {
+    color: theme.components.select.option.selected.bg,
+    fontFamily: theme.tokens.typography.family.medium,
+    fontSize: theme.tokens.typography.size.md
+  },
+  picker: {
+    width: "100%"
+  }
+});
+
+// src/components/Select/Select.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function Select({
+  label,
+  description,
+  value,
+  defaultValue,
+  onChange,
+  options,
+  placeholder = "Select...",
+  required = false,
+  disabled = false,
+  error,
+  style,
+  triggerStyle,
+  textStyle,
+  pickerStyle,
+  accessibilityLabel
+}) {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles15);
+  const [isOpen, setIsOpen] = useState3(false);
+  const [selectedValue, setSelectedValue] = useControllableState3({
+    value,
+    defaultValue: defaultValue ?? "",
+    onChange
+  });
+  const [draftValue, setDraftValue] = useState3(selectedValue);
+  const selectedOption = options.find((o) => o.value === selectedValue);
+  const resolvedLabel = accessibilityLabel ?? label ?? selectedOption?.label ?? placeholder ?? "Select";
+  const openPicker = () => {
+    if (disabled) return;
+    setDraftValue(selectedValue);
+    setIsOpen(true);
+  };
+  const closePicker = () => {
+    setIsOpen(false);
+  };
+  const handleValueChange = (nextValue) => {
+    const nextOption = options.find((option) => option.value === nextValue);
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    setDraftValue(nextValue);
+  };
+  const confirmPicker = () => {
+    setSelectedValue(draftValue);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs10(
+    FormField,
+    {
+      label,
+      description,
+      error,
+      required,
+      disabled,
+      style,
+      children: [
+        /* @__PURE__ */ jsx17(
+          SelectTrigger,
+          {
+            displayText: selectedOption?.label ?? placeholder,
+            isPlaceholder: !selectedOption,
+            isOpen,
+            disabled,
+            hasError: !!error,
+            accessibilityLabel: resolvedLabel,
+            triggerStyle,
+            textStyle,
+            onPress: openPicker
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          Modal3,
+          {
+            transparent: true,
+            visible: isOpen,
+            animationType: "slide",
+            onRequestClose: closePicker,
+            children: /* @__PURE__ */ jsxs10(View13, { style: styles.modalRoot, children: [
+              /* @__PURE__ */ jsx17(Pressable8, { style: styles.backdrop, onPress: closePicker }),
+              /* @__PURE__ */ jsxs10(View13, { style: styles.sheet, children: [
+                /* @__PURE__ */ jsxs10(View13, { style: styles.toolbar, children: [
+                  /* @__PURE__ */ jsx17(Pressable8, { onPress: closePicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text9, { style: styles.cancelText, children: "Cancel" }) }),
+                  /* @__PURE__ */ jsx17(Text9, { style: styles.title, children: resolvedLabel }),
+                  /* @__PURE__ */ jsx17(Pressable8, { onPress: confirmPicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text9, { style: styles.doneText, children: "Done" }) })
+                ] }),
+                /* @__PURE__ */ jsxs10(
+                  Picker,
+                  {
+                    selectedValue: draftValue,
+                    onValueChange: handleValueChange,
+                    enabled: !disabled,
+                    style: [styles.picker, pickerStyle],
+                    itemStyle: {
+                      color: theme.components.select.option.default.fg
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx17(
+                        Picker.Item,
+                        {
+                          label: placeholder,
+                          value: "",
+                          enabled: false,
+                          color: theme.components.select.option.disabled.fg
+                        }
+                      ),
+                      options.map((option) => /* @__PURE__ */ jsx17(
+                        Picker.Item,
+                        {
+                          label: option.disabled ? `${option.label} - unavailable` : option.label,
+                          value: option.value,
+                          enabled: !option.disabled,
+                          color: option.disabled ? theme.components.select.option.disabled.fg : theme.components.select.option.default.fg
+                        },
+                        option.value
+                      ))
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+Select.displayName = "Select";
+
+// src/components/Tabs/List/TabsList.tsx
+import { View as View14 } from "react-native";
+
+// src/components/Tabs/TabsContext.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var TabsContext = createContext3(null);
+var TabsProvider = TabsContext.Provider;
+var useTabs = () => {
+  const context = useContext3(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used inside <Tabs>.");
+  }
+  return context;
+};
+TabsContext.displayName = "TabsContext";
+
+// src/components/Tabs/List/TabsList.styles.ts
+import { StyleSheet as StyleSheet16 } from "react-native";
+var createStyles16 = (theme) => StyleSheet16.create({
+  list: {
+    flexDirection: "row",
+    alignSelf: "stretch",
+    width: "100%",
+    gap: theme.tokens.spacing[5],
+    marginBottom: theme.tokens.spacing[4]
+  },
+  listPills: {
+    backgroundColor: theme.components.tabs.pills.default.bg,
+    padding: 0
+  },
+  listVertical: {
+    alignSelf: "flex-start",
+    flexDirection: "column",
+    gap: theme.tokens.spacing[1],
+    marginRight: theme.tokens.spacing[4],
+    marginBottom: 0
+  }
+});
+
+// src/components/Tabs/List/TabsList.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var TabsList = ({ children, style }) => {
+  const styles = useThemeStyles(createStyles16);
+  const { orientation, appearance } = useTabs();
+  return /* @__PURE__ */ jsx18(
+    View14,
+    {
+      accessibilityRole: "tablist",
+      style: [
+        styles.list,
+        appearance === "pills" && styles.listPills,
+        orientation === "vertical" && styles.listVertical,
+        style
+      ],
+      children
+    }
+  );
+};
+TabsList.displayName = "TabsList";
+
+// src/components/Tabs/Panel/TabsPanel.tsx
+import { View as View15 } from "react-native";
+
+// src/components/Tabs/Panel/TabsPanel.styles.ts
+import { StyleSheet as StyleSheet17 } from "react-native";
+var createStyles17 = (theme) => StyleSheet17.create({
+  panel: {
+    flex: 1,
+    minWidth: 0,
+    padding: theme.tokens.spacing[4]
+  }
+});
+
+// src/components/Tabs/Panel/TabsPanel.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TabsPanel = ({ index, children, style }) => {
+  const styles = useThemeStyles(createStyles17);
+  const { activeIndex } = useTabs();
+  if (activeIndex !== index) return null;
+  return /* @__PURE__ */ jsx19(View15, { style: [styles.panel, style], children });
+};
+TabsPanel.displayName = "TabsPanel";
+
+// src/components/Tabs/Tab/Tab.tsx
+import { cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
+import { Pressable as Pressable9, Text as Text10, View as View16 } from "react-native";
+
+// src/components/Tabs/Tab/Tab.styles.ts
+import { StyleSheet as StyleSheet18 } from "react-native";
+var fontWeight2 = (value) => value;
+var createStyles18 = (theme) => StyleSheet18.create({
+  tab: {
+    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
+  },
+  tabVertical: {
+    flex: 0,
+    width: "100%",
+    justifyContent: "flex-start"
+  },
+  tabActive: {
+    backgroundColor: theme.components.tabs.trigger.active.bg
+  },
+  tabUnderline: {
+    borderBottomColor: "transparent",
+    borderBottomWidth: 3,
+    borderRadius: 0
+  },
+  tabUnderlineActive: {
+    borderBottomColor: theme.components.tabs.indicator.active.bg
+  },
+  tabDisabled: {
+    backgroundColor: theme.components.tabs.trigger.disabled.bg
+  },
+  tabText: {
+    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)
+  },
+  tabTextDisabled: {
+    color: theme.components.tabs.trigger.disabled.fg
+  },
+  tabTextActive: {
+    color: theme.components.tabs.trigger.active.fg
+  },
+  tabTextPillsActive: {
+    color: theme.components.tabs.pills.active.fg
+  },
+  tabPillsActive: {
+    backgroundColor: theme.components.tabs.pills.active.bg,
+    borderRadius: theme.tokens.radius.md
+  },
+  tabDefaultActive: {
+    backgroundColor: theme.components.tabs.trigger.active.bg
+  },
+  tabIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tabIconActive: {
+    color: theme.components.tabs.trigger.active.fg
+  },
+  tabIconPillsActive: {
+    color: theme.components.tabs.pills.active.fg
+  }
+});
+
+// src/components/Tabs/Tab/Tab.tsx
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var Tab = ({
+  index,
+  children,
+  icon,
+  disabled,
+  style,
+  textStyle
+}) => {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles18);
+  const { activeIndex, appearance, orientation, setActiveIndex } = useTabs();
+  const isActive = activeIndex === index;
+  const isPills = appearance === "pills";
+  const isUnderline = appearance === "underline";
+  const isDefault = appearance === "default";
+  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, {
+    color: iconColor
+  }) : icon;
+  return /* @__PURE__ */ jsxs11(
+    Pressable9,
+    {
+      disabled,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: isActive, disabled },
+      onPress: () => setActiveIndex(index),
+      style: [
+        styles.tab,
+        orientation === "vertical" && styles.tabVertical,
+        isPills && isActive && styles.tabPillsActive,
+        isUnderline && styles.tabUnderline,
+        isUnderline && isActive && styles.tabUnderlineActive,
+        isDefault && isActive && styles.tabDefaultActive,
+        disabled && styles.tabDisabled,
+        style
+      ],
+      children: [
+        icon != null && /* @__PURE__ */ jsx20(View16, { style: styles.tabIcon, children: renderedIcon }),
+        children != null && /* @__PURE__ */ jsx20(
+          Text10,
+          {
+            style: [
+              styles.tabText,
+              isPills && isActive && styles.tabTextPillsActive,
+              !isPills && isActive && styles.tabTextActive,
+              disabled && styles.tabTextDisabled,
+              textStyle
+            ],
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+Tab.displayName = "Tab";
+
+// src/components/Tabs/Tabs.tsx
+import { useCallback, useMemo as useMemo3, useState as useState4 } from "react";
+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%"
+  },
+  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
+  }
+});
+
+// src/components/Tabs/Tabs.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var TabsRoot = ({
+  children,
+  activeIndex: controlledActiveIndex,
+  defaultActiveIndex = 0,
+  onChange,
+  orientation = "horizontal",
+  appearance = "pills",
+  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(
+    () => ({ activeIndex, appearance, orientation, setActiveIndex }),
+    [activeIndex, appearance, orientation, setActiveIndex]
+  );
+  return /* @__PURE__ */ jsx21(TabsProvider, { value, children: /* @__PURE__ */ jsx21(
+    View17,
+    {
+      style: [
+        styles.root,
+        orientation === "vertical" && styles.rootVertical,
+        style
+      ],
+      children
+    }
+  ) });
+};
+TabsRoot.displayName = "TabsRoot";
+
+// src/components/Tabs/index.ts
+var Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab,
+  Panel: TabsPanel
+});
+
+// src/components/Tooltip/Tooltip.tsx
+import { useEffect as useEffect2, useRef as useRef3, useState as useState6 } from "react";
+import { Modal as Modal4, Pressable as Pressable10, Text as Text11, View as View18 } from "react-native";
+
+// src/hooks/useNativeFloatingPosition.ts
+import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
+import { Dimensions } from "react-native";
+var safePadding = 12;
+function useNativeFloatingPosition(placement = "top", offset = 8) {
+  const [position, setPosition] = useState5({ top: 0, left: 0 });
+  const floatingSizeRef = useRef2({
+    width: 0,
+    height: 0
+  });
+  const lastTriggerRef = useRef2(null);
+  const clamp = useCallback2((value, min, max) => {
+    return Math.min(Math.max(value, min), Math.max(min, max));
+  }, []);
+  const calculatePosition = useCallback2(
+    (triggerRect, size) => {
+      const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
+      const [side, align = "center"] = placement.split("-");
+      const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
+      const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
+      const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
+      const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
+      const rawPosition = side === "left" || side === "right" ? { top: verticalTop, left: verticalLeft } : { top: horizontalTop, left: horizontalLeft };
+      return {
+        top: clamp(
+          rawPosition.top,
+          safePadding,
+          screenHeight - size.height - safePadding
+        ),
+        left: clamp(
+          rawPosition.left,
+          safePadding,
+          screenWidth - size.width - safePadding
+        )
+      };
+    },
+    [placement, offset, clamp]
+  );
+  const updatePosition = useCallback2(
+    (triggerRef, measuredSize = floatingSizeRef.current) => {
+      lastTriggerRef.current = triggerRef;
+      const node = triggerRef.current;
+      if (!node || typeof node.measureInWindow !== "function") {
+        setPosition({ top: 0, left: 0 });
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        setPosition(calculatePosition({ x, y, width, height }, measuredSize));
+      });
+    },
+    [calculatePosition]
+  );
+  const onFloatingLayout = useCallback2(
+    (event) => {
+      const { width, height } = event.nativeEvent.layout;
+      const nextSize = { width, height };
+      floatingSizeRef.current = nextSize;
+      if (lastTriggerRef.current) {
+        updatePosition(lastTriggerRef.current, nextSize);
+      }
+    },
+    [updatePosition]
+  );
+  return { position, updatePosition, onFloatingLayout };
+}
+
+// src/components/Tooltip/Tooltip.styles.ts
+import { StyleSheet as StyleSheet20 } from "react-native";
+var createStyles20 = (theme) => StyleSheet20.create({
+  root: {
+    alignSelf: "flex-start"
+  },
+  overlay: {
+    ...StyleSheet20.absoluteFill
+  },
+  bubble: {
+    position: "absolute",
+    zIndex: 1e3,
+    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,
+    shadowOffset: {
+      width: theme.tokens.shadows.sm.x,
+      height: theme.tokens.shadows.sm.y
+    },
+    shadowOpacity: theme.tokens.shadows.sm.opacity,
+    shadowRadius: theme.tokens.shadows.sm.blur,
+    elevation: theme.tokens.shadows.sm.elevation
+  },
+  text: {
+    color: theme.components.tooltip.content.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: 20,
+    textAlign: "center"
+  }
+});
+
+// src/components/Tooltip/Tooltip.tsx
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function Tooltip({
+  children,
+  content,
+  placement = "top",
+  disabled = false,
+  maxWidth = 240,
+  delay,
+  style,
+  contentStyle,
+  textStyle
+}) {
+  const styles = useThemeStyles(createStyles20);
+  const [visible, setVisible] = useState6(false);
+  const triggerRef = useRef3(null);
+  const closeTimerRef = useRef3(null);
+  const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
+  const hideDelay = delay?.close ?? 2500;
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+  const showTooltip = () => {
+    if (disabled) return;
+    clearCloseTimer();
+    updatePosition(triggerRef);
+    setVisible(true);
+    closeTimerRef.current = setTimeout(() => {
+      setVisible(false);
+      closeTimerRef.current = null;
+    }, hideDelay);
+  };
+  useEffect2(() => {
+    return clearCloseTimer;
+  }, []);
+  return /* @__PURE__ */ jsxs12(View18, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx22(Pressable10, { ref: triggerRef, onLongPress: showTooltip, children }),
+    /* @__PURE__ */ jsx22(Modal4, { visible: visible && !disabled, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx22(
+      Pressable10,
+      {
+        style: styles.overlay,
+        onPress: () => {
+          clearCloseTimer();
+          setVisible(false);
+        },
+        children: /* @__PURE__ */ jsx22(
+          View18,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.bubble,
+              {
+                maxWidth,
+                top: position.top,
+                left: position.left
+              },
+              contentStyle
+            ],
+            onLayout: onFloatingLayout,
+            children: typeof content === "string" ? /* @__PURE__ */ jsx22(Text11, { style: [styles.text, textStyle], children: content }) : content
+          }
+        )
+      }
+    ) })
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+
+// src/primitives/Button/Button.tsx
+import { cloneElement as cloneElement4, useState as useState7 } from "react";
+import { Pressable as Pressable11, Text as Text12 } from "react-native";
+
+// src/primitives/Button/Button.styles.ts
+import { StyleSheet as StyleSheet21 } from "react-native";
+var fontWeight3 = (value) => value;
+var createStyles21 = (theme) => StyleSheet21.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 0
+  },
+  fullWidth: {
+    alignSelf: "stretch",
+    width: "100%"
+  },
+  text: {
+    fontFamily: theme.tokens.typography.family.regular,
+    fontWeight: fontWeight3(theme.tokens.typography.weight.regular),
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    // Кнопка сама задает цвет текста через props,
+    // поэтому это значение используется как fallback.
+    color: theme.components.button.primary.default.fg
+  },
+  disabled: {
+    borderColor: theme.components.button.disabled.border,
+    borderWidth: 1
+  },
+  pressed: {
+    transform: [{ scale: 0.98 }]
+  }
+});
+
+// src/primitives/Button/Button.tsx
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+var sizeMap = {
+  sm: {
+    px: 12,
+    py: 8,
+    fontSize: 12,
+    iconSize: 16
+  },
+  md: {
+    px: 16,
+    py: 12,
+    fontSize: 14,
+    iconSize: 20
+  },
+  lg: {
+    px: 20,
+    py: 16,
+    fontSize: 16,
+    iconSize: 24
+  }
+};
+function Button({
+  children,
+  disabled = false,
+  onPress,
+  variant = "primary",
+  size = "md",
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  style,
+  accessibilityLabel,
+  iconSize
+}) {
+  const { theme } = useTheme();
+  const styles = useThemeStyles(createStyles21);
+  const config = sizeMap[size];
+  const variantTheme = theme.components.button[variant];
+  const [isPressed, setIsPressed] = useState7(false);
+  const iconOnly = !children && Boolean(leftIcon || rightIcon);
+  if (iconOnly && !accessibilityLabel) {
+    console.warn(
+      "Vellira Button: icon-only buttons must provide an accessibilityLabel."
+    );
+  }
+  const contentColor = disabled ? theme.components.button.disabled.fg : isPressed ? variantTheme.pressed.fg : variantTheme.default.fg;
+  const resolvedIconSize = iconSize ?? config.iconSize;
+  const renderIcon = (icon, color) => {
+    return cloneElement4(icon, {
+      color,
+      size: resolvedIconSize
+    });
+  };
+  return /* @__PURE__ */ jsxs13(
+    Pressable11,
+    {
+      disabled,
+      onPress,
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      accessibilityLabel: accessibilityLabel ?? (typeof children === "string" ? children : void 0),
+      onPressIn: () => setIsPressed(true),
+      onPressOut: () => setIsPressed(false),
+      style: ({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: disabled ? theme.components.button.disabled.bg : pressed ? variantTheme.pressed.bg : variantTheme.default.bg,
+          paddingHorizontal: iconOnly ? config.py : config.px,
+          paddingVertical: config.py
+        },
+        fullWidth && styles.fullWidth,
+        disabled && styles.disabled,
+        pressed && !disabled && styles.pressed,
+        style
+      ],
+      children: [
+        leftIcon && renderIcon(leftIcon, contentColor),
+        children && /* @__PURE__ */ jsx23(
+          Text12,
+          {
+            style: [
+              styles.text,
+              {
+                fontSize: config.fontSize,
+                color: contentColor
+              }
+            ],
+            children
+          }
+        ),
+        rightIcon && renderIcon(rightIcon, contentColor)
+      ]
+    }
+  );
+}
+
+// src/primitives/Checkbox/Checkbox.tsx
+import { forwardRef } from "react";
+import { useControllableState as useControllableState4 } from "@vellira-ui/core";
+import { Check } from "@vellira-ui/icons";
+import { Pressable as Pressable12, Text as Text13, View as View19 } from "react-native";
+
+// src/primitives/Checkbox/Checkbox.styles.ts
+import { StyleSheet as StyleSheet22 } from "react-native";
+var createStyles22 = (theme) => StyleSheet22.create({
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.tokens.spacing[3]
+  },
+  disabled: {
+    opacity: 1
+  },
+  box: {
+    width: 22,
+    height: 22,
+    borderWidth: 2,
+    borderColor: theme.components.checkbox.default.border,
+    borderRadius: theme.tokens.radius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.components.checkbox.default.bg
+  },
+  boxChecked: {
+    backgroundColor: theme.components.checkbox.checked.default.bg,
+    borderColor: theme.components.checkbox.checked.default.border
+  },
+  boxDisabled: {
+    backgroundColor: theme.components.checkbox.disabled.bg,
+    borderColor: theme.components.checkbox.disabled.border
+  },
+  boxError: {
+    borderColor: theme.components.checkbox.error.border
+  },
+  label: {
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    color: theme.components.checkbox.default.fg
+  },
+  labelDisabled: {
+    color: theme.components.checkbox.disabled.fg
+  },
+  container: {
+    gap: theme.tokens.spacing[2]
+  },
+  errorText: {
+    color: theme.components.checkbox.error.fg,
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm,
+    marginLeft: 22 + theme.tokens.spacing[3]
+  }
+});
+
+// src/primitives/Checkbox/Checkbox.tsx
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+var Checkbox = forwardRef(
+  ({
+    label,
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    onCheckedChange,
+    error,
+    style,
+    ...props
+  }, ref) => {
+    const { theme } = useTheme();
+    const styles = useThemeStyles(createStyles22);
+    const hasError = Boolean(error);
+    const [isChecked, setIsChecked] = useControllableState4({
+      value: checked,
+      defaultValue: defaultChecked,
+      onChange: onCheckedChange
+    });
+    const handlePress = () => {
+      if (disabled) return;
+      setIsChecked(!isChecked);
+    };
+    const checkColor = disabled ? theme.components.checkbox.disabled.fg : theme.components.checkbox.checked.default.fg;
+    return /* @__PURE__ */ jsxs14(View19, { style: styles.container, children: [
+      /* @__PURE__ */ jsxs14(
+        Pressable12,
+        {
+          ref,
+          onPress: handlePress,
+          disabled,
+          accessibilityRole: "checkbox",
+          accessibilityState: {
+            checked: isChecked,
+            disabled
+          },
+          accessibilityHint: hasError ? error : void 0,
+          accessibilityLabel: label ?? "Checkbox",
+          style: [styles.wrapper, disabled && styles.disabled, style],
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx24(
+              View19,
+              {
+                style: [
+                  styles.box,
+                  isChecked && styles.boxChecked,
+                  hasError && styles.boxError,
+                  disabled && styles.boxDisabled
+                ],
+                children: isChecked && /* @__PURE__ */ jsx24(Check, { size: 12, color: checkColor })
+              }
+            ),
+            label && /* @__PURE__ */ jsx24(Text13, { style: [styles.label, disabled && styles.labelDisabled], children: label })
+          ]
+        }
+      ),
+      hasError && /* @__PURE__ */ jsx24(Text13, { style: styles.errorText, children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/primitives/Input/Input.tsx
+import { cloneElement as cloneElement5, forwardRef as forwardRef2, useState as useState8 } from "react";
+import { 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 createStyles23 = (theme) => StyleSheet23.create({
+  inputWrapper: {
+    position: "relative",
+    width: "100%",
+    minWidth: 0,
+    alignSelf: "stretch"
+  },
+  input: {
+    width: "100%",
+    minWidth: 0,
+    alignSelf: "stretch",
+    color: theme.components.input.default.fg,
+    fontFamily: theme.tokens.typography.family.regular,
+    fontSize: theme.tokens.typography.size.md,
+    backgroundColor: theme.components.input.default.bg,
+    borderColor: theme.components.input.default.border,
+    borderRadius: theme.tokens.radius.md,
+    borderWidth: 1
+  },
+  inputWithLeftIcon: {
+    paddingLeft: theme.tokens.spacing[5] + 20
+  },
+  leftIcon: {
+    position: "absolute",
+    left: theme.tokens.spacing[4],
+    top: 0,
+    bottom: 0,
+    zIndex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  sm: {
+    minHeight: 36,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2],
+    fontSize: theme.tokens.typography.size.sm
+  },
+  md: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3],
+    fontSize: theme.tokens.typography.size.md
+  },
+  lg: {
+    minHeight: 52,
+    paddingHorizontal: theme.tokens.spacing[5],
+    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
+  },
+  errorFocused: {
+    borderColor: theme.components.input.error.border
+  },
+  disabled: {
+    opacity: 1,
+    color: theme.components.input.disabled.fg,
+    backgroundColor: theme.components.input.disabled.bg,
+    borderColor: theme.components.input.disabled.border
+  }
+});
+
+// src/primitives/Input/Input.tsx
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+var keyboardTypeByInputType = {
+  text: "default",
+  email: "email-address",
+  password: "default",
+  number: "numeric",
+  tel: "phone-pad",
+  url: "url",
+  search: "web-search"
+};
+var autoCapitalizeByInputType = {
+  text: "sentences",
+  email: "none",
+  password: "none",
+  number: "none",
+  tel: "none",
+  url: "none",
+  search: "none"
+};
+var autoCorrectByInputType = {
+  text: true,
+  email: false,
+  password: false,
+  number: false,
+  tel: false,
+  url: false,
+  search: false
+};
+var Input = forwardRef2(
+  ({
+    label,
+    value,
+    onChange,
+    placeholder,
+    size = "md",
+    error,
+    disabled = false,
+    required = false,
+    type = "text",
+    leftIcon,
+    iconSize,
+    containerStyle,
+    inputStyle,
+    keyboardType,
+    secureTextEntry,
+    autoCapitalize,
+    autoCorrect,
+    onBlur,
+    onFocus,
+    accessibilityLabel,
+    accessibilityHint,
+    ...props
+  }, ref) => {
+    const { theme } = useTheme();
+    const styles = useThemeStyles(createStyles23);
+    const [isFocused, setIsFocused] = useState8(false);
+    const placeholderTextColor = disabled ? getDisabledPlaceholderTextColor(theme) : getPlaceholderTextColor(theme);
+    const isPassword = type === "password";
+    const resolvedIconSize = iconSize ?? 16;
+    const iconColor = disabled ? theme.components.input.disabled.fg : isFocused ? theme.components.input.focus.fg : theme.components.input.default.placeholder;
+    const handleFocus = (event) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      setIsFocused(false);
+      onBlur?.(event);
+    };
+    return /* @__PURE__ */ jsx25(
+      FormField,
+      {
+        label,
+        error,
+        required,
+        disabled,
+        style: containerStyle,
+        children: /* @__PURE__ */ jsxs15(View20, { style: styles.inputWrapper, children: [
+          leftIcon && /* @__PURE__ */ jsx25(
+            View20,
+            {
+              pointerEvents: "none",
+              style: styles.leftIcon,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: cloneElement5(leftIcon, {
+                color: iconColor,
+                size: resolvedIconSize
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx25(
+            TextInput,
+            {
+              ...props,
+              ref,
+              value,
+              editable: !disabled,
+              placeholder,
+              keyboardType: keyboardType ?? keyboardTypeByInputType[type],
+              secureTextEntry: secureTextEntry ?? isPassword,
+              autoCapitalize: autoCapitalize ?? autoCapitalizeByInputType[type],
+              autoCorrect: autoCorrect ?? autoCorrectByInputType[type],
+              onChangeText: onChange,
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              placeholderTextColor,
+              accessibilityLabel: accessibilityLabel ?? label,
+              accessibilityHint,
+              accessibilityState: { disabled },
+              style: [
+                styles.input,
+                styles[size],
+                inputStyle,
+                leftIcon && styles.inputWithLeftIcon,
+                isFocused && !disabled && styles.focused,
+                error && styles.error,
+                isFocused && error && !disabled && styles.errorFocused,
+                disabled && styles.disabled
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Button,
+  Checkbox,
+  Dropdown,
+  FormField,
+  Input,
+  Modal2 as Modal,
+  RadioGroup,
+  Select,
+  Tabs,
+  ThemeProvider,
+  Tooltip,
+  nativeThemes,
+  useTheme
+};