refactor: migrate UI components to React 19

demo/nextjs/components/ui/accordion.tsx

@@ -8,22 +8,29 @@ import { cn } from "@/lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
+const AccordionItem = ({
-	React.ElementRef<typeof AccordionPrimitive.Item>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+	className,
->(({ className, ...props }, ref) => (
+	...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {
+	ref: React.RefObject<React.ElementRef<typeof AccordionPrimitive.Item>>;
+}) => (
 	<AccordionPrimitive.Item
 		ref={ref}
 		className={cn("border-b", className)}
 		{...props}
 	/>
-));
+);
 AccordionItem.displayName = "AccordionItem";
 
-const AccordionTrigger = React.forwardRef<
+const AccordionTrigger = ({
-	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+	className,
->(({ className, children, ...props }, ref) => (
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+	ref: React.RefObject<React.ElementRef<typeof AccordionPrimitive.Trigger>>;
+}) => (
 	<AccordionPrimitive.Header className="flex">
 		<AccordionPrimitive.Trigger
 			ref={ref}
@@ -37,13 +44,17 @@ const AccordionTrigger = React.forwardRef<
 			<ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
 		</AccordionPrimitive.Trigger>
 	</AccordionPrimitive.Header>
-));
+);
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
-const AccordionContent = React.forwardRef<
+const AccordionContent = ({
-	React.ElementRef<typeof AccordionPrimitive.Content>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+	className,
->(({ className, children, ...props }, ref) => (
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof AccordionPrimitive.Content>>;
+}) => (
 	<AccordionPrimitive.Content
 		ref={ref}
 		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
@@ -51,7 +62,7 @@ const AccordionContent = React.forwardRef<
 	>
 		<div className={cn("pb-4 pt-0", className)}>{children}</div>
 	</AccordionPrimitive.Content>
-));
+);
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

demo/nextjs/components/ui/alert-dialog.tsx

@@ -12,26 +12,33 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = React.forwardRef<
+const AlertDialogOverlay = (
-	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPrimitive.Overlay
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
+    }
+) => (<AlertDialogPrimitive.Overlay
     className={cn(
         "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
     )}
     {...props}
     ref={ref}
-	/>
+/>);
-));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = React.forwardRef<
+const AlertDialogContent = (
-	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPortal>
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
+    }
+) => (<AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
         ref={ref}
@@ -41,8 +48,7 @@ const AlertDialogContent = React.forwardRef<
         )}
         {...props}
     />
-	</AlertDialogPortal>
+</AlertDialogPortal>);
-));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -73,48 +79,61 @@ const AlertDialogFooter = ({
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
-const AlertDialogTitle = React.forwardRef<
+const AlertDialogTitle = (
-	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPrimitive.Title
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
+    }
+) => (<AlertDialogPrimitive.Title
     ref={ref}
     className={cn("text-lg font-semibold", className)}
     {...props}
-	/>
+/>);
-));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = React.forwardRef<
+const AlertDialogDescription = (
-	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPrimitive.Description
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Description>>;
+    }
+) => (<AlertDialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
-	/>
+/>);
-));
 AlertDialogDescription.displayName =
 	AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = React.forwardRef<
+const AlertDialogAction = (
-	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPrimitive.Action
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
+    }
+) => (<AlertDialogPrimitive.Action
     ref={ref}
     className={cn(buttonVariants(), className)}
     {...props}
-	/>
+/>);
-));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = React.forwardRef<
+const AlertDialogCancel = (
-	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+    {
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<AlertDialogPrimitive.Cancel
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
+    }
+) => (<AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
         buttonVariants({ variant: "outline" }),
@@ -122,8 +141,7 @@ const AlertDialogCancel = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {

demo/nextjs/components/ui/alert.tsx

@@ -19,41 +19,49 @@ const alertVariants = cva(
 	},
 );
 
-const Alert = React.forwardRef<
+const Alert = (
-	HTMLDivElement,
+    {
-	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+        ref,
->(({ className, variant, ...props }, ref) => (
+        className,
-	<div
+        variant,
+        ...props
+    }
+) => (<div
     ref={ref}
     role="alert"
     className={cn(alertVariants({ variant }), className)}
     {...props}
-	/>
+/>);
-));
 Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<
+const AlertTitle = (
-	HTMLParagraphElement,
+    {
-	React.HTMLAttributes<HTMLHeadingElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<h5
+        ...props
+    }: React.HTMLAttributes<HTMLHeadingElement> & {
+        ref: React.RefObject<HTMLParagraphElement>;
+    }
+) => (<h5
     ref={ref}
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
-	/>
+/>);
-));
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = React.forwardRef<
+const AlertDescription = (
-	HTMLParagraphElement,
+    {
-	React.HTMLAttributes<HTMLParagraphElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<div
+        ...props
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref: React.RefObject<HTMLParagraphElement>;
+    }
+) => (<div
     ref={ref}
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
-	/>
+/>);
-));
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription };

demo/nextjs/components/ui/avatar.tsx

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

demo/nextjs/components/ui/breadcrumb.tsx

@@ -4,47 +4,55 @@ import { Slot } from "@radix-ui/react-slot";
 
 import { cn } from "@/lib/utils";
 
