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,37 +12,43 @@ 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
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
-			className,
+    }
-		)}
+) => (<AlertDialogPrimitive.Overlay
-		{...props}
+    className={cn(
-		ref={ref}
+        "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
-		<AlertDialogOverlay />
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-		<AlertDialogPrimitive.Content
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
-			ref={ref}
+    }
-			className={cn(
+) => (<AlertDialogPortal>
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+    <AlertDialogOverlay />
-				className,
+    <AlertDialogPrimitive.Content
-			)}
+        ref={ref}
-			{...props}
+        className={cn(
-		/>
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-	</AlertDialogPortal>
+            className,
-));
+        )}
+        {...props}
+    />
+</AlertDialogPortal>);
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -73,57 +79,69 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
-		className={cn("text-lg font-semibold", className)}
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
-		className={cn("text-sm text-muted-foreground", className)}
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Description>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-		className={cn(buttonVariants(), className)}
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
-			buttonVariants({ variant: "outline" }),
+    }
-			"mt-2 sm:mt-0",
+) => (<AlertDialogPrimitive.Cancel
-			className,
+    ref={ref}
-		)}
+    className={cn(
-		{...props}
+        buttonVariants({ variant: "outline" }),
-	/>
+        "mt-2 sm:mt-0",
-));
+        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,
-		ref={ref}
+        ...props
-		role="alert"
+    }
-		className={cn(alertVariants({ variant }), className)}
+) => (<div
-		{...props}
+    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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLHeadingElement> & {
-		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
-		className={cn("text-sm [&_p]:leading-relaxed", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
-			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+    }
-			className,
+) => (<AvatarPrimitive.Root
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
-		className={cn("aspect-square h-full w-full", className)}
+        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
-			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+    }
-			className,
+) => (<AvatarPrimitive.Fallback
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<"ol"> & {
-		className={cn(
+        ref: React.RefObject<HTMLOListElement>;
-			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    }
-			className,
+) => (<ol
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<"li"> & {
-		className={cn("inline-flex items-center gap-1.5", className)}
+        ref: React.RefObject<HTMLLIElement>;
-		{...props}
+    }
-	/>
+) => (<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,
->(({ asChild, className, ...props }, ref) => {
+        ...props
+    }
+) => {
 	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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<"span"> & {
-		role="link"
+        ref: React.RefObject<HTMLSpanElement>;
-		aria-disabled="true"
+    }
-		aria-current="page"
+) => (<span
-		className={cn("font-normal text-foreground", className)}
+    ref={ref}
-		{...props}
+    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,18 +40,27 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = (
-	({ className, variant, size, asChild = false, ...props }, ref) => {
+    {
-		const Comp = asChild ? Slot : "button";
+        ref,
-		return (
+        className,
-			<Comp
+        variant,
-				className={cn(buttonVariants({ variant, size, className }))}
+        size,
-				ref={ref}
+        asChild = false,
-				{...props}
+        ...props
-			/>
+    }: ButtonProps & {
-		);
+        ref: React.RefObject<HTMLButtonElement>;
-	},
+    }
-);
+) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+        <Comp
+            className={cn(buttonVariants({ variant, size, className }))}
+            ref={ref}
+            {...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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLDivElement> & {
-		className={cn(
+        ref: React.RefObject<HTMLDivElement>;
-			"rounded-xl border bg-card text-card-foreground shadow",
+    }
-			className,
+) => (<div
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLDivElement> & {
-		className={cn("flex flex-col space-y-1.5 p-6", className)}
+        ref: React.RefObject<HTMLDivElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLHeadingElement> & {
-		className={cn("font-semibold leading-none tracking-tight", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
-		className={cn("text-sm text-muted-foreground", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLDivElement> & {
-		className={cn("flex items-center p-6 pt-0", className)}
+        ref: React.RefObject<HTMLDivElement>;
-		{...props}
+    }
-	/>
+) => (<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,118 +42,118 @@ function useCarousel() {
 	return context;
 }
 
-const Carousel = React.forwardRef<
+const Carousel = (
-	HTMLDivElement,
+    {
-	React.HTMLAttributes<HTMLDivElement> & CarouselProps
+        ref,
->(
+        orientation = "horizontal",
-	(
+        opts,
-		{
+        setApi,
-			orientation = "horizontal",
+        plugins,
-			opts,
+        className,
-			setApi,
+        children,
-			plugins,
+        ...props
-			className,
+    }
-			children,
+) => {
-			...props
+    const [carouselRef, api] = useEmblaCarousel(
-		},
+        {
-		ref,
+            ...opts,
-	) => {
+            axis: orientation === "horizontal" ? "x" : "y",
-		const [carouselRef, api] = useEmblaCarousel(
+        },
-			{
+        plugins,
-				...opts,
+    );
-				axis: orientation === "horizontal" ? "x" : "y",
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-			},
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
-			plugins,
-		);
-		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-		const [canScrollNext, setCanScrollNext] = React.useState(false);
 
-		const onSelect = React.useCallback((api: CarouselApi) => {
+    const onSelect = React.useCallback((api: CarouselApi) => {
-			if (!api) {
+        if (!api) {
-				return;
+            return;
-			}
+        }
 
-			setCanScrollPrev(api.canScrollPrev());
+        setCanScrollPrev(api.canScrollPrev());
-			setCanScrollNext(api.canScrollNext());
+        setCanScrollNext(api.canScrollNext());
-		}, []);
+    }, []);
 
-		const scrollPrev = React.useCallback(() => {
+    const scrollPrev = React.useCallback(() => {
-			api?.scrollPrev();
+        api?.scrollPrev();
-		}, [api]);
+    }, [api]);
 
-		const scrollNext = React.useCallback(() => {
+    const scrollNext = React.useCallback(() => {
-			api?.scrollNext();
+        api?.scrollNext();
-		}, [api]);
+    }, [api]);
 
-		const handleKeyDown = React.useCallback(
+    const handleKeyDown = React.useCallback(
-			(event: React.KeyboardEvent<HTMLDivElement>) => {
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
-				if (event.key === "ArrowLeft") {
+            if (event.key === "ArrowLeft") {
-					event.preventDefault();
+                event.preventDefault();
-					scrollPrev();
+                scrollPrev();
-				} else if (event.key === "ArrowRight") {
+            } else if (event.key === "ArrowRight") {
-					event.preventDefault();
+                event.preventDefault();
-					scrollNext();
+                scrollNext();
-				}
+            }
-			},
+        },
-			[scrollPrev, scrollNext],
+        [scrollPrev, scrollNext],
-		);
+    );
 
-		React.useEffect(() => {
+    React.useEffect(() => {
-			if (!api || !setApi) {
+        if (!api || !setApi) {
-				return;
+            return;
-			}
+        }
 
-			setApi(api);
+        setApi(api);
-		}, [api, setApi]);
+    }, [api, setApi]);
 
-		React.useEffect(() => {
+    React.useEffect(() => {
-			if (!api) {
+        if (!api) {
-				return;
+            return;
-			}
+        }
 
-			onSelect(api);
+        onSelect(api);
-			api.on("reInit", onSelect);
+        api.on("reInit", onSelect);
-			api.on("select", onSelect);
+        api.on("select", onSelect);
 
-			return () => {
+        return () => {
-				api?.off("select", onSelect);
+            api?.off("select", onSelect);
-			};
+        };
-		}, [api, onSelect]);
+    }, [api, onSelect]);
 
-		return (
+    return (
-			<CarouselContext.Provider
+        <CarouselContext.Provider
-				value={{
+            value={{
-					carouselRef,
+                carouselRef,
-					api: api,
+                api: api,
-					opts,
+                opts,
-					orientation:
+                orientation:
-						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+                    orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-					scrollPrev,
+                scrollPrev,
-					scrollNext,
+                scrollNext,
-					canScrollPrev,
+                canScrollPrev,
-					canScrollNext,
+                canScrollNext,
-				}}
+            }}
-			>
+        >
-				<div
+            <div
-					ref={ref}
+                ref={ref}
-					onKeyDownCapture={handleKeyDown}
+                onKeyDownCapture={handleKeyDown}
-					className={cn("relative", className)}
+                className={cn("relative", className)}
-					role="region"
+                role="region"
-					aria-roledescription="carousel"
+                aria-roledescription="carousel"
-					{...props}
+                {...props}
-				>
+            >
-					{children}
+                {children}
-				</div>
+            </div>
-			</CarouselContext.Provider>
+        </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,218 +103,203 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-const ChartTooltipContent = React.forwardRef<
+const ChartTooltipContent = (
-	HTMLDivElement,
+    {
-	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+        ref,
-		React.ComponentProps<"div"> & {
+        active,
-			hideLabel?: boolean;
+        payload,
-			hideIndicator?: boolean;
+        className,
-			indicator?: "line" | "dot" | "dashed";
+        indicator = "dot",
-			nameKey?: string;
+        hideLabel = false,
-			labelKey?: string;
+        hideIndicator = false,
-		}
+        label,
->(
+        labelFormatter,
-	(
+        labelClassName,
-		{
+        formatter,
-			active,
+        color,
-			payload,
+        nameKey,
-			className,
+        labelKey
-			indicator = "dot",
+    }
-			hideLabel = false,
+) => {
-			hideIndicator = false,
+    const { config } = useChart();
-			label,
-			labelFormatter,
-			labelClassName,
-			formatter,
-			color,
-			nameKey,
-			labelKey,
-		},
-		ref,
-	) => {
-		const { config } = useChart();
 
-		const tooltipLabel = React.useMemo(() => {
+    const tooltipLabel = React.useMemo(() => {
-			if (hideLabel || !payload?.length) {
+        if (hideLabel || !payload?.length) {
-				return null;
+            return null;
-			}
+        }
 
-			const [item] = payload;
+        const [item] = payload;
-			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+        const key = `${labelKey || item.dataKey || item.name || "value"}`;
-			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-			const value =
+        const value =
-				!labelKey && typeof label === "string"
+            !labelKey && typeof label === "string"
-					? config[label as keyof typeof config]?.label || label
+                ? config[label as keyof typeof config]?.label || label
-					: itemConfig?.label;
+                : itemConfig?.label;
 
-			if (labelFormatter) {
+        if (labelFormatter) {
-				return (
+            return (
-					<div className={cn("font-medium", labelClassName)}>
+                <div className={cn("font-medium", labelClassName)}>
-						{labelFormatter(value, payload)}
+                    {labelFormatter(value, payload)}
-					</div>
+                </div>
-				);
+            );
-			}
+        }
 
-			if (!value) {
+        if (!value) {
-				return null;
+            return null;
-			}
+        }
 
-			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+        return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-		}, [
+    }, [
-			label,
+        label,
-			labelFormatter,
+        labelFormatter,
-			payload,
+        payload,
-			hideLabel,
+        hideLabel,
-			labelClassName,
+        labelClassName,
-			config,
+        config,
-			labelKey,
+        labelKey,
-		]);
+    ]);
 
-		if (!active || !payload?.length) {
+    if (!active || !payload?.length) {
-			return null;
+        return null;
-		}
+    }
 
-		const nestLabel = payload.length === 1 && indicator !== "dot";
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
-		return (
+    return (
-			<div
+        <div
-				ref={ref}
+            ref={ref}
-				className={cn(
+            className={cn(
-					"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+                "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-					className,
+                className,
-				)}
+            )}
-			>
+        >
-				{!nestLabel ? tooltipLabel : null}
+            {!nestLabel ? tooltipLabel : null}
-				<div className="grid gap-1.5">
+            <div className="grid gap-1.5">
-					{payload.map((item, index) => {
+                {payload.map((item, index) => {
-						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
-						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-						const indicatorColor = color || item.payload.fill || item.color;
+                    const indicatorColor = color || item.payload.fill || item.color;
 
-						return (
+                    return (
-							<div
+                        <div
-								key={item.dataKey}
+                            key={item.dataKey}
-								className={cn(
+                            className={cn(
-									"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-									indicator === "dot" && "items-center",
+                                indicator === "dot" && "items-center",
-								)}
+                            )}
-							>
+                        >
-								{formatter && item?.value !== undefined && item.name ? (
+                            {formatter && item?.value !== undefined && item.name ? (
-									formatter(item.value, item.name, item, index, item.payload)
+                                formatter(item.value, item.name, item, index, item.payload)
-								) : (
+                            ) : (
-									<>
+                                <>
-										{itemConfig?.icon ? (
+                                    {itemConfig?.icon ? (
-											<itemConfig.icon />
+                                        <itemConfig.icon />
-										) : (
+                                    ) : (
-											!hideIndicator && (
+                                        !hideIndicator && (
-												<div
+                                            <div
-													className={cn(
+                                                className={cn(
-														"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                                                    "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-														{
+                                                    {
-															"h-2.5 w-2.5": indicator === "dot",
+                                                        "h-2.5 w-2.5": indicator === "dot",
-															"w-1": indicator === "line",
+                                                        "w-1": indicator === "line",
-															"w-0 border-[1.5px] border-dashed bg-transparent":
+                                                        "w-0 border-[1.5px] border-dashed bg-transparent":
-																indicator === "dashed",
+                                                            indicator === "dashed",
-															"my-0.5": nestLabel && indicator === "dashed",
+                                                        "my-0.5": nestLabel && indicator === "dashed",
-														},
+                                                    },
-													)}
+                                                )}
-													style={
+                                                style={
-														{
+                                                    {
-															"--color-bg": indicatorColor,
+                                                        "--color-bg": indicatorColor,
-															"--color-border": indicatorColor,
+                                                        "--color-border": indicatorColor,
-														} as React.CSSProperties
+                                                    } as React.CSSProperties
-													}
+                                                }
-												/>
+                                            />
-											)
+                                        )
-										)}
+                                    )}
-										<div
+                                    <div
-											className={cn(
+                                        className={cn(
-												"flex flex-1 justify-between leading-none",
+                                            "flex flex-1 justify-between leading-none",
-												nestLabel ? "items-end" : "items-center",
+                                            nestLabel ? "items-end" : "items-center",
-											)}
+                                        )}
-										>
+                                    >
-											<div className="grid gap-1.5">
+                                        <div className="grid gap-1.5">
-												{nestLabel ? tooltipLabel : null}
+                                            {nestLabel ? tooltipLabel : null}
-												<span className="text-muted-foreground">
+                                            <span className="text-muted-foreground">
-													{itemConfig?.label || item.name}
+                                                {itemConfig?.label || item.name}
-												</span>
+                                            </span>
-											</div>
+                                        </div>
-											{item.value && (
+                                        {item.value && (
-												<span className="font-mono font-medium tabular-nums text-foreground">
+                                            <span className="font-mono font-medium tabular-nums text-foreground">
-													{item.value.toLocaleString()}
+                                                {item.value.toLocaleString()}
-												</span>
+                                            </span>
-											)}
+                                        )}
-										</div>
+                                    </div>
-									</>
+                                </>
-								)}
+                            )}
-							</div>
+                        </div>
-						);
+                    );
-					})}
+                })}
-				</div>
+            </div>
-			</div>
+        </div>
-		);
+    );
-	},
+};
-);
 ChartTooltipContent.displayName = "ChartTooltip";
 
 const ChartLegend = RechartsPrimitive.Legend;
 
-const ChartLegendContent = React.forwardRef<
+const ChartLegendContent = (
-	HTMLDivElement,
+    {
-	React.ComponentProps<"div"> &
+        ref,
-		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+        className,
-			hideIcon?: boolean;
+        hideIcon = false,
-			nameKey?: string;
+        payload,
-		}
+        verticalAlign = "bottom",
->(
+        nameKey
-	(
+    }
-		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+) => {
-		ref,
+    const { config } = useChart();
-	) => {
-		const { config } = useChart();
 
-		if (!payload?.length) {
+    if (!payload?.length) {
-			return null;
+        return null;
-		}
+    }
 
-		return (
+    return (
-			<div
+        <div
-				ref={ref}
+            ref={ref}
-				className={cn(
+            className={cn(
-					"flex items-center justify-center gap-4",
+                "flex items-center justify-center gap-4",
-					verticalAlign === "top" ? "pb-3" : "pt-3",
+                verticalAlign === "top" ? "pb-3" : "pt-3",
-					className,
+                className,
-				)}
+            )}
-			>
+        >
-				{payload.map((item) => {
+            {payload.map((item) => {
-					const key = `${nameKey || item.dataKey || "value"}`;
+                const key = `${nameKey || item.dataKey || "value"}`;
-					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-					return (
+                return (
-						<div
+                    <div
-							key={item.value}
+                        key={item.value}
-							className={cn(
+                        className={cn(
-								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                            "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-							)}
+                        )}
-						>
+                    >
-							{itemConfig?.icon && !hideIcon ? (
+                        {itemConfig?.icon && !hideIcon ? (
-								<itemConfig.icon />
+                            <itemConfig.icon />
-							) : (
+                        ) : (
-								<div
+                            <div
-									className="h-2 w-2 shrink-0 rounded-[2px]"
+                                className="h-2 w-2 shrink-0 rounded-[2px]"
-									style={{
+                                style={{
-										backgroundColor: item.color,
+                                    backgroundColor: item.color,
-									}}
+                                }}
-								/>
+                            />
-							)}
+                        )}
-							{itemConfig?.label}
+                        {itemConfig?.label}
-						</div>
+                    </div>
-					);
+                );
-				})}
+            })}
-			</div>
+        </div>
-		);
+    );
-	},
+};
-);
 ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.

demo/nextjs/components/ui/checkbox.tsx

@@ -6,25 +6,28 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
-			"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",
+    }
-			className,
+) => (<CheckboxPrimitive.Root
-		)}
+    ref={ref}
-		{...props}
+    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",
-		<CheckboxPrimitive.Indicator
+        className,
-			className={cn("flex items-center justify-center text-current")}
+    )}
-		>
+    {...props}
-			<CheckIcon className="h-4 w-4" />
+>
-		</CheckboxPrimitive.Indicator>
+    <CheckboxPrimitive.Indicator
-	</CheckboxPrimitive.Root>
+        className={cn("flex items-center justify-center text-current")}
-));
+    >
+        <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+    }
-			className,
+) => (<CommandPrimitive
-		)}
+    ref={ref}
-		{...props}
+    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,92 +40,109 @@ 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
-		<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
-		<CommandPrimitive.Input
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
-			ref={ref}
+    }
-			className={cn(
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-				className,
+    <CommandPrimitive.Input
-			)}
+        ref={ref}
-			{...props}
+        className={cn(
-		/>
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-	</div>
+            className,
-));
+        )}
+        {...props}
+    />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
-		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
-		{...props}
+    }
-	/>
+) => (<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={ref}
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
-		className="py-6 text-center text-sm"
+    }
-		{...props}
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
-			"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,
+) => (<CommandPrimitive.Group
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
-		className={cn("-mx-1 h-px bg-border", className)}
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
-			"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,
+) => (<CommandPrimitive.Item
-		)}
+    ref={ref}
-		{...props}
+    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,151 +22,170 @@ 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,
->(({ className, inset, children, ...props }, ref) => (
+        children,
-	<ContextMenuPrimitive.SubTrigger
+        ...props
-		ref={ref}
+    }
-		className={cn(
+) => (<ContextMenuPrimitive.SubTrigger
-			"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",
+    ref={ref}
-			inset && "pl-8",
+    className={cn(
-			className,
+        "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",
-		)}
+        inset && "pl-8",
-		{...props}
+        className,
-	>
+    )}
-		{children}
+    {...props}
-		<ChevronRightIcon className="ml-auto h-4 w-4" />
+>
-	</ContextMenuPrimitive.SubTrigger>
+    {children}
-));
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
-			"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,
+) => (<ContextMenuPrimitive.SubContent
-		)}
+    ref={ref}
-		{...props}
+    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
-		<ContextMenuPrimitive.Content
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
-			ref={ref}
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
-			className={cn(
+    }
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
+) => (<ContextMenuPrimitive.Portal>
-				className,
+    <ContextMenuPrimitive.Content
-			)}
+        ref={ref}
-			{...props}
+        className={cn(
-		/>
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
-	</ContextMenuPrimitive.Portal>
+            className,
-));
+        )}
+        {...props}
+    />
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<ContextMenuPrimitive.Item
+    }
-		ref={ref}
+) => (<ContextMenuPrimitive.Item
-		className={cn(
+    ref={ref}
-			"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",
+    className={cn(
-			inset && "pl-8",
+        "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",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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,
-		ref={ref}
+        checked,
-		className={cn(
+        ...props
-			"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",
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
-			className,
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
-		)}
+    }
-		checked={checked}
+) => (<ContextMenuPrimitive.CheckboxItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<ContextMenuPrimitive.ItemIndicator>
+        className,
-				<CheckIcon className="h-4 w-4" />
+    )}
-			</ContextMenuPrimitive.ItemIndicator>
+    checked={checked}
-		</span>
+    {...props}
-		{children}
+>
-	</ContextMenuPrimitive.CheckboxItem>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-));
+        <ContextMenuPrimitive.ItemIndicator>
+            <CheckIcon className="h-4 w-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
-			className,
+    }
-		)}
+) => (<ContextMenuPrimitive.RadioItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<ContextMenuPrimitive.ItemIndicator>
+        className,
-				<DotFilledIcon className="h-4 w-4 fill-current" />
+    )}
-			</ContextMenuPrimitive.ItemIndicator>
+    {...props}
-		</span>
+>
-		{children}
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-	</ContextMenuPrimitive.RadioItem>
+        <ContextMenuPrimitive.ItemIndicator>
-));
+            <DotFilledIcon className="h-4 w-4 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<ContextMenuPrimitive.Label
+    }
-		ref={ref}
+) => (<ContextMenuPrimitive.Label
-		className={cn(
+    ref={ref}
-			"px-2 py-1.5 text-sm font-semibold text-foreground",
+    className={cn(
-			inset && "pl-8",
+        "px-2 py-1.5 text-sm font-semibold text-foreground",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
-		className={cn("-mx-1 my-1 h-px bg-border", className)}
+        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
-		{...props}
+    }
-	/>
+) => (<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,43 +14,50 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
-			"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,
+) => (<DialogPrimitive.Overlay
-		)}
+    ref={ref}
-		{...props}
+    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,
-		<DialogOverlay />
+        ...props
-		<DialogPrimitive.Content
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-			ref={ref}
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
-			className={cn(
+    }
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+) => (<DialogPortal>
-				className,
+    <DialogOverlay />
-			)}
+    <DialogPrimitive.Content
-			{...props}
+        ref={ref}
-		>
+        className={cn(
-			{children}
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            className,
-				<Cross2Icon className="h-4 w-4" />
+        )}
-				<span className="sr-only">Close</span>
+        {...props}
-			</DialogPrimitive.Close>
+    >
-		</DialogPrimitive.Content>
+        {children}
-	</DialogPortal>
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-));
+            <Cross2Icon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
-			"text-lg font-semibold leading-none tracking-tight",
+    }
-			className,
+) => (<DialogPrimitive.Title
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
-		className={cn("text-sm text-muted-foreground", className)}
+        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
-		{...props}
+    }
-	/>
+) => (<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,37 +22,44 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
-		className={cn("fixed inset-0 z-50 bg-black/80", className)}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
-		{...props}
+    }
-	/>
+) => (<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,
-		<DrawerOverlay />
+        ...props
-		<DrawerPrimitive.Content
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
-			ref={ref}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
-			className={cn(
+    }
-				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+) => (<DrawerPortal>
-				className,
+    <DrawerOverlay />
-			)}
+    <DrawerPrimitive.Content
-			{...props}
+        ref={ref}
-		>
+        className={cn(
-			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+            "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-			{children}
+            className,
-		</DrawerPrimitive.Content>
+        )}
-	</DrawerPortal>
+        {...props}
-));
+    >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+    </DrawerPrimitive.Content>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
-			"text-lg font-semibold leading-none tracking-tight",
+    }
-			className,
+) => (<DrawerPrimitive.Title
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
-		className={cn("text-sm text-muted-foreground", className)}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
-		{...props}
+    }
-	/>
+) => (<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,155 +22,175 @@ 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,
->(({ className, inset, children, ...props }, ref) => (
+        children,
-	<DropdownMenuPrimitive.SubTrigger
+        ...props
-		ref={ref}
+    }
-		className={cn(
+) => (<DropdownMenuPrimitive.SubTrigger
-			"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",
+    ref={ref}
-			inset && "pl-8",
+    className={cn(
-			className,
+        "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",
-		)}
+        inset && "pl-8",
-		{...props}
+        className,
-	>
+    )}
-		{children}
+    {...props}
-		<ChevronRightIcon className="ml-auto h-4 w-4" />
+>
-	</DropdownMenuPrimitive.SubTrigger>
+    {children}
-));
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
-			"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,
+) => (<DropdownMenuPrimitive.SubContent
-		)}
+    ref={ref}
-		{...props}
+    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,
-		<DropdownMenuPrimitive.Content
+        ...props
-			ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-			sideOffset={sideOffset}
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-			className={cn(
+    }
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+) => (<DropdownMenuPrimitive.Portal>
-				"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",
+    <DropdownMenuPrimitive.Content
-				className,
+        ref={ref}
-			)}
+        sideOffset={sideOffset}
-			{...props}
+        className={cn(
-		/>
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-	</DropdownMenuPrimitive.Portal>
+            "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}
+    />
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<DropdownMenuPrimitive.Item
+    }
-		ref={ref}
+) => (<DropdownMenuPrimitive.Item
-		className={cn(
+    ref={ref}
-			"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",
+    className={cn(
-			inset && "pl-8",
+        "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",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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,
-		ref={ref}
+        checked,
-		className={cn(
+        ...props
-			"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",
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-			className,
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
-		)}
+    }
-		checked={checked}
+) => (<DropdownMenuPrimitive.CheckboxItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<DropdownMenuPrimitive.ItemIndicator>
+        className,
-				<CheckIcon className="h-4 w-4" />
+    )}
-			</DropdownMenuPrimitive.ItemIndicator>
+    checked={checked}
-		</span>
+    {...props}
-		{children}
+>
-	</DropdownMenuPrimitive.CheckboxItem>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-));
+        <DropdownMenuPrimitive.ItemIndicator>
+            <CheckIcon className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
-			className,
+    }
-		)}
+) => (<DropdownMenuPrimitive.RadioItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<DropdownMenuPrimitive.ItemIndicator>
+        className,
-				<DotFilledIcon className="h-4 w-4 fill-current" />
+    )}
-			</DropdownMenuPrimitive.ItemIndicator>
+    {...props}
-		</span>
+>
-		{children}
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-	</DropdownMenuPrimitive.RadioItem>
+        <DropdownMenuPrimitive.ItemIndicator>
-));
+            <DotFilledIcon className="h-4 w-4 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<DropdownMenuPrimitive.Label
+    }
-		ref={ref}
+) => (<DropdownMenuPrimitive.Label
-		className={cn(
+    ref={ref}
-			"px-2 py-1.5 text-sm font-semibold",
+    className={cn(
-			inset && "pl-8",
+        "px-2 py-1.5 text-sm font-semibold",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
-		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
-		{...props}
+    }
-	/>
+) => (<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,21 +9,26 @@ 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",
-		ref={ref}
+        sideOffset = 4,
-		align={align}
+        ...props
-		sideOffset={sideOffset}
+    }: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof HoverCardPrimitive.Content>>;
-			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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,
+) => (<HoverCardPrimitive.Content
-		)}
+    ref={ref}
-		{...props}
+    align={align}
-	/>
+    sideOffset={sideOffset}
-));
+    className={cn(
+        "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+/>);
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -6,34 +6,45 @@ 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,
-		ref={ref}
+        ...props
-		containerClassName={cn(
+    }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
-			"flex items-center gap-2 has-[:disabled]:opacity-50",
+        ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
-			containerClassName,
+    }
-		)}
+) => (<OTPInput
-		className={cn("disabled:cursor-not-allowed", className)}
+    ref={ref}
-		{...props}
+    containerClassName={cn(
-	/>
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
-));
+        containerClassName,
+    )}
+    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"> & {
-		<DashIcon />
+        ref: React.RefObject<React.ElementRef<"div">>;
-	</div>
+    }
-));
+) => (<div ref={ref} role="separator" {...props}>
+    <DashIcon />
+</div>);
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

