@yahoo/uds 3.152.1 → 3.153.1-beta.1

package/dist/components/client/Pagination/computeVisiblePages.js

@@ -0,0 +1,21 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { ellipsisDefault } from "./ellipsisDefault.js";
+import { ellipsisNone } from "./ellipsisNone.js";
+//#region src/components/client/Pagination/computeVisiblePages.ts
+const MIN_MAX_VISIBLE_WITH_ELLIPSIS = 3;
+function computeVisiblePages({ activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement }) {
+	const max = ellipsisPlacement === "none" ? Math.max(1, maxVisiblePageNumbers) : Math.max(MIN_MAX_VISIBLE_WITH_ELLIPSIS, maxVisiblePageNumbers);
+	if (totalPages <= 0) return [];
+	if (typeof ellipsisPlacement === "function") return ellipsisPlacement({
+		activePage,
+		totalPages,
+		maxVisiblePageNumbers: max
+	});
+	switch (ellipsisPlacement) {
+		case "none": return ellipsisNone(activePage, totalPages, max);
+		default: return ellipsisDefault(activePage, totalPages, max);
+	}
+}
+//#endregion
+export { computeVisiblePages };

package/dist/components/client/Pagination/ellipsisDefault.cjs

@@ -0,0 +1,33 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/Pagination/ellipsisDefault.ts
+function range(start, end) {
+	const result = [];
+	for (let i = start; i <= end; i++) result.push(i);
+	return result;
+}
+/**
+* Pin first and last page when truncated; ellipses only where there is a gap.
+*/
+function ellipsisDefault(activePage, totalPages, maxVisiblePageNumbers) {
+	if (totalPages <= maxVisiblePageNumbers) return range(1, totalPages);
+	const middleBudget = Math.max(1, maxVisiblePageNumbers - 2);
+	const half = Math.floor((middleBudget - 1) / 2);
+	let windowStart = Math.max(2, activePage - half);
+	const windowEnd = Math.min(totalPages - 1, windowStart + middleBudget - 1);
+	windowStart = Math.max(2, windowEnd - middleBudget + 1);
+	const pageSet = new Set([1, totalPages]);
+	for (let i = windowStart; i <= windowEnd; i++) pageSet.add(i);
+	const sorted = [...pageSet].sort((a, b) => a - b);
+	const result = [];
+	for (let i = 0; i < sorted.length; i++) {
+		const page = sorted[i];
+		const prev = sorted[i - 1];
+		if (i > 0 && page - prev > 1) result.push("ellipsis");
+		result.push(page);
+	}
+	return result;
+}
+//#endregion
+exports.ellipsisDefault = ellipsisDefault;

package/dist/components/client/Pagination/ellipsisDefault.d.cts

@@ -0,0 +1,10 @@
+
+import { PaginationVisibleItem } from "../../../types/dist/index.cjs";
+
+//#region src/components/client/Pagination/ellipsisDefault.d.ts
+/**
+ * Pin first and last page when truncated; ellipses only where there is a gap.
+ */
+declare function ellipsisDefault(activePage: number, totalPages: number, maxVisiblePageNumbers: number): PaginationVisibleItem[];
+//#endregion
+export { ellipsisDefault };

package/dist/components/client/Pagination/ellipsisDefault.d.ts

@@ -0,0 +1,11 @@
+
+"use client";
+import { PaginationVisibleItem } from "../../../types/dist/index.js";
+
+//#region src/components/client/Pagination/ellipsisDefault.d.ts
+/**
+ * Pin first and last page when truncated; ellipses only where there is a gap.
+ */
+declare function ellipsisDefault(activePage: number, totalPages: number, maxVisiblePageNumbers: number): PaginationVisibleItem[];
+//#endregion
+export { ellipsisDefault };

package/dist/components/client/Pagination/ellipsisDefault.js

