From 9d8bbb747106d6bedfd47ae2fcc893eefc8403ec Mon Sep 17 00:00:00 2001
From: Bereket Engida <bekacru@gmail.com>
Date: Tue, 4 Mar 2025 20:31:58 +0300
Subject: [PATCH] chore: lint

---
 demo/nextjs/components/ui/alert-dialog.tsx    | 184 ++++-----
 demo/nextjs/components/ui/alert.tsx           |  75 ++--
 demo/nextjs/components/ui/avatar.tsx          |  90 ++---
 demo/nextjs/components/ui/breadcrumb.tsx      | 108 +++---
 demo/nextjs/components/ui/button.tsx          |  38 +-
 demo/nextjs/components/ui/card.tsx            | 152 ++++----
 demo/nextjs/components/ui/carousel.tsx        | 248 ++++++------
 demo/nextjs/components/ui/chart.tsx           | 365 +++++++++---------
 demo/nextjs/components/ui/checkbox.tsx        |  44 +--
 demo/nextjs/components/ui/command.tsx         | 210 +++++-----
 demo/nextjs/components/ui/context-menu.tsx    | 292 +++++++-------
 demo/nextjs/components/ui/dialog.tsx          | 142 +++----
 demo/nextjs/components/ui/drawer.tsx          | 130 +++----
 demo/nextjs/components/ui/dropdown-menu.tsx   | 302 +++++++--------
 demo/nextjs/components/ui/form.tsx            |  80 ++--
 demo/nextjs/components/ui/hover-card.tsx      |  40 +-
 demo/nextjs/components/ui/input-otp.tsx       |  83 ++--
 demo/nextjs/components/ui/input.tsx           |  40 +-
 demo/nextjs/components/ui/label.tsx           |  22 +-
 demo/nextjs/components/ui/menubar.tsx         | 358 ++++++++---------
 demo/nextjs/components/ui/navigation-menu.tsx | 224 +++++------
 demo/nextjs/components/ui/pagination.tsx      |  42 +-
 demo/nextjs/components/ui/password-input.tsx  |  82 ++--
 demo/nextjs/components/ui/popover.tsx         |  44 +--
 demo/nextjs/components/ui/progress.tsx        |  44 +--
 demo/nextjs/components/ui/radio-group.tsx     |  32 +-
 demo/nextjs/components/ui/scroll-area.tsx     |  92 ++---
 demo/nextjs/components/ui/select.tsx          | 288 +++++++-------
 demo/nextjs/components/ui/separator.tsx       |  42 +-
 demo/nextjs/components/ui/slider.tsx          |  42 +-
 demo/nextjs/components/ui/switch.tsx          |  44 +--
 demo/nextjs/components/ui/table.tsx           | 228 +++++------
 demo/nextjs/components/ui/tabs.tsx            |  96 ++---
 demo/nextjs/components/ui/textarea.tsx        |  36 +-
 demo/nextjs/components/ui/toast.tsx           | 165 ++++----
 demo/nextjs/components/ui/toggle-group.tsx    |  47 +--
 demo/nextjs/components/ui/toggle.tsx          |  24 +-
 demo/nextjs/components/ui/tooltip.tsx         |  36 +-
 38 files changed, 2251 insertions(+), 2360 deletions(-)

diff --git a/demo/nextjs/components/ui/alert-dialog.tsx b/demo/nextjs/components/ui/alert-dialog.tsx
index 51aee2840c..8c6e9bae5d 100644
--- a/demo/nextjs/components/ui/alert-dialog.tsx
+++ b/demo/nextjs/components/ui/alert-dialog.tsx
@@ -12,43 +12,43 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
-    }
-) => (<AlertDialogPrimitive.Overlay
-    className={cn(
-        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className,
-    )}
-    {...props}
-    ref={ref}
-/>);
+const AlertDialogOverlay = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
+	ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
+}) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+);
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
-    }
-) => (<AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-        ref={ref}
-        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",
-            className,
-        )}
-        {...props}
-    />
-</AlertDialogPortal>);
+const AlertDialogContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
+}) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			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",
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+);
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -79,69 +79,71 @@ const AlertDialogFooter = ({
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
-const AlertDialogTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
-    }
-) => (<AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-/>);
+const AlertDialogTitle = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+	ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
+}) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
+);
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Description>>;
-    }
-) => (<AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-/>);
+const AlertDialogDescription = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof AlertDialogPrimitive.Description>
+	>;
+}) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+);
 AlertDialogDescription.displayName =
 	AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
-    }
-) => (<AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-/>);
+const AlertDialogAction = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+	ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
+}) => (
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
+);
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
-        ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
-    }
-) => (<AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-        buttonVariants({ variant: "outline" }),
-        "mt-2 sm:mt-0",
-        className,
-    )}
-    {...props}
-/>);
+const AlertDialogCancel = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+	ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
+}) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(
+			buttonVariants({ variant: "outline" }),
+			"mt-2 sm:mt-0",
+			className,
+		)}
+		{...props}
+	/>
+);
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
diff --git a/demo/nextjs/components/ui/alert.tsx b/demo/nextjs/components/ui/alert.tsx
index fabb3eb1b1..d6f8e089cb 100644
--- a/demo/nextjs/components/ui/alert.tsx
+++ b/demo/nextjs/components/ui/alert.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
@@ -19,49 +19,44 @@ const alertVariants = cva(
 	},
 );
 
-const Alert = (
-    {
-        ref,
-        className,
-        variant,
-        ...props
-    }
-) => (<div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-/>);
+const Alert = ({ ref, className, variant, ...props }) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+);
 Alert.displayName = "Alert";
 
-const AlertTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLHeadingElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-/>);
+const AlertTitle = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLHeadingElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => (
+	<h5
+		ref={ref}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		{...props}
+	/>
+);
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-/>);
+const AlertDescription = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+);
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription };
diff --git a/demo/nextjs/components/ui/avatar.tsx b/demo/nextjs/components/ui/avatar.tsx
index a97dc70f04..f2fa09b5a8 100644
--- a/demo/nextjs/components/ui/avatar.tsx
+++ b/demo/nextjs/components/ui/avatar.tsx
@@ -5,55 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 import { cn } from "@/lib/utils";
 
-const Avatar = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
-    }
-) => (<AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-        className,
-    )}
-    {...props}
-/>);
+const Avatar = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
+}) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	/>
+);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
-        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
-    }
-) => (<AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-/>);
+const AvatarImage = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
+}) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+);
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
-        ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
-    }
-) => (<AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-muted",
-        className,
-    )}
-    {...props}
-/>);
+const AvatarFallback = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+	ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+}) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+);
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 export { Avatar, AvatarImage, AvatarFallback };
diff --git a/demo/nextjs/components/ui/breadcrumb.tsx b/demo/nextjs/components/ui/breadcrumb.tsx
index b169910803..f60b85d592 100644
--- a/demo/nextjs/components/ui/breadcrumb.tsx
+++ b/demo/nextjs/components/ui/breadcrumb.tsx
@@ -4,55 +4,45 @@ import { Slot } from "@radix-ui/react-slot";
 
 import { cn } from "@/lib/utils";
 
-const Breadcrumb = (
-    {
-        ref,
-        ...props
-    }
-) => <nav ref={ref} aria-label="breadcrumb" {...props} />;
+const Breadcrumb = ({ ref, ...props }) => (
+	<nav ref={ref} aria-label="breadcrumb" {...props} />
+);
 Breadcrumb.displayName = "Breadcrumb";
 
-const BreadcrumbList = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<"ol"> & {
-        ref: React.RefObject<HTMLOListElement>;
-    }
-) => (<ol
-    ref={ref}
-    className={cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-        className,
-    )}
-    {...props}
-/>);
+const BreadcrumbList = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<"ol"> & {
+	ref: React.RefObject<HTMLOListElement>;
+}) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+);
 BreadcrumbList.displayName = "BreadcrumbList";
 
