From 456b334fb918df648b77d21bcf5d55bc18ab374e Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 7 Sep 2026 17:18:06 -0300
Subject: [PATCH 1/5] Remove dead code surfaced by the automations removal
 sweep

Closes #334.

Everything here had zero importers on main, verified by grepping for the
import path or class name across resources/js, app, config, routes, tests
and resources/views.

Frontend: the leftovers of the Jan 2026 starter kit (AlertError, AppContent,
AppShell, Breadcrumbs, Heading, Icon, NavFooter, PlaceholderPattern,
UserInfo, WorkspaceSwitcher, GuestLayout, AuthCardLayout, AuthSimpleLayout,
useDateMaska) plus 18 shadcn ui/ directories nothing ever imported.

ui/sheet and ui/range-calendar stay, against what #334 listed: sheet backs
the mobile drawer in ui/sidebar/Sidebar.vue, which AppSidebar renders, and
range-calendar backs ui/date-range-picker, used by the analytics page. The
"no importer outside ui/" criterion missed those transitive edges.

posts/previews/LinkCard.vue also stays; it is live in the X, Threads and
Bluesky previews. The sweep's grep only covered single-quoted imports and
that one is double-quoted.

ui/input/InputMask.vue was not on the list but is an orphan too, and it was
the last thing holding maska.

PHP: PasswordValidationRules, the Ai\Orientation enum (the image pipeline
passes raw 'portrait'/'landscape' strings instead) and QuotaExhaustedException.

npm: axios, embla-carousel-vue, vue-input-otp, vaul-vue and maska drop out of
package.json. axios stays in the tree as a transitive dependency of
@inertiajs/vue3, it just is not ours to declare any more.
---
 app/Concerns/PasswordValidationRules.php      |  31 ---
 app/Enums/Ai/Orientation.php                  |  41 ----
 app/Exceptions/Ai/QuotaExhaustedException.php |  21 --
 package-lock.json                             | 200 ++++--------------
 package.json                                  |   5 -
 resources/js/components/AlertError.vue        |  31 ---
 resources/js/components/AppContent.vue        |  26 ---
 resources/js/components/AppShell.vue          |  22 --
 resources/js/components/Breadcrumbs.vue       |  37 ----
 resources/js/components/Heading.vue           |  17 --
 resources/js/components/Icon.vue              |  38 ----
 resources/js/components/NavFooter.vue         |  44 ----
 .../js/components/PlaceholderPattern.vue      |  33 ---
 resources/js/components/UserInfo.vue          |  33 ---
 resources/js/components/WorkspaceSwitcher.vue |  66 ------
 .../ui/alert-dialog/AlertDialog.vue           |  15 --
 .../ui/alert-dialog/AlertDialogAction.vue     |  18 --
 .../ui/alert-dialog/AlertDialogCancel.vue     |  25 ---
 .../ui/alert-dialog/AlertDialogContent.vue    |  44 ----
 .../alert-dialog/AlertDialogDescription.vue   |  23 --
 .../ui/alert-dialog/AlertDialogFooter.vue     |  22 --
 .../ui/alert-dialog/AlertDialogHeader.vue     |  17 --
 .../ui/alert-dialog/AlertDialogTitle.vue      |  21 --
 .../ui/alert-dialog/AlertDialogTrigger.vue    |  12 --
 .../js/components/ui/alert-dialog/index.ts    |   9 -
 .../ui/aspect-ratio/AspectRatio.vue           |  16 --
 .../js/components/ui/aspect-ratio/index.ts    |   1 -
 .../ui/button-group/ButtonGroup.vue           |  22 --
 .../ui/button-group/ButtonGroupSeparator.vue  |  24 ---
 .../ui/button-group/ButtonGroupText.vue       |  29 ---
 .../js/components/ui/button-group/index.ts    |  25 ---
 .../js/components/ui/carousel/Carousel.vue    |  53 -----
 .../ui/carousel/CarouselContent.vue           |  33 ---
 .../components/ui/carousel/CarouselItem.vue   |  24 ---
 .../components/ui/carousel/CarouselNext.vue   |  41 ----
 .../ui/carousel/CarouselPrevious.vue          |  41 ----
 resources/js/components/ui/carousel/index.ts  |  10 -
 .../js/components/ui/carousel/interface.ts    |  26 ---
 .../js/components/ui/carousel/useCarousel.ts  |  56 -----
 .../ui/context-menu/ContextMenu.vue           |  18 --
 .../context-menu/ContextMenuCheckboxItem.vue  |  39 ----
 .../ui/context-menu/ContextMenuContent.vue    |  37 ----
 .../ui/context-menu/ContextMenuGroup.vue      |  15 --
 .../ui/context-menu/ContextMenuItem.vue       |  38 ----
 .../ui/context-menu/ContextMenuLabel.vue      |  22 --
 .../ui/context-menu/ContextMenuPortal.vue     |  15 --
 .../ui/context-menu/ContextMenuRadioGroup.vue |  21 --
 .../ui/context-menu/ContextMenuRadioItem.vue  |  39 ----
 .../ui/context-menu/ContextMenuSeparator.vue  |  21 --
 .../ui/context-menu/ContextMenuShortcut.vue   |  17 --
 .../ui/context-menu/ContextMenuSub.vue        |  21 --
 .../ui/context-menu/ContextMenuSubContent.vue |  32 ---
 .../ui/context-menu/ContextMenuSubTrigger.vue |  32 ---
 .../ui/context-menu/ContextMenuTrigger.vue    |  17 --
 .../js/components/ui/context-menu/index.ts    |  14 --
 resources/js/components/ui/drawer/Drawer.vue  |  23 --
 .../js/components/ui/drawer/DrawerClose.vue   |  15 --
 .../js/components/ui/drawer/DrawerContent.vue |  38 ----
 .../ui/drawer/DrawerDescription.vue           |  21 --
 .../js/components/ui/drawer/DrawerFooter.vue  |  17 --
 .../js/components/ui/drawer/DrawerHeader.vue  |  17 --
 .../js/components/ui/drawer/DrawerOverlay.vue |  19 --
 .../js/components/ui/drawer/DrawerTitle.vue   |  21 --
 .../js/components/ui/drawer/DrawerTrigger.vue |  15 --
 resources/js/components/ui/drawer/index.ts    |   9 -
 resources/js/components/ui/empty/Empty.vue    |  20 --
 .../js/components/ui/empty/EmptyContent.vue   |  20 --
 .../components/ui/empty/EmptyDescription.vue  |  20 --
 .../js/components/ui/empty/EmptyHeader.vue    |  20 --
 .../js/components/ui/empty/EmptyMedia.vue     |  21 --
 .../js/components/ui/empty/EmptyTitle.vue     |  17 --
 resources/js/components/ui/empty/index.ts     |  26 ---
 .../js/components/ui/hover-card/HoverCard.vue |  19 --
 .../ui/hover-card/HoverCardContent.vue        |  43 ----
 .../ui/hover-card/HoverCardTrigger.vue        |  15 --
 .../js/components/ui/hover-card/index.ts      |   3 -
 .../components/ui/input-group/InputGroup.vue  |  35 ---
 .../ui/input-group/InputGroupAddon.vue        |  36 ----
 .../ui/input-group/InputGroupButton.vue       |  21 --
 .../ui/input-group/InputGroupInput.vue        |  19 --
 .../ui/input-group/InputGroupText.vue         |  19 --
 .../ui/input-group/InputGroupTextarea.vue     |  19 --
 .../js/components/ui/input-group/index.ts     |  59 ------
 .../js/components/ui/input-otp/InputOTP.vue   |  28 ---
 .../components/ui/input-otp/InputOTPGroup.vue |  22 --
 .../ui/input-otp/InputOTPSeparator.vue        |  21 --
 .../components/ui/input-otp/InputOTPSlot.vue  |  32 ---
 resources/js/components/ui/input-otp/index.ts |   4 -
 .../js/components/ui/input/InputMask.vue      |  40 ----
 resources/js/components/ui/input/index.ts     |   1 -
 resources/js/components/ui/kbd/Kbd.vue        |  21 --
 resources/js/components/ui/kbd/KbdGroup.vue   |  17 --
 resources/js/components/ui/kbd/index.ts       |   2 -
 .../ui/native-select/NativeSelect.vue         |  50 -----
 .../ui/native-select/NativeSelectOptGroup.vue |  15 --
 .../ui/native-select/NativeSelectOption.vue   |  15 --
 .../js/components/ui/native-select/index.ts   |   3 -
 .../ui/navigation-menu/NavigationMenu.vue     |  35 ---
 .../navigation-menu/NavigationMenuContent.vue |  31 ---
 .../NavigationMenuIndicator.vue               |  23 --
 .../ui/navigation-menu/NavigationMenuItem.vue |  21 --
 .../ui/navigation-menu/NavigationMenuLink.vue |  26 ---
 .../ui/navigation-menu/NavigationMenuList.vue |  28 ---
 .../navigation-menu/NavigationMenuTrigger.vue |  32 ---
 .../NavigationMenuViewport.vue                |  31 ---
 .../js/components/ui/navigation-menu/index.ts |  14 --
 .../js/components/ui/progress/Progress.vue    |  38 ----
 resources/js/components/ui/progress/index.ts  |   1 -
 .../components/ui/radio-group/RadioGroup.vue  |  25 ---
 .../ui/radio-group/RadioGroupItem.vue         |  40 ----
 .../js/components/ui/radio-group/index.ts     |   2 -
 .../ui/resizable/ResizableHandle.vue          |  30 ---
 .../ui/resizable/ResizablePanel.vue           |  21 --
 .../ui/resizable/ResizablePanelGroup.vue      |  25 ---
 resources/js/components/ui/resizable/index.ts |   3 -
 .../components/ui/scroll-area/ScrollArea.vue  |  33 ---
 .../components/ui/scroll-area/ScrollBar.vue   |  32 ---
 .../js/components/ui/scroll-area/index.ts     |   2 -
 .../js/components/ui/tags-input/TagsInput.vue |  26 ---
 .../ui/tags-input/TagsInputInput.vue          |  17 --
 .../ui/tags-input/TagsInputItem.vue           |  20 --
 .../ui/tags-input/TagsInputItemDelete.vue     |  22 --
 .../ui/tags-input/TagsInputItemText.vue       |  17 --
 .../js/components/ui/tags-input/index.ts      |   5 -
 resources/js/composables/useDateMaska.ts      |  10 -
 resources/js/layouts/GuestLayout.vue          |  38 ----
 resources/js/layouts/auth/AuthCardLayout.vue  |  44 ----
 .../js/layouts/auth/AuthSimpleLayout.vue      |  33 ---
 128 files changed, 39 insertions(+), 3234 deletions(-)
 delete mode 100644 app/Concerns/PasswordValidationRules.php
 delete mode 100644 app/Enums/Ai/Orientation.php
 delete mode 100644 app/Exceptions/Ai/QuotaExhaustedException.php
 delete mode 100644 resources/js/components/AlertError.vue
 delete mode 100644 resources/js/components/AppContent.vue
 delete mode 100644 resources/js/components/AppShell.vue
 delete mode 100644 resources/js/components/Breadcrumbs.vue
 delete mode 100644 resources/js/components/Heading.vue
 delete mode 100644 resources/js/components/Icon.vue
 delete mode 100644 resources/js/components/NavFooter.vue
 delete mode 100644 resources/js/components/PlaceholderPattern.vue
 delete mode 100644 resources/js/components/UserInfo.vue
 delete mode 100644 resources/js/components/WorkspaceSwitcher.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialog.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogAction.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogContent.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogHeader.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
 delete mode 100644 resources/js/components/ui/alert-dialog/index.ts
 delete mode 100644 resources/js/components/ui/aspect-ratio/AspectRatio.vue
 delete mode 100644 resources/js/components/ui/aspect-ratio/index.ts
 delete mode 100644 resources/js/components/ui/button-group/ButtonGroup.vue
 delete mode 100644 resources/js/components/ui/button-group/ButtonGroupSeparator.vue
 delete mode 100644 resources/js/components/ui/button-group/ButtonGroupText.vue
 delete mode 100644 resources/js/components/ui/button-group/index.ts
 delete mode 100644 resources/js/components/ui/carousel/Carousel.vue
 delete mode 100644 resources/js/components/ui/carousel/CarouselContent.vue
 delete mode 100644 resources/js/components/ui/carousel/CarouselItem.vue
 delete mode 100644 resources/js/components/ui/carousel/CarouselNext.vue
 delete mode 100644 resources/js/components/ui/carousel/CarouselPrevious.vue
 delete mode 100644 resources/js/components/ui/carousel/index.ts
 delete mode 100644 resources/js/components/ui/carousel/interface.ts
 delete mode 100644 resources/js/components/ui/carousel/useCarousel.ts
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenu.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuContent.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuGroup.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuItem.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuLabel.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuPortal.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuSeparator.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuShortcut.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuSub.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuSubContent.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
 delete mode 100644 resources/js/components/ui/context-menu/ContextMenuTrigger.vue
 delete mode 100644 resources/js/components/ui/context-menu/index.ts
 delete mode 100644 resources/js/components/ui/drawer/Drawer.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerClose.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerContent.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerDescription.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerFooter.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerHeader.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerOverlay.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerTitle.vue
 delete mode 100644 resources/js/components/ui/drawer/DrawerTrigger.vue
 delete mode 100644 resources/js/components/ui/drawer/index.ts
 delete mode 100644 resources/js/components/ui/empty/Empty.vue
 delete mode 100644 resources/js/components/ui/empty/EmptyContent.vue
 delete mode 100644 resources/js/components/ui/empty/EmptyDescription.vue
 delete mode 100644 resources/js/components/ui/empty/EmptyHeader.vue
 delete mode 100644 resources/js/components/ui/empty/EmptyMedia.vue
 delete mode 100644 resources/js/components/ui/empty/EmptyTitle.vue
 delete mode 100644 resources/js/components/ui/empty/index.ts
 delete mode 100644 resources/js/components/ui/hover-card/HoverCard.vue
 delete mode 100644 resources/js/components/ui/hover-card/HoverCardContent.vue
 delete mode 100644 resources/js/components/ui/hover-card/HoverCardTrigger.vue
 delete mode 100644 resources/js/components/ui/hover-card/index.ts
 delete mode 100644 resources/js/components/ui/input-group/InputGroup.vue
 delete mode 100644 resources/js/components/ui/input-group/InputGroupAddon.vue
 delete mode 100644 resources/js/components/ui/input-group/InputGroupButton.vue
 delete mode 100644 resources/js/components/ui/input-group/InputGroupInput.vue
 delete mode 100644 resources/js/components/ui/input-group/InputGroupText.vue
 delete mode 100644 resources/js/components/ui/input-group/InputGroupTextarea.vue
 delete mode 100644 resources/js/components/ui/input-group/index.ts
 delete mode 100644 resources/js/components/ui/input-otp/InputOTP.vue
 delete mode 100644 resources/js/components/ui/input-otp/InputOTPGroup.vue
 delete mode 100644 resources/js/components/ui/input-otp/InputOTPSeparator.vue
 delete mode 100644 resources/js/components/ui/input-otp/InputOTPSlot.vue
 delete mode 100644 resources/js/components/ui/input-otp/index.ts
 delete mode 100644 resources/js/components/ui/input/InputMask.vue
 delete mode 100644 resources/js/components/ui/kbd/Kbd.vue
 delete mode 100644 resources/js/components/ui/kbd/KbdGroup.vue
 delete mode 100644 resources/js/components/ui/kbd/index.ts
 delete mode 100644 resources/js/components/ui/native-select/NativeSelect.vue
 delete mode 100644 resources/js/components/ui/native-select/NativeSelectOptGroup.vue
 delete mode 100644 resources/js/components/ui/native-select/NativeSelectOption.vue
 delete mode 100644 resources/js/components/ui/native-select/index.ts
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenu.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuList.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
 delete mode 100644 resources/js/components/ui/navigation-menu/index.ts
 delete mode 100644 resources/js/components/ui/progress/Progress.vue
 delete mode 100644 resources/js/components/ui/progress/index.ts
 delete mode 100644 resources/js/components/ui/radio-group/RadioGroup.vue
 delete mode 100644 resources/js/components/ui/radio-group/RadioGroupItem.vue
 delete mode 100644 resources/js/components/ui/radio-group/index.ts
 delete mode 100644 resources/js/components/ui/resizable/ResizableHandle.vue
 delete mode 100644 resources/js/components/ui/resizable/ResizablePanel.vue
 delete mode 100644 resources/js/components/ui/resizable/ResizablePanelGroup.vue
 delete mode 100644 resources/js/components/ui/resizable/index.ts
 delete mode 100644 resources/js/components/ui/scroll-area/ScrollArea.vue
 delete mode 100644 resources/js/components/ui/scroll-area/ScrollBar.vue
 delete mode 100644 resources/js/components/ui/scroll-area/index.ts
 delete mode 100644 resources/js/components/ui/tags-input/TagsInput.vue
 delete mode 100644 resources/js/components/ui/tags-input/TagsInputInput.vue
 delete mode 100644 resources/js/components/ui/tags-input/TagsInputItem.vue
 delete mode 100644 resources/js/components/ui/tags-input/TagsInputItemDelete.vue
 delete mode 100644 resources/js/components/ui/tags-input/TagsInputItemText.vue
 delete mode 100644 resources/js/components/ui/tags-input/index.ts
 delete mode 100644 resources/js/composables/useDateMaska.ts
 delete mode 100644 resources/js/layouts/GuestLayout.vue
 delete mode 100644 resources/js/layouts/auth/AuthCardLayout.vue
 delete mode 100644 resources/js/layouts/auth/AuthSimpleLayout.vue

