chore: update shadcn ui and tailwind

dev/docker-compose.yml

@@ -9,3 +9,10 @@ services:
       - ./psql:/var/lib/postgresql/data
     ports:
       - 5432:5432
+  redis:
+    image: redis:alpine
+    user: 1000:1000
+    volumes:
+      - ./redis:/data
+    ports:
+      - 6379:6379

package.json

@@ -30,11 +30,11 @@
     "arctic": "^2.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
-    "cmdk": "1.0.0",
+    "cmdk": "1.1.1",
     "input-otp": "^1.4.1",
     "ioredis": "^5.4.1",
     "lucia": "^3.1.1",
-    "lucide-react": "^0.368.0",
+    "lucide-react": "^0.488.0",
     "next": "^15.3.0",
     "next-themes": "^0.4.4",
     "openai": "^4.77.0",
@@ -42,11 +42,12 @@
     "react-dom": "^19.0.0-rc.1",
     "react-hook-form": "^7.54.1",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -55,7 +56,7 @@
     "postcss": "^8",
     "prisma": "^6.1.0",
     "shadcn": "^2.1.7",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.4",
     "typescript": "^5"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/(protected)/create/page.tsx

@@ -28,7 +28,7 @@ export default function CreateForm() {
             },
           ]}
           submitText="Submit"
