adata-ui 2.1.40-beta.4 → 2.1.40-beta.6

package/components/elements/a-select-row/ASelectRowV2.vue

@@ -42,6 +42,7 @@ const { visibleCount, hiddenCount } = useChipOverflow({
   container: chipsRow,
   measure: measureRow,
   count: itemCount,
+  contentKey: computed(() => props.selectedItems?.map(item => item.name).join(' ') ?? ''),
   gap: 6,
 })
 
@@ -101,7 +102,7 @@ defineExpose({ onClear })
           <span
             v-for="item in visibleItems"
             :key="item.id"
-            class="select-row-v2__chip inline-flex min-w-0 max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
+            class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
             @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
           >
             <span class="truncate">{{ item.name }}</span>
@@ -123,14 +124,14 @@ defineExpose({ onClear })
           <span
             ref="measureRow"
             aria-hidden="true"
-            class="pointer-events-none invisible absolute left-0 top-0 flex h-0 items-center gap-1.5"
+            class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
           >
             <span
               v-for="item in selectedItems"
               :key="`measure-${item.id}`"
-              class="inline-flex max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
+              class="inline-flex items-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
             >
-              <span class="truncate">{{ item.name }}</span>
+              <span>{{ item.name }}</span>
               <span
                 v-if="deletable"
                 class="flex shrink-0 items-center justify-center rounded-full p-0.5"

package/components/elements/button/AButtonV2.vue