-const Breadcrumb = React.forwardRef<
+const Breadcrumb = (
-	HTMLElement,
+    {
-	React.ComponentPropsWithoutRef<"nav"> & {
+        ref,
-		separator?: React.ReactNode;
+        ...props
     }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+) => <nav ref={ref} aria-label="breadcrumb" {...props} />;
 Breadcrumb.displayName = "Breadcrumb";
 
-const BreadcrumbList = React.forwardRef<
+const BreadcrumbList = (
-	HTMLOListElement,
+    {
-	React.ComponentPropsWithoutRef<"ol">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ol
+        ...props
+    }: React.ComponentPropsWithoutRef<"ol"> & {
+        ref: React.RefObject<HTMLOListElement>;
+    }
+) => (<ol
     ref={ref}
     className={cn(
         "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 BreadcrumbList.displayName = "BreadcrumbList";
 
-const BreadcrumbItem = React.forwardRef<
+const BreadcrumbItem = (
-	HTMLLIElement,
+    {
-	React.ComponentPropsWithoutRef<"li">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<li
+        ...props
+    }: React.ComponentPropsWithoutRef<"li"> & {
+        ref: React.RefObject<HTMLLIElement>;
+    }
+) => (<li
     ref={ref}
     className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
-	/>
+/>);
-));
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const BreadcrumbLink = React.forwardRef<
+const BreadcrumbLink = (
-	HTMLAnchorElement,
+    {
-	React.ComponentPropsWithoutRef<"a"> & {
+        ref,
-		asChild?: boolean;
+        asChild,
+        className,
+        ...props
     }
->(({ asChild, className, ...props }, ref) => {
+) => {
 	const Comp = asChild ? Slot : "a";
 
 	return (
@@ -54,22 +62,25 @@ const BreadcrumbLink = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
-const BreadcrumbPage = React.forwardRef<
+const BreadcrumbPage = (
-	HTMLSpanElement,
+    {
-	React.ComponentPropsWithoutRef<"span">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<span
+        ...props
+    }: React.ComponentPropsWithoutRef<"span"> & {
+        ref: React.RefObject<HTMLSpanElement>;
+    }
+) => (<span
     ref={ref}
     role="link"
     aria-disabled="true"
     aria-current="page"
     className={cn("font-normal text-foreground", className)}
     {...props}
-	/>
+/>);
-));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({

demo/nextjs/components/ui/button.tsx

@@ -40,8 +40,18 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = (
-	({ className, variant, size, asChild = false, ...props }, ref) => {
+    {
+        ref,
+        className,
+        variant,
+        size,
+        asChild = false,
+        ...props
+    }: ButtonProps & {
+        ref: React.RefObject<HTMLButtonElement>;
+    }
+) => {
     const Comp = asChild ? Slot : "button";
     return (
         <Comp
@@ -50,8 +60,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             {...props}
         />
     );
-	},
+};
-);
 Button.displayName = "Button";
 
 export { Button, buttonVariants };

demo/nextjs/components/ui/card.tsx

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

demo/nextjs/components/ui/carousel.tsx

@@ -42,12 +42,9 @@ function useCarousel() {
 	return context;
 }
 
-const Carousel = React.forwardRef<
+const Carousel = (
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-	(
     {
+        ref,
         orientation = "horizontal",
         opts,
         setApi,
@@ -55,8 +52,7 @@ const Carousel = React.forwardRef<
         className,
         children,
         ...props
-		},
+    }
-		ref,
 ) => {
     const [carouselRef, api] = useEmblaCarousel(
         {
@@ -146,14 +142,18 @@ const Carousel = React.forwardRef<
             </div>
         </CarouselContext.Provider>
     );
-	},
+};
-);
 Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
+const CarouselContent = (
-	HTMLDivElement,
+    {
-	React.HTMLAttributes<HTMLDivElement>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref: React.RefObject<HTMLDivElement>;
+    }
+) => {
 	const { carouselRef, orientation } = useCarousel();
 
 	return (
@@ -169,13 +169,18 @@ const CarouselContent = React.forwardRef<
 			/>
 		</div>
 	);
-});
+};
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = React.forwardRef<
+const CarouselItem = (
-	HTMLDivElement,
+    {
-	React.HTMLAttributes<HTMLDivElement>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref: React.RefObject<HTMLDivElement>;
+    }
+) => {
 	const { orientation } = useCarousel();
 
 	return (
@@ -191,13 +196,20 @@ const CarouselItem = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
+const CarouselPrevious = (
-	HTMLButtonElement,
+    {
-	React.ComponentProps<typeof Button>
+        ref,
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+        className,
+        variant = "outline",
+        size = "icon",
+        ...props
+    }: React.ComponentProps<typeof Button> & {
+        ref: React.RefObject<HTMLButtonElement>;
+    }
+) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
 	return (
@@ -220,13 +232,20 @@ const CarouselPrevious = React.forwardRef<
 			<span className="sr-only">Previous slide</span>
 		</Button>
 	);
-});
+};
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
+const CarouselNext = (
-	HTMLButtonElement,
+    {
-	React.ComponentProps<typeof Button>
+        ref,
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+        className,
+        variant = "outline",
+        size = "icon",
+        ...props
+    }: React.ComponentProps<typeof Button> & {
+        ref: React.RefObject<HTMLButtonElement>;
+    }
+) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 
 	return (
@@ -249,7 +268,7 @@ const CarouselNext = React.forwardRef<
 			<span className="sr-only">Next slide</span>
 		</Button>
 	);
-});
+};
 CarouselNext.displayName = "CarouselNext";
 
 export {

demo/nextjs/components/ui/chart.tsx

@@ -34,15 +34,16 @@ function useChart() {
 	return context;
 }
 
-const ChartContainer = React.forwardRef<
+const ChartContainer = (
-	HTMLDivElement,
+    {
-	React.ComponentProps<"div"> & {
+        ref,
-		config: ChartConfig;
+        id,
-		children: React.ComponentProps<
+        className,
-			typeof RechartsPrimitive.ResponsiveContainer
+        children,
-		>["children"];
+        config,
+        ...props
     }
->(({ id, className, children, config, ...props }, ref) => {
+) => {
 	const uniqueId = React.useId();
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
@@ -64,7 +65,7 @@ const ChartContainer = React.forwardRef<
 			</div>
 		</ChartContext.Provider>
 	);
-});
+};
 ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
@@ -102,19 +103,9 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-const ChartTooltipContent = React.forwardRef<
+const ChartTooltipContent = (
-	HTMLDivElement,
-	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-		React.ComponentProps<"div"> & {
-			hideLabel?: boolean;
-			hideIndicator?: boolean;
-			indicator?: "line" | "dot" | "dashed";
-			nameKey?: string;
-			labelKey?: string;
-		}
->(
-	(
     {
+        ref,
         active,
         payload,
         className,
@@ -127,9 +118,8 @@ const ChartTooltipContent = React.forwardRef<
         formatter,
         color,
         nameKey,
-			labelKey,
+        labelKey
-		},
+    }
-		ref,
 ) => {
     const { config } = useChart();
 
@@ -252,23 +242,20 @@ const ChartTooltipContent = React.forwardRef<
             </div>
         </div>
     );
-	},
+};
-);
 ChartTooltipContent.displayName = "ChartTooltip";
 
 const ChartLegend = RechartsPrimitive.Legend;
 
-const ChartLegendContent = React.forwardRef<
+const ChartLegendContent = (
-	HTMLDivElement,
+    {
-	React.ComponentProps<"div"> &
-		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-			hideIcon?: boolean;
-			nameKey?: string;
-		}
->(
-	(
-		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
         ref,
+        className,
+        hideIcon = false,
+        payload,
+        verticalAlign = "bottom",
+        nameKey
+    }
 ) => {
     const { config } = useChart();
 
@@ -312,8 +299,7 @@ const ChartLegendContent = React.forwardRef<
             })}
         </div>
     );
-	},
+};
-);
 ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.

demo/nextjs/components/ui/checkbox.tsx

@@ -6,11 +6,15 @@ import { CheckIcon } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
 
-const Checkbox = React.forwardRef<
+const Checkbox = (
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CheckboxPrimitive.Root
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+    }
+) => (<CheckboxPrimitive.Root
     ref={ref}
     className={cn(
         "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -23,8 +27,7 @@ const Checkbox = React.forwardRef<
     >
         <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
-	</CheckboxPrimitive.Root>
+</CheckboxPrimitive.Root>);
-));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

demo/nextjs/components/ui/command.tsx

@@ -8,19 +8,22 @@ import { Command as CommandPrimitive } from "cmdk";
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
-const Command = React.forwardRef<
+const Command = (
-	React.ElementRef<typeof CommandPrimitive>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CommandPrimitive
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+    }
+) => (<CommandPrimitive
     ref={ref}
     className={cn(
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
@@ -37,11 +40,15 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	);
 };
 
-const CommandInput = React.forwardRef<
+const CommandInput = (
-	React.ElementRef<typeof CommandPrimitive.Input>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
+    }
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
         ref={ref}
@@ -51,78 +58,91 @@ const CommandInput = React.forwardRef<
         )}
         {...props}
     />
