@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/shadcn/navigation-menu/NavigationMenuViewport.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
-    <NavigationMenuViewport
-      data-slot="navigation-menu-viewport"
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>

package/src/shadcn/navigation-menu/index.ts

@@ -1,14 +1,14 @@
-import { cva } from "class-variance-authority"
-
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
-
-export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
-)
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+)

package/src/shadcn/pagination/Pagination.vue

@@ -1,151 +1,151 @@
-<script setup lang="ts">
-import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
-import PaginationContent from './PaginationContent.vue';
-import PaginationItem from './PaginationItem.vue';
-import PaginationLink from './PaginationLink.vue';
-import PaginationPrevious from './PaginationPrevious.vue';
-import PaginationNext from './PaginationNext.vue';
-import PaginationEllipsis from './PaginationEllipsis.vue';
-import { cn } from "@/lib/utils"
-import Select from '@/ui/select.vue';
-import SelectTrigger from '@/ui/SelectTrigger.vue';
-import SelectValue from '@/ui/SelectValue.vue';
-import SelectContent from '@/ui/SelectContent.vue';
-import SelectItem from '@/ui/SelectItem.vue';
-import { ref, computed, watch } from 'vue';
-
-const props = defineProps<PaginationRootProps & {
-  class?: HTMLAttributes["class"];
-  /**
-   * Optional variant for custom pagination UIs (e.g. 'withPageSize')
-   */
-  variant?: string;
-}>()
-const emits = defineEmits<PaginationRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-// --- withPageSize variant logic ---
-const pageSizeOptions = [5, 10, 25, 50, 100];
-const pageSize = ref(props.itemsPerPage ?? 10);
-const pageSizeString = computed({
-  get: () => String(pageSize.value),
-  set: (val: string) => {
-    const num = parseInt(val, 10);
-    if (pageSizeOptions.includes(num)) pageSize.value = num;
-  },
-});
-const currentPage = ref(props.page ?? 1);
-const totalItems = computed(() => props.total ?? 500);
-const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
-const startItem = computed(() => (currentPage.value - 1) * pageSize.value + 1);
-const endItem = computed(() => Math.min(currentPage.value * pageSize.value, totalItems.value));
-
-function handlePageSizeChange(val: string) {
-  pageSizeString.value = val;
-  currentPage.value = 1;
-}
-function handlePrevious() {
-  if (currentPage.value > 1) currentPage.value--;
-}
-function handleNext() {
-  if (currentPage.value < totalPages.value) currentPage.value++;
-}
-function setPage(page: number) {
-  if (page >= 1 && page <= totalPages.value) currentPage.value = page;
-}
-
-// Generate pagination items (pages and ellipsis)
-const paginationItems = computed(() => {
-  const items = [];
-  const siblingCount = 2;
-  const total = totalPages.value;
-  const page = currentPage.value;
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      items.push({ type: 'page', page: i, key: `page-${i}` });
-    }
-  } else {
-    items.push({ type: 'page', page: 1, key: 'page-1' });
-    if (page > 2 + siblingCount) {
-      items.push({ type: 'ellipsis', key: 'ellipsis-1' });
-    }
-    const start = Math.max(2, page - siblingCount);
-    const end = Math.min(total - 1, page + siblingCount);
-    for (let i = start; i <= end; i++) {
-      items.push({ type: 'page', page: i, key: `page-${i}` });
-    }
-    if (page < total - 1 - siblingCount) {
-      items.push({ type: 'ellipsis', key: 'ellipsis-2' });
-    }
-    items.push({ type: 'page', page: total, key: `page-${total}` });
-  }
-  return items;
-});
-
-watch(pageSize, () => {
-  if (currentPage.value > totalPages.value) {
-    currentPage.value = totalPages.value || 1;
-  }
-});
-</script>
-
-<template>
-  <div v-if="variant === 'withPageSize'">
-    <div class="flex items-center">
-      <!-- Left side: Page size selector and results info -->
-      <div class="flex w-full items-center gap-6">
-        <Select v-model="pageSizeString" @update:modelValue="handlePageSizeChange">
-          <SelectTrigger class="w-20">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="5">5</SelectItem>
-            <SelectItem value="10">10</SelectItem>
-            <SelectItem value="25">25</SelectItem>
-            <SelectItem value="50">50</SelectItem>
-            <SelectItem value="100">100</SelectItem>
-          </SelectContent>
-        </Select>
-        <div class="text-sm text-muted-foreground">
-          Results: {{ startItem }} - {{ endItem }} of {{ totalItems }}
-        </div>
-      </div>
-      <!-- Right side: Navigation using Pagination components -->
-      <PaginationRoot role="navigation" aria-label="pagination" data-slot="pagination" :itemsPerPage="pageSize"
-        :class="cn('mx-auto flex justify-center', props.class)">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious @click="handlePrevious" :style="{
-              pointerEvents: currentPage === 1 ? 'none' : 'auto',
-              opacity: currentPage === 1 ? 0.5 : 1,
-            }" />
-          </PaginationItem>
-          <template v-for="item in paginationItems" :key="item.key">
-            <PaginationItem v-if="item.type === 'page'" :value="item.page">
-              <PaginationLink :isActive="item.page === currentPage" @click="() => setPage(item.page)">{{
-                item.page }}</PaginationLink>
-            </PaginationItem>
-            <PaginationItem v-else-if="item.type === 'ellipsis'">
-              <PaginationEllipsis />
-            </PaginationItem>
-          </template>
-          <PaginationItem>
-            <PaginationNext @click="handleNext" :style="{
-              pointerEvents: currentPage === totalPages ? 'none' : 'auto',
-              opacity: currentPage === totalPages ? 0.5 : 1,
-            }" />
-          </PaginationItem>
-        </PaginationContent>
-      </PaginationRoot>
-    </div>
-  </div>
-  <PaginationRoot v-else v-slot="slotProps" data-slot="pagination" v-bind="forwarded" :itemsPerPage="pageSize"
-    :class="cn('mx-auto flex w-full justify-center', props.class)">
-    <slot v-bind="slotProps" />
-  </PaginationRoot>
-</template>
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import PaginationContent from './PaginationContent.vue';
+import PaginationItem from './PaginationItem.vue';
+import PaginationLink from './PaginationLink.vue';
+import PaginationPrevious from './PaginationPrevious.vue';
+import PaginationNext from './PaginationNext.vue';
+import PaginationEllipsis from './PaginationEllipsis.vue';
+import { cn } from "@/lib/utils"
+import Select from '@/ui/select.vue';
+import SelectTrigger from '@/ui/SelectTrigger.vue';
+import SelectValue from '@/ui/SelectValue.vue';
+import SelectContent from '@/ui/SelectContent.vue';
+import SelectItem from '@/ui/SelectItem.vue';
+import { ref, computed, watch } from 'vue';
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes["class"];
+  /**
+   * Optional variant for custom pagination UIs (e.g. 'withPageSize')
+   */
+  variant?: string;
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+// --- withPageSize variant logic ---
+const pageSizeOptions = [5, 10, 25, 50, 100];
+const pageSize = ref(props.itemsPerPage ?? 10);
+const pageSizeString = computed({
+  get: () => String(pageSize.value),
+  set: (val: string) => {
+    const num = parseInt(val, 10);
+    if (pageSizeOptions.includes(num)) pageSize.value = num;
+  },
+});
+const currentPage = ref(props.page ?? 1);
+const totalItems = computed(() => props.total ?? 500);
+const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
+const startItem = computed(() => (currentPage.value - 1) * pageSize.value + 1);
+const endItem = computed(() => Math.min(currentPage.value * pageSize.value, totalItems.value));
+
+function handlePageSizeChange(val: string) {
+  pageSizeString.value = val;
+  currentPage.value = 1;
+}
+function handlePrevious() {
+  if (currentPage.value > 1) currentPage.value--;
+}
+function handleNext() {
+  if (currentPage.value < totalPages.value) currentPage.value++;
+}
+function setPage(page: number) {
+  if (page >= 1 && page <= totalPages.value) currentPage.value = page;
+}
+
+// Generate pagination items (pages and ellipsis)
+const paginationItems = computed(() => {
+  const items = [];
+  const siblingCount = 2;
+  const total = totalPages.value;
+  const page = currentPage.value;
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      items.push({ type: 'page', page: i, key: `page-${i}` });
+    }
+  } else {
+    items.push({ type: 'page', page: 1, key: 'page-1' });
+    if (page > 2 + siblingCount) {
+      items.push({ type: 'ellipsis', key: 'ellipsis-1' });
+    }
+    const start = Math.max(2, page - siblingCount);
+    const end = Math.min(total - 1, page + siblingCount);
+    for (let i = start; i <= end; i++) {
+      items.push({ type: 'page', page: i, key: `page-${i}` });
+    }
+    if (page < total - 1 - siblingCount) {
+      items.push({ type: 'ellipsis', key: 'ellipsis-2' });
+    }
+    items.push({ type: 'page', page: total, key: `page-${total}` });
+  }
+  return items;
+});
+
+watch(pageSize, () => {
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = totalPages.value || 1;
+  }
+});
+</script>
+
+<template>
+  <div v-if="variant === 'withPageSize'">
+    <div class="flex items-center">
+      <!-- Left side: Page size selector and results info -->
+      <div class="flex w-full items-center gap-6">
+        <Select v-model="pageSizeString" @update:modelValue="handlePageSizeChange">
+          <SelectTrigger class="w-20">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="5">5</SelectItem>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="25">25</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+            <SelectItem value="100">100</SelectItem>
+          </SelectContent>
+        </Select>
+        <div class="text-sm text-muted-foreground">
+          Results: {{ startItem }} - {{ endItem }} of {{ totalItems }}
+        </div>
+      </div>
+      <!-- Right side: Navigation using Pagination components -->
+      <PaginationRoot role="navigation" aria-label="pagination" data-slot="pagination" :itemsPerPage="pageSize"
+        :class="cn('mx-auto flex justify-center', props.class)">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious @click="handlePrevious" :style="{
+              pointerEvents: currentPage === 1 ? 'none' : 'auto',
+              opacity: currentPage === 1 ? 0.5 : 1,
+            }" />
+          </PaginationItem>
+          <template v-for="item in paginationItems" :key="item.key">
+            <PaginationItem v-if="item.type === 'page'" :value="item.page">
+              <PaginationLink :isActive="item.page === currentPage" @click="() => setPage(item.page)">{{
+                item.page }}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem v-else-if="item.type === 'ellipsis'">
+              <PaginationEllipsis />
+            </PaginationItem>
+          </template>
+          <PaginationItem>
+            <PaginationNext @click="handleNext" :style="{
+              pointerEvents: currentPage === totalPages ? 'none' : 'auto',
+              opacity: currentPage === totalPages ? 0.5 : 1,
+            }" />
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+    </div>
+  </div>
+  <PaginationRoot v-else v-slot="slotProps" data-slot="pagination" v-bind="forwarded" :itemsPerPage="pageSize"
+    :class="cn('mx-auto flex w-full justify-center', props.class)">
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
+</template>

