{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "Page navigation for long lists and result sets.",
  "dependencies": [
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/pagination-knobs.ts",
      "target": "@components/control-ui/knob-contracts/pagination-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/pagination.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const paginationKnobs = [\n  \"--cui-pagination-link-radius\",\n  \"--cui-pagination-link-background\",\n  \"--cui-pagination-link-hover-background\",\n  \"--cui-pagination-link-foreground\",\n  \"--cui-pagination-link-shadow\",\n] as const;\nexport type PaginationKnobStyle = Partial<Record<(typeof paginationKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/pagination.css",
      "target": "@components/control-ui/styles/recipes/pagination.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"pagination\"][data-slot=\"root\"]) {\n    --cui-pagination-link-radius: var(--radius-control);\n    --cui-pagination-link-background: transparent;\n    --cui-pagination-link-hover-background: oklch(from var(--foreground) l c h / 0.06);\n    --cui-pagination-link-foreground: var(--foreground);\n    --cui-pagination-link-shadow: none;\n  }\n  :where([data-control-family=\"pagination\"][data-slot=\"link\"]) {\n    --_pagination-link-border-color: transparent;\n    border-radius: var(--cui-pagination-link-radius);\n    background: var(--cui-pagination-link-background);\n    box-shadow:\n      inset 0 0 0 1px var(--_pagination-link-border-color),\n      var(--cui-pagination-link-shadow);\n    color: var(--cui-pagination-link-foreground);\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--ease-standard),\n      color var(--duration-fast) var(--ease-standard),\n      box-shadow var(--duration-fast) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"pagination\"][data-slot=\"link\"][data-active=\"true\"]) {\n    --cui-pagination-link-background: oklch(from var(--card) l c h / 0.72);\n    --_pagination-link-border-color: var(--border);\n    --cui-pagination-link-shadow: var(--shadow-sm);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"pagination\"][data-slot=\"link\"]:hover) {\n      background: var(--cui-pagination-link-hover-background);\n    }\n  }\n\n  :where([data-control-family=\"pagination\"][data-slot=\"link\"][aria-disabled=\"true\"]) {\n    opacity: 0.45;\n  }\n\n  :where([data-control-family=\"pagination\"][data-slot=\"ellipsis\"]) {\n    color: var(--muted-foreground);\n  }\n}\n\n@property --cui-pagination-link-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-pagination-link-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-pagination-link-hover-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-pagination-link-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-pagination-link-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/pagination.tsx",
      "target": "@components/control-ui/ui/pagination.tsx",
      "type": "registry:ui",
      "content": "import { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nimport type { PaginationKnobStyle } from \"@/components/control-ui/knob-contracts/pagination-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type PaginationEllipsisProps = Omit<ComponentProps<\"span\">, \"style\"> & { style?: CSSProperties & PaginationKnobStyle };\n\nexport type PaginationLinkProps = Omit<\n  ComponentProps<\"a\"> & {\n    isActive?: boolean;\n  },\n  \"style\"\n> & { style?: CSSProperties & PaginationKnobStyle };\n\n// Links are control-shaped by hand rather than importing Button, so pagination installs alone.\nexport function Pagination({ className, ...props }: ComponentProps<\"nav\"> & { style?: CSSProperties & PaginationKnobStyle }) {\n  return (\n    // the <nav> already carries role; label names landmark\n    <nav\n      aria-label=\"pagination\"\n      data-control-ui=\"pagination\"\n      data-control-family=\"pagination\"\n      data-slot=\"root\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({ className, ...props }: ComponentProps<\"ul\"> & { style?: CSSProperties & PaginationKnobStyle }) {\n  return (\n    <ul\n      data-control-ui=\"pagination\"\n      data-control-family=\"pagination\"\n      data-slot=\"content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem({ className, ...props }: ComponentProps<\"li\"> & { style?: CSSProperties & PaginationKnobStyle }) {\n  return <li data-control-ui=\"pagination\" data-control-family=\"pagination\" data-slot=\"item\" className={className} {...props} />;\n}\n\nconst paginationLinkChrome =\n  \"inline-flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap px-2.5 aria-disabled:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0\";\n\nexport function PaginationLink({ isActive = false, className, ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-control-ui=\"pagination\"\n      data-control-family=\"pagination\"\n      data-slot=\"link\"\n      data-control=\"true\"\n      data-active={isActive ? \"true\" : undefined}\n      className={cn(paginationLinkChrome, className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" className={cn(\"gap-1 pr-2.5 pl-2\", className)} {...props}>\n      <ChevronLeft />\n      <span>Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" className={cn(\"gap-1 pr-2 pl-2.5\", className)} {...props}>\n      <span>Next</span>\n      <ChevronRight />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-control-ui=\"pagination\"\n      data-control-family=\"pagination\"\n      data-slot=\"ellipsis\"\n      className={cn(\"flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] items-center justify-center [&>svg]:size-4\", className)}\n      {...props}\n    >\n      <MoreHorizontal />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/pagination.css\"": {}
  },
  "meta": {}
}