-	</div>
+</div>);
-));
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = React.forwardRef<
+const CommandList = (
-	React.ElementRef<typeof CommandPrimitive.List>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CommandPrimitive.List
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
+    }
+) => (<CommandPrimitive.List
     ref={ref}
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
-	/>
+/>);
-));
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
+const CommandEmpty = (
-	React.ElementRef<typeof CommandPrimitive.Empty>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+        ref,
->((props, ref) => (
+        ...props
-	<CommandPrimitive.Empty
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
+    }
+) => (<CommandPrimitive.Empty
     ref={ref}
     className="py-6 text-center text-sm"
     {...props}
-	/>
+/>);
-));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
+const CommandGroup = (
-	React.ElementRef<typeof CommandPrimitive.Group>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CommandPrimitive.Group
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
+    }
+) => (<CommandPrimitive.Group
     ref={ref}
     className={cn(
         "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
+const CommandSeparator = (
-	React.ElementRef<typeof CommandPrimitive.Separator>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CommandPrimitive.Separator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+    }
+) => (<CommandPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
-	/>
+/>);
-));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
+const CommandItem = (
-	React.ElementRef<typeof CommandPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<CommandPrimitive.Item
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+    }
+) => (<CommandPrimitive.Item
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 

demo/nextjs/components/ui/context-menu.tsx

@@ -22,13 +22,15 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
-const ContextMenuSubTrigger = React.forwardRef<
+const ContextMenuSubTrigger = (
-	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        children,
+        ...props
     }
->(({ className, inset, children, ...props }, ref) => (
+) => (<ContextMenuPrimitive.SubTrigger
-	<ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
         "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -39,30 +41,36 @@ const ContextMenuSubTrigger = React.forwardRef<
 >
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
-	</ContextMenuPrimitive.SubTrigger>
+</ContextMenuPrimitive.SubTrigger>);
-));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
-const ContextMenuSubContent = React.forwardRef<
+const ContextMenuSubContent = (
-	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ContextMenuPrimitive.SubContent
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
+    }
+) => (<ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
-const ContextMenuContent = React.forwardRef<
+const ContextMenuContent = (
-	React.ElementRef<typeof ContextMenuPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ContextMenuPrimitive.Portal>
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
+    }
+) => (<ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
         ref={ref}
         className={cn(
@@ -71,17 +79,17 @@ const ContextMenuContent = React.forwardRef<
         )}
         {...props}
     />
-	</ContextMenuPrimitive.Portal>
+</ContextMenuPrimitive.Portal>);
-));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
-const ContextMenuItem = React.forwardRef<
+const ContextMenuItem = (
-	React.ElementRef<typeof ContextMenuPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<ContextMenuPrimitive.Item
-	<ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -89,15 +97,20 @@ const ContextMenuItem = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
-const ContextMenuCheckboxItem = React.forwardRef<
+const ContextMenuCheckboxItem = (
-	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+        ref,
->(({ className, children, checked, ...props }, ref) => (
+        className,
-	<ContextMenuPrimitive.CheckboxItem
+        children,
+        checked,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
+    }
+) => (<ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -112,16 +125,20 @@ const ContextMenuCheckboxItem = React.forwardRef<
         </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
-	</ContextMenuPrimitive.CheckboxItem>
+</ContextMenuPrimitive.CheckboxItem>);
-));
 ContextMenuCheckboxItem.displayName =
 	ContextMenuPrimitive.CheckboxItem.displayName;
 
-const ContextMenuRadioItem = React.forwardRef<
+const ContextMenuRadioItem = (
-	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<ContextMenuPrimitive.RadioItem
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
+    }
+) => (<ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -135,17 +152,17 @@ const ContextMenuRadioItem = React.forwardRef<
         </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
-	</ContextMenuPrimitive.RadioItem>
+</ContextMenuPrimitive.RadioItem>);
-));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
-const ContextMenuLabel = React.forwardRef<
+const ContextMenuLabel = (
-	React.ElementRef<typeof ContextMenuPrimitive.Label>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<ContextMenuPrimitive.Label
-	<ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
         "px-2 py-1.5 text-sm font-semibold text-foreground",
@@ -153,20 +170,22 @@ const ContextMenuLabel = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
-const ContextMenuSeparator = React.forwardRef<
+const ContextMenuSeparator = (
-	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+    {
-	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ContextMenuPrimitive.Separator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
+    }
+) => (<ContextMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
-	/>
+/>);
-));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({

demo/nextjs/components/ui/dialog.tsx

@@ -14,26 +14,34 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
+const DialogOverlay = (
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
+    {
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DialogPrimitive.Overlay
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+    }
+) => (<DialogPrimitive.Overlay
     ref={ref}
     className={cn(
         "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
+const DialogContent = (
-	React.ElementRef<typeof DialogPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<DialogPortal>
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
+    }
+) => (<DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
         ref={ref}
@@ -49,8 +57,7 @@ const DialogContent = React.forwardRef<
             <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
     </DialogPrimitive.Content>
-	</DialogPortal>
+</DialogPortal>);
-));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -81,31 +88,37 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
+const DialogTitle = (
-	React.ElementRef<typeof DialogPrimitive.Title>,
+    {
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DialogPrimitive.Title
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
+    }
+) => (<DialogPrimitive.Title
     ref={ref}
     className={cn(
         "text-lg font-semibold leading-none tracking-tight",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
+const DialogDescription = (
-	React.ElementRef<typeof DialogPrimitive.Description>,
+    {
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DialogPrimitive.Description
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
+    }
+) => (<DialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
-	/>
+/>);
-));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {

demo/nextjs/components/ui/drawer.tsx

@@ -22,23 +22,31 @@ const DrawerPortal = DrawerPrimitive.Portal;
 
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = React.forwardRef<
+const DrawerOverlay = (
-	React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    {
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DrawerPrimitive.Overlay
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+    }
+) => (<DrawerPrimitive.Overlay
     ref={ref}
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
-	/>
+/>);
-));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = React.forwardRef<
+const DrawerContent = (
-	React.ElementRef<typeof DrawerPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<DrawerPortal>
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
+    }
+) => (<DrawerPortal>
     <DrawerOverlay />
     <DrawerPrimitive.Content
         ref={ref}
@@ -51,8 +59,7 @@ const DrawerContent = React.forwardRef<
         <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
         {children}
     </DrawerPrimitive.Content>
-	</DrawerPortal>
+</DrawerPortal>);
-));
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -77,31 +84,37 @@ const DrawerFooter = ({
 );
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = React.forwardRef<
+const DrawerTitle = (
-	React.ElementRef<typeof DrawerPrimitive.Title>,
+    {
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DrawerPrimitive.Title
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
+    }
+) => (<DrawerPrimitive.Title
     ref={ref}
     className={cn(
         "text-lg font-semibold leading-none tracking-tight",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = React.forwardRef<
+const DrawerDescription = (
-	React.ElementRef<typeof DrawerPrimitive.Description>,
+    {
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DrawerPrimitive.Description
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
+    }
+) => (<DrawerPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
-	/>
+/>);
-));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {

demo/nextjs/components/ui/dropdown-menu.tsx

@@ -22,13 +22,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
+const DropdownMenuSubTrigger = (
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        children,
+        ...props
     }
->(({ className, inset, children, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.SubTrigger
-	<DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
         "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
@@ -39,32 +41,39 @@ const DropdownMenuSubTrigger = React.forwardRef<
 >
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
-	</DropdownMenuPrimitive.SubTrigger>
+</DropdownMenuPrimitive.SubTrigger>);
-));
 DropdownMenuSubTrigger.displayName =
 	DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
+const DropdownMenuSubContent = (
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DropdownMenuPrimitive.SubContent
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+    }
+) => (<DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DropdownMenuSubContent.displayName =
 	DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
+const DropdownMenuContent = (
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+        ref,
->(({ className, sideOffset = 4, ...props }, ref) => (
+        className,
-	<DropdownMenuPrimitive.Portal>
+        sideOffset = 4,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+    }
+) => (<DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
@@ -75,17 +84,17 @@ const DropdownMenuContent = React.forwardRef<
         )}
         {...props}
     />
-	</DropdownMenuPrimitive.Portal>
+</DropdownMenuPrimitive.Portal>);
-));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
+const DropdownMenuItem = (
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.Item
-	<DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -93,15 +102,20 @@ const DropdownMenuItem = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
+const DropdownMenuCheckboxItem = (
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+        ref,
->(({ className, children, checked, ...props }, ref) => (
+        className,
-	<DropdownMenuPrimitive.CheckboxItem
+        children,
+        checked,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+    }
+) => (<DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -116,16 +130,20 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
-	</DropdownMenuPrimitive.CheckboxItem>
+</DropdownMenuPrimitive.CheckboxItem>);
-));
 DropdownMenuCheckboxItem.displayName =
 	DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
