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

package/assets/styles/index.scss

@@ -68,18 +68,80 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.toast__body{
-  padding:0 16px 0 0 !important;
-  margin:0 !important;
-  align-items: stretch !important;
-}
 .Toastify__toast-container {
   z-index: 10002 !important;
 }
+
+@media (min-width: 481px) {
+  .Toastify__toast-container {
+    width: 600px;
+  }
+}
+
+.Toastify__toast-container .Toastify__toast {
+  min-height: 71px;
+  padding: 14px 16px;
+  border: 1px solid transparent;
+  border-left-width: 4px; /* акцентная полоса слева */
+  border-radius: 12px;
+  box-shadow: none;
+}
+
+.Toastify__toast-container .Toastify__toast-body {
+  margin: 0;
+  padding: 0;
+  gap: 12px;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.Toastify__toast-container .Toastify__toast-icon {
+  width: 24px;
+  height: 24px;
+  margin-inline-end: 0;
+}
+
+.Toastify__toast-container .Toastify__toast-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.Toastify__toast-container .Toastify__close-button {
+  align-self: center;
+  color: #2c3e50;
+  opacity: 0.6;
+}
+
+.Toastify__toast-container .Toastify__close-button:hover {
+  opacity: 1;
+}
+
+.Toastify__toast-container .Toastify__toast--info    { background: #eff6ff; border-color: #068dff; color: #068dff; }
+.Toastify__toast-container .Toastify__toast--success { background: #f0fdf4; border-color: #00a63e; color: #00a63e; }
+.Toastify__toast-container .Toastify__toast--warning { background: #fffbeb; border-color: #e17100; color: #e17100; }
+.Toastify__toast-container .Toastify__toast--error   { background: #fef2f2; border-color: #e7000b; color: #e7000b; }
+
+.Toastify__toast-container .Toastify__toast--info    .Toastify__progress-bar { background: #068dff; }
+.Toastify__toast-container .Toastify__toast--success .Toastify__progress-bar { background: #00a63e; }
+.Toastify__toast-container .Toastify__toast--warning .Toastify__progress-bar { background: #e17100; }
+.Toastify__toast-container .Toastify__toast--error   .Toastify__progress-bar { background: #e7000b; }
+
+/* Тёмная тема (нежная): фон = тинт solid-хекса тона /10, но непрозрачный (тост плавает
+   над контентом) — композит поверх #161617; бордер rgba(solid,0.4); текст/иконка -400. */
+.dark .Toastify__toast-container .Toastify__close-button { color: #e3e5e8; }
+
+.dark .Toastify__toast-container .Toastify__toast--info    { background: #14222e; border-color: rgba(6, 141, 255, 0.4); color: #43afed; }
+.dark .Toastify__toast-container .Toastify__toast--success { background: #14241b; border-color: rgba(0, 166, 62, 0.4); color: #6bbd6e; }
+.dark .Toastify__toast-container .Toastify__toast--warning { background: #2a1f15; border-color: rgba(225, 113, 0, 0.4); color: #ffc31e; }
+.dark .Toastify__toast-container .Toastify__toast--error   { background: #2b1416; border-color: rgba(231, 0, 11, 0.4); color: #f47e75; }
+
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
 }
+
 input[type="search"]::-ms-clear {
   display: none;
   width: 0;

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

@@ -73,7 +73,7 @@ defineExpose({ onClear })
 </script>
 
 <template>
-  <div class="select-row-v2 relative w-full text-sm">
+  <div class="select-row-v2 relative w-full text-body-md">
     <button
       type="button"
       :disabled="disabled"
@@ -102,21 +102,21 @@ defineExpose({ onClear })
           <span
             v-for="item in visibleItems"
             :key="item.id"
-            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]"
+            class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
             @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
           >
             <span class="truncate">{{ item.name }}</span>
             <button
               v-if="deletable"
               type="button"
-              class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/[0.12]"
+              class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-100 dark:hover:bg-blue-500/20"
             >
               <a-icon-x-mark class="size-2.5" />
             </button>
           </span>
           <span
             v-if="hiddenCount > 0"
-            class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+            class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
           >
             +{{ hiddenCount }}
           </span>
@@ -129,7 +129,7 @@ defineExpose({ onClear })
             <span
               v-for="item in selectedItems"
               :key="`measure-${item.id}`"
-              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"
+              class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-gray-50 px-2 py-0.5 text-body-sm"
             >
               <span>{{ item.name }}</span>
               <span
@@ -139,7 +139,7 @@ defineExpose({ onClear })
                 <a-icon-x-mark class="size-2.5" />
               </span>
             </span>
-            <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium">
+            <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-0.5 text-body-sm-medium">
               +{{ itemCount }}
             </span>
           </span>
@@ -179,11 +179,11 @@ defineExpose({ onClear })
 }
 
 .select-row-v2__chip:hover {
-  background-color: theme('colors.gray.100');
+  background-color: theme('colors.blue.100');
 }
 
 :is(.dark) .select-row-v2__chip:hover {
-  background-color: rgb(255 255 255 / 0.08);
+  background-color: rgb(6 141 255 / 0.25);
 }
 
 .select-row-v2__label {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import AChips from '~/components/elements/chips/AChips.vue'
+import { twMerge } from '#adata-ui/utils/twMerge'
 import {isEqual} from 'lodash-es'
-import { twMerge } from 'tailwind-merge'
+import AChips from '~/components/elements/chips/AChips.vue'
 
 type Item = {
   id: number | string
@@ -17,8 +17,6 @@ interface Props {
   btnClass?: string
 }
 
-// const items = defineModel<Item[]>('selectedItems', {required: true})
-
 type Emits = {
   (e: 'delete', item: Item): void
 }
@@ -83,7 +81,7 @@ const onClear = () => {
     <button
       ref="buttonElement"
       class="hover:border-blue focus-visible:outline-blue
-      relative flex w-full items-center justify-between gap-2 rounded-md
+      relative flex w-full items-center justify-between gap-2 rounded-sm
       border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
       focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
       dark:hover:border-blue-700"

package/components/elements/accordion/AAccordion.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 // REFACTOR @Iskander
-import ui from './ui.config'
-import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
-import {twJoin, twMerge} from 'tailwind-merge'
 import type {Color, Size} from "#adata-ui/components/elements/accordion/types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
+import ui from './ui.config'
 
 export interface Props {
   label: string
@@ -16,6 +16,7 @@ export interface Props {
   contentClass?: string
   bodyClass?: string
   activateOpenBg?: boolean
+  iconChevronTestId?: string
 }
 
 interface Emits {
@@ -160,6 +161,7 @@ defineExpose({
           <a-icon-chevron-down
             :arrow-attrs="{ class: 'stroke-deepblue-900' }"
             :class="[{ 'rotate-180': open }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
+            :data-test-id="iconChevronTestId"
           />
         </button>
       </slot>

package/components/elements/accordion/AAccordionGroup/AAccordionGroup.vue

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

package/components/elements/alert/AAlert.vue

@@ -1,65 +1,52 @@
-<template>
-  <div
-    class="inline-flex w-full rounded-md"
-    :class="twMerge(colorOptions.description[color])"
-  >
-    <div
-      class="flex items-center justify-center rounded-l-md"
-      :class="twMerge([colorOptions.icon[color], sizeOptions[size]])"
-    >
-      <slot name="icon">
-        <a-icon-info-circle v-if="iconType == 'circle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
-        <a-icon-warning-triangle v-if="iconType == 'triangle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
-      </slot>
-    </div>
-    <div
-      :class="sizeOptions[size]"
-      class="rounded-r-md flex items-center"
-    >
-      <slot name="default" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import {twMerge} from "tailwind-merge";
-
-defineOptions({ name: 'AAlert' })
-
 interface Props {
   size?: 'lg' | 'sm' | 'xs'
   color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange'
-  iconType?:'triangle' |'circle'
+  iconType?: 'triangle' | 'circle'
   iconSize?: string
 }
-withDefaults(defineProps<Props>(), {
+defineOptions({ name: 'AAlert' })
+
+const props = withDefaults(defineProps<Props>(), {
   size: 'sm',
   color: 'blue',
-  iconType:'circle',
+  iconType: 'circle',
   iconSize: '16px',
 })
+
 const sizeOptions = {
-  lg: 'text-base p-2',
-  sm: 'text-sm px-2 py-[3.5px]',
-  xs: 'text-xs px-2 py-[3.5px]'
+  lg: 'text-body-lg',
+  sm: 'text-body-md',
+  xs: 'text-body-sm',
 }
 
 const colorOptions = {
-  icon: {
-    blue: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    green: 'bg-green-500 text-white dark:text-gray-900',
-    orange: 'bg-[#FCA204] text-white dark:text-gray-900',
-    deepblue: 'bg-deepblue-900 text-white dark:text-gray-900',
-    red: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900'
-  },
-  description: {
-    blue: 'bg-blue-100 dark:bg-gray-200/10 text-blue-700 dark:text-blue-500',
-    green: 'bg-green-100 text-green-500',
-    orange: 'bg-[#FFF5E6] dark:bg-[#FCA2041A] text-[#FCA204]',
-    deepblue: 'bg-deepblue-100 text-deepblue-900',
-    red: 'bg-red-100 text-red-500 dark:bg-[#3A3133] dark:text-red-400'
-  }
+  blue: 'bg-[#EFF6FF] border-[#068DFF] text-[#068DFF] dark:bg-[#068DFF]/10 dark:border-[#068DFF]/40 dark:text-blue-400',
+  green: 'bg-[#F0FDF4] border-[#00A63E] text-[#00A63E] dark:bg-[#00A63E]/10 dark:border-[#00A63E]/40 dark:text-green-400',
+  orange: 'bg-[#FFFBEB] border-[#E17100] text-[#E17100] dark:bg-[#E17100]/10 dark:border-[#E17100]/40 dark:text-orange-400',
+  red: 'bg-[#FEF2F2] border-[#E7000B] text-[#E7000B] dark:bg-[#E7000B]/10 dark:border-[#E7000B]/40 dark:text-red-400',
+  deepblue: 'bg-deepblue-100 border-deepblue-900 text-deepblue-900 dark:bg-gray-500/10 dark:border-gray-500/40 dark:text-gray-300',
 }
+
+const rootClass = computed(() => [colorOptions[props.color], sizeOptions[props.size]])
+const iconStyle = computed(() => ({ width: props.iconSize, height: props.iconSize }))
 </script>
 
+<template>
+  <div
+    class="flex w-full items-center gap-2 rounded-lg border border-l-4 p-2"
+    :class="rootClass"
+  >
+    <span class="flex shrink-0 items-center justify-center">
+      <slot name="icon">
+        <a-icon-info-circle v-if="iconType === 'circle'" :style="iconStyle" />
+        <a-icon-warning-triangle v-else :style="iconStyle" />
+      </slot>
+    </span>
+    <div class="min-w-0 flex-1">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
 <style scoped></style>

package/components/elements/bg-block/ABgBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="md:rounded-lg p-4 bg-white dark:bg-gray-900">
+  <div class="md:rounded-md p-4 bg-white dark:bg-gray-900">
     <slot />
   </div>
 </template>

package/components/elements/button/AButton.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 // TODO: refactor Ilkham
-import { twJoin, twMerge } from 'tailwind-merge'
 import type { Component } from 'vue'
 import type { DisabledViewSwitchValues, SizeSwitchValues, ViewSwitchValues } from './types'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { NuxtLinkLocale} from '#components'
 
 defineOptions({ name: 'AButton' })
@@ -35,13 +35,13 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const classes = computed(() => [
-  'body-600 rounded-md cursor-pointer outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm cursor-pointer outline-none transition duration-200 select-none',
   props.block ? 'w-full' : '',
   typeSwitchValues[props.view][props.variant],
   sizeSwitchValues[props.form][props.size]
 ])
 const disabledClasses = computed(() => [
-  'body-600 rounded-md outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm outline-none transition duration-200 select-none',
   props.block ? 'w-full' : '',
   disabledTypeSwitchValues[props.view],
   sizeSwitchValues[props.form][props.size]

package/components/elements/button/AButtonV2.vue

@@ -2,7 +2,7 @@
 import type { Component } from 'vue'
 
 type View = 'solid' | 'outline' | 'ghost' | 'soft'
-type Size = 'sm' | 'md' | 'lg'
+type Size = 'xs' | 'sm' | 'md' | 'lg'
 type Color = 'blue' | 'green' | 'red' | 'gray'
 
 const props = withDefaults(defineProps<{
@@ -56,12 +56,14 @@ const VIEW_CLASS: Record<Color, Record<View, string>> = {
 }
 
 const SIZE_CLASS: Record<Size, string> = {
-  sm: 'h-8 gap-1.5 px-3 text-xs',
-  md: 'h-10 gap-2 px-4 text-sm',
-  lg: 'h-12 gap-2.5 px-5 text-base',
+  xs: 'h-6 gap-1 rounded-md px-2 text-body-sm',
+  sm: 'h-8 gap-1.5 rounded-lg px-3 text-body-sm',
+  md: 'h-10 gap-2 rounded-lg px-4 text-body-md',
+  lg: 'h-12 gap-2.5 rounded-lg px-5 text-body-lg',
 }
 
 const ICON_SIZE: Record<Size, string> = {
+  xs: 'size-3.5',
   sm: 'size-4',
   md: 'size-5',
   lg: 'size-5',
@@ -77,7 +79,7 @@ function onClick(event: MouseEvent) {
   <button
     :type="type"
     :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="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],

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

@@ -7,7 +7,7 @@ const { t } = useI18n()
 <template>
   <button
     type="button"
-    class="hidden h-8 cursor-pointer items-center rounded-xl 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"
+    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')"
   >

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/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,17 +22,9 @@ 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],
@@ -34,16 +35,16 @@ const classes = computed(() =>
 
 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'
+  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

@@ -53,7 +53,7 @@ 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>

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" />