chore: upgrade ui components

web/package.json

@@ -15,50 +15,74 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@tanstack/router-plugin": "^1.114.30",
+    "@tanstack/router-plugin": "^1.114.32",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.13.17",
-    "@types/react": "^19.0.12",
+    "@types/react": "^19.1.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^19.0.4",
+    "@types/react-dom": "^19.1.1",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.4",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.1.1",
     "typescript": "^5.8.2",
-    "vite": "^6.2.3",
+    "vite": "^6.2.4",
     "vite-bundle-visualizer": "^1.2.1"
   },
   "dependencies": {
-    "@hookform/resolvers": "^4.1.3",
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tailwindcss/vite": "^4.0.17",
+    "@tailwindcss/vite": "^4.1.1",
-    "@tanstack/react-query": "^5.70.0",
+    "@tanstack/react-query": "^5.71.3",
-    "@tanstack/react-router": "^1.114.29",
+    "@tanstack/react-router": "^1.114.32",
-    "@tanstack/router-devtools": "^1.114.29",
+    "@tanstack/router-devtools": "^1.114.32",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.2",
     "i18next": "^24.2.3",
-    "lucide-react": "^0.485.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.487.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "9.6.4",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.55.0",
     "react-i18next": "^15.4.1",
+    "react-resizable-panels": "^2.1.7",
     "react-syntax-highlighter": "^15.6.1",
-    "sonner": "^2.0.2",
+    "recharts": "^2.15.1",
-    "tailwind-merge": "^3.0.2",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.1.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
     "zod": "^3.24.2"
   },
   "trustedDependencies": ["@biomejs/biome"]

