0.79.4 - Fix Tabs components replacing default styles when className is passed

TabsList, TabsTrigger, and TabsContent set the merged className first and
then spread ...props (which still contained className) after it, so a
consumer-supplied className overwrote the cn() merge and replaced the
component's default styling entirely instead of extending it.

Destructure className out of props before spreading, matching the Button
convention. Consumer classes now merge on top of the defaults via
cn()/tailwind-merge (e.g. h-auto overrides the default h-9). Adds a
ClassNameMergesWithDefaults regression story with a play() interaction test.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SpKGc3TCkeEdNXmDSnuVCX

Author: claude

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.79.3",
+  "version": "0.79.4",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",

src/components/ui/tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-// import { fn } from "storybook/test";
+import { expect, waitFor } from "storybook/test";
 
 import type { ReactElement } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
@@ -96,3 +96,82 @@ type Story = StoryObj<typeof meta>;
 export const Example: Story = {
   args: {},
 };
+
+/**
+ * Regression test for the `className` override bug.
+ *
+ * `TabsList`, `TabsTrigger`, and `TabsContent` used to spread `...props` (which
+ * still contained `className`) *after* setting the merged `className`, so a
+ * consumer-supplied `className` replaced the component's default styling
+ * entirely instead of extending it. For example `<TabsList className="flex-wrap
+ * h-auto">` rendered with only `flex-wrap h-auto` — no `bg-muted`, no
+ * `rounded-lg`, no padding.
+ *
+ * After destructuring `className` out of `props`, the custom classes are merged
+ * on top of the defaults via `cn()`/tailwind-merge: non-conflicting defaults
+ * survive and conflicting ones (e.g. `h-9`) are overridden by the custom class
+ * (`h-auto`).
+ */
+export const ClassNameMergesWithDefaults: Story = {
+  render: (): ReactElement => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="flex-wrap h-auto">
+        <TabsTrigger value="account" className="uppercase">
+          Account
+        </TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account" className="border">
+        Account panel
+      </TabsContent>
+      <TabsContent value="password">Password panel</TabsContent>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }): Promise<void> => {
+    const list = await waitFor((): HTMLElement => {
+      const el = canvasElement.querySelector<HTMLElement>('[role="tablist"]');
+      if (el === null) {
+        throw new Error("tablist has not rendered yet");
+      }
+      return el;
+    });
+
+    // Default TabsList styles survive the custom className...
+    for (const cls of [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "bg-muted",
+      "p-1",
+      "text-muted-foreground",
+    ]) {
+      expect(list.classList.contains(cls)).toBe(true);
+    }
+    // ...the custom classes are added...
+    expect(list.classList.contains("flex-wrap")).toBe(true);
+    expect(list.classList.contains("h-auto")).toBe(true);
+    // ...and the conflicting default (`h-9`) is dropped by tailwind-merge.
+    expect(list.classList.contains("h-9")).toBe(false);
+
+    // TabsTrigger merges the same way.
+    const trigger = canvasElement.querySelector<HTMLElement>(
+      '[role="tab"][data-state="active"]',
+    );
+    expect(trigger).not.toBeNull();
+    expect(trigger!.classList.contains("uppercase")).toBe(true);
+    for (const cls of ["inline-flex", "rounded-md", "text-sm", "font-medium"]) {
+      expect(trigger!.classList.contains(cls)).toBe(true);
+    }
+
+    // TabsContent merges the same way.
+    const panel = canvasElement.querySelector<HTMLElement>(
+      '[role="tabpanel"]',
+    );
+    expect(panel).not.toBeNull();
+    expect(panel!.classList.contains("border")).toBe(true);
+    for (const cls of ["mt-2", "ring-offset-background"]) {
+      expect(panel!.classList.contains(cls)).toBe(true);
+    }
+  },
+};

src/components/ui/tabs/Tabs.tsx

@@ -9,12 +9,12 @@ const Tabs = TabsPrimitive.Root;
 
 export interface TabsListProps extends TabsPrimitive.TabsListProps {}
 
-function TabsList(props: TabsListProps): ReactElement {
+function TabsList({ className, ...props }: TabsListProps): ReactElement {
   return (
     <TabsPrimitive.List
       className={cn(
         "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-        props.className,
+        className,
       )}
       {...props}
     />
@@ -26,12 +26,12 @@ export interface TabsTriggerProps extends TabsPrimitive.TabsTriggerProps {
   className?: string;
 }
 
-function TabsTrigger(props: TabsTriggerProps): ReactElement {
+function TabsTrigger({ className, ...props }: TabsTriggerProps): ReactElement {
   return (
     <TabsPrimitive.Trigger
       className={cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-        props.className,
+        className,
       )}
       {...props}
     />
@@ -41,12 +41,12 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 export interface TabsContentProps extends TabsPrimitive.TabsContentProps {}
 
-function TabsContent(props: TabsContentProps): ReactElement {
+function TabsContent({ className, ...props }: TabsContentProps): ReactElement {
   return (
     <TabsPrimitive.Content
       className={cn(
         "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        props.className,
+        className,
       )}
       {...props}
     />