demo/nextjs/components/ui/input.tsx

@@ -5,21 +5,28 @@ import { cn } from "@/lib/utils";
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = (
-	({ className, type, ...props }, ref) => {
+    {
-		return (
+        ref,
-			<input
+        className,
-				type={type}
+        type,
-				className={cn(
+        ...props
-					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    }: InputProps & {
-					className,
+        ref: React.RefObject<HTMLInputElement>;
-				)}
+    }
-				ref={ref}
+) => {
-				{...props}
+    return (
-			/>
+        <input
-		);
+            type={type}
-	},
+            className={cn(
-);
+                "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                className,
+            )}
+            ref={ref}
+            {...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
+    }
-		ref={ref}
+) => (<LabelPrimitive.Root
-		className={cn(labelVariants(), className)}
+    ref={ref}
-		{...props}
+    className={cn(labelVariants(), className)}
-	/>
+    {...props}
-));
+/>);
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

demo/nextjs/components/ui/menubar.tsx

@@ -20,188 +20,211 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Root>>;
-			"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+    }
-			className,
+) => (<MenubarPrimitive.Root
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Trigger>>;
-			"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,
+) => (<MenubarPrimitive.Trigger
-		)}
+    ref={ref}
-		{...props}
+    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,
->(({ className, inset, children, ...props }, ref) => (
+        children,
-	<MenubarPrimitive.SubTrigger
+        ...props
-		ref={ref}
+    }
-		className={cn(
+) => (<MenubarPrimitive.SubTrigger
-			"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",
+    ref={ref}
-			inset && "pl-8",
+    className={cn(
-			className,
+        "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",
-		)}
+        inset && "pl-8",
-		{...props}
+        className,
-	>
+    )}
-		{children}
+    {...props}
-		<ChevronRightIcon className="ml-auto h-4 w-4" />
+>
-	</MenubarPrimitive.SubTrigger>
+    {children}
-));
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.SubContent>>;
-			"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,
+) => (<MenubarPrimitive.SubContent
-		)}
+    ref={ref}
-		{...props}
+    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>
+        ref,
->(
+        className,
-	(
+        align = "start",
-		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+        alignOffset = -4,
-		ref,
+        sideOffset = 8,
-	) => (
+        ...props
-		<MenubarPrimitive.Portal>
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
-			<MenubarPrimitive.Content
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Content>>;
-				ref={ref}
+    }
-				align={align}
+) => (<MenubarPrimitive.Portal>
-				alignOffset={alignOffset}
+    <MenubarPrimitive.Content
-				sideOffset={sideOffset}
+        ref={ref}
-				className={cn(
+        align={align}
-					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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",
+        alignOffset={alignOffset}
-					className,
+        sideOffset={sideOffset}
-				)}
+        className={cn(
-				{...props}
+            "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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,
-		</MenubarPrimitive.Portal>
+        )}
-	),
+        {...props}
-);
+    />
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<MenubarPrimitive.Item
+    }
-		ref={ref}
+) => (<MenubarPrimitive.Item
-		className={cn(
+    ref={ref}
-			"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",
+    className={cn(
-			inset && "pl-8",
+        "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",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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,
-		ref={ref}
+        checked,
-		className={cn(
+        ...props
-			"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",
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & {
-			className,
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.CheckboxItem>>;
-		)}
+    }
-		checked={checked}
+) => (<MenubarPrimitive.CheckboxItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<MenubarPrimitive.ItemIndicator>
+        className,
-				<CheckIcon className="h-4 w-4" />
+    )}
-			</MenubarPrimitive.ItemIndicator>
+    checked={checked}
-		</span>
+    {...props}
-		{children}
+>
-	</MenubarPrimitive.CheckboxItem>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-));
+        <MenubarPrimitive.ItemIndicator>
+            <CheckIcon className="h-4 w-4" />
+        </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.RadioItem>>;
-			className,
+    }
-		)}
+) => (<MenubarPrimitive.RadioItem
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<MenubarPrimitive.ItemIndicator>
+        className,
-				<DotFilledIcon className="h-4 w-4 fill-current" />
+    )}
-			</MenubarPrimitive.ItemIndicator>
+    {...props}
-		</span>
+>
-		{children}
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-	</MenubarPrimitive.RadioItem>
+        <MenubarPrimitive.ItemIndicator>
-));
+            <DotFilledIcon className="h-4 w-4 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+</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,
->(({ className, inset, ...props }, ref) => (
+        ...props
-	<MenubarPrimitive.Label
+    }
-		ref={ref}
+) => (<MenubarPrimitive.Label
-		className={cn(
+    ref={ref}
-			"px-2 py-1.5 text-sm font-semibold",
+    className={cn(
-			inset && "pl-8",
+        "px-2 py-1.5 text-sm font-semibold",
-			className,
+        inset && "pl-8",
-		)}
+        className,
-		{...props}
+    )}
-	/>
+    {...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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> & {
-		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Separator>>;
-		{...props}
+    }
-	/>
+) => (<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,37 +5,44 @@ 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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
-			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
-			className,
+    }
-		)}
+) => (<NavigationMenuPrimitive.Root
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		{children}
+        "relative z-10 flex max-w-max flex-1 items-center justify-center",
-		<NavigationMenuViewport />
+        className,
-	</NavigationMenuPrimitive.Root>
+    )}
-));
+    {...props}
+>
+    {children}
+    <NavigationMenuViewport />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
-			"group flex flex-1 list-none items-center justify-center space-x-1",
+    }
-			className,
+) => (<NavigationMenuPrimitive.List
-		)}
+    ref={ref}
-		{...props}
+    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,74 +51,87 @@ 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,
-		ref={ref}
+        ...props
-		className={cn(navigationMenuTriggerStyle(), "group", className)}
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
-		{...props}
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
-	>
+    }
-		{children}{" "}
+) => (<NavigationMenuPrimitive.Trigger
-		<ChevronDownIcon
+    ref={ref}
-			className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
-			aria-hidden="true"
+    {...props}
-		/>
+>
-	</NavigationMenuPrimitive.Trigger>
+    {children}{" "}
-));
+    <ChevronDownIcon
+        className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+    />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
-			"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,
+) => (<NavigationMenuPrimitive.Content
-		)}
+    ref={ref}
-		{...props}
+    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
-		<NavigationMenuPrimitive.Viewport
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
-			className={cn(
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
-				"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)]",
+    }
-				className,
+) => (<div className={cn("absolute left-0 top-full flex justify-center")}>
-			)}
+    <NavigationMenuPrimitive.Viewport
-			ref={ref}
+        className={cn(
-			{...props}
+            "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)]",
-		/>
+            className,
-	</div>
+        )}
-));
+        ref={ref}
+        {...props}
+    />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
-			"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",
+    }
-			className,
+) => (<NavigationMenuPrimitive.Indicator
-		)}
+    ref={ref}
-		{...props}
+    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",
-		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+        className,
-	</NavigationMenuPrimitive.Indicator>
+    )}
-));
+    {...props}
+>
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+</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
-		ref={ref}
+    }: React.ComponentProps<"ul"> & {
-		className={cn("flex flex-row items-center gap-1", className)}
+        ref: React.RefObject<HTMLUListElement>;
-		{...props}
+    }
-	/>
+) => (<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,52 +7,58 @@ 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) => {
+    {
-		const [showPassword, setShowPassword] = React.useState(false);
+        ref,
-		const disabled =
+        className,
-			props.value === "" || props.value === undefined || props.disabled;
+        ...props
+    }: InputProps & {
+        ref: React.RefObject<HTMLInputElement>;
+    }
+) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const disabled =
+        props.value === "" || props.value === undefined || props.disabled;
 