diff --git a/app/Concerns/PasswordValidationRules.php b/app/Concerns/PasswordValidationRules.php
deleted file mode 100644
index 900021773..000000000
--- a/app/Concerns/PasswordValidationRules.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Concerns;
-
-use Illuminate\Contracts\Validation\Rule;
-use Illuminate\Validation\Rules\Password;
-
-trait PasswordValidationRules
-{
-    /**
-     * Get the validation rules used to validate passwords.
-     *
-     * @return array<int, Rule|array<mixed>|string>
-     */
-    protected function passwordRules(): array
-    {
-        return ['required', 'string', Password::default(), 'confirmed'];
-    }
-
-    /**
-     * Get the validation rules used to validate the current password.
-     *
-     * @return array<int, Rule|array<mixed>|string>
-     */
-    protected function currentPasswordRules(): array
-    {
-        return ['required', 'string', 'current_password'];
-    }
-}
diff --git a/app/Enums/Ai/Orientation.php b/app/Enums/Ai/Orientation.php
deleted file mode 100644
index 95e7d733d..000000000
--- a/app/Enums/Ai/Orientation.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Enums\Ai;
-
-enum Orientation: string
-{
-    case Square = 'square';
-    case Portrait = 'portrait';
-    case Vertical = 'vertical';
-    case Horizontal = 'horizontal';
-
-    /**
-     * Aspect ratio used in prompts to describe the desired framing to the model.
-     */
-    public function aspectRatio(): string
-    {
-        return match ($this) {
-            self::Square => '1:1',
-            self::Portrait => '4:5',
-            self::Vertical => '9:16',
-            self::Horizontal => '16:9',
-        };
-    }
-
-    /**
-     * Size string supported by the AI image SDK (1:1 / 2:3 / 3:2).
-     *
-     * OpenAI's image API only accepts these three ratios, so we map every
-     * orientation to the closest supported one. Gemini accepts the same set.
-     */
-    public function imageApiSize(): string
-    {
-        return match ($this) {
-            self::Square => '1:1',
-            self::Portrait, self::Vertical => '2:3',
-            self::Horizontal => '3:2',
-        };
-    }
-}
diff --git a/app/Exceptions/Ai/QuotaExhaustedException.php b/app/Exceptions/Ai/QuotaExhaustedException.php
deleted file mode 100644
index aefdfa53a..000000000
--- a/app/Exceptions/Ai/QuotaExhaustedException.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Exceptions\Ai;
-
-use App\Enums\Ai\UsageType;
-use RuntimeException;
-
-class QuotaExhaustedException extends RuntimeException
-{
-    public function __construct(
-        public readonly UsageType $type,
-        public readonly int $used,
-        public readonly int $limit,
-    ) {
-        parent::__construct(
-            sprintf('%s quota exhausted this month (%d of %d used).', ucfirst($type->value), $used, $limit),
-        );
-    }
-}
diff --git a/package-lock.json b/package-lock.json
index 0df5a2b4f..e161daa7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,23 +9,18 @@
                 "@tabler/icons-vue": "^3.36.1",
                 "@tailwindcss/typography": "^0.5.19",
                 "@vueuse/core": "^12.8.2",
-                "axios": "^1.13.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "dayjs": "^1.11.19",
-                "embla-carousel-vue": "^8.6.0",
                 "highlight.js": "^11.11.1",
                 "laravel-vite-plugin": "^3.1.0",
                 "laravel-vue-i18n": "^2.8.0",
-                "maska": "^3.2.0",
                 "posthog-js": "^1.364.2",
                 "reka-ui": "^2.9.10",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
-                "vaul-vue": "^0.4.1",
                 "vue": "^3.5.13",
-                "vue-input-otp": "^0.3.2",
                 "vue-sonner": "^2.0.9"
             },
             "devDependencies": {
@@ -2438,6 +2433,8 @@
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
             "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "debug": "4"
             },
@@ -2653,7 +2650,9 @@
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "license": "MIT"
+            "license": "MIT",
+            "optional": true,
+            "peer": true
         },
         "node_modules/available-typed-arrays": {
             "version": "1.0.7",
@@ -2676,6 +2675,8 @@
             "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz",
             "integrity": "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "follow-redirects": "^1.16.0",
                 "form-data": "^4.0.5",
@@ -2743,6 +2744,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
             "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
@@ -2886,6 +2888,8 @@
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
             "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "delayed-stream": "~1.0.0"
             },
@@ -3052,6 +3056,7 @@
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
             "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
@@ -3119,6 +3124,8 @@
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
             "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -3158,6 +3165,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
             "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.1",
@@ -3168,34 +3176,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/embla-carousel": {
-            "version": "8.6.0",
-            "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
-            "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-            "license": "MIT"
-        },
-        "node_modules/embla-carousel-reactive-utils": {
-            "version": "8.6.0",
-            "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
-            "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
-            "license": "MIT",
-            "peerDependencies": {
-                "embla-carousel": "8.6.0"
-            }
-        },
-        "node_modules/embla-carousel-vue": {
-            "version": "8.6.0",
-            "resolved": "https://registry.npmjs.org/embla-carousel-vue/-/embla-carousel-vue-8.6.0.tgz",
-            "integrity": "sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==",
-            "license": "MIT",
-            "dependencies": {
-                "embla-carousel": "8.6.0",
-                "embla-carousel-reactive-utils": "8.6.0"
-            },
-            "peerDependencies": {
-                "vue": "^3.2.37"
-            }
-        },
         "node_modules/emoji-regex": {
             "version": "10.6.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -3328,6 +3308,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
             "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -3337,6 +3318,7 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
             "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -3346,6 +3328,7 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
             "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0"
@@ -3358,6 +3341,7 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
             "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
@@ -4089,6 +4073,8 @@
                 }
             ],
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=4.0"
             },
@@ -4119,6 +4105,8 @@
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
             "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "asynckit": "^0.4.0",
                 "combined-stream": "^1.0.8",
@@ -4148,6 +4136,7 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "devOptional": true,
             "license": "MIT",
             "funding": {
                 "url": "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/sponsors/ljharb"
@@ -4221,6 +4210,7 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
             "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.2",
@@ -4245,6 +4235,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
             "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.1",
@@ -4332,6 +4323,7 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
             "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -4403,6 +4395,7 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
             "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -4415,6 +4408,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
             "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "has-symbols": "^1.0.3"
@@ -4430,6 +4424,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
@@ -4462,6 +4457,8 @@
             "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
             "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "agent-base": "6",
                 "debug": "4"
@@ -5379,16 +5376,11 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
-        "node_modules/maska": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
-            "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
-            "license": "MIT"
-        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
             "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -5423,6 +5415,8 @@
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">= 0.6"
             }
@@ -5432,6 +5426,8 @@
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "mime-db": "1.52.0"
             },
@@ -5469,6 +5465,7 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "devOptional": true,
             "license": "MIT"
         },
         "node_modules/muggle-string": {
@@ -6062,6 +6059,8 @@
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
             "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
             "license": "MIT",
+            "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=10"
             }
@@ -7157,114 +7156,6 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "license": "MIT"
         },
