feat: Add support for slot level variant overrides (#82)

* chore: update `packageManager` key to fix build * feat: add support for slot level variant overrides * chore: optimized performance --------- Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
nextui-org · Sep 2, 2023 · 9e6ed81 · 9e6ed81
1 parent 0fa67e3
commit 9e6ed81
Show file tree

Hide file tree

Showing 5 changed files with 270 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -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,119 @@ 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 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
@@ -206,8 +206,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 = {