@@ -0,0 +1,32 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+//#region src/components/client/Pagination/ellipsisDefault.ts
+function range(start, end) {
+	const result = [];
+	for (let i = start; i <= end; i++) result.push(i);
+	return result;
+}
+/**
+* Pin first and last page when truncated; ellipses only where there is a gap.
+*/
+function ellipsisDefault(activePage, totalPages, maxVisiblePageNumbers) {
+	if (totalPages <= maxVisiblePageNumbers) return range(1, totalPages);
+	const middleBudget = Math.max(1, maxVisiblePageNumbers - 2);
+	const half = Math.floor((middleBudget - 1) / 2);
+	let windowStart = Math.max(2, activePage - half);
+	const windowEnd = Math.min(totalPages - 1, windowStart + middleBudget - 1);
+	windowStart = Math.max(2, windowEnd - middleBudget + 1);
+	const pageSet = new Set([1, totalPages]);
+	for (let i = windowStart; i <= windowEnd; i++) pageSet.add(i);
+	const sorted = [...pageSet].sort((a, b) => a - b);
+	const result = [];
+	for (let i = 0; i < sorted.length; i++) {
+		const page = sorted[i];
+		const prev = sorted[i - 1];
+		if (i > 0 && page - prev > 1) result.push("ellipsis");
+		result.push(page);
+	}
+	return result;
+}
+//#endregion
+export { ellipsisDefault };

package/dist/components/client/Pagination/ellipsisNone.cjs

@@ -0,0 +1,29 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/Pagination/ellipsisNone.ts
+function range(start, end) {
+	const result = [];
+	for (let i = start; i <= end; i++) result.push(i);
+	return result;
+}
+/**
+* Contiguous window around activePage only; never renders ellipses.
+*/
+function ellipsisNone(activePage, totalPages, maxVisiblePageNumbers) {
+	if (totalPages <= maxVisiblePageNumbers) return range(1, totalPages);
+	const windowSize = maxVisiblePageNumbers;
+	let start = activePage - Math.floor((windowSize - 1) / 2);
+	let end = start + windowSize - 1;
+	if (start < 1) {
+		start = 1;
+		end = windowSize;
+	}
+	if (end > totalPages) {
+		end = totalPages;
+		start = totalPages - windowSize + 1;
+	}
+	return range(start, end);
+}
+//#endregion
+exports.ellipsisNone = ellipsisNone;

package/dist/components/client/Pagination/ellipsisNone.d.cts

@@ -0,0 +1,10 @@
+
+import { PaginationVisibleItem } from "../../../types/dist/index.cjs";
+
+//#region src/components/client/Pagination/ellipsisNone.d.ts
+/**
+ * Contiguous window around activePage only; never renders ellipses.
+ */
+declare function ellipsisNone(activePage: number, totalPages: number, maxVisiblePageNumbers: number): PaginationVisibleItem[];
+//#endregion
+export { ellipsisNone };

package/dist/components/client/Pagination/ellipsisNone.d.ts

@@ -0,0 +1,11 @@
+
+"use client";
+import { PaginationVisibleItem } from "../../../types/dist/index.js";
+
+//#region src/components/client/Pagination/ellipsisNone.d.ts
+/**
+ * Contiguous window around activePage only; never renders ellipses.
+ */
+declare function ellipsisNone(activePage: number, totalPages: number, maxVisiblePageNumbers: number): PaginationVisibleItem[];
+//#endregion
+export { ellipsisNone };

package/dist/components/client/Pagination/ellipsisNone.js

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+//#region src/components/client/Pagination/ellipsisNone.ts
+function range(start, end) {
+	const result = [];
+	for (let i = start; i <= end; i++) result.push(i);
+	return result;
+}
+/**
+* Contiguous window around activePage only; never renders ellipses.
+*/
+function ellipsisNone(activePage, totalPages, maxVisiblePageNumbers) {
+	if (totalPages <= maxVisiblePageNumbers) return range(1, totalPages);
+	const windowSize = maxVisiblePageNumbers;
+	let start = activePage - Math.floor((windowSize - 1) / 2);
+	let end = start + windowSize - 1;
+	if (start < 1) {
+		start = 1;
+		end = windowSize;
+	}
+	if (end > totalPages) {
+		end = totalPages;
+		start = totalPages - windowSize + 1;
+	}
+	return range(start, end);
+}
+//#endregion
+export { ellipsisNone };

package/dist/components/client/Pagination/index.cjs

