{
  "name": "Pagination",
  "category": "Navigation",
  "subcategory": null,
  "description": "Page number bar with prev/next and configurable ranges.",
  "thumbnail": "/preview-cards/pagination.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Pagination/Pagination.razor",
    "UI/Pagination/PaginationContent.razor",
    "UI/Pagination/PaginationEllipsis.razor",
    "UI/Pagination/PaginationItem.razor",
    "UI/Pagination/PaginationNext.razor",
    "UI/Pagination/PaginationPrevious.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-background",
    "--color-input",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Pagination",
    "category": "Navigation",
    "subcategory": null,
    "description": "Page number bar with prev/next and configurable ranges.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Pagination/Pagination.razor",
      "UI/Pagination/PaginationContent.razor",
      "UI/Pagination/PaginationEllipsis.razor",
      "UI/Pagination/PaginationItem.razor",
      "UI/Pagination/PaginationNext.razor",
      "UI/Pagination/PaginationPrevious.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-background",
      "--color-input",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Pagination>\n    <PaginationContent>\n        <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\"\n                           Disabled=\"@(_currentPage <= 1)\" />\n        @for (int i = 1; i <= _totalPages; i++)\n        {\n            var page = i;\n            <PaginationItem IsActive=\"@(page == _currentPage)\"\n                           OnClick=\"@(() => GoToPage(page))\">\n                @page\n            </PaginationItem>\n        }\n        <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\"\n                       Disabled=\"@(_currentPage >= _totalPages)\" />\n    </PaginationContent>\n</Pagination>\n\n@code {\n    private int _currentPage = 1;\n    private int _totalPages = 5;\n\n    private void GoToPage(int page)\n    {\n        if (page >= 1 && page <= _totalPages)\n            _currentPage = page;\n    }\n}"
      },
      {
        "title": "Compact",
        "code": "<Pagination>\n    <PaginationContent>\n        <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\" Disabled=\"@(_currentPage <= 1)\" />\n        <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\" Class=\"px-3 flex items-center\">@_currentPage / @_totalPages</Lumeo.Text>\n        <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\" Disabled=\"@(_currentPage >= _totalPages)\" />\n    </PaginationContent>\n</Pagination>"
      },
      {
        "title": "Size",
        "code": "<Segmented @bind-Value=\"_paginationSize\">\n    <SegmentedItem Value=\"sm\">Sm</SegmentedItem>\n    <SegmentedItem Value=\"md\">Md</SegmentedItem>\n    <SegmentedItem Value=\"lg\">Lg</SegmentedItem>\n</Segmented>\n\n<Pagination>\n    <PaginationContent>\n        <PaginationPrevious OnClick=\"@(() => GoToPage(_currentPage - 1))\" Disabled=\"@(_currentPage <= 1)\" />\n        @for (int i = 1; i <= 5; i++)\n        {\n            var page = i;\n            <PaginationItem IsActive=\"@(page == _currentPage)\"\n                            OnClick=\"@(() => GoToPage(page))\"\n                            Class=\"@(_paginationSize switch { \\\"sm\\\" => \\\"h-7 w-7 text-xs\\\", \\\"lg\\\" => \\\"h-11 w-11 text-base\\\", _ => \\\"\\\"  })\">\n                @page\n            </PaginationItem>\n        }\n        <PaginationNext OnClick=\"@(() => GoToPage(_currentPage + 1))\" Disabled=\"@(_currentPage >= 5)\" />\n    </PaginationContent>\n</Pagination>\n\n@code {\n    private string _paginationSize = \"md\";\n    private int _currentPage = 1;\n}"
      },
      {
        "title": "With Ellipsis",
        "code": "<Pagination>\n    <PaginationContent>\n        <PaginationPrevious OnClick=\"...\" />\n        <PaginationItem IsActive=\"true\">1</PaginationItem>\n        <PaginationItem>2</PaginationItem>\n        <PaginationItem>3</PaginationItem>\n        <PaginationEllipsis />\n        <PaginationItem>8</PaginationItem>\n        <PaginationItem>9</PaginationItem>\n        <PaginationItem>10</PaginationItem>\n        <PaginationNext OnClick=\"...\" />\n    </PaginationContent>\n</Pagination>"
      }
    ],
    "subComponents": {
      "PaginationContent": {
        "componentName": "PaginationContent",
        "fileName": "PaginationContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "PaginationEllipsis": {
        "componentName": "PaginationEllipsis",
        "fileName": "PaginationEllipsis.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "PaginationItem": {
        "componentName": "PaginationItem",
        "fileName": "PaginationItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsActive",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnClick",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "PaginationNext": {
        "componentName": "PaginationNext",
        "fileName": "PaginationNext.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "PaginationPrevious": {
        "componentName": "PaginationPrevious",
        "fileName": "PaginationPrevious.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "pagination",
  "docsUrl": "https://lumeo.nativ.sh/components/pagination",
  "sourceUrl": [
    {
      "file": "UI/Pagination/Pagination.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/Pagination.razor"
    },
    {
      "file": "UI/Pagination/PaginationContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/PaginationContent.razor"
    },
    {
      "file": "UI/Pagination/PaginationEllipsis.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/PaginationEllipsis.razor"
    },
    {
      "file": "UI/Pagination/PaginationItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/PaginationItem.razor"
    },
    {
      "file": "UI/Pagination/PaginationNext.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/PaginationNext.razor"
    },
    {
      "file": "UI/Pagination/PaginationPrevious.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Pagination/PaginationPrevious.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Pagination/Pagination.razor",
      "content": "@namespace Lumeo\n\n<nav role=\"navigation\" aria-label=\"pagination\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</nav>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"mx-auto flex w-full justify-center {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Pagination/PaginationContent.razor",
      "content": "@namespace Lumeo\n\n<ul class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</ul>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-row items-center gap-1 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Pagination/PaginationEllipsis.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n<li>\n    <span class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        <Blazicon Svg=\"Lucide.Ellipsis\" class=\"h-4 w-4\" />\n        <span class=\"sr-only\">@L[\"Pagination.MorePages\"]</span>\n    </span>\n</li>\n\n@code {\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex h-9 w-9 items-center justify-center {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Pagination/PaginationItem.razor",
      "content": "@namespace Lumeo\n\n<li>\n    <button class=\"@CssClass\" @onclick=\"OnClick\" @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </button>\n</li>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool IsActive { get; set; }\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 h-11 w-11 sm:h-9 sm:w-9 {(IsActive ? \"border border-input bg-background shadow-sm\" : \"hover:bg-accent hover:text-accent-foreground\")} {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Pagination/PaginationNext.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n<li>\n    <button class=\"@CssClass\" @onclick=\"OnClick\" disabled=\"@Disabled\" @attributes=\"AdditionalAttributes\">\n        <span>@L[\"Pagination.Next\"]</span>\n        <Blazicon Svg=\"Lucide.ChevronRight\" class=\"h-4 w-4 [dir=rtl]:rotate-180\" />\n    </button>\n</li>\n\n@code {\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-11 sm:h-9 px-3 disabled:pointer-events-none disabled:opacity-50 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Pagination/PaginationPrevious.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n<li>\n    <button class=\"@CssClass\" @onclick=\"OnClick\" disabled=\"@Disabled\" @attributes=\"AdditionalAttributes\">\n        <Blazicon Svg=\"Lucide.ChevronLeft\" class=\"h-4 w-4 [dir=rtl]:rotate-180\" />\n        <span>@L[\"Pagination.Previous\"]</span>\n    </button>\n</li>\n\n@code {\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-11 sm:h-9 px-3 disabled:pointer-events-none disabled:opacity-50 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Pagination",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "PaginationContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "PaginationItem",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ILumeoLocalizer",
      "namespace": "Lumeo.Services.Localization"
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "PaginationContent",
      "reason": "sub-component"
    },
    {
      "name": "PaginationEllipsis",
      "reason": "sub-component"
    },
    {
      "name": "PaginationItem",
      "reason": "sub-component"
    },
    {
      "name": "PaginationNext",
      "reason": "sub-component"
    },
    {
      "name": "PaginationPrevious",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/DataGrid/DataGridTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridVirtualizedServerModeTests.cs",
    "tests/Lumeo.Tests/Components/Pagination/PaginationTests.cs"
  ],
  "mdSummary": "# Pagination\n\nPage number bar with prev/next and configurable ranges.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/pagination\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Pagination | ChildContent | `RenderFragment?` | `` |  |\n| Pagination | Class | `string?` | `` |  |\n| Pagination | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| PaginationContent | ChildContent | `RenderFragment?` | `` |  |\n| PaginationContent | Class | `string?` | `` |  |\n| PaginationContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| PaginationEllipsis | Class | `string?` | `` |  |\n| PaginationEllipsis | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| PaginationItem | ChildContent | `RenderFragment?` | `` |  |\n| PaginationItem | IsActive | `bool` | `` |  |\n| PaginationItem | OnClick | `EventCallback` | `` |  |\n| PaginationItem | Class | `string?` | `` |  |\n| PaginationItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| PaginationNext | OnClick | `EventCallback` | `` |  |\n| PaginationNext | Disabled | `bool` | `` |  |\n| PaginationNext | Class | `string?` | `` |  |\n| PaginationNext | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| PaginationPrevious | OnClick | `EventCallback` | `` |  |\n| PaginationPrevious | Disabled | `bool` | `` |  |\n| PaginationPrevious | Class | `string?` | `` |  |\n| PaginationPrevious | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Pagination) — RenderFragment slot\n- `ChildContent` (PaginationContent) — RenderFragment slot\n- `ChildContent` (PaginationItem) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationNext`, `PaginationPrevious`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- `ILumeoLocalizer` (Lumeo.Services.Localization)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Pagination />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-background`, `--color-input`, `--color-ring`, `--radius`\n\n## Files\n- `UI/Pagination/Pagination.razor`\n- `UI/Pagination/PaginationContent.razor`\n- `UI/Pagination/PaginationEllipsis.razor`\n- `UI/Pagination/PaginationItem.razor`\n- `UI/Pagination/PaginationNext.razor`\n- `UI/Pagination/PaginationPrevious.razor`\n"
}