From 1aef7feefa60d86ed48bc9b7344c9a2f62132e99 Mon Sep 17 00:00:00 2001
From: Tony <AntonioRM81@Gmail.com>
Date: Sat, 29 Mar 2025 00:52:25 +0100
Subject: [PATCH 1/4] Fixed animation on Welcome page and used Tailwind 3
 compatible classes

---
 resources/js/pages/Welcome.vue | 84 +++++++++++++++++-----------------
 tailwind.config.js             |  7 ++-
 2 files changed, 48 insertions(+), 43 deletions(-)
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index d9b033c3..15a9709c 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -1,22 +1,29 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
+import { Head, Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const page = usePage();
+const auth = computed(() => page.props.auth);
 </script>
 
 <template>
     <Head title="Welcome">
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <link rel="preconnect" href="https://fonts.bunny.net" />
+        <link href="https://fonts.bunny.net/css?family=inter:400,500" rel="stylesheet" />
     </Head>
+
     <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
         <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
-                <Link
-                    v-if="$page.props.auth.user"
-                    :href="route('dashboard')"
-                    class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
-                >
-                    Dashboard
-                </Link>
+                <template v-if="auth.user">
+                    <Link
+                        :href="route('dashboard')"
+                        class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
+                    >
+                        Dashboard
+                    </Link>
+                </template>
+
                 <template v-else>
                     <Link
                         :href="route('login')"
@@ -33,7 +40,8 @@ import { Head, Link } from '@inertiajs/vue3';
                 </template>
             </nav>
         </header>
-        <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
+
+        <div class="duration-700 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
             <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
                 <div
                     class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
@@ -53,17 +61,16 @@ import { Head, Link } from '@inertiajs/vue3';
                                     <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
                                 </span>
                             </span>
-                            <span>
-                                Read the
-                                <a
+                            <span
+                                >Read the<a
                                     href="https://laravel.com/docs"
                                     target="_blank"
                                     class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
                                 >
                                     <span>Documentation</span>
                                     <svg
-                                        width="{10}"
-                                        height="{11}"
+                                        width="10"
+                                        height="11"
                                         viewBox="0 0 10 11"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg"
@@ -84,17 +91,16 @@ import { Head, Link } from '@inertiajs/vue3';
                                     <span class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
                                 </span>
                             </span>
-                            <span>
-                                Watch video tutorials at
-                                <a
+                            <span
+                                >Watch video tutorials at<a
                                     href="https://laracasts.com"
                                     target="_blank"
                                     class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
                                 >
                                     <span>Laracasts</span>
                                     <svg
-                                        width="{10}"
-                                        height="{11}"
+                                        width="10"
+                                        height="11"
                                         viewBox="0 0 10 11"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg"
@@ -122,7 +128,7 @@ import { Head, Link } from '@inertiajs/vue3';
                     class="relative -mb-px aspect-[335/376] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
                 >
                     <svg
-                        class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
+                        class="duration-700 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
                         viewBox="0 0 438 104"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -153,7 +159,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -192,8 +198,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -215,8 +220,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            :style="{ mixBlendMode: 'plus-darker' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-plus-darker transition-all delay-300"
                         >
                             <path
                                 d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z"
@@ -237,7 +241,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -438,8 +442,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -453,8 +456,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            :style="{ mixBlendMode: 'hard-light' }"
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -473,7 +475,7 @@ import { Head, Link } from '@inertiajs/vue3';
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -512,8 +514,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
-                            :style="{ mixBlendMode: 'hard-light' }"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -534,7 +535,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -546,7 +547,7 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
@@ -747,8 +748,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
-                            :style="{ mixBlendMode: 'hard-light' }"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -762,8 +762,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
-                            :style="{ mixBlendMode: 'hard-light' }"
+                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -782,6 +781,7 @@ import { Head, Link } from '@inertiajs/vue3';
                 </div>
             </main>
         </div>
-        <div class="h-14.5 hidden lg:block"></div>
+
+        <div class="hidden h-[3.625rem] lg:block"></div>
     </div>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index d444031a..974b34f5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -73,5 +73,10 @@ export default {
             },
         },
     },
-    plugins: [require('tailwindcss-animate')],
+    plugins: [
+        require('tailwindcss-animate'),
+        function ({ addVariant }) {
+            addVariant('starting', '@starting-style');
+        },
+    ],
 };

From d28b24fa78af08557c48aea07cd6ba0c5e691f5d Mon Sep 17 00:00:00 2001
From: Tony <AntonioRM81@Gmail.com>
Date: Tue, 1 Apr 2025 23:52:49 +0200
Subject: [PATCH 2/4] Updated to Tailwind 4

---
 components.json                               |    4 +-
 package-lock.json                             | 1365 ++++++-----------
 package.json                                  |   12 +-
 resources/css/app.css                         |  219 ++-
 resources/js/components/AppSidebarHeader.vue  |    2 +-
 resources/js/components/AppearanceTabs.vue    |    2 +-
 resources/js/components/NavUser.vue           |    2 +-
 resources/js/components/TextLink.vue          |    2 +-
 resources/js/components/ui/button/index.ts    |   10 +-
 resources/js/components/ui/card/Card.vue      |    2 +-
 .../js/components/ui/checkbox/Checkbox.vue    |    2 +-
 .../js/components/ui/dialog/DialogContent.vue |    2 +-
 .../DropdownMenuCheckboxItem.vue              |    2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |    2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |    2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |    2 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |    2 +-
 resources/js/components/ui/input/Input.vue    |    2 +-
 .../NavigationMenuIndicator.vue               |    2 +-
 .../NavigationMenuViewport.vue                |    2 +-
 .../js/components/ui/navigation-menu/index.ts |    2 +-
 .../js/components/ui/sheet/SheetContent.vue   |    2 +-
 .../js/components/ui/sidebar/Sidebar.vue      |   18 +-
 .../ui/sidebar/SidebarGroupAction.vue         |    4 +-
 .../ui/sidebar/SidebarGroupLabel.vue          |    2 +-
 .../js/components/ui/sidebar/SidebarInset.vue |    2 +-
 .../ui/sidebar/SidebarMenuAction.vue          |    4 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |    2 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |    2 +-
 .../components/ui/sidebar/SidebarProvider.vue |    2 +-
 .../js/components/ui/sidebar/SidebarRail.vue  |    4 +-
 resources/js/components/ui/sidebar/index.ts   |    4 +-
 resources/js/lib/utils.ts                     |    6 +-
 resources/js/pages/Welcome.vue                |   32 +-
 resources/js/pages/settings/Profile.vue       |    2 +-
 vite.config.ts                                |   11 +-
 36 files changed, 720 insertions(+), 1019 deletions(-)

diff --git a/components.json b/components.json
index 90f5d46d..9392be5f 100644
--- a/components.json
+++ b/components.json
@@ -1,9 +1,9 @@
 {
   "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "typescript": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "resources/css/app.css",
     "baseColor": "neutral",
     "cssVariables": true,
diff --git a/package-lock.json b/package-lock.json
index 524714a8..a2f37460 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@inertiajs/vue3": "^2.0.0-beta.3",
+                "@tailwindcss/vite": "^4.1.0",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vueuse/core": "^12.0.0",
                 "autoprefixer": "^10.4.20",
@@ -13,12 +14,11 @@
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
                 "laravel-vite-plugin": "^1.0",
-                "lucide": "^0.468.0",
-                "lucide-vue-next": "^0.468.0",
+                "lucide-vue-next": "^0.486.0",
                 "radix-vue": "^1.9.11",
-                "tailwind-merge": "^2.5.5",
-                "tailwindcss": "^3.4.1",
-                "tailwindcss-animate": "^1.0.7",
+                "tailwind-merge": "^3.1.0",
+                "tailwindcss": "^4.1.0",
+                "tw-animate-css": "^1.2.5",
                 "typescript": "^5.2.2",
                 "vite": "^6.2.0",
                 "vue": "^3.5.13",
@@ -33,7 +33,7 @@
                 "eslint-plugin-vue": "^9.32.0",
                 "prettier": "^3.4.2",
                 "prettier-plugin-organize-imports": "^4.1.0",
-                "prettier-plugin-tailwindcss": "^0.6.9",
+                "prettier-plugin-tailwindcss": "^0.6.11",
                 "typescript-eslint": "^8.23.0",
                 "vue-tsc": "^2.2.4"
             },
@@ -43,18 +43,6 @@
                 "lightningcss-linux-x64-gnu": "^1.29.1"
             }
         },
-        "node_modules/@alloc/quick-lru": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-            "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/@babel/helper-string-parser": {
             "version": "7.25.9",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
@@ -835,75 +823,17 @@
                 "@swc/helpers": "^0.5.0"
             }
         },
-        "node_modules/@isaacs/cliui": {
-            "version": "8.0.2",
-            "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-            "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-            "license": "ISC",
-            "dependencies": {
-                "string-width": "^5.1.2",
-                "string-width-cjs": "npm:string-width@^4.2.0",
-                "strip-ansi": "^7.0.1",
-                "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-                "wrap-ansi": "^8.1.0",
-                "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-            },
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@jridgewell/gen-mapping": {
-            "version": "0.3.8",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-            "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-            "license": "MIT",
-            "dependencies": {
-                "@jridgewell/set-array": "^1.2.1",
-                "@jridgewell/sourcemap-codec": "^1.4.10",
-                "@jridgewell/trace-mapping": "^0.3.24"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
-        "node_modules/@jridgewell/resolve-uri": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
-        "node_modules/@jridgewell/set-array": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-            "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
             "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
             "license": "MIT"
         },
-        "node_modules/@jridgewell/trace-mapping": {
-            "version": "0.3.25",
-            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-            "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-            "license": "MIT",
-            "dependencies": {
-                "@jridgewell/resolve-uri": "^3.1.0",
-                "@jridgewell/sourcemap-codec": "^1.4.14"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
             "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.stat": "2.0.5",
@@ -917,6 +847,7 @@
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
             "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 8"
@@ -926,6 +857,7 @@
             "version": "1.2.8",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
             "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.scandir": "2.1.5",
@@ -935,16 +867,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/@pkgjs/parseargs": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-            "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-            "license": "MIT",
-            "optional": true,
-            "engines": {
-                "node": ">=14"
-            }
-        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.34.8",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
@@ -1201,10 +1123,172 @@
                 "tslib": "^2.8.0"
             }
         },
+        "node_modules/@tailwindcss/node": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.0.tgz",
+            "integrity": "sha512-mfgxGxFaxbsUbaGwKIAQXUSm7Qoojw53FftpoKwo4ANwr9wnDaByz4vi1gMti/xfJvmQ5lzA1DvPiX5yCHtBkQ==",
+            "license": "MIT",
+            "dependencies": {
+                "enhanced-resolve": "^5.18.1",
+                "jiti": "^2.4.2",
+                "lightningcss": "1.29.2",
+                "tailwindcss": "4.1.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.0.tgz",
+            "integrity": "sha512-A33oyZKpPFH08d7xkl13Dc8OTsbPhsuls0z9gUCxIHvn8c1BsUACddQxL6HwaeJR1fSYyXZUw8bdWcD8bVawpQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            },
+            "optionalDependencies": {
+                "@tailwindcss/oxide-android-arm64": "4.1.0",
+                "@tailwindcss/oxide-darwin-arm64": "4.1.0",
+                "@tailwindcss/oxide-darwin-x64": "4.1.0",
+                "@tailwindcss/oxide-freebsd-x64": "4.1.0",
+                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.0",
+                "@tailwindcss/oxide-linux-arm64-gnu": "4.1.0",
+                "@tailwindcss/oxide-linux-arm64-musl": "4.1.0",
+                "@tailwindcss/oxide-linux-x64-gnu": "4.1.0",
+                "@tailwindcss/oxide-linux-x64-musl": "4.1.0",
+                "@tailwindcss/oxide-win32-arm64-msvc": "4.1.0",
+                "@tailwindcss/oxide-win32-x64-msvc": "4.1.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-android-arm64": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.0.tgz",
+            "integrity": "sha512-UredFljuHey2Kh5qyYfQVBr0Xfq70ZE5Df6i5IubNYQGs2JXXT4VL0SIUjwzHx5W9T6t7dT7banunlV6lthGPQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-arm64": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.0.tgz",
+            "integrity": "sha512-QHQ/46lRVwH9zEBNiRk8AJ3Af4pMq6DuZAI//q323qrPOXjsRdrhLsH9LUO3mqBfHr5EZNUxN3Am5vpO89sntw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-x64": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.0.tgz",
+            "integrity": "sha512-lEMgYHCvQQ6x2KOZ4FwnPprwfnc+UnjzwXRqEYIhB/NlYvXQD1QMf7oKEDRqy94DiZaYox9ZRfG2YJOBgM0UkA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-freebsd-x64": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.0.tgz",
+            "integrity": "sha512-9fdImTc+2lA5yHqJ61oeTXfCtzylNOzJVFhyWwVQAJESJJbVCPnj6f+b+Zf/AYAdKQfS6FCThbPEahkQrDCgLQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.0.tgz",
+            "integrity": "sha512-HB0bTkUOuTLLSdadyRhKE9yps4/ZBjrojbHTPMSvvf/8yBLZRPpWb+A6IgW5R+2A2AL4KhVPgLwWfoXsErxJFg==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.0.tgz",
+            "integrity": "sha512-+QtYCwvKLjC46h6RikKkpELJWrpiMMtgyK0aaqhwPLEx1icGgIhwz8dqrkAiqbFRE0KiRrE2aenhYoEkplyRmA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.0.tgz",
+            "integrity": "sha512-nApadFKM9GauzuPZPlt6TKfELavMHqJ0gVd+GYkYBTwr2t9KhgCAb2sKiFDDIhs1a7gOjsU7P1lEauv3iKFp+Q==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
         "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-            "version": "4.0.9",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.9.tgz",
-            "integrity": "sha512-v0D8WqI/c3WpWH1kq/HP0J899ATLdGZmENa2/emmNjubT0sWtEke9W9+wXeEoACuGAhF9i3PO5MeyditpDCiWQ==",
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.0.tgz",
+            "integrity": "sha512-cp0Rf9Wit2kZHhrV8HIoDFD8dxU2+ZTCFCFbDj3a07pGyyPwLCJm5H5VipKXgYrBaLmlYu73ERidW0S5sdEXEg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.0.tgz",
+            "integrity": "sha512-4/wf42XWBJGXsOS6BhgPhdQbg/qyfdZ1nZvTL9sJoxYN+Ah+cfY5Dd7R0smzI8hmgCRt3TD1lYb72ChTyIA59w==",
             "cpu": [
                 "x64"
             ],
@@ -1217,6 +1301,52 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.0.tgz",
+            "integrity": "sha512-caXJJ0G6NwGbcoxEYdH3MZYN84C3PldaMdAEPMU6bjJXURQlKdSlQ/Ecis7/nSgBkMkicZyhqWmb36Tw/BFSIw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.0.tgz",
+            "integrity": "sha512-ZHXRXRxB7HBmkUE8U13nmkGGYfR1I2vsuhiYjeDDUFIYpk1BL6caU8hvzkSlL/X5CAQNdIUUJRGom5I0ZyfJOA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@tailwindcss/vite": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.0.tgz",
+            "integrity": "sha512-IszG0h/o8jOGheY0f7v41a9qyDymZ5eU8qm4koTypMKagBhaQA06Keip13wch6sz7rG3cvIG7A3/ytdfRh2BUw==",
+            "license": "MIT",
+            "dependencies": {
+                "@tailwindcss/node": "4.1.0",
+                "@tailwindcss/oxide": "4.1.0",
+                "tailwindcss": "4.1.0"
+            },
+            "peerDependencies": {
+                "vite": "^5.2.0 || ^6"
+            }
+        },
         "node_modules/@tanstack/virtual-core": {
             "version": "3.13.2",
             "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.2.tgz",
@@ -1758,18 +1888,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/ansi-regex": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-            "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-            }
-        },
         "node_modules/ansi-styles": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1785,31 +1903,6 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
-        "node_modules/any-promise": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-            "license": "MIT"
-        },
-        "node_modules/anymatch": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-            "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-            "license": "ISC",
-            "dependencies": {
-                "normalize-path": "^3.0.0",
-                "picomatch": "^2.0.4"
-            },
-            "engines": {
-                "node": ">= 8"
-            }
-        },
-        "node_modules/arg": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-            "license": "MIT"
-        },
         "node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1887,20 +1980,9 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true,
             "license": "MIT"
         },
