{
  "title": "Pagination",
  "description": "Pagination with page navigation, next and previous links, and motion shared active glide.",
  "name": "motion-pagination",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/pagination.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { buttonVariants } from \"@/components/ui/button\";\n\nconst PaginationLayoutContext = React.createContext<{\n    layoutId: string;\n}>({ layoutId: \"\" });\n\nexport interface PaginationProps extends React.ComponentProps<\"nav\"> {}\n\nfunction Pagination({ className, children, ...props }: PaginationProps) {\n    const layoutId = React.useId();\n\n    return (\n        <PaginationLayoutContext.Provider value={{ layoutId }}>\n            <nav\n                role=\"navigation\"\n                aria-label=\"pagination\"\n                data-slot=\"pagination\"\n                className={cn(\"mx-auto flex w-full justify-center\", className)}\n                {...props}>\n                {children}\n            </nav>\n        </PaginationLayoutContext.Provider>\n    );\n}\n\nexport interface PaginationContentProps extends React.ComponentProps<\"ul\"> {}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n    return <ul data-slot=\"pagination-content\" className={cn(\"flex items-center gap-1\", className)} {...props} />;\n}\n\nexport interface PaginationItemProps extends React.ComponentProps<\"li\"> {}\n\nfunction PaginationItem({ className, ...props }: PaginationItemProps) {\n    return <li data-slot=\"pagination-item\" className={cn(className)} {...props} />;\n}\n\nexport type PaginationLinkProps = {\n    isActive?: boolean;\n    size?: \"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\";\n} & React.ComponentProps<\"a\">;\n\nfunction PaginationLink({ className, isActive, size = \"icon\", children, ...props }: PaginationLinkProps) {\n    const { layoutId } = React.useContext(PaginationLayoutContext);\n\n    return (\n        <motion.a\n            aria-current={isActive ? \"page\" : undefined}\n            data-slot=\"pagination-link\"\n            data-active={isActive}\n            whileHover={{ scale: 1.05 }}\n            whileTap={{ scale: 0.94 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n            className={cn(\n                buttonVariants({\n                    variant: \"ghost\",\n                    size,\n                }),\n                \"relative z-10 cursor-pointer select-none\",\n                isActive && \"text-foreground font-medium\",\n                className,\n            )}\n            {...(props as any)}>\n            {isActive && (\n                <motion.div\n                    layoutId={`${layoutId}-active`}\n                    className=\"border-border bg-background dark:border-input dark:bg-input/30 absolute inset-0 -z-10 rounded-md border\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n                />\n            )}\n            <span className=\"relative z-10 flex items-center justify-center gap-1.5\">{children}</span>\n        </motion.a>\n    );\n}\n\nexport interface PaginationPreviousProps extends React.ComponentProps<typeof PaginationLink> {}\n\nfunction PaginationPrevious({ className, children, ...props }: PaginationPreviousProps) {\n    return (\n        <PaginationLink\n            aria-label=\"Go to previous page\"\n            size=\"default\"\n            className={cn(\"group/pagination-prev pl-2!\", className)}\n            {...props}>\n            <ChevronLeftIcon\n                data-icon=\"inline-start\"\n                className=\"transition-transform duration-200 group-hover/pagination-prev:-translate-x-0.5\"\n            />\n            <span className=\"hidden sm:block\">{children ?? \"Previous\"}</span>\n        </PaginationLink>\n    );\n}\n\nexport interface PaginationNextProps extends React.ComponentProps<typeof PaginationLink> {}\n\nfunction PaginationNext({ className, children, ...props }: PaginationNextProps) {\n    return (\n        <PaginationLink\n            aria-label=\"Go to next page\"\n            size=\"default\"\n            className={cn(\"group/pagination-next pr-2!\", className)}\n            {...props}>\n            <span className=\"hidden sm:block\">{children ?? \"Next\"}</span>\n            <ChevronRightIcon\n                data-icon=\"inline-end\"\n                className=\"transition-transform duration-200 group-hover/pagination-next:translate-x-0.5\"\n            />\n        </PaginationLink>\n    );\n}\n\nexport interface PaginationEllipsisProps extends React.ComponentProps<\"span\"> {}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n    return (\n        <motion.span\n            aria-hidden\n            data-slot=\"pagination-ellipsis\"\n            whileHover={{ scale: 1.15 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n            className={cn(\n                \"text-muted-foreground flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n                className,\n            )}\n            {...(props as any)}>\n            <MoreHorizontalIcon />\n            <span className=\"sr-only\">More pages</span>\n        </motion.span>\n    );\n}\n\nexport {\n    Pagination,\n    PaginationContent,\n    PaginationEllipsis,\n    PaginationItem,\n    PaginationLink,\n    PaginationNext,\n    PaginationPrevious,\n};\n"
    }
  ],
  "mcp": {
    "description": "Pagination controls for multi-page navigation. Provides shared active page gliding pill, micro tactile hover/press, and directional chevron shifts.",
    "tags": [
      "component",
      "pagination",
      "navigation",
      "paging",
      "paceui",
      "animation"
    ]
  }
}