@mgcrea/react-native-tailwind 0.5.2 → 0.6.1

package/dist/babel/index.cjs

@@ -258,112 +258,310 @@ function parseBorderRadius(cls) {
   return null;
 }
 
-// src/parser/colors.ts
-var COLORS = {
-  // Gray
-  "gray-50": "#F9FAFB",
-  "gray-100": "#F3F4F6",
-  "gray-200": "#E5E7EB",
-  "gray-300": "#D1D5DB",
-  "gray-400": "#9CA3AF",
-  "gray-500": "#6B7280",
-  "gray-600": "#4B5563",
-  "gray-700": "#374151",
-  "gray-800": "#1F2937",
-  "gray-900": "#111827",
-  // Red
-  "red-50": "#FEF2F2",
-  "red-100": "#FEE2E2",
-  "red-200": "#FECACA",
-  "red-300": "#FCA5A5",
-  "red-400": "#F87171",
-  "red-500": "#EF4444",
-  "red-600": "#DC2626",
-  "red-700": "#B91C1C",
-  "red-800": "#991B1B",
-  "red-900": "#7F1D1D",
-  // Blue
-  "blue-50": "#EFF6FF",
-  "blue-100": "#DBEAFE",
-  "blue-200": "#BFDBFE",
-  "blue-300": "#93C5FD",
-  "blue-400": "#60A5FA",
-  "blue-500": "#3B82F6",
-  "blue-600": "#2563EB",
-  "blue-700": "#1D4ED8",
-  "blue-800": "#1E40AF",
-  "blue-900": "#1E3A8A",
-  // Green
-  "green-50": "#F0FDF4",
-  "green-100": "#DCFCE7",
-  "green-200": "#BBF7D0",
-  "green-300": "#86EFAC",
-  "green-400": "#4ADE80",
-  "green-500": "#22C55E",
-  "green-600": "#16A34A",
-  "green-700": "#15803D",
-  "green-800": "#166534",
-  "green-900": "#14532D",
-  // Yellow
-  "yellow-50": "#FEFCE8",
-  "yellow-100": "#FEF9C3",
-  "yellow-200": "#FEF08A",
-  "yellow-300": "#FDE047",
-  "yellow-400": "#FACC15",
-  "yellow-500": "#EAB308",
-  "yellow-600": "#CA8A04",
-  "yellow-700": "#A16207",
-  "yellow-800": "#854D0E",
-  "yellow-900": "#713F12",
-  // Purple
-  "purple-50": "#FAF5FF",
-  "purple-100": "#F3E8FF",
-  "purple-200": "#E9D5FF",
-  "purple-300": "#D8B4FE",
-  "purple-400": "#C084FC",
-  "purple-500": "#A855F7",
-  "purple-600": "#9333EA",
-  "purple-700": "#7E22CE",
-  "purple-800": "#6B21A8",
-  "purple-900": "#581C87",
-  // Pink
-  "pink-50": "#FDF2F8",
-  "pink-100": "#FCE7F3",
-  "pink-200": "#FBCFE8",
-  "pink-300": "#F9A8D4",
-  "pink-400": "#F472B6",
-  "pink-500": "#EC4899",
-  "pink-600": "#DB2777",
-  "pink-700": "#BE185D",
-  "pink-800": "#9D174D",
-  "pink-900": "#831843",
-  // Orange
-  "orange-50": "#FFF7ED",
-  "orange-100": "#FFEDD5",
-  "orange-200": "#FED7AA",
-  "orange-300": "#FDBA74",
-  "orange-400": "#FB923C",
-  "orange-500": "#F97316",
-  "orange-600": "#EA580C",
-  "orange-700": "#C2410C",
-  "orange-800": "#9A3412",
-  "orange-900": "#7C2D12",
-  // Indigo
-  "indigo-50": "#EEF2FF",
-  "indigo-100": "#E0E7FF",
-  "indigo-200": "#C7D2FE",
-  "indigo-300": "#A5B4FC",
-  "indigo-400": "#818CF8",
-  "indigo-500": "#6366F1",
-  "indigo-600": "#4F46E5",
-  "indigo-700": "#4338CA",
-  "indigo-800": "#3730A3",
-  "indigo-900": "#312E81",
-  // Basic colors
-  white: "#FFFFFF",
-  black: "#000000",
-  transparent: "transparent"
+// src/config/palettes.ts
+var TAILWIND_PALETTES = {
+  red: {
+    "50": "#fef2f2",
+    "100": "#ffe2e2",
+    "200": "#ffc9c9",
+    "300": "#ffa2a2",
+    "400": "#ff6467",
+    "500": "#fb2c36",
+    "600": "#e7000b",
+    "700": "#c10007",
+    "800": "#9f0712",
+    "900": "#82181a",
+    "950": "#460809"
+  },
+  orange: {
+    "50": "#fff7ed",
+    "100": "#ffedd4",
+    "200": "#ffd6a7",
+    "300": "#ffb86a",
+    "400": "#ff8904",
+    "500": "#ff6900",
+    "600": "#f54900",
+    "700": "#ca3500",
+    "800": "#9f2d00",
+    "900": "#7e2a0c",
+    "950": "#441306"
+  },
+  amber: {
+    "50": "#fffbeb",
+    "100": "#fef3c6",
+    "200": "#fee685",
+    "300": "#ffd230",
+    "400": "#ffb900",
+    "500": "#fe9a00",
+    "600": "#e17100",
+    "700": "#bb4d00",
+    "800": "#973c00",
+    "900": "#7b3306",
+    "950": "#461901"
+  },
+  yellow: {
+    "50": "#fefce8",
+    "100": "#fef9c2",
+    "200": "#fff085",
+    "300": "#ffdf20",
+    "400": "#fdc700",
+    "500": "#f0b100",
+    "600": "#d08700",
+    "700": "#a65f00",
+    "800": "#894b00",
+    "900": "#733e0a",
+    "950": "#432004"
+  },
+  lime: {
+    "50": "#f7fee7",
+    "100": "#ecfcca",
+    "200": "#d8f999",
+    "300": "#bbf451",
+    "400": "#9ae600",
+    "500": "#7ccf00",
+    "600": "#5ea500",
+    "700": "#497d00",
+    "800": "#3c6300",
+    "900": "#35530e",
+    "950": "#192e03"
+  },
+  green: {
+    "50": "#f0fdf4",
+    "100": "#dcfce7",
+    "200": "#b9f8cf",
+    "300": "#7bf1a8",
+    "400": "#05df72",
+    "500": "#00c950",
+    "600": "#00a63e",
+    "700": "#008236",
+    "800": "#016630",
+    "900": "#0d542b",
+    "950": "#032e15"
+  },
+  emerald: {
+    "50": "#ecfdf5",
+    "100": "#d0fae5",
+    "200": "#a4f4cf",
+    "300": "#5ee9b5",
+    "400": "#00d492",
+    "500": "#00bc7d",
+    "600": "#009966",
+    "700": "#007a55",
+    "800": "#006045",
+    "900": "#004f3b",
+    "950": "#002c22"
+  },
+  teal: {
+    "50": "#f0fdfa",
+    "100": "#cbfbf1",
+    "200": "#96f7e4",
+    "300": "#46ecd5",
+    "400": "#00d5be",
+    "500": "#00bba7",
+    "600": "#009689",
+    "700": "#00786f",
+    "800": "#005f5a",
+    "900": "#0b4f4a",
+    "950": "#022f2e"
+  },
+  cyan: {
+    "50": "#ecfeff",
+    "100": "#cefafe",
+    "200": "#a2f4fd",
+    "300": "#53eafd",
+    "400": "#00d3f2",
+    "500": "#00b8db",
+    "600": "#0092b8",
+    "700": "#007595",
+    "800": "#005f78",
+    "900": "#104e64",
+    "950": "#053345"
+  },
+  sky: {
+    "50": "#f0f9ff",
+    "100": "#dff2fe",
+    "200": "#b8e6fe",
+    "300": "#74d4ff",
+    "400": "#00bcff",
+    "500": "#00a6f4",
+    "600": "#0084d1",
+    "700": "#0069a8",
+    "800": "#00598a",
+    "900": "#024a70",
+    "950": "#052f4a"
+  },
+  blue: {
+    "50": "#eff6ff",
+    "100": "#dbeafe",
+    "200": "#bedbff",
+    "300": "#8ec5ff",
+    "400": "#51a2ff",
+    "500": "#2b7fff",
+    "600": "#155dfc",
+    "700": "#1447e6",
+    "800": "#193cb8",
+    "900": "#1c398e",
+    "950": "#162456"
+  },
+  indigo: {
+    "50": "#eef2ff",
+    "100": "#e0e7ff",
+    "200": "#c6d2ff",
+    "300": "#a3b3ff",
+    "400": "#7c86ff",
+    "500": "#615fff",
+    "600": "#4f39f6",
+    "700": "#432dd7",
+    "800": "#372aac",
+    "900": "#312c85",
+    "950": "#1e1a4d"
+  },
+  violet: {
+    "50": "#f5f3ff",
+    "100": "#ede9fe",
+    "200": "#ddd6ff",
+    "300": "#c4b4ff",
+    "400": "#a684ff",
+    "500": "#8e51ff",
+    "600": "#7f22fe",
+    "700": "#7008e7",
+    "800": "#5d0ec0",
+    "900": "#4d179a",
+    "950": "#2f0d68"
+  },
+  purple: {
+    "50": "#faf5ff",
+    "100": "#f3e8ff",
+    "200": "#e9d4ff",
+    "300": "#dab2ff",
+    "400": "#c27aff",
+    "500": "#ad46ff",
+    "600": "#9810fa",
+    "700": "#8200db",
+    "800": "#6e11b0",
+    "900": "#59168b",
+    "950": "#3c0366"
+  },
+  fuchsia: {
+    "50": "#fdf4ff",
+    "100": "#fae8ff",
+    "200": "#f6cfff",
+    "300": "#f4a8ff",
+    "400": "#ed6aff",
+    "500": "#e12afb",
+    "600": "#c800de",
+    "700": "#a800b7",
+    "800": "#8a0194",
+    "900": "#721378",
+    "950": "#4b004f"
+  },
+  pink: {
+    "50": "#fdf2f8",
+    "100": "#fce7f3",
+    "200": "#fccee8",
+    "300": "#fda5d5",
+    "400": "#fb64b6",
+    "500": "#f6339a",
+    "600": "#e60076",
+    "700": "#c6005c",
+    "800": "#a3004c",
+    "900": "#861043",
+    "950": "#510424"
+  },
+  rose: {
+    "50": "#fff1f2",
+    "100": "#ffe4e6",
+    "200": "#ffccd3",
+    "300": "#ffa1ad",
+    "400": "#ff637e",
+    "500": "#ff2056",
+    "600": "#ec003f",
+    "700": "#c70036",
+    "800": "#a50036",
+    "900": "#8b0836",
+    "950": "#4d0218"
+  },
+  slate: {
+    "50": "#f8fafc",
+    "100": "#f1f5f9",
+    "200": "#e2e8f0",
+    "300": "#cad5e2",
+    "400": "#90a1b9",
+    "500": "#62748e",
+    "600": "#45556c",
+    "700": "#314158",
+    "800": "#1d293d",
+    "900": "#0f172b",
+    "950": "#020618"
+  },
+  gray: {
+    "50": "#f9fafb",
+    "100": "#f3f4f6",
+    "200": "#e5e7eb",
+    "300": "#d1d5dc",
+    "400": "#99a1af",
+    "500": "#6a7282",
+    "600": "#4a5565",
+    "700": "#364153",
+    "800": "#1e2939",
+    "900": "#101828",
+    "950": "#030712"
+  },
+  zinc: {
+    "50": "#fafafa",
+    "100": "#f4f4f5",
+    "200": "#e4e4e7",
+    "300": "#d4d4d8",
+    "400": "#9f9fa9",
+    "500": "#71717b",
+    "600": "#52525c",
+    "700": "#3f3f46",
+    "800": "#27272a",
+    "900": "#18181b",
+    "950": "#09090b"
+  },
+  neutral: {
+    "50": "#fafafa",
+    "100": "#f5f5f5",
+    "200": "#e5e5e5",
+    "300": "#d4d4d4",
+    "400": "#a1a1a1",
+    "500": "#737373",
+    "600": "#525252",
+    "700": "#404040",
+    "800": "#262626",
+    "900": "#171717",
+    "950": "#0a0a0a"
+  },
+  stone: {
+    "50": "#fafaf9",
+    "100": "#f5f5f4",
+    "200": "#e7e5e4",
+    "300": "#d6d3d1",
+    "400": "#a6a09b",
+    "500": "#79716b",
+    "600": "#57534d",
+    "700": "#44403b",
+    "800": "#292524",
+    "900": "#1c1917",
+    "950": "#0c0a09"
+  }
 };
+
+// src/parser/colors.ts
+function flattenColors() {
+  const flat = {};
+  for (const [colorName, shades] of Object.entries(TAILWIND_PALETTES)) {
+    for (const [shade, hex] of Object.entries(shades)) {
+      flat[`${colorName}-${shade}`] = hex;
+    }
+  }
+  flat.white = "#FFFFFF";
+  flat.black = "#000000";
+  flat.transparent = "transparent";
+  return flat;
+}
+var COLORS = flattenColors();
 function applyOpacity(hex, opacity) {
   if (hex === "transparent") {
     return "transparent";
@@ -429,6 +627,9 @@ function parseColor(cls, customColors) {
   };
   if (cls.startsWith("bg-")) {
     const colorKey = cls.substring(3);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { backgroundColor: color };
@@ -436,6 +637,9 @@ function parseColor(cls, customColors) {
   }
   if (cls.startsWith("text-")) {
     const colorKey = cls.substring(5);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { color };
@@ -443,6 +647,9 @@ function parseColor(cls, customColors) {
   }
   if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
     const colorKey = cls.substring(7);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { borderColor: color };
@@ -552,6 +759,29 @@ var OVERFLOW_MAP = {
   "overflow-visible": { overflow: "visible" },
   "overflow-scroll": { overflow: "scroll" }
 };
+var OPACITY_MAP = {
+  "opacity-0": { opacity: 0 },
+  "opacity-5": { opacity: 0.05 },
+  "opacity-10": { opacity: 0.1 },
+  "opacity-15": { opacity: 0.15 },
+  "opacity-20": { opacity: 0.2 },
+  "opacity-25": { opacity: 0.25 },
+  "opacity-30": { opacity: 0.3 },
+  "opacity-35": { opacity: 0.35 },
+  "opacity-40": { opacity: 0.4 },
+  "opacity-45": { opacity: 0.45 },
+  "opacity-50": { opacity: 0.5 },
+  "opacity-55": { opacity: 0.55 },
+  "opacity-60": { opacity: 0.6 },
+  "opacity-65": { opacity: 0.65 },
+  "opacity-70": { opacity: 0.7 },
+  "opacity-75": { opacity: 0.75 },
+  "opacity-80": { opacity: 0.8 },
+  "opacity-85": { opacity: 0.85 },
+  "opacity-90": { opacity: 0.9 },
+  "opacity-95": { opacity: 0.95 },
+  "opacity-100": { opacity: 1 }
+};
 var Z_INDEX_SCALE = {
   0: 0,
   10: 10,
@@ -682,7 +912,7 @@ function parseLayout(cls) {
       return { top: insetValue, right: insetValue, bottom: insetValue, left: 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;
+  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] ?? OPACITY_MAP[cls] ?? null;
 }
 
 // src/parser/shadows.ts
@@ -1050,6 +1280,284 @@ function getPaddingStyle(dir, value) {
   }
 }
 
+// src/parser/transforms.ts
+var SCALE_MAP = {
+  0: 0,
+  50: 0.5,
+  75: 0.75,
+  90: 0.9,
+  95: 0.95,
+  100: 1,
+  105: 1.05,
+  110: 1.1,
+  125: 1.25,
+  150: 1.5,
+  200: 2
+};
+var ROTATE_MAP = {
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  6: 6,
+  12: 12,
+  45: 45,
+  90: 90,
+  180: 180
+};
+var SKEW_MAP = {
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  6: 6,
+  12: 12
+};
+var PERSPECTIVE_SCALE = {
+  0: 0,
+  100: 100,
+  200: 200,
+  300: 300,
+  400: 400,
+  500: 500,
+  600: 600,
+  700: 700,
+  800: 800,
+  900: 900,
+  1e3: 1e3
+};
+function parseArbitraryScale(value) {
+  const scaleMatch = value.match(/^\[(-?\d+(?:\.\d+)?)\]$/);
+  if (scaleMatch) {
+    return parseFloat(scaleMatch[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary scale value: ${value}. Only numbers are supported (e.g., [1.5], [0.75]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryRotation(value) {
+  const rotateMatch = value.match(/^\[(-?\d+(?:\.\d+)?)deg\]$/);
+  if (rotateMatch) {
+    return `${rotateMatch[1]}deg`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary rotation value: ${value}. Only deg unit is supported (e.g., [45deg], [-15deg]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryTranslation(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 translation unit: ${value}. Only px and % are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryPerspective(value) {
+  const perspectiveMatch = value.match(/^\[(-?\d+)\]$/);
+  if (perspectiveMatch) {
+    return parseInt(perspectiveMatch[1], 10);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary perspective value: ${value}. Only integers are supported (e.g., [1500]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseTransform(cls) {
+  if (cls.startsWith("origin-")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] transform-origin is not supported in React Native. Class "${cls}" will be ignored.`
+      );
+    }
+    return null;
+  }
+  if (cls.startsWith("scale-")) {
+    const scaleKey = cls.substring(6);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scale: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scale: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("scale-x-")) {
+    const scaleKey = cls.substring(8);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scaleX: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scaleX: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("scale-y-")) {
+    const scaleKey = cls.substring(8);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scaleY: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scaleY: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("rotate-") || cls.startsWith("-rotate-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotate: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotate: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-x-") || cls.startsWith("-rotate-x-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateX: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateX: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-y-") || cls.startsWith("-rotate-y-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateY: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateY: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-z-") || cls.startsWith("-rotate-z-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateZ: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateZ: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("translate-x-") || cls.startsWith("-translate-x-")) {
+    const isNegative = cls.startsWith("-");
+    const translateKey = isNegative ? cls.substring(13) : cls.substring(12);
+    const arbitraryTranslate = parseArbitraryTranslation(translateKey);
+    if (arbitraryTranslate !== null) {
+      const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
+      return { transform: [{ translateX: value }] };
+    }
+    const translateValue = SPACING_SCALE[translateKey];
+    if (translateValue !== void 0) {
+      const value = isNegative ? -translateValue : translateValue;
+      return { transform: [{ translateX: value }] };
+    }
+  }
+  if (cls.startsWith("translate-y-") || cls.startsWith("-translate-y-")) {
+    const isNegative = cls.startsWith("-");
+    const translateKey = isNegative ? cls.substring(13) : cls.substring(12);
+    const arbitraryTranslate = parseArbitraryTranslation(translateKey);
+    if (arbitraryTranslate !== null) {
+      const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
+      return { transform: [{ translateY: value }] };
+    }
+    const translateValue = SPACING_SCALE[translateKey];
+    if (translateValue !== void 0) {
+      const value = isNegative ? -translateValue : translateValue;
+      return { transform: [{ translateY: value }] };
+    }
+  }
+  if (cls.startsWith("skew-x-") || cls.startsWith("-skew-x-")) {
+    const isNegative = cls.startsWith("-");
+    const skewKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitrarySkew = parseArbitraryRotation(skewKey);
+    if (arbitrarySkew !== null) {
+      const degrees = isNegative ? `-${arbitrarySkew}` : arbitrarySkew;
+      return { transform: [{ skewX: degrees }] };
+    }
+    const skewValue = SKEW_MAP[skewKey];
+    if (skewValue !== void 0) {
+      const degrees = isNegative ? -skewValue : skewValue;
+      return { transform: [{ skewX: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("skew-y-") || cls.startsWith("-skew-y-")) {
+    const isNegative = cls.startsWith("-");
+    const skewKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitrarySkew = parseArbitraryRotation(skewKey);
+    if (arbitrarySkew !== null) {
+      const degrees = isNegative ? `-${arbitrarySkew}` : arbitrarySkew;
+      return { transform: [{ skewY: degrees }] };
+    }
+    const skewValue = SKEW_MAP[skewKey];
+    if (skewValue !== void 0) {
+      const degrees = isNegative ? -skewValue : skewValue;
+      return { transform: [{ skewY: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("perspective-")) {
+    const perspectiveKey = cls.substring(12);
+    const arbitraryPerspective = parseArbitraryPerspective(perspectiveKey);
+    if (arbitraryPerspective !== null) {
+      return { transform: [{ perspective: arbitraryPerspective }] };
+    }
+    const perspectiveValue = PERSPECTIVE_SCALE[perspectiveKey];
+    if (perspectiveValue !== void 0) {
+      return { transform: [{ perspective: perspectiveValue }] };
+    }
+  }
+  return null;
+}
+
 // src/parser/typography.ts
 var FONT_SIZES = {
   xs: 12,
@@ -1066,6 +1574,11 @@ var FONT_SIZES = {
   "8xl": 96,
   "9xl": 128
 };
+var FONT_FAMILY_MAP = {
+  "font-sans": { fontFamily: "System" },
+  "font-serif": { fontFamily: "serif" },
+  "font-mono": { fontFamily: "Courier" }
+};
 var FONT_WEIGHT_MAP = {
   "font-thin": { fontWeight: "100" },
   "font-extralight": { fontWeight: "200" },
@@ -1163,7 +1676,7 @@ function parseTypography(cls) {
       return { lineHeight: arbitraryValue };
     }
   }
-  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;
+  return FONT_FAMILY_MAP[cls] ?? 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
@@ -1223,7 +1736,8 @@ function parseClass(cls, customColors) {
     parseTypography,
     parseSizing,
     parseShadow,
-    parseAspectRatio
+    parseAspectRatio,
+    parseTransform
   ];
   for (const parser of parsers) {
     const result = parser(cls);
@@ -1287,14 +1801,14 @@ function loadTailwindConfig(configPath) {
     return null;
   }
 }
-function flattenColors(colors, prefix = "") {
+function flattenColors2(colors, prefix = "") {
   const result = {};
   for (const [key, value] of Object.entries(colors)) {
     const newKey = prefix ? `${prefix}-${key}` : key;
     if (typeof value === "string") {
       result[newKey] = value;
     } else if (typeof value === "object" && value !== null) {
-      Object.assign(result, flattenColors(value, newKey));
+      Object.assign(result, flattenColors2(value, newKey));
     }
   }
   return result;
@@ -1315,7 +1829,7 @@ function extractCustomColors(filename) {
     );
   }
   const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  return flattenColors(colors);
+  return flattenColors2(colors);
 }
 
 // src/babel/index.ts