{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "pagination",
    "type": "registry:component",
    "title": "Pagination",
    "description": "Page navigation with previous and next controls, a current page and an ellipsis for skipped ranges.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Navigation",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/pagination.html",
            "type": "registry:file",
            "target": "components/pagination.html",
            "content": "<!-- Pagination\n     Mark the current page with aria-current=\"page\". Disable prev or next with\n     the disabled attribute. Use .dp-page-ellipsis to skip a range. -->\n\n<nav class=\"dp-pagination\" aria-label=\"Pagination\">\n  <button class=\"dp-page\" type=\"button\" disabled aria-label=\"Previous page\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"m15 18-6-6 6-6\"></path>\n    </svg>\n  </button>\n  <a class=\"dp-page\" href=\"#\" aria-current=\"page\">1</a>\n  <a class=\"dp-page\" href=\"#\">2</a>\n  <a class=\"dp-page\" href=\"#\">3</a>\n  <span class=\"dp-page-ellipsis\" aria-hidden=\"true\">&hellip;</span>\n  <a class=\"dp-page\" href=\"#\">24</a>\n  <button class=\"dp-page\" type=\"button\" aria-label=\"Next page\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"m9 18 6-6-6-6\"></path>\n    </svg>\n  </button>\n</nav>\n"
        },
        {
            "path": "components/pagination.css",
            "type": "registry:file",
            "target": "components/pagination.css",
            "content": "/* Pagination\n   Page navigation. Mark the current page with aria-current=\"page\". Disable the\n   previous or next control with the disabled attribute (on a button) or\n   aria-disabled (on a link). Colour and type from tokens.css. */\n\n.dp-pagination {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-1);\n}\n\n.dp-page {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.25rem;\n  height: 2.25rem;\n  padding: 0 var(--dp-space-2);\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-semibold);\n  color: var(--dp-text-muted);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--dp-radius-xs);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background-color var(--dp-transition), color var(--dp-transition),\n    border-color var(--dp-transition);\n}\n\n.dp-page svg {\n  width: 1.1em;\n  height: 1.1em;\n}\n\n.dp-page:hover {\n  background: var(--dp-surface-soft);\n  color: var(--dp-navy);\n}\n\n.dp-page[aria-current=\"page\"] {\n  background: var(--dp-primary-bg);\n  border-color: var(--dp-primary-border);\n  color: var(--dp-white);\n}\n\n.dp-page:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-page[disabled],\n.dp-page[aria-disabled=\"true\"] {\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.dp-page-ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.25rem;\n  height: 2.25rem;\n  color: var(--dp-text-subtle);\n}\n"
        }
    ]
}