{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "pagination",
	"title": "Pagination",
	"type": "registry:ui",
	"description": "Kura Pagination component source.",
	"devDependencies": [
		"phosphor-svelte@^3.1.0",
		"bits-ui@^2.18.1",
		"@internationalized/date@^3.12.2"
	],
	"registryDependencies": [
		"button",
		"utils"
	],
	"files": [
		{
			"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",
			"type": "registry:file",
			"target": "pagination/index.ts"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$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(\n    'flex items-center gap-1 rounded-full border border-zinc-800 bg-background p-1',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
			"type": "registry:file",
			"target": "pagination/pagination-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef, type WithoutChildren } from '$UTILS$.js';\n  import DotsThreeIcon from 'phosphor-svelte/lib/DotsThree';\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-full text-zinc-500 [&_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",
			"type": "registry:file",
			"target": "pagination/pagination-ellipsis.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import type { HTMLLiAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$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",
			"type": "registry:file",
			"target": "pagination/pagination-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n  import { buttonVariants, type ButtonSize } from '$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-full border-zinc-800 font-mono text-xs font-semibold text-zinc-400 data-active:border-[#d0e891] data-active:bg-[#b9d765] data-active:text-[#101207] hover:bg-zinc-950 hover:text-white',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.Page>\n",
			"type": "registry:file",
			"target": "pagination/pagination-link.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRight';\n  import { cn } from '$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-full border border-zinc-800 bg-background pr-2! font-mono text-xs font-semibold tracking-[0.08em] text-zinc-400 uppercase hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207]',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.NextButton>\n",
			"type": "registry:file",
			"target": "pagination/pagination-next-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n  import { buttonVariants } from '$UI$/button/index.js';\n  import CaretRightIcon from 'phosphor-svelte/lib/CaretRight';\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-full border border-zinc-800 bg-background pr-2! font-mono text-xs font-semibold tracking-[0.08em] text-zinc-400 uppercase hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207]',\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",
			"type": "registry:file",
			"target": "pagination/pagination-next.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeft';\n  import { cn } from '$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-full border border-zinc-800 bg-background pl-2! font-mono text-xs font-semibold tracking-[0.08em] text-zinc-400 uppercase hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207]',\n    className\n  )}\n  {...restProps}\n>\n  {#if children}\n    {@render children?.()}\n  {:else}\n    {@render Fallback()}\n  {/if}\n</PaginationPrimitive.PrevButton>\n",
			"type": "registry:file",
			"target": "pagination/pagination-prev-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n  import { cn } from '$UTILS$.js';\n  import { buttonVariants } from '$UI$/button/index.js';\n  import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeft';\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-full border border-zinc-800 bg-background pl-2! font-mono text-xs font-semibold tracking-[0.08em] text-zinc-400 uppercase hover:border-[#d0e891] hover:bg-[#b9d765] hover:text-[#101207]',\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",
			"type": "registry:file",
			"target": "pagination/pagination-previous.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Pagination as PaginationPrimitive } from 'bits-ui';\n\n  import { cn } from '$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 font-mono text-xs', className)}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "pagination/pagination.svelte"
		}
	]
}