-const BreadcrumbItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<"li"> & {
-        ref: React.RefObject<HTMLLIElement>;
-    }
-) => (<li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-/>);
+const BreadcrumbItem = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<"li"> & {
+	ref: React.RefObject<HTMLLIElement>;
+}) => (
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
+);
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const BreadcrumbLink = (
-    {
-        ref,
-        asChild,
-        className,
-        ...props
-    }
-) => {
+const BreadcrumbLink = ({ ref, asChild, className, ...props }) => {
 	const Comp = asChild ? Slot : "a";
 
 	return (
@@ -65,22 +55,22 @@ const BreadcrumbLink = (
 };
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
-const BreadcrumbPage = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<"span"> & {
-        ref: React.RefObject<HTMLSpanElement>;
-    }
-) => (<span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-/>);
+const BreadcrumbPage = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<"span"> & {
+	ref: React.RefObject<HTMLSpanElement>;
+}) => (
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("font-normal text-foreground", className)}
+		{...props}
+	/>
+);
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
diff --git a/demo/nextjs/components/ui/button.tsx b/demo/nextjs/components/ui/button.tsx
index b8d93d00df..b1839d92d8 100644
--- a/demo/nextjs/components/ui/button.tsx
+++ b/demo/nextjs/components/ui/button.tsx
@@ -40,26 +40,24 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-const Button = (
-    {
-        ref,
-        className,
-        variant,
-        size,
-        asChild = false,
-        ...props
-    }: ButtonProps & {
-        ref: React.RefObject<HTMLButtonElement>;
-    }
-) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-        <Comp
-            className={cn(buttonVariants({ variant, size, className }))}
-            ref={ref}
-            {...props}
-        />
-    );
+const Button = ({
+	ref,
+	className,
+	variant,
+	size,
+	asChild = false,
+	...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";
 
diff --git a/demo/nextjs/components/ui/card.tsx b/demo/nextjs/components/ui/card.tsx
index 60a07bcbd5..e5a269ab40 100644
--- a/demo/nextjs/components/ui/card.tsx
+++ b/demo/nextjs/components/ui/card.tsx
@@ -2,93 +2,91 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Card = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => (<div
-    ref={ref}
-    className={cn(
-        "rounded-xl border bg-card text-card-foreground shadow",
-        className,
-    )}
-    {...props}
-/>);
+const Card = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => (
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-xl border bg-card text-card-foreground shadow",
+			className,
+		)}
+		{...props}
+	/>
+);
 Card.displayName = "Card";
 