@@ -3,9 +3,11 @@ import type { Component } from 'vue'
 
 type View = 'solid' | 'outline' | 'ghost' | 'soft'
 type Size = 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray'
 
 const props = withDefaults(defineProps<{
   view?: View
+  color?: Color
   size?: Size
   icon?: Component
   iconRight?: boolean
@@ -15,6 +17,7 @@ const props = withDefaults(defineProps<{
   type?: 'button' | 'submit' | 'reset'
 }>(), {
   view: 'solid',
+  color: 'blue',
   size: 'md',
   iconRight: false,
   loading: false,
@@ -25,11 +28,31 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
-const VIEW_CLASS: Record<View, string> = {
-  solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-  outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-  ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-  soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+const VIEW_CLASS: Record<Color, Record<View, string>> = {
+  blue: {
+    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
+    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+  },
+  green: {
+    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
+    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
+    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
+    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
+  },
+  red: {
+    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
+    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
+    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
+    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
+  },
+  gray: {
+    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
+    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
+  },
 }
 
 const SIZE_CLASS: Record<Size, string> = {
@@ -56,7 +79,7 @@ function onClick(event: MouseEvent) {
     :disabled="disabled || loading"
     class="button-v2 inline-flex select-none items-center justify-center rounded-xl font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
-      VIEW_CLASS[view],
+      VIEW_CLASS[color][view],
       SIZE_CLASS[size],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',

package/components/elements/select/ASelectV2.vue

@@ -182,9 +182,10 @@ const valueToShow = computed<T | T[] | null>(() => {
     if (!Array.isArray(modelValue.value) || modelValue.value.length === 0) return null
     if (props.getOnlyKey) {
       const keys = modelValue.value as any[]
-      const found = props.options.filter(opt =>
-        keys.some(k => isEqual(k, opt[props.keyToSelect as keyof T])),
-      )
+      // map over model keys (not options) so chips keep the selection order
+      const found = keys
+        .map(k => props.options.find(opt => isEqual(k, opt[props.keyToSelect as keyof T])))
+        .filter((opt): opt is T => opt != null)
       return found.length ? found : null
     }
     return modelValue.value as T[]
@@ -249,8 +250,11 @@ function onClear() {
   emits('onClear')
 }
 
-function onClearFromMulti(index: number) {
+function onClearFromMulti(item: T) {
   if (!Array.isArray(modelValue.value)) return
+  const key = selectedKey(item)
+  const index = modelValue.value.findIndex(el => isEqual(el, key))
+  if (index === -1) return
   const next = [...modelValue.value]
   next.splice(index, 1)
   modelValue.value = next
@@ -267,6 +271,10 @@ const { visibleCount: visibleChipCount, hiddenCount: hiddenChipCount } = useChip
   container: valueColumn,
   measure: measureRow,
   count: selectedCount,
+  contentKey: computed(() => {
+    if (!Array.isArray(valueToShow.value)) return ''
+    return (valueToShow.value as any[]).map(item => item?.[props.keyToShow]).join(' ')
+  }),
   gap: 6,
 })
 
@@ -332,8 +340,8 @@ const isDefaultSelection = computed(() => {
               <span
                 v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
                 :key="index"
-                class="select-v2__chip inline-flex min-w-0 max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
-                @click.stop="canChipRemove ? onClearFromMulti(index) : (isOpen = true)"
+                class="select-v2__chip inline-flex min-w-0 items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
+                @click.stop="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
               >
                 <span class="truncate">{{ item[keyToShow] }}</span>
                 <button
@@ -354,14 +362,14 @@ const isDefaultSelection = computed(() => {
             <span
               ref="measureRow"
               aria-hidden="true"
-              class="pointer-events-none invisible absolute left-0 top-0 flex h-0 items-center gap-1.5"
+              class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
             >
               <span
                 v-for="(item, index) in (valueToShow as any[])"
                 :key="`measure-${index}`"
-                class="inline-flex max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
+                class="inline-flex items-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
               >
-                <span class="truncate">{{ item[keyToShow] }}</span>
+                <span>{{ item[keyToShow] }}</span>
                 <span
                   v-if="canChipRemove"
                   class="flex shrink-0 items-center justify-center rounded-full p-0.5"

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
+
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'inverted',
+  size: 'sm',
+})
+
+const base
+  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
+
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[11px] leading-none',
+  sm: 'px-2.5 py-1 text-xs leading-none',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-4 py-2 text-base',
+}
+
+const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:text-gray-100',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
+    orange: 'bg-orange-600 text-white dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
+    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
+    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
+    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
+  },
+  transparent: {
+    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
+    success: 'bg-transparent text-green-600 dark:text-green-400',
+    danger: 'bg-transparent text-red-500 dark:text-red-400',
+    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
+    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
+    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
+  },
+}
+
+const attrs = useAttrs()
+
+// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
+// the defaults below, so padding / rounded / bg / text can all be overridden.
+const classes = computed(() =>
+  twMerge(
+    base,
+    sizeClasses[props.size],
+    typeClasses[props.view][props.type],
+    attrs.class as string,
+  ),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

package/components/forms/feedback-form/FeedbackForm.vue

@@ -152,26 +152,26 @@ onMounted(() => {
     </AButton>
   </section>
 
-  <a-modal
+  <a-modal-v2
     v-model="isModalOpen"
     width="424px"
     @close="isModalOpen = false"
   >
-    <div class="flex flex-col items-center gap-5">
-      <h4 class="heading-04">
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-[18px] font-semibold">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <a-ill-mail />
       <p class="body-400 max-[352xp]">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
-      <AButton
-        block
+      <a-button-v2
         view="outline"
+        block
         @click="isModalOpen = false"
       >
         {{ t('forms.feedback.close') }}
-      </AButton>
+      </a-button-v2>
     </div>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/forms/input/AInputV2.vue

@@ -257,7 +257,7 @@ const layoutClass = computed(() => {
   if (!props.label) {
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
-  return props.size === 'md' ? 'h-10 pt-3 pb-1' : 'h-9 pt-2 pb-1'
+  return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
 })
 
 const iconOffsetClass = computed(() => {

package/components/forms/input/textarea/ATextareaV2.vue

@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  readonly: false,
+  error: undefined,
+  size: 'md',
+  variant: 'default',
+  rows: 4,
+  resize: 'vertical',
+  maxlength: undefined,
+  autoResize: false,
+  inputId: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'focus', ev: FocusEvent): void
+  (e: 'blur', ev: FocusEvent): void
+}>()
+
+interface Props {
+  label?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  error?: string | string[]
+  size?: 'sm' | 'md'
+  variant?: 'default' | 'gray' | 'blue'
+  rows?: number
+  resize?: 'none' | 'vertical' | 'both'
+  maxlength?: number
+  autoResize?: boolean
+  inputId?: string
+}
+
+const modelValue = defineModel<string>({ default: '' })
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const isFocused = ref(false)
+
+const internalId = useId()
+const inputId = computed(() => props.inputId ?? `textarea-v2-${internalId}`)
+
+const hasValue = computed(() => modelValue.value != null && modelValue.value !== '')
+const hasError = computed(() => Array.isArray(props.error) ? props.error.length > 0 : !!props.error)
+const isLabelFloated = computed(() => hasValue.value || isFocused.value)
+
+const errorMessages = computed(() => {
+  if (!props.error) return [] as string[]
+  return Array.isArray(props.error) ? props.error : [props.error]
+})
+
+const fieldClass = computed(() => {
+  if (props.disabled) {
+    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+  }
+  if (props.variant === 'gray') {
+    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+  }
+  if (props.variant === 'blue') {
+    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+  }
+  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+})
+
+const resizeClass = computed(() => {
+  if (props.autoResize) return 'resize-none'
+  switch (props.resize) {
+    case 'none': return 'resize-none'
+    case 'both': return 'resize'
+    case 'vertical':
+    default: return 'resize-y'
+  }
+})
+
+const paddingClass = computed(() => {
+  // Паддинг постоянный (не зависит от фокуса/значения) — textarea не меняет размер при фокусе.
+  const pt = !props.label ? 'pt-2.5' : (props.size === 'md' ? 'pt-4' : 'pt-3.5')
+  const pb = props.maxlength ? 'pb-6' : (!props.label ? 'pb-2.5' : (props.size === 'md' ? 'pb-2' : 'pb-1.5'))
+  return `px-4 ${pt} ${pb}`
+})
+
+const attrs = useAttrs()
+const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+function adjustHeight() {
+  const el = textareaRef.value
+  if (!props.autoResize || !el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onFocus(ev: FocusEvent) {
+  isFocused.value = true
+  emit('focus', ev)
+}
+function onBlur(ev: FocusEvent) {
+  isFocused.value = false
+  emit('blur', ev)
+}
+
+function focus() {
+  textareaRef.value?.focus()
+}
+function blur() {
+  textareaRef.value?.blur()
+}
+
+watch(modelValue, () => nextTick(adjustHeight))
+onMounted(adjustHeight)
+
+defineExpose({ focus, blur, textareaRef })
+</script>
+
+<template>
+  <div class="textarea-v2 relative w-full text-sm" v-bind="wrapperAttrs">
+    <div
+      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
+    >
+      <label
+        v-if="label"
+        :for="inputId"
+        :data-size="size"
+        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-gray-500 dark:text-gray-400"
+        :class="{ 'textarea-v2__label--floated': isLabelFloated }"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </label>
+
+      <textarea
+        :id="inputId"
+        ref="textareaRef"
+        v-model="modelValue"
+        :rows="rows"
+        :maxlength="maxlength"
+        :placeholder="(isLabelFloated || !label) ? placeholder : ''"
+        :disabled="disabled"
+        :readonly="readonly"
+        :tabindex="disabled ? -1 : 0"
+        class="textarea-v2__input text-deepblue-900 block w-full bg-transparent leading-snug outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        :class="[resizeClass, paddingClass]"
+        v-bind="inputAttrs"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+
+      <span
+        v-if="maxlength"
+        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-[10px] text-gray-400 dark:text-gray-500"
+      >
+        {{ modelValue?.length ?? 0 }}/{{ maxlength }}
+      </span>
+    </div>
+
+    <transition
+      enter-active-class="textarea-v2__error-enter-active"
+      enter-from-class="textarea-v2__error-enter-from"
+      enter-to-class="textarea-v2__error-enter-to"
+      leave-active-class="textarea-v2__error-leave-active"
+      leave-from-class="textarea-v2__error-leave-from"
+      leave-to-class="textarea-v2__error-leave-to"
+    >
+      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+        <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.textarea-v2__field--error {
+  border-color: theme('colors.red.500');
+}
+
+.textarea-v2__field--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.textarea-v2__field--disabled .textarea-v2__input {
+  cursor: not-allowed;
+}
+
+.textarea-v2__input {
+  scrollbar-width: thin;
+}
+
+.textarea-v2__label {
+  top: 26px;
+  transform: translateY(-50%);
+  font-size: 14px;
+  line-height: 1.3;
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.textarea-v2__label[data-size="sm"] {
+  top: 24px;
+}
+
+.textarea-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-21px);
+}
+
+.textarea-v2__label--floated[data-size="sm"] {
+  transform: translateY(-19px);
+}
+
+.textarea-v2__error-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.textarea-v2__error-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.textarea-v2__error-leave-active {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.textarea-v2__error-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea-v2__label,
+  .textarea-v2__error-enter-active,
+  .textarea-v2__error-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/modals/AnotherDeviceModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAnotherDeviceModal } from '#adata-ui/composables/modalsState'
 import { useUrls } from '#adata-ui/composables/useUrls'
+
 const { t, locale } = useI18n()
 const localePath = useLocalePath()
 
@@ -14,47 +14,46 @@ function onClose() {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    :title="t('modals.another_device_modal.title')"
+    width="424px"
     @close="onClose"
   >
-    <div class="flex flex-col items-center justify-center gap-5">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-phone-check />
       <p class="body-400 text-center">
         {{ t('modals.another_device_modal.info') }}
       </p>
       <div
-        class="body-400 flex gap-2 rounded-lg border border-red-500 dark:border-red-400 bg-[#FDECEB] dark:bg-red-400/10 p-4 text-red-500 dark:text-red-400"
+        class="body-400 flex gap-2 rounded-lg border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
       >
         <a-icon-warning-triangle
-          class="shrink-0"
-          width="24"
-          height="24"
+          class="size-4 shrink-0"
         />
-        <p>
+        <span class="text-xs">
           {{ t('modals.another_device_modal.alert') }}
-        </p>
+        </span>
       </div>
     </div>
     <template #footer>
       <div class="flex w-full gap-2">
-        <a-button
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           @click="onClose"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
           :to="buildLocalizedUrl(locale, landing)"
         >
           {{ t('modals.buttons.toMain') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/ApplicationAcceptedModal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
 const { t } = useI18n()
 
-const isOpen = defineModel<boolean>({default: false})
+const isOpen = defineModel<boolean>({ default: false })
 
-const cancel = () => {
+function cancel() {
   isOpen.value = false
 }
 
@@ -16,30 +15,28 @@ const modalText = {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="application-accepted"
-    :prevent-close="true"
+    width="424px"
+    :persistent="true"
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
-        {{ modalText.title }}
-      </p>
-      <a-ill-ok class="w-full" />
-      <p class="text-center body-400">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
+      <p class="body-400 text-center">
         {{ modalText.info }}
       </p>
     </div>
     <template #footer>
-      <a-button
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="cancel"
       >
         {{ modalText.close }}
-      </a-button>
+      </a-button-v2>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>