@hitachivantara/uikit-react-core/dist/cjs/FormElement/CharCounter/CharCounter.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const setId = require("../../utils/setId.cjs");
const context = require("../context.cjs");
const CharCounter_styles = require("./CharCounter.styles.cjs");
const Typography = require("../../Typography/Typography.cjs");
const HvCharCounter = (props) => {
  const {
    separator = "/",
    maxCharQuantity,
    currentCharQuantity = 0,
    classes: classesProp,
    className,
    id: idProp,
    disabled: disabledProp,
    disableGutter,
    ...others
  } = uikitReactUtils.useDefaultProps("HvCharCounter", props);
  const { classes, cx } = CharCounter_styles.useClasses(classesProp);
  const context$1 = React.useContext(context.HvFormElementContext);
  const disabled = disabledProp ?? context$1.disabled;
  const id = idProp ?? setId.setId(context$1.id, "counter");
  const currentId = setId.setId(id, "currentQuantity");
  const maxQuantityId = setId.setId(id, "maxQuantity");
  const isOverloaded = currentCharQuantity > maxCharQuantity;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      id,
      className: cx(
        classes.root,
        {
          [classes.counterDisabled]: disabled,
          [classes.gutter]: !disableGutter
        },
        className
      ),
      "aria-live": "polite",
      "aria-disabled": disabled,
      ...others,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          Typography.HvTypography,
          {
            id: currentId,
            className: cx({
              [classes.overloaded]: isOverloaded && !disabled,
              [classes.counterDisabled]: disabled
            }),
            variant: "label",
            component: "label",
            children: currentCharQuantity
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          Typography.HvTypography,
          {
            id: maxQuantityId,
            className: cx({
              [classes.overloaded]: isOverloaded && !disabled,
              [classes.counterDisabled]: disabled
            }),
            variant: "body",
            component: "label",
            children: ` ${separator} ${maxCharQuantity}`
          }
        )
      ]
    }
  );
};
exports.charCounterClasses = CharCounter_styles.staticClasses;
exports.HvCharCounter = HvCharCounter;