@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/dist/babel/index.cjs

@@ -34,6 +34,201 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/babel/config-loader.ts
+var fs = __toESM(require("fs"), 1);
+var path = __toESM(require("path"), 1);
+
+// src/utils/flattenColors.ts
+function flattenColors(colors, prefix = "") {
+  const result = {};
+  for (const [key, value] of Object.entries(colors)) {
+    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
+    if (typeof value === "string") {
+      result[newKey] = value;
+    } else if (typeof value === "object" && value !== null) {
+      Object.assign(result, flattenColors(value, newKey));
+    }
+  }
+  return result;
+}
+
+// src/babel/config-loader.ts
+var configCache = /* @__PURE__ */ new Map();
+function findTailwindConfig(startDir) {
+  let currentDir = startDir;
+  const root = path.parse(currentDir).root;
+  const configNames = [
+    "tailwind.config.mjs",
+    "tailwind.config.js",
+    "tailwind.config.cjs",
+    "tailwind.config.ts"
+  ];
+  while (currentDir !== root) {
+    for (const configName of configNames) {
+      const configPath = path.join(currentDir, configName);
+      if (fs.existsSync(configPath)) {
+        return configPath;
+      }
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  return null;
+}
+function loadTailwindConfig(configPath) {
+  if (configCache.has(configPath)) {
+    return configCache.get(configPath);
+  }
+  try {
+    const resolvedPath = require.resolve(configPath);
+    delete require.cache[resolvedPath];
+    const config = require(configPath);
+    const resolved = "default" in config ? config.default : config;
+    configCache.set(configPath, resolved);
+    return resolved;
+  } catch (error) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[react-native-tailwind] Failed to load config from ${configPath}:`, error);
+    }
+    configCache.set(configPath, null);
+    return null;
+  }
+}
+function extractCustomTheme(filename) {
+  const projectDir = path.dirname(filename);
+  const configPath = findTailwindConfig(projectDir);
+  if (!configPath) {
+    return { colors: {}, fontFamily: {}, fontSize: {} };
+  }
+  const config = loadTailwindConfig(configPath);
+  if (!config?.theme) {
+    return { colors: {}, fontFamily: {}, fontSize: {} };
+  }
+  if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.colors will override all default colors. Use theme.extend.colors to add custom colors while keeping defaults."
+    );
+  }
+  const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
+  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontFamily will override all default font families. Use theme.extend.fontFamily to add custom fonts while keeping defaults."
+    );
+  }
+  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
+  const fontFamilyResult = {};
+  for (const [key, value] of Object.entries(fontFamily)) {
+    if (Array.isArray(value)) {
+      fontFamilyResult[key] = value[0];
+    } else {
+      fontFamilyResult[key] = value;
+    }
+  }
+  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. Use theme.extend.fontSize to add custom font sizes while keeping defaults."
+    );
+  }
+  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
+  const fontSizeResult = {};
+  for (const [key, value] of Object.entries(fontSize)) {
+    if (typeof value === "number") {
+      fontSizeResult[key] = value;
+    } else if (typeof value === "string") {
+      const parsed = parseFloat(value.replace(/px$/, ""));
+      if (!isNaN(parsed)) {
+        fontSizeResult[key] = parsed;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`
+          );
+        }
+      }
+    }
+  }
+  return {
+    colors: flattenColors(colors),
+    fontFamily: fontFamilyResult,
+    fontSize: fontSizeResult
+  };
+}
+
+// src/babel/utils/attributeMatchers.ts
+var DEFAULT_CLASS_ATTRIBUTES = [
+  "className",
+  "contentContainerClassName",
+  "columnWrapperClassName",
+  "ListHeaderComponentClassName",
+  "ListFooterComponentClassName"
+];
+function buildAttributeMatchers(attributes) {
+  const exactMatches = /* @__PURE__ */ new Set();
+  const patterns = [];
+  for (const attr of attributes) {
+    if (attr.includes("*")) {
+      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
+      patterns.push(new RegExp(regexPattern));
+    } else {
+      exactMatches.add(attr);
+    }
+  }
+  return { exactMatches, patterns };
+}
+function isAttributeSupported(attributeName, exactMatches, patterns) {
+  if (exactMatches.has(attributeName)) {
+    return true;
+  }
+  for (const pattern of patterns) {
+    if (pattern.test(attributeName)) {
+      return true;
+    }
+  }
+  return false;
+}
+function getTargetStyleProp(attributeName) {
+  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
+}
+
+// src/babel/plugin/state.ts
+var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+function createInitialState(options, filename, colorSchemeImportSource, colorSchemeHookName, schemeModifierConfig) {
+  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
+  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
+  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+  const customTheme = extractCustomTheme(filename);
+  return {
+    styleRegistry: /* @__PURE__ */ new Map(),
+    hasClassNames: false,
+    hasStyleSheetImport: false,
+    hasPlatformImport: false,
+    needsPlatformImport: false,
+    hasColorSchemeImport: false,
+    needsColorSchemeImport: false,
+    colorSchemeVariableName: "_twColorScheme",
+    colorSchemeImportSource,
+    colorSchemeHookName,
+    colorSchemeLocalIdentifier: void 0,
+    hasWindowDimensionsImport: false,
+    needsWindowDimensionsImport: false,
+    windowDimensionsVariableName: "_twDimensions",
+    windowDimensionsLocalIdentifier: void 0,
+    hasI18nManagerImport: false,
+    needsI18nManagerImport: false,
+    i18nManagerVariableName: "_twIsRTL",
+    i18nManagerLocalIdentifier: void 0,
+    customTheme,
+    schemeModifierConfig,
+    supportedAttributes: exactMatches,
+    attributePatterns: patterns,
+    stylesIdentifier,
+    twImportNames: /* @__PURE__ */ new Set(),
+    hasTwImport: false,
+    reactNativeImportPath: void 0,
+    functionComponentsNeedingColorScheme: /* @__PURE__ */ new Set(),
+    functionComponentsNeedingWindowDimensions: /* @__PURE__ */ new Set()
+  };
+}
+
 // src/parser/aspectRatio.ts
 var ASPECT_RATIO_PRESETS = {
   "aspect-auto": void 0,
@@ -77,187 +272,6 @@ function parseAspectRatio(cls) {
   return null;
 }
 
-// src/parser/borders.ts
-var BORDER_WIDTH_SCALE = {
-  "": 1,
-  "0": 0,
-  "2": 2,
-  "4": 4,
-  "8": 8
-};
-var BORDER_RADIUS_SCALE = {
-  none: 0,
-  sm: 2,
-  "": 4,
-  md: 6,
-  lg: 8,
-  xl: 12,
-  "2xl": 16,
-  "3xl": 24,
-  full: 9999
-};
-var BORDER_WIDTH_PROP_MAP = {
-  t: "borderTopWidth",
-  r: "borderRightWidth",
-  b: "borderBottomWidth",
-  l: "borderLeftWidth"
-};
-var BORDER_RADIUS_CORNER_MAP = {
-  tl: "borderTopLeftRadius",
-  tr: "borderTopRightRadius",
-  bl: "borderBottomLeftRadius",
-  br: "borderBottomRightRadius"
-};
-var BORDER_RADIUS_SIDE_MAP = {
-  t: ["borderTopLeftRadius", "borderTopRightRadius"],
-  r: ["borderTopRightRadius", "borderBottomRightRadius"],
-  b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
-  l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
-};
-function parseArbitraryBorderWidth(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
-  if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
-  }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Unsupported arbitrary border width value: ${value}. Only px values are supported (e.g., [8px] or [8]).`
-      );
-    }
-    return null;
-  }
-  return null;
-}
-function parseArbitraryBorderRadius(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
-  if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
-  }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Unsupported arbitrary border radius value: ${value}. Only px values are supported (e.g., [12px] or [12]).`
-      );
-    }
-    return null;
-  }
-  return null;
-}
-function parseBorder(cls) {
-  if (cls === "border-solid") return { borderStyle: "solid" };
-  if (cls === "border-dotted") return { borderStyle: "dotted" };
-  if (cls === "border-dashed") return { borderStyle: "dashed" };
-  if (cls.startsWith("border-")) {
-    return parseBorderWidth(cls);
-  }
-  if (cls === "border") {
-    return { borderWidth: 1 };
-  }
-  if (cls.startsWith("rounded")) {
-    return parseBorderRadius(cls);
-  }
-  return null;
-}
-function parseBorderWidth(cls) {
-  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
-  if (dirMatch) {
-    const dir = dirMatch[1];
-    const valueStr = dirMatch[2] || "";
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderWidth(valueStr);
-      if (arbitraryValue !== null) {
-        return { [BORDER_WIDTH_PROP_MAP[dir]]: arbitraryValue };
-      }
-      return null;
-    }
-    const scaleValue = BORDER_WIDTH_SCALE[valueStr];
-    if (scaleValue !== void 0) {
-      return { [BORDER_WIDTH_PROP_MAP[dir]]: scaleValue };
-    }
-    return null;
-  }
-  const allMatch = cls.match(/^border-(\d+)$/);
-  if (allMatch) {
-    const value = BORDER_WIDTH_SCALE[allMatch[1]];
-    if (value !== void 0) {
-      return { borderWidth: value };
-    }
-  }
-  const allArbMatch = cls.match(/^border-(\[.+\])$/);
-  if (allArbMatch) {
-    const arbitraryValue = parseArbitraryBorderWidth(allArbMatch[1]);
-    if (arbitraryValue !== null) {
-      return { borderWidth: arbitraryValue };
-    }
-  }
-  return null;
-}
-function parseBorderRadius(cls) {
-  const withoutPrefix = cls.substring(7);
-  if (withoutPrefix === "") {
-    return { borderRadius: BORDER_RADIUS_SCALE[""] };
-  }
-  if (!withoutPrefix.startsWith("-")) {
-    return null;
-  }
-  const rest = withoutPrefix.substring(1);
-  if (rest === "") {
-    return null;
-  }
-  const cornerMatch = rest.match(/^(tl|tr|bl|br)(?:-(.+))?$/);
-  if (cornerMatch) {
-    const corner = cornerMatch[1];
-    const valueStr = cornerMatch[2] || "";
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
-      if (arbitraryValue !== null) {
-        return { [BORDER_RADIUS_CORNER_MAP[corner]]: arbitraryValue };
-      }
-      return null;
-    }
-    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
-    if (scaleValue2 !== void 0) {
-      return { [BORDER_RADIUS_CORNER_MAP[corner]]: scaleValue2 };
-    }
-    return null;
-  }
-  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
-  if (sideMatch) {
-    const side = sideMatch[1];
-    const valueStr = sideMatch[2] || "";
-    let value;
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
-      if (arbitraryValue !== null) {
-        value = arbitraryValue;
-      } else {
-        return null;
-      }
-    } else {
-      value = BORDER_RADIUS_SCALE[valueStr];
-    }
-    if (value !== void 0) {
-      const result = {};
-      BORDER_RADIUS_SIDE_MAP[side].forEach((prop) => result[prop] = value);
-      return result;
-    }
-    return null;
-  }
-  if (rest.startsWith("[")) {
-    const arbitraryValue = parseArbitraryBorderRadius(rest);
-    if (arbitraryValue !== null) {
-      return { borderRadius: arbitraryValue };
-    }
-    return null;
-  }
-  const scaleValue = BORDER_RADIUS_SCALE[rest];
-  if (scaleValue !== void 0) {
-    return { borderRadius: scaleValue };
-  }
-  return null;
-}
-
 // src/config/tailwind.ts
 var TAILWIND_COLORS = {
   red: {
@@ -548,20 +562,6 @@ var TAILWIND_COLORS = {
   }
 };
 
-// src/utils/flattenColors.ts
-function flattenColors(colors, prefix = "") {
-  const result = {};
-  for (const [key, value] of Object.entries(colors)) {
-    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
-    if (typeof value === "string") {
-      result[newKey] = value;
-    } else if (typeof value === "object" && value !== null) {
-      Object.assign(result, flattenColors(value, newKey));
-    }
-  }
-  return result;
-}
-
 // src/parser/colors.ts
 var COLORS = {
   ...flattenColors(TAILWIND_COLORS),
@@ -663,101 +663,345 @@ function parseColor(cls, customColors) {
       return { borderColor: color };
     }
   }
+  const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
+  if (dirBorderMatch) {
+    const dir = dirBorderMatch[1];
+    const colorKey = dirBorderMatch[2];
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      if (dir === "x") {
+        return {
+          borderLeftColor: color,
+          borderRightColor: color
+        };
+      }
+      if (dir === "y") {
+        return {
+          borderTopColor: color,
+          borderBottomColor: color
+        };
+      }
+      const propMap = {
+        t: "borderTopColor",
+        r: "borderRightColor",
+        b: "borderBottomColor",
+        l: "borderLeftColor"
+      };
+      return { [propMap[dir]]: color };
+    }
+  }
   return null;
 }
 
