{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-pagination",
  "title": "Glass Pagination",
  "author": "Alex Chih (https://alexchih.com)",
  "description": "Pagination pills on the ghost-circle register.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://washiveil.alexchih.com/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/washiveil/ui/glass-pagination.tsx",
      "content": "import * as React from 'react';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction GlassPagination({ className, ...props }: React.ComponentProps<'nav'>) {\n  return <nav role=\"navigation\" aria-label=\"pagination\" className={cn('mx-auto flex w-full justify-center', className)} {...props} />;\n}\n\nfunction GlassPaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {\n  return <ul className={cn('flex items-center gap-2', className)} {...props} />;\n}\n\nfunction GlassPaginationItem({ ...props }: React.ComponentProps<'li'>) {\n  return <li {...props} />;\n}\n\nconst ghostCircle =\n  'grid size-9 place-items-center rounded-full border border-foreground/10 text-muted-foreground transition-colors hover:border-ruri hover:text-ruri dark:border-white/10 dark:hover:border-ruri-soft dark:hover:text-ruri-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';\n\nconst activePill = 'font-medium border-transparent bg-ruri text-white dark:bg-ruri-soft dark:text-deep';\n\ninterface GlassPaginationLinkProps extends React.ComponentProps<'a'> {\n  isActive?: boolean;\n}\n\nfunction GlassPaginationLink({ isActive, className, ...props }: GlassPaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(ghostCircle, isActive && activePill, className)}\n      {...props}\n    />\n  );\n}\n\nfunction GlassPaginationPrevious({ className, ...props }: React.ComponentProps<'a'>) {\n  return (\n    <a aria-label=\"Go to previous page\" className={cn(ghostCircle, className)} {...props}>\n      <ChevronLeft className=\"size-4\" />\n      <span className=\"sr-only\">Previous</span>\n    </a>\n  );\n}\n\nfunction GlassPaginationNext({ className, ...props }: React.ComponentProps<'a'>) {\n  return (\n    <a aria-label=\"Go to next page\" className={cn(ghostCircle, className)} {...props}>\n      <ChevronRight className=\"size-4\" />\n      <span className=\"sr-only\">Next</span>\n    </a>\n  );\n}\n\nfunction GlassPaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span className={cn('grid size-9 place-items-center text-faint', className)} {...props}>\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  GlassPagination,\n  GlassPaginationContent,\n  GlassPaginationItem,\n  GlassPaginationLink,\n  GlassPaginationPrevious,\n  GlassPaginationNext,\n  GlassPaginationEllipsis,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}