{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A semantic page navigation set with current-page feedback, generous targets, and small-screen labels.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/pagination.tsx",
      "content": "// Ballmac UI: Pagination. https://ui.ballmac.com/components/pagination\n// Based on shadcn/ui Pagination (MIT, Copyright (c) 2023 shadcn), adding current-page contrast and compact overflow behavior.\n\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype PaginationProps = React.ComponentProps<\"nav\"> & {\n  /** Accessible name of the navigation landmark. */\n  \"aria-label\"?: string\n}\nfunction Pagination({\n  className,\n  \"aria-label\": label,\n  ...props\n}: PaginationProps) {\n  const msg = useMessages()\n  label ??= msg(\"pagination.label\", \"Pagination\")\n  return (\n    <nav\n      data-slot=\"pagination\"\n      aria-label={label}\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex min-w-0 items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\nfunction PaginationItem(props: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\ntype PaginationLinkProps = React.ComponentProps<\"a\"> & {\n  /** Mark the current page for visual and screen reader feedback. */\n  isActive?: boolean\n}\nfunction PaginationLink({\n  className,\n  isActive = false,\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      data-slot=\"pagination-link\"\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        \"focus-visible:ring-ring/50 inline-flex size-9 items-center justify-center rounded-md border border-transparent text-sm transition-[color,background-color,border-color] duration-150 outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px]\",\n        isActive &&\n          \"border-border bg-accent font-semibold text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nfunction PaginationPrevious({\n  className,\n  children = \"Previous\",\n  ...props\n}: React.ComponentProps<\"a\">) {\n  const msg = useMessages()\n  return (\n    <a\n      data-slot=\"pagination-previous\"\n      aria-label={msg(\"pagination.previousPage\", \"Previous page\")}\n      className={cn(\n        \"focus-visible:ring-ring/50 inline-flex h-9 items-center gap-1 rounded-md px-2 text-sm outline-none hover:bg-accent focus-visible:ring-[3px]\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronLeft aria-hidden=\"true\" className=\"size-4 rtl:rotate-180\" />\n      <span className=\"hidden sm:inline\">{children}</span>\n    </a>\n  )\n}\nfunction PaginationNext({\n  className,\n  children = \"Next\",\n  ...props\n}: React.ComponentProps<\"a\">) {\n  const msg = useMessages()\n  return (\n    <a\n      data-slot=\"pagination-next\"\n      aria-label={msg(\"pagination.nextPage\", \"Next page\")}\n      className={cn(\n        \"focus-visible:ring-ring/50 inline-flex h-9 items-center gap-1 rounded-md px-2 text-sm outline-none hover:bg-accent focus-visible:ring-[3px]\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"hidden sm:inline\">{children}</span>\n      <ChevronRight aria-hidden=\"true\" className=\"size-4 rtl:rotate-180\" />\n    </a>\n  )\n}\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  const msg = useMessages()\n  return (\n    <span\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"flex size-9 items-center justify-center text-muted-foreground [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <MoreHorizontal aria-hidden=\"true\" />\n      <span className=\"sr-only\">{msg(\"pagination.morePages\", \"More pages\")}</span>\n    </span>\n  )\n}\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n  type PaginationProps,\n  type PaginationLinkProps,\n}\n",
      "type": "registry:ui",
      "target": "@components/ballmac/pagination.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "pages",
      "navigation",
      "links"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "A semantic page navigation set with current-page feedback, generous targets, and small-screen labels.",
      "whenToUse": [
        "Navigate a large result set by page",
        "Show a current page and neighboring destinations"
      ],
      "whenNotToUse": [
        "Use infinite scroll when discrete pages are unnecessary"
      ],
      "composesWith": [
        "button"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "moves between page links"
        },
        {
          "keys": "Enter",
          "action": "opens the focused page"
        }
      ],
      "customization": [
        "isActive: marks the current page"
      ]
    },
    "source": {
      "name": "shadcn/ui Pagination",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "pagination-demo",
      "pagination-states"
    ],
    "url": "https://ui.ballmac.com/components/pagination"
  },
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}