beez-ui 2.7.1 → 3.0.0

package/dist/components/hover-card.js

@@ -1,506 +1,80 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-/**
-* Arc's Hover Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a read-only preview of a person or
-* link that opens after half a second of hover or on keyboard focus, grows from the trigger edge on a smooth spring
-* and closes fast on leave. While a card is open, and briefly after it closes, moving to another trigger opens its
-* card almost at once and only fades. It keeps the Radix composition and adds Arc's `HoverCardProfile` preset.
-*/
-import * as React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
-import { motion } from "motion/react";
-import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { ArcFloatingSlot } from "../motion/arc-floating-slot.js";
-import { ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
-import { createOverlayWarmth, useOpenedWhileWarm } from "../motion/overlay-warmth.js";
-import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
-import { HOVER_CARD_CLOSE_DELAY_MS, HOVER_CARD_COLLISION_PADDING_PX, HOVER_CARD_INSTANT_MOTION, HOVER_CARD_MOTION, HOVER_CARD_OPEN_DELAY_MS, HOVER_CARD_PROFILE_INITIALS_LENGTH, HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX, HOVER_CARD_PROFILE_ROW_ORDER, HOVER_CARD_PROFILE_SETTLE_DELAY_S, HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX, HOVER_CARD_PROFILE_STAGGER_S, HOVER_CARD_SIDE_OFFSET_PX, HOVER_CARD_SKIP_WINDOW_MS, HOVER_CARD_WARM_OPEN_DELAY_MS } from "../constants/hover-card.js";
+import { HoverCard as HoverCardRoot, HoverCardContent, HoverCardProfile, HoverCardTrigger } from "./primitives/hover-card.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Every hover card on the page shares one skip window. */
-const hoverCardWarmth = createOverlayWarmth(HOVER_CARD_SKIP_WINDOW_MS);
-/** Whether the page was already warm when the surrounding layer opened, so its entrance only fades. */
-const HoverCardOpenedWhileWarmContext = React.createContext(false);
 /**
-* Owns the open state and timing of one hover card.
-* @param props - Radix root properties. `openDelay` defaults to Arc's 500ms and `closeDelay` to 140ms; within the
-*   skip window the card waits at most 80ms.
-* @returns The hover card root.
+* A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into
+* it.
+* @param props - The trigger, the preview and optional timing, placement and open state.
+* @returns The trigger with its hover card.
 */
 function HoverCard(t0) {
-	const $ = _c(19);
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({openDelay: t1, closeDelay: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = t1;
-		$[3] = t2;
-	} else {
-		props = $[1];
-		t1 = $[2];
-		t2 = $[3];
-	}
-	const openDelay = t1 === undefined ? HOVER_CARD_OPEN_DELAY_MS : t1;
-	const closeDelay = t2 === undefined ? HOVER_CARD_CLOSE_DELAY_MS : t2;
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
-	const isWarm = React.useSyncExternalStore(hoverCardWarmth.subscribe, hoverCardWarmth.isWarm, hoverCardWarmth.isWarmOnServer);
-	const openedWhileWarm = useOpenedWhileWarm(motionOpen, isWarm);
+	const $ = _c(20);
+	const { children, content, side: t1, align: t2, openDelay, closeDelay, className, contentClassName, sideOffset, collisionPadding, open, defaultOpen, onOpenChange } = t0;
+	const side = t1 === undefined ? "bottom" : t1;
+	const align = t2 === undefined ? "start" : t2;
 	let t3;
-	let t4;
-	if ($[4] !== motionOpen) {
-		t3 = () => {
-			if (!motionOpen) {
-				return;
-			}
-			return hoverCardWarmth.open();
-		};
-		t4 = [motionOpen];
-		$[4] = motionOpen;
-		$[5] = t3;
-		$[6] = t4;
-	} else {
-		t3 = $[5];
-		t4 = $[6];
-	}
-	React.useEffect(t3, t4);
-	const t5 = isWarm ? Math.min(openDelay, HOVER_CARD_WARM_OPEN_DELAY_MS) : openDelay;
-	let t6;
-	if ($[7] !== closeDelay || $[8] !== motionOpen || $[9] !== props || $[10] !== setMotionOpen || $[11] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Root, {
-			"data-slot": "hover-card",
-			...props,
-			openDelay: t5,
-			closeDelay,
-			open: motionOpen,
-			onOpenChange: setMotionOpen
-		});
-		$[7] = closeDelay;
-		$[8] = motionOpen;
-		$[9] = props;
-		$[10] = setMotionOpen;
-		$[11] = t5;
-		$[12] = t6;
-	} else {
-		t6 = $[12];
-	}
-	let t7;
-	if ($[13] !== openedWhileWarm || $[14] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(HoverCardOpenedWhileWarmContext.Provider, {
-			value: openedWhileWarm,
-			children: t6
+	if ($[0] !== children) {
+		t3 = /* @__PURE__ */ _jsx(HoverCardTrigger, {
+			asChild: true,
+			children
 		});
-		$[13] = openedWhileWarm;
-		$[14] = t6;
-		$[15] = t7;
+		$[0] = children;
+		$[1] = t3;
 	} else {
-		t7 = $[15];
+		t3 = $[1];
 	}
-	let t8;
-	if ($[16] !== motionOpen || $[17] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "hover-card",
-			open: motionOpen,
-			children: t7
-		});
-		$[16] = motionOpen;
-		$[17] = t7;
-		$[18] = t8;
-	} else {
-		t8 = $[18];
-	}
-	return t8;
-}
-function HoverCardTrigger(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Trigger, {
-			"data-slot": "hover-card-trigger",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Renders Arc's card: raised surface, hairline border, panel radius and floating shadow, 18.5rem wide at most.
-* @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 8px and `collisionPadding`
-*   to 12px.
-* @returns The portaled card.
-*/
-function HoverCardContent(t0) {
-	const $ = _c(22);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	let t3;
-	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, collisionPadding: t3, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
+	let t4;
+	if ($[2] !== className || $[3] !== contentClassName) {
+		t4 = cn(className, contentClassName);
+		$[2] = className;
+		$[3] = contentClassName;
+		$[4] = t4;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
+		t4 = $[4];
 	}
-	const align = t1 === undefined ? "center" : t1;
-	const sideOffset = t2 === undefined ? HOVER_CARD_SIDE_OFFSET_PX : t2;
-	const collisionPadding = t3 === undefined ? HOVER_CARD_COLLISION_PADDING_PX : t3;
-	const openedWhileWarm = React.useContext(HoverCardOpenedWhileWarmContext);
-	const t4 = props.forceMount;
 	let t5;
-	if ($[6] !== openedWhileWarm) {
-		t5 = () => openedWhileWarm ? HOVER_CARD_INSTANT_MOTION : HOVER_CARD_MOTION;
-		$[6] = openedWhileWarm;
-		$[7] = t5;
-	} else {
-		t5 = $[7];
-	}
-	let t6;
-	if ($[8] !== className) {
-		t6 = cn("z-50 box-border w-74 max-w-[min(18.5rem,var(--radix-hover-card-content-available-width,calc(100vw-24px)))] origin-(--radix-hover-card-content-transform-origin) rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) font-sans text-sm leading-(--leading-body) tracking-(--tracking-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
-		$[8] = className;
-		$[9] = t6;
-	} else {
-		t6 = $[9];
-	}
-	let t7;
-	if ($[10] !== align || $[11] !== collisionPadding || $[12] !== props || $[13] !== sideOffset || $[14] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Content, {
-			forceMount: true,
-			"data-slot": "hover-card-content",
+	if ($[5] !== align || $[6] !== collisionPadding || $[7] !== content || $[8] !== side || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(HoverCardContent, {
+			side,
 			align,
 			sideOffset,
 			collisionPadding,
-			className: t6,
-			...props
-		});
-		$[10] = align;
-		$[11] = collisionPadding;
-		$[12] = props;
-		$[13] = sideOffset;
-		$[14] = t6;
-		$[15] = t7;
-	} else {
-		t7 = $[15];
-	}
-	let t8;
-	if ($[16] !== t5 || $[17] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
-			motion: t5,
-			children: t7
-		});
-		$[16] = t5;
-		$[17] = t7;
-		$[18] = t8;
-	} else {
-		t8 = $[18];
-	}
-	let t9;
-	if ($[19] !== props.forceMount || $[20] !== t8) {
-		t9 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Portal, {
-			"data-slot": "hover-card-portal",
-			forceMount: true,
-			children: /* @__PURE__ */ _jsx(MotionPresence, {
-				scope: "hover-card",
-				forceMount: t4,
-				children: t8
-			})
-		});
-		$[19] = props.forceMount;
-		$[20] = t8;
-		$[21] = t9;
-	} else {
-		t9 = $[21];
-	}
-	return t9;
-}
-/**
-* Shows a portrait that fades in from a soft blur while it downloads, and at once when it is cached.
-* @param props.source - Portrait URL.
-* @returns The decorative portrait image.
-*/
-function HoverCardPortrait(t0) {
-	const $ = _c(7);
-	const { source } = t0;
-	const [isLoading, setIsLoading] = React.useState(false);
-	const imageRef = React.useRef(null);
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => {
-			const image = imageRef.current;
-			setIsLoading(Boolean(image && !image.complete));
-		};
-		$[0] = t1;
-	} else {
-		t1 = $[0];
-	}
-	let t2;
-	if ($[1] !== source) {
-		t2 = [source];
-		$[1] = source;
-		$[2] = t2;
-	} else {
-		t2 = $[2];
-	}
-	React.useLayoutEffect(t1, t2);
-	const t3 = isLoading || undefined;
-	let t4;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => setIsLoading(false);
-		$[3] = t4;
-	} else {
-		t4 = $[3];
-	}
-	let t5;
-	if ($[4] !== source || $[5] !== t3) {
-		t5 = /* @__PURE__ */ _jsx("img", {
-			ref: imageRef,
-			src: source,
-			alt: "",
-			width: HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX,
-			height: HOVER_CARD_PROFILE_PORTRAIT_SIZE_PX,
-			decoding: "async",
-			"data-loading": t3,
-			onLoad: t4,
-			className: "block size-full object-cover transition-[opacity,filter] duration-(--duration-standard) ease-(--ease-enter) data-loading:opacity-0 data-loading:blur-xs data-loading:transition-none motion-reduce:transition-none motion-reduce:data-loading:blur-none"
+			className: t4,
+			children: content
 		});
-		$[4] = source;
-		$[5] = t3;
-		$[6] = t5;
-	} else {
-		t5 = $[6];
-	}
-	return t5;
-}
-/**
-* Builds the initials shown when the profile has no portrait.
-* @param name - The person's name.
-* @returns Up to two uppercase initials.
-*/
-function initialsOf(name) {
-	return name.trim().split(/\s+/).slice(0, HOVER_CARD_PROFILE_INITIALS_LENGTH).map((word) => word[0]?.toUpperCase() ?? "").join("");
-}
-/**
-* Arc's person preview: portrait, name, role, a short bio, a couple of numbers and a quiet footer line. Its rows
-* settle in with a tiny stagger, and stay still when the user prefers reduced motion.
-* @param props - The person's details.
-* @returns The profile, meant as the child of `HoverCardContent`.
-*/
-function HoverCardProfile(t0) {
-	const $ = _c(39);
-	const { name, role, avatar, bio, stats: t1, meta, className } = t0;
-	let t2;
-	if ($[0] !== t1) {
-		t2 = t1 === undefined ? [] : t1;
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t2 = $[1];
-	}
-	const stats = t2;
-	const reduceMotion = usePrefersReducedMotion();
-	let t3;
-	if ($[2] !== reduceMotion) {
-		t3 = (order) => reduceMotion ? {} : {
-			initial: {
-				opacity: 0,
-				y: HOVER_CARD_PROFILE_SETTLE_DISTANCE_PX
-			},
-			animate: {
-				opacity: 1,
-				y: 0
-			},
-			transition: {
-				duration: ARC_DURATION.standard,
-				ease: [...ARC_EASE.enter],
-				delay: HOVER_CARD_PROFILE_SETTLE_DELAY_S + order * HOVER_CARD_PROFILE_STAGGER_S
-			}
-		};
-		$[2] = reduceMotion;
-		$[3] = t3;
-	} else {
-		t3 = $[3];
-	}
-	const settle = t3;
-	let t4;
-	if ($[4] !== className) {
-		t4 = cn("grid gap-(--space-3)", className);
-		$[4] = className;
-		$[5] = t4;
-	} else {
-		t4 = $[5];
-	}
-	let t5;
-	if ($[6] !== settle) {
-		t5 = settle(HOVER_CARD_PROFILE_ROW_ORDER.head);
-		$[6] = settle;
-		$[7] = t5;
+		$[5] = align;
+		$[6] = collisionPadding;
+		$[7] = content;
+		$[8] = side;
+		$[9] = sideOffset;
+		$[10] = t4;
+		$[11] = t5;
 	} else {
-		t5 = $[7];
+		t5 = $[11];
 	}
 	let t6;
-	if ($[8] !== avatar || $[9] !== name) {
-		t6 = typeof avatar === "string" ? /* @__PURE__ */ _jsx(HoverCardPortrait, { source: avatar }) : avatar ?? initialsOf(name);
-		$[8] = avatar;
-		$[9] = name;
-		$[10] = t6;
-	} else {
-		t6 = $[10];
-	}
-	let t7;
-	if ($[11] !== t6) {
-		t7 = /* @__PURE__ */ _jsx("span", {
-			"aria-hidden": "true",
-			className: "relative grid size-12 flex-none place-items-center overflow-hidden rounded-full border border-border bg-surface-muted text-sm font-medium text-foreground",
-			children: t6
-		});
-		$[11] = t6;
-		$[12] = t7;
-	} else {
-		t7 = $[12];
-	}
-	let t8;
-	if ($[13] !== name) {
-		t8 = /* @__PURE__ */ _jsx("span", {
-			className: "truncate text-base leading-(--leading-body) font-medium text-foreground",
-			children: name
-		});
-		$[13] = name;
-		$[14] = t8;
-	} else {
-		t8 = $[14];
-	}
-	let t9;
-	if ($[15] !== role) {
-		t9 = role ? /* @__PURE__ */ _jsx("span", {
-			className: "truncate text-sm leading-(--leading-body) text-text-secondary",
-			children: role
-		}) : null;
-		$[15] = role;
-		$[16] = t9;
-	} else {
-		t9 = $[16];
-	}
-	let t10;
-	if ($[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs("span", {
-			className: "grid min-w-0",
-			children: [t8, t9]
-		});
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else {
-		t10 = $[19];
-	}
-	let t11;
-	if ($[20] !== t10 || $[21] !== t5 || $[22] !== t7) {
-		t11 = /* @__PURE__ */ _jsxs(motion.div, {
-			className: "flex min-w-0 items-center gap-(--space-3)",
-			...t5,
-			children: [t7, t10]
-		});
-		$[20] = t10;
-		$[21] = t5;
-		$[22] = t7;
-		$[23] = t11;
-	} else {
-		t11 = $[23];
-	}
-	let t12;
-	if ($[24] !== bio || $[25] !== settle) {
-		t12 = bio ? /* @__PURE__ */ _jsx(motion.p, {
-			className: "m-0 text-sm leading-(--leading-body) text-text-secondary",
-			...settle(HOVER_CARD_PROFILE_ROW_ORDER.bio),
-			children: bio
-		}) : null;
-		$[24] = bio;
-		$[25] = settle;
-		$[26] = t12;
-	} else {
-		t12 = $[26];
-	}
-	let t13;
-	if ($[27] !== settle || $[28] !== stats) {
-		t13 = stats.length > 0 ? /* @__PURE__ */ _jsx(motion.dl, {
-			className: "m-0 flex flex-wrap gap-x-(--space-6) gap-y-(--space-2) border-t border-border-subtle pt-(--space-3)",
-			...settle(HOVER_CARD_PROFILE_ROW_ORDER.stats),
-			children: stats.map(_temp)
-		}) : null;
-		$[27] = settle;
-		$[28] = stats;
-		$[29] = t13;
-	} else {
-		t13 = $[29];
-	}
-	let t14;
-	if ($[30] !== meta || $[31] !== settle) {
-		t14 = meta ? /* @__PURE__ */ _jsx(motion.div, {
-			className: "flex items-center gap-1.5 text-xs leading-(--leading-body) text-text-muted [&_svg]:flex-none",
-			...settle(HOVER_CARD_PROFILE_ROW_ORDER.meta),
-			children: meta
-		}) : null;
-		$[30] = meta;
-		$[31] = settle;
-		$[32] = t14;
-	} else {
-		t14 = $[32];
-	}
-	let t15;
-	if ($[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t4) {
-		t15 = /* @__PURE__ */ _jsxs("div", {
-			"data-slot": "hover-card-profile",
-			className: t4,
-			children: [
-				t11,
-				t12,
-				t13,
-				t14
-			]
+	if ($[12] !== closeDelay || $[13] !== defaultOpen || $[14] !== onOpenChange || $[15] !== open || $[16] !== openDelay || $[17] !== t3 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(HoverCardRoot, {
+			openDelay,
+			closeDelay,
+			open,
+			defaultOpen,
+			onOpenChange,
+			children: [t3, t5]
 		});
-		$[33] = t11;
-		$[34] = t12;
-		$[35] = t13;
-		$[36] = t14;
-		$[37] = t4;
-		$[38] = t15;
-	} else {
-		t15 = $[38];
-	}
-	return t15;
-}
-function _temp(stat) {
-	return /* @__PURE__ */ _jsxs("div", {
-		className: "flex flex-col-reverse",
-		children: [/* @__PURE__ */ _jsx("dt", {
-			className: "text-xs leading-(--leading-body) text-text-muted",
-			children: stat.label
-		}), /* @__PURE__ */ _jsx("dd", {
-			className: "m-0 text-base leading-(--leading-body) font-medium text-foreground tabular-nums",
-			children: stat.value
-		})]
-	}, stat.label);
+		$[12] = closeDelay;
+		$[13] = defaultOpen;
+		$[14] = onOpenChange;
+		$[15] = open;
+		$[16] = openDelay;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else {
+		t6 = $[19];
+	}
+	return t6;
 }
-export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardProfile };
+export { HoverCard, HoverCardProfile };

package/dist/components/pagination.d.ts

@@ -1,37 +1,59 @@
 /**
- * Arc's Pagination (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): compact page controls on Arc's
- * tokens with tabular numbers, a current-page mark that glides to the newly selected page with Arc's morph spring,
- * hover only on fine pointers and arrows that press in. Unlike Arc's stateful component it stays composable: every
- * page is a link rendered through the provider's `Link` adapter (Next.js, TanStack Router or a native anchor).
+ * Arc's Pagination (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): previous and next arrows around a
+ * sliding five page window, with a current-page mark that glides to the selected page. Arc's API (`page`,
+ * `pageCount`, `onPageChange`, `label`), with beez-ui's extensions: links through the provider's `Link` adapter
+ * (`getHref`), cursor paging without a page count (`hasNextPage`), arrow labels and Spanish copy.
  */
-import type { ComponentProps } from "react";
-import type { ControlButton } from "./control-button.js";
-import { type LinkProps } from "./link.js";
+import type { MouseEvent } from "react";
 /**
- * Landmark that holds the page controls.
- * @param props - Native `nav` attributes; `aria-label` defaults to Spanish copy.
- * @returns The navigation landmark.
+ * Click that requested a page, from a page link or button or an arrow. Call `event.preventDefault()` on a link to keep
+ * the provider's `Link` from navigating, for example to page in place on plain clicks while modified clicks still
+ * open the address in a new tab.
  */
-declare function Pagination({ className, ...props }: ComponentProps<"nav">): import("react").JSX.Element;
-/** Lists page links; the current page's mark glides to the newly selected page. */
-declare function PaginationContent({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
-declare function PaginationItem({ ...props }: ComponentProps<"li">): import("react").JSX.Element;
-export type PaginationLinkProps = {
-    isActive?: boolean;
-} & Pick<ComponentProps<typeof ControlButton>, "size"> & LinkProps;
+export type PaginationClickEvent = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
+/** Called with the requested page and the click that requested it. */
+export type PaginationPageChangeHandler = (page: number, event: PaginationClickEvent) => void;
+/** Props shared by every way of paging. */
+type PaginationBaseProps = {
+    /** Current page, 1-based. Clamped to the range. */
+    page: number;
+    /**
+     * Total pages. Zero renders an empty landmark. Leave it out for cursor paging: only the arrows render, and
+     * `hasNextPage` decides whether the next one is enabled.
+     */
+    pageCount?: number;
+    /** Whether a page follows the current one, for cursor paging without `pageCount`. Ignored with `pageCount`. */
+    hasNextPage?: boolean;
+    /** Accessible name of the navigation landmark. Defaults to "Paginación". */
+    label?: string;
+    /** Visible label of the previous arrow, hidden on small screens. Defaults to "Anterior". */
+    previousLabel?: string;
+    /** Visible label of the next arrow, hidden on small screens. Defaults to "Siguiente". */
+    nextLabel?: string;
+    /** Classes of the navigation landmark. */
+    className?: string;
+};
+/** Props of `Pagination`: buttons that report the page, or links built with `getHref`. */
+export type PaginationProps = PaginationBaseProps & ({
+    /** Called with the requested page and the click event. */
+    onPageChange: PaginationPageChangeHandler;
+    getHref?: undefined;
+} | {
+    /**
+     * Called with the requested page and the click event when a link is clicked, before it navigates. Calling
+     * `event.preventDefault()` cancels the navigation of that link.
+     */
+    onPageChange?: PaginationPageChangeHandler;
+    /**
+     * Builds the address of a page. Every control becomes a link rendered through the provider's `Link` adapter,
+     * so pages live in the URL and render on the server.
+     */
+    getHref: (page: number) => string;
+});
 /**
- * One page, rendered through the provider's `Link` adapter or the `component` passed to it.
- * @param props - `isActive` marks the current page (`aria-current="page"`); `size` keeps the previous size names
- *   and only changes the horizontal padding; every other prop reaches the link. With `aria-disabled` the link
- *   stays visible but never navigates, whether clicked or activated with Enter, and `onClick` is not called.
- * @returns The page link.
+ * Previous and next arrows around a five page window. Disabled arrows keep `aria-disabled` and never request a page.
+ * @param props - Current page, page count or next-page flag, handlers and copy.
+ * @returns The navigation landmark.
  */
-declare function PaginationLink({ className, isActive, size, onClick, ...props }: PaginationLinkProps): import("react").JSX.Element;
-/** Previous and next links accept an optional visible label, hidden on small screens. */
-type PaginationStepProps = PaginationLinkProps & {
-    text?: string;
-};
-declare function PaginationPrevious({ className, text, ...props }: PaginationStepProps): import("react").JSX.Element;
-declare function PaginationNext({ className, text, ...props }: PaginationStepProps): import("react").JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+declare function Pagination({ page, pageCount, hasNextPage, onPageChange, getHref, label, previousLabel, nextLabel, className, }: PaginationProps): import("react").JSX.Element;
+export { Pagination };