{"name":"pagination","title":"Pagination","description":"Pagination with page navigation, next and previous links.","installCommand":"bunx marko-ui add pagination -y","usageTags":"<Pagination>","importSnippet":"import Pagination from \"@/components/ui/pagination/pagination.marko\";\nimport PaginationContent from \"@/components/ui/pagination/content.marko\";\nimport PaginationItem from \"@/components/ui/pagination/item.marko\";\nimport PaginationLink from \"@/components/ui/pagination/link.marko\";\nimport PaginationPrevious from \"@/components/ui/pagination/previous.marko\";\nimport PaginationNext from \"@/components/ui/pagination/next.marko\";\nimport PaginationEllipsis from \"@/components/ui/pagination/ellipsis.marko\";","usageSnippet":"<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href=\"#\"/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\" isActive>2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">3</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href=\"#\"/>\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>","tags":["Pagination","PaginationContent","PaginationEllipsis","PaginationItem","PaginationLink","PaginationNext","PaginationPrevious"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["`Pagination` renders `role=\"navigation\"` with `aria-label=\"pagination\"`.","`PaginationLink` gets `aria-current=\"page\"` and `data-active` when `isActive` is set; `data-slot=\"pagination-link\"` on every link.","`PaginationEllipsis` is `aria-hidden` with a visually-hidden \"More pages\" label for screen readers.","`PaginationPrevious`/`PaginationNext` carry `aria-label=\"Go to previous page\"` / `\"Go to next page\"`; pass `disabled`/`aria-disabled` yourself when at the first/last page — this is a presentational kit, not a machine, so there is no built-in disabled-state derivation.","RTL: set `dir=\"rtl\"` on `Pagination` — the chevron icons carry `mu-rtl-flip` and mirror automatically. Pass a `text` prop to `PaginationPrevious`/`PaginationNext` to translate their labels (added for RTL locales, e.g. \"السابق\"/\"التالي\" — see upstream's Changelog)."],"examples":[{"id":"pagination-demo","title":"Default","source":"import Pagination from \"@marko-ui/shadcn/ui/pagination/pagination.marko\";\nimport PaginationContent from \"@marko-ui/shadcn/ui/pagination/content.marko\";\nimport PaginationEllipsis from \"@marko-ui/shadcn/ui/pagination/ellipsis.marko\";\nimport PaginationItem from \"@marko-ui/shadcn/ui/pagination/item.marko\";\nimport PaginationLink from \"@marko-ui/shadcn/ui/pagination/link.marko\";\nimport PaginationNext from \"@marko-ui/shadcn/ui/pagination/next.marko\";\nimport PaginationPrevious from \"@marko-ui/shadcn/ui/pagination/previous.marko\";\n\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href=\"#\"/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\" isActive>2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">3</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href=\"#\"/>\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>","description":"Compose `Pagination` from its parts: `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationEllipsis`, `PaginationPrevious`/`PaginationNext`."},{"id":"pagination-simple","title":"Simple","source":"import Pagination from \"@marko-ui/shadcn/ui/pagination/pagination.marko\";\nimport PaginationContent from \"@marko-ui/shadcn/ui/pagination/content.marko\";\nimport PaginationItem from \"@marko-ui/shadcn/ui/pagination/item.marko\";\nimport PaginationLink from \"@marko-ui/shadcn/ui/pagination/link.marko\";\n\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationLink href=\"#\">1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\" isActive>2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">3</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">4</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">5</PaginationLink>\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>","description":"A simple pagination with only page numbers."},{"id":"pagination-icons-only","title":"Icons only","source":"import Pagination from \"@marko-ui/shadcn/ui/pagination/pagination.marko\";\nimport PaginationContent from \"@marko-ui/shadcn/ui/pagination/content.marko\";\nimport PaginationItem from \"@marko-ui/shadcn/ui/pagination/item.marko\";\nimport PaginationNext from \"@marko-ui/shadcn/ui/pagination/next.marko\";\nimport PaginationPrevious from \"@marko-ui/shadcn/ui/pagination/previous.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport Select from \"@marko-ui/shadcn/ui/select/select.marko\";\n\nstatic const rowsPerPage = [\n  { value: \"10\", label: \"10\" },\n  { value: \"25\", label: \"25\" },\n  { value: \"50\", label: \"50\" },\n  { value: \"100\", label: \"100\" },\n];\n\n<div class=\"flex items-center justify-between gap-4\">\n  <Field orientation=\"horizontal\" class=\"w-fit\">\n    <FieldLabel for=\"pagination-icons-only-rows\">Rows per page</FieldLabel>\n    <Select id=\"pagination-icons-only-rows\" items=rowsPerPage defaultValue=[\"25\"] class=\"w-20\"/>\n  </Field>\n  <Pagination class=\"mx-0 w-auto\">\n    <PaginationContent>\n      <PaginationItem>\n        <PaginationPrevious href=\"#\"/>\n      </PaginationItem>\n      <PaginationItem>\n        <PaginationNext href=\"#\"/>\n      </PaginationItem>\n    </PaginationContent>\n  </Pagination>\n</div>","description":"Use just the previous and next buttons without page numbers. This is useful for data tables with a rows-per-page selector."},{"id":"pagination-rtl","title":"RTL","source":"import Pagination from \"@marko-ui/shadcn/ui/pagination/pagination.marko\";\nimport PaginationContent from \"@marko-ui/shadcn/ui/pagination/content.marko\";\nimport PaginationEllipsis from \"@marko-ui/shadcn/ui/pagination/ellipsis.marko\";\nimport PaginationItem from \"@marko-ui/shadcn/ui/pagination/item.marko\";\nimport PaginationLink from \"@marko-ui/shadcn/ui/pagination/link.marko\";\nimport PaginationNext from \"@marko-ui/shadcn/ui/pagination/next.marko\";\nimport PaginationPrevious from \"@marko-ui/shadcn/ui/pagination/previous.marko\";\n\nstatic const ARABIC_NUMERALS = [\"٠\", \"١\", \"٢\", \"٣\", \"٤\", \"٥\", \"٦\", \"٧\", \"٨\", \"٩\"];\nstatic function toArabicNumerals(num: number): string {\n  return num.toString().split(\"\").map((digit) => ARABIC_NUMERALS[Number.parseInt(digit, 10)]).join(\"\");\n}\n\n<Pagination dir=\"rtl\">\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href=\"#\" text=\"السابق\"/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">${toArabicNumerals(1)}</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\" isActive>${toArabicNumerals(2)}</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">${toArabicNumerals(3)}</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis/>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href=\"#\" text=\"التالي\"/>\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>","description":"Pass `dir=\"rtl\"` on `Pagination` — the previous/next chevrons carry `mu-rtl-flip` and mirror automatically. Pair with the `text` prop on `PaginationPrevious`/`PaginationNext` to translate the labels."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"nav","subcomponents":[{"name":"content","props":[],"nativeAttributes":"ul"},{"name":"ellipsis","props":[],"nativeAttributes":"span"},{"name":"item","props":[],"nativeAttributes":"li"},{"name":"link","props":[{"name":"isActive","type":"boolean","required":false},{"name":"size","type":"'default' | 'sm' | 'xs' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | null | undefined","required":false}],"nativeAttributes":"a"},{"name":"next","props":[{"name":"text","type":"string","required":false}],"nativeAttributes":"a"},{"name":"previous","props":[{"name":"text","type":"string","required":false}],"nativeAttributes":"a"}],"composition":"```text\nPagination\n└── PaginationContent\n    ├── PaginationItem\n    │   └── PaginationPrevious\n    ├── PaginationItem\n    │   └── PaginationLink\n    ├── PaginationItem\n    │   └── PaginationEllipsis\n    └── PaginationItem\n        └── PaginationNext\n```"}