-// src/parser/layout.ts
-function parseArbitraryInset(value) {
-  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+// src/parser/borders.ts
+var BORDER_WIDTH_SCALE = {
+  "": 1,
+  "0": 0,
+  "2": 2,
+  "4": 4,
+  "8": 8
+};
+var BORDER_RADIUS_SCALE = {
+  none: 0,
+  sm: 2,
+  "": 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 24,
+  full: 9999
+};
+var BORDER_WIDTH_PROP_MAP = {
+  t: "borderTopWidth",
+  r: "borderRightWidth",
+  b: "borderBottomWidth",
+  l: "borderLeftWidth",
+  s: "borderStartWidth",
+  e: "borderEndWidth"
+};
+var BORDER_RADIUS_CORNER_MAP = {
+  tl: "borderTopLeftRadius",
+  tr: "borderTopRightRadius",
+  bl: "borderBottomLeftRadius",
+  br: "borderBottomRightRadius"
+};
+var BORDER_RADIUS_LOGICAL_CORNER_MAP = {
+  ss: "borderTopStartRadius",
+  se: "borderTopEndRadius",
+  es: "borderBottomStartRadius",
+  ee: "borderBottomEndRadius"
+};
+var BORDER_RADIUS_SIDE_MAP = {
+  t: ["borderTopLeftRadius", "borderTopRightRadius"],
+  r: ["borderTopRightRadius", "borderBottomRightRadius"],
+  b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+  l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  s: ["borderTopStartRadius", "borderBottomStartRadius"],
+  e: ["borderTopEndRadius", "borderBottomEndRadius"]
+};
+function parseArbitraryBorderWidth(value) {
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
   if (pxMatch) {
     return parseInt(pxMatch[1], 10);
   }
-  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
-  if (percentMatch) {
-    return `${percentMatch[1]}%`;
-  }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary inset unit: ${value}. Only px and % are supported.`
+        `[react-native-tailwind] Unsupported arbitrary border width value: ${value}. Only px values are supported (e.g., [8px] or [8]).`
       );
     }
     return null;
   }
   return null;
 }
-function parseArbitraryZIndex(value) {
-  const zMatch = value.match(/^\[(-?\d+)\]$/);
-  if (zMatch) {
-    return parseInt(zMatch[1], 10);
+function parseArbitraryBorderRadius(value) {
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`
+        `[react-native-tailwind] Unsupported arbitrary border radius value: ${value}. Only px values are supported (e.g., [12px] or [12]).`
       );
     }
     return null;
   }
   return null;
 }