-          submitClassname="w-full !mt-5"
+          submitClassname="w-full mt-5!"
           onActionComplete={(res) => {
             // @ts-ignore yea
             if (res && res.id) {

src/app/(public)/page.tsx

@@ -16,7 +16,7 @@ export default async function Home() {
       <CloseTabNotice />
       <main className="flex-1">
         {/* Hero Section */}
-        <section className="w-full py-20 md:py-32 lg:py-40 bg-gradient-to-b from-background to-muted/50 relative overflow-hidden">
+        <section className="w-full py-20 md:py-32 lg:py-40 bg-linear-to-b from-background to-muted/50 relative overflow-hidden">
           <div className="absolute inset-0 bg-grid-white/10 [mask-image:radial-gradient(white,transparent_70%)]" />
           <div className="container px-4 md:px-6 relative z-10">
             <div className="flex flex-col items-center space-y-6 text-center">
@@ -31,7 +31,7 @@ export default async function Home() {
                 </Link>
               </Badge>
               <div className="space-y-4 max-w-3xl">
-                <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl/none bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
+                <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl/none bg-clip-text text-transparent bg-linear-to-r from-primary to-primary/60">
                   User feedback for developers
                 </h1>
                 <p className="mx-auto max-w-[700px] text-lg text-muted-foreground md:text-xl">
@@ -66,7 +66,7 @@ export default async function Home() {
           </div>
           
           {/* Abstract Decoration */}
-          <div className="absolute -bottom-48 left-0 right-0 h-96 bg-gradient-to-r from-primary/20 via-secondary/20 to-primary/20 blur-3xl opacity-50" />
+          <div className="absolute -bottom-48 left-0 right-0 h-96 bg-linear-to-r from-primary/20 via-secondary/20 to-primary/20 blur-3xl opacity-50" />
         </section>
 
         {/* Features Cards */}
@@ -190,7 +190,7 @@ export default async function Home() {
         {/* CTA Section */}
         <section className="w-full py-12 md:py-24">
           <div className="container px-4 md:px-6">
-            <div className="flex flex-col items-center justify-center space-y-4 text-center bg-gradient-to-r from-primary/5 to-secondary/5 p-8 rounded-xl">
+            <div className="flex flex-col items-center justify-center space-y-4 text-center bg-linear-to-r from-primary/5 to-secondary/5 p-8 rounded-xl">
               <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Ready to get started?</h2>
               <p className="text-muted-foreground md:text-lg max-w-[600px]">
                 Join developers who are building better products with user feedback

src/app/globals.css

@@ -1,85 +1,177 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-surface1: var(--surface-1);
+
+  --color-surface2: var(--surface-2);
+
+  --color-mantle: var(--mantle);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
 @layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
 :root {
-    --background: 220 23.077% 94.902%;
-    --foreground: 233.793 16.022% 35.49%;
-
-    --muted: 222.857 15.909% 82.745%;
-    --muted-foreground: 233.333 12.796% 41.373%;
-
-    --popover: 220 23.077% 94.902%;
-    --popover-foreground: 233.793 16.022% 35.49%;
-
-    --card: 220 23.077% 94.902%;
-    --card-foreground: 233.793 16.022% 35.49%;
-
-    --border: 225 13.559% 76.863%;
-    --input: 225 13.559% 76.863%;
-
-    --primary: 219.907 91.489% 53.922%;
-    --primary-foreground: 220 23.077% 94.902%;
-
-    --secondary: 222.857 15.909% 82.745%;
-    --secondary-foreground: 233.793 16.022% 35.49%;
-
-    --accent: 222.857 15.909% 82.745%;
-    --accent-foreground: 233.793 16.022% 35.49%;
-
-    --destructive: 347.077 86.667% 44.118%;
-    --destructive-foreground: 220 21.951% 91.961%;
-
-    --ring: 233.793 16.022% 35.49%;
-
-    --surface-1: 225.0 14.0% 77.0%;
-    --surface-2: 227.0 12.0% 71.0%;
-
-    --mantle: 220.0 22.0% 92.0%;
-
   --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.637 0.237 25.331);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.637 0.237 25.331);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.637 0.237 25.331);
 }
 
 .dark {
-    --background: 240 21.053% 14.902%;
+  --background: oklch(0.141 0.005 285.823);
-    --foreground: 226.154 63.934% 88.039%;
+  --foreground: oklch(0.985 0 0);
-
+  --card: oklch(0.21 0.006 285.885);
-    --muted: 236.842 16.239% 22.941%;
+  --card-foreground: oklch(0.985 0 0);
-    --muted-foreground: 226.667 35.294% 80%;
+  --popover: oklch(0.21 0.006 285.885);
-
+  --popover-foreground: oklch(0.985 0 0);
-    --popover: 240 21.053% 14.902%;
+  --primary: oklch(0.637 0.237 25.331);
-    --popover-foreground: 226.154 63.934% 88.039%;
+  --primary-foreground: oklch(0.971 0.013 17.38);
-
+  --secondary: oklch(0.274 0.006 286.033);
-    --card: 240 21.053% 14.902%;
+  --secondary-foreground: oklch(0.985 0 0);
-    --card-foreground: 226.154 63.934% 88.039%;
+  --muted: oklch(0.274 0.006 286.033);
-
+  --muted-foreground: oklch(0.705 0.015 286.067);
-    --border: 234.286 13.208% 31.176%;
+  --accent: oklch(0.274 0.006 286.033);
-    --input: 234.286 13.208% 31.176%;
+  --accent-foreground: oklch(0.985 0 0);
-
+  --destructive: oklch(0.704 0.191 22.216);
-    --primary: 217.168 91.87% 75.882%;
+  --border: oklch(1 0 0 / 10%);
-    --primary-foreground: 240 21.053% 14.902%;
+  --input: oklch(1 0 0 / 15%);
-
+  --ring: oklch(0.637 0.237 25.331);
-    --secondary: 236.842 16.239% 22.941%;
+  --chart-1: oklch(0.488 0.243 264.376);
-    --secondary-foreground: 226.154 63.934% 88.039%;
+  --chart-2: oklch(0.696 0.17 162.48);
-
+  --chart-3: oklch(0.769 0.188 70.08);
-    --accent: 236.842 16.239% 22.941%;
+  --chart-4: oklch(0.627 0.265 303.9);
-    --accent-foreground: 226.154 63.934% 88.039%;
+  --chart-5: oklch(0.645 0.246 16.439);
-
+  --sidebar: oklch(0.21 0.006 285.885);
-    --destructive: 343.269 81.25% 74.902%;
+  --sidebar-foreground: oklch(0.985 0 0);
-    --destructive-foreground: 240 21.311% 11.961%;
+  --sidebar-primary: oklch(0.637 0.237 25.331);
-
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --ring: 226.154 63.934% 88.039%;
+  --sidebar-accent: oklch(0.274 0.006 286.033);
-
+  --sidebar-accent-foreground: oklch(0.985 0 0);
-    --surface-1: 234.0 13.0% 31.0%;
+  --sidebar-border: oklch(1 0 0 / 10%);
-    --surface-2: 233.0 12.0% 39.0%;
+  --sidebar-ring: oklch(0.637 0.237 25.331);
-
-    --mantle: 240 21.311% 11.961%;
-
-    --radius: 0.5rem;
-  }
 }
 
+
 @layer base {
   * {
     @apply border-border;

src/components/app/DottedCreateCard/DottedCreateCard.tsx

@@ -3,14 +3,14 @@ import Link from 'next/link';
 
 export default function DottedCreateCard() {
   return (
-    <div className="rounded-lg border bg-card text-card-foreground shadow-sm border-dashed">
+    <div className="rounded-lg border bg-card text-card-foreground shadow-xs border-dashed">
       <Link href="/create">
         <div className="flex items-center justify-center h-[50%] w-full">
           <Plus className='w-4 h-4 mr-2' />
           <p className="text-muted-foreground">Create</p>
         </div>
       </Link>
-      <div className="rounded-lg border-t bg-card text-card-foreground shadow-sm border-dashed" />
+      <div className="rounded-lg border-t bg-card text-card-foreground shadow-xs border-dashed" />
       <Link href="/join">
         <div className="flex items-center justify-center h-[50%] w-full">
           <UserPlus className='w-4 h-4 mr-2' />

src/components/app/InviteCodeViewer/InviteCodeViewer.tsx

@@ -13,7 +13,7 @@ export default function InviteCodeViewer({ code }: { code: string }) {
         type="text"
         id="inviteCode"
         placeholder="Invite code"
-        className={hover ? '' : 'blur-sm'}
+        className={hover ? '' : 'blur-xs'}
         onChange={() => {}}
         onMouseOver={() => setHover(true)}
         onMouseOut={() => setHover(false)}

src/components/app/NavBar/NavBar.tsx

@@ -45,7 +45,7 @@ export default function Navbar() {
   const [, logoutAction] = useActionState(logout, null);
   return (
     <>
-      <nav className="flex items-center justify-between h-16 px-4 md:shadow border-b md:border-0 md:rounded-md md:mt-2 gap-3 shrink-0 max-w-6xl mx-auto bg-mantle">
+      <nav className="flex items-center justify-between h-16 px-4 md:shadow-sm border-b md:border-0 md:rounded-md md:mt-2 gap-3 shrink-0 max-w-6xl mx-auto bg-mantle">
         {/* Left section */}
         <div className="flex items-center">
           <Link href="/" className="hidden md:flex">

src/components/app/ProjectSettings/ProjectSettings.tsx

@@ -159,7 +159,7 @@ export default function ProjectSettings(project: ProjectWithUsers) {
                   schemaName={'deleteProject'}
                   action={editProject}
                   submitText="Delete Project"
-                  submitClassname="!mt-0"
+                  submitClassname="mt-0!"
                 />
               </CardContent>
             </Card> */}
@@ -239,7 +239,7 @@ export default function ProjectSettings(project: ProjectWithUsers) {
                     schemaName={'githubTestIssue'}
                     action={githubTestIssue}
                     submitText="Create test issue"
-                    submitClassname="!mt-0"
+                    submitClassname="mt-0!"
                   />
                 ) : (
                   <p className="text-muted-foreground text-sm">

src/components/app/ProjectTeamUsers/ProjectTeamUsers.tsx

@@ -37,7 +37,7 @@ export default function ProjectTeamUsers(userProject: ProjectTeamUsersProps) {
       {users.toReversed().map((user) => (
         <li
           key={user.userId}
-          className="flex items-center justify-between p-3 rounded-lg shadow bg-accent"
+          className="flex items-center justify-between p-3 rounded-lg shadow-sm bg-accent"
         >
           <div className="flex items-center space-x-3">
             <Avatar>

src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full 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",
   {
     variants: {
       variant: {

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { LoaderCircle } from "lucide-react"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium cursor-pointer ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-card-foreground shadow-xs",
       className
     )}
     {...props}

src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}

src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}

src/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

src/components/ui/dropdown-menu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "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
     )}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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",
       inset && "pl-8",
       className
     )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <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",
+      "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",
       className
     )}
     checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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",
       className
     )}
     {...props}

src/components/ui/input-otp.tsx

@@ -13,7 +13,7 @@ const InputOTP = React.forwardRef<
   <OTPInput
     ref={ref}
     containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      "flex items-center gap-2 has-disabled:opacity-50",
       containerClassName
     )}
     className={cn("disabled:cursor-not-allowed", className)}

src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

src/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "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",
         className
       )}
       {...props}

src/components/ui/table.tsx

@@ -50,7 +50,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
       className
     )}
     {...props}

src/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden 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-xs",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <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",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}

tailwind.config.ts

@@ -1,94 +0,0 @@
-import type { Config } from "tailwindcss"
-
-const config = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        surface1: {
-          DEFAULT: "hsl(var(--surface-1))",
-        },
-        surface2: {
-          DEFAULT: "hsl(var(--surface-2))",
-        },
-        mantle: {
-          DEFAULT: "hsl(var(--mantle))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config
-
-export default config