@mgcrea/react-native-tailwind 0.13.0 → 0.15.0

package/dist/babel/index.cjs

@@ -53,6 +53,40 @@ function flattenColors(colors, prefix = "") {
 }
 
 // src/babel/config-loader.ts
+var SUPPORTED_THEME_KEYS = /* @__PURE__ */ new Set(["colors", "fontFamily", "fontSize", "spacing", "extend"]);
+var warnedConfigPaths = /* @__PURE__ */ new Set();
+function warnUnsupportedThemeKeys(config, configPath) {
+  if (process.env.NODE_ENV === "production" || warnedConfigPaths.has(configPath)) {
+    return;
+  }
+  const unsupportedKeys = [];
+  if (config.theme?.extend && typeof config.theme.extend === "object") {
+    for (const key of Object.keys(config.theme.extend)) {
+      if (!SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.extend.${key}`);
+      }
+    }
+  }
+  if (config.theme && typeof config.theme === "object") {
+    for (const key of Object.keys(config.theme)) {
+      if (key !== "extend" && !SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.${key}`);
+      }
+    }
+  }
+  if (unsupportedKeys.length > 0) {
+    warnedConfigPaths.add(configPath);
+    console.warn(
+      `[react-native-tailwind] Unsupported theme configuration detected:
+  ${unsupportedKeys.join(", ")}
+
+  Currently supported: colors, fontFamily, fontSize, spacing
+
+  These extensions will be ignored. If you need support for these features,
+  please open an issue: https://github.com/mgcrea/react-native-tailwind/issues/new`
+    );
+  }
+}
 var configCache = /* @__PURE__ */ new Map();
 function findTailwindConfig(startDir) {
   let currentDir = startDir;
@@ -97,12 +131,13 @@ function extractCustomTheme(filename) {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
   if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
+  warnUnsupportedThemeKeys(config, configPath);
   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."
@@ -146,10 +181,39 @@ function extractCustomTheme(filename) {
       }
     }
   }