-		return (
+    return (
-			<div className="relative">
+        <div className="relative">
-				<Input
+            <Input
-					{...props}
+                {...props}
-					type={showPassword ? "text" : "password"}
+                type={showPassword ? "text" : "password"}
-					name="password_fake"
+                name="password_fake"
-					className={cn("hide-password-toggle pr-10", className)}
+                className={cn("hide-password-toggle pr-10", className)}
-					ref={ref}
+                ref={ref}
-				/>
+            />
-				<Button
+            <Button
-					type="button"
+                type="button"
-					variant="ghost"
+                variant="ghost"
-					size="sm"
+                size="sm"
-					className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-					onClick={() => setShowPassword((prev) => !prev)}
+                onClick={() => setShowPassword((prev) => !prev)}
-					disabled={disabled}
+                disabled={disabled}
-				>
+            >
-					{showPassword && !disabled ? (
+                {showPassword && !disabled ? (
-						<EyeIcon className="h-4 w-4" aria-hidden="true" />
+                    <EyeIcon className="h-4 w-4" aria-hidden="true" />
-					) : (
+                ) : (
-						<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+                    <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
-					)}
+                )}
-					<span className="sr-only">
+                <span className="sr-only">
-						{showPassword ? "Hide password" : "Show password"}
+                    {showPassword ? "Hide password" : "Show password"}
-					</span>
+                </span>
-				</Button>
+            </Button>
 
-				{/* hides browsers password toggles */}
+            {/* hides browsers password toggles */}
-				<style>{`
+            <style>{`
-					.hide-password-toggle::-ms-reveal,
+                .hide-password-toggle::-ms-reveal,
-					.hide-password-toggle::-ms-clear {
+                .hide-password-toggle::-ms-clear {
-						visibility: hidden;
+                    visibility: hidden;
-						pointer-events: none;
+                    pointer-events: none;
-						display: none;
+                    display: none;
-					}
+                }
-				`}</style>
+            `}</style>
-			</div>
+        </div>
-		);
+    );
-	},
+};
-);
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };

