@mgcrea/react-native-tailwind 0.12.0 → 0.13.0

package/dist/babel/utils/colorSchemeModifierProcessing.ts

@@ -5,6 +5,7 @@
 import type * as BabelTypes from "@babel/types";
 import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
+import { hasRuntimeDimensions } from "./windowDimensionsProcessing.js";
 
 /**
  * Plugin state interface (subset needed for color scheme modifier processing)
@@ -66,6 +67,16 @@ export function processColorSchemeModifiers(
     // Parse all classes for this color scheme together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
     const styleObject = parseClassName(classNames, state.customTheme);
+
+    // Check for runtime dimensions (w-screen, h-screen)
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with color scheme modifiers (dark:, light:, scheme:). ` +
+          `Found in: "${scheme}:${classNames}". ` +
+          `Use w-screen/h-screen without modifiers instead.`,
+      );
+    }
+
     const styleKey = generateStyleKey(`${scheme}_${classNames}`);
 
     // Register style in the registry

package/dist/babel/utils/componentSupport.test.ts

@@ -86,6 +86,26 @@ describe("getComponentModifierSupport", () => {
         supportedModifiers: ["focus", "disabled", "placeholder"],
       });
     });
+
+    it("should recognize TouchableOpacity component", () => {
+      const element = createJSXElement("<TouchableOpacity />");
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "TouchableOpacity",
+        supportedModifiers: ["active", "disabled"],
+      });
+    });
+
+    it("should recognize TouchableOpacity with attributes", () => {
+      const element = createJSXElement('<TouchableOpacity className="m-4" onPress={handlePress} />');
+      const result = getComponentModifierSupport(element, t);
+
+      expect(result).toEqual({
+        component: "TouchableOpacity",
+        supportedModifiers: ["active", "disabled"],
+      });
+    });
   });
 
   describe("Member expressions", () => {
@@ -139,13 +159,6 @@ describe("getComponentModifierSupport", () => {
       expect(result).toBeNull();
     });
 
-    it("should return null for TouchableOpacity", () => {
-      const element = createJSXElement("<TouchableOpacity />");
-      const result = getComponentModifierSupport(element, t);
-
-      expect(result).toBeNull();
-    });
-
     it("should return null for custom components", () => {
       const element = createJSXElement("<CustomButton />");
       const result = getComponentModifierSupport(element, t);

package/dist/babel/utils/componentSupport.ts

@@ -41,6 +41,8 @@ export function getComponentModifierSupport(
   switch (componentName) {
     case "Pressable":
       return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
+    case "TouchableOpacity":
+      return { component: "TouchableOpacity", supportedModifiers: ["active", "disabled"] };
     case "TextInput":
       return { component: "TextInput", supportedModifiers: ["focus", "disabled", "placeholder"] };
     default:

package/dist/babel/utils/modifierProcessing.ts

@@ -6,6 +6,7 @@ import type * as BabelTypes from "@babel/types";
 import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 import { getStatePropertyForModifier } from "./componentSupport.js";
+import { hasRuntimeDimensions } from "./windowDimensionsProcessing.js";
 
 /**
  * Plugin state interface (subset needed for modifier processing)
@@ -36,6 +37,16 @@ export function processStaticClassNameWithModifiers(
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+
+    // Check for runtime dimensions (w-screen, h-screen) in base classes
+    if (hasRuntimeDimensions(baseStyleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with state modifiers (active:, hover:, focus:, etc.) or platform modifiers (ios:, android:, web:). ` +
+          `Found in: "${baseClassName}". ` +
+          `Use w-screen/h-screen without modifiers instead.`,
+      );
+    }
+
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -67,6 +78,16 @@ export function processStaticClassNameWithModifiers(
     // Parse all modifier classes together
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
     const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
+
+    // Check for runtime dimensions (w-screen, h-screen) in modifier classes
+    if (hasRuntimeDimensions(modifierStyleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with state modifiers (active:, hover:, focus:, etc.) or platform modifiers (ios:, android:, web:). ` +
+          `Found in: "${modifierType}:${modifierClassNames}". ` +
+          `Use w-screen/h-screen without modifiers instead.`,
+      );
+    }
+
     const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 

package/dist/babel/utils/platformModifierProcessing.ts

@@ -5,6 +5,7 @@
 import type * as BabelTypes from "@babel/types";
 import type { CustomTheme, ParsedModifier, PlatformModifierType } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
+import { hasRuntimeDimensions } from "./windowDimensionsProcessing.js";
 
 /**
  * Plugin state interface (subset needed for platform modifier processing)
@@ -62,6 +63,16 @@ export function processPlatformModifiers(
     // Parse all classes for this platform together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
     const styleObject = parseClassName(classNames, state.customTheme);
+
+    // Check for runtime dimensions (w-screen, h-screen)
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with platform modifiers (ios:, android:, web:). ` +
+          `Found in: "${platform}:${classNames}". ` +
+          `Use w-screen/h-screen without modifiers instead.`,
+      );
+    }
+
     const styleKey = generateStyleKey(`${platform}_${classNames}`);
 
     // Register style in the registry

package/dist/babel/utils/styleInjection.d.ts

@@ -27,6 +27,21 @@ export declare function addColorSchemeImport(path: NodePath<BabelTypes.Program>,
  * @returns true if hook was injected, false if already exists
  */
 export declare function injectColorSchemeHook(functionPath: NodePath<BabelTypes.Function>, colorSchemeVariableName: string, hookName: string, localIdentifier: string | undefined, t: typeof BabelTypes): boolean;