-        "node_modules/vaul-vue": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/vaul-vue/-/vaul-vue-0.4.1.tgz",
-            "integrity": "sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==",
-            "dependencies": {
-                "@vueuse/core": "^10.8.0",
-                "reka-ui": "^2.0.0",
-                "vue": "^3.4.5"
-            },
-            "peerDependencies": {
-                "reka-ui": "^2.0.0",
-                "vue": "^3.3.0"
-            }
-        },
-        "node_modules/vaul-vue/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/vaul-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": "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/sponsors/antfu"
-            }
-        },
-        "node_modules/vaul-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": "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/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/vaul-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": "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/sponsors/antfu"
-            }
-        },
-        "node_modules/vaul-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": "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/sponsors/antfu"
-            }
-        },
-        "node_modules/vaul-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": "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/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/vite": {
             "version": "8.0.16",
             "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
@@ -7429,19 +7320,6 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/vue-input-otp": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/vue-input-otp/-/vue-input-otp-0.3.2.tgz",
-            "integrity": "sha512-QMl1842WB6uNAsK4+mZXIskb00TOfahH3AQt8rpRecbtQnOp+oHSUbL/Z3wekfy6pAl+hyN3e1rCUSkCMzbDLQ==",
-            "license": "MIT",
-            "dependencies": {
-                "@vueuse/core": "^12.8.2",
-                "reka-ui": "^2.6.1"
-            },
-            "peerDependencies": {
-                "vue": "^3.2.0"
-            }
-        },
         "node_modules/vue-sonner": {
             "version": "2.0.9",
             "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
diff --git a/package.json b/package.json
index e54d3f104..bcaa84783 100644
--- a/package.json
+++ b/package.json
@@ -41,23 +41,18 @@
         "@tabler/icons-vue": "^3.36.1",
         "@tailwindcss/typography": "^0.5.19",
         "@vueuse/core": "^12.8.2",
-        "axios": "^1.13.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
-        "embla-carousel-vue": "^8.6.0",
         "highlight.js": "^11.11.1",
         "laravel-vite-plugin": "^3.1.0",
         "laravel-vue-i18n": "^2.8.0",
-        "maska": "^3.2.0",
         "posthog-js": "^1.364.2",
         "reka-ui": "^2.9.10",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
-        "vaul-vue": "^0.4.1",
         "vue": "^3.5.13",
-        "vue-input-otp": "^0.3.2",
         "vue-sonner": "^2.0.9"
     },
     "optionalDependencies": {
diff --git a/resources/js/components/AlertError.vue b/resources/js/components/AlertError.vue
deleted file mode 100644
index 1acc5de38..000000000
--- a/resources/js/components/AlertError.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { IconAlertCircle } from '@tabler/icons-vue';
-import { computed } from 'vue';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-
-interface Props {
-    errors: string[];
-    title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    title: 'Something went wrong.',
-});
-
-const uniqueErrors = computed(() => Array.from(new Set(props.errors)));
-</script>
-
-<template>
-    <Alert variant="destructive">
-        <IconAlertCircle class="size-4" />
-        <AlertTitle>{{ title }}</AlertTitle>
-        <AlertDescription>
-            <ul class="list-inside list-disc text-sm">
-                <li v-for="(error, index) in uniqueErrors" :key="index">
-                    {{ error }}
-                </li>
-            </ul>
-        </AlertDescription>
-    </Alert>
-</template>
diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
deleted file mode 100644
index dbca1b5d0..000000000
--- a/resources/js/components/AppContent.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { SidebarInset } from '@/components/ui/sidebar';
-
-interface Props {
-    variant?: 'header' | 'sidebar';
-    class?: string;
-}
-
-const props = defineProps<Props>();
-const className = computed(() => props.class);
-</script>
-
-<template>
-    <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
-        <slot />
-    </SidebarInset>
-    <main
-        v-else
-        class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
-        :class="className"
-    >
-        <slot />
-    </main>
-</template>
diff --git a/resources/js/components/AppShell.vue b/resources/js/components/AppShell.vue
deleted file mode 100644
index 1088f4f1f..000000000
--- a/resources/js/components/AppShell.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { usePage } from '@inertiajs/vue3';
-
-import { SidebarProvider } from '@/components/ui/sidebar';
-
-interface Props {
-    variant?: 'header' | 'sidebar';
-}
-
-defineProps<Props>();
-
-const isOpen = usePage().props.sidebarOpen;
-</script>
-
-<template>
-    <div v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
-        <slot />
-    </div>
-    <SidebarProvider v-else :default-open="isOpen">
-        <slot />
-    </SidebarProvider>
-</template>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
deleted file mode 100644
index 60190204a..000000000
--- a/resources/js/components/Breadcrumbs.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
-
-defineProps<{
-    breadcrumbs: BreadcrumbItemType[];
-}>();
-</script>
-
-<template>
-    <Breadcrumb>
-        <BreadcrumbList>
-            <template v-for="(item, index) in breadcrumbs" :key="index">
-                <BreadcrumbItem>
-                    <template v-if="index === breadcrumbs.length - 1">
-                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                    </template>
-                    <template v-else>
-                        <BreadcrumbLink as-child>
-                            <Link :href="item.href ?? '#'">{{ item.title }}</Link>
-                        </BreadcrumbLink>
-                    </template>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-            </template>
-        </BreadcrumbList>
-    </Breadcrumb>
-</template>
diff --git a/resources/js/components/Heading.vue b/resources/js/components/Heading.vue
deleted file mode 100644
index f50187afd..000000000
--- a/resources/js/components/Heading.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    title: string;
-    description?: string;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <div class="mb-8 space-y-0.5">
-        <h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
-        <p v-if="description" class="text-sm text-muted-foreground">
-            {{ description }}
-        </p>
-    </div>
-</template>
diff --git a/resources/js/components/Icon.vue b/resources/js/components/Icon.vue
deleted file mode 100644
index e4ab86219..000000000
--- a/resources/js/components/Icon.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import * as icons from '@tabler/icons-vue';
-import { computed } from 'vue';
-
-import { cn } from '@/lib/utils';
-
-interface Props {
-    name: string;
-    class?: string;
-    size?: number | string;
-    color?: string;
-    strokeWidth?: number | string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    class: '',
-    size: 16,
-    strokeWidth: 2,
-});
-
-const className = computed(() => cn('h-4 w-4', props.class));
-
-const icon = computed(() => {
-    // Tabler icons are prefixed with 'Icon', e.g., 'IconUser', 'IconSettings'
-    const iconName = 'Icon' + props.name.charAt(0).toUpperCase() + props.name.slice(1);
-    return (icons as Record<string, any>)[iconName];
-});
-</script>
-
-<template>
-    <component
-        :is="icon"
-        :class="className"
-        :size="size"
-        :stroke-width="strokeWidth"
-        :color="color"
-    />
-</template>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
deleted file mode 100644
index 6ae1d5f24..000000000
--- a/resources/js/components/NavFooter.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import {
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-} from '@/components/ui/sidebar';
-import { toUrl } from '@/lib/utils';
-import { type NavItem } from '@/types';
-
-interface Props {
-    items: NavItem[];
-    class?: string;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <SidebarGroup
-        :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`"
-    >
-        <SidebarGroupContent>
-            <SidebarMenu>
-                <SidebarMenuItem v-for="item in items" :key="item.title">
-                    <SidebarMenuButton
-                        class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
-                        as-child
-                    >
-                        <a
-                            :href="toUrl(item.href)"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <component :is="item.icon" />
-                            <span>{{ item.title }}</span>
-                        </a>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarGroupContent>
-    </SidebarGroup>
-</template>
diff --git a/resources/js/components/PlaceholderPattern.vue b/resources/js/components/PlaceholderPattern.vue
deleted file mode 100644
index 95556e3bf..000000000
--- a/resources/js/components/PlaceholderPattern.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const patternId = computed(
-    () => `pattern-${Math.random().toString(36).substring(2, 9)}`,
-);
-</script>
-
-<template>
-    <svg
-        class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
-        fill="none"
-    >
-        <defs>
-            <pattern
-                :id="patternId"
-                x="0"
-                y="0"
-                width="8"
-                height="8"
-                patternUnits="userSpaceOnUse"
-            >
-                <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
-            </pattern>
-        </defs>
-        <rect
-            stroke="none"
-            :fill="`url(#${patternId})`"
-            width="100%"
-            height="100%"
-        ></rect>
-    </svg>
-</template>
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
deleted file mode 100644
index c015058c1..000000000
--- a/resources/js/components/UserInfo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { Avatar } from '@/components/ui/avatar';
-import type { User } from '@/types';
-
-type Props = {
-    user: User;
-    showEmail?: boolean;
-    avatarClass?: string;
-    fallbackClass?: string;
-};
-
-withDefaults(defineProps<Props>(), {
-    showEmail: false,
-});
-</script>
-
-<template>
-    <Avatar
-        :src="user.photo_url"
-        :name="user.name"
-        :class="['h-8 w-8 rounded-md border-2 border-foreground', avatarClass]"
-        :fallback-class="
-            fallbackClass ?? 'bg-violet-100 text-violet-700 font-bold'
-        "
-    />
-
-    <div class="grid flex-1 text-left text-sm leading-tight">
-        <span class="truncate font-bold text-foreground">{{ user.name }}</span>
-        <span v-if="showEmail" class="truncate text-xs font-medium text-foreground/60">{{
-            user.email
-        }}</span>
-    </div>
-</template>
diff --git a/resources/js/components/WorkspaceSwitcher.vue b/resources/js/components/WorkspaceSwitcher.vue
deleted file mode 100644
index 15c14ca1b..000000000
--- a/resources/js/components/WorkspaceSwitcher.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { router, usePage } from '@inertiajs/vue3';
-import { IconCheck, IconPlus, IconSelector } from '@tabler/icons-vue';
-import { computed } from 'vue';
-
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { create as createWorkspaceRoute, switchMethod } from '@/routes/app/workspaces';
-
-interface Workspace {
-    id: string;
-    name: string;
-}
-
-const page = usePage();
-const currentWorkspace = computed<Workspace | null>(() => page.props.auth.currentWorkspace as Workspace | null);
-const workspaces = computed<Workspace[]>(() => page.props.auth.workspaces as Workspace[]);
-
-const switchWorkspace = (workspace: Workspace) => {
-    router.post(switchMethod.url(workspace.id), {}, {
-        preserveScroll: true,
-    });
-};
-
-const createWorkspace = () => {
-    router.visit(createWorkspaceRoute.url());
-};
-</script>
-
-<template>
-    <DropdownMenu>
-        <DropdownMenuTrigger :as-child="true">
-            <Button variant="outline" class="w-full justify-between gap-2 px-3" :class="{ 'text-muted-foreground': !currentWorkspace }">
-                <span class="truncate">{{ currentWorkspace?.name || 'Select workspace' }}</span>
-                <IconSelector class="h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" class="w-56">
-            <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-                v-for="workspace in workspaces"
-                :key="workspace.id"
-                class="cursor-pointer"
-                @click="switchWorkspace(workspace)"
-            >
-                <div class="flex w-full items-center justify-between">
-                    <span class="truncate">{{ workspace.name }}</span>
-                    <IconCheck v-if="currentWorkspace?.id === workspace.id" class="h-4 w-4 shrink-0" />
-                </div>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem class="cursor-pointer" @click="createWorkspace">
-                <IconPlus class="mr-2 h-4 w-4" />
-                Create workspace
-            </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialog.vue b/resources/js/components/ui/alert-dialog/AlertDialog.vue
deleted file mode 100644
index b6e6b4bf8..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialog.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogAction.vue b/resources/js/components/ui/alert-dialog/AlertDialogAction.vue
deleted file mode 100644
index 09cf6fcbc..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogAction.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue b/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
deleted file mode 100644
index e261894e5..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      props.class,
-    )"
-  >
-    <slot />
-  </AlertDialogCancel>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogContent.vue b/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
deleted file mode 100644
index ea0962b6b..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      data-slot="alert-dialog-overlay"
-      class="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"
-    />
-    <AlertDialogContent
-      data-slot="alert-dialog-content"
-      v-bind="{ ...$attrs, ...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 max-h-[85dvh] overflow-y-auto rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue b/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
deleted file mode 100644
index 69642c9a5..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <AlertDialogDescription
-    data-slot="alert-dialog-description"
-    v-bind="delegatedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </AlertDialogDescription>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue b/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
deleted file mode 100644
index 50d4098ea..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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="alert-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/alert-dialog/AlertDialogHeader.vue b/resources/js/components/ui/alert-dialog/AlertDialogHeader.vue
deleted file mode 100644
index dbe72a764..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogHeader.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<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="alert-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/alert-dialog/AlertDialogTitle.vue b/resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
deleted file mode 100644
index bb97e4d4a..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <AlertDialogTitle
-    data-slot="alert-dialog-title"
-    v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue b/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
deleted file mode 100644
index 98d40ee08..000000000
--- a/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
-
-const props = defineProps<AlertDialogTriggerProps>()
-</script>
-
-<template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
-</template>
diff --git a/resources/js/components/ui/alert-dialog/index.ts b/resources/js/components/ui/alert-dialog/index.ts
deleted file mode 100644
index cf1b45dff..000000000
--- a/resources/js/components/ui/alert-dialog/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/resources/js/components/ui/aspect-ratio/AspectRatio.vue b/resources/js/components/ui/aspect-ratio/AspectRatio.vue
deleted file mode 100644
index 857c208de..000000000
--- a/resources/js/components/ui/aspect-ratio/AspectRatio.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { AspectRatioProps } from "reka-ui"
-import { AspectRatio } from "reka-ui"
-
-const props = defineProps<AspectRatioProps>()
-</script>
-
-<template>
-  <AspectRatio
-    v-slot="slotProps"
-    data-slot="aspect-ratio"
-    v-bind="props"
-  >
-    <slot v-bind="slotProps" />
-  </AspectRatio>
-</template>
diff --git a/resources/js/components/ui/aspect-ratio/index.ts b/resources/js/components/ui/aspect-ratio/index.ts
deleted file mode 100644
index e658f55a0..000000000
--- a/resources/js/components/ui/aspect-ratio/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AspectRatio } from "./AspectRatio.vue"
diff --git a/resources/js/components/ui/button-group/ButtonGroup.vue b/resources/js/components/ui/button-group/ButtonGroup.vue
deleted file mode 100644
index 9dbef6ac2..000000000
--- a/resources/js/components/ui/button-group/ButtonGroup.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { ButtonGroupVariants } from "."
-import { cn } from "@/lib/utils"
-import { buttonGroupVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  orientation?: ButtonGroupVariants["orientation"]
-}>()
-</script>
-
-<template>
-  <div
-    role="group"
-    data-slot="button-group"
-    :data-orientation="props.orientation"
-    :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/button-group/ButtonGroupSeparator.vue b/resources/js/components/ui/button-group/ButtonGroupSeparator.vue
deleted file mode 100644
index e069dd5cc..000000000
--- a/resources/js/components/ui/button-group/ButtonGroupSeparator.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { cn } from "@/lib/utils"
-import { Separator } from '@/components/ui/separator'
-
-const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
-})
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <Separator
-    data-slot="button-group-separator"
-    v-bind="delegatedProps"
-    :orientation="props.orientation"
-    :class="cn(
-      'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
-      props.class,
-    )"
-  />
-</template>
diff --git a/resources/js/components/ui/button-group/ButtonGroupText.vue b/resources/js/components/ui/button-group/ButtonGroupText.vue
deleted file mode 100644
index c436843e4..000000000
--- a/resources/js/components/ui/button-group/ButtonGroupText.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonGroupVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-interface Props extends PrimitiveProps {
-  class?: HTMLAttributes["class"]
-  orientation?: ButtonGroupVariants["orientation"]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "div",
-})
-</script>
-
-<template>
-  <Primitive
-    role="group"
-    data-slot="button-group"
-    :data-orientation="props.orientation"
-    :as="as"
-    :as-child="asChild"
-    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/resources/js/components/ui/button-group/index.ts b/resources/js/components/ui/button-group/index.ts
deleted file mode 100644
index 474566fa6..000000000
--- a/resources/js/components/ui/button-group/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as ButtonGroup } from "./ButtonGroup.vue"
-export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.vue"
-export { default as ButtonGroupText } from "./ButtonGroupText.vue"
-
-export const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-)
-
-export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>
diff --git a/resources/js/components/ui/carousel/Carousel.vue b/resources/js/components/ui/carousel/Carousel.vue
deleted file mode 100644
index 4575682ae..000000000
--- a/resources/js/components/ui/carousel/Carousel.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useProvideCarousel } from "./useCarousel"
-
-const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
-  orientation: "horizontal",
-})
-
-const emits = defineEmits<CarouselEmits>()
-
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
-
-defineExpose({
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
-
-  if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
-  }
-
-  if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
-  }
-}
-</script>
-
-<template>
-  <div
-    data-slot="carousel"
-    :class="cn('relative', props.class)"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    @keydown="onKeyDown"
-  >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
-  </div>
-</template>
diff --git a/resources/js/components/ui/carousel/CarouselContent.vue b/resources/js/components/ui/carousel/CarouselContent.vue
deleted file mode 100644
index bd3db7e7b..000000000
--- a/resources/js/components/ui/carousel/CarouselContent.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<WithClassAsProps>()
-
-const { carouselRef, orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    ref="carouselRef"
-    data-slot="carousel-content"
-    class="overflow-hidden"
-  >
-    <div
-      :class="
-        cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
diff --git a/resources/js/components/ui/carousel/CarouselItem.vue b/resources/js/components/ui/carousel/CarouselItem.vue
deleted file mode 100644
index 39df4c63e..000000000
--- a/resources/js/components/ui/carousel/CarouselItem.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    data-slot="carousel-item"
-    role="group"
-    aria-roledescription="slide"
-    :class="cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/carousel/CarouselNext.vue b/resources/js/components/ui/carousel/CarouselNext.vue
deleted file mode 100644
index ad88c0085..000000000
--- a/resources/js/components/ui/carousel/CarouselNext.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { IconArrowRight } from "@tabler/icons-vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
-
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
-
-const { orientation, canScrollNext, scrollNext } = useCarousel()
-</script>
-
-<template>
-  <Button
-    data-slot="carousel-next"
-    :disabled="!canScrollNext"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -right-12 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    :variant="variant"
-    :size="size"
-    @click="scrollNext"
-  >
-    <slot>
-      <IconArrowRight />
-      <span class="sr-only">Next Slide</span>
-    </slot>
-  </Button>
-</template>
diff --git a/resources/js/components/ui/carousel/CarouselPrevious.vue b/resources/js/components/ui/carousel/CarouselPrevious.vue
deleted file mode 100644
index 80785a85d..000000000
--- a/resources/js/components/ui/carousel/CarouselPrevious.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { IconArrowLeft } from "@tabler/icons-vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
-
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
-
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <Button
-    data-slot="carousel-previous"
-    :disabled="!canScrollPrev"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -left-12 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    :variant="variant"
-    :size="size"
-    @click="scrollPrev"
-  >
-    <slot>
-      <IconArrowLeft />
-      <span class="sr-only">Previous Slide</span>
-    </slot>
-  </Button>
-</template>
diff --git a/resources/js/components/ui/carousel/index.ts b/resources/js/components/ui/carousel/index.ts
deleted file mode 100644
index 154bfcbe9..000000000
--- a/resources/js/components/ui/carousel/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { default as Carousel } from "./Carousel.vue"
-export { default as CarouselContent } from "./CarouselContent.vue"
-export { default as CarouselItem } from "./CarouselItem.vue"
-export { default as CarouselNext } from "./CarouselNext.vue"
-export { default as CarouselPrevious } from "./CarouselPrevious.vue"
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from "./interface"
-
-export { useCarousel } from "./useCarousel"
diff --git a/resources/js/components/ui/carousel/interface.ts b/resources/js/components/ui/carousel/interface.ts
deleted file mode 100644
index 74eaf36d0..000000000
--- a/resources/js/components/ui/carousel/interface.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type useEmblaCarousel from "embla-carousel-vue"
-import type {
-  EmblaCarouselVueType,
-} from "embla-carousel-vue"
-import type { HTMLAttributes, UnwrapRef } from "vue"
-
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
-
-export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-}
-
-export interface CarouselEmits {
-  (e: "init-api", payload: UnwrapRefCarouselApi): void
-}
-
-export interface WithClassAsProps {
-  class?: HTMLAttributes["class"]
-}
diff --git a/resources/js/components/ui/carousel/useCarousel.ts b/resources/js/components/ui/carousel/useCarousel.ts
deleted file mode 100644
index 32e35ca09..000000000
--- a/resources/js/components/ui/carousel/useCarousel.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
-import { createInjectionState } from "@vueuse/core"
-import emblaCarouselVue from "embla-carousel-vue"
-import { onMounted, ref } from "vue"
-
-const [useProvideCarousel, useInjectCarousel] = createInjectionState(
-  ({
-    opts,
-    orientation,
-    plugins,
-  }: CarouselProps, emits: CarouselEmits) => {
-    const [emblaNode, emblaApi] = emblaCarouselVue({
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    }, plugins)
-
-    function scrollPrev() {
-      emblaApi.value?.scrollPrev()
-    }
-    function scrollNext() {
-      emblaApi.value?.scrollNext()
-    }
-
-    const canScrollNext = ref(false)
-    const canScrollPrev = ref(false)
-
-    function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
-    }
-
-    onMounted(() => {
-      if (!emblaApi.value)
-        return
-
-      emblaApi.value?.on("init", onSelect)
-      emblaApi.value?.on("reInit", onSelect)
-      emblaApi.value?.on("select", onSelect)
-
-      emits("init-api", emblaApi.value)
-    })
-
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
-  },
-)
-
-function useCarousel() {
-  const carouselState = useInjectCarousel()
-
-  if (!carouselState)
-    throw new Error("useCarousel must be used within a <Carousel />")
-
-  return carouselState
-}
-
-export { useCarousel, useProvideCarousel }
diff --git a/resources/js/components/ui/context-menu/ContextMenu.vue b/resources/js/components/ui/context-menu/ContextMenu.vue
deleted file mode 100644
index b4c6c0934..000000000
--- a/resources/js/components/ui/context-menu/ContextMenu.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
-import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<ContextMenuRootProps>()
-const emits = defineEmits<ContextMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <ContextMenuRoot
-    data-slot="context-menu"
-    v-bind="forwarded"
-  >
-    <slot />
-  </ContextMenuRoot>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue b/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
deleted file mode 100644
index fa9968433..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconCheck } from "@tabler/icons-vue"
-import {
-  ContextMenuCheckboxItem,
-  ContextMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuCheckboxItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuCheckboxItem
-    data-slot="context-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">
-      <ContextMenuItemIndicator>
-        <slot name="indicator-icon">
-          <IconCheck class="size-4" />
-        </slot>
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuCheckboxItem>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuContent.vue b/resources/js/components/ui/context-menu/ContextMenuContent.vue
deleted file mode 100644
index 2fbc5568c..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuContent.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuPortal>
-    <ContextMenuContent
-      data-slot="context-menu-content"
-      v-bind="{ ...$attrs, ...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-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-        props.class,
-      )"
-    >
-      <slot />
-    </ContextMenuContent>
-  </ContextMenuPortal>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuGroup.vue b/resources/js/components/ui/context-menu/ContextMenuGroup.vue
deleted file mode 100644
index 9af9b2665..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuGroup.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuGroupProps } from "reka-ui"
-import { ContextMenuGroup } from "reka-ui"
-
-const props = defineProps<ContextMenuGroupProps>()
-</script>
-
-<template>
-  <ContextMenuGroup
-    data-slot="context-menu-group"
-    v-bind="props"
-  >
-    <slot />
-  </ContextMenuGroup>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuItem.vue b/resources/js/components/ui/context-menu/ContextMenuItem.vue
deleted file mode 100644
index b6a4c48e5..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuItem.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<ContextMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
-const emits = defineEmits<ContextMenuItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuItem
-    data-slot="context-menu-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwarded"
-    :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 />
-  </ContextMenuItem>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuLabel.vue b/resources/js/components/ui/context-menu/ContextMenuLabel.vue
deleted file mode 100644
index 80d051957..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuLabel.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ContextMenuLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <ContextMenuLabel
-    data-slot="context-menu-label"
-    :data-inset="inset ? '' : undefined"
-    v-bind="delegatedProps"
-    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
-  >
-    <slot />
-  </ContextMenuLabel>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuPortal.vue b/resources/js/components/ui/context-menu/ContextMenuPortal.vue
deleted file mode 100644
index c50a2b330..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuPortal.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuPortalProps } from "reka-ui"
-import { ContextMenuPortal } from "reka-ui"
-
-const props = defineProps<ContextMenuPortalProps>()
-</script>
-
-<template>
-  <ContextMenuPortal
-    data-slot="context-menu-portal"
-    v-bind="props"
-  >
-    <slot />
-  </ContextMenuPortal>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue b/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
deleted file mode 100644
index 25372ed82..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui"
-import {
-  ContextMenuRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
-
-const props = defineProps<ContextMenuRadioGroupProps>()
-const emits = defineEmits<ContextMenuRadioGroupEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <ContextMenuRadioGroup
-    data-slot="context-menu-radio-group"
-    v-bind="forwarded"
-  >
-    <slot />
-  </ContextMenuRadioGroup>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue b/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
deleted file mode 100644
index 10dfdfd9f..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconCircleFilled } from "@tabler/icons-vue"
-import {
-  ContextMenuItemIndicator,
-  ContextMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuRadioItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuRadioItem
-    data-slot="context-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">
-      <ContextMenuItemIndicator>
-        <slot name="indicator-icon">
-          <IconCircleFilled class="size-2" />
-        </slot>
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuRadioItem>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSeparator.vue b/resources/js/components/ui/context-menu/ContextMenuSeparator.vue
deleted file mode 100644
index d7f0c60f0..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuSeparator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuSeparator,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <ContextMenuSeparator
-    data-slot="context-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/context-menu/ContextMenuShortcut.vue b/resources/js/components/ui/context-menu/ContextMenuShortcut.vue
deleted file mode 100644
index 2631d6826..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuShortcut.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <span
-    data-slot="context-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/context-menu/ContextMenuSub.vue b/resources/js/components/ui/context-menu/ContextMenuSub.vue
deleted file mode 100644
index aeb1835cc..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuSub.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui"
-import {
-  ContextMenuSub,
-  useForwardPropsEmits,
-} from "reka-ui"
-
-const props = defineProps<ContextMenuSubProps>()
-const emits = defineEmits<ContextMenuSubEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <ContextMenuSub
-    data-slot="context-menu-sub"
-    v-bind="forwarded"
-  >
-    <slot />
-  </ContextMenuSub>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSubContent.vue b/resources/js/components/ui/context-menu/ContextMenuSubContent.vue
deleted file mode 100644
index c4fcafdad..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuSubContent.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuSubContent
-    data-slot="context-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </ContextMenuSubContent>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue b/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
deleted file mode 100644
index 987324bea..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconChevronRight } from "@tabler/icons-vue"
-import {
-  ContextMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ContextMenuSubTrigger
-    data-slot="context-menu-sub-trigger"
-    :data-inset="inset ? '' : undefined"
-    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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <slot />
-    <IconChevronRight class="ml-auto" />
-  </ContextMenuSubTrigger>
-</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuTrigger.vue b/resources/js/components/ui/context-menu/ContextMenuTrigger.vue
deleted file mode 100644
index 70a8143ff..000000000
--- a/resources/js/components/ui/context-menu/ContextMenuTrigger.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { ContextMenuTriggerProps } from "reka-ui"
-import { ContextMenuTrigger, useForwardProps } from "reka-ui"
-
-const props = defineProps<ContextMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <ContextMenuTrigger
-    data-slot="context-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </ContextMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/context-menu/index.ts b/resources/js/components/ui/context-menu/index.ts
deleted file mode 100644
index 5919fd37d..000000000
--- a/resources/js/components/ui/context-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { default as ContextMenu } from "./ContextMenu.vue"
-export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue"
-export { default as ContextMenuContent } from "./ContextMenuContent.vue"
-export { default as ContextMenuGroup } from "./ContextMenuGroup.vue"
-export { default as ContextMenuItem } from "./ContextMenuItem.vue"
-export { default as ContextMenuLabel } from "./ContextMenuLabel.vue"
-export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue"
-export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue"
-export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue"
-export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue"
-export { default as ContextMenuSub } from "./ContextMenuSub.vue"
-export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue"
-export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue"
-export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue"
diff --git a/resources/js/components/ui/drawer/Drawer.vue b/resources/js/components/ui/drawer/Drawer.vue
deleted file mode 100644
index 5428e35c1..000000000
--- a/resources/js/components/ui/drawer/Drawer.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue"
-import { useForwardPropsEmits } from "reka-ui"
-import { DrawerRoot } from "vaul-vue"
-
-const props = withDefaults(defineProps<DrawerRootProps>(), {
-  shouldScaleBackground: true,
-})
-
-const emits = defineEmits<DrawerRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerRoot
-    v-slot="slotProps"
-    data-slot="drawer"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DrawerRoot>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerClose.vue b/resources/js/components/ui/drawer/DrawerClose.vue
deleted file mode 100644
index eecc11b7f..000000000
--- a/resources/js/components/ui/drawer/DrawerClose.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerCloseProps } from "vaul-vue"
-import { DrawerClose } from "vaul-vue"
-
-const props = defineProps<DrawerCloseProps>()
-</script>
-
-<template>
-  <DrawerClose
-    data-slot="drawer-close"
-    v-bind="props"
-  >
-    <slot />
-  </DrawerClose>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerContent.vue b/resources/js/components/ui/drawer/DrawerContent.vue
deleted file mode 100644
index 5994c854c..000000000
--- a/resources/js/components/ui/drawer/DrawerContent.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { useForwardPropsEmits } from "reka-ui"
-import { DrawerContent, DrawerPortal } from "vaul-vue"
-import { cn } from "@/lib/utils"
-import DrawerOverlay from "./DrawerOverlay.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerContent
-      data-slot="drawer-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
-        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
-        'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
-        'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
-        props.class,
-      )"
-    >
-      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-      <slot />
-    </DrawerContent>
-  </DrawerPortal>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerDescription.vue b/resources/js/components/ui/drawer/DrawerDescription.vue
deleted file mode 100644
index 77e69ba35..000000000
--- a/resources/js/components/ui/drawer/DrawerDescription.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerDescriptionProps } from "vaul-vue"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerDescription } from "vaul-vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DrawerDescription
-    data-slot="drawer-description"
-    v-bind="delegatedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </DrawerDescription>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerFooter.vue b/resources/js/components/ui/drawer/DrawerFooter.vue
deleted file mode 100644
index 34c2e1217..000000000
--- a/resources/js/components/ui/drawer/DrawerFooter.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="drawer-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerHeader.vue b/resources/js/components/ui/drawer/DrawerHeader.vue
deleted file mode 100644
index f68aeb059..000000000
--- a/resources/js/components/ui/drawer/DrawerHeader.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="drawer-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerOverlay.vue b/resources/js/components/ui/drawer/DrawerOverlay.vue
deleted file mode 100644
index e7e4a05ab..000000000
--- a/resources/js/components/ui/drawer/DrawerOverlay.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerOverlay } from "vaul-vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DrawerOverlay
-    data-slot="drawer-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)"
-  />
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerTitle.vue b/resources/js/components/ui/drawer/DrawerTitle.vue
deleted file mode 100644
index 328fb0d21..000000000
--- a/resources/js/components/ui/drawer/DrawerTitle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerTitleProps } from "vaul-vue"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerTitle } from "vaul-vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DrawerTitle
-    data-slot="drawer-title"
-    v-bind="delegatedProps"
-    :class="cn('text-foreground font-semibold', props.class)"
-  >
-    <slot />
-  </DrawerTitle>
-</template>
diff --git a/resources/js/components/ui/drawer/DrawerTrigger.vue b/resources/js/components/ui/drawer/DrawerTrigger.vue
deleted file mode 100644
index 04b5bf13b..000000000
--- a/resources/js/components/ui/drawer/DrawerTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerTriggerProps } from "vaul-vue"
-import { DrawerTrigger } from "vaul-vue"
-
-const props = defineProps<DrawerTriggerProps>()
-</script>
-
-<template>
-  <DrawerTrigger
-    data-slot="drawer-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DrawerTrigger>
-</template>
diff --git a/resources/js/components/ui/drawer/index.ts b/resources/js/components/ui/drawer/index.ts
deleted file mode 100644
index 0d07820d6..000000000
--- a/resources/js/components/ui/drawer/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Drawer } from "./Drawer.vue"
-export { default as DrawerClose } from "./DrawerClose.vue"
-export { default as DrawerContent } from "./DrawerContent.vue"
-export { default as DrawerDescription } from "./DrawerDescription.vue"
-export { default as DrawerFooter } from "./DrawerFooter.vue"
-export { default as DrawerHeader } from "./DrawerHeader.vue"
-export { default as DrawerOverlay } from "./DrawerOverlay.vue"
-export { default as DrawerTitle } from "./DrawerTitle.vue"
-export { default as DrawerTrigger } from "./DrawerTrigger.vue"
diff --git a/resources/js/components/ui/empty/Empty.vue b/resources/js/components/ui/empty/Empty.vue
deleted file mode 100644
index 2637b3c7b..000000000
--- a/resources/js/components/ui/empty/Empty.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<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="empty"
-    :class="cn(
-      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/empty/EmptyContent.vue b/resources/js/components/ui/empty/EmptyContent.vue
deleted file mode 100644
index d19ee0003..000000000
--- a/resources/js/components/ui/empty/EmptyContent.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<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="empty-content"
-    :class="cn(
-      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/empty/EmptyDescription.vue b/resources/js/components/ui/empty/EmptyDescription.vue
deleted file mode 100644
index e4ed5fb71..000000000
--- a/resources/js/components/ui/empty/EmptyDescription.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <p
-    data-slot="empty-description"
-    :class="cn(
-      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
-      $attrs.class ?? '',
-    )"
-  >
-    <slot />
-  </p>
-</template>
diff --git a/resources/js/components/ui/empty/EmptyHeader.vue b/resources/js/components/ui/empty/EmptyHeader.vue
deleted file mode 100644
index ac21d8c89..000000000
--- a/resources/js/components/ui/empty/EmptyHeader.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<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="empty-header"
-    :class="cn(
-      'flex max-w-sm flex-col items-center gap-2 text-center',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/empty/EmptyMedia.vue b/resources/js/components/ui/empty/EmptyMedia.vue
deleted file mode 100644
index c68397c0c..000000000
--- a/resources/js/components/ui/empty/EmptyMedia.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { EmptyMediaVariants } from "."
-import { cn } from "@/lib/utils"
-import { emptyMediaVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: EmptyMediaVariants["variant"]
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="empty-icon"
-    :data-variant="variant"
-    :class="cn(emptyMediaVariants({ variant }), props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/empty/EmptyTitle.vue b/resources/js/components/ui/empty/EmptyTitle.vue
deleted file mode 100644
index 90c950d29..000000000
--- a/resources/js/components/ui/empty/EmptyTitle.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<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="empty-title"
-    :class="cn('text-lg font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/empty/index.ts b/resources/js/components/ui/empty/index.ts
deleted file mode 100644
index ce0c489f2..000000000
--- a/resources/js/components/ui/empty/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Empty } from "./Empty.vue"
-export { default as EmptyContent } from "./EmptyContent.vue"
-export { default as EmptyDescription } from "./EmptyDescription.vue"
-export { default as EmptyHeader } from "./EmptyHeader.vue"
-export { default as EmptyMedia } from "./EmptyMedia.vue"
-export { default as EmptyTitle } from "./EmptyTitle.vue"
-
-export const emptyMediaVariants = cva(
-  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>
diff --git a/resources/js/components/ui/hover-card/HoverCard.vue b/resources/js/components/ui/hover-card/HoverCard.vue
deleted file mode 100644
index 07d11e605..000000000
--- a/resources/js/components/ui/hover-card/HoverCard.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
-import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<HoverCardRootProps>()
-const emits = defineEmits<HoverCardRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <HoverCardRoot
-    v-slot="slotProps"
-    data-slot="hover-card"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </HoverCardRoot>
-</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardContent.vue b/resources/js/components/ui/hover-card/HoverCardContent.vue
deleted file mode 100644
index 2a3c55336..000000000
--- a/resources/js/components/ui/hover-card/HoverCardContent.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { HoverCardContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  HoverCardContent,
-  HoverCardPortal,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <HoverCardPortal>
-    <HoverCardContent
-      data-slot="hover-card-content"
-      v-bind="{ ...$attrs, ...forwardedProps }"
-      :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 w-64 rounded-md border p-4 shadow-md outline-hidden',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </HoverCardContent>
-  </HoverCardPortal>
-</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardTrigger.vue b/resources/js/components/ui/hover-card/HoverCardTrigger.vue
deleted file mode 100644
index 0a0900192..000000000
--- a/resources/js/components/ui/hover-card/HoverCardTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { HoverCardTriggerProps } from "reka-ui"
-import { HoverCardTrigger } from "reka-ui"
-
-const props = defineProps<HoverCardTriggerProps>()
-</script>
-
-<template>
-  <HoverCardTrigger
-    data-slot="hover-card-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </HoverCardTrigger>
-</template>
diff --git a/resources/js/components/ui/hover-card/index.ts b/resources/js/components/ui/hover-card/index.ts
deleted file mode 100644
index 49b2930d2..000000000
--- a/resources/js/components/ui/hover-card/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as HoverCard } from "./HoverCard.vue"
-export { default as HoverCardContent } from "./HoverCardContent.vue"
-export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
diff --git a/resources/js/components/ui/input-group/InputGroup.vue b/resources/js/components/ui/input-group/InputGroup.vue
deleted file mode 100644
index d32d69d4a..000000000
--- a/resources/js/components/ui/input-group/InputGroup.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<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="input-group"
-    role="group"
-    :class="cn(
-      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-      'h-9 min-w-0 has-[>textarea]:h-auto',
-
-      // Variants based on alignment.
-      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-
-      // Focus state.
-      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
-
-      // Error state.
-      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
-
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-group/InputGroupAddon.vue b/resources/js/components/ui/input-group/InputGroupAddon.vue
deleted file mode 100644
index 709f482a3..000000000
--- a/resources/js/components/ui/input-group/InputGroupAddon.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { InputGroupVariants } from "."
-import { cn } from "@/lib/utils"
-import { inputGroupAddonVariants } from "."
-
-const props = withDefaults(defineProps<{
-  align?: InputGroupVariants["align"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  align: "inline-start",
-})
-
-function handleInputGroupAddonClick(e: MouseEvent) {
-  const currentTarget = e.currentTarget as HTMLElement | null
-  const target = e.target as HTMLElement | null
-  if (target && target.closest("button")) {
-    return
-  }
-  if (currentTarget && currentTarget?.parentElement) {
-    currentTarget.parentElement?.querySelector("input")?.focus()
-  }
-}
-</script>
-
-<template>
-  <div
-    role="group"
-    data-slot="input-group-addon"
-    :data-align="props.align"
-    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
-    @click="handleInputGroupAddonClick"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-group/InputGroupButton.vue b/resources/js/components/ui/input-group/InputGroupButton.vue
deleted file mode 100644
index 4e82e0936..000000000
--- a/resources/js/components/ui/input-group/InputGroupButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { InputGroupButtonProps } from "."
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { inputGroupButtonVariants } from "."
-
-const props = withDefaults(defineProps<InputGroupButtonProps>(), {
-  size: "xs",
-  variant: "ghost",
-})
-</script>
-
-<template>
-  <Button
-    :data-size="props.size"
-    :variant="props.variant"
-    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
-  >
-    <slot />
-  </Button>
-</template>
diff --git a/resources/js/components/ui/input-group/InputGroupInput.vue b/resources/js/components/ui/input-group/InputGroupInput.vue
deleted file mode 100644
index ca7cbb9be..000000000
--- a/resources/js/components/ui/input-group/InputGroupInput.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Input } from '@/components/ui/input'
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Input
-    data-slot="input-group-control"
-    :class="cn(
-      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
-      props.class,
-    )"
-  />
-</template>
diff --git a/resources/js/components/ui/input-group/InputGroupText.vue b/resources/js/components/ui/input-group/InputGroupText.vue
deleted file mode 100644
index e31733796..000000000
--- a/resources/js/components/ui/input-group/InputGroupText.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <span
-    :class="cn(
-      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-  >
-    <slot />
-  </span>
-</template>
diff --git a/resources/js/components/ui/input-group/InputGroupTextarea.vue b/resources/js/components/ui/input-group/InputGroupTextarea.vue
deleted file mode 100644
index 2090be242..000000000
--- a/resources/js/components/ui/input-group/InputGroupTextarea.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Textarea } from '@/components/ui/textarea'
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Textarea
-    data-slot="input-group-control"
-    :class="cn(
-      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
-      props.class,
-    )"
-  />
-</template>
diff --git a/resources/js/components/ui/input-group/index.ts b/resources/js/components/ui/input-group/index.ts
deleted file mode 100644
index 7c1f18eeb..000000000
--- a/resources/js/components/ui/input-group/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { cva } from "class-variance-authority"
-
-export { default as InputGroup } from "./InputGroup.vue"
-export { default as InputGroupAddon } from "./InputGroupAddon.vue"
-export { default as InputGroupButton } from "./InputGroupButton.vue"
-export { default as InputGroupInput } from "./InputGroupInput.vue"
-export { default as InputGroupText } from "./InputGroupText.vue"
-export { default as InputGroupTextarea } from "./InputGroupTextarea.vue"
-
-export const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  },
-)
-
-export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
-
-export const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        "xs": "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        "sm": "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  },
-)
-
-export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
-
-export interface InputGroupButtonProps {
-  variant?: ButtonVariants["variant"]
-  size?: InputGroupButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
diff --git a/resources/js/components/ui/input-otp/InputOTP.vue b/resources/js/components/ui/input-otp/InputOTP.vue
deleted file mode 100644
index f34b73481..000000000
--- a/resources/js/components/ui/input-otp/InputOTP.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardPropsEmits } from "reka-ui"
-import { OTPInput } from "vue-input-otp"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<OTPInputEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <OTPInput
-    v-slot="slotProps"
-    v-bind="forwarded"
-    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
-    data-slot="input-otp"
-    class="disabled:cursor-not-allowed"
-  >
-    <slot v-bind="slotProps" />
-  </OTPInput>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPGroup.vue b/resources/js/components/ui/input-otp/InputOTPGroup.vue
deleted file mode 100644
index 1dea2abab..000000000
--- a/resources/js/components/ui/input-otp/InputOTPGroup.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div
-    data-slot="input-otp-group"
-    v-bind="forwarded"
-    :class="cn('flex items-center', props.class)"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSeparator.vue b/resources/js/components/ui/input-otp/InputOTPSeparator.vue
deleted file mode 100644
index b3e478900..000000000
--- a/resources/js/components/ui/input-otp/InputOTPSeparator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { IconMinus } from "@tabler/icons-vue"
-import { useForwardProps } from "reka-ui"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-
-const forwarded = useForwardProps(props)
-</script>
-
-<template>
-  <div
-    data-slot="input-otp-separator"
-    role="separator"
-    v-bind="forwarded"
-  >
-    <slot>
-      <IconMinus />
-    </slot>
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSlot.vue b/resources/js/components/ui/input-otp/InputOTPSlot.vue
deleted file mode 100644
index a16579967..000000000
--- a/resources/js/components/ui/input-otp/InputOTPSlot.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { computed } from "vue"
-import { useVueOTPContext } from "vue-input-otp"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardProps(delegatedProps)
-
-const context = useVueOTPContext()
-
-const slot = computed(() => context?.value.slots[props.index])
-</script>
-
-<template>
-  <div
-    v-bind="forwarded"
-    data-slot="input-otp-slot"
-    :data-active="slot?.isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
-  >
-    {{ slot?.char }}
-    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
-      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-    </div>
-  </div>
-</template>
diff --git a/resources/js/components/ui/input-otp/index.ts b/resources/js/components/ui/input-otp/index.ts
deleted file mode 100644
index d97448a56..000000000
--- a/resources/js/components/ui/input-otp/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as InputOTP } from "./InputOTP.vue"
-export { default as InputOTPGroup } from "./InputOTPGroup.vue"
-export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
-export { default as InputOTPSlot } from "./InputOTPSlot.vue"
diff --git a/resources/js/components/ui/input/InputMask.vue b/resources/js/components/ui/input/InputMask.vue
deleted file mode 100644
index 0cc70bb59..000000000
--- a/resources/js/components/ui/input/InputMask.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { vMaska } from 'maska/vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    class?: HTMLAttributes['class'];
-    maskOptions?: Record<string, any>;
-    emitMasked?: boolean;
-}>();
-
-const emits = defineEmits<{
-    'update:modelValue': [value: string | number];
-}>();
-
-function onMaska(event: { detail: { masked: string; unmasked: string; completed: boolean } }) {
-    const value = props.emitMasked ? event.detail.masked : event.detail.unmasked;
-    emits('update:modelValue', value || '');
-}
-</script>
-
-<template>
-    <input
-        v-maska
-        v-bind="maskOptions"
-        :value="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 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,
-            )
-        "
-        @maska="onMaska"
-    />
-</template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
index 538c924ea..c5248c5c1 100644
--- a/resources/js/components/ui/input/index.ts
+++ b/resources/js/components/ui/input/index.ts
@@ -1,2 +1 @@
 export { default as Input } from './Input.vue';