package/src/shadcn/pagination/PaginationContent.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import type { PaginationListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationList } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <PaginationList
-    v-slot="slotProps"
-    data-slot="pagination-content"
-    v-bind="delegatedProps"
-    :class="cn('flex flex-row items-center gap-1', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </PaginationList>
-</template>
+<script setup lang="ts">
+import type { PaginationListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>

package/src/shadcn/pagination/PaginationEllipsis.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-import type { PaginationEllipsisProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MoreHorizontal } from "lucide-vue-next"
-import { PaginationEllipsis } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <PaginationEllipsis
-    data-slot="pagination-ellipsis"
-    v-bind="delegatedProps"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <MoreHorizontal class="size-4" />
-      <span class="sr-only">More pages</span>
-    </slot>
-  </PaginationEllipsis>
-</template>
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MoreHorizontal } from "lucide-vue-next"
+import { PaginationEllipsis } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>

package/src/shadcn/pagination/PaginationFirst.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { PaginationFirstProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/shadcn/button'
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronLeftIcon } from "lucide-vue-next"
-import { PaginationFirst, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/shadcn/button'
-
-const props = withDefaults(defineProps<PaginationFirstProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <PaginationFirst
-    data-slot="pagination-first"
-    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
-    v-bind="forwarded"
-  >
-    <slot>
-      <ChevronLeftIcon />
-      <span class="hidden sm:block">First</span>
-    </slot>
-  </PaginationFirst>
-</template>
+<script setup lang="ts">
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/shadcn/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/shadcn/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
+  </PaginationFirst>
+</template>

package/src/shadcn/pagination/PaginationItem.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import type { PaginationListItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/shadcn/button'
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationListItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/shadcn/button'
-
-const props = withDefaults(defineProps<PaginationListItemProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-  isActive?: boolean
-}>(), {
-  size: "icon",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
-</script>
-
-<template>
-  <PaginationListItem data-slot="pagination-item" v-bind="delegatedProps" :class="cn(
-    buttonVariants({
-      variant: isActive ? 'outline' : 'ghost',
-      size,
-    }),
-    'block w-auto',
-    props.class)">
-    <slot />
-  </PaginationListItem>
-</template>
+<script setup lang="ts">
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/shadcn/button'
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/shadcn/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+</script>
+
+<template>
+  <PaginationListItem data-slot="pagination-item" v-bind="delegatedProps" :class="cn(
+    buttonVariants({
+      variant: isActive ? 'outline' : 'ghost',
+      size,
+    }),
+    'block w-auto',
+    props.class)">
+    <slot />
+  </PaginationListItem>
+</template>