Updated Libs - Updated shadcn UI components (again) after Tailwindcss 4 update.

.prettierrc

@@ -1,4 +1,5 @@
 {
   "endOfLine": "lf",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/index.css"
 }

package-lock.json

@@ -8,7 +8,7 @@
       "name": "somniarooms",
       "version": "0.0.0",
       "dependencies": {
-        "@hookform/resolvers": "^3.9.0",
+        "@hookform/resolvers": "^3.10.0",
         "@radix-ui/react-checkbox": "^1.3.2",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.7",
@@ -26,11 +26,11 @@
         "react": "^18.2.0",
         "react-day-picker": "^9.7.0",
         "react-dom": "^18.2.0",
-        "react-hook-form": "^7.53.0",
+        "react-hook-form": "^7.57.0",
         "react-router-dom": "^6.23.0",
         "swr": "^2.2.5",
         "tailwind-merge": "^3.3.0",
-        "zod": "^3.23.8",
+        "zod": "^3.25.56",
         "zustand": "^4.5.2"
       },
       "devDependencies": {
@@ -51,8 +51,6 @@
         "prettier": "^3.5.3",
         "prettier-plugin-tailwindcss": "^0.6.12",
         "tailwindcss": "^4.1.8",
-        "tailwindcss-animate": "^1.0.7",
-        "tw-animate-css": "^1.3.4",
         "typescript": "^5.2.2",
         "vite": "^6.3.5"
       }
@@ -606,9 +604,9 @@
       "license": "MIT"
     },
     "node_modules/@hookform/resolvers": {
-      "version": "3.9.0",
+      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
-      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==",
       "license": "MIT",
       "peerDependencies": {
         "react-hook-form": "^7.0.0"
@@ -4345,9 +4343,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.0",
+      "version": "7.57.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.57.0.tgz",
-      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "integrity": "sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -4681,15 +4679,6 @@
       "integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==",
       "license": "MIT"
     },
-    "node_modules/tailwindcss-animate": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
-      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-      "dev": true,
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
@@ -4803,16 +4792,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
-    "node_modules/tw-animate-css": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.4.tgz",
-      "integrity": "sha512-dd1Ht6/YQHcNbq0znIT6dG8uhO7Ce+VIIhZUhjsryXsMPJQz3bZg7Q2eNzLwipb25bRZslGb2myio5mScd1TFg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/Wombosvideo"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5079,9 +5058,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.23.8",
+      "version": "3.25.56",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.56.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "integrity": "sha512-rd6eEF3BTNvQnR2e2wwolfTmUTnp70aUTqr0oaGbHifzC3BKJsoV+Gat8vxUMR1hwOKBs6El+qWehrHbCpW6SQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"

package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
+    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
@@ -29,11 +29,11 @@
     "react": "^18.2.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.57.0",
     "react-router-dom": "^6.23.0",
     "swr": "^2.2.5",
     "tailwind-merge": "^3.3.0",
-    "zod": "^3.23.8",
+    "zod": "^3.25.56",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -54,8 +54,6 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.12",
     "tailwindcss": "^4.1.8",
-    "tailwindcss-animate": "^1.0.7",
-    "tw-animate-css": "^1.3.4",
     "typescript": "^5.2.2",
     "vite": "^6.3.5"
   }

src/components/Rooms/room-item-card.tsx