+  if (config.theme.spacing && !config.theme.extend?.spacing && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.spacing will override all default spacing. Use theme.extend.spacing to add custom spacing while keeping defaults."
+    );
+  }
+  const spacing = config.theme.extend?.spacing ?? config.theme.spacing ?? {};
+  const spacingResult = {};
+  for (const [key, value] of Object.entries(spacing)) {
+    if (typeof value === "number") {
+      spacingResult[key] = value;
+    } else if (typeof value === "string") {
+      let parsed;
+      if (value.endsWith("rem")) {
+        parsed = parseFloat(value.replace(/rem$/, "")) * 16;
+      } else {
+        parsed = parseFloat(value.replace(/px$/, ""));
+      }
+      if (!isNaN(parsed)) {
+        spacingResult[key] = parsed;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid spacing value for "${key}": ${value}. Expected number or string like "16px" or "1rem".`
+          );
+        }
+      }
+    }
+  }
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
-    fontSize: fontSizeResult
+    fontSize: fontSizeResult,
+    spacing: spacingResult
   };
 }
 
@@ -212,6 +276,10 @@ function createInitialState(options, filename, colorSchemeImportSource, colorSch
     needsWindowDimensionsImport: false,
     windowDimensionsVariableName: "_twDimensions",
     windowDimensionsLocalIdentifier: void 0,
+    hasI18nManagerImport: false,
+    needsI18nManagerImport: false,
+    i18nManagerVariableName: "_twIsRTL",
+    i18nManagerLocalIdentifier: void 0,
     customTheme,
     schemeModifierConfig,
     supportedAttributes: exactMatches,
@@ -715,7 +783,9 @@ var BORDER_WIDTH_PROP_MAP = {
   t: "borderTopWidth",
   r: "borderRightWidth",
   b: "borderBottomWidth",
-  l: "borderLeftWidth"
+  l: "borderLeftWidth",
+  s: "borderStartWidth",
+  e: "borderEndWidth"
 };
 var BORDER_RADIUS_CORNER_MAP = {
   tl: "borderTopLeftRadius",
@@ -723,11 +793,19 @@ var BORDER_RADIUS_CORNER_MAP = {
   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"]
+  l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  s: ["borderTopStartRadius", "borderBottomStartRadius"],
+  e: ["borderTopEndRadius", "borderBottomEndRadius"]
 };
 function parseArbitraryBorderWidth(value) {
   const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
@@ -775,11 +853,11 @@ function parseBorder(cls, customColors) {
   return null;
 }
 function parseBorderWidth(cls, customColors) {
-  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
+  const dirMatch = cls.match(/^border-([trblse])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
     const valueStr = dirMatch[2] || "";
-    if (valueStr) {
+    if (valueStr && dir !== "s" && dir !== "e") {
       const colorResult = parseColor(cls, customColors);
       if (colorResult !== null) {
         return null;
@@ -843,7 +921,24 @@ function parseBorderRadius(cls) {
     }
     return null;
   }
-  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
+  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] || "";
@@ -1052,7 +1147,8 @@ var INSET_SCALE = {
   20: 80,
   24: 96
 };
-function parseLayout(cls) {
+function parseLayout(cls, customSpacing) {
+  const insetMap = customSpacing ? { ...INSET_SCALE, ...customSpacing } : INSET_SCALE;
   if (cls.startsWith("z-")) {
     const zKey = cls.substring(2);
     const arbitraryZ = parseArbitraryZIndex(zKey);
@@ -1073,7 +1169,7 @@ function parseLayout(cls) {
     if (arbitraryTop !== null) {
       return { top: arbitraryTop };
     }
-    const topValue = INSET_SCALE[topKey];
+    const topValue = insetMap[topKey];
     if (topValue !== void 0) {
       return { top: topValue };
     }
@@ -1087,7 +1183,7 @@ function parseLayout(cls) {
     if (arbitraryRight !== null) {
       return { right: arbitraryRight };
     }
-    const rightValue = INSET_SCALE[rightKey];
+    const rightValue = insetMap[rightKey];
     if (rightValue !== void 0) {
       return { right: rightValue };
     }
@@ -1101,7 +1197,7 @@ function parseLayout(cls) {
     if (arbitraryBottom !== null) {
       return { bottom: arbitraryBottom };
     }
-    const bottomValue = INSET_SCALE[bottomKey];
+    const bottomValue = insetMap[bottomKey];
     if (bottomValue !== void 0) {
       return { bottom: bottomValue };
     }
@@ -1115,18 +1211,64 @@ function parseLayout(cls) {
     if (arbitraryLeft !== null) {
       return { left: arbitraryLeft };
     }
-    const leftValue = INSET_SCALE[leftKey];
+    const leftValue = insetMap[leftKey];
     if (leftValue !== void 0) {
       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 = insetMap[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 = insetMap[endKey];
+    if (endValue !== void 0) {
+      return { end: isNegative ? -endValue : endValue };
+    }
+  }
   if (cls.startsWith("inset-x-")) {
     const insetKey = cls.substring(8);
     const arbitraryInset = parseArbitraryInset(insetKey);
     if (arbitraryInset !== null) {
       return { left: arbitraryInset, right: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { left: insetValue, right: insetValue };
     }
@@ -1137,18 +1279,40 @@ function parseLayout(cls) {
     if (arbitraryInset !== null) {
       return { top: arbitraryInset, bottom: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       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 = insetMap[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 = insetMap[insetKey];
+    if (insetValue !== void 0) {
+      return { end: insetValue };
+    }
+  }
   if (cls.startsWith("inset-")) {
     const insetKey = cls.substring(6);
     const arbitraryInset = parseArbitraryInset(insetKey);
     if (arbitraryInset !== null) {
       return { top: arbitraryInset, right: arbitraryInset, bottom: arbitraryInset, left: arbitraryInset };
     }
-    const insetValue = INSET_SCALE[insetKey];
+    const insetValue = insetMap[insetKey];
     if (insetValue !== void 0) {
       return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
     }
@@ -1308,7 +1472,8 @@ function parseArbitrarySize(value) {
   }
   return null;
 }
-function parseSizing(cls) {
+function parseSizing(cls, customSpacing) {
+  const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
     if (sizeKey === "screen") {
@@ -1322,7 +1487,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { width: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { width: numericSize };
     }
@@ -1343,7 +1508,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { height: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { height: numericSize };
     }
@@ -1361,7 +1526,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { minWidth: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { minWidth: numericSize };
     }
@@ -1376,7 +1541,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { minHeight: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { minHeight: numericSize };
     }
@@ -1391,7 +1556,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { maxWidth: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { maxWidth: numericSize };
     }
@@ -1406,7 +1571,7 @@ function parseSizing(cls) {
     if (percentage) {
       return { maxHeight: percentage };
     }
-    const numericSize = SIZE_SCALE[sizeKey];
+    const numericSize = sizeMap[sizeKey];
     if (numericSize !== void 0) {
       return { maxHeight: numericSize };
     }
@@ -1466,8 +1631,9 @@ function parseArbitrarySpacing(value) {
   }
   return null;
 }
-function parseSpacing(cls) {
-  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
+function parseSpacing(cls, customSpacing) {
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
+  const marginMatch = cls.match(/^(-?)m([xytrblse]?)-(.+)$/);
   if (marginMatch) {
     const [, negativePrefix, dir, valueStr] = marginMatch;
     const isNegative = negativePrefix === "-";
@@ -1476,20 +1642,20 @@ function parseSpacing(cls) {
       const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
       return getMarginStyle(dir, finalValue);
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       const finalValue = isNegative ? -scaleValue : scaleValue;
       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);
     if (arbitraryValue !== null) {
       return getPaddingStyle(dir, arbitraryValue);
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       return getPaddingStyle(dir, scaleValue);
     }
@@ -1501,7 +1667,7 @@ function parseSpacing(cls) {
     if (arbitraryValue !== null) {
       return { gap: arbitraryValue };
     }
-    const scaleValue = SPACING_SCALE[valueStr];
+    const scaleValue = spacingMap[valueStr];
     if (scaleValue !== void 0) {
       return { gap: scaleValue };
     }
@@ -1524,6 +1690,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 {};
   }
@@ -1544,6 +1714,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 {};
   }
@@ -1659,7 +1833,8 @@ function parseArbitraryPerspective(value) {
   }
   return null;
 }
-function parseTransform(cls) {
+function parseTransform(cls, customSpacing) {
+  const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
   if (cls.startsWith("origin-")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
@@ -1765,7 +1940,7 @@ function parseTransform(cls) {
       const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
       return { transform: [{ translateX: value }] };
     }
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== void 0) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateX: value }] };
@@ -1779,7 +1954,7 @@ function parseTransform(cls) {
       const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
       return { transform: [{ translateY: value }] };
     }
-    const translateValue = SPACING_SCALE[translateKey];
+    const translateValue = spacingMap[translateKey];
     if (translateValue !== void 0) {
       const value = isNegative ? -translateValue : translateValue;
       return { transform: [{ translateY: value }] };
@@ -2032,11 +2207,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(":");
@@ -2071,6 +2248,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-");
 }
@@ -2115,11 +2295,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);
@@ -2142,15 +2335,15 @@ function parseClassName(className, customTheme) {
 }
 function parseClass(cls, customTheme) {
   const parsers = [
-    parseSpacing,
+    (cls2) => parseSpacing(cls2, customTheme?.spacing),
     (cls2) => parseBorder(cls2, customTheme?.colors),
     (cls2) => parseColor(cls2, customTheme?.colors),
-    parseLayout,
+    (cls2) => parseLayout(cls2, customTheme?.spacing),
     (cls2) => parseTypography(cls2, customTheme?.fontFamily, customTheme?.fontSize),
-    parseSizing,
+    (cls2) => parseSizing(cls2, customTheme?.spacing),
     parseShadow,
     parseAspectRatio,
-    parseTransform
+    (cls2) => parseTransform(cls2, customTheme?.spacing)
   ];
   for (const parser of parsers) {
     const result = parser(cls);
@@ -2298,6 +2491,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)) {
@@ -2901,6 +3128,7 @@ function jsxAttributeVisitor(path2, state, t) {
     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"
     );
@@ -2923,6 +3151,7 @@ function jsxAttributeVisitor(path2, state, t) {
     }
     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;
@@ -2938,7 +3167,7 @@ function jsxAttributeVisitor(path2, state, t) {
         }
       }
     }
-    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
+    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers || hasDirectionalModifiers)) {
       const jsxOpeningElement = path2.parent;
       const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
       if (componentSupport) {
@@ -2948,7 +3177,7 @@ function jsxAttributeVisitor(path2, state, t) {
           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, or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+              `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);
@@ -2977,6 +3206,16 @@ function jsxAttributeVisitor(path2, state, 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;
@@ -3016,14 +3255,14 @@ function jsxAttributeVisitor(path2, state, t) {
       } else {
       }
     }
-    if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
+    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 or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+            `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);
@@ -3052,6 +3291,16 @@ function jsxAttributeVisitor(path2, state, 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) {
@@ -3277,6 +3526,17 @@ function importDeclarationVisitor(path2, state, t) {
       }
       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;
+          }
+        }
+      }
+    }
     if (node.importKind !== "type") {
       for (const spec of specifiers) {
         if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
@@ -3447,6 +3707,71 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName,
   body.body.unshift(hookCall);
   return true;
 }
+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;
+      }
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break;
+    }
+  }
+  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(variableName),
+      t.memberExpression(t.identifier(identifierToUse), t.identifier("isRTL"))
+    )
+  ]);
+  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;
+    }
+    if (t.isImportDeclaration(statement)) {
+      insertIndex = i + 1;
+      continue;
+    }
+    break;
+  }
+  body.splice(insertIndex, 0, i18nVariable);
+}
 function addWindowDimensionsImport(path2, t) {
   const body = path2.node.body;
   let existingValueImport = null;
@@ -3534,11 +3859,16 @@ function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
   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);
 }
@@ -3582,8 +3912,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;
@@ -3717,6 +4048,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)) {
@@ -3773,7 +4160,7 @@ function programExit(path2, state, t) {
   if (state.hasTwImport) {
     removeTwImports(path2, t);
   }
-  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport) {
+  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport && !state.needsI18nManagerImport) {
     return;
   }
   if (!state.hasStyleSheetImport && state.styleRegistry.size > 0) {
@@ -3782,6 +4169,12 @@ function programExit(path2, state, 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);
   }