beez-ui 2.5.0 → 2.6.1

package/dist/components/hover-card.js

@@ -1,51 +1,117 @@
 "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 { MotionSlot } from "../motion/motion-slot.js";
+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 { jsx as _jsx } from "react/jsx-runtime";
+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 { 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.
+*/
 function HoverCard(t0) {
-	const $ = _c(9);
+	const $ = _c(19);
 	let props;
+	let t1;
+	let t2;
 	if ($[0] !== t0) {
-		({...props} = 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);
-	let t1;
-	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
-		t1 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Root, {
+	const isWarm = React.useSyncExternalStore(hoverCardWarmth.subscribe, hoverCardWarmth.isWarm, hoverCardWarmth.isWarmOnServer);
+	const openedWhileWarm = useOpenedWhileWarm(motionOpen, isWarm);
+	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
 		});
-		$[2] = motionOpen;
-		$[3] = props;
-		$[4] = setMotionOpen;
-		$[5] = t1;
+		$[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
+		});
+		$[13] = openedWhileWarm;
+		$[14] = t6;
+		$[15] = t7;
 	} else {
-		t1 = $[5];
+		t7 = $[15];
 	}
-	let t2;
-	if ($[6] !== motionOpen || $[7] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+	let t8;
+	if ($[16] !== motionOpen || $[17] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
 			scope: "hover-card",
 			open: motionOpen,
-			children: t1
+			children: t7
 		});
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
+		$[16] = motionOpen;
+		$[17] = t7;
+		$[18] = t8;
 	} else {
-		t2 = $[8];
+		t8 = $[18];
 	}
-	return t2;
+	return t8;
 }
 function HoverCardTrigger(t0) {
 	const $ = _c(4);
@@ -70,74 +136,371 @@ function HoverCardTrigger(t0) {
 	}
 	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(15);
+	const $ = _c(22);
 	let className;
 	let props;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, ...props} = t0);
+		({className, align: t1, sideOffset: t2, collisionPadding: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
 		$[3] = t1;
 		$[4] = t2;
+		$[5] = t3;
 	} else {
 		className = $[1];
 		props = $[2];
 		t1 = $[3];
 		t2 = $[4];
+		t3 = $[5];
 	}
 	const align = t1 === undefined ? "center" : t1;
-	const sideOffset = t2 === undefined ? 4 : t2;
-	const t3 = props.forceMount;
-	let t4;
-	if ($[5] !== className) {
-		t4 = cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ", className);
-		$[5] = className;
-		$[6] = t4;
+	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 {
-		t4 = $[6];
+		t5 = $[7];
 	}
-	let t5;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
-			children: /* @__PURE__ */ _jsx(HoverCardPrimitive.Content, {
-				forceMount: true,
-				"data-slot": "hover-card-content",
-				align,
-				sideOffset,
-				className: t4,
-				...props
-			})
+	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",
+			align,
+			sideOffset,
+			collisionPadding,
+			className: t6,
+			...props
 		});
-		$[7] = align;
-		$[8] = props;
-		$[9] = sideOffset;
-		$[10] = t4;
-		$[11] = t5;
+		$[10] = align;
+		$[11] = collisionPadding;
+		$[12] = props;
+		$[13] = sideOffset;
+		$[14] = t6;
+		$[15] = t7;
 	} else {
-		t5 = $[11];
+		t7 = $[15];
 	}
-	let t6;
-	if ($[12] !== props.forceMount || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(HoverCardPrimitive.Portal, {
+	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: t3,
-				children: t5
+				forceMount: t4,
+				children: t8
 			})
 		});
-		$[12] = props.forceMount;
-		$[13] = t5;
-		$[14] = t6;
+		$[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 {
-		t6 = $[14];
+		t4 = $[3];
 	}
-	return t6;
+	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"
+		});
+		$[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;
+	} else {
+		t5 = $[7];
+	}
+	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
+			]
+		});
+		$[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);
 }
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardProfile };

package/dist/components/pagination.d.ts

@@ -1,19 +1,37 @@
-import * as React from "react";
+/**
+ * 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).
+ */
+import type { ComponentProps } from "react";
+import type { ControlButton } from "./control-button.js";
 import { type LinkProps } from "./link.js";
-import { ControlButton } from "./control-button.js";
-declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
-/** Lists page links; the current page's highlight glides to the newly selected page. */
-declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
-declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+/**
+ * Landmark that holds the page controls.
+ * @param props - Native `nav` attributes; `aria-label` defaults to Spanish copy.
+ * @returns The navigation landmark.
+ */
+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<React.ComponentProps<typeof ControlButton>, "size"> & LinkProps;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
-declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+} & Pick<ComponentProps<typeof ControlButton>, "size"> & LinkProps;
+/**
+ * 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.
+ */
+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;
-}): React.JSX.Element;
-declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
-    text?: string;
-}): React.JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+};
+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, };