{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Navigation pagination primitives for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/pagination/pagination.tsx",
      "type": "registry:ui",
      "target": "components/ui/pagination/pagination.tsx",
      "content": "import React from 'react';\nimport { getPaginationSizeKey, paginationStyleKeys } from '../lib/core';\nimport type { PaginationLinkBaseProps } from '../lib/core';\nimport styles from './pagination.module.scss';\n\nfunction ChevronLeftIcon(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n\t\t\t<path d=\"m15 18-6-6 6-6\" />\n\t\t</svg>\n\t);\n}\n\nfunction ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n\t\t\t<path d=\"m9 18 6-6-6-6\" />\n\t\t</svg>\n\t);\n}\n\nfunction MoreHorizontalIcon(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" {...props}>\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"1\" />\n\t\t\t<circle cx=\"19\" cy=\"12\" r=\"1\" />\n\t\t\t<circle cx=\"5\" cy=\"12\" r=\"1\" />\n\t\t</svg>\n\t);\n}\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLElement> {}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<nav ref={ref} role=\"navigation\" aria-label=\"pagination\" className={`${styles[paginationStyleKeys.root]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</nav>\n\t);\n});\nPagination.displayName = 'Pagination';\n\nexport interface PaginationContentProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<ul ref={ref} className={`${styles[paginationStyleKeys.content]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</ul>\n\t);\n});\nPaginationContent.displayName = 'PaginationContent';\n\nexport interface PaginationItemProps extends React.HTMLAttributes<HTMLLIElement> {}\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<li ref={ref} className={`${styles[paginationStyleKeys.item]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</li>\n\t);\n});\nPaginationItem.displayName = 'PaginationItem';\n\nexport interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, PaginationLinkBaseProps {}\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(({ className = '', isActive = false, size = 'icon', children, ...props }, ref) => {\n\tconst classes = [styles[paginationStyleKeys.link], styles[getPaginationSizeKey(size)], isActive ? styles.isActive : '', className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<a ref={ref} aria-current={isActive ? 'page' : undefined} data-active={isActive} className={classes} {...props}>\n\t\t\t{children}\n\t\t</a>\n\t);\n});\nPaginationLink.displayName = 'PaginationLink';\n\nexport interface PaginationPreviousProps extends Omit<PaginationLinkProps, 'size'> {}\n\nconst PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationPreviousProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<PaginationLink ref={ref} aria-label=\"Go to previous page\" size=\"default\" className={`${styles.gapSm} ${className}`} {...props}>\n\t\t\t<ChevronLeftIcon />\n\t\t\t<span className={styles.paginationHideSm}>{children ?? 'Previous'}</span>\n\t\t</PaginationLink>\n\t);\n});\nPaginationPrevious.displayName = 'PaginationPrevious';\n\nexport interface PaginationNextProps extends Omit<PaginationLinkProps, 'size'> {}\n\nconst PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationNextProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<PaginationLink ref={ref} aria-label=\"Go to next page\" size=\"default\" className={`${styles.gapSm} ${className}`} {...props}>\n\t\t\t<span className={styles.paginationHideSm}>{children ?? 'Next'}</span>\n\t\t\t<ChevronRightIcon />\n\t\t</PaginationLink>\n\t);\n});\nPaginationNext.displayName = 'PaginationNext';\n\nexport interface PaginationEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst PaginationEllipsis = React.forwardRef<HTMLSpanElement, PaginationEllipsisProps>(({ className = '', ...props }, ref) => {\n\treturn (\n\t\t<span ref={ref} aria-hidden=\"true\" className={`${styles[paginationStyleKeys.ellipsis]} ${className}`} {...props}>\n\t\t\t<MoreHorizontalIcon className={styles[paginationStyleKeys.ellipsisIcon]} />\n\t\t\t<span className={styles[paginationStyleKeys.srOnly]}>More pages</span>\n\t\t</span>\n\t);\n});\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis };\nexport default Pagination;\n"
    },
    {
      "path": "packages/styles/scss/components/pagination.module.scss",
      "type": "registry:file",
      "target": "components/ui/pagination/pagination.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tdisplay: flex;\n\twidth: 100%;\n\tjustify-content: center;\n}\n\n.content {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: var(--tile-pagination-gap, $spacing-1);\n}\n\n.item {\n\tdisplay: list-item;\n}\n\n.link {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: $spacing-2;\n\theight: var(--tile-pagination-height, 2.25rem);\n\tmin-width: var(--tile-pagination-height, 2.25rem);\n\tpadding: var(--tile-pagination-padding, 0 $spacing-3);\n\tborder-radius: var(--tile-pagination-radius, $radius);\n\tfont-size: var(--tile-pagination-font-size, $text-sm);\n\tfont-weight: var(--tile-pagination-font-weight, $font-medium);\n\twhite-space: nowrap;\n\tcolor: var(--tile-pagination-foreground, $foreground);\n\ttransition: all $transition-fast;\n\toutline: none;\n\n\tsvg {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n\n\t&.sizeSm {\n\t\theight: var(--tile-pagination-sm-height, 2rem);\n\t\tmin-width: var(--tile-pagination-sm-height, 2rem);\n\t\tpadding: var(--tile-pagination-sm-padding, 0 $spacing-2);\n\t\tborder-radius: var(--tile-pagination-sm-radius, $radius-sm);\n\t\tfont-size: var(--tile-pagination-sm-font-size, $text-xs);\n\t}\n\n\t&.sizeLg {\n\t\theight: var(--tile-pagination-lg-height, 2.5rem);\n\t\tmin-width: var(--tile-pagination-lg-height, 2.5rem);\n\t\tpadding: var(--tile-pagination-lg-padding, 0 $spacing-5);\n\t}\n\n\t&.sizeIcon {\n\t\twidth: var(--tile-pagination-height, 2.25rem);\n\t\tpadding: 0;\n\t}\n\n\t&.isActive {\n\t\tborder: 1px solid var(--tile-pagination-active-border, $border);\n\t\tbackground-color: var(--tile-pagination-active-background, $background);\n\t\tbox-shadow: var(--tile-pagination-active-shadow, $shadow-sm);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--tile-pagination-hover-background, $accent);\n\t\tcolor: var(--tile-pagination-hover-foreground, $accent-foreground);\n\t\ttext-decoration: none;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: var(--tile-pagination-focus-shadow, 0 0 0 2px $background, 0 0 0 4px $ring);\n\t}\n}\n\n.ellipsis {\n\tdisplay: flex;\n\twidth: 2.25rem;\n\theight: 2.25rem;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.ellipsisIcon {\n\twidth: 1rem;\n\theight: 1rem;\n}\n\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder: 0;\n}\n\n.gapSm {\n\tgap: $spacing-1;\n\tpadding-inline: $spacing-2_5;\n}\n\n.paginationHideSm {\n\tdisplay: none;\n\n\t@media (min-width: 640px) {\n\t\tdisplay: block;\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/pagination/index.ts",
      "type": "registry:ui",
      "target": "components/ui/pagination/index.ts",
      "content": "export {\n\tPagination,\n\tPaginationContent,\n\tPaginationItem,\n\tPaginationLink,\n\tPaginationPrevious,\n\tPaginationNext,\n\tPaginationEllipsis,\n\ttype PaginationProps,\n\ttype PaginationContentProps,\n\ttype PaginationItemProps,\n\ttype PaginationLinkProps,\n\ttype PaginationPreviousProps,\n\ttype PaginationNextProps,\n\ttype PaginationEllipsisProps,\n} from './pagination';\n"
    }
  ]
}