-const CardHeader = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => (<div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-/>);
+const CardHeader = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => (
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+);
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLHeadingElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-/>);
+const CardTitle = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLHeadingElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => (
+	<h3
+		ref={ref}
+		className={cn("font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+);
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => (<p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-/>);
+const CardDescription = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => (
+	<p
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+);
 CardDescription.displayName = "CardDescription";
 
-const CardContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />);
+const CardContent = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
 CardContent.displayName = "CardContent";
 
-const CardFooter = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => (<div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-/>);
+const CardFooter = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => (
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
+);
 CardFooter.displayName = "CardFooter";
 
 export {
diff --git a/demo/nextjs/components/ui/carousel.tsx b/demo/nextjs/components/ui/carousel.tsx
index ea3a750a59..3ee6ad24e7 100644
--- a/demo/nextjs/components/ui/carousel.tsx
+++ b/demo/nextjs/components/ui/carousel.tsx
@@ -42,118 +42,114 @@ function useCarousel() {
 	return context;
 }
 
-const Carousel = (
-    {
-        ref,
-        orientation = "horizontal",
-        opts,
-        setApi,
-        plugins,
-        className,
-        children,
-        ...props
-    }
-) => {
-    const [carouselRef, api] = useEmblaCarousel(
-        {
-            ...opts,
-            axis: orientation === "horizontal" ? "x" : "y",
-        },
-        plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
+const Carousel = ({
+	ref,
+	orientation = "horizontal",
+	opts,
+	setApi,
+	plugins,
+	className,
+	children,
+	...props
+}) => {
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === "horizontal" ? "x" : "y",
+		},
+		plugins,
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
 
-    const onSelect = React.useCallback((api: CarouselApi) => {
-        if (!api) {
-            return;
-        }
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		if (!api) {
+			return;
+		}
 
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-    }, []);
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
 
-    const scrollPrev = React.useCallback(() => {
-        api?.scrollPrev();
-    }, [api]);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
 
-    const scrollNext = React.useCallback(() => {
-        api?.scrollNext();
-    }, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
 
-    const handleKeyDown = React.useCallback(
-        (event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (event.key === "ArrowLeft") {
-                event.preventDefault();
-                scrollPrev();
-            } else if (event.key === "ArrowRight") {
-                event.preventDefault();
-                scrollNext();
-            }
-        },
-        [scrollPrev, scrollNext],
-    );
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				scrollNext();
+			}
+		},
+		[scrollPrev, scrollNext],
+	);
 
-    React.useEffect(() => {
-        if (!api || !setApi) {
-            return;
-        }
+	React.useEffect(() => {
+		if (!api || !setApi) {
+			return;
+		}
 
-        setApi(api);
-    }, [api, setApi]);
+		setApi(api);
+	}, [api, setApi]);
 
-    React.useEffect(() => {
-        if (!api) {
-            return;
-        }
+	React.useEffect(() => {
+		if (!api) {
+			return;
+		}
 
-        onSelect(api);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
 
-        return () => {
-            api?.off("select", onSelect);
-        };
-    }, [api, onSelect]);
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
 
-    return (
-        <CarouselContext.Provider
-            value={{
-                carouselRef,
-                api: api,
-                opts,
-                orientation:
-                    orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-                scrollPrev,
-                scrollNext,
-                canScrollPrev,
-                canScrollNext,
-            }}
-        >
-            <div
-                ref={ref}
-                onKeyDownCapture={handleKeyDown}
-                className={cn("relative", className)}
-                role="region"
-                aria-roledescription="carousel"
-                {...props}
-            >
-                {children}
-            </div>
-        </CarouselContext.Provider>
-    );
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				orientation:
+					orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<div
+				ref={ref}
+				onKeyDownCapture={handleKeyDown}
+				className={cn("relative", className)}
+				role="region"
+				aria-roledescription="carousel"
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	);
 };
 Carousel.displayName = "Carousel";
 
-const CarouselContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => {
+const CarouselContent = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => {
 	const { carouselRef, orientation } = useCarousel();
 
 	return (
@@ -172,15 +168,13 @@ const CarouselContent = (
 };
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => {
+const CarouselItem = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => {
 	const { orientation } = useCarousel();
 
 	return (
@@ -199,17 +193,15 @@ const CarouselItem = (
 };
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = (
-    {
-        ref,
-        className,
-        variant = "outline",
-        size = "icon",
-        ...props
-    }: React.ComponentProps<typeof Button> & {
-        ref: React.RefObject<HTMLButtonElement>;
-    }
-) => {
+const CarouselPrevious = ({
+	ref,
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button> & {
+	ref: React.RefObject<HTMLButtonElement>;
+}) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
 	return (
@@ -235,17 +227,15 @@ const CarouselPrevious = (
 };
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = (
-    {
-        ref,
-        className,
-        variant = "outline",
-        size = "icon",
-        ...props
-    }: React.ComponentProps<typeof Button> & {
-        ref: React.RefObject<HTMLButtonElement>;
-    }
-) => {
+const CarouselNext = ({
+	ref,
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button> & {
+	ref: React.RefObject<HTMLButtonElement>;
+}) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 
 	return (
diff --git a/demo/nextjs/components/ui/chart.tsx b/demo/nextjs/components/ui/chart.tsx
index 7bff7d2332..6689230ff8 100644
--- a/demo/nextjs/components/ui/chart.tsx
+++ b/demo/nextjs/components/ui/chart.tsx
@@ -34,16 +34,7 @@ function useChart() {
 	return context;
 }
 
-const ChartContainer = (
-    {
-        ref,
-        id,
-        className,
-        children,
-        config,
-        ...props
-    }
-) => {
+const ChartContainer = ({ ref, id, className, children, config, ...props }) => {
 	const uniqueId = React.useId();
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
@@ -103,202 +94,198 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-const ChartTooltipContent = (
-    {
-        ref,
-        active,
-        payload,
-        className,
-        indicator = "dot",
-        hideLabel = false,
-        hideIndicator = false,
-        label,
-        labelFormatter,
-        labelClassName,
-        formatter,
-        color,
-        nameKey,
-        labelKey
-    }
-) => {
-    const { config } = useChart();
+const ChartTooltipContent = ({
+	ref,
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
+}) => {
+	const { config } = useChart();
 
-    const tooltipLabel = React.useMemo(() => {
-        if (hideLabel || !payload?.length) {
-            return null;
-        }
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
 
-        const [item] = payload;
-        const key = `${labelKey || item.dataKey || item.name || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value =
-            !labelKey && typeof label === "string"
-                ? config[label as keyof typeof config]?.label || label
-                : itemConfig?.label;
+		const [item] = payload;
+		const key = `${labelKey || item.dataKey || item.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string"
+				? config[label as keyof typeof config]?.label || label
+				: itemConfig?.label;
 
-        if (labelFormatter) {
-            return (
-                <div className={cn("font-medium", labelClassName)}>
-                    {labelFormatter(value, payload)}
-                </div>
-            );
-        }
+		if (labelFormatter) {
+			return (
+				<div className={cn("font-medium", labelClassName)}>
+					{labelFormatter(value, payload)}
+				</div>
+			);
+		}
 
-        if (!value) {
-            return null;
-        }
+		if (!value) {
+			return null;
+		}
 
-        return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey,
+	]);
 
-    if (!active || !payload?.length) {
-        return null;
-    }
+	if (!active || !payload?.length) {
+		return null;
+	}
 
-    const nestLabel = payload.length === 1 && indicator !== "dot";
+	const nestLabel = payload.length === 1 && indicator !== "dot";
 
-    return (
-        <div
-            ref={ref}
-            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",
-                className,
-            )}
-        >
-            {!nestLabel ? tooltipLabel : null}
-            <div className="grid gap-1.5">
-                {payload.map((item, index) => {
-                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
-                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-                    const indicatorColor = color || item.payload.fill || item.color;
+	return (
+		<div
+			ref={ref}
+			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",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload.map((item, index) => {
+					const key = `${nameKey || item.name || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+					const indicatorColor = color || item.payload.fill || item.color;
 
-                    return (
-                        <div
-                            key={item.dataKey}
-                            className={cn(
-                                "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",
-                            )}
-                        >
-                            {formatter && item?.value !== undefined && item.name ? (
-                                formatter(item.value, item.name, item, index, item.payload)
-                            ) : (
-                                <>
-                                    {itemConfig?.icon ? (
-                                        <itemConfig.icon />
-                                    ) : (
-                                        !hideIndicator && (
-                                            <div
-                                                className={cn(
-                                                    "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                                                    {
-                                                        "h-2.5 w-2.5": indicator === "dot",
-                                                        "w-1": indicator === "line",
-                                                        "w-0 border-[1.5px] border-dashed bg-transparent":
-                                                            indicator === "dashed",
-                                                        "my-0.5": nestLabel && indicator === "dashed",
-                                                    },
-                                                )}
-                                                style={
-                                                    {
-                                                        "--color-bg": indicatorColor,
-                                                        "--color-border": indicatorColor,
-                                                    } as React.CSSProperties
-                                                }
-                                            />
-                                        )
-                                    )}
-                                    <div
-                                        className={cn(
-                                            "flex flex-1 justify-between leading-none",
-                                            nestLabel ? "items-end" : "items-center",
-                                        )}
-                                    >
-                                        <div className="grid gap-1.5">
-                                            {nestLabel ? tooltipLabel : null}
-                                            <span className="text-muted-foreground">
-                                                {itemConfig?.label || item.name}
-                                            </span>
-                                        </div>
-                                        {item.value && (
-                                            <span className="font-mono font-medium tabular-nums text-foreground">
-                                                {item.value.toLocaleString()}
-                                            </span>
-                                        )}
-                                    </div>
-                                </>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
+					return (
+						<div
+							key={item.dataKey}
+							className={cn(
+								"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",
+							)}
+						>
+							{formatter && item?.value !== undefined && item.name ? (
+								formatter(item.value, item.name, item, index, item.payload)
+							) : (
+								<>
+									{itemConfig?.icon ? (
+										<itemConfig.icon />
+									) : (
+										!hideIndicator && (
+											<div
+												className={cn(
+													"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+													{
+														"h-2.5 w-2.5": indicator === "dot",
+														"w-1": indicator === "line",
+														"w-0 border-[1.5px] border-dashed bg-transparent":
+															indicator === "dashed",
+														"my-0.5": nestLabel && indicator === "dashed",
+													},
+												)}
+												style={
+													{
+														"--color-bg": indicatorColor,
+														"--color-border": indicatorColor,
+													} as React.CSSProperties
+												}
+											/>
+										)
+									)}
+									<div
+										className={cn(
+											"flex flex-1 justify-between leading-none",
+											nestLabel ? "items-end" : "items-center",
+										)}
+									>
+										<div className="grid gap-1.5">
+											{nestLabel ? tooltipLabel : null}
+											<span className="text-muted-foreground">
+												{itemConfig?.label || item.name}
+											</span>
+										</div>
+										{item.value && (
+											<span className="font-mono font-medium tabular-nums text-foreground">
+												{item.value.toLocaleString()}
+											</span>
+										)}
+									</div>
+								</>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
 };
 ChartTooltipContent.displayName = "ChartTooltip";
 
 const ChartLegend = RechartsPrimitive.Legend;
 
-const ChartLegendContent = (
-    {
-        ref,
-        className,
-        hideIcon = false,
-        payload,
-        verticalAlign = "bottom",
-        nameKey
-    }
-) => {
-    const { config } = useChart();
+const ChartLegendContent = ({
+	ref,
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
+}) => {
+	const { config } = useChart();
 
-    if (!payload?.length) {
-        return null;
-    }
+	if (!payload?.length) {
+		return null;
+	}
 
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                "flex items-center justify-center gap-4",
-                verticalAlign === "top" ? "pb-3" : "pt-3",
-                className,
-            )}
-        >
-            {payload.map((item) => {
-                const key = `${nameKey || item.dataKey || "value"}`;
-                const itemConfig = getPayloadConfigFromPayload(config, item, key);
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload.map((item) => {
+				const key = `${nameKey || item.dataKey || "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-                return (
-                    <div
-                        key={item.value}
-                        className={cn(
-                            "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-                        )}
-                    >
-                        {itemConfig?.icon && !hideIcon ? (
-                            <itemConfig.icon />
-                        ) : (
-                            <div
-                                className="h-2 w-2 shrink-0 rounded-[2px]"
-                                style={{
-                                    backgroundColor: item.color,
-                                }}
-                            />
-                        )}
-                        {itemConfig?.label}
-                    </div>
-                );
-            })}
-        </div>
-    );
+				return (
+					<div
+						key={item.value}
+						className={cn(
+							"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+						)}
+					>
+						{itemConfig?.icon && !hideIcon ? (
+							<itemConfig.icon />
+						) : (
+							<div
+								className="h-2 w-2 shrink-0 rounded-[2px]"
+								style={{
+									backgroundColor: item.color,
+								}}
+							/>
+						)}
+						{itemConfig?.label}
+					</div>
+				);
+			})}
+		</div>
+	);
 };
 ChartLegendContent.displayName = "ChartLegend";
 
diff --git a/demo/nextjs/components/ui/checkbox.tsx b/demo/nextjs/components/ui/checkbox.tsx
index ea730ccb14..aa30d01699 100644
--- a/demo/nextjs/components/ui/checkbox.tsx
+++ b/demo/nextjs/components/ui/checkbox.tsx
@@ -6,28 +6,28 @@ import { CheckIcon } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
 
-const Checkbox = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
-    }
-) => (<CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-        className,
-    )}
-    {...props}
->
-    <CheckboxPrimitive.Indicator
-        className={cn("flex items-center justify-center text-current")}
-    >
-        <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-</CheckboxPrimitive.Root>);
+const Checkbox = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+}) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			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 };
diff --git a/demo/nextjs/components/ui/command.tsx b/demo/nextjs/components/ui/command.tsx
index b7c1abc273..ee5d1a5c2b 100644
--- a/demo/nextjs/components/ui/command.tsx
+++ b/demo/nextjs/components/ui/command.tsx
@@ -8,22 +8,22 @@ import { Command as CommandPrimitive } from "cmdk";
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
-const Command = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
-    }
-) => (<CommandPrimitive
-    ref={ref}
-    className={cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        className,
-    )}
-    {...props}
-/>);
+const Command = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+}) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+);
 Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
@@ -40,109 +40,109 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	);
 };
 
-const CommandInput = (
-    {
-        ref,
-        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" />
-    <CommandPrimitive.Input
-        ref={ref}
-        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",
-            className,
-        )}
-        {...props}
-    />
-</div>);
+const CommandInput = ({
+	ref,
+	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" />
+		<CommandPrimitive.Input
+			ref={ref}
+			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",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+);
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
-    }
-) => (<CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-/>);
+const CommandList = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
+}) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+);
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = (
-    {
-        ref,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
-    }
-) => (<CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-/>);
+const CommandEmpty = ({
+	ref,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
+}) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+);
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
-    }
-) => (<CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-        className,
-    )}
-    {...props}
-/>);
+const CommandGroup = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
+}) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+);
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
-    }
-) => (<CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-/>);
+const CommandSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+}) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
-        ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
-    }
-) => (<CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-        className,
-    )}
-    {...props}
-/>);
+const CommandItem = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+	ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+}) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+);
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
diff --git a/demo/nextjs/components/ui/context-menu.tsx b/demo/nextjs/components/ui/context-menu.tsx
index edbfcdb79b..0b1ba7076c 100644
--- a/demo/nextjs/components/ui/context-menu.tsx
+++ b/demo/nextjs/components/ui/context-menu.tsx
@@ -22,170 +22,164 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
-const ContextMenuSubTrigger = (
-    {
-        ref,
-        className,
-        inset,
-        children,
-        ...props
-    }
-) => (<ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
->
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-</ContextMenuPrimitive.SubTrigger>);
+const ContextMenuSubTrigger = ({
+	ref,
+	className,
+	inset,
+	children,
+	...props
+}) => (
+	<ContextMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto h-4 w-4" />
+	</ContextMenuPrimitive.SubTrigger>
+);
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
-const ContextMenuSubContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
-        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
-    }
-) => (<ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-    )}
-    {...props}
-/>);
+const ContextMenuSubContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof ContextMenuPrimitive.SubContent>
+	>;
+}) => (
+	<ContextMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+);
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
-const ContextMenuContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
-    }
-) => (<ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-        ref={ref}
-        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",
-            className,
-        )}
-        {...props}
-    />
-</ContextMenuPrimitive.Portal>);
+const ContextMenuContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
+}) => (
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={ref}
+			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",
+				className,
+			)}
+			{...props}
+		/>
+	</ContextMenuPrimitive.Portal>
+);
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
-const ContextMenuItem = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const ContextMenuItem = ({ ref, className, inset, ...props }) => (
+	<ContextMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
-const ContextMenuCheckboxItem = (
-    {
-        ref,
-        className,
-        children,
-        checked,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
-        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
-    }
-) => (<ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    checked={checked}
-    {...props}
->
-    <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>);
+const ContextMenuCheckboxItem = ({
+	ref,
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>
+	>;
+}) => (
+	<ContextMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<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 = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
-        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
-    }
-) => (<ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    {...props}
->
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-            <DotFilledIcon className="h-4 w-4 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-</ContextMenuPrimitive.RadioItem>);
+const ContextMenuRadioItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+	ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
+}) => (
+	<ContextMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</ContextMenuPrimitive.RadioItem>
+);
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
-const ContextMenuLabel = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-        "px-2 py-1.5 text-sm font-semibold text-foreground",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const ContextMenuLabel = ({ ref, className, inset, ...props }) => (
+	<ContextMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold text-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
-const ContextMenuSeparator = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
-        ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
-    }
-) => (<ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-/>);
+const ContextMenuSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
+	ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
+}) => (
+	<ContextMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-border", className)}
+		{...props}
+	/>
+);
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
diff --git a/demo/nextjs/components/ui/dialog.tsx b/demo/nextjs/components/ui/dialog.tsx
index 7eacf6b01a..9436b6ef9d 100644
--- a/demo/nextjs/components/ui/dialog.tsx
+++ b/demo/nextjs/components/ui/dialog.tsx
@@ -14,50 +14,50 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
-    }
-) => (<DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className,
-    )}
-    {...props}
-/>);
+const DialogOverlay = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+}) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
-    }
-) => (<DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-        ref={ref}
-        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",
-            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" />
-            <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-</DialogPortal>);
+const DialogContent = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
+}) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			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",
+				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" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -88,37 +88,37 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
-    }
-) => (<DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className,
-    )}
-    {...props}
-/>);
+const DialogTitle = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
+}) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
-    }
-) => (<DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-/>);
+const DialogDescription = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+	ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
+}) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
diff --git a/demo/nextjs/components/ui/drawer.tsx b/demo/nextjs/components/ui/drawer.tsx
index f8eaff7fe1..a4720cd7c5 100644
--- a/demo/nextjs/components/ui/drawer.tsx
+++ b/demo/nextjs/components/ui/drawer.tsx
@@ -22,44 +22,44 @@ const DrawerPortal = DrawerPrimitive.Portal;
 
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
-    }
-) => (<DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-/>);
+const DrawerOverlay = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+	ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+}) => (
+	<DrawerPrimitive.Overlay
+		ref={ref}
+		className={cn("fixed inset-0 z-50 bg-black/80", className)}
+		{...props}
+	/>
+);
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
-    }
-) => (<DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-        ref={ref}
-        className={cn(
-            "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-            className,
-        )}
-        {...props}
-    >
-        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-        {children}
-    </DrawerPrimitive.Content>
-</DrawerPortal>);
+const DrawerContent = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
+}) => (
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+				className,
+			)}
+			{...props}
+		>
+			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+			{children}
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+);
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -84,37 +84,37 @@ const DrawerFooter = ({
 );
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
-    }
-) => (<DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className,
-    )}
-    {...props}
-/>);
+const DrawerTitle = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+	ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
+}) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+);
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
-    }
-) => (<DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-/>);
+const DrawerDescription = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+	ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
+}) => (
+	<DrawerPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+);
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
diff --git a/demo/nextjs/components/ui/dropdown-menu.tsx b/demo/nextjs/components/ui/dropdown-menu.tsx
index 526f09534f..cbc8d3f90d 100644
--- a/demo/nextjs/components/ui/dropdown-menu.tsx
+++ b/demo/nextjs/components/ui/dropdown-menu.tsx
@@ -22,175 +22,173 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = (
-    {
-        ref,
-        className,
-        inset,
-        children,
-        ...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>);
+const DropdownMenuSubTrigger = ({
+	ref,
+	className,
+	inset,
+	children,
+	...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>
+);
 DropdownMenuSubTrigger.displayName =
 	DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
-        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
-    }
-) => (<DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-    )}
-    {...props}
-/>);
+const DropdownMenuSubContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof DropdownMenuPrimitive.SubContent>
+	>;
+}) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+);
 DropdownMenuSubContent.displayName =
 	DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = (
-    {
-        ref,
-        className,
-        sideOffset = 4,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-    }
-) => (<DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-        ref={ref}
-        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",
-            className,
-        )}
-        {...props}
-    />
-</DropdownMenuPrimitive.Portal>);
+const DropdownMenuContent = ({
+	ref,
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+}) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			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",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const DropdownMenuItem = ({ ref, className, inset, ...props }) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = (
-    {
-        ref,
-        className,
-        children,
-        checked,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
-    }
-) => (<DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    checked={checked}
-    {...props}
->
-    <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>);
+const DropdownMenuCheckboxItem = ({
+	ref,
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>
+	>;
+}) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<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 = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
-    }
-) => (<DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    {...props}
->
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-            <DotFilledIcon className="h-4 w-4 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-</DropdownMenuPrimitive.RadioItem>);
+const DropdownMenuRadioItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>
+	>;
+}) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-        "px-2 py-1.5 text-sm font-semibold",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const DropdownMenuLabel = ({ ref, className, inset, ...props }) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
-        ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
-    }
-) => (<DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-/>);
+const DropdownMenuSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof DropdownMenuPrimitive.Separator>
+	>;
+}) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
diff --git a/demo/nextjs/components/ui/form.tsx b/demo/nextjs/components/ui/form.tsx
index 867de34da9..62f1bbe459 100644
--- a/demo/nextjs/components/ui/form.tsx
+++ b/demo/nextjs/components/ui/form.tsx
@@ -72,15 +72,13 @@ const FormItemContext = React.createContext<FormItemContextValue>(
 	{} as FormItemContextValue,
 );
 