+const DropdownMenuRadioItem = (
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<DropdownMenuPrimitive.RadioItem
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+    }
+) => (<DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -139,17 +157,17 @@ const DropdownMenuRadioItem = React.forwardRef<
         </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
-	</DropdownMenuPrimitive.RadioItem>
+</DropdownMenuPrimitive.RadioItem>);
-));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
+const DropdownMenuLabel = (
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.Label
-	<DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
         "px-2 py-1.5 text-sm font-semibold",
@@ -157,20 +175,22 @@ const DropdownMenuLabel = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
+const DropdownMenuSeparator = (
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+    {
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<DropdownMenuPrimitive.Separator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+    }
+) => (<DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
-	/>
+/>);
-));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({

demo/nextjs/components/ui/form.tsx

@@ -72,10 +72,15 @@ const FormItemContext = React.createContext<FormItemContextValue>(
 	{} as FormItemContextValue,
 );
 
-const FormItem = React.forwardRef<
+const FormItem = (
-	HTMLDivElement,
+    {
-	React.HTMLAttributes<HTMLDivElement>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref: React.RefObject<HTMLDivElement>;
+    }
+) => {
 	const id = React.useId();
 
 	return (
@@ -83,13 +88,18 @@ const FormItem = React.forwardRef<
 			<div ref={ref} className={cn("space-y-2", className)} {...props} />
 		</FormItemContext.Provider>
 	);
-});
+};
 FormItem.displayName = "FormItem";
 
-const FormLabel = React.forwardRef<
+const FormLabel = (
-	React.ElementRef<typeof LabelPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
+    }
+) => {
 	const { error, formItemId } = useFormField();
 
 	return (
@@ -100,13 +110,17 @@ const FormLabel = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 FormLabel.displayName = "FormLabel";
 
-const FormControl = React.forwardRef<
+const FormControl = (
-	React.ElementRef<typeof Slot>,
+    {
-	React.ComponentPropsWithoutRef<typeof Slot>
+        ref,
->(({ ...props }, ref) => {
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof Slot> & {
+        ref: React.RefObject<React.ElementRef<typeof Slot>>;
+    }
+) => {
 	const { error, formItemId, formDescriptionId, formMessageId } =
 		useFormField();
 
@@ -123,13 +137,18 @@ const FormControl = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<
+const FormDescription = (
-	HTMLParagraphElement,
+    {
-	React.HTMLAttributes<HTMLParagraphElement>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref: React.RefObject<HTMLParagraphElement>;
+    }
+) => {
 	const { formDescriptionId } = useFormField();
 
 	return (
@@ -140,13 +159,19 @@ const FormDescription = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<
+const FormMessage = (
-	HTMLParagraphElement,
+    {
-	React.HTMLAttributes<HTMLParagraphElement>
+        ref,
->(({ className, children, ...props }, ref) => {
+        className,
+        children,
+        ...props
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref: React.RefObject<HTMLParagraphElement>;
+    }
+) => {
 	const { error, formMessageId } = useFormField();
 	const body = error ? String(error?.message) : children;
 
@@ -164,7 +189,7 @@ const FormMessage = React.forwardRef<
 			{body}
 		</p>
 	);
-});
+};
 FormMessage.displayName = "FormMessage";
 
 export {

demo/nextjs/components/ui/hover-card.tsx

@@ -9,11 +9,17 @@ const HoverCard = HoverCardPrimitive.Root;
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
-const HoverCardContent = React.forwardRef<
+const HoverCardContent = (
-	React.ElementRef<typeof HoverCardPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+        ref,
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+        className,
-	<HoverCardPrimitive.Content
+        align = "center",
+        sideOffset = 4,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof HoverCardPrimitive.Content>>;
+    }
+) => (<HoverCardPrimitive.Content
     ref={ref}
     align={align}
     sideOffset={sideOffset}
@@ -22,8 +28,7 @@ const HoverCardContent = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 export { HoverCard, HoverCardTrigger, HoverCardContent };

demo/nextjs/components/ui/input-otp.tsx

@@ -6,11 +6,16 @@ import { OTPInput, OTPInputContext } from "input-otp";
 
 import { cn } from "@/lib/utils";
 
-const InputOTP = React.forwardRef<
+const InputOTP = (
-	React.ElementRef<typeof OTPInput>,
+    {
-	React.ComponentPropsWithoutRef<typeof OTPInput>
+        ref,
->(({ className, containerClassName, ...props }, ref) => (
+        className,
-	<OTPInput
+        containerClassName,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
+        ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
+    }
+) => (<OTPInput
     ref={ref}
     containerClassName={cn(
         "flex items-center gap-2 has-[:disabled]:opacity-50",
@@ -18,22 +23,28 @@ const InputOTP = React.forwardRef<
     )}
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
-	/>
+/>);
-));
 InputOTP.displayName = "InputOTP";
 
-const InputOTPGroup = React.forwardRef<
+const InputOTPGroup = (
-	React.ElementRef<"div">,
+    {
-	React.ComponentPropsWithoutRef<"div">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<div ref={ref} className={cn("flex items-center", className)} {...props} />
+        ...props
-));
+    }: React.ComponentPropsWithoutRef<"div"> & {
+        ref: React.RefObject<React.ElementRef<"div">>;
+    }
+) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />);
 InputOTPGroup.displayName = "InputOTPGroup";
 
-const InputOTPSlot = React.forwardRef<
+const InputOTPSlot = (
-	React.ElementRef<"div">,
+    {
-	React.ComponentPropsWithoutRef<"div"> & { index: number }
+        ref,
->(({ index, className, ...props }, ref) => {
+        index,
+        className,
+        ...props
+    }
+) => {
 	const inputOTPContext = React.useContext(OTPInputContext);
 	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
@@ -55,17 +66,19 @@ const InputOTPSlot = React.forwardRef<
 			)}
 		</div>
 	);
-});
+};
 InputOTPSlot.displayName = "InputOTPSlot";
 
-const InputOTPSeparator = React.forwardRef<
+const InputOTPSeparator = (
-	React.ElementRef<"div">,
+    {
-	React.ComponentPropsWithoutRef<"div">
+        ref,
->(({ ...props }, ref) => (
+        ...props
-	<div ref={ref} role="separator" {...props}>
+    }: React.ComponentPropsWithoutRef<"div"> & {
+        ref: React.RefObject<React.ElementRef<"div">>;
+    }
+) => (<div ref={ref} role="separator" {...props}>
     <DashIcon />
-	</div>
+</div>);
-));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

demo/nextjs/components/ui/input.tsx

@@ -5,8 +5,16 @@ import { cn } from "@/lib/utils";
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = (
-	({ className, type, ...props }, ref) => {
+    {
+        ref,
+        className,
+        type,
+        ...props
+    }: InputProps & {
+        ref: React.RefObject<HTMLInputElement>;
+    }
+) => {
     return (
         <input
             type={type}
@@ -18,8 +26,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {...props}
         />
     );
-	},
+};
-);
 Input.displayName = "Input";
 
 export { Input };

demo/nextjs/components/ui/label.tsx

@@ -10,17 +10,17 @@ const labelVariants = cva(
 	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = React.forwardRef<
+const Label = (
-	React.ElementRef<typeof LabelPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+        ref,
-		VariantProps<typeof labelVariants>
+        className,
->(({ className, ...props }, ref) => (
+        ...props
-	<LabelPrimitive.Root
+    }
+) => (<LabelPrimitive.Root
     ref={ref}
     className={cn(labelVariants(), className)}
     {...props}
-	/>
+/>);
-));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

demo/nextjs/components/ui/menubar.tsx

@@ -20,43 +20,51 @@ const MenubarSub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
-const Menubar = React.forwardRef<
+const Menubar = (
-	React.ElementRef<typeof MenubarPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.Root
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Root>>;
+    }
+) => (<MenubarPrimitive.Root
     ref={ref}
     className={cn(
         "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
-const MenubarTrigger = React.forwardRef<
+const MenubarTrigger = (
-	React.ElementRef<typeof MenubarPrimitive.Trigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.Trigger
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Trigger>>;
+    }
+) => (<MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
         "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
-const MenubarSubTrigger = React.forwardRef<
+const MenubarSubTrigger = (
-	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        children,
+        ...props
     }
->(({ className, inset, children, ...props }, ref) => (
+) => (<MenubarPrimitive.SubTrigger
-	<MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
         "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
@@ -67,34 +75,39 @@ const MenubarSubTrigger = React.forwardRef<
 >
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
-	</MenubarPrimitive.SubTrigger>
+</MenubarPrimitive.SubTrigger>);
-));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
-const MenubarSubContent = React.forwardRef<
+const MenubarSubContent = (
-	React.ElementRef<typeof MenubarPrimitive.SubContent>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.SubContent
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.SubContent>>;
+    }
+) => (<MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
-const MenubarContent = React.forwardRef<
+const MenubarContent = (
-	React.ElementRef<typeof MenubarPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-	(
-		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
         ref,
-	) => (
+        className,
-		<MenubarPrimitive.Portal>
+        align = "start",
+        alignOffset = -4,
+        sideOffset = 8,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Content>>;
+    }
+) => (<MenubarPrimitive.Portal>
     <MenubarPrimitive.Content
         ref={ref}
         align={align}
@@ -106,18 +119,17 @@ const MenubarContent = React.forwardRef<
         )}
         {...props}
     />
-		</MenubarPrimitive.Portal>
+</MenubarPrimitive.Portal>);
-	),
-);
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
-const MenubarItem = React.forwardRef<
+const MenubarItem = (
-	React.ElementRef<typeof MenubarPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<MenubarPrimitive.Item
-	<MenubarPrimitive.Item
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -125,15 +137,20 @@ const MenubarItem = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
-const MenubarCheckboxItem = React.forwardRef<
+const MenubarCheckboxItem = (
-	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+        ref,
->(({ className, children, checked, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.CheckboxItem
+        children,
+        checked,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.CheckboxItem>>;
+    }
+) => (<MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -148,15 +165,19 @@ const MenubarCheckboxItem = React.forwardRef<
         </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
-	</MenubarPrimitive.CheckboxItem>
+</MenubarPrimitive.CheckboxItem>);
-));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
-const MenubarRadioItem = React.forwardRef<
+const MenubarRadioItem = (
-	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.RadioItem
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.RadioItem>>;
+    }
+) => (<MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -170,17 +191,17 @@ const MenubarRadioItem = React.forwardRef<
         </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
-	</MenubarPrimitive.RadioItem>
+</MenubarPrimitive.RadioItem>);
-));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
-const MenubarLabel = React.forwardRef<
+const MenubarLabel = (
-	React.ElementRef<typeof MenubarPrimitive.Label>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+        ref,
-		inset?: boolean;
+        className,
+        inset,
+        ...props
     }
