{
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Accessible page-based navigation with active links, previous and next controls, and skipped ranges.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/button"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0",
    "lucide-react@1.18.0"
  ],
  "files": [
    {
      "path": "src/components/ui/pagination.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { type Button, buttonVariants } from \"@/components/ui/button\";\n\nexport function Pagination({\n  className,\n  ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      data-slot=\"pagination\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      data-slot=\"pagination-content\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem({\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n  size?: React.ComponentProps<typeof Button>[\"size\"];\n} & useRender.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  render,\n  ...props\n}: PaginationLinkProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-current\": isActive ? (\"page\" as const) : undefined,\n    className: render\n      ? className\n      : cn(\n          buttonVariants({\n            size,\n            variant: isActive ? \"outline\" : \"ghost\",\n          }),\n          className,\n        ),\n    \"data-active\": isActive,\n    \"data-slot\": \"pagination-link\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <ChevronLeftIcon className=\"sm:-ms-1\" />\n      <span className=\"max-sm:hidden\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <span className=\"max-sm:hidden\">Next</span>\n      <ChevronRightIcon className=\"sm:-me-1\" />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"flex min-w-7 justify-center\", className)}\n      data-slot=\"pagination-ellipsis\"\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-5 sm:size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"
    }
  ],
  "categories": [
    "navigation"
  ],
  "docs": "# Pagination\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Pagination for finite, page-based navigation when people need to move between known result pages.\n\n## Import\n\n`import { Pagination } from \"@/components/ui/pagination\";`\n\n`import { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from \"@/components/ui/pagination\";`\n\n`PaginationLink` unterstuetzt `isActive`, `size` und `render`.\n\n## Public API\n\n- Compose `Pagination`, `PaginationContent` and `PaginationItem` as a navigation list.\n- Pagination is compositional and does not own page state: connect links to real routes or control the active page in the consuming app.\n- `PaginationLink` accepts `isActive` and every Button size: `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg` and `icon-xl`.\n- Use `PaginationPrevious`, `PaginationNext` and `PaginationEllipsis` for navigation and skipped ranges.\n- Use the Base UI `render` prop on links when integrating a router without introducing nested interactive elements.\n\n## Public Motion\n\n- Pagination has no mount or exit animation. Hover, press and focus feedback come from the Button variant used by `PaginationLink`.\n- The component does not require a reduced-motion override.\n\n## Public Accessibility\n\n- Keep the root as a labelled `nav` and `PaginationContent` as a real list.\n- Set `isActive` only on the current page so `aria-current=\"page\"` remains accurate.\n- Preserve the built-in previous, next and ellipsis screen-reader labels.\n\n## Public Agent Guidance\n\n- Use inert links only in examples; production pagination should navigate or update controlled page state.\n- Interactive demos should update `isActive` from controlled state so previous, next and page controls demonstrate the real behavior.\n- Do not hand-build rows of links or buttons when the Pagination slots fit.\n- Keep `aria-current`, `data-active`, labels and Button integration intact.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/navigation/pagination)\n\n- [Registry source](https://ui.siteplane.io/r/pagination.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/navigation/pagination",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}