-export { default as InputMask } from './InputMask.vue';
diff --git a/resources/js/components/ui/kbd/Kbd.vue b/resources/js/components/ui/kbd/Kbd.vue
deleted file mode 100644
index e71b49492..000000000
--- a/resources/js/components/ui/kbd/Kbd.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <kbd
-    :class="cn(
-      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
-      '[&_svg:not([class*=\'size-\'])]:size-3',
-      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
-      props.class,
-    )"
-  >
-    <slot />
-  </kbd>
-</template>
diff --git a/resources/js/components/ui/kbd/KbdGroup.vue b/resources/js/components/ui/kbd/KbdGroup.vue
deleted file mode 100644
index e0cd86224..000000000
--- a/resources/js/components/ui/kbd/KbdGroup.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <kbd
-    data-slot="kbd-group"
-    :class="cn('inline-flex items-center gap-1', props.class)"
-  >
-    <slot />
-  </kbd>
-</template>
diff --git a/resources/js/components/ui/kbd/index.ts b/resources/js/components/ui/kbd/index.ts
deleted file mode 100644
index b613b0cc9..000000000
--- a/resources/js/components/ui/kbd/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Kbd } from "./Kbd.vue"
-export { default as KbdGroup } from "./KbdGroup.vue"
diff --git a/resources/js/components/ui/native-select/NativeSelect.vue b/resources/js/components/ui/native-select/NativeSelect.vue
deleted file mode 100644
index ceb1be6fa..000000000
--- a/resources/js/components/ui/native-select/NativeSelect.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { AcceptableValue } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useVModel } from "@vueuse/core"
-import { IconChevronDown } from "@tabler/icons-vue"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
-
-const emit = defineEmits<{
-  "update:modelValue": AcceptableValue
-}>()
-
-const modelValue = useVModel(props, "modelValue", emit, {
-  passive: true,
-  defaultValue: "",
-})
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <div
-    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
-    data-slot="native-select-wrapper"
-  >
-    <select
-      v-bind="{ ...$attrs, ...delegatedProps }"
-      v-model="modelValue"
-      data-slot="native-select"
-      :class="cn(
-        'h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border-2 border-foreground bg-card px-3 py-2 pr-9 text-sm font-medium text-foreground shadow-2xs transition-[color,box-shadow] outline-none placeholder:text-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        'focus-visible:ring-foreground/20 focus-visible:ring-[3px]',
-        'aria-invalid:border-destructive',
-        props.class,
-      )"
-    >
-      <slot />
-    </select>
-    <IconChevronDown
-      class="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none text-foreground/60"
-      aria-hidden="true"
-      data-slot="native-select-icon"
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/native-select/NativeSelectOptGroup.vue b/resources/js/components/ui/native-select/NativeSelectOptGroup.vue
deleted file mode 100644
index 169558cb8..000000000
--- a/resources/js/components/ui/native-select/NativeSelectOptGroup.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- @fallthroughAttributes true -->
-<!-- @strictTemplates true -->
-
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </optgroup>
-</template>
diff --git a/resources/js/components/ui/native-select/NativeSelectOption.vue b/resources/js/components/ui/native-select/NativeSelectOption.vue
deleted file mode 100644
index 2f678fb61..000000000
--- a/resources/js/components/ui/native-select/NativeSelectOption.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- @fallthroughAttributes true -->
-<!-- @strictTemplates true -->
-
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
-    <slot />
-  </option>
-</template>
diff --git a/resources/js/components/ui/native-select/index.ts b/resources/js/components/ui/native-select/index.ts
deleted file mode 100644
index 04e92c7ee..000000000
--- a/resources/js/components/ui/native-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as NativeSelect } from "./NativeSelect.vue"
-export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
-export { default as NativeSelectOption } from "./NativeSelectOption.vue"
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
deleted file mode 100644
index 6042a77d4..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenu.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import NavigationMenuViewport from "./NavigationMenuViewport.vue"
-
-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
-    v-slot="slotProps"
-    data-slot="navigation-menu"
-    :data-viewport="viewport"
-    v-bind="forwarded"
-    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot v-bind="slotProps" />
-    <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
deleted file mode 100644
index 395dc2dfa..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    data-slot="navigation-menu-content"
-    v-bind="forwarded"
-    :class="cn(
-      '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,
-    )"
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
deleted file mode 100644
index 2558371ab..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    data-slot="navigation-menu-indicator"
-    v-bind="forwardedProps"
-    :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="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
deleted file mode 100644
index 1a8595b8d..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <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
deleted file mode 100644
index 07f16a610..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuLink,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <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
deleted file mode 100644
index a702d7063..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuList, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    data-slot="navigation-menu-list"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuList>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
deleted file mode 100644
index 888d832d8..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconChevronDown } from "@tabler/icons-vue"
-import {
-  NavigationMenuTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { navigationMenuTriggerStyle } from "."
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    data-slot="navigation-menu-trigger"
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <IconChevronDown
-      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
deleted file mode 100644
index 74edf8676..000000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <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 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)] left-[var(--reka-navigation-menu-viewport-left)]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
deleted file mode 100644
index 90055919d..000000000
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
-
-export const navigationMenuTriggerStyle = cva(
-  "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/progress/Progress.vue b/resources/js/components/ui/progress/Progress.vue
deleted file mode 100644
index 5532af7a8..000000000
--- a/resources/js/components/ui/progress/Progress.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ProgressRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ProgressIndicator,
-  ProgressRoot,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    modelValue: 0,
-  },
-)
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <ProgressRoot
-    data-slot="progress"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
-        props.class,
-      )
-    "
-  >
-    <ProgressIndicator
-      data-slot="progress-indicator"
-      class="bg-primary h-full w-full flex-1 transition-all"
-      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
-    />
-  </ProgressRoot>
-</template>
diff --git a/resources/js/components/ui/progress/index.ts b/resources/js/components/ui/progress/index.ts
deleted file mode 100644
index 8598b9697..000000000
--- a/resources/js/components/ui/progress/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Progress } from "./Progress.vue"
diff --git a/resources/js/components/ui/radio-group/RadioGroup.vue b/resources/js/components/ui/radio-group/RadioGroup.vue
deleted file mode 100644
index 54045c421..000000000
--- a/resources/js/components/ui/radio-group/RadioGroup.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<RadioGroupRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <RadioGroupRoot
-    v-slot="slotProps"
-    data-slot="radio-group"
-    :class="cn('grid gap-3', props.class)"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </RadioGroupRoot>
-</template>
diff --git a/resources/js/components/ui/radio-group/RadioGroupItem.vue b/resources/js/components/ui/radio-group/RadioGroupItem.vue
deleted file mode 100644
index 34b9cce3b..000000000
--- a/resources/js/components/ui/radio-group/RadioGroupItem.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { RadioGroupItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconCircleFilled } from "@tabler/icons-vue"
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <RadioGroupItem
-    data-slot="radio-group-item"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      )
-    "
-  >
-    <RadioGroupIndicator
-      data-slot="radio-group-indicator"
-      class="relative flex items-center justify-center"
-    >
-      <slot>
-        <IconCircleFilled class="text-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </slot>
-    </RadioGroupIndicator>
-  </RadioGroupItem>
-</template>
diff --git a/resources/js/components/ui/radio-group/index.ts b/resources/js/components/ui/radio-group/index.ts
deleted file mode 100644
index 7cb0e3b10..000000000
--- a/resources/js/components/ui/radio-group/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as RadioGroup } from "./RadioGroup.vue"
-export { default as RadioGroupItem } from "./RadioGroupItem.vue"
diff --git a/resources/js/components/ui/resizable/ResizableHandle.vue b/resources/js/components/ui/resizable/ResizableHandle.vue
deleted file mode 100644
index 9d2550643..000000000
--- a/resources/js/components/ui/resizable/ResizableHandle.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconGripVertical } from "@tabler/icons-vue"
-import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
-const emits = defineEmits<SplitterResizeHandleEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "withHandle")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SplitterResizeHandle
-    data-slot="resizable-handle"
-    v-bind="forwarded"
-    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
-  >
-    <template v-if="props.withHandle">
-      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-        <slot>
-          <IconGripVertical class="size-2.5" />
-        </slot>
-      </div>
-    </template>
-  </SplitterResizeHandle>
-</template>
diff --git a/resources/js/components/ui/resizable/ResizablePanel.vue b/resources/js/components/ui/resizable/ResizablePanel.vue
deleted file mode 100644
index e52e1ecb0..000000000
--- a/resources/js/components/ui/resizable/ResizablePanel.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
-import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<SplitterPanelProps>()
-const emits = defineEmits<SplitterPanelEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-const { forwardRef } = useForwardExpose()
-</script>
-
-<template>
-  <SplitterPanel
-    :ref="forwardRef"
-    v-slot="slotProps"
-    data-slot="resizable-panel"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </SplitterPanel>
-</template>
diff --git a/resources/js/components/ui/resizable/ResizablePanelGroup.vue b/resources/js/components/ui/resizable/ResizablePanelGroup.vue
deleted file mode 100644
index dd55b50c7..000000000
--- a/resources/js/components/ui/resizable/ResizablePanelGroup.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SplitterGroupEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SplitterGroup
-    v-slot="slotProps"
-    data-slot="resizable-panel-group"
-    v-bind="forwarded"
-    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </SplitterGroup>
-</template>
diff --git a/resources/js/components/ui/resizable/index.ts b/resources/js/components/ui/resizable/index.ts
deleted file mode 100644
index 89e5d7706..000000000
--- a/resources/js/components/ui/resizable/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ResizableHandle } from "./ResizableHandle.vue"
-export { default as ResizablePanel } from "./ResizablePanel.vue"
-export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
diff --git a/resources/js/components/ui/scroll-area/ScrollArea.vue b/resources/js/components/ui/scroll-area/ScrollArea.vue
deleted file mode 100644
index 6112caad3..000000000
--- a/resources/js/components/ui/scroll-area/ScrollArea.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { ScrollAreaRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import ScrollBar from "./ScrollBar.vue"
-
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <ScrollAreaRoot
-    data-slot="scroll-area"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <ScrollAreaViewport
-      data-slot="scroll-area-viewport"
-      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-    >
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
-</template>
diff --git a/resources/js/components/ui/scroll-area/ScrollBar.vue b/resources/js/components/ui/scroll-area/ScrollBar.vue
deleted file mode 100644
index a0b6f9b7b..000000000
--- a/resources/js/components/ui/scroll-area/ScrollBar.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
-})
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <ScrollAreaScrollbar
-    data-slot="scroll-area-scrollbar"
-    v-bind="delegatedProps"
-    :class="
-      cn('flex touch-none p-px transition-colors select-none',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
-         props.class)"
-  >
-    <ScrollAreaThumb
-      data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
-    />
-  </ScrollAreaScrollbar>
-</template>
diff --git a/resources/js/components/ui/scroll-area/index.ts b/resources/js/components/ui/scroll-area/index.ts
deleted file mode 100644
index c416759cb..000000000
--- a/resources/js/components/ui/scroll-area/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ScrollArea } from "./ScrollArea.vue"
-export { default as ScrollBar } from "./ScrollBar.vue"
diff --git a/resources/js/components/ui/tags-input/TagsInput.vue b/resources/js/components/ui/tags-input/TagsInput.vue
deleted file mode 100644
index 325110e99..000000000
--- a/resources/js/components/ui/tags-input/TagsInput.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<TagsInputRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <TagsInputRoot
-    v-slot="slotProps" v-bind="forwarded" :class="cn(
-      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
-      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </TagsInputRoot>
-</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputInput.vue b/resources/js/components/ui/tags-input/TagsInputInput.vue
deleted file mode 100644
index dbdcbeb3f..000000000
--- a/resources/js/components/ui/tags-input/TagsInputInput.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { TagsInputInputProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputInput, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
-</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItem.vue b/resources/js/components/ui/tags-input/TagsInputItem.vue
deleted file mode 100644
index 30aa907b8..000000000
--- a/resources/js/components/ui/tags-input/TagsInputItem.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { TagsInputItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
-    <slot />
-  </TagsInputItem>
-</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItemDelete.vue b/resources/js/components/ui/tags-input/TagsInputItemDelete.vue
deleted file mode 100644
index c923e8a6a..000000000
--- a/resources/js/components/ui/tags-input/TagsInputItemDelete.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { TagsInputItemDeleteProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { IconX } from "@tabler/icons-vue"
-import { TagsInputItemDelete, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
-    <slot>
-      <IconX class="w-4 h-4" />
-    </slot>
-  </TagsInputItemDelete>
-</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItemText.vue b/resources/js/components/ui/tags-input/TagsInputItemText.vue
deleted file mode 100644
index cab600291..000000000
--- a/resources/js/components/ui/tags-input/TagsInputItemText.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { TagsInputItemTextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputItemText, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
-</template>
diff --git a/resources/js/components/ui/tags-input/index.ts b/resources/js/components/ui/tags-input/index.ts
deleted file mode 100644
index 8736692d5..000000000
--- a/resources/js/components/ui/tags-input/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as TagsInput } from "./TagsInput.vue"
-export { default as TagsInputInput } from "./TagsInputInput.vue"
-export { default as TagsInputItem } from "./TagsInputItem.vue"
-export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
-export { default as TagsInputItemText } from "./TagsInputItemText.vue"
diff --git a/resources/js/composables/useDateMaska.ts b/resources/js/composables/useDateMaska.ts
deleted file mode 100644
index 178a9d2d6..000000000
--- a/resources/js/composables/useDateMaska.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function useDateMaska() {
-    const dateOptions = {
-        'data-maska': '##/##/####',
-        'data-maska-tokens': '#:[0-9]',
-    };
-
-    return {
-        dateOptions,
-    };
-}
diff --git a/resources/js/layouts/GuestLayout.vue b/resources/js/layouts/GuestLayout.vue
deleted file mode 100644
index 6dbc54e03..000000000
--- a/resources/js/layouts/GuestLayout.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import dayjs from '@/dayjs';
-
-defineProps<{
-    title?: string;
-}>();
-
-const currentYear = dayjs().year();
-</script>
-
-<template>
-    <div class="min-h-svh bg-background">
-        <!-- Header -->
-        <header class="border-b">
-            <div class="mx-auto max-w-5xl px-6 py-4 flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                    <img src="/images/trypost/logo-light.png" alt="TryPost" class="dark:hidden h-7 w-auto" />
-                    <img src="/images/trypost/logo-dark.png" alt="TryPost" class="hidden dark:block h-7 w-auto" />
-                </div>
-            </div>
-        </header>
-
-        <!-- Main Content -->
-        <main class="mx-auto max-w-5xl px-6 py-12">
-            <h1 v-if="title" class="text-3xl font-bold mb-8">{{ title }}</h1>
-            <slot />
-        </main>
-
-        <!-- Footer -->
-        <footer class="border-t mt-auto">
-            <div class="mx-auto max-w-5xl px-6 py-8">
-                <p class="text-sm text-muted-foreground text-center">
-                    &copy; {{ currentYear }} TryPost. All rights reserved.
-                </p>
-            </div>
-        </footer>
-    </div>
-</template>
diff --git a/resources/js/layouts/auth/AuthCardLayout.vue b/resources/js/layouts/auth/AuthCardLayout.vue
deleted file mode 100644
index 21c2c4fa2..000000000
--- a/resources/js/layouts/auth/AuthCardLayout.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { home } from '@/routes/app';
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-        <div class="flex w-full max-w-md flex-col gap-6">
-            <Link :href="home()" class="flex items-center gap-2 self-center font-medium">
-                <div class="flex h-9 w-9 items-center justify-center">
-                    <img src="/images/trypost/logo-light.png" alt="TryPost" class="dark:hidden h-8 w-auto" />
-                    <img src="/images/trypost/logo-dark.png" alt="TryPost" class="hidden dark:block h-8 w-auto" />
-                </div>
-            </Link>
-
-            <div class="flex flex-col gap-6">
-                <Card class="rounded-xl">
-                    <CardHeader class="px-10 pt-8 pb-0 text-center">
-                        <CardTitle class="text-xl">{{ title }}</CardTitle>
-                        <CardDescription>
-                            {{ description }}
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent class="px-10 py-8">
-                        <slot />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
deleted file mode 100644
index fdf5921c0..000000000
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-
-import { home } from '@/routes/app';
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
-        <div class="w-full max-w-sm">
-            <div class="flex flex-col gap-8">
-                <div class="flex flex-col items-center gap-4">
-                    <Link :href="home()" class="flex flex-col items-center gap-2 font-medium">
-                        <img src="/images/trypost/logo-light.png" alt="TryPost" class="dark:hidden h-8 w-auto" />
-                        <img src="/images/trypost/logo-dark.png" alt="TryPost" class="hidden dark:block h-8 w-auto" />
-                        <span class="sr-only">{{ title }}</span>
-                    </Link>
-                    <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
-                            {{ description }}
-                        </p>
-                    </div>
-                </div>
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file

From bc638b79f0f95b41cfa38b63b6d5ec01011d904b Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 7 Sep 2026 17:27:32 -0300
Subject: [PATCH 2/5] Make browser tests read the built assets even with the
 dev server running

tests/BrowserTestCase already says these tests load the built Vite assets,
but it only turned off the manifest fake. Laravel still prefers public/hot
when it exists, so on any machine with `npm run dev` running the browser
tests silently loaded the app from the Vite dev server instead of the build
that `npm run build` had just produced.

That is enough on its own to make three tests fail locally while CI, which
has no hot file, stays green. The dev server resolves
`import.meta.glob('../../lang/*.json')` lazily at runtime, and the
laravel-vue-i18n Vite plugin deletes lang/php_*.json when a build finishes,
so the page rendered raw translation keys -- "auth.legal" instead of the
sentence with the Terms of Service and Privacy Policy links, and the raw
repurposes.health.source_missing key instead of the banner.

Pointing the hot file at a path that can never exist makes the browser tests
use the manifest unconditionally, which is what they claim to do and what CI
has been doing all along.

    AuthLegalLinksTest        the login screen shows the legal sentence
    AuthLegalLinksTest        the register screen shows the legal sentence
    RepurposeAccountHealthTest  a repurpose whose source was deleted ...

The HTTP server the browser plugin runs lives in the test process
(Pest\Browser\Drivers\LaravelHttpServer resolves the kernel out of the same
container), so a setUp() override reaches the rendered page.
---
 tests/BrowserTestCase.php | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/tests/BrowserTestCase.php b/tests/BrowserTestCase.php
index 479adf359..abb24eff6 100644
--- a/tests/BrowserTestCase.php
+++ b/tests/BrowserTestCase.php
@@ -4,6 +4,8 @@
 
 namespace Tests;
 
+use Illuminate\Support\Facades\Vite;
+
 abstract class BrowserTestCase extends TestCase
 {
     /**
@@ -11,4 +13,11 @@ abstract class BrowserTestCase extends TestCase
      * manifest must not be faked away.
      */
     protected bool $fakesVite = false;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        Vite::useHotFile(base_path('tests/.vite-hot-file-that-never-exists'));
+    }
 }

From 2e3cba46486dfda825964e4998f152c1a608409a Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 7 Sep 2026 23:10:19 -0300
Subject: [PATCH 3/5] Keep every UI primitive, and merge main
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sweep removed 108 files under resources/js/components/ui because nothing
imported them. That reasoning does not hold there: those are the shadcn-vue
primitives, kept as a library to build from rather than as application code, so
being unimported is their normal state, not evidence they are dead. The
directory is now byte-identical to main again.

Also merges main, which brought the locale work in (#341). The two test files
both branches touched — WebhookPausedMailTest and WebhookTranslationsTest —
combined without conflict.
---
 .../ui/alert-dialog/AlertDialog.vue           | 15 +++++
 .../ui/alert-dialog/AlertDialogAction.vue     | 18 ++++++
 .../ui/alert-dialog/AlertDialogCancel.vue     | 25 ++++++++
 .../ui/alert-dialog/AlertDialogContent.vue    | 44 ++++++++++++++
 .../alert-dialog/AlertDialogDescription.vue   | 23 ++++++++
 .../ui/alert-dialog/AlertDialogFooter.vue     | 22 +++++++
 .../ui/alert-dialog/AlertDialogHeader.vue     | 17 ++++++
 .../ui/alert-dialog/AlertDialogTitle.vue      | 21 +++++++
 .../ui/alert-dialog/AlertDialogTrigger.vue    | 12 ++++
 .../js/components/ui/alert-dialog/index.ts    |  9 +++
 .../ui/aspect-ratio/AspectRatio.vue           | 16 +++++
 .../js/components/ui/aspect-ratio/index.ts    |  1 +
 .../ui/button-group/ButtonGroup.vue           | 22 +++++++
 .../ui/button-group/ButtonGroupSeparator.vue  | 24 ++++++++
 .../ui/button-group/ButtonGroupText.vue       | 29 +++++++++
 .../js/components/ui/button-group/index.ts    | 25 ++++++++
 .../js/components/ui/carousel/Carousel.vue    | 53 +++++++++++++++++
 .../ui/carousel/CarouselContent.vue           | 33 +++++++++++
 .../components/ui/carousel/CarouselItem.vue   | 24 ++++++++
 .../components/ui/carousel/CarouselNext.vue   | 41 +++++++++++++
 .../ui/carousel/CarouselPrevious.vue          | 41 +++++++++++++
 resources/js/components/ui/carousel/index.ts  | 10 ++++
 .../js/components/ui/carousel/interface.ts    | 26 ++++++++
 .../js/components/ui/carousel/useCarousel.ts  | 56 ++++++++++++++++++
 .../ui/context-menu/ContextMenu.vue           | 18 ++++++
 .../context-menu/ContextMenuCheckboxItem.vue  | 39 ++++++++++++
 .../ui/context-menu/ContextMenuContent.vue    | 37 ++++++++++++
 .../ui/context-menu/ContextMenuGroup.vue      | 15 +++++
 .../ui/context-menu/ContextMenuItem.vue       | 38 ++++++++++++
 .../ui/context-menu/ContextMenuLabel.vue      | 22 +++++++
 .../ui/context-menu/ContextMenuPortal.vue     | 15 +++++
 .../ui/context-menu/ContextMenuRadioGroup.vue | 21 +++++++
 .../ui/context-menu/ContextMenuRadioItem.vue  | 39 ++++++++++++
 .../ui/context-menu/ContextMenuSeparator.vue  | 21 +++++++
 .../ui/context-menu/ContextMenuShortcut.vue   | 17 ++++++
 .../ui/context-menu/ContextMenuSub.vue        | 21 +++++++
 .../ui/context-menu/ContextMenuSubContent.vue | 32 ++++++++++
 .../ui/context-menu/ContextMenuSubTrigger.vue | 32 ++++++++++
 .../ui/context-menu/ContextMenuTrigger.vue    | 17 ++++++
 .../js/components/ui/context-menu/index.ts    | 14 +++++
 resources/js/components/ui/drawer/Drawer.vue  | 23 ++++++++
 .../js/components/ui/drawer/DrawerClose.vue   | 15 +++++
 .../js/components/ui/drawer/DrawerContent.vue | 38 ++++++++++++
 .../ui/drawer/DrawerDescription.vue           | 21 +++++++
 .../js/components/ui/drawer/DrawerFooter.vue  | 17 ++++++
 .../js/components/ui/drawer/DrawerHeader.vue  | 17 ++++++
 .../js/components/ui/drawer/DrawerOverlay.vue | 19 ++++++
 .../js/components/ui/drawer/DrawerTitle.vue   | 21 +++++++
 .../js/components/ui/drawer/DrawerTrigger.vue | 15 +++++
 resources/js/components/ui/drawer/index.ts    |  9 +++
 resources/js/components/ui/empty/Empty.vue    | 20 +++++++
 .../js/components/ui/empty/EmptyContent.vue   | 20 +++++++
 .../components/ui/empty/EmptyDescription.vue  | 20 +++++++
 .../js/components/ui/empty/EmptyHeader.vue    | 20 +++++++
 .../js/components/ui/empty/EmptyMedia.vue     | 21 +++++++
 .../js/components/ui/empty/EmptyTitle.vue     | 17 ++++++
 resources/js/components/ui/empty/index.ts     | 26 ++++++++
 .../js/components/ui/hover-card/HoverCard.vue | 19 ++++++
 .../ui/hover-card/HoverCardContent.vue        | 43 ++++++++++++++
 .../ui/hover-card/HoverCardTrigger.vue        | 15 +++++
 .../js/components/ui/hover-card/index.ts      |  3 +
 .../components/ui/input-group/InputGroup.vue  | 35 +++++++++++
 .../ui/input-group/InputGroupAddon.vue        | 36 +++++++++++
 .../ui/input-group/InputGroupButton.vue       | 21 +++++++
 .../ui/input-group/InputGroupInput.vue        | 19 ++++++
 .../ui/input-group/InputGroupText.vue         | 19 ++++++
 .../ui/input-group/InputGroupTextarea.vue     | 19 ++++++
 .../js/components/ui/input-group/index.ts     | 59 +++++++++++++++++++
 .../js/components/ui/input-otp/InputOTP.vue   | 28 +++++++++
 .../components/ui/input-otp/InputOTPGroup.vue | 22 +++++++
 .../ui/input-otp/InputOTPSeparator.vue        | 21 +++++++
 .../components/ui/input-otp/InputOTPSlot.vue  | 32 ++++++++++
 resources/js/components/ui/input-otp/index.ts |  4 ++
 .../js/components/ui/input/InputMask.vue      | 40 +++++++++++++
 resources/js/components/ui/input/index.ts     |  1 +
 resources/js/components/ui/kbd/Kbd.vue        | 21 +++++++
 resources/js/components/ui/kbd/KbdGroup.vue   | 17 ++++++
 resources/js/components/ui/kbd/index.ts       |  2 +
 .../ui/native-select/NativeSelect.vue         | 50 ++++++++++++++++
 .../ui/native-select/NativeSelectOptGroup.vue | 15 +++++
 .../ui/native-select/NativeSelectOption.vue   | 15 +++++
 .../js/components/ui/native-select/index.ts   |  3 +
 .../ui/navigation-menu/NavigationMenu.vue     | 35 +++++++++++
 .../navigation-menu/NavigationMenuContent.vue | 31 ++++++++++
 .../NavigationMenuIndicator.vue               | 23 ++++++++
 .../ui/navigation-menu/NavigationMenuItem.vue | 21 +++++++
 .../ui/navigation-menu/NavigationMenuLink.vue | 26 ++++++++
 .../ui/navigation-menu/NavigationMenuList.vue | 28 +++++++++
 .../navigation-menu/NavigationMenuTrigger.vue | 32 ++++++++++
 .../NavigationMenuViewport.vue                | 31 ++++++++++
 .../js/components/ui/navigation-menu/index.ts | 14 +++++
 .../js/components/ui/progress/Progress.vue    | 38 ++++++++++++
 resources/js/components/ui/progress/index.ts  |  1 +
 .../components/ui/radio-group/RadioGroup.vue  | 25 ++++++++
 .../ui/radio-group/RadioGroupItem.vue         | 40 +++++++++++++
 .../js/components/ui/radio-group/index.ts     |  2 +
 .../ui/resizable/ResizableHandle.vue          | 30 ++++++++++
 .../ui/resizable/ResizablePanel.vue           | 21 +++++++
 .../ui/resizable/ResizablePanelGroup.vue      | 25 ++++++++
 resources/js/components/ui/resizable/index.ts |  3 +
 .../components/ui/scroll-area/ScrollArea.vue  | 33 +++++++++++
 .../components/ui/scroll-area/ScrollBar.vue   | 32 ++++++++++
 .../js/components/ui/scroll-area/index.ts     |  2 +
 .../js/components/ui/tags-input/TagsInput.vue | 26 ++++++++
 .../ui/tags-input/TagsInputInput.vue          | 17 ++++++
 .../ui/tags-input/TagsInputItem.vue           | 20 +++++++
 .../ui/tags-input/TagsInputItemDelete.vue     | 22 +++++++
 .../ui/tags-input/TagsInputItemText.vue       | 17 ++++++
 .../js/components/ui/tags-input/index.ts      |  5 ++
 109 files changed, 2503 insertions(+)
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 resources/js/components/ui/alert-dialog/index.ts
 create mode 100644 resources/js/components/ui/aspect-ratio/AspectRatio.vue
 create mode 100644 resources/js/components/ui/aspect-ratio/index.ts
 create mode 100644 resources/js/components/ui/button-group/ButtonGroup.vue
 create mode 100644 resources/js/components/ui/button-group/ButtonGroupSeparator.vue
 create mode 100644 resources/js/components/ui/button-group/ButtonGroupText.vue
 create mode 100644 resources/js/components/ui/button-group/index.ts
 create mode 100644 resources/js/components/ui/carousel/Carousel.vue
 create mode 100644 resources/js/components/ui/carousel/CarouselContent.vue
 create mode 100644 resources/js/components/ui/carousel/CarouselItem.vue
 create mode 100644 resources/js/components/ui/carousel/CarouselNext.vue
 create mode 100644 resources/js/components/ui/carousel/CarouselPrevious.vue
 create mode 100644 resources/js/components/ui/carousel/index.ts
 create mode 100644 resources/js/components/ui/carousel/interface.ts
 create mode 100644 resources/js/components/ui/carousel/useCarousel.ts
 create mode 100644 resources/js/components/ui/context-menu/ContextMenu.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuContent.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuGroup.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuItem.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuLabel.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuPortal.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuSeparator.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuShortcut.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuSub.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuSubContent.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
 create mode 100644 resources/js/components/ui/context-menu/ContextMenuTrigger.vue
 create mode 100644 resources/js/components/ui/context-menu/index.ts
 create mode 100644 resources/js/components/ui/drawer/Drawer.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerClose.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerContent.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerDescription.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerFooter.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerHeader.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerOverlay.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerTitle.vue
 create mode 100644 resources/js/components/ui/drawer/DrawerTrigger.vue
 create mode 100644 resources/js/components/ui/drawer/index.ts
 create mode 100644 resources/js/components/ui/empty/Empty.vue
 create mode 100644 resources/js/components/ui/empty/EmptyContent.vue
 create mode 100644 resources/js/components/ui/empty/EmptyDescription.vue
 create mode 100644 resources/js/components/ui/empty/EmptyHeader.vue
 create mode 100644 resources/js/components/ui/empty/EmptyMedia.vue
 create mode 100644 resources/js/components/ui/empty/EmptyTitle.vue
 create mode 100644 resources/js/components/ui/empty/index.ts
 create mode 100644 resources/js/components/ui/hover-card/HoverCard.vue
 create mode 100644 resources/js/components/ui/hover-card/HoverCardContent.vue
 create mode 100644 resources/js/components/ui/hover-card/HoverCardTrigger.vue
 create mode 100644 resources/js/components/ui/hover-card/index.ts
 create mode 100644 resources/js/components/ui/input-group/InputGroup.vue
 create mode 100644 resources/js/components/ui/input-group/InputGroupAddon.vue
 create mode 100644 resources/js/components/ui/input-group/InputGroupButton.vue
 create mode 100644 resources/js/components/ui/input-group/InputGroupInput.vue
 create mode 100644 resources/js/components/ui/input-group/InputGroupText.vue
 create mode 100644 resources/js/components/ui/input-group/InputGroupTextarea.vue
 create mode 100644 resources/js/components/ui/input-group/index.ts
 create mode 100644 resources/js/components/ui/input-otp/InputOTP.vue
 create mode 100644 resources/js/components/ui/input-otp/InputOTPGroup.vue
 create mode 100644 resources/js/components/ui/input-otp/InputOTPSeparator.vue
 create mode 100644 resources/js/components/ui/input-otp/InputOTPSlot.vue
 create mode 100644 resources/js/components/ui/input-otp/index.ts
 create mode 100644 resources/js/components/ui/input/InputMask.vue
 create mode 100644 resources/js/components/ui/kbd/Kbd.vue
 create mode 100644 resources/js/components/ui/kbd/KbdGroup.vue
 create mode 100644 resources/js/components/ui/kbd/index.ts
 create mode 100644 resources/js/components/ui/native-select/NativeSelect.vue
 create mode 100644 resources/js/components/ui/native-select/NativeSelectOptGroup.vue
 create mode 100644 resources/js/components/ui/native-select/NativeSelectOption.vue
 create mode 100644 resources/js/components/ui/native-select/index.ts
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenu.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuList.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
 create mode 100644 resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
 create mode 100644 resources/js/components/ui/navigation-menu/index.ts
 create mode 100644 resources/js/components/ui/progress/Progress.vue
 create mode 100644 resources/js/components/ui/progress/index.ts
 create mode 100644 resources/js/components/ui/radio-group/RadioGroup.vue
 create mode 100644 resources/js/components/ui/radio-group/RadioGroupItem.vue
 create mode 100644 resources/js/components/ui/radio-group/index.ts
 create mode 100644 resources/js/components/ui/resizable/ResizableHandle.vue
 create mode 100644 resources/js/components/ui/resizable/ResizablePanel.vue
 create mode 100644 resources/js/components/ui/resizable/ResizablePanelGroup.vue
 create mode 100644 resources/js/components/ui/resizable/index.ts
 create mode 100644 resources/js/components/ui/scroll-area/ScrollArea.vue
 create mode 100644 resources/js/components/ui/scroll-area/ScrollBar.vue
 create mode 100644 resources/js/components/ui/scroll-area/index.ts
 create mode 100644 resources/js/components/ui/tags-input/TagsInput.vue
 create mode 100644 resources/js/components/ui/tags-input/TagsInputInput.vue
 create mode 100644 resources/js/components/ui/tags-input/TagsInputItem.vue
 create mode 100644 resources/js/components/ui/tags-input/TagsInputItemDelete.vue
 create mode 100644 resources/js/components/ui/tags-input/TagsInputItemText.vue
 create mode 100644 resources/js/components/ui/tags-input/index.ts

diff --git a/resources/js/components/ui/alert-dialog/AlertDialog.vue b/resources/js/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 000000000..b6e6b4bf8
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogAction.vue b/resources/js/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 000000000..09cf6fcbc
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue b/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 000000000..e261894e5
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogContent.vue b/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 000000000..ea0962b6b
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="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"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...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 max-h-[85dvh] overflow-y-auto rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue b/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 000000000..69642c9a5
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue b/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 000000000..50d4098ea
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,22 @@
+<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="alert-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/alert-dialog/AlertDialogHeader.vue b/resources/js/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 000000000..dbe72a764
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogHeader.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="alert-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/alert-dialog/AlertDialogTitle.vue b/resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 000000000..bb97e4d4a
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue b/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 000000000..98d40ee08
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/resources/js/components/ui/alert-dialog/index.ts b/resources/js/components/ui/alert-dialog/index.ts
new file mode 100644
index 000000000..cf1b45dff
--- /dev/null
+++ b/resources/js/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/resources/js/components/ui/aspect-ratio/AspectRatio.vue b/resources/js/components/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 000000000..857c208de
--- /dev/null
+++ b/resources/js/components/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from "reka-ui"
+import { AspectRatio } from "reka-ui"
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    v-slot="slotProps"
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
+  </AspectRatio>
+</template>
diff --git a/resources/js/components/ui/aspect-ratio/index.ts b/resources/js/components/ui/aspect-ratio/index.ts
new file mode 100644
index 000000000..e658f55a0
--- /dev/null
+++ b/resources/js/components/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.vue"
diff --git a/resources/js/components/ui/button-group/ButtonGroup.vue b/resources/js/components/ui/button-group/ButtonGroup.vue
new file mode 100644
index 000000000..9dbef6ac2
--- /dev/null
+++ b/resources/js/components/ui/button-group/ButtonGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ButtonGroupVariants } from "."
+import { cn } from "@/lib/utils"
+import { buttonGroupVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  orientation?: ButtonGroupVariants["orientation"]
+}>()
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/button-group/ButtonGroupSeparator.vue b/resources/js/components/ui/button-group/ButtonGroupSeparator.vue
new file mode 100644
index 000000000..e069dd5cc
--- /dev/null
+++ b/resources/js/components/ui/button-group/ButtonGroupSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import { Separator } from '@/components/ui/separator'
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="button-group-separator"
+    v-bind="delegatedProps"
+    :orientation="props.orientation"
+    :class="cn(
+      'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+      props.class,
+    )"
+  />
+</template>
diff --git a/resources/js/components/ui/button-group/ButtonGroupText.vue b/resources/js/components/ui/button-group/ButtonGroupText.vue
new file mode 100644
index 000000000..c436843e4
--- /dev/null
+++ b/resources/js/components/ui/button-group/ButtonGroupText.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonGroupVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+interface Props extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+  orientation?: ButtonGroupVariants["orientation"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/button-group/index.ts b/resources/js/components/ui/button-group/index.ts
new file mode 100644
index 000000000..474566fa6
--- /dev/null
+++ b/resources/js/components/ui/button-group/index.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as ButtonGroup } from "./ButtonGroup.vue"
+export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.vue"
+export { default as ButtonGroupText } from "./ButtonGroupText.vue"
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+)
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>
diff --git a/resources/js/components/ui/carousel/Carousel.vue b/resources/js/components/ui/carousel/Carousel.vue
new file mode 100644
index 000000000..4575682ae
--- /dev/null
+++ b/resources/js/components/ui/carousel/Carousel.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useProvideCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: "horizontal",
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>
diff --git a/resources/js/components/ui/carousel/CarouselContent.vue b/resources/js/components/ui/carousel/CarouselContent.vue
new file mode 100644
index 000000000..bd3db7e7b
--- /dev/null
+++ b/resources/js/components/ui/carousel/CarouselContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/resources/js/components/ui/carousel/CarouselItem.vue b/resources/js/components/ui/carousel/CarouselItem.vue
new file mode 100644
index 000000000..39df4c63e
--- /dev/null
+++ b/resources/js/components/ui/carousel/CarouselItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/carousel/CarouselNext.vue b/resources/js/components/ui/carousel/CarouselNext.vue
new file mode 100644
index 000000000..ad88c0085
--- /dev/null
+++ b/resources/js/components/ui/carousel/CarouselNext.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '@/components/ui/button'
+import { IconArrowRight } from "@tabler/icons-vue"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <IconArrowRight />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/resources/js/components/ui/carousel/CarouselPrevious.vue b/resources/js/components/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 000000000..80785a85d
--- /dev/null
+++ b/resources/js/components/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '@/components/ui/button'
+import { IconArrowLeft } from "@tabler/icons-vue"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <IconArrowLeft />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/resources/js/components/ui/carousel/index.ts b/resources/js/components/ui/carousel/index.ts
new file mode 100644
index 000000000..154bfcbe9
--- /dev/null
+++ b/resources/js/components/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from "./Carousel.vue"
+export { default as CarouselContent } from "./CarouselContent.vue"
+export { default as CarouselItem } from "./CarouselItem.vue"
+export { default as CarouselNext } from "./CarouselNext.vue"
+export { default as CarouselPrevious } from "./CarouselPrevious.vue"
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from "./interface"
+
+export { useCarousel } from "./useCarousel"
diff --git a/resources/js/components/ui/carousel/interface.ts b/resources/js/components/ui/carousel/interface.ts
new file mode 100644
index 000000000..74eaf36d0
--- /dev/null
+++ b/resources/js/components/ui/carousel/interface.ts
@@ -0,0 +1,26 @@
+import type useEmblaCarousel from "embla-carousel-vue"
+import type {
+  EmblaCarouselVueType,
+} from "embla-carousel-vue"
+import type { HTMLAttributes, UnwrapRef } from "vue"
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+}
+
+export interface CarouselEmits {
+  (e: "init-api", payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes["class"]
+}
diff --git a/resources/js/components/ui/carousel/useCarousel.ts b/resources/js/components/ui/carousel/useCarousel.ts
new file mode 100644
index 000000000..32e35ca09
--- /dev/null
+++ b/resources/js/components/ui/carousel/useCarousel.ts
@@ -0,0 +1,56 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
+import { createInjectionState } from "@vueuse/core"
+import emblaCarouselVue from "embla-carousel-vue"
+import { onMounted, ref } from "vue"
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on("init", onSelect)
+      emblaApi.value?.on("reInit", onSelect)
+      emblaApi.value?.on("select", onSelect)
+
+      emits("init-api", emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />")
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/resources/js/components/ui/context-menu/ContextMenu.vue b/resources/js/components/ui/context-menu/ContextMenu.vue
new file mode 100644
index 000000000..b4c6c0934
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
+import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot
+    data-slot="context-menu"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue b/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 000000000..fa9968433
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconCheck } from "@tabler/icons-vue"
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    data-slot="context-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">
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <IconCheck class="size-4" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuContent.vue b/resources/js/components/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 000000000..2fbc5568c
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      data-slot="context-menu-content"
+      v-bind="{ ...$attrs, ...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-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuGroup.vue b/resources/js/components/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 000000000..9af9b2665
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from "reka-ui"
+import { ContextMenuGroup } from "reka-ui"
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup
+    data-slot="context-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuItem.vue b/resources/js/components/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 000000000..b6a4c48e5
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ContextMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    data-slot="context-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :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 />
+  </ContextMenuItem>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuLabel.vue b/resources/js/components/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 000000000..80d051957
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ContextMenuLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuLabel
+    data-slot="context-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="delegatedProps"
+    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuPortal.vue b/resources/js/components/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 000000000..c50a2b330
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from "reka-ui"
+import { ContextMenuPortal } from "reka-ui"
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal
+    data-slot="context-menu-portal"
+    v-bind="props"
+  >
+    <slot />
+  </ContextMenuPortal>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue b/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 000000000..25372ed82
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui"
+import {
+  ContextMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup
+    data-slot="context-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue b/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 000000000..10dfdfd9f
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconCircleFilled } from "@tabler/icons-vue"
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    data-slot="context-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">
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <IconCircleFilled class="size-2" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSeparator.vue b/resources/js/components/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 000000000..d7f0c60f0
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuSeparator
+    data-slot="context-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/context-menu/ContextMenuShortcut.vue b/resources/js/components/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 000000000..2631d6826
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuShortcut.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>
+  <span
+    data-slot="context-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/context-menu/ContextMenuSub.vue b/resources/js/components/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 000000000..aeb1835cc
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui"
+import {
+  ContextMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub
+    data-slot="context-menu-sub"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSubContent.vue b/resources/js/components/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 000000000..c4fcafdad
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    data-slot="context-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue b/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 000000000..987324bea
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconChevronRight } from "@tabler/icons-vue"
+import {
+  ContextMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    data-slot="context-menu-sub-trigger"
+    :data-inset="inset ? '' : undefined"
+    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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <IconChevronRight class="ml-auto" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/resources/js/components/ui/context-menu/ContextMenuTrigger.vue b/resources/js/components/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 000000000..70a8143ff
--- /dev/null
+++ b/resources/js/components/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from "reka-ui"
+import { ContextMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger
+    data-slot="context-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/resources/js/components/ui/context-menu/index.ts b/resources/js/components/ui/context-menu/index.ts
new file mode 100644
index 000000000..5919fd37d
--- /dev/null
+++ b/resources/js/components/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from "./ContextMenu.vue"
+export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue"
+export { default as ContextMenuContent } from "./ContextMenuContent.vue"
+export { default as ContextMenuGroup } from "./ContextMenuGroup.vue"
+export { default as ContextMenuItem } from "./ContextMenuItem.vue"
+export { default as ContextMenuLabel } from "./ContextMenuLabel.vue"
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue"
+export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue"
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue"
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue"
+export { default as ContextMenuSub } from "./ContextMenuSub.vue"
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue"
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue"
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue"
diff --git a/resources/js/components/ui/drawer/Drawer.vue b/resources/js/components/ui/drawer/Drawer.vue
new file mode 100644
index 000000000..5428e35c1
--- /dev/null
+++ b/resources/js/components/ui/drawer/Drawer.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerRoot } from "vaul-vue"
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot
+    v-slot="slotProps"
+    data-slot="drawer"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DrawerRoot>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerClose.vue b/resources/js/components/ui/drawer/DrawerClose.vue
new file mode 100644
index 000000000..eecc11b7f
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerClose.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DrawerCloseProps } from "vaul-vue"
+import { DrawerClose } from "vaul-vue"
+
+const props = defineProps<DrawerCloseProps>()
+</script>
+
+<template>
+  <DrawerClose
+    data-slot="drawer-close"
+    v-bind="props"
+  >
+    <slot />
+  </DrawerClose>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerContent.vue b/resources/js/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 000000000..5994c854c
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerContent, DrawerPortal } from "vaul-vue"
+import { cn } from "@/lib/utils"
+import DrawerOverlay from "./DrawerOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+        'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+        'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
+        props.class,
+      )"
+    >
+      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerDescription.vue b/resources/js/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 000000000..77e69ba35
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerDescription } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerDescription
+    data-slot="drawer-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerFooter.vue b/resources/js/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 000000000..34c2e1217
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerHeader.vue b/resources/js/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 000000000..f68aeb059
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerOverlay.vue b/resources/js/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 000000000..e7e4a05ab
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerOverlay } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-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)"
+  />
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerTitle.vue b/resources/js/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 000000000..328fb0d21
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerTitle } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerTitle
+    data-slot="drawer-title"
+    v-bind="delegatedProps"
+    :class="cn('text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/resources/js/components/ui/drawer/DrawerTrigger.vue b/resources/js/components/ui/drawer/DrawerTrigger.vue
new file mode 100644
index 000000000..04b5bf13b
--- /dev/null
+++ b/resources/js/components/ui/drawer/DrawerTrigger.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DrawerTriggerProps } from "vaul-vue"
+import { DrawerTrigger } from "vaul-vue"
+
+const props = defineProps<DrawerTriggerProps>()
+</script>
+
+<template>
+  <DrawerTrigger
+    data-slot="drawer-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DrawerTrigger>
+</template>
diff --git a/resources/js/components/ui/drawer/index.ts b/resources/js/components/ui/drawer/index.ts
new file mode 100644
index 000000000..0d07820d6
--- /dev/null
+++ b/resources/js/components/ui/drawer/index.ts
@@ -0,0 +1,9 @@
+export { default as Drawer } from "./Drawer.vue"
+export { default as DrawerClose } from "./DrawerClose.vue"
+export { default as DrawerContent } from "./DrawerContent.vue"
+export { default as DrawerDescription } from "./DrawerDescription.vue"
+export { default as DrawerFooter } from "./DrawerFooter.vue"
+export { default as DrawerHeader } from "./DrawerHeader.vue"
+export { default as DrawerOverlay } from "./DrawerOverlay.vue"
+export { default as DrawerTitle } from "./DrawerTitle.vue"
+export { default as DrawerTrigger } from "./DrawerTrigger.vue"
diff --git a/resources/js/components/ui/empty/Empty.vue b/resources/js/components/ui/empty/Empty.vue
new file mode 100644
index 000000000..2637b3c7b
--- /dev/null
+++ b/resources/js/components/ui/empty/Empty.vue
@@ -0,0 +1,20 @@
+<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="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/empty/EmptyContent.vue b/resources/js/components/ui/empty/EmptyContent.vue
new file mode 100644
index 000000000..d19ee0003
--- /dev/null
+++ b/resources/js/components/ui/empty/EmptyContent.vue
@@ -0,0 +1,20 @@
+<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="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/empty/EmptyDescription.vue b/resources/js/components/ui/empty/EmptyDescription.vue
new file mode 100644
index 000000000..e4ed5fb71
--- /dev/null
+++ b/resources/js/components/ui/empty/EmptyDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/resources/js/components/ui/empty/EmptyHeader.vue b/resources/js/components/ui/empty/EmptyHeader.vue
new file mode 100644
index 000000000..ac21d8c89
--- /dev/null
+++ b/resources/js/components/ui/empty/EmptyHeader.vue
@@ -0,0 +1,20 @@
+<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="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/empty/EmptyMedia.vue b/resources/js/components/ui/empty/EmptyMedia.vue
new file mode 100644
index 000000000..c68397c0c
--- /dev/null
+++ b/resources/js/components/ui/empty/EmptyMedia.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/empty/EmptyTitle.vue b/resources/js/components/ui/empty/EmptyTitle.vue
new file mode 100644
index 000000000..90c950d29
--- /dev/null
+++ b/resources/js/components/ui/empty/EmptyTitle.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="empty-title"
+    :class="cn('text-lg font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/empty/index.ts b/resources/js/components/ui/empty/index.ts
new file mode 100644
index 000000000..ce0c489f2
--- /dev/null
+++ b/resources/js/components/ui/empty/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Empty } from "./Empty.vue"
+export { default as EmptyContent } from "./EmptyContent.vue"
+export { default as EmptyDescription } from "./EmptyDescription.vue"
+export { default as EmptyHeader } from "./EmptyHeader.vue"
+export { default as EmptyMedia } from "./EmptyMedia.vue"
+export { default as EmptyTitle } from "./EmptyTitle.vue"
+
+export const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>
diff --git a/resources/js/components/ui/hover-card/HoverCard.vue b/resources/js/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 000000000..07d11e605
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot
+    v-slot="slotProps"
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </HoverCardRoot>
+</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardContent.vue b/resources/js/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 000000000..2a3c55336
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  HoverCardContent,
+  HoverCardPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      data-slot="hover-card-content"
+      v-bind="{ ...$attrs, ...forwardedProps }"
+      :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 w-64 rounded-md border p-4 shadow-md outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardTrigger.vue b/resources/js/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 000000000..0a0900192
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from "reka-ui"
+import { HoverCardTrigger } from "reka-ui"
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/resources/js/components/ui/hover-card/index.ts b/resources/js/components/ui/hover-card/index.ts
new file mode 100644
index 000000000..49b2930d2
--- /dev/null
+++ b/resources/js/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue"
+export { default as HoverCardContent } from "./HoverCardContent.vue"
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
diff --git a/resources/js/components/ui/input-group/InputGroup.vue b/resources/js/components/ui/input-group/InputGroup.vue
new file mode 100644
index 000000000..d32d69d4a
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroup.vue
@@ -0,0 +1,35 @@
+<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="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+      // Error state.
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/input-group/InputGroupAddon.vue b/resources/js/components/ui/input-group/InputGroupAddon.vue
new file mode 100644
index 000000000..709f482a3
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroupAddon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { InputGroupVariants } from "."
+import { cn } from "@/lib/utils"
+import { inputGroupAddonVariants } from "."
+
+const props = withDefaults(defineProps<{
+  align?: InputGroupVariants["align"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  align: "inline-start",
+})
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+  const currentTarget = e.currentTarget as HTMLElement | null
+  const target = e.target as HTMLElement | null
+  if (target && target.closest("button")) {
+    return
+  }
+  if (currentTarget && currentTarget?.parentElement) {
+    currentTarget.parentElement?.querySelector("input")?.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/input-group/InputGroupButton.vue b/resources/js/components/ui/input-group/InputGroupButton.vue
new file mode 100644
index 000000000..4e82e0936
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroupButton.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { InputGroupButtonProps } from "."
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { inputGroupButtonVariants } from "."
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+  size: "xs",
+  variant: "ghost",
+})
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>
diff --git a/resources/js/components/ui/input-group/InputGroupInput.vue b/resources/js/components/ui/input-group/InputGroupInput.vue
new file mode 100644
index 000000000..ca7cbb9be
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroupInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Input } from '@/components/ui/input'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/resources/js/components/ui/input-group/InputGroupText.vue b/resources/js/components/ui/input-group/InputGroupText.vue
new file mode 100644
index 000000000..e31733796
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroupText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/resources/js/components/ui/input-group/InputGroupTextarea.vue b/resources/js/components/ui/input-group/InputGroupTextarea.vue
new file mode 100644
index 000000000..2090be242
--- /dev/null
+++ b/resources/js/components/ui/input-group/InputGroupTextarea.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Textarea } from '@/components/ui/textarea'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Textarea
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/resources/js/components/ui/input-group/index.ts b/resources/js/components/ui/input-group/index.ts
new file mode 100644
index 000000000..7c1f18eeb
--- /dev/null
+++ b/resources/js/components/ui/input-group/index.ts
@@ -0,0 +1,59 @@
+import type { VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { cva } from "class-variance-authority"
+
+export { default as InputGroup } from "./InputGroup.vue"
+export { default as InputGroupAddon } from "./InputGroupAddon.vue"
+export { default as InputGroupButton } from "./InputGroupButton.vue"
+export { default as InputGroupInput } from "./InputGroupInput.vue"
+export { default as InputGroupText } from "./InputGroupText.vue"
+export { default as InputGroupTextarea } from "./InputGroupTextarea.vue"
+
+export const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+)
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
+
+export const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        "xs": "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        "sm": "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+)
+
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
+
+export interface InputGroupButtonProps {
+  variant?: ButtonVariants["variant"]
+  size?: InputGroupButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
diff --git a/resources/js/components/ui/input-otp/InputOTP.vue b/resources/js/components/ui/input-otp/InputOTP.vue
new file mode 100644
index 000000000..f34b73481
--- /dev/null
+++ b/resources/js/components/ui/input-otp/InputOTP.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardPropsEmits } from "reka-ui"
+import { OTPInput } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPGroup.vue b/resources/js/components/ui/input-otp/InputOTPGroup.vue
new file mode 100644
index 000000000..1dea2abab
--- /dev/null
+++ b/resources/js/components/ui/input-otp/InputOTPGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSeparator.vue b/resources/js/components/ui/input-otp/InputOTPSeparator.vue
new file mode 100644
index 000000000..b3e478900
--- /dev/null
+++ b/resources/js/components/ui/input-otp/InputOTPSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { IconMinus } from "@tabler/icons-vue"
+import { useForwardProps } from "reka-ui"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <IconMinus />
+    </slot>
+  </div>
+</template>
diff --git a/resources/js/components/ui/input-otp/InputOTPSlot.vue b/resources/js/components/ui/input-otp/InputOTPSlot.vue
new file mode 100644
index 000000000..a16579967
--- /dev/null
+++ b/resources/js/components/ui/input-otp/InputOTPSlot.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
+  >
+    {{ slot?.char }}
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>
diff --git a/resources/js/components/ui/input-otp/index.ts b/resources/js/components/ui/input-otp/index.ts
new file mode 100644
index 000000000..d97448a56
--- /dev/null
+++ b/resources/js/components/ui/input-otp/index.ts
@@ -0,0 +1,4 @@
+export { default as InputOTP } from "./InputOTP.vue"
+export { default as InputOTPGroup } from "./InputOTPGroup.vue"
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
+export { default as InputOTPSlot } from "./InputOTPSlot.vue"
diff --git a/resources/js/components/ui/input/InputMask.vue b/resources/js/components/ui/input/InputMask.vue
new file mode 100644
index 000000000..0cc70bb59
--- /dev/null
+++ b/resources/js/components/ui/input/InputMask.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { vMaska } from 'maska/vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+    maskOptions?: Record<string, any>;
+    emitMasked?: boolean;
+}>();
+
+const emits = defineEmits<{
+    'update:modelValue': [value: string | number];
+}>();
+
+function onMaska(event: { detail: { masked: string; unmasked: string; completed: boolean } }) {
+    const value = props.emitMasked ? event.detail.masked : event.detail.unmasked;
+    emits('update:modelValue', value || '');
+}
+</script>
+
+<template>
+    <input
+        v-maska
+        v-bind="maskOptions"
+        :value="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 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,
+            )
+        "
+        @maska="onMaska"
+    />
+</template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
index c5248c5c1..538c924ea 100644
--- a/resources/js/components/ui/input/index.ts
+++ b/resources/js/components/ui/input/index.ts
@@ -1 +1,2 @@
 export { default as Input } from './Input.vue';
