{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Glowing Border Card",
  "description": "A customizable card with a glowing border effect that changes colors based on light and dark modes.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/badge", "@scrollxui/button"],
  "dependencies": [
    "motion",
    "lucide-react",
    "@radix-ui/react-slot",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/pagination.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { ButtonProps } from '@/components/ui/button';\nimport { Badge, type BadgeProps } from '@/components/ui/badge';\nimport { motion, HTMLMotionProps } from 'motion/react';\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (\n  <nav\n    role='navigation'\n    aria-label='pagination'\n    className={cn('mx-auto flex w-full justify-center', className)}\n    {...props}\n  />\n);\nPagination.displayName = 'Pagination';\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-1 sm:gap-2', className)}\n    {...props}\n  />\n));\nPaginationContent.displayName = 'PaginationContent';\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn('list-none', className)} {...props} />\n));\nPaginationItem.displayName = 'PaginationItem';\n\nconst MotionBadge = motion(Badge);\nconst MotionDiv = motion.div;\nconst MotionSpan = motion.span;\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n  shiny?: boolean;\n  shinySpeed?: number;\n} & Pick<ButtonProps, 'size'> &\n  React.ComponentProps<'a'> &\n  Pick<BadgeProps, 'variant'>;\n\nconst PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  (\n    {\n      className,\n      isActive = false,\n      shiny = isActive,\n      shinySpeed = 5,\n      size = 'icon',\n      variant,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const badgeVariant = variant || (isActive ? 'default' : 'outline-solid');\n\n    return (\n      <a\n        ref={ref}\n        className={cn(\n          'inline-flex items-center justify-center rounded-full',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring',\n          size === 'icon'\n            ? 'h-8 w-8 sm:h-9 sm:w-9'\n            : 'h-9 px-3 py-1 sm:h-10 sm:px-4 sm:py-2',\n          className,\n        )}\n        {...props}\n      >\n        <MotionBadge\n          variant={badgeVariant as BadgeProps['variant']}\n          shiny={shiny}\n          shinySpeed={shinySpeed}\n          className={cn(\n            'h-full w-full items-center justify-center',\n            'border shadow-xs',\n            isActive\n              ? 'bg-primary text-primary-foreground border-primary'\n              : 'border-input bg-background',\n            !isActive && 'hover:bg-accent hover:text-accent-foreground',\n            size === 'icon' ? 'p-0' : 'px-2 py-1 sm:px-3 sm:py-1',\n          )}\n          whileHover={\n            !isActive\n              ? {\n                  scale: 1.05,\n                  transition: { type: 'spring', stiffness: 400, damping: 10 },\n                }\n              : {}\n          }\n          whileTap={\n            !isActive\n              ? {\n                  scale: 0.95,\n                  transition: { type: 'spring', stiffness: 400, damping: 10 },\n                }\n              : {}\n          }\n          animate={\n            isActive\n              ? {\n                  scale: [1, 1.02, 1],\n                  transition: {\n                    repeat: Infinity,\n                    repeatType: 'reverse',\n                    duration: 2,\n                  },\n                }\n              : {}\n          }\n        >\n          {children}\n        </MotionBadge>\n      </a>\n    );\n  },\n);\nPaginationLink.displayName = 'PaginationLink';\n\ninterface PaginationNavigationProps extends React.ComponentProps<\n  typeof PaginationLink\n> {\n  className?: string;\n}\n\nconst PaginationPrevious = React.forwardRef<\n  HTMLAnchorElement,\n  PaginationNavigationProps\n>(({ className, ...props }, ref) => {\n  return (\n    <PaginationLink\n      ref={ref}\n      aria-label='Go to previous page'\n      size='default'\n      className={cn('pl-2 sm:pl-2.5', className)}\n      {...props}\n    >\n      <MotionDiv\n        className='flex items-center gap-1'\n        whileHover={{ x: -2 }}\n        whileTap={{ x: -4 }}\n      >\n        <ChevronLeft className='h-4 w-4' />\n        <span className='hidden sm:inline'>Previous</span>\n      </MotionDiv>\n    </PaginationLink>\n  );\n});\nPaginationPrevious.displayName = 'PaginationPrevious';\n\nconst PaginationNext = React.forwardRef<\n  HTMLAnchorElement,\n  PaginationNavigationProps\n>(({ className, ...props }, ref) => {\n  return (\n    <PaginationLink\n      ref={ref}\n      aria-label='Go to next page'\n      size='default'\n      className={cn('pr-2 sm:pr-2.5', className)}\n      {...props}\n    >\n      <MotionDiv\n        className='flex items-center gap-1'\n        whileHover={{ x: 2 }}\n        whileTap={{ x: 4 }}\n      >\n        <span className='hidden sm:inline'>Next</span>\n        <ChevronRight className='h-4 w-4' />\n      </MotionDiv>\n    </PaginationLink>\n  );\n});\nPaginationNext.displayName = 'PaginationNext';\n\ninterface PaginationEllipsisProps extends HTMLMotionProps<'span'> {\n  className?: string;\n}\n\nconst PaginationEllipsis = React.forwardRef<\n  HTMLSpanElement,\n  PaginationEllipsisProps\n>(({ className, ...props }, ref) => {\n  return (\n    <MotionSpan\n      ref={ref}\n      aria-hidden\n      className={cn(\n        'flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center text-muted-foreground',\n        className,\n      )}\n      whileHover={{ scale: 1.1 }}\n      {...props}\n    >\n      <MoreHorizontal className='h-4 w-4' />\n      <span className='sr-only'>More pages</span>\n    </MotionSpan>\n  );\n});\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"
    },
    {
      "type": "registry:ui",
      "path": "components/ui/badge.tsx",
      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n      shiny: {\n        true: 'relative overflow-hidden',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      shiny: false,\n    },\n  },\n);\n\nexport interface BadgeProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {\n  shiny?: boolean;\n  shinySpeed?: number;\n}\n\nfunction Badge({\n  className,\n  variant,\n  shiny = false,\n  shinySpeed = 5,\n  children,\n  ...props\n}: BadgeProps) {\n  const animationDuration = `${shinySpeed}s`;\n\n  return (\n    <div\n      className={cn(badgeVariants({ variant, shiny }), className)}\n      {...props}\n    >\n      <span className={shiny ? 'relative z-10' : ''}>{children}</span>\n\n      {shiny && (\n        <span\n          className='absolute inset-0 pointer-events-none animate-shine dark:hidden'\n          style={{\n            background:\n              'linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%)',\n            backgroundSize: '200% 100%',\n            animationDuration,\n            mixBlendMode: 'screen',\n          }}\n        />\n      )}\n\n      {shiny && (\n        <span\n          className='absolute inset-0 pointer-events-none animate-shine hidden dark:block'\n          style={{\n            background:\n              'linear-gradient(120deg, transparent 40%, rgba(0,0,150,0.25) 50%, transparent 60%)',\n            backgroundSize: '200% 100%',\n            animationDuration,\n            mixBlendMode: 'multiply',\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport { Badge, badgeVariants };\n"
    },
    {
      "type": "registry:ui",
      "path": "components/ui/button.tsx",
      "content": "import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n        success: 'bg-green-600 text-white hover:bg-green-700',\n        warning: 'bg-yellow-500 text-black hover:bg-yellow-600',\n        info: 'bg-blue-500 text-white hover:bg-blue-600',\n        dark: 'bg-gray-800 text-white hover:bg-gray-700',\n        light: 'bg-gray-100 text-gray-800 hover:bg-gray-200',\n        gradient:\n          'bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 text-white hover:opacity-90',\n        glass:\n          'bg-white/10 backdrop-blur-md text-white border border-white/20 hover:bg-white/20',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}