{
  "name": "pagination",
  "title": "Pagination",
  "description": "Kura Pagination component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './pagination.svelte';\nimport Content from './pagination-content.svelte';\nimport Item from './pagination-item.svelte';\nimport Link from './pagination-link.svelte';\nimport PrevButton from './pagination-prev-button.svelte';\nimport NextButton from './pagination-next-button.svelte';\nimport Ellipsis from './pagination-ellipsis.svelte';\nimport Previous from './pagination-previous.svelte';\nimport Next from './pagination-next.svelte';\n\nexport {\n  Root,\n  Content,\n  Item,\n  Link,\n  PrevButton, // old\n  NextButton, // old\n  Ellipsis,\n  Previous,\n  Next,\n  //\n  Root as Pagination,\n  Content as PaginationContent,\n  Item as PaginationItem,\n  Link as PaginationLink,\n  PrevButton as PaginationPrevButton, // old\n  NextButton as PaginationNextButton, // old\n  Ellipsis as PaginationEllipsis,\n  Previous as PaginationPrevious,\n  Next as PaginationNext\n};\n",
      "path": "pagination/index.ts",
      "_imports_": [
        {
          "import": "./pagination.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-content.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-content.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-item.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-item.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-link.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-link.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-prev-button.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-prev-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-next-button.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-next-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-ellipsis.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-ellipsis.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-previous.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-previous.svelte"
          },
          "meta": {}
        },
        {
          "import": "./pagination-next.svelte",
          "item": "pagination",
          "file": {
            "type": "ui",
            "path": "pagination/pagination-next.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();\n</script>\n\n<ul\n  bind:this={ref}\n  data-slot=\"pagination-content\"\n  class={cn('flex items-center gap-1', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
      "path": "pagination/pagination-content.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';\n  import DotsThreeIcon from 'phosphor-svelte/lib/DotsThreeIcon';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();\n</script>\n\n<span\n  bind:this={ref}\n  aria-hidden=\"true\"\n  data-slot=\"pagination-ellipsis\"\n  class={cn(\n    \"flex size-9 items-center justify-center rounded-control text-muted-foreground/50 [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...restProps}\n>\n  <DotsThreeIcon />\n  <span class=\"sr-only\">More pages</span>\n</span>\n",
      "path": "pagination/pagination-ellipsis.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLLiAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLLiAttributes> = $props();\n</script>\n\n<li\n  bind:this={ref}\n  data-slot=\"pagination-item\"\n  class={cn('flex items-center', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "path": "pagination/pagination-item.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n  import { buttonVariants, type ButtonSize } from '$lib/components/ui/button/index.js';\n  let {\n    ref = $bindable(null),\n    class: className,\n    size = 'icon',\n    isActive,\n    page,\n    children,\n    ...restProps\n  }: PaginationPrimitive.PageProps & {\n    size?: ButtonSize;\n    isActive: boolean;\n  } = $props();\n</script>\n\n{#snippet Fallback()}\n  {page.value}\n{/snippet}\n\n<PaginationPrimitive.Page\n  bind:ref\n  {page}\n  aria-current={isActive ? 'page' : undefined}\n  data-slot=\"pagination-link\"\n  data-active={isActive}\n  data-size={size}\n  class={cn(\n    buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }),\n    'cn-pagination-link rounded-control border-border text-xs font-medium text-muted-foreground data-active:border-link data-active:bg-primary data-active:text-primary-foreground hover:bg-muted hover:text-foreground',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.Page>\n",
      "path": "pagination/pagination-link.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRightIcon';\n  import { cn } from '$lib/utils.js';\n  import { buttonVariants } from '../button/index.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: PaginationPrimitive.NextButtonProps = $props();\n</script>\n\n{#snippet Fallback()}\n  <span>Next</span>\n  <CaretRightIcon class={cn('size-4', className)} />\n{/snippet}\n\n<PaginationPrimitive.NextButton\n  bind:ref\n  aria-label=\"Go to next page\"\n  class={cn(\n    buttonVariants({ variant: 'ghost' }),\n    'rounded-control border border-border bg-background pr-2! text-xs font-medium text-muted-foreground hover:border-link hover:bg-primary hover:text-primary-foreground',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.NextButton>\n",
      "path": "pagination/pagination-next-button.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "../button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n  import { buttonVariants } from '$lib/components/ui/button/index.js';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRightIcon';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: PaginationPrimitive.NextButtonProps = $props();\n</script>\n\n<PaginationPrimitive.NextButton\n  bind:ref\n  aria-label=\"Go to next page\"\n  class={cn(\n    buttonVariants({ variant: 'ghost', size: 'default' }),\n    'rounded-control border border-border bg-background pr-2! text-xs font-medium text-muted-foreground hover:border-link hover:bg-primary hover:text-primary-foreground',\n    className\n  )}\n  {...restProps}\n>\n  <span class=\"cn-pagination-next-text hidden sm:block\">Next</span>\n  <CaretRightIcon data-icon=\"inline-end\" />\n</PaginationPrimitive.NextButton>\n",
      "path": "pagination/pagination-next.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';\n  import { cn } from '$lib/utils.js';\n  import { buttonVariants } from '../button/index.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: PaginationPrimitive.PrevButtonProps = $props();\n</script>\n\n{#snippet Fallback()}\n  <CaretLeftIcon class={cn('size-4', className)} />\n  <span>Previous</span>\n{/snippet}\n\n<PaginationPrimitive.PrevButton\n  bind:ref\n  aria-label=\"Go to previous page\"\n  class={cn(\n    buttonVariants({ variant: 'ghost' }),\n    'rounded-control border border-border bg-background pl-2! text-xs font-medium text-muted-foreground hover:border-link hover:bg-primary hover:text-primary-foreground',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.PrevButton>\n",
      "path": "pagination/pagination-prev-button.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "../button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n  import { buttonVariants } from '$lib/components/ui/button/index.js';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: PaginationPrimitive.PrevButtonProps = $props();\n</script>\n\n<PaginationPrimitive.PrevButton\n  bind:ref\n  aria-label=\"Go to previous page\"\n  class={cn(\n    buttonVariants({ variant: 'ghost', size: 'default' }),\n    'rounded-control border border-border bg-background pl-2! text-xs font-medium text-muted-foreground hover:border-link hover:bg-primary hover:text-primary-foreground',\n    className\n  )}\n  {...restProps}\n>\n  <CaretLeftIcon data-icon=\"inline-start\" />\n  <span class=\"cn-pagination-previous-text hidden sm:block\">Previous</span>\n</PaginationPrimitive.PrevButton>\n",
      "path": "pagination/pagination-previous.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    count = 0,\n    perPage = 10,\n    page = $bindable(1),\n    siblingCount = 1,\n    ...restProps\n  }: PaginationPrimitive.RootProps = $props();\n</script>\n\n<PaginationPrimitive.Root\n  bind:ref\n  bind:page\n  role=\"navigation\"\n  aria-label=\"pagination\"\n  data-slot=\"pagination\"\n  {count}\n  {perPage}\n  {siblingCount}\n  class={cn('cn-pagination mx-auto flex w-full justify-center  text-xs', className)}\n  {...restProps}\n/>\n",
      "path": "pagination/pagination.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "button"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "phosphor-svelte",
      "version": "^3.1.0"
    },
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    }
  ],
  "devDependencies": []
}