adata-ui 2.1.40-beta.11 → 2.1.40-beta.13

package/components/navigation/header/NavList.vue

@@ -34,7 +34,7 @@ function isActive(itemPath: string) {
         class="group/title flex min-w-0 items-center gap-2 text-base font-semibold 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-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
+          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
           <component
             :is="icon"
             class="size-4"
@@ -53,7 +53,7 @@ function isActive(itemPath: string) {
           v-if="item.to"
           :to="item.to"
           itemprop="name"
-          class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
+          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
           :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
         >
           <a-icon-chevron-right class="size-[14px] shrink-0 text-gray-300 group-hover/item:text-blue-500 dark:group-hover/item:text-blue-700" />

package/components/navigation/header/NotificationsMenu.vue

@@ -14,9 +14,8 @@ defineProps<{
 }>()
 </script>
 <template>
-  <div class="flex w-[423px] flex-col gap-4 rounded-lg bg-white p-4 dark:bg-gray-900">
+  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-white p-4 dark:bg-gray-900">
     <div class="flex items-center justify-between">
-      <!--      <h4 class="heading-04">{{ $t('header.notifications.title') }}</h4>-->
       <h4 class="heading-04">Уведомления</h4>
       <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
     </div>
@@ -26,7 +25,7 @@ defineProps<{
       <li
         v-for="(notification, idx) in notifications"
         :key="idx"
-        class="flex items-center justify-between gap-2.5 rounded-md bg-gray-50 px-4 py-2 dark:bg-gray-950"
+        class="flex items-center justify-between gap-2.5 rounded-sm bg-gray-50 px-4 py-2 dark:bg-gray-950"
       >
         <div class="rounded-full bg-blue-500 p-2">
           <icon-user />

package/components/navigation/header/ProductMenu.vue

@@ -62,7 +62,7 @@ function handleExportClick() {
                   v-if="module.key === 'edo'"
                   #bottom
                 >
-                  <div class="mt-4 flex flex-col gap-4 rounded-xl bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
+                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
                     <div class="flex items-center gap-3">
                       <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
                         <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />

package/components/navigation/header/ProfileMenu.vue

@@ -39,23 +39,20 @@ function onReplenish() {
 </script>
 
 <template>
-  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-xl lg:border lg:border-gray-200 lg:dark:border-gray-800">
-    <!-- Subscription & balance card -->
+  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
     <div class="p-2">
-      <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
-        <!-- decorative glow for a "living" feel -->
+      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
         <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
 
         <div class="relative">
-          <!-- Tariff -->
-          <p class="text-[11px] font-medium uppercase tracking-wide text-white/70">
+          <p class="text-overline-medium uppercase text-white/70">
             {{ t('header.profile.tariff') }}
           </p>
           <div class="mt-0.5 flex items-center justify-between gap-2">
-            <p class="truncate text-lg font-bold leading-tight">
+            <p class="truncate text-h4">
               {{ rate }}
             </p>
-            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-inset ring-white/20">
+            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
               <span class="relative flex size-1.5 items-center justify-center">
                 <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
                 <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
@@ -64,10 +61,9 @@ function onReplenish() {
             </span>
           </div>
 
-          <!-- Email (mobile only — desktop shows it in the header trigger) -->
           <p
             v-if="email"
-            class="mt-1 truncate text-xs text-white/75 lg:hidden"
+            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
             data-test-id="profile-menu-email"
           >
             {{ email }}
@@ -75,42 +71,39 @@ function onReplenish() {
 
           <div class="my-2 h-px bg-white/15" />
 
-          <!-- Balance -->
           <div class="flex items-center justify-between gap-2">
-            <span class="text-xs text-white/80">{{ t('header.profile.currentBalance') }}</span>
-            <span class="text-base font-bold tabular-nums">{{ formattedBalance }} ₸</span>
+            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
+            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
           </div>
 
-          <!-- Usage stats (mobile only — desktop shows them in the header bar) -->
           <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
               <gauge class="size-4 shrink-0 text-white/80" />
               <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
                   {{ t('header.profile.requests') }}
                 </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
                   {{ limitRemaining }}
                 </p>
               </div>
             </div>
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
               <calendar class="size-4 shrink-0 text-white/80" />
               <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
                   {{ t('header.profile.daysLeft') }}
                 </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
                   {{ daysRemaining }}
                 </p>
               </div>
             </div>
           </div>
 
-          <!-- Top up -->
           <button
             type="button"
-            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-sm font-semibold text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
             @click="onReplenish"
           >
             <a-icon-plus-circle class="size-4" />
@@ -122,31 +115,29 @@ function onReplenish() {
       </div>
     </div>
 
-    <!-- Menu links -->
     <nav class="flex flex-col px-2 pb-2">
       <nuxt-link-locale
         v-for="item in items"
         :key="item.title"
-        class="group flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
         :to="item.to"
         :data-test-id="item?.dataTestId"
         target="_blank"
       >
-<!--        <span-->
-<!--          class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400"-->
-<!--        >-->
-<!--          <component-->
-<!--            :is="item.icon"-->
-<!--            class="size-4"-->
-<!--          />-->
-<!--        </span>-->
+        <!--        <span -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--        > -->
+        <!--          <component -->
+        <!--            :is="item.icon" -->
+        <!--            class="size-4" -->
+        <!--          /> -->
+        <!--        </span> -->
         <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
           {{ item.title }}
         </span>
       </nuxt-link-locale>
     </nav>
 
-    <!-- Footer: old version, theme (mobile), logout -->
     <div class="border-t border-gray-100 p-2 dark:border-gray-800">
       <a-change-version
         v-if="oldVersion"
@@ -156,7 +147,7 @@ function onReplenish() {
 
       <div
         v-if="!isLargeScreen"
-        class="flex items-center justify-between rounded-lg px-2.5 py-2 text-sm text-deepblue-900 dark:text-gray-200"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
       >
         <span>{{ t('header.profile.colorScheme') }}</span>
         <a-color-mode />
@@ -164,7 +155,7 @@ function onReplenish() {
 
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
         data-test-id="logout-button"
         @click="$emit('logout')"
       >

package/components/navigation/header/SystemNotification.vue

@@ -19,7 +19,6 @@ const message = useCookie('message')
 const systemMessage = ref<string | null>(null)
 const isOpen = ref(false)
 
-// API expects the legacy "counterparty" code instead of "pk".
 const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
 
 function localizedMessage(detail: SystemMessageDetail): string {
@@ -34,7 +33,6 @@ function localizedMessage(detail: SystemMessageDetail): string {
 }
 
 async function fetchNotification() {
-  // The cookie is set once the user dismisses the banner — skip the request afterwards.
   if (message.value !== undefined) return
 
   try {
@@ -74,7 +72,7 @@ onMounted(fetchNotification)
             <a-icon-info-circle
               class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
             />
-            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
+            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
           </div>
           <a-icon-x-mark
             class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"

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

@@ -115,14 +115,14 @@ const viewTypeValues: ViewType = {
 }
 
 const defaultClasses = (isDisabled: boolean) => [
-  'text-sm rounded-md outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   isDisabled ? 'bg-deepblue-900/5 dark:bg-gray-200/5 text-gray-500 dark:text-gray-500' : '',
   props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
   viewTypeValues[props.view]['default'],
   props.block ? 'w-full' : ''
 ]
 const selectedClasses = () => [
-  'text-sm rounded-md select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   viewTypeValues[props.view]['selected'],
   props.block ? 'w-full' : ''
 ]

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

@@ -32,8 +32,8 @@ const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 const listRef = ref<HTMLElement | null>(null)
 
 const SIZE_CLASS: Record<'sm' | 'md', string> = {
-  sm: 'text-xs',
-  md: 'text-sm',
+  sm: 'text-body-sm',
+  md: 'text-body-md',
 }
 
 const COUNT_COLOR_CLASS: Record<CountColor, string> = {
@@ -74,7 +74,7 @@ onMounted(scrollActiveIntoView)
 
 <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="pill-tabs-v2 min-w-0 max-w-full rounded-lg 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' : '',
@@ -96,7 +96,7 @@ onMounted(scrollActiveIntoView)
         :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="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 font-medium transition-colors duration-150"
         :class="[
           SIZE_CLASS[size],
           isDisabled(option)
@@ -113,7 +113,7 @@ onMounted(scrollActiveIntoView)
 
           <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="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-body-sm font-semibold leading-5"
             :class="COUNT_COLOR_CLASS[option.countColor ?? 'gray']"
           >
             {{ option.count }}

package/components/overlays/drawer/ADrawerV2.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { onKeyStroke, useScrollLock } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  closeOnOverlay?: boolean
+  closeOnEsc?: boolean
+  lockScroll?: boolean
+  persistent?: boolean
+  transition?: boolean
+  contentClass?: string
+  hideHeader?: boolean
+  blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+  swipeToClose?: boolean
+  swipeThreshold?: number
+  showDragHandle?: boolean
+  maxHeight?: string
+}>(), {
+  closeOnOverlay: true,
+  closeOnEsc: true,
+  lockScroll: true,
+  persistent: false,
+  transition: true,
+  hideHeader: false,
+  blur: false,
+  swipeToClose: true,
+  swipeThreshold: 65,
+  showDragHandle: true,
+  maxHeight: '100dvh',
+})
+
+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 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 = ['drawer-v2-overlay fixed inset-0 z-[10000] flex items-end justify-stretch bg-black/40 dark:bg-black/60']
+  if (blurClass.value) base.push(blurClass.value)
+  return base.join(' ')
+})
+
+const contentStyle = computed(() => ({ maxHeight: props.maxHeight }))
+
+const overlayTransitionName = computed(() => {
+  if (swipeClosing.value) return ''
+  return props.transition ? 'drawer-v2-overlay' : ''
+})
+const contentTransitionName = computed(() => {
+  if (swipeClosing.value || !props.transition) return ''
+  return 'drawer-v2-sheet'
+})
+
+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 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="drawer-v2-content flex w-full max-w-none flex-col overflow-hidden rounded-t-xl border-t border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+              :style="contentStyle"
+              @mousedown.stop
+            >
+              <div
+                v-if="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-sm 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">
+.drawer-v2-overlay {
+  will-change: opacity;
+}
+
+.drawer-v2-content {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.drawer-v2-overlay-enter-active {
+  transition: opacity 240ms ease-out;
+}
+
+.drawer-v2-overlay-leave-active {
+  transition: opacity 220ms ease-in;
+}
+
+.drawer-v2-overlay-enter-from,
+.drawer-v2-overlay-leave-to {
+  opacity: 0;
+}
+
+.drawer-v2-sheet-enter-active {
+  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.drawer-v2-sheet-leave-active {
+  transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.drawer-v2-sheet-enter-from,
+.drawer-v2-sheet-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-v2-overlay-enter-active,
+  .drawer-v2-overlay-leave-active,
+  .drawer-v2-sheet-enter-active,
+  .drawer-v2-sheet-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/overlays/modal/AModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { twJoin, twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { onClickOutside, useWindowSize } from '@vueuse/core'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
@@ -22,13 +22,13 @@ const uiConfig = {
   position: 'top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%]',
   padding: "p-8",
   background: "bg-white dark:bg-gray-900",
-  rounded: "rounded-lg",
+  rounded: "rounded-md",
   fullscreen: "w-screen h-screen rounded-none",
   mobile: {
     width: "w-screen",
     position: "bottom-0 left-0 transition-transform",
     padding: 'px-4 sm:pb-8 pb-4 pt-3',
-    rounded: "rounded-t-2xl"
+    rounded: "rounded-t-xl"
   },
   transition: {
     desktop: {
@@ -297,7 +297,7 @@ watch(modelValue, async (newValue) => {
                 >
                   <h4
                     v-if="title"
-                    class="heading-02 text-center"
+                    class="text-h2 text-center"
                     @touchmove="touchmove"
                     @touchstart="touchstart"
                     @touchend="touchend"