fix(system-rsc): extendVariants Fix/compound variants types

.changeset/four-guests-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@heroui/system-rsc": minor
+---
+
+fix(system-rsc): correct slot detection in getSlots() to ensure proper slot key extraction and consistent compoundVariants behavior.

.changeset/nine-apes-remain.md

@@ -0,0 +1,5 @@
+---
+"@heroui/system-rsc": major
+---
+
+fix(system-rsc): correct type inference in extendVariants and CompoundVariants

packages/core/system-rsc/__tests__/extend-variants.test.tsx

@@ -1,4 +1,4 @@
-import type {ExtendVariantProps} from "../src/extend-variants";
+import type {ExtendVariantProps, ExtendVariantWithSlotsProps} from "../src/extend-variants";
 
 import React from "react";
 import {render, screen} from "@testing-library/react";
@@ -37,7 +37,7 @@ const createExtendNoSlotsComponent = (styles: ExtendVariantProps = {}) =>
     ],
   });
 
-const createExtendSlotsComponent = () =>
+const createExtendSlotsComponent = (styles: ExtendVariantWithSlotsProps = {}) =>
   extendVariants(Card, {
     variants: {
       shadow: {
@@ -73,6 +73,19 @@ const createExtendSlotsComponent = () =>
       shadow: "xl",
       radius: "xl",
     },
+    compoundVariants: styles?.compoundVariants ?? [
+      {
+        shadow: "none",
+        radius: "none",
+        class: "rounded-sm",
+      },
+      {
+        shadow: "none",
+        class: {
+          header: "scale-75",
+        },
+      },
+    ],
   });
 
 describe("extendVariants function - no slots", () => {
@@ -253,4 +266,50 @@ describe("extendVariants function - with slots", () => {
     expect(baseEl).toHaveClass("shadow-xs");
     expect(headerEl).toHaveClass("rounded-none");
   });
+
+  test("should include the compound variant styles - extended", () => {
+    const Card2 = createExtendSlotsComponent();
+
+    const {getByTestId} = render(
+      <Card2 radius="none" shadow="none">
+        Card Content
+      </Card2>,
+    );
+
+    const baseEl = getByTestId("base");
+    const headerEl = getByTestId("header");
+
+    expect(baseEl).toHaveClass("rounded-sm");
+    expect(headerEl).toHaveClass("scale-75");
+  });
+
+  test("should include the compound variant styles - original", () => {
+    const Card2 = createExtendSlotsComponent({
+      compoundVariants: [
+        {
+          shadow: "none",
+          radius: "sm",
+          class: "rounded-xl",
+        },
+        {
+          radius: "sm",
+          class: {
+            header: "scale-150",
+          },
+        },
+      ],
+    });
+
+    const {getByTestId} = render(
+      <Card2 radius="sm" shadow="none">
+        Card Content
+      </Card2>,
+    );
+
+    const baseEl = getByTestId("base");
+    const headerEl = getByTestId("header");
+
+    expect(baseEl).toHaveClass("rounded-xl");
+    expect(headerEl).toHaveClass("scale-150");
+  });
 });

packages/core/system-rsc/src/extend-variants.d.ts

@@ -1,17 +1,12 @@
 import type {ClassValue, StringToBoolean, OmitUndefined, ClassProp} from "tailwind-variants";
-import type {
-  ForwardRefExoticComponent,
-  JSXElementConstructor,
-  PropsWithoutRef,
-  RefAttributes,
-} from "react";
+import type {ForwardRefExoticComponent, JSXElementConstructor, RefAttributes} from "react";
 
 type SlotsClassValue<S> = {
   [K in keyof S]?: ClassValue;
 };
 
 type Variants<S> = {
-  [K: string]: {[P: string]: S extends undefined ? ClassValue : SlotsClassValue<S>};
+  [K: string]: {[P: string]: GetSuggestedValues<S>};
 };
 
 type ComponentProps<C> = C extends JSXElementConstructor<infer P> ? P : never;
@@ -20,7 +15,7 @@ type ComponentSlots<CP> = CP extends {classNames?: infer S} ? S : undefined;
 
 type ValidateSubtype<T, U> = OmitUndefined<T> extends U ? "true" : "false";
 
-type GetSuggestedValues<S> = S extends undefined ? ClassValue : SlotsClassValue<S>;
+type GetSuggestedValues<S> = ClassValue | (S extends undefined ? never : SlotsClassValue<S>);
 
 type SuggestedVariants<CP, S> = {
   [K in keyof CP]?: ValidateSubtype<CP[K], string> extends "true"
@@ -48,7 +43,7 @@ type VariantValue<V, SV> = {
 
 type DefaultVariants<V, SV> = VariantValue<V, SV>;
 
-type CompoundVariants<V, SV> = Array<VariantValue<V, SV> & ClassProp<ClassValue>>;
+type CompoundVariants<V, SV, S> = Array<VariantValue<V, SV> & ClassProp<GetSuggestedValues<S>>>;
 
 type Options = {
   /**
@@ -92,7 +87,7 @@ export type ExtendVariants = {
     V extends ComposeVariants<CP, S>,
     SV extends SuggestedVariants<CP, S>,
     DV extends DefaultVariants<V, SV>,
-    CV extends CompoundVariants<V, SV>,
+    CV extends CompoundVariants<V, SV, ComponentSlots<CP>>,
   >(
     BaseComponent: C,
     styles: {
@@ -103,12 +98,11 @@ export type ExtendVariants = {
     },
     opts?: Options,
   ): ForwardRefExoticComponent<
-    PropsWithoutRef<
-      CP & {
-        [key in keyof V]?: StringToBoolean<keyof V[key]>;
-      }
-    > &
-      RefAttributes<InferRef<C>>
+    {
+      [key in Exclude<keyof CP | keyof V, "ref">]?:
+        | (key extends keyof CP ? CP[key] : never)
+        | (key extends keyof V ? StringToBoolean<keyof NonNullable<V[key]>> : never);
+    } & RefAttributes<InferRef<C>>
   >;
 };
 

packages/core/system-rsc/src/extend-variants.js

@@ -4,22 +4,40 @@ import clsx from "clsx";
 
 import {mapPropsVariants} from "./utils";
 
+/**
+ * Extracts slot names from variant configurations.
+ * Traverses: variants -> variant groups -> variant configs -> slot names
+ * @param {Object} variants - Nested object: { variantName: { value: { slotName: "...", ... } } }
+ * @returns {Object} Map of slot names to empty strings
+ */
 function getSlots(variants) {
-  return variants
-    ? Object.values(variants)
-        .flatMap(Object.values)
-        .reduce((acc, slot) => {
-          if (typeof slot === "object" && slot !== null && !(slot instanceof String)) {
-            Object.keys(slot).forEach((key) => {
-              if (!acc.hasOwnProperty(key)) {
-                acc[key] = "";
-              }
-            });
-          }
-
-          return acc;
-        }, {})
-    : {};
+  if (!variants || typeof variants !== "object") return {};
+
+  const acc = Object.create(null);
+
+  for (const group of Object.values(variants)) {
+    if (!group || typeof group !== "object") continue;
+
+    for (const config of Object.values(group)) {
+      // Skip non-objects, arrays (which would yield numeric indices), and String objects
+      if (
+        !config ||
+        typeof config !== "object" ||
+        Array.isArray(config) ||
+        config instanceof String
+      ) {
+        continue;
+      }
+
+      for (const slotName of Object.keys(config)) {
+        if (!Object.prototype.hasOwnProperty.call(acc, slotName)) {
+          acc[slotName] = "";
+        }
+      }
+    }
+  }
+
+  return acc;
 }
 
 function getClassNamesWithProps({