adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/elements/button/AButtonV2.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type Size = 'xs' | 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+const props = withDefaults(defineProps<{
+  view?: View
+  color?: Color
+  size?: Size
+  rounded?: Rounded
+  icon?: Component
+  iconRight?: boolean
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}>(), {
+  view: 'solid',
+  color: 'blue',
+  size: 'md',
+  rounded: 'lg',
+  iconRight: false,
+  loading: false,
+  disabled: false,
+  block: false,
+  type: 'button',
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+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',
+  },
+  white: {
+    solid: 'bg-white text-blue-700 shadow-sm hover:bg-blue-50 hover:shadow-md active:bg-blue-100 dark:bg-gray-900 dark:hover:bg-gray-800',
+    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-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:text-blue-300 dark:hover:bg-blue-950/40',
+    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 SIZE_CLASS: Record<Size, string> = {
+  xs: 'h-6 gap-1 px-2 text-body-sm',
+  sm: 'h-8 gap-1.5 px-3 text-body-sm',
+  md: 'h-10 gap-2 px-4 text-body-md',
+  lg: 'h-12 gap-2.5 px-5 text-body-lg',
+}
+
+const ROUNDED_CLASS: Record<Rounded, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  full: 'rounded-full',
+}
+
+const ICON_SIZE: Record<Size, string> = {
+  xs: 'size-3.5',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-5',
+}
+
+function onClick(event: MouseEvent) {
+  if (props.disabled || props.loading) return
+  emit('click', event)
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    class="button-v2 inline-flex select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      VIEW_CLASS[color][view],
+      SIZE_CLASS[size],
+      ROUNDED_CLASS[rounded],
+      block ? 'w-full' : '',
+      iconRight ? 'flex-row-reverse' : '',
+    ]"
+    @click="onClick"
+  >
+    <a-icon-loader-circle
+      v-if="loading"
+      class="shrink-0 animate-spin"
+      :class="ICON_SIZE[size]"
+    />
+    <component
+      :is="icon"
+      v-else-if="icon"
+      class="shrink-0"
+      :class="ICON_SIZE[size]"
+    />
+    <span v-if="$slots.default" class="truncate">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+@media (prefers-reduced-motion: reduce) {
+  .button-v2 {
+    transition: none;
+  }
+}
+</style>

package/components/elements/button-login/index.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import IconLogout from '#adata-ui/icons/logout.vue'
+defineEmits(['click'])
 
 const { t } = useI18n()
-
-defineEmits(['click'])
 </script>
 
 <template>
-  <div
-    class="hidden w-max cursor-pointer items-center gap-2 rounded-2xl bg-blue-700 px-4 py-[6px] font-semibold dark:bg-blue-500 lg:flex"
+  <button
+    type="button"
+    class="hidden h-8 cursor-pointer items-center rounded-lg bg-blue-700 px-3.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-600 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
     data-test-id="header-login-button"
     @click="$emit('click')"
   >
-    <icon-logout class="text-white dark:text-gray-900 lg:h-4 lg:w-4" />
-    <span class="hidden text-sm font-semibold text-white dark:text-gray-900 lg:inline-block min-w-[44px]">
-      {{ t('header.login') }}
-    </span>
-  </div>
+    {{ t('header.login') }}
+  </button>
 </template>
 
 <style scoped></style>

package/components/elements/chip-wrapper/AChipWrapper.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {Props} from './types'
-import {twJoin, twMerge} from "tailwind-merge";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
 
 defineOptions({
   inheritAttrs: false

package/components/elements/chips/AChips.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {twMerge} from "tailwind-merge";
+import {twMerge} from '#adata-ui/utils/twMerge';
 
 type Props = {
   size?: 'sm' | 'md' | 'lg'
@@ -23,7 +23,7 @@ const sizeOptions = {
 
 <template>
   <button
-    :class="twMerge(['flex items-center gap-2 rounded-3xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
+    :class="twMerge(['flex items-center gap-2 rounded-2xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
   >
     <slot/>
   </button>

package/components/elements/companies/AOurClients.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col gap-4 lg:gap-8">
-    <h2 class="md:heading-01 heading-02">{{ t('our_clients.title') }}</h2>
+    <slot name="title">
+      <h2 class="md:heading-01 heading-02">{{ t('our_clients.title') }}</h2>
+    </slot>
     <a-infinite-carousel>
       <div class="flex items-center justify-center">
         <a-icon-company-forte class="max-w-[150px] sm:max-w-none"></a-icon-company-forte>

package/components/elements/curve-block-v2/ACurveBlockV2.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { NuxtLinkLocale } from '#components'
+import { computed } from 'vue'
+
+// Same logic/props as ACurveBlock — only the visual design differs.
+const props = withDefaults(defineProps<{
+  icon: Component
+  title: string
+  description: string
+  to?: string
+  /** Accent color as a hex code, e.g. "#068dff". */
+  color?: string
+}>(), {
+  color: '#068dff',
+})
+
+const bg = computed(() => `${props.color}1A`) // ~10% opacity в hex
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'button'"
+    :to="to"
+    :style="{ '--cb-color': color, '--cb-bg': bg }"
+    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-gray-100 bg-white p-6 text-left transition-all duration-200 hover:-translate-y-1 hover:border-gray-300 hover:shadow-lg dark:border-gray-700 dark:bg-gray-800"
+    :class="{ 'active-item': !to }"
+    active-class="active-item"
+  >
+    <!-- arrow, top-right -->
+    <div class="arrow-icon absolute right-4 top-4 flex size-7 items-center justify-center rounded-full p-2  bg-[#068dff]/10 text-[#068dff]">
+      <svg
+        class="size-2"
+        viewBox="16 16 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M17.1155 16C16.4994 16 16 16.4994 16 17.1155C16 17.7315 16.4994 18.231 17.1155 18.231L28.1915 18.231L16.3267 30.0958C15.8911 30.5314 15.8911 31.2377 16.3267 31.6733C16.7623 32.1089 17.4686 32.1089 17.9042 31.6733L29.769 19.8085L29.769 30.8845C29.769 31.5006 30.2685 32 30.8845 32C31.5006 32 32 31.5006 32 30.8845L32 17.1155C32 16.9642 31.9699 16.82 31.9154 16.6885C31.8617 16.5589 31.7826 16.4373 31.678 16.3315C31.6749 16.3283 31.6717 16.3251 31.6685 16.322C31.5627 16.2174 31.4411 16.1383 31.3115 16.0846C31.18 16.0301 31.0358 16 30.8845 16L17.1155 16Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+
+    <!-- icon -->
+    <div class="icon-item w-fit rounded-xl p-3">
+      <component
+        :is="icon"
+        class="size-6 shrink-0"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2 pr-6">
+      <p class="title text-base font-semibold text-deepblue-900 dark:text-white">
+        {{ title }}
+      </p>
+      <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-300">
+        {{ description }}
+      </p>
+    </div>
+  </component>
+</template>
+
+<style lang="scss" scoped>
+/* icon uses the card's accent color at 10% bg + full-color glyph */
+.icon-item {
+  background-color: var(--cb-bg);
+  color: var(--cb-color);
+}
+
+/* active state (route match, or forced when there is no `to`) */
+.active-item {
+  border-color: var(--cb-color);
+  background-color: var(--cb-bg);
+}
+.active-item .title,
+.active-item .arrow-icon {
+  color: var(--cb-color);
+}
+.active-item .icon-item {
+  background-color: var(--cb-color);
+  color: #fff;
+}
+</style>

package/components/elements/digit-badge/ADigitBadge.vue

@@ -1,7 +1,16 @@
 <script lang='ts' setup>
-import {twMerge} from "tailwind-merge";
+import { twMerge } from '#adata-ui/utils/twMerge'
 
-defineOptions({name: 'ADigitBadge'})
+defineOptions({ name: 'ADigitBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  disabled: false,
+  customClasses: '',
+  prefix: '',
+})
 
 interface Props {
   type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
@@ -13,37 +22,29 @@ interface Props {
   prefix?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  disabled: false,
-  customClasses: '',
-  prefix: ''
-})
 const formattedValue = computed(() => {
-  return Number(props.value).toLocaleString('ru-RU');
-});
+  return Number(props.value).toLocaleString('ru-RU')
+})
 const classes = computed(() =>
   [
     props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
     'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
     sizeSwitchValues[props.size],
-    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
+    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
   ])
 
 export type StateType = {
   [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
-};
-type ViewType = {
+}
+interface ViewType {
   default: StateType
   inverted: StateType
   transparent: StateType
-};
+}
 
 type SizeSwitchValues = {
   [key in 'sm' | 'md' | 'lg']: string;
-};
+}
 
 const typeSwitchValues: ViewType = {
   default: {
@@ -52,7 +53,7 @@ const typeSwitchValues: ViewType = {
     danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
     warning: 'bg-yellow-400 text-white dark:text-gray-900',
     gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
-    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900'
+    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900',
   },
   inverted: {
     primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
@@ -65,15 +66,16 @@ const typeSwitchValues: ViewType = {
   transparent: {
     success: 'bg-green-500/20 text-green-500',
     danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
-  }
+  },
 }
 
 const sizeSwitchValues: SizeSwitchValues = {
-  sm: 'w-4 h-4 px-1 text-[9.5px]',
-  md: 'w-5 h-5 px-1 text-[10px]',
-  lg: 'px-2 w-6 h-6 text-xs font-semibold'
+  sm: 'w-4 h-4 px-1 text-body-sm',
+  md: 'w-5 h-5 px-1 text-body-sm',
+  lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
 }
 </script>
+
 <template>
   <div
     :class="twMerge(...classes, customClasses)"

package/components/elements/feature-description/AFeatureDescription.vue

@@ -62,7 +62,7 @@ onUnmounted(() => clearTimer())
       <div
         :class="[
           'transition-all duration-300 ease-in-out',
-          selected === idx ? 'rounded-md bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
+          selected === idx ? 'rounded-sm bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
         ]"
       >
         <component

package/components/elements/leave-note/ALeaveNote.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import * as z from 'zod'
 import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isError?: boolean,
   errorText?: string
-}>()
+}>(), {
+  isError: false,
+  errorText: '',
+})
 
 const emit = defineEmits<{
+  (e: 'onCancel'): void
   (e: 'onSubmit'): void
 }>()
 
