{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "pagination",
  "description": "Real links to the pages of a list. Each page has a Button's look (ghost, or outline for pills with a rim); the current page takes the secondary fill and has no href. Previous and Next keep their label on a phone.",
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/button",
    "@dwellir/rune-icons"
  ],
  "files": [
    {
      "path": "components/ui/pagination.tsx",
      "content": "import type { ComponentProps } from 'react';\nimport { RuneArrowLeft, RuneArrowRight, RuneMore } from '@/components/brand/rune-icons';\nimport { type Button, buttonVariants } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nfunction Pagination({ className, ...props }: ComponentProps<'nav'>) {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  );\n}\n\n/* The pages wrap on a phone. text-sm sizes the icon-size page numbers, as upstream's button base. */\nfunction PaginationContent({ className, ...props }: ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn('flex flex-wrap items-center justify-center gap-2 text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem(props: ComponentProps<'li'>) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<ComponentProps<typeof Button>, 'size' | 'variant'> &\n  ComponentProps<'a'>;\n\n/*\n * A page, with a Button's look: ghost, or outline for pills with a rim. The\n * current page takes the secondary fill. Give it no href: it goes nowhere.\n */\nfunction PaginationLink({\n  className,\n  isActive,\n  variant = 'ghost',\n  size = 'icon',\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? 'page' : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(buttonVariants({ variant: isActive ? 'secondary' : variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\n/* Upstream hides the label on a phone; here it always shows, so it names the link. */\nfunction PaginationPrevious({ size = 'md', ...props }: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink size={size} {...props}>\n      <RuneArrowLeft size={24} aria-hidden=\"true\" />\n      Previous\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({ size = 'md', ...props }: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink size={size} {...props}>\n      Next\n      <RuneArrowRight size={24} aria-hidden=\"true\" />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, ...props }: ComponentProps<'span'>) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"pagination-ellipsis\"\n      className={cn('flex size-10 items-center justify-center', className)}\n      {...props}\n    >\n      <RuneMore className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}