chore: merge main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-variants",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "🦄 Tailwindcss first-class variant API",
   "author": "Junior Garcia <[email protected]>",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "test:watch": "jest --watch --no-verbose"
   },
   "dependencies": {
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",

src/__tests__/transformer.test.ts

@@ -3,6 +3,7 @@ import type {WithTV, TVTransformer} from "../transformer";
 import {expect, describe, test} from "@jest/globals";
 
 import {tvTransformer, withTV} from "../transformer";
+import {tv} from "../index";
 
 type Mock = {
   withTV: WithTV;
@@ -318,6 +319,78 @@ describe("Responsive Variants", () => {
     expect(result).toBe(expectedContent(sourceCode, transformedContent));
   });
 
+  test("should return a transformed content (responsive default base with slot variant)", () => {
+    const sourceCode = `
+      import {tv} from "tailwind-variants";
+
+      const button = tv(
+        {
+          base: "w-fit",
+          slots: {
+            icon: "text-lg"
+          },
+          variants: {
+            size: {
+              sm: "w-[100px]",
+              md: "w-[200px]"
+            }
+          }
+        },
+        {
+          responsiveVariants: true
+        }
+      );
+    `;
+
+    const button = tv(
+      {
+        base: "w-fit",
+        slots: {
+          icon: "text-lg",
+        },
+        variants: {
+          size: {
+            sm: "w-[100px]",
+            md: "w-[200px]",
+          },
+        },
+      },
+      {
+        responsiveVariants: true,
+      },
+    );
+
+    const result = tvTransformer(sourceCode, defaultScreens);
+
+    const {base} = button({size: {initial: "sm", md: "md"}});
+
+    const transformedContent = [
+      {
+        size: {
+          sm: {
+            original: "w-[100px]",
+            sm: "sm:w-[100px]",
+            md: "md:w-[100px]",
+            lg: "lg:w-[100px]",
+            xl: "xl:w-[100px]",
+            "2xl": "2xl:w-[100px]",
+          },
+          md: {
+            original: "w-[200px]",
+            sm: "sm:w-[200px]",
+            md: "md:w-[200px]",
+            lg: "lg:w-[200px]",
+            xl: "xl:w-[200px]",
+            "2xl": "2xl:w-[200px]",
+          },
+        },
+      },
+    ];
+
+    expect(base()).toBe("md:w-[200px] w-[100px]");
+    expect(result).toBe(expectedContent(sourceCode, transformedContent));
+  });
+
   test("should return a transformed content (on-demand responsive variants - screens)", () => {
     const sourceCode = `
       import {tv} from "tailwind-variants";

src/__tests__/tv.test.ts

@@ -151,17 +151,33 @@ describe("Tailwind Variants (TV) - Default", () => {
           color: "red",
           class: "bg-red-500",
         },
+        {
+          isBig: false,
+          color: "red",
+          class: "underline",
+        },
       ],
     });
 
-    const result = h1({
-      isBig: true,
-      color: "red",
-    });
+    expect(
+      h1({
+        isBig: true,
+        color: "red",
+      }),
+    ).toHaveClass(["text-5xl", "font-bold", "text-red-500", "bg-red-500"]);
 
-    const expectedResult = ["text-5xl", "font-bold", "text-red-500", "bg-red-500"];
+    expect(
+      h1({
+        isBig: false,
+        color: "red",
+      }),
+    ).toHaveClass(["text-2xl", "font-bold", "text-red-500", "underline"]);
 
-    expect(result).toHaveClass(expectedResult);
+    expect(
+      h1({
+        color: "red",
+      }),
+    ).toHaveClass(["text-2xl", "font-bold", "text-red-500", "underline"]);
   });
 
   test("should throw error if the compoundVariants is not an array", () => {

src/index.js

@@ -235,6 +235,10 @@ export const tv = (options, configProp) => {
       if (screenValues.length > 0) {
         screenValues.push(value);
 
+        if (slotKey === "base") {
+          return screenValues.join(" ");
+        }
+
         return screenValues;
       }
 
@@ -303,15 +307,19 @@ export const tv = (options, configProp) => {
         let isValid = true;
 
         for (const [key, value] of Object.entries(compoundVariantOptions)) {
-          const completeProps = getCompleteProps(key, slotProps);
+          const completePropsValue = getCompleteProps(key, slotProps)[key];
 
           if (Array.isArray(value)) {
-            if (!value.includes(completeProps[key])) {
+            if (!value.includes(completePropsValue)) {
               isValid = false;
               break;
             }
           } else {
-            if (completeProps[key] !== value) {
+            const isBlankOrFalse = (v) => v == null || v === false;
+
+            if (isBlankOrFalse(value) && isBlankOrFalse(completePropsValue)) continue;
+
+            if (completePropsValue !== value) {
               isValid = false;
               break;
             }