koval-ui/dist/src/lib/Number/NumberPercent.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as l } from "react/jsx-runtime";
import { forwardRef as p, useMemo as x } from "react";
import N from "classnames";
import { useBrowserLocale as b } from "../../internal/locale/useBrowserLocale.js";
import D from "./Number.module.css.js";
import { SignDisplayModes as S, Styles as w, LocaleMatchers as y } from "./types.js";
const F = p(
  ({
    value: i,
    className: u,
    locale: e,
    localeMatcher: t = y["best fit"],
    digitsConfig: m = {
      integer: {
        minimum: 1
      },
      significant: {
        minimum: 1,
        maximum: 21
      },
      fraction: {}
    },
    grouping: n,
    signDisplay: r = S.auto,
    ...s
  }, o) => {
    const f = b(), a = e || f, c = x(
      () => i ? new Intl.NumberFormat(a, {
        localeMatcher: t,
        style: w.percent,
        minimumIntegerDigits: m.integer?.minimum,
        minimumFractionDigits: m.fraction?.minimum,
        minimumSignificantDigits: m.significant?.minimum,
        maximumSignificantDigits: m.significant?.maximum,
        maximumFractionDigits: m.fraction?.maximum,
        useGrouping: n,
        signDisplay: r
      }).format(i) : "",
      [
        m.fraction?.maximum,
        m.fraction?.minimum,
        m.integer?.minimum,
        m.significant?.maximum,
        m.significant?.minimum,
        n,
        a,
        t,
        r,
        i
      ]
    );
    return i && /* @__PURE__ */ l(
      "span",
      {
        ...s,
        title: c,
        className: N(D.number, u),
        ref: o,
        children: c
      }
    );
  }
);
F.displayName = "NumberPercent";
export {
  F as NumberPercent
};
//# sourceMappingURL=NumberPercent.js.map