Update to last version of shadcn and add components.json

components.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -26,25 +26,26 @@
     "@mdx-js/loader": "2.3.0",
     "@mdx-js/react": "2.3.0",
     "@next/mdx": "13.2.4",
-    "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/line-clamp": "0.4.2",
     "@tailwindcss/typography": "0.5.9",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
-    "class-variance-authority": "0.6.0",
-    "clsx": "1.2.1",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^1.2.1",
     "framer-motion": "10.12.16",
+    "lucide-react": "^0.257.0",
     "mapbox-gl": "npm:[email protected]",
     "maplibre-gl": "2.1.9",
     "next": "13.2.4",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-map-gl": "7.0.25",
-    "tailwind-merge": "1.13.1",
+    "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.2.7",
-    "tailwindcss-animate": "1.0.6",
+    "tailwindcss-animate": "^1.0.6",
     "use-debounce": "9.0.4"
   },
   "devDependencies": {

src/components/cookies/component.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Button } from 'components/button';
+import { Button } from '@/components/ui/button';
 
 import type { CookiesProps } from './types';
 

src/components/search/component.tsx

@@ -2,7 +2,7 @@ import { FC, useRef, ChangeEvent } from 'react';
 
 import cx from 'clsx';
 
-import { Button } from 'components/button';
+import { Button } from '@/components/ui/button';
 import Icon from 'components/icon';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';

src/pages/docs/components/button/index.mdx

@@ -1,5 +1,5 @@
 import DocsLayout from 'layouts/docs';
-import Button from 'components/button';
+import Button from 'components/ui/button';
 
 # Button component
 

src/styles/globals.css

@@ -5,16 +5,16 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+    --foreground: 222.2 84% 4.9%;
 
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --card-foreground: 222.2 84% 4.9%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
@@ -28,7 +28,7 @@
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
+    --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --ring: 215 20.2% 65.1%;
@@ -37,36 +37,34 @@
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
 
     --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
 
-    --accent: 216 34% 17%;
+    --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
 
-    --radius: 0.5rem;
+    --ring: 217.2 32.6% 17.5%;
   }
 }
 
@@ -76,10 +74,10 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 
+
 /* SEARCH */
 @layer base {
   input[type='search']::-webkit-search-decoration,

yarn.lock

@@ -607,7 +607,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.0.2":
+"@radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -2025,17 +2025,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"class-variance-authority@npm:0.6.0":
-  version: 0.6.0
-  resolution: "class-variance-authority@npm:0.6.0"
+"class-variance-authority@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "class-variance-authority@npm:0.6.1"
   dependencies:
     clsx: 1.2.1
-  peerDependencies:
-    typescript: ">= 4.5.5 < 6"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: c86fe9d208b33afbd82e3349739f8be9bfceb17e78f2ee689039029de016c5547883b41ac8ab69630f433cf4d4c9159a3c82072e9d8b7225f63cd31c01d6c9b8
+  checksum: 9be6b27998489c7af4535399ff00289c3347756209bb5405ca115e51bef7159f057f02532a53132299a3e26925552894ff1018bd8cc10807130b063039e82d8d
   languageName: node
   linkType: hard
 
@@ -2092,7 +2087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:1.2.1":
+"clsx@npm:1.2.1, clsx@npm:^1.2.1":
   version: 1.2.1
   resolution: "clsx@npm:1.2.1"
   checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
@@ -3793,7 +3788,7 @@ __metadata:
     "@mdx-js/loader": 2.3.0
     "@mdx-js/react": 2.3.0
     "@next/mdx": 13.2.4
-    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-slot": ^1.0.2
     "@tailwindcss/forms": 0.5.3
     "@tailwindcss/line-clamp": 0.4.2
     "@tailwindcss/typography": 0.5.9
@@ -3806,15 +3801,16 @@ __metadata:
     "@typescript-eslint/parser": 5.0.0
     autoprefixer: 10.4.14
     axios: 1.3.4
-    class-variance-authority: 0.6.0
-    clsx: 1.2.1
+    class-variance-authority: ^0.6.1
+    clsx: ^1.2.1
     cypress: 12.7.0
     eslint: 8.32.0
     eslint-config-next: 13.2.3
     eslint-config-prettier: 8.6.0
     eslint-plugin-prettier: 4.2.1
     framer-motion: 10.12.16
     husky: 6.0.0
+    lucide-react: ^0.257.0
     mapbox-gl: "npm:[email protected]"
     maplibre-gl: 2.1.9
     next: 13.2.4
@@ -3828,9 +3824,9 @@ __metadata:
     svg-sprite-loader: 6.0.11
     svgo: 3.0.2
     svgo-loader: 3.0.3
-    tailwind-merge: 1.13.1
+    tailwind-merge: ^1.13.2
     tailwindcss: 3.2.7
-    tailwindcss-animate: 1.0.6
+    tailwindcss-animate: ^1.0.6
     typescript: 4.9.4
     use-debounce: 9.0.4
   languageName: unknown
@@ -5369,6 +5365,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.257.0":
+  version: 0.257.0
+  resolution: "lucide-react@npm:0.257.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: b3ce7c5a9752646221353f71293ddb839a82c11abd6564082aec40891f496f390d50e330956bc1f1d6f2fc9f9baff8a6a69af2ff52cf094b62d99c5886d3ab52
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^11.0.3":
   version: 11.1.1
   resolution: "make-fetch-happen@npm:11.1.1"
@@ -8194,14 +8199,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-merge@npm:1.13.1":
-  version: 1.13.1
-  resolution: "tailwind-merge@npm:1.13.1"
-  checksum: 25ae5100b322a5baa6b7f09b34d807d99e3405816d6d32f42b6223de5cd9c438d5742b78b94a9be9a5c93701f427a10bf399ca144dc5a2f8092ce181c26adcb1
+"tailwind-merge@npm:^1.13.2":
+  version: 1.13.2
+  resolution: "tailwind-merge@npm:1.13.2"
+  checksum: 8f9de3bd1e6271f5980f863ab85e0103f062bf84d814d3188bf6870af7eb43725ea40493ef0693dedd652b668cbdfcd6544235b16b70d438ed20bca6118a9066
   languageName: node
   linkType: hard
 
-"tailwindcss-animate@npm:1.0.6":
+"tailwindcss-animate@npm:^1.0.6":
   version: 1.0.6
   resolution: "tailwindcss-animate@npm:1.0.6"
   peerDependencies: