Merge remote-tracking branch 'origin' into fix-tsconfig-add-exactOpti…

…onalPropertyTypes
nextui-org · Sep 20, 2023 · b603611 · b603611
2 parents 8a5dbad + ae40db4
commit b603611
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-variants",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "🦄 Tailwindcss first-class variant API",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "license": "MIT",
@@ -96,7 +96,7 @@
       "esm"
     ]
   },
-  "packageManager": "pnpm@8.3.1",
+  "packageManager": "pnpm@8.6.8",
   "engines": {
     "node": ">=16.x",
     "pnpm": ">=7.x"

diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -691,6 +691,148 @@ describe("Tailwind Variants (TV) - Slots", () => {
     expectTv(list(), ["list-none", "color--secondary-list", "compound--list"]);
     expectTv(wrapper(), ["flex", "flex-col", "color--secondary-wrapper", "compound--wrapper"]);
   });
+
+  test("should support slot level variant overrides", () => {
+    const menu = tv({
+      base: "text-3xl",
+      slots: {
+        title: "text-2xl",
+      },
+      variants: {
+        color: {
+          primary: {
+            base: "color--primary-base",
+            title: "color--primary-title",
+          },
+          secondary: {
+            base: "color--secondary-base",
+            title: "color--secondary-title",
+          },
+        },
+      },
+      defaultVariants: {
+        color: "primary",
+      },
+    });
+
+    const {base, title} = menu();
+
+    expectTv(base(), ["text-3xl", "color--primary-base"]);
+    expectTv(title(), ["text-2xl", "color--primary-title"]);
+    expectTv(base({color: "secondary"}), ["text-3xl", "color--secondary-base"]);
+    expectTv(title({color: "secondary"}), ["text-2xl", "color--secondary-title"]);
+  });
+
+  test("should support slot level variant overrides - compoundSlots", () => {
+    const menu = tv({
+      base: "text-3xl",
+      slots: {
+        title: "text-2xl",
+        subtitle: "text-xl",
+      },
+      variants: {
+        color: {
+          primary: {
+            base: "color--primary-base",
+            title: "color--primary-title",
+            subtitle: "color--primary-subtitle",
+          },
+          secondary: {
+            base: "color--secondary-base",
+            title: "color--secondary-title",
+            subtitle: "color--secondary-subtitle",
+          },
+        },
+      },
+      compoundSlots: [
+        {
+          slots: ["title", "subtitle"],
+          color: "secondary",
+          class: ["truncate"],
+        },
+      ],
+      defaultVariants: {
+        color: "primary",
+      },
+    });
+
+    const {base, title, subtitle} = menu();
+
+    expectTv(base(), ["text-3xl", "color--primary-base"]);
+    expectTv(title(), ["text-2xl", "color--primary-title"]);
+    expectTv(subtitle(), ["text-xl", "color--primary-subtitle"]);
+    expectTv(base({color: "secondary"}), ["text-3xl", "color--secondary-base"]);
+    expectTv(title({color: "secondary"}), ["text-2xl", "color--secondary-title", "truncate"]);
+    expectTv(subtitle({color: "secondary"}), ["text-xl", "color--secondary-subtitle", "truncate"]);
+  });
+
+  test("should support slot level variant and array variants overrides - compoundSlots", () => {
+    const menu = tv({
+      slots: {
+        base: "flex flex-wrap",
+        cursor: ["absolute", "flex", "overflow-visible"],
+      },
+      variants: {
+        size: {
+          xs: {},
+          sm: {},
+        },
+      },
+      compoundSlots: [
+        {
+          slots: ["base"],
+          size: ["xs", "sm"],
+          class: "w-7 h-7 text-xs",
+        },
+      ],
+    });
+
+    const {base, cursor} = menu();
+
+    expect(base()).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({size: "xs"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({size: "sm"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(cursor()).toEqual("absolute flex overflow-visible");
+  });
+
+  test("should support slot level variant overrides - compoundVariants", () => {
+    const menu = tv({
+      base: "text-3xl",
+      slots: {
+        title: "text-2xl",
+      },
+      variants: {
+        color: {
+          primary: {
+            base: "color--primary-base",
+            title: "color--primary-title",
+          },
+          secondary: {
+            base: "color--secondary-base",
+            title: "color--secondary-title",
+          },
+        },
+      },
+      compoundVariants: [
+        {
+          color: "secondary",
+          class: {
+            title: "truncate",
+          },
+        },
+      ],
+      defaultVariants: {
+        color: "primary",
+      },
+    });
+
+    const {base, title} = menu();
+
+    expectTv(base(), ["text-3xl", "color--primary-base"]);
+    expectTv(title(), ["text-2xl", "color--primary-title"]);
+    expectTv(base({color: "secondary"}), ["text-3xl", "color--secondary-base"]);
+    expectTv(title({color: "secondary"}), ["text-2xl", "color--secondary-title", "truncate"]);
+  });
 });
 
 describe("Tailwind Variants (TV) - Compound Slots", () => {

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,3 +1,5 @@
+import type {ClassNameValue as ClassValue} from "tailwind-merge";
+
 import {TVConfig, TWMConfig} from "./config";
 import {TVGeneratedScreens} from "./generated";
 
@@ -7,7 +9,7 @@ import {TVGeneratedScreens} from "./generated";
  * ----------------------------------------
  */
 
-export type ClassValue = string | string[] | null | undefined | ClassValue[];
+export type {ClassValue};
 
 export type ClassProp<V extends unknown = ClassValue> =
   | {
@@ -206,8 +208,8 @@ export type TVReturnType<
   (props?: TVProps<V, S, C, EV, ES>): ES extends undefined
     ? S extends undefined
       ? string
-      : {[K in TVSlotsWithBase<S, B>]: (slotProps?: ClassProp) => string}
-    : {[K in TVSlotsWithBase<ES & S, B>]: (slotProps?: ClassProp) => string};
+      : {[K in TVSlotsWithBase<S, B>]: (slotProps?: TVProps<V, S, C, EV, ES>) => string}
+    : {[K in TVSlotsWithBase<ES & S, B>]: (slotProps?: TVProps<V, S, C, EV, ES>) => string};
 } & TVReturnProps<V, S, B, EV, ES, E>;
 
 export type TV = {