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