@@ -30,6 +35,12 @@ const { validation, getError } = useUIValidation(
   submitted,
 )
 
+function onCancel() {
+  submitted.value = false
+  note.value = ''
+  emit('onCancel')
+}
+
 async function onSubmit() {
   submitted.value = true
   if (validation.value) return
@@ -42,37 +53,47 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex flex-col items-start rounded-md">
+  <div class="flex flex-col items-start rounded-sm">
     <p class="text-sm font-semibold mb-4">
       {{ t('forms.leaveNote.title') }}
     </p>
     <a-textarea
       v-model="note"
+      class="min-h-[120px]"
+      color-classes="bg-deepblue-900/5 outline outline-1 outline-gray-200 dark:outline-gray-600 dark:bg-gray-200/5 !rounded-[10px]"
+      size="sm"
+      resizeable="y"
       :label="t('forms.leaveNote.placeholder')"
       :error="getError('note')"
-      class="mb-2 min-h-[120px]"
-      resizeable="none"
-      clearable
-      required
     >
       <template #alert>
         <a-alert
-          v-if="isError || getError('note')"
+          v-if="isError"
           color="red"
           class="mt-1"
         >
-          {{ getError('note') || (isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '') }}
+          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
         </a-alert>
       </template>
     </a-textarea>
-    <a-button
-      :disabled="!note.trim() && isLoading"
-      class="w-full sm:w-auto"
-      size="lg"
-      :loading="isLoading"
-      @click="onSubmit"
-    >
-      {{ t('actions.send') }}
-    </a-button>
+    <div class="mt-2 flex w-full justify-end items-center gap-2 md:gap-[10px]">
+      <a-button-v2
+        class="w-full sm:w-auto"
+        view="outline"
+        size="md"
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+      <a-button-v2
+        :disabled="!note.trim() && isLoading"
+        class="w-full sm:w-auto"
+        size="md"
+        :loading="isLoading"
+        @click="onSubmit"
+      >
+        {{ t('actions.send') }}
+      </a-button-v2>
+    </div>
   </div>
 </template>

package/components/elements/pagination/APagination.vue

@@ -38,14 +38,14 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
           { 'bg-blue-700 text-white hover:bg-blue-900': modelValue === 1 },
           !!activeClasses && 1 === modelValue ? activeClasses : ''
         ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
         @click="modelValue = 1"
       >
         <double-chevron-right class="rotate-180 text-base" />
       </li>
       <li
         v-show="prevPage"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:text-white"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:text-white"
         @click="modelValue -= 1"
       >
         <a-icon-chevron-left />
@@ -56,7 +56,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         :key="page"
         :class="[
           defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
         ]"
         @click="modelValue = page"
       >
@@ -67,7 +67,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         :class="[
           defaultClasses,
           'bg-blue-700 text-white hover:bg-blue-900',
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition'
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition'
         ]"
       >
         {{ modelValue }}
@@ -78,7 +78,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
         :key="idx"
         :class="[
           defaultClasses,
-          'flex size-[40px] cursor-pointer items-center justify-center rounded-lg transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
+          'flex size-[40px] cursor-pointer items-center justify-center rounded-md transition hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]'
         ]"
         @click="modelValue = n"
       >
@@ -88,7 +88,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
       <li
         v-show="nextPage"
         :class="{ disabled: disabled }"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
         @click="modelValue += 1"
       >
         <a-icon-chevron-right />
@@ -100,7 +100,7 @@ const showFirstPageIndex = computed(() => modelValue.value > 3)
           { disabled: disabled },
           !!activeClasses && lastPage === modelValue ? activeClasses : ''
         ]"
-        class="flex size-[40px] cursor-pointer items-center justify-center rounded-lg hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
+        class="flex size-[40px] cursor-pointer items-center justify-center rounded-md hover:bg-[#2C3E500D] dark:hover:bg-[#E3E5E80D]"
         @click="modelValue = lastPage"
       >
         <double-chevron-right class="text-base" />