+/**
+ * Add useWindowDimensions import to the file or merge with existing react-native import
+ */
+export declare function addWindowDimensionsImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
+/**
+ * Inject useWindowDimensions hook call at the top of a function component
+ *
+ * @param functionPath - Path to the function component
+ * @param dimensionsVariableName - Name for the dimensions variable
+ * @param hookName - Name of the hook to call (e.g., 'useWindowDimensions')
+ * @param localIdentifier - Local identifier if hook is already imported with an alias
+ * @param t - Babel types
+ * @returns true if hook was injected, false if already exists
+ */
+export declare function injectWindowDimensionsHook(functionPath: NodePath<BabelTypes.Function>, dimensionsVariableName: string, hookName: string, localIdentifier: string | undefined, t: typeof BabelTypes): boolean;
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/babel/utils/styleInjection.ts

@@ -10,24 +10,44 @@ import type { StyleObject } from "../../types/core.js";
  * Add StyleSheet import to the file or merge with existing react-native import
  */
 export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add StyleSheet to existing react-native import
-    reactNativeImport.specifiers.push(
-      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+  if (existingValueImport) {
+    // Check if StyleSheet is already imported
+    const hasStyleSheet = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) &&
+        spec.imported.type === "Identifier" &&
+        spec.imported.name === "StyleSheet",
     );
