Modals

<!-- Modal with Dynamic Sizes -->
<div :class="size" class="relative w-full bg-white rounded-[2rem] p-8">
   <!-- Content -->
</div>

<!-- Sizes used: max-w-xs (SM), max-w-lg (MD), max-w-4xl (LG) -->

<!-- Side Drawer Transition -->
x-transition:enter-start="translate-x-full" 
x-transition:enter-end="translate-x-0"

<!-- BottomSheet Transition -->
x-transition:enter-start="translate-y-full" 
x-transition:enter-end="translate-y-0"

<!-- Input OTP Grid Inside Modal -->
<div class="flex justify-center gap-3">
    <input type="text" maxlength="1" class="w-12 h-14 bg-gray-50 rounded-xl" />
</div>

<!-- Command Palette Search Overlay -->
x-transition:enter-start="opacity-0 -translate-y-8" 
x-transition:enter-end="opacity-100 translate-y-0"

<!-- Fullscreen Modal Logic -->
<div class="fixed inset-0 bg-white h-screen w-screen">...</div>