fix: run 'pnpm format' update various components and improve layout structure

- Updated demo-preview and preview-group components for better error handling and layout. - Enhanced drawer and modal components for improved auto-height functionality. - Refactored layout components including header, footer, sidebar, and tabbar for better responsiveness and usability. - Adjusted tooltip and help tooltip components for better user guidance. - Fixed issues in various UI components to ensure consistent styling and functionality across the application.
3 months ago · cd7c11c7d0
109 changed files with 158 additions and 157 deletions
--- a/docs/.vitepress/components/demo-preview.vue
+++ b/docs/.vitepress/components/demo-preview.vue
@ -19,15 +19,15 @@ const parsedFiles = computed(() => {
 </script>

 <template>
-  <div class="border-border shadow-float relative rounded-xl border">
+  <div class="relative rounded-xl border border-border shadow-float">
    <div
      class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
    >
      <div class="flex w-full max-w-[700px] px-2">
        <ClientOnly>
          <slot v-if="parsedFiles.length > 0"></slot>
-          <div v-else class="text-destructive text-sm">
-            <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
+          <div v-else class="text-sm text-destructive">
+            <span class="rounded-sm bg-destructive px-1 py-1 text-foreground">
              ERROR:
            </span>
            The preview directory does not exist. Please check the 'dir'
--- a/docs/.vitepress/components/preview-group.vue
+++ b/docs/.vitepress/components/preview-group.vue
@ -48,10 +48,10 @@ const toggleOpen = () => {
 <template>
  <TabsRoot
    v-model="currentTab"
-    class="bg-background-deep border-border overflow-hidden rounded-b-xl border-t"
+    class="overflow-hidden rounded-b-xl border-t border-border bg-background-deep"
    @update:model-value="open = true"
  >
-    <div class="border-border bg-background flex border-b-2 pr-2">
+    <div class="flex border-b-2 border-border bg-background pr-2">
      <div class="flex w-full items-center justify-between text-[13px]">
        <TabsList class="relative flex">
          <template v-if="open">
@ -64,7 +64,7 @@ const toggleOpen = () => {
              v-for="(tab, index) in tabs"
              :key="index"
              :value="tab.label"
-              class="border-box text-foreground px-4 py-3 data-[state=active]:text-[var(--vp-c-indigo-1)]"
+              class="border-box px-4 py-3 text-foreground data-[state=active]:text-[var(--vp-c-indigo-1)]"
              tabindex="-1"
            >
              {{ tab.label }}
@ -81,7 +81,7 @@ const toggleOpen = () => {
          <VbenTooltip side="top">
            <template #trigger>
              <Code
-                class="hover:bg-accent size-7 cursor-pointer rounded-full p-1.5"
+                class="size-7 cursor-pointer rounded-full p-1.5 hover:bg-accent"
                @click="toggleOpen"
              />
            </template>
@ -101,7 +101,7 @@ const toggleOpen = () => {
        as-child
        class="rounded-xl"
      >
-        <div class="text-foreground relative rounded-xl">
+        <div class="relative rounded-xl text-foreground">
          <component :is="tab.component" class="border-0" />
        </div>
      </TabsContent>
--- a/docs/src/demos/vben-drawer/auto-height/drawer.vue
+++ b/docs/src/demos/vben-drawer/auto-height/drawer.vue
@ -32,7 +32,7 @@ function handleUpdate(len: number) {
    <div
      v-for="item in list"
      :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
    >
      {{ item }}
    </div>
--- a/docs/src/demos/vben-modal/auto-height/modal.vue
+++ b/docs/src/demos/vben-modal/auto-height/modal.vue
@ -32,7 +32,7 @@ function handleUpdate(len: number) {
    <div
      v-for="item in list"
      :key="item"
-      class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
+      class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
    >
      {{ item }}
    </div>
--- a/packages/@core/preferences/tests/snapshots/config.test.ts.snap
+++ b/packages/@core/preferences/tests/snapshots/config.test.ts.snap
@ -115,6 +115,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
    "colorWarning": "hsl(42 84% 61%)",
    "mode": "dark",
    "radius": "0.5",
+    "fontSize": 16,
    "semiDarkHeader": false,
    "semiDarkSidebar": false,
  },
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@ -339,7 +339,7 @@ onUnmounted(() => {
                :is="FieldComponent"
                ref="fieldComponentRef"
                :class="{
-                  'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
                    isInValid,
                }"
                v-bind="createComponentProps(slotProps)"
@ -367,7 +367,7 @@ onUnmounted(() => {
                    <CircleAlert
                      :class="
                        cn(
-                          'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+                          'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
                        )
                      "
                    />
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@ -21,7 +21,7 @@ const props = defineProps<Props>();

 <template>
  <FormLabel :class="cn('flex items-center', props.class)">
-    <span v-if="required" class="text-destructive mr-[2px]">*</span>
+    <span v-if="required" class="mr-[2px] text-destructive">*</span>
    <slot></slot>
    <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
      <VbenRenderContent :content="help" />
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@ -55,7 +55,7 @@ const style = computed((): CSSProperties => {
 </script>

 <template>
-  <main ref="contentElement" :style="style" class="bg-background-deep relative">
+  <main ref="contentElement" :style="style" class="relative bg-background-deep">
    <Slot :style="overlayStyle">
      <slot name="overlay"></slot>
    </Slot>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@ -37,7 +37,7 @@ const style = computed((): CSSProperties => {
 <template>
  <footer
    :style="style"
-    class="bg-background-deep bottom-0 w-full transition-all duration-200"
+    class="bottom-0 w-full bg-background-deep transition-all duration-200"
  >
    <slot></slot>
  </footer>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@ -64,7 +64,7 @@ const logoStyle = computed((): CSSProperties => {
  <header
    :class="theme"
    :style="style"
-    class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b pl-2 transition-[margin-top] duration-200"
+    class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
  >
    <div v-if="slots.logo" :style="logoStyle">
      <slot name="logo"></slot>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@ -264,7 +264,7 @@ function handleMouseleave() {
      theme,
      {
        'bg-sidebar-deep': isSidebarMixed,
-        'bg-sidebar border-border border-r': !isSidebarMixed,
+        'border-r border-border bg-sidebar': !isSidebarMixed,
      },
    ]"
    :style="style"
@ -295,7 +295,7 @@ function handleMouseleave() {
        'border-l': extraVisible,
      }"
      :style="extraStyle"
-      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-r transition-all duration-200"
+      class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
    >
      <SidebarCollapseButton
        v-if="isSidebarMixed && expandOnHover"
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@ -23,7 +23,7 @@ const style = computed((): CSSProperties => {
 <template>
  <section
    :style="style"
-    class="border-border bg-background flex w-full border-b transition-all"
+    class="flex w-full border-b border-border bg-background transition-all"
  >
    <slot></slot>
  </section>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@ -10,7 +10,7 @@ function handleCollapsed() {

 <template>
  <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
+    class="flex-center absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
    @click.stop="handleCollapsed"
  >
    <ChevronsRight v-if="collapsed" class="size-4" />
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@ -10,7 +10,7 @@ function toggleFixed() {

 <template>
  <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
+    class="flex-center absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
    @click="toggleFixed"
  >
    <PinOff v-if="!expandOnHover" class="size-3.5" />
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@ -610,7 +610,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
    <div
      v-if="maskVisible"
      :style="maskStyle"
-      class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
+      class="fixed left-0 top-0 h-full w-full bg-overlay transition-[background-color] duration-200"
      @click="handleClickMask"
    ></div>
  </div>
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
@ -49,7 +49,7 @@ const badgeStyle = computed(() => {
      v-else
      :class="badgeClass"
      :style="badgeStyle"
-      class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
+      class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground"
    >
      {{ badge }}
    </div>
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@ -125,16 +125,16 @@ $namespace: vben;
      border-color 0.15s ease;

    &.is-active {
-      @apply text-primary bg-primary dark:bg-accent;
+      @apply bg-primary text-primary dark:bg-accent;

      .#{$namespace}-normal-menu__name,
      .#{$namespace}-normal-menu__icon {
-        @apply text-primary-foreground font-semibold;
+        @apply font-semibold text-primary-foreground;
      }
    }

    &:not(.is-active):hover {
-      @apply dark:bg-accent text-primary bg-heavy dark:text-foreground;
+      @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
    }

    &:hover {
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@ -149,7 +149,7 @@ async function handleOpenChange(val: boolean) {
          containerClass,
          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
          {
-            'border-border border': bordered,
+            'border border-border': bordered,
            'shadow-3xl': !bordered,
          },
        )
@ -168,7 +168,7 @@ async function handleOpenChange(val: boolean) {
                :disabled="loading"
                @click="handleCancel"
              >
-                <X class="text-muted-foreground size-4" />
+                <X class="size-4 text-muted-foreground" />
              </VbenButton>
            </AlertDialogCancel>
          </div>
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@ -223,7 +223,7 @@ const getForceMount = computed(() => {
            v-if="closable && closeIconPlacement === 'left'"
            as-child
            :disabled="submitting"
-            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
          >
            <slot name="close-icon">
              <VbenIconButton>
@ -264,7 +264,7 @@ const getForceMount = computed(() => {
            v-if="closable && closeIconPlacement === 'right'"
            as-child
            :disabled="submitting"
-            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
          >
            <slot name="close-icon">
              <VbenIconButton>
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@ -235,7 +235,7 @@ function handleClosed() {
          shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
          modalClass,
          {
-            'border-border border': bordered,
+            'border border-border': bordered,
            'shadow-3xl': !bordered,
            'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
              shouldFullscreen,
@ -311,7 +311,7 @@ function handleClosed() {
      <VbenLoading v-if="showLoading || submitting" spinning />
      <VbenIconButton
        v-if="fullscreenButton"
-        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
+        class="flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
        @click="handleFullscreen"
      >
        <Shrink v-if="fullscreen" class="size-3.5" />
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@ -69,7 +69,7 @@ const rootStyle = computed(() => {
    <span
      v-if="dot"
      :class="dotClass"
-      class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
+      class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background"
    >
    </span>
  </div>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
    <VbenButton
      v-if="visible"
      :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
+      class="data z-popup fixed bottom-10 size-10 rounded-full bg-background shadow-float duration-500 hover:bg-heavy dark:bg-accent dark:hover:bg-heavy"
      size="icon"
      variant="icon"
      @click="handleClick"
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@ -37,7 +37,7 @@ function handleClick(index: number, path?: string) {
              />
              <span
                :class="{
-                  'text-foreground font-normal':
+                  'font-normal text-foreground':
                    index === breadcrumbs.length - 1,
                }"
                >{{ item.title }}
@ -55,7 +55,7 @@ li {
 }

 li a {
-  @apply text-muted-foreground bg-accent relative mr-9 flex h-7 items-center py-0 pl-[5px] pr-2 text-[13px];
+  @apply relative mr-9 flex h-7 items-center bg-accent py-0 pl-[5px] pr-2 text-[13px] text-muted-foreground;
 }

 li a > span {
@ -84,7 +84,7 @@ li:last-child a::after {

 li a::before,
 li a::after {
-  @apply border-accent absolute top-0 h-0 w-0 border-[.875rem] border-solid content-[''];
+  @apply absolute top-0 h-0 w-0 border-[.875rem] border-solid border-accent content-[''];
 }

 li a::before {
@ -92,7 +92,7 @@ li a::before {
 }

 li a::after {
-  @apply border-l-accent left-full border-transparent;
+  @apply left-full border-transparent border-l-accent;
 }

 li:not(:last-child) a:hover {
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@ -35,7 +35,7 @@ function handleItemClick(menu: IDropdownMenuItem) {
        <template v-for="menu in menus" :key="menu.value">
          <DropdownMenuItem
            :disabled="menu.disabled"
-            class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
            @click="handleItemClick(menu)"
          >
            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@ -34,7 +34,7 @@ function handleItemClick(value: string) {
                ? 'bg-accent text-accent-foreground'
                : ''
            "
-            class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
            @click="handleItemClick(menu.value)"
          >
            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
--- a/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
@ -25,7 +25,7 @@ isFullscreen.value = !!(
    class="hover:animate-[shrink_0.3s_ease-in-out]"
    @click="toggle"
  >
-    <Minimize v-if="isFullscreen" class="text-foreground size-4" />
-    <Maximize v-else class="text-foreground size-4" />
+    <Minimize v-if="isFullscreen" class="size-4 text-foreground" />
+    <Maximize v-else class="size-4 text-foreground" />
  </VbenIconButton>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@ -38,7 +38,7 @@ const show = ref(false);
    />
    <template v-if="passwordStrength">
      <PasswordStrength :password="modelValue" />
-      <p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
+      <p v-if="slots.strengthText" class="mt-1.5 text-xs text-muted-foreground">
        <slot name="strengthText"> </slot>
      </p>
    </template>
@ -47,7 +47,7 @@ const show = ref(false);
        'top-3': !!passwordStrength,
        'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
      }"
-      class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
+      class="absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5 text-foreground/60 hover:text-foreground"
      @click="show = !show"
    >
      <Eye v-if="show" class="size-4" />
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
@ -51,7 +51,7 @@ function checkPasswordStrength(password: string) {
  <div class="relative mt-2 flex items-center justify-between">
    <template v-for="index in 5" :key="index">
      <div
-        class="dark:bg-input-background bg-heavy relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
+        class="relative mr-1 h-1.5 w-1/5 rounded-sm bg-heavy last:mr-0 dark:bg-input-background"
      >
        <span
          :style="{
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@ -82,7 +82,7 @@ const logoSrc = computed(() => {
      />
      <template v-if="!collapsed">
        <slot name="text">
-          <span class="text-foreground truncate text-nowrap font-semibold">
+          <span class="truncate text-nowrap font-semibold text-foreground">
            {{ text }}
          </span>
        </slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@ -100,7 +100,7 @@ function handleScroll(event: Event) {
      v-if="showShadowTop"
      :class="{
        'opacity-100': !isAtTop,
-        'border-border border-t': shadowBorder && !isAtTop,
+        'border-t border-border': shadowBorder && !isAtTop,
      }"
      class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
    ></div>
@ -109,7 +109,7 @@ function handleScroll(event: Event) {
      v-if="showShadowBottom"
      :class="{
        'opacity-100': !isAtTop && !isAtBottom,
-        'border-border border-b': shadowBorder && !isAtTop && !isAtBottom,
+        'border-b border-border': shadowBorder && !isAtTop && !isAtBottom,
      }"
      class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
    ></div>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@ -45,14 +45,14 @@ function activeClass(tab: string): string[] {
  <Tabs v-model="activeTab" :default-value="getDefaultValue">
    <TabsList
      :style="tabsStyle"
-      class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
+      class="relative grid w-full bg-accent !outline !outline-2 !outline-heavy"
    >
      <TabsIndicator :style="tabsIndicatorStyle" />
      <template v-for="tab in tabs" :key="tab.value">
        <TabsTrigger
          :value="tab.value"
          :class="activeClass(tab.value)"
-          class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
+          class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium hover:text-primary disabled:pointer-events-none disabled:opacity-50"
        >
          {{ tab.label }}
        </TabsTrigger>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    "
  >
    <div
-      class="bg-background text-foreground inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      class="inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-3 py-1 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
    >
      <slot></slot>
    </div>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@ -69,7 +69,7 @@ function onTransitionEnd() {
  <div
    :class="
      cn(
-        'z-100 dark:bg-overlay bg-overlay-content absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
+        'absolute left-0 top-0 z-100 flex size-full flex-col items-center justify-center bg-overlay-content transition-all duration-500 dark:bg-overlay',
        {
          'invisible opacity-0': !showSpinner,
        },
@ -83,12 +83,12 @@ function onTransitionEnd() {
        <i
          v-for="index in 4"
          :key="index"
-          class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
+          class="absolute block size-4 origin-[50%_50%] scale-75 rounded-full bg-primary opacity-30"
        ></i>
      </span>
    </slot>

-    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
+    <div v-if="text" class="mt-4 text-xs text-primary">{{ text }}</div>
    <slot></slot>
  </div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@ -63,7 +63,7 @@ function onTransitionEnd() {
  <div
    :class="
      cn(
-        'flex-center z-100 bg-overlay-content absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500',
+        'flex-center absolute left-0 top-0 z-100 size-full bg-overlay-content backdrop-blur-sm transition-all duration-500',
        {
          'invisible opacity-0': !showSpinner,
        },
@ -75,7 +75,7 @@ function onTransitionEnd() {
    <div
      :class="{ paused: !renderSpinner }"
      v-if="renderSpinner"
-      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
+      class="loader relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:bg-primary/50 before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:bg-primary after:content-['']"
    ></div>
  </div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
@ -19,7 +19,7 @@ defineProps<{ triggerClass?: string }>();
        <CircleHelp
          :class="
            cn(
-              'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+              'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
              triggerClass,
            )
          "
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
        :class="contentClass"
        :side="side"
        :style="contentStyle"
-        class="side-content text-popover-foreground bg-accent rounded-md"
+        class="side-content rounded-md bg-accent text-popover-foreground"
      >
        <slot></slot>
      </TooltipContent>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
 <template>
  <AccordionContent
    v-bind="delegatedProps"
-    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
  >
    <div :class="cn('pb-4 pt-0', props.class)">
      <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@ -31,7 +31,7 @@ const delegatedProps = computed(() => {
      <slot></slot>
      <slot name="icon">
        <ChevronDown
-          class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
+          class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
        />
      </slot>
    </AccordionTrigger>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@ -81,9 +81,9 @@ defineExpose({
          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          {
-            'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
              !centered,
-            'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
+            'data-[state=closed]:slide-out-to-top-[148%] data-[state=open]:slide-in-from-top-[98%]':
              centered,
            'top-[10vh]': !centered,
            'top-1/2 -translate-y-1/2': centered,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
  <AlertDialogDescription
    v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
  >
    <slot></slot>
  </AlertDialogDescription>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@ -4,5 +4,5 @@ import { useScrollLock } from '@vben-core/composables';
 useScrollLock();
 </script>
 <template>
-  <div class="bg-overlay z-popup inset-0"></div>
+  <div class="z-popup inset-0 bg-overlay"></div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
  <li
    :class="
-      cn('hover:text-foreground inline-flex items-center gap-1.5', props.class)
+      cn('inline-flex items-center gap-1.5 hover:text-foreground', props.class)
    "
  >
    <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
  <Primitive
    :as="as"
    :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors', props.class)"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
  >
    <slot></slot>
  </Primitive>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
@ -10,7 +10,7 @@ const props = defineProps<{
  <ol
    :class="
      cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
@ -8,7 +8,7 @@ const props = defineProps<{

 <template>
  <span
-    :class="cn('text-foreground font-normal', props.class)"
+    :class="cn('font-normal text-foreground', props.class)"
    aria-current="page"
    aria-disabled="true"
    role="link"
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
@ -10,7 +10,7 @@ const props = defineProps<{
  <div
    :class="
      cn(
-        'bg-card text-card-foreground border-border rounded-xl border',
+        'rounded-xl border border-border bg-card text-card-foreground',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
@ -7,7 +7,7 @@ const props = defineProps<{
 </script>

 <template>
-  <p :class="cn('text-muted-foreground text-sm', props.class)">
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
    <slot></slot>
  </p>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border hover:border-primary peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'peer h-4 w-4 shrink-0 rounded-sm border border-border transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="forwarded"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        inset && 'pl-8',
        props.class,
      )
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
    v-bind="delegatedProps"
    :class="
      cn(
-        'text-foreground px-2 py-1.5 text-sm font-semibold',
+        'px-2 py-1.5 text-sm font-semibold text-foreground',
        inset && 'pl-8',
        props.class,
      )
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
 <template>
  <ContextMenuSeparator
    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
  />
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
  <span
    :class="
-      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
    "
  >
    <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
        inset && 'pl-8',
        props.class,
      )
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@ -102,7 +102,7 @@ defineExpose({
      v-bind="forwarded"
      :class="
        cn(
-          'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup w-full bg-background p-6 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-xl',
          {
            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
              animationType === 'slide',
@ -118,7 +118,7 @@ defineExpose({
        :disabled="closeDisabled"
        :class="
          cn(
-            'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
+            'flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
            props.closeClass,
          )
        "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
  <DialogDescription
    v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
  >
    <slot></slot>
  </DialogDescription>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay z-popup inset-0"></div>
+  <div :data-dismissable-modal="id" class="z-popup inset-0 bg-overlay"></div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@ -33,12 +33,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
  <DialogPortal>
    <DialogOverlay
      :style="{ zIndex }"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border absolute inset-0 grid place-items-center overflow-y-auto border bg-black/80"
+      class="absolute inset-0 grid place-items-center overflow-y-auto border border-border bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
    >
      <DialogContent
        :class="
          cn(
-            'border-border bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
            props.class,
          )
        "
@ -60,7 +60,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
        <slot></slot>

        <DialogClose
-          class="hover:bg-secondary absolute right-4 top-4 rounded-md p-0.5 transition-colors"
+          class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
        >
          <X class="h-4 w-4" />
          <span class="sr-only">Close</span>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="forwarded"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        inset && 'pl-8',
        props.class,
      )
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@ -23,6 +23,6 @@ const delegatedProps = computed(() => {
 <template>
  <DropdownMenuSeparator
    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
  />
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
@ -13,7 +13,7 @@ const { formDescriptionId } = useFormField();
 <template>
  <p
    :id="formDescriptionId"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
  >
    <slot></slot>
  </p>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@ -13,6 +13,6 @@ const { formMessageId, name } = useFormField();
    :id="formMessageId"
    :name="toValue(name)"
    as="p"
-    class="text-destructive text-[0.8rem]"
+    class="text-[0.8rem] text-destructive"
  />
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
      v-bind="forwardedProps"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup w-64 rounded-md border p-4 shadow-md outline-none',
+          'z-popup w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
    v-model="modelValue"
    :class="
      cn(
-        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
@ -8,7 +8,7 @@ import { NumberFieldInput } from 'reka-ui';
  <NumberFieldInput
    :class="
      cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent py-1 text-center text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-center text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
      )
    "
    data-slot="input"
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'border-input bg-background relative flex h-10 w-8 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
+        'relative flex h-10 w-8 items-center justify-center border-y border-r border-input bg-background text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border w-72 rounded-md border p-4 shadow-md outline-none',
+          'w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@ -34,14 +34,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
+        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
        props.class,
      )
    "
  >
    <template v-if="props.withHandle">
      <div
-        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border"
+        class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
      >
        <GripVertical class="h-2.5 w-2.5" />
      </div>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@ -35,6 +35,6 @@ const delegatedProps = computed(() => {
      )
    "
  >
-    <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
  </ScrollAreaScrollbar>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          props.class,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
 <template>
  <SelectSeparator
    v-bind="delegatedProps"
-    :class="cn('bg-muted -mx-1 my-1 h-px', props.class)"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
  />
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        'flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
    v-bind="delegatedProps"
    :class="
      cn(
-        'bg-border relative shrink-0',
+        'relative shrink-0 bg-border',
        props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
        props.class,
      )
@ -31,7 +31,7 @@ const delegatedProps = computed(() => {
      v-if="props.label"
      :class="
        cn(
-          'text-muted-foreground bg-background absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
+          'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
          props.orientation === 'vertical'
            ? 'w-[1px] px-1 py-2'
            : 'h-[1px] px-2 py-1',
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
@ -18,7 +18,7 @@ const delegatedProps = computed(() => {

 <template>
  <DialogDescription
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-sm text-muted-foreground', props.class)"
    v-bind="delegatedProps"
  >
    <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
-  <div :data-dismissable-drawer="id" class="bg-overlay z-popup inset-0"></div>
+  <div :data-dismissable-drawer="id" class="z-popup inset-0 bg-overlay"></div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
@ -18,7 +18,7 @@ const delegatedProps = computed(() => {

 <template>
  <DialogTitle
-    :class="cn('text-foreground font-medium', props.class)"
+    :class="cn('font-medium text-foreground', props.class)"
    v-bind="delegatedProps"
  >
    <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    v-bind="forwarded"
    :class="
      cn(
-        'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
        props.class,
      )
    "
@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    <SwitchThumb
      :class="
        cn(
-          'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
        )
      "
    />
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
  <TabsContent
    :class="
      cn(
-        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
    v-bind="delegatedProps"
    :class="
      cn(
-        'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md p-1',
+        'inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
    v-model="modelValue"
    :class="
      cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
-          'z-popup bg-accent text-accent-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border shadow-float overflow-hidden rounded-sm border px-4 py-2 text-xs',
+          'z-popup overflow-hidden rounded-sm border border-border bg-accent px-4 py-2 text-xs text-accent-foreground shadow-float animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@ -302,7 +302,7 @@ defineExpose({
      >
        <ChevronRight
          :class="{ 'rotate-90': expanded?.length > 0 }"
-          class="text-foreground/80 hover:text-foreground size-4 cursor-pointer transition"
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
        />
        <Checkbox
          v-if="multiple"
@ -329,7 +329,7 @@ defineExpose({
        :class="
          cn('cursor-pointer', getNodeClass?.(item), {
            'data-[selected]:bg-accent': !multiple,
-            'text-foreground/50 cursor-not-allowed': isNodeDisabled(item),
+            'cursor-not-allowed text-foreground/50': isNodeDisabled(item),
          })
        "
        v-bind="
@ -367,7 +367,7 @@ defineExpose({
            Array.isArray(item.value[childrenField]) &&
            item.value[childrenField].length > 0
          "
-          class="text-foreground/80 hover:text-foreground size-4 cursor-pointer transition"
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
          :class="{ 'rotate-90': isExpanded }"
          @click.stop="
            () => {
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@ -107,24 +107,24 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
            <!-- divider -->
            <div
              v-if="i !== 0 && tab.key !== active"
-              class="tabs-chrome__divider bg-border absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
+              class="tabs-chrome__divider absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] bg-border transition-all"
            ></div>
            <!-- background -->
            <div
              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
            >
              <div
-                class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
+                class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
              ></div>
              <svg
-                class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
+                class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
                height="7"
                width="7"
              >
                <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
              </svg>
              <svg
-                class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
+                class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
                height="7"
                width="7"
              >
@ -139,19 +139,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
              <!-- close-icon -->
              <X
                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
+                class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-accent-foreground"
                @click.stop="() => emit('close', tab.key)"
              />
              <Pin
                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[1px] size-3.5 cursor-pointer rounded-full transition-all"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all hover:text-accent-foreground group-[.is-active]:text-accent-foreground"
                @click.stop="() => emit('unpin', tab)"
              />
            </div>

            <!-- tab-item-main -->
            <div
-              class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
+              class="tabs-chrome__item-main z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
            >
              <VbenIcon
                v-if="showIcon"
@ -190,7 +190,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
        @apply pb-[2px];

        &-content {
-          @apply bg-accent mx-[2px] rounded-md;
+          @apply mx-[2px] rounded-md bg-accent;
        }
      }
    }
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@ -89,14 +89,14 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
        :key="tab.key"
        :class="[
          {
-            'is-active dark:bg-accent bg-primary/15': tab.key === active,
+            'is-active bg-primary/15 dark:bg-accent': tab.key === active,
            draggable: !tab.affixTab,
            'affix-tab': tab.affixTab,
          },
          typeWithClass.content,
        ]"
        :data-index="i"
-        class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
+        class="tab-item translate-all group relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
        data-tab-item="true"
        @click="active = tab.key"
        @mousedown="onMouseDown($event, tab)"
@ -115,19 +115,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
              <!-- close-icon -->
              <X
                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
+                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
                @click.stop="() => emit('close', tab.key)"
              />
              <Pin
                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[1px] size-3.5 cursor-pointer rounded-full transition-all"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
                @click.stop="() => emit('unpin', tab)"
              />
            </div>

            <!-- tab-item-main -->
            <div
-              class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
+              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
            >
              <VbenIcon
                v-if="showIcon"
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
 <template>
  <VbenDropdownMenu :menus="menus" :modal="false">
    <div
-      class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
+      class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
    >
      <ChevronDown class="size-4" />
    </div>
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
@ -10,7 +10,7 @@ function toggleScreen() {

 <template>
  <div
-    class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
+    class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
    @click="toggleScreen"
  >
    <Minimize2 v-if="screen" class="size-4" />
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@ -53,7 +53,7 @@ useTabsDrag(props, emit);
    <span
      v-show="showScrollButton"
      :class="{
-        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtLeft,
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtLeft,
        'pointer-events-none opacity-30': scrollIsAtLeft,
      }"
      class="border-r px-2"
@ -94,10 +94,10 @@ useTabsDrag(props, emit);
    <span
      v-show="showScrollButton"
      :class="{
-        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtRight,
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtRight,
        'pointer-events-none opacity-30': scrollIsAtRight,
      }"
-      class="hover:bg-muted text-muted-foreground cursor-pointer border-l px-2"
+      class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
      @click="scrollDirection('right')"
    >
      <ChevronRight class="size-4 h-full" />
--- a/playground/src/views/demos/access/button-control.vue
+++ b/playground/src/views/demos/access/button-control.vue
@ -58,7 +58,7 @@ async function changeAccount(role: string) {
    <Card class="mb-5">
      <template #title>
        <span class="font-semibold">当前角色:</span>
-        <span class="text-primary mx-4 text-lg">
+        <span class="mx-4 text-lg text-primary">
          {{ userStore.userRoles?.[0] }}
        </span>
      </template>
--- a/playground/src/views/demos/access/index.vue
+++ b/playground/src/views/demos/access/index.vue
@ -71,7 +71,7 @@ async function handleToggleAccessMode() {
  >
    <Card class="mb-5" title="权限模式">
      <span class="font-semibold">当前权限模式:</span>
-      <span class="text-primary mx-4">{{
+      <span class="mx-4 text-primary">{{
        accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
      }}</span>
      <Button type="primary" @click="handleToggleAccessMode">