+export { default as InputMask } from './InputMask.vue';
diff --git a/resources/js/components/ui/kbd/Kbd.vue b/resources/js/components/ui/kbd/Kbd.vue
new file mode 100644
index 000000000..e71b49492
--- /dev/null
+++ b/resources/js/components/ui/kbd/Kbd.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    :class="cn(
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/resources/js/components/ui/kbd/KbdGroup.vue b/resources/js/components/ui/kbd/KbdGroup.vue
new file mode 100644
index 000000000..e0cd86224
--- /dev/null
+++ b/resources/js/components/ui/kbd/KbdGroup.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>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('inline-flex items-center gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/resources/js/components/ui/kbd/index.ts b/resources/js/components/ui/kbd/index.ts
new file mode 100644
index 000000000..b613b0cc9
--- /dev/null
+++ b/resources/js/components/ui/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from "./Kbd.vue"
+export { default as KbdGroup } from "./KbdGroup.vue"
diff --git a/resources/js/components/ui/native-select/NativeSelect.vue b/resources/js/components/ui/native-select/NativeSelect.vue
new file mode 100644
index 000000000..ceb1be6fa
--- /dev/null
+++ b/resources/js/components/ui/native-select/NativeSelect.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { IconChevronDown } from "@tabler/icons-vue"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="cn(
+        'h-9 w-full min-w-0 cursor-pointer appearance-none rounded-md border-2 border-foreground bg-card px-3 py-2 pr-9 text-sm font-medium text-foreground shadow-2xs transition-[color,box-shadow] outline-none placeholder:text-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'focus-visible:ring-foreground/20 focus-visible:ring-[3px]',
+        'aria-invalid:border-destructive',
+        props.class,
+      )"
+    >
+      <slot />
+    </select>
+    <IconChevronDown
+      class="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none text-foreground/60"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>
diff --git a/resources/js/components/ui/native-select/NativeSelectOptGroup.vue b/resources/js/components/ui/native-select/NativeSelectOptGroup.vue
new file mode 100644
index 000000000..169558cb8
--- /dev/null
+++ b/resources/js/components/ui/native-select/NativeSelectOptGroup.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
+</template>
diff --git a/resources/js/components/ui/native-select/NativeSelectOption.vue b/resources/js/components/ui/native-select/NativeSelectOption.vue
new file mode 100644
index 000000000..2f678fb61
--- /dev/null
+++ b/resources/js/components/ui/native-select/NativeSelectOption.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
+</template>
diff --git a/resources/js/components/ui/native-select/index.ts b/resources/js/components/ui/native-select/index.ts
new file mode 100644
index 000000000..04e92c7ee
--- /dev/null
+++ b/resources/js/components/ui/native-select/index.ts
@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue"
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
+export { default as NativeSelectOption } from "./NativeSelectOption.vue"
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 000000000..6042a77d4
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+
+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
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="forwarded"
+    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+    <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
new file mode 100644
index 000000000..395dc2dfa
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="forwarded"
+    :class="cn(
+      '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,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 000000000..2558371ab
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
+    v-bind="forwardedProps"
+    :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="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
new file mode 100644
index 000000000..1a8595b8d
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <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
new file mode 100644
index 000000000..07f16a610
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuLink,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <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
new file mode 100644
index 000000000..a702d7063
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 000000000..888d832d8
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconChevronDown } from "@tabler/icons-vue"
+import {
+  NavigationMenuTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "."
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <IconChevronDown
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 000000000..74edf8676
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <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 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)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
new file mode 100644
index 000000000..90055919d
--- /dev/null
+++ b/resources/js/components/ui/navigation-menu/index.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "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/progress/Progress.vue b/resources/js/components/ui/progress/Progress.vue
new file mode 100644
index 000000000..5532af7a8
--- /dev/null
+++ b/resources/js/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/resources/js/components/ui/progress/index.ts b/resources/js/components/ui/progress/index.ts
new file mode 100644
index 000000000..8598b9697
--- /dev/null
+++ b/resources/js/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/resources/js/components/ui/radio-group/RadioGroup.vue b/resources/js/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 000000000..54045c421
--- /dev/null
+++ b/resources/js/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>
diff --git a/resources/js/components/ui/radio-group/RadioGroupItem.vue b/resources/js/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 000000000..34b9cce3b
--- /dev/null
+++ b/resources/js/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconCircleFilled } from "@tabler/icons-vue"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <IconCircleFilled class="text-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/resources/js/components/ui/radio-group/index.ts b/resources/js/components/ui/radio-group/index.ts
new file mode 100644
index 000000000..7cb0e3b10
--- /dev/null
+++ b/resources/js/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"
diff --git a/resources/js/components/ui/resizable/ResizableHandle.vue b/resources/js/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 000000000..9d2550643
--- /dev/null
+++ b/resources/js/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconGripVertical } from "@tabler/icons-vue"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "withHandle")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
+  >
+    <template v-if="props.withHandle">
+      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+        <slot>
+          <IconGripVertical class="size-2.5" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/resources/js/components/ui/resizable/ResizablePanel.vue b/resources/js/components/ui/resizable/ResizablePanel.vue
new file mode 100644
index 000000000..e52e1ecb0
--- /dev/null
+++ b/resources/js/components/ui/resizable/ResizablePanel.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SplitterPanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const { forwardRef } = useForwardExpose()
+</script>
+
+<template>
+  <SplitterPanel
+    :ref="forwardRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>
diff --git a/resources/js/components/ui/resizable/ResizablePanelGroup.vue b/resources/js/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 000000000..dd55b50c7
--- /dev/null
+++ b/resources/js/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    v-slot="slotProps"
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterGroup>
+</template>
diff --git a/resources/js/components/ui/resizable/index.ts b/resources/js/components/ui/resizable/index.ts
new file mode 100644
index 000000000..89e5d7706
--- /dev/null
+++ b/resources/js/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from "./ResizableHandle.vue"
+export { default as ResizablePanel } from "./ResizablePanel.vue"
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
diff --git a/resources/js/components/ui/scroll-area/ScrollArea.vue b/resources/js/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 000000000..6112caad3
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/resources/js/components/ui/scroll-area/ScrollBar.vue b/resources/js/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 000000000..a0b6f9b7b
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none p-px transition-colors select-none',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent',
+         props.class)"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/resources/js/components/ui/scroll-area/index.ts b/resources/js/components/ui/scroll-area/index.ts
new file mode 100644
index 000000000..c416759cb
--- /dev/null
+++ b/resources/js/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue"
+export { default as ScrollBar } from "./ScrollBar.vue"
diff --git a/resources/js/components/ui/tags-input/TagsInput.vue b/resources/js/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 000000000..325110e99
--- /dev/null
+++ b/resources/js/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputInput.vue b/resources/js/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 000000000..dbdcbeb3f
--- /dev/null
+++ b/resources/js/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItem.vue b/resources/js/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 000000000..30aa907b8
--- /dev/null
+++ b/resources/js/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItemDelete.vue b/resources/js/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 000000000..c923e8a6a
--- /dev/null
+++ b/resources/js/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { IconX } from "@tabler/icons-vue"
+import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <IconX class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/resources/js/components/ui/tags-input/TagsInputItemText.vue b/resources/js/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 000000000..cab600291
--- /dev/null
+++ b/resources/js/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/resources/js/components/ui/tags-input/index.ts b/resources/js/components/ui/tags-input/index.ts
new file mode 100644
index 000000000..8736692d5
--- /dev/null
+++ b/resources/js/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"