@@ -0,0 +1,19 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_client_Pagination_computeVisiblePages = require("./computeVisiblePages.cjs");
+const require_components_client_Pagination_Pagination = require("./Pagination.cjs");
+const require_components_client_Pagination_PaginationEllipsis = require("./PaginationEllipsis.cjs");
+const require_components_client_Pagination_PaginationItem = require("./PaginationItem.cjs");
+const require_components_client_Pagination_PaginationLink = require("./PaginationLink.cjs");
+const require_components_client_Pagination_PaginationNext = require("./PaginationNext.cjs");
+const require_components_client_Pagination_PaginationNumbers = require("./PaginationNumbers.cjs");
+const require_components_client_Pagination_PaginationPrev = require("./PaginationPrev.cjs");
+exports.Pagination = require_components_client_Pagination_Pagination.Pagination;
+exports.PaginationEllipsis = require_components_client_Pagination_PaginationEllipsis.PaginationEllipsis;
+exports.PaginationItem = require_components_client_Pagination_PaginationItem.PaginationItem;
+exports.PaginationLink = require_components_client_Pagination_PaginationLink.PaginationLink;
+exports.PaginationNext = require_components_client_Pagination_PaginationNext.PaginationNext;
+exports.PaginationNumbers = require_components_client_Pagination_PaginationNumbers.PaginationNumbers;
+exports.PaginationPrev = require_components_client_Pagination_PaginationPrev.PaginationPrev;
+exports.computeVisiblePages = require_components_client_Pagination_computeVisiblePages.computeVisiblePages;

package/dist/components/client/Pagination/index.d.cts

@@ -0,0 +1,10 @@
+
+import { computeVisiblePages } from "./computeVisiblePages.cjs";
+import { Pagination, PaginationProps } from "./Pagination.cjs";
+import { PaginationEllipsis, PaginationEllipsisProps } from "./PaginationEllipsis.cjs";
+import { PaginationItem, PaginationItemProps } from "./PaginationItem.cjs";
+import { PaginationLink, PaginationLinkProps } from "./PaginationLink.cjs";
+import { PaginationNext, PaginationNextProps } from "./PaginationNext.cjs";
+import { PaginationNumbers, PaginationNumbersProps } from "./PaginationNumbers.cjs";
+import { PaginationPrev, PaginationPrevProps } from "./PaginationPrev.cjs";
+export { Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationNumbers, type PaginationNumbersProps, PaginationPrev, type PaginationPrevProps, type PaginationProps, computeVisiblePages };

package/dist/components/client/Pagination/index.d.ts

@@ -0,0 +1,11 @@
+
+"use client";
+import { computeVisiblePages } from "./computeVisiblePages.js";
+import { Pagination, PaginationProps } from "./Pagination.js";
+import { PaginationEllipsis, PaginationEllipsisProps } from "./PaginationEllipsis.js";
+import { PaginationItem, PaginationItemProps } from "./PaginationItem.js";
+import { PaginationLink, PaginationLinkProps } from "./PaginationLink.js";
+import { PaginationNext, PaginationNextProps } from "./PaginationNext.js";
+import { PaginationNumbers, PaginationNumbersProps } from "./PaginationNumbers.js";
+import { PaginationPrev, PaginationPrevProps } from "./PaginationPrev.js";
+export { Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationNumbers, type PaginationNumbersProps, PaginationPrev, type PaginationPrevProps, type PaginationProps, computeVisiblePages };

package/dist/components/client/Pagination/index.js

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { computeVisiblePages } from "./computeVisiblePages.js";
+import { Pagination } from "./Pagination.js";
+import { PaginationEllipsis } from "./PaginationEllipsis.js";
+import { PaginationItem } from "./PaginationItem.js";
+import { PaginationLink } from "./PaginationLink.js";
+import { PaginationNext } from "./PaginationNext.js";
+import { PaginationNumbers } from "./PaginationNumbers.js";
+import { PaginationPrev } from "./PaginationPrev.js";
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNumbers, PaginationPrev, computeVisiblePages };

package/dist/components/client/Pagination/paginationContext.cjs

