demo(refactor): remove unnecessary ref props

demo/nextjs/components/ui/alert.tsx

@@ -19,25 +19,24 @@ const alertVariants = cva(
 	},
 );
 
-const Alert = ({ ref, className, variant, ...props }) => (
+const Alert = (
+	props?: React.HTMLAttributes<HTMLDivElement> & {
+		variant: "default" | "destructive";
+	},
+) => (
 	<div
-		ref={ref}
 		role="alert"
-		className={cn(alertVariants({ variant }), className)}
+		className={cn(alertVariants({ variant: props?.variant }), props?.className)}
 		{...props}
 	/>
 );
 Alert.displayName = "Alert";
 
 const AlertTitle = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-	ref: React.RefObject<HTMLParagraphElement>;
-}) => (
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
 	<h5
-		ref={ref}
 		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
 		{...props}
 	/>
@@ -45,17 +44,10 @@ const AlertTitle = ({
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-	ref: React.RefObject<HTMLParagraphElement>;
-}) => (
-	<div
-		ref={ref}
-		className={cn("text-sm [&_p]:leading-relaxed", className)}
-		{...props}
-	/>
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+	<div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
 );
 AlertDescription.displayName = "AlertDescription";
 

demo/nextjs/components/ui/avatar.tsx

@@ -6,14 +6,10 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "@/lib/utils";
 
 const Avatar = ({
-	ref,
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
-	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
-}) => (
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>) => (
 	<AvatarPrimitive.Root
-		ref={ref}
 		className={cn(
 			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
 			className,
@@ -24,14 +20,10 @@ const Avatar = ({
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = ({
-	ref,
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
-	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
-}) => (
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>) => (
 	<AvatarPrimitive.Image
-		ref={ref}
 		className={cn("aspect-square h-full w-full", className)}
 		{...props}
 	/>
@@ -39,14 +31,10 @@ const AvatarImage = ({
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = ({
-	ref,
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
-	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
-}) => (
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>) => (
 	<AvatarPrimitive.Fallback
-		ref={ref}
 		className={cn(
 			"flex h-full w-full items-center justify-center rounded-full bg-muted",
 			className,

demo/nextjs/components/ui/button.tsx

@@ -41,20 +41,16 @@ export interface ButtonProps
 }
 
 const Button = ({
-	ref,
 	className,
 	variant,
 	size,
 	asChild = false,
 	...props
-}: ButtonProps & {
-	ref: React.RefObject<HTMLButtonElement>;
-}) => {
+}: ButtonProps) => {
 	const Comp = asChild ? Slot : "button";
 	return (
 		<Comp
 			className={cn(buttonVariants({ variant, size, className }))}
-			ref={ref}
 			{...props}
 		/>
 	);

demo/nextjs/components/ui/card.tsx

@@ -3,14 +3,10 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-	ref: React.RefObject<HTMLDivElement>;
-}) => (
+}: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
-		ref={ref}
 		className={cn(
 			"rounded-xl border bg-card text-card-foreground shadow",
 			className,
@@ -21,29 +17,18 @@ const Card = ({
 Card.displayName = "Card";
 
 const CardHeader = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-	ref: React.RefObject<HTMLDivElement>;
-}) => (
-	<div
-		ref={ref}
-		className={cn("flex flex-col space-y-1.5 p-6", className)}
-		{...props}
-	/>
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
 );
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-	ref: React.RefObject<HTMLParagraphElement>;
-}) => (
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
 	<h3
-		ref={ref}
 		className={cn("font-semibold leading-none tracking-tight", className)}
 		{...props}
 	/>
@@ -51,41 +36,26 @@ const CardTitle = ({
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-	ref: React.RefObject<HTMLParagraphElement>;
-}) => (
-	<p
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
-		{...props}
-	/>
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+	<p className={cn("text-sm text-muted-foreground", className)} {...props} />
 );
 CardDescription.displayName = "CardDescription";
 
 const CardContent = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-	ref: React.RefObject<HTMLDivElement>;
-}) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("p-6 pt-0", className)} {...props} />
+);
 CardContent.displayName = "CardContent";
 
 const CardFooter = ({
-	ref,
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-	ref: React.RefObject<HTMLDivElement>;
-}) => (
-	<div
-		ref={ref}
-		className={cn("flex items-center p-6 pt-0", className)}
-		{...props}
-	/>
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex items-center p-6 pt-0", className)} {...props} />
 );
 CardFooter.displayName = "CardFooter";