Pagination

1// Base UI base pagination — TRANSCRIBED from upstream's `bases/base-ui/ui/pagination.tsx`
2// (maintainer-supplied), class strings verbatim. There is no pagination primitive in any base;
3// the family is host elements plus button styling, and the only base-specific question is how the
4// link acquires that styling.
5//
6// THE LINK GOES THROUGH `Button`, NOT THROUGH `buttonVariants`. The radix base writes
7// `<Button asChild><a/></Button>`, where Slot is a pure prop-merger that layers no button
8// semantics onto the anchor. Base UI has no Slot, so upstream uses the `render` prop plus
9// `nativeButton={false}` — the documented escape for "this Button is not a native `<button>`".
10//
11// THE TWO BASES THEREFORE DIVERGE OBSERVABLY, and that is upstream's call, not a porting bug:
12// this base's links carry `role="button"` and `tabindex="0"` (verified by rendering) where the
13// radix base's carry neither. `nativeButton={false}` is what keeps keyboard activation working on
14// a non-button element, which is the trade upstream chose. Do not "fix" this toward radix by
15// dropping Button for a bare `buttonVariants()` anchor: it diverges from the source, and it also
16// drops the key handling Base UI attaches.
17//
18// Octane adaptations: lucide-react → @octanejs/lucide, and children are passed explicitly rather
19// than riding along in the props spread — React's `ComponentProps<"a">` carries `children`, octane
20// routes it through its own channel.
21import { createElement, type OctaneNode } from 'octane';
22import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
23 
24import { cn } from '@/lib/utils';
25import { Button, type ButtonProps } from '@/components/ui/button';
26 
27type Props = { className?: string } & Record<string, unknown>;
28 
29export function Pagination({ className, ...props }: Props) @{
30	<nav
31		role="navigation"
32		aria-label="pagination"
33		data-slot="pagination"
34		className={cn('mx-auto flex w-full justify-center', className)}
35		{...props}
36	/>
37}
38 
39export function PaginationContent({ className, ...props }: Props) @{
40	<ul
41		data-slot="pagination-content"
42		className={cn('flex items-center gap-0.5', className)}
43		{...props}
44	/>
45}
46 
47export function PaginationItem(props: Record<string, unknown>) @{
48	<li data-slot="pagination-item" {...props} />
49}
50 
51export interface PaginationLinkProps extends Record<string, unknown> {
52	className?: string;
53	isActive?: boolean;
54	size?: ButtonProps['size'];
55	children?: OctaneNode;
56}
57 
58// … truncated