@@ -0,0 +1,44 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_components_client_Pagination_computeVisiblePages = require("./computeVisiblePages.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Pagination/paginationContext.tsx
+const defaultGetItemAriaLabel = (page, isActive) => isActive ? `Page ${page}, current page` : `Go to page ${page}`;
+const PaginationContext = (0, react.createContext)(null);
+const PaginationProvider = ({ value, children }) => {
+	const contextValue = (0, react.useMemo)(() => value, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+PaginationProvider.displayName = "PaginationProvider";
+function usePaginationContext() {
+	const context = (0, react.useContext)(PaginationContext);
+	if (!context) throw new Error("Pagination components must be used within a Pagination provider.");
+	return context;
+}
+function useVisiblePages() {
+	const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } = usePaginationContext();
+	return (0, react.useMemo)(() => require_components_client_Pagination_computeVisiblePages.computeVisiblePages({
+		activePage,
+		totalPages,
+		maxVisiblePageNumbers,
+		ellipsisPlacement
+	}), [
+		activePage,
+		totalPages,
+		maxVisiblePageNumbers,
+		ellipsisPlacement
+	]);
+}
+//#endregion
+exports.PaginationContext = PaginationContext;
+exports.PaginationProvider = PaginationProvider;
+exports.defaultGetItemAriaLabel = defaultGetItemAriaLabel;
+exports.usePaginationContext = usePaginationContext;
+exports.useVisiblePages = useVisiblePages;

package/dist/components/client/Pagination/paginationContext.d.cts

@@ -0,0 +1,34 @@
+
+import { PaginationEllipsisPlacement, PaginationSize, PaginationVariant, PaginationVisibleItem } from "../../../types/dist/index.cjs";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Pagination/paginationContext.d.ts
+interface PaginationContextValue {
+  activePage: number;
+  totalPages: number;
+  maxVisiblePageNumbers: number;
+  ellipsisPlacement: PaginationEllipsisPlacement;
+  size: PaginationSize;
+  variant: PaginationVariant;
+  getPageHref?: (page: number) => string;
+  getItemAriaLabel: (page: number, isActive: boolean) => string;
+  onPageChange?: (page: number) => void;
+}
+declare const defaultGetItemAriaLabel: (page: number, isActive: boolean) => string;
+declare const PaginationContext: _$react.Context<PaginationContextValue | null>;
+interface PaginationProviderProps {
+  value: Omit<PaginationContextValue, never>;
+  children: React.ReactNode;
+}
+declare const PaginationProvider: {
+  ({
+    value,
+    children
+  }: PaginationProviderProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+declare function usePaginationContext(): PaginationContextValue;
+declare function useVisiblePages(): PaginationVisibleItem[];
+//#endregion
+export { PaginationContext, PaginationProvider, defaultGetItemAriaLabel, usePaginationContext, useVisiblePages };

package/dist/components/client/Pagination/paginationContext.d.ts

@@ -0,0 +1,35 @@
+
+"use client";
+import { PaginationEllipsisPlacement, PaginationSize, PaginationVariant, PaginationVisibleItem } from "../../../types/dist/index.js";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Pagination/paginationContext.d.ts
+interface PaginationContextValue {
+  activePage: number;
+  totalPages: number;
+  maxVisiblePageNumbers: number;
+  ellipsisPlacement: PaginationEllipsisPlacement;
+  size: PaginationSize;
+  variant: PaginationVariant;
+  getPageHref?: (page: number) => string;
+  getItemAriaLabel: (page: number, isActive: boolean) => string;
+  onPageChange?: (page: number) => void;
+}
+declare const defaultGetItemAriaLabel: (page: number, isActive: boolean) => string;
+declare const PaginationContext: _$react.Context<PaginationContextValue | null>;
+interface PaginationProviderProps {
+  value: Omit<PaginationContextValue, never>;
+  children: React.ReactNode;
+}
+declare const PaginationProvider: {
+  ({
+    value,
+    children
+  }: PaginationProviderProps): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+declare function usePaginationContext(): PaginationContextValue;
+declare function useVisiblePages(): PaginationVisibleItem[];
+//#endregion
+export { PaginationContext, PaginationProvider, defaultGetItemAriaLabel, usePaginationContext, useVisiblePages };

package/dist/components/client/Pagination/paginationContext.js

@@ -0,0 +1,38 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+"use client";
+import { computeVisiblePages } from "./computeVisiblePages.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/client/Pagination/paginationContext.tsx
+const defaultGetItemAriaLabel = (page, isActive) => isActive ? `Page ${page}, current page` : `Go to page ${page}`;
+const PaginationContext = createContext(null);
+const PaginationProvider = ({ value, children }) => {
+	const contextValue = useMemo(() => value, [value]);
+	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+PaginationProvider.displayName = "PaginationProvider";
+function usePaginationContext() {
+	const context = useContext(PaginationContext);
+	if (!context) throw new Error("Pagination components must be used within a Pagination provider.");
+	return context;
+}
+function useVisiblePages() {
+	const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } = usePaginationContext();
+	return useMemo(() => computeVisiblePages({
+		activePage,
+		totalPages,
+		maxVisiblePageNumbers,
+		ellipsisPlacement
+	}), [
+		activePage,
+		totalPages,
+		maxVisiblePageNumbers,
+		ellipsisPlacement
+	]);
+}
+//#endregion
+export { PaginationContext, PaginationProvider, defaultGetItemAriaLabel, usePaginationContext, useVisiblePages };

package/dist/components/client/Pagination/paginationStyles.cjs

@@ -0,0 +1,72 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+let react = require("react");
+//#region src/components/client/Pagination/paginationStyles.ts
+const PAGINATION_CONTROL_HEIGHT = "h-[var(--uds-pagination-control-size)]";
+const PAGINATION_PAGE_ITEM_LAYOUT = [
+	"inline-grid shrink-0 place-items-center place-content-center rounded-full box-border",
+	PAGINATION_CONTROL_HEIGHT,
+	"w-[var(--uds-pagination-control-size)]"
+].join(" ");
+const PAGINATION_PREV_NEXT_LAYOUT = ["inline-grid shrink-0 auto-cols-max grid-flow-col place-items-center place-content-center box-border gap-1", PAGINATION_CONTROL_HEIGHT].join(" ");
+function usePaginationRootClassName(size, className) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeRoot: size }), "inline-flex items-center justify-center", className), [size, className]);
+}
+function usePaginationGapClassName(size) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeRoot: size })), [size]);
+}
+function usePaginationItemClassName(size, variant, isActive, className) {
+	const activeState = isActive ? "on" : "off";
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeItem: size }), require_styles_styler.getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: activeState
+	}), "relative m-0 border-solid", PAGINATION_PAGE_ITEM_LAYOUT, "appearance-none uds-ring cursor-pointer select-none", isActive && "pointer-events-none", className), [
+		size,
+		variant,
+		activeState,
+		isActive,
+		className
+	]);
+}
+function usePaginationPrevNextClassName(size, variant, className) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeItem: size }), require_styles_styler.getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: "off"
+	}), "m-0", PAGINATION_PREV_NEXT_LAYOUT, "border-solid uds-ring cursor-pointer select-none", className), [
+		size,
+		variant,
+		className
+	]);
+}
+function usePaginationIconClassName(size) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeIcon: size })), [size]);
+}
+function usePaginationEllipsisClassName(size, variant, className) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeItem: size }), require_styles_styler.getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: "off"
+	}), "m-0", PAGINATION_PAGE_ITEM_LAYOUT, "pointer-events-none", className), [
+		size,
+		variant,
+		className
+	]);
+}
+const PAGINATION_TEXT_OPTICAL_CENTER = ["block shrink-0 tabular-nums !leading-none", "[text-box-trim:trim-both] [text-box-edge:cap_alphabetic]"].join(" ");
+function usePaginationTextClassName(size) {
+	return (0, react.useMemo)(() => require_styles_styler.cx(require_styles_styler.getStyles({ paginationSizeText: size }), PAGINATION_TEXT_OPTICAL_CENTER), [size]);
+}
+function usePaginationItemLabelClassName(size) {
+	return usePaginationTextClassName(size);
+}
+//#endregion
+exports.usePaginationEllipsisClassName = usePaginationEllipsisClassName;
+exports.usePaginationGapClassName = usePaginationGapClassName;
+exports.usePaginationIconClassName = usePaginationIconClassName;
+exports.usePaginationItemClassName = usePaginationItemClassName;
+exports.usePaginationItemLabelClassName = usePaginationItemLabelClassName;
+exports.usePaginationPrevNextClassName = usePaginationPrevNextClassName;
+exports.usePaginationRootClassName = usePaginationRootClassName;
+exports.usePaginationTextClassName = usePaginationTextClassName;