->(({ className, inset, ...props }, ref) => (
+) => (<MenubarPrimitive.Label
-	<MenubarPrimitive.Label
     ref={ref}
     className={cn(
         "px-2 py-1.5 text-sm font-semibold",
@@ -188,20 +209,22 @@ const MenubarLabel = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
-const MenubarSeparator = React.forwardRef<
+const MenubarSeparator = (
-	React.ElementRef<typeof MenubarPrimitive.Separator>,
+    {
-	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<MenubarPrimitive.Separator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> & {
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Separator>>;
+    }
+) => (<MenubarPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
-	/>
+/>);
-));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({

demo/nextjs/components/ui/navigation-menu.tsx

@@ -5,11 +5,16 @@ import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const NavigationMenu = React.forwardRef<
+const NavigationMenu = (
-	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<NavigationMenuPrimitive.Root
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
+    }
+) => (<NavigationMenuPrimitive.Root
     ref={ref}
     className={cn(
         "relative z-10 flex max-w-max flex-1 items-center justify-center",
@@ -19,23 +24,25 @@ const NavigationMenu = React.forwardRef<
 >
     {children}
     <NavigationMenuViewport />
-	</NavigationMenuPrimitive.Root>
+</NavigationMenuPrimitive.Root>);
-));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = React.forwardRef<
+const NavigationMenuList = (
-	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<NavigationMenuPrimitive.List
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
+    }
+) => (<NavigationMenuPrimitive.List
     ref={ref}
     className={cn(
         "group flex flex-1 list-none items-center justify-center space-x-1",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
@@ -44,11 +51,16 @@ const navigationMenuTriggerStyle = cva(
 	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
-const NavigationMenuTrigger = React.forwardRef<
+const NavigationMenuTrigger = (
-	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<NavigationMenuPrimitive.Trigger
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
+    }
+) => (<NavigationMenuPrimitive.Trigger
     ref={ref}
     className={cn(navigationMenuTriggerStyle(), "group", className)}
     {...props}
@@ -58,32 +70,38 @@ const NavigationMenuTrigger = React.forwardRef<
         className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
         aria-hidden="true"
     />
-	</NavigationMenuPrimitive.Trigger>
+</NavigationMenuPrimitive.Trigger>);
-));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = React.forwardRef<
+const NavigationMenuContent = (
-	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<NavigationMenuPrimitive.Content
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
+    }
+) => (<NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
         "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<
+const NavigationMenuViewport = (
-	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<div className={cn("absolute left-0 top-full flex justify-center")}>
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
+    }
+) => (<div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
         className={cn(
             "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
@@ -92,16 +110,19 @@ const NavigationMenuViewport = React.forwardRef<
         ref={ref}
         {...props}
     />
-	</div>
+</div>);
-));
 NavigationMenuViewport.displayName =
 	NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = React.forwardRef<
+const NavigationMenuIndicator = (
-	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+    {
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<NavigationMenuPrimitive.Indicator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
+    }
+) => (<NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
         "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
@@ -110,8 +131,7 @@ const NavigationMenuIndicator = React.forwardRef<
     {...props}
 >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-	</NavigationMenuPrimitive.Indicator>
+</NavigationMenuPrimitive.Indicator>);
-));
 NavigationMenuIndicator.displayName =
 	NavigationMenuPrimitive.Indicator.displayName;
 

demo/nextjs/components/ui/pagination.tsx

@@ -18,24 +18,30 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 );
 Pagination.displayName = "Pagination";
 