@@ -48,7 +48,7 @@ export function RoomItemCard({
   });
 
   return (
-    <Card key={room.id} className={cn(className, "relative")}>
+    <Card key={room.id} className={cn(className, "relative", "py-0")}>
       {/* <CardHeader className="p-0 m-0 mb-5">
         </CardHeader> */}
       <CardContent className="flex h-full w-full flex-col p-0">

src/components/app-header.tsx

@@ -7,7 +7,7 @@ import { BookAIcon, HomeIcon } from "lucide-react";
 
 function AppHeader() {
   return (
-    <Card className="mx-10 my-4 flex items-center">
+    <Card className="mx-10 my-4 flex items-center py-0">
       <CardContent className="w-full py-2">
         <div className="flex items-center justify-around">
           <div className="relative flex flex-row items-center gap-2">

src/components/booking/booking-details.tsx

@@ -51,7 +51,7 @@ export function BookingDetails({
     return (
       <Card
         key={room.roomCategory.toString() + room.guestNumber.toString()}
-        className="my-3 flex flex-row bg-accent"
+        className="my-3 flex flex-row bg-accent py-0"
       >
         {photo && (
           <img

src/components/mode-toggle.tsx

@@ -1,4 +1,4 @@
-import { Moon, Sun } from "lucide-react";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -14,21 +14,24 @@ export function ModeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
+          <SunIcon className="h-[1.2rem] w-[1.2rem] scale-100" />
           Light
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <MoonIcon className="h-[1.2rem] w-[1.2rem] scale-100" />
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
+          <MonitorIcon className="h-[1.2rem] w-[1.2rem] scale-100" />
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

src/components/ui/badge.tsx

@@ -1,20 +1,22 @@
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
@@ -23,14 +25,23 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps
+function Badge({
-  extends React.HTMLAttributes<HTMLDivElement>,
+  className,
-    VariantProps<typeof badgeVariants> {}
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
 
-function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
   );
 }
 
-export { Badge };
+// eslint-disable-next-line react-refresh/only-export-components
+export { Badge, badgeVariants };

src/components/ui/button.tsx

@@ -5,26 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "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-sm hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+          "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",
         outline:
-          "border border-input bg-background shadow-xs 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",
+        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: {
@@ -34,25 +35,26 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
+function Button({
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  className,
-    VariantProps<typeof buttonVariants> {
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}
+  }) {
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
+
   return (
     <Comp
+      data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
       {...props}
     />
   );
-  },
+}
-);
-Button.displayName = "Button";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants };

src/components/ui/calendar.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import {
   ChevronDownIcon,
@@ -29,9 +27,9 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "group/calendar bg-background p-3 [--cell-size:2rem] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`[.rdp-button\_next>svg]:**:rtl:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`[.rdp-button\_previous>svg]:**:rtl:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className,
       )}
       captionLayout={captionLayout}
@@ -43,34 +41,34 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
+          "flex gap-4 flex-col md:flex-row relative",
           defaultClassNames.months,
         ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
         nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
           defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_next,
         ),
         month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
           defaultClassNames.month_caption,
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-2xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
           defaultClassNames.dropdown_root,
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
@@ -78,34 +76,34 @@ function Calendar({
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
           defaultClassNames.weekday,
         ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
         week_number_header: cn(
-          "w-(--cell-size) select-none",
+          "select-none w-(--cell-size)",
           defaultClassNames.week_number_header,
         ),
         week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
+          "text-[0.8rem] select-none text-muted-foreground",
           defaultClassNames.week_number,
         ),
         day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
           defaultClassNames.day,
         ),
         range_start: cn(
-          "bg-accent rounded-l-md",
+          "rounded-l-md bg-accent",
           defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
           defaultClassNames.today,
@@ -198,7 +196,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}

src/components/ui/card.tsx

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

src/components/ui/carousel.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -40,12 +40,7 @@ function useCarousel() {
   return context;
 }
 
-const Carousel = React.forwardRef<
+function Carousel({
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
   orientation = "horizontal",
   opts,
   setApi,
@@ -53,21 +48,19 @@ const Carousel = React.forwardRef<
   className,
   children,
   ...props
-    },
+}: React.ComponentProps<"div"> & CarouselProps) {
-    ref,
-  ) => {
   const [carouselRef, api] = useEmblaCarousel(
-      { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
+    {
+      ...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) {
+    if (!api) return;
-        return;
-      }
-
     setCanScrollPrev(api.canScrollPrev());
     setCanScrollNext(api.canScrollNext());
   }, []);
@@ -94,18 +87,12 @@ const Carousel = React.forwardRef<
   );
 
   React.useEffect(() => {
-      if (!api || !setApi) {
+    if (!api || !setApi) return;
-        return;
-      }
-
     setApi(api);
   }, [api, setApi]);
 
   React.useEffect(() => {
-      if (!api) {
+    if (!api) return;
-        return;
-      }
-
     onSelect(api);
     api.on("reInit", onSelect);
     api.on("select", onSelect);
@@ -130,31 +117,29 @@ const Carousel = React.forwardRef<
       }}
     >
       <div
-          ref={ref}
         onKeyDownCapture={handleKeyDown}
         className={cn("relative", className)}
         role="region"
         aria-roledescription="carousel"
+        data-slot="carousel"
         {...props}
       >
         {children}
       </div>
     </CarouselContext.Provider>
   );
-  },
+}
-);
-Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
 
   return (
-    <div ref={carouselRef} className="overflow-hidden">
     <div
-        ref={ref}
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
@@ -164,20 +149,16 @@ const CarouselContent = React.forwardRef<
       />
     </div>
   );