-const FormItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => {
+const FormItem = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref: React.RefObject<HTMLDivElement>;
+}) => {
 	const id = React.useId();
 
 	return (
@@ -91,15 +89,13 @@ const FormItem = (
 };
 FormItem.displayName = "FormItem";
 
-const FormLabel = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
-    }
-) => {
+const FormLabel = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
+}) => {
 	const { error, formItemId } = useFormField();
 
 	return (
@@ -113,14 +109,12 @@ const FormLabel = (
 };
 FormLabel.displayName = "FormLabel";
 
-const FormControl = (
-    {
-        ref,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof Slot> & {
-        ref: React.RefObject<React.ElementRef<typeof Slot>>;
-    }
-) => {
+const FormControl = ({
+	ref,
+	...props
+}: React.ComponentPropsWithoutRef<typeof Slot> & {
+	ref: React.RefObject<React.ElementRef<typeof Slot>>;
+}) => {
 	const { error, formItemId, formDescriptionId, formMessageId } =
 		useFormField();
 
@@ -140,15 +134,13 @@ const FormControl = (
 };
 FormControl.displayName = "FormControl";
 
-const FormDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => {
+const FormDescription = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => {
 	const { formDescriptionId } = useFormField();
 
 	return (
@@ -162,16 +154,14 @@ const FormDescription = (
 };
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => {
+const FormMessage = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+	ref: React.RefObject<HTMLParagraphElement>;
+}) => {
 	const { error, formMessageId } = useFormField();
 	const body = error ? String(error?.message) : children;
 
diff --git a/demo/nextjs/components/ui/hover-card.tsx b/demo/nextjs/components/ui/hover-card.tsx
index d9f3c2c4c6..5d3357e72d 100644
--- a/demo/nextjs/components/ui/hover-card.tsx
+++ b/demo/nextjs/components/ui/hover-card.tsx
@@ -9,26 +9,26 @@ const HoverCard = HoverCardPrimitive.Root;
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
-const HoverCardContent = (
-    {
-        ref,
-        className,
-        align = "center",
-        sideOffset = 4,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof HoverCardPrimitive.Content>>;
-    }
-) => (<HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    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}
-/>);
+const HoverCardContent = ({
+	ref,
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof HoverCardPrimitive.Content>>;
+}) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		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 };
diff --git a/demo/nextjs/components/ui/input-otp.tsx b/demo/nextjs/components/ui/input-otp.tsx
index 210255f779..4d3a5398d2 100644
--- a/demo/nextjs/components/ui/input-otp.tsx
+++ b/demo/nextjs/components/ui/input-otp.tsx
@@ -6,45 +6,38 @@ import { OTPInput, OTPInputContext } from "input-otp";
 
 import { cn } from "@/lib/utils";
 
-const InputOTP = (
-    {
-        ref,
-        className,
-        containerClassName,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
-        ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
-    }
-) => (<OTPInput
-    ref={ref}
-    containerClassName={cn(
-        "flex items-center gap-2 has-[:disabled]:opacity-50",
-        containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-/>);
+const InputOTP = ({
+	ref,
+	className,
+	containerClassName,
+	...props
+}: React.ComponentPropsWithoutRef<typeof OTPInput> & {
+	ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
+}) => (
+	<OTPInput
+		ref={ref}
+		containerClassName={cn(
+			"flex items-center gap-2 has-[:disabled]:opacity-50",
+			containerClassName,
+		)}
+		className={cn("disabled:cursor-not-allowed", className)}
+		{...props}
+	/>
+);
 InputOTP.displayName = "InputOTP";
 
-const InputOTPGroup = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<"div"> & {
-        ref: React.RefObject<React.ElementRef<"div">>;
-    }
-) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />);
+const InputOTPGroup = ({
+	ref,
+	className,
+	...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 = (
-    {
-        ref,
-        index,
-        className,
-        ...props
-    }
-) => {
+const InputOTPSlot = ({ ref, index, className, ...props }) => {
 	const inputOTPContext = React.useContext(OTPInputContext);
 	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
@@ -69,16 +62,16 @@ const InputOTPSlot = (
 };
 InputOTPSlot.displayName = "InputOTPSlot";
 
-const InputOTPSeparator = (
-    {
-        ref,
-        ...props
-    }: React.ComponentPropsWithoutRef<"div"> & {
-        ref: React.RefObject<React.ElementRef<"div">>;
-    }
-) => (<div ref={ref} role="separator" {...props}>
-    <DashIcon />
-</div>);
+const InputOTPSeparator = ({
+	ref,
+	...props
+}: React.ComponentPropsWithoutRef<"div"> & {
+	ref: React.RefObject<React.ElementRef<"div">>;
+}) => (
+	<div ref={ref} role="separator" {...props}>
+		<DashIcon />
+	</div>
+);
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/demo/nextjs/components/ui/input.tsx b/demo/nextjs/components/ui/input.tsx
index 63fa8e4832..5f46fea4cc 100644
--- a/demo/nextjs/components/ui/input.tsx
+++ b/demo/nextjs/components/ui/input.tsx
@@ -5,27 +5,25 @@ import { cn } from "@/lib/utils";
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = (
-    {
-        ref,
-        className,
-        type,
-        ...props
-    }: InputProps & {
-        ref: React.RefObject<HTMLInputElement>;
-    }
-) => {
-    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}
-        />
-    );
+const Input = ({
+	ref,
+	className,
+	type,
+	...props
+}: InputProps & {
+	ref: React.RefObject<HTMLInputElement>;
+}) => {
+	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";
 
diff --git a/demo/nextjs/components/ui/label.tsx b/demo/nextjs/components/ui/label.tsx
index 4d326da690..ec9492099e 100644
--- a/demo/nextjs/components/ui/label.tsx
+++ b/demo/nextjs/components/ui/label.tsx
@@ -1,8 +1,6 @@
 "use client";
-
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
@@ -10,17 +8,13 @@ const labelVariants = cva(
 	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = (
-    {
-        ref,
-        className,
-        ...props
-    }
-) => (<LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-/>);
+const Label = ({ ref, className, ...props }) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+);
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
diff --git a/demo/nextjs/components/ui/menubar.tsx b/demo/nextjs/components/ui/menubar.tsx
index 65708a4060..c830dbf7cb 100644
--- a/demo/nextjs/components/ui/menubar.tsx
+++ b/demo/nextjs/components/ui/menubar.tsx
@@ -20,211 +20,195 @@ const MenubarSub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
-const Menubar = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Root>>;
-    }
-) => (<MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-        "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-        className,
-    )}
-    {...props}
-/>);
+const Menubar = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Root>>;
+}) => (
+	<MenubarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+);
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
-const MenubarTrigger = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Trigger>>;
-    }
-) => (<MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        className,
-    )}
-    {...props}
-/>);
+const MenubarTrigger = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Trigger>>;
+}) => (
+	<MenubarPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			className,
+		)}
+		{...props}
+	/>
+);
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
-const MenubarSubTrigger = (
-    {
-        ref,
-        className,
-        inset,
-        children,
-        ...props
-    }
-) => (<MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
->
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-</MenubarPrimitive.SubTrigger>);
+const MenubarSubTrigger = ({ ref, className, inset, children, ...props }) => (
+	<MenubarPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto h-4 w-4" />
+	</MenubarPrimitive.SubTrigger>
+);
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
-const MenubarSubContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.SubContent>>;
-    }
-) => (<MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-    )}
-    {...props}
-/>);
+const MenubarSubContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.SubContent>>;
+}) => (
+	<MenubarPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+);
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
-const MenubarContent = (
-    {
-        ref,
-        className,
-        align = "start",
-        alignOffset = -4,
-        sideOffset = 8,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Content>>;
-    }
-) => (<MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-            "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,
-        )}
-        {...props}
-    />
-</MenubarPrimitive.Portal>);
+const MenubarContent = ({
+	ref,
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Content>>;
+}) => (
+	<MenubarPrimitive.Portal>
+		<MenubarPrimitive.Content
+			ref={ref}
+			align={align}
+			alignOffset={alignOffset}
+			sideOffset={sideOffset}
+			className={cn(
+				"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,
+			)}
+			{...props}
+		/>
+	</MenubarPrimitive.Portal>
+);
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
-const MenubarItem = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const MenubarItem = ({ ref, className, inset, ...props }) => (
+	<MenubarPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
-const MenubarCheckboxItem = (
-    {
-        ref,
-        className,
-        children,
-        checked,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.CheckboxItem>>;
-    }
-) => (<MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    checked={checked}
-    {...props}
->
-    <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>);
+const MenubarCheckboxItem = ({
+	ref,
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.CheckboxItem>>;
+}) => (
+	<MenubarPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<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 = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.RadioItem>>;
-    }
-) => (<MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    {...props}
->
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-            <DotFilledIcon className="h-4 w-4 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-</MenubarPrimitive.RadioItem>);
+const MenubarRadioItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.RadioItem>>;
+}) => (
+	<MenubarPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.RadioItem>
+);
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
-const MenubarLabel = (
-    {
-        ref,
-        className,
-        inset,
-        ...props
-    }
-) => (<MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-        "px-2 py-1.5 text-sm font-semibold",
-        inset && "pl-8",
-        className,
-    )}
-    {...props}
-/>);
+const MenubarLabel = ({ ref, className, inset, ...props }) => (
+	<MenubarPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+);
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
-const MenubarSeparator = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> & {
-        ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Separator>>;
-    }
-) => (<MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-/>);
+const MenubarSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> & {
+	ref: React.RefObject<React.ElementRef<typeof MenubarPrimitive.Separator>>;
+}) => (
+	<MenubarPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+);
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({
diff --git a/demo/nextjs/components/ui/navigation-menu.tsx b/demo/nextjs/components/ui/navigation-menu.tsx
index 0486eeb379..ce8f288d1c 100644
--- a/demo/nextjs/components/ui/navigation-menu.tsx
+++ b/demo/nextjs/components/ui/navigation-menu.tsx
@@ -5,44 +5,44 @@ import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const NavigationMenu = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
-    }
-) => (<NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-        "relative z-10 flex max-w-max flex-1 items-center justify-center",
-        className,
-    )}
-    {...props}
->
-    {children}
-    <NavigationMenuViewport />
-</NavigationMenuPrimitive.Root>);
+const NavigationMenu = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
+}) => (
+	<NavigationMenuPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuViewport />
+	</NavigationMenuPrimitive.Root>
+);
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
-    }
-) => (<NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-        "group flex flex-1 list-none items-center justify-center space-x-1",
-        className,
-    )}
-    {...props}
-/>);
+const NavigationMenuList = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+	ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
+}) => (
+	<NavigationMenuPrimitive.List
+		ref={ref}
+		className={cn(
+			"group flex flex-1 list-none items-center justify-center space-x-1",
+			className,
+		)}
+		{...props}
+	/>
+);
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
@@ -51,87 +51,95 @@ 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 = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
-    }
-) => (<NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
->
-    {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>);
+const NavigationMenuTrigger = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof NavigationMenuPrimitive.Trigger>
+	>;
+}) => (
+	<NavigationMenuPrimitive.Trigger
+		ref={ref}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
+		{...props}
+	>
+		{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 = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
-    }
-) => (<NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-        className,
-    )}
-    {...props}
-/>);
+const NavigationMenuContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof NavigationMenuPrimitive.Content>
+	>;
+}) => (
+	<NavigationMenuPrimitive.Content
+		ref={ref}
+		className={cn(
+			"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+			className,
+		)}
+		{...props}
+	/>
+);
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
-    }
-) => (<div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-        className={cn(
-            "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-            className,
-        )}
-        ref={ref}
-        {...props}
-    />
-</div>);
+const NavigationMenuViewport = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof NavigationMenuPrimitive.Viewport>
+	>;
+}) => (
+	<div className={cn("absolute left-0 top-full flex justify-center")}>
+		<NavigationMenuPrimitive.Viewport
+			className={cn(
+				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	</div>
+);
 NavigationMenuViewport.displayName =
 	NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
-        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
-    }
-) => (<NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-        className,
-    )}
-    {...props}
->
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-</NavigationMenuPrimitive.Indicator>);
+const NavigationMenuIndicator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof NavigationMenuPrimitive.Indicator>
+	>;
+}) => (
+	<NavigationMenuPrimitive.Indicator
+		ref={ref}
+		className={cn(
+			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			className,
+		)}
+		{...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;
 
diff --git a/demo/nextjs/components/ui/pagination.tsx b/demo/nextjs/components/ui/pagination.tsx
index d5f076885c..8a58931466 100644
--- a/demo/nextjs/components/ui/pagination.tsx
+++ b/demo/nextjs/components/ui/pagination.tsx
@@ -18,30 +18,28 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 );
 Pagination.displayName = "Pagination";
 
-const PaginationContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentProps<"ul"> & {
-        ref: React.RefObject<HTMLUListElement>;
-    }
-) => (<ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-/>);
+const PaginationContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<"ul"> & {
+	ref: React.RefObject<HTMLUListElement>;
+}) => (
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
+);
 PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentProps<"li"> & {
-        ref: React.RefObject<HTMLLIElement>;
-    }
-) => (<li ref={ref} className={cn("", className)} {...props} />);
+const PaginationItem = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<"li"> & {
+	ref: React.RefObject<HTMLLIElement>;
+}) => <li ref={ref} className={cn("", className)} {...props} />;
 PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
diff --git a/demo/nextjs/components/ui/password-input.tsx b/demo/nextjs/components/ui/password-input.tsx
index f0bdcd8082..057419f070 100644
--- a/demo/nextjs/components/ui/password-input.tsx
+++ b/demo/nextjs/components/ui/password-input.tsx
@@ -7,48 +7,46 @@ import { Button } from "@/components/ui/button";
 import { Input, type InputProps } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
-const PasswordInput = (
-    {
-        ref,
-        className,
-        ...props
-    }: InputProps & {
-        ref: React.RefObject<HTMLInputElement>;
-    }
-) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-    const disabled =
-        props.value === "" || props.value === undefined || props.disabled;
+const PasswordInput = ({
+	ref,
+	className,
+	...props
+}: InputProps & {
+	ref: React.RefObject<HTMLInputElement>;
+}) => {
+	const [showPassword, setShowPassword] = React.useState(false);
+	const disabled =
+		props.value === "" || props.value === undefined || props.disabled;
 
-    return (
-        <div className="relative">
-            <Input
-                {...props}
-                type={showPassword ? "text" : "password"}
-                name="password_fake"
-                className={cn("hide-password-toggle pr-10", className)}
-                ref={ref}
-            />
-            <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                onClick={() => setShowPassword((prev) => !prev)}
-                disabled={disabled}
-            >
-                {showPassword && !disabled ? (
-                    <EyeIcon className="h-4 w-4" aria-hidden="true" />
-                ) : (
-                    <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
-                )}
-                <span className="sr-only">
-                    {showPassword ? "Hide password" : "Show password"}
-                </span>
-            </Button>
+	return (
+		<div className="relative">
+			<Input
+				{...props}
+				type={showPassword ? "text" : "password"}
+				name="password_fake"
+				className={cn("hide-password-toggle pr-10", className)}
+				ref={ref}
+			/>
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+				onClick={() => setShowPassword((prev) => !prev)}
+				disabled={disabled}
+			>
+				{showPassword && !disabled ? (
+					<EyeIcon className="h-4 w-4" aria-hidden="true" />
+				) : (
+					<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+				)}
+				<span className="sr-only">
+					{showPassword ? "Hide password" : "Show password"}
+				</span>
+			</Button>
 
-            {/* hides browsers password toggles */}
-            <style>{`
+			{/* hides browsers password toggles */}
+			<style>{`
                 .hide-password-toggle::-ms-reveal,
                 .hide-password-toggle::-ms-clear {
                     visibility: hidden;
@@ -56,8 +54,8 @@ const PasswordInput = (
                     display: none;
                 }
             `}</style>
-        </div>
-    );
+		</div>
+	);
 };
 PasswordInput.displayName = "PasswordInput";
 
diff --git a/demo/nextjs/components/ui/popover.tsx b/demo/nextjs/components/ui/popover.tsx
index 5b400682ca..80d31587e7 100644
--- a/demo/nextjs/components/ui/popover.tsx
+++ b/demo/nextjs/components/ui/popover.tsx
@@ -11,28 +11,28 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-const PopoverContent = (
-    {
-        ref,
-        className,
-        align = "center",
-        sideOffset = 4,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
-    }
-) => (<PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-        ref={ref}
-        align={align}
-        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",
-            className,
-        )}
-        {...props}
-    />
-</PopoverPrimitive.Portal>);
+const PopoverContent = ({
+	ref,
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
+}) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			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",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+);
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/demo/nextjs/components/ui/progress.tsx b/demo/nextjs/components/ui/progress.tsx
index 474a8818f4..d1cbd5fb8d 100644
--- a/demo/nextjs/components/ui/progress.tsx
+++ b/demo/nextjs/components/ui/progress.tsx
@@ -5,28 +5,28 @@ import * as ProgressPrimitive from "@radix-ui/react-progress";
 
 import { cn } from "@/lib/utils";
 
-const Progress = (
-    {
-        ref,
-        className,
-        value,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof ProgressPrimitive.Root>>;
-    }
-) => (<ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-        className,
-    )}
-    {...props}
->
-    <ProgressPrimitive.Indicator
-        className="h-full w-full flex-1 bg-primary transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-</ProgressPrimitive.Root>);
+const Progress = ({
+	ref,
+	className,
+	value,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof ProgressPrimitive.Root>>;
+}) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+			className,
+		)}
+		{...props}
+	>
+		<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 };
diff --git a/demo/nextjs/components/ui/radio-group.tsx b/demo/nextjs/components/ui/radio-group.tsx
index d1b4583148..550d7cc31e 100644
--- a/demo/nextjs/components/ui/radio-group.tsx
+++ b/demo/nextjs/components/ui/radio-group.tsx
@@ -6,15 +6,13 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 import { cn } from "@/lib/utils";
 
-const RadioGroup = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
-    }
-) => {
+const RadioGroup = ({
+	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)}
@@ -25,15 +23,13 @@ const RadioGroup = (
 };
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioGroupItem = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-        ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
-    }
-) => {
+const RadioGroupItem = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+	ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+}) => {
 	return (
 		<RadioGroupPrimitive.Item
 			ref={ref}
diff --git a/demo/nextjs/components/ui/scroll-area.tsx b/demo/nextjs/components/ui/scroll-area.tsx
index 9666d2e13e..29c71c7fa7 100644
--- a/demo/nextjs/components/ui/scroll-area.tsx
+++ b/demo/nextjs/components/ui/scroll-area.tsx
@@ -5,52 +5,56 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 import { cn } from "@/lib/utils";
 
-const ScrollArea = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.Root>>;
-    }
-) => (<ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
->
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-        {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-</ScrollAreaPrimitive.Root>);
+const ScrollArea = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.Root>>;
+}) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("relative overflow-hidden", className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = (
-    {
-        ref,
-        className,
-        orientation = "vertical",
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
-        ref: React.RefObject<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>;
-    }
-) => (<ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-        "flex touch-none select-none transition-colors",
-        orientation === "vertical" &&
-            "h-full w-2.5 border-l border-l-transparent p-[1px]",
-        orientation === "horizontal" &&
-            "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-        className,
-    )}
-    {...props}
->
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-</ScrollAreaPrimitive.ScrollAreaScrollbar>);
+const ScrollBar = ({
+	ref,
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentPropsWithoutRef<
+	typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+	>;
+}) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };
diff --git a/demo/nextjs/components/ui/select.tsx b/demo/nextjs/components/ui/select.tsx
index e357ff1de6..c8290c2ca5 100644
--- a/demo/nextjs/components/ui/select.tsx
+++ b/demo/nextjs/components/ui/select.tsx
@@ -17,162 +17,164 @@ 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>>;
-    }
-) => (<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",
-        className,
-    )}
-    {...props}
->
-    {children}
-    <SelectPrimitive.Icon asChild>
-        <CaretSortIcon className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-</SelectPrimitive.Trigger>);
+const SelectTrigger = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
+}) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<CaretSortIcon className="h-4 w-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>>;
-    }
-) => (<SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-    )}
-    {...props}
->
-    <ChevronUpIcon />
-</SelectPrimitive.ScrollUpButton>);
+const SelectScrollUpButton = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
+}) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUpIcon />
+	</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>>;
-    }
-) => (<SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-    )}
-    {...props}
->
-    <ChevronDownIcon />
-</SelectPrimitive.ScrollDownButton>);
+const SelectScrollDownButton = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
+	ref: React.RefObject<
+		React.ElementRef<typeof SelectPrimitive.ScrollDownButton>
+	>;
+}) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDownIcon />
+	</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>>;
-    }
-) => (<SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-        ref={ref}
-        className={cn(
-            "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" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-            className,
-        )}
-        position={position}
-        {...props}
-    >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-            className={cn(
-                "p-1",
-                position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-            )}
-        >
-            {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-</SelectPrimitive.Portal>);
+const SelectContent = ({
+	ref,
+	className,
+	children,
+	position = "popper",
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
+}) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"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" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<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>>;
-    }
-) => (<SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-/>);
+const SelectLabel = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
+}) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+		{...props}
+	/>
+);
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = (
-    {
-        ref,
-        className,
-        children,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
-    }
-) => (<SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className,
-    )}
-    {...props}
->
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-            <CheckIcon className="h-4 w-4" />
-        </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-</SelectPrimitive.Item>);
+const SelectItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
+}) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+			<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 = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
-        ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
-    }
-) => (<SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-/>);
+const SelectSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
+	ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
+}) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+);
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
diff --git a/demo/nextjs/components/ui/separator.tsx b/demo/nextjs/components/ui/separator.tsx
index d0da80342c..75162ffcdb 100644
--- a/demo/nextjs/components/ui/separator.tsx
+++ b/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 = (
-    {
-        ref,
-        className,
-        orientation = "horizontal",
-        decorative = true,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
-    }
-) => (<SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-    )}
-    {...props}
-/>);
+const Separator = ({
+	ref,
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+}) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			"shrink-0 bg-border",
+			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+			className,
+		)}
+		{...props}
+	/>
+);
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };
diff --git a/demo/nextjs/components/ui/slider.tsx b/demo/nextjs/components/ui/slider.tsx
index a63ad7a48c..eba03082f7 100644
--- a/demo/nextjs/components/ui/slider.tsx
+++ b/demo/nextjs/components/ui/slider.tsx
@@ -5,27 +5,27 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/lib/utils";
 
-const Slider = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof SliderPrimitive.Root>>;
-    }
-) => (<SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-        "relative flex w-full touch-none select-none items-center",
-        className,
-    )}
-    {...props}
->
-    <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>);
+const Slider = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof SliderPrimitive.Root>>;
+}) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none select-none items-center",
+			className,
+		)}
+		{...props}
+	>
+		<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 };
diff --git a/demo/nextjs/components/ui/switch.tsx b/demo/nextjs/components/ui/switch.tsx
index 416ee69982..d9712cb690 100644
--- a/demo/nextjs/components/ui/switch.tsx
+++ b/demo/nextjs/components/ui/switch.tsx
@@ -5,28 +5,28 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/utils";
 
-const Switch = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
-    }
-) => (<SwitchPrimitives.Root
-    className={cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-        className,
-    )}
-    {...props}
-    ref={ref}
->
-    <SwitchPrimitives.Thumb
-        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>);
+const Switch = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+	ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
+}) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			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 };
diff --git a/demo/nextjs/components/ui/table.tsx b/demo/nextjs/components/ui/table.tsx
index dc48ea1bdb..9f72796ac2 100644
--- a/demo/nextjs/components/ui/table.tsx
+++ b/demo/nextjs/components/ui/table.tsx
@@ -2,134 +2,134 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Table = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLTableElement> & {
-        ref: React.RefObject<HTMLTableElement>;
-    }
-) => (<div className="relative w-full overflow-auto">
-    <table
-        ref={ref}
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-    />
-</div>);
+const Table = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableElement> & {
+	ref: React.RefObject<HTMLTableElement>;
+}) => (
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...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} />);
+const TableHeader = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableSectionElement> & {
+	ref: React.RefObject<HTMLTableSectionElement>;
+}) => (
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+);
 TableHeader.displayName = "TableHeader";
 
-const TableBody = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLTableSectionElement> & {
-        ref: React.RefObject<HTMLTableSectionElement>;
-    }
-) => (<tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-/>);
+const TableBody = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableSectionElement> & {
+	ref: React.RefObject<HTMLTableSectionElement>;
+}) => (
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
+);
 TableBody.displayName = "TableBody";
 
-const TableFooter = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLTableSectionElement> & {
-        ref: React.RefObject<HTMLTableSectionElement>;
-    }
-) => (<tfoot
-    ref={ref}
-    className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className,
-    )}
-    {...props}
-/>);
+const TableFooter = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableSectionElement> & {
+	ref: React.RefObject<HTMLTableSectionElement>;
+}) => (
+	<tfoot
+		ref={ref}
+		className={cn(
+			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
+);
 TableFooter.displayName = "TableFooter";
 
-const TableRow = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLTableRowElement> & {
-        ref: React.RefObject<HTMLTableRowElement>;
-    }
-) => (<tr
-    ref={ref}
-    className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-        className,
-    )}
-    {...props}
-/>);
+const TableRow = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableRowElement> & {
+	ref: React.RefObject<HTMLTableRowElement>;
+}) => (
+	<tr
+		ref={ref}
+		className={cn(
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+);
 TableRow.displayName = "TableRow";
 
-const TableHead = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ThHTMLAttributes<HTMLTableCellElement> & {
-        ref: React.RefObject<HTMLTableCellElement>;
-    }
-) => (<th
-    ref={ref}
-    className={cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-    )}
-    {...props}
-/>);
+const TableHead = ({
+	ref,
+	className,
+	...props
+}: React.ThHTMLAttributes<HTMLTableCellElement> & {
+	ref: React.RefObject<HTMLTableCellElement>;
+}) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+);
 TableHead.displayName = "TableHead";
 
-const TableCell = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.TdHTMLAttributes<HTMLTableCellElement> & {
-        ref: React.RefObject<HTMLTableCellElement>;
-    }
-) => (<td
-    ref={ref}
-    className={cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-    )}
-    {...props}
-/>);
+const TableCell = ({
+	ref,
+	className,
+	...props
+}: React.TdHTMLAttributes<HTMLTableCellElement> & {
+	ref: React.RefObject<HTMLTableCellElement>;
+}) => (
+	<td
+		ref={ref}
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+);
 TableCell.displayName = "TableCell";
 
-const TableCaption = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.HTMLAttributes<HTMLTableCaptionElement> & {
-        ref: React.RefObject<HTMLTableCaptionElement>;
-    }
-) => (<caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-/>);
+const TableCaption = ({
+	ref,
+	className,
+	...props
+}: React.HTMLAttributes<HTMLTableCaptionElement> & {
+	ref: React.RefObject<HTMLTableCaptionElement>;
+}) => (
+	<caption
+		ref={ref}
+		className={cn("mt-4 text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+);
 TableCaption.displayName = "TableCaption";
 
 export {
diff --git a/demo/nextjs/components/ui/tabs.tsx b/demo/nextjs/components/ui/tabs.tsx
index 45b9b0b392..abb4f1c325 100644
--- a/demo/nextjs/components/ui/tabs.tsx
+++ b/demo/nextjs/components/ui/tabs.tsx
@@ -7,58 +7,58 @@ import { cn } from "@/lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
-    }
-) => (<TabsPrimitive.List
-    ref={ref}
-    className={cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-        className,
-    )}
-    {...props}
-/>);
+const TabsList = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+	ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
+}) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
-    }
-) => (<TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-        className,
-    )}
-    {...props}
-/>);
+const TabsTrigger = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+	ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
+}) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+);
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
-        ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
-    }
-) => (<TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        className,
-    )}
-    {...props}
-/>);
+const TabsContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+	ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
+}) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+);
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/demo/nextjs/components/ui/textarea.tsx b/demo/nextjs/components/ui/textarea.tsx
index e4edaabfec..05fba06a0b 100644
--- a/demo/nextjs/components/ui/textarea.tsx
+++ b/demo/nextjs/components/ui/textarea.tsx
@@ -5,25 +5,23 @@ import { cn } from "@/lib/utils";
 export interface TextareaProps
 	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = (
-    {
-        ref,
-        className,
-        ...props
-    }: TextareaProps & {
-        ref: React.RefObject<HTMLTextAreaElement>;
-    }
-) => {
-    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}
-        />
-    );
+const Textarea = ({
+	ref,
+	className,
+	...props
+}: TextareaProps & {
+	ref: React.RefObject<HTMLTextAreaElement>;
+}) => {
+	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";
 
diff --git a/demo/nextjs/components/ui/toast.tsx b/demo/nextjs/components/ui/toast.tsx
index 054dec0112..a907cd6a75 100644
--- a/demo/nextjs/components/ui/toast.tsx
+++ b/demo/nextjs/components/ui/toast.tsx
@@ -3,28 +3,28 @@
 import * as React from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
-        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
-    }
-) => (<ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-        className,
-    )}
-    {...props}
-/>);
+const ToastViewport = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
+	ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
+}) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
+);
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
@@ -43,14 +43,7 @@ const toastVariants = cva(
 	},
 );
 
-const Toast = (
-    {
-        ref,
-        className,
-        variant,
-        ...props
-    }
-) => {
+const Toast = ({ ref, className, variant, ...props }) => {
 	return (
 		<ToastPrimitives.Root
 			ref={ref}
@@ -61,73 +54,73 @@ const Toast = (
 };
 Toast.displayName = ToastPrimitives.Root.displayName;
 
-const ToastAction = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
-        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
-    }
-) => (<ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-        className,
-    )}
-    {...props}
-/>);
+const ToastAction = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+	ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
+}) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			className,
+		)}
+		{...props}
+	/>
+);
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
-const ToastClose = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
-        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
-    }
-) => (<ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-        "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-        className,
-    )}
-    toast-close=""
-    {...props}
->
-    <Cross2Icon className="h-4 w-4" />
-</ToastPrimitives.Close>);
+const ToastClose = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+	ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
+}) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<Cross2Icon className="h-4 w-4" />
+	</ToastPrimitives.Close>
+);
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
-const ToastTitle = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
-        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
-    }
-) => (<ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-/>);
+const ToastTitle = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+	ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
+}) => (
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
+);
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
-const ToastDescription = (
-    {
-        ref,
-        className,
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
-        ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
-    }
-) => (<ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-/>);
+const ToastDescription = ({
+	ref,
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+	ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
+}) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+);
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
diff --git a/demo/nextjs/components/ui/toggle-group.tsx b/demo/nextjs/components/ui/toggle-group.tsx
index db15031981..5e83dbb745 100644
--- a/demo/nextjs/components/ui/toggle-group.tsx
+++ b/demo/nextjs/components/ui/toggle-group.tsx
@@ -14,37 +14,28 @@ const ToggleGroupContext = React.createContext<
 	variant: "default",
 });
 
-const ToggleGroup = (
-    {
-        ref,
-        className,
-        variant,
-        size,
-        children,
-        ...props
-    }
-) => (<ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
->
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-    </ToggleGroupContext.Provider>
-</ToggleGroupPrimitive.Root>);
+const ToggleGroup = ({ ref, className, variant, size, children, ...props }) => (
+	<ToggleGroupPrimitive.Root
+		ref={ref}
+		className={cn("flex items-center justify-center gap-1", className)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider value={{ variant, size }}>
+			{children}
+		</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive.Root>
+);
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = (
-    {
-        ref,
-        className,
-        children,
-        variant,
-        size,
-        ...props
-    }
-) => {
+const ToggleGroupItem = ({
+	ref,
+	className,
+	children,
+	variant,
+	size,
+	...props
+}) => {
 	const context = React.useContext(ToggleGroupContext);
 
 	return (
diff --git a/demo/nextjs/components/ui/toggle.tsx b/demo/nextjs/components/ui/toggle.tsx
index ec6b01d612..b54986967d 100644
--- a/demo/nextjs/components/ui/toggle.tsx
+++ b/demo/nextjs/components/ui/toggle.tsx
@@ -1,8 +1,6 @@
 "use client";
-
-import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
@@ -28,19 +26,13 @@ const toggleVariants = cva(
 	},
 );
 
-const Toggle = (
-    {
-        ref,
-        className,
-        variant,
-        size,
-        ...props
-    }
-) => (<TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-/>);
+const Toggle = ({ ref, className, variant, size, ...props }) => (
+	<TogglePrimitive.Root
+		ref={ref}
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
+);
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
diff --git a/demo/nextjs/components/ui/tooltip.tsx b/demo/nextjs/components/ui/tooltip.tsx
index 3387666cfb..8a7d7c0ea0 100644
--- a/demo/nextjs/components/ui/tooltip.tsx
+++ b/demo/nextjs/components/ui/tooltip.tsx
@@ -11,24 +11,24 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = (
-    {
-        ref,
-        className,
-        sideOffset = 4,
-        ...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,
-    )}
-    {...props}
-/>);
+const TooltipContent = ({
+	ref,
+	className,
+	sideOffset = 4,
+	...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,
+		)}
+		{...props}
+	/>
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };