From 198174ca0c020a144304ddf3b79d79d9fd82e0ff Mon Sep 17 00:00:00 2001
From: jonsherrard <jon@devular.com>
Date: Wed, 21 Jan 2026 21:04:39 +0000
Subject: [PATCH 1/3] Custom variants plugin mapper

---
 src/index.ts                        |   3 +
 src/variants/createVariants.test.ts | 783 ++++++++++++++++++++++++++++
 src/variants/createVariants.ts      | 375 +++++++++++++
 src/variants/index.ts               |  23 +
 src/variants/types.ts               | 137 +++++
 5 files changed, 1321 insertions(+)
 create mode 100644 src/variants/createVariants.test.ts
 create mode 100644 src/variants/createVariants.ts
 create mode 100644 src/variants/index.ts
 create mode 100644 src/variants/types.ts

diff --git a/src/index.ts b/src/index.ts
index 515af19..e349c8f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,3 +44,6 @@ export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
 
 // Re-export enhanced components with modifier support
 export * from "./components";
+
+// Re-export variants API (Tailwind Variants / CVA compatible)
+export * from "./variants";
diff --git a/src/variants/createVariants.test.ts b/src/variants/createVariants.test.ts
new file mode 100644
index 0000000..e15b629
--- /dev/null
+++ b/src/variants/createVariants.test.ts
@@ -0,0 +1,783 @@
+import { describe, expect, it } from "vitest";
+import { createVariants, cv, cva, tv } from "./createVariants";
+
+describe("createVariants", () => {
+  describe("basic functionality", () => {
+    it("should return empty style for empty config", () => {
+      const variant = createVariants({});
+      const result = variant();
+      expect(result.className).toBe("");
+      expect(result.style).toEqual({});
+    });
+
+    it("should handle base classes", () => {
+      const variant = createVariants({
+        base: "m-4 p-2",
+      });
+      const result = variant();
+      expect(result.className).toBe("m-4 p-2");
+      expect(result.style).toEqual({
+        margin: 16,
+        padding: 8,
+      });
+    });
+
+    it("should handle base classes as array", () => {
+      const variant = createVariants({
+        base: ["m-4", "p-2"],
+      });
+      const result = variant();
+      expect(result.className).toBe("m-4 p-2");
+      expect(result.style).toEqual({
+        margin: 16,
+        padding: 8,
+      });
+    });
+  });
+
+  describe("variants", () => {
+    it("should apply variant classes", () => {
+      const button = createVariants({
+        base: "rounded-lg",
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+        },
+      });
+
+      const result = button({ color: "primary" });
+      expect(result.className).toBe("rounded-lg bg-blue-500");
+      expect(result.style).toHaveProperty("backgroundColor", "#2b7fff");
+    });
+
+    it("should handle multiple variants", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+          size: {
+            sm: "text-sm p-1",
+            lg: "text-lg p-4",
+          },
+        },
+      });
+
+      const result = button({ color: "primary", size: "lg" });
+      expect(result.className).toBe("bg-blue-500 text-lg p-4");
+      expect(result.style).toHaveProperty("backgroundColor", "#2b7fff");
+      expect(result.style).toHaveProperty("fontSize", 18);
+      expect(result.style).toHaveProperty("padding", 16);
+    });
+
+    it("should handle variant values as arrays", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: ["bg-blue-500", "text-white"],
+          },
+        },
+      });
+
+      const result = button({ color: "primary" });
+      expect(result.className).toBe("bg-blue-500 text-white");
+    });
+
+    it("should handle null variant values", () => {
+      const button = createVariants({
+        variants: {
+          disabled: {
+            true: "opacity-50",
+            false: null,
+          },
+        },
+      });
+
+      const enabledResult = button({ disabled: false });
+      expect(enabledResult.className).toBe("");
+
+      const disabledResult = button({ disabled: true });
+      expect(disabledResult.className).toBe("opacity-50");
+    });
+  });
+
+  describe("boolean variants", () => {
+    it("should handle boolean true variant", () => {
+      const button = createVariants({
+        variants: {
+          disabled: {
+            true: "opacity-50",
+          },
+        },
+      });
+
+      const result = button({ disabled: true });
+      expect(result.className).toBe("opacity-50");
+      expect(result.style).toHaveProperty("opacity", 0.5);
+    });
+
+    it("should handle boolean false variant", () => {
+      const button = createVariants({
+        variants: {
+          disabled: {
+            true: "opacity-50",
+            false: "opacity-100",
+          },
+        },
+      });
+
+      const result = button({ disabled: false });
+      expect(result.className).toBe("opacity-100");
+      expect(result.style).toHaveProperty("opacity", 1);
+    });
+
+    it("should not apply boolean variant when undefined", () => {
+      const button = createVariants({
+        variants: {
+          disabled: {
+            true: "opacity-50",
+          },
+        },
+      });
+
+      const result = button({});
+      expect(result.className).toBe("");
+    });
+  });
+
+  describe("default variants", () => {
+    it("should apply default variants when no props provided", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+          size: {
+            sm: "text-sm",
+            md: "text-base",
+          },
+        },
+        defaultVariants: {
+          color: "primary",
+          size: "md",
+        },
+      });
+
+      const result = button();
+      expect(result.className).toBe("bg-blue-500 text-base");
+    });
+
+    it("should override default variants with props", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+        },
+        defaultVariants: {
+          color: "primary",
+        },
+      });
+
+      const result = button({ color: "secondary" });
+      expect(result.className).toBe("bg-gray-500");
+    });
+
+    it("should handle boolean default variants", () => {
+      const button = createVariants({
+        variants: {
+          disabled: {
+            true: "opacity-50",
+            false: "opacity-100",
+          },
+        },
+        defaultVariants: {
+          disabled: false,
+        },
+      });
+
+      const result = button();
+      expect(result.className).toBe("opacity-100");
+    });
+  });
+
+  describe("compound variants", () => {
+    it("should apply compound variant when conditions match", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+          disabled: {
+            true: "opacity-50",
+          },
+        },
+        compoundVariants: [
+          {
+            color: "primary",
+            disabled: true,
+            class: "bg-blue-300",
+          },
+        ],
+      });
+
+      const result = button({ color: "primary", disabled: true });
+      expect(result.className).toBe("bg-blue-500 opacity-50 bg-blue-300");
+    });
+
+    it("should not apply compound variant when conditions do not match", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+          },
+          disabled: {
+            true: "opacity-50",
+          },
+        },
+        compoundVariants: [
+          {
+            color: "primary",
+            disabled: true,
+            class: "bg-blue-300",
+          },
+        ],
+      });
+
+      const result = button({ color: "secondary", disabled: true });
+      expect(result.className).toBe("bg-gray-500 opacity-50");
+      expect(result.className).not.toContain("bg-blue-300");
+    });
+
+    it("should support array conditions in compound variants", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+            secondary: "bg-gray-500",
+            danger: "bg-red-500",
+          },
+          size: {
+            sm: "text-sm",
+            md: "text-base",
+          },
+        },
+        compoundVariants: [
+          {
+            color: ["primary", "secondary"],
+            size: "sm",
+            class: "font-bold",
+          },
+        ],
+      });
+
+      const primaryResult = button({ color: "primary", size: "sm" });
+      expect(primaryResult.className).toContain("font-bold");
+
+      const secondaryResult = button({ color: "secondary", size: "sm" });
+      expect(secondaryResult.className).toContain("font-bold");
+
+      const dangerResult = button({ color: "danger", size: "sm" });
+      expect(dangerResult.className).not.toContain("font-bold");
+    });
+
+    it("should support className key as alias for class", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+          },
+        },
+        compoundVariants: [
+          {
+            color: "primary",
+            className: "font-semibold",
+          },
+        ],
+      });
+
+      const result = button({ color: "primary" });
+      expect(result.className).toContain("font-semibold");
+    });
+
+    it("should apply compound variants with default variants", () => {
+      const button = createVariants({
+        variants: {
+          color: {
+            primary: "bg-blue-500",
+          },
+          disabled: {
+            true: "opacity-50",
+            false: "",
+          },
+        },
+        compoundVariants: [
+          {
+            color: "primary",
+            disabled: false,
+            class: "hover:bg-blue-600",
+          },
+        ],
+        defaultVariants: {
+          color: "primary",
+          disabled: false,
+        },
+      });
+
+      const result = button();
+      expect(result.className).toContain("hover:bg-blue-600");
+    });
+  });
+
+  describe("class/className override", () => {
+    it("should allow class override", () => {
+      const button = createVariants({
+        base: "bg-blue-500",
+      });
+
+      const result = button({ class: "bg-red-500" });
+      expect(result.className).toBe("bg-blue-500 bg-red-500");
+    });
+
+    it("should allow className override", () => {
+      const button = createVariants({
+        base: "bg-blue-500",
+      });
+
+      const result = button({ className: "bg-red-500" });
+      expect(result.className).toBe("bg-blue-500 bg-red-500");
+    });
+  });
+
+  describe("class deduplication", () => {
+    it("should deduplicate class names", () => {
+      const button = createVariants({
+        base: "m-4 p-2",
+        variants: {
+          size: {
+            lg: "m-4 p-4",
+          },
+        },
+      });
+
+      const result = button({ size: "lg" });
+      // m-4 should only appear once
+      const m4Count = result.className.split(" ").filter((c) => c === "m-4").length;
+      expect(m4Count).toBe(1);
+    });
+  });
+});
+
+describe("slots", () => {
+  it("should create slot functions", () => {
+    const card = createVariants({
+      slots: {
+        base: "rounded-lg",
+        header: "p-4",
+        body: "p-4",
+      },
+    });
+
+    const result = card();
+    expect(typeof result.base).toBe("function");
+    expect(typeof result.header).toBe("function");
+    expect(typeof result.body).toBe("function");
+  });
+
+  it("should return correct classes for each slot", () => {
+    const card = createVariants({
+      slots: {
+        base: "rounded-lg shadow-md",
+        header: "p-4 border-b",
+        body: "p-4",
+      },
+    });
+
+    const slots = card();
+    expect(slots.base().className).toBe("rounded-lg shadow-md");
+    expect(slots.header().className).toBe("p-4 border-b");
+    expect(slots.body().className).toBe("p-4");
+  });
+
+  it("should parse slot classes to styles", () => {
+    const card = createVariants({
+      slots: {
+        base: "m-4",
+        content: "p-2",
+      },
+    });
+
+    const slots = card();
+    expect(slots.base().style).toEqual({ margin: 16 });
+    expect(slots.content().style).toEqual({ padding: 8 });
+  });
+
+  it("should apply compound variants to specific slots", () => {
+    const card = createVariants({
+      slots: {
+        base: "rounded-lg",
+        header: "p-4",
+      },
+      variants: {
+        variant: {
+          elevated: "",
+          outlined: "",
+        },
+      },
+      compoundVariants: [
+        {
+          variant: "elevated",
+          class: {
+            base: "shadow-lg",
+          },
+        },
+        {
+          variant: "outlined",
+          class: {
+            base: "border",
+            header: "border-b",
+          },
+        },
+      ],
+    });
+
+    const elevatedSlots = card({ variant: "elevated" });
+    expect(elevatedSlots.base().className).toContain("shadow-lg");
+    expect(elevatedSlots.header().className).not.toContain("shadow-lg");
+
+    const outlinedSlots = card({ variant: "outlined" });
+    expect(outlinedSlots.base().className).toContain("border");
+    expect(outlinedSlots.header().className).toContain("border-b");
+  });
+});
+
+describe("tv alias", () => {
+  it("should be an alias for createVariants", () => {
+    expect(tv).toBe(createVariants);
+  });
+
+  it("should work the same as createVariants", () => {
+    const button = tv({
+      base: "font-semibold",
+      variants: {
+        color: {
+          primary: "bg-blue-500",
+        },
+      },
+    });
+
+    const result = button({ color: "primary" });
+    expect(result.className).toBe("font-semibold bg-blue-500");
+  });
+});
+
+describe("cva", () => {
+  it("should accept base as first argument", () => {
+    const button = cva("font-semibold rounded-lg");
+    const result = button();
+    expect(result.className).toBe("font-semibold rounded-lg");
+  });
+
+  it("should accept base as array", () => {
+    const button = cva(["font-semibold", "rounded-lg"]);
+    const result = button();
+    expect(result.className).toBe("font-semibold rounded-lg");
+  });
+
+  it("should work with variants", () => {
+    const button = cva("font-semibold", {
+      variants: {
+        intent: {
+          primary: "bg-blue-500 text-white",
+          secondary: "bg-gray-200 text-gray-800",
+        },
+        size: {
+          small: "text-sm p-1",
+          medium: "text-base p-2",
+        },
+      },
+    });
+
+    const result = button({ intent: "primary", size: "small" });
+    expect(result.className).toBe("font-semibold bg-blue-500 text-white text-sm p-1");
+  });
+
+  it("should work with compound variants", () => {
+    const button = cva("font-semibold", {
+      variants: {
+        intent: {
+          primary: "bg-blue-500",
+        },
+        disabled: {
+          true: "opacity-50",
+          false: null,
+        },
+      },
+      compoundVariants: [
+        {
+          intent: "primary",
+          disabled: false,
+          class: "hover:bg-blue-600",
+        },
+      ],
+    });
+
+    const result = button({ intent: "primary", disabled: false });
+    expect(result.className).toContain("hover:bg-blue-600");
+  });
+
+  it("should work with default variants", () => {
+    const button = cva("font-semibold", {
+      variants: {
+        intent: {
+          primary: "bg-blue-500",
+          secondary: "bg-gray-500",
+        },
+      },
+      defaultVariants: {
+        intent: "primary",
+      },
+    });
+
+    const result = button();
+    expect(result.className).toBe("font-semibold bg-blue-500");
+  });
+});
+
+describe("cv alias", () => {
+  it("should be an alias for cva", () => {
+    expect(cv).toBe(cva);
+  });
+});
+
+describe("custom theme support", () => {
+  it("should parse custom colors from theme", () => {
+    const customTheme = {
+      colors: {
+        brand: "#ff6b6b",
+      },
+    };
+
+    const button = createVariants(
+      {
+        variants: {
+          color: {
+            brand: "bg-brand",
+          },
+        },
+      },
+      customTheme,
+    );
+
+    const result = button({ color: "brand" });
+    expect(result.className).toBe("bg-brand");
+    expect(result.style).toHaveProperty("backgroundColor", "#ff6b6b");
+  });
+
+  it("should work with cva and custom theme", () => {
+    const customTheme = {
+      colors: {
+        primary: "#007aff",
+      },
+    };
+
+    const button = cva(
+      "rounded-lg",
+      {
+        variants: {
+          color: {
+            primary: "bg-primary",
+          },
+        },
+      },
+      customTheme,
+    );
+
+    const result = button({ color: "primary" });
+    expect(result.style).toHaveProperty("backgroundColor", "#007aff");
+  });
+});
+
+describe("edge cases", () => {
+  it("should handle empty props", () => {
+    const button = createVariants({
+      base: "m-4",
+    });
+
+    const result = button({});
+    expect(result.className).toBe("m-4");
+  });
+
+  it("should handle undefined variant values", () => {
+    const button = createVariants({
+      variants: {
+        color: {
+          primary: "bg-blue-500",
+        },
+      },
+    });
+
+    const result = button({ color: undefined });
+    expect(result.className).toBe("");
+  });
+
+  it("should handle variant option that does not exist", () => {
+    const button = createVariants({
+      variants: {
+        color: {
+          primary: "bg-blue-500",
+        },
+      },
+    });
+
+    // @ts-expect-error - Testing runtime behavior with invalid option
+    const result = button({ color: "nonexistent" });
+    expect(result.className).toBe("");
+  });
+
+  it("should handle whitespace in class strings", () => {
+    const button = createVariants({
+      base: "  m-4   p-2  ",
+    });
+
+    const result = button();
+    expect(result.className).toBe("m-4 p-2");
+  });
+
+  it("should handle multiple compound variants matching", () => {
+    const button = createVariants({
+      variants: {
+        color: {
+          primary: "bg-blue-500",
+        },
+        size: {
+          lg: "text-lg",
+        },
+        disabled: {
+          true: "opacity-50",
+        },
+      },
+      compoundVariants: [
+        { color: "primary", size: "lg", class: "font-bold" },
+        { color: "primary", disabled: true, class: "bg-blue-300" },
+      ],
+    });
+
+    const result = button({ color: "primary", size: "lg", disabled: true });
+    expect(result.className).toContain("font-bold");
+    expect(result.className).toContain("bg-blue-300");
+  });
+});
+
+describe("real-world examples", () => {
+  it("should handle a complete button component", () => {
+    const button = createVariants({
+      base: "font-semibold rounded-lg",
+      variants: {
+        intent: {
+          primary: "bg-blue-500 text-white",
+          secondary: "bg-white text-gray-800 border border-gray-200",
+          danger: "bg-red-500 text-white",
+        },
+        size: {
+          sm: "text-sm px-3 py-1",
+          md: "text-base px-4 py-2",
+          lg: "text-lg px-6 py-3",
+        },
+        fullWidth: {
+          true: "w-full",
+        },
+        disabled: {
+          true: "opacity-50",
+        },
+      },
+      compoundVariants: [
+        {
+          intent: "primary",
+          disabled: true,
+          class: "bg-blue-300",
+        },
+        {
+          intent: "danger",
+          disabled: true,
+          class: "bg-red-300",
+        },
+      ],
+      defaultVariants: {
+        intent: "primary",
+        size: "md",
+      },
+    });
+
+    // Default button
+    const defaultResult = button();
+    expect(defaultResult.className).toContain("bg-blue-500");
+    expect(defaultResult.className).toContain("text-base");
+
+    // Large danger button
+    const dangerResult = button({ intent: "danger", size: "lg" });
+    expect(dangerResult.className).toContain("bg-red-500");
+    expect(dangerResult.className).toContain("text-lg");
+
+    // Disabled primary button
+    const disabledResult = button({ disabled: true });
+    expect(disabledResult.className).toContain("opacity-50");
+    expect(disabledResult.className).toContain("bg-blue-300");
+  });
+
+  it("should handle a card component with slots", () => {
+    const card = createVariants({
+      slots: {
+        base: "rounded-xl overflow-hidden",
+        header: "p-4",
+        body: "p-4",
+        footer: "p-4",
+      },
+      variants: {
+        variant: {
+          elevated: "",
+          outlined: "",
+          filled: "",
+        },
+      },
+      compoundVariants: [
+        {
+          variant: "elevated",
+          class: {
+            base: "shadow-lg bg-white",
+          },
+        },
+        {
+          variant: "outlined",
+          class: {
+            base: "border border-gray-200 bg-white",
+          },
+        },
+        {
+          variant: "filled",
+          class: {
+            base: "bg-gray-100",
+          },
+        },
+      ],
+      defaultVariants: {
+        variant: "elevated",
+      },
+    });
+
+    const slots = card();
+    expect(slots.base().className).toContain("shadow-lg");
+    expect(slots.header().className).toBe("p-4");
+
+    const outlinedSlots = card({ variant: "outlined" });
+    expect(outlinedSlots.base().className).toContain("border");
+    expect(outlinedSlots.base().className).not.toContain("shadow-lg");
+  });
+});
diff --git a/src/variants/createVariants.ts b/src/variants/createVariants.ts
new file mode 100644
index 0000000..9c05cab
--- /dev/null
+++ b/src/variants/createVariants.ts
@@ -0,0 +1,375 @@
+/**
+ * Core variant creation function
+ * Provides a unified API compatible with both Tailwind Variants (tv) and CVA (cva)
+ */
+
+import type { CustomTheme } from "../parser";
+import { parseClassName } from "../parser";
+import type {
+  CompoundVariant,
+  CvaConfig,
+  DefaultVariants,
+  SlotCompoundVariant,
+  SlotsDefinition,
+  SlotVariantResult,
+  VariantFunctionProps,
+  VariantResult,
+  VariantsConfig,
+  VariantsConfigWithSlots,
+  VariantsDefinition,
+  VariantValue,
+} from "./types";
+
+/**
+ * Normalize a variant value to a string
+ */
+function normalizeValue(value: VariantValue): string {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  if (Array.isArray(value)) {
+    return value.filter(Boolean).join(" ");
+  }
+  return value;
+}
+
+/**
+ * Merge class strings, deduplicating and preserving order
+ */
+function mergeClasses(...classes: Array<string | undefined | null | false>): string {
+  const result: string[] = [];
+  const seen = new Set<string>();
+
+  for (const classStr of classes) {
+    if (!classStr) continue;
+    for (const cls of classStr.split(/\s+/)) {
+      if (cls && !seen.has(cls)) {
+        seen.add(cls);
+        result.push(cls);
+      }
+    }
+  }
+
+  return result.join(" ");
+}
+
+/**
+ * Check if a compound variant condition matches
+ */
+function matchesCompoundCondition<V extends VariantsDefinition>(
+  compound: CompoundVariant<V> | SlotCompoundVariant<SlotsDefinition, V>,
+  props: VariantFunctionProps<V>,
+  defaultVariants?: DefaultVariants<V>,
+): boolean {
+  for (const key of Object.keys(compound)) {
+    // Skip class/className keys
+    if (key === "class" || key === "className") continue;
+
+    const conditionValue = compound[key as keyof V];
+    const propValue = props[key as keyof V] ?? defaultVariants?.[key as keyof V];
+
+    // Handle array conditions (OR logic)
+    if (Array.isArray(conditionValue)) {
+      if (!conditionValue.includes(propValue as never)) {
+        return false;
+      }
+    } else {
+      // Direct comparison
+      if (conditionValue !== propValue) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Get classes for a specific variant selection
+ */
+function getVariantClasses<V extends VariantsDefinition>(
+  variants: V | undefined,
+  props: VariantFunctionProps<V>,
+  defaultVariants?: DefaultVariants<V>,
+): string {
+  if (!variants) return "";
+
+  const classes: string[] = [];
+
+  for (const [variantName, variantOptions] of Object.entries(variants)) {
+    // Get the selected option, falling back to default
+    const selectedOption = props[variantName as keyof V] ?? defaultVariants?.[variantName as keyof V];
+
+    if (selectedOption === undefined || selectedOption === null) continue;
+
+    // Handle boolean variants
+    const optionKey =
+      selectedOption === true ? "true" : selectedOption === false ? "false" : String(selectedOption);
+
+    const optionValue = variantOptions[optionKey];
+    if (optionValue !== undefined) {
+      classes.push(normalizeValue(optionValue));
+    }
+  }
+
+  return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Get classes from compound variants
+ */
+function getCompoundClasses<V extends VariantsDefinition>(
+  compoundVariants: Array<CompoundVariant<V>> | undefined,
+  props: VariantFunctionProps<V>,
+  defaultVariants?: DefaultVariants<V>,
+): string {
+  if (!compoundVariants) return "";
+
+  const classes: string[] = [];
+
+  for (const compound of compoundVariants) {
+    if (matchesCompoundCondition(compound, props, defaultVariants)) {
+      const compoundClass = compound.class ?? compound.className;
+      if (compoundClass) {
+        classes.push(normalizeValue(compoundClass));
+      }
+    }
+  }
+
+  return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Type guard to check if config has slots
+ */
+function hasSlots<S extends SlotsDefinition, V extends VariantsDefinition>(
+  config: VariantsConfig<V> | VariantsConfigWithSlots<S, V>,
+): config is VariantsConfigWithSlots<S, V> {
+  return "slots" in config && config.slots !== undefined;
+}
+
+/**
+ * Create a variant function without slots
+ */
+function createVariantFunction<V extends VariantsDefinition>(
+  config: VariantsConfig<V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => VariantResult {
+  const { base, variants, compoundVariants, defaultVariants } = config;
+
+  return (props: VariantFunctionProps<V> = {} as VariantFunctionProps<V>): VariantResult => {
+    // Compute class name
+    const baseClass = normalizeValue(base ?? null);
+    const variantClasses = getVariantClasses(variants, props, defaultVariants);
+    const compoundClasses = getCompoundClasses(compoundVariants, props, defaultVariants);
+    const overrideClass = props.class ?? props.className ?? "";
+
+    const className = mergeClasses(baseClass, variantClasses, compoundClasses, overrideClass);
+
+    // Parse to style object
+    const style = className ? parseClassName(className, customTheme) : {};
+
+    return { className, style };
+  };
+}
+
+/**
+ * Create a variant function with slots
+ */
+function createSlotVariantFunction<S extends SlotsDefinition, V extends VariantsDefinition>(
+  config: VariantsConfigWithSlots<S, V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => SlotVariantResult<S> {
+  const { slots, variants: _variants, compoundVariants, defaultVariants } = config;
+
+  return (props: VariantFunctionProps<V> = {} as VariantFunctionProps<V>): SlotVariantResult<S> => {
+    const result = {} as SlotVariantResult<S>;
+
+    for (const slotName of Object.keys(slots) as Array<keyof S>) {
+      result[slotName] = () => {
+        // Base slot classes
+        const baseClass = slots[slotName] ?? "";
+
+        // Collect variant classes for this slot
+        const variantClasses: string[] = [];
+
+        // Note: For slot variants, the variants structure would need to be:
+        // variants: { size: { sm: { base: '...', avatar: '...' } } }
+        // But that's a different structure than standard variants.
+        // We'll support both standard variants (applied to all slots) and
+        // check for slot-specific variant values
+
+        // Get standard variant classes (applied to all slots if not slot-specific)
+        // This is the simpler case where variants apply globally
+        // For slot-specific variants, users should use compoundVariants
+
+        // Compound variant slot classes
+        const compoundClasses: string[] = [];
+        if (compoundVariants) {
+          for (const compound of compoundVariants) {
+            if (matchesCompoundCondition(compound, props, defaultVariants)) {
+              const slotClass = (compound.class ?? compound.className) as
+                | { [K in keyof S]?: VariantValue }
+                | undefined;
+              if (slotClass && typeof slotClass === "object" && slotName in slotClass) {
+                const slotValue = slotClass[slotName];
+                if (slotValue) {
+                  compoundClasses.push(normalizeValue(slotValue));
+                }
+              }
+            }
+          }
+        }
+
+        const className = mergeClasses(baseClass, ...variantClasses, ...compoundClasses);
+        const style = className ? parseClassName(className, customTheme) : {};
+
+        return { className, style };
+      };
+    }
+
+    return result;
+  };
+}
+
+/**
+ * Create a variants function (Tailwind Variants style)
+ *
+ * Supports:
+ * - Base classes
+ * - Variants with multiple options
+ * - Boolean variants
+ * - Compound variants (conditional styles based on multiple variant combinations)
+ * - Default variants
+ * - Slots (multi-part components)
+ *
+ * @example
+ * ```typescript
+ * // Simple variant (no slots)
+ * const button = createVariants({
+ *   base: 'font-semibold rounded-lg',
+ *   variants: {
+ *     color: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-200 text-gray-800',
+ *     },
+ *     size: {
+ *       sm: 'text-sm px-3 py-1',
+ *       md: 'text-base px-4 py-2',
+ *       lg: 'text-lg px-6 py-3',
+ *     },
+ *     disabled: {
+ *       true: 'opacity-50 cursor-not-allowed',
+ *     },
+ *   },
+ *   compoundVariants: [
+ *     { color: 'primary', disabled: true, class: 'bg-blue-300' },
+ *   ],
+ *   defaultVariants: {
+ *     color: 'primary',
+ *     size: 'md',
+ *   },
+ * });
+ *
+ * // Usage
+ * const { className, style } = button({ color: 'secondary', size: 'lg' });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With slots
+ * const card = createVariants({
+ *   slots: {
+ *     base: 'rounded-xl shadow-md',
+ *     header: 'p-4 border-b',
+ *     body: 'p-4',
+ *     footer: 'p-4 border-t',
+ *   },
+ *   variants: {
+ *     variant: {
+ *       elevated: {},
+ *       outlined: {},
+ *     },
+ *   },
+ *   compoundVariants: [
+ *     { variant: 'elevated', class: { base: 'shadow-lg' } },
+ *     { variant: 'outlined', class: { base: 'border border-gray-200 shadow-none' } },
+ *   ],
+ * });
+ *
+ * // Usage
+ * const slots = card({ variant: 'elevated' });
+ * const { style: baseStyle } = slots.base();
+ * const { style: headerStyle } = slots.header();
+ * ```
+ */
+export function createVariants<S extends SlotsDefinition, V extends VariantsDefinition>(
+  config: VariantsConfigWithSlots<S, V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => SlotVariantResult<S>;
+
+export function createVariants<V extends VariantsDefinition>(
+  config: VariantsConfig<V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => VariantResult;
+
+export function createVariants<S extends SlotsDefinition, V extends VariantsDefinition>(
+  config: VariantsConfig<V> | VariantsConfigWithSlots<S, V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => VariantResult | SlotVariantResult<S> {
+  if (hasSlots<S, V>(config)) {
+    return createSlotVariantFunction(config, customTheme);
+  }
+  return createVariantFunction(config, customTheme);
+}
+
+/**
+ * Alias for createVariants - Tailwind Variants style
+ */
+export const tv = createVariants;
+
+/**
+ * CVA-style variant creation (base as first argument)
+ *
+ * @example
+ * ```typescript
+ * const button = cva('font-semibold rounded-lg', {
+ *   variants: {
+ *     intent: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-200 text-gray-800',
+ *     },
+ *     size: {
+ *       sm: 'text-sm px-3 py-1',
+ *       md: 'text-base px-4 py-2',
+ *     },
+ *   },
+ *   defaultVariants: {
+ *     intent: 'primary',
+ *     size: 'md',
+ *   },
+ * });
+ *
+ * // Usage
+ * const { className, style } = button({ intent: 'secondary' });
+ * ```
+ */
+export function cva<V extends VariantsDefinition>(
+  base: string | string[],
+  config?: CvaConfig<V>,
+  customTheme?: CustomTheme,
+): (props?: VariantFunctionProps<V>) => VariantResult {
+  return createVariants(
+    {
+      base,
+      ...config,
+    },
+    customTheme,
+  );
+}
+
+/**
+ * Alias for cva - Class Variance Authority style
+ * Also compatible with Tailwind Variants cv function
+ */
+export const cv = cva;
diff --git a/src/variants/index.ts b/src/variants/index.ts
new file mode 100644
index 0000000..fd6d746
--- /dev/null
+++ b/src/variants/index.ts
@@ -0,0 +1,23 @@
+/**
+ * Variants module - unified API for Tailwind Variants and CVA
+ */
+
+export { createVariants, cv, cva, tv } from "./createVariants";
+export type {
+  CompoundVariant,
+  CvaConfig,
+  DefaultVariants,
+  ExtractVariantProps,
+  SlotCompoundVariant,
+  SlotVariantResult,
+  SlotVariants,
+  SlotsDefinition,
+  VariantFunctionProps,
+  VariantOptions,
+  VariantProps,
+  VariantResult,
+  VariantValue,
+  VariantsConfig,
+  VariantsConfigWithSlots,
+  VariantsDefinition,
+} from "./types";
diff --git a/src/variants/types.ts b/src/variants/types.ts
new file mode 100644
index 0000000..c0ae383
--- /dev/null
+++ b/src/variants/types.ts
@@ -0,0 +1,137 @@
+/**
+ * Type definitions for the variants system
+ * Supports both Tailwind Variants (tv) and CVA (cva) style APIs
+ */
+
+import type { StyleObject } from "../types/core";
+
+/**
+ * A single variant option value - can be a class string, array of classes, or null
+ */
+export type VariantValue = string | string[] | null;
+
+/**
+ * Variant options - maps option names to their class values
+ * e.g., { small: 'text-sm', medium: 'text-base', large: 'text-lg' }
+ */
+export type VariantOptions = Record<string, VariantValue>;
+
+/**
+ * Variants definition - maps variant names to their options
+ * e.g., { size: { small: 'text-sm', medium: 'text-base' }, color: { primary: 'bg-blue-500' } }
+ */
+export type VariantsDefinition = Record<string, VariantOptions>;
+
+/**
+ * Extract variant props from a variants definition
+ */
+export type VariantProps<T extends VariantsDefinition> = {
+  [K in keyof T]?: keyof T[K] | boolean;
+};
+
+/**
+ * Compound variant condition - applies classes when multiple variant conditions match
+ */
+export type CompoundVariant<T extends VariantsDefinition> = {
+  [K in keyof T]?: keyof T[K] | Array<keyof T[K]> | boolean;
+} & {
+  class?: VariantValue;
+  className?: VariantValue;
+};
+
+/**
+ * Default variants - fallback values when no variant is specified
+ */
+export type DefaultVariants<T extends VariantsDefinition> = {
+  [K in keyof T]?: keyof T[K] | boolean;
+};
+
+/**
+ * Slots definition - maps slot names to their base classes
+ * e.g., { base: 'flex', avatar: 'w-12 h-12', content: 'flex-1' }
+ */
+export type SlotsDefinition = Record<string, string>;
+
+/**
+ * Slot variants - applies variant-specific classes to slots
+ */
+export type SlotVariants<S extends SlotsDefinition, V extends VariantsDefinition> = {
+  [K in keyof V]?: {
+    [O in keyof V[K]]?: {
+      [Slot in keyof S]?: VariantValue;
+    };
+  };
+};
+
+/**
+ * Slot compound variants
+ */
+export type SlotCompoundVariant<S extends SlotsDefinition, V extends VariantsDefinition> = {
+  [K in keyof V]?: keyof V[K] | Array<keyof V[K]> | boolean;
+} & {
+  class?: {
+    [Slot in keyof S]?: VariantValue;
+  };
+  className?: {
+    [Slot in keyof S]?: VariantValue;
+  };
+};
+
+/**
+ * Configuration for createVariants (without slots)
+ */
+export type VariantsConfig<V extends VariantsDefinition> = {
+  base?: string | string[];
+  variants?: V;
+  compoundVariants?: Array<CompoundVariant<V>>;
+  defaultVariants?: DefaultVariants<V>;
+};
+
+/**
+ * Configuration for createVariants (with slots)
+ */
+export type VariantsConfigWithSlots<S extends SlotsDefinition, V extends VariantsDefinition> = {
+  slots: S;
+  variants?: V;
+  compoundVariants?: Array<SlotCompoundVariant<S, V>>;
+  defaultVariants?: DefaultVariants<V>;
+};
+
+/**
+ * Props passed to the generated variant function
+ */
+export type VariantFunctionProps<V extends VariantsDefinition> = VariantProps<V> & {
+  class?: string;
+  className?: string;
+};
+
+/**
+ * Return type for variant function (without slots)
+ */
+export type VariantResult = {
+  className: string;
+  style: StyleObject;
+};
+
+/**
+ * Return type for variant function (with slots)
+ */
+export type SlotVariantResult<S extends SlotsDefinition> = {
+  [K in keyof S]: () => VariantResult;
+};
+
+/**
+ * CVA-style configuration (base as first argument)
+ */
+export type CvaConfig<V extends VariantsDefinition> = {
+  variants?: V;
+  compoundVariants?: Array<CompoundVariant<V>>;
+  defaultVariants?: DefaultVariants<V>;
+};
+
+/**
+ * Type helper to extract variant props from a variant function
+ */
+export type ExtractVariantProps<T> = T extends (props?: infer P) => unknown
+  ? Omit<P, "class" | "className">
+  : never;

From 6c7543d7fb9116592bb16a4bbef62531776b2933 Mon Sep 17 00:00:00 2001
From: jonsherrard <jon@devular.com>
Date: Wed, 21 Jan 2026 21:45:56 +0000
Subject: [PATCH 2/3] Use babel to transform cva and tv components

---
 package.json                               |   5 +
 pnpm-lock.yaml                             |  49 ++
 src/babel/plugin.ts                        |  15 +
 src/babel/plugin/state.ts                  |  11 +
 src/babel/plugin/visitors/program.ts       |  10 +-
 src/babel/plugin/visitors/variants.test.ts | 326 +++++++++
 src/babel/plugin/visitors/variants.ts      | 211 ++++++
 src/babel/utils/variantProcessing.ts       | 466 ++++++++++++
 src/index.ts                               |   3 -
 src/variants/createVariants.test.ts        | 783 ---------------------
 src/variants/createVariants.ts             | 375 ----------
 src/variants/index.ts                      |  23 -
 src/variants/types.ts                      | 137 ----
 13 files changed, 1092 insertions(+), 1322 deletions(-)
 create mode 100644 src/babel/plugin/visitors/variants.test.ts
 create mode 100644 src/babel/plugin/visitors/variants.ts
 create mode 100644 src/babel/utils/variantProcessing.ts
 delete mode 100644 src/variants/createVariants.test.ts
 delete mode 100644 src/variants/createVariants.ts
 delete mode 100644 src/variants/index.ts
 delete mode 100644 src/variants/types.ts

diff --git a/package.json b/package.json
index 866db34..bc4c729 100644
--- a/package.json
+++ b/package.json
@@ -93,5 +93,10 @@
       "esbuild",
       "unrs-resolver"
     ]
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b938f2e..4576ac4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,16 @@ settings:
 importers:
 
   .:
+    dependencies:
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
     devDependencies:
       '@babel/cli':
         specifier: ^7.28.3
@@ -1983,6 +1993,9 @@ packages:
   cjs-module-lexer@2.1.1:
     resolution: {integrity: sha512-+CmxIZ/L2vNcEfvNtLdU0ZQ6mbq3FZnwAP2PPTiKP+1QOoKwlKlPgb8UKV0Dds7QVaMnHm+FwSft2VB0s/SLjQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -2002,6 +2015,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -3971,6 +3988,22 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
+  tailwindcss@4.1.18:
+    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
+
   terser@5.44.1:
     resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
     engines: {node: '>=10'}
@@ -6592,6 +6625,10 @@ snapshots:
 
   cjs-module-lexer@2.1.1: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
@@ -6612,6 +6649,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@2.1.1: {}
+
   co@4.6.0: {}
 
   collect-v8-coverage@1.0.3: {}
@@ -9119,6 +9158,16 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
+  tailwind-merge@3.4.0: {}
+
+  tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
+    optionalDependencies:
+      tailwind-merge: 3.4.0
+
+  tailwindcss@4.1.18: {}
+
   terser@5.44.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
diff --git a/src/babel/plugin.ts b/src/babel/plugin.ts
index ea1e39d..53fdb99 100644
--- a/src/babel/plugin.ts
+++ b/src/babel/plugin.ts
@@ -11,6 +11,11 @@ import { jsxAttributeVisitor } from "./plugin/visitors/className.js";
 import { importDeclarationVisitor } from "./plugin/visitors/imports.js";
 import { programEnter, programExit } from "./plugin/visitors/program.js";
 import { callExpressionVisitor, taggedTemplateVisitor } from "./plugin/visitors/tw.js";
+import {
+  variantCallVisitor,
+  variantDefinitionVisitor,
+  variantImportVisitor,
+} from "./plugin/visitors/variants.js";
 
 // Re-export PluginOptions for external use
 export type { PluginOptions };
@@ -56,6 +61,13 @@ export default function reactNativeTailwindBabelPlugin(
 
       ImportDeclaration(path, state) {
         importDeclarationVisitor(path, state, t);
+        // Also track variant imports (tv/cva)
+        variantImportVisitor(path, state, t);
+      },
+
+      VariableDeclarator(path, state) {
+        // Process variant function definitions (const button = tv({...}))
+        variantDefinitionVisitor(path, state, t);
       },
 
       TaggedTemplateExpression(path, state) {
@@ -63,6 +75,9 @@ export default function reactNativeTailwindBabelPlugin(
       },
 
       CallExpression(path, state) {
+        // First check if this is a variant function call
+        variantCallVisitor(path, state, t);
+        // Then check for tw/twStyle calls
         callExpressionVisitor(path, state, t);
       },
 
diff --git a/src/babel/plugin/state.ts b/src/babel/plugin/state.ts
index c5b546e..31464f9 100644
--- a/src/babel/plugin/state.ts
+++ b/src/babel/plugin/state.ts
@@ -9,6 +9,7 @@ import type { StyleObject } from "../../types/core.js";
 import type { CustomTheme } from "../config-loader.js";
 import { extractCustomTheme } from "../config-loader.js";
 import { DEFAULT_CLASS_ATTRIBUTES, buildAttributeMatchers } from "../utils/attributeMatchers.js";
+import type { VariantFunctionEntry } from "../utils/variantProcessing.js";
 
 /**
  * Plugin options
@@ -121,6 +122,11 @@ export type PluginState = PluginPass & {
   functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
   // Track function components that need windowDimensions hook injection
   functionComponentsNeedingWindowDimensions: Set<NodePath<BabelTypes.Function>>;
+  // Track tv/cva variant imports and definitions
+  tvImportNames: Set<string>;
+  cvaImportNames: Set<string>;
+  variantFunctions: Map<string, VariantFunctionEntry>;
+  hasVariantDefinitions: boolean;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -181,5 +187,10 @@ export function createInitialState(
     reactNativeImportPath: undefined,
     functionComponentsNeedingColorScheme: new Set(),
     functionComponentsNeedingWindowDimensions: new Set(),
+    // Variant support (tv/cva)
+    tvImportNames: new Set(),
+    cvaImportNames: new Set(),
+    variantFunctions: new Map(),
+    hasVariantDefinitions: false,
   };
 }
diff --git a/src/babel/plugin/visitors/program.ts b/src/babel/plugin/visitors/program.ts
index 71b5a10..6c0d112 100644
--- a/src/babel/plugin/visitors/program.ts
+++ b/src/babel/plugin/visitors/program.ts
@@ -17,6 +17,7 @@ import {
 } from "../../utils/styleInjection.js";
 import { removeTwImports } from "../../utils/twProcessing.js";
 import type { PluginState } from "../state.js";
+import { removeVariantDefinitions, removeVariantImports } from "./variants.js";
 
 /**
  * Program enter visitor - initialize state for each file
@@ -41,9 +42,16 @@ export function programExit(
     removeTwImports(path, t);
   }
 
-  // If no classNames were found and no hooks/imports needed, skip processing
+  // Remove variant imports and definitions if they were processed
+  if (state.hasVariantDefinitions) {
+    removeVariantImports(path, state, t);
+    removeVariantDefinitions(path, state, t);
+  }
+
+  // If no classNames/variants were found and no hooks/imports needed, skip processing
   if (
     !state.hasClassNames &&
+    !state.hasVariantDefinitions &&
     !state.needsWindowDimensionsImport &&
     !state.needsColorSchemeImport &&
     !state.needsI18nManagerImport
diff --git a/src/babel/plugin/visitors/variants.test.ts b/src/babel/plugin/visitors/variants.test.ts
new file mode 100644
index 0000000..66adb7a
--- /dev/null
+++ b/src/babel/plugin/visitors/variants.test.ts
@@ -0,0 +1,326 @@
+import { describe, expect, it } from "vitest";
+import { transform } from "../../../../test/helpers/babelTransform.js";
+
+describe("variants visitor - tv()", () => {
+  describe("import tracking", () => {
+    it("should track tv import from tailwind-variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold rounded-lg',
+          variants: {
+            color: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ color: 'primary' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove tailwind-variants import
+      expect(result).not.toContain("tailwind-variants");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+      // Should have generated style keys
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should track aliased tv import", () => {
+      const code = `
+        import { tv as createVariant } from 'tailwind-variants';
+
+        const button = createVariant({
+          base: 'p-4',
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).not.toContain("tailwind-variants");
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static variant resolution", () => {
+    it("should resolve static variant call to style reference", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold',
+          variants: {
+            size: {
+              sm: 'text-sm',
+              lg: 'text-lg',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ size: 'sm' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should generate styles for the variant
+      expect(result).toContain("StyleSheet.create");
+      // Should replace call with style reference
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle default variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            size: {
+              sm: 'p-1',
+              md: 'p-2',
+            },
+          },
+          defaultVariants: {
+            size: 'md',
+          },
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle boolean variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            disabled: {
+              true: 'opacity-50',
+              false: 'opacity-100',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ disabled: true })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle compound variants", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'rounded',
+          variants: {
+            color: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+            disabled: {
+              true: 'opacity-50',
+            },
+          },
+          compoundVariants: [
+            {
+              color: 'primary',
+              disabled: true,
+              class: 'bg-blue-300',
+            },
+          ],
+        });
+
+        function Button() {
+          return <button className={button({ color: 'primary', disabled: true })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("removing variant definitions", () => {
+    it("should remove the variant function definition after transformation", () => {
+      const code = `
+        import { tv } from 'tailwind-variants';
+
+        const button = tv({
+          base: 'font-semibold',
+        });
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should not contain the original tv() call
+      expect(result).not.toContain("tv({");
+      // But should have the generated styles
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+});
+
+describe("variants visitor - cva()", () => {
+  describe("import tracking", () => {
+    it("should track cva import from class-variance-authority", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold rounded-lg', {
+          variants: {
+            intent: {
+              primary: 'bg-blue-500',
+              secondary: 'bg-gray-500',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ intent: 'primary' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove class-variance-authority import
+      expect(result).not.toContain("class-variance-authority");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static variant resolution", () => {
+    it("should resolve static cva call to style reference", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold', {
+          variants: {
+            size: {
+              small: 'text-sm',
+              large: 'text-lg',
+            },
+          },
+        });
+
+        function Button() {
+          return <button className={button({ size: 'small' })} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle cva with only base classes", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva('font-semibold rounded-lg p-4');
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle cva with base as array", () => {
+      const code = `
+        import { cva } from 'class-variance-authority';
+
+        const button = cva(['font-semibold', 'rounded-lg', 'p-4']);
+
+        function Button() {
+          return <button className={button()} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+});
+
+describe("variants visitor - edge cases", () => {
+  it("should handle multiple variant functions in same file", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+
+      const button = tv({
+        base: 'rounded-lg',
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      const badge = tv({
+        base: 'rounded-full',
+        variants: {
+          color: { red: 'bg-red-500', blue: 'bg-blue-500' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={badge({ color: 'red' })} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // Should have styles for both variants
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should not transform dynamic configs", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+
+      const getConfig = () => ({ base: 'rounded' });
+      const button = tv(getConfig());
+
+      function Button() {
+        return <button className={button()} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    // Dynamic config can't be evaluated at compile time
+    // Should preserve the tv() call
+    expect(result).toContain("tv(");
+  });
+});
diff --git a/src/babel/plugin/visitors/variants.ts b/src/babel/plugin/visitors/variants.ts
new file mode 100644
index 0000000..47b7eab
--- /dev/null
+++ b/src/babel/plugin/visitors/variants.ts
@@ -0,0 +1,211 @@
+/**
+ * Visitors for tv() and cva() variant transformations
+ * Transforms variant function calls to pre-computed StyleSheet references
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import { parseClassName } from "../../../parser/index.js";
+import { generateStyleKey } from "../../../utils/styleKey.js";
+import {
+  extractCvaConfig,
+  extractTvConfig,
+  generateDynamicVariantExpression,
+  processVariantCallSite,
+  processVariantDefinition,
+} from "../../utils/variantProcessing.js";
+import type { PluginState } from "../state.js";
+
+/**
+ * Track tv/cva imports
+ */
+export function variantImportVisitor(
+  path: NodePath<BabelTypes.ImportDeclaration>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  const source = path.node.source.value;
+
+  // Track tailwind-variants imports
+  if (source === "tailwind-variants") {
+    for (const spec of path.node.specifiers) {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        if (spec.imported.name === "tv") {
+          state.tvImportNames.add(spec.local.name);
+        }
+      }
+    }
+  }
+
+  // Track class-variance-authority imports
+  if (source === "class-variance-authority") {
+    for (const spec of path.node.specifiers) {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        if (spec.imported.name === "cva") {
+          state.cvaImportNames.add(spec.local.name);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Process variant function definitions (const button = tv({...}))
+ */
+export function variantDefinitionVisitor(
+  path: NodePath<BabelTypes.VariableDeclarator>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  // Check if this is a variant function definition
+  // e.g., const button = tv({...}) or const button = cva('base', {...})
+  if (!t.isIdentifier(path.node.id)) return;
+  if (!t.isCallExpression(path.node.init)) return;
+
+  const variableName = path.node.id.name;
+  const callExpr = path.node.init;
+
+  // Check if callee is a tracked tv/cva import
+  if (!t.isIdentifier(callExpr.callee)) return;
+  const calleeName = callExpr.callee.name;
+
+  let type: "tv" | "cva" | null = null;
+  if (state.tvImportNames.has(calleeName)) {
+    type = "tv";
+  } else if (state.cvaImportNames.has(calleeName)) {
+    type = "cva";
+  }
+
+  if (!type) return;
+
+  // Extract the config
+  const config =
+    type === "tv" ? extractTvConfig(callExpr.arguments, t) : extractCvaConfig(callExpr.arguments, t);
+
+  if (!config) {
+    // Config couldn't be extracted statically
+    // Leave the code as-is for runtime processing
+    return;
+  }
+
+  // Process the variant definition
+  processVariantDefinition(variableName, type, config, state, parseClassName, generateStyleKey);
+
+  // Mark that we have variant definitions
+  state.hasVariantDefinitions = true;
+}
+
+/**
+ * Process variant function call sites
+ * e.g., button({ color: 'primary' }) or className={button({ color: 'primary' })}
+ */
+export function variantCallVisitor(
+  path: NodePath<BabelTypes.CallExpression>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  // Check if this is a call to a tracked variant function
+  if (!t.isIdentifier(path.node.callee)) return;
+
+  const calleeName = path.node.callee.name;
+  const entry = state.variantFunctions.get(calleeName);
+
+  if (!entry) return;
+
+  // Try to process with static props
+  const success = processVariantCallSite(path, calleeName, entry, state, t);
+
+  if (!success) {
+    // Couldn't resolve statically - try dynamic transformation
+    const args = path.node.arguments;
+
+    if (args.length === 1 && t.isObjectExpression(args[0])) {
+      // Generate dynamic conditional expression
+      const dynamicExpr = generateDynamicVariantExpression(calleeName, entry, args[0], state, t);
+
+      if (dynamicExpr) {
+        path.replaceWith(dynamicExpr);
+        return;
+      }
+    }
+
+    // Fall back: can't transform, leave as-is
+    // This will require runtime processing
+  }
+}
+
+/**
+ * Remove tv/cva imports after transformation
+ * (Only if all usages were successfully transformed)
+ */
+export function removeVariantImports(
+  path: NodePath<BabelTypes.Program>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  // Only remove if we have transformed variant definitions
+  if (!state.hasVariantDefinitions) return;
+
+  path.traverse({
+    ImportDeclaration(importPath) {
+      const source = importPath.node.source.value;
+
+      if (source === "tailwind-variants" || source === "class-variance-authority") {
+        // Check if all specifiers are tv/cva that we've processed
+        const remainingSpecifiers = importPath.node.specifiers.filter((spec) => {
+          if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+            const name = spec.imported.name;
+            // Keep if it's not tv/cva or if we didn't process this import
+            if (name === "tv" && state.tvImportNames.has(spec.local.name)) {
+              return false; // Remove
+            }
+            if (name === "cva" && state.cvaImportNames.has(spec.local.name)) {
+              return false; // Remove
+            }
+          }
+          return true; // Keep
+        });
+
+        if (remainingSpecifiers.length === 0) {
+          importPath.remove();
+        } else if (remainingSpecifiers.length < importPath.node.specifiers.length) {
+          importPath.node.specifiers = remainingSpecifiers;
+        }
+      }
+    },
+  });
+}
+
+/**
+ * Remove variant function definitions after transformation
+ * (The const button = tv({...}) declarations are no longer needed)
+ */
+export function removeVariantDefinitions(
+  path: NodePath<BabelTypes.Program>,
+  state: PluginState,
+  t: typeof BabelTypes,
+): void {
+  if (!state.hasVariantDefinitions) return;
+
+  path.traverse({
+    VariableDeclaration(varDeclPath) {
+      const declarators = varDeclPath.node.declarations;
+      const remainingDeclarators = declarators.filter((decl) => {
+        if (t.isIdentifier(decl.id)) {
+          const name = decl.id.name;
+          // Remove if this is a variant function we processed
+          if (state.variantFunctions.has(name)) {
+            return false;
+          }
+        }
+        return true;
+      });
+
+      if (remainingDeclarators.length === 0) {
+        varDeclPath.remove();
+      } else if (remainingDeclarators.length < declarators.length) {
+        varDeclPath.node.declarations = remainingDeclarators;
+      }
+    },
+  });
+}
diff --git a/src/babel/utils/variantProcessing.ts b/src/babel/utils/variantProcessing.ts
new file mode 100644
index 0000000..2d16f7f
--- /dev/null
+++ b/src/babel/utils/variantProcessing.ts
@@ -0,0 +1,466 @@
+/**
+ * Utility functions for processing tv() and cva() variant calls
+ * Uses the actual tailwind-variants and class-variance-authority libraries
+ * at compile time to resolve variant class strings
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import { cva } from "class-variance-authority";
+import { tv } from "tailwind-variants";
+import type { CustomTheme } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Variant function registry entry
+ */
+export type VariantFunctionEntry = {
+  type: "tv" | "cva";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  variantFn: (...args: any[]) => string;
+  config: VariantConfig;
+  // Pre-computed styles for each variant combination
+  // Key format: "color:primary|size:sm" -> styleKey
+  precomputedStyles: Map<string, string>;
+};
+
+/**
+ * Extracted variant configuration
+ */
+export type VariantConfig = {
+  base?: string;
+  variants?: Record<string, Record<string, string | string[] | null>>;
+  compoundVariants?: Array<Record<string, unknown>>;
+  defaultVariants?: Record<string, string | boolean>;
+  // For slots (tailwind-variants only)
+  slots?: Record<string, string>;
+};
+
+/**
+ * Plugin state interface for variant processing
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface VariantProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customTheme: CustomTheme;
+  stylesIdentifier: string;
+  // Track variant function definitions
+  variantFunctions: Map<string, VariantFunctionEntry>;
+  // Track which imports are from tv/cva
+  tvImportNames: Set<string>;
+  cvaImportNames: Set<string>;
+}
+
+/**
+ * Extract a JavaScript value from an AST node
+ * Only supports static/literal values
+ */
+export function extractStaticValue(node: BabelTypes.Node, t: typeof BabelTypes): unknown {
+  if (t.isStringLiteral(node)) {
+    return node.value;
+  }
+  if (t.isNumericLiteral(node)) {
+    return node.value;
+  }
+  if (t.isBooleanLiteral(node)) {
+    return node.value;
+  }
+  if (t.isNullLiteral(node)) {
+    return null;
+  }
+  if (t.isArrayExpression(node)) {
+    const elements: unknown[] = [];
+    for (const element of node.elements) {
+      if (element === null) {
+        elements.push(null);
+      } else if (t.isSpreadElement(element)) {
+        // Can't handle spread at compile time
+        return undefined;
+      } else {
+        const value = extractStaticValue(element, t);
+        if (value === undefined) return undefined;
+        elements.push(value);
+      }
+    }
+    return elements;
+  }
+  if (t.isObjectExpression(node)) {
+    const obj: Record<string, unknown> = {};
+    for (const prop of node.properties) {
+      if (t.isSpreadElement(prop)) {
+        // Can't handle spread at compile time
+        return undefined;
+      }
+      if (t.isObjectProperty(prop)) {
+        let key: string;
+        if (t.isIdentifier(prop.key)) {
+          key = prop.key.name;
+        } else if (t.isStringLiteral(prop.key)) {
+          key = prop.key.value;
+        } else {
+          // Computed key - can't handle at compile time
+          return undefined;
+        }
+        const value = extractStaticValue(prop.value, t);
+        if (value === undefined) return undefined;
+        obj[key] = value;
+      }
+    }
+    return obj;
+  }
+  // Unsupported node type - return undefined to signal dynamic value
+  return undefined;
+}
+
+/**
+ * Extract variant config from a tv() call
+ */
+export function extractTvConfig(
+  args: BabelTypes.CallExpression["arguments"],
+  t: typeof BabelTypes,
+): VariantConfig | null {
+  if (args.length === 0) return null;
+
+  const configArg = args[0];
+  if (!t.isObjectExpression(configArg)) return null;
+
+  const config = extractStaticValue(configArg, t) as VariantConfig | undefined;
+  return config ?? null;
+}
+
+/**
+ * Extract variant config from a cva() call
+ * cva(base, { variants, ... })
+ */
+export function extractCvaConfig(
+  args: BabelTypes.CallExpression["arguments"],
+  t: typeof BabelTypes,
+): VariantConfig | null {
+  if (args.length === 0) return null;
+
+  // First arg is base classes
+  const baseArg = args[0];
+  const base = extractStaticValue(baseArg, t);
+  if (base === undefined) return null;
+
+  const config: VariantConfig = {
+    base: Array.isArray(base) ? (base as string[]).join(" ") : typeof base === "string" ? base : "",
+  };
+
+  // Second arg is optional config object
+  if (args.length > 1 && t.isObjectExpression(args[1])) {
+    const configObj = extractStaticValue(args[1], t) as Partial<VariantConfig> | undefined;
+    if (configObj) {
+      Object.assign(config, configObj);
+    }
+  }
+
+  return config;
+}
+
+/**
+ * Generate all possible variant combinations
+ * Returns array of objects like { color: 'primary', size: 'sm' }
+ */
+export function generateVariantCombinations(
+  variants: Record<string, Record<string, unknown>> | undefined,
+): Array<Record<string, string | boolean>> {
+  if (!variants || Object.keys(variants).length === 0) {
+    return [{}];
+  }
+
+  // Create local reference to satisfy TypeScript in nested function
+  const variantsMap = variants;
+  const variantNames = Object.keys(variantsMap);
+  const combinations: Array<Record<string, string | boolean>> = [];
+
+  function generate(index: number, current: Record<string, string | boolean>): void {
+    if (index === variantNames.length) {
+      combinations.push({ ...current });
+      return;
+    }
+
+    const variantName = variantNames[index];
+    const options = Object.keys(variantsMap[variantName]);
+
+    for (const option of options) {
+      // Convert "true"/"false" strings to booleans for boolean variants
+      const value = option === "true" ? true : option === "false" ? false : option;
+      current[variantName] = value;
+      generate(index + 1, current);
+    }
+  }
+
+  generate(0, {});
+  return combinations;
+}
+
+/**
+ * Create a unique key for a variant combination
+ */
+export function createVariantKey(props: Record<string, string | boolean>): string {
+  const sortedEntries = Object.entries(props).sort(([a], [b]) => a.localeCompare(b));
+  return sortedEntries.map(([k, v]) => `${k}:${String(v)}`).join("|");
+}
+
+/**
+ * Create a style key from variant function name and props
+ */
+export function createVariantStyleKey(variantName: string, props: Record<string, string | boolean>): string {
+  const propsKey = createVariantKey(props);
+  // Make a valid JS identifier
+  const sanitized = `${variantName}_${propsKey}`.replace(/[:|]/g, "_").replace(/[^a-zA-Z0-9_]/g, "");
+  return `_${sanitized}`;
+}
+
+/**
+ * Process a tv() or cva() variable declaration
+ * Creates the variant function and pre-computes all style combinations
+ */
+export function processVariantDefinition(
+  variableName: string,
+  type: "tv" | "cva",
+  config: VariantConfig,
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  _generateStyleKey: (className: string) => string,
+): void {
+  // Create the actual variant function using the real library
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let variantFn: (...args: any[]) => string;
+
+  if (type === "tv") {
+    // Handle slots case - not fully supported yet
+    if (config.slots) {
+      // For slots, we'd need more complex handling
+      // For now, skip pre-computation for slotted variants
+      console.warn(
+        `[react-native-tailwind] Slots in tv() are not yet fully supported for compile-time transformation. ` +
+          `Consider using compound variants instead.`,
+      );
+      return;
+    }
+
+    const tvConfig = {
+      base: config.base,
+      variants: config.variants,
+      compoundVariants: config.compoundVariants,
+      defaultVariants: config.defaultVariants,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+    variantFn = tv(tvConfig as any) as (...args: any[]) => string;
+  } else {
+    // CVA
+    const cvaConfig = {
+      variants: config.variants,
+      compoundVariants: config.compoundVariants,
+      defaultVariants: config.defaultVariants,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument
+    variantFn = cva(config.base ?? "", cvaConfig as any) as (...args: any[]) => string;
+  }
+
+  // Pre-compute styles for all variant combinations
+  const precomputedStyles = new Map<string, string>();
+  const combinations = generateVariantCombinations(config.variants);
+
+  for (const props of combinations) {
+    // Call the variant function to get the class string
+    const className = variantFn(props);
+    if (className) {
+      // Parse to RN style
+      const styleObject = parseClassName(className, state.customTheme);
+      const styleKey = createVariantStyleKey(variableName, props);
+
+      // Register the style
+      state.styleRegistry.set(styleKey, styleObject);
+
+      // Store the mapping
+      const propsKey = createVariantKey(props);
+      precomputedStyles.set(propsKey, styleKey);
+    }
+  }
+
+  // Also compute the default case (no props or empty props)
+  const defaultClassName = variantFn({});
+  if (defaultClassName) {
+    const defaultStyleObject = parseClassName(defaultClassName, state.customTheme);
+    const defaultStyleKey = createVariantStyleKey(variableName, {});
+    state.styleRegistry.set(defaultStyleKey, defaultStyleObject);
+    precomputedStyles.set("", defaultStyleKey);
+  }
+
+  // Register the variant function
+  state.variantFunctions.set(variableName, {
+    type,
+    variantFn,
+    config,
+    precomputedStyles,
+  });
+}
+
+/**
+ * Process a variant function call site
+ * e.g., button({ color: 'primary' }) or className={button({ color: 'primary' })}
+ */
+export function processVariantCallSite(
+  path: NodePath<BabelTypes.CallExpression>,
+  variableName: string,
+  entry: VariantFunctionEntry,
+  state: VariantProcessingState,
+  t: typeof BabelTypes,
+): boolean {
+  const args = path.node.arguments;
+
+  // Extract props from the call
+  let props: Record<string, string | boolean> | null = null;
+
+  if (args.length === 0) {
+    // No args - use defaults
+    props = {};
+  } else if (args.length === 1 && t.isObjectExpression(args[0])) {
+    // Static props object
+    const extracted = extractStaticValue(args[0], t) as Record<string, unknown> | undefined;
+    if (extracted) {
+      // Filter to only variant props (not class/className)
+      props = {};
+      for (const [key, value] of Object.entries(extracted)) {
+        if (key !== "class" && key !== "className") {
+          props[key] = value as string | boolean;
+        }
+      }
+    }
+  }
+
+  if (props === null) {
+    // Dynamic props - can't resolve at compile time
+    // TODO: Generate runtime conditional expressions
+    return false;
+  }
+
+  // Look up the pre-computed style
+  const propsKey = createVariantKey(props);
+  const styleKey = entry.precomputedStyles.get(propsKey);
+
+  if (!styleKey) {
+    // This combination wasn't pre-computed (shouldn't happen if we enumerated all)
+    // Fall back to computing it now
+    const className = entry.variantFn(props);
+    if (!className) return false;
+
+    // We'd need parseClassName here, but we don't have it in this context
+    // For now, return false to skip transformation
+    return false;
+  }
+
+  // Replace the call with a style reference
+  // e.g., button({ color: 'primary' }) -> _twStyles._button_color_primary
+  path.replaceWith(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+
+  return true;
+}
+
+/**
+ * Generate runtime conditional for dynamic variant props
+ * This creates code like:
+ * [
+ *   styles._button_base,
+ *   color === 'primary' && styles._button_color_primary,
+ *   color === 'secondary' && styles._button_color_secondary,
+ *   size === 'sm' && styles._button_size_sm,
+ *   size === 'lg' && styles._button_size_lg,
+ * ]
+ */
+export function generateDynamicVariantExpression(
+  variableName: string,
+  entry: VariantFunctionEntry,
+  propsExpression: BabelTypes.ObjectExpression,
+  state: VariantProcessingState,
+  t: typeof BabelTypes,
+): BabelTypes.ArrayExpression | null {
+  const { config, precomputedStyles } = entry;
+  const variants = config.variants;
+
+  if (!variants) {
+    // No variants - just return base style
+    const baseStyleKey = precomputedStyles.get("");
+    if (baseStyleKey) {
+      return t.arrayExpression([
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      ]);
+    }
+    return null;
+  }
+
+  const elements: BabelTypes.Expression[] = [];
+
+  // Add base style (default with no variant-specific props)
+  const baseStyleKey = precomputedStyles.get("");
+  if (baseStyleKey) {
+    elements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)));
+  }
+
+  // Extract prop expressions from the call
+  const propExpressions = new Map<string, BabelTypes.Expression>();
+  for (const prop of propsExpression.properties) {
+    if (t.isObjectProperty(prop)) {
+      let key: string | null = null;
+      if (t.isIdentifier(prop.key)) {
+        key = prop.key.name;
+      } else if (t.isStringLiteral(prop.key)) {
+        key = prop.key.value;
+      }
+      if (key && key !== "class" && key !== "className" && t.isExpression(prop.value)) {
+        propExpressions.set(key, prop.value);
+      }
+    }
+  }
+
+  // Generate conditionals for each variant
+  for (const [variantName, variantOptions] of Object.entries(variants)) {
+    const propExpr = propExpressions.get(variantName);
+    if (!propExpr) {
+      // This variant prop wasn't provided - use default if available
+      const defaultValue = config.defaultVariants?.[variantName];
+      if (defaultValue !== undefined) {
+        // Add the default style unconditionally
+        const props = { [variantName]: defaultValue };
+        const propsKey = createVariantKey(props as Record<string, string | boolean>);
+        const styleKey = precomputedStyles.get(propsKey);
+        if (styleKey) {
+          elements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+        }
+      }
+      continue;
+    }
+
+    // Generate conditional for each option
+    for (const optionKey of Object.keys(variantOptions)) {
+      const props = { [variantName]: optionKey === "true" ? true : optionKey === "false" ? false : optionKey };
+      const propsKey = createVariantKey(props as Record<string, string | boolean>);
+      const styleKey = precomputedStyles.get(propsKey);
+
+      if (styleKey) {
+        // Generate: propExpr === 'optionKey' && styles._styleKey
+        let condition: BabelTypes.Expression;
+        if (optionKey === "true") {
+          condition = propExpr;
+        } else if (optionKey === "false") {
+          condition = t.unaryExpression("!", propExpr);
+        } else {
+          condition = t.binaryExpression("===", propExpr, t.stringLiteral(optionKey));
+        }
+
+        elements.push(
+          t.logicalExpression(
+            "&&",
+            condition,
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)),
+          ),
+        );
+      }
+    }
+  }
+
+  return t.arrayExpression(elements);
+}
diff --git a/src/index.ts b/src/index.ts
index e349c8f..515af19 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,6 +44,3 @@ export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
 
 // Re-export enhanced components with modifier support
 export * from "./components";
-
-// Re-export variants API (Tailwind Variants / CVA compatible)
-export * from "./variants";
diff --git a/src/variants/createVariants.test.ts b/src/variants/createVariants.test.ts
deleted file mode 100644
index e15b629..0000000
--- a/src/variants/createVariants.test.ts
+++ /dev/null
@@ -1,783 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createVariants, cv, cva, tv } from "./createVariants";
-
-describe("createVariants", () => {
-  describe("basic functionality", () => {
-    it("should return empty style for empty config", () => {
-      const variant = createVariants({});
-      const result = variant();
-      expect(result.className).toBe("");
-      expect(result.style).toEqual({});
-    });
-
-    it("should handle base classes", () => {
-      const variant = createVariants({
-        base: "m-4 p-2",
-      });
-      const result = variant();
-      expect(result.className).toBe("m-4 p-2");
-      expect(result.style).toEqual({
-        margin: 16,
-        padding: 8,
-      });
-    });
-
-    it("should handle base classes as array", () => {
-      const variant = createVariants({
-        base: ["m-4", "p-2"],
-      });
-      const result = variant();
-      expect(result.className).toBe("m-4 p-2");
-      expect(result.style).toEqual({
-        margin: 16,
-        padding: 8,
-      });
-    });
-  });
-
-  describe("variants", () => {
-    it("should apply variant classes", () => {
-      const button = createVariants({
-        base: "rounded-lg",
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-        },
-      });
-
-      const result = button({ color: "primary" });
-      expect(result.className).toBe("rounded-lg bg-blue-500");
-      expect(result.style).toHaveProperty("backgroundColor", "#2b7fff");
-    });
-
-    it("should handle multiple variants", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-          size: {
-            sm: "text-sm p-1",
-            lg: "text-lg p-4",
-          },
-        },
-      });
-
-      const result = button({ color: "primary", size: "lg" });
-      expect(result.className).toBe("bg-blue-500 text-lg p-4");
-      expect(result.style).toHaveProperty("backgroundColor", "#2b7fff");
-      expect(result.style).toHaveProperty("fontSize", 18);
-      expect(result.style).toHaveProperty("padding", 16);
-    });
-
-    it("should handle variant values as arrays", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: ["bg-blue-500", "text-white"],
-          },
-        },
-      });
-
-      const result = button({ color: "primary" });
-      expect(result.className).toBe("bg-blue-500 text-white");
-    });
-
-    it("should handle null variant values", () => {
-      const button = createVariants({
-        variants: {
-          disabled: {
-            true: "opacity-50",
-            false: null,
-          },
-        },
-      });
-
-      const enabledResult = button({ disabled: false });
-      expect(enabledResult.className).toBe("");
-
-      const disabledResult = button({ disabled: true });
-      expect(disabledResult.className).toBe("opacity-50");
-    });
-  });
-
-  describe("boolean variants", () => {
-    it("should handle boolean true variant", () => {
-      const button = createVariants({
-        variants: {
-          disabled: {
-            true: "opacity-50",
-          },
-        },
-      });
-
-      const result = button({ disabled: true });
-      expect(result.className).toBe("opacity-50");
-      expect(result.style).toHaveProperty("opacity", 0.5);
-    });
-
-    it("should handle boolean false variant", () => {
-      const button = createVariants({
-        variants: {
-          disabled: {
-            true: "opacity-50",
-            false: "opacity-100",
-          },
-        },
-      });
-
-      const result = button({ disabled: false });
-      expect(result.className).toBe("opacity-100");
-      expect(result.style).toHaveProperty("opacity", 1);
-    });
-
-    it("should not apply boolean variant when undefined", () => {
-      const button = createVariants({
-        variants: {
-          disabled: {
-            true: "opacity-50",
-          },
-        },
-      });
-
-      const result = button({});
-      expect(result.className).toBe("");
-    });
-  });
-
-  describe("default variants", () => {
-    it("should apply default variants when no props provided", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-          size: {
-            sm: "text-sm",
-            md: "text-base",
-          },
-        },
-        defaultVariants: {
-          color: "primary",
-          size: "md",
-        },
-      });
-
-      const result = button();
-      expect(result.className).toBe("bg-blue-500 text-base");
-    });
-
-    it("should override default variants with props", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-        },
-        defaultVariants: {
-          color: "primary",
-        },
-      });
-
-      const result = button({ color: "secondary" });
-      expect(result.className).toBe("bg-gray-500");
-    });
-
-    it("should handle boolean default variants", () => {
-      const button = createVariants({
-        variants: {
-          disabled: {
-            true: "opacity-50",
-            false: "opacity-100",
-          },
-        },
-        defaultVariants: {
-          disabled: false,
-        },
-      });
-
-      const result = button();
-      expect(result.className).toBe("opacity-100");
-    });
-  });
-
-  describe("compound variants", () => {
-    it("should apply compound variant when conditions match", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-          disabled: {
-            true: "opacity-50",
-          },
-        },
-        compoundVariants: [
-          {
-            color: "primary",
-            disabled: true,
-            class: "bg-blue-300",
-          },
-        ],
-      });
-
-      const result = button({ color: "primary", disabled: true });
-      expect(result.className).toBe("bg-blue-500 opacity-50 bg-blue-300");
-    });
-
-    it("should not apply compound variant when conditions do not match", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-          },
-          disabled: {
-            true: "opacity-50",
-          },
-        },
-        compoundVariants: [
-          {
-            color: "primary",
-            disabled: true,
-            class: "bg-blue-300",
-          },
-        ],
-      });
-
-      const result = button({ color: "secondary", disabled: true });
-      expect(result.className).toBe("bg-gray-500 opacity-50");
-      expect(result.className).not.toContain("bg-blue-300");
-    });
-
-    it("should support array conditions in compound variants", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-            secondary: "bg-gray-500",
-            danger: "bg-red-500",
-          },
-          size: {
-            sm: "text-sm",
-            md: "text-base",
-          },
-        },
-        compoundVariants: [
-          {
-            color: ["primary", "secondary"],
-            size: "sm",
-            class: "font-bold",
-          },
-        ],
-      });
-
-      const primaryResult = button({ color: "primary", size: "sm" });
-      expect(primaryResult.className).toContain("font-bold");
-
-      const secondaryResult = button({ color: "secondary", size: "sm" });
-      expect(secondaryResult.className).toContain("font-bold");
-
-      const dangerResult = button({ color: "danger", size: "sm" });
-      expect(dangerResult.className).not.toContain("font-bold");
-    });
-
-    it("should support className key as alias for class", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-          },
-        },
-        compoundVariants: [
-          {
-            color: "primary",
-            className: "font-semibold",
-          },
-        ],
-      });
-
-      const result = button({ color: "primary" });
-      expect(result.className).toContain("font-semibold");
-    });
-
-    it("should apply compound variants with default variants", () => {
-      const button = createVariants({
-        variants: {
-          color: {
-            primary: "bg-blue-500",
-          },
-          disabled: {
-            true: "opacity-50",
-            false: "",
-          },
-        },
-        compoundVariants: [
-          {
-            color: "primary",
-            disabled: false,
-            class: "hover:bg-blue-600",
-          },
-        ],
-        defaultVariants: {
-          color: "primary",
-          disabled: false,
-        },
-      });
-
-      const result = button();
-      expect(result.className).toContain("hover:bg-blue-600");
-    });
-  });
-
-  describe("class/className override", () => {
-    it("should allow class override", () => {
-      const button = createVariants({
-        base: "bg-blue-500",
-      });
-
-      const result = button({ class: "bg-red-500" });
-      expect(result.className).toBe("bg-blue-500 bg-red-500");
-    });
-
-    it("should allow className override", () => {
-      const button = createVariants({
-        base: "bg-blue-500",
-      });
-
-      const result = button({ className: "bg-red-500" });
-      expect(result.className).toBe("bg-blue-500 bg-red-500");
-    });
-  });
-
-  describe("class deduplication", () => {
-    it("should deduplicate class names", () => {
-      const button = createVariants({
-        base: "m-4 p-2",
-        variants: {
-          size: {
-            lg: "m-4 p-4",
-          },
-        },
-      });
-
-      const result = button({ size: "lg" });
-      // m-4 should only appear once
-      const m4Count = result.className.split(" ").filter((c) => c === "m-4").length;
-      expect(m4Count).toBe(1);
-    });
-  });
-});
-
-describe("slots", () => {
-  it("should create slot functions", () => {
-    const card = createVariants({
-      slots: {
-        base: "rounded-lg",
-        header: "p-4",
-        body: "p-4",
-      },
-    });
-
-    const result = card();
-    expect(typeof result.base).toBe("function");
-    expect(typeof result.header).toBe("function");
-    expect(typeof result.body).toBe("function");
-  });
-
-  it("should return correct classes for each slot", () => {
-    const card = createVariants({
-      slots: {
-        base: "rounded-lg shadow-md",
-        header: "p-4 border-b",
-        body: "p-4",
-      },
-    });
-
-    const slots = card();
-    expect(slots.base().className).toBe("rounded-lg shadow-md");
-    expect(slots.header().className).toBe("p-4 border-b");
-    expect(slots.body().className).toBe("p-4");
-  });
-
-  it("should parse slot classes to styles", () => {
-    const card = createVariants({
-      slots: {
-        base: "m-4",
-        content: "p-2",
-      },
-    });
-
-    const slots = card();
-    expect(slots.base().style).toEqual({ margin: 16 });
-    expect(slots.content().style).toEqual({ padding: 8 });
-  });
-
-  it("should apply compound variants to specific slots", () => {
-    const card = createVariants({
-      slots: {
-        base: "rounded-lg",
-        header: "p-4",
-      },
-      variants: {
-        variant: {
-          elevated: "",
-          outlined: "",
-        },
-      },
-      compoundVariants: [
-        {
-          variant: "elevated",
-          class: {
-            base: "shadow-lg",
-          },
-        },
-        {
-          variant: "outlined",
-          class: {
-            base: "border",
-            header: "border-b",
-          },
-        },
-      ],
-    });
-
-    const elevatedSlots = card({ variant: "elevated" });
-    expect(elevatedSlots.base().className).toContain("shadow-lg");
-    expect(elevatedSlots.header().className).not.toContain("shadow-lg");
-
-    const outlinedSlots = card({ variant: "outlined" });
-    expect(outlinedSlots.base().className).toContain("border");
-    expect(outlinedSlots.header().className).toContain("border-b");
-  });
-});
-
-describe("tv alias", () => {
-  it("should be an alias for createVariants", () => {
-    expect(tv).toBe(createVariants);
-  });
-
-  it("should work the same as createVariants", () => {
-    const button = tv({
-      base: "font-semibold",
-      variants: {
-        color: {
-          primary: "bg-blue-500",
-        },
-      },
-    });
-
-    const result = button({ color: "primary" });
-    expect(result.className).toBe("font-semibold bg-blue-500");
-  });
-});
-
-describe("cva", () => {
-  it("should accept base as first argument", () => {
-    const button = cva("font-semibold rounded-lg");
-    const result = button();
-    expect(result.className).toBe("font-semibold rounded-lg");
-  });
-
-  it("should accept base as array", () => {
-    const button = cva(["font-semibold", "rounded-lg"]);
-    const result = button();
-    expect(result.className).toBe("font-semibold rounded-lg");
-  });
-
-  it("should work with variants", () => {
-    const button = cva("font-semibold", {
-      variants: {
-        intent: {
-          primary: "bg-blue-500 text-white",
-          secondary: "bg-gray-200 text-gray-800",
-        },
-        size: {
-          small: "text-sm p-1",
-          medium: "text-base p-2",
-        },
-      },
-    });
-
-    const result = button({ intent: "primary", size: "small" });
-    expect(result.className).toBe("font-semibold bg-blue-500 text-white text-sm p-1");
-  });
-
-  it("should work with compound variants", () => {
-    const button = cva("font-semibold", {
-      variants: {
-        intent: {
-          primary: "bg-blue-500",
-        },
-        disabled: {
-          true: "opacity-50",
-          false: null,
-        },
-      },
-      compoundVariants: [
-        {
-          intent: "primary",
-          disabled: false,
-          class: "hover:bg-blue-600",
-        },
-      ],
-    });
-
-    const result = button({ intent: "primary", disabled: false });
-    expect(result.className).toContain("hover:bg-blue-600");
-  });
-
-  it("should work with default variants", () => {
-    const button = cva("font-semibold", {
-      variants: {
-        intent: {
-          primary: "bg-blue-500",
-          secondary: "bg-gray-500",
-        },
-      },
-      defaultVariants: {
-        intent: "primary",
-      },
-    });
-
-    const result = button();
-    expect(result.className).toBe("font-semibold bg-blue-500");
-  });
-});
-
-describe("cv alias", () => {
-  it("should be an alias for cva", () => {
-    expect(cv).toBe(cva);
-  });
-});
-
-describe("custom theme support", () => {
-  it("should parse custom colors from theme", () => {
-    const customTheme = {
-      colors: {
-        brand: "#ff6b6b",
-      },
-    };
-
-    const button = createVariants(
-      {
-        variants: {
-          color: {
-            brand: "bg-brand",
-          },
-        },
-      },
-      customTheme,
-    );
-
-    const result = button({ color: "brand" });
-    expect(result.className).toBe("bg-brand");
-    expect(result.style).toHaveProperty("backgroundColor", "#ff6b6b");
-  });
-
-  it("should work with cva and custom theme", () => {
-    const customTheme = {
-      colors: {
-        primary: "#007aff",
-      },
-    };
-
-    const button = cva(
-      "rounded-lg",
-      {
-        variants: {
-          color: {
-            primary: "bg-primary",
-          },
-        },
-      },
-      customTheme,
-    );
-
-    const result = button({ color: "primary" });
-    expect(result.style).toHaveProperty("backgroundColor", "#007aff");
-  });
-});
-
-describe("edge cases", () => {
-  it("should handle empty props", () => {
-    const button = createVariants({
-      base: "m-4",
-    });
-
-    const result = button({});
-    expect(result.className).toBe("m-4");
-  });
-
-  it("should handle undefined variant values", () => {
-    const button = createVariants({
-      variants: {
-        color: {
-          primary: "bg-blue-500",
-        },
-      },
-    });
-
-    const result = button({ color: undefined });
-    expect(result.className).toBe("");
-  });
-
-  it("should handle variant option that does not exist", () => {
-    const button = createVariants({
-      variants: {
-        color: {
-          primary: "bg-blue-500",
-        },
-      },
-    });
-
-    // @ts-expect-error - Testing runtime behavior with invalid option
-    const result = button({ color: "nonexistent" });
-    expect(result.className).toBe("");
-  });
-
-  it("should handle whitespace in class strings", () => {
-    const button = createVariants({
-      base: "  m-4   p-2  ",
-    });
-
-    const result = button();
-    expect(result.className).toBe("m-4 p-2");
-  });
-
-  it("should handle multiple compound variants matching", () => {
-    const button = createVariants({
-      variants: {
-        color: {
-          primary: "bg-blue-500",
-        },
-        size: {
-          lg: "text-lg",
-        },
-        disabled: {
-          true: "opacity-50",
-        },
-      },
-      compoundVariants: [
-        { color: "primary", size: "lg", class: "font-bold" },
-        { color: "primary", disabled: true, class: "bg-blue-300" },
-      ],
-    });
-
-    const result = button({ color: "primary", size: "lg", disabled: true });
-    expect(result.className).toContain("font-bold");
-    expect(result.className).toContain("bg-blue-300");
-  });
-});
-
-describe("real-world examples", () => {
-  it("should handle a complete button component", () => {
-    const button = createVariants({
-      base: "font-semibold rounded-lg",
-      variants: {
-        intent: {
-          primary: "bg-blue-500 text-white",
-          secondary: "bg-white text-gray-800 border border-gray-200",
-          danger: "bg-red-500 text-white",
-        },
-        size: {
-          sm: "text-sm px-3 py-1",
-          md: "text-base px-4 py-2",
-          lg: "text-lg px-6 py-3",
-        },
-        fullWidth: {
-          true: "w-full",
-        },
-        disabled: {
-          true: "opacity-50",
-        },
-      },
-      compoundVariants: [
-        {
-          intent: "primary",
-          disabled: true,
-          class: "bg-blue-300",
-        },
-        {
-          intent: "danger",
-          disabled: true,
-          class: "bg-red-300",
-        },
-      ],
-      defaultVariants: {
-        intent: "primary",
-        size: "md",
-      },
-    });
-
-    // Default button
-    const defaultResult = button();
-    expect(defaultResult.className).toContain("bg-blue-500");
-    expect(defaultResult.className).toContain("text-base");
-
-    // Large danger button
-    const dangerResult = button({ intent: "danger", size: "lg" });
-    expect(dangerResult.className).toContain("bg-red-500");
-    expect(dangerResult.className).toContain("text-lg");
-
-    // Disabled primary button
-    const disabledResult = button({ disabled: true });
-    expect(disabledResult.className).toContain("opacity-50");
-    expect(disabledResult.className).toContain("bg-blue-300");
-  });
-
-  it("should handle a card component with slots", () => {
-    const card = createVariants({
-      slots: {
-        base: "rounded-xl overflow-hidden",
-        header: "p-4",
-        body: "p-4",
-        footer: "p-4",
-      },
-      variants: {
-        variant: {
-          elevated: "",
-          outlined: "",
-          filled: "",
-        },
-      },
-      compoundVariants: [
-        {
-          variant: "elevated",
-          class: {
-            base: "shadow-lg bg-white",
-          },
-        },
-        {
-          variant: "outlined",
-          class: {
-            base: "border border-gray-200 bg-white",
-          },
-        },
-        {
-          variant: "filled",
-          class: {
-            base: "bg-gray-100",
-          },
-        },
-      ],
-      defaultVariants: {
-        variant: "elevated",
-      },
-    });
-
-    const slots = card();
-    expect(slots.base().className).toContain("shadow-lg");
-    expect(slots.header().className).toBe("p-4");
-
-    const outlinedSlots = card({ variant: "outlined" });
-    expect(outlinedSlots.base().className).toContain("border");
-    expect(outlinedSlots.base().className).not.toContain("shadow-lg");
-  });
-});
diff --git a/src/variants/createVariants.ts b/src/variants/createVariants.ts
deleted file mode 100644
index 9c05cab..0000000
--- a/src/variants/createVariants.ts
+++ /dev/null
@@ -1,375 +0,0 @@
-/**
- * Core variant creation function
- * Provides a unified API compatible with both Tailwind Variants (tv) and CVA (cva)
- */
-
-import type { CustomTheme } from "../parser";
-import { parseClassName } from "../parser";
-import type {
-  CompoundVariant,
-  CvaConfig,
-  DefaultVariants,
-  SlotCompoundVariant,
-  SlotsDefinition,
-  SlotVariantResult,
-  VariantFunctionProps,
-  VariantResult,
-  VariantsConfig,
-  VariantsConfigWithSlots,
-  VariantsDefinition,
-  VariantValue,
-} from "./types";
-
-/**
- * Normalize a variant value to a string
- */
-function normalizeValue(value: VariantValue): string {
-  if (value === null || value === undefined) {
-    return "";
-  }
-  if (Array.isArray(value)) {
-    return value.filter(Boolean).join(" ");
-  }
-  return value;
-}
-
-/**
- * Merge class strings, deduplicating and preserving order
- */
-function mergeClasses(...classes: Array<string | undefined | null | false>): string {
-  const result: string[] = [];
-  const seen = new Set<string>();
-
-  for (const classStr of classes) {
-    if (!classStr) continue;
-    for (const cls of classStr.split(/\s+/)) {
-      if (cls && !seen.has(cls)) {
-        seen.add(cls);
-        result.push(cls);
-      }
-    }
-  }
-
-  return result.join(" ");
-}
-
-/**
- * Check if a compound variant condition matches
- */
-function matchesCompoundCondition<V extends VariantsDefinition>(
-  compound: CompoundVariant<V> | SlotCompoundVariant<SlotsDefinition, V>,
-  props: VariantFunctionProps<V>,
-  defaultVariants?: DefaultVariants<V>,
-): boolean {
-  for (const key of Object.keys(compound)) {
-    // Skip class/className keys
-    if (key === "class" || key === "className") continue;
-
-    const conditionValue = compound[key as keyof V];
-    const propValue = props[key as keyof V] ?? defaultVariants?.[key as keyof V];
-
-    // Handle array conditions (OR logic)
-    if (Array.isArray(conditionValue)) {
-      if (!conditionValue.includes(propValue as never)) {
-        return false;
-      }
-    } else {
-      // Direct comparison
-      if (conditionValue !== propValue) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-}
-
-/**
- * Get classes for a specific variant selection
- */
-function getVariantClasses<V extends VariantsDefinition>(
-  variants: V | undefined,
-  props: VariantFunctionProps<V>,
-  defaultVariants?: DefaultVariants<V>,
-): string {
-  if (!variants) return "";
-
-  const classes: string[] = [];
-
-  for (const [variantName, variantOptions] of Object.entries(variants)) {
-    // Get the selected option, falling back to default
-    const selectedOption = props[variantName as keyof V] ?? defaultVariants?.[variantName as keyof V];
-
-    if (selectedOption === undefined || selectedOption === null) continue;
-
-    // Handle boolean variants
-    const optionKey =
-      selectedOption === true ? "true" : selectedOption === false ? "false" : String(selectedOption);
-
-    const optionValue = variantOptions[optionKey];
-    if (optionValue !== undefined) {
-      classes.push(normalizeValue(optionValue));
-    }
-  }
-
-  return classes.filter(Boolean).join(" ");
-}
-
-/**
- * Get classes from compound variants
- */
-function getCompoundClasses<V extends VariantsDefinition>(
-  compoundVariants: Array<CompoundVariant<V>> | undefined,
-  props: VariantFunctionProps<V>,
-  defaultVariants?: DefaultVariants<V>,
-): string {
-  if (!compoundVariants) return "";
-
-  const classes: string[] = [];
-
-  for (const compound of compoundVariants) {
-    if (matchesCompoundCondition(compound, props, defaultVariants)) {
-      const compoundClass = compound.class ?? compound.className;
-      if (compoundClass) {
-        classes.push(normalizeValue(compoundClass));
-      }
-    }
-  }
-
-  return classes.filter(Boolean).join(" ");
-}
-
-/**
- * Type guard to check if config has slots
- */
-function hasSlots<S extends SlotsDefinition, V extends VariantsDefinition>(
-  config: VariantsConfig<V> | VariantsConfigWithSlots<S, V>,
-): config is VariantsConfigWithSlots<S, V> {
-  return "slots" in config && config.slots !== undefined;
-}
-
-/**
- * Create a variant function without slots
- */
-function createVariantFunction<V extends VariantsDefinition>(
-  config: VariantsConfig<V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => VariantResult {
-  const { base, variants, compoundVariants, defaultVariants } = config;
-
-  return (props: VariantFunctionProps<V> = {} as VariantFunctionProps<V>): VariantResult => {
-    // Compute class name
-    const baseClass = normalizeValue(base ?? null);
-    const variantClasses = getVariantClasses(variants, props, defaultVariants);
-    const compoundClasses = getCompoundClasses(compoundVariants, props, defaultVariants);
-    const overrideClass = props.class ?? props.className ?? "";
-
-    const className = mergeClasses(baseClass, variantClasses, compoundClasses, overrideClass);
-
-    // Parse to style object
-    const style = className ? parseClassName(className, customTheme) : {};
-
-    return { className, style };
-  };
-}
-
-/**
- * Create a variant function with slots
- */
-function createSlotVariantFunction<S extends SlotsDefinition, V extends VariantsDefinition>(
-  config: VariantsConfigWithSlots<S, V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => SlotVariantResult<S> {
-  const { slots, variants: _variants, compoundVariants, defaultVariants } = config;
-
-  return (props: VariantFunctionProps<V> = {} as VariantFunctionProps<V>): SlotVariantResult<S> => {
-    const result = {} as SlotVariantResult<S>;
-
-    for (const slotName of Object.keys(slots) as Array<keyof S>) {
-      result[slotName] = () => {
-        // Base slot classes
-        const baseClass = slots[slotName] ?? "";
-
-        // Collect variant classes for this slot
-        const variantClasses: string[] = [];
-
-        // Note: For slot variants, the variants structure would need to be:
-        // variants: { size: { sm: { base: '...', avatar: '...' } } }
-        // But that's a different structure than standard variants.
-        // We'll support both standard variants (applied to all slots) and
-        // check for slot-specific variant values
-
-        // Get standard variant classes (applied to all slots if not slot-specific)
-        // This is the simpler case where variants apply globally
-        // For slot-specific variants, users should use compoundVariants
-
-        // Compound variant slot classes
-        const compoundClasses: string[] = [];
-        if (compoundVariants) {
-          for (const compound of compoundVariants) {
-            if (matchesCompoundCondition(compound, props, defaultVariants)) {
-              const slotClass = (compound.class ?? compound.className) as
-                | { [K in keyof S]?: VariantValue }
-                | undefined;
-              if (slotClass && typeof slotClass === "object" && slotName in slotClass) {
-                const slotValue = slotClass[slotName];
-                if (slotValue) {
-                  compoundClasses.push(normalizeValue(slotValue));
-                }
-              }
-            }
-          }
-        }
-
-        const className = mergeClasses(baseClass, ...variantClasses, ...compoundClasses);
-        const style = className ? parseClassName(className, customTheme) : {};
-
-        return { className, style };
-      };
-    }
-
-    return result;
-  };
-}
-
-/**
- * Create a variants function (Tailwind Variants style)
- *
- * Supports:
- * - Base classes
- * - Variants with multiple options
- * - Boolean variants
- * - Compound variants (conditional styles based on multiple variant combinations)
- * - Default variants
- * - Slots (multi-part components)
- *
- * @example
- * ```typescript
- * // Simple variant (no slots)
- * const button = createVariants({
- *   base: 'font-semibold rounded-lg',
- *   variants: {
- *     color: {
- *       primary: 'bg-blue-500 text-white',
- *       secondary: 'bg-gray-200 text-gray-800',
- *     },
- *     size: {
- *       sm: 'text-sm px-3 py-1',
- *       md: 'text-base px-4 py-2',
- *       lg: 'text-lg px-6 py-3',
- *     },
- *     disabled: {
- *       true: 'opacity-50 cursor-not-allowed',
- *     },
- *   },
- *   compoundVariants: [
- *     { color: 'primary', disabled: true, class: 'bg-blue-300' },
- *   ],
- *   defaultVariants: {
- *     color: 'primary',
- *     size: 'md',
- *   },
- * });
- *
- * // Usage
- * const { className, style } = button({ color: 'secondary', size: 'lg' });
- * ```
- *
- * @example
- * ```typescript
- * // With slots
- * const card = createVariants({
- *   slots: {
- *     base: 'rounded-xl shadow-md',
- *     header: 'p-4 border-b',
- *     body: 'p-4',
- *     footer: 'p-4 border-t',
- *   },
- *   variants: {
- *     variant: {
- *       elevated: {},
- *       outlined: {},
- *     },
- *   },
- *   compoundVariants: [
- *     { variant: 'elevated', class: { base: 'shadow-lg' } },
- *     { variant: 'outlined', class: { base: 'border border-gray-200 shadow-none' } },
- *   ],
- * });
- *
- * // Usage
- * const slots = card({ variant: 'elevated' });
- * const { style: baseStyle } = slots.base();
- * const { style: headerStyle } = slots.header();
- * ```
- */
-export function createVariants<S extends SlotsDefinition, V extends VariantsDefinition>(
-  config: VariantsConfigWithSlots<S, V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => SlotVariantResult<S>;
-
-export function createVariants<V extends VariantsDefinition>(
-  config: VariantsConfig<V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => VariantResult;
-
-export function createVariants<S extends SlotsDefinition, V extends VariantsDefinition>(
-  config: VariantsConfig<V> | VariantsConfigWithSlots<S, V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => VariantResult | SlotVariantResult<S> {
-  if (hasSlots<S, V>(config)) {
-    return createSlotVariantFunction(config, customTheme);
-  }
-  return createVariantFunction(config, customTheme);
-}
-
-/**
- * Alias for createVariants - Tailwind Variants style
- */
-export const tv = createVariants;
-
-/**
- * CVA-style variant creation (base as first argument)
- *
- * @example
- * ```typescript
- * const button = cva('font-semibold rounded-lg', {
- *   variants: {
- *     intent: {
- *       primary: 'bg-blue-500 text-white',
- *       secondary: 'bg-gray-200 text-gray-800',
- *     },
- *     size: {
- *       sm: 'text-sm px-3 py-1',
- *       md: 'text-base px-4 py-2',
- *     },
- *   },
- *   defaultVariants: {
- *     intent: 'primary',
- *     size: 'md',
- *   },
- * });
- *
- * // Usage
- * const { className, style } = button({ intent: 'secondary' });
- * ```
- */
-export function cva<V extends VariantsDefinition>(
-  base: string | string[],
-  config?: CvaConfig<V>,
-  customTheme?: CustomTheme,
-): (props?: VariantFunctionProps<V>) => VariantResult {
-  return createVariants(
-    {
-      base,
-      ...config,
-    },
-    customTheme,
-  );
-}
-
-/**
- * Alias for cva - Class Variance Authority style
- * Also compatible with Tailwind Variants cv function
- */
-export const cv = cva;
diff --git a/src/variants/index.ts b/src/variants/index.ts
deleted file mode 100644
index fd6d746..0000000
--- a/src/variants/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Variants module - unified API for Tailwind Variants and CVA
- */
-
-export { createVariants, cv, cva, tv } from "./createVariants";
-export type {
-  CompoundVariant,
-  CvaConfig,
-  DefaultVariants,
-  ExtractVariantProps,
-  SlotCompoundVariant,
-  SlotVariantResult,
-  SlotVariants,
-  SlotsDefinition,
-  VariantFunctionProps,
-  VariantOptions,
-  VariantProps,
-  VariantResult,
-  VariantValue,
-  VariantsConfig,
-  VariantsConfigWithSlots,
-  VariantsDefinition,
-} from "./types";
diff --git a/src/variants/types.ts b/src/variants/types.ts
deleted file mode 100644
index c0ae383..0000000
--- a/src/variants/types.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Type definitions for the variants system
- * Supports both Tailwind Variants (tv) and CVA (cva) style APIs
- */
-
-import type { StyleObject } from "../types/core";
-
-/**
- * A single variant option value - can be a class string, array of classes, or null
- */
-export type VariantValue = string | string[] | null;
-
-/**
- * Variant options - maps option names to their class values
- * e.g., { small: 'text-sm', medium: 'text-base', large: 'text-lg' }
- */
-export type VariantOptions = Record<string, VariantValue>;
-
-/**
- * Variants definition - maps variant names to their options
- * e.g., { size: { small: 'text-sm', medium: 'text-base' }, color: { primary: 'bg-blue-500' } }
- */
-export type VariantsDefinition = Record<string, VariantOptions>;
-
-/**
- * Extract variant props from a variants definition
- */
-export type VariantProps<T extends VariantsDefinition> = {
-  [K in keyof T]?: keyof T[K] | boolean;
-};
-
-/**
- * Compound variant condition - applies classes when multiple variant conditions match
- */
-export type CompoundVariant<T extends VariantsDefinition> = {
-  [K in keyof T]?: keyof T[K] | Array<keyof T[K]> | boolean;
-} & {
-  class?: VariantValue;
-  className?: VariantValue;
-};
-
-/**
- * Default variants - fallback values when no variant is specified
- */
-export type DefaultVariants<T extends VariantsDefinition> = {
-  [K in keyof T]?: keyof T[K] | boolean;
-};
-
-/**
- * Slots definition - maps slot names to their base classes
- * e.g., { base: 'flex', avatar: 'w-12 h-12', content: 'flex-1' }
- */
-export type SlotsDefinition = Record<string, string>;
-
-/**
- * Slot variants - applies variant-specific classes to slots
- */
-export type SlotVariants<S extends SlotsDefinition, V extends VariantsDefinition> = {
-  [K in keyof V]?: {
-    [O in keyof V[K]]?: {
-      [Slot in keyof S]?: VariantValue;
-    };
-  };
-};
-
-/**
- * Slot compound variants
- */
-export type SlotCompoundVariant<S extends SlotsDefinition, V extends VariantsDefinition> = {
-  [K in keyof V]?: keyof V[K] | Array<keyof V[K]> | boolean;
-} & {
-  class?: {
-    [Slot in keyof S]?: VariantValue;
-  };
-  className?: {
-    [Slot in keyof S]?: VariantValue;
-  };
-};
-
-/**
- * Configuration for createVariants (without slots)
- */
-export type VariantsConfig<V extends VariantsDefinition> = {
-  base?: string | string[];
-  variants?: V;
-  compoundVariants?: Array<CompoundVariant<V>>;
-  defaultVariants?: DefaultVariants<V>;
-};
-
-/**
- * Configuration for createVariants (with slots)
- */
-export type VariantsConfigWithSlots<S extends SlotsDefinition, V extends VariantsDefinition> = {
-  slots: S;
-  variants?: V;
-  compoundVariants?: Array<SlotCompoundVariant<S, V>>;
-  defaultVariants?: DefaultVariants<V>;
-};
-
-/**
- * Props passed to the generated variant function
- */
-export type VariantFunctionProps<V extends VariantsDefinition> = VariantProps<V> & {
-  class?: string;
-  className?: string;
-};
-
-/**
- * Return type for variant function (without slots)
- */
-export type VariantResult = {
-  className: string;
-  style: StyleObject;
-};
-
-/**
- * Return type for variant function (with slots)
- */
-export type SlotVariantResult<S extends SlotsDefinition> = {
-  [K in keyof S]: () => VariantResult;
-};
-
-/**
- * CVA-style configuration (base as first argument)
- */
-export type CvaConfig<V extends VariantsDefinition> = {
-  variants?: V;
-  compoundVariants?: Array<CompoundVariant<V>>;
-  defaultVariants?: DefaultVariants<V>;
-};
-
-/**
- * Type helper to extract variant props from a variant function
- */
-export type ExtractVariantProps<T> = T extends (props?: infer P) => unknown
-  ? Omit<P, "class" | "className">
-  : never;

From 584fcdc0d104352875d3843eed35bc447c2a49c6 Mon Sep 17 00:00:00 2001
From: jonsherrard <jon@devular.com>
Date: Wed, 21 Jan 2026 23:30:43 +0000
Subject: [PATCH 3/3] add support for tailwind merge

---
 src/babel/plugin/state.ts                  |  52 +++-
 src/babel/plugin/visitors/program.ts       |   8 +-
 src/babel/plugin/visitors/variants.test.ts | 298 +++++++++++++++++++++
 src/babel/plugin/visitors/variants.ts      | 144 +++++-----
 src/babel/utils/variantProcessing.ts       | 100 ++++++-
 5 files changed, 515 insertions(+), 87 deletions(-)

diff --git a/src/babel/plugin/state.ts b/src/babel/plugin/state.ts
index 31464f9..e3c462d 100644
--- a/src/babel/plugin/state.ts
+++ b/src/babel/plugin/state.ts
@@ -11,6 +11,43 @@ import { extractCustomTheme } from "../config-loader.js";
 import { DEFAULT_CLASS_ATTRIBUTES, buildAttributeMatchers } from "../utils/attributeMatchers.js";
 import type { VariantFunctionEntry } from "../utils/variantProcessing.js";
 
+/**
+ * Types of class utilities we track and transform
+ *
+ * - "tv" / "cva": Variant function creators (create functions called later)
+ * - "twMerge": Class merger with conflict resolution
+ * - "twJoin" / "cx": Class joiners without conflict resolution
+ */
+export type ClassUtilityType = "tv" | "cva" | "twMerge" | "twJoin" | "cx";
+
+/**
+ * Tracked class utility import info
+ */
+export type TrackedClassUtility = {
+  type: ClassUtilityType;
+  originalName: string; // The actual import name (e.g., 'tv', 'twMerge')
+};
+
+/**
+ * Configuration for class utility imports to track
+ * Maps package name -> { exportName -> utilityType }
+ *
+ * Adding a new library or export is just one line here!
+ */
+export const CLASS_UTILITY_CONFIG: Record<string, Record<string, ClassUtilityType>> = {
+  "tailwind-variants": {
+    tv: "tv",
+  },
+  "class-variance-authority": {
+    cva: "cva",
+    cx: "cx", // Re-export of clsx for class concatenation
+  },
+  "tailwind-merge": {
+    twMerge: "twMerge", // Merge with conflict resolution
+    twJoin: "twJoin", // Join without conflict resolution (faster)
+  },
+};
+
 /**
  * Plugin options
  */
@@ -122,11 +159,11 @@ export type PluginState = PluginPass & {
   functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
   // Track function components that need windowDimensions hook injection
   functionComponentsNeedingWindowDimensions: Set<NodePath<BabelTypes.Function>>;
-  // Track tv/cva variant imports and definitions
-  tvImportNames: Set<string>;
-  cvaImportNames: Set<string>;
+  // Track class utility imports (tv, cva, twMerge, etc.)
+  // Maps local name -> { type, originalName }
+  classUtilityImports: Map<string, TrackedClassUtility>;
   variantFunctions: Map<string, VariantFunctionEntry>;
-  hasVariantDefinitions: boolean;
+  hasClassUtilityTransformations: boolean;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -187,10 +224,9 @@ export function createInitialState(
     reactNativeImportPath: undefined,
     functionComponentsNeedingColorScheme: new Set(),
     functionComponentsNeedingWindowDimensions: new Set(),
-    // Variant support (tv/cva)
-    tvImportNames: new Set(),
-    cvaImportNames: new Set(),
+    // Class utility support (tv, cva, twMerge)
+    classUtilityImports: new Map(),
     variantFunctions: new Map(),
-    hasVariantDefinitions: false,
+    hasClassUtilityTransformations: false,
   };
 }
diff --git a/src/babel/plugin/visitors/program.ts b/src/babel/plugin/visitors/program.ts
index 6c0d112..d04ae93 100644
--- a/src/babel/plugin/visitors/program.ts
+++ b/src/babel/plugin/visitors/program.ts
@@ -42,16 +42,16 @@ export function programExit(
     removeTwImports(path, t);
   }
 
-  // Remove variant imports and definitions if they were processed
-  if (state.hasVariantDefinitions) {
+  // Remove class utility imports and definitions if they were processed
+  if (state.hasClassUtilityTransformations) {
     removeVariantImports(path, state, t);
     removeVariantDefinitions(path, state, t);
   }
 
-  // If no classNames/variants were found and no hooks/imports needed, skip processing
+  // If no classNames/utilities were found and no hooks/imports needed, skip processing
   if (
     !state.hasClassNames &&
-    !state.hasVariantDefinitions &&
+    !state.hasClassUtilityTransformations &&
     !state.needsWindowDimensionsImport &&
     !state.needsColorSchemeImport &&
     !state.needsI18nManagerImport
diff --git a/src/babel/plugin/visitors/variants.test.ts b/src/babel/plugin/visitors/variants.test.ts
index 66adb7a..10dcc87 100644
--- a/src/babel/plugin/visitors/variants.test.ts
+++ b/src/babel/plugin/visitors/variants.test.ts
@@ -324,3 +324,301 @@ describe("variants visitor - edge cases", () => {
     expect(result).toContain("tv(");
   });
 });
+
+describe("class utilities visitor - twMerge()", () => {
+  describe("import tracking", () => {
+    it("should track twMerge import from tailwind-merge", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('px-2 py-1', 'p-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+
+      // Should remove tailwind-merge import
+      expect(result).not.toContain("tailwind-merge");
+      // Should have StyleSheet.create
+      expect(result).toContain("StyleSheet.create");
+      // Should have generated style reference
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should track aliased twMerge import", () => {
+      const code = `
+        import { twMerge as merge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={merge('px-2', 'px-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).not.toContain("tailwind-merge");
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("static class merging", () => {
+    it("should merge conflicting classes correctly", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('px-2 py-1', 'p-4')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+      // p-4 should win over px-2 py-1
+      expect(result).toContain("_twStyles");
+    });
+
+    it("should handle multiple string arguments", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('font-bold', 'text-lg', 'text-blue-500')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+
+    it("should handle single string argument", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button() {
+          return <button className={twMerge('p-4 font-bold')} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      expect(result).toContain("StyleSheet.create");
+    });
+  });
+
+  describe("dynamic values", () => {
+    it("should not transform calls with dynamic arguments", () => {
+      const code = `
+        import { twMerge } from 'tailwind-merge';
+
+        function Button({ extraClasses }) {
+          return <button className={twMerge('p-4', extraClasses)} />;
+        }
+      `;
+
+      const result = transform(code, undefined, true);
+      // Should preserve twMerge call since we can't resolve dynamic values
+      expect(result).toContain("twMerge(");
+    });
+  });
+});
+
+describe("class utilities visitor - twJoin()", () => {
+  it("should track twJoin import from tailwind-merge", () => {
+    const code = `
+      import { twJoin } from 'tailwind-merge';
+
+      function Button() {
+        return <button className={twJoin('px-2', 'py-1', 'bg-blue-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+
+    // Should remove tailwind-merge import
+    expect(result).not.toContain("tailwind-merge");
+    expect(result).toContain("StyleSheet.create");
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should join classes without conflict resolution", () => {
+    const code = `
+      import { twJoin } from 'tailwind-merge';
+
+      function Button() {
+        return <button className={twJoin('px-2', 'px-4')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // twJoin keeps both classes (unlike twMerge which resolves conflicts)
+  });
+});
+
+describe("class utilities visitor - cx()", () => {
+  it("should track cx import from class-variance-authority", () => {
+    const code = `
+      import { cx } from 'class-variance-authority';
+
+      function Button() {
+        return <button className={cx('px-2', 'py-1', 'bg-blue-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+
+    // Should remove class-variance-authority import
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).toContain("StyleSheet.create");
+    expect(result).toContain("_twStyles");
+  });
+
+  it("should handle cx with multiple string arguments", () => {
+    const code = `
+      import { cx } from 'class-variance-authority';
+
+      function Button() {
+        return <button className={cx('font-bold', 'text-lg', 'text-red-500')} />;
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+  });
+});
+
+describe("class utilities - mixed usage", () => {
+  it("should handle tv and twMerge in same file", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+      import { twMerge } from 'tailwind-merge';
+
+      const button = tv({
+        base: 'rounded-lg',
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={twMerge('text-sm', 'text-lg')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    // Both imports should be removed
+    expect(result).not.toContain("tailwind-variants");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle cva and twMerge in same file", () => {
+    const code = `
+      import { cva } from 'class-variance-authority';
+      import { twMerge } from 'tailwind-merge';
+
+      const button = cva('font-semibold', {
+        variants: {
+          size: { sm: 'text-sm', lg: 'text-lg' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'lg' })} />
+            <span className={twMerge('p-2', 'p-4')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle multiple imports from same library", () => {
+    const code = `
+      import { cva, cx } from 'class-variance-authority';
+
+      const button = cva('rounded-lg', {
+        variants: {
+          size: { sm: 'p-1', lg: 'p-4' },
+        },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={button({ size: 'sm' })} />
+            <span className={cx('text-sm', 'font-bold')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("class-variance-authority");
+  });
+
+  it("should handle twMerge and twJoin from same library", () => {
+    const code = `
+      import { twMerge, twJoin } from 'tailwind-merge';
+
+      function Component() {
+        return (
+          <div>
+            <button className={twMerge('px-2', 'px-4')} />
+            <span className={twJoin('text-sm', 'font-bold')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("tailwind-merge");
+  });
+
+  it("should handle all three libraries together", () => {
+    const code = `
+      import { tv } from 'tailwind-variants';
+      import { cva, cx } from 'class-variance-authority';
+      import { twMerge, twJoin } from 'tailwind-merge';
+
+      const tvButton = tv({
+        base: 'rounded',
+        variants: { size: { sm: 'p-1' } },
+      });
+
+      const cvaButton = cva('font-bold', {
+        variants: { color: { red: 'text-red-500' } },
+      });
+
+      function Component() {
+        return (
+          <div>
+            <button className={tvButton({ size: 'sm' })} />
+            <button className={cvaButton({ color: 'red' })} />
+            <span className={cx('a', 'b')} />
+            <span className={twMerge('c', 'd')} />
+            <span className={twJoin('e', 'f')} />
+          </div>
+        );
+      }
+    `;
+
+    const result = transform(code, undefined, true);
+    expect(result).toContain("StyleSheet.create");
+    expect(result).not.toContain("tailwind-variants");
+    expect(result).not.toContain("class-variance-authority");
+    expect(result).not.toContain("tailwind-merge");
+  });
+});
diff --git a/src/babel/plugin/visitors/variants.ts b/src/babel/plugin/visitors/variants.ts
index 47b7eab..21c0fa2 100644
--- a/src/babel/plugin/visitors/variants.ts
+++ b/src/babel/plugin/visitors/variants.ts
@@ -1,5 +1,5 @@
 /**
- * Visitors for tv() and cva() variant transformations
+ * Visitors for class utility transformations (tv, cva, twMerge)
  * Transforms variant function calls to pre-computed StyleSheet references
  */
 
@@ -11,39 +11,35 @@ import {
   extractCvaConfig,
   extractTvConfig,
   generateDynamicVariantExpression,
+  processClassJoinerCall,
   processVariantCallSite,
   processVariantDefinition,
 } from "../../utils/variantProcessing.js";
 import type { PluginState } from "../state.js";
+import { CLASS_UTILITY_CONFIG } from "../state.js";
 
 /**
- * Track tv/cva imports
+ * Track class utility imports (tv, cva, twMerge)
+ * Uses unified config to detect and track all supported utilities
  */
-export function variantImportVisitor(
+export function classUtilityImportVisitor(
   path: NodePath<BabelTypes.ImportDeclaration>,
   state: PluginState,
   t: typeof BabelTypes,
 ): void {
   const source = path.node.source.value;
+  const packageConfig = CLASS_UTILITY_CONFIG[source];
 
-  // Track tailwind-variants imports
-  if (source === "tailwind-variants") {
-    for (const spec of path.node.specifiers) {
-      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-        if (spec.imported.name === "tv") {
-          state.tvImportNames.add(spec.local.name);
-        }
-      }
-    }
-  }
+  if (!packageConfig) return;
 
-  // Track class-variance-authority imports
-  if (source === "class-variance-authority") {
-    for (const spec of path.node.specifiers) {
-      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-        if (spec.imported.name === "cva") {
-          state.cvaImportNames.add(spec.local.name);
-        }
+  for (const spec of path.node.specifiers) {
+    if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+      const utilityType = packageConfig[spec.imported.name];
+      if (utilityType) {
+        state.classUtilityImports.set(spec.local.name, {
+          type: utilityType,
+          originalName: spec.imported.name,
+        });
       }
     }
   }
@@ -51,6 +47,7 @@ export function variantImportVisitor(
 
 /**
  * Process variant function definitions (const button = tv({...}))
+ * Only processes tv and cva - twMerge is handled at call sites
  */
 export function variantDefinitionVisitor(
   path: NodePath<BabelTypes.VariableDeclarator>,
@@ -69,18 +66,13 @@ export function variantDefinitionVisitor(
   if (!t.isIdentifier(callExpr.callee)) return;
   const calleeName = callExpr.callee.name;
 
-  let type: "tv" | "cva" | null = null;
-  if (state.tvImportNames.has(calleeName)) {
-    type = "tv";
-  } else if (state.cvaImportNames.has(calleeName)) {
-    type = "cva";
-  }
-
-  if (!type) return;
+  const utility = state.classUtilityImports.get(calleeName);
+  // Only process tv and cva definitions (twMerge doesn't create variant functions)
+  if (!utility || (utility.type !== "tv" && utility.type !== "cva")) return;
 
   // Extract the config
   const config =
-    type === "tv" ? extractTvConfig(callExpr.arguments, t) : extractCvaConfig(callExpr.arguments, t);
+    utility.type === "tv" ? extractTvConfig(callExpr.arguments, t) : extractCvaConfig(callExpr.arguments, t);
 
   if (!config) {
     // Config couldn't be extracted statically
@@ -89,78 +81,89 @@ export function variantDefinitionVisitor(
   }
 
   // Process the variant definition
-  processVariantDefinition(variableName, type, config, state, parseClassName, generateStyleKey);
+  processVariantDefinition(variableName, utility.type, config, state, parseClassName, generateStyleKey);
 
-  // Mark that we have variant definitions
-  state.hasVariantDefinitions = true;
+  // Mark that we have transformations
+  state.hasClassUtilityTransformations = true;
 }
 
 /**
- * Process variant function call sites
- * e.g., button({ color: 'primary' }) or className={button({ color: 'primary' })}
+ * Process class utility call sites
+ * Handles both variant functions (tv/cva) and direct calls (twMerge)
  */
-export function variantCallVisitor(
+export function classUtilityCallVisitor(
   path: NodePath<BabelTypes.CallExpression>,
   state: PluginState,
   t: typeof BabelTypes,
 ): void {
-  // Check if this is a call to a tracked variant function
   if (!t.isIdentifier(path.node.callee)) return;
 
   const calleeName = path.node.callee.name;
-  const entry = state.variantFunctions.get(calleeName);
-
-  if (!entry) return;
 
-  // Try to process with static props
-  const success = processVariantCallSite(path, calleeName, entry, state, t);
+  // First check if this is a call to a tracked variant function (tv/cva result)
+  const variantEntry = state.variantFunctions.get(calleeName);
+  if (variantEntry) {
+    // Try to process with static props
+    const success = processVariantCallSite(path, calleeName, variantEntry, state, t);
 
-  if (!success) {
-    // Couldn't resolve statically - try dynamic transformation
-    const args = path.node.arguments;
+    if (!success) {
+      // Couldn't resolve statically - try dynamic transformation
+      const args = path.node.arguments;
 
-    if (args.length === 1 && t.isObjectExpression(args[0])) {
-      // Generate dynamic conditional expression
-      const dynamicExpr = generateDynamicVariantExpression(calleeName, entry, args[0], state, t);
+      if (args.length === 1 && t.isObjectExpression(args[0])) {
+        // Generate dynamic conditional expression
+        const dynamicExpr = generateDynamicVariantExpression(calleeName, variantEntry, args[0], state, t);
 
-      if (dynamicExpr) {
-        path.replaceWith(dynamicExpr);
-        return;
+        if (dynamicExpr) {
+          path.replaceWith(dynamicExpr);
+          state.hasClassUtilityTransformations = true;
+        }
       }
+    } else {
+      state.hasClassUtilityTransformations = true;
     }
+    return;
+  }
 
-    // Fall back: can't transform, leave as-is
-    // This will require runtime processing
+  // Check if this is a class joiner call (twMerge, twJoin, cx)
+  const utility = state.classUtilityImports.get(calleeName);
+  if (utility && (utility.type === "twMerge" || utility.type === "twJoin" || utility.type === "cx")) {
+    const success = processClassJoinerCall(path, utility.type, state, parseClassName, generateStyleKey, t);
+    if (success) {
+      state.hasClassUtilityTransformations = true;
+    }
   }
 }
 
 /**
- * Remove tv/cva imports after transformation
- * (Only if all usages were successfully transformed)
+ * Remove class utility imports after transformation
+ * Uses unified config to know which packages to check
  */
-export function removeVariantImports(
+export function removeClassUtilityImports(
   path: NodePath<BabelTypes.Program>,
   state: PluginState,
   t: typeof BabelTypes,
 ): void {
-  // Only remove if we have transformed variant definitions
-  if (!state.hasVariantDefinitions) return;
+  if (!state.hasClassUtilityTransformations) return;
+
+  const trackedPackages = Object.keys(CLASS_UTILITY_CONFIG);
 
   path.traverse({
     ImportDeclaration(importPath) {
       const source = importPath.node.source.value;
 
-      if (source === "tailwind-variants" || source === "class-variance-authority") {
-        // Check if all specifiers are tv/cva that we've processed
+      if (trackedPackages.includes(source)) {
+        const packageConfig = CLASS_UTILITY_CONFIG[source];
+
+        // Check if all specifiers are utilities we've tracked
         const remainingSpecifiers = importPath.node.specifiers.filter((spec) => {
           if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-            const name = spec.imported.name;
-            // Keep if it's not tv/cva or if we didn't process this import
-            if (name === "tv" && state.tvImportNames.has(spec.local.name)) {
-              return false; // Remove
-            }
-            if (name === "cva" && state.cvaImportNames.has(spec.local.name)) {
-              return false; // Remove
+            const importName = spec.imported.name;
+            const localName = spec.local.name;
+
+            // Remove if this is a tracked utility import
+            if (packageConfig[importName] && state.classUtilityImports.has(localName)) {
+              return false;
             }
           }
           return true; // Keep
@@ -185,7 +188,7 @@ export function removeVariantDefinitions(
   state: PluginState,
   t: typeof BabelTypes,
 ): void {
-  if (!state.hasVariantDefinitions) return;
+  if (!state.hasClassUtilityTransformations) return;
 
   path.traverse({
     VariableDeclaration(varDeclPath) {
@@ -209,3 +212,10 @@ export function removeVariantDefinitions(
     },
   });
 }
+
+// Export aliases for backward compatibility
+export {
+  removeClassUtilityImports as removeVariantImports,
+  classUtilityCallVisitor as variantCallVisitor,
+  classUtilityImportVisitor as variantImportVisitor,
+};
diff --git a/src/babel/utils/variantProcessing.ts b/src/babel/utils/variantProcessing.ts
index 2d16f7f..52eb37b 100644
--- a/src/babel/utils/variantProcessing.ts
+++ b/src/babel/utils/variantProcessing.ts
@@ -1,12 +1,12 @@
 /**
- * Utility functions for processing tv() and cva() variant calls
- * Uses the actual tailwind-variants and class-variance-authority libraries
- * at compile time to resolve variant class strings
+ * Utility functions for processing class utility calls (tv, cva, twMerge)
+ * Uses the actual libraries at compile time to resolve class strings
  */
 
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import { cva } from "class-variance-authority";
+import { cva, cx } from "class-variance-authority";
+import { twJoin, twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
 import type { CustomTheme } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
@@ -37,7 +37,15 @@ export type VariantConfig = {
 };
 
 /**
- * Plugin state interface for variant processing
+ * Tracked class utility import info (matches state.ts)
+ */
+export type TrackedClassUtility = {
+  type: "tv" | "cva" | "twMerge" | "twJoin" | "cx";
+  originalName: string;
+};
+
+/**
+ * Plugin state interface for class utility processing
  */
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface VariantProcessingState {
@@ -46,9 +54,8 @@ export interface VariantProcessingState {
   stylesIdentifier: string;
   // Track variant function definitions
   variantFunctions: Map<string, VariantFunctionEntry>;
-  // Track which imports are from tv/cva
-  tvImportNames: Set<string>;
-  cvaImportNames: Set<string>;
+  // Unified map of all tracked class utility imports
+  classUtilityImports: Map<string, TrackedClassUtility>;
 }
 
 /**
@@ -464,3 +471,80 @@ export function generateDynamicVariantExpression(
 
   return t.arrayExpression(elements);
 }
+
+/**
+ * Class joiner functions mapped by utility type
+ * - twMerge: Merges with conflict resolution (later classes win)
+ * - twJoin: Simple join without conflict resolution (faster)
+ * - cx: Alias for clsx, simple concatenation
+ */
+const CLASS_JOINERS: Record<"twMerge" | "twJoin" | "cx", (...classes: string[]) => string> = {
+  twMerge: (...classes) => twMerge(...classes),
+  twJoin: (...classes) => twJoin(...classes),
+  cx: (...classes) => cx(...classes),
+};
+
+/**
+ * Process a class joiner call site (twMerge, twJoin, cx)
+ * e.g., twMerge('px-2 py-1', 'p-4') -> _twStyles._merged_abc123
+ *
+ * Returns true if successful, false if dynamic/can't resolve
+ */
+export function processClassJoinerCall(
+  path: NodePath<BabelTypes.CallExpression>,
+  utilityType: "twMerge" | "twJoin" | "cx",
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): boolean {
+  const args = path.node.arguments;
+
+  // Extract all string arguments
+  const classStrings: string[] = [];
+
+  for (const arg of args) {
+    if (t.isStringLiteral(arg)) {
+      classStrings.push(arg.value);
+    } else if (t.isTemplateLiteral(arg) && arg.expressions.length === 0) {
+      // Static template literal with no expressions
+      classStrings.push(arg.quasis.map((q) => q.value.cooked ?? q.value.raw).join(""));
+    } else {
+      // Dynamic argument - can't resolve at compile time
+      return false;
+    }
+  }
+
+  if (classStrings.length === 0) {
+    return false;
+  }
+
+  // Use the appropriate joiner function at compile time
+  const joiner = CLASS_JOINERS[utilityType];
+  const mergedClasses = joiner(...classStrings);
+
+  if (!mergedClasses) {
+    return false;
+  }
+
+  // Parse to RN style
+  const styleObject = parseClassName(mergedClasses, state.customTheme);
+  const styleKey = generateStyleKey(mergedClasses);
+
+  // Register the style
+  state.styleRegistry.set(styleKey, styleObject);
+
+  // Replace the call with a style reference
+  path.replaceWith(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
+
+  return true;
+}
+
+// Backward compatibility alias
+export const processTwMergeCall = (
+  path: NodePath<BabelTypes.CallExpression>,
+  state: VariantProcessingState,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): boolean => processClassJoinerCall(path, "twMerge", state, parseClassName, generateStyleKey, t);