{
  "name": "pagination",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "reka-ui"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "ui/pagination/Pagination.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationRootEmits, PaginationRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<PaginationRootProps & {\n  class?: HTMLAttributes[\"class\"]\n}>()\nconst emits = defineEmits<PaginationRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PaginationRoot\n    v-slot=\"slotProps\"\n    data-slot=\"pagination\"\n    v-bind=\"forwarded\"\n    :class=\"cn('cn-pagination mx-auto flex w-full justify-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationRoot>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationContent.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationListProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationList } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<PaginationListProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <PaginationList\n    v-slot=\"slotProps\"\n    data-slot=\"pagination-content\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-pagination-content flex items-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationList>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationEllipsis.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationEllipsisProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationEllipsis } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport IconPlaceholder from \"@/components/docs/icon-placeholder/IconPlaceholder.vue\"\n\nconst props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <PaginationEllipsis\n    data-slot=\"pagination-ellipsis\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-pagination-ellipsis flex items-center justify-center', props.class)\"\n  >\n    <slot>\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span class=\"sr-only\">More pages</span>\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationFirst.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationFirstProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationFirst, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationFirstProps & {\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationFirst\n    data-slot=\"pagination-first\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'cn-pagination-first', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <IconPlaceholder\n        lucide=\"ChevronsLeftIcon\"\n        tabler=\"IconChevronsLeft\"\n        hugeicons=\"ArrowLeftDoubleIcon\"\n        phosphor=\"CaretDoubleLeftIcon\"\n        remixicon=\"RiArrowLeftDoubleLine\"\n        data-icon=\"inline-start\"\n      />\n      <span class=\"cn-pagination-first-text hidden sm:block\">First</span>\n    </slot>\n  </PaginationFirst>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationItem.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationListItemProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationListItem } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationListItemProps & {\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n  isActive?: boolean\n}>(), {\n  size: \"icon\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\", \"isActive\")\n</script>\n\n<template>\n  <PaginationListItem\n    data-slot=\"pagination-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({\n        variant: isActive ? 'outline' : 'ghost',\n        size,\n      }),\n      props.class)\"\n  >\n    <slot />\n  </PaginationListItem>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationLast.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationLastProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationLast, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationLastProps & {\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationLast\n    data-slot=\"pagination-last\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'cn-pagination-last', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <span class=\"cn-pagination-last-text hidden sm:block\">Last</span>\n      <IconPlaceholder\n        lucide=\"ChevronsRightIcon\"\n        tabler=\"IconChevronsRight\"\n        hugeicons=\"ArrowRightDoubleIcon\"\n        phosphor=\"CaretDoubleRightIcon\"\n        remixicon=\"RiArrowRightDoubleLine\"\n        data-icon=\"inline-end\"\n      />\n    </slot>\n  </PaginationLast>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationLink.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<{\n  href?: string\n  size?: ButtonVariants[\"size\"]\n  isActive?: boolean\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  size: \"icon\",\n  isActive: false,\n})\n</script>\n\n<template>\n  <a\n    :href=\"href\"\n    data-slot=\"pagination-link\"\n    :data-active=\"isActive ? '' : undefined\"\n    :aria-current=\"isActive ? 'page' : undefined\"\n    :class=\"cn(\n      buttonVariants({\n        variant: isActive ? 'outline' : 'ghost',\n        size,\n      }),\n      'cn-pagination-link',\n      props.class,\n    )\"\n  >\n    <slot />\n  </a>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationNext.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationNextProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationNext, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport IconPlaceholder from \"@/components/docs/icon-placeholder/IconPlaceholder.vue\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationNextProps & {\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationNext\n    data-slot=\"pagination-next\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'cn-pagination-next', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <span class=\"cn-pagination-next-text hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        data-icon=\"inline-end\"\n        class=\"cn-rtl-flip\"\n      />\n    </slot>\n  </PaginationNext>\n</template>\n"
    },
    {
      "path": "ui/pagination/PaginationPrevious.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { PaginationPrevProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationPrev, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport IconPlaceholder from \"@/components/docs/icon-placeholder/IconPlaceholder.vue\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationPrevProps & {\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationPrev\n    data-slot=\"pagination-previous\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size }), 'cn-pagination-previous', props.class)\"\n    v-bind=\"forwarded\"\n  >\n    <slot>\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        data-icon=\"inline-start\"\n        class=\"cn-rtl-flip\"\n      />\n      <span class=\"cn-pagination-previous-text hidden sm:block\">Previous</span>\n    </slot>\n  </PaginationPrev>\n</template>\n"
    },
    {
      "path": "ui/pagination/index.ts",
      "type": "registry:ui",
      "content": "export { default as Pagination } from \"./Pagination.vue\"\nexport { default as PaginationContent } from \"./PaginationContent.vue\"\nexport { default as PaginationEllipsis } from \"./PaginationEllipsis.vue\"\nexport { default as PaginationFirst } from \"./PaginationFirst.vue\"\nexport { default as PaginationItem } from \"./PaginationItem.vue\"\nexport { default as PaginationLast } from \"./PaginationLast.vue\"\nexport { default as PaginationLink } from \"./PaginationLink.vue\"\nexport { default as PaginationNext } from \"./PaginationNext.vue\"\nexport { default as PaginationPrevious } from \"./PaginationPrevious.vue\"\n"
    }
  ]
}