-        "node_modules/binary-extensions": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-            "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -1912,6 +1994,7 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
             "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0"
@@ -1921,6 +2004,7 @@
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
             "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "fill-range": "^7.1.1"
@@ -2000,15 +2084,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/camelcase-css": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001701",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001701.tgz",
@@ -2057,42 +2132,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/chokidar": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-            "license": "MIT",
-            "dependencies": {
-                "anymatch": "~3.1.2",
-                "braces": "~3.0.2",
-                "glob-parent": "~5.1.2",
-                "is-binary-path": "~2.1.0",
-                "is-glob": "~4.0.1",
-                "normalize-path": "~3.0.0",
-                "readdirp": "~3.6.0"
-            },
-            "engines": {
-                "node": ">= 8.10.0"
-            },
-            "funding": {
-                "url": "https://paulmillr.com/funding/"
-            },
-            "optionalDependencies": {
-                "fsevents": "~2.3.2"
-            }
-        },
-        "node_modules/chokidar/node_modules/glob-parent": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "license": "ISC",
-            "dependencies": {
-                "is-glob": "^4.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/class-variance-authority": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -2216,15 +2255,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/commander": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-            "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2261,6 +2291,7 @@
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "path-key": "^3.1.0",
@@ -2275,6 +2306,7 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
             "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
             "license": "MIT",
             "bin": {
                 "cssesc": "bin/cssesc"
@@ -2345,17 +2377,14 @@
                 "node": ">=0.4.0"
             }
         },
-        "node_modules/didyoumean": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-            "license": "Apache-2.0"
-        },
-        "node_modules/dlv": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-            "license": "MIT"
+        "node_modules/detect-libc": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+            "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=8"
+            }
         },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
@@ -2371,23 +2400,24 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/eastasianwidth": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-            "license": "MIT"
-        },
         "node_modules/electron-to-chromium": {
             "version": "1.5.109",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.109.tgz",
             "integrity": "sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==",
             "license": "ISC"
         },
-        "node_modules/emoji-regex": {
-            "version": "9.2.2",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-            "license": "MIT"
+        "node_modules/enhanced-resolve": {
+            "version": "5.18.1",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+            "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.4",
+                "tapable": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
         },
         "node_modules/entities": {
             "version": "4.5.0",
@@ -2780,6 +2810,7 @@
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
             "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.stat": "^2.0.2",
@@ -2796,6 +2827,7 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.1"
@@ -2822,6 +2854,7 @@
             "version": "1.19.1",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
             "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "reusify": "^1.0.4"
@@ -2844,6 +2877,7 @@
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
             "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "to-regex-range": "^5.0.1"
@@ -2910,22 +2944,6 @@
                 }
             }
         },
-        "node_modules/foreground-child": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-            "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-            "license": "ISC",
-            "dependencies": {
-                "cross-spawn": "^7.0.6",
-                "signal-exit": "^4.0.1"
-            },
-            "engines": {
-                "node": ">=14"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
         "node_modules/form-data": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
@@ -3023,30 +3041,11 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/glob": {
-            "version": "10.4.5",
-            "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-            "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-            "license": "ISC",
-            "dependencies": {
-                "foreground-child": "^3.1.0",
-                "jackspeak": "^3.1.2",
-                "minimatch": "^9.0.4",
-                "minipass": "^7.1.2",
-                "package-json-from-dist": "^1.0.0",
-                "path-scurry": "^1.11.1"
-            },
-            "bin": {
-                "glob": "dist/esm/bin.mjs"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
         "node_modules/glob-parent": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.3"
@@ -3080,6 +3079,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/graceful-fs": {
+            "version": "4.2.11",
+            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "license": "ISC"
+        },
         "node_modules/graphemer": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3182,37 +3187,11 @@
                 "node": ">=0.8.19"
             }
         },
-        "node_modules/is-binary-path": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-            "license": "MIT",
-            "dependencies": {
-                "binary-extensions": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/is-core-module": {
-            "version": "2.16.1",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-            "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-            "license": "MIT",
-            "dependencies": {
-                "hasown": "^2.0.2"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/is-extglob": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
             "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -3231,6 +3210,7 @@
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-extglob": "^2.1.1"
@@ -3243,6 +3223,7 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.12.0"
@@ -3252,30 +3233,16 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
             "license": "ISC"
         },
-        "node_modules/jackspeak": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-            "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "@isaacs/cliui": "^8.0.2"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            },
-            "optionalDependencies": {
-                "@pkgjs/parseargs": "^0.11.0"
-            }
-        },
         "node_modules/jiti": {
-            "version": "1.21.7",
-            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-            "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+            "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
             "license": "MIT",
             "bin": {
-                "jiti": "bin/jiti.js"
+                "jiti": "lib/jiti-cli.mjs"
             }
         },
         "node_modules/js-yaml": {
@@ -3355,10 +3322,158 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/lightningcss": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+            "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+            "license": "MPL-2.0",
+            "dependencies": {
+                "detect-libc": "^2.0.3"
+            },
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            },
+            "optionalDependencies": {
+                "lightningcss-darwin-arm64": "1.29.2",
+                "lightningcss-darwin-x64": "1.29.2",
+                "lightningcss-freebsd-x64": "1.29.2",
+                "lightningcss-linux-arm-gnueabihf": "1.29.2",
+                "lightningcss-linux-arm64-gnu": "1.29.2",
+                "lightningcss-linux-arm64-musl": "1.29.2",
+                "lightningcss-linux-x64-gnu": "1.29.2",
+                "lightningcss-linux-x64-musl": "1.29.2",
+                "lightningcss-win32-arm64-msvc": "1.29.2",
+                "lightningcss-win32-x64-msvc": "1.29.2"
+            }
+        },
+        "node_modules/lightningcss-darwin-arm64": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+            "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-darwin-x64": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+            "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-freebsd-x64": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+            "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm-gnueabihf": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+            "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm64-gnu": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+            "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-linux-arm64-musl": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+            "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
         "node_modules/lightningcss-linux-x64-gnu": {
-            "version": "1.29.1",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.1.tgz",
-            "integrity": "sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==",
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+            "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
             "cpu": [
                 "x64"
             ],
@@ -3375,23 +3490,65 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
-        "node_modules/lilconfig": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-            "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-            "license": "MIT",
+        "node_modules/lightningcss-linux-x64-musl": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+            "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
             "engines": {
-                "node": ">=14"
+                "node": ">= 12.0.0"
             },
             "funding": {
-                "url": "https://github.com/sponsors/antonk52"
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
             }
         },
-        "node_modules/lines-and-columns": {
-            "version": "1.2.4",
-            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-            "license": "MIT"
+        "node_modules/lightningcss-win32-arm64-msvc": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+            "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/lightningcss-win32-x64-msvc": {
+            "version": "1.29.2",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+            "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
         },
         "node_modules/locate-path": {
             "version": "6.0.0",
@@ -3435,22 +3592,10 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/lru-cache": {
-            "version": "10.4.3",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-            "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-            "license": "ISC"
-        },
-        "node_modules/lucide": {
-            "version": "0.468.0",
-            "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.468.0.tgz",
-            "integrity": "sha512-UFbgwji/ZnAV7iTTE4jujyTV7J95AILKyATDUrqOJrMcUGfXvGjw3c1mcuHZUX2oJfkrAGU9KoxkrLQk2jjtiA==",
-            "license": "ISC"
-        },
         "node_modules/lucide-vue-next": {
-            "version": "0.468.0",
-            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.468.0.tgz",
-            "integrity": "sha512-quV/6T8YB1XK0VOEnebg3Byd8Rsan5/m95cvjnuHV4vcS3qEnLAybkrSh0hk3ppavx+V7R1PjNW+mGDvcBdz4A==",
+            "version": "0.486.0",
+            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.486.0.tgz",
+            "integrity": "sha512-Iw6KpUbxBcSLSsTQr69uxUfbe9mJOMmT7XK0MitDvr1P69AWVElDDl7/07YJMBzAG+xZxy90SBzKe8V6HS32UA==",
             "license": "ISC",
             "peerDependencies": {
                 "vue": ">=3.0.1"
@@ -3478,6 +3623,7 @@
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
             "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 8"
@@ -3487,6 +3633,7 @@
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
             "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "braces": "^3.0.3",
@@ -3521,6 +3668,7 @@
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
             "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^2.0.1"
@@ -3532,15 +3680,6 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
-        "node_modules/minipass": {
-            "version": "7.1.2",
-            "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-            "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-            "license": "ISC",
-            "engines": {
-                "node": ">=16 || 14 >=14.17"
-            }
-        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3555,17 +3694,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/mz": {
-            "version": "2.7.0",
-            "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-            "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-            "license": "MIT",
-            "dependencies": {
-                "any-promise": "^1.0.0",
-                "object-assign": "^4.0.1",
-                "thenify-all": "^1.0.0"
-            }
-        },
         "node_modules/nanoid": {
             "version": "3.3.8",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -3597,15 +3725,6 @@
             "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
             "license": "MIT"
         },
-        "node_modules/normalize-path": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/normalize-range": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -3628,24 +3747,6 @@
                 "url": "https://github.com/fb55/nth-check?sponsor=1"
             }
         },
-        "node_modules/object-assign": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/object-hash": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-            "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/object-inspect": {
             "version": "1.13.4",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -3708,12 +3809,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/package-json-from-dist": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-            "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-            "license": "BlueOak-1.0.0"
-        },
         "node_modules/parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3748,33 +3843,12 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
             "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
         },
-        "node_modules/path-parse": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "license": "MIT"
-        },
-        "node_modules/path-scurry": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-            "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-            "license": "BlueOak-1.0.0",
-            "dependencies": {
-                "lru-cache": "^10.2.0",
-                "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-            },
-            "engines": {
-                "node": ">=16 || 14 >=14.18"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3793,24 +3867,6 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
-        "node_modules/pify": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-            "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/pirates": {
-            "version": "4.0.6",
-            "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-            "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/postcss": {
             "version": "8.5.3",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -3839,106 +3895,11 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
-        "node_modules/postcss-import": {
-            "version": "15.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-            "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-            "license": "MIT",
-            "dependencies": {
-                "postcss-value-parser": "^4.0.0",
-                "read-cache": "^1.0.0",
-                "resolve": "^1.1.7"
-            },
-            "engines": {
-                "node": ">=14.0.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.0.0"
-            }
-        },
-        "node_modules/postcss-js": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-            "license": "MIT",
-            "dependencies": {
-                "camelcase-css": "^2.0.1"
-            },
-            "engines": {
-                "node": "^12 || ^14 || >= 16"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            },
-            "peerDependencies": {
-                "postcss": "^8.4.21"
-            }
-        },
-        "node_modules/postcss-load-config": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-            "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "dependencies": {
-                "lilconfig": "^3.0.0",
-                "yaml": "^2.3.4"
-            },
-            "engines": {
-                "node": ">= 14"
-            },
-            "peerDependencies": {
-                "postcss": ">=8.0.9",
-                "ts-node": ">=9.0.0"
-            },
-            "peerDependenciesMeta": {
-                "postcss": {
-                    "optional": true
-                },
-                "ts-node": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/postcss-nested": {
-            "version": "6.2.0",
-            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-            "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "dependencies": {
-                "postcss-selector-parser": "^6.1.1"
-            },
-            "engines": {
-                "node": ">=12.0"
-            },
-            "peerDependencies": {
-                "postcss": "^8.2.14"
-            }
-        },
         "node_modules/postcss-selector-parser": {
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -4111,6 +4072,7 @@
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
             "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -4255,27 +4217,6 @@
                 "node": "^18 || >=20"
             }
         },
-        "node_modules/read-cache": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-            "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-            "license": "MIT",
-            "dependencies": {
-                "pify": "^2.3.0"
-            }
-        },
-        "node_modules/readdirp": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-            "license": "MIT",
-            "dependencies": {
-                "picomatch": "^2.2.1"
-            },
-            "engines": {
-                "node": ">=8.10.0"
-            }
-        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -4285,26 +4226,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/resolve": {
-            "version": "1.22.10",
-            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-            "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-            "license": "MIT",
-            "dependencies": {
-                "is-core-module": "^2.16.0",
-                "path-parse": "^1.0.7",
-                "supports-preserve-symlinks-flag": "^1.0.0"
-            },
-            "bin": {
-                "resolve": "bin/resolve"
-            },
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/resolve-from": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4319,6 +4240,7 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
             "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "iojs": ">=1.0.0",
@@ -4380,6 +4302,7 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
             "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -4425,6 +4348,7 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "shebang-regex": "^3.0.0"
@@ -4437,6 +4361,7 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -4526,18 +4451,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/signal-exit": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-            "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-            "license": "ISC",
-            "engines": {
-                "node": ">=14"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/isaacs"
-            }
-        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4547,102 +4460,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/string-width": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-            "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-            "license": "MIT",
-            "dependencies": {
-                "eastasianwidth": "^0.2.0",
-                "emoji-regex": "^9.2.2",
-                "strip-ansi": "^7.0.1"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/string-width-cjs": {
-            "name": "string-width",
-            "version": "4.2.3",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "license": "MIT",
-            "dependencies": {
-                "emoji-regex": "^8.0.0",
-                "is-fullwidth-code-point": "^3.0.0",
-                "strip-ansi": "^6.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/string-width-cjs/node_modules/ansi-regex": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/string-width-cjs/node_modules/emoji-regex": {
-            "version": "8.0.0",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-            "license": "MIT"
-        },
-        "node_modules/string-width-cjs/node_modules/strip-ansi": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-regex": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/strip-ansi": {
-            "version": "7.1.0",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-            "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-regex": "^6.0.1"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-            }
-        },
-        "node_modules/strip-ansi-cjs": {
-            "name": "strip-ansi",
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-regex": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/strip-json-comments": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4656,28 +4473,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/sucrase": {
-            "version": "3.35.0",
-            "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-            "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-            "license": "MIT",
-            "dependencies": {
-                "@jridgewell/gen-mapping": "^0.3.2",
-                "commander": "^4.0.0",
-                "glob": "^10.3.10",
-                "lines-and-columns": "^1.1.6",
-                "mz": "^2.7.0",
-                "pirates": "^4.0.1",
-                "ts-interface-checker": "^0.1.9"
-            },
-            "bin": {
-                "sucrase": "bin/sucrase",
-                "sucrase-node": "bin/sucrase-node"
-            },
-            "engines": {
-                "node": ">=16 || 14 >=14.17"
-            }
-        },
         "node_modules/supports-color": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -4693,22 +4488,10 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
