Pagination

1"use client"
2
3import * as React from "react"
4import { cn } from "@/lib/utils"
5import { buttonVariants } from "@/components/fysk/button"
6import { useFyskConfig } from "@/components/fysk-provider"
7
8// --- Context ---
9type PaginationContextValue = {
10    variant?: "default" | "glass" | "minimal"
11    shape?: "circle" | "square" | "rounded"
12    size?: "sm" | "md" | "lg"
13}
14
15const PaginationContext = React.createContext<PaginationContextValue>({
16    variant: "default",
17    shape: "circle",
18    size: "md",
19})
20
21const usePaginationContext = () => React.useContext(PaginationContext)
22
23// --- Components ---
24
25const Pagination = ({
26    className,
27    variant = "default",
28    shape = "circle",
29    size = "md",
30    ...props
31}: React.ComponentProps<"nav"> & PaginationContextValue) => (
32    <PaginationContext.Provider value={{ variant, shape, size }}>
33        <nav
34            role="navigation"
35            aria-label="pagination"
36            className={cn("mx-auto flex w-full justify-center", className)}
37            {...props}
38        />
39    </PaginationContext.Provider>
40)
41Pagination.displayName = "Pagination"
42
43const PaginationContent = React.forwardRef<
44    HTMLUListElement,
45    React.ComponentProps<"ul">
46>(({ className, ...props }, ref) => {
47    const { variant } = usePaginationContext()
48    return (
49        <ul
50            ref={ref}
51            className={cn(
52                "flex flex-row items-center gap-1",
53                variant === "glass" &&
54                "rounded-full border border-border/50 bg-background/25 p-1 backdrop-blur-md",
55                variant === "minimal" && "gap-2",
56                className
57            )}
58            {...props}
59        />
60    )
61})
62PaginationContent.displayName = "PaginationContent"
63
64const PaginationItem = React.forwardRef<
65    HTMLLIElement,
66    React.ComponentProps<"li">
67>(({ className, ...props }, ref) => (
68    <li ref={ref} className={cn("", className)} {...props} />
69))
70PaginationItem.displayName = "PaginationItem"
71
72type PaginationLinkProps = {
73    isActive?: boolean
74    fixedSize?: boolean
75} & React.ComponentProps<"a">
76
77const PaginationLink = ({
78    className,
79    isActive,
80    size: sizeProp,
81    fixedSize = true, // Default to true (standard for numbers/icons)
82    ...props
83}: PaginationLinkProps & { size?: "sm" | "md" | "lg" | "icon" }) => {
84    const { variant, shape, size: ctxSize } = usePaginationContext()
85// … truncated