+
+    if (!hasStyleSheet) {
+      // Add StyleSheet to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+      );
+    }
   } else {
-    // Create new react-native import with StyleSheet
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
       t.stringLiteral("react-native"),
@@ -40,22 +60,42 @@ export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeo
  * Add Platform import to the file or merge with existing react-native import
  */
 export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add Platform to existing react-native import
-    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  if (existingValueImport) {
+    // Check if Platform is already imported
+    const hasPlatform = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "Platform",
+    );
+
+    if (!hasPlatform) {
+      // Add Platform to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")),
+      );
+    }
   } else {
-    // Create new react-native import with Platform
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
       t.stringLiteral("react-native"),
@@ -180,6 +220,121 @@ export function injectColorSchemeHook(
   return true;
 }
 
+/**
+ * Add useWindowDimensions import to the file or merge with existing react-native import
+ */
+export function addWindowDimensionsImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
+  // Check if there's already an import from react-native
+  const body = path.node.body;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      // Only consider value imports (not type-only imports which get erased)
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break; // Found a value import, we can stop
+      }
+    }
+  }
+
+  // If we found a value import (not type-only), merge with it
+  if (existingValueImport) {
+    // Check if the hook is already imported
+    const hasHook = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) &&
+        spec.imported.type === "Identifier" &&
+        spec.imported.name === "useWindowDimensions",
+    );
+
+    if (!hasHook) {
+      // Add hook to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions")),
+      );
+    }
+  } else {
+    // No value import exists - create a new one
+    // (Don't merge with type-only imports as they get erased by Babel/TypeScript)
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
+}
+
+/**
+ * Inject useWindowDimensions hook call at the top of a function component
+ *
+ * @param functionPath - Path to the function component
+ * @param dimensionsVariableName - Name for the dimensions variable
+ * @param hookName - Name of the hook to call (e.g., 'useWindowDimensions')
+ * @param localIdentifier - Local identifier if hook is already imported with an alias
+ * @param t - Babel types
+ * @returns true if hook was injected, false if already exists
+ */
+export function injectWindowDimensionsHook(
+  functionPath: NodePath<BabelTypes.Function>,
+  dimensionsVariableName: string,
+  hookName: string,
+  localIdentifier: string | undefined,
+  t: typeof BabelTypes,
+): boolean {
+  let body = functionPath.node.body;
+
+  // Handle concise arrow functions: () => <JSX />
+  // Convert to block statement: () => { const _twDimensions = useWindowDimensions(); return <JSX />; }
+  if (!t.isBlockStatement(body)) {
+    if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
+      // Convert concise body to block statement with return
+      const returnStatement = t.returnStatement(body);
+      const blockStatement = t.blockStatement([returnStatement]);
+      functionPath.node.body = blockStatement;
+      body = blockStatement;
+    } else {
+      // Other non-block functions (shouldn't happen for components, but be safe)
+      return false;
+    }
+  }
+
+  // Check if hook is already injected
+  const hasHook = body.body.some((statement) => {
+    if (
+      t.isVariableDeclaration(statement) &&
+      statement.declarations.length > 0 &&
+      t.isVariableDeclarator(statement.declarations[0])
+    ) {
+      const declarator = statement.declarations[0];
+      return t.isIdentifier(declarator.id) && declarator.id.name === dimensionsVariableName;
+    }
+    return false;
+  });
+
+  if (hasHook) {
+    return false; // Already injected
+  }
+
+  // Use the local identifier if hook was already imported with an alias,
+  // otherwise use the configured hook name
+  // e.g., import { useWindowDimensions as useDims } → call useDims()
+  const identifierToCall = localIdentifier ?? hookName;
+
+  // Create: const _twDimensions = useWindowDimensions(); (or aliased name if already imported)
+  const hookCall = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(dimensionsVariableName),
+      t.callExpression(t.identifier(identifierToCall), []),
+    ),
+  ]);
+
+  // Insert at the beginning of function body
+  body.body.unshift(hookCall);
+
+  return true;
+}
+
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/babel/utils/twProcessing.ts

@@ -15,6 +15,7 @@ import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 import { processColorSchemeModifiers } from "./colorSchemeModifierProcessing.js";
 import { processPlatformModifiers } from "./platformModifierProcessing.js";
+import { hasRuntimeDimensions } from "./windowDimensionsProcessing.js";
 
 /**
  * Plugin state interface (subset needed for tw processing)
@@ -77,6 +78,16 @@ export function processTwCall(
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+
+    // Check for runtime dimensions (w-screen, h-screen)
+    if (hasRuntimeDimensions(baseStyleObject)) {
+      throw path.buildCodeFrameError(
+        `w-screen and h-screen are not supported in tw\`\` or twStyle() calls. ` +
+          `Found: "${baseClassName}". ` +
+          `Use them in className attributes instead.`,
+      );
+    }
+
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
 

package/dist/babel/utils/windowDimensionsProcessing.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Utility functions for processing window dimensions (w-screen, h-screen)
+ */
+import type * as BabelTypes from "@babel/types";
+import type { StyleObject } from "../../types/core.js";
+/**
+ * Plugin state interface (subset needed for window dimensions processing)
+ */
+export interface WindowDimensionsProcessingState {
+    needsWindowDimensionsImport: boolean;
+    windowDimensionsVariableName: string;
+}
+/**
+ * Check if a style object contains runtime dimension markers
+ *
+ * @param styleObject - Style object to check
+ * @returns true if the style object contains runtime dimension markers
+ *
+ * @example
+ * hasRuntimeDimensions({ width: "{{RUNTIME:dimensions.width}}" }) // true
+ * hasRuntimeDimensions({ width: 100 }) // false
+ */
+export declare function hasRuntimeDimensions(styleObject: StyleObject): boolean;
+/**
+ * Create an inline style object with runtime dimension access
+ *
+ * Converts runtime markers like "{{RUNTIME:dimensions.width}}" to
+ * AST nodes like: { width: _twDimensions.width }
+ *
+ * @param styleObject - Style object with runtime markers
+ * @param state - Plugin state
+ * @param t - Babel types
+ * @returns AST object expression for inline style
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", height: "{{RUNTIME:dimensions.height}}" }
+ * Output: { width: _twDimensions.width, height: _twDimensions.height }
+ */
+export declare function createRuntimeDimensionObject(styleObject: StyleObject, state: WindowDimensionsProcessingState, t: typeof BabelTypes): BabelTypes.ObjectExpression;
+/**
+ * Split a style object into static and runtime parts
+ *
+ * @param styleObject - Style object to split
+ * @returns Object with static and runtime style objects
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", padding: 16, backgroundColor: "#fff" }
+ * Output: {
+ *   static: { padding: 16, backgroundColor: "#fff" },
+ *   runtime: { width: "{{RUNTIME:dimensions.width}}" }
+ * }
+ */
+export declare function splitStaticAndRuntimeStyles(styleObject: StyleObject): {
+    static: StyleObject;
+    runtime: StyleObject;
+};

