@onlynative/components 0.0.0-alpha.0 → 0.0.0-alpha.2

package/dist/keyboard-avoiding-wrapper/index.js

@@ -57,15 +57,11 @@ function KeyboardAvoidingWrapper({
     const subscriptions = [];
     if (onKeyboardShow) {
       const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
-      subscriptions.push(
-        import_react_native2.Keyboard.addListener(showEvent, onKeyboardShow)
-      );
+      subscriptions.push(import_react_native2.Keyboard.addListener(showEvent, onKeyboardShow));
     }
     if (onKeyboardHide) {
       const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
-      subscriptions.push(
-        import_react_native2.Keyboard.addListener(hideEvent, onKeyboardHide)
-      );
+      subscriptions.push(import_react_native2.Keyboard.addListener(hideEvent, onKeyboardHide));
     }
     return () => {
       subscriptions.forEach((sub) => sub.remove());

package/dist/layout/index.js

@@ -39,10 +39,10 @@ __export(layout_exports, {
 module.exports = __toCommonJS(layout_exports);
 
 // src/layout/Layout.tsx
+var import_core = require("@onlynative/core");
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_core = require("@onlynative/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultEdges = ["bottom"];
 function resolveEdges(immersive, edges) {
@@ -96,9 +96,9 @@ function Layout({ immersive, edges, children, style }) {
 }
 
 // src/layout/Box.tsx
+var import_core2 = require("@onlynative/core");
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
-var import_core2 = require("@onlynative/core");
 
 // src/layout/resolveSpacing.ts
 function resolveSpacing(spacing, value) {
@@ -213,9 +213,9 @@ function Column({ inverted = false, style, ...boxProps }) {
 }
 
 // src/layout/Grid.tsx
+var import_core3 = require("@onlynative/core");
 var import_react5 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
-var import_core3 = require("@onlynative/core");
 
 // src/layout/Row.tsx
 var import_react4 = require("react");

package/dist/list/index.js

@@ -27,16 +27,11 @@ __export(list_exports, {
 module.exports = __toCommonJS(list_exports);
 
 // src/list/List.tsx
-var import_react = require("react");
-var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
-
-// src/list/styles.ts
+var import_react = require("react");
 var import_react_native3 = require("react-native");
 
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -80,7 +75,29 @@ function blendColor(base, overlay, overlayAlpha) {
   return `rgb(${r}, ${g}, ${b})`;
 }
 
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
+function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      base,
+      state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+      state.pressed && !isDisabled ? pressed : void 0,
+      isDisabled ? disabled : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    base,
+    state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+    state.pressed && !isDisabled ? pressed : void 0,
+    isDisabled ? disabled : void 0,
+    style
+  ];
+}
+
 // src/list/styles.ts
+var import_react_native2 = require("react-native");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -89,7 +106,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native3.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -126,7 +143,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native3.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -181,7 +198,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native3.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -195,13 +212,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createListStyles(theme), [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { ...props, style: [styles.container, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { ...props, style: [styles.container, style], children });
 }
 
 // src/list/ListItem.tsx
-var import_react2 = require("react");
-var import_react_native5 = require("react-native");
 var import_core2 = require("@onlynative/core");
+var import_react2 = require("react");
+var import_react_native4 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
   if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
@@ -227,18 +244,22 @@ function ListItem({
   const isDisabled = Boolean(disabled);
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core2.useTheme)();
-  const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
+  const lines = getLines(
+    supportingText,
+    overlineText,
+    supportingTextNumberOfLines
+  );
   const styles = (0, import_react2.useMemo)(
     () => createListItemStyles(theme, lines, containerColor),
     [theme, lines, containerColor]
   );
   const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.View, { style: styles.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native5.View, { style: styles.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: styles.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: styles.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native5.Text,
+        import_react_native4.Text,
         {
           style: styles.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -246,41 +267,40 @@ function ListItem({
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native5.View, { style: styles.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.Text, { style: styles.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: styles.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
       trailingContent
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.View, { ...props, style: [styles.container, style], children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ...props, style: [styles.container, style], children: content });
   }
-  const resolvedStyle = (state) => [
-    styles.container,
-    styles.interactiveContainer,
-    state.hovered && !state.pressed && !isDisabled ? styles.hoveredContainer : void 0,
-    state.pressed && !isDisabled ? styles.pressedContainer : void 0,
-    isDisabled ? styles.disabledContainer : void 0,
-    typeof style === "function" ? style(state) : style
-  ];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native5.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native5.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
-      style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.View, { style: styles.disabledContentWrapper, children: content }) : content
+      style: resolvePressableStyle(
+        [styles.container, styles.interactiveContainer],
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: styles.disabledContentWrapper, children: content }) : content
     }
   );
 }
 
 // src/list/ListDivider.tsx
-var import_react3 = require("react");
-var import_react_native6 = require("react-native");
 var import_core3 = require("@onlynative/core");
+var import_react3 = require("react");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ListDivider({
   inset = false,
@@ -292,7 +312,7 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { ...props, style: [styles.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { ...props, style: [styles.divider, style] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/radio/index.js

@@ -25,16 +25,9 @@ __export(radio_exports, {
 module.exports = __toCommonJS(radio_exports);
 
 // src/radio/Radio.tsx
-var import_react = require("react");
-var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// src/radio/styles.ts
-var import_react_native3 = require("react-native");
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -60,7 +53,33 @@ function alphaColor(color, alpha) {
   return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
 }
 
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
+function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      base,
+      state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+      state.pressed && !isDisabled ? pressed : void 0,
+      isDisabled ? disabled : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    base,
+    state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+    state.pressed && !isDisabled ? pressed : void 0,
+    isDisabled ? disabled : void 0,
+    style
+  ];
+}
+
+// src/radio/Radio.tsx
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+
 // src/radio/styles.ts
+var import_react_native2 = require("react-native");
 function getColors(theme, selected) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
@@ -124,7 +143,7 @@ function createStyles(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native3.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -169,24 +188,6 @@ function createStyles(theme, selected, containerColor, contentColor) {
 
 // src/radio/Radio.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      containerStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-      state.pressed && !disabled ? pressedContainerStyle : void 0,
-      disabled ? disabledContainerStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    containerStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
-    state.pressed && !disabled ? pressedContainerStyle : void 0,
-    disabled ? disabledContainerStyle : void 0,
-    style
-  ];
-}
 function Radio({
   style,
   value = false,
@@ -209,7 +210,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native4.Pressable,
+    import_react_native3.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -217,10 +218,10 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
-      style: resolveStyle(
+      style: resolvePressableStyle(
         styles.container,
         styles.hoveredContainer,
         styles.pressedContainer,
@@ -229,11 +230,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native4.View,
+        import_react_native3.View,
         {
           style: [styles.outer, isDisabled ? styles.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native4.View,
+            import_react_native3.View,
             {
               style: [
                 styles.inner,

package/dist/switch/index.js

@@ -25,21 +25,9 @@ __export(switch_exports, {
 module.exports = __toCommonJS(switch_exports);
 
 // src/switch/Switch.tsx
-var import_react = require("react");
-var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// ../utils/dist/chunk-OQRDRRQA.mjs
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -82,13 +70,15 @@ function blendColor(base, overlay, overlayAlpha) {
   );
   return `rgb(${r}, ${g}, ${b})`;
 }
+
+// ../utils/src/icon.ts
 var _MCIcons = null;
 var _resolved = false;
 function getMaterialCommunityIcons() {
   if (!_resolved) {
     _resolved = true;
     try {
-      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
       _MCIcons = mod.default || mod;
     } catch {
       _MCIcons = null;
@@ -102,8 +92,37 @@ function getMaterialCommunityIcons() {
   return _MCIcons;
 }
 
-// src/switch/styles.ts
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
+function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      base,
+      state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+      state.pressed && !isDisabled ? pressed : void 0,
+      isDisabled ? disabled : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    base,
+    state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
+    state.pressed && !isDisabled ? pressed : void 0,
+    isDisabled ? disabled : void 0,
+    style
+  ];
+}
+function resolveColorFromStyle(...styles) {
+  const flattened = import_react_native.StyleSheet.flatten(styles);
+  return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
+}
+
+// src/switch/Switch.tsx
+var import_react = require("react");
 var import_react_native3 = require("react-native");
+
+// src/switch/styles.ts
+var import_react_native2 = require("react-native");
 function getColors(theme, selected) {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
@@ -191,7 +210,7 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native3.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -237,24 +256,6 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
 
 // src/switch/Switch.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function resolveStyle(trackStyle, hoveredTrackStyle, pressedTrackStyle, disabledTrackStyle, disabled, style) {
-  if (typeof style === "function") {
-    return (state) => [
-      trackStyle,
-      state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
-      state.pressed && !disabled ? pressedTrackStyle : void 0,
-      disabled ? disabledTrackStyle : void 0,
-      style(state)
-    ];
-  }
-  return (state) => [
-    trackStyle,
-    state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
-    state.pressed && !disabled ? pressedTrackStyle : void 0,
-    disabled ? disabledTrackStyle : void 0,
-    style
-  ];
-}
 function Switch({
   style,
   value = false,
@@ -274,13 +275,13 @@ function Switch({
     () => createStyles(theme, isSelected, hasIcon, containerColor, contentColor),
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react.useMemo)(() => {
-    const base = import_react_native4.StyleSheet.flatten([
+  const resolvedIconColor = (0, import_react.useMemo)(
+    () => resolveColorFromStyle(
       styles.iconColor,
       isDisabled ? styles.disabledIconColor : void 0
-    ]);
-    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
-  }, [styles.iconColor, styles.disabledIconColor, isDisabled]);
+    ),
+    [styles.iconColor, styles.disabledIconColor, isDisabled]
+  );
   const handlePress = () => {
     if (!isDisabled) {
       onValueChange == null ? void 0 : onValueChange(!isSelected);
@@ -290,7 +291,7 @@ function Switch({
   const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native4.Pressable,
+    import_react_native3.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -298,10 +299,10 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
-      style: resolveStyle(
+      style: resolvePressableStyle(
         styles.track,
         styles.hoveredTrack,
         styles.pressedTrack,
@@ -310,7 +311,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native4.View,
+        import_react_native3.View,
         {
           style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/text-field/index.js

@@ -25,21 +25,9 @@ __export(text_field_exports, {
 module.exports = __toCommonJS(text_field_exports);
 
 // src/text-field/TextField.tsx
-var import_react = require("react");
-var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// ../utils/dist/chunk-OQRDRRQA.mjs
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -64,13 +52,15 @@ function alphaColor(color, alpha) {
   }
   return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
 }
+
+// ../utils/src/icon.ts
 var _MCIcons = null;
 var _resolved = false;
 function getMaterialCommunityIcons() {
   if (!_resolved) {
     _resolved = true;
     try {
-      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
       _MCIcons = mod.default || mod;
     } catch {
       _MCIcons = null;
@@ -83,12 +73,19 @@ function getMaterialCommunityIcons() {
   }
   return _MCIcons;
 }
+
+// ../utils/src/rtl.ts
+var import_react_native = require("react-native");
 function transformOrigin(vertical = "top") {
-  return import_react_native2.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+  return import_react_native.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
 }
 
-// src/text-field/styles.ts
+// src/text-field/TextField.tsx
+var import_react = require("react");
 var import_react_native3 = require("react-native");
+
+// src/text-field/styles.ts
+var import_react_native2 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -147,7 +144,7 @@ function createStyles(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native3.StyleSheet.create({
+    styles: import_react_native2.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -324,13 +321,13 @@ function TextField({
   const isControlled = value !== void 0;
   const hasValue = isControlled ? value !== "" : internalHasText;
   const isLabelFloated = isFocused || hasValue;
-  const labelAnimRef = (0, import_react.useRef)(new import_react_native4.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react.useRef)(new import_react_native3.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react.useEffect)(() => {
-    import_react_native4.Animated.timing(labelAnim, {
+    import_react_native3.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native4.Platform.OS !== "web"
+      useNativeDriver: import_react_native3.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react.useMemo)(() => {
@@ -408,9 +405,9 @@ function TextField({
     [styles, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native4.View, { style: [styles.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native4.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -419,14 +416,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native4.View,
+        import_react_native3.View,
         {
           style: [
             styles.inputWrapper,
             label ? styles.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native4.TextInput,
+            import_react_native3.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -452,14 +449,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native4.Pressable,
+        import_react_native3.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -470,7 +467,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native4.Animated.Text,
+        import_react_native3.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -490,10 +487,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native4.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native3.Text,
       {
         style: [
           styles.supportingText,