feat: add support for slot level variant overrides

nextui-org · Jul 26, 2023 · b8f2cff · b8f2cff
1 parent a8e0293
commit b8f2cff
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -691,6 +691,37 @@ 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"]);
+  });
 });
 
 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 = {

diff --git a/src/index.js b/src/index.js
@@ -142,14 +142,14 @@ export const tv = (options, configProp) => {
       return result;
     };
 
-    const getVariantValue = (variant, vrs = variants, slotKey = null) => {
+    const getVariantValue = (variant, vrs = variants, slotKey = null, slotProps = null) => {
       const variantObj = vrs?.[variant];
 
       if (!variantObj || isEmptyObject(variantObj)) {
         return null;
       }
 
-      const variantProp = props?.[variant];
+      const variantProp = slotProps?.[variant] ?? props?.[variant];
 
       if (variantProp === null) return null;
 
@@ -207,13 +207,13 @@ export const tv = (options, configProp) => {
       return Object.keys(variants).map((vk) => getVariantValue(vk, variants));
     };
 
-    const getVariantClassNamesBySlotKey = (slotKey) => {
+    const getVariantClassNamesBySlotKey = (slotKey, slotProps) => {
       if (!variants || typeof variants !== "object") {
         return null;
       }
 
       return Object.keys(variants).reduce((acc, variant) => {
-        const variantValue = getVariantValue(variant, variants, slotKey);
+        const variantValue = getVariantValue(variant, variants, slotKey, slotProps);
 
         const value =
           slotKey === "base" && typeof variantValue === "string"
@@ -336,7 +336,7 @@ export const tv = (options, configProp) => {
               acc[slotKey] = (slotProps) =>
                 cn(
                   slots[slotKey],
-                  getVariantClassNamesBySlotKey(slotKey),
+                  getVariantClassNamesBySlotKey(slotKey, slotProps),
                   compoundClassNames?.[slotKey],
                   compoundSlotClassNames?.[slotKey],
                   slotProps?.class,