fix(slots): extendVariants fn to support slots

apps/docs/content/docs/customization/custom-variants.mdx

@@ -5,7 +5,7 @@ description: Learn how to create new variants for the HeroUI components.
 
 # Custom Variants
 
-HeroUI allows you to create new variants for components by extending and customizing their styles. You can override the component's `variants`, `defaultVariants` and `compoundVariants`.
+HeroUI allows you to create new variants for components by extending and customizing their styles. You can override the component's `variants`, `defaultVariants`, `compoundVariants`, and `slots`.
 
 <CarbonAd/>
 
@@ -215,6 +215,25 @@ import customVariantsSlots from "@/content/customization/custom-variants/slots-c
   Use the `Styles source` link at the top of each component page to view its source code as a reference for customization.
 </Blockquote>
 
+## Overriding base component slots
+
+You can also override base component slots directly using the `slots` option. This is useful when you want to apply styles to specific slots globally, regardless of variants. Variant-based slot overrides will still work and will be merged with the base slots.
+
+```tsx
+// MyInput.tsx
+import {extendVariants, Input} from "@heroui/react";
+
+const MyInput = extendVariants(Input, {
+  slots: {
+    label: "!font-medium", // Override the label slot globally
+  },
+});
+
+// Usage
+<MyInput label="My label" labelPlacement="outside-top" />
+```
+
+
 ### Types
 
 ### Main Function
@@ -236,6 +255,7 @@ type ExtendVariantsOptions = {
   variants?: Record<string, Record<string, ClassValue>>;
   defaultVariants?: Record<string, ClassValue>;
   compoundVariants?: Array<Record<string, string> & ClassProp>;
+  slots?: Record<string, ClassValue>;
 };
 ```
 

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

@@ -253,4 +253,75 @@ describe("extendVariants function - with slots", () => {
     expect(baseEl).toHaveClass("shadow-xs");
     expect(headerEl).toHaveClass("rounded-none");
   });
+
+  test("should override base component slots with direct slots option", () => {
+    const Card2 = extendVariants(Card, {
+      slots: {
+        header: "!font-bold !text-lg",
+        footer: "!bg-red-500",
+      },
+    });
+
+    const {getByTestId} = render(<Card2>Card Content</Card2>);
+
+    const headerEl = getByTestId("header");
+    const footerEl = getByTestId("footer");
+
+    expect(headerEl).toHaveClass("!font-bold");
+    expect(headerEl).toHaveClass("!text-lg");
+    expect(footerEl).toHaveClass("!bg-red-500");
+  });
+
+  test("should merge direct slots with variant-based slots", () => {
+    const Card2 = extendVariants(Card, {
+      slots: {
+        header: "!font-bold",
+      },
+      variants: {
+        shadow: {
+          xl: {
+            base: "shadow-xl",
+          },
+        },
+      },
+      defaultVariants: {
+        shadow: "xl",
+      },
+    });
+
+    const {getByTestId} = render(<Card2>Card Content</Card2>);
+
+    const baseEl = getByTestId("base");
+    const headerEl = getByTestId("header");
+
+    expect(baseEl).toHaveClass("shadow-xl");
+    expect(headerEl).toHaveClass("!font-bold");
+  });
+
+  test("direct slots should override variant-based slots for the same slot", () => {
+    const Card2 = extendVariants(Card, {
+      slots: {
+        base: "!bg-blue-500",
+      },
+      variants: {
+        shadow: {
+          xl: {
+            base: "shadow-xl",
+          },
+        },
+      },
+      defaultVariants: {
+        shadow: "xl",
+      },
+    });
+
+    const {getByTestId} = render(<Card2>Card Content</Card2>);
+
+    const baseEl = getByTestId("base");
+
+    // Direct slots should be applied
+    expect(baseEl).toHaveClass("!bg-blue-500");
+    // Variant-based slots should also be applied (they merge)
+    expect(baseEl).toHaveClass("shadow-xl");
+  });
 });

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

@@ -102,9 +102,12 @@ function getClassNamesWithProps({
 }
 
 export function extendVariants(BaseComponent, styles = {}, opts = {}) {
-  const {variants, defaultVariants, compoundVariants} = styles || {};
+  const {variants, defaultVariants, compoundVariants, slots: directSlots} = styles || {};
+
+  const inferredSlots = getSlots(variants);
+
+  const slots = directSlots ? {...inferredSlots, ...directSlots} : inferredSlots;
 
-  const slots = getSlots(variants);
   const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
 
   const ForwardedComponent = React.forwardRef((originalProps = {}, ref) => {