-        "node_modules/supports-preserve-symlinks-flag": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 0.4"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/tailwind-merge": {
-            "version": "2.6.0",
-            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
-            "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.1.0.tgz",
+            "integrity": "sha512-aV27Oj8B7U/tAOMhJsSGdWqelfmudnGMdXIlMnk1JfsjwSjts6o8HyfN7SFH3EztzH4YH8kk6GbLTHzITJO39Q==",
             "license": "MIT",
             "funding": {
                 "type": "github",
@@ -4716,76 +4499,25 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.4.17",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-            "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-            "license": "MIT",
-            "dependencies": {
-                "@alloc/quick-lru": "^5.2.0",
-                "arg": "^5.0.2",
-                "chokidar": "^3.6.0",
-                "didyoumean": "^1.2.2",
-                "dlv": "^1.1.3",
-                "fast-glob": "^3.3.2",
-                "glob-parent": "^6.0.2",
-                "is-glob": "^4.0.3",
-                "jiti": "^1.21.6",
-                "lilconfig": "^3.1.3",
-                "micromatch": "^4.0.8",
-                "normalize-path": "^3.0.0",
-                "object-hash": "^3.0.0",
-                "picocolors": "^1.1.1",
-                "postcss": "^8.4.47",
-                "postcss-import": "^15.1.0",
-                "postcss-js": "^4.0.1",
-                "postcss-load-config": "^4.0.2",
-                "postcss-nested": "^6.2.0",
-                "postcss-selector-parser": "^6.1.2",
-                "resolve": "^1.22.8",
-                "sucrase": "^3.35.0"
-            },
-            "bin": {
-                "tailwind": "lib/cli.js",
-                "tailwindcss": "lib/cli.js"
-            },
-            "engines": {
-                "node": ">=14.0.0"
-            }
-        },
-        "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==",
-            "license": "MIT",
-            "peerDependencies": {
-                "tailwindcss": ">=3.0.0 || insiders"
-            }
-        },
-        "node_modules/thenify": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-            "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-            "license": "MIT",
-            "dependencies": {
-                "any-promise": "^1.0.0"
-            }
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.0.tgz",
+            "integrity": "sha512-vBYstoFnvUZCDxaauNGQQEvJNQgCd1vSMDRYuZZMH1xRRcTboOk1rJrW5yFkEabU9X6Yx1C4LQ+QvPOvQj4Daw==",
+            "license": "MIT"
         },
-        "node_modules/thenify-all": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-            "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+        "node_modules/tapable": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+            "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
             "license": "MIT",
-            "dependencies": {
-                "thenify": ">= 3.1.0 < 4"
-            },
             "engines": {
-                "node": ">=0.8"
+                "node": ">=6"
             }
         },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
             "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-number": "^7.0.0"
@@ -4816,18 +4548,21 @@
                 "typescript": ">=4.8.4"
             }
         },
-        "node_modules/ts-interface-checker": {
-            "version": "0.1.13",
-            "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-            "license": "Apache-2.0"
-        },
         "node_modules/tslib": {
             "version": "2.8.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
             "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
             "license": "0BSD"
         },
+        "node_modules/tw-animate-css": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz",
+            "integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==",
+            "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",
@@ -4941,6 +4676,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/vite": {
@@ -5133,6 +4869,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "isexe": "^2.0.0"
@@ -5154,94 +4891,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/wrap-ansi": {
-            "version": "8.1.0",
-            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-            "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-styles": "^6.1.0",
-                "string-width": "^5.0.1",
-                "strip-ansi": "^7.0.1"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-            }
-        },
-        "node_modules/wrap-ansi-cjs": {
-            "name": "wrap-ansi",
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-styles": "^4.0.0",
-                "string-width": "^4.1.0",
-                "strip-ansi": "^6.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-            }
-        },
-        "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-            "version": "8.0.0",
-            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-            "license": "MIT"
-        },
-        "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-            "version": "4.2.3",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "license": "MIT",
-            "dependencies": {
-                "emoji-regex": "^8.0.0",
-                "is-fullwidth-code-point": "^3.0.0",
-                "strip-ansi": "^6.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-            "version": "6.0.1",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "license": "MIT",
-            "dependencies": {
-                "ansi-regex": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/wrap-ansi/node_modules/ansi-styles": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-            "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-            }
-        },
         "node_modules/xml-name-validator": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -5266,6 +4915,8 @@
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
             "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
             "license": "ISC",
+            "optional": true,
+            "peer": true,
             "bin": {
                 "yaml": "bin.mjs"
             },
diff --git a/package.json b/package.json
index b6b68f3a..52b9cf66 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,13 @@
         "eslint-plugin-vue": "^9.32.0",
         "prettier": "^3.4.2",
         "prettier-plugin-organize-imports": "^4.1.0",
-        "prettier-plugin-tailwindcss": "^0.6.9",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "typescript-eslint": "^8.23.0",
         "vue-tsc": "^2.2.4"
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0-beta.3",
+        "@tailwindcss/vite": "^4.1.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^12.0.0",
         "autoprefixer": "^10.4.20",
@@ -31,12 +32,11 @@
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^1.0",
-        "lucide": "^0.468.0",
-        "lucide-vue-next": "^0.468.0",
+        "lucide-vue-next": "^0.486.0",
         "radix-vue": "^1.9.11",
-        "tailwind-merge": "^2.5.5",
-        "tailwindcss": "^3.4.1",
-        "tailwindcss-animate": "^1.0.7",
+        "tailwind-merge": "^3.1.0",
+        "tailwindcss": "^4.1.0",
+        "tw-animate-css": "^1.2.5",
         "typescript": "^5.2.2",
         "vite": "^6.2.0",
         "vue": "^3.5.13",
diff --git a/resources/css/app.css b/resources/css/app.css
index 874ff630..abb560c9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,92 +1,147 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
 
-body,
-html {
-    --font-sans:
-        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@source '../views';
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --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);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 0 0% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
-        --primary: 0 0% 9%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 0 0% 92.1%;
-        --secondary-foreground: 0 0% 9%;
-        --muted: 0 0% 96.1%;
-        --muted-foreground: 0 0% 45.1%;
-        --accent: 0 0% 96.1%;
-        --accent-foreground: 0 0% 9%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 92.8%;
-        --input: 0 0% 89.8%;
-        --ring: 0 0% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-        --sidebar-background: 0 0% 98%;
-        --sidebar-foreground: 240 5.3% 26.1%;
-        --sidebar-primary: 0 0% 10%;
-        --sidebar-primary-foreground: 0 0% 98%;
-        --sidebar-accent: 0 0% 94%;
-        --sidebar-accent-foreground: 0 0% 30%;
-        --sidebar-border: 0 0% 91%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-accordion-content-height);
     }
+  }
 
-    .dark {
-        --background: 0 0% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 0 0% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 0 0% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 0 0% 9%;
-        --secondary: 0 0% 14.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 0 0% 6.9%;
-        --muted-foreground: 0 0% 63.9%;
-        --accent: 0 0% 14.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 84% 60%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 14.9%;
-        --input: 0 0% 14.9%;
-        --ring: 0 0% 83.1%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-        --sidebar-background: 0 0% 7%;
-        --sidebar-foreground: 0 0% 95.9%;
-        --sidebar-primary: 360, 100%, 100%;
-        --sidebar-primary-foreground: 0 0% 100%;
-        --sidebar-accent: 0 0% 15.9%;
-        --sidebar-accent-foreground: 240 4.8% 95.9%;
-        --sidebar-border: 0 0% 15.9%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height);
+    }
+    to {
+      height: 0;
     }
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
index 1ff2baa7..c6550329 100644
--- a/resources/js/components/AppSidebarHeader.vue
+++ b/resources/js/components/AppSidebarHeader.vue
@@ -10,7 +10,7 @@ defineProps<{
 
 <template>
     <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
+        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
     >
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index f795dd32..d3a0be40 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -26,7 +26,7 @@ const tabs = [
             :class="[
                 'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
                 appearance === value
-                    ? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
+                    ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
                     : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
             ]"
         >
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index 65dff773..71bf613e 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -23,7 +23,7 @@ const { isMobile, state } = useSidebar();
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent 
-                    class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" 
+                    class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" 
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
                     align="end" 
                     :side-offset="4"
diff --git a/resources/js/components/TextLink.vue b/resources/js/components/TextLink.vue
index f1c4a337..8191c7d2 100644
--- a/resources/js/components/TextLink.vue
+++ b/resources/js/components/TextLink.vue
@@ -17,7 +17,7 @@ defineProps<Props>();
         :tabindex="tabindex"
         :method="method"
         :as="as"
-        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:!decoration-current dark:decoration-neutral-500"
+        class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
     >
         <slot />
     </Link>
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
index 1fa3735f..93806a59 100644
--- a/resources/js/components/ui/button/index.ts
+++ b/resources/js/components/ui/button/index.ts
@@ -3,14 +3,14 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
         variants: {
             variant: {
-                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-                destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-                outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+                destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+                outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+                secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
                 ghost: 'hover:bg-accent hover:text-accent-foreground',
                 link: 'text-primary underline-offset-4 hover:underline',
             },
diff --git a/resources/js/components/ui/card/Card.vue b/resources/js/components/ui/card/Card.vue
index d0581cdd..a2ecb061 100644
--- a/resources/js/components/ui/card/Card.vue
+++ b/resources/js/components/ui/card/Card.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)">
+    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-xs', props.class)">
         <slot />
     </div>
 </template>
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
index 74d4c86d..31f2a572 100644
--- a/resources/js/components/ui/checkbox/Checkbox.vue
+++ b/resources/js/components/ui/checkbox/Checkbox.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
-        <Check class="size-3.5 stroke-[3]" />
+        <Check class="size-3.5 stroke-3" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
index 9ee28b75..eb3d0719 100644
--- a/resources/js/components/ui/dialog/DialogContent.vue
+++ b/resources/js/components/ui/dialog/DialogContent.vue
@@ -41,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             <slot />
 
             <DialogClose
-                class="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"
+                class="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 class="h-4 w-4" />
                 <span class="sr-only">Close</span>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 85d5239c..377e8455 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         v-bind="forwarded"
         :class="
             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',
                 props.class,
             )
         "
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
index 76032a0d..49242196 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         v-bind="forwardedProps"
         :class="
             cn(
-                'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+                'relative flex cursor-default select-none items-center gap-2 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 [&>svg]:size-4 [&>svg]:shrink-0',
                 inset && 'pl-8',
                 props.class,
             )
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 468c2f82..668dfe88 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         v-bind="forwarded"
         :class="
             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',
                 props.class,
             )
         "
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 0f89131e..4d53f839 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         v-bind="forwardedProps"
         :class="
             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',
                 props.class,
             )
         "
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 68455eae..a5b58706 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -7,7 +7,7 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-    <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <DropdownMenuTrigger class="outline-hidden" v-bind="forwardedProps">
         <slot />
     </DropdownMenuTrigger>
 </template>
diff --git a/resources/js/components/ui/input/Input.vue b/resources/js/components/ui/input/Input.vue
index 54cdffe5..76d1d5d4 100644
--- a/resources/js/components/ui/input/Input.vue
+++ b/resources/js/components/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
         v-model="modelValue"
         :class="
             cn(
-                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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',
                 props.class,
             )
         "
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
index bbf7eb8b..4b490a04 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <NavigationMenuIndicator
     v-bind="forwardedProps"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+    :class="cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
   >
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuIndicator>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
index 56f53e61..770c3658 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)',
           props.class,
         )
       "
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
index 64c98017..b7daceff 100644
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ b/resources/js/components/ui/navigation-menu/index.ts
@@ -10,5 +10,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
 
 export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50',
 )
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
index 60c9552a..7c3860d9 100644
--- a/resources/js/components/ui/sheet/SheetContent.vue
+++ b/resources/js/components/ui/sheet/SheetContent.vue
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             <slot />
 
             <DialogClose
-                class="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-secondary"
+                class="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-secondary"
             >
                 <X class="h-4 w-4 text-muted-foreground" />
             </DialogClose>
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
index 6a8946d0..ce77eb1d 100644
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ b/resources/js/components/ui/sidebar/Sidebar.vue
@@ -29,7 +29,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 <template>
     <div
         v-if="collapsible === 'none'"
-        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
+        :class="cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', props.class)"
         v-bind="$attrs"
     >
         <slot />
@@ -40,7 +40,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
             data-sidebar="sidebar"
             data-mobile="true"
             :side="side"
-            class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             :style="{
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
             }"
@@ -63,26 +63,26 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
         <div
             :class="
                 cn(
-                    'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+                    'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
                     'group-data-[collapsible=offcanvas]:w-0',
                     'group-data-[side=right]:rotate-180',
                     variant === 'floating' || variant === 'inset'
-                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
                 )
             "
         />
         <div
             :class="
                 cn(
-                    'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+                    'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
                     side === 'left'
                         ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                         : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
                     // Adjust the padding for floating and inset variants.
                     variant === 'floating' || variant === 'inset'
-                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
                     props.class,
                 )
             "
@@ -90,7 +90,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
         >
             <div
                 data-sidebar="sidebar"
-                class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+                class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
             >
                 <slot />
             </div>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupAction.vue b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
index 7a0ce815..8976b79e 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
@@ -18,9 +18,9 @@ const props = defineProps<
         :as-child="asChild"
         :class="
             cn(
-                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
                 // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 after:md:hidden',
+                'after:absolute after:-inset-2 md:after:hidden',
                 'group-data-[collapsible=icon]:hidden',
                 props.class,
             )
diff --git a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
index 02671a88..43bd7b1d 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
@@ -18,7 +18,7 @@ const props = defineProps<
         :as-child="asChild"
         :class="
             cn(
-                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
                 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
                 props.class,
             )
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
index 5e4e530e..6a9e64e4 100644
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
         :class="
             cn(
                 'relative flex min-h-svh flex-1 flex-col bg-background',
-                'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+                'peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
                 props.class,
             )
         "
