feat: adjust table component (#92)

* feat: apply whitespace-nowrap to th and match table colors with CodeBlock

* test: update thead/tbody test codes

* chore: add changeset for table component update

* test: adjust th test code

Author: bytaesu

.changeset/new-masks-shout.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+apply whitespace-nowrap to th and match table colors with CodeBlock

packages/streamdown/__tests__/components.test.tsx

@@ -325,7 +325,7 @@ describe("Markdown Components", () => {
       );
       const thead = container.querySelector("thead");
       expect(thead).toBeTruthy();
-      expect(thead?.className).toContain("bg-muted/50");
+      expect(thead?.className).toContain("bg-muted/80");
     });
 
     it("should render tbody with correct classes", () => {
@@ -341,6 +341,7 @@ describe("Markdown Components", () => {
       expect(tbody).toBeTruthy();
       expect(tbody?.className).toContain("divide-y");
       expect(tbody?.className).toContain("divide-border");
+      expect(tbody?.className).toContain("bg-muted/40");
     });
 
     it("should render tr with correct classes", () => {
@@ -361,6 +362,7 @@ describe("Markdown Components", () => {
       const { container } = render(<TH node={null as any}>Header</TH>);
       const th = container.querySelector("th");
       expect(th).toBeTruthy();
+      expect(th?.className).toContain("whitespace-nowrap");
       expect(th?.className).toContain("px-4");
       expect(th?.className).toContain("py-2");
       expect(th?.className).toContain("text-left");

packages/streamdown/lib/components.tsx

@@ -214,7 +214,7 @@ export const components: Options["components"] = {
   ),
   thead: ({ node, children, className, ...props }) => (
     <thead
-      className={cn("bg-muted/50", className)}
+      className={cn("bg-muted/80", className)}
       data-streamdown="table-header"
       {...props}
     >
@@ -223,7 +223,7 @@ export const components: Options["components"] = {
   ),
   tbody: ({ node, children, className, ...props }) => (
     <tbody
-      className={cn("divide-y divide-border", className)}
+      className={cn("divide-y bg-muted/40 divide-border", className)}
       data-streamdown="table-body"
       {...props}
     >
@@ -241,7 +241,7 @@ export const components: Options["components"] = {
   ),
   th: ({ node, children, className, ...props }) => (
     <th
-      className={cn("px-4 py-2 text-left font-semibold text-sm", className)}
+      className={cn("whitespace-nowrap px-4 py-2 text-left font-semibold text-sm", className)}
       data-streamdown="table-header-cell"
       {...props}
     >