{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pagination",
  "type": "registry:ui",
  "title": "Pagination",
  "description": "A pagination component",
  "dependencies": [
    "solid-js",
    "@kobalte/core"
  ],
  "registryDependencies": [
    "https://solid-ui.com/r/button.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/pagination.tsx",
      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { Show, splitProps } from \"solid-js\"\n\nimport * as PaginationPrimitive from \"@kobalte/core/pagination\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/ui/button\"\n\nconst PaginationItems = PaginationPrimitive.Items\n\ntype PaginationRootProps<T extends ValidComponent = \"nav\"> =\n  PaginationPrimitive.PaginationRootProps<T> & { class?: string | undefined }\n\nconst Pagination = <T extends ValidComponent = \"nav\">(\n  props: PolymorphicProps<T, PaginationRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationRootProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Root\n      class={cn(\"[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype PaginationItemProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined }\n\nconst PaginationItem = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationItemProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationItemProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Item\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"size-10 data-[current]:border\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype PaginationEllipsisProps<T extends ValidComponent = \"div\"> =\n  PaginationPrimitive.PaginationEllipsisProps<T> & {\n    class?: string | undefined\n  }\n\nconst PaginationEllipsis = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, PaginationEllipsisProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationEllipsisProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Ellipsis\n      class={cn(\"flex size-10 items-center justify-center\", local.class)}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More pages</span>\n    </PaginationPrimitive.Ellipsis>\n  )\n}\n\ntype PaginationPreviousProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationPreviousProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst PaginationPrevious = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationPreviousProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationPreviousProps, [\"class\", \"children\"])\n  return (\n    <PaginationPrimitive.Previous\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      <Show\n        when={local.children}\n        fallback={\n          <>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"size-4\"\n            >\n              <path d=\"M15 6l-6 6l6 6\" />\n            </svg>\n            <span>Previous</span>\n          </>\n        }\n      >\n        {(children) => children()}\n      </Show>\n    </PaginationPrimitive.Previous>\n  )\n}\n\ntype PaginationNextProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationNextProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst PaginationNext = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationNextProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationNextProps, [\"class\", \"children\"])\n  return (\n    <PaginationPrimitive.Next\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      <Show\n        when={local.children}\n        fallback={\n          <>\n            <span>Next</span>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"size-4\"\n            >\n              <path d=\"M9 6l6 6l-6 6\" />\n            </svg>\n          </>\n        }\n      >\n        {(children) => children()}\n      </Show>\n    </PaginationPrimitive.Next>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationItems,\n  PaginationItem,\n  PaginationEllipsis,\n  PaginationPrevious,\n  PaginationNext\n}\n",
      "type": "registry:ui"
    }
  ]
}