@oneclick.dev/cms-kit 0.0.2 → 0.0.3

package/components/ui/menubar/MenubarCheckboxItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Check } from 'lucide-vue-next'
-import {
-  MenubarCheckboxItem,
-  type MenubarCheckboxItemEmits,
-  type MenubarCheckboxItemProps,
-  MenubarItemIndicator,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<MenubarCheckboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <MenubarCheckboxItem
-    data-slot="menubar-checkbox-item"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <MenubarItemIndicator>
-        <Check class="size-4" />
-      </MenubarItemIndicator>
-    </span>
-    <slot />
-  </MenubarCheckboxItem>
-</template>

package/components/ui/menubar/MenubarContent.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  MenubarContent,
-  type MenubarContentProps,
-  MenubarPortal,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(
-  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    align: 'start',
-    alignOffset: -4,
-    sideOffset: 8,
-  },
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <MenubarPortal>
-    <MenubarContent
-      data-slot="menubar-content"
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </MenubarContent>
-  </MenubarPortal>
-</template>

package/components/ui/menubar/MenubarGroup.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { MenubarGroup, type MenubarGroupProps } from 'reka-ui'
-
-const props = defineProps<MenubarGroupProps>()
-</script>
-
-<template>
-  <MenubarGroup
-    data-slot="menubar-group"
-    v-bind="props"
-  >
-    <slot />
-  </MenubarGroup>
-</template>

package/components/ui/menubar/MenubarItem.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import {
-  MenubarItem,
-  type MenubarItemEmits,
-  type MenubarItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-
-const props = defineProps<MenubarItemProps & {
-  class?: HTMLAttributes['class']
-  inset?: boolean
-  variant?: 'default' | 'destructive'
-}>()
-
-const emits = defineEmits<MenubarItemEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <MenubarItem
-    data-slot="menubar-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <slot />
-  </MenubarItem>
-</template>

package/components/ui/menubar/MenubarLabel.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { MenubarLabel, type MenubarLabelProps } from 'reka-ui'
-
-const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-const delegatedProps = reactiveOmit(props, 'class', 'inset')
-</script>
-
-<template>
-  <MenubarLabel
-    :data-inset="inset ? '' : undefined"
-    v-bind="delegatedProps"
-    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
-  >
-    <slot />
-  </MenubarLabel>
-</template>

package/components/ui/menubar/MenubarMenu.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { MenubarMenu, type MenubarMenuProps } from 'reka-ui'
-
-const props = defineProps<MenubarMenuProps>()
-</script>
-
-<template>
-  <MenubarMenu
-    data-slot="menubar-menu"
-    v-bind="props"
-  >
-    <slot />
-  </MenubarMenu>
-</template>

package/components/ui/menubar/MenubarRadioGroup.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import {
-  MenubarRadioGroup,
-  type MenubarRadioGroupEmits,
-  type MenubarRadioGroupProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-
-const props = defineProps<MenubarRadioGroupProps>()
-const emits = defineEmits<MenubarRadioGroupEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <MenubarRadioGroup
-    data-slot="menubar-radio-group"
-    v-bind="forwarded"
-  >
-    <slot />
-  </MenubarRadioGroup>
-</template>

package/components/ui/menubar/MenubarRadioItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Circle } from 'lucide-vue-next'
-import {
-  MenubarItemIndicator,
-  MenubarRadioItem,
-  type MenubarRadioItemEmits,
-  type MenubarRadioItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<MenubarRadioItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <MenubarRadioItem
-    data-slot="menubar-radio-item"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <MenubarItemIndicator>
-        <Circle class="size-2 fill-current" />
-      </MenubarItemIndicator>
-    </span>
-    <slot />
-  </MenubarRadioItem>
-</template>

package/components/ui/menubar/MenubarSeparator.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <MenubarSeparator
-    data-slot="menubar-separator"
-    :class=" cn('bg-border -mx-1 my-1 h-px', props.class)"
-    v-bind="forwardedProps"
-  />
-</template>

package/components/ui/menubar/MenubarShortcut.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <span
-    data-slot="menubar-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
-    <slot />
-  </span>
-</template>

package/components/ui/menubar/MenubarSub.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'reka-ui'
-
-interface MenubarSubRootProps {
-  defaultOpen?: boolean
-  open?: boolean
-}
-
-const props = defineProps<MenubarSubRootProps>()
-const emits = defineEmits<MenubarSubEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <MenubarSub
-    data-slot="menubar-sub"
-    v-bind="forwarded"
-  >
-    <slot />
-  </MenubarSub>
-</template>

package/components/ui/menubar/MenubarSubContent.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  MenubarPortal,
-  MenubarSubContent,
-  type MenubarSubContentEmits,
-  type MenubarSubContentProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<MenubarSubContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <MenubarPortal>
-    <MenubarSubContent
-      data-slot="menubar-sub-content"
-      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 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </MenubarSubContent>
-  </MenubarPortal>
-</template>

package/components/ui/menubar/MenubarSubTrigger.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { reactiveOmit } from '@vueuse/core'
-import { ChevronRight } from 'lucide-vue-next'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'reka-ui'
-
-const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'inset')
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <MenubarSubTrigger
-    data-slot="menubar-sub-trigger"
-    :data-inset="inset ? '' : undefined"
-    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 items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto size-4" />
-  </MenubarSubTrigger>
-</template>

package/components/ui/menubar/MenubarTrigger.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <MenubarTrigger
-    data-slot="menubar-trigger"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </MenubarTrigger>
-</template>

package/components/ui/menubar/index.ts

@@ -1,15 +0,0 @@
-export { default as Menubar } from './Menubar.vue'
-export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
-export { default as MenubarContent } from './MenubarContent.vue'
-export { default as MenubarGroup } from './MenubarGroup.vue'
-export { default as MenubarItem } from './MenubarItem.vue'
-export { default as MenubarLabel } from './MenubarLabel.vue'
-export { default as MenubarMenu } from './MenubarMenu.vue'
-export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
-export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
-export { default as MenubarSeparator } from './MenubarSeparator.vue'
-export { default as MenubarShortcut } from './MenubarShortcut.vue'
-export { default as MenubarSub } from './MenubarSub.vue'
-export { default as MenubarSubContent } from './MenubarSubContent.vue'
-export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
-export { default as MenubarTrigger } from './MenubarTrigger.vue'

package/components/ui/number-field/NumberField.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<NumberFieldRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
-    <slot />
-  </NumberFieldRoot>
-</template>

package/components/ui/number-field/NumberFieldContent.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
-    <slot />
-  </div>
-</template>

package/components/ui/number-field/NumberFieldDecrement.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
-    <slot>
-      <Minus class="size-4" />
-    </slot>
-  </NumberFieldDecrement>
-</template>

package/components/ui/number-field/NumberFieldIncrement.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
-    <slot>
-      <Plus class="size-4" />
-    </slot>
-  </NumberFieldIncrement>
-</template>

package/components/ui/number-field/NumberFieldInput.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { NumberFieldInput } from 'reka-ui'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <NumberFieldInput
-    data-slot="input"
-    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center 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', props.class)"
-  />
-</template>

package/components/ui/number-field/index.ts

@@ -1,5 +0,0 @@
-export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldContent } from './NumberFieldContent.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'

package/components/ui/pagination/PaginationEllipsis.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { MoreHorizontal } from 'lucide-vue-next'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
-    <slot>
-      <MoreHorizontal />
-    </slot>
-  </PaginationEllipsis>
-</template>

package/components/ui/pagination/PaginationFirst.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  Button,
-} from '../button'
-import { ChevronsLeft } from 'lucide-vue-next'
-import { PaginationFirst, type PaginationFirstProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
-  asChild: true,
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
-      <slot>
-        <ChevronsLeft class="size-4" />
-      </slot>
-    </Button>
-  </PaginationFirst>
-</template>

package/components/ui/pagination/PaginationLast.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  Button,
-} from '../button'
-import { ChevronsRight } from 'lucide-vue-next'
-import { PaginationLast, type PaginationLastProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
-  asChild: true,
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
-      <slot>
-        <ChevronsRight class="size-4" />
-      </slot>
-    </Button>
-  </PaginationLast>
-</template>

package/components/ui/pagination/PaginationNext.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  Button,
-} from '../button'
-import { ChevronRight } from 'lucide-vue-next'
-import { PaginationNext, type PaginationNextProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
-  asChild: true,
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
-      <slot>
-        <ChevronRight class="size-4" />
-      </slot>
-    </Button>
-  </PaginationNext>
-</template>