fix: demo build & upgrades (#2848)

demo/nextjs/app/(auth)/reset-password/page.tsx

@@ -54,7 +54,9 @@ export default function ResetPassword() {
 								<PasswordInput
 									id="password"
 									value={password}
-									onChange={(e) => setPassword(e.target.value)}
+									onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+										setPassword(e.target.value)
+									}
 									autoComplete="password"
 									placeholder="Password"
 								/>
@@ -64,7 +66,9 @@ export default function ResetPassword() {
 								<PasswordInput
 									id="password"
 									value={confirmPassword}
-									onChange={(e) => setConfirmPassword(e.target.value)}
+									onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+										setConfirmPassword(e.target.value)
+									}
 									autoComplete="password"
 									placeholder="Password"
 								/>

demo/nextjs/app/apps/register/page.tsx

@@ -35,6 +35,7 @@ export default function RegisterOAuthClient() {
 			return;
 		}
 		const res = await client.oauth2.register({
+			// @ts-ignore
 			name,
 			icon: await convertImageToBase64(logo),
 			redirectURLs: [redirectUri],

demo/nextjs/app/dashboard/user-card.tsx

@@ -279,7 +279,9 @@ export default function UserCard(props: {
 											<div className="flex flex-col gap-2">
 												<PasswordInput
 													value={twoFaPassword}
-													onChange={(e) => setTwoFaPassword(e.target.value)}
+													onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+														setTwoFaPassword(e.target.value)
+													}
 													placeholder="Enter Password"
 												/>
 												<Button
@@ -354,7 +356,9 @@ export default function UserCard(props: {
 											</Label>
 											<Input
 												value={twoFaPassword}
-												onChange={(e) => setTwoFaPassword(e.target.value)}
+												onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+													setTwoFaPassword(e.target.value)
+												}
 												placeholder="Enter OTP"
 											/>
 										</div>
@@ -365,7 +369,9 @@ export default function UserCard(props: {
 												id="password"
 												placeholder="Password"
 												value={twoFaPassword}
-												onChange={(e) => setTwoFaPassword(e.target.value)}
+												onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+													setTwoFaPassword(e.target.value)
+												}
 											/>
 										</div>
 									)}
@@ -550,21 +556,27 @@ function ChangePassword() {
 					<PasswordInput
 						id="current-password"
 						value={currentPassword}
-						onChange={(e) => setCurrentPassword(e.target.value)}
+						onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+							setCurrentPassword(e.target.value)
+						}
 						autoComplete="new-password"
 						placeholder="Password"
 					/>
 					<Label htmlFor="new-password">New Password</Label>
 					<PasswordInput
 						value={newPassword}
-						onChange={(e) => setNewPassword(e.target.value)}
+						onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+							setNewPassword(e.target.value)
+						}
 						autoComplete="new-password"
 						placeholder="New Password"
 					/>
 					<Label htmlFor="password">Confirm Password</Label>
 					<PasswordInput
 						value={confirmPassword}
-						onChange={(e) => setConfirmPassword(e.target.value)}
+						onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+							setConfirmPassword(e.target.value)
+						}
 						autoComplete="new-password"
 						placeholder="Confirm Password"
 					/>

demo/nextjs/app/oauth/authorize/page.tsx

@@ -29,6 +29,7 @@ export default async function AuthorizePage({
 	const session = await auth.api.getSession({
 		headers: await headers(),
 	});
+	// @ts-ignore
 	const clientDetails = await auth.api.getOAuthClient({
 		params: {
 			id: client_id,

demo/nextjs/components.json

@@ -16,5 +16,6 @@
 		"ui": "@/components/ui",
 		"lib": "@/lib",
 		"hooks": "@/hooks"
-	}
+	},
+	"iconLibrary": "lucide"
 }

demo/nextjs/components/one-tap.tsx

@@ -58,7 +58,7 @@ function SignInBox() {
 					type="email"
 					placeholder="m@example.com"
 					required
-					onChange={(e) => {
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
 						setEmail(e.target.value);
 					}}
 					value={email}
@@ -77,7 +77,9 @@ function SignInBox() {
 				<PasswordInput
 					id="password"
 					value={password}
-					onChange={(e) => setPassword(e.target.value)}
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+						setPassword(e.target.value)
+					}
 					autoComplete="password"
 					placeholder="Password"
 				/>

demo/nextjs/components/ui/alert.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 	{
 		variants: {
 			variant: {
 				default: "bg-background text-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
 			},
 		},
 		defaultVariants: {
@@ -19,36 +19,48 @@ const alertVariants = cva(
 	},
 );
 
-const Alert = (
-	props?: React.HTMLAttributes<HTMLDivElement> & {
-		variant: "default" | "destructive";
-	},
-) => (
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
 		<div
+			data-slot="alert"
 			role="alert"
-		className={cn(alertVariants({ variant: props?.variant }), props?.className)}
+			className={cn(alertVariants({ variant }), className)}
 			{...props}
 		/>
 	);
-Alert.displayName = "Alert";
+}
 
-const AlertTitle = ({
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
 				className,
-	...props
-}: React.HTMLAttributes<HTMLHeadingElement>) => (
-	<h5
-		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+			)}
 			{...props}
 		/>
 	);
-AlertTitle.displayName = "AlertTitle";
+}
 
-const AlertDescription = ({
+function AlertDescription({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLParagraphElement>) => (
-	<div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
 	);
-AlertDescription.displayName = "AlertDescription";
+}
 
 export { Alert, AlertTitle, AlertDescription };

demo/nextjs/components/ui/avatar.tsx

@@ -5,43 +5,49 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 import { cn } from "@/lib/utils";
 
-const Avatar = ({
+function Avatar({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>) => (
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
 		<AvatarPrimitive.Root
+			data-slot="avatar"
 			className={cn(
-			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
 				className,
 			)}
 			{...props}
 		/>
 	);
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+}
 
-const AvatarImage = ({
+function AvatarImage({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>) => (
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
 		<AvatarPrimitive.Image
-		className={cn("aspect-square h-full w-full", className)}
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
 			{...props}
 		/>
 	);
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+}
 
-const AvatarFallback = ({
+function AvatarFallback({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>) => (
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
 		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
 			className={cn(
-			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+				"bg-muted flex size-full items-center justify-center rounded-full",
 				className,
 			)}
 			{...props}
 		/>
 	);
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+}
 
 export { Avatar, AvatarImage, AvatarFallback };

demo/nextjs/components/ui/checkbox.tsx

@@ -2,32 +2,31 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const Checkbox = ({
-	ref,
+function Checkbox({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
-	ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
-}) => (
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
 		<CheckboxPrimitive.Root
-		ref={ref}
+			data-slot="checkbox"
 			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",
+				"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
-			className={cn("flex items-center justify-center text-current")}
+				data-slot="checkbox-indicator"
+				className="flex items-center justify-center text-current transition-none"
 			>
-			<CheckIcon className="h-4 w-4" />
+				<CheckIcon className="size-3.5" />
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
 	);
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+}
 
 export { Checkbox };

demo/nextjs/components/ui/command.tsx

@@ -1,166 +1,168 @@
 "use client";
 
 import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 
-const Command = ({
-	ref,
+function Command({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
 		<CommandPrimitive
-		ref={ref}
+			data-slot="command"
 			className={cn(
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
 				className,
 			)}
 			{...props}
 		/>
 	);
-Command.displayName = CommandPrimitive.displayName;
+}
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+}) {
 	return (
 		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
 			<DialogContent className="overflow-hidden p-0">
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 					{children}
 				</Command>
 			</DialogContent>
 		</Dialog>
 	);
-};
+}
 
-const CommandInput = ({
-	ref,
+function CommandInput({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
-}) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
 			<CommandPrimitive.Input
-			ref={ref}
+				data-slot="command-input"
 				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",
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				{...props}
 			/>
 		</div>
 	);
+}
 
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = ({
-	ref,
+function CommandList({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
 		<CommandPrimitive.List
-		ref={ref}
-		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
 			{...props}
 		/>
 	);
+}
 
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = ({
-	ref,
+function CommandEmpty({
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
 		<CommandPrimitive.Empty
-		ref={ref}
+			data-slot="command-empty"
 			className="py-6 text-center text-sm"
 			{...props}
 		/>
 	);
+}
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = ({
-	ref,
+function CommandGroup({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
 		<CommandPrimitive.Group
-		ref={ref}
+			data-slot="command-group"
 			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",
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
 				className,
 			)}
 			{...props}
 		/>
 	);
+}
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = ({
-	ref,
+function CommandSeparator({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
 		<CommandPrimitive.Separator
-		ref={ref}
-		className={cn("-mx-1 h-px bg-border", className)}
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
 			{...props}
 		/>
 	);
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+}
 
-const CommandItem = ({
-	ref,
+function CommandItem({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
-	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
-}) => (
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
 		<CommandPrimitive.Item
-		ref={ref}
+			data-slot="command-item"
 			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",
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
 		/>
 	);
+}
 
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
+function CommandShortcut({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<"span">) {
 	return (
 		<span
+			data-slot="command-shortcut"
 			className={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
+				"text-muted-foreground ml-auto text-xs tracking-widest",
 				className,
 			)}
 			{...props}
 		/>
 	);
-};
-CommandShortcut.displayName = "CommandShortcut";
+}
 
 export {
 	Command,

demo/nextjs/components/ui/dialog.tsx

@@ -2,134 +2,134 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root;
+function Dialog({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
 
-const DialogTrigger = DialogPrimitive.Trigger;
+function DialogTrigger({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
 
-const DialogPortal = DialogPrimitive.Portal;
+function DialogPortal({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
 
-const DialogClose = DialogPrimitive.Close;
+function DialogClose({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
 
-const DialogOverlay = ({
-	ref,
+function DialogOverlay({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
-	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
-}) => (
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
 		<DialogPrimitive.Overlay
-		ref={ref}
+			data-slot="dialog-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",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 				className,
 			)}
 			{...props}
 		/>
 	);
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+}
 
-const DialogContent = ({
-	ref,
+function DialogContent({
 	className,
 	children,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
-}) => (
-	<DialogPortal>
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
 			<DialogOverlay />
 			<DialogPrimitive.Content
-			ref={ref}
+				data-slot="dialog-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",
+					"fixed left-[50%] top-[50%] z-50 grid 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 sm:rounded-lg w-11/12",
 					className,
 				)}
 				{...props}
 			>
 				{children}
-			<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" />
+				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+					<XIcon />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>
 			</DialogPrimitive.Content>
 		</DialogPortal>
 	);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+}
 
-const DialogHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
 			className={cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 				className,
 			)}
 			{...props}
 		/>
 	);
-DialogHeader.displayName = "DialogHeader";
+}
 
-const DialogFooter = ({
+function DialogTitle({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-			className,
-		)}
-		{...props}
-	/>
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = ({
-	ref,
-	className,
-	...props
-}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
-	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
-}) => (
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
 		<DialogPrimitive.Title
-		ref={ref}
-		className={cn(
-			"text-lg font-semibold leading-none tracking-tight",
-			className,
-		)}
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
 			{...props}
 		/>
 	);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+}
 
-const DialogDescription = ({
-	ref,
+function DialogDescription({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
-	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
-}) => (
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
 		<DialogPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
 	);
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+}
 
 export {
 	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
 	DialogClose,
 	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
 	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
 };

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

@@ -2,222 +2,256 @@
 
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import {
-	CheckIcon,
-	ChevronRightIcon,
-	DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = ({
-	ref,
-	className,
-	inset,
-	children,
+function DropdownMenu({
 	...props
-}) => (
-	<DropdownMenuPrimitive.SubTrigger
-		ref={ref}
-		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<ChevronRightIcon className="ml-auto h-4 w-4" />
-	</DropdownMenuPrimitive.SubTrigger>
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 	);
-DropdownMenuSubTrigger.displayName =
-	DropdownMenuPrimitive.SubTrigger.displayName;
+}
 
-const DropdownMenuSubContent = ({
-	ref,
-	className,
+function DropdownMenuTrigger({
 	...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
-	ref: React.RefObject<
-		React.ElementRef<typeof DropdownMenuPrimitive.SubContent>
-	>;
-}) => (
-	<DropdownMenuPrimitive.SubContent
-		ref={ref}
-		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className,
-		)}
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
 			{...props}
 		/>
 	);
-DropdownMenuSubContent.displayName =
-	DropdownMenuPrimitive.SubContent.displayName;
+}
 
-const DropdownMenuContent = ({
-	ref,
+function DropdownMenuContent({
 	className,
 	sideOffset = 4,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-	ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-}) => (
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
 		<DropdownMenuPrimitive.Portal>
 			<DropdownMenuPrimitive.Content
-			ref={ref}
+				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				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",
+					"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 					className,
 				)}
 				{...props}
 			/>
 		</DropdownMenuPrimitive.Portal>
 	);
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+}
 
-const DropdownMenuItem = ({ ref, className, inset, ...props }) => (
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
 		<DropdownMenuPrimitive.Item
-		ref={ref}
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
 			className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			inset && "pl-8",
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
 		/>
 	);
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+}
 
-const DropdownMenuCheckboxItem = ({
-	ref,
+function DropdownMenuCheckboxItem({
 	className,
 	children,
 	checked,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-	ref: React.RefObject<
-		React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>
-	>;
-}) => (
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
 		<DropdownMenuPrimitive.CheckboxItem
-		ref={ref}
+			data-slot="dropdown-menu-checkbox-item"
 			className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			checked={checked}
 			{...props}
 		>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-				<CheckIcon className="h-4 w-4" />
+					<CheckIcon className="size-4" />
 				</DropdownMenuPrimitive.ItemIndicator>
 			</span>
 			{children}
 		</DropdownMenuPrimitive.CheckboxItem>
 	);
-DropdownMenuCheckboxItem.displayName =
-	DropdownMenuPrimitive.CheckboxItem.displayName;
+}
 
-const DropdownMenuRadioItem = ({
-	ref,
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
 	className,
 	children,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-	ref: React.RefObject<
-		React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>
-	>;
-}) => (
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
 		<DropdownMenuPrimitive.RadioItem
-		ref={ref}
+			data-slot="dropdown-menu-radio-item"
 			className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
 		>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-				<DotFilledIcon className="h-4 w-4 fill-current" />
+					<CircleIcon className="size-2 fill-current" />
 				</DropdownMenuPrimitive.ItemIndicator>
 			</span>
 			{children}
 		</DropdownMenuPrimitive.RadioItem>
 	);
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+}
 
-const DropdownMenuLabel = ({ ref, className, inset, ...props }) => (
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
 		<DropdownMenuPrimitive.Label
-		ref={ref}
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
 			className={cn(
-			"px-2 py-1.5 text-sm font-semibold",
-			inset && "pl-8",
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
 				className,
 			)}
 			{...props}
 		/>
 	);
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+}
 
-const DropdownMenuSeparator = ({
-	ref,
+function DropdownMenuSeparator({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
-	ref: React.RefObject<
-		React.ElementRef<typeof DropdownMenuPrimitive.Separator>
-	>;
-}) => (
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
 		<DropdownMenuPrimitive.Separator
-		ref={ref}
-		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+}
 
-const DropdownMenuShortcut = ({
+function DropdownMenuShortcut({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<"span">) {
 	return (
 		<span
-			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
 			{...props}
 		/>
 	);
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
 
 export {
 	DropdownMenu,
+	DropdownMenuPortal,
 	DropdownMenuTrigger,
 	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
 	DropdownMenuItem,
 	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
-	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
-	DropdownMenuGroup,
-	DropdownMenuPortal,
 	DropdownMenuSub,
-	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
-	DropdownMenuRadioGroup,
+	DropdownMenuSubContent,
 };

demo/nextjs/components/ui/input.tsx

@@ -2,29 +2,20 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = ({
-	ref,
-	className,
-	type,
-	...props
-}: InputProps & {
-	ref: React.RefObject<HTMLInputElement>;
-}) => {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (
 		<input
 			type={type}
+			data-slot="input"
 			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",
+				"border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 				className,
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-};
-Input.displayName = "Input";
+}
 
 export { Input };

demo/nextjs/components/ui/label.tsx

@@ -1,20 +1,24 @@
 "use client";
+
+import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const labelVariants = cva(
-	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = ({ ref, className, ...props }) => (
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
 		<LabelPrimitive.Root
-		ref={ref}
-		className={cn(labelVariants(), className)}
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
 			{...props}
 		/>
 	);
-Label.displayName = LabelPrimitive.Root.displayName;
+}
 
 export { Label };

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

@@ -4,14 +4,14 @@ import { EyeIcon, EyeOffIcon } from "lucide-react";
 import * as React from "react";
 
 import { Button } from "@/components/ui/button";
-import { Input, type InputProps } from "@/components/ui/input";
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
 const PasswordInput = ({
 	ref,
 	className,
 	...props
-}: InputProps & {
+}: any & {
 	ref: React.RefObject<HTMLInputElement>;
 }) => {
 	const [showPassword, setShowPassword] = React.useState(false);

demo/nextjs/components/ui/popover.tsx

@@ -5,34 +5,44 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root;
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
 
-const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = ({
-	ref,
+function PopoverContent({
 	className,
 	align = "center",
 	sideOffset = 4,
 	...props
-}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-	ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
-}) => (
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
 		<PopoverPrimitive.Portal>
 			<PopoverPrimitive.Content
-			ref={ref}
+				data-slot="popover-content"
 				align={align}
 				sideOffset={sideOffset}
 				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",
+					"bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
 					className,
 				)}
 				{...props}
 			/>
 		</PopoverPrimitive.Portal>
 	);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+}
+
+function PopoverAnchor({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

@@ -1,50 +1,45 @@
 "use client";
 
 import * as React from "react";
-import { CheckIcon } from "@radix-ui/react-icons";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const RadioGroup = ({
-	ref,
+function RadioGroup({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
-	ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
-}) => {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
 	return (
 		<RadioGroupPrimitive.Root
-			className={cn("grid gap-2", className)}
+			data-slot="radio-group"
+			className={cn("grid gap-3", className)}
 			{...props}
-			ref={ref}
 		/>
 	);
-};
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+}
 
-const RadioGroupItem = ({
-	ref,
+function RadioGroupItem({
 	className,
 	...props
-}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-	ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
-}) => {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
 	return (
 		<RadioGroupPrimitive.Item
-			ref={ref}
+			data-slot="radio-group-item"
 			className={cn(
-				"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
-			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-				<CheckIcon className="h-3.5 w-3.5 fill-primary" />
+			<RadioGroupPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				className="relative flex items-center justify-center"
+			>
+				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);
-};
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+}
 
 export { RadioGroup, RadioGroupItem };

demo/nextjs/components/ui/select.tsx

@@ -1,13 +1,8 @@
 "use client";
 
 import * as React from "react";
-import {
-	CaretSortIcon,
-	CheckIcon,
-	ChevronDownIcon,
-	ChevronUpIcon,
-} from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -17,37 +12,30 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = ({
-	ref,
-	className,
-	children,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
-}) => (
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"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 data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className,
 		)}
 		{...props}
 	>
 		{children}
 		<SelectPrimitive.Icon asChild>
-			<CaretSortIcon className="h-4 w-4 opacity-50" />
+			<ChevronsUpDown className="size-4 opacity-50" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
-);
+));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = ({
-	ref,
-	className,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
-}) => (
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
 	<SelectPrimitive.ScrollUpButton
 		ref={ref}
 		className={cn(
@@ -56,20 +44,15 @@ const SelectScrollUpButton = ({
 		)}
 		{...props}
 	>
-		<ChevronUpIcon />
+		<ChevronUp className="h-4 w-4" />
 	</SelectPrimitive.ScrollUpButton>
-);
+));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = ({
-	ref,
-	className,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
-	ref: React.RefObject<
-		React.ElementRef<typeof SelectPrimitive.ScrollDownButton>
-	>;
-}) => (
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
 	<SelectPrimitive.ScrollDownButton
 		ref={ref}
 		className={cn(
@@ -78,21 +61,16 @@ const SelectScrollDownButton = ({
 		)}
 		{...props}
 	>
-		<ChevronDownIcon />
+		<ChevronDown className="h-4 w-4" />
 	</SelectPrimitive.ScrollDownButton>
-);
+));
 SelectScrollDownButton.displayName =
 	SelectPrimitive.ScrollDownButton.displayName;
 
-const SelectContent = ({
-	ref,
-	className,
-	children,
-	position = "popper",
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
-}) => (
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
 	<SelectPrimitive.Portal>
 		<SelectPrimitive.Content
 			ref={ref}
@@ -118,32 +96,25 @@ const SelectContent = ({
 			<SelectScrollDownButton />
 		</SelectPrimitive.Content>
 	</SelectPrimitive.Portal>
-);
+));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = ({
-	ref,
-	className,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
-}) => (
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
 	<SelectPrimitive.Label
 		ref={ref}
 		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
 		{...props}
 	/>
-);
+));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = ({
-	ref,
-	className,
-	children,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
-}) => (
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
@@ -154,27 +125,24 @@ const SelectItem = ({
 	>
 		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
 			<SelectPrimitive.ItemIndicator>
-				<CheckIcon className="h-4 w-4" />
+				<Check className="h-4 w-4" />
 			</SelectPrimitive.ItemIndicator>
 		</span>
 		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 	</SelectPrimitive.Item>
-);
+));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = ({
-	ref,
-	className,
-	...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
-	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
-}) => (
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
 	<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/table.tsx

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

demo/nextjs/components/ui/toast.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 
 import * as React from "react";

demo/nextjs/components/ui/tooltip.tsx

@@ -5,30 +5,57 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = ({
-	ref,
-	className,
-	sideOffset = 4,
+function TooltipProvider({
+	delayDuration = 0,
 	...props
-}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-	ref: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content>>;
-}) => (
-	<TooltipPrimitive.Content
-		ref={ref}
-		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,
-		)}
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
 			{...props}
 		/>
 	);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+}
+
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-primary 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 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="-z-10 relative bg-primary dark:bg-stone-900 dark:fill-stone-900 fill-primary size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

demo/nextjs/components/wrapper.tsx

@@ -27,7 +27,7 @@ export function Wrapper(props: { children: React.ReactNode }) {
 
 const queryClient = new QueryClient();
 
-export function WrapperWithQuery(props: { children: React.ReactNode }) {
+export function WrapperWithQuery(props: { children: React.ReactNode | any }) {
 	return (
 		<QueryClientProvider client={queryClient}>
 			{props.children}

demo/nextjs/hooks/use-toast.ts

@@ -156,6 +156,7 @@ function toast({ ...props }: Toast) {
 			...props,
 			id,
 			open: true,
+			// @ts-ignore
 			onOpenChange: (open) => {
 				if (!open) dismiss();
 			},

demo/nextjs/package.json

@@ -104,6 +104,9 @@
     "tailwindcss": "3.4.16",
     "typescript": "^5.7.2"
   },
+  "resolutions": {
+    "@types/react": "^19.0.0"
+  },
   "overrides": {
     "whatwg-url": "^14.0.0"
   }

demo/nextjs/tsconfig.json

@@ -23,5 +23,5 @@
 		}
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules", "components/ui/**/*.tsx"]
 }