adata-ui 2.1.40-beta → 2.1.40-beta.2

package/components/navigation/header/NavList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 
 interface NavList {
   title: string
@@ -18,61 +18,28 @@ const props = defineProps<{
   currentModule: boolean
 }>()
 
+const { isActiveService } = useActiveNavigation()
+
 function isActive(itemPath: string) {
   if (!props.currentModule) return false
-
-  const currentUrl = window.location.href.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
-  const section = PAGES[props.id]
-
-  const currentPath = itemPath.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
-
-  if (currentUrl === currentPath) return true
-
-  if (currentPath.endsWith('/')) {
-    let atLeastOne = false
-
-    for (const key in section) {
-      const path = section[key]
-      if (key !== 'main') {
-        const includes = currentUrl.includes(path) || currentUrl.includes('car-result')
-        if (includes) {
-          atLeastOne = true
-          break
-        }
-      }
-    }
-
-    return !atLeastOne
-  }
-
-  if (currentPath.includes('check-car')) {
-    if (currentUrl.includes('car-result')) {
-      return true
-    }
-  }
-
-  for (const key in section) {
-    const path = section[key]
-    if (key !== 'main') {
-      const includesBoth = currentUrl.includes(path) && currentUrl.startsWith(currentPath)
-      if (includesBoth) {
-        return true
-      }
-    }
-  }
-
-  return false
+  return isActiveService(itemPath)
 }
 </script>
 
 <template>
-  <section class="group/section overflow-hidden rounded-xl border border-gray-200 bg-white p-3 shadow-sm transition-colors hover:border-blue-700/40 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-blue-500/40">
+  <section
+    class="group/section overflow-hidden rounded-xl border p-3 shadow-sm transition-colors"
+    :class="currentModule
+      ? 'border-blue-700/20 bg-blue-50 hover:border-blue-700/40 dark:border-blue-500/20 dark:bg-blue-500/5 dark:hover:border-blue-500/40'
+      : 'border-gray-200 bg-white hover:border-blue-700/40 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-blue-500/40'"
+  >
     <div class="mb-3 flex items-start justify-between gap-2">
       <nuxt-link-locale
         :to="link"
         class="group/title flex min-w-0 items-center gap-2 text-sm font-bold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
       >
-        <span class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-700/10 text-blue-700 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500">
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-700/10 text-blue-700 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500">
           <component
             :is="icon"
             class="size-4"
@@ -86,7 +53,8 @@ function isActive(itemPath: string) {
           v-if="badge"
           class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
         >NEW</span>
-        <a-icon-arrow-side-up class="size-4 text-gray-500 transition-colors group-hover/section:text-blue-700 dark:group-hover/section:text-blue-500" />
+        <a-icon-arrow-side-up
+          class="size-4 text-gray-500 transition-colors group-hover/section:text-blue-700 dark:group-hover/section:text-blue-500"/>
       </div>
     </div>
 
@@ -102,13 +70,25 @@ function isActive(itemPath: string) {
           class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-blue-100 dark:hover:bg-gray-200/10"
           :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
         >
-          <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-600 transition-colors group-hover/item:bg-blue-700/10 group-hover/item:text-blue-700 dark:bg-gray-800 dark:text-gray-300 dark:group-hover/item:text-blue-500">
+          <span
+            class="flex size-7 shrink-0 items-center justify-center rounded-md transition-colors group-hover/item:bg-blue-700/10 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-500"
+            :class="{
+                'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500': isActive(item.to),
+                'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300': !isActive(item.to),
+                // 'bg-white text-gray-600 dark:bg-white dark:text-gray-300': currentModule,
+            }"
+          >
             <component
               :is="item.icon"
               class="size-[14px]"
             />
           </span>
-          <span class="truncate text-sm font-semibold normal-case text-gray-600 transition-colors group-hover/item:text-deepblue-900 dark:text-gray-300 dark:group-hover/item:text-gray-100">{{ item.title }}</span>
+          <span
+            class="truncate text-sm font-semibold normal-case transition-colors group-hover/item:text-deepblue-900 dark:group-hover/item:text-gray-100"
+            :class="isActive(item.to)
+              ? 'text-blue-700 dark:text-blue-500'
+              : 'text-gray-600 dark:text-gray-300'"
+          >{{ item.title }}</span>
         </nuxt-link-locale>
       </li>
     </ul>

package/components/navigation/header/ProductMenu.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'
 import NavList from '#adata-ui/components/navigation/header/NavList.vue'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
 
 defineProps<{ url?: string }>()
@@ -8,6 +9,7 @@ defineEmits(['outerClick', 'mouseOver'])
 
 const { t } = useI18n()
 const modules = useHeaderNavigationLinks()
+const { isActiveModule } = useActiveNavigation()
 
 // Fixed EDO promo card on the left (like edo-editor); EDO is excluded from the catalog grid below.
 const edoModule = computed(() => modules.value.find(module => module.key === 'edo') ?? null)
@@ -32,35 +34,39 @@ const catalogColumns = computed(() =>
             <nuxt-link-locale
               v-if="edoModule"
               :to="edoModule.link"
-              class="group block overflow-hidden rounded-xl border border-blue-700/20 bg-blue-50 p-4 shadow-sm transition-colors hover:border-blue-700/40 hover:bg-blue-100 dark:border-blue-500/20 dark:bg-blue-500/5 dark:hover:border-blue-500/40 dark:hover:bg-blue-500/10"
+              class="group block overflow-hidden rounded-xl border border-blue-700/20  p-4 shadow-sm transition-colors hover:border-blue-700/40 hover:bg-blue-100 dark:border-blue-500/20  dark:hover:border-blue-500/40 dark:hover:bg-blue-500/10"
               :data-test-id="edoModule.data_attribute"
             >
               <div class="flex items-start gap-3">
-                <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-700 text-white shadow-sm">
+                <div
+                  class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-700 text-white shadow-sm">
                   <component
                     :is="edoModule.icon"
                     class="size-5"
                   />
                 </div>
                 <div class="min-w-0">
-                  <div class="flex items-center gap-2">
+                  <div class="flex items-center justify-between gap-2">
                     <h3 class="text-base font-bold normal-case text-deepblue-900 dark:text-gray-100">
                       {{ edoModule.name }}
                     </h3>
-                    <a-icon-arrow-side-up class="size-4 text-blue-700 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 dark:text-blue-500" />
+                    <div class="flex items-center gap-1 justify-end">
+                      <span
+                        v-if="edoModule.is_new"
+                        class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
+                      >NEW</span>
+                      <a-icon-arrow-side-up
+                        class="size-4 text-gray-500 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-blue-700 dark:text-gray-400 dark:group-hover:text-blue-500"/>
+                    </div>
                   </div>
                   <p class="mt-1 text-sm normal-case leading-snug text-gray-600 dark:text-gray-300">
                     {{ t('header.products.edo.heroSubtitle') }}
                   </p>
                 </div>
               </div>
-              <div class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold normal-case text-blue-700 dark:text-blue-500">
-                {{ t('header.products.edo.heroCta') }}
-                <a-icon-arrow-side-up class="size-3.5" />
-              </div>
             </nuxt-link-locale>
 
-            <card-gallery class="hidden lg:block" />
+            <card-gallery class="hidden lg:block"/>
           </aside>
 
           <!-- Catalog grid: products as bordered section cards (EDO lives in the hero). -->
@@ -74,7 +80,7 @@ const catalogColumns = computed(() =>
                 v-for="module in column"
                 :id="module.key"
                 :key="module.key"
-                :current-module="false"
+                :current-module="isActiveModule(module)"
                 :title="module.name"
                 :link="module.link"
                 :nav-list="module.items"

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
+
+export interface PillTab {
+  key: string
+  name: string
+  count?: number
+  countColor?: CountColor
+  disabled?: boolean
+  hideCount?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: PillTab[]
+  showCount?: boolean
+  ariaLabel?: string
+  block?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+}>(), {
+  showCount: false,
+  block: false,
+  disabled: false,
+  size: 'sm',
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+
+const SIZE_CLASS: Record<'sm' | 'md', string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+}
+
+const COUNT_COLOR_CLASS: Record<CountColor, string> = {
+  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
+  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
+}
+
+const { t, te } = useI18n()
+
+function localize(label: string) {
+  return te(label) ? t(label) : label
+}
+
+function isDisabled(option: PillTab) {
+  return props.disabled || option.disabled === true
+}
+
+function select(option: PillTab) {
+  if (isDisabled(option)) return
+  emit('update:modelValue', option.key)
+}
+</script>
+
+<template>
+  <div
+    class="pill-tabs-v2 min-w-0 max-w-full rounded-xl border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]"
+    :class="[
+      block ? 'w-full' : 'w-fit',
+      disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
+    ]"
+    :aria-disabled="disabled || undefined"
+  >
+    <div
+      role="tablist"
+      :aria-label="ariaLabel"
+      class="pill-tabs-v2__list flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
+    >
+      <button
+        v-for="option in options"
+        :key="option.key"
+        type="button"
+        role="tab"
+        :aria-selected="modelValue === option.key"
+        :aria-disabled="isDisabled(option) || undefined"
+        :disabled="isDisabled(option)"
+        :tabindex="modelValue === option.key ? 0 : -1"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 font-medium transition-colors duration-150"
+        :class="[
+          SIZE_CLASS[size],
+          isDisabled(option)
+            ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+            : modelValue === option.key
+              ? 'text-deepblue-900 bg-white shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
+              : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
+          block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
+        ]"
+        @click="select(option)"
+      >
+        <slot name="option" :option="option">
+          <span>{{ localize(option.name) }}</span>
+
+          <span
+            v-if="showCount && !option.hideCount"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-semibold leading-5"
+            :class="COUNT_COLOR_CLASS[option.countColor ?? 'gray']"
+          >
+            {{ option.count }}
+          </span>
+        </slot>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pill-tabs-v2__list {
+  scrollbar-width: none;
+}
+.pill-tabs-v2__list::-webkit-scrollbar {
+  display: none;
+}
+</style>

package/components/overlays/modal/AModalV2.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import { onKeyStroke, useScrollLock, useWindowSize } from '@vueuse/core'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  size?: ModalSize
+  width?: string
+  closeOnOverlay?: boolean
+  closeOnEsc?: boolean
+  lockScroll?: boolean
+  persistent?: boolean
+  transition?: boolean
+  contentClass?: string
+  hideHeader?: boolean
+  blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+  mobileSheet?: boolean
+  swipeToClose?: boolean
+  swipeThreshold?: number
+  showDragHandle?: boolean
+}>(), {
+  size: 'md',
+  closeOnOverlay: true,
+  closeOnEsc: true,
+  lockScroll: true,
+  persistent: false,
+  transition: true,
+  hideHeader: false,
+  blur: false,
+  mobileSheet: true,
+  swipeToClose: true,
+  swipeThreshold: 65,
+  showDragHandle: true,
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'open'): void
+}>()
+
+const open = defineModel<boolean>({ required: true })
+
+const contentRef = ref<HTMLElement | null>(null)
+const overlayRef = ref<HTMLElement | null>(null)
+const swipeClosing = ref(false)
+const bodyScrollLocked = useScrollLock(import.meta.client ? document.body : null)
+const { width: windowWidth } = useWindowSize()
+
+const isMobile = computed(() => windowWidth.value < 1025)
+const isSheet = computed(() => isMobile.value && props.mobileSheet)
+
+const sizeStyle = computed(() => {
+  if (isSheet.value) return { width: '100%' }
+  if (props.width) return { width: props.width }
+
+  switch (props.size) {
+    case 'sm': return { width: '380px' }
+    case 'md': return { width: '520px' }
+    case 'lg': return { width: '720px' }
+    case 'xl': return { width: '1100px' }
+    case 'container': return {}
+    case 'fullscreen': return { width: '100vw', height: '100vh' }
+    default: return { width: '520px' }
+  }
+})
+
+const blurClass = computed(() => {
+  if (!props.blur) return ''
+
+  switch (props.blur) {
+    case 'sm': return 'backdrop-blur-sm'
+    case 'md': return 'backdrop-blur-md'
+    case 'lg': return 'backdrop-blur-lg'
+    case 'xl': return 'backdrop-blur-xl'
+    default: return 'backdrop-blur'
+  }
+})
+
+const overlayClass = computed(() => {
+  const base = ['modal-v2-overlay fixed inset-0 z-[10000] flex bg-black/40 dark:bg-black/60']
+
+  if (isSheet.value) {
+    base.push('items-end justify-stretch')
+  }
+  else {
+    base.push(props.size === 'container' ? 'items-center justify-center' : 'items-center justify-center p-4')
+  }
+
+  if (blurClass.value) base.push(blurClass.value)
+
+  return base.join(' ')
+})
+
+const contentBaseClass = computed(() => {
+  const base = ['modal-v2-content flex flex-col overflow-hidden border bg-white shadow-2xl dark:bg-gray-900']
+
+  if (isSheet.value) {
+    base.push('w-full max-w-none max-h-[100dvh] rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
+  }
+  else {
+    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-2xl'
+    const widthCls = props.size === 'container'
+      ? ' w-full max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl'
+      : ''
+    base.push(`max-h-[calc(100vh-2rem)] border-gray-200 dark:border-gray-800 ${radius}${widthCls}`)
+  }
+
+  return base.join(' ')
+})
+
+const overlayTransitionName = computed(() => {
+  if (swipeClosing.value) return ''
+  return props.transition ? 'modal-v2-overlay' : ''
+})
+const contentTransitionName = computed(() => {
+  if (swipeClosing.value || !props.transition) return ''
+  return isSheet.value ? 'modal-v2-sheet' : 'modal-v2-content'
+})
+
+function closeIfAllowed() {
+  if (props.persistent) return
+  open.value = false
+}
+
+function onOverlayClick(event: MouseEvent) {
+  if (!props.closeOnOverlay || props.persistent) return
+  if (event.target === event.currentTarget) {
+    open.value = false
+  }
+}
+
+onKeyStroke('Escape', () => {
+  if (!open.value) return
+  if (!props.closeOnEsc || props.persistent) return
+  open.value = false
+})
+
+function setScrollbarCompensation(active: boolean) {
+  if (!import.meta.client) return
+
+  if (active) {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.paddingRight = scrollbarWidth > 0 ? `${scrollbarWidth}px` : ''
+  }
+  else {
+    document.body.style.paddingRight = ''
+  }
+}
+
+watch(open, (value) => {
+  if (props.lockScroll) {
+    if (value) setScrollbarCompensation(true)
+    bodyScrollLocked.value = value
+    if (!value) setScrollbarCompensation(false)
+  }
+
+  if (value) emit('open')
+  else emit('close')
+})
+
+onBeforeUnmount(() => {
+  if (bodyScrollLocked.value) {
+    bodyScrollLocked.value = false
+  }
+  setScrollbarCompensation(false)
+})
+
+const dragging = ref(false)
+const dragStartY = ref(0)
+const dragDelta = ref(0)
+
+function canSwipe() {
+  return isSheet.value && props.swipeToClose && !props.persistent
+}
+
+function setTransform(value: string) {
+  if (contentRef.value) {
+    contentRef.value.style.transform = value
+  }
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (!canSwipe()) return
+  dragging.value = true
+  dragStartY.value = event.touches[0].clientY
+  dragDelta.value = 0
+
+  if (contentRef.value) {
+    contentRef.value.style.transition = 'none'
+  }
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!dragging.value || !canSwipe()) return
+
+  const delta = event.touches[0].clientY - dragStartY.value
+  if (delta < 0) {
+    dragDelta.value = 0
+    setTransform('')
+    return
+  }
+
+  dragDelta.value = delta
+  setTransform(`translateY(${delta}px)`)
+}
+
+function prefersReducedMotion() {
+  return import.meta.client && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+function animateClose() {
+  const content = contentRef.value
+
+  if (!content || prefersReducedMotion()) {
+    open.value = false
+    return
+  }
+
+  swipeClosing.value = true
+
+  let done = false
+  const finish = () => {
+    if (done) return
+    done = true
+    content.removeEventListener('transitionend', onTransitionEnd)
+    open.value = false
+    swipeClosing.value = false
+  }
+
+  function onTransitionEnd(event: TransitionEvent) {
+    if (event.target === content && event.propertyName === 'transform') {
+      finish()
+    }
+  }
+
+  content.addEventListener('transitionend', onTransitionEnd)
+  setTimeout(finish, 320)
+
+  requestAnimationFrame(() => {
+    content.style.transition = 'transform 260ms cubic-bezier(0.22, 1, 0.36, 1)'
+    content.style.transform = 'translateY(100%)'
+
+    if (overlayRef.value) {
+      overlayRef.value.style.transition = 'opacity 260ms ease'
+      overlayRef.value.style.opacity = '0'
+    }
+  })
+}
+
+function onTouchEnd() {
+  if (!dragging.value) return
+  dragging.value = false
+
+  const shouldClose = dragDelta.value > props.swipeThreshold && canSwipe()
+
+  if (shouldClose) {
+    animateClose()
+  }
+  else {
+    if (contentRef.value) {
+      contentRef.value.style.transition = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)'
+      contentRef.value.style.transform = ''
+    }
+  }
+
+  dragDelta.value = 0
+}
+</script>
+
+<template>
+  <client-only>
+    <teleport to="body">
+      <transition :name="overlayTransitionName">
+        <div
+          v-if="open"
+          ref="overlayRef"
+          :class="overlayClass"
+          @mousedown="onOverlayClick"
+        >
+          <transition :name="contentTransitionName" appear>
+            <div
+              v-if="open"
+              ref="contentRef"
+              :class="contentBaseClass"
+              :style="sizeStyle"
+              @mousedown.stop
+            >
+              <div
+                v-if="isSheet && showDragHandle"
+                class="flex shrink-0 cursor-grab touch-none justify-center py-2"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600" />
+              </div>
+
+              <header
+                v-if="!hideHeader && (title || $slots.header)"
+                class="flex shrink-0 items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-800"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <slot name="header">
+                  <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ title }}
+                  </h2>
+                  <button
+                    type="button"
+                    class="rounded-md p-1 text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    @click="closeIfAllowed"
+                  >
+                    <a-icon-x-mark class="size-4" />
+                  </button>
+                </slot>
+              </header>
+
+              <div class="min-h-0 flex-1 overflow-auto" :class="contentClass">
+                <slot :close="closeIfAllowed" />
+              </div>
+
+              <footer
+                v-if="$slots.footer"
+                class="shrink-0 border-t border-gray-200 px-5 py-4 dark:border-gray-800"
+              >
+                <slot name="footer" :close="closeIfAllowed" />
+              </footer>
+            </div>
+          </transition>
+        </div>
+      </transition>
+    </teleport>
+  </client-only>
+</template>
+
+<style scoped lang="scss">
+.modal-v2-overlay-enter-active {
+  transition: opacity 200ms ease-out;
+}
+
+.modal-v2-overlay-leave-active {
+  transition: opacity 150ms ease-in;
+}
+
+.modal-v2-overlay-enter-from,
+.modal-v2-overlay-leave-to {
+  opacity: 0;
+}
+
+.modal-v2-content-enter-active {
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out;
+}
+
+.modal-v2-content-leave-active {
+  transition: transform 150ms ease-in, opacity 150ms ease-in;
+}
+
+.modal-v2-content-enter-from,
+.modal-v2-content-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+}
+
+.modal-v2-sheet-enter-active,
+.modal-v2-sheet-leave-active {
+  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.modal-v2-sheet-enter-from,
+.modal-v2-sheet-leave-to {
+  transform: translateY(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-v2-overlay-enter-active,
+  .modal-v2-overlay-leave-active,
+  .modal-v2-content-enter-active,
+  .modal-v2-content-leave-active,
+  .modal-v2-sheet-enter-active,
+  .modal-v2-sheet-leave-active {
+    transition: none;
+  }
+}
+</style>