package/dist/components/client/Pagination/paginationStyles.d.cts

@@ -0,0 +1,14 @@
+
+import { PaginationSize, PaginationVariant } from "../../../types/dist/index.cjs";
+
+//#region src/components/client/Pagination/paginationStyles.d.ts
+declare function usePaginationRootClassName(size: PaginationSize, className?: string): string;
+declare function usePaginationGapClassName(size: PaginationSize): string;
+declare function usePaginationItemClassName(size: PaginationSize, variant: PaginationVariant, isActive: boolean, className?: string): string;
+declare function usePaginationPrevNextClassName(size: PaginationSize, variant: PaginationVariant, className?: string): string;
+declare function usePaginationIconClassName(size: PaginationSize): string;
+declare function usePaginationEllipsisClassName(size: PaginationSize, variant: PaginationVariant, className?: string): string;
+declare function usePaginationTextClassName(size: PaginationSize): string;
+declare function usePaginationItemLabelClassName(size: PaginationSize): string;
+//#endregion
+export { usePaginationEllipsisClassName, usePaginationGapClassName, usePaginationIconClassName, usePaginationItemClassName, usePaginationItemLabelClassName, usePaginationPrevNextClassName, usePaginationRootClassName, usePaginationTextClassName };

package/dist/components/client/Pagination/paginationStyles.d.ts