diff --git a/resources/js/components/ui/sidebar/SidebarMenuAction.vue b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
index e70f8499..4566e561 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
@@ -21,9 +21,9 @@ const props = withDefaults(
         data-sidebar="menu-action"
         :class="
             cn(
-                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
                 // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 after:md:hidden',
+                'after:absolute after:-inset-2 md:after:hidden',
                 'peer-data-[size=sm]/menu-button:top-1',
                 'peer-data-[size=default]/menu-button:top-1.5',
                 'peer-data-[size=lg]/menu-button:top-2.5',
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
index afbeef08..d1113080 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -17,6 +17,6 @@ const width = computed(() => {
     <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
         <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 
-        <Skeleton class="h-4 max-w-[--skeleton-width] flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+        <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
     </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
index 180f01df..1ef32085 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -28,7 +28,7 @@ const props = withDefaults(
         :data-active="isActive"
         :class="
             cn(
-                'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+                'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
                 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
                 size === 'sm' && 'text-xs',
                 size === 'md' && 'text-sm',
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
index a25d2de1..213f53ec 100644
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -81,7 +81,7 @@ provideSidebarContext({
                 '--sidebar-width': SIDEBAR_WIDTH,
                 '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
             }"
-            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-data-[variant=inset]:bg-sidebar', props.class)"
         >
             <slot />
         </div>
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
index 585d7d5a..76f5710f 100644
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ b/resources/js/components/ui/sidebar/SidebarRail.vue
@@ -19,9 +19,9 @@ const { toggleSidebar } = useSidebar();
         :class="
             cn(
                 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+                'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
                 '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
                 '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
                 '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
                 props.class,
diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
index 6ae512d3..bed64a82 100644
--- a/resources/js/components/ui/sidebar/index.ts
+++ b/resources/js/components/ui/sidebar/index.ts
@@ -27,7 +27,7 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue';
 export { useSidebar } from './utils';
 
 export const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -38,7 +38,7 @@ export const sidebarMenuButtonVariants = cva(
             size: {
                 default: 'h-8 text-sm',
                 sm: 'h-7 text-xs',
-                lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+                lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
             },
         },
         defaultVariants: {
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index 3877c89f..bd0c391d 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index 15a9709c..bd9b074a 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -41,7 +41,7 @@ const auth = computed(() => page.props.auth);
             </nav>
         </header>
 
-        <div class="duration-700 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
+        <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
             <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
                 <div
                     class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
@@ -125,10 +125,10 @@ const auth = computed(() => page.props.auth);
                     </ul>
                 </div>
                 <div
-                    class="relative -mb-px aspect-[335/376] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
+                    class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
                 >
                     <svg
-                        class="duration-700 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
+                        class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
                         viewBox="0 0 438 104"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
@@ -159,7 +159,7 @@ const auth = computed(() => page.props.auth);
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -198,7 +198,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -220,7 +220,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-plus-darker transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-plus-darker transition-all delay-300"
                         >
                             <path
                                 d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z"
@@ -241,7 +241,7 @@ const auth = computed(() => page.props.auth);
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#1B1B18"
@@ -442,7 +442,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -456,7 +456,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -475,7 +475,7 @@ const auth = computed(() => page.props.auth);
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"
                     >
-                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z"
                                 fill="black"
@@ -514,7 +514,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
@@ -535,7 +535,7 @@ const auth = computed(() => page.props.auth);
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z"
                                 stroke="#FF750F"
@@ -547,7 +547,7 @@ const auth = computed(() => page.props.auth);
                                 stroke-width="1"
                             />
                         </g>
-                        <g class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
+                        <g class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300">
                             <path
                                 d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z"
                                 stroke="#FF750F"
@@ -748,7 +748,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z"
@@ -762,7 +762,7 @@ const auth = computed(() => page.props.auth);
                             />
                         </g>
                         <g
-                            class="duration-700 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
+                            class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 mix-blend-hard-light transition-all delay-300"
                         >
                             <path
                                 d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z"
@@ -782,6 +782,6 @@ const auth = computed(() => page.props.auth);
             </main>
         </div>
 
-        <div class="hidden h-[3.625rem] lg:block"></div>
+        <div class="hidden h-14.5 lg:block"></div>
     </div>
 </template>
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index b198b60b..a1028f6f 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -76,7 +76,7 @@ const submit = () => {
                                 :href="route('verification.send')"
                                 method="post"
                                 as="button"
-                                class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:!decoration-current dark:decoration-neutral-500"
+                                class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
                             >
                                 Click here to resend the verification email.
                             </Link>
diff --git a/vite.config.ts b/vite.config.ts
index d9fac867..aa5b702e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,8 @@
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
-import autoprefixer from 'autoprefixer';
 import laravel from 'laravel-vite-plugin';
-import path from 'path';
-import tailwindcss from 'tailwindcss';
 import { resolve } from 'node:path';
+import path from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
@@ -21,6 +20,7 @@ export default defineConfig({
                 },
             },
         }),
+        tailwindcss(),
     ],
     resolve: {
         alias: {
@@ -28,9 +28,4 @@ export default defineConfig({
             'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
         },
     },
-    css: {
-        postcss: {
-            plugins: [tailwindcss, autoprefixer],
-        },
-    },
 });

From 8f52778c8b15a2a7cb73f1ea757fd6fa642b7100 Mon Sep 17 00:00:00 2001
From: Tony <AntonioRM81@Gmail.com>
Date: Wed, 2 Apr 2025 20:00:59 +0200
Subject: [PATCH 3/4] WIP

---
 package-lock.json  | 160 ---------------------------------------------
 package.json       |   1 -
 tailwind.config.js |  82 -----------------------
 3 files changed, 243 deletions(-)
 delete mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index a2f37460..bef42b7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
                 "@tailwindcss/vite": "^4.1.0",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vueuse/core": "^12.0.0",
-                "autoprefixer": "^10.4.20",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
@@ -1928,43 +1927,6 @@
             "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
             "license": "MIT"
         },
-        "node_modules/autoprefixer": {
-            "version": "10.4.20",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-            "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/postcss/"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "dependencies": {
-                "browserslist": "^4.23.3",
-                "caniuse-lite": "^1.0.30001646",
-                "fraction.js": "^4.3.7",
-                "normalize-range": "^0.1.2",
-                "picocolors": "^1.0.1",
-                "postcss-value-parser": "^4.2.0"
-            },
-            "bin": {
-                "autoprefixer": "bin/autoprefixer"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
         "node_modules/axios": {
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.1.tgz",
@@ -2013,38 +1975,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/browserslist": {
-            "version": "4.24.4",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
-            "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/browserslist"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/browserslist"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "dependencies": {
-                "caniuse-lite": "^1.0.30001688",
-                "electron-to-chromium": "^1.5.73",
-                "node-releases": "^2.0.19",
-                "update-browserslist-db": "^1.1.1"
-            },
-            "bin": {
-                "browserslist": "cli.js"
-            },
-            "engines": {
-                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-            }
-        },
         "node_modules/call-bind-apply-helpers": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2084,26 +2014,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/caniuse-lite": {
-            "version": "1.0.30001701",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001701.tgz",
-            "integrity": "sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/browserslist"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "CC-BY-4.0"
-        },
         "node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2400,12 +2310,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/electron-to-chromium": {
-            "version": "1.5.109",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.109.tgz",
-            "integrity": "sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==",
-            "license": "ISC"
-        },
         "node_modules/enhanced-resolve": {
             "version": "5.18.1",
             "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -2959,19 +2863,6 @@
                 "node": ">= 6"
             }
         },
-        "node_modules/fraction.js": {
-            "version": "4.3.7",
-            "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-            "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-            "license": "MIT",
-            "engines": {
-                "node": "*"
-            },
-            "funding": {
-                "type": "patreon",
-                "url": "https://github.com/sponsors/rawify"
-            }
-        },
         "node_modules/fsevents": {
             "version": "2.3.3",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3719,21 +3610,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/node-releases": {
-            "version": "2.0.19",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-            "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-            "license": "MIT"
-        },
-        "node_modules/normalize-range": {
-            "version": "0.1.2",
-            "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-            "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/nth-check": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -3909,12 +3785,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/postcss-value-parser": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-            "license": "MIT"
-        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4632,36 +4502,6 @@
             "devOptional": true,
             "license": "MIT"
         },
-        "node_modules/update-browserslist-db": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-            "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-            "funding": [
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/browserslist"
-                },
-                {
-                    "type": "tidelift",
-                    "url": "https://tidelift.com/funding/github/npm/browserslist"
-                },
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "dependencies": {
-                "escalade": "^3.2.0",
-                "picocolors": "^1.1.1"
-            },
-            "bin": {
-                "update-browserslist-db": "cli.js"
-            },
-            "peerDependencies": {
-                "browserslist": ">= 4.21.0"
-            }
-        },
         "node_modules/uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 52b9cf66..0d6bd4f7 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
         "@tailwindcss/vite": "^4.1.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^12.0.0",
-        "autoprefixer": "^10.4.20",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 974b34f5..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-    darkMode: ['class'],
-    content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/views/**/*.blade.php',
-        './resources/js/**/*.{vue,js,ts,jsx,tsx}',
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Instrument Sans', ...defaultTheme.fontFamily.sans],
-            },
-            borderRadius: {
-                lg: 'var(--radius)',
-                md: 'calc(var(--radius) - 2px)',
-                sm: 'calc(var(--radius) - 4px)',
-            },
-            colors: {
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
-                card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))',
-                },
-                popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))',
-                },
-                primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))',
-                },
-                secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))',
-                },
-                muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))',
-                },
-                accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))',
-                },
-                destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))',
-                },
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
-                chart: {
-                    1: 'hsl(var(--chart-1))',
-                    2: 'hsl(var(--chart-2))',
-                    3: 'hsl(var(--chart-3))',
-                    4: 'hsl(var(--chart-4))',
-                    5: 'hsl(var(--chart-5))',
-                },
-                sidebar: {
-                    DEFAULT: 'hsl(var(--sidebar-background))',
-                    foreground: 'hsl(var(--sidebar-foreground))',
-                    primary: 'hsl(var(--sidebar-primary))',
-                    'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-                    accent: 'hsl(var(--sidebar-accent))',
-                    'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-                    border: 'hsl(var(--sidebar-border))',
-                    ring: 'hsl(var(--sidebar-ring))',
-                },
-            },
-        },
-    },
-    plugins: [
-        require('tailwindcss-animate'),
-        function ({ addVariant }) {
-            addVariant('starting', '@starting-style');
-        },
-    ],
-};

From ded604c118c9b8b6a043862495b75d41e4cea863 Mon Sep 17 00:00:00 2001
From: Tony <AntonioRM81@Gmail.com>
Date: Wed, 2 Apr 2025 20:10:04 +0200
Subject: [PATCH 4/4] Updated all used components to its shadcn/vue 2 version

---
 package-lock.json                             | 178 ++++--------------
 package.json                                  |   4 +-
 resources/js/components/ui/avatar/Avatar.vue  |  30 ++-
 .../components/ui/avatar/AvatarFallback.vue   |  22 ++-
 .../js/components/ui/avatar/AvatarImage.vue   |  13 +-
 resources/js/components/ui/avatar/index.ts    |  27 +--
 .../components/ui/breadcrumb/Breadcrumb.vue   |  16 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |  27 +--
 .../ui/breadcrumb/BreadcrumbItem.vue          |  17 +-
 .../ui/breadcrumb/BreadcrumbLink.vue          |  21 ++-
 .../ui/breadcrumb/BreadcrumbList.vue          |  17 +-
 .../ui/breadcrumb/BreadcrumbPage.vue          |  20 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |  25 ++-
 .../js/components/ui/breadcrumb/index.ts      |  14 +-
 resources/js/components/ui/button/Button.vue  |  29 +--
 resources/js/components/ui/button/index.ts    |  57 +++---
 resources/js/components/ui/card/Card.vue      |  22 ++-
 .../js/components/ui/card/CardAction.vue      |  17 ++
 .../js/components/ui/card/CardContent.vue     |  17 +-
 .../js/components/ui/card/CardDescription.vue |  17 +-
 .../js/components/ui/card/CardFooter.vue      |  17 +-
 .../js/components/ui/card/CardHeader.vue      |  17 +-
 resources/js/components/ui/card/CardTitle.vue |  17 +-
 resources/js/components/ui/card/index.ts      |  13 +-
 .../js/components/ui/checkbox/Checkbox.vue    |  14 +-
 .../components/ui/collapsible/Collapsible.vue |  20 +-
 .../ui/collapsible/CollapsibleContent.vue     |  16 +-
 .../ui/collapsible/CollapsibleTrigger.vue     |  13 +-
 .../js/components/ui/collapsible/index.ts     |   6 +-
 resources/js/components/ui/dialog/Dialog.vue  |  17 +-
 .../js/components/ui/dialog/DialogClose.vue   |  13 +-
 .../js/components/ui/dialog/DialogContent.vue |  76 ++++----
 .../ui/dialog/DialogDescription.vue           |  26 +--
 .../js/components/ui/dialog/DialogFooter.vue  |  15 +-
 .../js/components/ui/dialog/DialogHeader.vue  |  17 +-
 .../js/components/ui/dialog/DialogOverlay.vue |  23 +++
 .../ui/dialog/DialogScrollContent.vue         |  94 ++++-----
 .../js/components/ui/dialog/DialogTitle.vue   |  26 +--
 .../js/components/ui/dialog/DialogTrigger.vue |  13 +-
 resources/js/components/ui/dialog/index.ts    |  19 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |  17 +-
 .../DropdownMenuCheckboxItem.vue              |  61 +++---
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  55 +++---
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |  13 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  44 ++---
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  29 +--
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  22 ++-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  61 +++---
 .../dropdown-menu/DropdownMenuSeparator.vue   |  29 +--
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |  17 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |  19 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  41 ++--
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  47 +++--
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |  15 +-
 .../js/components/ui/dropdown-menu/index.ts   |  30 +--
 resources/js/components/ui/input/Input.vue    |  43 ++---
 resources/js/components/ui/input/index.ts     |   2 +-
 resources/js/components/ui/label/Label.vue    |  32 ++--
 resources/js/components/ui/label/index.ts     |   2 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  26 +--
 .../navigation-menu/NavigationMenuContent.vue |   7 +-
 .../NavigationMenuIndicator.vue               |   7 +-
 .../ui/navigation-menu/NavigationMenuItem.vue |  15 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |  16 +-
 .../ui/navigation-menu/NavigationMenuList.vue |   5 +-
 .../navigation-menu/NavigationMenuTrigger.vue |   5 +-
 .../NavigationMenuViewport.vue                |   7 +-
 .../js/components/ui/navigation-menu/index.ts |   2 +-
 .../js/components/ui/separator/Separator.vue  |  45 +++--
 resources/js/components/ui/separator/index.ts |   2 +-
 resources/js/components/ui/sheet/Sheet.vue    |  17 +-
 .../js/components/ui/sheet/SheetClose.vue     |  13 +-
 .../js/components/ui/sheet/SheetContent.vue   |  88 +++++----
 .../components/ui/sheet/SheetDescription.vue  |  24 ++-
 .../js/components/ui/sheet/SheetFooter.vue    |  16 +-
 .../js/components/ui/sheet/SheetHeader.vue    |  15 +-
 .../js/components/ui/sheet/SheetOverlay.vue   |  23 +++
 .../js/components/ui/sheet/SheetTitle.vue     |  24 ++-
 .../js/components/ui/sheet/SheetTrigger.vue   |  13 +-
 resources/js/components/ui/sheet/index.ts     |  37 +---
 .../js/components/ui/sidebar/Sidebar.vue      | 165 ++++++++--------
 .../components/ui/sidebar/SidebarContent.vue  |  21 ++-
 .../components/ui/sidebar/SidebarFooter.vue   |  18 +-
 .../js/components/ui/sidebar/SidebarGroup.vue |  18 +-
 .../ui/sidebar/SidebarGroupAction.vue         |  46 +++--
 .../ui/sidebar/SidebarGroupContent.vue        |  18 +-
 .../ui/sidebar/SidebarGroupLabel.vue          |  42 ++---
 .../components/ui/sidebar/SidebarHeader.vue   |  18 +-
 .../js/components/ui/sidebar/SidebarInput.vue |  23 ++-
 .../js/components/ui/sidebar/SidebarInset.vue |  29 ++-
 .../js/components/ui/sidebar/SidebarMenu.vue  |  18 +-
 .../ui/sidebar/SidebarMenuAction.vue          |  63 +++----
 .../ui/sidebar/SidebarMenuBadge.vue           |  39 ++--
 .../ui/sidebar/SidebarMenuButton.vue          |  77 ++++----
 .../ui/sidebar/SidebarMenuButtonChild.vue     |  47 ++---
 .../components/ui/sidebar/SidebarMenuItem.vue |  18 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |  36 ++--
 .../components/ui/sidebar/SidebarMenuSub.vue  |  31 ++-
 .../ui/sidebar/SidebarMenuSubButton.vue       |  66 +++----
 .../ui/sidebar/SidebarMenuSubItem.vue         |  19 +-
 .../components/ui/sidebar/SidebarProvider.vue | 112 +++++------
 .../js/components/ui/sidebar/SidebarRail.vue  |  51 +++--
 .../ui/sidebar/SidebarSeparator.vue           |  20 +-
 .../components/ui/sidebar/SidebarTrigger.vue  |  31 +--
 resources/js/components/ui/sidebar/index.ts   |  99 +++++-----
 resources/js/components/ui/sidebar/utils.ts   |  32 ++--
 .../js/components/ui/skeleton/Skeleton.vue    |  13 +-
 resources/js/components/ui/skeleton/index.ts  |   2 +-
 .../js/components/ui/tooltip/Tooltip.vue      |  17 +-
 .../components/ui/tooltip/TooltipContent.vue  |  50 +++--
 .../components/ui/tooltip/TooltipProvider.vue |  12 +-
 .../components/ui/tooltip/TooltipTrigger.vue  |  13 +-
 resources/js/components/ui/tooltip/index.ts   |   8 +-
 113 files changed, 1742 insertions(+), 1578 deletions(-)
 create mode 100644 resources/js/components/ui/card/CardAction.vue
 create mode 100644 resources/js/components/ui/dialog/DialogOverlay.vue
 create mode 100644 resources/js/components/ui/sheet/SheetOverlay.vue

