@mgcrea/react-native-tailwind 0.6.0 → 0.6.1

package/src/parser/colors.ts

@@ -2,123 +2,32 @@
  * Color utilities (background, text, border colors)
  */
 
+import { TAILWIND_PALETTES } from "../config/palettes";
 import type { StyleObject } from "../types";
 
-// Tailwind color palette
-export const COLORS: Record<string, string> = {
-  // 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",
+/**
+ * Flatten TAILWIND_PALETTES nested structure into flat color map
+ * Converts { red: { "50": "#fff", "100": "#eee" } } to { "red-50": "#fff", "red-100": "#eee" }
+ */
+function flattenColors(): Record<string, string> {
+  const flat: Record<string, string> = {};
 
-  // 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",
+  for (const [colorName, shades] of Object.entries(TAILWIND_PALETTES)) {
+    for (const [shade, hex] of Object.entries(shades)) {
+      flat[`${colorName}-${shade}`] = hex;
+    }
+  }
 
-  // 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",
+  // Add basic colors
+  flat.white = "#FFFFFF";
+  flat.black = "#000000";
+  flat.transparent = "transparent";
 
-  // 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",
+  return flat;
+}
 
-  // Basic colors
-  white: "#FFFFFF",
-  black: "#000000",
-  transparent: "transparent",
-};
+// Tailwind color palette (flattened from config)
+export const COLORS: Record<string, string> = flattenColors();
 
 /**
  * Apply opacity to hex color by appending alpha channel

package/src/parser/layout.test.ts

@@ -199,6 +199,41 @@ describe("parseLayout - overflow utilities", () => {
   });
 });
 
+describe("parseLayout - opacity utilities", () => {
+  it("should parse opacity-0 (fully transparent)", () => {
+    expect(parseLayout("opacity-0")).toEqual({ opacity: 0 });
+  });
+
+  it("should parse opacity-50 (half transparent)", () => {
+    expect(parseLayout("opacity-50")).toEqual({ opacity: 0.5 });
+  });
+
+  it("should parse opacity-100 (fully opaque)", () => {
+    expect(parseLayout("opacity-100")).toEqual({ opacity: 1 });
+  });
+
+  it("should parse all opacity values", () => {
+    expect(parseLayout("opacity-5")).toEqual({ opacity: 0.05 });
+    expect(parseLayout("opacity-10")).toEqual({ opacity: 0.1 });
+    expect(parseLayout("opacity-15")).toEqual({ opacity: 0.15 });
+    expect(parseLayout("opacity-20")).toEqual({ opacity: 0.2 });
+    expect(parseLayout("opacity-25")).toEqual({ opacity: 0.25 });
+    expect(parseLayout("opacity-30")).toEqual({ opacity: 0.3 });
+    expect(parseLayout("opacity-35")).toEqual({ opacity: 0.35 });
+    expect(parseLayout("opacity-40")).toEqual({ opacity: 0.4 });
+    expect(parseLayout("opacity-45")).toEqual({ opacity: 0.45 });
+    expect(parseLayout("opacity-55")).toEqual({ opacity: 0.55 });
+    expect(parseLayout("opacity-60")).toEqual({ opacity: 0.6 });
+    expect(parseLayout("opacity-65")).toEqual({ opacity: 0.65 });
+    expect(parseLayout("opacity-70")).toEqual({ opacity: 0.7 });
+    expect(parseLayout("opacity-75")).toEqual({ opacity: 0.75 });
+    expect(parseLayout("opacity-80")).toEqual({ opacity: 0.8 });
+    expect(parseLayout("opacity-85")).toEqual({ opacity: 0.85 });
+    expect(parseLayout("opacity-90")).toEqual({ opacity: 0.9 });
+    expect(parseLayout("opacity-95")).toEqual({ opacity: 0.95 });
+  });
+});
+
 describe("parseLayout - edge cases", () => {
   it("should return null for invalid classes", () => {
     expect(parseLayout("invalid")).toBeNull();

package/src/parser/layout.ts

@@ -146,6 +146,31 @@ const OVERFLOW_MAP: Record<string, StyleObject> = {
   "overflow-scroll": { overflow: "scroll" },
 };
 
+// Opacity utilities
+const OPACITY_MAP: Record<string, StyleObject> = {
+  "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 },
+};
+
 // Z-index scale
 export const Z_INDEX_SCALE: Record<string, number> = {
   0: 0,
@@ -343,6 +368,7 @@ export function parseLayout(cls: string): StyleObject | null {
     ALIGN_CONTENT_MAP[cls] ??
     POSITION_MAP[cls] ??
     OVERFLOW_MAP[cls] ??
+    OPACITY_MAP[cls] ??
     null
   );
 }

package/src/parser/typography.test.ts

@@ -41,6 +41,14 @@ describe("parseTypography - font size", () => {
   });
 });
 
+describe("parseTypography - font family", () => {
+  it("should parse font family values", () => {
+    expect(parseTypography("font-sans")).toEqual({ fontFamily: "System" });
+    expect(parseTypography("font-serif")).toEqual({ fontFamily: "serif" });
+    expect(parseTypography("font-mono")).toEqual({ fontFamily: "Courier" });
+  });
+});
+
 describe("parseTypography - font weight", () => {
   it("should parse font weight values", () => {
     expect(parseTypography("font-thin")).toEqual({ fontWeight: "100" });
@@ -177,6 +185,8 @@ describe("parseTypography - comprehensive coverage", () => {
   it("should handle all typography categories independently", () => {
     // Font size
     expect(parseTypography("text-base")).toEqual({ fontSize: 16 });
+    // Font family
+    expect(parseTypography("font-mono")).toEqual({ fontFamily: "Courier" });
     // Font weight
     expect(parseTypography("font-bold")).toEqual({ fontWeight: "700" });
     // Font style

package/src/parser/typography.ts

@@ -31,6 +31,13 @@ export const LETTER_SPACING_SCALE: Record<string, number> = {
   widest: 1.6,
 };
 
+// Font family utilities
+const FONT_FAMILY_MAP: Record<string, StyleObject> = {
+  "font-sans": { fontFamily: "System" },
+  "font-serif": { fontFamily: "serif" },
+  "font-mono": { fontFamily: "Courier" },
+};
+
 // Font weight utilities
 const FONT_WEIGHT_MAP: Record<string, StyleObject> = {
   "font-thin": { fontWeight: "100" },
@@ -175,6 +182,7 @@ export function parseTypography(cls: string): StyleObject | null {
 
   // Try each lookup table in order
   return (
+    FONT_FAMILY_MAP[cls] ??
     FONT_WEIGHT_MAP[cls] ??
     FONT_STYLE_MAP[cls] ??
     TEXT_ALIGN_MAP[cls] ??