@mantine/core/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getFontSize, getRadius, getSize } from "../../../core/utils/get-size/get-size.mjs";
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
import { createVarsResolver } from "../../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { getContrastColor } from "../../../core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.mjs";
import { getAutoContrastValue } from "../../../core/MantineProvider/color-functions/get-auto-contrast-value/get-auto-contrast-value.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { Box } from "../../../core/Box/Box.mjs";
import { PaginationProvider } from "../Pagination.context.mjs";
import Pagination_module_default from "../Pagination.module.mjs";
import { usePagination } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Pagination/PaginationRoot/PaginationRoot.tsx
const defaultProps = {
	siblings: 1,
	boundaries: 1
};
const varsResolver = createVarsResolver((theme, { size, radius, color, autoContrast }) => ({ root: {
	"--pagination-control-radius": radius === void 0 ? void 0 : getRadius(radius),
	"--pagination-control-size": getSize(size, "pagination-control-size"),
	"--pagination-control-fz": getFontSize(size),
	"--pagination-active-bg": color ? getThemeColor(color, theme) : void 0,
	"--pagination-active-color": getAutoContrastValue(autoContrast, theme) ? getContrastColor({
		color,
		theme,
		autoContrast
	}) : void 0
} }));
const PaginationRoot = factory((_props) => {
	const props = useProps("PaginationRoot", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, total, value, defaultValue, onChange, disabled, siblings, boundaries, color, radius, onNextPage, onPreviousPage, onFirstPage, onLastPage, getItemProps, autoContrast, startValue, attributes, ...others } = props;
	const getStyles = useStyles({
		name: "Pagination",
		classes: Pagination_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { range, setPage, next, previous, active, first, last } = usePagination({
		page: value,
		initialPage: defaultValue,
		onChange,
		total,
		siblings,
		boundaries,
		startValue
	});
	return /* @__PURE__ */ jsx(PaginationProvider, {
		value: {
			total,
			range,
			active,
			disabled,
			getItemProps,
			onChange: setPage,
			onNext: createEventHandler(onNextPage, next),
			onPrevious: createEventHandler(onPreviousPage, previous),
			onFirst: createEventHandler(onFirstPage, first),
			onLast: createEventHandler(onLastPage, last),
			getStyles
		},
		children: /* @__PURE__ */ jsx(Box, {
			...getStyles("root"),
			...others
		})
	});
});
PaginationRoot.classes = Pagination_module_default;
PaginationRoot.varsResolver = varsResolver;
PaginationRoot.displayName = "@mantine/core/PaginationRoot";
//#endregion
export { PaginationRoot };

//# sourceMappingURL=PaginationRoot.mjs.map