@@ -0,0 +1,15 @@
+
+"use client";
+import { PaginationSize, PaginationVariant } from "../../../types/dist/index.js";
+
+//#region src/components/client/Pagination/paginationStyles.d.ts
+declare function usePaginationRootClassName(size: PaginationSize, className?: string): string;
+declare function usePaginationGapClassName(size: PaginationSize): string;
+declare function usePaginationItemClassName(size: PaginationSize, variant: PaginationVariant, isActive: boolean, className?: string): string;
+declare function usePaginationPrevNextClassName(size: PaginationSize, variant: PaginationVariant, className?: string): string;
+declare function usePaginationIconClassName(size: PaginationSize): string;
+declare function usePaginationEllipsisClassName(size: PaginationSize, variant: PaginationVariant, className?: string): string;
+declare function usePaginationTextClassName(size: PaginationSize): string;
+declare function usePaginationItemLabelClassName(size: PaginationSize): string;
+//#endregion
+export { usePaginationEllipsisClassName, usePaginationGapClassName, usePaginationIconClassName, usePaginationItemClassName, usePaginationItemLabelClassName, usePaginationPrevNextClassName, usePaginationRootClassName, usePaginationTextClassName };

package/dist/components/client/Pagination/paginationStyles.js

@@ -0,0 +1,63 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { useMemo } from "react";
+//#region src/components/client/Pagination/paginationStyles.ts
+const PAGINATION_CONTROL_HEIGHT = "h-[var(--uds-pagination-control-size)]";
+const PAGINATION_PAGE_ITEM_LAYOUT = [
+	"inline-grid shrink-0 place-items-center place-content-center rounded-full box-border",
+	PAGINATION_CONTROL_HEIGHT,
+	"w-[var(--uds-pagination-control-size)]"
+].join(" ");
+const PAGINATION_PREV_NEXT_LAYOUT = ["inline-grid shrink-0 auto-cols-max grid-flow-col place-items-center place-content-center box-border gap-1", PAGINATION_CONTROL_HEIGHT].join(" ");
+function usePaginationRootClassName(size, className) {
+	return useMemo(() => cx(getStyles({ paginationSizeRoot: size }), "inline-flex items-center justify-center", className), [size, className]);
+}
+function usePaginationGapClassName(size) {
+	return useMemo(() => cx(getStyles({ paginationSizeRoot: size })), [size]);
+}
+function usePaginationItemClassName(size, variant, isActive, className) {
+	const activeState = isActive ? "on" : "off";
+	return useMemo(() => cx(getStyles({ paginationSizeItem: size }), getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: activeState
+	}), "relative m-0 border-solid", PAGINATION_PAGE_ITEM_LAYOUT, "appearance-none uds-ring cursor-pointer select-none", isActive && "pointer-events-none", className), [
+		size,
+		variant,
+		activeState,
+		isActive,
+		className
+	]);
+}
+function usePaginationPrevNextClassName(size, variant, className) {
+	return useMemo(() => cx(getStyles({ paginationSizeItem: size }), getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: "off"
+	}), "m-0", PAGINATION_PREV_NEXT_LAYOUT, "border-solid uds-ring cursor-pointer select-none", className), [
+		size,
+		variant,
+		className
+	]);
+}
+function usePaginationIconClassName(size) {
+	return useMemo(() => cx(getStyles({ paginationSizeIcon: size })), [size]);
+}
+function usePaginationEllipsisClassName(size, variant, className) {
+	return useMemo(() => cx(getStyles({ paginationSizeItem: size }), getStyles({
+		paginationVariantRoot: variant,
+		paginationVariantActiveRoot: "off"
+	}), "m-0", PAGINATION_PAGE_ITEM_LAYOUT, "pointer-events-none", className), [
+		size,
+		variant,
+		className
+	]);
+}
+const PAGINATION_TEXT_OPTICAL_CENTER = ["block shrink-0 tabular-nums !leading-none", "[text-box-trim:trim-both] [text-box-edge:cap_alphabetic]"].join(" ");
+function usePaginationTextClassName(size) {
+	return useMemo(() => cx(getStyles({ paginationSizeText: size }), PAGINATION_TEXT_OPTICAL_CENTER), [size]);
+}
+function usePaginationItemLabelClassName(size) {
+	return usePaginationTextClassName(size);
+}
+//#endregion
+export { usePaginationEllipsisClassName, usePaginationGapClassName, usePaginationIconClassName, usePaginationItemClassName, usePaginationItemLabelClassName, usePaginationPrevNextClassName, usePaginationRootClassName, usePaginationTextClassName };

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts

