refactor(ui): migrate button and pagination components to radix-vue

- Replace reka-ui imports with radix-vue in Button component
- Update pagination components to use direct radix-vue icons
- Simplify button variants styling and adjust size variants
- Remove unused data-slot attribute from Button component

app/components/pub/ui/pagination/PaginationEllipsis.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { PaginationEllipsis } from 'radix-vue'
 import { computed } from 'vue'
-import { cn } from '~/lib/utils'
-
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
     <slot>
-      <Icon name="i-radix-icons-dots-horizontal" />
+      <DotsHorizontalIcon />
     </slot>
   </PaginationEllipsis>
 </template>

app/components/pub/ui/pagination/PaginationFirst.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationFirstProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { DoubleArrowLeftIcon } from '@radix-icons/vue'
 import { PaginationFirst } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-double-arrow-left" />
+        <DoubleArrowLeftIcon />
       </slot>
     </Button>
   </PaginationFirst>

app/components/pub/ui/pagination/PaginationLast.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationLastProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { DoubleArrowRightIcon } from '@radix-icons/vue'
 import { PaginationLast } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-double-arrow-right" />
+        <DoubleArrowRightIcon />
       </slot>
     </Button>
   </PaginationLast>

app/components/pub/ui/pagination/PaginationNext.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import { PaginationNext } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-chevron-right" />
+        <ChevronRightIcon />
       </slot>
     </Button>
   </PaginationNext>

app/components/pub/ui/pagination/PaginationPrev.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { PaginationPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '~/components/pub/ui/button'
+import { cn } from '~/lib/utils'
+import { ChevronLeftIcon } from '@radix-icons/vue'
 import { PaginationPrev } from 'radix-vue'
 import { computed } from 'vue'
-import { Button } from '~/components/pub/ui/button'
-import { cn } from '~/lib/utils'
-
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -20,9 +22,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <Icon name="i-radix-icons-chevron-left" />
+        <ChevronLeftIcon />
       </slot>
     </Button>
   </PaginationPrev>