demo/nextjs/components/ui/popover.tsx

@@ -11,23 +11,28 @@ 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",
-		<PopoverPrimitive.Content
+        sideOffset = 4,
-			ref={ref}
+        ...props
-			align={align}
+    }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-			sideOffset={sideOffset}
+        ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
-			className={cn(
+    }
-				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+) => (<PopoverPrimitive.Portal>
-				className,
+    <PopoverPrimitive.Content
-			)}
+        ref={ref}
-			{...props}
+        align={align}
-		/>
+        sideOffset={sideOffset}
-	</PopoverPrimitive.Portal>
+        className={cn(
-));
+            "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+    />
+</PopoverPrimitive.Portal>);
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

demo/nextjs/components/ui/progress.tsx

@@ -5,24 +5,28 @@ 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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
-			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        ref: React.RefObject<React.ElementRef<typeof ProgressPrimitive.Root>>;
-			className,
+    }
-		)}
+) => (<ProgressPrimitive.Root
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<ProgressPrimitive.Indicator
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-			className="h-full w-full flex-1 bg-primary transition-all"
+        className,
-			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    )}
-		/>
+    {...props}
-	</ProgressPrimitive.Root>
+>
-));
+    <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+</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,44 +5,52 @@ 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,
-		ref={ref}
+        ...props
-		className={cn("relative overflow-hidden", className)}
+    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-		{...props}
+        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.Root>>;
-	>
+    }
-		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+) => (<ScrollAreaPrimitive.Root
-			{children}
+    ref={ref}
-		</ScrollAreaPrimitive.Viewport>
+    className={cn("relative overflow-hidden", className)}
-		<ScrollBar />
+    {...props}
-		<ScrollAreaPrimitive.Corner />
+>
-	</ScrollAreaPrimitive.Root>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-));
+        {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+</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",
-		ref={ref}
+        ...props
-		orientation={orientation}
+    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>;
-			"flex touch-none select-none transition-colors",
+    }
-			orientation === "vertical" &&
+) => (<ScrollAreaPrimitive.ScrollAreaScrollbar
-				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+    ref={ref}
-			orientation === "horizontal" &&
+    orientation={orientation}
-				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+    className={cn(
-			className,
+        "flex touch-none select-none transition-colors",
-		)}
+        orientation === "vertical" &&
-		{...props}
+            "h-full w-2.5 border-l border-l-transparent p-[1px]",
-	>
+        orientation === "horizontal" &&
-		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+            "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+        className,
-));
+    )}
+    {...props}
+>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+</ScrollAreaPrimitive.ScrollAreaScrollbar>);
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };

demo/nextjs/components/ui/select.tsx

@@ -17,137 +17,162 @@ 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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
-			className,
+    }
-		)}
+) => (<SelectPrimitive.Trigger
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		{children}
+        "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",
-		<SelectPrimitive.Icon asChild>
+        className,
-			<CaretSortIcon className="h-4 w-4 opacity-50" />
+    )}
-		</SelectPrimitive.Icon>
+    {...props}
-	</SelectPrimitive.Trigger>
+>
-));
+    {children}
+    <SelectPrimitive.Icon asChild>
+        <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
-			"flex cursor-default items-center justify-center py-1",
+    }
-			className,
+) => (<SelectPrimitive.ScrollUpButton
-		)}
+    ref={ref}
-		{...props}
+    className={cn(
-	>
+        "flex cursor-default items-center justify-center py-1",
-		<ChevronUpIcon />
+        className,
-	</SelectPrimitive.ScrollUpButton>
+    )}
-));
+    {...props}
+>
+    <ChevronUpIcon />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
-			"flex cursor-default items-center justify-center py-1",
+    }
-			className,
+) => (<SelectPrimitive.ScrollDownButton
-		)}
+    ref={ref}
-		{...props}
+    className={cn(
-	>
+        "flex cursor-default items-center justify-center py-1",
-		<ChevronDownIcon />
+        className,
-	</SelectPrimitive.ScrollDownButton>
+    )}
-));
+    {...props}
+>
+    <ChevronDownIcon />
+</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,
-		<SelectPrimitive.Content
+        position = "popper",
-			ref={ref}
+        ...props
-			className={cn(
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
-				position === "popper" &&
+    }
-					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+) => (<SelectPrimitive.Portal>
-				className,
+    <SelectPrimitive.Content
-			)}
+        ref={ref}
-			position={position}
+        className={cn(
-			{...props}
+            "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
-		>
+            position === "popper" &&
-			<SelectScrollUpButton />
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-			<SelectPrimitive.Viewport
+            className,
-				className={cn(
+        )}
-					"p-1",
+        position={position}
-					position === "popper" &&
+        {...props}
-						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+    >
-				)}
+        <SelectScrollUpButton />
-			>
+        <SelectPrimitive.Viewport
-				{children}
+            className={cn(
-			</SelectPrimitive.Viewport>
+                "p-1",
-			<SelectScrollDownButton />
+                position === "popper" &&
-		</SelectPrimitive.Content>
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-	</SelectPrimitive.Portal>
+            )}
-));
+        >
+            {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
-		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
-		{...props}
+    }
-	/>
+) => (<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,
-		ref={ref}
+        ...props
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
-			className,
+    }
-		)}
+) => (<SelectPrimitive.Item
-		{...props}
+    ref={ref}
-	>
+    className={cn(
-		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        "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",
-			<SelectPrimitive.ItemIndicator>
+        className,
-				<CheckIcon className="h-4 w-4" />
+    )}
-			</SelectPrimitive.ItemIndicator>
+    {...props}
-		</span>
+>
-		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-	</SelectPrimitive.Item>
+        <SelectPrimitive.ItemIndicator>
-));
+            <CheckIcon className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
-		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
-		{...props}
+    }
-	/>
+) => (<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,27 +5,27 @@ 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>
+        ref,
->(
+        className,
-	(
+        orientation = "horizontal",
-		{ className, orientation = "horizontal", decorative = true, ...props },
+        decorative = true,
-		ref,
+        ...props
-	) => (
+    }: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
-		<SeparatorPrimitive.Root
+        ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
-			ref={ref}
+    }
-			decorative={decorative}
+) => (<SeparatorPrimitive.Root
-			orientation={orientation}
+    ref={ref}
-			className={cn(
+    decorative={decorative}
-				"shrink-0 bg-border",
+    orientation={orientation}
-				orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+    className={cn(
-				className,
+        "shrink-0 bg-border",
-			)}
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-			{...props}
+        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,24 +5,27 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof SliderPrimitive.Root>>;
-			"relative flex w-full touch-none select-none items-center",
+    }
-			className,
+) => (<SliderPrimitive.Root
-		)}
+    ref={ref}
-		{...props}
+    className={cn(
-	>
+        "relative flex w-full touch-none select-none items-center",
-		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+        className,
-			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+    )}
-		</SliderPrimitive.Track>
+    {...props}
-		<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.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-));
+        <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>);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