package/dist/babel/utils/windowDimensionsProcessing.ts

@@ -0,0 +1,121 @@
+/**
+ * Utility functions for processing window dimensions (w-screen, h-screen)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import { RUNTIME_DIMENSIONS_MARKER } from "../../config/markers.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for window dimensions processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface WindowDimensionsProcessingState {
+  needsWindowDimensionsImport: boolean;
+  windowDimensionsVariableName: string;
+}
+
+/**
+ * Check if a style object contains runtime dimension markers
+ *
+ * @param styleObject - Style object to check
+ * @returns true if the style object contains runtime dimension markers
+ *
+ * @example
+ * hasRuntimeDimensions({ width: "{{RUNTIME:dimensions.width}}" }) // true
+ * hasRuntimeDimensions({ width: 100 }) // false
+ */
+export function hasRuntimeDimensions(styleObject: StyleObject): boolean {
+  return Object.values(styleObject).some(
+    (value) => typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER),
+  );
+}
+
+/**
+ * Create an inline style object with runtime dimension access
+ *
+ * Converts runtime markers like "{{RUNTIME:dimensions.width}}" to
+ * AST nodes like: { width: _twDimensions.width }
+ *
+ * @param styleObject - Style object with runtime markers
+ * @param state - Plugin state
+ * @param t - Babel types
+ * @returns AST object expression for inline style
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", height: "{{RUNTIME:dimensions.height}}" }
+ * Output: { width: _twDimensions.width, height: _twDimensions.height }
+ */
+export function createRuntimeDimensionObject(
+  styleObject: StyleObject,
+  state: WindowDimensionsProcessingState,
+  t: typeof BabelTypes,
+): BabelTypes.ObjectExpression {
+  // Mark that we need useWindowDimensions import and hook injection
+  state.needsWindowDimensionsImport = true;
+
+  const properties: BabelTypes.ObjectProperty[] = [];
+
+  for (const [key, value] of Object.entries(styleObject)) {
+    let valueNode: BabelTypes.Expression;
+
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      // Extract property name: "{{RUNTIME:dimensions.width}}" -> "width"
+      const match = value.match(/dimensions\.(\w+)/);
+      const prop = match?.[1];
+
+      if (prop) {
+        // Generate: _twDimensions.width or _twDimensions.height
+        valueNode = t.memberExpression(t.identifier(state.windowDimensionsVariableName), t.identifier(prop));
+      } else {
+        // Fallback: shouldn't happen, but handle gracefully
+        valueNode = t.stringLiteral(value);
+      }
+    } else if (typeof value === "number") {
+      valueNode = t.numericLiteral(value);
+    } else if (typeof value === "string") {
+      valueNode = t.stringLiteral(value);
+    } else if (typeof value === "object" && value !== null) {
+      // Handle nested objects (e.g., transform arrays)
+      valueNode = t.valueToNode(value);
+    } else {
+      // Handle other types
+      valueNode = t.valueToNode(value);
+    }
+
+    properties.push(t.objectProperty(t.identifier(key), valueNode));
+  }
+
+  return t.objectExpression(properties);
+}
+
+/**
+ * Split a style object into static and runtime parts
+ *
+ * @param styleObject - Style object to split
+ * @returns Object with static and runtime style objects
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", padding: 16, backgroundColor: "#fff" }
+ * Output: {
+ *   static: { padding: 16, backgroundColor: "#fff" },
+ *   runtime: { width: "{{RUNTIME:dimensions.width}}" }
+ * }
+ */
+export function splitStaticAndRuntimeStyles(styleObject: StyleObject): {
+  static: StyleObject;
+  runtime: StyleObject;
+} {
+  const staticStyles: StyleObject = {};
+  const runtimeStyles: StyleObject = {};
+
+  for (const [key, value] of Object.entries(styleObject)) {
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      runtimeStyles[key] = value;
+    } else {
+      staticStyles[key] = value;
+    }
+  }
+
+  return { static: staticStyles, runtime: runtimeStyles };
+}

