var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var b=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),f=(e,n)=>{for(var a in n)i(e,a,{get:n[a],enumerable:!0})},E=(e,n,a,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of P(n))!_.call(e,r)&&r!==a&&i(e,r,{get:()=>n[r],enumerable:!(o=B(n,r))||o.enumerable});return e};var x=(e,n,a)=>(a=e!=null?m(C(e)):{},E(n||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),v=e=>E(i({},"__esModule",{value:!0}),e);var F=b((N,y)=>{y.exports=_jsx_runtime});var k={};f(k,{default:()=>u});var l=x(F());function g(e){let n={a:"a",code:"code",figure:"figure",h3:"h3",pre:"pre",span:"span",...e.components},{ComponentPreview:a,ComponentSource:o,Step:r,Steps:d,Tabs:p,TabsContent:c,TabsList:h,TabsTrigger:t}=n;return a||s("ComponentPreview",!0),o||s("ComponentSource",!0),r||s("Step",!0),d||s("Steps",!0),p||s("Tabs",!0),c||s("TabsContent",!0),h||s("TabsList",!0),t||s("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(n.h3,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(c,{value:"cli",children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__raw_string__:`npx shadcn@latest add "https://ui.ednesdayw.com/r/pagination.json" `,__npmCommand__:`npx shadcn@latest add "https://ui.ednesdayw.com/r/pagination.json" `,__yarnCommand__:`yarn dlx shadcn@latest add "https://ui.ednesdayw.com/r/pagination.json" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://ui.ednesdayw.com/r/pagination.json" `,__bunCommand__:`bunx --bun shadcn@latest add "https://ui.ednesdayw.com/r/pagination.json" `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "https://ui.ednesdayw.com/r/pagination.json"'})]})})})})}),(0,l.jsx)(c,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(o,{name:"pagination",children:(0,l.jsx)(n.figure,{__src__:"src/registry/ui/pagination.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__raw_string__:`"use client"; import { Pagination as PaginationComponent, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination"; import { paginate } from "@/lib/paginate"; import { useMemo } from "react"; interface PaginationProps { currentPage: number; totalPages: number; siblings?: number; onChange: (page: number) => void; } export const Pagination = ({ currentPage, totalPages, siblings = 2, onChange, }: PaginationProps) => { const { prev, next, current, items } = useMemo(() => { return paginate({ currentPage: currentPage + 1, totalPages, siblings, }); }, [currentPage, totalPages, siblings]); return ( { if (prev === null) return; onChange(prev - 1); }} /> {items.map((item) => { if (item.type === "item") { return ( { onChange(item.value - 1); }} > {item.value} ); } if (item.type === "ellipsis") { return ( { onChange(item.value - 1); }} /> ); } })} { if (next === null) return; onChange(next - 1); }} /> ); }; `,__src__:"src/registry/ui/pagination.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Pagination "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationComponent,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationContent,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationEllipsis,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationItem,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationLink,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationNext,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PaginationPrevious,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/pagination"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { paginate } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/paginate"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useMemo } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" PaginationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" currentPage"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" totalPages"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" siblings"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"page"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" void"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Pagination"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentPage,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" totalPages,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" siblings "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" onChange,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" PaginationProps"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"prev"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"next"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"items"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" paginate"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentPage: currentPage "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" totalPages,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" siblings,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [currentPage, totalPages, siblings]);"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationComponent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationContent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationItem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationPrevious"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"cursor-pointer"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (prev "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(prev "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {items."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (item.type "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "item"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationItem"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"}-${"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"value"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationLink"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"cursor-pointer"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" isActive"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{item.value "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" current}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(item.value "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {item.value}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (item.type "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "ellipsis"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationItem"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"}-${"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"value"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationEllipsis"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"cursor-pointer"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(item.value "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationItem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PaginationNext"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"cursor-pointer"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (next "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(next "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})})]})})})})]})})]}),` `,(0,l.jsxs)(n.h3,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__raw_string__:`import { Pagination } from "@/components/ui/pagination" `,children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Pagination } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/pagination"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Pagination"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" currentPage"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"totalPages"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"onChange"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{setCurrentPage} />"})]})]})})}),` `,(0,l.jsxs)(n.h3,{id:"example",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Example"]}),` `,(0,l.jsx)(a,{name:"pagination-demo",children:(0,l.jsx)(n.figure,{__src__:"src/registry/example/pagination/demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__raw_string__:`"use client"; import { useDeviceDetection } from "@/hooks/use-device-detection"; import { Pagination } from "@/ui/pagination"; import { useState } from "react"; export const PaginationDemo = () => { const [currentPage, setCurrentPage] = useState(1); const device = useDeviceDetection(); return ( ); }; `,__src__:"src/registry/example/pagination/demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useDeviceDetection } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/hooks/use-device-detection"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Pagination } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/ui/pagination"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" PaginationDemo"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"currentPage"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setCurrentPage"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" device"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useDeviceDetection"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Pagination"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" currentPage"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{currentPage}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" totalPages"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onChange"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{setCurrentPage}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" siblings"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{device "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "mobile"'}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})})]})})})})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(g,{...e})}):g(e)}function s(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(k);})(); ;return Component;