-function parseArbitraryGrowShrink(value) {
-  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
-  if (match) {
-    return parseFloat(match[1]);
+function parseBorder(cls, customColors) {
+  if (cls === "border-solid") return { borderStyle: "solid" };
+  if (cls === "border-dotted") return { borderStyle: "dotted" };
+  if (cls === "border-dashed") return { borderStyle: "dashed" };
+  if (cls.startsWith("border-")) {
+    return parseBorderWidth(cls, customColors);
   }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`
-      );
+  if (cls === "border") {
+    return { borderWidth: 1 };
+  }
+  if (cls.startsWith("rounded")) {
+    return parseBorderRadius(cls);
+  }
+  return null;
+}
+function parseBorderWidth(cls, customColors) {
+  const dirMatch = cls.match(/^border-([trblse])(?:-(.+))?$/);
+  if (dirMatch) {
+    const dir = dirMatch[1];
+    const valueStr = dirMatch[2] || "";
+    if (valueStr && dir !== "s" && dir !== "e") {
+      const colorResult = parseColor(cls, customColors);
+      if (colorResult !== null) {
+        return null;
+      }
+    }
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderWidth(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_WIDTH_PROP_MAP[dir]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue = BORDER_WIDTH_SCALE[valueStr];
+    if (scaleValue !== void 0) {
+      return { [BORDER_WIDTH_PROP_MAP[dir]]: scaleValue };
     }
     return null;
   }
+  const allMatch = cls.match(/^border-(\d+)$/);
+  if (allMatch) {
+    const value = BORDER_WIDTH_SCALE[allMatch[1]];
+    if (value !== void 0) {
+      return { borderWidth: value };
+    }
+  }
+  const allArbMatch = cls.match(/^border-(\[.+\])$/);
+  if (allArbMatch) {
+    const arbitraryValue = parseArbitraryBorderWidth(allArbMatch[1]);
+    if (arbitraryValue !== null) {
+      return { borderWidth: arbitraryValue };
+    }
+  }
   return null;
 }
-var DISPLAY_MAP = {
-  flex: { display: "flex" },
-  hidden: { display: "none" }
-};
-var FLEX_DIRECTION_MAP = {
-  "flex-row": { flexDirection: "row" },
-  "flex-row-reverse": { flexDirection: "row-reverse" },
-  "flex-col": { flexDirection: "column" },
-  "flex-col-reverse": { flexDirection: "column-reverse" }
-};
-var FLEX_WRAP_MAP = {
-  "flex-wrap": { flexWrap: "wrap" },
-  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
-  "flex-nowrap": { flexWrap: "nowrap" }
-};
-var FLEX_MAP = {
-  "flex-1": { flex: 1 },
-  "flex-auto": { flex: 1 },
-  "flex-none": { flex: 0 }
-};
-var GROW_SHRINK_MAP = {
-  grow: { flexGrow: 1 },
-  "grow-0": { flexGrow: 0 },
-  shrink: { flexShrink: 1 },
-  "shrink-0": { flexShrink: 0 },
-  // CSS-style aliases
-  "flex-grow": { flexGrow: 1 },
-  "flex-grow-0": { flexGrow: 0 },
-  "flex-shrink": { flexShrink: 1 },
-  "flex-shrink-0": { flexShrink: 0 }
-};
-var JUSTIFY_CONTENT_MAP = {
-  "justify-start": { justifyContent: "flex-start" },
-  "justify-end": { justifyContent: "flex-end" },
-  "justify-center": { justifyContent: "center" },
-  "justify-between": { justifyContent: "space-between" },
-  "justify-around": { justifyContent: "space-around" },
-  "justify-evenly": { justifyContent: "space-evenly" }
-};
-var ALIGN_ITEMS_MAP = {
-  "items-start": { alignItems: "flex-start" },
-  "items-end": { alignItems: "flex-end" },
+function parseBorderRadius(cls) {
+  const withoutPrefix = cls.substring(7);
+  if (withoutPrefix === "") {
+    return { borderRadius: BORDER_RADIUS_SCALE[""] };
+  }
+  if (!withoutPrefix.startsWith("-")) {
+    return null;
+  }
+  const rest = withoutPrefix.substring(1);
+  if (rest === "") {
+    return null;
+  }
+  const cornerMatch = rest.match(/^(tl|tr|bl|br)(?:-(.+))?$/);
+  if (cornerMatch) {
+    const corner = cornerMatch[1];
+    const valueStr = cornerMatch[2] || "";
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_RADIUS_CORNER_MAP[corner]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
+    if (scaleValue2 !== void 0) {
+      return { [BORDER_RADIUS_CORNER_MAP[corner]]: scaleValue2 };
+    }
+    return null;
+  }
+  const logicalCornerMatch = rest.match(/^(ss|se|es|ee)(?:-(.+))?$/);
+  if (logicalCornerMatch) {
+    const corner = logicalCornerMatch[1];
+    const valueStr = logicalCornerMatch[2] || "";
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
+    if (scaleValue2 !== void 0) {
+      return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: scaleValue2 };
+    }
+    return null;
+  }
+  const sideMatch = rest.match(/^([trblse])(?:-(.+))?$/);
+  if (sideMatch) {
+    const side = sideMatch[1];
+    const valueStr = sideMatch[2] || "";
+    let value;
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        value = arbitraryValue;
+      } else {
+        return null;
+      }
+    } else {
+      value = BORDER_RADIUS_SCALE[valueStr];
+    }
+    if (value !== void 0) {
+      const result = {};
+      BORDER_RADIUS_SIDE_MAP[side].forEach((prop) => result[prop] = value);
+      return result;
+    }
+    return null;
+  }
+  if (rest.startsWith("[")) {
+    const arbitraryValue = parseArbitraryBorderRadius(rest);
+    if (arbitraryValue !== null) {
+      return { borderRadius: arbitraryValue };
+    }
+    return null;
+  }
+  const scaleValue = BORDER_RADIUS_SCALE[rest];
+  if (scaleValue !== void 0) {
+    return { borderRadius: scaleValue };
+  }
+  return null;
+}
+
+// src/parser/layout.ts
+function parseArbitraryInset(value) {
+  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
+  if (percentMatch) {
+    return `${percentMatch[1]}%`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary inset unit: ${value}. Only px and % are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryZIndex(value) {
+  const zMatch = value.match(/^\[(-?\d+)\]$/);
+  if (zMatch) {
+    return parseInt(zMatch[1], 10);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryGrowShrink(value) {
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+var DISPLAY_MAP = {
+  flex: { display: "flex" },
+  hidden: { display: "none" }
+};
+var FLEX_DIRECTION_MAP = {
+  "flex-row": { flexDirection: "row" },
+  "flex-row-reverse": { flexDirection: "row-reverse" },
+  "flex-col": { flexDirection: "column" },
+  "flex-col-reverse": { flexDirection: "column-reverse" }
+};
+var FLEX_WRAP_MAP = {
+  "flex-wrap": { flexWrap: "wrap" },
+  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
+  "flex-nowrap": { flexWrap: "nowrap" }
+};
+var FLEX_MAP = {
+  "flex-1": { flex: 1 },
+  "flex-auto": { flex: 1 },
+  "flex-none": { flex: 0 }
+};
+var GROW_SHRINK_MAP = {
+  grow: { flexGrow: 1 },
+  "grow-0": { flexGrow: 0 },
+  shrink: { flexShrink: 1 },
+  "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 }
+};
+var JUSTIFY_CONTENT_MAP = {
+  "justify-start": { justifyContent: "flex-start" },
+  "justify-end": { justifyContent: "flex-end" },
+  "justify-center": { justifyContent: "center" },
+  "justify-between": { justifyContent: "space-between" },
+  "justify-around": { justifyContent: "space-around" },
+  "justify-evenly": { justifyContent: "space-evenly" }
+};
+var ALIGN_ITEMS_MAP = {
+  "items-start": { alignItems: "flex-start" },
+  "items-end": { alignItems: "flex-end" },
   "items-center": { alignItems: "center" },
   "items-baseline": { alignItems: "baseline" },
   "items-stretch": { alignItems: "stretch" }
@@ -907,6 +1151,52 @@ function parseLayout(cls) {
       return { left: leftValue };
     }
   }
+  const startMatch = cls.match(/^(-?)start-(.+)$/);
+  if (startMatch) {
+    const [, negPrefix, startKey] = startMatch;
+    const isNegative = negPrefix === "-";
+    if (startKey === "auto") {
+      return {};
+    }
+    const arbitraryStart = parseArbitraryInset(startKey);
+    if (arbitraryStart !== null) {
+      if (typeof arbitraryStart === "number") {
+        return { start: isNegative ? -arbitraryStart : arbitraryStart };
+      }
+      if (isNegative && arbitraryStart.endsWith("%")) {
+        const numValue = parseFloat(arbitraryStart);
+        return { start: `${-numValue}%` };
+      }
+      return { start: arbitraryStart };
+    }
+    const startValue = INSET_SCALE[startKey];
+    if (startValue !== void 0) {
+      return { start: isNegative ? -startValue : startValue };
+    }
+  }
+  const endMatch = cls.match(/^(-?)end-(.+)$/);
+  if (endMatch) {
+    const [, negPrefix, endKey] = endMatch;
+    const isNegative = negPrefix === "-";
+    if (endKey === "auto") {
+      return {};
+    }
+    const arbitraryEnd = parseArbitraryInset(endKey);
+    if (arbitraryEnd !== null) {
+      if (typeof arbitraryEnd === "number") {
+        return { end: isNegative ? -arbitraryEnd : arbitraryEnd };
+      }
+      if (isNegative && arbitraryEnd.endsWith("%")) {
+        const numValue = parseFloat(arbitraryEnd);
+        return { end: `${-numValue}%` };
+      }
+      return { end: arbitraryEnd };
+    }
+    const endValue = INSET_SCALE[endKey];
+    if (endValue !== void 0) {
+      return { end: isNegative ? -endValue : endValue };
+    }
+  }
   if (cls.startsWith("inset-x-")) {
     const insetKey = cls.substring(8);
     const arbitraryInset = parseArbitraryInset(insetKey);
@@ -929,6 +1219,28 @@ function parseLayout(cls) {
       return { top: insetValue, bottom: insetValue };
     }
   }
+  if (cls.startsWith("inset-s-")) {
+    const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { start: arbitraryInset };
+    }
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { start: insetValue };
+    }
+  }
+  if (cls.startsWith("inset-e-")) {
+    const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { end: arbitraryInset };
+    }
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { end: insetValue };
+    }
+  }
   if (cls.startsWith("inset-")) {
     const insetKey = cls.substring(6);
     const arbitraryInset = parseArbitraryInset(insetKey);
@@ -1018,6 +1330,9 @@ function parseShadow(cls) {
   return null;
 }
 
+// src/config/markers.ts
+var RUNTIME_DIMENSIONS_MARKER = "{{RUNTIME:dimensions.";
+
 // src/parser/sizing.ts
 var SIZE_SCALE = {
   0: 0,
@@ -1095,6 +1410,9 @@ function parseArbitrarySize(value) {
 function parseSizing(cls) {
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
+    if (sizeKey === "screen") {
+      return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` };
+    }
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { width: arbitrarySize };
@@ -1113,6 +1431,9 @@ function parseSizing(cls) {
   }
   if (cls.startsWith("h-")) {
     const sizeKey = cls.substring(2);
+    if (sizeKey === "screen") {
+      return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` };
+    }
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { height: arbitrarySize };
@@ -1245,7 +1566,7 @@ function parseArbitrarySpacing(value) {
   return null;
 }
 function parseSpacing(cls) {
-  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
+  const marginMatch = cls.match(/^(-?)m([xytrblse]?)-(.+)$/);
   if (marginMatch) {
     const [, negativePrefix, dir, valueStr] = marginMatch;
     const isNegative = negativePrefix === "-";
@@ -1260,7 +1581,7 @@ function parseSpacing(cls) {
       return getMarginStyle(dir, finalValue);
     }
   }
-  const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
+  const paddingMatch = cls.match(/^p([xytrblse]?)-(.+)$/);
   if (paddingMatch) {
     const [, dir, valueStr] = paddingMatch;
     const arbitraryValue = parseArbitrarySpacing(valueStr);
@@ -1302,6 +1623,10 @@ function getMarginStyle(dir, value) {
       return { marginBottom: value };
     case "l":
       return { marginLeft: value };
+    case "s":
+      return { marginStart: value };
+    case "e":
+      return { marginEnd: value };
     default:
       return {};
   }
@@ -1322,6 +1647,10 @@ function getPaddingStyle(dir, value) {
       return { paddingBottom: value };
     case "l":
       return { paddingLeft: value };
+    case "s":
+      return { paddingStart: value };
+    case "e":
+      return { paddingEnd: value };
     default:
       return {};
   }
@@ -1810,11 +2139,13 @@ var STATE_MODIFIERS = [
 var PLATFORM_MODIFIERS = ["ios", "android", "web"];
 var COLOR_SCHEME_MODIFIERS = ["dark", "light"];
 var SCHEME_MODIFIERS = ["scheme"];
+var DIRECTIONAL_MODIFIERS = ["rtl", "ltr"];
 var SUPPORTED_MODIFIERS = [
   ...STATE_MODIFIERS,
   ...PLATFORM_MODIFIERS,
   ...COLOR_SCHEME_MODIFIERS,
-  ...SCHEME_MODIFIERS
+  ...SCHEME_MODIFIERS,
+  ...DIRECTIONAL_MODIFIERS
 ];
 function parseModifier(cls) {
   const colonIndex = cls.indexOf(":");
@@ -1849,6 +2180,9 @@ function isColorSchemeModifier(modifier) {
 function isSchemeModifier(modifier) {
   return SCHEME_MODIFIERS.includes(modifier);
 }
+function isDirectionalModifier(modifier) {
+  return DIRECTIONAL_MODIFIERS.includes(modifier);
+}
 function isColorClass(className) {
   return className.startsWith("text-") || className.startsWith("bg-") || className.startsWith("border-");
 }
@@ -1893,11 +2227,24 @@ function expandSchemeModifier(schemeModifier, customColors, darkSuffix = "-dark"
     }
   ];
 }
+var DIRECTIONAL_TEXT_ALIGN_EXPANSIONS = {
+  "text-start": { ltr: "text-left", rtl: "text-right" },
+  "text-end": { ltr: "text-right", rtl: "text-left" }
+};
+function getDirectionalExpansion(cls) {
+  return DIRECTIONAL_TEXT_ALIGN_EXPANSIONS[cls];
+}
 function splitModifierClasses(className) {
   const classes = className.trim().split(/\s+/).filter(Boolean);
   const baseClasses = [];
   const modifierClasses = [];
   for (const cls of classes) {
+    const directionalExpansion = getDirectionalExpansion(cls);
+    if (directionalExpansion) {
+      modifierClasses.push({ modifier: "ltr", baseClass: directionalExpansion.ltr });
+      modifierClasses.push({ modifier: "rtl", baseClass: directionalExpansion.rtl });
+      continue;
+    }
     const parsed = parseModifier(cls);
     if (parsed) {
       modifierClasses.push(parsed);
@@ -1921,7 +2268,7 @@ function parseClassName(className, customTheme) {
 function parseClass(cls, customTheme) {
   const parsers = [
     parseSpacing,
-    parseBorder,
+    (cls2) => parseBorder(cls2, customTheme?.colors),
     (cls2) => parseColor(cls2, customTheme?.colors),
     parseLayout,
     (cls2) => parseTypography(cls2, customTheme?.fontFamily, customTheme?.fontSize),
@@ -1949,143 +2296,49 @@ function generateStyleKey(className) {
   return key;
 }
 
-// src/babel/config-loader.ts
-var fs = __toESM(require("fs"), 1);
-var path = __toESM(require("path"), 1);
-var configCache = /* @__PURE__ */ new Map();
-function findTailwindConfig(startDir) {
-  let currentDir = startDir;
-  const root = path.parse(currentDir).root;
-  const configNames = [
-    "tailwind.config.mjs",
-    "tailwind.config.js",
-    "tailwind.config.cjs",
-    "tailwind.config.ts"
-  ];
-  while (currentDir !== root) {
-    for (const configName of configNames) {
-      const configPath = path.join(currentDir, configName);
-      if (fs.existsSync(configPath)) {
-        return configPath;
+// src/babel/utils/windowDimensionsProcessing.ts
+function hasRuntimeDimensions(styleObject) {
+  return Object.values(styleObject).some(
+    (value) => typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)
+  );
+}
+function createRuntimeDimensionObject(styleObject, state, t) {
+  state.needsWindowDimensionsImport = true;
+  const properties = [];
+  for (const [key, value] of Object.entries(styleObject)) {
+    let valueNode;
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      const match = value.match(/dimensions\.(\w+)/);
+      const prop = match?.[1];
+      if (prop) {
+        valueNode = t.memberExpression(t.identifier(state.windowDimensionsVariableName), t.identifier(prop));
+      } else {
+        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) {
+      valueNode = t.valueToNode(value);
+    } else {
+      valueNode = t.valueToNode(value);
     }
-    currentDir = path.dirname(currentDir);
+    properties.push(t.objectProperty(t.identifier(key), valueNode));
   }
-  return null;
+  return t.objectExpression(properties);
 }
-function loadTailwindConfig(configPath) {
-  if (configCache.has(configPath)) {
-    return configCache.get(configPath);
-  }
-  try {
-    const resolvedPath = require.resolve(configPath);
-    delete require.cache[resolvedPath];
-    const config = require(configPath);
-    const resolved = "default" in config ? config.default : config;
-    configCache.set(configPath, resolved);
-    return resolved;
-  } catch (error) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(`[react-native-tailwind] Failed to load config from ${configPath}:`, error);
+function splitStaticAndRuntimeStyles(styleObject) {
+  const staticStyles = {};
+  const runtimeStyles = {};
+  for (const [key, value] of Object.entries(styleObject)) {
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      runtimeStyles[key] = value;
+    } else {
+      staticStyles[key] = value;
     }
-    configCache.set(configPath, null);
-    return null;
   }
-}
-function extractCustomTheme(filename) {
-  const projectDir = path.dirname(filename);
-  const configPath = findTailwindConfig(projectDir);
-  if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
-  }
-  const config = loadTailwindConfig(configPath);
-  if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
-  }
-  if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.colors will override all default colors. Use theme.extend.colors to add custom colors while keeping defaults."
-    );
-  }
-  const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.fontFamily will override all default font families. Use theme.extend.fontFamily to add custom fonts while keeping defaults."
-    );
-  }
-  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
-  const fontFamilyResult = {};
-  for (const [key, value] of Object.entries(fontFamily)) {
-    if (Array.isArray(value)) {
-      fontFamilyResult[key] = value[0];
-    } else {
-      fontFamilyResult[key] = value;
-    }
-  }
-  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. Use theme.extend.fontSize to add custom font sizes while keeping defaults."
-    );
-  }
-  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
-  const fontSizeResult = {};
-  for (const [key, value] of Object.entries(fontSize)) {
-    if (typeof value === "number") {
-      fontSizeResult[key] = value;
-    } else if (typeof value === "string") {
-      const parsed = parseFloat(value.replace(/px$/, ""));
-      if (!isNaN(parsed)) {
-        fontSizeResult[key] = parsed;
-      } else {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(
-            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`
-          );
-        }
-      }
-    }
-  }
-  return {
-    colors: flattenColors(colors),
-    fontFamily: fontFamilyResult,
-    fontSize: fontSizeResult
-  };
-}
-
-// src/babel/utils/attributeMatchers.ts
-var DEFAULT_CLASS_ATTRIBUTES = [
-  "className",
-  "contentContainerClassName",
-  "columnWrapperClassName",
-  "ListHeaderComponentClassName",
-  "ListFooterComponentClassName"
-];
-function buildAttributeMatchers(attributes) {
-  const exactMatches = /* @__PURE__ */ new Set();
-  const patterns = [];
-  for (const attr of attributes) {
-    if (attr.includes("*")) {
-      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
-      patterns.push(new RegExp(regexPattern));
-    } else {
-      exactMatches.add(attr);
-    }
-  }
-  return { exactMatches, patterns };
-}
-function isAttributeSupported(attributeName, exactMatches, patterns) {
-  if (exactMatches.has(attributeName)) {
-    return true;
-  }
-  for (const pattern of patterns) {
-    if (pattern.test(attributeName)) {
-      return true;
-    }
-  }
-  return false;
-}
-function getTargetStyleProp(attributeName) {
-  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
+  return { static: staticStyles, runtime: runtimeStyles };
 }
 
 // src/babel/utils/colorSchemeModifierProcessing.ts