diff --git a/package-lock.json b/package-lock.json
index bef42b7b..addac576 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,13 @@
                 "@inertiajs/vue3": "^2.0.0-beta.3",
                 "@tailwindcss/vite": "^4.1.0",
                 "@vitejs/plugin-vue": "^5.2.1",
-                "@vueuse/core": "^12.0.0",
+                "@vueuse/core": "^12.8.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
                 "laravel-vite-plugin": "^1.0",
                 "lucide-vue-next": "^0.486.0",
-                "radix-vue": "^1.9.11",
+                "reka-ui": "^2.2.0",
                 "tailwind-merge": "^3.1.0",
                 "tailwindcss": "^4.1.0",
                 "tw-animate-css": "^1.2.5",
@@ -1401,12 +1401,6 @@
             "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
             "license": "MIT"
         },
-        "node_modules/@types/web-bluetooth": {
-            "version": "0.0.20",
-            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
-            "license": "MIT"
-        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.25.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.25.0.tgz",
@@ -1805,33 +1799,39 @@
             "license": "MIT"
         },
         "node_modules/@vueuse/core": {
-            "version": "12.7.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.7.0.tgz",
-            "integrity": "sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==",
+            "version": "12.8.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
+            "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
             "license": "MIT",
             "dependencies": {
-                "@types/web-bluetooth": "^0.0.20",
-                "@vueuse/metadata": "12.7.0",
-                "@vueuse/shared": "12.7.0",
+                "@types/web-bluetooth": "^0.0.21",
+                "@vueuse/metadata": "12.8.2",
+                "@vueuse/shared": "12.8.2",
                 "vue": "^3.5.13"
             },
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/@vueuse/core/node_modules/@types/web-bluetooth": {
+            "version": "0.0.21",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+            "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+            "license": "MIT"
+        },
         "node_modules/@vueuse/metadata": {
-            "version": "12.7.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.7.0.tgz",
-            "integrity": "sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==",
+            "version": "12.8.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
+            "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/antfu"
             }
         },
         "node_modules/@vueuse/shared": {
-            "version": "12.7.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.7.0.tgz",
-            "integrity": "sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==",
+            "version": "12.8.2",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
+            "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
             "license": "MIT",
             "dependencies": {
                 "vue": "^3.5.13"
@@ -2708,6 +2708,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/fast-glob": {
@@ -3635,6 +3636,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/ohash": {
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+            "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+            "license": "MIT"
+        },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3959,134 +3966,27 @@
             ],
             "license": "MIT"
         },
-        "node_modules/radix-vue": {
-            "version": "1.9.17",
-            "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.17.tgz",
-            "integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
+        "node_modules/reka-ui": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.0.tgz",
+            "integrity": "sha512-eeRrLI4LwJ6dkdwks6KFNKGs0+beqZlHO3JMHen7THDTh+yJ5Z0KNwONmOhhV/0hZC2uJCEExgG60QPzGstkQg==",
             "license": "MIT",
             "dependencies": {
-                "@floating-ui/dom": "^1.6.7",
-                "@floating-ui/vue": "^1.1.0",
-                "@internationalized/date": "^3.5.4",
-                "@internationalized/number": "^3.5.3",
-                "@tanstack/vue-virtual": "^3.8.1",
-                "@vueuse/core": "^10.11.0",
-                "@vueuse/shared": "^10.11.0",
+                "@floating-ui/dom": "^1.6.13",
+                "@floating-ui/vue": "^1.1.6",
+                "@internationalized/date": "^3.5.0",
+                "@internationalized/number": "^3.5.0",
+                "@tanstack/vue-virtual": "^3.12.0",
+                "@vueuse/core": "^12.5.0",
+                "@vueuse/shared": "^12.5.0",
                 "aria-hidden": "^1.2.4",
                 "defu": "^6.1.4",
-                "fast-deep-equal": "^3.1.3",
-                "nanoid": "^5.0.7"
+                "ohash": "^2.0.11"
             },
             "peerDependencies": {
                 "vue": ">= 3.2.0"
             }
         },
-        "node_modules/radix-vue/node_modules/@vueuse/core": {
-            "version": "10.11.1",
-            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-            "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
-            "license": "MIT",
-            "dependencies": {
-                "@types/web-bluetooth": "^0.0.20",
-                "@vueuse/metadata": "10.11.1",
-                "@vueuse/shared": "10.11.1",
-                "vue-demi": ">=0.14.8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
-        "node_modules/radix-vue/node_modules/@vueuse/core/node_modules/vue-demi": {
-            "version": "0.14.10",
-            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-            "hasInstallScript": true,
-            "license": "MIT",
-            "bin": {
-                "vue-demi-fix": "bin/vue-demi-fix.js",
-                "vue-demi-switch": "bin/vue-demi-switch.js"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.0-rc.1",
-                "vue": "^3.0.0-0 || ^2.6.0"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/radix-vue/node_modules/@vueuse/metadata": {
-            "version": "10.11.1",
-            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-            "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
-            "license": "MIT",
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
-        "node_modules/radix-vue/node_modules/@vueuse/shared": {
-            "version": "10.11.1",
-            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
-            "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
-            "license": "MIT",
-            "dependencies": {
-                "vue-demi": ">=0.14.8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
-        "node_modules/radix-vue/node_modules/@vueuse/shared/node_modules/vue-demi": {
-            "version": "0.14.10",
-            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-            "hasInstallScript": true,
-            "license": "MIT",
-            "bin": {
-                "vue-demi-fix": "bin/vue-demi-fix.js",
-                "vue-demi-switch": "bin/vue-demi-switch.js"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.0-rc.1",
-                "vue": "^3.0.0-0 || ^2.6.0"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/radix-vue/node_modules/nanoid": {
-            "version": "5.1.2",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.2.tgz",
-            "integrity": "sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/ai"
-                }
-            ],
-            "license": "MIT",
-            "bin": {
-                "nanoid": "bin/nanoid.js"
-            },
-            "engines": {
-                "node": "^18 || >=20"
-            }
-        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index 0d6bd4f7..05f1f8ce 100644
--- a/package.json
+++ b/package.json
@@ -26,13 +26,13 @@
         "@inertiajs/vue3": "^2.0.0-beta.3",
         "@tailwindcss/vite": "^4.1.0",
         "@vitejs/plugin-vue": "^5.2.1",
-        "@vueuse/core": "^12.0.0",
+        "@vueuse/core": "^12.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^1.0",
         "lucide-vue-next": "^0.486.0",
-        "radix-vue": "^1.9.11",
+        "reka-ui": "^2.2.0",
         "tailwind-merge": "^3.1.0",
         "tailwindcss": "^4.1.0",
         "tw-animate-css": "^1.2.5",
diff --git a/resources/js/components/ui/avatar/Avatar.vue b/resources/js/components/ui/avatar/Avatar.vue
index b2fd9660..1aa6462f 100644
--- a/resources/js/components/ui/avatar/Avatar.vue
+++ b/resources/js/components/ui/avatar/Avatar.vue
@@ -1,24 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { AvatarRoot } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { avatarVariant, type AvatarVariants } from '.';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'reka-ui'
 
-const props = withDefaults(
-    defineProps<{
-        class?: HTMLAttributes['class'];
-        size?: AvatarVariants['size'];
-        shape?: AvatarVariants['shape'];
-    }>(),
-    {
-        size: 'sm',
-        shape: 'circle',
-    },
-);
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-        <slot />
-    </AvatarRoot>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
 </template>
diff --git a/resources/js/components/ui/avatar/AvatarFallback.vue b/resources/js/components/ui/avatar/AvatarFallback.vue
index 02d65e18..b0f33982 100644
--- a/resources/js/components/ui/avatar/AvatarFallback.vue
+++ b/resources/js/components/ui/avatar/AvatarFallback.vue
@@ -1,11 +1,23 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+import { cn } from '@/lib/utils'
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<AvatarFallbackProps>();
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
-    <AvatarFallback v-bind="props">
-        <slot />
-    </AvatarFallback>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
 </template>
diff --git a/resources/js/components/ui/avatar/AvatarImage.vue b/resources/js/components/ui/avatar/AvatarImage.vue
index e2c75ed6..801392b5 100644
--- a/resources/js/components/ui/avatar/AvatarImage.vue
+++ b/resources/js/components/ui/avatar/AvatarImage.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
-const props = defineProps<AvatarImageProps>();
+const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-    <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
 </template>
diff --git a/resources/js/components/ui/avatar/index.ts b/resources/js/components/ui/avatar/index.ts
index b11cf34e..6a90410e 100644
--- a/resources/js/components/ui/avatar/index.ts
+++ b/resources/js/components/ui/avatar/index.ts
@@ -1,24 +1,3 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Avatar } from './Avatar.vue';
-export { default as AvatarFallback } from './AvatarFallback.vue';
-export { default as AvatarImage } from './AvatarImage.vue';
-
-export const avatarVariant = cva(
-    'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-    {
-        variants: {
-            size: {
-                sm: 'h-10 w-10 text-xs',
-                base: 'h-16 w-16 text-2xl',
-                lg: 'h-32 w-32 text-5xl',
-            },
-            shape: {
-                circle: 'rounded-full',
-                square: 'rounded-md',
-            },
-        },
-    },
-);
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>;
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
diff --git a/resources/js/components/ui/breadcrumb/Breadcrumb.vue b/resources/js/components/ui/breadcrumb/Breadcrumb.vue
index 55d0c943..b99dcea4 100644
--- a/resources/js/components/ui/breadcrumb/Breadcrumb.vue
+++ b/resources/js/components/ui/breadcrumb/Breadcrumb.vue
@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <nav aria-label="breadcrumb" :class="props.class">
-        <slot />
-    </nav>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index 77815cb5..fc1353fb 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { MoreHorizontal } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
-        <slot>
-            <MoreHorizontal class="h-4 w-4" />
-        </slot>
-        <span class="sr-only">More</span>
-    </span>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue b/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
index 76b9149b..f50f69d1 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <li :class="cn('inline-flex items-center gap-1.5', props.class)">
-        <slot />
-    </li>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue b/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
index 2612d6d7..7edc1bea 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,15 +1,20 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-    as: 'a',
-});
+  as: 'a',
+})
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue b/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
index 2e6456eb..3a92c481 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
-        <slot />
-    </ol>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue b/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
index e67ebe8f..cc667bc5 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -1,14 +1,20 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
-        <slot />
-    </span>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue b/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
index d294b924..132dacf3 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,17 +1,22 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
-        <slot>
-            <ChevronRight />
-        </slot>
-    </li>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/index.ts b/resources/js/components/ui/breadcrumb/index.ts
index d650f7e4..05909832 100644
--- a/resources/js/components/ui/breadcrumb/index.ts
+++ b/resources/js/components/ui/breadcrumb/index.ts
@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from './Breadcrumb.vue';
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
-export { default as BreadcrumbList } from './BreadcrumbList.vue';
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/resources/js/components/ui/button/Button.vue b/resources/js/components/ui/button/Button.vue
index f42adfd5..c6691f68 100644
--- a/resources/js/components/ui/button/Button.vue
+++ b/resources/js/components/ui/button/Button.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { buttonVariants, type ButtonVariants } from '.';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
-    variant?: ButtonVariants['variant'];
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    as: 'button',
-});
+  as: 'button',
+})
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
index 93806a59..616d1d3a 100644
--- a/resources/js/components/ui/button/index.ts
+++ b/resources/js/components/ui/button/index.ts
@@ -1,31 +1,36 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority'
 