demo/nextjs/components/ui/switch.tsx

@@ -5,25 +5,28 @@ 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
-		className={cn(
+    }: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
-			"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",
+        ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
-			className,
+    }
-		)}
+) => (<SwitchPrimitives.Root
-		{...props}
+    className={cn(
-		ref={ref}
+        "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,
-		<SwitchPrimitives.Thumb
+    )}
-			className={cn(
+    {...props}
-				"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",
+    ref={ref}
-			)}
+>
-		/>
+    <SwitchPrimitives.Thumb
-	</SwitchPrimitives.Root>
+        className={cn(
-));
+            "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>);
 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
-		<table
+    }: React.HTMLAttributes<HTMLTableElement> & {
-			ref={ref}
+        ref: React.RefObject<HTMLTableElement>;
-			className={cn("w-full caption-bottom text-sm", className)}
+    }
-			{...props}
+) => (<div className="relative w-full overflow-auto">
-		/>
+    <table
-	</div>
+        ref={ref}
-));
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+    />
+</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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLTableSectionElement> & {
-		className={cn("[&_tr:last-child]:border-0", className)}
+        ref: React.RefObject<HTMLTableSectionElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLTableSectionElement> & {
-		className={cn(
+        ref: React.RefObject<HTMLTableSectionElement>;
-			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+    }
-			className,
+) => (<tfoot
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLTableRowElement> & {
-		className={cn(
+        ref: React.RefObject<HTMLTableRowElement>;
-			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+    }
-			className,
+) => (<tr
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ThHTMLAttributes<HTMLTableCellElement> & {
-		className={cn(
+        ref: React.RefObject<HTMLTableCellElement>;
-			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+    }
-			className,
+) => (<th
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.TdHTMLAttributes<HTMLTableCellElement> & {
-		className={cn(
+        ref: React.RefObject<HTMLTableCellElement>;
-			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+    }
-			className,
+) => (<td
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.HTMLAttributes<HTMLTableCaptionElement> & {
-		className={cn("mt-4 text-sm text-muted-foreground", className)}
+        ref: React.RefObject<HTMLTableCaptionElement>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
-			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+    }
-			className,
+) => (<TabsPrimitive.List
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
-			"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,
+) => (<TabsPrimitive.Trigger
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    }
-			className,
+) => (<TabsPrimitive.Content
-		)}
+    ref={ref}
-		{...props}
+    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,20 +5,26 @@ import { cn } from "@/lib/utils";
 export interface TextareaProps
 	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = (
-	({ className, ...props }, ref) => {
+    {
-		return (
+        ref,
-			<textarea
+        className,
-				className={cn(
+        ...props
-					"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    }: TextareaProps & {
-					className,
+        ref: React.RefObject<HTMLTextAreaElement>;
-				)}
+    }
-				ref={ref}
+) => {
-				{...props}
+    return (
-			/>
+        <textarea
-		);
+            className={cn(
-	},
+                "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-);
+                className,
+            )}
+            ref={ref}
+            {...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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
-			"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,
+) => (<ToastPrimitives.Viewport
-		)}
+    ref={ref}
-		{...props}
+    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,64 +58,76 @@ 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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
-			"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,
+) => (<ToastPrimitives.Action
-		)}
+    ref={ref}
-		{...props}
+    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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
-			"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",
+    }
-			className,
+) => (<ToastPrimitives.Close
-		)}
+    ref={ref}
-		toast-close=""
+    className={cn(
-		{...props}
+        "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",
-	>
+        className,
-		<Cross2Icon className="h-4 w-4" />
+    )}
-	</ToastPrimitives.Close>
+    toast-close=""
-));
+    {...props}
+>
+    <Cross2Icon className="h-4 w-4" />
+</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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
-		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
-		{...props}
+    }
-	/>
+) => (<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
-		ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
-		className={cn("text-sm opacity-90", className)}
+        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
-		{...props}
+    }
-	/>
+) => (<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,29 +14,37 @@ 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,
-		ref={ref}
+        children,
-		className={cn("flex items-center justify-center gap-1", className)}
+        ...props
-		{...props}
+    }
-	>
+) => (<ToggleGroupPrimitive.Root
-		<ToggleGroupContext.Provider value={{ variant, size }}>
+    ref={ref}
-			{children}
+    className={cn("flex items-center justify-center gap-1", className)}
-		</ToggleGroupContext.Provider>
+    {...props}
-	</ToggleGroupPrimitive.Root>
+>
-));
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+    </ToggleGroupContext.Provider>
+</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,
-		ref={ref}
+        ...props
-		className={cn(toggleVariants({ variant, size, className }))}
+    }
-		{...props}
+) => (<TogglePrimitive.Root
-	/>
+    ref={ref}
-));
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+/>);
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 

demo/nextjs/components/ui/tooltip.tsx

@@ -11,20 +11,24 @@ 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,
-		ref={ref}
+        ...props
-		sideOffset={sideOffset}
+    }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-		className={cn(
+        ref: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content>>;
-			"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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,
+) => (<TooltipPrimitive.Content
-		)}
+    ref={ref}
-		{...props}
+    sideOffset={sideOffset}
-	/>
+    className={cn(
-));
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
+/>);
 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