@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/index.cjs

@@ -39,6 +39,13 @@ const require_components_client_PaddleNav_PaddleButtonNext = require("./PaddleNa
 const require_components_client_PaddleNav_PaddleButtonPrevious = require("./PaddleNav/PaddleButtonPrevious.cjs");
 const require_components_client_PaddleNav_PaddleNavContent = require("./PaddleNav/PaddleNavContent.cjs");
 const require_components_client_PaddleNav_PaddleNav = require("./PaddleNav/PaddleNav.cjs");
+const require_components_client_Pagination_Pagination = require("./Pagination/Pagination.cjs");
+const require_components_client_Pagination_PaginationEllipsis = require("./Pagination/PaginationEllipsis.cjs");
+const require_components_client_Pagination_PaginationItem = require("./Pagination/PaginationItem.cjs");
+const require_components_client_Pagination_PaginationLink = require("./Pagination/PaginationLink.cjs");
+const require_components_client_Pagination_PaginationNext = require("./Pagination/PaginationNext.cjs");
+const require_components_client_Pagination_PaginationNumbers = require("./Pagination/PaginationNumbers.cjs");
+const require_components_client_Pagination_PaginationPrev = require("./Pagination/PaginationPrev.cjs");
 const require_components_client_Popover_UDSPopoverConfigProvider = require("./Popover/UDSPopoverConfigProvider.cjs");
 const require_components_client_Popover_Popover = require("./Popover/Popover.cjs");
 const require_components_client_Popover_PopoverContent = require("./Popover/PopoverContent.cjs");
@@ -98,6 +105,13 @@ exports.PaddleButtonNext = require_components_client_PaddleNav_PaddleButtonNext.
 exports.PaddleButtonPrevious = require_components_client_PaddleNav_PaddleButtonPrevious.PaddleButtonPrevious;
 exports.PaddleNav = require_components_client_PaddleNav_PaddleNav.PaddleNav;
 exports.PaddleNavContent = require_components_client_PaddleNav_PaddleNavContent.PaddleNavContent;
+exports.Pagination = require_components_client_Pagination_Pagination.Pagination;
+exports.PaginationEllipsis = require_components_client_Pagination_PaginationEllipsis.PaginationEllipsis;
+exports.PaginationItem = require_components_client_Pagination_PaginationItem.PaginationItem;
+exports.PaginationLink = require_components_client_Pagination_PaginationLink.PaginationLink;
+exports.PaginationNext = require_components_client_Pagination_PaginationNext.PaginationNext;
+exports.PaginationNumbers = require_components_client_Pagination_PaginationNumbers.PaginationNumbers;
+exports.PaginationPrev = require_components_client_Pagination_PaginationPrev.PaginationPrev;
 exports.Popover = require_components_client_Popover_Popover.Popover;
 exports.PopoverContent = require_components_client_Popover_PopoverContent.PopoverContent;
 exports.PopoverTrigger = require_components_client_Popover_PopoverTrigger.PopoverTrigger;