-});
+}
-CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = React.forwardRef<
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
 
   return (
     <div
-      ref={ref}
       role="group"
       aria-roledescription="slide"
+      data-slot="carousel-item"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
@@ -186,24 +167,25 @@ const CarouselItem = React.forwardRef<
       {...props}
     />
   );
-});
+}
-CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
+function CarouselPrevious({
-  HTMLButtonElement,
+  className,
-  React.ComponentProps<typeof Button>
+  variant = "outline",
->(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
-      ref={ref}
+      data-slot="carousel-previous"
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+          ? "top-1/2 -left-12 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
@@ -211,28 +193,29 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="h-4 w-4" />
+      <ArrowLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
   );
-});
+}
-CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
+function CarouselNext({
-  HTMLButtonElement,
+  className,
-  React.ComponentProps<typeof Button>
+  variant = "outline",
->(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
-      ref={ref}
+      data-slot="carousel-next"
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+          ? "top-1/2 -right-12 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
@@ -240,12 +223,11 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="h-4 w-4" />
+      <ArrowRight />
       <span className="sr-only">Next slide</span>
     </Button>
   );
-});
+}
-CarouselNext.displayName = "CarouselNext";
 
 export {
   type CarouselApi,

src/components/ui/checkbox.tsx

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

src/components/ui/dateRange-picker.tsx

@@ -85,18 +85,16 @@ export function DatePickerWithRange({
         Hasta
       </Typography>
       <Popover>
-        <PopoverTrigger asChild>
+        <PopoverTrigger>
           <Button
             id="dateFrom"
-            variant={"outline-solid"}
+            variant="outline"
-            className={cn(
+            data-empty={!dateRange}
-              "justify-start text-left font-normal",
+            className="w-[100%] justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
-              !dateRange && "text-muted-foreground",
-            )}
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
+            <CalendarIcon />
             {dateRange?.from ? (
-              format(dateRange.from, "LLL dd, y")
+              format(dateRange.from, "PPP")
             ) : (
               <span>Pick a date</span>
             )}
@@ -104,7 +102,6 @@ export function DatePickerWithRange({
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="center">
           <Calendar
-            autoFocus
             mode="single"
             defaultMonth={dateRange?.from}
             selected={dateRange?.from}
@@ -115,14 +112,12 @@ export function DatePickerWithRange({
         </PopoverContent>
       </Popover>
       <Popover>
-        <PopoverTrigger asChild>
+        <PopoverTrigger>
           <Button
             id="dateTo"
-            variant={"outline-solid"}
+            variant={"outline"}
-            className={cn(
+            data-empty={!dateRange}
-              "justify-start text-left font-normal",
+            className="w-[100%] justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
-              !dateRange && "text-muted-foreground",
-            )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {dateRange?.to ? (

src/components/ui/dropdown-menu.tsx

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

src/components/ui/form.tsx

@@ -3,11 +3,12 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
   FormProvider,
   useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
 } from "react-hook-form";
 
 import { cn } from "@/lib/utils";
@@ -42,8 +43,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) {
@@ -70,47 +71,44 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-const FormItem = React.forwardRef<
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
   const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
     </FormItemContext.Provider>
   );
-});
+}
-FormItem.displayName = "FormItem";
 
-const FormLabel = React.forwardRef<
+function FormLabel({
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  className,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+  ...props
->(({ className, ...props }, ref) => {
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
-      ref={ref}
+      data-slot="form-label"
-      className={cn(error && "text-destructive", className)}
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
   );
-});
+}
-FormLabel.displayName = "FormLabel";
 
-const FormControl = React.forwardRef<
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
   return (
     <Slot
-      ref={ref}
+      data-slot="form-control"
       id={formItemId}
       aria-describedby={
         !error
@@ -121,32 +119,24 @@ const FormControl = React.forwardRef<
       {...props}
     />
   );
-});
+}
-FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
 
   return (
     <p
-      ref={ref}
+      data-slot="form-description"
       id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   );
-});
+}
-FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
     return null;