-export { default as Button } from './Button.vue';
+export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-    {
-        variants: {
-            variant: {
-                default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
-                destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
-                outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-                secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground',
-                link: 'text-primary underline-offset-4 hover:underline',
-            },
-            size: {
-                default: 'h-9 px-4 py-2',
-                sm: 'h-8 rounded-md px-3 text-xs',
-                lg: 'h-10 rounded-md px-8',
-                icon: 'h-9 w-9',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
+  '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-xs hover:bg-primary/90',
+        destructive:
+          '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 bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
     },
-);
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
 
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/resources/js/components/ui/card/Card.vue b/resources/js/components/ui/card/Card.vue
index a2ecb061..9154a6a3 100644
--- a/resources/js/components/ui/card/Card.vue
+++ b/resources/js/components/ui/card/Card.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-xs', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/card/CardAction.vue b/resources/js/components/ui/card/CardAction.vue
new file mode 100644
index 00000000..c2beb206
--- /dev/null
+++ b/resources/js/components/ui/card/CardAction.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/card/CardContent.vue b/resources/js/components/ui/card/CardContent.vue
index a1d59f87..6bff4bcb 100644
--- a/resources/js/components/ui/card/CardContent.vue
+++ b/resources/js/components/ui/card/CardContent.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div :class="cn('p-6 pt-0', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/card/CardDescription.vue b/resources/js/components/ui/card/CardDescription.vue
index 91b21793..2a0a755f 100644
--- a/resources/js/components/ui/card/CardDescription.vue
+++ b/resources/js/components/ui/card/CardDescription.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <p :class="cn('text-sm text-muted-foreground', props.class)">
-        <slot />
-    </p>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
 </template>
diff --git a/resources/js/components/ui/card/CardFooter.vue b/resources/js/components/ui/card/CardFooter.vue
index 2f055c52..1f3648d8 100644
--- a/resources/js/components/ui/card/CardFooter.vue
+++ b/resources/js/components/ui/card/CardFooter.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div :class="cn('flex items-center p-6 pt-0', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/card/CardHeader.vue b/resources/js/components/ui/card/CardHeader.vue
index c557b0f2..f693a6cd 100644
--- a/resources/js/components/ui/card/CardHeader.vue
+++ b/resources/js/components/ui/card/CardHeader.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="card-header"
+    :class="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', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/card/CardTitle.vue b/resources/js/components/ui/card/CardTitle.vue
index 176d69cb..caa7e06d 100644
--- a/resources/js/components/ui/card/CardTitle.vue
+++ b/resources/js/components/ui/card/CardTitle.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
-        <slot />
-    </h3>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
 </template>
diff --git a/resources/js/components/ui/card/index.ts b/resources/js/components/ui/card/index.ts
index d652969f..73d985f2 100644
--- a/resources/js/components/ui/card/index.ts
+++ b/resources/js/components/ui/card/index.ts
@@ -1,6 +1,7 @@
-export { default as Card } from './Card.vue';
-export { default as CardContent } from './CardContent.vue';
-export { default as CardDescription } from './CardDescription.vue';
-export { default as CardFooter } from './CardFooter.vue';
-export { default as CardHeader } from './CardHeader.vue';
-export { default as CardTitle } from './CardTitle.vue';
+export { default as Card } from './Card.vue'
+export { default as CardAction } from './CardAction.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
index 31f2a572..d43b7a4c 100644
--- a/resources/js/components/ui/checkbox/Checkbox.vue
+++ b/resources/js/components/ui/checkbox/Checkbox.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
@@ -19,14 +19,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <CheckboxRoot
+    data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('peer size-5 shrink-0 rounded-sm border border-input 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 data-[state=checked]:border-accent-foreground',
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
          props.class)"
   >
-    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="flex items-center justify-center text-current transition-none"
+    >
       <slot>
-        <Check class="size-3.5 stroke-3" />
+        <Check class="size-3.5" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/resources/js/components/ui/collapsible/Collapsible.vue b/resources/js/components/ui/collapsible/Collapsible.vue
index a2dba269..dcd58e2e 100644
--- a/resources/js/components/ui/collapsible/Collapsible.vue
+++ b/resources/js/components/ui/collapsible/Collapsible.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<CollapsibleRootProps>();
-const emits = defineEmits<CollapsibleRootEmits>();
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
-        <slot :open="open" />
-    </CollapsibleRoot>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    data-slot="collapsible"
+    v-bind="forwarded"
+  >
+    <slot :open="open" />
+  </CollapsibleRoot>
 </template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleContent.vue b/resources/js/components/ui/collapsible/CollapsibleContent.vue
index 738d494e..4120d2f9 100644
--- a/resources/js/components/ui/collapsible/CollapsibleContent.vue
+++ b/resources/js/components/ui/collapsible/CollapsibleContent.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue';
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'
 
-const props = defineProps<CollapsibleContentProps>();
+const props = defineProps<CollapsibleContentProps>()
 </script>
 
 <template>
-    <CollapsibleContent
-        v-bind="props"
-        class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all"
-    >
-        <slot />
-    </CollapsibleContent>
+  <CollapsibleContent
+    data-slot="collapsible-content"
+    v-bind="props"
+  >
+    <slot />
+  </CollapsibleContent>
 </template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue b/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
index 83cb10e5..be603a44 100644
--- a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue';
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'
 
-const props = defineProps<CollapsibleTriggerProps>();
+const props = defineProps<CollapsibleTriggerProps>()
 </script>
 
 <template>
-    <CollapsibleTrigger v-bind="props">
-        <slot />
-    </CollapsibleTrigger>
+  <CollapsibleTrigger
+    data-slot="collapsible-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </CollapsibleTrigger>
 </template>
diff --git a/resources/js/components/ui/collapsible/index.ts b/resources/js/components/ui/collapsible/index.ts
index 56b5a955..abab9567 100644
--- a/resources/js/components/ui/collapsible/index.ts
+++ b/resources/js/components/ui/collapsible/index.ts
@@ -1,3 +1,3 @@
-export { default as Collapsible } from './Collapsible.vue';
-export { default as CollapsibleContent } from './CollapsibleContent.vue';
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
diff --git a/resources/js/components/ui/dialog/Dialog.vue b/resources/js/components/ui/dialog/Dialog.vue
index 490fff1a..bb8bf725 100644
--- a/resources/js/components/ui/dialog/Dialog.vue
+++ b/resources/js/components/ui/dialog/Dialog.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <DialogRoot v-bind="forwarded">
-        <slot />
-    </DialogRoot>
+  <DialogRoot
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogClose.vue b/resources/js/components/ui/dialog/DialogClose.vue
index 91734ff9..7574168d 100644
--- a/resources/js/components/ui/dialog/DialogClose.vue
+++ b/resources/js/components/ui/dialog/DialogClose.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
-const props = defineProps<DialogCloseProps>();
+const props = defineProps<DialogCloseProps>()
 </script>
 
 <template>
-    <DialogClose v-bind="props">
-        <slot />
-    </DialogClose>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
index eb3d0719..12264596 100644
--- a/resources/js/components/ui/dialog/DialogContent.vue
+++ b/resources/js/components/ui/dialog/DialogContent.vue
@@ -1,51 +1,49 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import DialogOverlay from './DialogOverlay.vue'
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DialogContentEmits>();
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        />
-        <DialogContent
-            v-bind="forwarded"
-            :class="
-                cn(
-                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-                    props.class,
-                )
-            "
-        >
-            <slot />
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
 
-            <DialogClose
-                class="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 class="h-4 w-4" />
-                <span class="sr-only">Close</span>
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogDescription.vue b/resources/js/components/ui/dialog/DialogDescription.vue
index d35f13ae..dc5be12a 100644
--- a/resources/js/components/ui/dialog/DialogDescription.vue
+++ b/resources/js/components/ui/dialog/DialogDescription.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
-        <slot />
-    </DialogDescription>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogFooter.vue b/resources/js/components/ui/dialog/DialogFooter.vue
index 543a58a9..c3b4b55e 100644
--- a/resources/js/components/ui/dialog/DialogFooter.vue
+++ b/resources/js/components/ui/dialog/DialogFooter.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogHeader.vue b/resources/js/components/ui/dialog/DialogHeader.vue
index afb80911..0fc2f5f3 100644
--- a/resources/js/components/ui/dialog/DialogHeader.vue
+++ b/resources/js/components/ui/dialog/DialogHeader.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogOverlay.vue b/resources/js/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 00000000..da8d0b4b
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
index d4fee126..017cbd2e 100644
--- a/resources/js/components/ui/dialog/DialogScrollContent.vue
+++ b/resources/js/components/ui/dialog/DialogScrollContent.vue
@@ -1,59 +1,59 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DialogContentEmits>();
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        >
-            <DialogContent
-                :class="
-                    cn(
-                        'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-                        props.class,
-                    )
-                "
-                v-bind="forwarded"
-                @pointer-down-outside="
-                    (event) => {
-                        const originalEvent = event.detail.originalEvent;
-                        const target = originalEvent.target as HTMLElement;
-                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-                            event.preventDefault();
-                        }
-                    }
-                "
-            >
-                <slot />
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
 
-                <DialogClose class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary">
-                    <X class="h-4 w-4" />
-                    <span class="sr-only">Close</span>
-                </DialogClose>
-            </DialogContent>
-        </DialogOverlay>
-    </DialogPortal>
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogTitle.vue b/resources/js/components/ui/dialog/DialogTitle.vue
index f68bbe30..bf5b47a9 100644
--- a/resources/js/components/ui/dialog/DialogTitle.vue
+++ b/resources/js/components/ui/dialog/DialogTitle.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogTitle, useForwardProps, type DialogTitleProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DialogTitle v-bind="forwardedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
-        <slot />
-    </DialogTitle>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogTrigger.vue b/resources/js/components/ui/dialog/DialogTrigger.vue
index bbd7f36e..a870f662 100644
--- a/resources/js/components/ui/dialog/DialogTrigger.vue
+++ b/resources/js/components/ui/dialog/DialogTrigger.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
-const props = defineProps<DialogTriggerProps>();
+const props = defineProps<DialogTriggerProps>()
 </script>
 
 <template>
-    <DialogTrigger v-bind="props">
-        <slot />
-    </DialogTrigger>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
 </template>
diff --git a/resources/js/components/ui/dialog/index.ts b/resources/js/components/ui/dialog/index.ts
index e924dd4b..baa7d612 100644
--- a/resources/js/components/ui/dialog/index.ts
+++ b/resources/js/components/ui/dialog/index.ts
@@ -1,9 +1,10 @@
-export { default as Dialog } from './Dialog.vue';
-export { default as DialogClose } from './DialogClose.vue';
-export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogDescription } from './DialogDescription.vue';
-export { default as DialogFooter } from './DialogFooter.vue';
-export { default as DialogHeader } from './DialogHeader.vue';
-export { default as DialogScrollContent } from './DialogScrollContent.vue';
-export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogOverlay } from './DialogOverlay.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue b/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
index e3cd9075..e3860522 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, useForwardPropsEmits, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue';
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<DropdownMenuRootProps>();
-const emits = defineEmits<DropdownMenuRootEmits>();
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <DropdownMenuRoot v-bind="forwarded">
-        <slot />
-    </DropdownMenuRoot>
+  <DropdownMenuRoot
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRoot>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 377e8455..09b6da3c 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,42 +1,41 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Check } from 'lucide-vue-next';
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
-    DropdownMenuCheckboxItem,
-    DropdownMenuItemIndicator,
-    useForwardPropsEmits,
-    type DropdownMenuCheckboxItemEmits,
-    type DropdownMenuCheckboxItemProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuCheckboxItem
-        v-bind="forwarded"
-        :class="
-            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',
-                props.class,
-            )
-        "
-    >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Check class="h-4 w-4" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuCheckboxItem>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
index df0e7b06..a4d4c155 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,40 +1,39 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils'
 import {
-    DropdownMenuContent,
-    DropdownMenuPortal,
-    useForwardPropsEmits,
-    type DropdownMenuContentEmits,
-    type DropdownMenuContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
     sideOffset: 4,
-});
-const emits = defineEmits<DropdownMenuContentEmits>();
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuPortal>
-        <DropdownMenuContent
-            v-bind="forwarded"
-            :class="
-                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',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-        </DropdownMenuContent>
-    </DropdownMenuPortal>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="forwarded"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
index 21026d14..c7eb3086 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
 
-const props = defineProps<DropdownMenuGroupProps>();
+const props = defineProps<DropdownMenuGroupProps>()
 </script>
 
 <template>
-    <DropdownMenuGroup v-bind="props">
-        <slot />
-    </DropdownMenuGroup>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
index 49242196..76299c6f 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuItem, useForwardProps, type DropdownMenuItemProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes['class']
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}>(), {
+  variant: 'default',
+})
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+const delegatedProps = reactiveOmit(props, 'inset', 'variant')
 
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DropdownMenuItem
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'relative flex cursor-default select-none items-center gap-2 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 [&>svg]:size-4 [&>svg]:shrink-0',
-                inset && 'pl-8',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuItem>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
index 32b8936e..50987ab3 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuLabel, useForwardProps, type DropdownMenuLabelProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DropdownMenuLabel v-bind="forwardedProps" :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
-        <slot />
-    </DropdownMenuLabel>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index b0702b95..d205d0b7 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { DropdownMenuRadioGroup, useForwardPropsEmits, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps } from 'radix-vue';
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
 
-const props = defineProps<DropdownMenuRadioGroupProps>();
-const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <DropdownMenuRadioGroup v-bind="forwarded">
-        <slot />
-    </DropdownMenuRadioGroup>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 668dfe88..d2a0e86f 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,43 +1,42 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Circle } from 'lucide-vue-next';
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
-    DropdownMenuItemIndicator,
-    DropdownMenuRadioItem,
-    useForwardPropsEmits,
-    type DropdownMenuRadioItemEmits,
-    type DropdownMenuRadioItemProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 
-const emits = defineEmits<DropdownMenuRadioItemEmits>();
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuRadioItem
-        v-bind="forwarded"
-        :class="
-            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',
-                props.class,
-            )
-        "
-    >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Circle class="h-2 w-2 fill-current" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="size-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 0062e72c..a65c50c4 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<
-    DropdownMenuSeparatorProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-    <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index ade230c7..1bcbb886 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
-        <slot />
-    </span>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
index 01ec0a07..7329bca6 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { DropdownMenuSub, useForwardPropsEmits, type DropdownMenuSubEmits, type DropdownMenuSubProps } from 'radix-vue';
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
 
-const props = defineProps<DropdownMenuSubProps>();
-const emits = defineEmits<DropdownMenuSubEmits>();
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <DropdownMenuSub v-bind="forwarded">
-        <slot />
-    </DropdownMenuSub>
+  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 61a48a66..d199c91a 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,30 +1,31 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuSubContent, useForwardPropsEmits, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DropdownMenuSubContentEmits>();
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuSubContent
-        v-bind="forwarded"
-        :class="
-            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',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuSubContent>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 4d53f839..df93e3d1 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,31 +1,30 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-vue-next';
-import { DropdownMenuSubTrigger, useForwardProps, type DropdownMenuSubTriggerProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'reka-ui'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DropdownMenuSubTrigger
-        v-bind="forwardedProps"
-        :class="
-            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',
-                props.class,
-            )
-        "
-    >
-        <slot />
-        <ChevronRight class="ml-auto h-4 w-4" />
-    </DropdownMenuSubTrigger>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index a5b58706..7bc7339c 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, useForwardProps, type DropdownMenuTriggerProps } from 'radix-vue';
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
 
-const props = defineProps<DropdownMenuTriggerProps>();
+const props = defineProps<DropdownMenuTriggerProps>()
 
-const forwardedProps = useForwardProps(props);
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-    <DropdownMenuTrigger class="outline-hidden" v-bind="forwardedProps">
-        <slot />
-    </DropdownMenuTrigger>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/index.ts b/resources/js/components/ui/dropdown-menu/index.ts
index 0f94b82d..f488d396 100644
--- a/resources/js/components/ui/dropdown-menu/index.ts
+++ b/resources/js/components/ui/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownMenu } from './DropdownMenu.vue'
 
