{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/pagination/pagination.component.ts",
      "content": "import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/** Page-window entry, kept for callers that build their own page list (`'ellipsis'` marks a gap). */\nexport type PaginationPage = number | 'ellipsis'\n\n/**\n * Angular port of UIPKGE Pagination. Like the React (radix-style) port these are\n * presentational parts: the caller owns the current page, computes the page window\n * and renders page buttons. `nav > ul > li` DOM, aria labels and class strings\n * mirror the React source 1:1. Use the attribute selectors on native elements\n * (`<nav ui-pagination>`, `<button ui-pagination-next>`), the asChild equivalent.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination, [ui-pagination]',\n  standalone: true,\n  host: {\n    '[attr.aria-label]': 'ariaLabel',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"pagination\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiPaginationComponent {\n  @Input('aria-label') ariaLabel = 'Pagination'\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex items-center gap-1', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-list, [ui-pagination-list]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"pagination-list\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiPaginationListComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex items-center gap-1', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-list-item, [ui-pagination-list-item]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"pagination-list-item\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiPaginationListItemComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('shrink-0', this.className)\n  }\n}\n\n/** Shared host for the four edge buttons: a native `<button type=\"button\">` with a default aria-label. */\nconst edgeHost = {\n  '[attr.type]': '\"button\"',\n  '[attr.aria-label]': 'ariaLabel',\n  '[attr.disabled]': 'disabled ? \"\" : null',\n  '[class]': 'className || null',\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-first, [ui-pagination-first]',\n  standalone: true,\n  host: edgeHost,\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-chevrons-left size-4\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m11 17-5-5 5-5\" />\n      <path d=\"m18 17-5-5 5-5\" /></svg\n  ></ng-content>`,\n})\nexport class UiPaginationFirstComponent {\n  @Input('aria-label') ariaLabel = 'Go to first page'\n  @Input({ transform: booleanAttribute }) disabled = false\n  @Input('class') className?: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-prev, [ui-pagination-prev]',\n  standalone: true,\n  host: edgeHost,\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-chevron-left size-4\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m15 18-6-6 6-6\" /></svg\n  ></ng-content>`,\n})\nexport class UiPaginationPrevComponent {\n  @Input('aria-label') ariaLabel = 'Go to previous page'\n  @Input({ transform: booleanAttribute }) disabled = false\n  @Input('class') className?: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-next, [ui-pagination-next]',\n  standalone: true,\n  host: edgeHost,\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-chevron-right size-4\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 18 6-6-6-6\" /></svg\n  ></ng-content>`,\n})\nexport class UiPaginationNextComponent {\n  @Input('aria-label') ariaLabel = 'Go to next page'\n  @Input({ transform: booleanAttribute }) disabled = false\n  @Input('class') className?: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-last, [ui-pagination-last]',\n  standalone: true,\n  host: edgeHost,\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-chevrons-right size-4\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 17 5-5-5-5\" />\n      <path d=\"m13 17 5-5-5-5\" /></svg\n  ></ng-content>`,\n})\nexport class UiPaginationLastComponent {\n  @Input('aria-label') ariaLabel = 'Go to last page'\n  @Input({ transform: booleanAttribute }) disabled = false\n  @Input('class') className?: string\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-pagination-ellipsis, [ui-pagination-ellipsis]',\n  standalone: true,\n  host: {\n    '[attr.aria-hidden]': '\"true\"',\n    '[class]': 'className || null',\n  },\n  template: `<ng-content\n    ><svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-ellipsis size-4\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"1\" />\n      <circle cx=\"19\" cy=\"12\" r=\"1\" />\n      <circle cx=\"5\" cy=\"12\" r=\"1\" /></svg\n  ></ng-content>`,\n})\nexport class UiPaginationEllipsisComponent {\n  @Input('class') className?: string\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/pagination/pagination.component.ts"
    },
    {
      "path": "packages/registry-angular/components/pagination/index.ts",
      "content": "export {\n  UiPaginationComponent,\n  UiPaginationListComponent,\n  UiPaginationListItemComponent,\n  UiPaginationEllipsisComponent,\n  UiPaginationFirstComponent,\n  UiPaginationPrevComponent,\n  UiPaginationNextComponent,\n  UiPaginationLastComponent,\n  type PaginationPage,\n} from './pagination.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/pagination/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Presentational page-number bar (nav > ul > li) with first/previous/next/last buttons and an ellipsis part. The caller owns the current page and renders the page window. Pair with a data-table or any paged list.",
  "categories": [
    "navigation"
  ]
}