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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { cloneElement } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { range } from "../utils/helpers.js";
import { useClasses } from "./DotPagination.styles.js";
import { staticClasses } from "./DotPagination.styles.js";
import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
const currentStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 8 }, children: /* @__PURE__ */ jsx("div", {}) });
const otherStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 4 }, children: /* @__PURE__ */ jsx("div", {}) });
const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
  return {
    radio: cloneElement(radioIcon || otherStep, {
      className: classes?.icon
    }),
    radioChecked: cloneElement(radioCheckedIcon || currentStep, {
      className: classes?.icon
    })
  };
};
const 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: cx(classes.radioRoot, classes.radio),
          value: i,
          checked: page === i,
          onChange: (event) => onPageChange?.(event, i),
          icon: icons.radio,
          checkedIcon: icons.radioChecked,
          inputProps: { "aria-label": getItemAriaLabel?.(i) }
        },
        i
      ))
    }
  );
};
export {
  HvDotPagination,
  staticClasses as dotPaginationClasses
};