-export { DropdownMenuPortal } from 'radix-vue';
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'reka-ui'
diff --git a/resources/js/components/ui/input/Input.vue b/resources/js/components/ui/input/Input.vue
index 76d1d5d4..899535e0 100644
--- a/resources/js/components/ui/input/Input.vue
+++ b/resources/js/components/ui/input/Input.vue
@@ -1,32 +1,33 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { useVModel } from '@vueuse/core';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    class?: HTMLAttributes['class'];
-}>();
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
 
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string | number): void;
-}>();
+  (e: 'update:modelValue', payload: string | number): void
+}>()
 
 const modelValue = useVModel(props, 'modelValue', emits, {
-    passive: true,
-    defaultValue: props.defaultValue,
-});
+  passive: true,
+  defaultValue: props.defaultValue,
+})
 </script>
 
 <template>
-    <input
-        v-model="modelValue"
-        :class="
-            cn(
-                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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',
-                props.class,
-            )
-        "
-    />
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      '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',
+      props.class,
+    )"
+  >
 </template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
index c5248c5c..a691dd6c 100644
--- a/resources/js/components/ui/input/index.ts
+++ b/resources/js/components/ui/input/index.ts
@@ -1 +1 @@
-export { default as Input } from './Input.vue';
+export { default as Input } from './Input.vue'
diff --git a/resources/js/components/ui/label/Label.vue b/resources/js/components/ui/label/Label.vue
index 7bdb9b9f..33e5c6c0 100644
--- a/resources/js/components/ui/label/Label.vue
+++ b/resources/js/components/ui/label/Label.vue
@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Label, type LabelProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-    <Label
-        v-bind="delegatedProps"
-        :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
-    >
-        <slot />
-    </Label>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      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',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
 </template>
diff --git a/resources/js/components/ui/label/index.ts b/resources/js/components/ui/label/index.ts
index c98e59f8..572c2f01 100644
--- a/resources/js/components/ui/label/index.ts
+++ b/resources/js/components/ui/label/index.ts
@@ -1 +1 @@
-export { default as Label } from './Label.vue';
+export { default as Label } from './Label.vue'
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
index a0b5bec8..af2c6238 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenu.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'reka-ui'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 
-const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
+const props = withDefaults(defineProps<NavigationMenuRootProps & {
+  class?: HTMLAttributes['class']
+  viewport?: boolean
+}>(), {
+  viewport: true,
 })
+const emits = defineEmits<NavigationMenuRootEmits>()
 
+const delegatedProps = reactiveOmit(props, 'class', 'viewport')
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <NavigationMenuRoot
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
     v-bind="forwarded"
-    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
   >
     <slot />
-    <NavigationMenuViewport />
+    <NavigationMenuViewport v-if="viewport" />
   </NavigationMenuRoot>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
