@hitachivantara/uikit-react-core/dist/DotPagination/DotPagination.js

UI Kit Core React components.

import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
import { range } from "../utils/helpers.js";
import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
import { useClasses } from "./DotPagination.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { cloneElement } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/DotPagination/DotPagination.tsx
var currentStep = /* @__PURE__ */ jsx("div", {
	style: { fontSize: 8 },
	children: /* @__PURE__ */ jsx("div", {})
});
var otherStep = /* @__PURE__ */ jsx("div", {
	style: { fontSize: 4 },
	children: /* @__PURE__ */ jsx("div", {})
});
var getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
	return {
		radio: cloneElement(radioIcon || otherStep, { className: classes?.icon }),
		radioChecked: cloneElement(radioCheckedIcon || currentStep, { className: classes?.icon })
	};
};
/**
* Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.
* This component uses Radio Buttons to represent each page.
*/
var HvDotPagination = (props) => {
	const { className, classes: classesProp, unselectedIcon, selectedIcon, pages = 1, page = 0, onPageChange, getItemAriaLabel, ...others } = useDefaultProps("HvDotPagination", props);
	const { classes, cx } = useClasses(classesProp);
	const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
	return /* @__PURE__ */ jsx(HvRadioGroup, {
		className: cx(classes.root, className),
		classes: { horizontal: classes.horizontal },
		orientation: "horizontal",
		...others,
		children: range(pages).map((i) => /* @__PURE__ */ jsx(HvBaseRadio, {
			className: classes.radio,
			value: i,
			checked: page === i,
			onChange: (event) => onPageChange?.(event, i),
			icon: icons.radio,
			checkedIcon: icons.radioChecked,
			inputProps: { "aria-label": getItemAriaLabel?.(i) }
		}, i))
	});
};
//#endregion
export { HvDotPagination };