@@ -154,16 +144,15 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      ref={ref}
+      data-slot="form-message"
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      className={cn("text-sm text-destructive", className)}
       {...props}
     >
       {body}
     </p>
   );
-});
+}
-FormMessage.displayName = "FormMessage";
 
 export {
   // eslint-disable-next-line react-refresh/only-export-components

src/components/ui/input.tsx

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

src/components/ui/label.tsx

@@ -1,24 +1,22 @@
 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(
+function Label({
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  className,
-);
+  ...props
-
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-const Label = React.forwardRef<
+  return (
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
     <LabelPrimitive.Root
-    ref={ref}
+      data-slot="label"
-    className={cn(labelVariants(), className)}
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
       {...props}
     />
-));
+  );
-Label.displayName = LabelPrimitive.Root.displayName;
+}
 
 export { Label };

src/components/ui/popover.tsx

@@ -1,31 +1,46 @@
-import * as React from "react";
+import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const Popover = PopoverPrimitive.Root;
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
 
-const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
+function PopoverContent({
-
+  className,
-const PopoverContent = React.forwardRef<
+  align = "center",
-  React.ElementRef<typeof PopoverPrimitive.Content>,
+  sideOffset = 4,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+  ...props
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
-      ref={ref}
+        data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-        className,
+          className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-));
+  )
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+}
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/separator.tsx

@@ -3,27 +3,24 @@ 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",
->(
+  decorative = true,
-  (
+  ...props
-    { className, orientation = "horizontal", decorative = true, ...props },
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-    ref,
+  return (
-  ) => (
     <SeparatorPrimitive.Root
-      ref={ref}
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className,
       )}
       {...props}
     />
-  ),
   );
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+}
 
 export { Separator };

src/components/ui/skeleton.tsx

@@ -1,12 +1,10 @@
 import { cn } from "@/lib/utils";
 
-function Skeleton({
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
       {...props}
     />
   );

src/components/ui/table.tsx

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

src/components/ui/tooltip.tsx

@@ -3,26 +3,57 @@ 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,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
-    ref={ref}
+        data-slot="tooltip-content"
         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",
+          "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 bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground",
           className,
         )}
         {...props}
-  />
+      >
-));
+        {children}
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-primary fill-primary" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/ui/typography.tsx

@@ -8,22 +8,22 @@ import { Slot } from "@radix-ui/react-slot";
 const typographyVariants = cva("text-foreground", {
   variants: {
     variant: {
-      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h1: "scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance",
       h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
       h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
       h4: "scroll-m-20 text-xl font-semibold tracking-tight",
       h5: "scroll-m-20 text-lg font-semibold tracking-tight",
       h6: "scroll-m-20 text-base font-semibold tracking-tight",
-      p: "leading-7 not-first:mt-6",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
       p_inline: "leading-7",
       blockquote: "mt-6 border-l-2 pl-6 italic",
       ul: "my-6 ml-6 list-disc [&>li]:mt-2",
       inlineCode:
-        "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+        "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
-      lead: "text-xl text-muted-foreground",
+      lead: "text-muted-foreground text-xl",
       largeText: "text-lg font-semibold",
-      smallText: "text-sm font-medium leading-none",
+      smallText: "text-sm leading-none font-medium",
-      mutedText: "text-sm text-muted-foreground",
+      mutedText: "text-muted-foreground text-sm",
     },
   },
   defaultVariants: {