web/src/components/code-viewer.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Check, Copy } from "lucide-react";
 import { type HTMLProps, type ReactNode, useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -50,27 +51,24 @@ export function CopyButton({ value }: Readonly<CopyButtonProps>) {
 export function CodeViewer({
   code,
   header,
+  button,
   language,
   height,
   showLineNumbers = true,
   wrapLongLines = true,
-}: CodeViewerProps) {
+}: Readonly<CodeViewerProps>) {
   const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
     ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
     : undefined;
   return (
     <div className="rounded-lg border">
-      {header && (
+      <div className={cn("flex items-center border-b p-2 justify-end", header && "justify-between")}>
-        <div className="flex items-center justify-between border-b p-2">
+        {header}
-          {header}
+        <div className="flex items-center gap-2">
+          {button}
           <CopyButton value={code} variant="ghost" size="sm" />
         </div>
-      )}
+      </div>
-      {!header && (
-        <div className="flex items-center justify-end border-b p-2">
-          <CopyButton value={code} variant="ghost" size="sm" />
-        </div>
-      )}
       <div className="relative overflow-hidden text-xs wrap-all">
         <SyntaxHighlighter
           language={language}
@@ -98,6 +96,7 @@ interface CodeViewerProps {
   code: string;
   language: string;
   header?: ReactNode;
+  button?: ReactNode;
   height?: string | number;
   showLineNumbers?: boolean;
   wrapLongLines?: boolean;

web/src/components/main-config-card.tsx

@@ -177,7 +177,7 @@ export function MainConfigCard({
               control={form.control}
               name="server"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center">{t("mainConfig.server")}</FormLabel>
                   <Select
                     onValueChange={(v) => {
@@ -218,7 +218,7 @@ export function MainConfigCard({
               control={form.control}
               name="targetJdkVersion"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center gap-1">
                     {t("mainConfig.jre")} {t("optional")} <JreTip />
                   </FormLabel>

web/src/components/shell-result.tsx

@@ -1,11 +1,10 @@
 import { CodeViewer } from "@/components/code-viewer.tsx";
 import { QuickUsage } from "@/components/quick-usage.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
 import { downloadBytes } from "@/lib/utils.ts";
 import { GenerateResult } from "@/types/shell.ts";
-import { TriangleAlertIcon } from "lucide-react";
+import { DownloadIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { BasicInfo } from "./results/basic-info";
@@ -44,31 +43,26 @@ export function ShellResult({
         />
       </TabsContent>
       <TabsContent value="shell" className="mt-4">
-        <Alert>
-          <TriangleAlertIcon className="h-4 w-4" />
-          <AlertTitle>Warning</AlertTitle>
-          <AlertDescription>{t("tips.decompileTip")}</AlertDescription>
-        </Alert>
-        <div className="gap-4 my-2 flex items-center justify-end">
-          <Button
-            size="sm"
-            variant="outline"
-            className="w-28"
-            type="button"
-            onClick={() => {
-              if (!generateResult?.shellBytesBase64Str) {
-                toast.warning(t("tips.shellBytesEmpty"));
-                return;
-              }
-              downloadBytes(generateResult?.shellBytesBase64Str, generateResult?.shellClassName);
-            }}
-          >
-            {t("download")} Class
-          </Button>
-        </div>
         <CodeViewer
           showLineNumbers={false}
           header={<div className="text-xs">{generateResult?.shellClassName}</div>}
+          button={
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+              onClick={() => {
+                if (!generateResult?.shellBytesBase64Str) {
+                  toast.warning(t("tips.shellBytesEmpty"));
+                  return;
+                }
+                downloadBytes(generateResult?.shellBytesBase64Str, generateResult?.shellClassName);
+              }}
+            >
+              <DownloadIcon className="h-4 w-4" />
+            </Button>
+          }
           wrapLongLines={true}
           height={600}
           code={generateResult?.shellBytesBase64Str ?? ""}
@@ -76,32 +70,27 @@ export function ShellResult({
         />
       </TabsContent>
       <TabsContent value="injector" className="mt-4">
-        <Alert>
-          <TriangleAlertIcon className="h-4 w-4" />
-          <AlertTitle>Warning</AlertTitle>
-          <AlertDescription>{t("tips.decompileTip")}</AlertDescription>
-        </Alert>
-        <div className="gap-4 my-2 flex items-center justify-end">
-          <Button
-            size="sm"
-            className="w-28"
-            variant="outline"
-            type="button"
-            onClick={() => {
-              if (!generateResult?.injectorBytesBase64Str) {
-                toast.warning(t("tips.shellBytesEmpty"));
-                return;
-              }
-              downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName);
-            }}
-          >
-            {t("download")} Class
-          </Button>
-        </div>
         <CodeViewer
           showLineNumbers={false}
           wrapLongLines={true}
           header={<div className="text-xs">{generateResult?.injectorClassName}</div>}
+          button={
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+              onClick={() => {
+                if (!generateResult?.injectorBytesBase64Str) {
+                  toast.warning(t("tips.shellBytesEmpty"));
+                  return;
+                }
+                downloadBytes(generateResult?.injectorBytesBase64Str, generateResult?.injectorClassName);
+              }}
+            >
+              <DownloadIcon className="h-4 w-4" />
+            </Button>
+          }
           height={600}
           code={generateResult?.injectorBytesBase64Str ?? ""}
           language="text"

web/src/components/tools/antsword-tab.tsx

@@ -27,7 +27,7 @@ export function AntSwordTabContent({
               control={form.control}
               name="antSwordPass"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.antSwordPass")}</FormLabel>
                   <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
                 </FormItem>
@@ -38,7 +38,7 @@ export function AntSwordTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
                   </FormItem>
@@ -48,7 +48,7 @@ export function AntSwordTabContent({
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
                   </FormItem>

web/src/components/tools/behinder-tab.tsx

@@ -27,7 +27,7 @@ export function BehinderTabContent({
               control={form.control}
               name="behinderPass"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.behinderPass")}</FormLabel>
                   <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
                 </FormItem>
@@ -38,7 +38,7 @@ export function BehinderTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
                   </FormItem>
@@ -48,7 +48,7 @@ export function BehinderTabContent({
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
                   </FormItem>

web/src/components/tools/classname-field.tsx

@@ -12,7 +12,7 @@ export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<
         control={form.control}
         name="shellClassName"
         render={({ field }) => (
-          <FormItem className="space-y-1">
+          <FormItem className="gap-1">
             <FormLabel className="h-6 flex items-center gap-1">
               {t("mainConfig.shellClassName")} {t("optional")}
             </FormLabel>
@@ -24,7 +24,7 @@ export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<
         control={form.control}
         name="injectorClassName"
         render={({ field }) => (
-          <FormItem className="space-y-1">
+          <FormItem className="gap-1">
             <FormLabel className="h-6 flex items-center gap-1">
               {t("mainConfig.injectorClassName")} {t("optional")}
             </FormLabel>

web/src/components/tools/command-tab.tsx

@@ -27,7 +27,7 @@ export function CommandTabContent({
               control={form.control}
               name="commandParamName"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.paramName")}</FormLabel>
                   <FormControl>
                     <Input {...field} placeholder={t("shellToolConfig.paramName")} className="h-8" />

web/src/components/tools/custom-tab.tsx

@@ -32,7 +32,7 @@ export default function CustomTabContent({
               control={form.control}
               name="shellClassBase64"
               render={({ field }) => (
-                <FormItem className="space-y-1">
+                <FormItem className="gap-1">
                   <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.base64String")}</FormLabel>
                   <RadioGroup
                     value={isFile ? "file" : "base64"}
@@ -51,7 +51,7 @@ export default function CustomTabContent({
                       <Label htmlFor="option-two">File</Label>
                     </div>
                   </RadioGroup>
-                  <FormControl className="pt-2 mt-2">
+                  <FormControl className="mt-2">
                     {isFile ? (
                       <Input
                         onChange={(e) => {

web/src/components/tools/godzilla-tab.tsx

@@ -28,7 +28,7 @@ export function GodzillaTabContent({
                 control={form.control}
                 name="godzillaPass"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.pass")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.pass")} className="h-8" />
                   </FormItem>
@@ -38,7 +38,7 @@ export function GodzillaTabContent({
                 control={form.control}
                 name="godzillaKey"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.key")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.key")} className="h-8" />
                   </FormItem>
@@ -48,7 +48,7 @@ export function GodzillaTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
                   </FormItem>
@@ -58,7 +58,7 @@ export function GodzillaTabContent({
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
                   </FormItem>

web/src/components/tools/neoreg-tab.tsx

@@ -28,7 +28,7 @@ export function NeoRegTabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
                   </FormItem>
@@ -38,7 +38,7 @@ export function NeoRegTabContent({
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
                   </FormItem>

web/src/components/tools/shelltype-field.tsx

@@ -16,7 +16,7 @@ export function ShellTypeFormField({
         control={form.control}
         name="shellType"
         render={({ field }) => (
-          <FormItem className="space-y-1">
+          <FormItem className="gap-1">
             <FormLabel className="h-6 flex items-center">{t("mainConfig.shellMountType")}</FormLabel>
             <Select onValueChange={field.onChange} value={field.value}>
               <FormControl>

web/src/components/tools/suo5-tab.tsx

@@ -28,7 +28,7 @@ export function Suo5TabContent({
                 control={form.control}
                 name="headerName"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
                   </FormItem>
@@ -38,7 +38,7 @@ export function Suo5TabContent({
                 control={form.control}
                 name="headerValue"
                 render={({ field }) => (
-                  <FormItem className="space-y-1">
+                  <FormItem className="gap-1">
                     <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
                     <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
                   </FormItem>

web/src/components/tools/urlpattern-field.tsx

@@ -13,7 +13,7 @@ export function UrlPatternFormField({ form }: Readonly<{ form: UseFormReturn<For
         control={form.control}
         name="urlPattern"
         render={({ field }) => (
-          <FormItem className="space-y-1">
+          <FormItem className="gap-1">
             <FormLabel className="h-6 flex items-center gap-1">
               {t("mainConfig.urlPattern")} <UrlPatternTip />
             </FormLabel>

web/src/components/ui/alert-dialog.tsx

@@ -1,93 +1,102 @@
+"use client";
+
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root;
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
 
-const AlertDialogOverlay = React.forwardRef<
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  return (
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+    <AlertDialogPrimitive.Overlay
->(({ className, ...props }, ref) => (
+      data-slot="alert-dialog-overlay"
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <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",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className,
       )}
       {...props}
     />
-  </AlertDialogPortal>
+  );
-));
+}
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  return (
-);
+    <AlertDialogPortal>
-AlertDialogHeader.displayName = "AlertDialogHeader";
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
 
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+  return (
-);
+    <div
-AlertDialogFooter.displayName = "AlertDialogFooter";
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
 
-const AlertDialogTitle = React.forwardRef<
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  return (
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+    <div
->(({ className, ...props }, ref) => (
+      data-slot="alert-dialog-footer"
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-));
+      {...props}
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+    />
+  );
+}
 
-const AlertDialogDescription = React.forwardRef<
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  return (
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+    <AlertDialogPrimitive.Title
->(({ className, ...props }, ref) => (
+      data-slot="alert-dialog-title"
-  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+      className={cn("text-lg font-semibold", className)}
-));
+      {...props}
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+    />
+  );
+}
 
-const AlertDialogAction = React.forwardRef<
+function AlertDialogDescription({
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  className,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+  ...props
->(({ className, ...props }, ref) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+  return (
-));
+    <AlertDialogPrimitive.Description
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
 
-const AlertDialogCancel = React.forwardRef<
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+}
->(({ className, ...props }, ref) => (
+
-  <AlertDialogPrimitive.Cancel
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-    ref={ref}
+  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,

web/src/components/ui/alert.tsx

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

web/src/components/ui/button.tsx

@@ -5,22 +5,24 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        destructive:
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        outline:
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-8",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "h-9 w-9",
+        icon: "size-9",
       },
     },
     defaultVariants: {
@@ -30,18 +32,19 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
+function Button({
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  className,
-    VariantProps<typeof buttonVariants> {
+  variant,
-  asChild?: boolean;
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  },
-);
-Button.displayName = "Button";
-
 export { Button, buttonVariants };

web/src/components/ui/card.tsx

@@ -2,42 +2,55 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+function Card({ className, ...props }: React.ComponentProps<"div">) {
-  <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+  return (
-));
+    <div
-Card.displayName = "Card";
+      data-slot="card"
+      className={cn("bg-card text-card-foreground flex flex-col rounded-xl border pb-6 shadow-sm", className)}
+      {...props}
+    />
+  );
+}
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => (
+  return (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div
-  ),
+      data-slot="card-header"
-);
+      className={cn(
-CardHeader.displayName = "CardHeader";
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => (
+  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
-    <div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+}
-  ),
-);
-CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => (
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
-    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+}
-  ),
-);
-CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+  return (
-);
+    <div
-CardContent.displayName = "CardContent";
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => (
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+}
-  ),
-);
-CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

web/src/components/ui/checkbox.tsx

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

web/src/components/ui/dropdown-menu.tsx

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

web/src/components/ui/form.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
 
 import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
@@ -33,8 +41,8 @@ const FormField = <
 const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+  const { getFieldState } = useFormContext();
-
+  const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
@@ -59,78 +67,70 @@ type FormItemContextValue = {
 
 const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  ({ className, ...props }, ref) => {
+  const id = React.useId();
-    const id = React.useId();
 
-    return (
+  return (
-      <FormItemContext.Provider value={{ id }}>
+    <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div data-slot="form-item" className={cn("gap-2", className)} {...props} />
-      </FormItemContext.Provider>
+    </FormItemContext.Provider>
-    );
+  );
-  },
+}
-);
-FormItem.displayName = "FormItem";
 
-const FormLabel = React.forwardRef<
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+  return (
-});
+    <Label
-FormLabel.displayName = "FormLabel";
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
 
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  ({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
-    return (
+  return (
-      <Slot
+    <Slot
-        ref={ref}
+      data-slot="form-control"
-        id={formItemId}
+      id={formItemId}
-        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-        aria-invalid={!!error}
+      aria-invalid={!!error}
-        {...props}
+      {...props}
-      />
+    />
-    );
+  );
-  },
+}
-);
-FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  ({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
-    const { formDescriptionId } = useFormField();
 
-    return (
+  return (
-      <p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
+    <p
-    );
+      data-slot="form-description"
-  },
+      id={formDescriptionId}
-);
+      className={cn("text-muted-foreground text-sm", className)}
-FormDescription.displayName = "FormDescription";
+      {...props}
+    />
+  );
+}
 
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  ({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
-    const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
-    const body = error ? String(error?.message) : children;
 
-    if (!body) {
+  if (!body) {
-      return null;
+    return null;
-    }
+  }
 
-    return (
+  return (
-      <p
+    <p data-slot="form-message" id={formMessageId} className={cn("text-destructive text-sm", className)} {...props}>
-        ref={ref}
+      {body}
-        id={formMessageId}
+    </p>
-        className={cn("text-[0.8rem] font-medium text-destructive", className)}
+  );
-        {...props}
+}
-      >
-        {body}
-      </p>
-    );
-  },
-);
-FormMessage.displayName = "FormMessage";
 
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

web/src/components/ui/input.tsx

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

web/src/components/ui/label.tsx

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

web/src/components/ui/radio-group.tsx

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

web/src/components/ui/select.tsx

@@ -1,142 +1,158 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root;
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
 
-const SelectGroup = SelectPrimitive.Group;
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
 
-const SelectValue = SelectPrimitive.Value;
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
 
-const SelectTrigger = React.forwardRef<
+function SelectTrigger({
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  className,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+  size = "default",
->(({ className, children, ...props }, ref) => (
+  children,
-  <SelectPrimitive.Trigger
+  ...props
-    ref={ref}
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    className={cn(
+  size?: "sm" | "default";
-      "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,
+  return (
-    )}
+    <SelectPrimitive.Trigger
-    {...props}
+      data-slot="select-trigger"
-  >
+      data-size={size}
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
       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",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        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 />
+      {children}
-      <SelectPrimitive.Viewport
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
         className={cn(
-          "p-1",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "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}
       >
-        {children}
+        <SelectScrollUpButton />
-      </SelectPrimitive.Viewport>
+        <SelectPrimitive.Viewport
-      <SelectScrollDownButton />
+          className={cn(
-    </SelectPrimitive.Content>
+            "p-1",
-  </SelectPrimitive.Portal>
+            position === "popper" &&
-));
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
 
-const SelectLabel = React.forwardRef<
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  return (
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+    <SelectPrimitive.Label
->(({ className, ...props }, ref) => (
+      data-slot="select-label"
-  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-));
+      {...props}
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+    />
+  );
+}
 
-const SelectItem = React.forwardRef<
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  return (
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+    <SelectPrimitive.Item
->(({ className, children, ...props }, ref) => (
+      data-slot="select-item"
-  <SelectPrimitive.Item
+      className={cn(
-    ref={ref}
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-    className={cn(
+        className,
-      "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}
-    )}
+    >
-    {...props}
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-  >
+        <SelectPrimitive.ItemIndicator>
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+          <CheckIcon className="size-4" />
-      <SelectPrimitive.ItemIndicator>
+        </SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+      </span>
-      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </span>
+    </SelectPrimitive.Item>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  );
-  </SelectPrimitive.Item>
+}
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  return (
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+    <SelectPrimitive.Separator
->(({ className, ...props }, ref) => (
+      data-slot="select-separator"
-  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-));
+      {...props}
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+    />
+  );
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
+  SelectLabel,
-  SelectScrollUpButton,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

web/src/components/ui/separator.tsx

@@ -1,20 +1,28 @@
+"use client";
+
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 import { cn } from "@/lib/utils";
 
-const Separator = React.forwardRef<
+function Separator({
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  className,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+  orientation = "horizontal",
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  decorative = true,
-  <SeparatorPrimitive.Root
+  ...props
-    ref={ref}
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-    decorative={decorative}
+  return (
-    orientation={orientation}
+    <SeparatorPrimitive.Root
-    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+      data-slot="separator-root"
-    {...props}
+      decorative={decorative}
-  />
+      orientation={orientation}
-));
+      className={cn(
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Separator };

web/src/components/ui/sonner.tsx

@@ -1,12 +1,23 @@
-import { Toaster as Sonner } from "sonner";
+import { Toaster as Sonner, ToasterProps } from "sonner";
-import { useTheme } from "@/components/theme-provider.tsx";
+import { useTheme } from "../theme-provider";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme } = useTheme();
+
   return (
-    <Sonner theme={theme as ToasterProps["theme"]} richColors className="toaster group" toastOptions={{}} {...props} />
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      richColors
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
   );
 };
 

web/src/components/ui/switch.tsx

@@ -1,27 +1,28 @@
+"use client";
+
 import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/utils";
 
-const Switch = React.forwardRef<
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  return (
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+    <SwitchPrimitive.Root
->(({ className, ...props }, ref) => (
+      data-slot="switch"
-  <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",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
       )}
-    />
+      {...props}
-  </SwitchPrimitives.Root>
+    >
-));
+      <SwitchPrimitive.Thumb
-Switch.displayName = SwitchPrimitives.Root.displayName;
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
 
 export { Switch };

web/src/components/ui/tabs.tsx

@@ -1,53 +1,42 @@
+"use client";
+
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root;
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
 
-const TabsList = React.forwardRef<
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  React.ElementRef<typeof TabsPrimitive.List>,
+  return (
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+    <TabsPrimitive.List
->(({ className, ...props }, ref) => (
+      data-slot="tabs-list"
-  <TabsPrimitive.List
+      className={cn(
-    ref={ref}
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-    className={cn(
+        className,
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      )}
-      className,
+      {...props}
-    )}
+    />
-    {...props}
+  );
-  />
+}
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = React.forwardRef<
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  return (
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+    <TabsPrimitive.Trigger
->(({ className, ...props }, ref) => (
+      data-slot="tabs-trigger"
-  <TabsPrimitive.Trigger
+      className={cn(
-    ref={ref}
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    className={cn(
+        className,
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 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",
+      )}
-      className,
+      {...props}
-    )}
+    />
-    {...props}
+  );
-  />
+}
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = React.forwardRef<
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  React.ElementRef<typeof TabsPrimitive.Content>,
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+}
->(({ className, ...props }, ref) => (
-  <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 };

web/src/components/ui/textarea.tsx

@@ -2,20 +2,17 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  ({ className, ...props }, ref) => {
+  return (
-    return (
+    <textarea
-      <textarea
+      data-slot="textarea"
-        className={cn(
+      className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base 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 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
+        className,
-        )}
+      )}
-        ref={ref}
+      {...props}
-        {...props}
+    />
-      />
+  );
-    );
+}
-  },
-);
-Textarea.displayName = "Textarea";
 
 export { Textarea };

web/src/components/ui/tooltip.tsx

@@ -3,28 +3,44 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-const TooltipContent = React.forwardRef<
+function TooltipContent({
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+  className,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+  sideOffset = 0,
->(({ className, sideOffset = 4, ...props }, ref) => (
+  children,
-  <TooltipPrimitive.Portal>
+  ...props
-    <TooltipPrimitive.Content
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-      ref={ref}
+  return (
-      sideOffset={sideOffset}
+    <TooltipPrimitive.Portal>
-      className={cn(
+      <TooltipPrimitive.Content
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        data-slot="tooltip-content"
-        className,
+        sideOffset={sideOffset}
-      )}
+        className={cn(
-      {...props}
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-    />
+          className,
-  </TooltipPrimitive.Portal>
+        )}
-));
+        {...props}
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };