{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "title": "Pagination",
  "description": "Page navigation with default and flat variants in 3 sizes.",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "https://indiacn.in/r/theme.json",
    "https://indiacn.in/r/typography.json"
  ],
  "files": [
    {
      "path": "components/ui/pagination.tsx",
      "content": "'use client';\n\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport { ComponentProps, createContext, useContext } from 'react';\n\nimport { Label2 } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\ntype TPaginationSize = 'sm' | 'md' | 'lg';\ntype TPaginationVariant = 'default' | 'flat';\n\nconst PAGINATION_CONTEXT = createContext<{ size: TPaginationSize; variant: TPaginationVariant }>({\n  size: 'md',\n  variant: 'default',\n});\n\n/** Navigation pagination component. */\nfunction Pagination({\n  className,\n  size = 'md',\n  variant = 'default',\n  ...props\n}: ComponentProps<'nav'> & { size?: TPaginationSize; variant?: TPaginationVariant }) {\n  return (\n    <PAGINATION_CONTEXT.Provider value={{ size, variant }}>\n      <nav\n        role='navigation'\n        aria-label='pagination'\n        className={cn('mx-auto flex w-full justify-center', className)}\n        {...props}\n      />\n    </PAGINATION_CONTEXT.Provider>\n  );\n}\n\n/** Container list for pagination items. */\nfunction PaginationContent({ className, ...props }: ComponentProps<'ul'>) {\n  const { variant } = useContext(PAGINATION_CONTEXT);\n\n  return (\n    <ul\n      className={cn(\n        'flex list-none flex-row items-center pl-0',\n        variant === 'flat'\n          ? 'gap-1.5'\n          : // The `first:`/`last:` Tailwind selectors compile to :first-child/:last-child.\n            // Each <a> is the only child of its <li>, so applying them on the link\n            // matches every link. Apply them at the <ul> level via descendant\n            // selectors so only the actual edge items get rounded corners.\n            'gap-0 [&>li:first-child>*]:rounded-l-md [&>li:last-child>*]:rounded-r-md',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Single pagination list item wrapper. */\nfunction PaginationItem({ className, ...props }: ComponentProps<'li'>) {\n  return <li className={cn('list-none', className)} {...props} />;\n}\n\ninterface IPaginationLinkProps extends ComponentProps<'a'> {\n  isActive?: boolean;\n  disabled?: boolean;\n  size?: TPaginationSize;\n  variant?: TPaginationVariant;\n}\n\nconst PAGINATION_SIZE_CLASSES: Record<TPaginationVariant, Record<TPaginationSize, string>> = {\n  default: {\n    sm: 'px-2 py-1 text-sm',\n    md: 'px-3 py-1.5 text-base',\n    lg: 'px-6 py-3 text-lg',\n  },\n  flat: {\n    sm: 'size-7 text-sm',\n    md: 'size-8 text-base',\n    lg: 'size-10 text-lg',\n  },\n};\n\n/** UX4G-style page link with default and flat variants. */\nfunction PaginationLink({\n  className,\n  isActive,\n  disabled,\n  size,\n  variant,\n  children,\n  ...props\n}: IPaginationLinkProps) {\n  const pagination = useContext(PAGINATION_CONTEXT);\n  const resolvedSize = size ?? pagination.size;\n  const resolvedVariant = variant ?? pagination.variant;\n\n  if (resolvedVariant === 'flat') {\n    return (\n      <a\n        aria-current={isActive ? 'page' : undefined}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : undefined}\n        className={cn(\n          'focus-visible:shadow-focus-primary inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent no-underline transition-[color,background-color,border-color,box-shadow] duration-150 focus-visible:outline-none',\n          PAGINATION_SIZE_CLASSES.flat[resolvedSize],\n          isActive\n            ? 'border-primary text-neutral bg-transparent font-bold'\n            : 'hover:text-neutral text-neutral-600 hover:bg-neutral-100',\n          disabled && 'pointer-events-none text-neutral-400',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <a\n      aria-current={isActive ? 'page' : undefined}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : undefined}\n      className={cn(\n        'text-primary focus-visible:shadow-focus-primary bg-neutral-0 relative -ml-px inline-flex items-center justify-center border border-neutral-200 no-underline transition-[color,background-color,border-color,box-shadow] duration-150 focus-visible:z-10 focus-visible:outline-none',\n        PAGINATION_SIZE_CLASSES.default[resolvedSize],\n        isActive\n          ? 'border-primary bg-primary text-neutral-0 z-3'\n          : 'hover:text-primary hover:z-2 hover:bg-neutral-100',\n        disabled && 'pointer-events-none text-neutral-400',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  );\n}\n\n/** Previous page navigation link. */\nfunction PaginationPrevious({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label='Go to previous page'\n      className={cn('gap-1.5', className)}\n      {...props}\n    >\n      <ChevronLeft className='size-4' />\n      {children ?? <Label2>Previous</Label2>}\n    </PaginationLink>\n  );\n}\n\n/** Next page navigation link. */\nfunction PaginationNext({ className, children, ...props }: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink aria-label='Go to next page' className={cn('gap-1.5', className)} {...props}>\n      {children ?? <Label2>Next</Label2>}\n      <ChevronRight className='size-4' />\n    </PaginationLink>\n  );\n}\n\n/** Ellipsis indicator for truncated page ranges. */\nfunction PaginationEllipsis({ className, ...props }: ComponentProps<'div'>) {\n  const { size, variant } = useContext(PAGINATION_CONTEXT);\n\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        variant === 'flat'\n          ? 'inline-flex items-center justify-center rounded-lg text-neutral-600'\n          : 'bg-neutral-0 relative -ml-px inline-flex items-center justify-center border border-neutral-200 text-neutral-600',\n        PAGINATION_SIZE_CLASSES[variant][size],\n        className,\n      )}\n      {...props}\n    >\n      <MoreHorizontal className='size-4' />\n      <Label2 className='sr-only'>More pages</Label2>\n    </div>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}