feat: ✨ add new UI components and update existing ones

Author: moinulmoin

.windsurfrules

@@ -0,0 +1,41 @@
+You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind.
+
+  Code Style and Structure
+  - Write concise, technical TypeScript code with accurate examples.
+  - Use functional and declarative programming patterns; avoid classes.
+  - Prefer iteration and modularization over code duplication.
+  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
+  - Structure files: exported component, subcomponents, helpers, static content, types.
+
+  Naming Conventions
+  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
+  - Favor named exports for components.
+
+  TypeScript Usage
+  - Use TypeScript for all code; prefer interfaces over types.
+  - Avoid enums; use maps instead.
+  - Use functional components with TypeScript interfaces.
+
+  Syntax and Formatting
+  - Use the "function" keyword for pure functions.
+  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+  - Use declarative JSX.
+
+  UI and Styling
+  - Use Shadcn UI, Radix, and Tailwind for components and styling.
+  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
+
+  Performance Optimization
+  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
+  - Wrap client components in Suspense with fallback.
+  - Use dynamic loading for non-critical components.
+  - Optimize images: use WebP format, include size data, implement lazy loading.
+
+  Key Conventions.
+  - Optimize Web Vitals (LCP, CLS, FID).
+  - Limit 'use client':
+    - Favor server components and Next.js SSR.
+    - Use only for Web API access in small components.
+    - Avoid for data fetching or state management.
+
+  Follow Next.js docs for Data Fetching, Rendering, and Routing.

components.json

@@ -7,10 +7,15 @@
     "config": "tailwind.config.js",
     "css": "src/app/globals.css",
     "baseColor": "slate",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": ""
   },
   "aliases": {
     "components": "~/components",
-    "utils": "~/lib/utils"
-  }
+    "utils": "~/lib/utils",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "iconLibrary": "lucide"
 }

package.json

@@ -15,65 +15,90 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
+    "@hookform/resolvers": "^3.10.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@prisma/client": "^5.22.0",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.2",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@react-email/components": "^0.0.28",
-    "@serwist/next": "^9.0.10",
-    "@uploadthing/react": "^7.1.1",
-    "arctic": "^2.2.2",
+    "@prisma/client": "^6.2.1",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@react-email/components": "^0.0.32",
+    "@serwist/next": "^9.0.11",
+    "@uploadthing/react": "^7.1.5",
+    "arctic": "^3.1.3",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
-    "input-otp": "^1.4.1",
-    "lucide-react": "^0.460.0",
-    "next": "15.0.3",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.471.1",
+    "next": "15.1.4",
     "next-international": "^1.3.1",
-    "next-safe-action": "^7.9.9",
-    "next-themes": "^0.4.3",
-    "postcss": "8.4.49",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-email": "3.0.2",
-    "react-hook-form": "^7.53.2",
-    "resend": "^4.0.0",
-    "stripe": "^14.25.0",
-    "uploadthing": "^7.3.0",
-    "zod": "^3.23.8"
+    "next-safe-action": "^7.10.2",
+    "next-themes": "^0.4.4",
+    "postcss": "8.5.1",
+    "react": "19.0.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "19.0.0",
+    "react-email": "3.0.6",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.2",
+    "resend": "^4.1.1",
+    "sonner": "^2.0.3",
+    "stripe": "^17.5.0",
+    "uploadthing": "^7.4.4",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.4.4",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "22.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "22.10.7",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "autoprefixer": "10.4.20",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "eslint": "8.56.0",
-    "eslint-config-next": "15.0.3",
-    "eslint-config-prettier": "^8.10.0",
-    "lefthook": "^1.8.4",
-    "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "prisma": "^5.22.0",
-    "release-it": "^17.10.0",
-    "release-it-pnpm": "^4.6.3",
-    "serwist": "^9.0.10",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "3.4.15",
+    "eslint": "9.18.0",
+    "eslint-config-next": "15.1.4",
+    "eslint-config-prettier": "^10.0.1",
+    "lefthook": "^1.10.7",
+    "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prisma": "^6.2.1",
+    "release-it": "^18.1.1",
+    "release-it-pnpm": "^4.6.4",
+    "serwist": "^9.0.11",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.6.3",
-    "velite": "0.2.1"
+    "typescript": "5.7.3",
+    "velite": "0.2.2"
   },
-  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+  "packageManager": "pnpm@10.4.1"
 }