From 888f82176bd8571fff63d4f2298986ca7ef05ee8 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 7 Sep 2026 23:18:46 -0300
Subject: [PATCH 4/5] Refactor BrowserTestCase by removing unused Vite setup

This commit cleans up the BrowserTestCase by eliminating the unused Vite facade and the associated setup method, which was previously intended to configure a hot file that never existed. The class now focuses solely on its core functionality without unnecessary dependencies.
---
 tests/BrowserTestCase.php | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/tests/BrowserTestCase.php b/tests/BrowserTestCase.php
index abb24eff6..479adf359 100644
--- a/tests/BrowserTestCase.php
+++ b/tests/BrowserTestCase.php
@@ -4,8 +4,6 @@
 
 namespace Tests;
 
-use Illuminate\Support\Facades\Vite;
-
 abstract class BrowserTestCase extends TestCase
 {
     /**
@@ -13,11 +11,4 @@ abstract class BrowserTestCase extends TestCase
      * manifest must not be faked away.
      */
     protected bool $fakesVite = false;
-
-    protected function setUp(): void
-    {
-        parent::setUp();
-
-        Vite::useHotFile(base_path('tests/.vite-hot-file-that-never-exists'));
-    }
 }

From 2f5f4499fe1588b7fa29ee3d698577080698f114 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 7 Sep 2026 23:26:09 -0300
Subject: [PATCH 5/5] Keep the dependencies the UI primitives import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sweep dropped five packages as unused, but four of them are imported by the
primitives under resources/js/components/ui — restoring those files without the
packages broke the build, which is what the e2e job hit: "Rolldown failed to
resolve import maska/vue".

