@yahoo/uds 3.152.1 → 3.153.1-beta.1

package/dist/automated-config/dist/utils/index.js

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
 import { configurableProperties } from "../properties.js";
+import { filterPseudoStatesByExclusion, getExcludedPseudoStatesForComponentStateOption } from "./componentStatePseudoStates.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import { findFixtureTypeForValue } from "./buildConfigSchema.js";
@@ -18,7 +19,9 @@ import { isFunction, mergeWith } from "lodash-es";
 //#region ../automated-config/dist/utils/index.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const CSS_GAP = "gap";
+const CSS_PADDING = "padding";
 const CSS_LINE_HEIGHT = "line-height";
+const PAGINATION_CONTROL_SIZE_VAR = "--uds-pagination-control-size";
 const CSS_BORDER_WIDTH = "border-width";
 const CSS_BORDER_RADIUS = "border-radius";
 const CSS_BORDER_COLOR = "border-color";
@@ -58,6 +61,10 @@ const COMPONENTS_WITH_SHADOW_BORDERS = [
 	{
 		componentName: "tabs",
 		layer: "root"
+	},
+	{
+		componentName: "pagination",
+		layer: "root"
 	}
 ];
 /**
@@ -103,6 +110,15 @@ function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey,
 	return lineHeight;
 }
 /**
+* Shared pagination control height: padding on all sides plus icon size.
+* Keeps page circles, prev/next, and ellipsis vertically aligned when spacing changes.
+*/
+function getPaginationControlSize({ padding, schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (iconSizeValue) return `calc(2 * ${padding} + ${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
+	return `calc(2 * ${padding} + 1em)`;
+}
+/**
 * Forces button borders to use box-shadow instead of border properties.
 * Converts border-width and border-color into an inset box-shadow layer.
 *
@@ -141,11 +157,37 @@ function applyBoxShadowBorder(classStyles) {
 	const bottomColor = classStyles[CSS_BORDER_BOTTOM_COLOR] ?? borderColor;
 	const leftColor = classStyles[CSS_BORDER_LEFT_COLOR] ?? borderColor;
 	const borderLayers = [];
-	if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
-	if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
-	if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
-	if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
-	if (borderLayers.length === 0) return classStyles;
+	const sidesWithBorder = [
+		topWidth,
+		rightWidth,
+		bottomWidth,
+		leftWidth
+	].map((width, index) => {
+		const color = [
+			topColor,
+			rightColor,
+			bottomColor,
+			leftColor
+		][index];
+		return {
+			width: stripImportant(width ?? "").trim(),
+			color: stripImportant(color ?? "").trim()
+		};
+	}).filter(({ width }) => !isZeroWidth(width));
+	if (sidesWithBorder.length === 0) return classStyles;
+	const uniformWidth = sidesWithBorder.every(({ width }) => width === sidesWithBorder[0].width);
+	const uniformColor = sidesWithBorder.every(({ color }) => color && color === sidesWithBorder[0].color);
+	const hasBorderWidthShorthand = borderWidth !== void 0 && !isZeroWidth(borderWidth);
+	const allSidesBordered = sidesWithBorder.length === 4;
+	if ((hasBorderWidthShorthand || allSidesBordered) && uniformWidth && uniformColor) {
+		const { width, color } = sidesWithBorder[0];
+		borderLayers.push(`inset 0 0 0 ${width} ${color}`);
+	} else {
+		if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
+		if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
+		if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
+		if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
+	}
 	const layers = [...borderLayers, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
 	const needsImportant = hasImportant(topWidth) || hasImportant(rightWidth) || hasImportant(bottomWidth) || hasImportant(leftWidth) || hasImportant(topColor) || hasImportant(rightColor) || hasImportant(bottomColor) || hasImportant(leftColor) || hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
 	const newStyles = { ...classStyles };
@@ -184,7 +226,7 @@ const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, e
 	if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
 	return newValue;
 };
-function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
+function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions, excludedPseudoStates = [] }) {
 	const schemaKey = generateSchemaKey({
 		variantKey,
 		variantValue,
@@ -206,7 +248,7 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 	if (!propertyStateMap) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
 	const styles = {};
 	const skipRestForProperty = originalPropertyDefinition.skipRestState === true;
-	const declaredPseudoStates = originalPropertyDefinition.pseudoStates ?? [];
+	const declaredPseudoStates = filterPseudoStatesByExclusion(originalPropertyDefinition.pseudoStates, excludedPseudoStates);
 	const declaredPropertyStates = new Set([...skipRestForProperty ? [] : ["rest"], ...declaredPseudoStates]);
 	for (const propStateStr in propertyStateMap) {
 		if (!declaredPropertyStates.has(propStateStr)) continue;
@@ -318,6 +360,21 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
 				});
 			}
 		}
+		if (componentName === "pagination" && layer === "item" && propertyKey === "spacing") {
+			const padding = cssDeclarations[CSS_PADDING];
+			if (padding) cssDeclarations[PAGINATION_CONTROL_SIZE_VAR] = getPaginationControlSize({
+				padding,
+				schema,
+				iconLayerKey: generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "icon",
+					subComponentName
+				}),
+				state: propertyState,
+				theme
+			});
+		}
 		if (componentName === "paddlenav" && layer === "root") {
 			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
 			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
@@ -389,26 +446,30 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 			const componentStates = variantConfig.componentStates;
 			for (const componentStateKey in componentStates) {
 				const componentState = componentStates[componentStateKey];
-				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-					const layer = componentState.layers[layerKey];
-					for (const propertyKey in layer.properties) {
-						const originalPropertyDefinition = layer.properties[propertyKey];
-						const declarations = generateDeclaration({
-							componentName,
-							variantKey,
-							variantValue: variantOption,
-							componentStateKey,
-							componentStateValue: componentStateOption,
-							layer: layerKey,
-							layerOptionalPseudoSelector: layer.pseudoSelector,
-							propertyKey,
-							originalPropertyDefinition,
-							theme,
-							schema,
-							currentStyles: styles,
-							previewOptions
-						});
-						styles = deepMerge(styles, declarations);
+				for (const componentStateOption of componentState.options) {
+					const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+					for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						for (const propertyKey in layer.properties) {
+							const originalPropertyDefinition = layer.properties[propertyKey];
+							const declarations = generateDeclaration({
+								componentName,
+								variantKey,
+								variantValue: variantOption,
+								componentStateKey,
+								componentStateValue: componentStateOption,
+								layer: layerKey,
+								layerOptionalPseudoSelector: layer.pseudoSelector,
+								propertyKey,
+								originalPropertyDefinition,
+								theme,
+								schema,
+								currentStyles: styles,
+								previewOptions,
+								excludedPseudoStates
+							});
+							styles = deepMerge(styles, declarations);
+						}
 					}
 				}
 			}
@@ -444,27 +505,31 @@ function generateConfigStyles(config, schema, theme, previewOptions) {
 				const componentStates = variantConfig.componentStates;
 				for (const componentStateKey in componentStates) {
 					const componentState = componentStates[componentStateKey];
-					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
-						const layer = componentState.layers[layerKey];
-						for (const propertyKey in layer.properties) {
-							const originalPropertyDefinition = layer.properties[propertyKey];
-							const declarations = generateDeclaration({
-								componentName,
-								variantKey,
-								variantValue: variantOption,
-								componentStateKey,
-								componentStateValue: componentStateOption,
-								subComponentName: subComponentKey,
-								layer: layerKey,
-								layerOptionalPseudoSelector: layer.pseudoSelector,
-								propertyKey,
-								originalPropertyDefinition,
-								theme,
-								schema,
-								currentStyles: styles,
-								previewOptions
-							});
-							styles = deepMerge(styles, declarations);
+					for (const componentStateOption of componentState.options) {
+						const excludedPseudoStates = getExcludedPseudoStatesForComponentStateOption(componentState, componentStateOption);
+						for (const layerKey in componentState.layers) {
+							const layer = componentState.layers[layerKey];
+							for (const propertyKey in layer.properties) {
+								const originalPropertyDefinition = layer.properties[propertyKey];
+								const declarations = generateDeclaration({
+									componentName,
+									variantKey,
+									variantValue: variantOption,
+									componentStateKey,
+									componentStateValue: componentStateOption,
+									subComponentName: subComponentKey,
+									layer: layerKey,
+									layerOptionalPseudoSelector: layer.pseudoSelector,
+									propertyKey,
+									originalPropertyDefinition,
+									theme,
+									schema,
+									currentStyles: styles,
+									previewOptions,
+									excludedPseudoStates
+								});
+								styles = deepMerge(styles, declarations);
+							}
 						}
 					}
 				}
@@ -612,4 +677,4 @@ function createSubComponentConfig(config) {
 	return config;
 }
 //#endregion
-export { createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };
+export { applyBoxShadowBorder, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, statePseudoMapDocsMode };

package/dist/components/client/IconButton.cjs

@@ -64,7 +64,7 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
 	const iconSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
 	const iconVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
 	const styles = (0, react.useMemo)(() => ({
-		root: require_styles_styler.cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color, box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
+		root: require_styles_styler.cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
 		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx(iconSizeClass, iconVariantClass) }),
 		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
 			"animate-spin",

package/dist/components/client/IconButton.js

@@ -62,7 +62,7 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
 	const iconSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
 	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
 	const styles = useMemo(() => ({
-		root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color, box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
+		root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
 		icon: getStyles({ className: cx(iconSizeClass, iconVariantClass) }),
 		loadingIcon: getStyles({ className: cx([
 			"animate-spin",

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -87,6 +87,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

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

@@ -0,0 +1,62 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_components_client_Pagination_paginationContext = require("./paginationContext.cjs");
+const require_components_client_Pagination_paginationStyles = require("./paginationStyles.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Pagination/Pagination.tsx
+/**
+* **Pagination — numbered page navigation component**
+*
+* @componentType Client component
+*
+* @description Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
+* The consumer owns `activePage` state.
+*
+* @example
+* ```tsx
+* <Pagination activePage={page} totalPages={10} onPageChange={setPage} aria-label="Results">
+*   <PaginationPrev />
+*   <PaginationNumbers />
+*   <PaginationNext />
+* </Pagination>
+* ```
+*/
+const Pagination = (0, react.forwardRef)(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "default", size = "md", variant = "default", getPageHref, getItemAriaLabel = require_components_client_Pagination_paginationContext.defaultGetItemAriaLabel, onPageChange, children, className, "aria-label": ariaLabel = "Pagination", ...rest }, ref) {
+	const rootClass = require_components_client_Pagination_paginationStyles.usePaginationRootClassName(size, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pagination_paginationContext.PaginationProvider, {
+		value: (0, react.useMemo)(() => ({
+			activePage,
+			totalPages,
+			maxVisiblePageNumbers,
+			ellipsisPlacement,
+			size,
+			variant,
+			getPageHref,
+			getItemAriaLabel,
+			onPageChange
+		}), [
+			activePage,
+			totalPages,
+			maxVisiblePageNumbers,
+			ellipsisPlacement,
+			size,
+			variant,
+			getPageHref,
+			getItemAriaLabel,
+			onPageChange
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			ref,
+			"aria-label": ariaLabel,
+			className: rootClass,
+			...rest,
+			children
+		})
+	});
+});
+Pagination.displayName = "Pagination";
+//#endregion
+exports.Pagination = Pagination;

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

@@ -0,0 +1,28 @@
+
+import { UniversalPaginationProps } from "../../../types/dist/index.cjs";
+import * as _$react from "react";
+import { HTMLAttributes } from "react";
+
+//#region src/components/client/Pagination/Pagination.d.ts
+type HtmlNavProps = Omit<HTMLAttributes<HTMLElement>, 'color'>;
+type PaginationProps = UniversalPaginationProps & HtmlNavProps;
+/**
+ * **Pagination — numbered page navigation component**
+ *
+ * @componentType Client component
+ *
+ * @description Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
+ * The consumer owns `activePage` state.
+ *
+ * @example
+ * ```tsx
+ * <Pagination activePage={page} totalPages={10} onPageChange={setPage} aria-label="Results">
+ *   <PaginationPrev />
+ *   <PaginationNumbers />
+ *   <PaginationNext />
+ * </Pagination>
+ * ```
+ */
+declare const Pagination: _$react.ForwardRefExoticComponent<UniversalPaginationProps & HtmlNavProps & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { Pagination, type PaginationProps };

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

@@ -0,0 +1,29 @@
+
+"use client";
+import { UniversalPaginationProps } from "../../../types/dist/index.js";
+import * as _$react from "react";
+import { HTMLAttributes } from "react";
+
+//#region src/components/client/Pagination/Pagination.d.ts
+type HtmlNavProps = Omit<HTMLAttributes<HTMLElement>, 'color'>;
+type PaginationProps = UniversalPaginationProps & HtmlNavProps;
+/**
+ * **Pagination — numbered page navigation component**
+ *
+ * @componentType Client component
+ *
+ * @description Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
+ * The consumer owns `activePage` state.
+ *
+ * @example
+ * ```tsx
+ * <Pagination activePage={page} totalPages={10} onPageChange={setPage} aria-label="Results">
+ *   <PaginationPrev />
+ *   <PaginationNumbers />
+ *   <PaginationNext />
+ * </Pagination>
+ * ```
+ */
+declare const Pagination: _$react.ForwardRefExoticComponent<UniversalPaginationProps & HtmlNavProps & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { Pagination, type PaginationProps };

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

@@ -0,0 +1,60 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { PaginationProvider, defaultGetItemAriaLabel } from "./paginationContext.js";
+import { usePaginationRootClassName } from "./paginationStyles.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/client/Pagination/Pagination.tsx
+/**
+* **Pagination — numbered page navigation component**
+*
+* @componentType Client component
+*
+* @description Compose with `PaginationPrev`, `PaginationNumbers`, and `PaginationNext`.
+* The consumer owns `activePage` state.
+*
+* @example
+* ```tsx
+* <Pagination activePage={page} totalPages={10} onPageChange={setPage} aria-label="Results">
+*   <PaginationPrev />
+*   <PaginationNumbers />
+*   <PaginationNext />
+* </Pagination>
+* ```
+*/
+const Pagination = forwardRef(function Pagination({ activePage, totalPages, maxVisiblePageNumbers = 7, ellipsisPlacement = "default", size = "md", variant = "default", getPageHref, getItemAriaLabel = defaultGetItemAriaLabel, onPageChange, children, className, "aria-label": ariaLabel = "Pagination", ...rest }, ref) {
+	const rootClass = usePaginationRootClassName(size, className);
+	return /* @__PURE__ */ jsx(PaginationProvider, {
+		value: useMemo(() => ({
+			activePage,
+			totalPages,
+			maxVisiblePageNumbers,
+			ellipsisPlacement,
+			size,
+			variant,
+			getPageHref,
+			getItemAriaLabel,
+			onPageChange
+		}), [
+			activePage,
+			totalPages,
+			maxVisiblePageNumbers,
+			ellipsisPlacement,
+			size,
+			variant,
+			getPageHref,
+			getItemAriaLabel,
+			onPageChange
+		]),
+		children: /* @__PURE__ */ jsx("nav", {
+			ref,
+			"aria-label": ariaLabel,
+			className: rootClass,
+			...rest,
+			children
+		})
+	});
+});
+Pagination.displayName = "Pagination";
+//#endregion
+export { Pagination };

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

@@ -0,0 +1,24 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_components_client_Pagination_paginationContext = require("./paginationContext.cjs");
+const require_components_client_Pagination_paginationStyles = require("./paginationStyles.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Pagination/PaginationEllipsis.tsx
+const PaginationEllipsis = (0, react.forwardRef)(function PaginationEllipsis({ className }, ref) {
+	const { size, variant } = require_components_client_Pagination_paginationContext.usePaginationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		"aria-hidden": true,
+		className: require_components_client_Pagination_paginationStyles.usePaginationEllipsisClassName(size, variant, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_components_client_Pagination_paginationStyles.usePaginationItemLabelClassName(size),
+			children: "…"
+		})
+	});
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+//#endregion
+exports.PaginationEllipsis = PaginationEllipsis;

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

@@ -0,0 +1,10 @@
+
+import * as _$react from "react";
+
+//#region src/components/client/Pagination/PaginationEllipsis.d.ts
+type PaginationEllipsisProps = {
+  className?: string;
+};
+declare const PaginationEllipsis: _$react.ForwardRefExoticComponent<PaginationEllipsisProps & _$react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { PaginationEllipsis, type PaginationEllipsisProps };

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

@@ -0,0 +1,11 @@
+
+"use client";
+import * as _$react from "react";
+
+//#region src/components/client/Pagination/PaginationEllipsis.d.ts
+type PaginationEllipsisProps = {
+  className?: string;
+};
+declare const PaginationEllipsis: _$react.ForwardRefExoticComponent<PaginationEllipsisProps & _$react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { PaginationEllipsis, type PaginationEllipsisProps };

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

@@ -0,0 +1,22 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { usePaginationContext } from "./paginationContext.js";
+import { usePaginationEllipsisClassName, usePaginationItemLabelClassName } from "./paginationStyles.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/client/Pagination/PaginationEllipsis.tsx
+const PaginationEllipsis = forwardRef(function PaginationEllipsis({ className }, ref) {
+	const { size, variant } = usePaginationContext();
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": true,
+		className: usePaginationEllipsisClassName(size, variant, className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: usePaginationItemLabelClassName(size),
+			children: "…"
+		})
+	});
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+//#endregion
+export { PaginationEllipsis };

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

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_utils_createSlot = require("../../../utils/createSlot.cjs");
+const require_components_client_Pagination_paginationContext = require("./paginationContext.cjs");
+const require_components_client_Pagination_paginationStyles = require("./paginationStyles.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Pagination/PaginationItem.tsx
+const Slot = require_utils_createSlot.createSlot();
+const PaginationItem = (0, react.forwardRef)(function PaginationItem({ page, asChild = false, children, className, onClick, ...rest }, ref) {
+	const { activePage, size, variant, getItemAriaLabel, onPageChange } = require_components_client_Pagination_paginationContext.usePaginationContext();
+	const isActive = page === activePage;
+	const itemClass = require_components_client_Pagination_paginationStyles.usePaginationItemClassName(size, variant, isActive, className);
+	const labelClass = require_components_client_Pagination_paginationStyles.usePaginationItemLabelClassName(size);
+	const ariaLabel = getItemAriaLabel(page, isActive);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && !isActive) onPageChange?.(page);
+	};
+	const label = children ?? page;
+	const Comp = asChild ? Slot : "button";
+	if (asChild && (0, react.isValidElement)(children)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+		ref,
+		type: "button",
+		className: itemClass,
+		"aria-current": isActive ? "page" : void 0,
+		"aria-label": ariaLabel,
+		onClick: isActive ? void 0 : handleClick,
+		disabled: isActive,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+		ref,
+		type: "button",
+		className: itemClass,
+		"aria-current": isActive ? "page" : void 0,
+		"aria-label": ariaLabel,
+		onClick: isActive ? void 0 : handleClick,
+		disabled: isActive,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: labelClass,
+			children: label
+		})
+	});
+});
+PaginationItem.displayName = "PaginationItem";
+//#endregion
+exports.PaginationItem = PaginationItem;

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

@@ -0,0 +1,10 @@
+
+import { UniversalPaginationItemProps } from "../../../types/dist/index.cjs";
+import * as _$react from "react";
+
+//#region src/components/client/Pagination/PaginationItem.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+type PaginationItemProps = UniversalPaginationItemProps & HtmlButtonProps;
+declare const PaginationItem: _$react.ForwardRefExoticComponent<UniversalPaginationItemProps & HtmlButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { PaginationItem, type PaginationItemProps };

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

@@ -0,0 +1,11 @@
+
+"use client";
+import { UniversalPaginationItemProps } from "../../../types/dist/index.js";
+import * as _$react from "react";
+
+//#region src/components/client/Pagination/PaginationItem.d.ts
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+type PaginationItemProps = UniversalPaginationItemProps & HtmlButtonProps;
+declare const PaginationItem: _$react.ForwardRefExoticComponent<UniversalPaginationItemProps & HtmlButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { PaginationItem, type PaginationItemProps };