beez-ui 2.7.1 → 3.0.0

package/dist/components/pagination.js

@@ -1,426 +1,190 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { cva } from "class-variance-authority";
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import { PAGINATION_DEFAULT_COPY } from "../constants/pagination.js";
-import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
-import { cn } from "../lib/utils.js";
-import { useArcPress } from "../motion/arc-press.js";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { useAttachedElement } from "../motion/use-attached-element.js";
-import { Link } from "./link.js";
+import { PAGINATION_DEFAULT_COPY, PAGINATION_FIRST_PAGE, PAGINATION_WINDOW_SIZE } from "../constants/pagination.js";
+import { PaginationButton, PaginationContent, PaginationItem, PaginationLink, PaginationRoot, PaginationStep } from "./primitives/pagination.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
-* Landmark that holds the page controls.
-* @param props - Native `nav` attributes; `aria-label` defaults to Spanish copy.
-* @returns The navigation landmark.
+* Lists the pages of the window around the current page.
+* @param currentPage - Clamped current page.
+* @param pageCount - Total pages.
+* @returns The visible page numbers, in order.
 */
-function Pagination(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("mx-auto flex w-full justify-center", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("nav", {
-			role: "navigation",
-			"aria-label": PAGINATION_DEFAULT_COPY.navigationLabel,
-			"data-slot": "pagination",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-/** Lists page links; the current page's mark glides to the newly selected page. */
-function PaginationContent(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("flex flex-wrap items-center gap-(--space-1)", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
-			preset: "pagination",
-			children: /* @__PURE__ */ _jsx("ul", {
-				"data-slot": "pagination-content",
-				className: t1,
-				...props
-			})
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function PaginationItem(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("li", {
-			"data-slot": "pagination-item",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
+function getVisiblePages(currentPage, pageCount) {
+	const halfWindow = Math.floor(PAGINATION_WINDOW_SIZE / 2);
+	const start = Math.max(PAGINATION_FIRST_PAGE, Math.min(pageCount - PAGINATION_WINDOW_SIZE + 1, currentPage - halfWindow));
+	return Array.from({ length: Math.min(pageCount, PAGINATION_WINDOW_SIZE) }, (_, index) => start + index);
 }
 /**
-* Arc's page control: a control-height square for numbers, padded for labelled arrows. The current page draws the
-* raised mark (border, surface and resting shadow) that the glide copies while it travels.
-*/
-const paginationLinkVariants = cva("relative inline-flex h-(--control-height-sm) min-w-(--control-height-sm) shrink-0 cursor-pointer items-center justify-center gap-1 rounded-(--radius-control) border border-transparent bg-transparent font-sans text-xs font-medium whitespace-nowrap text-text-secondary tabular-nums no-underline [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow,opacity] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:bg-surface-muted hover-fine:text-foreground aria-[current=page]:border-border aria-[current=page]:bg-surface aria-[current=page]:text-foreground aria-[current=page]:shadow-(--shadow-resting) aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-	variants: { size: {
-		default: "px-(--space-3)",
-		xs: "px-(--space-2)",
-		sm: "px-(--space-2)",
-		lg: "px-(--space-4)",
-		icon: "px-0",
-		"icon-xs": "px-0",
-		"icon-sm": "px-0",
-		"icon-lg": "px-0"
-	} },
-	defaultVariants: { size: "icon" }
-});
-/**
-* 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.
 */
-function PaginationLink(t0) {
-	const $ = _c(19);
-	let className;
-	let isActive;
-	let onClick;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, isActive, size: t1, onClick, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = isActive;
-		$[3] = onClick;
-		$[4] = props;
-		$[5] = t1;
-	} else {
-		className = $[1];
-		isActive = $[2];
-		onClick = $[3];
-		props = $[4];
-		t1 = $[5];
-	}
-	const size = t1 === undefined ? "icon" : t1;
-	const isDisabled = props["aria-disabled"] === true || props["aria-disabled"] === "true";
-	let t2;
-	if ($[6] !== isDisabled || $[7] !== onClick) {
-		t2 = function handleClick(event) {
-			if (isDisabled) {
-				event.preventDefault();
-				return;
-			}
-			onClick?.(event);
-		};
-		$[6] = isDisabled;
-		$[7] = onClick;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	const handleClick = t2;
-	const t3 = isActive ? "page" : undefined;
-	let t4;
-	if ($[9] !== className || $[10] !== size) {
-		t4 = cn(paginationLinkVariants({ size }), className);
-		$[9] = className;
-		$[10] = size;
-		$[11] = t4;
-	} else {
-		t4 = $[11];
-	}
-	let t5;
-	if ($[12] !== handleClick || $[13] !== isActive || $[14] !== props || $[15] !== size || $[16] !== t3 || $[17] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(Link, {
-			"aria-current": t3,
-			"data-slot": "pagination-link",
-			"data-active": isActive,
-			"data-size": size,
-			className: t4,
-			...props,
-			onClick: handleClick
-		});
-		$[12] = handleClick;
-		$[13] = isActive;
-		$[14] = props;
-		$[15] = size;
-		$[16] = t3;
-		$[17] = t4;
-		$[18] = t5;
-	} else {
-		t5 = $[18];
-	}
-	return t5;
-}
-/** A previous or next arrow: Arc presses it in, while page numbers stay still and let the mark travel. */
-function PaginationStep(t0) {
-	const $ = _c(6);
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-		$[2] = ref;
-	} else {
-		props = $[1];
-		ref = $[2];
-	}
-	const reduceMotion = usePrefersReducedMotion();
-	const [element, attach] = useAttachedElement(ref);
-	useArcPress(element, !reduceMotion);
-	let t1;
-	if ($[3] !== attach || $[4] !== props) {
-		t1 = /* @__PURE__ */ _jsx(PaginationLink, {
-			ref: attach,
-			size: "default",
-			...props
-		});
-		$[3] = attach;
-		$[4] = props;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	return t1;
-}
-function PaginationPrevious(t0) {
-	const $ = _c(13);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, text: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const text = t1 === undefined ? PAGINATION_DEFAULT_COPY.previousText : t1;
-	let t2;
-	if ($[4] !== className) {
-		t2 = cn("pl-(--space-2)", className);
-		$[4] = className;
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	let t3;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(ChevronLeftIcon, {
-			"data-icon": "inline-start",
-			"aria-hidden": "true"
-		});
-		$[6] = t3;
-	} else {
-		t3 = $[6];
-	}
-	let t4;
-	if ($[7] !== text) {
-		t4 = /* @__PURE__ */ _jsx("span", {
-			className: "hidden sm:block",
-			children: text
-		});
-		$[7] = text;
-		$[8] = t4;
-	} else {
-		t4 = $[8];
-	}
-	let t5;
-	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ _jsxs(PaginationStep, {
-			"aria-label": PAGINATION_DEFAULT_COPY.previousLabel,
-			className: t2,
-			...props,
-			children: [t3, t4]
-		});
-		$[9] = props;
-		$[10] = t2;
-		$[11] = t4;
-		$[12] = t5;
-	} else {
-		t5 = $[12];
-	}
-	return t5;
-}
-function PaginationNext(t0) {
-	const $ = _c(13);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, text: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const text = t1 === undefined ? PAGINATION_DEFAULT_COPY.nextText : t1;
-	let t2;
-	if ($[4] !== className) {
-		t2 = cn("pr-(--space-2)", className);
-		$[4] = className;
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	let t3;
-	if ($[6] !== text) {
-		t3 = /* @__PURE__ */ _jsx("span", {
-			className: "hidden sm:block",
-			children: text
-		});
-		$[6] = text;
-		$[7] = t3;
-	} else {
-		t3 = $[7];
-	}
-	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
-			"data-icon": "inline-end",
-			"aria-hidden": "true"
-		});
-		$[8] = t4;
-	} else {
-		t4 = $[8];
-	}
+function Pagination(t0) {
+	const $ = _c(43);
+	const { page, pageCount, hasNextPage: t1, onPageChange, getHref, label: t2, previousLabel: t3, nextLabel: t4, className } = t0;
+	const hasNextPage = t1 === undefined ? false : t1;
+	const label = t2 === undefined ? PAGINATION_DEFAULT_COPY.navigationLabel : t2;
+	const previousLabel = t3 === undefined ? PAGINATION_DEFAULT_COPY.previousText : t3;
+	const nextLabel = t4 === undefined ? PAGINATION_DEFAULT_COPY.nextText : t4;
+	const isCursor = pageCount === undefined;
+	const safePageCount = isCursor ? 0 : Math.max(0, Math.floor(pageCount));
+	if (!isCursor && safePageCount === 0) {
+		let t5;
+		if ($[0] !== className || $[1] !== label) {
+			t5 = /* @__PURE__ */ _jsx(PaginationRoot, {
+				"aria-label": label,
+				className
+			});
+			$[0] = className;
+			$[1] = label;
+			$[2] = t5;
+		} else {
+			t5 = $[2];
+		}
+		return t5;
+	}
+	const lowestPage = Math.max(PAGINATION_FIRST_PAGE, Math.floor(page));
+	const currentPage = isCursor ? lowestPage : Math.min(lowestPage, safePageCount);
+	const isFirst = currentPage <= PAGINATION_FIRST_PAGE;
+	const isLast = isCursor ? !hasNextPage : currentPage >= safePageCount;
 	let t5;
-	if ($[9] !== props || $[10] !== t2 || $[11] !== t3) {
-		t5 = /* @__PURE__ */ _jsxs(PaginationStep, {
-			"aria-label": PAGINATION_DEFAULT_COPY.nextLabel,
-			className: t2,
-			...props,
-			children: [t3, t4]
+	if ($[3] !== getHref) {
+		t5 = (target) => getHref?.(target);
+		$[3] = getHref;
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	const hrefOf = t5;
+	const t6 = previousLabel === PAGINATION_DEFAULT_COPY.previousText ? PAGINATION_DEFAULT_COPY.previousLabel : previousLabel;
+	const t7 = isFirst ? currentPage : currentPage - 1;
+	let t8;
+	if ($[5] !== hrefOf || $[6] !== t7) {
+		t8 = hrefOf(t7);
+		$[5] = hrefOf;
+		$[6] = t7;
+		$[7] = t8;
+	} else {
+		t8 = $[7];
+	}
+	let t9;
+	if ($[8] !== currentPage || $[9] !== onPageChange) {
+		t9 = (event) => onPageChange?.(currentPage - 1, event);
+		$[8] = currentPage;
+		$[9] = onPageChange;
+		$[10] = t9;
+	} else {
+		t9 = $[10];
+	}
+	let t10;
+	if ($[11] !== isFirst || $[12] !== previousLabel || $[13] !== t6 || $[14] !== t8 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(PaginationItem, { children: /* @__PURE__ */ _jsx(PaginationStep, {
+			direction: "previous",
+			text: previousLabel,
+			label: t6,
+			href: t8,
+			disabled: isFirst,
+			onClick: t9
+		}) });
+		$[11] = isFirst;
+		$[12] = previousLabel;
+		$[13] = t6;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== currentPage || $[18] !== getHref || $[19] !== isCursor || $[20] !== onPageChange || $[21] !== safePageCount) {
+		t11 = isCursor ? null : getVisiblePages(currentPage, safePageCount).map((pageNumber) => {
+			const controlProps = {
+				isActive: pageNumber === currentPage,
+				"aria-label": `${PAGINATION_DEFAULT_COPY.pageLabelPrefix} ${pageNumber}`,
+				onClick: (event_0) => onPageChange?.(pageNumber, event_0),
+				children: pageNumber
+			};
+			return /* @__PURE__ */ _jsx(PaginationItem, { children: getHref ? /* @__PURE__ */ _jsx(PaginationLink, {
+				href: getHref(pageNumber),
+				...controlProps
+			}) : /* @__PURE__ */ _jsx(PaginationButton, { ...controlProps }) }, pageNumber);
 		});
-		$[9] = props;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t5;
-	} else {
-		t5 = $[12];
-	}
-	return t5;
-}
-function PaginationEllipsis(t0) {
-	const $ = _c(10);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("flex size-(--control-height-sm) items-center justify-center text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(MoreHorizontalIcon, {});
-		t3 = /* @__PURE__ */ _jsx("span", {
-			className: "sr-only",
-			children: PAGINATION_DEFAULT_COPY.morePages
-		});
-		$[5] = t2;
-		$[6] = t3;
-	} else {
-		t2 = $[5];
-		t3 = $[6];
-	}
-	let t4;
-	if ($[7] !== props || $[8] !== t1) {
-		t4 = /* @__PURE__ */ _jsxs("span", {
-			"aria-hidden": true,
-			"data-slot": "pagination-ellipsis",
-			className: t1,
-			...props,
-			children: [t2, t3]
+		$[17] = currentPage;
+		$[18] = getHref;
+		$[19] = isCursor;
+		$[20] = onPageChange;
+		$[21] = safePageCount;
+		$[22] = t11;
+	} else {
+		t11 = $[22];
+	}
+	const t12 = nextLabel === PAGINATION_DEFAULT_COPY.nextText ? PAGINATION_DEFAULT_COPY.nextLabel : nextLabel;
+	const t13 = isLast ? currentPage : currentPage + 1;
+	let t14;
+	if ($[23] !== hrefOf || $[24] !== t13) {
+		t14 = hrefOf(t13);
+		$[23] = hrefOf;
+		$[24] = t13;
+		$[25] = t14;
+	} else {
+		t14 = $[25];
+	}
+	let t15;
+	if ($[26] !== currentPage || $[27] !== onPageChange) {
+		t15 = (event_1) => onPageChange?.(currentPage + 1, event_1);
+		$[26] = currentPage;
+		$[27] = onPageChange;
+		$[28] = t15;
+	} else {
+		t15 = $[28];
+	}
+	let t16;
+	if ($[29] !== isLast || $[30] !== nextLabel || $[31] !== t12 || $[32] !== t14 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(PaginationItem, { children: /* @__PURE__ */ _jsx(PaginationStep, {
+			direction: "next",
+			text: nextLabel,
+			label: t12,
+			href: t14,
+			disabled: isLast,
+			onClick: t15
+		}) });
+		$[29] = isLast;
+		$[30] = nextLabel;
+		$[31] = t12;
+		$[32] = t14;
+		$[33] = t15;
+		$[34] = t16;
+	} else {
+		t16 = $[34];
+	}
+	let t17;
+	if ($[35] !== t10 || $[36] !== t11 || $[37] !== t16) {
+		t17 = /* @__PURE__ */ _jsxs(PaginationContent, { children: [
+			t10,
+			t11,
+			t16
+		] });
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t16;
+		$[38] = t17;
+	} else {
+		t17 = $[38];
+	}
+	let t18;
+	if ($[39] !== className || $[40] !== label || $[41] !== t17) {
+		t18 = /* @__PURE__ */ _jsx(PaginationRoot, {
+			"aria-label": label,
+			className,
+			children: t17
 		});
-		$[7] = props;
-		$[8] = t1;
-		$[9] = t4;
+		$[39] = className;
+		$[40] = label;
+		$[41] = t17;
+		$[42] = t18;
 	} else {
-		t4 = $[9];
+		t18 = $[42];
 	}
-	return t4;
+	return t18;
 }
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+export { Pagination };

package/dist/components/popover.d.ts

@@ -1,29 +1,17 @@
 /**
  * Arc's Popover (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a raised panel with Arc's panel radius
  * and floating shadow that starts a few pixels toward its trigger and settles on a spring, leaving faster than it
- * arrives. It keeps the Radix composition and adds Arc's `PopoverClose`.
+ * arrives. It follows Arc's composition: `Popover`, `PopoverTrigger`, `PopoverContent` and `PopoverClose`.
  */
-import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
-declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
-/** Closes the popover that contains it, such as a "Listo" or "Cancelar" button inside the panel. */
-declare function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
+import type { ComponentProps } from "react";
+import { Popover, PopoverClose, PopoverContent as PopoverContentPrimitive, PopoverTrigger } from "./primitives/popover.js";
+export type PopoverContentProps = ComponentProps<typeof PopoverContentPrimitive>;
 /**
- * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
- * Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
- * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
- *   to 10px.
- * @returns The portaled panel.
+ * Renders the portaled panel anchored to the trigger, kept inside the viewport; content taller than the room left
+ * scrolls inside the panel.
+ * @param props - Radix content properties. Arc's defaults: `align="start"`, a 6px `sideOffset` and a 10px
+ *   `collisionPadding`.
+ * @returns The panel.
  */
-declare function PopoverContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
-declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
-/**
- * Groups popover headings with compact spacing.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
-declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+declare function PopoverContent({ align, ...props }: PopoverContentProps): import("react").JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };