fix: rename wrapper to tab wrapper (#4636)

* fix: rename wrapper to tab wrapper

* docs: update

* docs: update

* docs: update

* fix: rename wrapper to tab wrapper

.changeset/dull-ladybugs-whisper.md

@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+Fix tabs slots "wrapper" rename to "tabWrapper" -- Breaking Change (#4552)

apps/docs/content/docs/components/tabs.mdx

@@ -199,6 +199,7 @@ function AppTabs() {
 - **tabContent**: The tab content slot, it wraps the tab content.
 - **cursor**: The cursor slot, it wraps the cursor. This is only visible when `disableAnimation=false`
 - **panel**: The panel slot, it wraps the tab panel (content).
+- **tabWrapper**: The tab wrapper slot, it wraps the tab and the tab content.
 
 ### Custom Styles
 
@@ -343,7 +344,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
     },
     {
       attribute: "classNames",
-      type: "Partial<Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\", string>>",
+      type: "Partial<Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\" ｜ \"tabWrapper\", string>>",
       description: "Allows to set custom class names for the card slots.",
       default: "-"
     },

packages/components/tabs/src/use-tabs.ts

@@ -171,7 +171,7 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
   const getWrapperProps: PropGetter = useCallback(
     (props) => ({
       "data-slot": "tabWrapper",
-      className: slots.wrapper({class: clsx(classNames?.wrapper, props?.className)}),
+      className: slots.tabWrapper({class: clsx(classNames?.tabWrapper, props?.className)}),
       "data-placement": placement,
       "data-vertical":
         isVertical || placement === "start" || placement === "end" ? "vertical" : "horizontal",

packages/core/theme/src/components/tabs.ts

@@ -72,7 +72,7 @@ const tabs = tv({
       // focus ring
       ...dataFocusVisibleClasses,
     ],
-    wrapper: [],
+    tabWrapper: [],
   },
   variants: {
     variant: {
@@ -166,15 +166,15 @@ const tabs = tv({
       start: {
         tabList: "flex-col",
         panel: "py-0 px-3",
-        wrapper: "flex",
+        tabWrapper: "flex",
       },
       end: {
         tabList: "flex-col",
         panel: "py-0 px-3",
-        wrapper: "flex flex-row-reverse",
+        tabWrapper: "flex flex-row-reverse",
       },
       bottom: {
-        wrapper: "flex flex-col-reverse",
+        tabWrapper: "flex flex-col-reverse",
       },
     },
   },