@@ -2106,6 +2359,11 @@ function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName
   for (const [scheme, modifiers] of modifiersByScheme) {
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
     const styleObject = parseClassName2(classNames, state.customTheme);
+    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 = generateStyleKey2(`${scheme}_${classNames}`);
     state.styleRegistry.set(styleKey, styleObject);
     const colorSchemeCheck = t.binaryExpression(
@@ -2142,6 +2400,8 @@ function getComponentModifierSupport(jsxElement, t) {
   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:
@@ -2163,6 +2423,40 @@ function getStatePropertyForModifier(modifier) {
   }
 }
 
+// src/babel/utils/directionalModifierProcessing.ts
+function processDirectionalModifiers(directionalModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsI18nManagerImport = true;
+  const modifiersByDirection = /* @__PURE__ */ new Map();
+  for (const mod of directionalModifiers) {
+    const direction = mod.modifier;
+    if (!modifiersByDirection.has(direction)) {
+      modifiersByDirection.set(direction, []);
+    }
+    const directionGroup = modifiersByDirection.get(direction);
+    if (directionGroup) {
+      directionGroup.push(mod);
+    }
+  }
+  const conditionalExpressions = [];
+  for (const [direction, modifiers] of modifiersByDirection) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with directional modifiers (rtl:, ltr:). Found in: "${direction}:${classNames}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
+    const styleKey = generateStyleKey2(`${direction}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const rtlVariable = t.identifier(state.i18nManagerVariableName);
+    const directionCheck = direction === "rtl" ? rtlVariable : t.unaryExpression("!", rtlVariable);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    const conditionalExpression = t.logicalExpression("&&", directionCheck, styleReference);
+    conditionalExpressions.push(conditionalExpression);
+  }
+  return conditionalExpressions;
+}
+
 // src/babel/utils/dynamicProcessing.ts
 function processDynamicExpression(expression, state, parseClassName2, generateStyleKey2, splitModifierClasses2, processPlatformModifiers2, processColorSchemeModifiers2, componentScope, isPlatformModifier2, isColorSchemeModifier2, isSchemeModifier2, expandSchemeModifier2, t) {
   if (t.isTemplateLiteral(expression)) {
@@ -2482,6 +2776,11 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+    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 = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -2503,6 +2802,11 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
     const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
+    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 = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
     const stateProperty = getStatePropertyForModifier(modifierType);
@@ -2530,36 +2834,684 @@ function createStyleFunction(styleExpression, modifierTypes, t) {
       );
     }
   }
-  const param = t.objectPattern(paramProperties);
-  return t.arrowFunctionExpression([param], styleExpression);
+  const param = t.objectPattern(paramProperties);
+  return t.arrowFunctionExpression([param], styleExpression);
+}
+
+// src/babel/utils/platformModifierProcessing.ts
+function processPlatformModifiers(platformModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsPlatformImport = true;
+  const modifiersByPlatform = /* @__PURE__ */ new Map();
+  for (const mod of platformModifiers) {
+    const platform = mod.modifier;
+    if (!modifiersByPlatform.has(platform)) {
+      modifiersByPlatform.set(platform, []);
+    }
+    const platformGroup = modifiersByPlatform.get(platform);
+    if (platformGroup) {
+      platformGroup.push(mod);
+    }
+  }
+  const selectProperties = [];
+  for (const [platform, modifiers] of modifiersByPlatform) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customTheme);
+    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 = generateStyleKey2(`${platform}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  }
+  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
+    t.objectExpression(selectProperties)
+  ]);
+}
+
+// src/babel/utils/styleTransforms.ts
+function getStyleExpression(styleAttribute, t) {
+  const value = styleAttribute.value;
+  if (!t.isJSXExpressionContainer(value)) return null;
+  const expression = value.expression;
+  if (t.isJSXEmptyExpression(expression)) return null;
+  return expression;
+}
+function findStyleAttribute(path2, targetStyleProp, t) {
+  const parent = path2.parent;
+  return parent.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp
+  );
+}
+function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      functionCall
+    ]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    const styleArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      existingStyle
+    ]);
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+  classNamePath.remove();
+}
+function replaceDynamicWithStyleAttribute(classNamePath, result, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([result.expression, functionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    let styleArray;
+    if (t.isArrayExpression(existingStyle)) {
+      styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+    } else {
+      styleArray = t.arrayExpression([result.expression, existingStyle]);
+    }
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+  classNamePath.remove();
+}
+function replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  }
+  classNamePath.remove();
+}
+function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
+  const existingProp = jsxOpeningElement.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor"
+  );
+  if (existingProp) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. Remove the explicit prop or the placeholder: modifier to avoid confusion.`
+      );
+    }
+    existingProp.value = t.stringLiteral(color);
+  } else {
+    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
+    jsxOpeningElement.attributes.push(newProp);
+  }
+}
+
+// src/babel/plugin/componentScope.ts
+function isComponentScope(functionPath, t) {
+  const node = functionPath.node;
+  const parent = functionPath.parent;
+  const parentPath = functionPath.parentPath;
+  if (t.isClassMethod(parent)) {
+    return false;
+  }
+  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
+    return false;
+  }
+  if (t.isFunctionDeclaration(node)) {
+    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
+      return true;
+    }
+  }
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    if (t.isVariableDeclarator(parent)) {
+      const varDeclarationPath = parentPath?.parentPath;
+      if (varDeclarationPath && t.isVariableDeclaration(varDeclarationPath.node) && (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))) {
+        if (t.isIdentifier(parent.id)) {
+          const name = parent.id.name;
+          return /^[A-Z]/.test(name);
+        }
+      }
+    }
+  }
+  return false;
+}
+function findComponentScope(path2, t) {
+  let current = path2.getFunctionParent();
+  while (current) {
+    if (t.isFunction(current.node) && isComponentScope(current, t)) {
+      return current;
+    }
+    current = current.getFunctionParent();
+  }
+  return null;
+}
+
+// src/babel/plugin/visitors/className.ts
+function jsxAttributeVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isJSXIdentifier(node.name)) {
+    return;
+  }
+  const attributeName = node.name.name;
+  if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
+    return;
+  }
+  const value = node.value;
+  const targetStyleProp = getTargetStyleProp(attributeName);
+  const processStaticClassName = (className) => {
+    const trimmedClassName = className.trim();
+    if (!trimmedClassName) {
+      path2.remove();
+      return true;
+    }
+    state.hasClassNames = true;
+    const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
+    const modifierClasses = [];
+    for (const modifier of rawModifierClasses) {
+      if (isSchemeModifier(modifier.modifier)) {
+        const expanded = expandSchemeModifier(
+          modifier,
+          state.customTheme.colors ?? {},
+          state.schemeModifierConfig.darkSuffix,
+          state.schemeModifierConfig.lightSuffix
+        );
+        modifierClasses.push(...expanded);
+      } else {
+        modifierClasses.push(modifier);
+      }
+    }
+    const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
+    const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+    const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+    const directionalModifiers = modifierClasses.filter((m) => isDirectionalModifier(m.modifier));
+    const stateModifiers = modifierClasses.filter(
+      (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder"
+    );
+    if (placeholderModifiers.length > 0) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport?.supportedModifiers.includes("placeholder")) {
+        const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
+        const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
+        if (placeholderColor) {
+          addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
+        }
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] placeholder: modifier can only be used on TextInput component at ${state.file.opts.filename ?? "unknown"}`
+          );
+        }
+      }
+    }
+    const hasPlatformModifiers = platformModifiers.length > 0;
+    const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+    const hasDirectionalModifiers = directionalModifiers.length > 0;
+    const hasStateModifiers = stateModifiers.length > 0;
+    const hasBaseClasses = baseClasses.length > 0;
+    let componentScope = null;
+    if (hasColorSchemeModifiers) {
+      componentScope = findComponentScope(path2, t);
+      if (componentScope) {
+        state.functionComponentsNeedingColorScheme.add(componentScope);
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] dark:/light: modifiers require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These modifiers are not supported in class components or nested callbacks.`
+          );
+        }
+      }
+    }
+    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers)) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport) {
+        const styleArrayElements = [];
+        if (hasBaseClasses) {
+          const baseClassName = baseClasses.join(" ");
+          const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+          if (hasRuntimeDimensions(baseStyleObject)) {
+            throw path2.buildCodeFrameError(
+              `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with state, platform, color scheme, or directional modifiers. Use w-screen/h-screen without modifiers instead.`
+            );
+          }
+          const baseStyleKey = generateStyleKey(baseClassName);
+          state.styleRegistry.set(baseStyleKey, baseStyleObject);
+          styleArrayElements.push(
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+          );
+        }
+        if (hasPlatformModifiers) {
+          const platformSelectExpression = processPlatformModifiers(
+            platformModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(platformSelectExpression);
+        }
+        if (hasColorSchemeModifiers && componentScope) {
+          const colorSchemeConditionals = processColorSchemeModifiers(
+            colorSchemeModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(...colorSchemeConditionals);
+        }
+        if (hasDirectionalModifiers) {
+          const directionalConditionals = processDirectionalModifiers(
+            directionalModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(...directionalConditionals);
+        }
+        const modifiersByType = /* @__PURE__ */ new Map();
+        for (const mod of stateModifiers) {
+          const modType = mod.modifier;
+          if (!modifiersByType.has(modType)) {
+            modifiersByType.set(modType, []);
+          }
+          modifiersByType.get(modType)?.push(mod);
+        }
+        for (const [modifierType, modifiers] of modifiersByType) {
+          if (!componentSupport.supportedModifiers.includes(modifierType)) {
+            continue;
+          }
+          const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+          const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
+          const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+          state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+          const stateProperty = getStatePropertyForModifier(modifierType);
+          const conditionalExpression = t.logicalExpression(
+            "&&",
+            t.identifier(stateProperty),
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
+          );
+          styleArrayElements.push(conditionalExpression);
+        }
+        const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter(
+          (mod) => componentSupport.supportedModifiers.includes(mod)
+        );
+        const styleArrayExpression = t.arrayExpression(styleArrayElements);
+        const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
+        const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute2) {
+          mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+        } else {
+          replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+        }
+        return true;
+      } else {
+      }
+    }
+    if ((hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers) && !hasStateModifiers) {
+      const styleExpressions = [];
+      if (hasBaseClasses) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+        if (hasRuntimeDimensions(baseStyleObject)) {
+          throw path2.buildCodeFrameError(
+            `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with platform, color scheme, or directional modifiers. Use w-screen/h-screen without modifiers instead.`
+          );
+        }
+        const baseStyleKey = generateStyleKey(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleExpressions.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      if (hasPlatformModifiers) {
+        const platformSelectExpression = processPlatformModifiers(
+          platformModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(platformSelectExpression);
+      }
+      if (hasColorSchemeModifiers && componentScope) {
+        const colorSchemeConditionals = processColorSchemeModifiers(
+          colorSchemeModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(...colorSchemeConditionals);
+      }
+      if (hasDirectionalModifiers) {
+        const directionalConditionals = processDirectionalModifiers(
+          directionalModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(...directionalConditionals);
+      }
+      const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+      const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+      if (styleAttribute2) {
+        const existingStyle = styleAttribute2.value;
+        if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
+          const existing = existingStyle.expression;
+          const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
+          styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
+        } else {
+          styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
+        }
+        path2.remove();
+      } else {
+        path2.node.name = t.jsxIdentifier(targetStyleProp);
+        path2.node.value = t.jsxExpressionContainer(styleExpression);
+      }
+      return true;
+    }
+    if (hasStateModifiers) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport) {
+        const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
+        const unsupportedModifiers = usedModifiers.filter(
+          (mod) => !componentSupport.supportedModifiers.includes(mod)
+        );
+        if (unsupportedModifiers.length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`
+            );
+          }
+          const supportedModifierClasses = stateModifiers.filter(
+            (m) => componentSupport.supportedModifiers.includes(m.modifier)
+          );
+          if (supportedModifierClasses.length === 0) {
+          } else {
+            const filteredClassName = baseClasses.join(" ") + " " + supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
+            const styleExpression = processStaticClassNameWithModifiers(
+              filteredClassName.trim(),
+              state,
+              parseClassName,
+              generateStyleKey,
+              splitModifierClasses,
+              t
+            );
+            const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
+            const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+            const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+            if (styleAttribute2) {
+              mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+            } else {
+              replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+            }
+            return true;
+          }
+        } else {
+          const styleExpression = processStaticClassNameWithModifiers(
+            trimmedClassName,
+            state,
+            parseClassName,
+            generateStyleKey,
+            splitModifierClasses,
+            t
+          );
+          const modifierTypes = usedModifiers;
+          const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+          const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+          if (styleAttribute2) {
+            mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+          } else {
+            replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+          }
+          return true;
+        }
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
+          console.warn(
+            `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`
+          );
+        }
+      }
+    }
+    const classNameForStyle = baseClasses.join(" ");
+    if (!classNameForStyle) {
+      path2.remove();
+      return true;
+    }
+    const styleObject = parseClassName(classNameForStyle, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      const { static: staticStyles, runtime: runtimeStyles } = splitStaticAndRuntimeStyles(styleObject);
+      const componentScope2 = findComponentScope(path2, t);
+      if (componentScope2) {
+        state.hasClassNames = true;
+        state.functionComponentsNeedingWindowDimensions.add(componentScope2);
+        state.needsWindowDimensionsImport = true;
+        const styleExpressions = [];
+        if (Object.keys(staticStyles).length > 0) {
+          const styleKey2 = generateStyleKey(classNameForStyle);
+          state.styleRegistry.set(styleKey2, staticStyles);
+          styleExpressions.push(
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey2))
+          );
+        }
+        const runtimeDimensionObject = createRuntimeDimensionObject(runtimeStyles, state, t);
+        styleExpressions.push(runtimeDimensionObject);
+        const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+        const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute2) {
+          const existingStyle = styleAttribute2.value;
+          if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
+            const existing = existingStyle.expression;
+            if (t.isArrowFunctionExpression(existing) || t.isFunctionExpression(existing)) {
+              const paramIdentifier = t.identifier("_state");
+              const functionCall = t.callExpression(existing, [paramIdentifier]);
+              const mergedArray = t.arrayExpression([styleExpression, functionCall]);
+              const wrappedFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+              styleAttribute2.value = t.jsxExpressionContainer(wrappedFunction);
+            } else {
+              const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
+              styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
+            }
+          } else {
+            styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
+          }
+          path2.remove();
+        } else {
+          path2.node.name = t.jsxIdentifier(targetStyleProp);
+          path2.node.value = t.jsxExpressionContainer(styleExpression);
+        }
+        return true;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] w-screen/h-screen classes require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These classes are not supported in class components or nested callbacks.`
+          );
+        }
+      }
+    }
+    const styleKey = generateStyleKey(classNameForStyle);
+    state.styleRegistry.set(styleKey, styleObject);
+    const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
+    if (styleAttribute) {
+      mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
+    } else {
+      replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
+    }
+    return true;
+  };
+  if (t.isStringLiteral(value)) {
+    if (processStaticClassName(value.value)) {
+      return;
+    }
+  }
+  if (t.isJSXExpressionContainer(value)) {
+    const expression = value.expression;
+    if (t.isJSXEmptyExpression(expression)) {
+      return;
+    }
+    if (t.isStringLiteral(expression)) {
+      if (processStaticClassName(expression.value)) {
+        return;
+      }
+    }
+    try {
+      const componentScope = findComponentScope(path2, t);
+      const result = processDynamicExpression(
+        expression,
+        state,
+        parseClassName,
+        generateStyleKey,
+        splitModifierClasses,
+        processPlatformModifiers,
+        processColorSchemeModifiers,
+        componentScope,
+        isPlatformModifier,
+        isColorSchemeModifier,
+        isSchemeModifier,
+        expandSchemeModifier,
+        t
+      );
+      if (result) {
+        state.hasClassNames = true;
+        const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute) {
+          mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
+        } else {
+          replaceDynamicWithStyleAttribute(path2, result, targetStyleProp, t);
+        }
+        return;
+      }
+    } catch (error) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+  }
+  if (process.env.NODE_ENV !== "production") {
+    const filename = state.file.opts.filename ?? "unknown";
+    console.warn(
+      `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. Use the ${targetStyleProp} prop for dynamic values.`
+    );
+  }
 }
 
-// src/babel/utils/platformModifierProcessing.ts
-function processPlatformModifiers(platformModifiers, state, parseClassName2, generateStyleKey2, t) {
-  state.needsPlatformImport = true;
-  const modifiersByPlatform = /* @__PURE__ */ new Map();
-  for (const mod of platformModifiers) {
-    const platform = mod.modifier;
-    if (!modifiersByPlatform.has(platform)) {
-      modifiersByPlatform.set(platform, []);
+// src/babel/plugin/visitors/imports.ts
+function importDeclarationVisitor(path2, state, t) {
+  const node = path2.node;
+  if (node.source.value === "react-native") {
+    const specifiers = node.specifiers;
+    const hasStyleSheet = specifiers.some((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        return spec.imported.name === "StyleSheet";
+      }
+      return false;
+    });
+    const hasPlatform = specifiers.some((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        return spec.imported.name === "Platform";
+      }
+      return false;
+    });
+    if (node.importKind !== "type") {
+      for (const spec of specifiers) {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          if (spec.imported.name === "I18nManager") {
+            state.hasI18nManagerImport = true;
+            state.i18nManagerLocalIdentifier = spec.local.name;
+            break;
+          }
+        }
+      }
     }
-    const platformGroup = modifiersByPlatform.get(platform);
-    if (platformGroup) {
-      platformGroup.push(mod);
+    if (node.importKind !== "type") {
+      for (const spec of specifiers) {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          if (spec.imported.name === "useWindowDimensions") {
+            state.hasWindowDimensionsImport = true;
+            state.windowDimensionsLocalIdentifier = spec.local.name;
+            break;
+          }
+        }
+      }
+    }
+    if (hasStyleSheet) {
+      state.hasStyleSheetImport = true;
     }
+    if (hasPlatform) {
+      state.hasPlatformImport = true;
+    }
+    state.reactNativeImportPath = path2;
   }
-  const selectProperties = [];
-  for (const [platform, modifiers] of modifiersByPlatform) {
-    const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customTheme);
-    const styleKey = generateStyleKey2(`${platform}_${classNames}`);
-    state.styleRegistry.set(styleKey, styleObject);
-    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
-    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
+    const specifiers = node.specifiers;
+    for (const spec of specifiers) {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        if (spec.imported.name === state.colorSchemeHookName) {
+          state.hasColorSchemeImport = true;
+          state.colorSchemeLocalIdentifier = spec.local.name;
+          break;
+        }
+      }
+    }
+  }
+  if (node.source.value === "@mgcrea/react-native-tailwind") {
+    const specifiers = node.specifiers;
+    specifiers.forEach((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        const importedName = spec.imported.name;
+        if (importedName === "tw" || importedName === "twStyle") {
+          const localName = spec.local.name;
+          state.twImportNames.add(localName);
+        }
+      }
+    });
   }
-  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
-    t.objectExpression(selectProperties)
-  ]);
 }
 
 // src/babel/utils/styleInjection.ts
@@ -2687,152 +3639,170 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName,
   body.body.unshift(hookCall);
   return true;
 }
-function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
-  const styleProperties = [];
-  for (const [key, styleObject] of styleRegistry) {
-    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
-      let valueNode;
-      if (typeof styleValue === "number") {
-        valueNode = t.numericLiteral(styleValue);
-      } else if (typeof styleValue === "string") {
-        valueNode = t.stringLiteral(styleValue);
-      } else {
-        valueNode = t.valueToNode(styleValue);
+function addI18nManagerImport(path2, t) {
+  const body = path2.node.body;
+  let existingValueImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      if (statement.importKind === "type") {
+        continue;
       }
-      return t.objectProperty(t.identifier(styleProp), valueNode);
-    });
-    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break;
+    }
   }
-  const styleSheet = t.variableDeclaration("const", [
+  if (existingValueImport) {
+    const hasI18nManager = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "I18nManager"
+    );
+    if (!hasI18nManager) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("I18nManager"), t.identifier("I18nManager"))
+      );
+    }
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("I18nManager"), t.identifier("I18nManager"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
+  }
+}
+function injectI18nManagerVariable(path2, variableName, localIdentifier, t) {
+  const body = path2.node.body;
+  for (const statement of body) {
+    if (t.isVariableDeclaration(statement) && statement.declarations.length > 0 && t.isVariableDeclarator(statement.declarations[0])) {
+      const declarator = statement.declarations[0];
+      if (t.isIdentifier(declarator.id) && declarator.id.name === variableName) {
+        return;
+      }
+    }
+  }
+  const identifierToUse = localIdentifier ?? "I18nManager";
+  const i18nVariable = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier(stylesIdentifier),
-      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
-        t.objectExpression(styleProperties)
-      ])
+      t.identifier(variableName),
+      t.memberExpression(t.identifier(identifierToUse), t.identifier("isRTL"))
     )
   ]);
-  const body = path2.node.body;
   let insertIndex = 0;
   for (let i = 0; i < body.length; i++) {
-    if (t.isImportDeclaration(body[i])) {
+    const statement = body[i];
+    if (t.isExpressionStatement(statement) && t.isStringLiteral(statement.expression)) {
       insertIndex = i + 1;
-    } else {
-      break;
+      continue;
+    }
+    if (t.isImportDeclaration(statement)) {
+      insertIndex = i + 1;
+      continue;
     }
+    break;
   }
-  body.splice(insertIndex, 0, styleSheet);
-}
-
-// src/babel/utils/styleTransforms.ts
-function getStyleExpression(styleAttribute, t) {
-  const value = styleAttribute.value;
-  if (!t.isJSXExpressionContainer(value)) return null;
-  const expression = value.expression;
-  if (t.isJSXEmptyExpression(expression)) return null;
-  return expression;
-}
-function findStyleAttribute(path2, targetStyleProp, t) {
-  const parent = path2.parent;
-  return parent.attributes.find(
-    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp
-  );
-}
-function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
-  );
-  classNamePath.replaceWith(styleAttribute);
+  body.splice(insertIndex, 0, i18nVariable);
 }
-function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([
-      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
-      functionCall
-    ]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+function addWindowDimensionsImport(path2, t) {
+  const body = path2.node.body;
+  let existingValueImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break;
+      }
+    }
+  }
+  if (existingValueImport) {
+    const hasHook = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "useWindowDimensions"
+    );
+    if (!hasHook) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions"))
+      );
+    }
   } else {
-    const styleArray = t.arrayExpression([
-      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
-      existingStyle
-    ]);
-    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
   }
-  classNamePath.remove();
-}
-function replaceDynamicWithStyleAttribute(classNamePath, result, targetStyleProp, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(result.expression)
-  );
-  classNamePath.replaceWith(styleAttribute);
 }
-function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([result.expression, functionCall]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
-  } else {
-    let styleArray;
-    if (t.isArrayExpression(existingStyle)) {
-      styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+function injectWindowDimensionsHook(functionPath, dimensionsVariableName, hookName, localIdentifier, t) {
+  let body = functionPath.node.body;
+  if (!t.isBlockStatement(body)) {
+    if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
+      const returnStatement = t.returnStatement(body);
+      const blockStatement = t.blockStatement([returnStatement]);
+      functionPath.node.body = blockStatement;
+      body = blockStatement;
     } else {
-      styleArray = t.arrayExpression([result.expression, existingStyle]);
+      return false;
     }
-    styleAttribute.value = t.jsxExpressionContainer(styleArray);
   }
-  classNamePath.remove();
-}
-function replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(styleFunctionExpression)
-  );
-  classNamePath.replaceWith(styleAttribute);
+  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;
+  }
+  const identifierToCall = localIdentifier ?? hookName;
+  const hookCall = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(dimensionsVariableName),
+      t.callExpression(t.identifier(identifierToCall), [])
+    )
+  ]);
+  body.body.unshift(hookCall);
+  return true;
 }
-function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
-    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
-  } else {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
+  const styleProperties = [];
+  for (const [key, styleObject] of styleRegistry) {
+    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
+      let valueNode;
+      if (typeof styleValue === "number") {
+        valueNode = t.numericLiteral(styleValue);
+      } else if (typeof styleValue === "string") {
+        valueNode = t.stringLiteral(styleValue);
+      } else {
+        valueNode = t.valueToNode(styleValue);
+      }
+      return t.objectProperty(t.identifier(styleProp), valueNode);
+    });
+    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
   }
-  classNamePath.remove();
-}
-function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
-  const existingProp = jsxOpeningElement.attributes.find(
-    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor"
-  );
-  if (existingProp) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. Remove the explicit prop or the placeholder: modifier to avoid confusion.`
-      );
+  const styleSheet = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(stylesIdentifier),
+      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
+        t.objectExpression(styleProperties)
+      ])
+    )
+  ]);
+  const body = path2.node.body;
+  let insertIndex = 0;
+  for (let i = 0; i < body.length; i++) {
+    const statement = body[i];
+    if (t.isExpressionStatement(statement) && t.isStringLiteral(statement.expression)) {
+      insertIndex = i + 1;
+      continue;
     }
-    existingProp.value = t.stringLiteral(color);
-  } else {
-    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
-    jsxOpeningElement.attributes.push(newProp);
+    if (t.isImportDeclaration(statement)) {
+      insertIndex = i + 1;
+      continue;
+    }
+    break;
   }