vaul-vue (drawer), vue-input-otp and embla-carousel-vue (carousel) come back:
if the primitives stay as a library to build from, so do the packages they
depend on. axios and maska stay out — nothing imports either, maska only
mattered for InputMask.vue, which is gone.

Also drops the Vite hot-file override from BrowserTestCase. It forced the tests
onto public/build even with the dev server running, so locally they read
whatever was last built rather than the code under test.
---
 package-lock.json                             | 152 ++++++++++++++++++
 package.json                                  |   3 +
 .../js/components/ui/input/InputMask.vue      |  40 -----
 resources/js/components/ui/input/index.ts     |   1 -
 4 files changed, 155 insertions(+), 41 deletions(-)
 delete mode 100644 resources/js/components/ui/input/InputMask.vue

diff --git a/package-lock.json b/package-lock.json
index e161daa7d..b86ad083d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "dayjs": "^1.11.19",
+                "embla-carousel-vue": "^8.6.0",
                 "highlight.js": "^11.11.1",
                 "laravel-vite-plugin": "^3.1.0",
                 "laravel-vue-i18n": "^2.8.0",
@@ -20,7 +21,9 @@
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
+                "vaul-vue": "^0.4.1",
                 "vue": "^3.5.13",
+                "vue-input-otp": "^0.3.2",
                 "vue-sonner": "^2.0.9"
             },
             "devDependencies": {
@@ -3176,6 +3179,34 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/embla-carousel": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+            "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+            "license": "MIT"
+        },
+        "node_modules/embla-carousel-reactive-utils": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+            "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "embla-carousel": "8.6.0"
+            }
+        },
+        "node_modules/embla-carousel-vue": {
+            "version": "8.6.0",
+            "resolved": "https://registry.npmjs.org/embla-carousel-vue/-/embla-carousel-vue-8.6.0.tgz",
+            "integrity": "sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==",
+            "license": "MIT",
+            "dependencies": {
+                "embla-carousel": "8.6.0",
+                "embla-carousel-reactive-utils": "8.6.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.37"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "10.6.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -7156,6 +7187,114 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "license": "MIT"
         },
+        "node_modules/vaul-vue": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/vaul-vue/-/vaul-vue-0.4.1.tgz",
+            "integrity": "sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==",
+            "dependencies": {
+                "@vueuse/core": "^10.8.0",
+                "reka-ui": "^2.0.0",
+                "vue": "^3.4.5"
+            },
+            "peerDependencies": {
+                "reka-ui": "^2.0.0",
+                "vue": "^3.3.0"
+            }
+        },
+        "node_modules/vaul-vue/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/vaul-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": "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/sponsors/antfu"
+            }
+        },
+        "node_modules/vaul-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": "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/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/vaul-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": "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/sponsors/antfu"
+            }
+        },
+        "node_modules/vaul-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": "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/sponsors/antfu"
+            }
+        },
+        "node_modules/vaul-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": "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/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/vite": {
             "version": "8.0.16",
             "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
@@ -7320,6 +7459,19 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/vue-input-otp": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/vue-input-otp/-/vue-input-otp-0.3.2.tgz",
+            "integrity": "sha512-QMl1842WB6uNAsK4+mZXIskb00TOfahH3AQt8rpRecbtQnOp+oHSUbL/Z3wekfy6pAl+hyN3e1rCUSkCMzbDLQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@vueuse/core": "^12.8.2",
+                "reka-ui": "^2.6.1"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/vue-sonner": {
             "version": "2.0.9",
             "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
diff --git a/package.json b/package.json
index bcaa84783..840cc7dec 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
+        "embla-carousel-vue": "^8.6.0",
         "highlight.js": "^11.11.1",
         "laravel-vite-plugin": "^3.1.0",
         "laravel-vue-i18n": "^2.8.0",
@@ -52,7 +53,9 @@
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
+        "vaul-vue": "^0.4.1",
         "vue": "^3.5.13",
+        "vue-input-otp": "^0.3.2",
         "vue-sonner": "^2.0.9"
     },
     "optionalDependencies": {
diff --git a/resources/js/components/ui/input/InputMask.vue b/resources/js/components/ui/input/InputMask.vue
deleted file mode 100644
index 0cc70bb59..000000000
--- a/resources/js/components/ui/input/InputMask.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { vMaska } from 'maska/vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    class?: HTMLAttributes['class'];
-    maskOptions?: Record<string, any>;
-    emitMasked?: boolean;
-}>();
-
-const emits = defineEmits<{
-    'update:modelValue': [value: string | number];
-}>();
-
-function onMaska(event: { detail: { masked: string; unmasked: string; completed: boolean } }) {
-    const value = props.emitMasked ? event.detail.masked : event.detail.unmasked;
-    emits('update:modelValue', value || '');
-}
-</script>
-
-<template>
-    <input
-        v-maska
-        v-bind="maskOptions"
-        :value="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 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,
-            )
-        "
-        @maska="onMaska"
-    />
-</template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
index 538c924ea..c5248c5c1 100644
--- a/resources/js/components/ui/input/index.ts
+++ b/resources/js/components/ui/input/index.ts
@@ -1,2 +1 @@
 export { default as Input } from './Input.vue';
-export { default as InputMask } from './InputMask.vue';