fix: demo build & upgrades (#2848)

demo/nextjs/components/ui/table.tsx

@@ -1,136 +1,108 @@
+"use client";
+
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Table = ({
-	ref,
-	className,
-	...props
-}: React.HTMLAttributes<HTMLTableElement> & {
-	ref: React.RefObject<HTMLTableElement>;
-}) => (
-	<div className="relative w-full overflow-auto">
-		<table
-			ref={ref}
-			className={cn("w-full caption-bottom text-sm", className)}
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
 			{...props}
 		/>
-	</div>
-);
-Table.displayName = "Table";
+	);
+}
 
-const TableHeader = ({
-	ref,
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLTableSectionElement> & {
-	ref: React.RefObject<HTMLTableSectionElement>;
-}) => (
-	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = ({
-	ref,
-	className,
-	...props
-}: React.HTMLAttributes<HTMLTableSectionElement> & {
-	ref: React.RefObject<HTMLTableSectionElement>;
-}) => (
-	<tbody
-		ref={ref}
-		className={cn("[&_tr:last-child]:border-0", className)}
-		{...props}
-	/>
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = ({
-	ref,
-	className,
-	...props
-}: React.HTMLAttributes<HTMLTableSectionElement> & {
-	ref: React.RefObject<HTMLTableSectionElement>;
-}) => (
-	<tfoot
-		ref={ref}
-		className={cn(
-			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-			className,
-		)}
-		{...props}
-	/>
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = ({
-	ref,
-	className,
-	...props
-}: React.HTMLAttributes<HTMLTableRowElement> & {
-	ref: React.RefObject<HTMLTableRowElement>;
-}) => (
-	<tr
-		ref={ref}
-		className={cn(
-			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-			className,
-		)}
-		{...props}
-	/>
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = ({
-	ref,
-	className,
-	...props
-}: React.ThHTMLAttributes<HTMLTableCellElement> & {
-	ref: React.RefObject<HTMLTableCellElement>;
-}) => (
-	<th
-		ref={ref}
-		className={cn(
-			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-			className,
-		)}
-		{...props}
-	/>
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = ({
-	ref,
-	className,
-	...props
-}: React.TdHTMLAttributes<HTMLTableCellElement> & {
-	ref: React.RefObject<HTMLTableCellElement>;
-}) => (
-	<td
-		ref={ref}
-		className={cn(
-			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-			className,
-		)}
-		{...props}
-	/>
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = ({
-	ref,
-	className,
-	...props
-}: React.HTMLAttributes<HTMLTableCaptionElement> & {
-	ref: React.RefObject<HTMLTableCaptionElement>;
-}) => (
-	<caption
-		ref={ref}
-		className={cn("mt-4 text-sm text-muted-foreground", className)}
-		{...props}
-	/>
-);
-TableCaption.displayName = "TableCaption";
+}: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
 
 export {
 	Table,