+  body.splice(insertIndex, 0, styleSheet);
 }
 
 // src/babel/utils/twProcessing.ts
@@ -2856,6 +3826,11 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+    if (hasRuntimeDimensions(baseStyleObject)) {
+      throw path2.buildCodeFrameError(
+        `w-screen and h-screen are not supported in tw\`\` or twStyle() calls. Found: "${baseClassName}". Use them in className attributes instead.`
+      );
+    }
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     objectProperties.push(
@@ -2869,8 +3844,9 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   }
   const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
   const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const directionalModifiers = modifierClasses.filter((m) => isDirectionalModifier(m.modifier));
   const otherModifiers = modifierClasses.filter(
-    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier)
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier) && !isDirectionalModifier(m.modifier)
   );
   const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
   let componentScope = null;
@@ -3004,6 +3980,62 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
       );
     }
   }
+  const hasDirectionalModifiers = directionalModifiers.length > 0;
+  if (hasDirectionalModifiers) {
+    state.needsI18nManagerImport = true;
+    const directionalConditionals = processDirectionalModifiers(
+      directionalModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    const styleProperty = objectProperties.find(
+      (prop) => t.isIdentifier(prop.key) && prop.key.name === "style"
+    );
+    if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+      styleProperty.value.elements.push(...directionalConditionals);
+    } else {
+      const styleArrayElements = [];
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey2(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      styleArrayElements.push(...directionalConditionals);
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+    const rtlModifiers = directionalModifiers.filter((m) => m.modifier === "rtl");
+    const ltrModifiers = directionalModifiers.filter((m) => m.modifier === "ltr");
+    if (rtlModifiers.length > 0) {
+      const rtlClassNames = rtlModifiers.map((m) => m.baseClass).join(" ");
+      const rtlStyleObject = parseClassName2(rtlClassNames, state.customTheme);
+      const rtlStyleKey = generateStyleKey2(`rtl_${rtlClassNames}`);
+      state.styleRegistry.set(rtlStyleKey, rtlStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("rtlStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(rtlStyleKey))
+        )
+      );
+    }
+    if (ltrModifiers.length > 0) {
+      const ltrClassNames = ltrModifiers.map((m) => m.baseClass).join(" ");
+      const ltrStyleObject = parseClassName2(ltrClassNames, state.customTheme);
+      const ltrStyleKey = generateStyleKey2(`ltr_${ltrClassNames}`);
+      state.styleRegistry.set(ltrStyleKey, ltrStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("ltrStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(ltrStyleKey))
+        )
+      );
+    }
+  }
   const modifiersByType = /* @__PURE__ */ new Map();
   for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
@@ -3053,586 +4085,186 @@ function removeTwImports(path2, t) {
   });
 }
 
