@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/dist/babel/index.cjs

@@ -34,6 +34,49 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/parser/aspectRatio.ts
+var ASPECT_RATIO_PRESETS = {
+  "aspect-auto": void 0,
+  // Remove aspect ratio
+  "aspect-square": 1,
+  // 1:1
+  "aspect-video": 16 / 9
+  // 16:9
+};
+function parseArbitraryAspectRatio(value) {
+  const match = value.match(/^\[(\d+)\/(\d+)\]$/);
+  if (match) {
+    const numerator = Number.parseInt(match[1], 10);
+    const denominator = Number.parseInt(match[2], 10);
+    if (denominator === 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[react-native-tailwind] Invalid aspect ratio: ${value}. Denominator cannot be zero.`);
+      }
+      return null;
+    }
+    return numerator / denominator;
+  }
+  return null;
+}
+function parseAspectRatio(cls) {
+  if (!cls.startsWith("aspect-")) {
+    return null;
+  }
+  if (cls in ASPECT_RATIO_PRESETS) {
+    const aspectRatio2 = ASPECT_RATIO_PRESETS[cls];
+    if (aspectRatio2 === void 0) {
+      return {};
+    }
+    return { aspectRatio: aspectRatio2 };
+  }
+  const arbitraryValue = cls.substring(7);
+  const aspectRatio = parseArbitraryAspectRatio(arbitraryValue);
+  if (aspectRatio !== null) {
+    return { aspectRatio };
+  }
+  return null;
+}
+
 // src/parser/borders.ts
 var BORDER_WIDTH_SCALE = {
   "": 1,
@@ -53,7 +96,58 @@ var BORDER_RADIUS_SCALE = {
   "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);
   }
@@ -63,42 +157,25 @@ function parseBorder(cls) {
   if (cls.startsWith("rounded")) {
     return parseBorderRadius(cls);
   }
-  if (cls === "border-solid") return { borderStyle: "solid" };
-  if (cls === "border-dotted") return { borderStyle: "dotted" };
-  if (cls === "border-dashed") return { borderStyle: "dashed" };
   return null;
 }
 function parseBorderWidth(cls) {
-  const allArbMatch = cls.match(/^border-\[(\d+)(?:px)?\]$/);
-  if (allArbMatch) {
-    return { borderWidth: parseInt(allArbMatch[1], 10) };
-  }
-  const dirArbMatch = cls.match(/^border-([trbl])-\[(\d+)(?:px)?\]$/);
-  if (dirArbMatch) {
-    const dir = dirArbMatch[1];
-    const value = parseInt(dirArbMatch[2], 10);
-    const propMap = {
-      t: "borderTopWidth",
-      r: "borderRightWidth",
-      b: "borderBottomWidth",
-      l: "borderLeftWidth"
-    };
-    return { [propMap[dir]]: value };
-  }
-  const dirMatch = cls.match(/^border-([trbl])-?(\d*)$/);
+  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
-    const scaleKey = dirMatch[2] || "";
-    const value = BORDER_WIDTH_SCALE[scaleKey];
-    if (typeof value === "number") {
-      const propMap = {
-        t: "borderTopWidth",
-        r: "borderRightWidth",
-        b: "borderBottomWidth",
-        l: "borderLeftWidth"
-      };
-      return { [propMap[dir]]: value };
+    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) {
@@ -107,78 +184,76 @@ function parseBorderWidth(cls) {
       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 allArbMatch = cls.match(/^rounded-\[(\d+)(?:px)?\]$/);
-  if (allArbMatch) {
-    return { borderRadius: parseInt(allArbMatch[1], 10) };
-  }
-  const cornerArbMatch = cls.match(/^rounded-(tl|tr|bl|br)-\[(\d+)(?:px)?\]$/);
-  if (cornerArbMatch) {
-    const corner = cornerArbMatch[1];
-    const value = parseInt(cornerArbMatch[2], 10);
-    const propMap = {
-      tl: "borderTopLeftRadius",
-      tr: "borderTopRightRadius",
-      bl: "borderBottomLeftRadius",
-      br: "borderBottomRightRadius"
-    };
-    return { [propMap[corner]]: value };
-  }
-  const sideArbMatch = cls.match(/^rounded-([trbl])-\[(\d+)(?:px)?\]$/);
-  if (sideArbMatch) {
-    const side = sideArbMatch[1];
-    const value = parseInt(sideArbMatch[2], 10);
-    const propMap = {
-      t: ["borderTopLeftRadius", "borderTopRightRadius"],
-      r: ["borderTopRightRadius", "borderBottomRightRadius"],
-      b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
-      l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
-    };
-    const result = {};
-    propMap[side].forEach((prop) => result[prop] = value);
-    return result;
-  }
-  const allMatch = cls.match(/^rounded(-\w+)?$/);
-  if (allMatch) {
-    const scaleKey = allMatch[1] ? allMatch[1].substring(1) : "";
-    const value = BORDER_RADIUS_SCALE[scaleKey];
-    if (value !== void 0) {
-      return { borderRadius: value };
+  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 = cls.match(/^rounded-([trbl])(?:-(\w+))?$/);
+  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
   if (sideMatch) {
     const side = sideMatch[1];
-    const scaleKey = sideMatch[2] || "";
-    const value = BORDER_RADIUS_SCALE[scaleKey];
+    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 propMap = {
-        t: ["borderTopLeftRadius", "borderTopRightRadius"],
-        r: ["borderTopRightRadius", "borderBottomRightRadius"],
-        b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
-        l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
-      };
       const result = {};
-      propMap[side].forEach((prop) => result[prop] = value);
+      BORDER_RADIUS_SIDE_MAP[side].forEach((prop) => result[prop] = value);
       return result;
     }
+    return null;
   }
-  const cornerMatch = cls.match(/^rounded-(tl|tr|bl|br)(?:-(\w+))?$/);
-  if (cornerMatch) {
-    const corner = cornerMatch[1];
-    const scaleKey = cornerMatch[2] || "";
-    const value = BORDER_RADIUS_SCALE[scaleKey];
-    if (value !== void 0) {
-      const propMap = {
-        tl: "borderTopLeftRadius",
-        tr: "borderTopRightRadius",
-        bl: "borderBottomLeftRadius",
-        br: "borderBottomRightRadius"
-      };
-      return { [propMap[corner]]: value };
+  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;
 }
@@ -289,27 +364,86 @@ var COLORS = {
   black: "#000000",
   transparent: "transparent"
 };
+function applyOpacity(hex, opacity) {
+  if (hex === "transparent") {
+    return "transparent";
+  }
+  const cleanHex = hex.replace(/^#/, "");
+  const fullHex = cleanHex.length === 3 ? cleanHex.split("").map((char) => char + char).join("") : cleanHex;
+  const alpha = Math.round(opacity / 100 * 255);
+  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
+  return `#${fullHex.toUpperCase()}${alphaHex}`;
+}
+function parseArbitraryColor(value) {
+  const hexMatch = value.match(/^\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\]$/);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    if (hex.length === 3) {
+      const expanded = hex.split("").map((char) => char + char).join("");
+      return `#${expanded}`;
+    }
+    return `#${hex}`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary color value: ${value}. Only hex colors are supported (e.g., [#ff0000], [#f00], or [#ff0000aa]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
 function parseColor(cls, customColors) {
   const getColor = (key) => {
     return customColors?.[key] ?? COLORS[key];
   };
+  const parseColorWithOpacity = (colorKey) => {
+    const opacityMatch = colorKey.match(/^(.+)\/(\d+)$/);
+    if (opacityMatch) {
+      const baseColorKey = opacityMatch[1];
+      const opacity = Number.parseInt(opacityMatch[2], 10);
+      if (opacity < 0 || opacity > 100) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid opacity value: ${opacity}. Opacity must be between 0 and 100.`
+          );
+        }
+        return null;
+      }
+      const arbitraryColor2 = parseArbitraryColor(baseColorKey);
+      if (arbitraryColor2 !== null) {
+        return applyOpacity(arbitraryColor2, opacity);
+      }
+      const color = getColor(baseColorKey);
+      if (color) {
+        return applyOpacity(color, opacity);
+      }
+      return null;
+    }
+    const arbitraryColor = parseArbitraryColor(colorKey);
+    if (arbitraryColor !== null) {
+      return arbitraryColor;
+    }
+    return getColor(colorKey) ?? null;
+  };
   if (cls.startsWith("bg-")) {
     const colorKey = cls.substring(3);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { backgroundColor: color };
     }
   }
   if (cls.startsWith("text-")) {
     const colorKey = cls.substring(5);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { color };
     }
   }
   if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
     const colorKey = cls.substring(7);
-    const color = getColor(colorKey);
+    const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { borderColor: color };
     }
@@ -384,10 +518,203 @@ var OVERFLOW_MAP = {
   "overflow-visible": { overflow: "visible" },
   "overflow-scroll": { overflow: "scroll" }
 };
+var Z_INDEX_SCALE = {
+  0: 0,
+  10: 10,
+  20: 20,
+  30: 30,
+  40: 40,
+  50: 50,
+  auto: 0
+  // React Native doesn't have 'auto', default to 0
+};
+var INSET_SCALE = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+  16: 64,
+  20: 80,
+  24: 96
+};
 function parseLayout(cls) {
+  if (cls.startsWith("z-")) {
+    const zKey = cls.substring(2);
+    const zValue = Z_INDEX_SCALE[zKey];
+    if (zValue !== void 0) {
+      return { zIndex: zValue };
+    }
+  }
+  if (cls.startsWith("top-")) {
+    const topKey = cls.substring(4);
+    if (topKey === "auto") {
+      return {};
+    }
+    const topValue = INSET_SCALE[topKey];
+    if (topValue !== void 0) {
+      return { top: topValue };
+    }
+  }
+  if (cls.startsWith("right-")) {
+    const rightKey = cls.substring(6);
+    if (rightKey === "auto") {
+      return {};
+    }
+    const rightValue = INSET_SCALE[rightKey];
+    if (rightValue !== void 0) {
+      return { right: rightValue };
+    }
+  }
+  if (cls.startsWith("bottom-")) {
+    const bottomKey = cls.substring(7);
+    if (bottomKey === "auto") {
+      return {};
+    }
+    const bottomValue = INSET_SCALE[bottomKey];
+    if (bottomValue !== void 0) {
+      return { bottom: bottomValue };
+    }
+  }
+  if (cls.startsWith("left-")) {
+    const leftKey = cls.substring(5);
+    if (leftKey === "auto") {
+      return {};
+    }
+    const leftValue = INSET_SCALE[leftKey];
+    if (leftValue !== void 0) {
+      return { left: leftValue };
+    }
+  }
+  if (cls.startsWith("inset-")) {
+    const insetKey = cls.substring(6);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
+    }
+  }
+  if (cls.startsWith("inset-x-")) {
+    const insetKey = cls.substring(8);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { left: insetValue, right: insetValue };
+    }
+  }
+  if (cls.startsWith("inset-y-")) {
+    const insetKey = cls.substring(8);
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { top: insetValue, bottom: insetValue };
+    }
+  }
   return DISPLAY_MAP[cls] ?? FLEX_DIRECTION_MAP[cls] ?? FLEX_WRAP_MAP[cls] ?? FLEX_MAP[cls] ?? GROW_SHRINK_MAP[cls] ?? JUSTIFY_CONTENT_MAP[cls] ?? ALIGN_ITEMS_MAP[cls] ?? ALIGN_SELF_MAP[cls] ?? ALIGN_CONTENT_MAP[cls] ?? POSITION_MAP[cls] ?? OVERFLOW_MAP[cls] ?? null;
 }
 
+// src/parser/shadows.ts
+var import_react_native = require("react-native");
+var SHADOW_DEFINITIONS = {
+  "shadow-sm": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 1
+    },
+    android: {
+      elevation: 1
+    }
+  },
+  shadow: {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2
+    },
+    android: {
+      elevation: 2
+    }
+  },
+  "shadow-md": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4
+    },
+    android: {
+      elevation: 4
+    }
+  },
+  "shadow-lg": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.2,
+      shadowRadius: 8
+    },
+    android: {
+      elevation: 8
+    }
+  },
+  "shadow-xl": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12
+    },
+    android: {
+      elevation: 12
+    }
+  },
+  "shadow-2xl": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 20 },
+      shadowOpacity: 0.3,
+      shadowRadius: 24
+    },
+    android: {
+      elevation: 16
+    }
+  },
+  "shadow-none": {
+    ios: {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0
+    },
+    android: {
+      elevation: 0
+    }
+  }
+};
+function buildShadowScale() {
+  const scale = {};
+  for (const [key, value] of Object.entries(SHADOW_DEFINITIONS)) {
+    scale[key] = import_react_native.Platform.select(value);
+  }
+  return scale;
+}
+var SHADOW_SCALE = buildShadowScale();
+function parseShadow(cls) {
+  if (cls in SHADOW_SCALE) {
+    return SHADOW_SCALE[cls];
+  }
+  return null;
+}
+
 // src/parser/sizing.ts
 var SIZE_SCALE = {
   0: 0,
@@ -599,131 +926,99 @@ var SPACING_SCALE = {
   80: 320,
   96: 384
 };
-function parseSpacing(cls) {
-  if (cls.startsWith("m-") || cls.startsWith("m")) {
-    return parseMargin(cls);
-  }
-  if (cls.startsWith("p-") || cls.startsWith("p")) {
-    return parsePadding(cls);
+function parseArbitrarySpacing(value) {
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
   }
-  if (cls.startsWith("gap-")) {
-    return parseGap(cls);
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`
+      );
+    }
+    return null;
   }
   return null;
 }
-function parseMargin(cls) {
-  const allMatch = cls.match(/^m-(\d+(?:\.\d+)?)$/);
-  if (allMatch) {
-    const value = SPACING_SCALE[allMatch[1]];
-    if (value !== void 0) {
-      return { margin: value };
+function parseSpacing(cls) {
+  const marginMatch = cls.match(/^m([xytrbls]?)-(.+)$/);
+  if (marginMatch) {
+    const [, dir, valueStr] = marginMatch;
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return getMarginStyle(dir, arbitraryValue);
     }
-  }
-  const xMatch = cls.match(/^mx-(\d+(?:\.\d+)?)$/);
-  if (xMatch) {
-    const value = SPACING_SCALE[xMatch[1]];
-    if (value !== void 0) {
-      return { marginHorizontal: value };
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== void 0) {
+      return getMarginStyle(dir, scaleValue);
     }
   }
-  const yMatch = cls.match(/^my-(\d+(?:\.\d+)?)$/);
-  if (yMatch) {
-    const value = SPACING_SCALE[yMatch[1]];
-    if (value !== void 0) {
-      return { marginVertical: value };
+  const paddingMatch = cls.match(/^p([xytrbls]?)-(.+)$/);
+  if (paddingMatch) {
+    const [, dir, valueStr] = paddingMatch;
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return getPaddingStyle(dir, arbitraryValue);
     }
-  }
-  const tMatch = cls.match(/^mt-(\d+(?:\.\d+)?)$/);
-  if (tMatch) {
-    const value = SPACING_SCALE[tMatch[1]];
-    if (value !== void 0) {
-      return { marginTop: value };
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== void 0) {
+      return getPaddingStyle(dir, scaleValue);
     }
   }
-  const rMatch = cls.match(/^mr-(\d+(?:\.\d+)?)$/);
-  if (rMatch) {
-    const value = SPACING_SCALE[rMatch[1]];
-    if (value !== void 0) {
-      return { marginRight: value };
+  const gapMatch = cls.match(/^gap-(.+)$/);
+  if (gapMatch) {
+    const valueStr = gapMatch[1];
+    const arbitraryValue = parseArbitrarySpacing(valueStr);
+    if (arbitraryValue !== null) {
+      return { gap: arbitraryValue };
     }
-  }
-  const bMatch = cls.match(/^mb-(\d+(?:\.\d+)?)$/);
-  if (bMatch) {
-    const value = SPACING_SCALE[bMatch[1]];
-    if (value !== void 0) {
-      return { marginBottom: value };
+    const scaleValue = SPACING_SCALE[valueStr];
+    if (scaleValue !== void 0) {
+      return { gap: scaleValue };
     }
   }
-  const lMatch = cls.match(/^ml-(\d+(?:\.\d+)?)$/);
-  if (lMatch) {
-    const value = SPACING_SCALE[lMatch[1]];
-    if (value !== void 0) {
+  return null;
+}
+function getMarginStyle(dir, value) {
+  switch (dir) {
+    case "":
+      return { margin: value };
+    case "x":
+      return { marginHorizontal: value };
+    case "y":
+      return { marginVertical: value };
+    case "t":
+      return { marginTop: value };
+    case "r":
+      return { marginRight: value };
+    case "b":
+      return { marginBottom: value };
+    case "l":
       return { marginLeft: value };
-    }
+    default:
+      return {};
   }
-  return null;
 }
-function parsePadding(cls) {
-  const allMatch = cls.match(/^p-(\d+(?:\.\d+)?)$/);
-  if (allMatch) {
-    const value = SPACING_SCALE[allMatch[1]];
-    if (value !== void 0) {
+function getPaddingStyle(dir, value) {
+  switch (dir) {
+    case "":
       return { padding: value };
-    }
-  }
-  const xMatch = cls.match(/^px-(\d+(?:\.\d+)?)$/);
-  if (xMatch) {
-    const value = SPACING_SCALE[xMatch[1]];
-    if (value !== void 0) {
+    case "x":
       return { paddingHorizontal: value };
-    }
-  }
-  const yMatch = cls.match(/^py-(\d+(?:\.\d+)?)$/);
-  if (yMatch) {
-    const value = SPACING_SCALE[yMatch[1]];
-    if (value !== void 0) {
+    case "y":
       return { paddingVertical: value };
-    }
-  }
-  const tMatch = cls.match(/^pt-(\d+(?:\.\d+)?)$/);
-  if (tMatch) {
-    const value = SPACING_SCALE[tMatch[1]];
-    if (value !== void 0) {
+    case "t":
       return { paddingTop: value };
-    }
-  }
-  const rMatch = cls.match(/^pr-(\d+(?:\.\d+)?)$/);
-  if (rMatch) {
-    const value = SPACING_SCALE[rMatch[1]];
-    if (value !== void 0) {
+    case "r":
       return { paddingRight: value };
-    }
-  }
-  const bMatch = cls.match(/^pb-(\d+(?:\.\d+)?)$/);
-  if (bMatch) {
-    const value = SPACING_SCALE[bMatch[1]];
-    if (value !== void 0) {
+    case "b":
       return { paddingBottom: value };
-    }
-  }
-  const lMatch = cls.match(/^pl-(\d+(?:\.\d+)?)$/);
-  if (lMatch) {
-    const value = SPACING_SCALE[lMatch[1]];
-    if (value !== void 0) {
+    case "l":
       return { paddingLeft: value };
-    }
+    default:
+      return {};
   }
-  return null;
-}
-function parseGap(cls) {
-  const match = cls.match(/^gap-(\d+(?:\.\d+)?)$/);
-  if (match) {
-    const value = SPACING_SCALE[match[1]];
-    if (value !== void 0) {
-      return { gap: value };
-    }
-  }
-  return null;
 }
 
 // src/parser/typography.ts
@@ -742,99 +1037,142 @@ var FONT_SIZES = {
   "8xl": 96,
   "9xl": 128
 };
+var FONT_WEIGHT_MAP = {
+  "font-thin": { fontWeight: "100" },
+  "font-extralight": { fontWeight: "200" },
+  "font-light": { fontWeight: "300" },
+  "font-normal": { fontWeight: "400" },
+  "font-medium": { fontWeight: "500" },
+  "font-semibold": { fontWeight: "600" },
+  "font-bold": { fontWeight: "700" },
+  "font-extrabold": { fontWeight: "800" },
+  "font-black": { fontWeight: "900" }
+};
+var FONT_STYLE_MAP = {
+  italic: { fontStyle: "italic" },
+  "not-italic": { fontStyle: "normal" }
+};
+var TEXT_ALIGN_MAP = {
+  "text-left": { textAlign: "left" },
+  "text-center": { textAlign: "center" },
+  "text-right": { textAlign: "right" },
+  "text-justify": { textAlign: "justify" }
+};
+var TEXT_DECORATION_MAP = {
+  underline: { textDecorationLine: "underline" },
+  "line-through": { textDecorationLine: "line-through" },
+  "no-underline": { textDecorationLine: "none" }
+};
+var TEXT_TRANSFORM_MAP = {
+  uppercase: { textTransform: "uppercase" },
+  lowercase: { textTransform: "lowercase" },
+  capitalize: { textTransform: "capitalize" },
+  "normal-case": { textTransform: "none" }
+};
+var LINE_HEIGHT_MAP = {
+  "leading-none": { lineHeight: 16 },
+  "leading-tight": { lineHeight: 20 },
+  "leading-snug": { lineHeight: 22 },
+  "leading-normal": { lineHeight: 24 },
+  "leading-relaxed": { lineHeight: 28 },
+  "leading-loose": { lineHeight: 32 }
+};
+var TRACKING_MAP = {
+  "tracking-tighter": { letterSpacing: -0.8 },
+  "tracking-tight": { letterSpacing: -0.4 },
+  "tracking-normal": { letterSpacing: 0 },
+  "tracking-wide": { letterSpacing: 0.4 },
+  "tracking-wider": { letterSpacing: 0.8 },
+  "tracking-widest": { letterSpacing: 1.6 }
+};
+function parseArbitraryFontSize(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 font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryLineHeight(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 line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
 function parseTypography(cls) {
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
+    const arbitraryValue = parseArbitraryFontSize(sizeKey);
+    if (arbitraryValue !== null) {
+      return { fontSize: arbitraryValue };
+    }
     const fontSize = FONT_SIZES[sizeKey];
     if (fontSize !== void 0) {
       return { fontSize };
     }
   }
-  if (cls === "font-thin") {
-    return { fontWeight: "100" };
-  }
-  if (cls === "font-extralight") {
-    return { fontWeight: "200" };
-  }
-  if (cls === "font-light") {
-    return { fontWeight: "300" };
-  }
-  if (cls === "font-normal") {
-    return { fontWeight: "400" };
-  }
-  if (cls === "font-medium") {
-    return { fontWeight: "500" };
-  }
-  if (cls === "font-semibold") {
-    return { fontWeight: "600" };
-  }
-  if (cls === "font-bold") {
-    return { fontWeight: "700" };
-  }
-  if (cls === "font-extrabold") {
-    return { fontWeight: "800" };
-  }
-  if (cls === "font-black") {
-    return { fontWeight: "900" };
-  }
-  if (cls === "italic") {
-    return { fontStyle: "italic" };
-  }
-  if (cls === "not-italic") {
-    return { fontStyle: "normal" };
-  }
-  if (cls === "text-left") {
-    return { textAlign: "left" };
-  }
-  if (cls === "text-center") {
-    return { textAlign: "center" };
-  }
-  if (cls === "text-right") {
-    return { textAlign: "right" };
-  }
-  if (cls === "text-justify") {
-    return { textAlign: "justify" };
-  }
-  if (cls === "underline") {
-    return { textDecorationLine: "underline" };
-  }
-  if (cls === "line-through") {
-    return { textDecorationLine: "line-through" };
-  }
-  if (cls === "no-underline") {
-    return { textDecorationLine: "none" };
-  }
-  if (cls === "uppercase") {
-    return { textTransform: "uppercase" };
-  }
-  if (cls === "lowercase") {
-    return { textTransform: "lowercase" };
-  }
-  if (cls === "capitalize") {
-    return { textTransform: "capitalize" };
-  }
-  if (cls === "normal-case") {
-    return { textTransform: "none" };
-  }
-  if (cls === "leading-none") {
-    return { lineHeight: 16 };
+  if (cls.startsWith("leading-")) {
+    const heightKey = cls.substring(8);
+    const arbitraryValue = parseArbitraryLineHeight(heightKey);
+    if (arbitraryValue !== null) {
+      return { lineHeight: arbitraryValue };
+    }
   }
-  if (cls === "leading-tight") {
-    return { lineHeight: 20 };
+  return FONT_WEIGHT_MAP[cls] ?? FONT_STYLE_MAP[cls] ?? TEXT_ALIGN_MAP[cls] ?? TEXT_DECORATION_MAP[cls] ?? TEXT_TRANSFORM_MAP[cls] ?? LINE_HEIGHT_MAP[cls] ?? TRACKING_MAP[cls] ?? null;
+}
+
+// src/parser/modifiers.ts
+var SUPPORTED_MODIFIERS = ["active", "hover", "focus", "disabled"];
+function parseModifier(cls) {
+  const colonIndex = cls.indexOf(":");
+  if (colonIndex === -1) {
+    return null;
   }
-  if (cls === "leading-snug") {
-    return { lineHeight: 22 };
+  const potentialModifier = cls.slice(0, colonIndex);
+  const baseClass = cls.slice(colonIndex + 1);
+  if (!SUPPORTED_MODIFIERS.includes(potentialModifier)) {
+    return null;
   }
-  if (cls === "leading-normal") {
-    return { lineHeight: 24 };
+  if (baseClass.includes(":")) {
+    return null;
   }
-  if (cls === "leading-relaxed") {
-    return { lineHeight: 28 };
+  if (!baseClass) {
+    return null;
   }
-  if (cls === "leading-loose") {
-    return { lineHeight: 32 };
+  return {
+    modifier: potentialModifier,
+    baseClass
+  };
+}
+function splitModifierClasses(className) {
+  const classes = className.trim().split(/\s+/).filter(Boolean);
+  const baseClasses = [];
+  const modifierClasses = [];
+  for (const cls of classes) {
+    const parsed = parseModifier(cls);
+    if (parsed) {
+      modifierClasses.push(parsed);
+    } else {
+      baseClasses.push(cls);
+    }
   }
-  return null;
+  return { baseClasses, modifierClasses };
 }
 
 // src/parser/index.ts
@@ -850,11 +1188,13 @@ function parseClassName(className, customColors) {
 function parseClass(cls, customColors) {
   const parsers = [
     parseSpacing,
+    parseBorder,
     (cls2) => parseColor(cls2, customColors),
     parseLayout,
     parseTypography,
-    parseBorder,
-    parseSizing
+    parseSizing,
+    parseShadow,
+    parseAspectRatio
   ];
   for (const parser of parsers) {
     const result = parser(cls);
@@ -950,14 +1290,19 @@ function extractCustomColors(filename) {
 }
 
 // src/babel/index.ts
+var STYLES_IDENTIFIER = "_twStyles";
 var SUPPORTED_CLASS_ATTRIBUTES = [
   "className",
+  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
   "ListFooterComponentClassName"
 ];
 function getTargetStyleProp(attributeName) {
+  if (attributeName === "containerClassName") {
+    return "containerStyle";
+  }
   if (attributeName === "contentContainerClassName") {
     return "contentContainerStyle";
   }
@@ -972,6 +1317,33 @@ function getTargetStyleProp(attributeName) {
   }
   return "style";
 }
+function getComponentModifierSupport(jsxElement, t) {
+  if (!t.isJSXOpeningElement(jsxElement)) {
+    return null;
+  }
+  const name = jsxElement.name;
+  let componentName = null;
+  if (t.isJSXIdentifier(name)) {
+    componentName = name.name;
+  }
+  if (t.isJSXMemberExpression(name)) {
+    const property = name.property;
+    if (t.isJSXIdentifier(property)) {
+      componentName = property.name;
+    }
+  }
+  if (!componentName) {
+    return null;
+  }
+  switch (componentName) {
+    case "Pressable":
+      return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
+    case "TextInput":
+      return { component: "TextInput", supportedModifiers: ["focus", "disabled"] };
+    default:
+      return null;
+  }
+}
 function processDynamicExpression(expression, state, t) {
   if (t.isTemplateLiteral(expression)) {
     return processTemplateLiteral(expression, state, t);
@@ -997,7 +1369,7 @@ function processTemplateLiteral(node, state, t) {
         const styleKey = generateStyleKey2(cls);
         state.styleRegistry.set(styleKey, styleObject);
         staticParts.push(cls);
-        parts.push(t.memberExpression(t.identifier("styles"), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
       }
     }
     if (i < node.expressions.length) {
@@ -1052,7 +1424,7 @@ function processStringOrExpression(node, state, t) {
     const styleObject = parseClassName2(className, state.customColors);
     const styleKey = generateStyleKey2(className);
     state.styleRegistry.set(styleKey, styleObject);
-    return t.memberExpression(t.identifier("styles"), t.identifier(styleKey));
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
   }
   if (t.isConditionalExpression(node)) {
     const result = processConditionalExpression(node, state, t);
@@ -1068,6 +1440,77 @@ function processStringOrExpression(node, state, t) {
   }
   return null;
 }
+function processStaticClassNameWithModifiers(className, state, t) {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+  let baseStyleExpression = null;
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey2(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+    baseStyleExpression = t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(baseStyleKey));
+  }
+  const modifiersByType = /* @__PURE__ */ new Map();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+  const styleArrayElements = [];
+  if (baseStyleExpression) {
+    styleArrayElements.push(baseStyleExpression);
+  }
+  for (const [modifierType, modifiers] of modifiersByType) {
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    const conditionalExpression = t.logicalExpression(
+      "&&",
+      t.identifier(stateProperty),
+      t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(modifierStyleKey))
+    );
+    styleArrayElements.push(conditionalExpression);
+  }
+  if (styleArrayElements.length === 1) {
+    return styleArrayElements[0];
+  }
+  return t.arrayExpression(styleArrayElements);
+}
+function getStatePropertyForModifier(modifier) {
+  switch (modifier) {
+    case "active":
+      return "pressed";
+    case "hover":
+      return "hovered";
+    case "focus":
+      return "focused";
+    case "disabled":
+      return "disabled";
+    default:
+      return "pressed";
+  }
+}
+function createStyleFunction(styleExpression, modifierTypes, t) {
+  const paramProperties = [];
+  const usedStateProps = /* @__PURE__ */ new Set();
+  for (const modifierType of modifierTypes) {
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    if (!usedStateProps.has(stateProperty)) {
+      usedStateProps.add(stateProperty);
+      paramProperties.push(
+        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true)
+      );
+    }
+  }
+  const param = t.objectPattern(paramProperties);
+  return t.arrowFunctionExpression([param], styleExpression);
+}
 function reactNativeTailwindBabelPlugin({
   types: t
 }) {
@@ -1125,6 +1568,69 @@ function reactNativeTailwindBabelPlugin({
             return;
           }
           state.hasClassNames = true;
+          const { baseClasses, modifierClasses } = splitModifierClasses(className);
+          if (modifierClasses.length > 0) {
+            const jsxOpeningElement = path2.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+            if (componentSupport) {
+              const usedModifiers = Array.from(new Set(modifierClasses.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 = modifierClasses.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,
+                    t
+                  );
+                  const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
+                  const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+                  const parent2 = path2.parent;
+                  const styleAttribute2 = parent2.attributes.find(
+                    (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
+                  );
+                  if (styleAttribute2) {
+                    mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+                  } else {
+                    replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+                  }
+                  return;
+                }
+              } else {
+                const styleExpression = processStaticClassNameWithModifiers(className, state, t);
+                const modifierTypes = usedModifiers;
+                const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+                const parent2 = path2.parent;
+                const styleAttribute2 = parent2.attributes.find(
+                  (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
+                );
+                if (styleAttribute2) {
+                  mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+                } else {
+                  replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+                }
+                return;
+              }
+            } else {
+              if (process.env.NODE_ENV !== "production") {
+                const usedModifiers = Array.from(new Set(modifierClasses.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 styleObject = parseClassName2(className, state.customColors);
           const styleKey = generateStyleKey2(className);
           state.styleRegistry.set(styleKey, styleObject);
@@ -1187,14 +1693,14 @@ function addStyleSheetImport(path2, t) {
 function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, t) {
   const styleAttribute = t.jsxAttribute(
     t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier("styles"), t.identifier(styleKey)))
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)))
   );
   classNamePath.replaceWith(styleAttribute);
 }
 function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, t) {
   const existingStyle = styleAttribute.value.expression;
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier("styles"), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
     existingStyle
   ]);
   styleAttribute.value = t.jsxExpressionContainer(styleArray);
@@ -1218,6 +1724,31 @@ function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
   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 = styleAttribute.value.expression;
+  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 injectStyles(path2, styleRegistry, t) {
   const styleProperties = [];
   for (const [key, styleObject] of styleRegistry) {
@@ -1236,7 +1767,7 @@ function injectStyles(path2, styleRegistry, t) {
   }
   const styleSheet = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier("styles"),
+      t.identifier(STYLES_IDENTIFIER),
       t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
         t.objectExpression(styleProperties)
       ])