package/dist/components/TouchableOpacity.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Enhanced TouchableOpacity component with modifier support
+ * Adds active state support for active: modifier via onPressIn/onPressOut
+ */
+import { type TouchableOpacityProps as RNTouchableOpacityProps, type StyleProp, type ViewStyle } from "react-native";
+type TouchableOpacityState = {
+    active: boolean;
+    disabled: boolean | null | undefined;
+};
+export type TouchableOpacityProps = Omit<RNTouchableOpacityProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives TouchableOpacity state
+     */
+    style?: StyleProp<ViewStyle> | ((state: TouchableOpacityState) => StyleProp<ViewStyle>);
+    className?: string;
+};
+/**
+ * Enhanced TouchableOpacity that supports active: and disabled: modifiers
+ *
+ * @example
+ * <TouchableOpacity
+ *   disabled={isLoading}
+ *   className="bg-blue-500 active:bg-blue-700 disabled:bg-gray-400"
+ * >
+ *   <Text>Submit</Text>
+ * </TouchableOpacity>
+ */
+export declare const TouchableOpacity: import("react").ForwardRefExoticComponent<Omit<RNTouchableOpacityProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives TouchableOpacity state
+     */
+    style?: StyleProp<ViewStyle> | ((state: TouchableOpacityState) => StyleProp<ViewStyle>);
+    className?: string;
+} & import("react").RefAttributes<import("react-native").View>>;
+export {};

package/dist/components/TouchableOpacity.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=require("react");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="/Users/olivier/Projects/github/react-native-tailwind/src/components/TouchableOpacity.tsx";var _excluded=["style","disabled","onPressIn","onPressOut"];var TouchableOpacity=exports.TouchableOpacity=(0,_react.forwardRef)(function TouchableOpacity(_ref,ref){var style=_ref.style,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,onPressIn=_ref.onPressIn,onPressOut=_ref.onPressOut,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isActive=_useState2[0],setIsActive=_useState2[1];var handlePressIn=(0,_react.useCallback)(function(event){setIsActive(true);onPressIn==null||onPressIn(event);},[onPressIn]);var handlePressOut=(0,_react.useCallback)(function(event){setIsActive(false);onPressOut==null||onPressOut(event);},[onPressOut]);var resolvedStyle=typeof style==="function"?style({active:isActive,disabled:disabled}):style;return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,Object.assign({ref:ref,disabled:disabled,style:resolvedStyle,onPressIn:handlePressIn,onPressOut:handlePressOut},props));});

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Pressable";
+export * from "./TextInput";
+export * from "./TouchableOpacity";

package/dist/components/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});var _Pressable=require("./Pressable");Object.keys(_Pressable).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_Pressable[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _Pressable[key];}});});var _TextInput=require("./TextInput");Object.keys(_TextInput).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_TextInput[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _TextInput[key];}});});var _TouchableOpacity=require("./TouchableOpacity");Object.keys(_TouchableOpacity).forEach(function(key){if(key==="default"||key==="__esModule")return;if(key in exports&&exports[key]===_TouchableOpacity[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _TouchableOpacity[key];}});});

package/dist/config/markers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Runtime marker prefix for window dimension values
+ * Used to mark style values that need runtime evaluation via useWindowDimensions()
+ */
+export declare const RUNTIME_DIMENSIONS_MARKER = "{{RUNTIME:dimensions.";

package/dist/config/markers.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.RUNTIME_DIMENSIONS_MARKER=void 0;var RUNTIME_DIMENSIONS_MARKER=exports.RUNTIME_DIMENSIONS_MARKER="{{RUNTIME:dimensions.";