-// src/babel/plugin.ts
-var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
-function isComponentScope(functionPath, t) {
-  const node = functionPath.node;
-  const parent = functionPath.parent;
-  const parentPath = functionPath.parentPath;
-  if (t.isClassMethod(parent)) {
-    return false;
+// src/babel/plugin/visitors/program.ts
+function programEnter(_path, _state) {
+}
+function programExit(path2, state, t) {
+  if (state.hasTwImport) {
+    removeTwImports(path2, t);
   }
-  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
-    return false;
+  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport && !state.needsI18nManagerImport) {
+    return;
   }
-  if (t.isFunctionDeclaration(node)) {
-    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
-      return true;
+  if (!state.hasStyleSheetImport && state.styleRegistry.size > 0) {
+    addStyleSheetImport(path2, t);
+  }
+  if (state.needsPlatformImport && !state.hasPlatformImport) {
+    addPlatformImport(path2, t);
+  }
+  if (state.needsI18nManagerImport && !state.hasI18nManagerImport) {
+    addI18nManagerImport(path2, t);
+  }
+  if (state.needsI18nManagerImport) {
+    injectI18nManagerVariable(path2, state.i18nManagerVariableName, state.i18nManagerLocalIdentifier, t);
+  }
+  if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
+    addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
+  }
+  if (state.needsColorSchemeImport) {
+    for (const functionPath of state.functionComponentsNeedingColorScheme) {
+      injectColorSchemeHook(
+        functionPath,
+        state.colorSchemeVariableName,
+        state.colorSchemeHookName,
+        state.colorSchemeLocalIdentifier,
+        t
+      );
     }
   }
-  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
-    if (t.isVariableDeclarator(parent)) {
-      const varDeclarationPath = parentPath?.parentPath;
-      if (varDeclarationPath && t.isVariableDeclaration(varDeclarationPath.node) && (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))) {
-        if (t.isIdentifier(parent.id)) {
-          const name = parent.id.name;
-          return /^[A-Z]/.test(name);
-        }
-      }
+  if (state.needsWindowDimensionsImport && !state.hasWindowDimensionsImport) {
+    addWindowDimensionsImport(path2, t);
+  }
+  if (state.needsWindowDimensionsImport) {
+    for (const functionPath of state.functionComponentsNeedingWindowDimensions) {
+      injectWindowDimensionsHook(
+        functionPath,
+        state.windowDimensionsVariableName,
+        "useWindowDimensions",
+        state.windowDimensionsLocalIdentifier,
+        t
+      );
     }
   }
-  return false;
+  if (state.styleRegistry.size > 0) {
+    injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
+  }
 }
-function findComponentScope(path2, t) {
-  let current = path2.getFunctionParent();
-  while (current) {
-    if (t.isFunction(current.node) && isComponentScope(current, t)) {
-      return current;
+
+// src/babel/plugin/visitors/tw.ts
+function taggedTemplateVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isIdentifier(node.tag)) {
+    return;
+  }
+  const tagName = node.tag.name;
+  if (!state.twImportNames.has(tagName)) {
+    return;
+  }
+  const quasi = node.quasi;
+  if (!t.isTemplateLiteral(quasi)) {
+    return;
+  }
+  if (quasi.expressions.length > 0) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+      );
     }
-    current = current.getFunctionParent();
+    return;
   }