index 101f450e..447a5234 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -5,11 +5,10 @@ import {
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
-
 const emits = defineEmits<NavigationMenuContentEmits>()
 
 const delegatedProps = computed(() => {
@@ -23,9 +22,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <NavigationMenuContent
+    data-slot="navigation-menu-content"
     v-bind="forwarded"
     :class="cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      `data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto`,
+      `group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,
       props.class,
     )"
   >
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
index 4b490a04..9827540c 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
@@ -16,9 +16,10 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
     v-bind="forwardedProps"
-    :class="cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
   >
-    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuIndicator>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
index 50e1565f..38d0e1c5 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'
 
-const props = defineProps<NavigationMenuItemProps>()
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <NavigationMenuItem v-bind="props">
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
     <slot />
   </NavigationMenuItem>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
index 30c91c61..df449ccb 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
 import {
   NavigationMenuLink,
   type NavigationMenuLinkEmits,
   type NavigationMenuLinkProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
-const props = defineProps<NavigationMenuLinkProps>()
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NavigationMenuLinkEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <NavigationMenuLink v-bind="forwarded">
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="forwarded"
+    :class="cn(`'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4'`, props.class)"
+  >
     <slot />
   </NavigationMenuLink>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
index 4cf0d10e..a88c052c 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
@@ -16,10 +16,11 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <NavigationMenuList
+    data-slot="navigation-menu-list"
     v-bind="forwardedProps"
     :class="
       cn(
-        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        'group flex flex-1 list-none items-center justify-center gap-1',
         props.class,
       )
     "
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
index 6f2d0a27..c48f6601 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -5,7 +5,7 @@ import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 import { navigationMenuTriggerStyle } from '.'
 
@@ -22,12 +22,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
     v-bind="forwardedProps"
     :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
   >
     <slot />
     <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
index 770c3658..d60c1285 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -4,7 +4,7 @@ import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
@@ -19,12 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <div class="absolute left-0 top-full flex justify-center">
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
     <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)',
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',
           props.class,
         )
       "
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
index b7daceff..90e0e2d6 100644
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ b/resources/js/components/ui/navigation-menu/index.ts
@@ -10,5 +10,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
 
 export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50',
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
 )
diff --git a/resources/js/components/ui/separator/Separator.vue b/resources/js/components/ui/separator/Separator.vue
index 1590d593..9d285748 100644
--- a/resources/js/components/ui/separator/Separator.vue
+++ b/resources/js/components/ui/separator/Separator.vue
@@ -1,31 +1,28 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Separator, type SeparatorProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator, type SeparatorProps } from 'reka-ui'
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class']; label?: string }>();
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'] }
+>(), {
+  orientation: 'horizontal',
+  decorative: true,
+})
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-    <Separator
-        v-bind="delegatedProps"
-        :class="cn('relative shrink-0 bg-border', props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full', props.class)"
-    >
-        <span
-            v-if="props.label"
-            :class="
-                cn(
-                    'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
-                    props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] px-2 py-1',
-                )
-            "
-            >{{ props.label }}</span
-        >
-    </Separator>
+  <Separator
+    data-slot="separator-root"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
+        props.class,
+      )
+    "
+  />
 </template>
diff --git a/resources/js/components/ui/separator/index.ts b/resources/js/components/ui/separator/index.ts
index 3cb07b01..2287bcb9 100644
--- a/resources/js/components/ui/separator/index.ts
+++ b/resources/js/components/ui/separator/index.ts
@@ -1 +1 @@
-export { default as Separator } from './Separator.vue';
+export { default as Separator } from './Separator.vue'
diff --git a/resources/js/components/ui/sheet/Sheet.vue b/resources/js/components/ui/sheet/Sheet.vue
index 490fff1a..e2a3374c 100644
--- a/resources/js/components/ui/sheet/Sheet.vue
+++ b/resources/js/components/ui/sheet/Sheet.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <DialogRoot v-bind="forwarded">
-        <slot />
-    </DialogRoot>
+  <DialogRoot
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetClose.vue b/resources/js/components/ui/sheet/SheetClose.vue
index 91734ff9..05077ea2 100644
--- a/resources/js/components/ui/sheet/SheetClose.vue
+++ b/resources/js/components/ui/sheet/SheetClose.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
-const props = defineProps<DialogCloseProps>();
+const props = defineProps<DialogCloseProps>()
 </script>
 
 <template>
-    <DialogClose v-bind="props">
-        <slot />
-    </DialogClose>
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
index 7c3860d9..98d4bf58 100644
--- a/resources/js/components/ui/sheet/SheetContent.vue
+++ b/resources/js/components/ui/sheet/SheetContent.vue
@@ -1,53 +1,63 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
 import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-import { sheetVariants, type SheetVariants } from '.';
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import SheetOverlay from './SheetOverlay.vue'
 
 interface SheetContentProps extends DialogContentProps {
-    class?: HTMLAttributes['class'];
-    side?: SheetVariants['side'];
+  class?: HTMLAttributes['class']
+  side?: 'top' | 'right' | 'bottom' | 'left'
 }
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = defineProps<SheetContentProps>();
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'right',
+})
+const emits = defineEmits<DialogContentEmits>()
 
-const emits = defineEmits<DialogContentEmits>();
+const delegatedProps = reactiveOmit(props, 'class', 'side')
 
-const delegatedProps = computed(() => {
-    const { class: _, side, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        />
-        <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
-            <slot />
-
-            <DialogClose
-                class="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-secondary"
-            >
-                <X class="h-4 w-4 text-muted-foreground" />
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetDescription.vue b/resources/js/components/ui/sheet/SheetDescription.vue
index 6b4bb9d7..bf9e2775 100644
--- a/resources/js/components/ui/sheet/SheetDescription.vue
+++ b/resources/js/components/ui/sheet/SheetDescription.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-    <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogDescription>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetFooter.vue b/resources/js/components/ui/sheet/SheetFooter.vue
index 543a58a9..d2ac823b 100644
--- a/resources/js/components/ui/sheet/SheetFooter.vue
+++ b/resources/js/components/ui/sheet/SheetFooter.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
+    "
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetHeader.vue b/resources/js/components/ui/sheet/SheetHeader.vue
index 0a4f00e6..ab20557a 100644
--- a/resources/js/components/ui/sheet/SheetHeader.vue
+++ b/resources/js/components/ui/sheet/SheetHeader.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-    <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetOverlay.vue b/resources/js/components/ui/sheet/SheetOverlay.vue
new file mode 100644
index 00000000..61fd8db5
--- /dev/null
+++ b/resources/js/components/ui/sheet/SheetOverlay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/resources/js/components/ui/sheet/SheetTitle.vue b/resources/js/components/ui/sheet/SheetTitle.vue
index 1a5ca812..dc694b82 100644
--- a/resources/js/components/ui/sheet/SheetTitle.vue
+++ b/resources/js/components/ui/sheet/SheetTitle.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogTitle, type DialogTitleProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-    return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-    <DialogTitle :class="cn('text-lg font-semibold text-foreground', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogTitle>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetTrigger.vue b/resources/js/components/ui/sheet/SheetTrigger.vue
index bbd7f36e..5981f8e0 100644
--- a/resources/js/components/ui/sheet/SheetTrigger.vue
+++ b/resources/js/components/ui/sheet/SheetTrigger.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
-const props = defineProps<DialogTriggerProps>();
+const props = defineProps<DialogTriggerProps>()
 </script>
 
 <template>
-    <DialogTrigger v-bind="props">
-        <slot />
-    </DialogTrigger>
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
 </template>
diff --git a/resources/js/components/ui/sheet/index.ts b/resources/js/components/ui/sheet/index.ts
index 005b668b..ee334310 100644
--- a/resources/js/components/ui/sheet/index.ts
+++ b/resources/js/components/ui/sheet/index.ts
@@ -1,29 +1,8 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Sheet } from './Sheet.vue';
-export { default as SheetClose } from './SheetClose.vue';
-export { default as SheetContent } from './SheetContent.vue';
-export { default as SheetDescription } from './SheetDescription.vue';
-export { default as SheetFooter } from './SheetFooter.vue';
-export { default as SheetHeader } from './SheetHeader.vue';
-export { default as SheetTitle } from './SheetTitle.vue';
-export { default as SheetTrigger } from './SheetTrigger.vue';
-
-export const sheetVariants = cva(
-    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-    {
-        variants: {
-            side: {
-                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-            },
-        },
-        defaultVariants: {
-            side: 'right',
-        },
-    },
-);
-
-export type SheetVariants = VariantProps<typeof sheetVariants>;
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
index ce77eb1d..c75db5d8 100644
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ b/resources/js/components/ui/sidebar/Sidebar.vue
@@ -1,99 +1,96 @@
 <script setup lang="ts">
-import Sheet from '@/components/ui/sheet/Sheet.vue';
-import SheetContent from '@/components/ui/sheet/SheetContent.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
+import type { SidebarProps } from '.'
+import { cn } from '@/lib/utils'
+import { Sheet, SheetContent } from '@/components/ui/sheet'
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = withDefaults(
-    defineProps<{
-        side?: 'left' | 'right';
-        variant?: 'sidebar' | 'floating' | 'inset';
-        collapsible?: 'offcanvas' | 'icon' | 'none';
-        class?: HTMLAttributes['class'];
-    }>(),
-    {
-        side: 'left',
-        variant: 'sidebar',
-        collapsible: 'offcanvas',
-    },
-);
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+})
 
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 </script>
 
 <template>
-    <div
-        v-if="collapsible === 'none'"
-        :class="cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', props.class)"
-        v-bind="$attrs"
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
     >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
         <slot />
-    </div>
-
-    <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-        <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            :side="side"
-            class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            }"
-        >
-            <div class="flex h-full w-full flex-col">
-                <slot />
-            </div>
-        </SheetContent>
-    </Sheet>
+      </div>
+    </SheetContent>
+  </Sheet>
 
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
     <div
-        v-else
-        class="group peer hidden md:block"
-        :data-state="state"
-        :data-collapsible="state === 'collapsed' ? collapsible : ''"
-        :data-variant="variant"
-        :data-side="side"
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
     >
-        <!-- This is what handles the sidebar gap on desktop  -->
-        <div
-            :class="
-                cn(
-                    'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-                    'group-data-[collapsible=offcanvas]:w-0',
-                    'group-data-[side=right]:rotate-180',
-                    variant === 'floating' || variant === 'inset'
-                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-                )
-            "
-        />
-        <div
-            :class="
-                cn(
-                    'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-                    side === 'left'
-                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-                    // Adjust the padding for floating and inset variants.
-                    variant === 'floating' || variant === 'inset'
-                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-                    props.class,
-                )
-            "
-            v-bind="$attrs"
-        >
-            <div
-                data-sidebar="sidebar"
-                class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
-            >
-                <slot />
-            </div>
-        </div>
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
     </div>
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
index 2bb05012..3b7536c3 100644
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarContent.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div
-        data-sidebar="content"
-        :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
-    >
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarFooter.vue b/resources/js/components/ui/sidebar/SidebarFooter.vue
index 66ed413b..c324dff4 100644
--- a/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ b/resources/js/components/ui/sidebar/SidebarFooter.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-footer"
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroup.vue b/resources/js/components/ui/sidebar/SidebarGroup.vue
index 94aa6ca7..57a099f4 100644
--- a/resources/js/components/ui/sidebar/SidebarGroup.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroup.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-group"
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupAction.vue b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
index 8976b79e..35713bb5 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,31 +1,27 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
 
-const props = defineProps<
-    PrimitiveProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <Primitive
-        data-sidebar="group-action"
-        :as="as"
-        :as-child="asChild"
-        :class="
-            cn(
-                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-                // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 md:after:hidden',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupContent.vue b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
index 06d8a122..5d5e2dd9 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-group-content"
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
index 43bd7b1d..19e11179 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,29 +1,25 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
 
-const props = defineProps<
-    PrimitiveProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <Primitive
-        data-sidebar="group-label"
-        :as="as"
-        :as-child="asChild"
-        :class="
-            cn(
-                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-                'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarHeader.vue b/resources/js/components/ui/sidebar/SidebarHeader.vue
index 1fecab48..00673f78 100644
--- a/resources/js/components/ui/sidebar/SidebarHeader.vue
+++ b/resources/js/components/ui/sidebar/SidebarHeader.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-header"
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarInput.vue b/resources/js/components/ui/sidebar/SidebarInput.vue
index 80c9d2e0..ecaa9777 100644
--- a/resources/js/components/ui/sidebar/SidebarInput.vue
+++ b/resources/js/components/ui/sidebar/SidebarInput.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
-import Input from '@/components/ui/input/Input.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/input'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <Input data-sidebar="input" :class="cn('h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', props.class)">
-        <slot />
-    </Input>
+  <Input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="cn(
+      'bg-background h-8 w-full shadow-none',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
index 6a9e64e4..386c6226 100644
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <main
-        :class="
-            cn(
-                'relative flex min-h-svh flex-1 flex-col bg-background',
-                'peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </main>
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenu.vue b/resources/js/components/ui/sidebar/SidebarMenu.vue
index 7449689e..59ec0719 100644
--- a/resources/js/components/ui/sidebar/SidebarMenu.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenu.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <ul data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
-        <slot />
-    </ul>
+  <ul
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuAction.vue b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
index 4566e561..24294330 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,41 +1,34 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
-const props = withDefaults(
-    defineProps<
-        PrimitiveProps & {
-            showOnHover?: boolean;
-            class?: HTMLAttributes['class'];
-        }
-    >(),
-    {
-        as: 'button',
-    },
-);
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
 </script>
 
 <template>
-    <Primitive
-        data-sidebar="menu-action"
-        :class="
-            cn(
-                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-                // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 md:after:hidden',
-                'peer-data-[size=sm]/menu-button:top-1',
-                'peer-data-[size=default]/menu-button:top-1.5',
-                'peer-data-[size=lg]/menu-button:top-2.5',
-                'group-data-[collapsible=icon]:hidden',
-                showOnHover &&
-                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-                props.class,
-            )
-        "
-        :as="as"
-        :as-child="asChild"
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
index a92878a3..3984b330 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <div
-        data-sidebar="menu-badge"
-        :class="
-            cn(
-                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
-                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-                'peer-data-[size=sm]/menu-button:top-1',
-                'peer-data-[size=default]/menu-button:top-1.5',
-                'peer-data-[size=lg]/menu-button:top-2.5',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButton.vue b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
index fabb0e27..ac6926bf 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuButton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,52 +1,49 @@
 <script setup lang="ts">
-import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
-import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
-import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
-import { computed, type Component } from 'vue';
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue';
-import { useSidebar } from './utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { type Component, computed } from 'vue'
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = withDefaults(
-    defineProps<
-        SidebarMenuButtonProps & {
-            tooltip?: string | Component;
-        }
-    >(),
-    {
-        as: 'button',
-        variant: 'default',
-        size: 'default',
-    },
-);
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
 
-const { isMobile, state } = useSidebar();
+const { isMobile, state } = useSidebar()
 
 const delegatedProps = computed(() => {
-    const { tooltip, ...delegated } = props;
-    return delegated;
-});
+  const { tooltip, ...delegated } = props
+  return delegated
+})
 </script>
 
 <template>
-    <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-    </SidebarMenuButtonChild>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
 
-    <Tooltip v-else>
-        <TooltipTrigger as-child>
-            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-                <slot />
-            </SidebarMenuButtonChild>
-        </TooltipTrigger>
-        <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
-            <template v-if="typeof tooltip === 'string'">
-                {{ tooltip }}
-            </template>
-            <component :is="tooltip" v-else />
-        </TooltipContent>
-    </Tooltip>
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
index dbb56600..0b8979c4 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,33 +1,34 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from '.';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-    variant?: SidebarMenuButtonVariants['variant'];
-    size?: SidebarMenuButtonVariants['size'];
-    isActive?: boolean;
-    class?: HTMLAttributes['class'];
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-    as: 'button',
-    variant: 'default',
-    size: 'default',
-});
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
 </script>
 
 <template>
-    <Primitive
-        data-sidebar="menu-button"
-        :data-size="size"
-        :data-active="isActive"
-        :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
-        :as="as"
-        :as-child="asChild"
-        v-bind="$attrs"
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuItem.vue b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
index b30b6890..b7b4d3f2 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuItem.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <li data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
-        <slot />
-    </li>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
index d1113080..6be4243a 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,22 +1,34 @@
 <script setup lang="ts">
-import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
-import { cn } from '@/lib/utils';
-import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils'
+import { Skeleton } from '@/components/ui/skeleton'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
-    showIcon?: boolean;
-    class?: HTMLAttributes['class'];
-}>();
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
 
 const width = computed(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-});
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+})
 </script>
 
 <template>
-    <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
-        <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
 
-        <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
-    </div>
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSub.vue b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
index 1862711b..11aec64b 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSub.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <ul
-        data-sidebar="menu-badge"
-        :class="
-            cn(
-                'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </ul>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
index 1ef32085..98e8e564 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,42 +1,36 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
 
-const props = withDefaults(
-    defineProps<
-        PrimitiveProps & {
-            size?: 'sm' | 'md';
-            isActive?: boolean;
-            class?: HTMLAttributes['class'];
-        }
-    >(),
-    {
-        as: 'a',
-        size: 'md',
-    },
-);
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: 'sm' | 'md'
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'a',
+  size: 'md',
+})
 </script>
 
 <template>
-    <Primitive
-        data-sidebar="menu-sub-button"
-        :as="as"
-        :as-child="asChild"
-        :data-size="size"
-        :data-active="isActive"
-        :class="
-            cn(
-                'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-                'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-                size === 'sm' && 'text-xs',
-                size === 'md' && 'text-sm',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
index 95dbc656..f0c35bc3 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -1,7 +1,18 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
 
 <template>
-    <li>
-        <slot />
-    </li>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn('group/menu-sub-item relative', props.class)"
+  >
+    <slot />
+  </li>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
index 213f53ec..a4ba3626 100644
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -1,89 +1,81 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
-import { TooltipProvider } from 'radix-vue';
-import { computed, ref, type HTMLAttributes, type Ref } from 'vue';
-import {
-    SIDEBAR_COOKIE_MAX_AGE,
-    SIDEBAR_COOKIE_NAME,
-    SIDEBAR_KEYBOARD_SHORTCUT,
-    SIDEBAR_WIDTH,
-    SIDEBAR_WIDTH_ICON,
-    provideSidebarContext,
-} from './utils';
+import { cn } from '@/lib/utils'
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'reka-ui'
+import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
 
-const props = withDefaults(
-    defineProps<{
-        defaultOpen?: boolean;
-        open?: boolean;
-        class?: HTMLAttributes['class'];
-    }>(),
-    {
-        defaultOpen: true,
-        open: undefined,
-    },
-);
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  defaultOpen: true,
+  open: undefined,
+})
 
 const emits = defineEmits<{
-    'update:open': [open: boolean];
-}>();
+  'update:open': [open: boolean]
+}>()
 
-const isMobile = useMediaQuery('(max-width: 768px)');
-const openMobile = ref(false);
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
 
 const open = useVModel(props, 'open', emits, {
-    defaultValue: props.defaultOpen ?? false,
-    passive: (props.open === undefined) as false,
-}) as Ref<boolean>;
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
 
 function setOpen(value: boolean) {
-    open.value = value; // emits('update:open', value)
+  open.value = value // emits('update:open', value)
 
-    // This sets the cookie to keep the sidebar state.
-    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 }
 
 function setOpenMobile(value: boolean) {
-    openMobile.value = value;
+  openMobile.value = value
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
 }
 
 useEventListener('keydown', (event: KeyboardEvent) => {
-    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        toggleSidebar();
-    }
-});
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
+const state = computed(() => open.value ? 'expanded' : 'collapsed')
 
 provideSidebarContext({
-    state,
-    open,
-    setOpen,
-    isMobile,
-    openMobile,
-    setOpenMobile,
-    toggleSidebar,
-});
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
 </script>
 
 <template>
-    <TooltipProvider :delay-duration="0">
-        <div
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH,
-                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-            }"
-            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-data-[variant=inset]:bg-sidebar', props.class)"
-        >
-            <slot />
-        </div>
-    </TooltipProvider>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
index 76f5710f..07e59bea 100644
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ b/resources/js/components/ui/sidebar/SidebarRail.vue
@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-import { useSidebar } from './utils';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 
-const { toggleSidebar } = useSidebar();
+const { toggleSidebar } = useSidebar()
 </script>
 
 <template>
-    <button
-        data-sidebar="rail"
-        aria-label="Toggle Sidebar"
-        :tabindex="-1"
-        title="Toggle Sidebar"
-        :class="
-            cn(
-                'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-                'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
-                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-                props.class,
-            )
-        "
-        @click="toggleSidebar"
-    >
-        <slot />
-    </button>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarSeparator.vue b/resources/js/components/ui/sidebar/SidebarSeparator.vue
index dcfc7c2b..1803bffb 100644
--- a/resources/js/components/ui/sidebar/SidebarSeparator.vue
+++ b/resources/js/components/ui/sidebar/SidebarSeparator.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import Separator from '@/components/ui/separator/Separator.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <Separator data-sidebar="separator" :class="cn('mx-2 w-auto bg-sidebar-border', props.class)">
-        <slot />
-    </Separator>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+  >
+    <slot />
+  </Separator>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index b8fff3cd..0e4fcbcc 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue';
-import { cn } from '@/lib/utils';
-import { PanelLeft } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
-import { useSidebar } from './utils';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { PanelLeft } from 'lucide-vue-next'
+import { useSidebar } from './utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 
-const { toggleSidebar } = useSidebar();
+const { toggleSidebar } = useSidebar()
 </script>
 
 <template>
-    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
-        <PanelLeft />
-        <span class="sr-only">Toggle Sidebar</span>
-    </Button>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
 </template>
diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
index bed64a82..48da2742 100644
--- a/resources/js/components/ui/sidebar/index.ts
+++ b/resources/js/components/ui/sidebar/index.ts
@@ -1,51 +1,60 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
 
-export { default as Sidebar } from './Sidebar.vue';
-export { default as SidebarContent } from './SidebarContent.vue';
-export { default as SidebarFooter } from './SidebarFooter.vue';
-export { default as SidebarGroup } from './SidebarGroup.vue';
-export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
-export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
-export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
-export { default as SidebarHeader } from './SidebarHeader.vue';
-export { default as SidebarInput } from './SidebarInput.vue';
-export { default as SidebarInset } from './SidebarInset.vue';
-export { default as SidebarMenu } from './SidebarMenu.vue';
-export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
-export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
-export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
-export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
-export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
-export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
-export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
-export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
-export { default as SidebarProvider } from './SidebarProvider.vue';
-export { default as SidebarRail } from './SidebarRail.vue';
-export { default as SidebarSeparator } from './SidebarSeparator.vue';
-export { default as SidebarTrigger } from './SidebarTrigger.vue';
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
 
-export { useSidebar } from './utils';
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-    {
-        variants: {
-            variant: {
-                default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                outline:
-                    'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-            },
-            size: {
-                default: 'h-8 text-sm',
-                sm: 'h-7 text-xs',
-                lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
     },
-);
+  },
+)
 
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
index c19d1214..9d6f8669 100644
--- a/resources/js/components/ui/sidebar/utils.ts
+++ b/resources/js/components/ui/sidebar/utils.ts
@@ -1,19 +1,19 @@
-import { createContext } from 'radix-vue';
-import type { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
-export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = '16rem';
-export const SIDEBAR_WIDTH_MOBILE = '18rem';
-export const SIDEBAR_WIDTH_ICON = '3rem';
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-    state: ComputedRef<'expanded' | 'collapsed'>;
-    open: Ref<boolean>;
-    setOpen: (value: boolean) => void;
-    isMobile: Ref<boolean>;
-    openMobile: Ref<boolean>;
-    setOpenMobile: (value: boolean) => void;
-    toggleSidebar: () => void;
-}>('Sidebar');
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/resources/js/components/ui/skeleton/Skeleton.vue b/resources/js/components/ui/skeleton/Skeleton.vue
index c21b8e9d..153fe2c0 100644
--- a/resources/js/components/ui/skeleton/Skeleton.vue
+++ b/resources/js/components/ui/skeleton/Skeleton.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 interface SkeletonProps {
-    class?: HTMLAttributes['class'];
+  class?: HTMLAttributes['class']
 }
 
-const props = defineProps<SkeletonProps>();
+const props = defineProps<SkeletonProps>()
 </script>
 
 <template>
-    <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
 </template>
diff --git a/resources/js/components/ui/skeleton/index.ts b/resources/js/components/ui/skeleton/index.ts
index 38cc2bac..be21fad3 100644
--- a/resources/js/components/ui/skeleton/index.ts
+++ b/resources/js/components/ui/skeleton/index.ts
@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue';
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/resources/js/components/ui/tooltip/Tooltip.vue b/resources/js/components/ui/tooltip/Tooltip.vue
index 3fdda61f..3ebeecc6 100644
--- a/resources/js/components/ui/tooltip/Tooltip.vue
+++ b/resources/js/components/ui/tooltip/Tooltip.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { TooltipRoot, useForwardPropsEmits, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue';
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<TooltipRootProps>();
-const emits = defineEmits<TooltipRootEmits>();
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-    <TooltipRoot v-bind="forwarded">
-        <slot />
-    </TooltipRoot>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
 </template>
diff --git a/resources/js/components/ui/tooltip/TooltipContent.vue b/resources/js/components/ui/tooltip/TooltipContent.vue
index 66bb73c3..2441afdf 100644
--- a/resources/js/components/ui/tooltip/TooltipContent.vue
+++ b/resources/js/components/ui/tooltip/TooltipContent.vue
@@ -1,39 +1,33 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { TooltipContent, TooltipPortal, useForwardPropsEmits, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
 const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
-    sideOffset: 4,
-});
+  sideOffset: 4,
+})
 
-const emits = defineEmits<TooltipContentEmits>();
+const emits = defineEmits<TooltipContentEmits>()
 
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <TooltipPortal>
-        <TooltipContent
-            v-bind="{ ...forwarded, ...$attrs }"
-            :class="
-                cn(
-                    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-        </TooltipContent>
-    </TooltipPortal>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
 </template>
diff --git a/resources/js/components/ui/tooltip/TooltipProvider.vue b/resources/js/components/ui/tooltip/TooltipProvider.vue
index a99a2094..4b4203e1 100644
--- a/resources/js/components/ui/tooltip/TooltipProvider.vue
+++ b/resources/js/components/ui/tooltip/TooltipProvider.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue';
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
 
-const props = defineProps<TooltipProviderProps>();
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
 </script>
 
 <template>
-    <TooltipProvider v-bind="props">
-        <slot />
-    </TooltipProvider>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
 </template>
diff --git a/resources/js/components/ui/tooltip/TooltipTrigger.vue b/resources/js/components/ui/tooltip/TooltipTrigger.vue
index c4b0509d..36253c63 100644
--- a/resources/js/components/ui/tooltip/TooltipTrigger.vue
+++ b/resources/js/components/ui/tooltip/TooltipTrigger.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue';
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
 
-const props = defineProps<TooltipTriggerProps>();
+const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-    <TooltipTrigger v-bind="props">
-        <slot />
-    </TooltipTrigger>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
 </template>
diff --git a/resources/js/components/ui/tooltip/index.ts b/resources/js/components/ui/tooltip/index.ts
index 94e681c8..5ab96536 100644
--- a/resources/js/components/ui/tooltip/index.ts
+++ b/resources/js/components/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue';
-export { default as TooltipContent } from './TooltipContent.vue';
-export { default as TooltipProvider } from './TooltipProvider.vue';
-export { default as TooltipTrigger } from './TooltipTrigger.vue';
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