-const PaginationContent = React.forwardRef<
+const PaginationContent = (
-	HTMLUListElement,
+    {
-	React.ComponentProps<"ul">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ul
+        ...props
+    }: React.ComponentProps<"ul"> & {
+        ref: React.RefObject<HTMLUListElement>;
+    }
+) => (<ul
     ref={ref}
     className={cn("flex flex-row items-center gap-1", className)}
     {...props}
-	/>
+/>);
-));
 PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = React.forwardRef<
+const PaginationItem = (
-	HTMLLIElement,
+    {
-	React.ComponentProps<"li">
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<li ref={ref} className={cn("", className)} {...props} />
+        ...props
-));
+    }: React.ComponentProps<"li"> & {
+        ref: React.RefObject<HTMLLIElement>;
+    }
+) => (<li ref={ref} className={cn("", className)} {...props} />);
 PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {

demo/nextjs/components/ui/password-input.tsx

@@ -7,8 +7,15 @@ import { Button } from "@/components/ui/button";
 import { Input, type InputProps } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
-const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+const PasswordInput = (
-	({ className, ...props }, ref) => {
+    {
+        ref,
+        className,
+        ...props
+    }: InputProps & {
+        ref: React.RefObject<HTMLInputElement>;
+    }
+) => {
     const [showPassword, setShowPassword] = React.useState(false);
     const disabled =
         props.value === "" || props.value === undefined || props.disabled;
@@ -51,8 +58,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
             `}</style>
         </div>
     );
-	},
+};
-);
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };

demo/nextjs/components/ui/popover.tsx

@@ -11,11 +11,17 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-const PopoverContent = React.forwardRef<
+const PopoverContent = (
-	React.ElementRef<typeof PopoverPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+        ref,
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+        className,
-	<PopoverPrimitive.Portal>
+        align = "center",
+        sideOffset = 4,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
+    }
+) => (<PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
         ref={ref}
         align={align}
@@ -26,8 +32,7 @@ const PopoverContent = React.forwardRef<
         )}
         {...props}
     />
-	</PopoverPrimitive.Portal>
+</PopoverPrimitive.Portal>);
-));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

demo/nextjs/components/ui/progress.tsx

@@ -5,11 +5,16 @@ import * as ProgressPrimitive from "@radix-ui/react-progress";
 
 import { cn } from "@/lib/utils";
 
-const Progress = React.forwardRef<
+const Progress = (
-	React.ElementRef<typeof ProgressPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+        ref,
->(({ className, value, ...props }, ref) => (
+        className,
-	<ProgressPrimitive.Root
+        value,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof ProgressPrimitive.Root>>;
+    }
+) => (<ProgressPrimitive.Root
     ref={ref}
     className={cn(
         "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
@@ -21,8 +26,7 @@ const Progress = React.forwardRef<
         className="h-full w-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
-	</ProgressPrimitive.Root>
+</ProgressPrimitive.Root>);
-));
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };

demo/nextjs/components/ui/radio-group.tsx

@@ -6,10 +6,15 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 import { cn } from "@/lib/utils";
 
-const RadioGroup = React.forwardRef<
+const RadioGroup = (
-	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+    }
+) => {
 	return (
 		<RadioGroupPrimitive.Root
 			className={cn("grid gap-2", className)}
@@ -17,13 +22,18 @@ const RadioGroup = React.forwardRef<
 			ref={ref}
 		/>
 	);
-});
+};
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioGroupItem = React.forwardRef<
+const RadioGroupItem = (
-	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+        ref,
->(({ className, ...props }, ref) => {
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+        ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+    }
+) => {
 	return (
 		<RadioGroupPrimitive.Item
 			ref={ref}
@@ -38,7 +48,7 @@ const RadioGroupItem = React.forwardRef<
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);
-});
+};
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 export { RadioGroup, RadioGroupItem };

demo/nextjs/components/ui/scroll-area.tsx

@@ -5,11 +5,16 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 import { cn } from "@/lib/utils";
 
-const ScrollArea = React.forwardRef<
+const ScrollArea = (
-	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<ScrollAreaPrimitive.Root
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.Root>>;
+    }
+) => (<ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
@@ -19,15 +24,19 @@ const ScrollArea = React.forwardRef<
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
-	</ScrollAreaPrimitive.Root>
+</ScrollAreaPrimitive.Root>);
-));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = React.forwardRef<
+const ScrollBar = (
-	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    {
-	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+        ref,
->(({ className, orientation = "vertical", ...props }, ref) => (
+        className,
-	<ScrollAreaPrimitive.ScrollAreaScrollbar
+        orientation = "vertical",
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
+        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>;
+    }
+) => (<ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
@@ -41,8 +50,7 @@ const ScrollBar = React.forwardRef<
     {...props}
 >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+</ScrollAreaPrimitive.ScrollAreaScrollbar>);
-));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };

demo/nextjs/components/ui/select.tsx

@@ -17,11 +17,16 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = React.forwardRef<
+const SelectTrigger = (
-	React.ElementRef<typeof SelectPrimitive.Trigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<SelectPrimitive.Trigger
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
+    }
+) => (<SelectPrimitive.Trigger
     ref={ref}
     className={cn(
         "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -33,15 +38,18 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Icon asChild>
         <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
-	</SelectPrimitive.Trigger>
+</SelectPrimitive.Trigger>);
-));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = React.forwardRef<
+const SelectScrollUpButton = (
-	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SelectPrimitive.ScrollUpButton
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
+    }
+) => (<SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
         "flex cursor-default items-center justify-center py-1",
@@ -50,15 +58,18 @@ const SelectScrollUpButton = React.forwardRef<
     {...props}
 >
     <ChevronUpIcon />
-	</SelectPrimitive.ScrollUpButton>
+</SelectPrimitive.ScrollUpButton>);
-));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton = (
-	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SelectPrimitive.ScrollDownButton
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
+    }
+) => (<SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
         "flex cursor-default items-center justify-center py-1",
@@ -67,16 +78,21 @@ const SelectScrollDownButton = React.forwardRef<
     {...props}
 >
     <ChevronDownIcon />
-	</SelectPrimitive.ScrollDownButton>
+</SelectPrimitive.ScrollDownButton>);
-));
 SelectScrollDownButton.displayName =
 	SelectPrimitive.ScrollDownButton.displayName;
 
-const SelectContent = React.forwardRef<
+const SelectContent = (
-	React.ElementRef<typeof SelectPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+        ref,
->(({ className, children, position = "popper", ...props }, ref) => (
+        className,
-	<SelectPrimitive.Portal>
+        children,
+        position = "popper",
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
+    }
+) => (<SelectPrimitive.Portal>
     <SelectPrimitive.Content
         ref={ref}
         className={cn(
@@ -100,27 +116,34 @@ const SelectContent = React.forwardRef<
         </SelectPrimitive.Viewport>
         <SelectScrollDownButton />
     </SelectPrimitive.Content>
-	</SelectPrimitive.Portal>
+</SelectPrimitive.Portal>);
-));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef<
+const SelectLabel = (
-	React.ElementRef<typeof SelectPrimitive.Label>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SelectPrimitive.Label
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
+    }
+) => (<SelectPrimitive.Label
     ref={ref}
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
-	/>
+/>);
-));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef<
+const SelectItem = (
-	React.ElementRef<typeof SelectPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-	<SelectPrimitive.Item
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
+    }
+) => (<SelectPrimitive.Item
     ref={ref}
     className={cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -134,20 +157,22 @@ const SelectItem = React.forwardRef<
         </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-	</SelectPrimitive.Item>
+</SelectPrimitive.Item>);
-));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
+const SelectSeparator = (
-	React.ElementRef<typeof SelectPrimitive.Separator>,
+    {
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SelectPrimitive.Separator
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
+    }
+) => (<SelectPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
-	/>
+/>);
-));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {

demo/nextjs/components/ui/separator.tsx

@@ -5,15 +5,17 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 import { cn } from "@/lib/utils";
 
-const Separator = React.forwardRef<
+const Separator = (
-	React.ElementRef<typeof SeparatorPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-	(
-		{ className, orientation = "horizontal", decorative = true, ...props },
         ref,
-	) => (
+        className,
-		<SeparatorPrimitive.Root
+        orientation = "horizontal",
+        decorative = true,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+    }
+) => (<SeparatorPrimitive.Root
     ref={ref}
     decorative={decorative}
     orientation={orientation}
@@ -23,9 +25,7 @@ const Separator = React.forwardRef<
         className,
     )}
     {...props}
-		/>
+/>);
-	),
-);
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };

demo/nextjs/components/ui/sheet.tsx

@@ -15,10 +15,13 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = React.forwardRef<
+const SheetOverlay = ({
-	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+	className,
->(({ className, ...props }, ref) => (
+	...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+	ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
+}) => (
 	<SheetPrimitive.Overlay
 		className={cn(
 			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -27,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 		{...props}
 		ref={ref}
 	/>
-));
+);
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
@@ -53,10 +56,15 @@ interface SheetContentProps
 	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 		VariantProps<typeof sheetVariants> {}
 
-const SheetContent = React.forwardRef<
+const SheetContent = ({
-	React.ElementRef<typeof SheetPrimitive.Content>,
+	ref,
-	SheetContentProps
+	side = "right",
->(({ side = "right", className, children, ...props }, ref) => (
+	className,
+	children,
+	...props
+}: SheetContentProps & {
+	ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
+}) => (
 	<SheetPortal>
 		<SheetOverlay />
 		<SheetPrimitive.Content
@@ -71,7 +79,7 @@ const SheetContent = React.forwardRef<
 			{children}
 		</SheetPrimitive.Content>
 	</SheetPortal>
-));
+);
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
@@ -102,28 +110,34 @@ const SheetFooter = ({
 );
 SheetFooter.displayName = "SheetFooter";
 
-const SheetTitle = React.forwardRef<
+const SheetTitle = ({
-	React.ElementRef<typeof SheetPrimitive.Title>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+	className,
->(({ className, ...props }, ref) => (
+	...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+	ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
+}) => (
 	<SheetPrimitive.Title
 		ref={ref}
 		className={cn("text-lg font-semibold text-foreground", className)}
 		{...props}
 	/>
-));
+);
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = React.forwardRef<
+const SheetDescription = ({
-	React.ElementRef<typeof SheetPrimitive.Description>,
+	ref,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+	className,
->(({ className, ...props }, ref) => (
+	...props
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+	ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
+}) => (
 	<SheetPrimitive.Description
 		ref={ref}
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-));
+);
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {

demo/nextjs/components/ui/slider.tsx

@@ -5,11 +5,15 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/lib/utils";
 
-const Slider = React.forwardRef<
+const Slider = (
-	React.ElementRef<typeof SliderPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SliderPrimitive.Root
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof SliderPrimitive.Root>>;
+    }
+) => (<SliderPrimitive.Root
     ref={ref}
     className={cn(
         "relative flex w-full touch-none select-none items-center",
@@ -21,8 +25,7 @@ const Slider = React.forwardRef<
         <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-	</SliderPrimitive.Root>
+</SliderPrimitive.Root>);
-));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

demo/nextjs/components/ui/switch.tsx

@@ -5,11 +5,15 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/utils";
 
-const Switch = React.forwardRef<
+const Switch = (
-	React.ElementRef<typeof SwitchPrimitives.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<SwitchPrimitives.Root
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
+    }
+) => (<SwitchPrimitives.Root
     className={cn(
         "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className,
@@ -22,8 +26,7 @@ const Switch = React.forwardRef<
             "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
         )}
     />
-	</SwitchPrimitives.Root>
+</SwitchPrimitives.Root>);
-));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

demo/nextjs/components/ui/table.tsx

@@ -2,110 +2,134 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Table = React.forwardRef<
+const Table = (
-	HTMLTableElement,
+    {
-	React.HTMLAttributes<HTMLTableElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<div className="relative w-full overflow-auto">
+        ...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)}
         {...props}
     />
-	</div>
+</div>);
-));
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<
+const TableHeader = (
-	HTMLTableSectionElement,
+    {
-	React.HTMLAttributes<HTMLTableSectionElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+        ...props
-));
+    }: React.HTMLAttributes<HTMLTableSectionElement> & {
+        ref: React.RefObject<HTMLTableSectionElement>;
+    }
+) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />);
 TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<
+const TableBody = (
-	HTMLTableSectionElement,
+    {
-	React.HTMLAttributes<HTMLTableSectionElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<tbody
+        ...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 = React.forwardRef<
+const TableFooter = (
-	HTMLTableSectionElement,
+    {
-	React.HTMLAttributes<HTMLTableSectionElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<tfoot
+        ...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 = React.forwardRef<
+const TableRow = (
-	HTMLTableRowElement,
+    {
-	React.HTMLAttributes<HTMLTableRowElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<tr
+        ...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 = React.forwardRef<
+const TableHead = (
-	HTMLTableCellElement,
+    {
-	React.ThHTMLAttributes<HTMLTableCellElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<th
+        ...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 = React.forwardRef<
+const TableCell = (
-	HTMLTableCellElement,
+    {
-	React.TdHTMLAttributes<HTMLTableCellElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<td
+        ...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 = React.forwardRef<
+const TableCaption = (
-	HTMLTableCaptionElement,
+    {
-	React.HTMLAttributes<HTMLTableCaptionElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<caption
+        ...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";
 
 export {

demo/nextjs/components/ui/tabs.tsx

@@ -7,49 +7,58 @@ import { cn } from "@/lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = React.forwardRef<
+const TabsList = (
-	React.ElementRef<typeof TabsPrimitive.List>,
+    {
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<TabsPrimitive.List
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
+    }
+) => (<TabsPrimitive.List
     ref={ref}
     className={cn(
         "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = React.forwardRef<
+const TabsTrigger = (
-	React.ElementRef<typeof TabsPrimitive.Trigger>,
+    {
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<TabsPrimitive.Trigger
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
+    }
+) => (<TabsPrimitive.Trigger
     ref={ref}
     className={cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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-sm",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = React.forwardRef<
+const TabsContent = (
-	React.ElementRef<typeof TabsPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<TabsPrimitive.Content
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
+    }
+) => (<TabsPrimitive.Content
     ref={ref}
     className={cn(
         "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export { Tabs, TabsList, TabsTrigger, TabsContent };

demo/nextjs/components/ui/textarea.tsx

@@ -5,8 +5,15 @@ import { cn } from "@/lib/utils";
 export interface TextareaProps
 	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = (
-	({ className, ...props }, ref) => {
+    {
+        ref,
+        className,
+        ...props
+    }: TextareaProps & {
+        ref: React.RefObject<HTMLTextAreaElement>;
+    }
+) => {
     return (
         <textarea
             className={cn(
@@ -17,8 +24,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {...props}
         />
     );
-	},
+};
-);
 Textarea.displayName = "Textarea";
 
 export { Textarea };

demo/nextjs/components/ui/toast.tsx

@@ -9,19 +9,22 @@ import { cn } from "@/lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = React.forwardRef<
+const ToastViewport = (
-	React.ElementRef<typeof ToastPrimitives.Viewport>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ToastPrimitives.Viewport
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
+    }
+) => (<ToastPrimitives.Viewport
     ref={ref}
     className={cn(
         "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
@@ -40,11 +43,14 @@ const toastVariants = cva(
 	},
 );
 
-const Toast = React.forwardRef<
+const Toast = (
-	React.ElementRef<typeof ToastPrimitives.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+        ref,
-		VariantProps<typeof toastVariants>
+        className,
->(({ className, variant, ...props }, ref) => {
+        variant,
+        ...props
+    }
+) => {
 	return (
 		<ToastPrimitives.Root
 			ref={ref}
@@ -52,29 +58,36 @@ const Toast = React.forwardRef<
 			{...props}
 		/>
 	);
-});
+};
 Toast.displayName = ToastPrimitives.Root.displayName;
 
-const ToastAction = React.forwardRef<
+const ToastAction = (
-	React.ElementRef<typeof ToastPrimitives.Action>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ToastPrimitives.Action
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
+    }
+) => (<ToastPrimitives.Action
     ref={ref}
     className={cn(
         "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
         className,
     )}
     {...props}
-	/>
+/>);
-));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
-const ToastClose = React.forwardRef<
+const ToastClose = (
-	React.ElementRef<typeof ToastPrimitives.Close>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ToastPrimitives.Close
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
+    }
+) => (<ToastPrimitives.Close
     ref={ref}
     className={cn(
         "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
@@ -84,32 +97,37 @@ const ToastClose = React.forwardRef<
     {...props}
 >
     <Cross2Icon className="h-4 w-4" />
-	</ToastPrimitives.Close>
+</ToastPrimitives.Close>);
-));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
-const ToastTitle = React.forwardRef<
+const ToastTitle = (
-	React.ElementRef<typeof ToastPrimitives.Title>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ToastPrimitives.Title
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
+    }
+) => (<ToastPrimitives.Title
     ref={ref}
     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
     {...props}
-	/>
+/>);
-));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
-const ToastDescription = React.forwardRef<
+const ToastDescription = (
-	React.ElementRef<typeof ToastPrimitives.Description>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-	<ToastPrimitives.Description
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
+    }
+) => (<ToastPrimitives.Description
     ref={ref}
     className={cn("text-sm opacity-90", className)}
     {...props}
-	/>
+/>);
-));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;

demo/nextjs/components/ui/toggle-group.tsx

@@ -14,12 +14,16 @@ const ToggleGroupContext = React.createContext<
 	variant: "default",
 });
 
-const ToggleGroup = React.forwardRef<
+const ToggleGroup = (
-	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+        ref,
-		VariantProps<typeof toggleVariants>
+        className,
->(({ className, variant, size, children, ...props }, ref) => (
+        variant,
-	<ToggleGroupPrimitive.Root
+        size,
+        children,
+        ...props
+    }
+) => (<ToggleGroupPrimitive.Root
     ref={ref}
     className={cn("flex items-center justify-center gap-1", className)}
     {...props}
@@ -27,16 +31,20 @@ const ToggleGroup = React.forwardRef<
     <ToggleGroupContext.Provider value={{ variant, size }}>
         {children}
     </ToggleGroupContext.Provider>
-	</ToggleGroupPrimitive.Root>
+</ToggleGroupPrimitive.Root>);
-));
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = React.forwardRef<
+const ToggleGroupItem = (
-	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+    {
-	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+        ref,
-		VariantProps<typeof toggleVariants>
+        className,
->(({ className, children, variant, size, ...props }, ref) => {
+        children,
+        variant,
+        size,
+        ...props
+    }
+) => {
 	const context = React.useContext(ToggleGroupContext);
 
 	return (
@@ -54,7 +62,7 @@ const ToggleGroupItem = React.forwardRef<
 			{children}
 		</ToggleGroupPrimitive.Item>
 	);
-});
+};
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 

demo/nextjs/components/ui/toggle.tsx

@@ -28,17 +28,19 @@ const toggleVariants = cva(
 	},
 );
 
-const Toggle = React.forwardRef<
+const Toggle = (
-	React.ElementRef<typeof TogglePrimitive.Root>,
+    {
-	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+        ref,
-		VariantProps<typeof toggleVariants>
+        className,
->(({ className, variant, size, ...props }, ref) => (
+        variant,
-	<TogglePrimitive.Root
+        size,
+        ...props
+    }
+) => (<TogglePrimitive.Root
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
-	/>
+/>);
-));
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 

demo/nextjs/components/ui/tooltip.tsx

@@ -11,11 +11,16 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
+const TooltipContent = (
-	React.ElementRef<typeof TooltipPrimitive.Content>,
+    {
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+        ref,
->(({ className, sideOffset = 4, ...props }, ref) => (
+        className,
-	<TooltipPrimitive.Content
+        sideOffset = 4,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content>>;
+    }
+) => (<TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
@@ -23,8 +28,7 @@ const TooltipContent = React.forwardRef<
         className,
     )}
     {...props}
-	/>
+/>);
-));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

demo/nextjs/package.json

@@ -66,15 +66,15 @@
     "geist": "^1.3.1",
     "input-otp": "^1.4.1",
     "kysely": "^0.27.4",
-    "lucide-react": "^0.439.0",
+    "lucide-react": "^0.477.0",
     "mini-svg-data-uri": "^1.4.4",
     "mysql2": "^3.11.5",
+    "next": "^15.2.0",
     "next-themes": "^0.3.0",
     "prisma": "^5.22.0",
-    "next": "^15.2.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "react-day-picker": "8.10.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.0",
     "react-qr-code": "^2.0.15",
     "react-resizable-panels": "^2.1.7",

pnpm-lock.yaml

@@ -229,8 +229,8 @@ importers:
         specifier: ^0.27.4
         version: 0.27.4
       lucide-react:
-        specifier: ^0.439.0
+        specifier: ^0.477.0
-        version: 0.439.0(react@19.0.0)
+        version: 0.477.0(react@19.0.0)
       mini-svg-data-uri:
         specifier: ^1.4.4
         version: 1.4.4
@@ -15030,11 +15030,6 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
-  lucide-react@0.439.0:
-    resolution: {integrity: sha512-PafSWvDTpxdtNEndS2HIHxcNAbd54OaqSYJO90/b63rab2HWYqDbH194j0i82ZFdWOAcf0AHinRykXRRK2PJbw==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
-
   lucide-react@0.447.0:
     resolution: {integrity: sha512-SZ//hQmvi+kDKrNepArVkYK7/jfeZ5uFNEnYmd45RKZcbGD78KLnrcNXmgeg6m+xNHFvTG+CblszXCy4n6DN4w==}
     peerDependencies:
@@ -15055,6 +15050,11 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lucide-react@0.477.0:
+    resolution: {integrity: sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lucide-solid@0.445.0:
     resolution: {integrity: sha512-YnrhONLbyFuJX8gVE0SUOQ9slugOghLzJyWf7HvOr3Ngkb0vm0tNQ9iGxqxY9iDwuratxkkOj82Q3C29aJoZkA==}
     peerDependencies:
@@ -38079,10 +38079,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  lucide-react@0.439.0(react@19.0.0):
-    dependencies:
-      react: 19.0.0
-
   lucide-react@0.447.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -38099,6 +38095,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lucide-react@0.477.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   lucide-solid@0.445.0(solid-js@1.9.5):
     dependencies:
       solid-js: 1.9.5