-  return null;
+  const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
+  if (!className) {
+    path2.replaceWith(t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]));
+    state.hasTwImport = true;
+    return;
+  }
+  state.hasClassNames = true;
+  processTwCall(
+    className,
+    path2,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t
+  );
+  state.hasTwImport = true;
+}
+function callExpressionVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isIdentifier(node.callee)) {
+    return;
+  }
+  const calleeName = node.callee.name;
+  if (!state.twImportNames.has(calleeName)) {
+    return;
+  }
+  if (node.arguments.length !== 1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`
+      );
+    }
+    return;
+  }
+  const arg = node.arguments[0];
+  if (!t.isStringLiteral(arg)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+      );
+    }
+    return;
+  }
+  const className = arg.value.trim();
+  if (!className) {
+    path2.replaceWith(t.identifier("undefined"));
+    state.hasTwImport = true;
+    return;
+  }
+  state.hasClassNames = true;
+  processTwCall(
+    className,
+    path2,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t
+  );
+  state.hasTwImport = true;
 }
+
+// src/babel/plugin.ts
 function reactNativeTailwindBabelPlugin({ types: t }, options) {
-  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
-  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
-  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   const schemeModifierConfig = {
     darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light"
   };
-  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
-  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   return {
     name: "react-native-tailwind",
     visitor: {
       Program: {
-        enter(_path, state) {
-          state.styleRegistry = /* @__PURE__ */ new Map();
-          state.hasClassNames = false;
-          state.hasStyleSheetImport = false;
-          state.hasPlatformImport = false;
-          state.needsPlatformImport = false;
-          state.hasColorSchemeImport = false;
-          state.needsColorSchemeImport = false;
-          state.colorSchemeVariableName = "_twColorScheme";
-          state.colorSchemeImportSource = colorSchemeImportSource;
-          state.colorSchemeHookName = colorSchemeHookName;
-          state.supportedAttributes = exactMatches;
-          state.attributePatterns = patterns;
-          state.stylesIdentifier = stylesIdentifier;
-          state.twImportNames = /* @__PURE__ */ new Set();
-          state.hasTwImport = false;
-          state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
-          state.hasColorSchemeImport = false;
-          state.colorSchemeLocalIdentifier = void 0;
-          state.needsPlatformImport = false;
-          state.hasPlatformImport = false;
-          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
-          state.schemeModifierConfig = schemeModifierConfig;
+        enter(path2, state) {
+          const initialState = createInitialState(
+            options,
+            state.file.opts.filename ?? "",
+            colorSchemeImportSource,
+            colorSchemeHookName,
+            schemeModifierConfig
+          );
+          Object.assign(state, initialState);
+          programEnter(path2, state);
         },
         exit(path2, state) {
-          if (state.hasTwImport) {
-            removeTwImports(path2, t);
-          }
-          if (!state.hasClassNames || state.styleRegistry.size === 0) {
-            return;
-          }
-          if (!state.hasStyleSheetImport) {
-            addStyleSheetImport(path2, t);
-          }
-          if (state.needsPlatformImport && !state.hasPlatformImport) {
-            addPlatformImport(path2, t);
-          }
-          if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
-          }
-          if (state.needsColorSchemeImport) {
-            for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(
-                functionPath,
-                state.colorSchemeVariableName,
-                state.colorSchemeHookName,
-                state.colorSchemeLocalIdentifier,
-                t
-              );
-            }
-          }
-          injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
+          programExit(path2, state, t);
         }
       },
-      // Check if StyleSheet/Platform are already imported and track tw/twStyle imports
       ImportDeclaration(path2, state) {
-        const node = path2.node;
-        if (node.source.value === "react-native") {
-          const specifiers = node.specifiers;
-          const hasStyleSheet = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "StyleSheet";
-            }
-            return false;
-          });
-          const hasPlatform = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "Platform";
-            }
-            return false;
-          });
-          if (hasStyleSheet) {
-            state.hasStyleSheetImport = true;
-          }
-          if (hasPlatform) {
-            state.hasPlatformImport = true;
-          }
-          state.reactNativeImportPath = path2;
-        }
-        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
-          const specifiers = node.specifiers;
-          for (const spec of specifiers) {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              if (spec.imported.name === state.colorSchemeHookName) {
-                state.hasColorSchemeImport = true;
-                state.colorSchemeLocalIdentifier = spec.local.name;
-                break;
-              }
-            }
-          }
-        }
-        if (node.source.value === "@mgcrea/react-native-tailwind") {
-          const specifiers = node.specifiers;
-          specifiers.forEach((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              const importedName = spec.imported.name;
-              if (importedName === "tw" || importedName === "twStyle") {
-                const localName = spec.local.name;
-                state.twImportNames.add(localName);
-              }
-            }
-          });
-        }
+        importDeclarationVisitor(path2, state, t);
       },
-      // Handle tw`...` tagged template expressions
       TaggedTemplateExpression(path2, state) {
-        const node = path2.node;
-        if (!t.isIdentifier(node.tag)) {
-          return;
-        }
-        const tagName = node.tag.name;
-        if (!state.twImportNames.has(tagName)) {
-          return;
-        }
-        const quasi = node.quasi;
-        if (!t.isTemplateLiteral(quasi)) {
-          return;
-        }
-        if (quasi.expressions.length > 0) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
-            );
-          }
-          return;
-        }
-        const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
-        if (!className) {
-          path2.replaceWith(
-            t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))])
-          );
-          state.hasTwImport = true;
-          return;
-        }
-        state.hasClassNames = true;
-        processTwCall(
-          className,
-          path2,
-          state,
-          parseClassName,
-          generateStyleKey,
-          splitModifierClasses,
-          findComponentScope,
-          t
-        );
-        state.hasTwImport = true;
+        taggedTemplateVisitor(path2, state, t);
       },
-      // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
-        const node = path2.node;
-        if (!t.isIdentifier(node.callee)) {
-          return;
-        }
-        const calleeName = node.callee.name;
-        if (!state.twImportNames.has(calleeName)) {
-          return;
-        }
-        if (node.arguments.length !== 1) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`
-            );
-          }
-          return;
-        }
-        const arg = node.arguments[0];
-        if (!t.isStringLiteral(arg)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
-            );
-          }
-          return;
-        }
-        const className = arg.value.trim();
-        if (!className) {
-          path2.replaceWith(t.identifier("undefined"));
-          state.hasTwImport = true;
-          return;
-        }
-        state.hasClassNames = true;
-        processTwCall(
-          className,
-          path2,
-          state,
-          parseClassName,
-          generateStyleKey,
-          splitModifierClasses,
-          findComponentScope,
-          t
-        );
-        state.hasTwImport = true;
+        callExpressionVisitor(path2, state, t);
       },
       JSXAttribute(path2, state) {
-        const node = path2.node;
-        if (!t.isJSXIdentifier(node.name)) {
-          return;
-        }
-        const attributeName = node.name.name;
-        if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
-          return;
-        }
-        const value = node.value;
-        const targetStyleProp = getTargetStyleProp(attributeName);
-        const processStaticClassName = (className) => {
-          const trimmedClassName = className.trim();
-          if (!trimmedClassName) {
-            path2.remove();
-            return true;
-          }
-          state.hasClassNames = true;
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
-          const modifierClasses = [];
-          for (const modifier of rawModifierClasses) {
-            if (isSchemeModifier(modifier.modifier)) {
-              const expanded = expandSchemeModifier(
-                modifier,
-                state.customTheme.colors ?? {},
-                state.schemeModifierConfig.darkSuffix,
-                state.schemeModifierConfig.lightSuffix
-              );
-              modifierClasses.push(...expanded);
-            } else {
-              modifierClasses.push(modifier);
-            }
-          }
-          const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
-          const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
-          const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
-          const stateModifiers = modifierClasses.filter(
-            (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder"
-          );
-          if (placeholderModifiers.length > 0) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport?.supportedModifiers.includes("placeholder")) {
-              const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
-              if (placeholderColor) {
-                addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
-              }
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                console.warn(
-                  `[react-native-tailwind] placeholder: modifier can only be used on TextInput component at ${state.file.opts.filename ?? "unknown"}`
-                );
-              }
-            }
-          }
-          const hasPlatformModifiers = platformModifiers.length > 0;
-          const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
-          const hasStateModifiers = stateModifiers.length > 0;
-          const hasBaseClasses = baseClasses.length > 0;
-          let componentScope = null;
-          if (hasColorSchemeModifiers) {
-            componentScope = findComponentScope(path2, t);
-            if (componentScope) {
-              state.functionComponentsNeedingColorScheme.add(componentScope);
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                console.warn(
-                  `[react-native-tailwind] dark:/light: modifiers require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These modifiers are not supported in class components or nested callbacks.`
-                );
-              }
-            }
-          }
-          if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport) {
-              const styleArrayElements = [];
-              if (hasBaseClasses) {
-                const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
-                const baseStyleKey = generateStyleKey(baseClassName);
-                state.styleRegistry.set(baseStyleKey, baseStyleObject);
-                styleArrayElements.push(
-                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
-                );
-              }
-              if (hasPlatformModifiers) {
-                const platformSelectExpression = processPlatformModifiers(
-                  platformModifiers,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  t
-                );
-                styleArrayElements.push(platformSelectExpression);
-              }
-              if (hasColorSchemeModifiers && componentScope) {
-                const colorSchemeConditionals = processColorSchemeModifiers(
-                  colorSchemeModifiers,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  t
-                );
-                styleArrayElements.push(...colorSchemeConditionals);
-              }
-              const modifiersByType = /* @__PURE__ */ new Map();
-              for (const mod of stateModifiers) {
-                const modType = mod.modifier;
-                if (!modifiersByType.has(modType)) {
-                  modifiersByType.set(modType, []);
-                }
-                modifiersByType.get(modType)?.push(mod);
-              }
-              for (const [modifierType, modifiers] of modifiersByType) {
-                if (!componentSupport.supportedModifiers.includes(modifierType)) {
-                  continue;
-                }
-                const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
-                const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
-                state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
-                const stateProperty = getStatePropertyForModifier(modifierType);
-                const conditionalExpression = t.logicalExpression(
-                  "&&",
-                  t.identifier(stateProperty),
-                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
-                );
-                styleArrayElements.push(conditionalExpression);
-              }
-              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter(
-                (mod) => componentSupport.supportedModifiers.includes(mod)
-              );
-              const styleArrayExpression = t.arrayExpression(styleArrayElements);
-              const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
-              const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-              if (styleAttribute2) {
-                mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-              } else {
-                replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-              }
-              return true;
-            } else {
-            }
-          }
-          if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
-            const styleExpressions = [];
-            if (hasBaseClasses) {
-              const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
-              const baseStyleKey = generateStyleKey(baseClassName);
-              state.styleRegistry.set(baseStyleKey, baseStyleObject);
-              styleExpressions.push(
-                t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
-              );
-            }
-            if (hasPlatformModifiers) {
-              const platformSelectExpression = processPlatformModifiers(
-                platformModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t
-              );
-              styleExpressions.push(platformSelectExpression);
-            }
-            if (hasColorSchemeModifiers && componentScope) {
-              const colorSchemeConditionals = processColorSchemeModifiers(
-                colorSchemeModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t
-              );
-              styleExpressions.push(...colorSchemeConditionals);
-            }
-            const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
-            const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-            if (styleAttribute2) {
-              const existingStyle = styleAttribute2.value;
-              if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
-                const existing = existingStyle.expression;
-                const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
-                styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
-              } else {
-                styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
-              }
-              path2.remove();
-            } else {
-              path2.node.name = t.jsxIdentifier(targetStyleProp);
-              path2.node.value = t.jsxExpressionContainer(styleExpression);
-            }
-            return true;
-          }
-          if (hasStateModifiers) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport) {
-              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
-              const unsupportedModifiers = usedModifiers.filter(
-                (mod) => !componentSupport.supportedModifiers.includes(mod)
-              );
-              if (unsupportedModifiers.length > 0) {
-                if (process.env.NODE_ENV !== "production") {
-                  console.warn(
-                    `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`
-                  );
-                }
-                const supportedModifierClasses = stateModifiers.filter(
-                  (m) => componentSupport.supportedModifiers.includes(m.modifier)
-                );
-                if (supportedModifierClasses.length === 0) {
-                } else {
-                  const filteredClassName = baseClasses.join(" ") + " " + supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
-                  const styleExpression = processStaticClassNameWithModifiers(
-                    filteredClassName.trim(),
-                    state,
-                    parseClassName,
-                    generateStyleKey,
-                    splitModifierClasses,
-                    t
-                  );
-                  const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
-                  const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                  const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-                  if (styleAttribute2) {
-                    mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-                  } else {
-                    replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-                  }
-                  return true;
-                }
-              } else {
-                const styleExpression = processStaticClassNameWithModifiers(
-                  trimmedClassName,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  splitModifierClasses,
-                  t
-                );
-                const modifierTypes = usedModifiers;
-                const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-                if (styleAttribute2) {
-                  mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-                } else {
-                  replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-                }
-                return true;
-              }
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
-                console.warn(
-                  `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`
-                );
-              }
-            }
-          }
-          const classNameForStyle = baseClasses.join(" ");
-          if (!classNameForStyle) {
-            path2.remove();
-            return true;
-          }
-          const styleObject = parseClassName(classNameForStyle, state.customTheme);
-          const styleKey = generateStyleKey(classNameForStyle);
-          state.styleRegistry.set(styleKey, styleObject);
-          const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
-          if (styleAttribute) {
-            mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
-          } else {
-            replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
-          }
-          return true;
-        };
-        if (t.isStringLiteral(value)) {
-          if (processStaticClassName(value.value)) {
-            return;
-          }
-        }
-        if (t.isJSXExpressionContainer(value)) {
-          const expression = value.expression;
-          if (t.isJSXEmptyExpression(expression)) {
-            return;
-          }
-          if (t.isStringLiteral(expression)) {
-            if (processStaticClassName(expression.value)) {
-              return;
-            }
-          }
-          try {
-            const componentScope = findComponentScope(path2, t);
-            const result = processDynamicExpression(
-              expression,
-              state,
-              parseClassName,
-              generateStyleKey,
-              splitModifierClasses,
-              processPlatformModifiers,
-              processColorSchemeModifiers,
-              componentScope,
-              isPlatformModifier,
-              isColorSchemeModifier,
-              isSchemeModifier,
-              expandSchemeModifier,
-              t
-            );
-            if (result) {
-              state.hasClassNames = true;
-              const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
-              if (styleAttribute) {
-                mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
-              } else {
-                replaceDynamicWithStyleAttribute(path2, result, targetStyleProp, t);
-              }
-              return;
-            }
-          } catch (error) {
-            if (process.env.NODE_ENV !== "production") {
-              console.warn(
-                `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`
-              );
-            }
-          }
-        }
-        if (process.env.NODE_ENV !== "production") {
-          const filename = state.file.opts.filename ?? "unknown";
-          console.warn(
-            `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. Use the ${targetStyleProp} prop for dynamic values.`
-          );
-        }
+        jsxAttributeVisitor(path2, state, t);
       }
     }
   };